@charset "UTF-8";
* {
    margin:0 ;
    padding:0 ;
    }
body,html {
    height:100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    }
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: normal;
    word-break: break-all;
    -webkit-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important;
    position:relative;
    }
 a {
    text-decoration:none;
    cursor: pointer;
    }
a img {border:none;}
header{
    height:30px;
    border-bottom:2px solid #000;
    background-image: url(./res/bg_head.png);
}
footer{
    height:30px;
    border-top:2px solid #000;
    background-image: url(./res/bg_head.png);
}
.logoimg{
    width:500px;
    margin: 0 auto;
}
.footerlogo{
    width:300px;    
    margin:0 auto;
}
#Wrapper {
    margin:10px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    }
.intro{width:800px; margin:10px auto; line-height:2em;}
.intro p:first-child{font-size:120%; font-weight: bold; text-align:center;}
.download{background-color:#dedede; padding:10px 0;}
.DLinfoWrap{
    width:800px;
    margin:10px auto;
    }
.downloadTitle{text-align: center; font-weight: bold;}
    .downloadTitle + p{font-size:90%;line-height:2em;}
.DLbuttonWrap{
    width:600px;
    margin:0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  justify-content: space-between;
}
.appstore img,
.googleplay img{height:80px;}
.forappletext:before{
    content:"iPhoneをお持ちの方は左側の「App Storeからダウンロード」を";
}
.forgoogletext:before{
    content:"Androidをお持ちの方は右側の「Google playで手に入れよう」を";
}
.contTitle{
    margin-top:10px;
    padding:10px 0;
    background-color: #dbf991;
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    }
.contWrap{
    width:800px;
    margin: 0 auto;
}
.contImgWrap{
    width:80%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  justify-content: space-between; 
}
.contImgWrap img{
    width:300px;
    border-radius: 20px;
    border:2px solid  #000;
}
.contSubTitle{
    text-align:center;
    font-size:130%;
    font-weight: bold;
    margin:10px auto;
    border-bottom:2px solid #000
}
.conttext{
    margin:5px 0;
    line-height:2em;
}
.couponlisttitle{
    width:90%;
    margin:0 auto 10px auto;
    border-bottom:3px dotted #000;
    font-weight:bold;
}
.conttext ul{
    width:80%;
    margin: 0 auto;
    list-style:none;
}
.conttext li:before{
    content:url(./res/arrow.png);
    float:left;
    margin-right:3px;
}
.conttext ul:after{
    content: "";
    display: block;
    clear: both;
    }
.footerinfo{
    width:800px;
    margin:10px auto 3px auto;
    text-align:center;
}
.footerinfo img{display: block;}
.footerinclogo{width:200px;margin:15px auto;}
.footerinfo p{
        text-align:left;
        font-size:80%;
        color:#6e6e6e;
}
.footerinfo p:last-child{
    margin-top:10px;
    text-align:center;
    color:#000;
}
.kikanWrap{
    padding:15px 0;
    background-color: #dbf991;
    width:100%;
    border-bottom:3px dotted #000;
}
.kikan1,
.kikan2{
    width:800px;
    margin:0 auto;
}
.kikan1{text-align:center;font-weight:bold;font-size:120%;padding:10px 0;}
.kikan2{font-size: 90%;padding-bottom:10px; text-align: center;}


/*=======================================================================
    res
=======================================================================*/
@media screen and (max-width:800px){
/*res start-------------------------------*/
html,body{
    -webkit-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important;
    font-size:90%;
    }
.intro,
.DLinfoWrap,
.DLbuttonWrap,
.contWrap,
.footerinfo,
.kikan1,
.kikan2
{
    width:98%;
    margin:0 auto;
}
#Wrapper {width:100%;}
.intro{line-height:2em;}
.intro p:first-child{margin-top:10px; text-align:left;}
.download{margin:10px 0;}
.downloadTitle{text-align: center; font-weight: bold;}
.DLbuttonWrap{
    padding:15px 0 ;
    display: block;
    justify-content: none;
    text-align: center;
}
.appstore img,
.googleplay img{height:auto; width:200px;}
.forappletext:before{
    content:"iPhoneからご覧の方は上のボタン「App Storeからダウンロード」を";
}
.forgoogletext:before{
    content:"Androidからご覧の方は下のボタン「Google playで手に入れよう」を";
}
.contImgWrap{
    width:90%;
    height:100%;
    display: block;
    justify-content: none; 
}
.contImgWrap img{
    width:48%;
    height:auto;
    object-fit: contain;
    float:left;
    margin-right:1%;
    }
    .contImgWrap img:last-child{
    margin-right:0;
    }

.contImgWrap:after{
    content: "";
    display: block;
    clear: both;
}
.kikan2{text-align: left;}



}
@media screen and (max-width:500px){
    .logoimg{
        width:90%;
    }
    .footerlogo{
        width:70%;    
    }
}