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

/***********************************************
									共 通 項 目
***********************************************/
hr { border:none; border-bottom:dashed 1px #DDD; margin:2.5rem auto; }


/***********************************************
									ヘ ッ ダ ー
*********************************************
.header { font-size: 0px;}
.header .row { align-items: center;}
.header .row p { font-size: 2.0vw; font-weight: 500;}
	
	@media(min-width:768px){
		.header .row p { font-size: 0.75rem;}
	}
	
	@media(min-width:992px){
		.header .row p { font-size: 0.9rem;}
	}
	
.eyecatch { font-size: 0px; position: relative; background: url("../img/bk.jpg") center/cover no-repeat;}
.eyecatch img { width: 100%;}

.howto { background-color:#CC3333;}
.howto p { font-size: 1.4rem; font-weight: 500; line-height: 1.6rem; color: #FEFEFE; text-align: center; border: solid 2px #FEFEFE; padding: 0.75rem; border-radius: 10px; letter-spacing: 2px; position: relative; transition: 0.4s;}
.howto p a { width: 100%; height: 100%; margin: 0; padding:0; position: absolute; top: 0; left: 0; display: block; text-indent: -9999px;}
.howto p:hover { background-color: #962317;}
	@media(min-width:768px){
		.howto p::before { content: url("../img/point.svg"); display: block; height: 2.8rem; width: 2.8rem; border-radius: 1.4rem; padding: 0; position: absolute; top: 50%; left: 0.5rem; transform: translateY(-50%);}
	}


/***********************************************
								バ ナ ー エ リ ア
***********************************************/
.bnrarea { padding: 1.0rem 0; border-bottom: dashed 1px #DDD;}
.bnrarea li { width: 33.3333333%; margin: 0; padding: 0.25rem; display: inline-block;}
.bnrarea li img { width: 100%; border: solid 1px #F9F9F9;}
	@media(min-width:992px){
		.bnrarea li { width: 20%;}
	}



/***********************************************
							コ ン テ ン ツ
***********************************************/
.content { padding-top: 2.0rem; padding-bottom: 2.0rem;}
.content h2 { font-size: 2.4rem; position: relative; text-indent: 1.375rem; margin: 0; padding: 0; font-weight: 700; margin-bottom: 0.5rem;}
.content h2::before { content: ""; display: block; width: 0.75rem; height: 80%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: #333;}

.content .icon { width: 100px; height: 100px; margin: 0; padding: 0; background-color: #36C; border-radius: 10px;}
.content .icon img { width: 100%;}
.content p {font-size:1.2em; font-weight: 400;  margin-top: 1.0rem; line-height: 1.8rem;}
.content p.caution { color: #FF0000; font-weight: 700;}
.content p.exp { font-size: 1.0rem; font-weight: 500; line-height: 1.4rem;}
.content p span { color: #FF0000;}
.content a:hover { text-decoration: underline;}

.content h3 {font-size: 2.4rem; font-weight: 700; margin-bottom: 0.5rem; position: relative; padding-left: 3.25rem;}
.content h3::before { content: url("../img/point.svg"); display: block; height: 2.8rem; width: 2.8rem; border-radius: 1.4rem; padding: 0; background-color: #CC3333; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

.content h4 { font-size:1.7rem; font-weight: 500;}

.content .btn { width: 100%; color:#FFF; text-align:center; background-color:#36C; padding: 0; margin:1.0rem auto 0 auto; border-radius:1.3rem; transition: 0.5s; position: relative; font-size: 1.0rem; line-height: 2.0rem;}
	@media(min-width:768px){
		.content .btn {font-size:1.6rem; line-height: 2.6rem;}
	}
.content .btn:hover { background-color: #4382FF;}
.content .btn a { width: 100%; height: 100%; margin: 0; padding: 0; display: block; position: absolute; top: 0; left: 0; text-indent: -9999px;}

#sticky { border: solid 1px #DDD; background-color: #F6F6F6; padding: 1.0rem; }
#sticky li { width: 100%; font-size: 1.0rem; line-height: 2.6rem; text-align: center; background-color: #CC3333; margin-bottom: 0.25rem; color: #FEFEFE; position: relative; transition: 0.4s; }
#sticky li:last-child { margin-bottom: 0;}
#sticky li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}
#sticky li:hover { background-color:#962317; }

#tentou, #takuhai, #syuttyou, #kiyaku, #faq { padding: 1.0rem 0;}

#tentou p.exp { text-align: center;}

.souhu  { width: 100%; text-align: center; padding:0; margin:2.0rem auto ;  }
.souhu > p { font-weight: 700; margin-bottom: 0.5rem;}
.souhu ul { padding:0.75rem 2.0rem ; border-left: double 7px #666; text-align: left; background-color: #EEE;  color: #444; font-style: italic; font-weight: 500; box-shadow: 3px 3px 0px #D0D0D0; list-style-type: circle;}
.souhu ul li{ font-size: 1.0rem; padding: 0.375rem 0; border-bottom: dashed 1px #666;}
.souhu ul li:last-child { border-bottom: none;}

#takuhai p.caution { text-align: center; font-size: 1.6rem; padding: 1.0rem 0;}
#takuhai p.exp { padding-left: 1.0rem; text-indent: -1.0rem; font-size: 0.95rem; margin-top: 0.25rem; }

#syuttyou p.caution { padding-left: 1.0rem; text-indent: -1.0rem; font-size: 1.0rem; margin-top: 0.25rem; line-height: 1.4rem;}


#point h2 { padding-left: 2.4rem; text-indent: -3.0rem; font-size: 2.2rem;}
#point h2::before { display: none;}
#point h2 span {color: #FBB03B;}

#point img { width: 100%; max-width: 400px;}

#point h4 { font-weight: 700; line-height: 3.0rem;}

#point p span { font-weight: 700;}

#point .link { width: 100%; margin:1.0rem 0; }
#point .link span { display: inline-block; margin: 0 0.5rem 0 0; padding:0 1.0rem; text-align: center; background-color: #CC3333; position: relative; font-size: 1.2rem; line-height: 2.0rem; font-weight: 400; color: #FEFEFE; border-radius: 10px; transition: 0.4s; max-width: 33.33333333%;}
#point .link span:hover { background-color: #962317;}
#point .link span a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}

#kiyaku h2 { font-size: 2.0rem;}
#kiyaku h2 span { font-size: 1.6rem;}
#kiyaku p span { font-weight: 500; color: #FF0000;}
#kiyaku .terms { padding:0 ; list-style-type: circle; list-style-position: inside; }
#kiyaku .terms li{ font-size: 1.0rem; font-weight: 400; line-height: 1.5rem; padding: 0.5rem 0; border-bottom: dashed 1px #666; padding-left: 1.5rem; text-indent: -1.5rem; margin-bottom: 0;}
#kiyaku .terms li span { color: #FF0000; font-weight: 500; }
#kiyaku h4 { font-size: 1.45rem; font-weight: 700; }

#faq h2 { font-size: 2.0rem;}
#faq h2 span { font-size: 1.6rem;}
#faq p span { font-weight: 500; color: #FF0000;}
#faq .terms { padding:0 ; list-style-type: circle; list-style-position: inside; }
#faq .terms li{ font-size: 1.0rem; font-weight: 400; line-height: 1.5rem; padding: 0.5rem 0; border-bottom: dashed 1px #666; padding-left: 1.5rem; text-indent: -1.5rem; margin-bottom: 0;}
#faq .terms li span { color: #FF0000; font-weight: 500; }
#faq h4 { font-size: 1.45rem; font-weight: 700; }

/***********************************************
							店 舗 情 報
*********************************************
.shopinfo { background-color: #CC3333; color: #FEFEFE; padding-top: 2.0rem; padding-bottom: 2.0rem;}
.shopinfo h4 { font-size:1.4rem; font-weight:bold; text-align: center;}
.shopinfo a, .shopinfo a:visited { color: #FEFEFE;}
.shopinfo a:hover { color: #FFF000;}

.shopinfo p { font-size: 0.9rem; border-bottom: dashed 1px #FEFEFE; padding-bottom: 0.25rem; margin-bottom: 0.25rem;}
.shopinfo p span { font-size: 0.6rem;}
.shopinfo p span[class^="icon-"] { font-size: 1.3rem; display: inline-block; margin-right: 0.25rem; vertical-align: text-bottom;}
.shopinfo img { margin-bottom: 0.5rem;}



/***********************************************
								フ ッ タ ー
********************************************
.footer { width:100%;  background: url("../img/bk.jpg") top/cover no-repeat; color:#FFF; text-align:center; font-size:0.7rem; line-height:1.2rem;}


/***********************************************
								規 約
***********************************************/
div.kiyaku{  width:100%; margin:0 auto; font-size:12px; text-align:left; line-height:1.5em; text-shadow: 1px 1px 2px #ccc; }
div.kiyaku > p{ font-size:16px; font-weight:700; margin:30px auto 5px; }	
	

ul.kiyaku > li, ul.kobutsu > li, ul.att > li, ul.not > li{  border-bottom:dotted 1px #000; font-size: 0.9rem; line-height: 1.5rem;  padding: 0.8rem 0;}
ul.kiyaku > li {text-indent: -0.8rem; padding: 0.8rem;}

ul.att > li > a{color:#39C;}
ul.att > li > a:hover{text-decoration:underline;}

ul.not > li > span{font-weight:800;}


/***FAQ**/
.faq{ width:100%; margin:0 auto; font-size:12px; text-align:left; line-height:1.5em; text-shadow: 1px 1px 2px #ccc; }
.faq > p{ font-size:16px; font-weight:700;  margin: 0.8rem 0 0 0; }

ul.faq > li { text-indent: -0.8rem; padding:0.25rem 0.8rem;}
ul.faq > li.q{ font-size: 16px; margin-bottom:5px; font-weight:700; padding-top: 0.8rem; 	}
ul.faq > li.a{ border-bottom:dotted 1px #000; font-size: 0.9rem; line-height: 1.5rem; padding-bottom: 0.8rem; }
ul.faq > li > a{color:#39C;}
ul.faq > li > a:hover{text-decoration:underline;}