/* =========================================================
   正夢プロジェクト 公式HP v3 ― 光の走馬灯
   ========================================================= */
:root {
  --ink: #080c26;
  --navy: #0d1338;
  --navy-2: #171d4c;
  --sky: 0;
  --star: #f3efe6;
  --mist: rgba(243, 239, 230, .62);
  --faint: rgba(243, 239, 230, .34);
  --line: rgba(243, 239, 230, .14);
  --gold: #e8d2a2;
  --gold-hi: #fff1cf;
  --blue: #8db6ff;
  --dawn: #f1b49a;
  --edge: #d98a3a;
  --mincho: "Shippori Mincho B1", "Yu Mincho", "YuMincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gut: clamp(16px, 4.2vw, 64px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Crect x='6' y='3' width='10' height='8' rx='1.6' fill='%23ede6d6' fill-opacity='.82'/%3E%3C/svg%3E");
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-feature-settings: "lnum"; margin: 0; background: var(--ink); color: var(--star);
  font-family: var(--gothic); font-size: 15px; line-height: 2; letter-spacing: .06em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.2em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(232, 210, 162, .35); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.is-loading, html.menu-open { overflow: hidden; }

/* 背景の夜空・粒子・ビネット */
.bgsky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 6, 30, .5) 100%); opacity: clamp(0, calc(.8 - var(--sky) * 1.6), 1); }
main, .site-footer { position: relative; z-index: 2; }

/* ---------------- ローディング ---------------- */
.loader { position: fixed; inset: 0; z-index: 200; background: radial-gradient(120% 90% at 50% 100%, #1b1f5a 0, #0b1036 45%, #060922 100%); overflow: hidden; transition: opacity 1.5s var(--ease), filter 1.5s var(--ease); }
.loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__flash { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 45%, rgba(255, 238, 205, .55), rgba(255, 225, 180, .08) 60%, transparent 80%); opacity: 0; pointer-events: none; }
.loader.is-burst .loader__flash { animation: flash 1.6s var(--ease) forwards; }
@keyframes flash { 0%{opacity:0} 6%{opacity:1} 100%{opacity:0} }
.loader__title { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.loader__kanji { display: flex; gap: .12em; justify-content: center; font-family: var(--mincho); font-weight: 500; font-size: clamp(64px, 13vw, 168px); line-height: 1; letter-spacing: .1em; }
.loader__kanji i { font-style: normal; opacity: 0; filter: blur(18px); transform: scale(1.18); text-shadow: 0 0 30px rgba(255, 228, 180, .65), 0 0 90px rgba(255, 210, 150, .35); }
.loader.is-burst .loader__kanji i { animation: kanji 1.6s var(--ease) forwards; }
.loader.is-burst .loader__kanji i:nth-child(2) { animation-delay: .14s; }
@keyframes kanji { to { opacity: 1; filter: blur(0); transform: scale(1); } }
.loader__copy { display: block; margin-top: 1.1em; font-family: var(--mincho); font-size: clamp(15px, 1.7vw, 21px); letter-spacing: .5em; opacity: 0; transform: translateY(8px); }
.loader__en { display: block; margin-top: 1.4em; font-family: var(--mono); font-size: 10px; letter-spacing: .6em; color: var(--gold); opacity: 0; }
.loader.is-burst .loader__copy { animation: up 1.2s .55s var(--ease) forwards; }
.loader.is-burst .loader__en { animation: up 1.2s .8s var(--ease) forwards; }
@keyframes up { to { opacity: 1; transform: none; } }
.loader__meta { position: absolute; left: var(--gut); right: var(--gut); bottom: 34px; display: flex; justify-content: space-between; align-items: end; font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--faint); }
.loader__count { font-size: 12px; color: var(--gold); letter-spacing: .2em; }
.loader__bar { position: absolute; left: var(--gut); right: var(--gut); bottom: 24px; height: 1px; background: rgba(255, 255, 255, .08); }
.loader__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--gold)); transform-origin: left; transform: scaleX(0); }
.loader__skip { position: absolute; right: var(--gut); top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .35em; color: var(--faint); padding: 10px 0 10px 14px; transition: color .3s; }
.loader__skip:hover { color: var(--star); }
.loader.is-done { opacity: 0; filter: blur(6px) brightness(1.6); pointer-events: none; }
.loader.is-done .loader__title { transition: transform 1.5s var(--ease); transform: translate(-50%, -70%) scale(1.05); }

