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

/*--------------------------------------------------------
	スクロールアニメーション：基本設定
--------------------------------------------------------*/

:root {
	--animation-bg: #d7d7de;
	--animation-fg: #000;
	--animation-white: #fff;
	--animation-progress: 0;
	--animation-safe-x: max(24px, 4.35vw);
	--animation-safe-y: max(24px, 5vh);
}

html:has(body > main > [data-animation]),
body:has(> main > [data-animation]) {
	margin: 0;
	background: var(--animation-bg);
}

.animation {
	font-family: YakuHanJP, "Zen Kaku Gothic New", "Yu Gothic Medium", YuGothic, sans-serif;
}

.animation {
	position: relative;
	width: 100%;
	height: var(--animation-scroll-height, 900vh);
	background: var(--animation-bg);
}

.animation-stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
	background: var(--animation-bg);
	color: var(--animation-fg);
	contain: layout paint;
}

.animation-stage *,
.animation-stage *::before,
.animation-stage *::after {
	box-sizing: border-box;
}

.animation-stage img,
.animation-stage svg,
.animation-stage canvas {
	display: block;
}

.animation-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.animation-layer--background { z-index: 1; }
.animation-layer--line { z-index: 2; }
.animation-layer--color { z-index: 3; }
.animation-layer--main { z-index: 4; }
.animation-layer--copy { z-index: 5; }
.animation-layer--transition { z-index: 10; }

/* 背景用アセットは画面を覆い、主役のイラストは欠けないように収める */
.animation-media {
	width: 100%;
	height: 100%;
	object-position: center;
}

.animation-media--cover { object-fit: cover; }
.animation-media--contain { object-fit: contain; }

