@charset "utf-8";

html {-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-y:scroll;background:#fff;}
body{font-family: "Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;line-height:1.5;min-width:320px;letter-spacing:0.05em;}
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}
ul li{list-style:none;}
img{vertical-align:top;width:100%;height:auto;}
a{color:#333;text-decoration:none;display:block;}
a:hover{text-decoration:underline;}
.no-touchevents .btn a{opacity:1;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;}
.no-touchevents .btn a:hover{opacity:0.8;}


.wrapper{position:relative;min-width:761px;overflow-x:hidden;overflow-y:hidden;}
.innerWrapper{width:100%;margin:0 auto;}



section{position:relative;width:100%;max-width:1920px;/*overflow-x:hidden;*/font-size:20px;margin:0 auto;}
#top{width:100%;max-width:1920px;position:relative;z-index:1;}
#top h2{position:absolute;top:20px;right:20px;width:200px;height:72px;}

#supplier{background:#000;padding:20px 0;}
#supplier h3{text-align:center;color:#fff;font-size:23px;font-weight:normal;letter-spacing:0.05em;}

#about{padding:50px;}
#about h4{width:calc(100% - 100px);}

#campaign h4{width:80%;max-width:840px;margin:0 auto 4em;}

#campaign .present,
#campaign .access,
#campaign .detail,
#campaign .howto{max-width:1098px;width:90%;margin:0 auto 5em;}
#campaign h5{background:#0f357a;color:#fff;font-size:36px;text-align:center;padding:5px 0;}
#campaign ul{border:3px solid #0f357a;display:flex;flex-wrap:wrap;}
#campaign ul li{width:100%;border-bottom:3px solid #0f357a;box-sizing:border-box;margin:0 auto;}
#campaign ul li figure{max-width:1080px;margin:5px auto;}
#campaign ul li:nth-child(2){width:100%;border-bottom:0;}

#campaign .access,
#campaign .detail,
#campaign .howto{border:3px solid #0f357a;box-sizing:border-box;}

#campaign .access figure{width:80%;max-width:840px;margin:1em auto;}
#campaign .detail figure{width:84%;max-width:876px;margin:1em auto;}
#campaign .howto .stepWrapper{display:flex;flex-wrap:wrap;align-items:center;color:#0f357a;}
#campaign .howto .stepWrapper p{font-size:30px;font-weight:bold;max-width:50%;}
#campaign .howto h5{width:100%;}
#campaign .howto .image{width:50%;}
#campaign .howto .p{width:40%;}
#campaign .howto figure{width:80%;max-width:440px;margin:1em auto;}
#campaign .attention p{width:90%;margin:2em auto;line-height:1.75em;font-weight:bold;color:#0f357a;}
#campaign .attention figure{width:90%;max-width:976px;margin:0 auto 1em;}
#campaign .attention figure + figure{margin-bottom:3em;}
#campaign .howto span.tul_y {display:inline;background: linear-gradient(transparent 60%, #ffff00 0%);padding-bottom: 0.25em;}

#terms{text-align;center;}
#terms .btn{font-weight:bold;font-size:36px;border:3px solid #003686;background:#fff;border-radius:36px;height:72px;line-height:72px;text-align:center;position:relative;margin:1em auto 2em;}
#terms .btn a{color:#003686;letter-spacing:0.1em;text-decoration:none;}
#terms .btn:before{content:"";background:#e5f3fa;border-radius:36px;width:100%;height:100%;display:block;position:absolute;top:15px;left:0;z-index:-1;}
#terms .btn:after,
#shops .btn3:after{content:"";width:0;height:0;border-style:solid;border-width: 14px 0 14px 26px;border-color: transparent transparent transparent #003686;display:block;position:absolute;right:2%;top:50%;transform:translateY(-50%);}
#terms p{font-size:30px;text-align:center;font-weight:bold;}
#terms .btn.btn2{height:112px;line-height:112px;border-radius:56px;background:#ffff00;margin:1em auto 1em;}
#terms .btn.btn2 a{font-size:50px;}
#terms .btn.btn2:after,
#shops .btn3:after{border-width:21px 0 21px 40px;}

#terms,
#shops,
#contact{width:90%;max-width:1098px;margin:0 auto;padding:20px 0;text-align:center;margin: 0 auto;}

#shops h6,
#contact h6{font-size:42px;font-weight:bold;text-align:center;position:relative;padding:10px;color:#003686;}
#shops h6:before,
#contact h6:before{content:"";width:100%;height:3px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:#003686;z-index:-1;}
#shops h6 span,
#contact h6 span{display:inline-block;padding:0 20px;background:#fff;}

#shops .btn3{font-weight:bold;font-size:36px;border:3px solid #003686;background:#fff;height:112px;line-height:112px;text-align:center;position:relative;margin:1em auto 2em;}
#shops .btn3:before{content:"";background:#e5f3fa;width:100%;height:100%;border-left:3px solid #e5f3fa;border-right:3px solid #e5f3fa;display:block;position:absolute;top:20px;left:-3px;z-index:-1;}
#shops .btn3 a{color:#003686;letter-spacing:0.1em;text-decoration:none;}
#shops p{font-size:36px;color:#003686;font-weight:bold;}
#shops p.annote{font-size:20px;font-weight:normal;margin:0 auto 2.5em;color:#000;}


#termsofuse.content_inner{max-width:900px;margin:0 auto;background:#fff;padding:0 0 0 20px;border:1px solid #000;}
#termsofuse.content_inner{width:calc(100% - 20px);}
#termsofuse dd a{display:inline-block;text-decoration:underline;}
#termsofuse .btn3{width:678px;height:112px;border-radius:56px;line-height:112px;margin:50px auto;}
#termsofuse .btn3 a{font-size:28px;color:#fff;}
#termsofuse .textArea{height:32vw;margin:20px auto 20px;overflow-y:scroll;font-size:20px;-webkit-overflow-scrolling:touch;padding:0px 20px 0 10px;word-break:break-all;text-align:justify;color:#000;font-size:14px;min-height:70vh;margin:0 auto;padding:0 20px 20px 0;}
#termsofuse h4{margin:2em auto 0;text-align:center;font-size:120%;}
#termsofuse .textArea .terms_lead{padding:20px 0 0;line-height:1.5em;font-weight:bold;font-size:110%;}
#termsofuse .textArea dl{display:block;margin:0 auto 30px;line-height:1.6em;}
#termsofuse .textArea dl dt{margin-top:20px;font-weight:700;}
#termsofuse .textArea dl dd{margin-top:10px;padding-left:0.5em;}
#termsofuse .textArea ul li.idt{text-indent:-1.1em;padding-left:1.1em;}
#termsofuse .textArea ul+h5{margin-top:1.5em;}

#termsofuse ::-webkit-scrollbar {background:#fff;}
#termsofuse ::-webkit-scrollbar-thumb {background:#0088ce;border:2px solid #fff;}

.remodal{padding:30px 5px;background:transparent;}

#contact{margin:1em auto 3em;}
#contact p.tal{text-align:left;font-weight:bold;font-size:36px;line-height:1.5em;margin:1em auto;color:#0f357a;}
#contact p .fs34{font-size:34px;}

#shop{text-align:center;}
#shop #shopList{padding-bottom:5em;}
#shop h2{font-size:33px;text-align:center;width:90%;margin:2em auto 1em;}
#shop h2 + p{font-size:21px;max-width:90%;display:inline-block;margin:0 auto 3em;text-align:right;}
#shop p .tar{font-size:16px;font-weight:normal;}
#shop .shopWrapper{max-width:1000px;width:94%;margin:0 auto;position:relative;text-align:left;}
#shop .shopWrapper h4{width:100%;width:calc(100% - 24px);padding:0 12px;border-bottom:1px solid #0088ce;margin:3em auto 0.5em;font-size:30px;line-height:50px;cursor:pointer;position:relative;}
#shop .shopWrapper h4:hover{background:#0088ce;color:#fff;}
#shop .shopWrapper h4:after{content: "▲";width:30px;height:30px;position: absolute;top:10px;right: 0px;font-size: 60%;line-height:30px;text-align: center;transform:rotateZ(180deg);transition:transform .3s;}
#shop .shopWrapper h4.open:after{transform:rotateZ(0deg);}
#shop .shopWrapper ul{margin:0 auto;padding:20px 0%;width:100%;}
#shop .shopWrapper ul li{font-size:90%;line-height:1.5em;border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;padding:10px 12px;margin:0.5em auto 1em;justify-content:center;}
#shop .shopWrapper ul li h3{width:100%;font-weight:500;position:relative;text-align:center;}
#shop .shopWrapper ul li:last-child{/*border-bottom:none;*/}
#shop .shopWrapper ul li:hover{background:#eee;}
#shop .shopWrapper ul li p.address{width:76%;}
#shop .shopWrapper ul li p.tel{width:12%;min-width:120px;}
#shop .shopWrapper ul li p.hp{width:8%;}
#shop .shopWrapper ul li .pcode{display:inline-block;padding-right:1em;}
#shop .shopWrapper ul li .pcode:before{content:"〒";}
#shop .shopWrapper ul li .address,
#shop .shopWrapper ul li .tel{font-size:90%;}
#shop .shopWrapper ul li .nohp{color:#999;}
#shop .shopWrapper ul li .hp a{font-size:84%;}
#shop .shopWrapper ul li span.annote_only{font-size:60%;font-weight: 500;color: #888;display: inline-block;margin-left: 1.5em;}
/*#shop .shopWrapper ul li h3.name:before{content:"";display:block;width:0;height:0;position:relative;float:right;}
#shop .shopWrapper ul li.alpha h3.name:before{content:" ";width:48px;height:23px;background:url(../img/ft_alpha_logo.png) no-repeat;background-size:contain;right:0px;top:4px;margin-left:10px;}*/



.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;overflow:hidden;font-size:0.1em;line-height:0;}
.clearfix {zoom:1;}

.imgpc{display:block;}
.imgsp{display:none;}
.imgsp2{display:none;}
.ibpc{display:inline-block;}
.brpc{display:block;}
.brsp{display:none;}
.br640{display:none;}
.ctpc{display:block;}
.ctsp{display:none;}

.spcr{-webkit-touch-callout:none;-webkit-user-select:none;}
.spcr:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/spacer.png) no-repeat;background-size:cover;z-index:999;}