/* ---------------- ページ遷移 ---------------- */
.page-veil { position: fixed; inset: 0; z-index: 150; background: var(--ink); pointer-events: none; opacity: 1; transition: opacity .9s var(--ease); }
.veil-out .page-veil { opacity: 0; }
.veil-in .page-veil { opacity: 1; transition: opacity .5s .22s var(--ease-io); }
.page-veil::before { content: ""; position: absolute; top: 46%; left: -40%; width: 40%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(141, 182, 255, .6) 60%, #fff); box-shadow: 0 0 18px 2px rgba(255, 235, 200, .7); transform: rotate(-14deg); opacity: 0; }
.veil-in .page-veil::before { animation: streak .75s var(--ease-io) forwards; }
@keyframes streak { 0%{left:-40%;opacity:0} 15%{opacity:1} 100%{left:110%;opacity:0} }
html.has-loader .page-veil { display: none; }

/* ---------------- ヘッダー ---------------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 120; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gut); transition: transform .6s var(--ease), background .6s, padding .4s; }
.site-header.is-scrolled { padding-top: 14px; padding-bottom: 14px; background: linear-gradient(rgba(4, 5, 10, .78), rgba(4, 5, 10, 0)); }
.site-header.is-hidden { transform: translateY(-110%); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 34px; height: 34px; overflow: visible; }
.brand__jp { font-family: var(--mincho); font-size: 19px; letter-spacing: .26em; line-height: 1; }
.brand__en { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .42em; color: var(--gold); margin-top: 6px; }
.gnav { display: flex; gap: clamp(18px, 2.4vw, 38px); align-items: center; }
.gnav a { position: relative; font-size: 13px; letter-spacing: .18em; padding: 6px 0; }
.gnav a small { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .3em; color: var(--faint); line-height: 1.2; }
.gnav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.gnav a:hover::after, .gnav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.gnav .gnav__cta { padding: 10px 20px; border: 1px solid rgba(232, 210, 162, .5); border-radius: 40px; color: var(--gold-hi); }
.gnav .gnav__cta::after { display: none; }
.gnav .gnav__cta:hover { background: rgba(232, 210, 162, .1); box-shadow: 0 0 30px rgba(232, 210, 162, .25); }
.menu-btn { display: none; width: 46px; height: 46px; position: relative; z-index: 130; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--star); transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn i:nth-child(1) { top: 19px; } .menu-btn i:nth-child(2) { top: 27px; right: 18px; }
.menu-open .menu-btn i:nth-child(1) { top: 23px; transform: rotate(32deg); }
.menu-open .menu-btn i:nth-child(2) { top: 23px; right: 11px; transform: rotate(-32deg); }
.scroll-meter { position: fixed; right: 18px; top: 50%; height: 120px; width: 1px; margin-top: -60px; background: var(--line); z-index: 60; }
.scroll-meter i { position: absolute; inset: 0; background: var(--gold); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 8px var(--gold); }

/* ---------------- 共通パーツ ---------------- */
.wrap { width: min(1240px, 100% - var(--gut) * 2); margin-inline: auto; }
.narrow { width: min(860px, 100% - var(--gut) * 2); margin-inline: auto; }
.sec { position: relative; padding: clamp(110px, 16vw, 220px) 0; }
.label { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .38em; color: var(--gold); text-transform: uppercase; }
.label::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.en-title { display: block; font-family: var(--serif-en); font-style: italic; font-weight: 300; font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .08em; color: var(--mist); margin-top: 10px; }
.h-jp { font-family: var(--mincho); font-weight: 500; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.55; letter-spacing: .1em; margin-top: 22px; }
.h-jp em { font-style: normal; color: var(--gold-hi); text-shadow: 0 0 24px rgba(232, 210, 162, .45); }
.lead { color: var(--mist); font-size: clamp(14.5px, 1.25vw, 16.5px); max-width: 38em; margin-top: 28px; }
.sec-head { margin-bottom: clamp(56px, 7vw, 100px); }
.sec-head.is-center { text-align: center; }
.sec-head.is-center .lead { margin-inline: auto; }
.sec-head.is-center .label::after { content: ""; width: 34px; height: 1px; background: linear-gradient(270deg, transparent, var(--gold)); }
.scene-no { position: absolute; top: clamp(40px, 6vw, 80px); right: var(--gut); font-family: var(--mono); font-size: 10px; letter-spacing: .4em; color: var(--faint); writing-mode: vertical-rl; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 18px; padding: 18px 34px; border: 1px solid rgba(232, 210, 162, .55); border-radius: 60px; font-size: 14px; letter-spacing: .2em; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s, background .5s; }
.btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 210, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1s var(--ease); }
.btn:hover::before { transform: translateX(120%); }
.btn:hover { box-shadow: 0 0 40px rgba(232, 210, 162, .3), inset 0 0 20px rgba(232, 210, 162, .12); }
.btn .arr { width: 26px; height: 1px; background: currentColor; position: relative; transition: width .5s var(--ease); }
.btn .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.btn:hover .arr { width: 40px; }
.btn--solid { background: linear-gradient(120deg, #f6e6c2, #d9bd85); color: #17140c; border-color: transparent; font-weight: 500; }
.more { display: inline-flex; align-items: center; gap: 14px; margin-top: 44px; font-size: 13px; letter-spacing: .2em; color: var(--gold-hi); }
.more .arr { width: 46px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); position: relative; transition: width .6s var(--ease); }
.more:hover .arr { width: 80px; }

/* 出現 */
[data-reveal] { opacity: 0; transform: translateY(34px); filter: blur(8px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease); transition-delay: var(--dl, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="mask"] { clip-path: inset(0 0 100% 0); transform: none; filter: none; opacity: 1; transition: clip-path 1.6s var(--ease-io); }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-split] .ch { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(10px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); transition-delay: calc(var(--i) * 45ms + var(--dl, 0s)); }
[data-split].is-in .ch { opacity: 1; transform: none; filter: none; }
.reveal-group > * { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group.is-in > *:nth-child(2) { transition-delay: .12s; } .reveal-group.is-in > *:nth-child(3) { transition-delay: .24s; }
.reveal-group.is-in > *:nth-child(4) { transition-delay: .36s; } .reveal-group.is-in > *:nth-child(5) { transition-delay: .48s; }
.reveal-group.is-in > *:nth-child(6) { transition-delay: .6s; } .reveal-group.is-in > *:nth-child(7) { transition-delay: .72s; }
.reveal-group.is-in > *:nth-child(8) { transition-delay: .84s; } .reveal-group.is-in > *:nth-child(n+9) { transition-delay: .96s; }

/* フィルムのコマ */
.film { position: relative; background: #0d0c0b; padding: 20px 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.film::before, .film::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--hole) repeat-x left center / 22px 14px; }
.film::before { top: 3px; } .film::after { bottom: 3px; }
.film img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.film__edge { position: absolute; left: 14px; bottom: -1px; font-family: var(--mono); font-size: 8px; letter-spacing: .25em; color: var(--edge); opacity: .85; line-height: 1; transform: translateY(-3px); z-index: 2; background: #0d0c0b; padding: 0 4px; }

/* ---------------- ヒーロー ---------------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.stream { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 50%; overflow: hidden; }
.stream__world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.stream__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stream__source { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; }
.stream__source::before { content: ""; position: absolute; width: 460px; height: 460px; left: -230px; top: -230px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 225, .95) 0, rgba(255, 226, 175, .45) 6%, rgba(160, 190, 255, .12) 26%, transparent 60%); }
.stream__source::after { content: ""; position: absolute; width: 900px; height: 2px; left: -450px; top: -1px; background: linear-gradient(90deg, transparent, rgba(180, 205, 255, .5) 40%, rgba(255, 245, 220, .9) 50%, rgba(180, 205, 255, .5) 60%, transparent); filter: blur(.6px); }
.sf { position: absolute; left: -170px; top: -128px; width: 340px; margin: 0; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.sf__film { position: relative; background: #0d0c0b; padding: 18px 8px; box-shadow: 0 0 50px rgba(232, 210, 162, .12); }
.sf__film::before, .sf__film::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--hole) repeat-x left center / 20px 12px; }
.sf__film::before { top: 3px; } .sf__film::after { bottom: 3px; }
.sf img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.sf__edge { position: absolute; left: 12px; bottom: 0; transform: translateY(-2px); font-family: var(--mono); font-size: 7px; letter-spacing: .25em; color: var(--edge); background: #0d0c0b; padding: 0 3px; line-height: 1; z-index: 2; }
.sf__cap { position: absolute; right: 14px; bottom: 26px; font-family: var(--mincho); font-size: 13px; letter-spacing: .2em; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); z-index: 2; }
.sf__film > .sf__veil, .sf__film img + .sf__edge::after { content: none; }
.sf::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 44, var(--dark, 0)); pointer-events: none; }
.hero__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 26% 72%, rgba(8, 12, 38, .5), transparent 70%), linear-gradient(180deg, rgba(8, 12, 38, .22), transparent 25%, transparent 78%, rgba(13, 19, 56, .55)); }
.hero__copy { position: absolute; left: var(--gut); bottom: clamp(70px, 11vh, 120px); z-index: 5; }
.hero__title { font-family: var(--mincho); font-weight: 500; font-size: clamp(40px, 7.4vw, 112px); line-height: 1.22; letter-spacing: .08em; text-shadow: 0 0 40px rgba(4, 5, 10, .9), 0 0 2px rgba(4, 5, 10, .8); }
.hero__title .ch { text-shadow: 0 0 40px rgba(4, 5, 10, .9); }
.hero__title .em { color: var(--gold-hi); }
.hero__sub { margin-top: 26px; font-family: var(--mincho); font-size: clamp(14px, 1.35vw, 18px); line-height: 2.2; letter-spacing: .16em; color: var(--mist); text-shadow: 0 0 20px rgba(4, 5, 10, 1); }
.hero__en { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--mono); font-size: 10px; letter-spacing: .6em; color: var(--faint); z-index: 5; }
.hero__scroll { position: absolute; right: var(--gut); bottom: 36px; z-index: 5; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .4em; color: var(--mist); }
.hero__scroll i { width: 1px; height: 64px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: -1px; width: 3px; height: 14px; background: #fff; border-radius: 2px; box-shadow: 0 0 8px #fff; animation: drop 2.4s var(--ease-io) infinite; }
@keyframes drop { 0%{top:-16px;opacity:0} 30%{opacity:1} 100%{top:64px;opacity:0} }
.hero__hud { position: absolute; top: 96px; left: var(--gut); z-index: 5; font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; color: var(--faint); line-height: 2.1; }
.hero__hud b { color: var(--gold); font-weight: 400; }
.hero [data-split] .ch, .hero [data-reveal] { transition-delay: calc(var(--i, 0) * 60ms + .2s); }
html:not(.is-loaded) .hero [data-split] .ch { opacity: 0 !important; }
html.is-loaded .hero [data-split] .ch { opacity: 1; transform: none; filter: none; }
html.is-loaded .hero .h-in { opacity: 1; transform: none; filter: none; }
.hero .h-in { opacity: 0; transform: translateY(20px); filter: blur(8px); transition: all 1.6s var(--ease) 1.2s; }

/* ---------------- 文章点灯（想い） ---------------- */
.lightscene { position: relative; height: 300vh; }
.lightscene__inner { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.lightscene__text { width: min(1120px, 100% - var(--gut) * 2); font-family: var(--mincho); font-size: clamp(21px, 2.9vw, 42px); line-height: 1.95; letter-spacing: .1em; }
.lightscene__text .lc { --l: 0; color: rgba(243, 239, 230, calc(.1 + var(--l) * .9)); text-shadow: 0 0 calc(var(--l) * 26px) rgba(255, 226, 170, calc(var(--l) * .45)); transition: color .25s, text-shadow .25s; }
.lightscene__text .gold .lc { color: rgba(255, 236, 196, calc(.1 + var(--l) * .9)); }
.lightscene__text .sm { display: block; font-size: .58em; line-height: 2.2; margin: 1.1em 0; }
.lightscene__beam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(232, 210, 162, .3), transparent); transform: translateX(-50%) scaleY(calc(var(--p, 0) * 1.2)); opacity: .6; }
.lightscene__label { position: absolute; top: 14vh; left: var(--gut); }

/* ---------------- 横に流れる走馬灯 ---------------- */
.hreel { position: relative; height: 480vh; }
.hreel__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hreel__head { position: absolute; top: clamp(90px, 13vh, 130px); left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; align-items: end; z-index: 3; }
.hreel__count { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: var(--faint); }
.hreel__count b { font-weight: 400; font-size: 34px; color: var(--gold-hi); letter-spacing: .05em; margin-right: 6px; }
.hreel__track { display: flex; align-items: center; gap: 0; padding: 0 50vw 0 34vw; will-change: transform; }
.hreel__strip { display: flex; background: #0d0c0b; padding: 26px 0; position: relative; box-shadow: 0 40px 120px rgba(0, 0, 0, .7); }
.hreel__strip::before, .hreel__strip::after { content: ""; position: absolute; left: 0; right: 0; height: 16px; background: var(--hole) repeat-x left center / 26px 16px; }
.hreel__strip::before { top: 5px; } .hreel__strip::after { bottom: 5px; }
.hframe { --d: 0; position: relative; width: clamp(260px, 38vw, 560px); margin: 0 7px; flex: none; }
.hframe__img { position: relative; overflow: hidden; aspect-ratio: 3/2; }
.hframe__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - (1 - min(1, abs(var(--d)) * 2)) * .12)) translateX(calc(var(--d) * -8%)); filter: brightness(calc(1.08 - min(1, abs(var(--d)) * 1.6) * .5)) saturate(calc(1.08 - min(1, abs(var(--d)) * 1.6) * .4)); }
.hframe__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 30% 20%, rgba(255, 190, 120, .22), transparent 60%); mix-blend-mode: screen; opacity: calc(1 - min(1, abs(var(--d)) * 2)); }
.hframe__edge { position: absolute; left: 10px; bottom: -22px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .25em; color: var(--edge); line-height: 1; }
.hframe__cap { position: absolute; left: 0; right: 0; top: calc(100% + 54px); text-align: center; opacity: calc(1 - min(1, abs(var(--d)) * 3.2)); transform: translateY(calc(abs(var(--d)) * 40px)); }
.hframe__cap strong { display: block; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 2vw, 26px); letter-spacing: .2em; }
.hframe__cap span { display: block; font-family: var(--serif-en); font-style: italic; font-size: 15px; color: var(--mist); letter-spacing: .06em; }
.hreel__foot { position: absolute; bottom: 7vh; left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .35em; color: var(--faint); }
.hreel__projector { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 55% at 50% 48%, rgba(255, 228, 180, .07), transparent 70%); animation: flicker 3.2s steps(12) infinite; }
@keyframes flicker { 0%,100%{opacity:1} 13%{opacity:.82} 27%{opacity:1} 41%{opacity:.9} 58%{opacity:1} 72%{opacity:.86} }

