@charset "UTF-8";

*, *::before, *::after{ margin: 0; padding: 0; box-sizing: border-box; }
:root{
	--cream: #F5F0E8;
	--innerBase: 100%;
	--innerSmall: 60rem;
	--fontShippori: 'Shippori Mincho B1', 'Noto Serif JP', serif;
  --fontPuhu: "MFW-PPuhuSoireeMin2-B";
  --fontCG: 'Cormorant Garamond', serif;
  --fontNotoSans: 'Noto Sans JP', sans-serif;
	--fontNotoSerif: 'Noto Serif JP', serif;
	--fsXSmall: clamp(0.625rem, 1.2vw, 0.6875rem);
	--ivory: #FDFAF5;
	--gold: #B8972E;
	--gold-light: #D4AF5A;
	--gold-dark: #8B6F1E;
	--brown: #2C1810;
	--brown-mid: #5C3D2E;
	--brown-light: #8B6B5A;
	--door-wood: #3D2B1F;
	--door-wood-light: #5C4033;
}
@media screen and (min-width: 769px){
  :root{
    --innerBase: 80rem;
  }
}
html{
  height: 100%;
	scroll-behavior: smooth;
}
html, body{
	width: 100%;
	overflow-x: hidden;
	background: var(--cream);
	font-family: var(--fontNotoSans);
	color: var(--brown);
	overflow-x: hidden;
}
body::before{
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 18.75rem 18.75rem;
}


/* loader & doorOverlay */

.loaderWrap{
	position: fixed;
	inset: 0;
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	opacity: 1;
	transition: opacity 1s ease;
}
.loaderWrap.is-hide{
	opacity: 0;
	pointer-events: none;
}
.loaderText{
	font-family: var(--fontCG);
	font-size: 1rem;
	letter-spacing: 0.2em;
	color: var(--brown);
	display: flex;
	gap: 0.3em;
}
.loaderText span{
	opacity: 0;
	animation: loadingDots 1.4s infinite;
}
.loaderText span:nth-child(1){ animation-delay: 0s; }
.loaderText span:nth-child(2){ animation-delay: 0.1s; }
.loaderText span:nth-child(3){ animation-delay: 0.2s; }
.loaderText span:nth-child(4){ animation-delay: 0.3s; }
.loaderText span:nth-child(5){ animation-delay: 0.4s; }
.loaderText span:nth-child(6){ animation-delay: 0.5s; }
.loaderText span:nth-child(7){ animation-delay: 0.6s; }
@keyframes loadingDots{
	0%,20%{
		opacity: 0;
		transform: translateY(0);
	}
	40%{
		opacity: 1;
		transform: translateY(-0.2rem);
	}
	100%{
		opacity: 0;
		transform: translateY(0);
	}
}
#doorOverlay{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	pointer-events: none;
}
.doorPanel{
	width: 50%;
	height: 100%;
	background: var(--door-wood);
	position: relative;
	overflow: hidden;
	transition: transform 0.8s;
}
.doorPanel::before{
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(180deg, transparent 0rem, transparent 3rem, rgba(255,255,255,0.025) 3rem, rgba(255,255,255,0.025) 3.0625rem),
		repeating-linear-gradient(90deg, transparent 0rem, transparent 6.25rem, rgba(0,0,0,0.08) 6.25rem, rgba(0,0,0,0.08) 6.3125rem);
}
.doorPanel::after{
	content: '';
	position: absolute;
	inset: 6%;
	border: 1px solid var(--gold-dark);
	box-shadow: inset 0 0 0 0.375rem rgba(184,151,46,0.08), inset 0 0 0 0.5rem var(--door-wood-light);
}
.doorOrnamentWrap{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
}
.doorPanel.left .doorOrnamentWrap{ right: 1.5rem; }
.doorPanel.right .doorOrnamentWrap{ left: 1.5rem; }
.doorOrnLine{ width: 1px; height: 3rem; background: linear-gradient(to bottom, transparent, var(--gold-dark), transparent); }
.doorOrnDiamond{ width: 0.5rem; height: 0.5rem; background: var(--gold-dark); transform: rotate(45deg); }
.doorHandle{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.75rem;
	height: 3.25rem;
	background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
	border-radius: 0.375rem;
	box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.5);
}
.doorPanel.left .doorHandle{ right: -0.375rem; }
.doorPanel.right .doorHandle{ left: -0.375rem; }
#doorCenterLine{
	position: fixed;
	top: 0; left: 50%;
	width: 1px; height: 100%;
	background: linear-gradient(to bottom, var(--gold-dark), var(--gold), var(--gold-dark));
	z-index: 10000;
	transform: translateX(-50%);
	transition: opacity 0.8s;
}
#doorOverlay.open .doorPanel.left{ transform: translateX(-100%); }
#doorOverlay.open .doorPanel.right{ transform: translateX(100%); }
#doorOverlay.done{ display: none; }


/* nav */

