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

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


/***********************************************
								ア イ キ ャ ッ チ
***********************************************/
.eyecatch { padding: 2.0rem 0;}
.eyecatch img  { width: 100%; margin: 0; padding: 0;}
.eyecatch a { margin: 0; padding: 0; line-height: 0; height: 0;}
.shop-name{ font-size: 16px; font-weight: bold; text-align: center; background: #888; color: #fff; line-height: 1.8;}

.intro { text-align: center;}
.intro h1 { font-size: 2.0rem; font-weight: 700; margin-bottom: 1.0rem;}
.intro p { line-height: 1.6rem; font-size: 1.8rem; font-weight: bold; color: #36C; }

.intro .branches { padding: 1.5rem 0;}
.intro .branches li { width: 33.333333%; margin: 0; padding: 0.25rem; font-size: 1.0rem; font-weight: 500; display: inline-block;}
.intro .branches li div {background-color: #36C; width: 70%; margin: 0 auto; border-radius: 10px; transition: 0.4s;}
.intro .branches li div:hover { background-color: #4382FF;}
.intro .branches li div:hover img { opacity: 1.0;}


/***********************************************
								ジ ャ ン ル
***********************************************/
.itemlist { background-color: #EEE; padding: 1.0rem 0; font-size: 0;}
.itemlist .container { display: flex; justify-content: space-between; flex-wrap: wrap;}
.itemlist p { text-align: center; font-size: 1.0rem; font-weight: 500; margin-bottom: 0.5rem; width: 100%;}
.itemlist img { width: calc(25% - 0.5rem); margin: 0; padding: 0; margin-bottom: 0.5rem;}
@media(min-width:576px){.itemlist img { width: calc(12.25% - 0.5rem); margin-bottom: 0;}}


/***********************************************
								バ ナ ー エ リ ア
***********************************************/
.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;  border-top: dashed 1px #CCC;}
.content h2 { font-size: 2.4rem; position: relative; margin: 0; padding: 0; font-weight: 700; margin-bottom: 0.5rem; padding-left: 1.375rem;}
.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-green  { width: 100%; color:#FFF; text-align:center; background-color: #32b16c; padding: 0; margin:1.0rem auto 0 auto; border-radius:1.3rem; transition: 0.5s; position: relative; font-size: 1.5rem; line-height: 3.0rem;}	
.content .btn-orange { width: 100%; color:#FFF; text-align:center; background-color: orange; padding: 0; margin:1.0rem auto 0 auto; border-radius:1.3rem; transition: 0.5s; position: relative; font-size: 1.5rem; line-height: 3.0rem;}
	@media(min-width:768px){
		.content .btn-green {font-size:1.6rem; line-height: 3.8rem;}
		.content .btn-orange {font-size:1.6rem; line-height: 3.8rem;}
	}
.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;}
.content .btn-green a{ width: 100%; height: 100%; margin: 0; padding: 0; display: block; position: absolute; top: 0; left: 0; text-indent: -9999px;}
.content .btn-orange 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: #36C; margin-bottom: 0.25rem; color: #FEFEFE; position: relative; transition: 0.4s; }
#sticky li.green{ background-color: #32b16c; }
#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:#4382FF; }

#tetou, #takuhai, #syuttyou, #kiyaku { 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;}

#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; }

/***********************************************
							店 舗 情 報
***********************************************/
.shop .venue { text-align: center; font-size: 1.6rem; font-weight: 500; }
.shop a, .shop a:visited { color: #333;}
.shop a:hover { text-decoration: none;}

.shop .info div[class^="col-"] { } 
.shop .info p { width: 100%; margin: 0; margin-bottom: 1.5rem; font-size: 1.2rem; padding:0.5rem 0; border-bottom: solid 1px #333;}
.shop .info p:last-child { margin-bottom: 0;}
.shop .info p span { font-size: 0.8rem; margin-right: 0.5rem; vertical-align: middle;}
.shop .info p span[class^="icon-"] { font-size: 1.6rem; }
.shop .info p a:hover{ color:#4382FF; }
    @media(min-width:768px){
        .shop .info p { text-align: left; font-size: 1.0rem; vertical-align: middle; padding:0.25rem 0; }
        .shop .info p span { font-size: 0.8rem;}
        .shop .info p span[class^="icon-"] { font-size: 1.7rem; }
        .shop .info .col-s-5 img { padding-right: 1.0rem;}
    }


/***********************************************
								フ ッ タ ー
***********************************************/
.footer {width: 100%; margin: 0; padding: 0;  background-color: #000; font-size: 0.8rem; color: #FEFEFE; line-height: 2.6rem; text-align: center;}


/***********************************************
								規 約
***********************************************/
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;}
*/

/***********************************************
							パ ー ツ
***********************************************/
.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
	margin-left: 3px;
	bottom: 1px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
/* 四角に右三角 */
.arrow-right-square::before{
	width: 14px;
	height: 14px;
	-webkit-border-radius: 25%;
	border-radius: 25%;
	background: #36C;
}
.arrow-right-square::after{
	left: 5px;
	box-sizing: border-box;
	width: 3px;
	height: 3px;
	border: 3px solid transparent;
	border-left: 5px solid #fff;
}
/* 丸に右三角（くの字）*/
.arrow-right-circle::before{
	width: 12px;
	height: 12px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #36C;
}
.arrow-ku-right-circle::after{
	left: 3px;
	width: 3px;
	height: 3px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* 下向き三角（くの字）*/
.arrow-ku-down::before{
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(135deg);
}