@charset "utf-8";

/** Elements **/

*,
::before,
::after { box-sizing:inherit; }

:root { box-sizing:border-box; }

:where(:root) {
	line-break:strict;
	overflow-wrap:anywhere;
	scrollbar-gutter:stable;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:transparent;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}

:where(html) { font-size:calc( 10 / 16 * 100% ); }

:where(body) {
	min-height:100dvb;
	font-feature-settings:"palt";
	font-family:sans-serif;
	font-size:1.6rem;
}

:where(img, svg, picture, video) {
	max-width:100%;
	vertical-align:bottom;
}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** FontSizeClamp **/

:where(.fs-clamp-container) {
	--fs-clamp-min:16;
	--fs-clamp-max:18;
	--fs-clamp-base:10;
	--fs-clamp-view-min:801;
	--fs-clamp-view-max:1240;
}
:where(.fs-clamp-container, .fs-clamp-container *) {
	--fs-clamp-slope:calc( ( var( --fs-clamp-max ) - var( --fs-clamp-min ) ) / ( var( --fs-clamp-view-max ) - var( --fs-clamp-view-min ) ) );
	--fs-clamp-value:clamp(
		var( --fs-clamp-min ) / var( --fs-clamp-base ) * 1rem,
		( var( --fs-clamp-max ) - var( --fs-clamp-view-max ) * var( --fs-clamp-slope ) ) / var( --fs-clamp-base ) * 1rem + var( --fs-clamp-slope ) * 100dvi,
		var( --fs-clamp-max ) / var( --fs-clamp-base ) * 1rem
	);
}

@media ( max-width:800px ) {
	:where(.fs-clamp-container) {
		--fs-clamp-min:15;
		--fs-clamp-max:17;
		--fs-clamp-view-min:668;
		--fs-clamp-view-max:800;
	}
}
@media ( max-width:667px ) {
	:where(.fs-clamp-container) {
		--fs-clamp-min:14;
		--fs-clamp-max:16;
		--fs-clamp-view-min:320;
		--fs-clamp-view-max:667;
	}
}

/** Base **/

:where(body) {
	font-family:"Noto Sans JP", sans-serif;
	
	&:has(.l-page) { background-color:black; }
}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** l-page **/

.l-page {
	--page-background-color:black;
	--page-foreground-color:#CA9664;
	--page-layout-width-min:320;
	--page-layout-width-max:1920;
	
	margin-inline:auto;
	background-color:var( --page-background-color );
	position:relative;
	display:block;
	min-width:calc( var( --page-layout-width-min ) * 1px );
	max-width:calc( var( --page-layout-width-max ) * 1px );
	line-height:1.5;
	font-family:"Noto Serif JP", serif;
	color:var( --page-foreground-color );
}

@media ( max-width:800px ) {
	.l-page { --page-layout-width-max:800; }
}
@media ( max-width:667px ) {
	.l-page { --page-layout-width-max:667; }
}

/** p-visual **/

.p-visual {
	position:relative;
	display:block;
	width:100%;
	overflow:clip;
}
.p-visual__title {
	margin:auto;
	position:absolute;
	inset:0;
	z-index:1;
	display:grid;
	place-items:center;
}
.p-visual__slider {
	position:absolute;
	inset:0;
	z-index:0;
	display:block;
	width:100%;
	height:100%;
	
	picture,
	img {
		display:block;
		width:100%;
		height:100%;
	}
	img { object-fit:cover; }
}