header{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: var(--brown);
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
}
header.is-show{
	transform: translateY(0);
	opacity: 1;
}
header nav{
	max-width: var(--innerSmall);
	margin: 0 auto;
}
header ul{
	display: flex;
	justify-content: center;
  align-items: center;
  text-align: center;
	gap: 5vw;
	padding: 4vw 5vw 4.5vw;
	list-style: none;
}
header ul li{
  width: calc( 100% / 5 - 5vw);
}
header a{
	font-family: var(--fontNotoSerif);
	font-weight: 500;
	font-size: 2.9vw;
	letter-spacing: 0.12em;
	color: var(--ivory);
	text-decoration: none;
	position: relative;
}
@media screen and (min-width:769px){
	header{
		bottom: 0;
		transform: translateY(100%);
	}
	header.is-show{
		transform: translateY(0);
	}
	header nav{
		max-width: var(--innerSmall);
	}
	header ul{
		gap: 3rem;
		padding: 1.5rem 2rem 2rem;
	}
	header ul li{
		width: auto;
	}
	header a{
		font-size: 0.85rem;
		letter-spacing: 0.2em;
	}
	header a::after{
		content: '';
		position: absolute;
		left: 0;
		bottom: -0.3rem;
		width: 100%;
		height: 1px;
		background: var(--gold);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s;
	}
	header a:hover::after{
		transform: scaleX(1);
	}
}

/* mainVisual */

#mainVisual{
	position: relative;
	width: 100%;
  height: 100vh;
	height: 100svh;
	min-height: 37.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.mainVisualVideo{
	position: absolute;
	inset: 0;
	background: #3D3835;
}
.mainVisualVideo video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	will-change: opacity;
}
.mainVisualOverlay{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(20,12,8,0.15) 0%, rgba(20,12,8,0.3) 50%, rgba(20,12,8,0.52) 100%);
}
.mainVisualContent{
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#mainVisualCopy{
	font-family: var(--fontPuhu);
	font-size: 8.75vw;
	color: #fff;
	letter-spacing: 0.04em;
	line-height: 1.9;
	text-align: center;
	display: inline-block;
	padding-left: 2vw;
  text-shadow: 0 0.4vw 1vw rgba(44,24,16,0.8);
}
#mainVisualCopy span{
	display: block;
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.8s, transform 0.8s;
}
#mainVisualCopy .show{
	opacity: 1;
	transform: translateY(0);
}
#mainVisualTtl{
  width: 88vw;
  max-width: 35rem;
	display: none;
	opacity: 0;
  margin-top: -12vw;
	transform: translateY(0.625rem);
	transition: opacity 1s, transform 1s;
}
#mainVisualTtl.visible{
	opacity: 1;
	transform: translateY(0);
}
.scrollIndicator{
	position: absolute;
	bottom: 2.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0;
	transition: opacity 0.8s;
}
.scrollIndicator.visible{
	opacity: 1;
}
.scrollIndicator span{
	font-family: var(--fontCG);
	font-size: var(--fsXSmall);
	letter-spacing: 0.4em;
	color: rgba(253,250,245,0.9);
	text-transform: uppercase;
}
.scrollIndicator i{
	position: relative;
	display: block;
	width: 0.04rem;
	height: 2.75rem;
	background: rgba(253,250,245,0.2);
	overflow: hidden;
}
.scrollIndicator i::after{
	content: '';
	position: absolute;
	top: -35%;
	left: 50%;
	transform: translateX(-50%);
	width: 0.2rem;
	height: 50%;
	background: linear-gradient(to bottom, rgba(253,250,245,0), rgba(253,250,245,0.95), rgba(253,250,245,0));
	filter: blur(1px);
	animation: scrollLineFlow 2s ease-in-out infinite;
}
@keyframes scrollLineFlow{
	0%{
		top: -35%;
		opacity: 0;
	}
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
	100%{
		top: 100%;
		opacity: 0;
	}
}
@media screen and (min-width:769px){
	#mainVisualCopy{
		font-size: 3.75rem;
	}
  #mainVisualTtl{
    margin-top: 0;
  }
	.scrollIndicator i{
		width: 1px;
		height: 3rem;
		background: rgba(253,250,245,0.28);
	}
	.scrollIndicator i::after{
		width: 4px;
		height: 45%;
		filter: blur(1.5px);
	}
}
@media screen and (max-width: 768px) and (orientation: portrait){
	#mainVisual{
		height: auto;
		min-height: 0;
		aspect-ratio: 9 / 16;
	}
}


/* common */