/* ---------------- 3つの約束 ---------------- */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.promise { position: relative; padding: 56px 28px 40px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(17, 24, 51, .55), rgba(4, 5, 10, .2)); overflow: hidden; }
.promise::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1px; height: 0; background: linear-gradient(var(--gold-hi), transparent); box-shadow: 0 0 14px var(--gold); transition: height 1.8s var(--ease) .3s; }
.reveal-group.is-in .promise::before { height: 70%; }
.promise__no { font-family: var(--serif-en); font-style: italic; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(232, 210, 162, .7); }
.promise h3 { font-family: var(--mincho); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.7; letter-spacing: .12em; margin: 26px 0 18px; }
.promise p { color: var(--mist); font-size: 14px; margin: 0; }

/* カーソルで光るカード */
.glow-card { position: relative; isolation: isolate; }
.glow-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 210, 162, .14), transparent 60%); opacity: 0; transition: opacity .5s; }
.glow-card:hover::after { opacity: 1; }

/* ---------------- 点と面（なぜ正夢） ---------------- */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 4vw, 60px); align-items: stretch; }
.vs-card { position: relative; padding: clamp(30px, 4vw, 54px); border: 1px solid var(--line); }
.vs-card.is-alone { background: rgba(10, 15, 34, .35); }
.vs-card.is-together { border-color: rgba(232, 210, 162, .35); background: linear-gradient(160deg, rgba(232, 210, 162, .08), rgba(10, 15, 34, .4)); box-shadow: 0 0 80px rgba(232, 210, 162, .07); }
.vs-card canvas { width: 100%; height: 170px; display: block; margin-bottom: 26px; }
.vs-card h3 { font-family: var(--mincho); font-size: clamp(20px, 2vw, 26px); letter-spacing: .1em; }
.vs-card .sub { color: var(--mist); font-size: 13.5px; margin: 10px 0 22px; }
.vs-card li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line); font-size: 14px; }
.vs-card li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.vs-card.is-together li::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.vs-card .future { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .2em; color: var(--mist); }
.vs-card .future b { font-family: var(--mincho); font-weight: 500; font-size: 30px; color: var(--star); letter-spacing: .2em; }
.vs-card.is-together .future b { color: var(--gold-hi); text-shadow: 0 0 20px rgba(232, 210, 162, .6); font-size: 40px; }
.versus__mid { display: grid; place-items: center; font-family: var(--serif-en); font-style: italic; font-size: 26px; color: var(--gold); }
.versus__mid span { writing-mode: vertical-rl; letter-spacing: .3em; font-size: 13px; font-family: var(--mono); font-style: normal; color: var(--faint); }

/* ---------------- 星座図 ---------------- */
.cn { position: relative; }
.cn svg { width: 100%; height: auto; display: block; overflow: visible; }
.cn-link { fill: none; stroke: rgba(141, 182, 255, .28); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-io), stroke .4s, opacity .4s; }
.cn-link.is-mutual { stroke: rgba(232, 210, 162, .45); stroke-dasharray: 1; }
.cn.is-in .cn-link { stroke-dashoffset: 0; }
.cn.is-in .cn-link.is-mutual { transition-delay: 1.6s; }
.has-hot .cn-link { opacity: .15; }
.has-hot .cn-link.is-hot { opacity: 1; stroke: var(--gold-hi); }
.cn-pulse { fill: #fff; filter: url(#glow); }
.cn-pulse.is-mutual { fill: var(--gold-hi); }
.cn-orbit { fill: none; stroke: rgba(243, 239, 230, .07); stroke-dasharray: 2 6; }
.cn-node { cursor: pointer; outline: none; }
.cn-node .star { fill: #fff; filter: url(#glow); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 1s var(--ease); }
.cn.is-in .cn-node .star { transform: scale(1); transition-delay: calc(var(--i) * 90ms + .6s); }
.cn-node .halo { fill: url(#halo); opacity: .5; transform-box: fill-box; transform-origin: center; animation: breathe 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes breathe { 50% { opacity: .9; transform: scale(1.25); } }
.cn-node text { fill: var(--star); font-family: var(--mincho); font-size: 15px; letter-spacing: .12em; opacity: 0; transition: opacity 1s, fill .3s; }
.cn-node text.en { font-family: var(--mono); font-size: 7.5px; letter-spacing: .3em; fill: var(--gold); }
.cn.is-in .cn-node text { opacity: 1; transition-delay: calc(var(--i) * 90ms + 1s); }
.has-hot .cn-node:not(.is-hot) text { opacity: .3; }
.cn-node.is-hot .star { transform: scale(1.6); }
.cn-node .tag { font-family: var(--mono); font-size: 7px; fill: var(--dawn); letter-spacing: .2em; }
.cn-center .core { fill: url(#core); }
.cn-center text { fill: var(--gold-hi); font-size: 19px; }
.cn-info { position: absolute; left: 0; bottom: 0; width: min(330px, 100%); padding: 22px 24px; border-left: 1px solid var(--gold); background: linear-gradient(90deg, rgba(10, 15, 34, .85), rgba(10, 15, 34, .3)); opacity: 0; transform: translateY(10px); transition: all .5s var(--ease); pointer-events: none; }
.cn-info.is-on { opacity: 1; transform: none; }
.cn-info__en { font-family: var(--mono); font-size: 9px; letter-spacing: .35em; color: var(--gold); }
.cn-info__name { font-family: var(--mincho); font-size: 21px; letter-spacing: .12em; margin: 6px 0 8px; }
.cn-info__text { font-size: 13px; color: var(--mist); line-height: 1.9; margin: 0; }
.cn-hint { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--faint); margin-top: 18px; }
.cn-goals { display: flex; justify-content: center; gap: clamp(20px, 5vw, 80px); margin-top: 50px; flex-wrap: wrap; }
.cn-goals div { text-align: center; }
.cn-goals small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--gold); }
.cn-goals b { font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .08em; }
.cn-goals b i { font-style: normal; color: var(--faint); margin: 0 .4em; font-size: .7em; }

/* ---------------- グループ各社（コンタクトシート） ---------------- */
.sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.co { position: relative; display: block; background: #0d0c0b; padding: 16px 8px 14px; transition: transform .7s var(--ease), box-shadow .7s; }
.co::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 12px; background: var(--hole) repeat-x left center / 20px 12px; opacity: .8; }
.co__img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.co__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.18) brightness(.9); transform: scale(1.06); transition: filter 1s var(--ease), transform 1.4s var(--ease); }
.co__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 210, .35) 50%, transparent 65%); transform: translateX(-130%); transition: transform 1.2s var(--ease); }
.co:hover .co__img img { filter: none; transform: scale(1); }
.co:hover .co__img::after { transform: translateX(130%); }
.co:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(232, 210, 162, .12); }
.co__body { padding: 16px 8px 4px; }
.co__en { font-family: var(--mono); font-size: 8.5px; letter-spacing: .3em; color: var(--gold); display: flex; justify-content: space-between; }
.co__en em { font-style: normal; color: var(--dawn); }
.co__name { font-family: var(--mincho); font-size: 17px; letter-spacing: .1em; margin: 8px 0 6px; line-height: 1.5; }
.co__text { font-size: 12.5px; line-height: 1.85; color: var(--mist); margin: 0; }
.co__no { position: absolute; right: 12px; top: 22px; font-family: var(--mono); font-size: 9px; color: rgba(255, 255, 255, .7); z-index: 2; letter-spacing: .2em; }
.sheet.is-3 { grid-template-columns: repeat(3, 1fr); }
.note { font-size: 12px; color: var(--faint); margin-top: 26px; }