@media ( min-width:1201px ) and ( max-width:1920px ) and ( orientation:landscape ) {
	.p-visual {
		height:100dvb;
		
		@media ( min-width:1201px ) {
			min-height:640px;
			max-height:800px;
		}
		@media ( min-width:1441px ) {
			min-height:800px;
			max-height:960px;
		}
		@media ( min-width:1681px ) {
			min-height:960px;
			max-height:1240px;
		}
	}
}
@media ( min-width:801px ) {
	.p-visual {
		--visual-title-position-x:calc( 180 / var( --page-layout-width-max ) * 100% );
		
		aspect-ratio:1920 / 1240;
	}
	.p-visual__title {
		margin-top:calc( 80 / var( --page-layout-width-max ) * -100% );
		width:calc( 500 / var( --page-layout-width-max ) * 100% );
	}
	.p-visual__title:where(:not([class*="p-visual__title--align@pc-"])),
	.p-visual__title--align\@pc-left  { margin-inline:var( --visual-title-position-x ) auto; }
	.p-visual__title--align\@pc-right { margin-inline:auto var( --visual-title-position-x ); }
	.p-visual__title--tween\@pc-ltr  { animation:visual-title-fade 2s linear forwards, visual-title-move 2s linear forwards; }
	.p-visual__title--tween\@pc-rtl  { animation:visual-title-fade 2s linear forwards, visual-title-move 2s linear reverse forwards; }
	.p-visual__title--tween\@pc-fade { animation:visual-title-fade 2s linear forwards; }
	@keyframes visual-title-fade {
		0%   { opacity:1; }
		40%  { opacity:0; }
		60%  { opacity:0; }
		100% { opacity:1; }
	}
	@keyframes visual-title-move {
		0%     { margin-inline:var( --visual-title-position-x ) auto; }
		49.99% { margin-inline:var( --visual-title-position-x ) auto; }
		50.01% { margin-inline:auto var( --visual-title-position-x ); }
		100%   { margin-inline:auto var( --visual-title-position-x ); }
	}
}
@media ( max-width:800px ) {
	.p-visual { aspect-ratio:800 / 1420; }
	.p-visual__title {
		margin-top:calc( 590 / var( --page-layout-width-max ) * -100% );
		width:calc( 420 / var( --page-layout-width-max ) * 100% );
	}
	.p-visual__title--tween\@sp-fade { animation:visual-title-fade 2s linear forwards; }
	@keyframes visual-title-fade {
		0%   { opacity:1; }
		40%  { opacity:0; }
		60%  { opacity:0; }
		100% { opacity:1; }
	}
}
@media ( max-width:667px ) {}

/** p-contents **/

.p-contents {
	position:relative;
	display:block;
}

@media ( min-width:801px ) {
	.p-contents {
		background:
			url( "../img/index/bg_contents_bottom.png" ) center bottom / 100% auto no-repeat,
			url( "../img/index/bg_contents.jpg" ) center top / 100% auto repeat-y;
	}
}
@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** c-section **/

.c-section {
	--section-padding-block:calc( 80 / var( --page-layout-width-max ) * 100% );
	--section-content-width-max:1380;
	--section-padding-inline:60;
	--section-inner-padding-inline:calc( var( --section-padding-inline ) / var( --section-content-width-max ) * 100% );
	--section-inner-max-width:calc( var( --section-content-width-max ) * 1px + 2 * var( --section-inner-padding-inline ) );
	
	padding-block:var( --section-padding-block );
	position:relative;
	z-index:0;
	display:block;
}
.c-section__inner {
	margin-inline:auto;
	padding-inline:var( --section-inner-padding-inline );
	display:block;
	max-width:var( --section-inner-max-width );
}