.commonTtl{
	text-align: center;
	margin-bottom: 14vw;
	position: relative;
}
.commonTtl b{
	font-family: var(--fontCG);
	font-size: 2.9vw;
	letter-spacing: 0.4em;
	color: var(--gold);
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.5vw;
}
.commonTtl h2{
  font-family: var(--fontPuhu);
	font-size: 7.75vw;
	color: var(--brown);
	letter-spacing: 0.12em;
	margin-bottom: 6.5vw;
}
.divider{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}
.divider::before,
.divider::after{
	content: '';
	width: 5rem;
	height: 1px;
}
.divider::before{
	background: linear-gradient(to right, transparent, var(--gold));
}
.divider::after{
	background: linear-gradient(to left, transparent, var(--gold));
}
.divider p{
	display: flex;
	gap: 0.375rem;
	align-items: center;
	margin: 0;
}
.divider p span{
	width: 0.1875rem;
	height: 0.1875rem;
	background: var(--gold);
	border-radius: 50%;
}
.divider p span:nth-child(2){
	width: 0.3125rem;
	height: 0.3125rem;
}
@media screen and (min-width:769px){
	.commonTtl{
		margin-bottom: 3.5rem;
	}
	.commonTtl b{
		font-size: 0.75rem;
		letter-spacing: 0.4em;
		margin-bottom: 0.25rem;
	}
	.commonTtl h2{
		font-size: 2.25rem;
		font-weight: 300;
		letter-spacing: 0.12em;
		margin-bottom: 1.5rem;
	}
	.divider{
		gap: 0.75rem;
	}
	.divider::before,
	.divider::after{
		width: 5rem;
		height: 1px;
	}
	.divider p{
		gap: 0.375rem;
	}
	.divider p span{
		width: 0.1875rem;
		height: 0.1875rem;
	}
	.divider p span:nth-child(2){
		width: 0.3125rem;
		height: 0.3125rem;
	}
}


/* catchSection */

.catchSection{
	background: var(--ivory);
  text-align: center;
	padding: 15vw 8.5vw 15vw;
}
.catchInner{
	max-width: var(--innerSmall);
	margin: 0 auto;
}
.catchInner h4{
	font-family: var(--fontShippori);
	font-size: 3.5vw;
  font-weight: 500;
	color: var(--gold);
	letter-spacing: 0.2em;
  line-height: 1.5;
}
.catchInner h3{
  font-family: var(--fontPuhu);
	font-size: 6.75vw;
	color: var(--brown);
	letter-spacing: 0.06em;
  line-height: 1.5;
	margin: 3vw auto 6vw;
}
.catchInner h6{
	font-family: var(--fontShippori);
	font-size: 3.7vw;
	color: var(--brown);
	line-height: 2.3;
	letter-spacing: 0.08em;
	margin-top: 5vw;
}
.catchInner hgroup{
	margin-bottom: 9vw;
}
.catchInner h6 span{
  display: inline-block;
	font-size: 1.275em;
  font-weight: 500;
	padding-top: 2vw;
}
@media screen and (min-width:769px){
	.catchSection{
		padding: 7.5rem 3rem;
	}
	.catchInner h4{
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.2em;
		line-height: 1.5;
	}
	.catchInner h3{
		font-size: 2.25rem;
		letter-spacing: 0.06em;
		line-height: 1.5;
		margin: 0.875rem auto 1.5rem;
	}
	.catchInner h6{
		font-size: 1rem;
		line-height: 2.1;
		letter-spacing: 0.12em;
		margin-top: 1.25rem;
	}
	.catchInner hgroup{
		margin-bottom: 2.25rem;
	}
	.catchInner h6 span{
		font-size: 1.25em;
		font-weight: 500;
		padding-top: 0.375rem;
	}
}

/* showsSection & archiveSection */

