@charset "UTF-8";
/* CSS Document */

#container{
	width:100%;}


/**ロゴ**/	
#logos{
	width:100%;
	margin: 3% auto;}
	
#logos ul {
  text-align: center;
}

#logos li {
  display: inline-block;
  vertical-align:middle;
  padding: 0 30px;
}

/**タイトル**/	
#app_title{
	margin:0 auto;
	padding:6% 0 3%;
	background: #fdd000;
	text-align:center;}

#app_title h1{
	margin-bottom: 5%;
}



/**リニューアル**/
.renewal{
	text-align: center;
	margin: 3% 0 0;
	
}

.renewal p{
	margin-bottom: 5%;
}

/**メインビジュアル**/
#main {
    text-align: center;
    margin: 0 0 6%;
    padding-bottom: 6%;
    background: #edebe9;
}
	
#main ul{
	margin:0 auto;
	display: table;}
	
#main li{
	display: table-cell;
	vertical-align:top;
	width:48%;}
	
#main li img{
	width:95%;}

#main p.btn{
	margin-bottom: 2%;
}
	
/**キャンペーン**/
#campaign{
	width:100%;
	margin:0 auto 10% auto;
	text-align:center;}
	
#campaign ul{
	margin:0 auto;
	display: table;}
	
#campaign li{
	display: table-cell;
	vertical-align:top;
	width:48%;}
	
#main li img{
	width:95%;}

/**汎用BOXとテキスト**/
.cont_box{
	width: 100%;
	text-align: center;
	margin: 0 0 5%;
}

.cont_box p{
	margin-bottom: 1%;
	line-height: 150%;
}

.txt_big{
	font-size: 36px;
	font-weight: 700;
}

.txt_middle{
	font-size: 28px;
	font-weight: 700;
}

.txt_pink_big{
	font-size: 20px;
	font-weight: 600;
	color: #c24c97;
	padding-top: 2%;
}



/**動画**/
.movie{
	width:853px;
	margin:0 auto;
	margin-bottom:5%;
	}
	
.movie iframe{
	width: 100%;
	}

/**コンテンツ**/
.point {
	margin:0 auto;
	text-align:center;}

.point p{
	margin-bottom:7%;}
	
/**マイルの貯め方・会員ランクについて**/
#mile{
	width:100%;
	margin-bottom:6%;}

#mile .cont{
	max-width: 850px;
	margin:0 auto;
	margin-bottom:4%;}

#mile h4{
	font-size: 26px;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
}

#mile .cont .txt{
	padding:3% 0 1% 0;
	font-size:20px;
	line-height:200%;}
	
#mile p{
	margin-bottom: 0 !important;}
	
	
#mile .cont .txt2 { 
	padding:1% 0 1% 0;
	font-size:20px;
	line-height:200%;
	text-align:center;
}
#mile .cont .bold {
	font-weight: bold;
}

#mile table {
	width: 100%;
	border-collapse: collapse;
	background-color: #FFF;
}

#mile th,#mile td{
	font-size: 20px;
	border: 1px solid #000;
	padding: 10px 15px;
}

#mile th{
	background-color: #e6e6e6;
}

#mile .godetail{
	width:100%;
	text-align:center;
	margin-top:2%;}

#mile .indent {
	text-indent: -1em;
	margin-left: 1em;
}

#mile .btn{
	width: 100%;
	text-align: center;
	margin-top: 5%;
}
	
/**対象ショップ**/
#shop{
	width:100%;
	margin-bottom:6%;}
	
#shop ul {
	width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


	
/**フッター**/	
#footer{
	width:100%;
	margin-top:3%;
	background:#ccc;
	padding:5% 0;
	}


	
/**フッターボタン**/	
#footer_btn {
	font-size: 24px;
	color: #000;
	background: #fdd000;
	width:100%;
	margin-top:-5%;
	margin-bottom:3%;}
	
#footer_btn a {
	color: #000;
}
	