/* ---------------- 正夢サイクル ---------------- */
.cycle { position: relative; height: 340vh; }
.cycle__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(30px, 5vw, 80px); width: min(1240px, 100% - var(--gut) * 2); margin: 0 auto; }
.cyc { position: relative; aspect-ratio: 1; width: min(560px, 100%); margin: 0 auto; }
.cyc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cyc-ring { fill: none; stroke: rgba(243, 239, 230, .12); }
.cyc-ring.is-fill { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); filter: url(#glow2); }
.cyc-comet { position: absolute; inset: 0; transform: rotate(var(--ang, 0deg)); pointer-events: none; }
.cyc-comet::before { content: ""; position: absolute; left: 50%; top: 8.5%; margin: -7px 0 0 -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(255, 236, 200, .9), 0 0 50px 10px rgba(232, 210, 162, .5); }
.cyc-step { position: absolute; transform: translate(-50%, -50%); text-align: center; width: 120px; transition: all .6s var(--ease); }
.cyc-step i { display: block; margin: 0 auto 10px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--faint); background: var(--ink); transition: all .6s var(--ease); }
.cyc-step b { display: block; font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .3em; color: var(--faint); }
.cyc-step span { font-family: var(--mincho); font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .2em; color: var(--mist); }
.cyc-step.is-done i { background: var(--gold); border-color: var(--gold); }
.cyc-step.is-on i { background: #fff; border-color: #fff; box-shadow: 0 0 16px 4px rgba(255, 236, 200, .8); transform: scale(1.4); }
.cyc-step.is-on span { color: var(--gold-hi); text-shadow: 0 0 18px rgba(232, 210, 162, .6); }
.cyc-core { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(232, 210, 162, .16), rgba(232, 210, 162, .02) 60%, transparent 70%); }
.cyc-core strong { display: block; font-family: var(--mincho); font-weight: 500; font-size: clamp(19px, 2.2vw, 28px); letter-spacing: .2em; color: var(--gold-hi); }
.cyc-core small { display: block; margin-top: 10px; font-size: 11.5px; letter-spacing: .25em; color: var(--mist); }
.cyc-core .four { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 12px; font-family: var(--mincho); font-size: 14px; letter-spacing: .2em; }
.cyc-notes { position: relative; min-height: 230px; }
.cyc-note { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: all .7s var(--ease); }
.cyc-note.is-on { opacity: 1; transform: none; }
.cyc-note b { display: block; font-family: var(--serif-en); font-style: italic; font-weight: 300; font-size: clamp(60px, 7vw, 96px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(232, 210, 162, .55); }
.cyc-note h3 { font-family: var(--mincho); font-size: clamp(26px, 3vw, 40px); letter-spacing: .2em; margin: 10px 0 14px; }
.cyc-note p { color: var(--mist); max-width: 28em; }

/* ---------------- お金の循環 ---------------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: center; }
.flow-node { position: relative; z-index: 2; padding: 26px 20px; text-align: center; border: 1px solid var(--line); background: rgba(10, 15, 34, .7); margin: 0 14px; }
.flow-node small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .3em; color: var(--gold); }
.flow-node strong { display: block; font-family: var(--mincho); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: .12em; margin: 8px 0 6px; }
.flow-node p { font-size: 12.5px; line-height: 1.8; color: var(--mist); margin: 0; }
.flow-node.is-key { border-color: rgba(232, 210, 162, .55); box-shadow: 0 0 60px rgba(232, 210, 162, .12); }
.flow-split { display: grid; gap: 18px; }
.flow svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.flow-path { fill: none; stroke: rgba(232, 210, 162, .55); stroke-width: 1.4; stroke-dasharray: 2 10; stroke-linecap: round; animation: flowdash 1.4s linear infinite; }
.flow-path.is-back { stroke: rgba(141, 182, 255, .45); animation-duration: 2.2s; }
@keyframes flowdash { to { stroke-dashoffset: -24; } }
.flow-cycle { margin-top: 56px; text-align: center; font-family: var(--mincho); font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .12em; line-height: 2.2; }
.flow-cycle i { font-style: normal; color: var(--gold); margin: 0 .5em; }

/* ---------------- 数字 ---------------- */
.nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.num { padding: clamp(28px, 3.4vw, 50px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.num small { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--gold); }
.num .v { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; font-family: var(--serif-en); font-weight: 300; font-size: clamp(54px, 6.4vw, 96px); line-height: 1; letter-spacing: -.01em; }
.num .v u { text-decoration: none; font-family: var(--mincho); font-size: clamp(16px, 1.7vw, 22px); letter-spacing: .1em; color: var(--mist); }
.num p { font-size: 13px; color: var(--mist); margin: 0; }
.num.is-dream { background: radial-gradient(80% 120% at 100% 100%, rgba(241, 180, 154, .14), transparent 60%); }
.num.is-dream .v { color: var(--gold-hi); text-shadow: 0 0 30px rgba(232, 210, 162, .5); }

/* ---------------- 道のり ---------------- */
.road { position: relative; height: 300vh; }
.road__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.road__line { position: relative; width: min(1240px, 100% - var(--gut) * 2); margin: 0 auto; }
.road__rail { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.road__fill { position: absolute; left: 0; top: 7px; height: 1px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, rgba(141, 182, 255, .2), var(--gold-hi)); box-shadow: 0 0 10px var(--gold); }
.road__fill::after { content: ""; position: absolute; right: -8px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 6px rgba(255, 236, 200, .85), 0 0 70px 18px rgba(232, 210, 162, .35); }
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px); }
.phase { padding-top: 46px; opacity: .25; transform: translateY(16px); filter: blur(2px); transition: all 1s var(--ease); }
.phase.is-on { opacity: 1; transform: none; filter: none; }
.phase__no { font-family: var(--mono); font-size: 10px; letter-spacing: .4em; color: var(--gold); }
.phase__when { font-family: var(--serif-en); font-style: italic; font-size: 15px; color: var(--mist); }
.phase h3 { font-family: var(--mincho); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.6; letter-spacing: .12em; margin: 14px 0 16px; }
.phase li { font-size: 13px; line-height: 1.8; color: var(--mist); padding: 6px 0 6px 16px; position: relative; }
.phase li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 8px; top: 9px; }
.phase.is-inf h3 { color: var(--gold-hi); text-shadow: 0 0 24px rgba(232, 210, 162, .5); }
.road__head { width: min(1240px, 100% - var(--gut) * 2); margin: 0 auto 70px; }

/* ---------------- 関わり方 ---------------- */
.joins { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 30px); }
.join { position: relative; padding: 46px 34px 40px; background: rgba(10, 15, 34, .55); overflow: hidden; }
.join::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(232, 210, 162, .9) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
.join:nth-child(2)::before { animation-delay: -2s; } .join:nth-child(3)::before { animation-delay: -4s; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.join::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
.join__no { font-family: var(--serif-en); font-style: italic; font-size: 54px; line-height: 1; color: var(--gold); }
.join h3 { font-family: var(--mincho); font-size: clamp(20px, 1.9vw, 25px); letter-spacing: .14em; margin: 20px 0 16px; }
.join p { font-size: 14px; color: var(--mist); margin: 0; }

/* ---------------- 締め（夜明け） ---------------- */
.finale { position: relative; height: 300vh; }
.finale__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.finale__img { position: absolute; inset: 0; clip-path: circle(calc(min(1, var(--p, 0) * 1.9) * 125%) at 50% 100%); }
.finale__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - var(--p, 0) * .2)); filter: brightness(calc(.95 + var(--p, 0) * .2)) saturate(1.12); }
.finale__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 46% at 71% 37%, rgba(255, 226, 170, calc(var(--p, 0) * .5)), transparent 70%), linear-gradient(180deg, rgba(12, 18, 60, .34), rgba(12, 18, 60, .08) 45%, rgba(12, 18, 60, .4)); }
.finale__text { position: relative; z-index: 2; text-align: center; padding: 0 var(--gut); color: #f7f2e8; }
.finale__lines { font-family: var(--mincho); font-size: clamp(17px, 2vw, 25px); line-height: 2.3; letter-spacing: .18em; text-shadow: 0 0 20px rgba(8, 12, 40, .8); }
.finale__big { font-family: var(--mincho); font-weight: 500; font-size: clamp(44px, 8vw, 118px); letter-spacing: .14em; line-height: 1.2; margin-top: 26px; opacity: clamp(0, calc(var(--p, 0) * 5 - 3.3), 1); filter: blur(calc((1 - clamp(0, calc(var(--p, 0) * 5 - 3.3), 1)) * 14px)); text-shadow: 0 0 50px rgba(255, 220, 180, .6), 0 2px 30px rgba(8, 12, 40, .5); }
.finale__okaeri { margin-top: 30px; font-family: var(--mincho); font-size: clamp(18px, 2.1vw, 28px); letter-spacing: .5em; color: #fff1cf; text-shadow: 0 0 24px rgba(8, 12, 40, .6); opacity: clamp(0, calc(var(--p, 0) * 6 - 4.8), 1); }
.finale__lines span { display: block; opacity: clamp(0, calc(var(--p, 0) * 5 - 1.9 - var(--k) * .45), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p, 0) * 5 - 1.9 - var(--k) * .45), 1)) * 20px)); }

/* ---------------- CTA帯 ---------------- */
.cta { position: relative; text-align: center; padding: clamp(110px, 14vw, 190px) var(--gut); overflow: hidden; }
.cta::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 110px; background: linear-gradient(transparent, var(--gold)); }
.cta .h-jp { margin-top: 30px; }
.cta__btns { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 50px; }

