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

/******************************************************************************************

	<css/common.css>

*******************************************************************************************/

/* リンク */
a:link {
	color: #3792bc;
	word-break: break-all;
}

a:visited {
	color: #389ebc;
}

a:hover {
	color: #de612e;
}

a:active {
	color: #de612e;
}

a:focus {
	color: #de612e;
	text-decoration: none;
}

/* 画像 */
.imghover:hover {
	opacity: 0.8;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.imghover:active {
	opacity: 0.5;
}

/* 仕切り線 */
hr {
	border-top: dotted 1px #c9caca;
	margin: 4px 0;
	padding: 0;
}


/* その他の共通設定は asset.css に記述 */


/*==========================================================================================

	// 全体

==========================================================================================*/
html {
	scroll-behavior: smooth;
}

body,
input,
button {
	font-family: "Noto Serif JP", serif;
	margin: 0;
	padding: 0;
	outline: none;
	font-size: 16px;
	font-size: clamp(1rem, 4.27vw, 2rem);
	line-height: 1.6;
	color: #111111;
}

body {
	position: relative;
	overflow-y: scroll;

	&::before {
		content: "";
		position: fixed;
		top: 0;
		height: 0;
		display: block;
		width: 100%;
		height: 100vh;
		background-color: #111111;
		background-image: url("../img/pc_bg.webp");
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -1;
	}
}

#TOP {
	position: relative;
	margin: auto;
	max-width: 750px;
	background-color: #ffffff;
}

.pcShow {
	display: block;
}

.spShow {
	display: none;
}

@media (max-width: 768px) {
	.pcShow {
		display: none;
	}

	.spShow {
		display: block;
	}
}

.section01 {
	position: relative;

	.logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		padding: 40px 20px;
		background-color: rgba(255, 255, 255, 0.8);

		img {
			width: 200px;
			width: clamp(12.5rem, 53.33vw, 25rem);
		}
	}
}

@keyframes anime1 {
	from {
		transform: translate(-50%, -50%) scale(0.9, 0.9);
	}

	to {
		transform: translate(-50%, -50%) scale(1, 1);
	}
}

.menu {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 70px;
	padding-bottom: clamp(4.375rem, 18.67vw, 8.75rem);
}

#FOOD.menu {
	background-image: url(../img/food_bg.webp);
}

#DRINK.menu {
	background-image: url(../img/drink_bg.webp);
}

.menulink a {
	display: block;
}