.showsSection,
.archiveSection{
	background: var(--cream);
	position: relative;
}
.showsSection{
	padding: 15vw 8.5vw 9vw;
}
.archiveSection{
	padding: 15vw 3vw 20vw;
}
.showsSection::before,
.archiveSection::before{
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 80%, rgba(184,151,46,0.04) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(184,151,46,0.04) 0%, transparent 50%);
	pointer-events: none;
}
.archiveSection .commonTtl b{
	color: var(--brown-light);
}
.archiveSection .commonTtl h2{
	color: var(--brown-mid);
}
.archiveSection .divider::before{
	background: linear-gradient(to right, transparent, var(--brown-light));
}
.archiveSection .divider::after{
	background: linear-gradient(to left, transparent, var(--brown-light));
}
.archiveSection .divider p span{
	background: var(--brown-light);
}
:is(.showsList,.archiveList){
	display: grid;
	grid-template-columns: 1fr;
	max-width: var(--innerBase);
	margin: 0 auto;
}
.showsList{
	gap: 5vw;
}
.archiveList{
	gap: 3vw;
}
:is(.showsList,.archiveList) article{
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ivory);
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.8s, transform 0.8s, box-shadow 0.8s;
}
:is(.showsList,.archiveList) article.is-show{
	opacity: 1;
	transform: translateY(0);
}
.showsList [data-world="circus"]{
	--world-color: #9B4B5A;
	--world-light: #C4788A;
}
.showsList article[data-world="forest"]{
	--world-color: #3D6B4F;
	--world-light: #5A9B72;
}
.showsList article[data-world="void"]{
	--world-color: #3D5A7A;
	--world-light: #5A7FA0;
}
.showsList article[data-world="steam"]{
	--world-color: #8B6B2E;
	--world-light: #B8952E;
}
:is(.showsListImg,.archiveListImg){
	position: relative;
	width: 100%;
	aspect-ratio: 5/6.75;
	overflow: hidden;
}
:is(.showsListImg,.archiveListImg) img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
	transition: transform 0.8s;
}
:is(.showsListInner,.archiveListInner){
	display: flex;
	flex-direction: column;
	flex: 1;
}
:is(.showsListInner,.archiveListInner) span{
	display: inline-block;
}
:is(.showsListInner,.archiveListInner) h3{
	font-family: var(--fontNotoSerif);
	color: var(--brown);
  font-weight: 500;
}
:is(.showsListInner,.archiveListInner) p{
	font-family: var(--fontShippori);
	color: var(--brown-mid);
}
:is(.showsListInner,.archiveListInner) small{
	display: flex;
	align-items: center;
	font-family: var(--fontShippori);
	font-weight: 500;
	line-height: 1;
	color: var(--world-color, var(--gold-dark));
}
:is(.showsListInner,.archiveListInner) small::before{
	content: '◆';
	display: inline-block;
	font-size: 0.82em;
}
:is(.showsListInner,.archiveListInner) time{
	font-family: var(--fontNotoSans);
	color: var(--brown-light);
}
:is(.showsListCTA,.archiveListCTA){
	display: flex;
	flex-direction: column;
	margin-top: auto;
}
:is(.showsListCTA,.archiveListCTA) button,
:is(.showsListCTA,.archiveListCTA) a{
	position: relative;
	display: block;
	width: 100%;
	font-family: var(--fontNotoSerif);
  font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
}
:is(.showsListCTA,.archiveListCTA) button{
	background: var(--world-color, var(--gold-dark));
	color: var(--ivory);
}
:is(.showsListCTA,.archiveListCTA) a{
	background: transparent;
	color: var(--world-color, var(--gold-dark));
}
:is(.showsListCTA,.archiveListCTA) button::after,
:is(.showsListCTA,.archiveListCTA) a::after{
	content: '→';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.7;
}
.showsListInner{
	padding: 7vw 5vw 5vw;
}
.showsListInner h3{
	font-size: 4.9vw;
	letter-spacing: 0.2em;
	line-height: 1.7;
	margin-bottom: 3.5vw;
}
.showsListInner p{
	font-size: 3.6vw;
	letter-spacing: 0.04em;
	line-height: 1.8;
	margin-bottom: 8.25vw;
}
.showsListInner small{
	gap: 1.5vw;
	font-size: 3.15vw;
	letter-spacing: 0.2em;
	margin-bottom: 2.5vw;
}
.showsListInner small::before{
	margin-top: 0.175vw;
}
.showsListInner time{
	font-size: 2.75vw;
	letter-spacing: 0.15em;
	margin-bottom: 8.25vw;
}
.showsListCTA{
	gap: 2vw;
}
.showsListCTA button,
.showsListCTA a{
	padding: 3.5vw 0;
	font-size: 3.15vw;
	letter-spacing: 0.25em;
	border: 1px solid var(--world-color, var(--gold-dark));
}
.showsListCTA button::after,
.showsListCTA a::after{
	right: 1rem;
}
.archiveListInner{
	padding: 4vw 3.5vw 3.5vw;
}
.archiveListInner h3{
	font-size: 3.7vw;
	letter-spacing: 0.14em;
	line-height: 1.6;
	margin-bottom: 2vw;
}
.archiveListInner p{
	font-size: 2.8vw;
	letter-spacing: 0.02em;
	line-height: 1.8;
	margin-bottom: 3.85vw;
}
.archiveListInner small{
	gap: 1vw;
	font-size: 2.5vw;
	letter-spacing: 0.1em;
	margin-bottom: 1.3vw;
}
.archiveListInner small::before{
	margin-top: 0;
}
.archiveListInner time{
	font-size: 2.25vw;
	letter-spacing: 0.1em;
	margin-bottom: 3.5vw;
}
.archiveListCTA{
	gap: 1.25vw;
}
.archiveListCTA button,
.archiveListCTA a{
	padding: 2.2vw 0;
	font-size: 2.5vw;
	letter-spacing: 0.2em;
	border: 0.15vw solid var(--world-color, var(--gold-dark));
}
.archiveListCTA button::after,
.archiveListCTA a::after{
	right: 0.75rem;
		right: 2.2vw;
}
@media screen and (min-width: 769px){
  .showsSection,
  .archiveSection{
		padding: 7.5rem 3rem 7.5rem;
	}
	.showsList{
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.archiveList{
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
	.showsList article:hover,
	.archiveList article:hover{
		box-shadow: 0 1rem 3rem rgba(44,24,16,0.1);
	}
	.showsList article:hover{
		transform: translateY(-0.25rem);
	}
	.showsList article:hover .showsListImg img,
	.archiveList article:hover .archiveListImg img{
		transform: scale(1.03);
	}
	.showsListInner{
		padding: 1.5rem 1.25rem 1.25rem;
	}
	.showsListInner h3{
		font-size: 1.25rem;
		letter-spacing: 0.1em;
		line-height: 1.6;
		margin-bottom: 0.75rem;
	}
	.showsListInner p{
		font-size: 0.9rem;
		line-height: 1.8;
		margin-bottom: 1.75rem;
	}
	.showsListInner small{
		gap: 0.5rem;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
		margin-bottom: 0.5rem;
	}
	.showsListInner small::before{
		margin-top: 0;
	}
	.showsListInner time{
		font-size: 0.7rem;
		letter-spacing: 0.1em;
		margin-bottom: 1.75rem;
	}
	.showsListCTA{
		gap: 0.5rem;
	}
	.showsListCTA button,
	.showsListCTA a{
		padding: 0.75rem 0;
		font-size: 0.75rem;
		letter-spacing: 0.15em;
    border: 1px solid var(--world-color, var(--gold-dark));
	}
	.showsListCTA button:hover{
		opacity: 0.88;
	}
	.showsListCTA a:hover,
	.archiveListCTA a:hover{
		background: var(--world-color, var(--gold-dark));
		color: var(--ivory);
	}
	.archiveListInner{
		padding: 1rem 0.9rem;
	}
	.archiveListInner h3{
		font-size: 1.0625rem;
		letter-spacing: 0.08em;
		line-height: 1.5;
		margin-bottom: 0.625rem;
	}
	.archiveListInner p{
		font-size: 0.75rem;
		line-height: 1.7;
		margin-bottom: 1.125rem;
	}
	.archiveListInner small{
		gap: 0.375rem;
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
		margin-bottom: 0.5rem;
	}
	.archiveListInner time{
		font-size: 0.625rem;
		letter-spacing: 0.08em;
		margin-bottom: 1.125rem;
	}
	.archiveListCTA{
		gap: 0.5rem;
	}
	.archiveListCTA button,
	.archiveListCTA a{
		padding: 0.625rem 0;
		font-size: 0.6875rem;
		letter-spacing: 0.16em;
	}
  :is(.showsList,.archiveList) article:nth-child(1){
    transition-delay: 0s;
  }
  :is(.showsList,.archiveList) article:nth-child(2){
    transition-delay: 0.1s;
  }
  :is(.showsList,.archiveList) article:nth-child(3){
    transition-delay: 0.2s;
  }
  :is(.showsList,.archiveList) article:nth-child(4){
    transition-delay: 0.3s;
  }
  :is(.showsList,.archiveList) article:nth-child(5){
    transition-delay: 0.2s;
  }
  :is(.showsList,.archiveList) article:nth-child(6){
    transition-delay: 0.3s;
  }
}
@media screen and (min-width: 1100px){
  .showsList{
    grid-template-columns: repeat(3, 1fr);
  }
	.archiveList{
		grid-template-columns: repeat(4,1fr);
	}
}
@media screen and (max-width: 768px){
	.archiveList article{
		flex-direction: row;
		align-items: stretch;
	}
	.archiveListImg{
		width: 38%;
		flex-shrink: 0;
	}
	.archiveListInner{
    min-width: 0;
	}
}


/* photoGallery */

.photoGallery{
	width: 100%;
	overflow: hidden;
	background: var(--brown);
	position: relative;
  margin-top: 10vw;
}
.photoGallery::before,
.photoGallery::after{
	content: '';
	position: absolute;
	top: 0;
  bottom: 0;
	width: 4rem;
	z-index: 2;
	pointer-events: none;
}
.photoGallery::before{
	left: 0;
	background: linear-gradient(to right, var(--brown), transparent);
}
.photoGallery::after{
	right: 0;
	background: linear-gradient(to left, var(--brown), transparent);
}
.galleryTrack{
	display: flex;
	width: max-content;
	animation: galleryScroll 36s linear infinite;
}
.gallerySlide{
  width: 75vw;
  height: 50vw;
	flex-shrink: 0;
}
.galleryImg{
	width: 100%;
	height: 100%;
	background-color: #4A4540;
	background-size: cover;
	background-position: center;
}
.gallerySlide:nth-child(1) .galleryImg,
.gallerySlide:nth-child(9) .galleryImg{ background-image: url('../img/slider/01.webp'); }
.gallerySlide:nth-child(2) .galleryImg,
.gallerySlide:nth-child(10) .galleryImg{ background-image: url('../img/slider/02.webp'); }
.gallerySlide:nth-child(3) .galleryImg,
.gallerySlide:nth-child(11) .galleryImg{ background-image: url('../img/slider/03.webp'); }
.gallerySlide:nth-child(4) .galleryImg,
.gallerySlide:nth-child(12) .galleryImg{ background-image: url('../img/slider/04.webp'); }
.gallerySlide:nth-child(5) .galleryImg,
.gallerySlide:nth-child(13) .galleryImg{ background-image: url('../img/slider/05.webp'); }
.gallerySlide:nth-child(6) .galleryImg,
.gallerySlide:nth-child(14) .galleryImg{ background-image: url('../img/slider/06.webp'); }
.gallerySlide:nth-child(7) .galleryImg,
.gallerySlide:nth-child(15) .galleryImg{ background-image: url('../img/slider/07.webp'); }
.gallerySlide:nth-child(8) .galleryImg,
.gallerySlide:nth-child(16) .galleryImg{ background-image: url('../img/slider/08.webp'); }
@keyframes galleryScroll{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-50%); }
}
@media screen and (min-width: 769px){
  .photoGallery{
    margin-top: 2rem;
  }
	.gallerySlide{
    width: 24rem;
    height: 17rem;
  }
}


