/* ==============================================
main
============================================== */


/* --------------------------------------
mainVisual 
-------------------------------------- */


.section__mainVisual {
	margin-top: 80px;
	height: 80vh;

	position: relative;
	/* z-index: 10; */
}

.mainVisual__slider {
	width: 100%;
	height: 100%;
}

.mainVisual__01 {
	background-image: url(../img/main_image_top_01_SP.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mainVisual__02 {
	background-image: url(../img/main_image_top_02_SP.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mainVisual__03 {
	background-image: url(../img/main_image_top_03_SP.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.mainVisual__04 {
	background-image: url(../img/main_image_top_04_SP.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mainVisual__05 {
	background-image: url(../img/main_image_top_05_SP.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom: -40px;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	background: #fff;
	color: #fff;
	opacity: 0.8;
	box-shadow: 0 0px 2px #232D42;
	margin: 0 12px;
}

/*アクティブなときのスタイル*/
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: #F15016;
	color: #fff;
	opacity: 0.8;
	box-shadow: 0 0px 2px #232D42;
	margin: 0 12px;
}


.mainVisual__heading {
	color: #FFF;
	text-shadow: 0 0 4px #232D42;
	text-align: center;

	font-family: "Zen Old Mincho";
	font-size: 3.6rem;
	font-weight: 900;
	line-height: 1.0;

	white-space: nowrap;

	/* 
	position の基準は左上なので、50% だと下がりすぎる
	画像の半分のサイズだけ戻す
	*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.mainVisual__logo {
	width: 320px;
	height: 166px;
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 2;
}

.backgroundBorder {
	width: 100%;
	height: 100px;

	background-image: url(../img/bg_01_border.png);
	background-repeat: repeat-x;
	background-position: bottom;

	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 2;

}


/* ---------- PC ---------- */
@media screen and (min-width:769px) {

	.section__mainVisual {
		margin-top: 100px;
	}

	.mainVisual__logo {
		width: 600px;
		height: 311px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.mainVisual__01 {
		background-image: url(../img/main_image_top_01_PC.jpg);
	}

	.mainVisual__02 {
		background-image: url(../img/main_image_top_02_PC.jpg);
	}

	.mainVisual__03 {
		background-image: url(../img/main_image_top_03_PC.jpg);
	}

	.mainVisual__04 {
		background-image: url(../img/main_image_top_04_PC.jpg);
	}

	.mainVisual__05 {
		background-image: url(../img/main_image_top_05_PC.jpg);
	}

	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 16px;
	}

	/*アクティブなときのスタイル*/
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
		margin: 0 16px;
	}

	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}

	.mainVisual__heading {
		color: #FFF;
		text-shadow: 0 0 8px #232D42;
		text-align: center;

		font-family: "Zen Old Mincho";
		font-size: 6.4rem;
		font-weight: 900;
		line-height: 1.0;

		white-space: nowrap;

		/* 
		position の基準は左上なので、50% だと下がりすぎる
		画像の半分のサイズだけ戻す
		*/
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}


/* --------------------------------------
news 
-------------------------------------- */

.section__topNews {
	background-image: url(../img/bg_01.jpg);
	background-repeat: repeat;
	background-position: center;
}

.news__topNews {
	margin-top: 40px;

}

.section__heading__topNews {
	text-align: center;
}

.contentsArea__topNews {
	padding: 60px 20px;
	width: 100%;
	height: 100%;
}

/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.news__topNews {
		margin-top: 0px;
	}

	.section__heading__topNews {
		white-space: nowrap;
	}

	.contentsArea__topNews {
		padding: 120px 20px;
		margin: 0 auto;
		max-width: 1040px;

		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 40px;
	}

	.topNews__wrap {
		width: 100%;
	}
}

/* --------------------------------------
about
-------------------------------------- */

.section__about {
	background-color: #CABCB5;
	position: relative;
}

.contentsArea__about {
	padding: 60px 20px;

	position: relative;
	z-index: 2;
}

.section__heading__about {
	text-align: center;
}

.char_x {
	font-family: "Zen Kaku Gothic New";
	font-size: 2.8rem;
	font-weight: 700;
	font-style: normal;
}

.about_description {
	margin-top: 40px;
	padding: 0px 0 20px;
}

.about__imgList {
	width: 100%;
	/* 
	width: 390px;
	height: 877px; 
	*/
	aspect-ratio: 390 / 877;

	position: relative;
}

.about__imgItem {
	border: 2px solid #FFF;
	box-sizing: border-box;
}

.about__imgItem::before {
	/* デフォルトではインライン要素 */
	display: block;
	/* 文字がない場合、空文字を指定 */
	content: "";

	width: 100%;
	height: 100%;

	position: absolute;
	top: 10px;
	left: 10px;
	border: 1px solid #232D42;
	z-index: -1;
}

.about__imgItem__01 {
	/* 
	width: 300px;
	height: 240px; 
	*/
	width: 76%;

	position: absolute;
	/* 
	left: 37px 
	top: 20px; 
	*/
	left: 9.4%;
	top: 2.2%;
}

.about__imgItem__02 {
	/* 
	width: 280px;
	height: 280px; 
	*/
	width: 71.7%;

	position: absolute;
	/* 
	right: 47px 
	top: 317px;
	*/
	right: 12.0%;
	top: 36.1%;
}

.about__imgItem__03 {
	/* 
	width: 300px;
	height: 200px; 
	*/
	width: 76.9%;

	position: absolute;
	/* 
	left: 22px; 
	top: 647px; 
	*/
	left: 5.6%;
	top: 73.7%;
}


.bgPattern__about__01 {
	left: 0;
	/* top: 276px; */
	top: 28%;
}

.bgPattern__about__02 {
	right: 0;
	bottom: 0%;
}


/* ---------- PC ---------- */
@media screen and (min-width:769px) {

	.contentsArea__about {
		padding: 120px 20px;
		margin: 0 auto;
		max-width: 1040px;
	}

	.char_x {
		font-size: 3.6rem;
	}

	.about_description {
		margin-top: 80px;
		padding: 0px 0px 40px 0;
	}

	.about__imgList {
		width: 100%;
		/* 
		width: 1000px;
		height: 425px; 
		*/
		aspect-ratio: 1000 / 425;
	}

	.about__imgItem::before {
		/* デフォルトではインライン要素 */
		display: block;
		/* 文字がない場合、空文字を指定 */
		content: "";

		width: 100%;
		height: 100%;

		position: absolute;
		top: 10px;
		left: 10px;
		border: 1px solid #232D42;
		z-index: -1;
	}

	.about__imgItem__01 {
		/* 
		width: 300px;
		height: 240px; 
		*/
		width: 30%;

		/* 
		left: 25px 
		top: 20px; 
		*/
		left: 2.5%;
		top: 4.7%;
	}

	.about__imgItem__02 {
		/* 
		width: 280px;
		height: 280px; 
		*/
		width: 28%;

		/* 
		left: 345px 
		top: 115px; 
		*/
		left: 34.5%;
		top: 27.0%;
	}

	.about__imgItem__03 {
		/* 
		width: 300px;
		height: 200px; 
		*/
		width: 30.0%;

		position: absolute;
		/* 
		left: 665px; 
		top: 56px;
		*/
		left: 66.5%;
		top: 13.1%;
	}


	.bgPattern__about__01 {
		left: 0;
		top: 0;
	}

	.bgPattern__about__02 {
		right: 0;
		bottom: 0;
	}



}

/* --------------------------------------
recommend
-------------------------------------- */

.section__recommend {
	background-image: url(../img/bg_01.jpg);
	background-repeat: repeat;
	background-position: center;

	position: relative;
	overflow: hidden;
}

.contentsArea__recommend {
	padding: 60px 20px;
}



.bgImage__01 {
	width: 208px;
	height: 208px;

	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;

	background-image: url(../img/bg_image_01.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.bgImage__02 {
	width: 238px;
	height: 167px;

	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;

	background-image: url(../img/bg_image_02.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.bgImage__03 {
	width: 180px;
	height: 158px;

	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;

	background-image: url(../img/bg_image_03.png);
	background-repeat: no-repeat;
	background-size: cover;
}


.recommend__wrap {
	margin-top: 80px;
	position: relative;
}

.recommend__wrap__top {
	margin-top: 0;
}

.recommend__container {
	position: relative;
	z-index: 2;
}

.section__heading__recommend__02 {
	text-align: right;
}

.section__txt__recommend__02 {
	text-align: right;
}

.recommends {
	position: relative;
}

.recommends__imgItem {
	box-sizing: border-box;

	border: 2px solid #FFF;
	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.recommends__imgItem figure img {
	width: 100%;
	height: 100%;
}


/* 1 つ目 */

.recommends__01 {
	margin-top: 20px;
	width: 100%;
	/* 
	width: 350px;
	height: 659px; 
	*/
	aspect-ratio: 350 / 659;
}


.recommends__imgItem__01 {
	/* 
	width: 280px;
	height: 153px; 
	*/
	width: 80.0%;

	position: absolute;
	/* 
	left: 6px; 
	top: 20px; 
	*/
	left: 1.7%;
	top: 3.0%;
}

.recommends__imgItem__02 {
	/* 
	width: 280px;
	height: 186px; 
	*/
	width: 80%;

	position: absolute;
	/* 
	left: 49px; 
	top: 213px; 
	*/
	left: 14%;
	top: 32.3%;
}

.recommends__imgItem__03 {
	/* 
	width: 250px;
	height: 200px; 
	*/
	width: 71.4%;

	position: absolute;
	/* 
	left: 21px; 
	top: 439px; 
	*/
	left: 6%;
	top: 66.6%;
}

/* 2 つ目 */

.recommends__02 {
	margin-top: 20px;
	width: 100%;
	/* 
	width: 350px;
	height: 480px; 
	*/
	aspect-ratio: 350 / 480;
}

.recommends__imgItem__04 {
	/* 
	width: 180px;
	height: 200px; 
	*/
	width: 57.1%;

	position: absolute;
	/* 
	right: 0px: 
	top: 20px; 
	*/
	right: 0%;
	top: 4.1%;
}

.recommends__imgItem__05 {
	/* 
	width: 300px;
	height: 200px; 
	*/
	width: 85.7%;

	position: absolute;
	/* 
	top: 260px; 
	left: 0*/
	top: 54%;
	left: 0%;
}

.btn__food {
	margin-top: 20px;
}



/* 3 つ目 */
.recommends__03 {
	margin-top: 20px;
	width: 100%;
	/* 
	width: 350px
	height: 460px; 
	*/
	aspect-ratio: 350 / 460;
}

.recommends__imgItem__06 {
	/* 
	width: 250px;
	height: 200px; 
	*/
	width: 71.4%;

	position: absolute;
	/* 
	left: 14px;
	top: 20px; 
	*/
	left: 5.7%;
	top: 4.3%;
}

.recommends__imgItem__07 {
	/* 
	width: 270px;
	height: 180px; 
	*/
	width: 77.1%;

	position: absolute;
	/* 
	left: 62px;
	top: 260px; 
	*/
	left: 17.7%;
	top: 56.5%;
}

.btn__drink {
	margin-top: 20px;
}

/* ---------- PC ---------- */
@media screen and (min-width:769px) {

	.contentsArea__recommend {
		padding: 120px 20px;
		margin: 0 auto;
		max-width: 1040px;
	}

	.bgImage__01 {
		width: 383px;
		height: 382px;
	}

	.bgImage__02 {
		width: 500px;
		height: 351px;
	}

	.bgImage__03 {
		width: 375px;
		height: 329px;
	}


	.recommend__wrap {
		margin-top: 80px;
	}

	.recommend__container__recommend__02 {
		margin-left: auto;
		max-width: 797px;
	}

	.section__heading__recommend__02 {
		text-align: left;
	}

	.section__txt__recommend__02 {
		text-align: left;
	}


	/* 1 つ目 */
	.recommends__01 {
		margin-top: 20px;
		width: 100%;
		/* 
		width: 1000px;
		height: 528px; 
		*/
		aspect-ratio: 1000 / 528;
	}


	.recommends__imgItem__01 {
		/* 
		width: 380px;
		height: 208px; 
		*/
		width: 38.0%;

		/* 
		left: 69px; 
		top: 20px; 
		*/
		left: 6.9%;
		top: 3.7%;
	}

	.recommends__imgItem__02 {
		/* 
		width: 358px;
		height: 240px; 
		*/
		width: 35.8%;

		/* 
		left: 489px; 
		top: 133px; 
		*/
		left: 48.9%;
		top: 25.1%;
	}

	.recommends__imgItem__03 {
		/* 
		width: 300px;
		height: 240px; 
		*/
		width: 30.0%;

		/* 
		left: 149px; 
		top: 267px; 
		*/
		left: 14.9%;
		top: 50.5%;
	}

	/* 2 つ目 */
	.recommends__02 {
		margin-top: 20px;
		/* 
		width: 797px; 
		height: 280px; 
		*/
		aspect-ratio: 797 / 280;
	}


	.recommends__imgItem__04 {
		/* 
		width: 217px;
		height: 240px; 
		*/
		width: 27.2%;

		/* 
		left: 175px; 
		top: 20px;
		*/
		left: 21.9%;
		top: 7.1%;
	}

	.recommends__imgItem__05 {
		/* 
		width: 360px;
		height: 240px; 
		*/
		width: 45.1%;

		left: auto;
		/* 
		left: 432px;
		top: 20px; 
		*/
		left: 54.2%;
		top: 7.1%;
	}

	.btn__food {
		width: 360px;
		margin: 20px auto 0;
	}



	/* 3 つ目 */
	.recommends__03 {
		margin-top: 20px;
		width: 100%;
		/* 
		width: 1000px;
		height: 280px; 
		*/
		aspect-ratio: 1000 / 280;
	}

	.recommends__imgItem__06 {
		/* 
		width: 300px;
		height: 240px; 
		*/
		width: 30.0%;

		/* 
		left: 134px; 
		top: 20px; 
		*/
		left: 13.4%;
		top: 7.1%;
	}

	.recommends__imgItem__07 {
		/* 
		width: 360px;
		height: 240px; 
		*/
		width: 36.0%;

		/* 
		left: 474px; 
		top: 20px; 
		*/
		left: 47.4%;
		top: 7.1%;
	}

	.btn__drink {
		width: 360px;
		margin: 20px auto 0;
	}


}

/* --------------------------------------
scene
-------------------------------------- */

.section__scene {
	background-color: #CABCB5;

	position: relative;
	overflow: hidden;
}

.contentsArea__scene {
	padding: 60px 20px;

	position: relative;
	z-index: 2;
}

.section__heading__scene {
	text-align: center;

}

.scenes {
	margin-top: 40px;
	padding: 0px 0 20px;

	position: relative;
	z-index: 2;
}

.scenes__item {
	margin-top: 80px;
	padding-bottom: 0px;
}

.scenes__item__top {
	margin-top: 0px;
}

.scenes__imgItem {
	box-sizing: border-box;

	border: 2px solid #FFF;
	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.btn__scene {
	margin-top: 20px;
}

.bgPattern__scene__01 {
	left: 0px;
	top: 276px;
}

.bgPattern__scene__02 {
	right: 0px;
	bottom: 0px;
}


/* 1 つ目 */
.subsection__heading__scenes__01 {
	text-align: left;
}

.scenes__imgItem__01 {
	margin-top: 20px;
	/* 
	width: 240px; 
	height: 300px; 
	*/
	width: 68.5%;
}

/* 2 つ目 */
.subsection__heading__scenes__02 {
	text-align: right;
}

.scenes__imgItem__02 {
	margin: 20px 0 0 auto;
	/* 
	width: 240px; 
	height: 300px; 
	*/
	width: 68.6%;
}

/* 3 つ目 */
.subsection__heading__scenes__03 {
	text-align: left;
}

.scenes__imgItem__03 {
	margin-top: 20px;
	/* 
	width: 300px;
	height: 240px; 
	*/
	width: 85.7%;
}


/* ---------- PC ---------- */
@media screen and (min-width:769px) {

	.contentsArea__scene {
		padding: 120px 20px;
		margin: 0 auto;
		max-width: 1040px;
	}

	.scenes {
		margin-top: 80px;
		padding: 0 0;
	}

	.scenes__item {
		margin-top: 80px;
		padding-bottom: 0;
	}

	.scens__item__box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		gap: 20px;
		align-items: flex-start;
	}

	.scens__item__box__reverse {
		flex-direction: row-reverse;
	}

	.box__img {
		flex-basis: 30%;
	}

	.box__txt {
		flex-basis: 70%;
	}

	.btn__scene {
		width: 360px;
		margin: 20px auto 0;
	}



	.bgPattern__scene__01 {
		left: 0px;
		top: 0px;
	}

	.bgPattern__scene__02 {
		right: 0px;
		bottom: 0px;
	}



	/* 1 つ目 */
	.subsection__heading__scenes__01 {
		margin-top: 0px;
		text-align: left;
	}

	.scenes__imgItem__01 {
		margin-top: 0px;
		width: 100%;
	}

	/* 2 つ目 */
	.subsection__heading__scenes__02 {
		margin-top: 0px;
		text-align: left;
	}

	.scenes__imgItem__02 {
		margin-top: 0px;
		width: 100%;
	}

	/* 3 つ目 */
	.subsection__heading__scenes__03 {
		margin-top: 0px;
		text-align: left;
	}

	.scenes__imgItem__03 {
		margin-top: 0px;
		width: 100%;
	}



}




/* --------------------------------------
seat
-------------------------------------- */

.section__seat {
	background-image: url(../img/bg_01.jpg);
	background-repeat: repeat;
	background-position: center;

	position: relative;
	overflow: hidden;
}

.contentsArea__seat {
	padding: 60px 0px;
	position: relative;
	z-index: 2;
}

.seat__wrap {
	margin-top: 40px;
	padding-bottom: 40px;
}

.seat__wrap__top {
	margin-top: 0px;
	padding: 0 20px;
}

.section__heading__seat {
	padding: 0 20px;
	text-align: left;
}

.seat__txt {
	padding: 0 20px;
}

.seats__imgItem {
	box-sizing: border-box;

	width: 100%;
	height: auto;
}

.seat__container {
	margin-top: 20px;
	padding: 0 20px;
}


/* ---------- PC ---------- */
@media screen and (min-width:769px) {

	.contentsArea__seat {
		padding: 120px 20px;
		margin: 0 auto;
		max-width: 1040px;
	}

	.seat__wrap {
		margin-top: 40px;
		padding-bottom: 0px;
	}

	.seat__wrap__top {
		margin-top: 0px;
		padding: 0 0;
	}

	.section__heading__seat {
		padding: 0 0px;
	}

	.seat__txt {
		padding: 0 0px;
	}

	.seat__item__box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		gap: 20px;
		align-items: flex-start;
	}

	.seats__item__box__reverse {
		flex-direction: row-reverse;
	}

	.seats__imgItem {
		flex-basis: 50%;

		box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
	}

	.seat__container {
		margin-top: 0;
		padding: 0 0;

		flex-basis: 50%;
	}

}