@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   HOW WE BUILD — 5層セクション（2026-10-05 追加）
   勝負するもの: 見えている1枚の下に、5層の仕事がある
   モチーフ   : 重なったガラス板。スクロールで1枚ずつ下へ潜る
   色・書体は style-v2.css の変数をそのまま使う（3色・4書体から増やさない）
   すべて .hw の中に閉じる（本体のクラスと衝突させない）
   試作: F:/ClientProjects/_design_lab/proto_02_brg_layers/
   ══════════════════════════════════════════════════════════ */
.hw{--paper-70:rgba(237,233,226,.78);--paper-40:rgba(237,233,226,.46);
  position:relative;height:720vh;background:var(--ink);color:var(--paper)}
.hw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hw-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hw .nw{white-space:nowrap;display:inline-block}

/* 左の解説パネル（中央に置かない） */
.hw-panel{position:absolute;left:var(--pad);top:50%;transform:translateY(-46%);width:min(430px,38vw);z-index:3;
  transition:opacity .6s var(--ease)}
.hw-num{font-family:var(--disp);font-weight:800;font-size:clamp(120px,15vw,232px);line-height:.8;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--paper-40);margin-left:-.06em}
.hw-en{font-family:var(--cond);font-size:12px;letter-spacing:.34em;color:#7D97FF;margin-top:18px}
.hw-panel h3{font-family:var(--mincho);font-weight:800;font-size:clamp(26px,2.7vw,42px);line-height:1.4;margin:.35em 0 .55em;white-space:pre-line}
.hw-panel p{margin:0;color:var(--paper-70);font-size:15px;line-height:2}
.hw-panel dl{display:flex;gap:18px;margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(237,233,226,.18);font-size:13px}
.hw-panel dt{font-family:var(--cond);letter-spacing:.24em;color:var(--paper-40);white-space:nowrap}
.hw-panel dd{margin:0}
/* 文字は下から clip-path で切り出す */
.hw-rv{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease),transform .9s var(--ease)}
.hw-panel.swap .hw-rv{clip-path:inset(0 0 100% 0);transform:translateY(14px);transition:none}
.hw-rv:nth-child(2){transition-delay:.05s}.hw-rv:nth-child(3){transition-delay:.1s}
.hw-rv:nth-child(4){transition-delay:.16s}.hw-rv:nth-child(5){transition-delay:.22s}

/* 右端の深度計。押すとその層へ */
.hw-depth{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:3;display:flex;
  flex-direction:column;gap:22px;font-family:var(--cond);font-size:11px;letter-spacing:.26em;transition:opacity .6s}
.hw-depth button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;color:var(--paper-40);justify-content:flex-end;
  min-height:28px;transition:color .4s}
.hw-depth button i{display:block;width:22px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.hw-depth button.on{color:var(--paper)}
.hw-depth button.on i{width:54px;background:#7D97FF}
.hw-depth button:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
.hw-cap{writing-mode:vertical-rl;color:var(--paper-40);align-self:flex-end;margin-bottom:6px}

/* 導入と結び */
.hw-intro,.hw-outro{position:absolute;z-index:3;pointer-events:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hw-intro{left:var(--pad);bottom:clamp(40px,9vh,90px);max-width:min(760px,80vw)}
.hw-lbl{font-family:var(--cond);font-size:12px;letter-spacing:.32em;color:var(--paper-40)}
.hw-intro h2{font-family:var(--mincho);font-weight:800;font-size:clamp(36px,5.2vw,88px);line-height:1.18;margin:.25em 0 0}
.hw-intro small{display:block;margin-top:20px;font-family:var(--cond);letter-spacing:.32em;font-size:11px;color:var(--paper-40)}
.hw-outro{left:var(--pad);bottom:clamp(40px,10vh,110px);width:min(46vw,640px)}
.hw-outro h2{font-family:var(--mincho);font-weight:800;font-size:clamp(30px,4.2vw,68px);line-height:1.3;margin:0 0 .7em}
.hw-outro h2 em{font-style:normal;color:#7D97FF}
.hw-outro p{margin:0 0 18px;color:var(--paper-70);line-height:2}
.hw-cta{pointer-events:auto;display:inline-flex;align-items:center;gap:14px;background:var(--paper);color:var(--ink);
  text-decoration:none;padding:18px 30px;font-weight:700;font-size:15px;letter-spacing:.08em;min-height:56px}
.hw-cta:hover{background:var(--blue);color:var(--paper)}
.hw-stage:not([data-phase="intro"]) .hw-intro{opacity:0;transform:translateY(20px)}
.hw-stage:not([data-phase="outro"]) .hw-outro{opacity:0;transform:translateY(20px)}
.hw-stage:not([data-phase="outro"]) .hw-cta{pointer-events:none}
.hw-stage:not([data-phase="layer"]) .hw-panel{opacity:0}
.hw-stage[data-phase="intro"] .hw-depth{opacity:.25}
.hw-stage[data-phase="outro"] .hw-depth{opacity:0;pointer-events:none}

/* スマホ：上に板、下に解説 */
@media (max-width:760px){
  .hw-panel{left:var(--pad);right:var(--pad);top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:none;width:auto}
  .hw-num{font-size:96px;position:absolute;right:0;top:-70px}
  .hw-panel h3{font-size:24px;margin:.3em 0 .4em}
  .hw-panel p{font-size:14px;line-height:1.85}
  .hw-panel dl{margin-top:14px;padding-top:10px}
  .hw-depth{top:calc(env(safe-area-inset-top,0px) + 76px);transform:none;flex-direction:row;gap:6px;right:var(--pad)}
  .hw-depth button span,.hw-cap{display:none}
  .hw-depth button i{width:18px}.hw-depth button.on i{width:34px}
  .hw-outro{left:var(--pad);right:var(--pad);width:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 32px)}
  .hw-outro h2{font-size:30px}
  /* 板の上に文字が乗っても読めるよう、下から墨を敷く。境目は mask でぼかす */
  .hw-stage::after{content:"";position:absolute;inset:auto 0 0;height:62%;background:var(--ink);z-index:2;pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
  .hw-stage[data-phase="intro"]::after{height:48%}
}

/* 問い合わせ欄：送信の直前に「押し売りしない」を約束する */
/* 問い合わせ欄は墨の地なので、生成りの文字で置く（墨で書くと消える：2026-10-05 実測） */
.ct-promise{list-style:none;margin:6px 0 4px;padding:16px 20px;border:1px solid rgba(237,233,226,.25);font-size:13px;line-height:2;color:rgba(237,233,226,.82)}
.ct-promise li::before{content:"—";margin-right:.7em;color:#7D97FF}

@media (prefers-reduced-motion:reduce){
  .hw-rv,.hw-intro,.hw-outro,.hw-panel,.hw-depth button i{transition:none!important}
}