.c-section__head {
	margin-bottom:2em;
	padding-block:1em 2em;
	position:relative;
	display:grid;
	align-content:start;
	justify-items:center;
	text-align:center;
	
	&:where(.c-section__head--a) {
		row-gap:1em;
		
		&::after {
			background-color:currentColor;
			position:absolute;
			inset:auto 0 0;
			display:block;
			width:100%;
			height:1px;
			content:"";
		}
	}
	&:where(.c-section__head--b) {
		padding-bottom:1em;
		background:linear-gradient( to left, transparent, #BC7840 25%, #FBD6A0 50%, #BC7840 75%, transparent ) center center / 100% 100% no-repeat;
		color:black;
	}
}
.c-section__title {
	margin-block:0;
	display:grid;
	align-content:start;
	justify-items:center;
	letter-spacing:0.06em;
	font-weight:500;
	font-size:var( --fs-clamp-value );
	
	&:where(.c-section__head--a *) {
		--fs-clamp-min:42;
		--fs-clamp-max:62;
	}
	&:where(.c-section__head--b *) {
		--fs-clamp-min:28;
		--fs-clamp-max:38;
	}
	
	&:where(.c-section__head--a :has(.c-section__subtitle)) { row-gap:0.25em; }
	
	&:where(.c-section__head--a *) > span[lang="en"] {
		background:linear-gradient( 130deg, #BC7840, #FBD6A0 20%, #BC7840 40%, #FBD6A0 70%, #BC7840 ) center center / 100% 100% no-repeat;
		background-clip:text;
		display:block;
		width:fit-content;
		color:transparent;
	}
}
.c-section__subtitle {
	margin-block:0;
	display:block;
	letter-spacing:0.06em;
	font-family:"Zen Old Mincho", serif;
	font-weight:normal;
	font-size:var( --fs-clamp-value );
	
	&:where(.c-section__head--a *) {
		--fs-clamp-min:24;
		--fs-clamp-max:34;
	}
	&:where(.c-section__head--b *) {
		--fs-clamp-min:18;
		--fs-clamp-max:20;
	}
}
.c-section__body {
	position:relative;
	display:grid;
	align-content:start;
	justify-items:center;
	row-gap:1em;
	text-align:center;
}
.c-section__text {
	--fs-clamp-min:20;
	--fs-clamp-max:28;
	
	margin-block:0;
	width:fit-content;
	line-height:2;
	letter-spacing:0.04em;
	font-family:"Zen Old Mincho", serif;
	font-size:var( --fs-clamp-value );
	
	& > :where(sup, sub, small) { font-size:70%; }
}

.c-section__image {
	position:relative;
	z-index:-1;
	display:block;
	width:100%;
	
	& > picture { display:block; }
}
.c-section__panel {
	margin-inline:auto;
	border:1px solid;
	background:linear-gradient( 130deg, #4B210B, black 40%, #2D0D04 90% ) center center / 100% 100% no-repeat;
	display:block;
	max-width:1000px;
	
	& > picture { display:block; }
}

.c-section:where(.p-environment) {
	.c-section__inner {
		display:grid;
		grid-template:
			"env_head" auto
			"env_body_image" auto / auto;
	}
	.c-section__body,
	.c-section__image { grid-area:env_body_image; }
	.c-section__body {
		padding-block:calc( 40 / var( --section-content-width-max ) * 100% ) calc( 60 / var( --section-content-width-max ) * 100% );
		row-gap:1.8em;
	}
	.c-section__image { align-self:center; }
}

@media ( min-width:801px ) {
	.c-section--align\@pc-left,
	.c-section--align\@pc-right {
		.c-section__head--a {
			margin-inline:calc( 50% - 50dvi );
			padding-inline:calc( 50dvi - 50% );
			
			&::after { width:calc( 1000 / var( --section-content-width-max ) * 100% ); }
		}
	}
	.c-section--align\@pc-left {
		.c-section__head {
			&,
			:where(.c-section__title:has(.c-section__subtitle)) {
				justify-items:left;
				text-align:left;
			}
			
			&:where(.c-section__head--a)::after { right:auto; }
		}
		.c-section__body {
			justify-items:left;
			text-align:left;
		}
	}
	.c-section--align\@pc-right {
		.c-section__head {
			&,
			:where(.c-section__title:has(.c-section__subtitle)) {
				justify-items:right;
				text-align:right;
			}
			
			&:where(.c-section__head--a)::after { left:auto; }
		}
		.c-section__body {
			justify-items:right;
			text-align:right;
		}
	}
	
	.c-section:has(.c-section__image) { overflow:clip; }
	.c-section__image {
		&:where(.p-whats *) {
			margin-block:calc( 600 / var( --section-content-width-max ) * -100% ) calc( 400 / var( --section-content-width-max ) * -100% );
			aspect-ratio:1380 / 1254;
			
			& > picture > img {
				margin-right:calc( 296 / var( --section-content-width-max ) * -100% );
				max-width:calc( 100% + 296 / var( --section-content-width-max ) * 100% );
			}
		}
		&:where(.p-only *) {
			margin-block:calc( 560 / var( --section-content-width-max ) * -100% ) calc( 420 / var( --section-content-width-max ) * -100% );
			aspect-ratio:1380 / 1320;
			
			& > picture > img {
				margin-left:calc( 324 / var( --section-content-width-max ) * -100% );
				max-width:calc( 100% + 324 / var( --section-content-width-max ) * 100% );
			}
		}
		&:where(.p-environment *) {
			margin-block:calc( 40 / var( --section-content-width-max ) * -100% ) calc( 80 / var( --section-content-width-max ) * -100% );
			aspect-ratio:1380 / 788;
			
			& > picture > img {
				margin-inline:calc( 270 / var( --section-content-width-max ) * -100% );
				max-width:calc( 100% + 540 / var( --section-content-width-max ) * 100% );
			}
		}
	}
}
@media ( max-width:800px ) {
	.c-section {
		--section-content-width-max:780;
		--section-padding-inline:30;
	}
	.c-section__head {
		margin-bottom:1.5em;
		
		&:where(.c-section__head--a) {
			padding-bottom:1.5em;
			row-gap:0.5em;
		}
	}
	.c-section__title {
		&:where(.c-section__head--a *) {
			--fs-clamp-min:36;
			--fs-clamp-max:40;
		}
		&:where(.c-section__head--b *) {
			--fs-clamp-min:24;
			--fs-clamp-max:28;
		}
	}
	.c-section__subtitle {
		&:where(.c-section__head--a *) {
			--fs-clamp-min:24;
			--fs-clamp-max:30;
		}
		&:where(.c-section__head--b *) {
			--fs-clamp-min:16;
			--fs-clamp-max:20;
		}
	}
	.c-section__text {
		--fs-clamp-min:20;
		--fs-clamp-max:24;
	}
	
	.c-section__image {
		&:where(.p-whats *, .p-only *, .p-environment *) {
			margin-inline:calc( 50% - 50dvi );
			width:auto;
		}
		&:where(.p-whats *) {
			margin-block:calc( 320 / var( --section-content-width-max ) * -100% ) calc( 460 / var( --section-content-width-max ) * -100% );
			aspect-ratio:800 / 1238;
		}
		&:where(.p-only *) {
			margin-block:calc( 260 / var( --section-content-width-max ) * -100% ) calc( 360 / var( --section-content-width-max ) * -100% );
			aspect-ratio:800 / 1204;
		}
		&:where(.p-environment *) {
			margin-block:calc( 50 / var( --section-content-width-max ) * -100% );
			aspect-ratio:800 / 640;
		}
	}
	.c-section__panel { max-width:480px; }
	
	.c-section:where(.p-environment) {
		.c-section__body {
			padding-block:calc( 20 / var( --section-content-width-max ) * 100% ) calc( 40 / var( --section-content-width-max ) * 100% );
			row-gap:1.5em;
		}
	}
}
@media ( max-width:667px ) {
	.c-section__title {
		&:where(.c-section__head--a *) {
			--fs-clamp-min:28;
			--fs-clamp-max:36;
		}
		&:where(.c-section__head--b *) {
			--fs-clamp-min:20;
			--fs-clamp-max:24;
		}
	}
	.c-section__subtitle {
		&:where(.c-section__head--a *) {
			--fs-clamp-min:18;
			--fs-clamp-max:24;
		}
		&:where(.c-section__head--b *) {
			--fs-clamp-min:14;
			--fs-clamp-max:16;
		}
	}
	.c-section__text {
		--fs-clamp-min:14.75;
		--fs-clamp-max:20;
		
		&:where(.p-environment *) { letter-spacing:0.01em; }
	}
}

/** p-shopGuide **/

.p-shopGuide {
	position:relative;
	display:block;
}
.p-shopGuide__head {
	margin-block:1em 3em;
	position:relative;
	display:grid;
	align-content:start;
	row-gap:0.5em;
	text-align:center;
}
.p-shopGuide__title {
	--fs-clamp-min:30;
	--fs-clamp-max:40;
	
	margin-block:0;
	letter-spacing:0.04em;
	font-weight:500;
	font-size:var( --fs-clamp-value );
}
.p-shopGuide__text {
	--fs-clamp-min:16;
	--fs-clamp-max:18;
	
	margin-block:0;
	letter-spacing:0.04em;
	font-size:var( --fs-clamp-value );
}
.p-shopGuide__body {
	position:relative;
	display:block;
}
.p-shopGuide__list {
	margin-block:0;
	display:grid;
	grid-template-columns:repeat( 2, 1fr );
	gap:30px calc( 30 / 910 * 100% );
	max-width:910px;
	
	&:is(ul) {
		padding-left:0;
		list-style:none;
	}
	& > * > .p-shop { height:100%; }
}

@media ( max-width:800px ) {
	.p-shopGuide__head {
		margin-block:0 2em;
		row-gap:1em;
	}
	.p-shopGuide__title {
		--fs-clamp-min:26;
		--fs-clamp-max:30;
	}
	.p-shopGuide__text {
		--fs-clamp-min:18;
		--fs-clamp-max:20;
	}
	.p-shopGuide__list {
		margin-inline:auto;
		grid-template-columns:1fr;
		gap:20px 0;
		max-width:480px;
	}
}
@media ( max-width:667px ) {
	.p-shopGuide__title {
		--fs-clamp-min:20;
		--fs-clamp-max:26;
	}
	.p-shopGuide__text {
		--fs-clamp-min:14;
		--fs-clamp-max:18;
	}
}

/** p-shop **/

.p-shop {
	--shop-border-color:var( --page-foreground-color );
	--shop-background-color:rgb( 255 255 255 / 0.3 );
	--shop-background-color-hover:color-mix( in srgb, var( --page-foreground-color ) 20%, white 30% );
	--shop-foreground-color:white;
	
	padding:10px 10px 20px;
	background-color:var( --shop-background-color );
	position:relative;
	display:grid;
	align-content:start;
	justify-items:center;
	row-gap:1em;
	text-decoration:none;
	font-family:"Noto Sans JP", sans-serif;
	color:var( --shop-foreground-color );
	
	&::before {
		border:4px solid var( --shop-border-color );
		position:absolute;
		inset:0;
		display:block;
		width:100%;
		height:100%;
		opacity:0;
		content:"";
	}
}
.p-shop__logo {
	position:relative;
	display:block;
}
.p-shop__name {
	display:block;
	text-align:center;
	
	&:where(.p-shop__logo + *) { margin-top:-0.5em; }
	
	& > span {
		display:block;
		font-size:var( --fs-clamp-value );
		
		&[lang="en"] {
			--fs-clamp-min:16;
			--fs-clamp-max:18;
		}
		&[lang="ja"] {
			--fs-clamp-min:12;
			--fs-clamp-max:14;
		}
	}
}
.p-shop__url {
	--fs-clamp-min:12;
	--fs-clamp-max:14;
	
	display:block;
	text-align:center;
	font-size:var( --fs-clamp-value );
}

@media ( min-width:801px ) {
	@media ( any-hover:hover ) {
		.p-shop {
			transition:background-color 0.3s ease-out;
			
			&::before { transition:opacity 0.3s linear; }
		}
		.p-shop:hover {
			background-color:var( --shop-background-color-hover );
			
			&::before { opacity:1; }
		}
	}
}
@media ( max-width:800px ) {
	.p-shop__name {
		& > span {
			&[lang="en"] {
				--fs-clamp-min:17;
				--fs-clamp-max:18;
			}
			&[lang="ja"] {
				--fs-clamp-min:13;
				--fs-clamp-max:14;
			}
		}
	}
	.p-shop__url {
		--fs-clamp-min:13;
		--fs-clamp-max:14;
	}
}
@media ( max-width:667px ) {
	.p-shop__name {
		& > span {
			&[lang="en"] {
				--fs-clamp-min:16;
				--fs-clamp-max:17;
			}
			&[lang="ja"] {
				--fs-clamp-min:12;
				--fs-clamp-max:13;
			}
		}
	}
	.p-shop__url {
		--fs-clamp-min:12;
		--fs-clamp-max:13;
	}
}

/** p-pageTopNav **/

.p-pageTopNav {
	padding-block:1em;
	display:grid;
	justify-items:center;
}
.p-pageTopNav__link {
	--fs-clamp-min:14;
	--fs-clamp-max:16;
	
	display:grid;
	justify-items:center;
	text-decoration:none;
	font-family:"Noto Sans JP", sans-serif;
	font-size:var( --fs-clamp-value );
}

@media ( min-width:801px ) {
	.p-pageTopNav__link {
		color:currentColor;
		
		&::before {
			margin-bottom:-0.5em;
			border:solid;
			border-width:1px 0 0 1px;
			display:block;
			width:1.5em;
			aspect-ratio:1;
			rotate:45deg;
			content:"";
		}
	}
	
	@media ( any-hover:hover ) {
		.p-pageTopNav__link {
			&::before { transition:translate 0.3s ease-out; }
		}
		.p-pageTopNav__link:hover {
			&::before { translate:0 -0.3em; }
		}
	}
}
@media ( max-width:800px ) {
	.p-pageTopNav__link {
		--fs-clamp-min:14;
		--fs-clamp-max:15;
		
		padding:0.2em 1em 0.3em;
		border-radius:10em;
		background:linear-gradient( to left, #BC7840, #FBD6A0 50%, #BC7840 ) center center / 100% 100% no-repeat;
		width:100%;
		max-width:140px;
		text-transform:uppercase;
		color:black;
	}
}
@media ( max-width:667px ) {
	.p-pageTopNav__link {
		--fs-clamp-min:13;
		--fs-clamp-max:14;
	}
}

/** p-footer **/

.p-footer {
	--footer-background-color:var( --page-background-color );
	--footer-foreground-color:var( --page-foreground-color );
	--footer-padding-block:20px;
	--footer-padding-inline:calc( 20 / var( --page-layout-width-max ) * 100% );
	
	padding-block:var( --footer-padding-block );
	background-color:var( --footer-background-color );
	position:relative;
	display:block;
	color:var( --footer-foreground-color );
}
.p-footer__inner {
	padding-inline:var( --footer-padding-inline );
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	column-gap:var( --footer-padding-inline );
}
.p-footer__logo {
	margin-block:0;
	display:flex;
	align-items:center;
	column-gap:10px;
	flex:none;
	order:1;
	
	&:is(ul) {
		padding-left:0;
		list-style:none;
	}
	& > * { width:80px; }
}
.p-footer__copyright {
	--fs-clamp-min:13;
	--fs-clamp-max:15;
	
	margin-block:0;
	flex:1;
	font-family:"Zen Old Mincho", serif;
	font-size:var( --fs-clamp-value );
}

@media ( max-width:800px ) {
	.p-footer__inner {
		flex-direction:column;
		align-items:center;
		column-gap:0;
		row-gap:1em;
	}
	.p-footer__logo { order:-1; }
	.p-footer__copyright {
		--fs-clamp-min:12;
		--fs-clamp-max:14;
	}
}
@media ( max-width:667px ) {
	.p-footer__copyright {
		--fs-clamp-min:12;
		--fs-clamp-max:12;
	}
}

/** u-display **/

.u-display-none { display:none !important; }

@media ( min-width:801px ) {
	.u-display\@pc-none { display:none !important; }
}
@media ( max-width:800px ) {
	.u-display\@sp-none { display:none !important; }
}
@media ( max-width:667px ) {}

/** ViewMotion **/

[data-view-motion] {
	--ease-out-quart:cubic-bezier( 0.165, 0.84, 0.44, 1 );
	
	&:where(.p-visual) {
		transition:filter 2s var( --ease-out-quart ), opacity 2s linear;
		
		:where(.p-visual__title) { transition:opacity 1.5s linear; }
	}
	
	&:where(.c-section__head) {
		&:where(.c-section__head--b) { transition:background-size 1s var( --ease-out-quart ), opacity 1s linear; }
		&:where(.c-section__head--a)::after { transition:scale 1s var( --ease-out-quart ), opacity 1s linear; }
		
		:where(.c-section__title, .c-section__subtitle) { transition:letter-spacing 1.5s var( --ease-out-quart ), translate 1.5s var( --ease-out-quart ), opacity 1s linear; }
	}
	&:where(.c-section__body) {
		mask:linear-gradient( to bottom, black, black 50%, transparent 75%, transparent ) 0 0 / 100% 200% no-repeat;
		transition:mask-position 5s var( --ease-out-quart ), opacity 1s linear;
		
		:where(.c-section__text) { transition:translate 1.5s var( --ease-out-quart ); }
	}
	
	&:where(.c-section__image, .c-section__panel) { transition:translate 1.5s var( --ease-out-quart ), opacity 1.5s linear; }
	
	&:where(.p-shopGuide__head, .p-shopGuide__list > *) { transition:translate 1.5s var( --ease-out-quart ), opacity 1s linear; }
}
[data-view-motion="inactive"] {
	&:where(.p-visual) {
		filter:blur( 5px );
		opacity:0;
		
		:where(.p-visual__title:not([class*="p-visual__title--tween"])) { opacity:0; }
	}
	
	&:where(.c-section__head) {
		&:where(.c-section__head--b) {
			background-size:0 100%;
			opacity:0;
		}
		&:where(.c-section__head--a)::after {
			scale:0 1;
			opacity:0;
		}
		
		:where(.c-section__title, .c-section__subtitle) {
			letter-spacing:0;
			opacity:0;
		}
		:where(.c-section__title > .c-section__subtitle) {
			letter-spacing:-0.06em;
			opacity:unset;
		}
	}
	&:where(.c-section__body) {
		mask-position:0 200%;
		opacity:0;
		
		:where(.c-section__text) { translate:0 80px; }
	}
	
	&:where(.c-section__image, .c-section__panel) { opacity:0; }
	&:where(.c-section__panel) { translate:0 80px; }
	
	&:where(.p-shopGuide__head, .p-shopGuide__list > *) {
		translate:0 40px;
		opacity:0;
	}
}
[data-view-motion="active"] {
	&:where(.p-visual) {
		:where(.p-visual__title:not([class*="p-visual__title--tween"])) { transition-delay:1s; }
	}
	
	&:where(.c-section__head--a) {
		:where(.c-section__title, .c-section__subtitle) { transition-delay:0.5s; }
	}
	&:where(.c-section__head--b) {
		:where(.c-section__title, .c-section__subtitle) { transition-delay:0.4s; }
	}
	&:where(.c-section__body) {
		&,
		:where(.c-section__text) { transition-delay:0.4s; }
	}
	
	&:where(.p-shopGuide__head) { transition-delay:0.2s; }
}
[data-view-motion-instant] {
	&, &::before, &::after, * {
		animation-duration:0s !important;
		animation-delay:0s !important;
		transition-duration:0s !important;
		transition-delay:0s !important;
	}
}

@media ( min-width:801px ) {
	[data-view-motion] {
		&:where(.c-section--align\@pc-left .c-section__head--a) {
			&::after { transform-origin:left center; }
		}
		&:where(.c-section--align\@pc-right .c-section__head--a) {
			&::after { transform-origin:right center; }
		}
		
		&:where(.p-shopGuide__list[data-view-motion-stagger]) {
			& > [data-view-motion] { --view-motion-stagger-index:0; }
		}
	}
	[data-view-motion="inactive"] {
		&:where(.c-section--align\@pc-left .c-section__head--a) {
			:where(.c-section__title, .c-section__subtitle:not(.c-section__title *)) { translate:-40px 0; }
		}
		&:where(.c-section--align\@pc-right .c-section__head--a) {
			:where(.c-section__title, .c-section__subtitle:not(.c-section__title *)) { translate:40px 0; }
		}
		
		&:where(.c-section--align\@pc-left .c-section__image) { translate:40px 0; }
		&:where(.c-section--align\@pc-right .c-section__image) { translate:-40px 0; }
	}
	[data-view-motion="active"] {
		&:where(.p-shopGuide__list[data-view-motion-stagger]) {
			& > [data-view-motion] {
				transition-delay:calc( 0.3s + 0.2s * var( --view-motion-stagger-index ) );
				translate:unset;
				opacity:unset;
			}
		}
	}
}

/** ViewMotion DebugMarkers **/

[data-view-motion-marker-layer] {
	position:absolute;
	inset:0;
	z-index:10;
	display:block;
	pointer-events:none;
	
	[data-view-motion-marker] {
		--view-motion-marker-start-y:0;
		--view-motion-marker-end-y:0;
		
		display:block;
		pointer-events:none;
		
		&::before,
		&::after {
			margin-left:auto;
			padding:0.25em 2em;
			border:0 solid transparent;
			position:absolute;
			inset:auto 0;
			display:block;
			width:fit-content;
			height:auto;
			paint-order:stroke;
			-webkit-text-stroke:3px black;
			text-align:right;
			color:white;
		}
		&::before { border-color:lime; }
		&::after { border-color:red; }
		
		&[data-view-motion-marker="target"] {
			outline:1px solid rgb( 255 255 0 / 0.2 );
			outline-offset:-1px;
			position:absolute;
			z-index:1;
			
			&::before,
			&::after {
				background-color:rgb( 255 255 255 / 0.2 );
				min-width:6em;
			}
			&::before {
				border-bottom-left-radius:5px;
				border-top-width:1px;
				top:var( --view-motion-marker-start-y );
				content:"start";
			}
			&::after {
				border-top-left-radius:5px;
				border-bottom-width:1px;
				bottom:var( --view-motion-marker-end-y );
				content:"end";
			}
		}
		&[data-view-motion-marker="monitor"] {
			position:fixed;
			inset:0;
			
			&::before,
			&::after { width:100%; }
			&::before {
				border-bottom-width:1px;
				bottom:var( --view-motion-marker-start-y );
				content:"monitor-start";
			}
			&::after {
				border-top-width:1px;
				top:var( --view-motion-marker-end-y );
				content:"monitor-end";
			}
		}
	}
}

/** GSAP DebugMarkers **

[class*="gsap-marker-"] {
	-webkit-text-stroke:3px black;
	paint-order:stroke;
	font-family:inherit !important;
	color:white !important;
}/**/