.index {

/* bg */
.bg-image-clip {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 230px;
	clip-path: inset(0);
	z-index: -1;
}

.bg-image-fixed {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url(/assets/img/bg_pc.webp);
	background-size: cover;
	background-position: center;
}

/* movie */
.fv-area {
	width: 100%;
	height: 100vh;
	margin: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	& h1 {
		position: absolute;
		inset: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		margin: 0;
		width: 380px;
		height: 318px;
	}
	& video {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.fv-ig-wrapper {
		position: absolute;
		z-index: 1;
		width: var(--container-width);
		bottom: 40px;
		display: flex;
		justify-content: flex-end;
	}
}

.content-inner {
	 background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 30% 70%, rgba(0, 0, 0, 1));
}

/* about */
#about {
	.content-inner {
		padding-block: 275px 250px;
	}
	.about-content ,
	.about-point {
		color: #ffffff;
		font-family: var(--font-yuji);
		writing-mode: vertical-rl;
		position: relative;
		z-index: 1;
	}
	.about-content {
		width: 100%;
		padding-top: 255px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 48px;
	}
	.about-title {
		font-size: var(--48px);
		padding-left: var(--40px);
		.sub-text {
			margin: 0.2em 0 0 0.8em;
		}
	}
	.about-catch,
	.about-text {
		padding-top: 120px;
	}
	.about-catch {
		font-size: var(--30px);
	}
	.about-text {
		font-size: var(--18px);
		line-height: 2.16;
		text-orientation: upright;
	}
	.about-img {
		margin-top: -407px;
	}
	.about-point {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 200px;
		max-width: var(--container-width);
		margin: -204px auto 0;
		@media (max-width: 820px) {
			flex-direction: column;
			gap: calc(328 / 780 * 100vw);
			max-width: 100%;
			writing-mode: horizontal-tb;
			padding: 0;
		}
	}
}

/* menu */
#menu {
	.content-inner {
		padding-block: 250px;
	}
	.menu-content-wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 100px;
	}
	.menu-content {
		order: 1;
		color: #ffffff;
		font-family: var(--font-yuji);
		position: relative;
		z-index: 1;
		width: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 75px;
	}
	.menu-title {
		writing-mode: vertical-rl;
		font-size: var(--48px);
		padding-left: var(--40px);
		.sub-text {
			margin: 0.2em 0 0 0.8em;
		}
	}
	.menu-text {
		writing-mode: vertical-rl;
		padding-top: 20px;
		font-size: var(--18px);
		line-height: 2.16;
		text-orientation: upright;
	}
	.menu-price {
		display: flex;
		flex-direction: column;
		width: 100%;
		border-top: 1px solid var(--color-light-gray);
		.menu-price-title,
		.menu-price-text {
			display: flex;
			justify-content: center;
			align-items: baseline;
			border-bottom: 1px solid var(--color-light-gray);
		}
		.menu-price-title {
			font-size: var(--20px);
			padding: 9px;
		}
		.menu-price-text {
			font-size: var(--20px);
			padding: 9px;
			& strong {
				font-size: var(--34px);
				font-weight: 400;
			}
		}
	}
	.gallery-column1 {
		order: 0;
	}
	.gallery-column3 {
		order: 2;
	}
}

/* shop */
#shop {
	.content-inner {
		padding-block: 250px;
	}
	.shop-content-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 100px;
		&:nth-child(2) {
			padding-top: 85px;
			justify-content: flex-start;
			gap: 60px;
		}
	}
	.shop-content {
		order: 0;
		color: #ffffff;
		font-family: var(--font-yuji);
		position: relative;
		z-index: 1;
		width: 540px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 75px;
	}
	.shop-title {
		writing-mode: vertical-rl;
		font-size: var(--48px);
		padding-right: var(--40px);
		.sub-text {
			margin: 0.2em 0 0 0.8em;
		}
	}
	.shop-text {
		writing-mode: vertical-rl;
		padding-top: 20px;
		font-size: var(--18px);
		line-height: 2.16;
		text-orientation: upright;
	}
	.gallery-column1 {
		order: 1;
		width: 960px;
	}
	.gallery-column2 {
		order: 2;
	}
	.gallery-column3 {
		order: 3;
	}
	.shop-content-wrapper:nth-child(2) {
		.shop-content {
			order: 1;
			color: #ffffff;
			font-family: var(--font-yuji);
			position: relative;
			z-index: 1;
			width: 580px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-start;
			gap: 48px;
		}
		.shop-sub-title {
			order: 1;
			writing-mode: vertical-rl;
			font-size: var(--30px);
			text-orientation: upright;
		}
		.shop-sub-text {
			order: 0;
			writing-mode: vertical-rl;
			padding-top: 95px;
			font-size: var(--16px);
			line-height: 2.25;
			text-orientation: upright;
		}
		.gallery-column1 {
			order: 0;
			width: 960px;
		}
		.gallery-column2 {
			order: 2;
			&.gallery-inner {
				width: 100%;
				gap: 40px;
				.gallery-img {
					width: 270px;
				}
			}
		}
		.gallery-column3 {
			order: 3;
		}
	}
}