#footer_btn ul {
	text-align: center;}

#footer_btn li {
	display: inline-block;
	padding: 10px 0;}

#footer_btn li:last-child {
	padding-left: 30px;}

#footer_btn li:last-child a{
	padding-left: 30px;
	border-left: 1px solid #000;}

/**フッターテキスト**/	
#spec{
	width:950px;
	margin:0 auto;
	color:#000;}

/**アプリダウンロード**/
.app_dl {
	text-align:center;
	margin-top:3%;
	margin-bottom:5%;}

.app_dl p{
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 2%;
}
	
.app_dl ul{
	margin:0 auto;
	display: table;}
	
.app_dl li{
	display: table-cell;
	vertical-align:top;
	width:48%;}
	
.app_dl li img{
	width:95%;}

/**毎日スクラッチ**/
.scratch,
.campaign{
	text-align: center;
	margin: 3% 0 0;
}

/**WAON連携終了のお知らせ*/
a.waonend{
	color: #000;
	font-weight: 600;
	text-decoration: underline
}

a.waonend:hover{
	color: #c24c97;
}

	
@media screen and (min-width: 481px) {
.sp {display: none;}
}
	
@media screen and (max-width: 480px) {

.pc {display: none;}
	
/**ロゴ**/	
#logos{
	width:100%;
	margin-top:5%;}
	
#logos ul {
  text-align: center;}

#logos li {
  display: inline-block;
  vertical-align:middle;
  padding: 0 12px;
  width:15%;}


#logos img{
	width:100%;
	vertical-align:middle;}


/**タイトル**/		
#app_title img{
	max-width:90%;}
	
/**リニューアル**/
.renewal img{
		max-width:90%;}
	
/**毎日スクラッチ**/
.scratch img,
.campaign img{
	max-width:90%;}
	


/**メインビジュアル**/
#main img{
	max-width:90%;}
	
#main ul{
	width:90%;}
	
#main li img{
	width:100%;}
	
/**汎用BOXとテキスト**/
.cont_box{
	width: 90%;
	margin: 0 auto 10%;
}

.txt_big{
	font-size: 22px;
	font-weight: 700;
}

.txt_middle{
	font-size: 18px;
	font-weight: 700;
}
	
img.btn_other_service{
	width: 80%;
}

	
/*キャンペーン**/
#campaign img{
	width:90%;}
	
#campaign ul{
	display: block;}
	
#campaign li{
	display: block;
	padding: 10px 0;
	width:auto;}
	
#main li img{
	width:100%;}

/**動画**/
.movie{
	position: relative;
  width: 100%;
  padding-top: 56.25%;
	}
	
.movie iframe{
	position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
	}
	
	
/**コンテンツ**/
.point img{
	width:90%;}
	
/**マイルの貯め方・会員ランクについて**/
#mile .cont{
	padding: 0 5% 5% 5%;}

#mile h4{font-size: 22px;}
	
#mile .cont .txt{font-size:14px;}

#mile th,#mile td{
	font-size: 14px;
	padding: 5px 5px;
}

#mile .godetail{margin-top:20px;}
#mile .godetail img{width:50%;}

#mile .small{
	font-size:80%;
	line-height: 150%;}

#mile .btn img{
	width: 70%;
}
	
/**対象ショップ**/
#shop{
	width:100%;
	margin-bottom:6%;}
	
#shop ul {
	width: 90%;
	
}

#shop li {
  width:32%;
}

#shop img{
	width:100%;}
	 
	 
/**フッターボタン**/	
#footer_btn {
	font-size: 18px;}

/**フッターテキスト**/	
#spec{
	width:90%;
	margin:0 auto;
	margin-bottom:5%;
	font-size:12px;
	line-height:160%;}
	
	
/**アプリダウンロード**/

.app_dl p{
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 2%;
}
	
	
.txt_pink_big{
	font-size: 16px;
}
}