/* トップ（潜る入口＋本編）の見た目。生成元 plan_b/_tpl_dive.html（試作の正本）→ wp/gen_wp.py */
:root{
  --paper:#ffffff; --paper2:#f6f5f3; --ink:#141414; --ink2:#4c4a46; --ink3:#8a8a88;
  --line:#e4e4e4; --line2:#c8c8c8;
  --deep:#0b0c0e;
  /* 押せる所に通す色。入口の映像・残光の青（rgba(74,140,255)）から取り、白の上で 4.5:1 を満たす濃さに落とした */
  --acc:#2a5bd7; --acc2:#4a8cff;
  --mc:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gt:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic Medium",Meiryo,sans-serif;
  --e-expo:cubic-bezier(.19,1,.22,1);
  --e-cubic:cubic-bezier(.33,1,.68,1);
  --pp:1900px; --fog:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--gt); color:var(--ink); background:var(--paper);
  font-feature-settings:"palt"; line-height:1.75; word-break:auto-phrase;
}
/* スマホだけの改行。<br class="sp"> は 480px 以下でだけ効く（文節で割る＝Safari は auto-phrase を知らない） */
.sp{display:none}
@media (max-width:480px){.sp{display:inline}}
/* 行末の「。」「、」は右半分が空白＝中心が左にずれる（2026-09-06 河原さん・iPhone 実測 14〜19px）。
   palt はこの書体（Zen）に効かない（実測＝幅が変わらない）ので、行末の句読点の右 0.5em を詰める。
   .spo（<br class="sp"> の直前）は 480px 以下でだけ行末になる */
.pu{margin-right:-.8em}   /* 0.5em では墨の中心がまだ 0.25em 左（実測 7px）。0.8em＝「。」の墨の分だけ残して詰める */
.pu.spo{margin-right:0}
@media (max-width:480px){.pu.spo{margin-right:-.8em}}
body{overflow-x:clip}
img,video{display:block;max-width:100%;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}
.dive,.dive *{user-select:none;-webkit-user-select:none}
.wrap{width:min(1240px,100% - clamp(22px,4.4vw,64px)*2);margin-inline:auto}
.nb{display:inline-block;white-space:nowrap}
.ch{display:inline-block;will-change:transform,opacity}   /* 1文字ずつ吸い込むための単位 */
.cg{display:inline-block;white-space:nowrap}              /* 句読点を前の字から離さない（禁則） */

.hd{position:fixed;inset:0 0 auto;z-index:46;display:flex;align-items:center;
  justify-content:space-between;gap:20px;
  padding:clamp(13px,1.9vw,20px) clamp(20px,4.2vw,58px);
  mix-blend-mode:difference;color:#fff;pointer-events:none}
.hd b{font:600 15px/1 var(--gt);letter-spacing:.14em;pointer-events:auto}
.hd nav{display:flex;gap:clamp(14px,1.9vw,30px);pointer-events:auto}
.hd nav a{font:500 14.5px/1 var(--gt);letter-spacing:.06em;position:relative;padding:15px 0}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--e-cubic)}
.hd nav a:hover::after{transform:scaleX(1)}
.hd .mnu{display:none;pointer-events:auto;background:none;border:1px solid #fff;color:#fff;
  padding:12px 16px;font:500 14px/1 var(--gt);letter-spacing:.08em;cursor:pointer}
/* メニューを開いている間は色反転（difference）を切る＝黒い座布団を確実に敷く */
.hd.solid{mix-blend-mode:normal;color:#fff}
@media (max-width:900px){
  .hd nav{position:fixed;inset:0;background:#0b0c0e;flex-direction:column;
    justify-content:center;align-items:center;gap:30px;opacity:0;visibility:hidden;
    transition:opacity .38s var(--e-cubic),visibility .38s;mix-blend-mode:normal}
  .hd nav.open{opacity:1;visibility:visible}
  .hd nav a{font-size:21px;font-weight:500;letter-spacing:.08em;padding:10px 0;color:#fff}
  .hd .mnu{display:block;position:relative;z-index:41}
  .hd nav{z-index:40}
}

/* ===== 潜る区画（冒頭の映像・潜り・浮上をひと続きで持つ） ===== */
.dive{position:relative;height:480svh;background:var(--deep);cursor:pointer;
  touch-action:pan-y;-webkit-touch-callout:none}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;
  perspective:var(--pp);perspective-origin:50% 50%}
canvas.bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.space{position:absolute;inset:0;z-index:1;transform-style:preserve-3d}

/* 層＝作品。最接近で画面幅を超える大きさまで寄る */
.lyr{position:absolute;left:50%;top:50%;width:min(1720px,127vw);
  will-change:transform,opacity;transform-origin:50% 50%;backface-visibility:hidden}
.lyr figure{position:relative;overflow:hidden;background:#111}
.lyr img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* 作品名は画面に出さない。ただし検索・AI・読み上げには渡すため消さずに残す。
   人が読む正本は下の実績一覧（同じ文言）。 */
.lyr figcaption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%);border:0}