/* ---------------- フッター ---------------- */
.site-footer { border-top: 1px solid var(--line); padding: 80px var(--gut) 40px; background: linear-gradient(180deg, transparent, rgba(10, 15, 34, .6)); }
.foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; width: min(1240px, 100%); margin: 0 auto; }
.foot__copy { font-family: var(--mincho); font-size: clamp(26px, 3.4vw, 46px); letter-spacing: .14em; line-height: 1.5; margin: 26px 0 16px; }
.foot__org { color: var(--mist); font-size: 13px; }
.foot__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; align-content: start; }
.foot__nav a { font-size: 13.5px; letter-spacing: .14em; display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); transition: color .3s, padding .4s var(--ease); }
.foot__nav a small { font-family: var(--mono); font-size: 8.5px; letter-spacing: .3em; color: var(--faint); }
.foot__nav a:hover { color: var(--gold-hi); padding-left: 8px; }
.foot__bottom { display: flex; justify-content: space-between; width: min(1240px, 100%); margin: 70px auto 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; color: var(--faint); flex-wrap: wrap; gap: 10px; }
.foot__marquee { overflow: hidden; margin: 70px calc(var(--gut) * -1) 0; white-space: nowrap; font-family: var(--serif-en); font-style: italic; font-weight: 300; font-size: clamp(60px, 11vw, 170px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(232, 210, 162, .22); }
.foot__marquee span { display: inline-block; animation: marq 40s linear infinite; padding-right: .5em; }
@keyframes marq { to { transform: translateX(-100%); } }

/* ---------------- 下層ページ ---------------- */
.phero { position: relative; min-height: 88vh; min-height: 88svh; display: grid; grid-template-columns: 1fr 1.1fr; align-items: end; gap: clamp(30px, 5vw, 80px); padding: 140px var(--gut) clamp(70px, 9vw, 120px); overflow: hidden; }
.phero__title { position: relative; z-index: 2; }
.phero__no { font-family: var(--mono); font-size: 10.5px; letter-spacing: .45em; color: var(--gold); }
.phero h1 { white-space: nowrap; font-family: var(--mincho); font-weight: 500; font-size: clamp(36px, 5.6vw, 88px); letter-spacing: .14em; line-height: 1.25; margin: 22px 0 10px; text-shadow: 0 0 40px rgba(4, 5, 10, .9); }
.phero .en-title { font-size: clamp(18px, 2vw, 26px); }
.phero .lead { margin-top: 36px; }
.phero__film { position: relative; z-index: 1; transform: rotate(-4deg); }
.phero__film .film { animation: floaty 9s ease-in-out infinite; }
.phero__film .film img { filter: brightness(.97); }
.phero__film::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(closest-side, rgba(232, 210, 162, .18), transparent); z-index: -1; }
@keyframes floaty { 50% { transform: translateY(-14px) rotate(1deg); } }
.phero__film .film--2 { position: absolute; width: 46%; right: -8%; bottom: -16%; transform: rotate(9deg); animation-delay: -3s; }
.crumbs { position: absolute; left: var(--gut); top: 104px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; color: var(--faint); z-index: 3; }
.crumbs a:hover { color: var(--gold); }
.toc { position: sticky; top: 0; z-index: 50; display: flex; gap: 6px; overflow-x: auto; padding: 14px var(--gut); background: rgba(4, 5, 10, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc a { flex: none; font-size: 12.5px; letter-spacing: .14em; padding: 6px 14px; border: 1px solid var(--line); border-radius: 30px; color: var(--mist); transition: all .3s; }
.toc a:hover { border-color: var(--gold); color: var(--gold-hi); }
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.split.is-rev { grid-template-columns: 1.2fr 1fr; }
.vtitle { writing-mode: vertical-rl; font-family: var(--mincho); font-size: clamp(30px, 3.6vw, 50px); letter-spacing: .3em; line-height: 1.6; height: 12em; }
.prose { font-size: clamp(15px, 1.25vw, 16.5px); line-height: 2.25; color: rgba(243, 239, 230, .86); }
.prose .big { font-family: var(--mincho); font-size: clamp(21px, 2.3vw, 30px); line-height: 1.9; letter-spacing: .1em; color: var(--star); margin-bottom: 1.2em; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.cards.is-2 { grid-template-columns: repeat(2, 1fr); }
.card { position: relative; padding: 38px 32px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(17, 24, 51, .5), rgba(4, 5, 10, .3)); }
.card__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(232, 210, 162, .45); color: var(--gold-hi); font-family: var(--mincho); font-size: 18px; box-shadow: 0 0 30px rgba(232, 210, 162, .15), inset 0 0 14px rgba(232, 210, 162, .1); }
.card h3 { font-family: var(--mincho); font-size: clamp(18px, 1.7vw, 22px); letter-spacing: .12em; margin: 22px 0 12px; line-height: 1.6; }
.card p { font-size: 13.5px; color: var(--mist); margin: 0; }
.card.has-img { padding: 0; overflow: hidden; }
.card.has-img .card__ph { aspect-ratio: 16/10; overflow: hidden; }
.card.has-img .card__ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.92); transition: transform 1.6s var(--ease), filter 1s; }
.card.has-img:hover .card__ph img { transform: scale(1.05); filter: brightness(.95); }
.card.has-img .card__in { padding: 30px 30px 34px; }
.because { margin-top: 60px; padding: 40px clamp(24px, 4vw, 54px); border: 1px solid rgba(232, 210, 162, .3); position: relative; }
.because > small { position: absolute; top: -9px; left: 30px; padding: 0 12px; background: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: .4em; color: var(--gold); }
.because li { font-family: var(--mincho); font-size: clamp(16px, 1.5vw, 19px); letter-spacing: .08em; padding: 12px 0 12px 30px; position: relative; border-bottom: 1px dashed var(--line); }
.because li:last-child { border: 0; }
.because li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 18px; }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.value { padding: clamp(30px, 4vw, 56px); }
.value + .value { border-left: 1px solid var(--line); }
.value h3 { font-family: var(--mincho); font-size: clamp(21px, 2.1vw, 28px); letter-spacing: .14em; display: flex; align-items: center; gap: 14px; }
.value h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 14px 3px var(--gold); }
.value.is-eco h3::before { background: #cfe0ff; box-shadow: 0 0 14px 3px var(--blue); }
.value li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.both { text-align: center; margin-top: 60px; font-family: var(--mincho); font-size: clamp(20px, 2.4vw, 32px); line-height: 2; letter-spacing: .14em; }
.both em { font-style: normal; color: var(--gold-hi); text-shadow: 0 0 24px rgba(232, 210, 162, .5); }
.pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pair { background: var(--ink); padding: 34px clamp(22px, 3vw, 40px); }
.pair__names { display: flex; align-items: center; gap: 16px; font-family: var(--mincho); font-size: clamp(18px, 1.7vw, 22px); letter-spacing: .12em; }
.pair__names i { flex: 1; height: 1px; position: relative; background: linear-gradient(90deg, var(--gold), var(--blue)); max-width: 120px; }
.pair__names i::before { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation: shuttle 2.6s ease-in-out infinite; }
@keyframes shuttle { 0%,100% { left: 0; } 50% { left: calc(100% - 7px); } }
.pair p { font-size: 13.5px; color: var(--mist); margin: 14px 0 0; }
.comms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.comm { text-align: center; padding: 40px 20px; position: relative; }
.comm + .comm::before { content: "⇄"; position: absolute; left: -10px; top: 70px; color: var(--gold); font-size: 16px; }
.comm__orb { width: 110px; height: 110px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mincho); font-size: 22px; letter-spacing: .1em; background: radial-gradient(circle at 40% 35%, rgba(255, 240, 210, .25), rgba(232, 210, 162, .05) 60%, transparent 70%); border: 1px solid rgba(232, 210, 162, .35); box-shadow: 0 0 50px rgba(232, 210, 162, .12); animation: breathe2 5s ease-in-out infinite; }
.comm:nth-child(2) .comm__orb { animation-delay: -1.2s; } .comm:nth-child(3) .comm__orb { animation-delay: -2.4s; } .comm:nth-child(4) .comm__orb { animation-delay: -3.6s; }
@keyframes breathe2 { 50% { box-shadow: 0 0 80px rgba(232, 210, 162, .3); } }
.comm small { font-family: var(--mono); font-size: 9px; letter-spacing: .3em; color: var(--gold); }
.comm p { font-size: 13.5px; color: var(--mist); margin: 10px 0 0; }
.steps { counter-reset: st; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); }
.step { position: relative; padding: 40px 18px 10px; }
.step::before { counter-increment: st; content: "STEP " counter(st); font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; color: var(--gold); }
.step::after { content: ""; position: absolute; left: 18px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); }
.step h4 { font-family: var(--mincho); font-size: 21px; letter-spacing: .2em; margin: 10px 0 8px; }
.step p { font-size: 13px; color: var(--mist); margin: 0; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px); margin-bottom: 70px; }
.listbox { padding: 40px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.listbox small { font-family: var(--mono); font-size: 10px; letter-spacing: .35em; color: var(--gold); }
.listbox h3 { font-family: var(--mincho); font-size: 15px; letter-spacing: .1em; color: var(--mist); margin: 8px 0 18px; font-weight: 400; }
.listbox .v { font-family: var(--serif-en); font-weight: 300; font-size: clamp(46px, 5.6vw, 80px); line-height: 1; }
.listbox .v i { font-style: normal; color: var(--faint); font-size: .5em; margin: 0 .3em; }
.listbox .v b { font-weight: 300; color: var(--gold-hi); text-shadow: 0 0 30px rgba(232, 210, 162, .4); }
.listbox .v u { text-decoration: none; font-family: var(--mincho); font-size: .3em; color: var(--mist); }
.listbox canvas { position: absolute; right: 0; top: 0; width: 50%; height: 100%; opacity: .7; pointer-events: none; }
.caution { font-size: 12px; color: var(--faint); margin-top: 30px; padding-left: 1em; text-indent: -1em; }
.form { display: grid; gap: 26px; }
.form label { display: grid; gap: 10px; font-size: 13px; letter-spacing: .14em; color: var(--mist); }
.form label b { color: var(--dawn); font-weight: 400; font-size: 11px; margin-left: 8px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 15px; color: var(--star); background: rgba(10, 15, 34, .6); border: 1px solid var(--line); border-radius: 0; padding: 16px 18px; transition: border-color .3s, box-shadow .3s; }
.form textarea { min-height: 180px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(232, 210, 162, .1); }
.form .btn { justify-self: start; }
.form__done { display: none; padding: 30px; border: 1px solid var(--gold); text-align: center; font-family: var(--mincho); letter-spacing: .14em; }
.form.is-sent > *:not(.form__done) { display: none; }
.form.is-sent .form__done { display: block; }
.radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.radios label { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); cursor: pointer; letter-spacing: .08em; color: var(--star); font-size: 13.5px; }
.radios input { width: auto; accent-color: #e8d2a2; }
.radios label:has(input:checked) { border-color: var(--gold); background: rgba(232, 210, 162, .08); }
.dream { position: relative; text-align: center; padding: clamp(80px, 10vw, 140px) var(--gut); overflow: hidden; }
.dream__v { font-family: var(--mincho); font-weight: 500; font-size: clamp(54px, 10vw, 150px); letter-spacing: .08em; line-height: 1.1; background: linear-gradient(180deg, #fff6df, #e8d2a2 60%, #b78f5c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(232, 210, 162, .35)); }
.dream__list { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 30px; font-family: var(--mincho); font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .14em; }
.dream__list li::before { content: "✦ "; color: var(--gold); }
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.place .film { padding: 16px 8px; }
.place .film::before, .place .film::after { height: 11px; background-size: 18px 11px; }
.place h3 { font-family: var(--mincho); font-size: clamp(19px, 1.8vw, 23px); letter-spacing: .14em; margin: 26px 0 10px; }
.place p { font-size: 13.5px; color: var(--mist); margin: 0; }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.role { background: var(--ink); padding: 36px 30px; transition: background .5s; }
.role:hover { background: #0b1124; }
.role b { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .3em; color: var(--gold); }
.role h3 { font-family: var(--mincho); font-size: 19px; letter-spacing: .1em; margin: 12px 0 8px; }
.role p { font-size: 13px; color: var(--mist); margin: 0; }
.hq-band { text-align: center; padding: 40px; border: 1px solid rgba(232, 210, 162, .35); margin-bottom: 30px; background: radial-gradient(60% 120% at 50% 0%, rgba(232, 210, 162, .12), transparent 70%); }
.hq-band strong { display: block; font-family: var(--mincho); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .2em; color: var(--gold-hi); }
.hq-band span { color: var(--mist); font-size: 14px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.pager a { position: relative; padding: clamp(40px, 6vw, 80px) var(--gut); overflow: hidden; transition: background .6s; }
.pager a + a { border-left: 1px solid var(--line); text-align: right; }
.pager small { font-family: var(--mono); font-size: 10px; letter-spacing: .35em; color: var(--gold); }
.pager strong { display: block; font-family: var(--mincho); font-weight: 500; font-size: clamp(24px, 3vw, 40px); letter-spacing: .14em; margin-top: 10px; }
.pager a:hover { background: rgba(232, 210, 162, .05); }

/* ---------------- レスポンシブ ---------------- */
@media (max-width: 1080px) {
  .sheet { grid-template-columns: repeat(3, 1fr); }
  .gnav a small { display: none; }
}
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .gnav { position: fixed; inset: 0; z-index: 125; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 90px 32px 40px; background: rgba(4, 5, 10, .96); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
  .menu-open .gnav { opacity: 1; pointer-events: auto; }
  .gnav a { font-family: var(--mincho); font-size: 24px; letter-spacing: .2em; padding: 10px 0; opacity: 0; transform: translateY(16px); transition: all .7s var(--ease); }
  .gnav a small { display: block; font-size: 9px; margin-top: 4px; }
  .menu-open .gnav a { opacity: 1; transform: none; }
  .menu-open .gnav a:nth-child(2) { transition-delay: .06s; } .menu-open .gnav a:nth-child(3) { transition-delay: .12s; }
  .menu-open .gnav a:nth-child(4) { transition-delay: .18s; } .menu-open .gnav a:nth-child(5) { transition-delay: .24s; }
  .menu-open .gnav a:nth-child(6) { transition-delay: .3s; }
  .gnav .gnav__cta { margin-top: 20px; font-size: 16px; }
  .scroll-meter, .hero__en { display: none; }
  .promises, .joins, .cards, .places, .roles { grid-template-columns: 1fr; }
  .versus { grid-template-columns: 1fr; }
  .versus__mid span { writing-mode: horizontal-tb; }
  .sheet { grid-template-columns: repeat(2, 1fr); }
  .sheet.is-3 { grid-template-columns: repeat(2, 1fr); }
  .cycle { height: auto; }
  .cycle__sticky { position: relative; height: auto; grid-template-columns: 1fr; padding: 40px 0; }
  .cyc-notes { min-height: 0; }
  .cyc-note { position: relative; opacity: 1; transform: none; margin-bottom: 34px; }
  .cyc-note b { font-size: 44px; }
  .cyc-note h3 { font-size: 24px; margin: 4px 0 6px; }
  .flow { grid-template-columns: 1fr; gap: 34px; }
  .flow svg { display: none; }
  .flow-node { margin: 0; }
  .flow > *:not(svg):not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); color: var(--gold); }
  .flow-split { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nums { grid-template-columns: 1fr 1fr; }
  .road { height: auto; }
  .road__sticky { position: relative; height: auto; padding: 110px 0 40px; }
  .road__rail, .road__fill { display: none; }
  .phases { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--line); margin-left: 6px; }
  .phase { opacity: 1; transform: none; filter: none; padding: 0 0 40px 26px; position: relative; }
  .phase::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); }
  .foot { grid-template-columns: 1fr; }
  .phero { grid-template-columns: 1fr; align-items: start; min-height: 0; padding-top: 140px; }
  .phero__film { width: 88%; margin: 10px auto 30px; }
  .split, .split.is-rev { grid-template-columns: 1fr; }
  .vtitle { writing-mode: horizontal-tb; height: auto; font-size: 28px; letter-spacing: .14em; }
  .values { grid-template-columns: 1fr; }
  .value + .value { border-left: 0; border-top: 1px solid var(--line); }
  .pairs { grid-template-columns: 1fr; }
  .comms { grid-template-columns: 1fr 1fr; }
  .comm + .comm::before { display: none; }
  .steps { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); margin-left: 4px; }
  .step { padding: 0 0 30px 26px; }
  .step::after { left: -5px; top: 4px; }
  .lists { grid-template-columns: 1fr; }
  .radios { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager a + a { border-left: 0; border-top: 1px solid var(--line); }
  .hreel { height: 420vh; }
  .hreel__track { padding: 0 50vw 0 12vw; }
  .hframe { width: 72vw; }
  .cn-info { position: relative; width: 100%; margin-top: 20px; opacity: 1; transform: none; }
  .scene-no { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 14.5px; }
  .h-jp { font-size: 22px; letter-spacing: .06em; }
  .hero__sub { font-size: 12.5px; letter-spacing: .06em; }
  .hero__title { font-size: 44px; }
  .sheet { grid-template-columns: 1fr 1fr; gap: 10px; }
  .co { padding: 12px 5px 10px; }
  .co__body { padding: 12px 4px 2px; }
  .co__name { font-size: 15px; }
  .co__text { font-size: 11.5px; }
  .nums { grid-template-columns: 1fr; }
  .hero__hud { display: none; }
  .sf { width: 210px; left: -105px; top: -80px; }
  .sf__cap { font-size: 11px; bottom: 22px; }
  .comms { grid-template-columns: 1fr 1fr; }
  .comm { padding: 24px 6px; }
  .comm__orb { width: 86px; height: 86px; font-size: 18px; }
  .brand__jp { font-size: 17px; }
  .lightscene__text { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-split] .ch, .reveal-group > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ---- 追加：ヒーローの稜線・星座図の出し分け ---- */
.hero__ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; object-fit: cover; object-position: 50% 100%; opacity: .75; -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 75%); mask-image: linear-gradient(to top, #000 22%, transparent 75%); pointer-events: none; }
.cn.is-sp { display: none; }
@media (max-width: 760px) { .cn.is-pc { display: none; } .cn.is-sp { display: block; } }
.form__group > label { color: var(--mist); font-size: 13px; letter-spacing: .14em; display: block; }

/* ---- WordPress版の追加 ---- */
.form__err { padding: 16px 20px; border: 1px solid var(--dawn); color: var(--dawn); font-size: 14px; margin-bottom: 26px; }
.form__agree span { display: flex; align-items: center; gap: 10px; color: var(--star); }
.form__agree input { width: auto; accent-color: #e8d2a2; }
.doc { font-size: 15px; line-height: 2.1; color: rgba(243, 239, 230, .86); }
.doc h2 { font-family: var(--mincho); font-size: clamp(19px, 1.8vw, 23px); letter-spacing: .1em; margin: 2.4em 0 .8em; padding-left: 16px; border-left: 1px solid var(--gold); }
.doc a { color: var(--gold-hi); text-decoration: underline; }
.doc ul, .doc ol { padding-left: 1.4em; list-style: disc; margin: 0 0 1.2em; }
.doc img { margin: 1.4em 0; }
.phero.is-simple { min-height: 0; grid-template-columns: 1fr; padding-bottom: 40px; }


/* =========================================================
   v1.1 ― 夜から朝へ
   夢の世界（夜）から、スクロールとともに空が明け、明るい朝（未来）に着く。
   --sky: 0（夜）→ 1（朝）。main.js がスクロール位置から決め、背景の色と光を動かす。
   [data-tone="day"] の中は、濃い文字の朝の配色。
   ========================================================= */
body { background: #080c26; }
.skyfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, #070b24 0%, #0d1338 55%, #171a4a 100%); }
/* 夜の夢：ゆっくり揺れる淡い色の光 */
.skyfx__aurora { position: absolute; inset: -22%; filter: blur(64px); opacity: clamp(0, calc(1 - var(--sky) * 2.1), 1); will-change: transform;
  background:
    radial-gradient(38% 30% at 20% 30%, rgba(92, 126, 255, .34), transparent 70%),
    radial-gradient(34% 28% at 80% 20%, rgba(170, 112, 255, .30), transparent 70%),
    radial-gradient(42% 26% at 62% 80%, rgba(255, 146, 178, .18), transparent 70%),
    radial-gradient(30% 24% at 10% 84%, rgba(70, 214, 204, .16), transparent 70%);
  animation: aurora 28s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1); } 100% { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.09); } }
/* 地平線から昇る朝の光 */
.skyfx__sun { position: absolute; left: 50%; bottom: 0; width: 150vmax; height: 150vmax; margin-left: -75vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 220, .95) 0, rgba(255, 216, 156, .55) 12%, rgba(255, 172, 136, .24) 34%, transparent 62%);
  transform: translate3d(0, calc(50% + (1 - var(--sky)) * 44vh), 0);
  opacity: clamp(0, min(calc(var(--sky) * 2.6 - .62), calc(1.5 - var(--sky))), 1); }