/* featuresSection */

.featuresSection{
	background: #EDE8DF;
	padding: 20vw 5vw;
	position: relative;
}
.featuresSection::before{
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 10% 90%, rgba(184,151,46,0.05) 0%, transparent 55%),
		radial-gradient(ellipse at 90% 10%, rgba(184,151,46,0.04) 0%, transparent 50%);
	pointer-events: none;
}
.featuresSection .commonTtl{
	margin-bottom: 9vw;
}
.featuresList{
	display: grid;
	grid-template-columns: 1fr;
	max-width: var(--innerBase);
	margin: 0 auto;
}
.featuresList article{
	display: flex;
	flex-direction: column;
	padding: 8vw 1vw 12vw;
	text-align: center;
	opacity: 0;
	transform: translateY(1.25rem);
	border-bottom: 1px solid rgba(184,151,46,0.4);
	transition: opacity 0.8s, transform 0.8s;
}
.featuresList article:last-child{
	border-bottom: none;
}
.featuresList article.is-show{
	opacity: 1;
	transform: translateY(0);
}
.featuresList article:nth-child(2){
	transition-delay: 0.12s;
}
.featuresList article:nth-child(3){
	transition-delay: 0.24s;
}
.featuresList article i{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12vw;
	height: 12vw;
	margin: 0 auto;
	color: var(--gold);
	opacity: 0.8;
}
.featuresList article i svg{
	display: block;
	width: 100%;
	height: 100%;
  margin-left: -2.5vw;
}
.featuresList article b{
	display: block;
	font-family: var(--fontCG);
	font-size: 6vw;
	letter-spacing: 0.35em;
	color: var(--gold);
	margin: 2.5vw 0 3.5vw;
}
.featuresList article h3{
	font-family: var(--fontPuhu);
	font-size: 6.5vw;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--gold);
	margin-bottom: 5vw;
}
.featuresList article p{
	font-family: var(--fontNotoSerif);
  font-weight: 500;
	font-size: 3.4vw;
	line-height: 2.25;
	letter-spacing: 0.08em;
	color: var(--brown-mid);
  text-align: left;
  padding: 0 3.5vw;
	margin-bottom: 7vw;
}
.featuresList article img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	margin-top: auto;
}
.featuresBottom{
	font-family: var(--fontNotoSerif);
  font-weight: 500;
	max-width: var(--innerSmall);
	margin: 4vw auto 0;
	text-align: center;
}
.featuresBottom p{
	font-size: 3.45vw;
	line-height: 2.4;
	letter-spacing: 0.04em;
	color: var(--brown-mid);
	margin-bottom: 4.5vw;
}
.featuresBottom a{
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 500;
	font-size: 3.75vw;
	letter-spacing: 0.25em;
	color: var(--gold-dark);
	text-decoration: none;
	border-bottom: 1px solid rgba(184,151,46,0.4);
	padding-bottom: 0.375rem;
	transition: gap 0.8s, border-color 0.3s, color 0.3s;
}
@media screen and (min-width:769px){
	.featuresSection{
		padding: 7.5rem 3rem;
	}
	.featuresSection .commonTtl{
		margin-bottom: 3rem;
	}
	.featuresList{
		grid-template-columns: 1fr;
    max-width: 30rem;
    margin: 0 auto;
	}
	.featuresList article{
		padding: 2.5rem 0.5rem 3rem;
		border-right: none;
		border-bottom: 1px solid rgba(184,151,46,0.4);
	}
	.featuresList article:last-child{
		border-bottom: none;
	}
	.featuresList article i{
		width: 2.75rem;
		height: 2.75rem;
		margin: 0 auto;
	}
	.featuresList article i svg{
		margin-left: -0.5rem;
	}
	.featuresList article b{
		font-size: 1.25rem;
		letter-spacing: 0.35em;
		margin: 0.75rem 0 1rem;
	}
	.featuresList article h3{
		font-size: 1.7rem;
		line-height: 1.4;
		letter-spacing: 0.08em;
		margin-bottom: 1.25rem;
	}
	.featuresList article p{
		font-size: 0.95rem;
		line-height: 2.1;
		letter-spacing: 0.06em;
		padding: 0 1.25rem;
		margin-bottom: 1.75rem;
	}
	.featuresList article img{
		aspect-ratio: 16 / 10;
	}
	.featuresBottom{
		margin: 1.5rem auto 0;
	}
	.featuresBottom p{
		font-size: 1rem;
		line-height: 2.3;
		letter-spacing: 0.04em;
		margin-bottom: 1.5rem;
	}
	.featuresBottom a{
		font-size: 1rem;
		letter-spacing: 0.2em;
		padding-bottom: 0.375rem;
	}
	.featuresBottom a:hover{
		gap: 1rem;
		border-color: var(--gold);
		color: var(--gold);
	}
}
@media screen and (min-width:950px){
	.featuresList{
		grid-template-columns: repeat(3, 1fr);
    max-width: inherit;
    padding: 3rem 0;
	}
	.featuresList article{
		padding: 2.5rem 1.25rem 2.5rem;
		border-right: 1px solid rgba(184,151,46,0.4);
		border-bottom: none;
	}
	.featuresList article:last-child{
		border-right: none;
	}
	.featuresList article h3{
		font-size: 1.35rem;
		letter-spacing: 0.06em;
	}
	.featuresList article p{
		font-size: 0.875rem;
		line-height: 1.95;
		letter-spacing: 0.05em;
		padding: 0 0.75rem;
		margin-bottom: 1.5rem;
	}
}