/* 弾けた余韻が引いて文字が全部消えたら、下向きの三角を出す（2026-09-06 河原さん「タップで進むと最後が真っ暗」）。押すと本編へ */
.scue{position:fixed;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%);z-index:30;
  width:48px;height:48px;border:0;background:none;padding:0;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .7s var(--e-cubic)}
.scue.on{opacity:1;pointer-events:auto}
.scue i{display:block;width:18px;height:12px;margin:0 auto;background:#fff;opacity:.92;
  clip-path:polygon(0 0,100% 0,50% 100%);animation:scue 1.9s var(--e-cubic) infinite}
@keyframes scue{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.scue i{animation:none}}
.lyr.flr{width:min(1100px,92vw);text-align:center}
.lyr.flr b{display:block;font:400 clamp(30px,5.4vw,66px)/1.5 var(--mc);color:#fff;letter-spacing:.03em}

/* 何も無い区間で1文字ずつ出る社名（年1つに1文字・2026→2016 の11年で11文字） */
.word{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);z-index:3;
  display:flex;gap:clamp(4px,0.9vw,16px);pointer-events:none;opacity:0;white-space:nowrap}
.word span{display:block;font:400 clamp(20px,5.2vw,78px)/1 var(--mc);color:#fff;
  opacity:0;transform:translate3d(0,16px,0) scale(.84);
  transition:opacity .30s var(--e-cubic),transform .44s var(--e-expo)}
.word span.on{opacity:1;transform:none}

.fog{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,rgba(11,12,14,0) 16%,rgba(11,12,14,.78) 60%,#0b0c0e 100%);
  opacity:var(--fog)}
.vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 24%,rgba(0,0,0,0) 64%,rgba(0,0,0,.6))}

/* 底で弾けた後の残光＝背景に色が広がる。
   screen は白を変えないので、底の文（白）は色に負けずそのまま読める。
   .stage が perspective を持つ＝ここが混ざる範囲の切れ目なので、外の面には影響しない。 */
.fglow{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  mix-blend-mode:screen;will-change:opacity,transform;transform-origin:50% 50%}
/* 光は正円（2026-09-07 河原さん「画面の幅に合わせて横（スマホは縦）に伸びて綺麗でない」）＝画面の比率に依らない vmin の丸を中央に重ねる */
.fglow::before{content:"";position:absolute;left:50%;top:50%;width:170vmin;height:170vmin;transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,206,138,.52) 0%,rgba(255,206,138,0) 22%),
    radial-gradient(circle at 50% 50%,rgba(74,140,255,.44) 0%,rgba(74,140,255,0) 34%),
    radial-gradient(circle at 50% 50%,rgba(168,104,255,.30) 0%,rgba(168,104,255,0) 40%),
    radial-gradient(circle at 50% 50%,rgba(60,196,205,.22) 0%,rgba(60,196,205,0) 48%)}