/* access */
#access {
	.content-inner {
		padding-block: 250px;
	}
	.access-content {
		color: #ffffff;
		font-family: var(--font-yuji);
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		gap: 74px;
	}
	.access-title {
		writing-mode: vertical-rl;
		position: relative;
		font-size: var(--48px);
		padding-right: var(--40px);
		.sub-text {
			margin: 0.2em 0 0 0.8em;
		}
	}
	.access-map-wrapper {
		width: calc(100% - 220px);
		display: flex;
		flex-direction: column;
		gap: 25px;
		max-width: calc(var(--container-width) - 220px);
		margin: 0;
	}
	.access-map {
		width: 100%;
		aspect-ratio: 53 / 25;
		& iframe {
			width: 100%;
			height: 100%;
		}
	}
	.access-map-caption {
		font-family: var(--font-zen);
		font-size: var(--15px);
		line-height: 1.67;
	}
	.access-sub-title {
		font-size: inherit;
		line-height: inherit;
	}
	.access-sub-text + .access-sub-title {
		margin-top: 1.5em;
	}
}

/* contact */
#contact {
	.content-inner {
		padding-block: 250px;
	}
	.contact-content {
		color: #ffffff;
		font-family: var(--font-yuji);
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		align-items: flex-start;
		gap: 74px;
	}
	.contact-title {
		writing-mode: vertical-rl;
		position: relative;
		font-size: var(--48px);
		padding-right: var(--40px);
		.sub-text {
			margin: 0.2em 0 0 0.8em;
		}
	}
	.contact-detail-wrapper {
		width: calc(100% - 220px);
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 40px;
		max-width: calc(var(--container-width) - 220px);
		margin: 0;
	}
	.contact-img-wrapper {
		width: calc((100% - 60px) / 2);
		margin: 0;
	}
	.contact-text-wrapper {
		width: calc((100% - 20px) / 2);
		margin: 0;
		color: #ffffff;
		font-family: var(--font-zen);
		font-weight: 400;
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	.contact-sub-title {
		font-size: var(--30px);
		line-height: 1;
	}
	.contact-sub-text {
		font-size: var(--15px);
		letter-spacing: -0.01em;
		line-height: 1.67;
	}
	.contact-opening-hours-wrapper {
		margin-top: -8px;
	}
	.contact-opening-hours {
		font-size: var(--13px);
	}
}

}



/* loading */
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	transition: opacity 0.3s ease;
}
.count_wrap {
	width: 100%;
	text-align: center;
	font-weight: 400;
	font-family: var(--font-yuji);
	color: #ffffff
}
.progress_bar {
	width: 100%;
	height: 1px;
	margin-top: 10px;
	position: relative;
}
#progress_bar_count {
	height: 100%;
	left: 0;
	position: absolute;
	background-image: linear-gradient(-225deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 48%, rgba(255,255,255,1) 100%);
	width: 0%;
}
.progress_text {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 2em;
}

/* animation */
#movie {
	.fv-logo {
		transition: filter 3.6s 1.4s ease, opacity 3.6s 1.4s ease;
		filter: blur(15px);
		opacity: 0;
	}
}
main.visible {
	#movie {
		.fv-logo {
			filter: blur(0px);
			opacity: 1;
		}
	}
}