.animation-canvas {
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------------
	1〜3：イントロ
--------------------------------------------------------*/

.animation-intro {
	display: grid;
	place-items: center;
	z-index: 6;
	padding: var(--animation-safe-y) var(--animation-safe-x);
	opacity: var(--intro-opacity, 0);
	visibility: visible;
}

.animation-intro.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.animation-intro__art {
	position: relative;
	width: min(53.85vw, 930px);
	aspect-ratio: 775.4 / 71.4;
}

.animation-intro__art--sp {
	display: none;
}

.animation-intro__art > img,
.animation-intro__outline,
.animation-intro__outline svg,
.animation-intro__underline,
.animation-intro__underline img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.animation-intro__base {
	opacity: 0;
}

.animation-intro.is-text-visible .animation-intro__base {
	opacity: 1;
	animation: intro-text-fade 1.2s ease both;
}

@keyframes intro-text-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 初期表示のスクロール案内。イントロと一緒にフェードアウトする。 */
.animation-scroll {
	position: absolute;
	bottom: max(24px, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 174px;
	color: var(--animation-fg);
}

.animation-scroll span {
	display: block;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .2em;
	writing-mode: vertical-rl;
}

.animation-scroll::before,
.animation-scroll::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: calc(50% - 1px);
	width: 2px;
	height: 100px;
	background: currentColor;
}

.animation-scroll::before { opacity: .15; }
.animation-scroll::after {
	animation: intro-scroll-line 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes intro-scroll-line {
	0% { transform: scaleY(0); transform-origin: top; }
	50% { transform: scaleY(1); transform-origin: top; }
	50.1% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 960px) {
	.animation-scroll {
		right: var(--animation-safe-x);
		left: auto;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.animation-scroll::after,
	.animation-intro.is-text-visible .animation-intro__base { animation: none; }
}

.animation-intro__underline {
	overflow: hidden;
	clip-path: inset(0 var(--underline-hidden, 100%) 0 0);
}

.animation-intro.is-underline-visible .animation-intro__underline {
	clip-path: inset(0 0 0 0);
}

.animation-intro__outline path {
	fill: none !important;
	stroke: #000 !important;
	stroke-dasharray: var(--path-length);
	stroke-dashoffset: var(--outline-offset, var(--path-length));
}

.animation-intro.is-outline-visible .animation-intro__outline path {
	stroke-dashoffset: 0;
}

.animation-intro__fill {
	opacity: var(--intro-fill-opacity, 0);
}

.animation-intro.is-keyword-filled .animation-intro__fill {
	opacity: 1;
}

/* Share the outline's SVG coordinate system, including Safari's rounding. */
.animation-intro__outline path.animation-intro__aligned-fill {
	fill: #000 !important;
	stroke: none !important;
	stroke-dasharray: none;
	stroke-dashoffset: 0;
	opacity: var(--intro-fill-opacity, 0);
}

.has-aligned-intro-fill .animation-intro__fill {
	display: none;
}

/*--------------------------------------------------------
	4〜8：線・色・メインイラスト・本文
--------------------------------------------------------*/

.animation-scene {
	opacity: var(--scene-opacity, 0);
	visibility: visible;
}

.animation-scene.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.animation-visual {
	position: absolute;
	inset: var(--animation-safe-y) 35% var(--animation-safe-y) var(--animation-safe-x);
}

.animation-visual__item {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.animation-sequence {
	object-fit: contain;
}

/* JSで実測したパス長と進捗をCSS変数へ設定する */
.animation-draw-path {
	fill: none;
	stroke-dasharray: var(--path-length, 1000);
	stroke-dashoffset: var(--draw-offset, 1000);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.animation-fade-part {
	opacity: var(--part-opacity, 0);
}

.animation-float-part {
	transform: translate3d(var(--float-x, 0), var(--float-y, 0), 0)
		rotate(var(--float-rotate, 0deg));
	transform-origin: center;
	will-change: transform;
}

.animation-copy {
	position: absolute;
	top: 50%;
	right: var(--animation-safe-x);
	width: min(28vw, 400px);
	transform: translateY(-50%);
}

.animation-copy__title,
.animation-copy__paragraph {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.animation-copy__title {
	margin: 0 0 clamp(40px, 8vh, 88px);
	font-size: clamp(2.2rem, 2.1vw, 3.2rem);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .16em;
}

.animation-copy__paragraph {
	font-weight: 400;
	margin: 0;
	font-size: clamp(1.3rem, 1.05vw, 1.6rem);
	line-height: 2.65;
	letter-spacing: .08em;
}

.animation-copy__paragraph + .animation-copy__paragraph {
	margin-top: 1.85em;
}

.animation-copy__title.is-visible,
.animation-copy__paragraph.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.animation-copy__title.is-past,
.animation-copy__paragraph.is-past {
	opacity: .16;
	transform: translateY(0);
}

/*--------------------------------------------------------
	9〜11：収束から白への切り替え
--------------------------------------------------------*/

.animation-speed-lines {
	opacity: var(--speed-line-opacity, 0);
	transform: scale(var(--speed-line-scale, .75));
	transform-origin: center;
}

.animation-white-wipe {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100vw, 100vh);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--animation-white);
	transform: translate(-50%, -50%) scale(var(--white-scale, 0));
	transform-origin: center;
	will-change: transform;
}

.animation-end-cover {
	position: absolute;
	inset: 0;
	background: var(--animation-white);
	opacity: var(--end-cover-opacity, 0);
	pointer-events: none;
}

.animation.is-complete .animation-stage {
	pointer-events: none;
}

.preview-next {
	display: grid;
	place-items: center;
	min-height: 100vh;
	background: #fff;
	font-size: clamp(3rem, 7vw, 9rem);
	letter-spacing: .12em;
}

/*--------------------------------------------------------
	PC
--------------------------------------------------------*/

@media print, screen and (min-width: 961px) {
	.animation-visual {
		right: 35%;
	}
}

/*--------------------------------------------------------
	SP
--------------------------------------------------------*/

@media screen and (max-width: 960px) {
	:root {
		--animation-safe-x: max(20px, 9.3vw);
		--animation-safe-y: max(20px, 4.5vh);
	}

	.animation {
		height: var(--animation-scroll-height-sp, 1000vh);
	}

	.animation-intro__art--pc { display: none; }

	.animation-intro__art--sp {
		display: block;
		width: min(76vw, 510px);
		aspect-ratio: 510.2 / 186.9;
	}

	.animation-visual {
		inset: var(--animation-safe-y) 0 auto;
		height: 49%;
	}

	.animation-copy {
		top: auto;
		right: var(--animation-safe-x);
		bottom: var(--animation-safe-y);
		left: var(--animation-safe-x);
		width: auto;
		transform: none;
	}

	.animation-copy__title {
		margin-bottom: clamp(28px, 5vh, 48px);
		font-size: clamp(2rem, 5.7vw, 2.7rem);
		line-height: 1.65;
	}

	.animation-copy__paragraph {
		font-size: clamp(1.3rem, 3.7vw, 1.6rem);
		line-height: 2.2;
	}
}

@media screen and (max-width: 374px), screen and (max-height: 650px) {
	.animation-copy__title { margin-bottom: 20px; }
	.animation-copy__paragraph { line-height: 1.95; }
	.animation-copy__paragraph + .animation-copy__paragraph { margin-top: 1.2em; }
}

/*--------------------------------------------------------
	動きを減らす設定
--------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
	.animation-intro,
	.animation-intro__base,
	.animation-intro__underline,
	.animation-intro__outline path,
	.animation-intro__fill,
	.animation-scene,
	.animation-copy__title,
	.animation-copy__paragraph {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.animation-float-part {
		transform: none;
	}
}

/* 全体プレビュー：実素材と共通タイムライン */
.animation { height: 1539.064vh; }
.animation-stage { min-height: 320px; }
.animation-home { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:0; background:#fff; opacity:var(--home-opacity,0); pointer-events:none; }
.animation.is-complete .animation-home { pointer-events:auto; }
.animation.is-complete .animation-stage { pointer-events:auto; }
.animation-scene { z-index:2; background:var(--animation-bg); pointer-events:none; }
.animation-background { z-index:1; overflow:hidden; }
.animation-background [data-background-colors] { z-index:1; }
.animation-background [data-background-lines] { z-index:2; }
.animation-art--sp { display:none !important; }
.animation-visual { inset: 6% 33% 6% 0; }
.animation-sequence { transform-origin:50% 50%; }
.animation-copy { top:17%; bottom:12%; right:6%; width:25%; transform:none; overflow:hidden; mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 87%,transparent); }
.animation-copy__track { padding-top:20px; will-change:transform; }
.animation-copy__title,.animation-copy__paragraph { opacity:1; transform:none; transition:none; }
.animation-copy__title { font-size:clamp(20px,1.8vw,28px); line-height:1.8; letter-spacing:.13em; margin:0 0 56px; }
.animation-copy__paragraph { font-size:clamp(12px,1.05vw,16px); line-height:2.8; letter-spacing:.04em; }
.animation-copy__paragraph + .animation-copy__paragraph { margin-top:40px; }
.animation-gather { left:50%; top:50%; right:auto; bottom:auto; z-index:7; opacity:0; transform:translate(-50%,-50%); }
.animation-gather svg { width:100%; height:100%; }
.animation-rings { z-index:8; }
.animation-white-wipe { width:var(--white-size,150vmax); opacity:var(--white-opacity,1); }
.animation-end-cover { opacity:var(--end-cover-opacity,0); }
.animation-skip { position:absolute; right:24px; bottom:18px; z-index:20; color:#3c3c43; font-size:11px; letter-spacing:.12em; text-decoration:none; padding:10px; }
.animation.is-complete .animation-skip { display:none; }
@media (max-width:960px) {
 .animation { height:1800.712vh; }
 .animation-art--pc { display:none !important; }
 .animation-art--sp { display:block !important; }
 .animation-visual { inset:4% 2% auto; height:42%; }
 .animation-copy { top:47%; bottom:8%; left:5%; right:5%; width:auto; }
 .animation-copy__title { font-size:clamp(18px,5vw,26px); line-height:1.8; margin-bottom:28px; }
 .animation-copy__paragraph { font-size:clamp(12px,3.5vw,17px); line-height:2.3; letter-spacing:0; }
 .animation-copy__paragraph + .animation-copy__paragraph { margin-top:28px; }
 .animation-skip { right:12px; bottom:10px; }
}
@media (max-height:520px) and (min-width:700px) {
 .animation-visual { inset:3% 40% 3% 2%; height:auto; }
 .animation-copy { top:8%; bottom:8%; left:65%; right:3%; width:auto; }
 .animation-copy__title { font-size:18px; margin-bottom:20px; }
 .animation-copy__paragraph { font-size:12px; line-height:2; }
}
/* スクロールを止めた間も、色のパーツだけを小さく浮遊させる。 */
[data-color-piece] { transform-box:fill-box; transform-origin:center; animation:color-drift 6s ease-in-out infinite alternate; }
[data-color-piece]:nth-of-type(3n) { animation-delay:-2s; animation-duration:7s; }
[data-color-piece]:nth-of-type(3n + 1) { animation-delay:-4s; animation-duration:8s; }
@keyframes color-drift {
 from { transform:translate(calc(var(--idle-amount,0) * -5px),calc(var(--idle-amount,0) * -8px)) rotate(calc(var(--idle-amount,0) * -2deg)); }
 to { transform:translate(calc(var(--idle-amount,0) * 5px),calc(var(--idle-amount,0) * 8px)) rotate(calc(var(--idle-amount,0) * 2deg)); }
}
@media (prefers-reduced-motion:reduce) { [data-color-piece] { animation:none; } }

/* 縦の裂け目から白が開く。中心消失後にのみ描画する。 */
.animation-white-wipe {
 width:var(--white-width,0px); height:var(--white-height,0px);
 aspect-ratio:auto; transform:translate(-50%,-50%);
 box-shadow:0 0 18px 5px rgba(255,255,255,.65);
}

/* EPOCH本体と同じ日本語書体を実際に読み込み、本文はRegularで表示。 */
.animation-copy__paragraph {
 font-family:YakuHanJP,"Zen Kaku Gothic New","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
 font-weight:400;
 font-synthesis:none;
}
@media (min-width:961px) {
 .animation-copy { left:auto; right:1%; width:35%; }
 .animation-copy__paragraph { font-size:clamp(11px,1.05vw,16px); }
 .animation-copy__pc-line { white-space:nowrap; }
}

.animation-copy__pc-break { display:none; }
@media (min-width:961px) {
 .animation-copy__pc-break { display:initial; }
}

/* Central colored threads open at their midpoint, with subtle independent drift. */
.animation-white-wipe { display:none; }
[data-ring] { animation:opening-thread-drift 4s ease-in-out infinite alternate; }
@keyframes opening-thread-drift {
 0% { transform:translateX(0); }
 27% { transform:translateX(var(--line-jitter,0px)); }
 61% { transform:translateX(calc(var(--line-jitter,0px) * -.65)); }
 100% { transform:translateX(calc(var(--line-jitter,0px) * .3)); }
}
@media (prefers-reduced-motion:reduce) { [data-ring] { animation:none; } }

/* Native homepage integration: no iframe and no duplicate page scroll. */
.animation[data-integrated] { z-index:10000; padding:0; margin:0; }
html.intro-pending body > header { visibility:visible; pointer-events:auto; z-index:10001; }
html.intro-pending { scroll-behavior:auto; }
html:not(.intro-pending) .animation[data-integrated] { display:none; }

/* Keep the completed intro's scroll space for reversible navigation. */
.animation[data-integrated].is-home-revealed .animation-stage { visibility:hidden; pointer-events:none; }
.animation[data-integrated] { margin-bottom:-100vh; }
.animation[data-integrated].is-home-revealed { background:transparent; pointer-events:none; }

/* Prevent the gray stage backing from reappearing beneath the fading white. */
.animation { background:var(--handoff-bg,var(--animation-bg)); }
.animation-stage { background:var(--handoff-bg,var(--animation-bg)); }
.animation[data-integrated].is-home-revealed { background:transparent; }

/* Header colors follow the reversible intro timeline. */
html.intro-header-white body > header #h_block > h1 img { filter:brightness(0) invert(1); }
html.intro-header-white body > header #h_block #nav_btn h6 { color:#fff; }
html.intro-header-white body > header #h_block .nav_open_btn .hamburger span { background:#fff; }

/* Fade the white intro into the native page immediately after it fills. */
.animation[data-integrated].is-handing-off { background:transparent; }
.animation[data-integrated] .animation-stage { opacity:calc(1 - var(--integrated-fade,0)); }
/* 切り替え完了（p=.94）時に本文先頭が画面上端へ届き、そのままスクロールする。 */
.animation[data-integrated] { margin-bottom:-195.04vh; }
@media (max-width:960px) {
 .animation[data-integrated] { margin-bottom:-212.32vh; }
}