/* ===== 冒頭の映像（画面いっぱい） ===== */
.hero{position:absolute;inset:0;z-index:6;will-change:transform,opacity;
  transform-origin:50% 50%;overflow:hidden;background:#000}
.hero video{width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.10) 34%,rgba(0,0,0,.16) 62%,rgba(0,0,0,.62))}
/* 日本語の行そのものを画面の中央に置き、英語はその上に浮かせる（英語を含めて中央にしない） */
.hcopy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,88vw);text-align:center;color:#fff}
.hcopy .en{position:absolute;left:0;right:0;bottom:calc(100% + 1.5em);
  font:400 12px/1 var(--gt);letter-spacing:.34em;color:#cfcfcf}
.hcopy h1{margin:0;font:400 clamp(27px,5.2vw,68px)/1.35 var(--mc);letter-spacing:.035em}
.hcopy .go{position:absolute;left:0;right:0;top:calc(100% + 2.2em);
  font:400 11.5px/1 var(--gt);letter-spacing:.22em;color:#9d9d9d}
.hstop{position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vh,34px);
  z-index:8;background:rgba(0,0,0,.42);color:#fff;border:1px solid rgba(255,255,255,.42);
  padding:11px 16px;font:500 14px/1 var(--gt);letter-spacing:.1em;cursor:pointer;min-height:36px}
.hstop:hover{background:rgba(0,0,0,.72)}
.hstop:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 深さの目盛り */
.gauge{position:fixed;left:clamp(16px,3vw,42px);top:50%;transform:translateY(-50%);
  z-index:30;pointer-events:none;opacity:0;transition:opacity .5s var(--e-cubic)}
.gauge.on{opacity:var(--sk,1)}
.gauge ol{list-style:none;display:flex;flex-direction:column;gap:.34em}
.gauge li{font:400 11px/1 var(--gt);letter-spacing:.14em;color:#4e5158;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;
  transition:color .3s var(--e-cubic)}
.gauge li::before{content:"";width:26px;height:1px;background:#33363c;
  transform:scaleX(.35);transform-origin:left center;
  transition:transform .3s var(--e-cubic),background-color .3s var(--e-cubic)}
.gauge li.cur{color:#fff;font-size:14px}
.gauge li.cur::before{transform:scaleX(1);background:#fff}

.bar{position:fixed;left:0;top:0;height:2px;background:#fff;z-index:47;width:0;opacity:.5}

/* ===== 締めの黒面（「ここから、次の10年。」＋相談。ページの下に置く） ===== */
.turn{position:relative;background:var(--deep);overflow:hidden;
  padding:clamp(120px,20vh,230px) 0 clamp(100px,16vh,190px);text-align:center;color:#fff}
.turn video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.turn .inner{position:relative;z-index:1;will-change:transform,opacity}
.turn .k{font:500 clamp(16px,1.8vw,21px)/1.7 var(--gt);letter-spacing:.14em;color:#aeb6c1}
.turn .p{margin-top:.7em;font:700 clamp(38px,6.6vw,92px)/1.35 var(--gt);letter-spacing:.01em;color:#fff}
.turn .btns{margin-top:clamp(40px,6vh,66px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:18px 46px;min-height:52px;box-sizing:border-box;border:1.5px solid #fff;border-radius:999px;
  background:#fff;color:var(--deep);
  font-size:16px;font-weight:600;letter-spacing:.04em;
  transition:transform .45s var(--e-cubic),background-color .45s var(--e-cubic),color .45s var(--e-cubic)}
.btn:hover{background:var(--acc2);border-color:var(--acc2);color:#fff;transform:translate3d(0,-3px,0)}
.btn.g{background:transparent;border-color:rgba(255,255,255,.55);color:#e2e6ec;font-weight:500}
.btn.g:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ===== 本編（色面で切り替える誌面。文字は大きく・短く） ===== */
.honpen{background:var(--paper);color:var(--ink);font-size:16.5px;font-weight:500}
.honpen a,.ft a{-webkit-touch-callout:none}   /* 指の長押しでリンクの案内を出さない（吸い込みを優先） */
/* 指で押している間だけ文字を選べなくする＝長押しの吸い込み中に選択のハイライトが出ない
   （2026-09-06 河原さん「スマホだとテキストにハイライトが出て紛らわしい」）。PC の選択・コピーはそのまま */
html.hold-touch,html.hold-touch *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sec{padding:clamp(84px,12vh,170px) 0}
.bg-blue{background:linear-gradient(180deg,#e3edfa,#cfe0f6)}
.bg-cream{background:#f3efe6}
.h2row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin-bottom:clamp(38px,5.4vw,70px)}
.h2row h2{font:700 clamp(30px,4vw,54px)/1.35 var(--gt);letter-spacing:.02em}
.h2row .yy{font:500 13.5px/1 var(--gt);letter-spacing:.14em;color:var(--ink2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(34px,4.6vw,56px);
  font-size:16px;font-weight:600;letter-spacing:.04em;color:var(--ink);min-height:44px}
.more i{width:34px;height:2px;background:var(--acc);transition:width .5s var(--e-cubic)}
.more::after{content:"→";color:var(--acc);font-size:20px;transition:transform .45s var(--e-cubic)}
.more:hover i{width:58px}
.more:hover::after{transform:translate3d(6px,0,0)}
.more:hover{color:var(--acc)}

/* 出方＝拭き取りとせり上がり。JS が動く時だけ隠す（無い時は最初から見える）。
   ⚠️ 切り抜きは中の img に掛ける。枠そのものに掛けると、見張り（IntersectionObserver）が
   「面積0＝映っていない」と判定して永久に発火しない（2026-08-20 実測） */
html.js .rv{opacity:0;transform:translate3d(0,56px,0);
  transition:opacity 1s var(--e-cubic),transform 1.3s var(--e-expo)}
html.js .rv.in{opacity:1;transform:none}
html.js .sl-l{opacity:0;transform:translate3d(-72px,0,0);
  transition:opacity 1s var(--e-cubic),transform 1.35s var(--e-expo)}
html.js .sl-r{opacity:0;transform:translate3d(72px,0,0);
  transition:opacity 1s var(--e-cubic),transform 1.35s var(--e-expo)}
html.js .sl-l.in,html.js .sl-r.in{opacity:1;transform:none}
html.js .wipe img{clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--e-expo),transform 1.1s var(--e-cubic),opacity 1.4s var(--e-cubic)}
html.js .wipe.in img{clip-path:inset(0 0 0 0)}
/* スクロールの流れに合わせて現れる（2026-09-07 河原さん「速く送ると灰色のまま次へ行ってしまう・流れに合わせて」）
   ＝画面に入った量に結びつける（scroll-driven animation）。.sv は読み込んだ時に画面の下にあった物（JS が付ける）。
   対応しないブラウザは従来の「見えたら1回」のまま */
@supports (animation-timeline: view()) {
  html.js .rv.sv,html.js .sl-l.sv,html.js .sl-r.sv{transition:none;animation:syn-rv 1s linear both;animation-timeline:view();animation-range:entry 0px entry 260px}
  html.js .sl-l.sv{animation-name:syn-sl-l}
  html.js .sl-r.sv{animation-name:syn-sl-r}
  html.js .wipe.sv img{transition:opacity .7s var(--e-cubic),transform 1.1s var(--e-cubic);animation:syn-wipe 1s linear both;animation-timeline:view();animation-range:entry 0px entry 300px}
  @keyframes syn-rv{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
  @keyframes syn-sl-l{from{opacity:0;transform:translate3d(-56px,0,0)}to{opacity:1;transform:none}}
  @keyframes syn-sl-r{from{opacity:0;transform:translate3d(56px,0,0)}to{opacity:1;transform:none}}
  @keyframes syn-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .sl-l,html.js .sl-r{opacity:1;transform:none;transition:none;animation:none}
  html.js .wipe img{clip-path:none;transition:none;animation:none}
}

/* 浮上した先＝名乗り＋トピックカード（Patreon の色面・角丸・大きな字を参考） */
.topics{background:linear-gradient(180deg,#e9f1fb 0%,#cfe0f6 52%,#bcd3f2 100%);
  padding:clamp(96px,14vh,190px) 0 clamp(90px,12vh,160px)}
.topics .big{font:700 clamp(34px,5.3vw,82px)/1.4 var(--gt);letter-spacing:.01em}   /* 2026-09-07 01:06 河原さん「ちょっとでかすぎる・気持ち小さく」＝約1割小さく */
.topics .sub{margin-top:1.1em;max-width:38em;color:#273543;font-weight:500;
  font-size:clamp(16px,1.5vw,19px);line-height:2.0}
.tcards{margin-top:clamp(46px,6vw,84px);display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.7vw,24px)}
.tc{position:relative;grid-column:span 2;display:block;overflow:hidden;border-radius:12px;color:var(--ink);
  transition:transform .5s var(--e-cubic),box-shadow .5s var(--e-cubic)}
.tc:hover{transform:translate3d(0,-6px,0);box-shadow:0 20px 48px rgba(20,30,50,.16)}
/* 絵そのものが札（2026-09-07 河原さん「地に色を塗ったレイアウトはダサい・色がチグハグ・冒頭の黒白から離れすぎ」）
   膜は薄い色・下ほど濃く＝左下の文字が読める。触れると膜が引いて絵の色が出る。色は札ごとに少しだけ違える（下の --tint） */
.tc .pic{margin:0;background:#e9ebef;border-radius:0}
.tc .pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.2s var(--e-cubic)}
.tc:hover .pic img{transform:scale(1.035)}
.tc::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--tint),.30) 0%,rgba(var(--tint),.40) 48%,rgba(var(--tint),.93) 100%);
  transition:opacity .6s var(--e-cubic)}
/* 膜の色は札ごとに少しだけ違える（2026-09-07 00:31 河原さん「各カードに少しだけ違う色を足して。黒と白のイメージから脱却したい」）。色は作品の絵から借りる・薄く */
.tc{--tint:228,235,246}
.tc.c2{--tint:246,228,214}   /* Animation＝橙（BLEACH・シカク） */
.tc.c1{--tint:226,238,230}   /* Branding＝緑（CQ BANK の森） */
.tc.c3{--tint:234,228,246}   /* Games＝紫（オバケイドロ） */
.tc.c4{--tint:222,240,236}   /* PV＝青緑（シルベ） */
.tc.c5{--tint:220,232,247}   /* Development＝水色（MOTOROiD） */
.tc:hover::before{opacity:.62}
.tc .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,24px)}
.tc .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tc b{display:block;font:700 clamp(19px,1.9vw,26px)/1.35 var(--gt);letter-spacing:.01em}
.tc i{font-style:normal;font-size:26px;line-height:1;color:var(--acc);transition:transform .45s var(--e-cubic)}   /* 矢印は題名の右に大きく */
.tc:hover i{transform:translate3d(6px,0,0)}
.tc .tx > span{display:block;margin-top:4px;font-size:clamp(13.5px,1.1vw,15px);line-height:1.8;font-weight:500;color:rgba(20,20,20,.78)}   /* > が無いと1字ずつの span まで block になり縦に積まれる */
/* 上の段＝2枚を大きく（Animation・Branding）、下の段＝3枚 */
.tc:nth-child(-n+2){grid-column:span 3}
.tc:nth-child(-n+2) b{font-size:clamp(22px,2.3vw,30px)}

/* 直近の仕事（誌面。主役と脇役の面積差） */
.mag{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.7vw,26px);row-gap:clamp(40px,5vw,80px)}
.mag>*{min-width:0}
.card{display:block}
.card figure{overflow:clip;background:var(--paper2);border-radius:12px}   /* hidden だと図がスクロール容器になり、中の絵の view() が図を基準に測ってしまう（iPhone で途中止まり）→ clip */
/* 白い絵が白い面に溶けないよう細い線で縁を取る（2026-09-07 河原さん）。読み込み前は薄い灰＝白から「パッ」と出ない */
.honpen figure{position:relative;background:#e9ebef}
.honpen figure::after{content:"";position:absolute;inset:0;border:1px solid rgba(20,20,20,.10);border-radius:inherit;pointer-events:none;z-index:2}
.honpen img.lz{opacity:0;transition:opacity .7s var(--e-cubic)}
.honpen img.lz.ld{opacity:1}
.wk1 figure{border-radius:16px}   /* 主役だけ少し大きく */
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform 1.1s var(--e-cubic)}
.card:hover img{transform:scale(1.03)}
.card .cr{margin-top:16px;display:flex;flex-direction:column;gap:6px;position:relative;padding-right:40px}
/* 押せる合図＝右に矢印。触れると右へ動く（できることカードと同じ） */
.card .cr::after{content:"→";position:absolute;right:0;top:.1em;font-size:24px;line-height:1;color:var(--acc);
  transition:transform .45s var(--e-cubic)}
.card:hover .cr::after{transform:translate3d(6px,0,0)}
.card:hover .tt{color:var(--acc)}
.card .tt{transition:color .35s var(--e-cubic)}
.card .cl{font:700 15px/1.6 var(--gt);letter-spacing:.03em}
.card .tt{font:500 clamp(16.5px,1.5vw,19px)/1.7 var(--gt);color:var(--ink)}
.card .mt{font:500 12.5px/1.4 var(--gt);letter-spacing:.1em;color:var(--ink2);
  font-variant-numeric:tabular-nums}
/* 実績（1区画に統合。比率3種＝シネマ横長・縦・正方形、段差、主役は文字を重ねる） */
.wk1{grid-column:1 / -1}
.wk1 img{aspect-ratio:21/9}
.wk1 figure{position:relative}
.wk1 .cap{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(48px,6vw,90px) clamp(18px,2.4vw,30px) clamp(16px,2vw,26px);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42) 46%,rgba(0,0,0,.76));color:#fff;
  display:flex;flex-direction:column;gap:5px}
.wk1 .cap::after{content:"→";position:absolute;right:clamp(18px,2.4vw,30px);bottom:clamp(16px,2vw,26px);
  font-size:26px;line-height:1;color:#fff;transition:transform .45s var(--e-cubic)}
.wk1:hover .cap::after{transform:translate3d(6px,0,0)}
.wk1 .cap .cl{font:700 16px/1.6 var(--gt);letter-spacing:.03em}
.wk1 .cap .tt{font:500 clamp(19px,2.2vw,28px)/1.55 var(--gt);letter-spacing:.02em}
.wk1 .cap .mt{font:500 12.5px/1.4 var(--gt);letter-spacing:.1em;color:#dedcd8;
  font-variant-numeric:tabular-nums}
.wk2{grid-column:8 / -1}
.wk2 img{aspect-ratio:4/5}
.wk3{grid-column:1 / span 6;margin-top:clamp(32px,4.5vw,80px)}
.wk4{grid-column:1 / span 7;margin-top:clamp(16px,2.4vw,40px)}
.wk5{grid-column:9 / -1;margin-top:clamp(40px,6vw,96px)}
.wk5 img{aspect-ratio:1/1}
.wk6{grid-column:3 / span 5;margin-top:clamp(24px,3.6vw,64px)}
.wk6 img{aspect-ratio:4/5}

/* 会社のこと */
.co{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px)}
.co dl{border-top:1px solid #ded8ca}
.co .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:clamp(17px,2.1vw,24px) 4px;border-bottom:1px solid #ded8ca}
.co dt{font:600 13.5px/1.6 var(--gt);letter-spacing:.06em;color:#3a3835}
.co dd{font:500 clamp(16px,1.5vw,19px)/1.7 var(--gt);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;text-align:right}
.co .mi{font:700 clamp(23px,2.6vw,34px)/1.7 var(--gt);letter-spacing:.02em}
.co .mt2{margin-top:1.3em;color:#4a463d;font-size:16px;line-height:2.1;max-width:36em}

/* 詩への入口（横長カット1枚＋第1連だけ。全文は専用ページ） */
.poemcut{position:relative;display:block;margin-top:clamp(44px,6.6vw,90px);overflow:clip;
  border-radius:12px;background:#0b0b0d;color:#f4f1ea}
.poemcut img{width:100%;height:clamp(300px,44vw,460px);object-fit:cover;opacity:.84;
  transition:transform 1.4s var(--e-cubic),opacity 1.4s var(--e-cubic)}
.poemcut:hover img{transform:scale(1.025);opacity:.92}
.poemcut .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,13,.92) 0%,rgba(11,11,13,.72) 34%,rgba(11,11,13,.24) 62%,rgba(11,11,13,.12) 100%)}
.poemcut .tx{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(16px,2.4vw,26px);padding:0 clamp(20px,4.5vw,58px)}
.poemcut .ln{font:400 clamp(19px,2.3vw,30px)/2.1 var(--mc);letter-spacing:.11em}
.poemcut .rd{display:inline-flex;align-items:center;gap:11px;font:500 14px/1.6 var(--gt);
  letter-spacing:.1em;color:#cdc8be}
.poemcut .rd i{width:30px;height:1px;background:#bdb8ae;transition:width .5s var(--e-cubic)}
.poemcut:hover .rd i{width:50px}

/* つくる人たち（カラー・大小2種・段差。全員はメンバーページで） */
.ppl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,1.5vw,22px);row-gap:clamp(34px,4.4vw,60px);align-items:start}
.ppl a{grid-column:span 2;transition:transform .6s var(--e-expo)}
.ppl a:hover{transform:translate3d(0,-6px,0)}
.ppl a:nth-child(5n+1){grid-column:span 3}
.ppl a:nth-child(5n+3){margin-top:clamp(22px,3vw,52px)}
.ppl a:nth-child(5n+5){margin-top:clamp(12px,1.8vw,30px)}
.ppl figure{overflow:hidden;background:#e9ebef;border-radius:0}   /* 人物は角のまま＝写真らしさ */
.ppl img{width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform 1s var(--e-cubic)}
.ppl a:nth-child(5n+1) img{aspect-ratio:4/5}
.ppl a:hover img{transform:scale(1.045)}
.ppl .nm{margin-top:12px;font:700 15px/1.6 var(--gt);letter-spacing:.02em}
.ppl .rl{margin-top:2px;font:500 12.5px/1.6 var(--gt);letter-spacing:.05em;color:var(--ink2);word-break:normal;overflow-wrap:normal}   /* 役職は本番の英語表記＝単語の途中で折らない（｜と空白で折る） */

/* 読みもの・お知らせ */
/* 最新1本を大きく（左・2段分）、残り2本は右に縦に並べる＝均等な3枚をやめる */
.read{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.7vw,26px)}
.read img{aspect-ratio:16/9}
.read>a:nth-child(1){grid-column:1 / span 7;grid-row:1 / span 2}
.read>a:nth-child(n+2){grid-column:8 / -1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:14px;align-items:center}
.read>a:nth-child(n+2) .cr{margin-top:0}
.read>a:nth-child(1) .tt{font-size:clamp(19px,2vw,26px);line-height:1.6}
/* ブログの札の矢印は出さない（2026-09-07 河原さん「どこに載っているのか分かりづらい・『すべて見る』があるから要らない」） */
.read .card .cr{padding-right:0}
.read .card .cr::after{content:none}
.nws{list-style:none;border-top:1px solid rgba(20,20,20,.14)}
.nws li{border-bottom:1px solid rgba(20,20,20,.14)}
.nws a{display:flex;align-items:baseline;gap:clamp(16px,2.6vw,36px);
  padding:clamp(18px,2.2vw,25px) 4px;transition:opacity .4s var(--e-cubic)}
.nws a::after{content:"→";margin-left:auto;font-size:20px;line-height:1;color:var(--acc);align-self:center;
  transition:transform .45s var(--e-cubic)}
.nws a:hover::after{transform:translate3d(6px,0,0)}
.nws a:hover .tt{color:var(--acc)}
.nws .tt{transition:color .35s var(--e-cubic)}
.nws .dt{font:500 13.5px/1.6 var(--gt);letter-spacing:.08em;color:var(--ink2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nws .tt{font:500 16px/1.8 var(--gt)}

/* 足元（濃い面はここだけ） */
.ft{background:var(--deep);color:#e8e6e1;padding:clamp(56px,8vh,96px) 0 clamp(30px,4vh,44px)}
.ft .cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);
  gap:clamp(26px,4vw,60px)}
.ft b{font:600 15px/1 var(--gt);letter-spacing:.14em}
.ft .ds{margin-top:14px;font-size:12.5px;line-height:2.1;color:#9b9891}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft ul a{font-size:12.5px;letter-spacing:.05em;color:#bdb9b2;transition:color .4s var(--e-cubic)}
.ft ul a:hover{color:#fff}
.ft .cp{margin-top:clamp(36px,5vh,56px);padding-top:18px;border-top:1px solid #26282c;
  font-size:11px;letter-spacing:.08em;color:#7c7973;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.memo2{background:var(--paper2);padding:22px 24px;border-radius:12px;
  font-size:15px;line-height:2;color:var(--ink2)}
.memo2 b{color:var(--ink)}

/* ===== JS が動かない時・動きが苦手な時 ===== */
html:not(.js) .dive{height:auto;padding:0 0 60px}
html:not(.js) .stage{position:static;height:auto;overflow:visible;perspective:none}
html:not(.js) .space{position:static;padding:60px 0}
html:not(.js) .lyr{position:static;left:auto;top:auto;width:min(900px,90%);
  margin:0 auto 64px;transform:none;opacity:1}
html:not(.js) .hero{position:static;height:80svh}
html:not(.js) .fog,html:not(.js) .vig,html:not(.js) .gauge,html:not(.js) .fglow,html:not(.js) canvas.bg{display:none}
@media (prefers-reduced-motion:reduce){
  .dive{height:auto}
  .stage{position:static;height:auto;overflow:visible;perspective:none}
  .space{position:static;padding:60px 0}
  .lyr{position:static;left:auto;top:auto;width:min(900px,90%);margin:0 auto 64px;
    transform:none;opacity:1}
  .hero{position:static;height:80svh}
  .fog,.vig,.gauge,.fglow,canvas.bg{display:none}
  .turn video{display:none}
}

.knb{display:none;position:fixed;right:14px;bottom:14px;z-index:60;font:13px/1.5 var(--gt)}
.knb.show{display:block}   /* 開発用。URL に ?knob=1 を付けた時だけ出す */
.knb .tog{background:#141414;color:#fff;border:0;padding:11px 16px;cursor:pointer;letter-spacing:.06em}
.knb .bx{display:none;margin-top:8px;width:296px;background:#fff;border:1px solid var(--line);
  padding:16px 18px;box-shadow:0 10px 40px rgba(0,0,0,.16)}
.knb.on .bx{display:block}
.knb label{display:block;margin:11px 0 3px;color:var(--ink2);font-size:12.5px}
.knb input[type=range]{width:100%}
.knb .row{display:flex;gap:8px;margin-top:14px}
.knb .row button{flex:1;padding:9px;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:12.5px}
.knb .row button:hover{border-color:var(--ink)}
.knb .out{margin-top:10px;font-size:11.5px;color:var(--ink3);word-break:break-all}
.knb .ck{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--ink2)}

canvas.fx{position:fixed;left:0;top:0;z-index:50;pointer-events:none}

/* キーボードで選んだ時の枠（押せる物すべて同じ形） */
.tc:focus-visible,.card:focus-visible,.nws a:focus-visible,.ppl a:focus-visible,.more:focus-visible,
.btn:focus-visible,.poemcut:focus-visible,.hd nav a:focus-visible,.mnu:focus-visible{
  outline:2px solid var(--acc);outline-offset:4px;border-radius:4px}

@media (max-width:820px){
  .lyr{width:126vw}
  .gauge{left:10px}
  .gauge li{font-size:9.5px;letter-spacing:.1em;gap:6px}
  .gauge li::before{width:16px}
  .gauge li.cur{font-size:11.5px}
  .knb{right:10px;bottom:10px}
  .knb .bx{width:min(300px,88vw)}
  .hcopy{width:92vw}
  .hcopy .en{font-size:10px;letter-spacing:.22em;bottom:calc(100% + 1.2em)}
  .hcopy .go{top:calc(100% + 1.7em);font-size:10.5px;letter-spacing:.16em}
  .word{gap:2px}
  .word span{font-size:clamp(17px,6.4vw,40px)}
  .lyr.flr{width:94vw}
  .lyr.flr b{font-size:clamp(26px,8.2vw,46px)}
  .turn{padding:clamp(90px,16vh,150px) 0 clamp(70px,12vh,120px)}
  .after .memo{padding:18px 16px;font-size:13.5px}
  .hd{padding:11px 16px}
  .hd b{font-size:13px}
  .hstop{right:auto;left:14px;bottom:14px;padding:10px 14px;font-size:13px}
  /* 本編＝スマホは段差を持ち込まず2列/1列に畳む */
  .mag{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(30px,7vw,44px)}
  .wk1,.wk4{grid-column:1 / -1;margin-top:0}
  .wk1 img{aspect-ratio:16/9}
  .wk2,.wk3,.wk5,.wk6{grid-column:span 1;margin-top:0}
  .wk2 img,.wk6 img{aspect-ratio:4/5}
  .wk5 img{aspect-ratio:1/1}
  .wk1 .cap{padding:34px 14px 12px}
  .wk1 .cap .tt{font-size:15px}
  .tcards{grid-template-columns:1fr;gap:14px}
  .tc,.tc:nth-child(-n+2){grid-column:1 / -1}
  .tc .tx{padding:12px 14px 14px}
  .tc b,.tc:nth-child(-n+2) b{font-size:19px}
  .tc i{font-size:22px}
  .tc .tx > span{font-size:13px}
  .co{grid-template-columns:1fr;gap:34px}
  .co dd{text-align:right}
  .poemcut img{height:min(78vw,420px)}
  .poemcut .scrim{background:linear-gradient(180deg,rgba(11,11,13,.42),rgba(11,11,13,.82))}
  .poemcut .ln{font-size:clamp(15px,4.4vw,19px)}
  .ppl{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
  .ppl a,.ppl a:nth-child(5n+1){grid-column:span 1;margin-top:0}
  .ppl a:nth-child(5n+3),.ppl a:nth-child(5n+5){margin-top:0}
  .ppl img,.ppl a:nth-child(5n+1) img{aspect-ratio:1/1}
  .read{grid-template-columns:1fr;gap:26px}
  .read>a:nth-child(1),.read>a:nth-child(n+2){grid-column:1 / -1;grid-row:auto;display:block}
  .read>a:nth-child(n+2) .cr{margin-top:16px}
  .ft .cols{grid-template-columns:1fr;gap:30px}
}
@media (max-width:400px){
  .word span{font-size:clamp(15px,6.0vw,30px)}
  .word{gap:1px}
}