/* トップ（v33-top）*/
/* WebGL は背面に固定。DOM は透明で上に重ねる */
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}

/* ── Chapter = 1画面1メッセージ。ステージを sticky で固定し、スクロール量で演出を進める ── */
.ch{position:relative;z-index:1;height:340vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}

/* 余白側（写真が小さい状態）のレイアウト */
.ground{position:absolute;inset:0;display:grid;place-items:center;padding:96px clamp(20px,6vw,96px) 56px}
.win{display:block}  /* WebGL の窓の初期位置を決めるだけの透明プレースホルダ */

.split{display:flex;align-items:center;justify-content:center;gap:clamp(40px,9vw,160px);width:100%}
.split.rev{flex-direction:row-reverse}
.split .win{height:min(58vh,640px);aspect-ratio:4/5}
.copy{display:flex;align-items:flex-start;gap:clamp(28px,3vw,48px)}
.label{display:flex;flex-direction:column;align-items:center;gap:18px;font-family:var(--serif-en);font-size:13px;letter-spacing:.3em;color:var(--charcoal);writing-mode:vertical-rl}
.label::after{content:'';width:1px;height:56px;background:var(--gold)}
.msg{font-family:var(--serif-jp);font-weight:200;font-size:clamp(24px,2.5vw,38px);line-height:2.1;letter-spacing:.22em;writing-mode:vertical-rl;color:var(--navy);height:min(58vh,640px)}

/* Hero */
.hero-ground{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3.4vh,40px)}
.hero-logo{width:clamp(130px,17vh,180px);margin-bottom:-2vh;height:auto;opacity:0;animation:rise 2.4s var(--ease) .3s forwards}
.hero-ground .win{height:min(40vh,440px);aspect-ratio:4/5}
.purpose{text-align:center;opacity:0;animation:rise 2.4s var(--ease) .9s forwards}
.purpose-jp{font-family:var(--serif-jp);font-weight:200;font-size:clamp(17px,1.7vw,23px);letter-spacing:.24em;line-height:1.9}
.purpose-jp span{display:inline-block}
.purpose-en{margin-top:6px;font-family:var(--serif-en);font-style:italic;font-weight:300;font-size:clamp(14px,1.2vw,17px);letter-spacing:.14em;color:var(--charcoal)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 写真が全面になった状態で重ねる文字 */
.full{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(20px,6vw,96px) clamp(48px,11vh,120px);color:var(--paper);opacity:0;pointer-events:none}
.full.center{align-items:center;justify-content:center;text-align:center}
.full .en{font-family:var(--serif-en);font-weight:300;font-size:clamp(56px,9vw,148px);line-height:.95;letter-spacing:.01em}
.full .sub{text-shadow:0 1px 18px rgba(26,31,46,.6);margin-top:18px;font-family:var(--serif-jp);font-weight:300;font-size:clamp(13px,1.1vw,15px);letter-spacing:.24em;opacity:.9}
.full .tag{font-family:var(--serif-en);font-size:clamp(13px,1.2vw,16px);letter-spacing:.5em;opacity:.92}
.cta{display:inline-flex;align-items:center;gap:16px;margin-top:34px;font-family:var(--serif-en);font-size:14px;letter-spacing:.3em;color:var(--gold);pointer-events:auto}
.cta::before{content:'';width:48px;height:1px;background:var(--gold);transition:width .6s var(--ease)}
.cta:hover::before{width:80px}

/* スクロール誘導（控えめ） */
.hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--serif-en);font-size:11px;letter-spacing:.4em;color:var(--charcoal);transition:opacity .8s}
.hint::after{content:'';width:1px;height:34px;background:currentColor;opacity:.5;transform-origin:top;animation:drip 2.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hint.hide{opacity:0}

/* Contact */
.contact{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;padding:140px 24px 48px;text-align:center}
.contact .label{writing-mode:horizontal-tb;flex-direction:row}
.contact .label::after{width:48px;height:1px}
.contact .label::before{content:'';width:48px;height:1px;background:var(--gold)}
.contact h2{font-family:var(--serif-jp);font-weight:200;font-size:clamp(26px,3vw,42px);letter-spacing:.24em}
.contact p{font-family:var(--serif-jp);font-weight:300;font-size:14px;line-height:2.2;letter-spacing:.14em;color:var(--charcoal)}
.btns{display:flex;flex-direction:column;align-items:center;gap:22px}
.btn{display:inline-block;padding:20px 64px;border:1px solid var(--gold);color:var(--navy);font-family:var(--serif-jp);font-size:14px;letter-spacing:.3em;transition:background .6s var(--ease),color .6s var(--ease)}
.btn:hover{background:var(--gold);color:var(--paper)}
.textlink{font-family:var(--serif-jp);font-size:13px;letter-spacing:.24em;color:var(--charcoal);border-bottom:1px solid rgba(74,74,74,.3);padding-bottom:4px}
footer{margin-top:10vh;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;line-height:1.9;color:var(--charcoal)}
footer img{width:60px;margin-bottom:0}

/* Mobile：縦積み・中央 */
@media (max-width:760px){
  .ch{height:300vh}
  .split,.split.rev{flex-direction:column;gap:32px}
  .split .win{height:auto;width:min(64vw,300px)}
  .copy{flex-direction:column;align-items:center;gap:18px}
  .label{writing-mode:horizontal-tb;flex-direction:row}
  .label::after{width:40px;height:1px}
  .msg{writing-mode:horizontal-tb;height:auto;text-align:center;font-size:20px;line-height:1.9;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){.hero-logo,.purpose{animation:none;opacity:1}.hint::after{animation:none}}

/* Contact の映像（top_06_contact） */
.contact-film{width:min(560px,84vw);aspect-ratio:16/9;object-fit:cover;display:block;background:#EDE6DA}