@charset "utf-8";

/*===============================================
●共通
===============================================*/
/* imageContents
---------------------------------------- */
.imageContents {
	width: 100%;
	position: relative;
}
.imageContents .imageBox {
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.imageContents .imageBox:after {
	content: "";
	width: 100%;
	display: block;
}
.imageContents .textWrapper a {
	display: block;
	text-decoration: none;
}
.imageContents .textWrapper {position: absolute;}
.imageContents .lBox .textBox {background-color: #17234D;}
.imageContents .rBox .textBox {background-color: #9fa0a0;}
.imageContents .textBox h3 {
	color: #fff;
	line-height: 1.2em;
	text-align: center;
	margin-bottom: 0.7em;
	font-family: "FOT-筑紫明朝 Pr6 L";
}
.imageContents .textBox .btn03 a {
	min-width: 150px;
	max-width: 300px;
}
.imageContents .textBox p {
	color: #FFF;
	text-align: center;
}

/* infoBox
---------------------------------------- */
#infoBox {border-bottom: #17234D 1em solid;}
#infoBox .textBox table th,
#infoBox .textBox table td {
	line-height: 1.4em;
	padding-bottom: 1em;
	vertical-align: top;
}
#infoBox .textBox table th {width: 6em;}
#infoBox .image span {
	display: block;
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#infoBox .image span:after {
	display: block;
	content: "";
	width: 100%;
}

/* chefBox
---------------------------------------- */
#chefBox {border-bottom: #17234D 1em solid;}
#chefBox section {background-color: #17234D;}
#chefBox .textBox h3,
#chefBox .textBox p,
#chefBox .textBox a {
	color: #fff;
	text-decoration: none;
}
#chefBox .textBox h3 span {
	display: inline-block;
	font-size: 0.65em;
	vertical-align: bottom;
}

#chefBox .textBox a .icon-instagram { margin-right: 0.5em;}

/* youtube
---------------------------------------- */
.youtube {
	width: 100%;
	height: 100%;
	position: relative;
}
.youtube:after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 58%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
}

/* otherShop
---------------------------------------- */
#otherShop ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#otherShop ul li {
	position: relative;
	margin-right:5%;
}
#otherShop ul li:after {
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	right: -8.5%;
	border-right: #ddd 1px solid;
}
#otherShop ul li:last-child {margin-right: 0;}
#otherShop ul li:last-child:after {height: 0;}
#otherShop ul li a {
	display: block;
	text-decoration: none;
}
#otherShop ul li a span {
	display: block;
	text-align: center;
	padding-top: 1em;
	font-family: "aktiv-grotesk", "FOT-筑紫ゴシック Pr5 M";
}

.bbq .tit05 {padding:0!important;}