/* 朝の雲 */
.skyfx__clouds { position: absolute; inset: 0; opacity: clamp(0, calc(var(--sky) * 3.4 - 2.3), 1); }
.skyfx__clouds i { position: absolute; border-radius: 50%; filter: blur(46px); background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); animation: cloud 60s linear infinite alternate; }
.skyfx__clouds i:nth-child(1) { left: -8%; top: 10%; width: 56vw; height: 20vh; }
.skyfx__clouds i:nth-child(2) { right: -12%; top: 26%; width: 62vw; height: 24vh; animation-duration: 80s; animation-direction: alternate-reverse; }
.skyfx__clouds i:nth-child(3) { left: 16%; bottom: 14%; width: 70vw; height: 22vh; animation-duration: 95s; background: radial-gradient(closest-side, rgba(255, 238, 214, .9), rgba(255, 238, 214, 0)); }
.skyfx__clouds i:nth-child(4) { right: 4%; bottom: 34%; width: 38vw; height: 14vh; animation-duration: 70s; animation-direction: alternate-reverse; }
@keyframes cloud { from { transform: translate3d(-4vw, 0, 0); } to { transform: translate3d(6vw, -1vh, 0); } }
.grain { opacity: calc(.07 - var(--sky) * .035); }

/* ---------------- 夜明けの場面 ---------------- */
.daybreak { position: relative; height: 320vh; }
.daybreak__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.daybreak__sun { position: absolute; left: 50%; top: 100%; width: min(30vw, 250px); aspect-ratio: 1; margin-left: calc(min(30vw, 250px) / -2); border-radius: 50%;
  background: radial-gradient(circle, #fffdf3 0, #fff0c4 38%, #ffd58a 62%, rgba(255, 190, 120, 0) 72%);
  box-shadow: 0 0 80px 30px rgba(255, 226, 170, .55), 0 0 240px 120px rgba(255, 176, 120, .32);
  transform: translate3d(0, calc(var(--p, 0) * -44vh), 0) scale(calc(.7 + var(--p, 0) * .4)); }
.daybreak__rays { position: absolute; left: 50%; top: 100%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 196, .16) 0 4deg, transparent 4deg 14deg, rgba(255, 214, 160, .1) 14deg 16deg, transparent 16deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, .5) 30%, transparent 62%); mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, .5) 30%, transparent 62%);
  transform: translate3d(0, calc(var(--p, 0) * -44vh), 0) rotate(calc(var(--p, 0) * 26deg));
  opacity: clamp(0, min(calc(var(--p, 0) * 3 - .5), calc(2.6 - var(--p, 0) * 2.4)), 1); }