/* accessSection */

.accessSection{
	background: #EDE8DF;
	padding: 15vw 6vw;
}
.accessInner{
	display: flex;
	flex-direction: column;
  align-items: center;
	gap: 12vw;
	max-width: var(--innerBase);
	margin: 0 auto;
}
.accessMap{
	position: relative;
	width: 100%;
  max-width: 45rem;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: #C8C4BC;
}
.accessMap iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.accessName{
	text-align: center;
}
.accessName p{
	font-family: var(--fontNotoSans);
	font-size: 2.8vw;
	color: var(--brown-light);
	letter-spacing: 0.1em;
	padding-bottom: 0.8vw;
}
.accessName h2{
	font-family: var(--fontCG);
	font-weight: 600;
	font-size: 5.25vw;
	letter-spacing: 0.12em;
	color: var(--brown);
}
.accessName h2 strong{
	font-size: 1.15em;
	font-weight: 800;
	padding-right: 0.5vw;
}
.accessInfo ul{
	margin: 7vw 0 10vw;
}
.accessInfo ul li{
	text-align: center;
	font-family: var(--fontNotoSerif);
	font-weight: 500;
	font-size: 3.4vw;
	letter-spacing: 0.12em;
	color: var(--brown-mid);
	margin-bottom: 2vw;
}
.accessInfo ul li:first-of-type{
	font-size: 3.7vw;
}
.accessInfo ul li:last-of-type{
	font-size: 3.25vw;
}
.accessLink{
	display: flex;
	flex-direction: column;
	gap: 3vw;
	width: 75vw;
	margin: 0 auto;
}
.accessLink a{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5vw;
	font-family: var(--fontNotoSerif);
	font-weight: 500;
	font-size: 3.2vw;
	letter-spacing: 0.2em;
	line-height: 2;
	padding: 3.5vw 0;
	text-decoration: none;
	border: 0.25vw solid var(--brown-mid);
}
.accessLink a:first-of-type{
	background: var(--brown-mid);
	color: var(--ivory);
}
.accessLink a:last-of-type{
	background: transparent;
	color: var(--brown-mid);
}
.accessLink a::after{
	content: '→';
	position: absolute;
	right: 4vw;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.7;
}
.accessLink a svg{
	display: block;
	flex-shrink: 0;
	overflow: visible;
}
@media screen and (min-width:769px){
	.accessSection{
		padding: 7.5rem 3rem;
	}
	.accessInner{
		padding-top: 3rem;
		gap: 5rem;
	}
	.accessName p{
		font-size: 0.75rem;
		letter-spacing: 0.1em;
		padding-bottom: 0.125rem;
	}
	.accessName h2{
		font-size: 1.75rem;
		letter-spacing: 0.1em;
	}
	.accessName h2 strong{
		padding-right: 0.125rem;
	}
	.accessInfo ul{
		margin: 1.5rem 0 2.8rem;
	}
	.accessInfo ul li{
		font-size: 1rem;
		letter-spacing: 0.08em;
		margin-bottom: 0.5rem;
	}
	.accessInfo ul li:first-of-type{
		font-size: 1.125rem;
	}
	.accessInfo ul li:last-of-type{
		font-size: 0.9375rem;
	}
	.accessLink{
		gap: 0.75rem;
		width: 24rem;
	}
	.accessLink a{
		gap: 0.625rem;
		font-size: 0.875rem;
		letter-spacing: 0.12em;
		line-height: 1.8;
		padding: 0.875rem 0;
		border: 1px solid var(--brown-mid);
	}
	.accessLink a::after{
		right: 1rem;
	}
	.accessLink a:hover{
		background: var(--brown);
		color: var(--ivory);
	}
}
@media screen and (min-width:1100px){
	.accessInner{
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}
	.accessMap{
		flex: 1;
	}
	.accessInfo{
		flex: 1;
	}
}