.info {
	position: relative;
	background-color: #ffffff;
	background-image: url(../img/info_bg.webp);
	background-size: 100px auto;
	overflow: hidden;

	.ttl {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.cont {
		padding: 30px 0 0;
		padding: clamp(1.875rem, 8vw, 3.75rem) 0 0;

		.img {
			margin-top: 16px;
			text-align: center;

			img {
				width: 140px;
				width: clamp(8.75rem, 37.33vw, 17.5rem);
			}
		}

		dl {
			margin-top: 40px;
			margin-top: clamp(2.5rem, 10.67vw, 5rem);
			padding: 0 30px;

			dt {
				font-size: 18px;
				font-size: clamp(1.125rem, 4.8vw, 2.25rem);
				letter-spacing: 1.6px;
			}

			dd {
				margin-top: 16px;
			}
		}

		.infolink {
			margin-top: 30px;
			text-align: center;
		}

		.map {
			margin-top: 50px;
			margin-top: clamp(3.125rem, 13.33vw, 6.25rem);
			width: 100%;
			position: relative;
			padding-top: 56.25%;
			border-bottom: 2px solid #111111;

			iframe {
				width: 100%;
				height: 266px;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.menulink {
			margin-top: 40px;
			margin-top: clamp(2.5rem, 1.25rem + 5.33vw, 3.75rem);
		}
	}
}

.sns {
	position: relative;
	padding: 70px clamp(0.5rem, 2.13vw, 1rem) 60px;
	background-color: #ffffff;

	.insta {
		margin-top: 60px;
		text-align: center;

	}

	.anime {
		position: absolute;
		top: -18px;
		left: 16px;
		transform: rotate(-10deg);
	}
}

.footer {
	height: auto;
	background-color: #ffffff;
	background-image: url(../img/info_bg.webp);
	background-size: 100px auto;
	color: #111111;
	font-family: 'Dosis', sans-serif;
	border-top: solid 2px #111111;
	padding: 30px 0 100px;
	text-align: center;

	img {
		width: 78px;
		width: clamp(4.875rem, 2.875rem + 8.53vw, 6.875rem);
	}

	.copy {
		font-size: 11px;
		font-size: clamp(0.688rem, 2.93vw, 1.375rem);
	}
}


.headNav {
	position: sticky;
	top: 0;
	z-index: 100;
}

.yoyaku_ab_link {
	position: sticky;
	bottom: 20px;
	right: 20px;
	margin-left: auto;
	margin-right: 20px;
	width: 100px;
	width: clamp(6.25rem, 26.67vw, 12.5rem);
	z-index: 50;

	a {
		position: absolute;
		right: 0;
		bottom: 0;
		display: block;
	}
}


.modal {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 100;
	padding-left: 75px;

	.inner {
		overflow: auto;
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
		background-image: url(../img/modal_bg.webp);
		background-size: 100px auto;
		padding: 50px 20px 100px;

		.modal__nav {
			li {
				position: relative;
				margin-top: 32px;
				padding-left: 36px;
				font-size: 16px;
				font-weight: bold;
				cursor: pointer;

				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					display: inline-block;
					width: 20px;
					height: 1px;
					background-color: #111111;
				}

				span {
					font-family: 'Dosis', sans-serif;
					font-size: 14px;
					font-size: clamp(0.875rem, 3.73vw, 1.75rem);
					font-weight: bold;
					letter-spacing: 1.6px;
				}
			}
		}

		.insta {
			margin-top: 50px;
		}

		.link {
			margin-top: 50px;
		}
	}

	&.is-on {
		display: block;
	}

}

.openbtn {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	width: 64px;
	width: clamp(4rem, 17.07vw, 8rem);
	height: 64px;
	height: clamp(4rem, 17.07vw, 8rem);
	background-image: url(../img/modal_bg.webp);
	background-size: 100px auto;
	z-index: 111;

}

.openbtn span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 18px;
	left: clamp(1.125rem, 4.8vw, 2.25rem);
	height: 3px;
	height: clamp(0.188rem, 0.8vw, 0.375rem);
	border-radius: 2px;
	background: #111111;
	width: 45%;
}

.openbtn span:nth-of-type(1) {
	top: 18px;
	top: clamp(1.125rem, 4.8vw, 2.25rem);
}

.openbtn span:nth-of-type(2) {
	top: 29px;
	top: clamp(1.813rem, 7.73vw, 3.625rem);
}

.openbtn span:nth-of-type(3) {
	top: 41px;
	top: clamp(2.563rem, 10.93vw, 5.125rem);
}

/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span:nth-of-type(1) {
	top: 24px;
	top: clamp(1.5rem, 6.4vw, 3rem);
	left: 18px;
	left: clamp(1.125rem, 4.8vw, 2.25rem);
	transform: translateY(6px) rotate(-45deg);
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
	top: 36px;
	top: clamp(2.25rem, 0.625rem + 6.93vw, 3.875rem);
	left: 18px;
	left: clamp(1.125rem, 4.8vw, 2.25rem);
	transform: translateY(-6px) rotate(45deg);
}




.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 8px;
}

.swiper-pagination-bullet {
	background-color: #ffffff;
	opacity: 1;
}

.swiper-pagination-bullet-active {
	transform: scale(1.5);
}

.swiper-button-next,
.swiper-button-prev {
	top: calc(100% - 22px);
}

.swiper-button-next:after,
.swiper-button-prev:after {
	color: #ffffff;
	font-size: 13px;
}

.swiper2 {
	position: relative;

	.anime {
		position: absolute;
		top: 20px;
		z-index: 10;
		width: 100%;
		text-align: center;
	}
}