.daybreak__ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 40vh; }
.daybreak__ridge path { transition: fill .2s linear; }
.daybreak__ridge .r3 { fill: color-mix(in srgb, #2b2d6e calc((1 - var(--p, 0)) * 100%), #b9d2f5); }
.daybreak__ridge .r2 { fill: color-mix(in srgb, #1c1f55 calc((1 - var(--p, 0)) * 100%), #9fc0ee); }
.daybreak__ridge .r1 { fill: color-mix(in srgb, #10143c calc((1 - var(--p, 0)) * 100%), #7fa9e4); }
.daybreak__ridge .r3 { transform: translateY(calc((1 - var(--p, 0)) * 3vh)); }
.daybreak__ridge .r1 { transform: translateY(calc((1 - var(--p, 0)) * -2vh)); }
.daybreak__text { position: relative; z-index: 2; text-align: center; padding: 0 var(--gut); margin-top: -26vh;
  --tx: #f7f2e8; --halo: rgba(8, 12, 40, .75); color: var(--tx); transition: color .7s var(--ease); }
.daybreak.is-light .daybreak__text { --tx: #1a2142; --halo: rgba(255, 252, 240, .9); }
.daybreak.is-light .daybreak__text .label { color: #9a5f14; }
.daybreak__text .label { justify-content: center; transition: color .7s var(--ease); }
.daybreak__lines { margin: 26px 0 0; font-family: var(--mincho); font-size: clamp(16px, 1.9vw, 24px); line-height: 2.3; letter-spacing: .18em; text-shadow: 0 0 22px var(--halo), 0 0 6px var(--halo); }
.daybreak__lines span { display: block; opacity: clamp(0, calc(var(--p, 0) * 7 + .25 - var(--k) * .6), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p, 0) * 7 + .25 - var(--k) * .6), 1)) * 18px)); }
.daybreak__big { margin: 22px 0 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(30px, 5.2vw, 76px); line-height: 1.5; letter-spacing: .12em; text-shadow: 0 0 34px var(--halo), 0 0 8px var(--halo); }
.daybreak__big .ch { --o: clamp(0, calc((var(--p, 0) - .3) * 12 - var(--i) * .14), 1); display: inline-block; opacity: var(--o); transform: translateY(calc((1 - var(--o)) * .6em)); filter: blur(calc((1 - var(--o)) * 10px)); }
@media (max-width: 520px) { .daybreak__big { font-size: 28px; letter-spacing: .06em; } .daybreak__lines { font-size: 14px; letter-spacing: .1em; } }

/* ---------------- 朝の配色（濃い文字） ---------------- */
[data-tone="day"] {
  --ink: #fffaf0; --navy: #eef4ff; --navy-2: #e3ecff;
  --star: #1a2142; --mist: rgba(26, 33, 66, .76); --faint: rgba(26, 33, 66, .52); --line: rgba(26, 33, 66, .16);
  --gold: #a8701c; --gold-hi: #94590f; --blue: #3f6fd1; --dawn: #cf5b3a;
  color: var(--star); color-scheme: light;
}
[data-tone="day"] ::selection { background: rgba(255, 176, 110, .4); }
[data-tone="day"] .h-jp em { text-shadow: none; color: #c2571f; background: linear-gradient(transparent 68%, rgba(255, 196, 120, .5) 68%); }
[data-tone="day"] .en-title { color: rgba(26, 33, 66, .62); }
[data-tone="day"] .btn { border-color: rgba(26, 33, 66, .34); }
[data-tone="day"] .btn:hover { box-shadow: 0 14px 34px rgba(255, 150, 90, .26), inset 0 0 20px rgba(255, 190, 120, .16); }
[data-tone="day"] .btn--solid { background: linear-gradient(120deg, #ffd98a, #ffa574); color: #3a1c08; border-color: transparent; box-shadow: 0 10px 30px rgba(255, 150, 90, .32); }
[data-tone="day"] .more .arr { background: linear-gradient(90deg, var(--gold), transparent); }
[data-tone="day"] .note, [data-tone="day"] .caution { color: rgba(26, 33, 66, .56); }
/* 数字 */
[data-tone="day"] .nums { border-color: rgba(26, 33, 66, .12); }
[data-tone="day"] .num { background: rgba(255, 255, 255, .52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(26, 33, 66, .12); transition: background .6s, transform .8s var(--ease); }
[data-tone="day"] .num:hover { background: rgba(255, 255, 255, .82); }
[data-tone="day"] .num::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%); transform: translateX(-130%); pointer-events: none; }
[data-tone="day"] .reveal-group.is-in .num::after { animation: sheen 1.6s var(--ease) .5s forwards; }
[data-tone="day"] .reveal-group.is-in .num:nth-child(2)::after { animation-delay: .62s; } [data-tone="day"] .reveal-group.is-in .num:nth-child(3)::after { animation-delay: .74s; }
[data-tone="day"] .reveal-group.is-in .num:nth-child(4)::after { animation-delay: .86s; } [data-tone="day"] .reveal-group.is-in .num:nth-child(5)::after { animation-delay: .98s; }
[data-tone="day"] .reveal-group.is-in .num:nth-child(6)::after { animation-delay: 1.1s; }
@keyframes sheen { to { transform: translateX(130%); } }
[data-tone="day"] .num .v { color: #1a2142; }
[data-tone="day"] .num.is-dream { background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 214, 160, .7)); }
[data-tone="day"] .num.is-dream .v { color: #c2571f; text-shadow: none; }
/* 道のり */
[data-tone="day"] .road__rail { background: rgba(26, 33, 66, .18); }
[data-tone="day"] .road__fill { background: linear-gradient(90deg, rgba(63, 111, 209, .35), #ff9a5b); box-shadow: 0 0 12px rgba(255, 154, 91, .6); }
[data-tone="day"] .road__fill::after { background: radial-gradient(circle, #fffdf3 0, #ffe6a8 60%, #ffc978 100%); box-shadow: 0 0 22px 7px rgba(255, 196, 120, .95), 0 0 80px 22px rgba(255, 150, 90, .45); }
[data-tone="day"] .phase.is-inf h3 { color: #c2571f; text-shadow: none; }
[data-tone="day"] .phase li::before { color: #e08a3c; }
/* 関わり方 */
[data-tone="day"] .join { background: rgba(255, 255, 255, .64); box-shadow: 0 24px 60px rgba(110, 140, 210, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .8s var(--ease), box-shadow .8s; }
[data-tone="day"] .join:hover { transform: translateY(-8px); box-shadow: 0 34px 80px rgba(255, 150, 90, .22); }
[data-tone="day"] .join::before { background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(255, 150, 90, .95) 80%, transparent 90%); }
[data-tone="day"] .join__no { color: #e08a3c; }
/* 下層ページの朝 */
[data-tone="day"] .phero h1 { text-shadow: none; }
[data-tone="day"] .phero__film .film { box-shadow: 0 30px 70px rgba(60, 80, 150, .28); }
[data-tone="day"] .phero__film::before { background: radial-gradient(closest-side, rgba(255, 206, 140, .5), transparent); }
[data-tone="day"] .toc { background: rgba(255, 250, 240, .84); }
[data-tone="day"] .prose, [data-tone="day"] .doc { color: rgba(26, 33, 66, .88); }
[data-tone="day"] .card, [data-tone="day"] .promise { background: rgba(255, 255, 255, .58); border-color: rgba(26, 33, 66, .12); }
[data-tone="day"] .form input, [data-tone="day"] .form select, [data-tone="day"] .form textarea { background: rgba(255, 255, 255, .8); border-color: rgba(26, 33, 66, .2); color: var(--star); }
[data-tone="day"] .form input:focus, [data-tone="day"] .form select:focus, [data-tone="day"] .form textarea:focus { border-color: #e08a3c; box-shadow: 0 0 0 4px rgba(255, 170, 100, .2); }
[data-tone="day"] .radios label { background: rgba(255, 255, 255, .6); }
[data-tone="day"] .radios input, [data-tone="day"] .form__agree input { accent-color: #e08a3c; }
[data-tone="day"] .radios label:has(input:checked) { border-color: #e08a3c; background: rgba(255, 190, 120, .22); }
[data-tone="day"] .form__done { border-color: #e08a3c; background: rgba(255, 255, 255, .7); }
[data-tone="day"] .dream__v { background: linear-gradient(180deg, #ffbe6a, #ff865c 60%, #c9503a); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 12px 30px rgba(255, 140, 90, .28)); }
[data-tone="day"] .finale__lines { text-shadow: none; }
[data-tone="day"] .pager a:hover { background: rgba(255, 190, 120, .16); }
[data-tone="day"] .role { background: rgba(255, 255, 255, .6); } [data-tone="day"] .role:hover { background: rgba(255, 255, 255, .9); }
[data-tone="day"] .pair { background: rgba(255, 255, 255, .6); }
/* フッター（朝） */
.site-footer[data-tone="day"], [data-tone="day"] .site-footer { background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7)); border-top-color: rgba(26, 33, 66, .14); }
[data-tone="day"] .foot__marquee, .site-footer[data-tone="day"] .foot__marquee { -webkit-text-stroke: 1px rgba(194, 120, 40, .4); }
[data-tone="day"] .brand svg circle:first-of-type { stroke: #1a2142; }
[data-tone="day"] .brand svg circle:nth-of-type(2) { fill: #ff9a5b; }

/* ヘッダー・固定の部品を、朝の場面では濃い文字に */
.site-header { color: var(--star); transition: transform .6s var(--ease), background .6s, padding .4s, color .7s var(--ease); }
html.tone-day .site-header, html.tone-day .scroll-meter {
  --star: #1a2142; --mist: rgba(26, 33, 66, .76); --faint: rgba(26, 33, 66, .52); --line: rgba(26, 33, 66, .18); --gold: #a8701c; --gold-hi: #94590f; }
html.tone-day .site-header.is-scrolled { background: linear-gradient(rgba(255, 250, 240, .88), rgba(255, 250, 240, 0)); }
html.tone-day .site-header .brand svg circle:first-of-type { stroke: #1a2142; }
html.tone-day .site-header .brand svg circle:nth-of-type(2) { fill: #ff9a5b; }
html.tone-day .gnav .gnav__cta { border-color: rgba(168, 112, 28, .6); }
html.tone-day .gnav .gnav__cta:hover { background: rgba(255, 190, 120, .2); box-shadow: 0 0 30px rgba(255, 170, 100, .3); }
html.tone-day .scroll-meter i { box-shadow: 0 0 8px rgba(255, 170, 100, .8); background: #e08a3c; }
html.tone-day .page-veil { background: #fff8ea; }
html.tone-day .page-veil::before { background: linear-gradient(90deg, transparent, rgba(255, 190, 120, .7) 60%, #fff); box-shadow: 0 0 18px 2px rgba(255, 200, 140, .8); }
@media (max-width: 860px) {
  html.tone-day .gnav { background: rgba(255, 250, 240, .97); }
}

/* 夜の場面も、ほんの少し明るく・やわらかく */
.promise { background: linear-gradient(180deg, rgba(40, 52, 120, .42), rgba(13, 19, 56, .18)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vs-card.is-alone { background: rgba(20, 28, 74, .34); }
.flow-node { background: rgba(20, 28, 74, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.join { background: rgba(20, 28, 74, .5); }
.card { background: linear-gradient(180deg, rgba(40, 52, 120, .42), rgba(13, 19, 56, .22)); }
.hero__ridge { filter: brightness(1.5) saturate(1.2) hue-rotate(8deg); opacity: .8; }
.hero__title, .hero__title .ch { text-shadow: 0 0 40px rgba(8, 12, 40, .85), 0 0 2px rgba(8, 12, 40, .7); }
.hero__sub { color: rgba(243, 239, 230, .8); text-shadow: 0 0 20px rgba(8, 12, 40, .95); }

/* 締めの写真から、朝のフッターへなじませる */
.finale::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(255, 245, 227, 0), #fff5e3 92%); }

/* 夜明け：山のふもとに朝もや（昇る前の太陽を隠し、次の場面へなじませる） */
.daybreak__sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 245, 227, 0), rgba(255, 245, 227, calc(var(--p, 0) * 1.05)) 88%); }
.daybreak__sticky::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 20, 60, 0), rgba(16, 20, 60, calc(1 - var(--p, 0) * 2.2))); }
/* 締め：写真の上の文字を読みやすく */
.finale__text::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 96vw); height: 150%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 16, 52, .46), rgba(10, 16, 52, 0)); opacity: clamp(0, calc(var(--p, 0) * 4 - 1.8), 1); }
.finale__text { position: relative; }
.finale__okaeri { font-size: clamp(20px, 2.5vw, 34px); }

/* 夜のヘッダーの帯を、空の色に合わせる */
.site-header.is-scrolled { background: linear-gradient(rgba(8, 12, 38, .72), rgba(8, 12, 38, 0)); }
/* 約束のカード：光の筋は見出しの上で止める（文字に重ねない） */
.reveal-group.is-in .promise::before { height: 30px; }
.promise::before { left: 28px; }

/* 夜の下層ページ：目次の帯と区切りの箱を、空の色に合わせて軽く */
.toc { background: rgba(10, 15, 48, .72); }
.pair, .role { background: rgba(16, 22, 64, .6); }
.role:hover { background: rgba(30, 40, 100, .7); }
.because > small { background: transparent; text-shadow: 0 0 8px #0d1338, 0 0 8px #0d1338; }
[data-tone="day"] .because > small { text-shadow: 0 0 8px #fffaf0, 0 0 8px #fffaf0; }

/* スマホのメニュー（夜）も空の色に */
@media (max-width: 860px) { .gnav { background: rgba(9, 13, 42, .96); } html.tone-day .gnav { background: rgba(255, 250, 240, .97); } }