/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
		/* leadBox
	---------------------------------------- */
	#leadBox {
		padding: 3em 0 6em;
		border-bottom: #17234D 1.5em solid;
	}
	#leadBox header {
		width: 100%;
		padding: 0 10px;
		margin: 0 auto;
	}
	
	/* imageContents
	---------------------------------------- */
	.imageContents {border-bottom: none!important;}
	.imageContents .imageBox:after {padding-top: 70%;}
	.imageContents .lBox,
	.imageContents .lBoxblack,
	.imageContents .rBox,
	.imageContents .rBoxblack {
		position: static;
		width: 100%;
	}
	.imageContents .textBox {
		padding: 20px;
		background-color: #17234D!important;
	}
	.imageContents .textBox h3 {font-size: 1.3em;}
	.imageContents .textBox .btn03 a {margin: 0 auto;}
	.contentsBorder01 {border-bottom: #17234D 1em solid;}
	
	/* infoBox
	---------------------------------------- */
	#infoBox {padding: 5em 0 0;}
	#infoBox .textBox {padding-bottom: 3em;}
	#infoBox .image {margin: 0 -1em;}
	#infoBox .image span:after {padding-top: 53.3%;}
	body.confiture #infoBox {border-top: #17234D 1em solid;}
	
	/* chefBox
	---------------------------------------- */
	#chefBox {padding: 4em 2em;}
	#chefBox section:nth-child(1) {margin-bottom: 2em;}
	#chefBox .textBox {
		padding: 30px;
		text-align: center;
	}
	#chefBox .textBox h3 {
		font-size: 1.28em;
		margin-bottom: 0.7em;
	}
	#chefBox .textBox p {
		line-height: 1.7em;
		text-align: center;
	}
	
	/* otherShop
	---------------------------------------- */
	#otherShop {padding: 4em 1em;}
	#otherShop ul li {
		width: 47.5%;
		margin-bottom: 2em;
	}
	#otherShop ul li:after {right: -6%;}
	#otherShop ul li:nth-child(even) {margin-right: 0;}
	#otherShop ul li:nth-child(even):after {display: none;}

	/* bbq
	---------------------------------------- */
	.bbq .catch{font-size: 1.15em!important;} 
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* leadBox
	---------------------------------------- */
	#leadBox {
		padding: 8em 0 6em;
		border-bottom: #17234D 1.5em solid;
	}
	#leadBox header {
		width: 100%;
		max-width: 1080px;
		padding: 0 10px;
		margin: 0 auto;
	}
	
	/* imageContents
	---------------------------------------- */
	.imageContents .imageBox:after {padding-top: 48%;}
	.imageContents .textWrapper {
		width: 100%;
		max-width: 1080px;
		padding: 0 10px;
		left: 50%;
		top: 10%;
		margin-left: -50%;
	}
	.imageContents .textBox {
		width: 40%;
		min-width: 320px;
		padding: 3.5em 2.5em;
	}
	.imageContents .rBox .textBox,.imageContents .rBoxblack .textBox {float: right;}
	.contentsBorder01 {border-bottom: #17234D 1.5em solid;}
	.contentsBorder02 {border-bottom: #17234D 7em solid;}
	.imageContents .textBox h3 {font-size: 1.7em;}
	.imageContents .lBoxblack .textBox,
	.imageContents .rBoxblack .textBox {
		background-color: #000;
		opacity: 0.85;
	}
	.textWrapper .textBox h3.imageCatch {font-size: 1.42em;}
	
	/* infoBox
	---------------------------------------- */
	#infoBox {border-top: #17234D 1em solid;}
	#infoBox .textBox {
		width: 50%;
		float: left;
		padding: 5%;
	}
	#infoBox .image {
		width: 50%;
		float: left;
	}
	#infoBox .image span:after {padding-top: 100%;}
	#infoBox .btn02 button,
	#infoBox .btn02 a {
		max-width: 100%;
	}
	
	/* chefBox
	---------------------------------------- */
	#chefBox {padding: 5em 10px;}
	#chefBox section {
		width: 100%;
		text-align: center;
		max-width: 960px;
		padding: 0;
		margin: 0 auto 2em;
		align-items: center;
	}
	#chefBox section:last-child {margin-bottom: 0;}
	#chefBox .textBox {
		width: 70%;
		padding: 3em;
		text-align: left;
	}
	#chefBox .textBox h3 {
		font-size: 1.28em;
		margin-bottom: 1.5em;
	}
	#chefBox .textBox p {
		line-height: 1.7em;
	}
	#chefBox .image {width: 30%;}
	#chefBox .lImage .image,
	#chefBox .rImage .textBox {float: left;}
	#chefBox .lImage .textBox,
	#chefBox .rImage .image {float: right;}

	/* otherShop
	---------------------------------------- */
	#otherShop {
		width: 100%;
		max-width: 1080px;
		padding: 8em 10px;
		margin: 0 auto;
	}
	#otherShop ul li {
		width: 30%;
		margin-bottom: 2em;
	}
	/* 飲食店リストのみ並び順を変更 */
	#otherShop.foodShopList ul li:first-child {order: 1;}
	#otherShop.foodShopList ul li:nth-child(2) {order: 4;}
	#otherShop.foodShopList ul li:nth-child(3) {order: 2;}
	#otherShop.foodShopList ul li:nth-child(4) {order: 5;}
	#otherShop.foodShopList ul li:nth-child(5) {order: 3;}
	#otherShop.foodShopList ul li:nth-child(6) {order: 6;}
	#otherShop.foodShopList ul li:nth-child(5),
	#otherShop.foodShopList ul li:nth-child(6) {margin-right: 0;}
	#otherShop.foodShopList ul li:nth-child(5):after,
	#otherShop.foodShopList ul li:nth-child(6):after {display: none;}
	
	/* bbq
	---------------------------------------- */
	.bbq .catch{font-size: 1.5em!important;} 
	
}

/*===============================================
●画面の横幅が1080px以上(PCのみ)
===============================================*/
@media screen and (min-width: 1080px){
	
	/* imageContents
	---------------------------------------- */
	.imageContents .textWrapper {margin-left: -38.5em;}
	
}