@media screen and (max-width:1024px) {/* ---------------------------------- */
section{font-size:2vw;}
#supplier h3{font-size:2.75vw;}
#campaign .howto .stepWrapper p,
#terms p{font-size:2.75vw;}
#campaign h5,
#terms .btn,
#shops .btn3,
#shops p,
#contact p.tal{font-size:3vw;}
#contact p .fs34{font-size:2.8vw;}
#shops h6,
#contact h6{font-size:4.25vw;}
#terms .btn.btn2 a{font-size:5vw;}
#shops p.annote{font-size:2vw;}
#shop h2 + p{font-size:2.4vw;}
#shop p .tar{font-size:1.75vw;}
}
@media screen and (max-width:820px) {/* ---------------------------------- */
#supplier p br{display:none;}
}
@media screen and (max-width:768px) {/* ---------------------------------- */
	html{overflow-y:auto;}
	.wrapper{min-width:320px;}
	
	#top h2{width:25%;top:2%;right:2%;}
	#supplier{padding:15px 0;}
	#supplier h3{font-size:3.25vw;}
	#about{padding:2%;}
	#about h4{width:96%;}
	#campaign h4{margin-top:1.5em;width:90%;}
	#campaign ul li{width:100%;border-right:0;}
	#campaign ul li:nth-child(6){border-bottom:3px solid #000;}
	
	#terms .btn{height:8vw;line-height:8vw;}
	#shops .btn3,
	#terms .btn.btn2{height:12vw;line-height:12vw;}
	#terms .btn:after,
	#shops .btn3:after{border-width:2vw 0 2vw 3.75vw;}
	#terms .btn.btn2:after,
	#shops .btn3:after{border-width:3vw 0 3vw 5.6vw;}
	
	#termsofuse .textArea{font-size:11px;}
	
	#shop h2 + p{text-align:left;}
	#shop p .tar{display:block;text-align:right;}
	#shop .shopWrapper ul li{flex-wrap:wrap;border:1px solid #ccc;border-bottom:0;box-sizing:border-box;padding-bottom:5px;justify-content:start;margin:0;}
	#shop .shopWrapper ul li:last-child{border-bottom:1px solid #ccc;}
	#shop .shopWrapper ul li h3{width:100%;background:#eee;font-weight:bold;}
	#shop .shopWrapper ul li h3,
	#shop .shopWrapper ul li p{padding:5px 6px;}
	#shop .shopWrapper ul li p.address{width:100%;font-size:90%;padding-bottom:0;}
	#shop .shopWrapper ul li p.tel,
	#shop .shopWrapper ul li p.hp{width:50%;width:calc(50% - 12px);font-size:90%;}
	#shop .shopWrapper ul li .pcode{display:block;}
	
	.ctpc{display:none;}
	.ctsp{display:block;}
	.imgpc{display:none;}
	.imgsp{display:block;}
	.ibpc{display:none;}
	.brpc{display:none;}
	.brsp{display:block;}
}
@media screen and (max-width:640px) {/* ---------------------------------- */
	.br640{display:block;}
}
@media screen and (max-width:480px) {/* ---------------------------------- */
	section{font-size:2.4vw;}
	#campaign h5,
	#terms .btn,
	#shops .btn3,
	#shops p,
	#contact p.tal{font-size:3.6vw;}
	#shops h6,
	#contact h6{font-size:5vw;}
	#shops p.annote{font-size:2.4vw;}
	#campaign .access figure,
	#campaign .detail figure{width:92%;}
	#campaign .howto .image{width:45%;}
	#campaign .howto .stepWrapper p{font-size:3vw;}
	#terms p{font-size:3.2vw;}
	#campaign .howto .stepWrapper p br{display:none;}
	#contact p .fs34{font-size:3.2vw;}
	#terms .btn:before,
	#shops .btn3:before{top:10px;}
	#terms .btn.btn2:after,
	#shops .btn3:after{border-width:2.5vw 0 2.5vw 4.5vw;}
	
	#shop h2{font-size:5vw;}
	#shop h2 + p{font-size:3.6vw;margin:0 auto;}
	#shop p .tar{font-size:2.4vw;}
	#shop .shopWrapper h4{font-size:5.4vw;}
	#shop .shopWrapper ul li{font-size:4vw;padding:10px 10px 5px;}
}
@media screen and (max-width:374px) {/* ---------------------------------- */
}
@media print{
	.noprnt{display:none;}
}