/* footer */

footer{
	background: var(--brown);
  text-align: center;
	padding: 15vw 0 20vw;
}
footer img{
  width: 40vw;
	display: inline-block;
	margin-bottom: 12vw;
}
footer p{
	font-family: var(--fontCG);
	font-size: var(--fsXSmall);
	letter-spacing: 0.2em;
	color: rgba(253,250,245,0.8);
}
@media screen and (min-width:769px){
	footer{
		padding: 5rem 0 7rem;
	}
	footer img{
		width: 10rem;
		margin-bottom: 3.5rem;
	}
	footer p{
		font-size: 0.6875rem;
		letter-spacing: 0.2em;
	}
}


/* reserveModal */

.reserveModalOverlay{
	position: fixed;
	inset: 0;
	z-index: 8000;
	background: rgba(44,24,16,0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}
.reserveModalOverlay.is-open{
	opacity: 1;
	pointer-events: auto;
}
.reserveModalBox{
	position: relative;
	background: var(--cream);
	border: 1px solid rgba(184,151,46,0.3);
	padding: 5.5vw 5vw 5vw;
	width: 100%;
	text-align: center;
	transform: translateY(1rem);
	transition: transform 0.4s;
}
.reserveModalOverlay.is-open .reserveModalBox{
	transform: translateY(0);
}
.reserveModalClose{
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: none;
	border: none;
	font-family: var(--fontCG);
	font-size: 1.375rem;
	color: var(--brown-light);
	line-height: 1;
	padding: 0.25rem 0.5rem;
	transition: color 0.4s;
}
.reserveModalClose:hover{
  color: var(--brown);
}
.reserveModalBox hgroup{
  margin-bottom: 4vw;
}
.reserveModalBox hgroup b{
  margin: 3vw 0 0;
}
.reserveModalBox hgroup h2{
  line-height: 1.8;
  margin-bottom: 0.5vw;
}
.reserveModalBox hgroup h3,
.reserveModalBox p{
  font-family: var(--fontNotoSerif);
  font-weight: 500;
	letter-spacing: 0.12em;
}
.reserveModalBox hgroup h3{
  font-size: 4vw;
	line-height: 1.8;
}
.reserveModalBox p{
  font-size: 3.15vw;
	color: var(--brown-light);
	line-height: 2;
	margin-bottom: 7vw;
}
.reserveModalBtn{
	display: flex;
	flex-direction: column;
	gap: 2vw;
}
.reserveModalBtn a{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5vw;
	padding: 4.5vw 4vw 4.5vw 8vw;
	border: 1px solid rgba(184,151,46,0.6);
	background: var(--ivory);
	text-decoration: none;
	transition: border-color 0.4s, background 0.4s;
	position: relative;
	font-family: var(--fontNotoSerif);
  font-weight: 500;
	font-size: 2.7vw;
}
.reserveModalBtn a:active{
	background: rgba(184,151,46,0.08);
}
.reserveModalBtn a::after{
	content: '→';
	position: absolute;
	right: 4vw;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--fontCG);
	font-size: 4.2vw;
	color: var(--gold);
	transition: transform 0.3s;
}
.reserveModalBtn a span{
	transition: color 0.4s;
}
.reserveModalBtn a span:first-of-type{
	color: var(--brown-light);
	letter-spacing: 0.12em;
}
.reserveModalBtn a span:last-of-type{
	color: var(--brown);
  font-size: 1.3em;
	letter-spacing: 0.1em;
  margin-top: -0.7vw;
}
@media screen and (min-width: 769px){
	.reserveModalOverlay{
		padding: 1.5rem;
	}
	.reserveModalBox{
		padding: 2rem 2rem 1.75rem;
		max-width: 25rem;
		transform: translateY(1rem);
	}
	.reserveModalOverlay.is-open .reserveModalBox{
		transform: translateY(0);
	}
	.reserveModalClose{
		top: 1rem;
		right: 1.25rem;
		font-size: 1.375rem;
		padding: 0.25rem 0.5rem;
	}
	.reserveModalBox hgroup{
		margin-bottom: 1.5rem;
	}
	.reserveModalBox hgroup b{
		margin: 0.75rem 0 0;
	}
	.reserveModalBox hgroup h2{
		margin-bottom: 0.25rem;
	}
	.reserveModalBox hgroup h3{
		font-size: 1rem;
		line-height: 1.8;
	}
	.reserveModalBox p{
		font-size: 0.875rem;
		line-height: 2;
		margin-bottom: 1.75rem;
	}
	.reserveModalBtn{
		gap: 0.5rem;
	}
	.reserveModalBtn a{
		gap: 0.5rem;
		padding: 0.875rem 1rem 0.875rem 1.75rem;
		border: 1px solid rgba(184,151,46,0.6);
		font-size: 0.8125rem;
	}
	.reserveModalBtn a::after{
		right: 1rem;
		font-size: 1.125rem;
	}
	.reserveModalBtn a span:first-of-type{
		letter-spacing: 0.12em;
	}
	.reserveModalBtn a span:last-of-type{
		font-size: 1rem;
		letter-spacing: 0.1em;
		margin-top: 0;
	}
	.reserveModalBtn a:hover{
		background: rgba(184,151,46,0.08);
	}
	.reserveModalBtn a:hover::after{
		transform: translateY(-50%) translateX(0.25rem);
	}
}