/* ============================================================
   MONA JAPAN — 仕掛け層 / interaction mechanics
   札・屏風・絵巻・引き台
   ============================================================ */

/* ---------- 1. 課題：積み重なる札 ---------- */
.sec--deck{position:relative;background:var(--washi-warm)}
.deck__pin{min-height:100svh;display:grid;align-items:center;
  padding:clamp(122px,17vh,176px) 0 clamp(56px,8vh,96px)}
.deck__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:center}
.deck__lead .lead{max-width:38ch}
.deck__lead .h-sec{font-size:clamp(21px,2.25vw,31px);line-height:1.62;max-width:19ch}
.deck__count{
  display:flex;align-items:center;gap:14px;margin-top:34px;
  font-family:var(--f-num);font-size:26px;color:var(--ink-4);letter-spacing:.08em;
}
.deck__count #deckNow{color:var(--ink-1);font-size:42px;line-height:1}
.deck__count i{display:block;width:54px;height:1px;background:var(--ink-6)}

.deck__stage{
  position:relative;height:clamp(340px,46vh,430px);
  /* 控えの札は 5 度傾けてある。傾けた分だけ外接矩形が横に広がり、
     狭い画面では文書を 14px ほど横に伸ばしていた（実測）。
     横だけ切る。hidden にすると縦も切られて、札が下から立つ所作が消える。 */
  overflow-x:clip;overflow-clip-margin:6px;
}
.fuda{
  position:absolute;inset:0;
  background:var(--washi);border:1px solid rgba(39,1,71,.16);
  padding:clamp(26px,3vw,40px);
  box-shadow:0 26px 60px -34px rgba(22,0,41,.55);
  transform-origin:50% 100%;will-change:transform,opacity;
  display:flex;flex-direction:column;
}
.fuda__kanji{
  position:absolute;right:clamp(18px,2.4vw,34px);top:clamp(10px,1.6vh,20px);
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(88px,9vw,150px);line-height:1;color:var(--ink-8);
  pointer-events:none;user-select:none;
}
.fuda__tag{
  align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--shu);background:#FBEDEA;padding:5px 13px;border-radius:2px;margin-bottom:18px;
}
.fuda h3{font-size:clamp(20px,2.1vw,29px);line-height:1.5;margin-bottom:16px;color:var(--ink-1);position:relative}
.fuda p{font-size:14px;line-height:2.05;color:var(--ink-2);opacity:.84;max-width:42ch;position:relative}
.fuda__seal{
  margin-top:auto;align-self:flex-start;
  width:38px;height:38px;display:grid;place-items:center;border-radius:3px;
  background:var(--shu);color:#fff;font-family:var(--f-mincho);font-weight:800;font-size:16px;
  transform:rotate(-4deg);opacity:.9;
}

/* ---------- 2. サービス：屏風 ---------- */
.byobu{
  display:flex;gap:6px;height:clamp(400px,58vh,540px);
  border:1px solid rgba(251,247,242,.16);background:rgba(251,247,242,.04);
  padding:6px;overflow:hidden;
}
.byobu__p{
  position:relative;flex:0 0 92px;min-width:92px;
  background:var(--washi);overflow:hidden;cursor:pointer;
  transition:flex-grow .78s var(--ease-wood),flex-basis .78s var(--ease-wood),min-width .78s var(--ease-wood);
  display:flex;
}
.byobu__p.is-open{flex:1 1 auto;min-width:min(560px,52vw);cursor:default}
/* 屏風の折り目 */
.byobu__p::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,0,41,.16),transparent 12%,transparent 88%,rgba(22,0,41,.10));
}
.byobu__spine{
  flex:0 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:24px 0;border-right:1px solid rgba(39,1,71,.10);
  background:linear-gradient(180deg,var(--ink-9),var(--washi));
}
.byobu__spine .tate{
  writing-mode:vertical-rl;font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(15px,1.35vw,19px);letter-spacing:.24em;color:var(--ink-1);
}
.byobu__spine em{font-family:var(--f-num);font-style:normal;font-size:20px;color:var(--ink-5);letter-spacing:.1em}
.byobu__p.is-open .byobu__spine{background:linear-gradient(180deg,var(--ink-5),var(--ink-3))}
.byobu__p.is-open .byobu__spine .tate{color:var(--washi)}
.byobu__p.is-open .byobu__spine em{color:var(--kin)}
.byobu__body{
  flex:1;padding:clamp(26px,2.8vw,42px);opacity:0;
  display:flex;flex-direction:column;justify-content:center;min-width:min(460px,46vw);
}
.byobu__p.is-open .byobu__body{opacity:1;transition:opacity .5s .22s}
.byobu__body h3{font-size:clamp(21px,2.1vw,30px);line-height:1.45;color:var(--ink-1);margin-bottom:16px}
.byobu__body h3 small{display:block;font-size:.45em;font-weight:600;color:var(--ink-4);letter-spacing:.1em;margin-top:8px}
.byobu__body p{font-size:14px;line-height:2.05;color:var(--ink-2);opacity:.84;max-width:46ch}
.byobu__body ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.byobu__body li{font-size:11.5px;font-weight:700;color:var(--ink-3);
  background:var(--ink-9);border:1px solid rgba(39,1,71,.12);padding:5px 12px;border-radius:2px}
.byobu__go{
  margin-top:26px;align-self:flex-start;font-family:var(--f-mincho);font-weight:800;
  font-size:14px;letter-spacing:.08em;color:var(--ink-5);
  border-bottom:1px solid currentColor;padding-bottom:4px;
}
.byobu__go span{display:inline-block;transition:transform .35s var(--ease-wood)}
.byobu__go:hover span{transform:translateX(6px)}

/* ---------- 3. 進め方：墨の道（すみのみち） ----------

   横へ引く絵巻をやめた。理由は二つ。
     ① 引ける台・走馬灯とも横移動で、同じ所作が三度続いていた
     ② ピンで千三百px ぶんの空スクロールを作っていた
   代わりに、営業日の尺に沿って墨が下りる縦の道にする。
   地を墨にしたのは、前後（AIエージェント／海外対応）が白で、
   白い節が三つ並んでしまうため。                                  */
.michi-sec{overflow:hidden}
/* 尺・節・札の位置は、この三つの変数だけから決める。
   線と節を別々に置くと必ずずれる（実測：146px ずれた）。 */
.michi{
  --day:clamp(54px,5.6vw,78px);      /* 営業日の列 */
  --jt:44px;                          /* 節の直径 */
  --gap:clamp(16px,2vw,30px);
  --axis:calc(var(--day) + var(--gap) + var(--jt) / 2);   /* 道の芯 */
  position:relative;
}

/* 道 — 薄い罫と、読んだ分だけ伸びる墨の二枚重ね */
.michi__line,.michi__ink{
  position:absolute;top:6px;left:var(--axis);width:2px;margin-left:-1px;
}
.michi__line{bottom:0;
  background:linear-gradient(180deg,rgba(232,179,60,.22),rgba(207,163,250,.16) 60%,transparent)}
.michi__ink{
  height:0;z-index:2;
  background:linear-gradient(180deg,var(--kin) 0%,#B266F5 55%,#8129DB 100%);
  box-shadow:0 0 12px rgba(232,179,60,.35);
}
.michi__tip{
  position:absolute;left:50%;bottom:-5px;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--kin);
  box-shadow:0 0 0 5px rgba(232,179,60,.18),0 0 16px rgba(232,179,60,.7);
}
.michi__read{
  /* 筆先の右へ置く。札の左余白の中に収まる位置なので、本文には掛からない。 */
  position:absolute;left:6px;bottom:-13px;white-space:nowrap;z-index:3;
  font-family:var(--f-mincho);font-weight:800;font-size:11.5px;letter-spacing:.14em;
  color:var(--ink-0);background:var(--kin);padding:3px 9px;
  box-shadow:2px 2px 0 rgba(22,0,41,.5);
}
.michi__read span,.michi__badge span{font-family:var(--f-num);font-size:1.35em;letter-spacing:.02em;margin-right:2px}
.michi__badge{display:none}
.michi__drops i{
  position:absolute;left:var(--axis);top:0;
  width:4px;height:4px;margin-left:-1px;border-radius:50%;background:var(--kin);opacity:0;
}

/* 節 */
.michi__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vh,40px)}
.mstep{
  position:relative;display:grid;align-items:start;
  grid-template-columns:var(--day) var(--jt) minmax(0,1fr);
  gap:var(--gap);
}
.mstep__day{text-align:right;padding-top:9px;line-height:1.25;
  font-family:var(--f-num);color:var(--kin)}
.mstep__day b{display:block;font-weight:400;font-size:clamp(19px,2vw,27px);letter-spacing:.02em}
.mstep__day i{display:block;font-style:normal;font-family:var(--f-jp);
  font-size:9.5px;letter-spacing:.12em;color:var(--ink-7);opacity:.7}
.mstep__joint{position:relative;width:var(--jt);height:var(--jt);display:block;z-index:2}
.mstep__joint svg{width:var(--jt);height:var(--jt);display:block;overflow:visible}
.jt__r{fill:none;stroke:var(--kin);stroke-width:1.4;
  stroke-dasharray:1;stroke-dashoffset:1;
  transform-box:fill-box;transform-origin:50% 50%;transform:rotate(-90deg)}
.jt__h{fill:none;stroke:var(--kin);stroke-width:1.4;opacity:0}
.jt__d{fill:var(--kin)}
.mstep__no{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-mincho);font-weight:800;font-size:12.5px;color:var(--ink-0);
  opacity:0;pointer-events:none}

.mstep__card{
  position:relative;
  padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,26px) clamp(16px,1.8vw,24px);
  background:linear-gradient(180deg,rgba(61,10,107,.42),rgba(22,0,41,.28));
  border:1px solid rgba(232,179,60,.20);
  transition:border-color .35s var(--ease-wood),transform .35s var(--ease-wood),
             background .35s var(--ease-wood);
}
.mstep__card h3{font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(16px,1.6vw,21px);line-height:1.6;letter-spacing:.03em;color:var(--washi)}
.mstep__card p{margin-top:9px;font-size:13px;line-height:2.05;
  color:var(--ink-8);opacity:.78;max-width:56ch}
.mstep__term{display:inline-block;margin-top:14px;
  font-family:var(--f-mincho);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  color:var(--kin);border:1px solid rgba(232,179,60,.42);padding:5px 11px}
.mstep:hover .mstep__card,.mstep:focus-within .mstep__card{
  border-color:rgba(232,179,60,.55);transform:translateX(5px);
  background:linear-gradient(180deg,rgba(61,10,107,.62),rgba(22,0,41,.36));
}

/* 終い */
.michi__end{
  display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(28px,4vh,52px);
  margin-left:calc(var(--day) + var(--jt) + var(--gap) * 2);
  padding:clamp(20px,2.4vw,30px);
  border:1px solid rgba(232,179,60,.28);
  background:linear-gradient(120deg,rgba(232,179,60,.10),transparent 60%);
}
.michi__end h3{font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(17px,1.8vw,24px);line-height:1.62;color:var(--washi);margin-bottom:16px}

@media (max-width:820px){
  .michi{--day:0px;--jt:34px;--gap:14px;--axis:17px}
  .mstep{grid-template-columns:var(--jt) minmax(0,1fr);gap:var(--gap)}
  .mstep__joint{grid-row:1 / span 2}
  .mstep__day{grid-column:2;text-align:left;padding-top:0;margin-bottom:-4px}
  .mstep__day b{display:inline;font-size:17px}
  .mstep__day i{display:inline;margin-left:6px}
  .mstep__card{grid-column:2}
  .michi__end{margin-left:calc(var(--jt) + var(--gap));flex-direction:column;align-items:flex-start}
  .michi__read{display:none}
  .michi__badge{
    display:block;position:sticky;top:98px;z-index:5;   /* 浮くヘッダーの下 */
    width:max-content;margin:0 0 10px auto;
    font-family:var(--f-mincho);font-weight:800;font-size:11.5px;letter-spacing:.14em;
    color:var(--ink-0);background:var(--kin);padding:4px 10px;
    box-shadow:2px 2px 0 rgba(22,0,41,.5);
  }
}

/* ---------- 4. AIエージェント：引ける台 ---------- */
.rail{position:relative;margin-top:clamp(34px,5vh,58px);cursor:grab;user-select:none;overflow:hidden}
.rail.is-drag{cursor:grabbing}
.rail__track{
  display:flex;gap:clamp(16px,1.8vw,28px);
  padding-inline:max(20px,calc((100vw - var(--wrap)) / 2));
  will-change:transform;
}
.mem{
  flex:0 0 clamp(230px,20vw,286px);
  background:var(--washi);border:1px solid rgba(39,1,71,.14);
  padding:clamp(22px,2.2vw,30px);text-align:center;
  box-shadow:0 16px 40px -34px rgba(22,0,41,.5);
  transition:border-color .3s,box-shadow .3s;
}
.mem:hover{border-color:var(--ink-5);box-shadow:0 22px 50px -30px rgba(22,0,41,.6)}
.mem__win{
  width:clamp(96px,8vw,118px);aspect-ratio:1;margin:0 auto 18px;border-radius:50%;
  overflow:hidden;border:1px solid rgba(39,1,71,.18);background:var(--ink-9);
  box-shadow:inset 0 0 0 6px var(--washi);
}
.mem__win img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.mem h3{font-size:16px;margin-bottom:6px;color:var(--ink-1)}
.mem__role{font-family:var(--f-lat);font-size:10px;letter-spacing:.2em;color:var(--ink-4);margin-bottom:14px}
.mem p{font-size:13px;line-height:2;color:var(--ink-2);opacity:.82}
.mem--more{background:var(--ink-1);border-color:var(--ink-1);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px}
.mem--more h3{color:var(--washi);line-height:1.7}
.rail__hint{
  margin-top:22px;text-align:center;font-family:var(--f-lat);font-size:10px;
  letter-spacing:.24em;color:var(--ink-4);
}

/* ---------- 5. 見出しの一字ずつ ---------- */
[data-split-scrub] .ch{display:inline-block;will-change:transform,opacity}

/* ---------- 6. 流れる帯 ---------- */
.ticker{
  overflow:hidden;border-block:1px solid rgba(39,1,71,.14);
  background:var(--washi);padding:18px 0;
}
.sec--ink + .ticker,.ticker--ink{background:var(--ink-0);border-color:rgba(251,247,242,.14)}
.ticker__row{display:flex;gap:44px;width:max-content;will-change:transform}
.ticker__row span{
  font-family:var(--f-mincho);font-weight:800;font-size:clamp(17px,1.7vw,24px);
  letter-spacing:.1em;color:var(--ink-1);opacity:.72;white-space:nowrap;
  display:flex;align-items:center;gap:44px;
}
.ticker__row span::after{content:"◆";font-size:.5em;color:var(--shu);opacity:.85}
.ticker--ink .ticker__row span{color:var(--washi);opacity:.6}

/* ---------- 7. 反応するカーソル ---------- */
.cur{
  position:fixed;top:0;left:0;z-index:150;pointer-events:none;
  width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  display:grid;place-items:center;opacity:0;
  background:rgba(22,0,41,.9);color:var(--washi);
  font-family:var(--f-mincho);font-weight:800;font-size:11px;letter-spacing:.06em;
  will-change:transform;
}
.cur.is-dot{width:12px;height:12px;margin:-6px 0 0 -6px;background:transparent;
  box-shadow:0 0 0 1.5px var(--ink-4) inset}
@media (hover:none){.cur{display:none}}

/* ---------- 8. 応答 ---------- */
@media (max-width:1024px){
  .deck__grid{grid-template-columns:1fr;gap:34px}
  .deck__stage{height:clamp(330px,50vh,420px)}
  .byobu{flex-direction:column;height:auto}
  .byobu__p{flex:0 0 auto;min-width:0}
  .byobu__p.is-open{min-width:0}
  .byobu__spine{flex:0 0 auto;flex-direction:row;justify-content:space-between;
    padding:14px 20px;border-right:0;border-bottom:1px solid rgba(39,1,71,.10)}
  .byobu__spine .tate{writing-mode:horizontal-tb;letter-spacing:.12em}
  .byobu__p{flex-direction:column}
  .byobu__body{min-width:0;padding:22px;height:0;overflow:hidden;transition:none}
  .byobu__p.is-open .byobu__body{height:auto;padding:22px}
}
@media (max-width:640px){
  .fuda__kanji{font-size:78px;opacity:.7}
  .deck__stage{height:400px}
  .mem{flex:0 0 72vw}
}
@media (prefers-reduced-motion:reduce){
  .fuda{position:relative;inset:auto;margin-bottom:18px;transform:none !important;opacity:1 !important}
  .deck__stage{height:auto}
  .deck__pin{min-height:0}
}

/* ============================================================
   9. 選ばれる理由 — 掛軸（かけじく）
   軸木・掛緒を持つ四幅。ふれると巻きが下りる。
   ============================================================ */
.kake{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,40px);
  padding-top:34px;                 /* 掛緒の分 */
  align-items:start;
}
.kake{--face:clamp(280px,30vh,340px)}
.kake__s{
  position:relative;cursor:pointer;outline:none;
  /* 高さを固定し、垂れても他の幅を押しのけない */
  height:calc(26px + 13px + var(--face) + 17px);
}
/* 掛かっている部分。ここだけが下へ伸びる */
.kake__hang{position:absolute;top:26px;left:0;right:0;z-index:1}
.kake__s.is-open{z-index:5}
.kake__s.is-open .kake__hang{z-index:5}
.kake__s:focus-visible .kake__silk{box-shadow:0 0 0 3px var(--ink-5)}

/* 掛緒（かけお）と釘 */
.kake__hook{
  position:absolute;top:0;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--ink-1);z-index:3;
}
.kake__cord{
  position:absolute;top:4px;left:50%;width:1.5px;height:24px;margin-left:-.75px;
  background:linear-gradient(var(--ink-1),var(--ink-4));z-index:2;
}
/* 軸木（じくぎ） */
.kake__rod{
  position:relative;z-index:2;height:13px;border-radius:2px;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-0));
  box-shadow:0 1px 0 rgba(251,247,242,.18) inset;
}
.kake__rod--t{margin-inline:-6px}
.kake__rod--b{
  margin-inline:-10px;height:17px;
  box-shadow:0 1px 0 rgba(251,247,242,.18) inset, 0 10px 22px -12px rgba(22,0,41,.6);
}
/* 本紙（ほんし） */
.kake__silk{
  position:relative;z-index:1;overflow:hidden;
  background:
    linear-gradient(180deg, var(--ink-9) 0%, var(--washi) 22%, var(--washi) 100%);
  border-inline:1px solid rgba(39,1,71,.14);
  transition:box-shadow .4s var(--ease-wood);
}
/* 一文字（いちもんじ）— 上下の金襴帯 */
.kake__silk::before,.kake__silk::after{
  content:"";position:absolute;left:0;right:0;height:9px;
  background:repeating-linear-gradient(90deg,var(--kin) 0 7px,var(--kin-deep) 7px 14px);
  opacity:.55;
}
.kake__silk::before{top:0}
.kake__silk::after{bottom:0}

.kake__face{
  position:relative;
  height:var(--face);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:26px 16px;
}
.kake__no{
  position:absolute;top:20px;right:16px;
  font-family:var(--f-mincho);font-weight:800;font-size:clamp(34px,3.4vw,50px);
  line-height:1;color:var(--ink-8);
}
.kake__ink{width:clamp(64px,6vw,86px);height:auto}
.kake__face h3{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(17px,1.6vw,22px);letter-spacing:.2em;line-height:1.4;
  color:var(--ink-1);margin:0;
}
/* 巻かれている本文

   もとは本紙の下へ垂らしていた。掛軸としては正しいが、
   .kake__hang が絶対配置のため、垂れた分は誰の場所も取らない。
   結果、下の注記に重なり、さらに次の節（墨地の紙）に切り落とされていた。

   垂らす代わりに、本紙の中でほどく。紙の丈は少しだけ伸ばし、
   軸木がその分だけ沈む。はみ出しは無くなり、所作は残る。 */
.kake__more{overflow:hidden}
.kake__more p{
  padding:0 clamp(16px,1.6vw,24px);
  font-size:13px;line-height:2.05;color:var(--ink-2);opacity:.86;text-align:left;
}

@media (min-width:601px){
  .kake__more{
    position:absolute;left:0;right:0;top:9px;bottom:9px;   /* 一文字の内側 */
    height:auto;display:flex;align-items:center;z-index:2;
    background:linear-gradient(180deg,rgba(251,247,242,.86),rgba(251,247,242,.82) 22%);
    clip-path:inset(0 0 100% 0);      /* 巻かれている状態 */
    opacity:0;
  }
}
.kake__more b{color:var(--ink-1);font-weight:700;display:block;margin-bottom:8px}

.kake__s.is-open .kake__silk{box-shadow:0 22px 46px -30px rgba(22,0,41,.5)}

.ink-draw{stroke-dasharray:1;stroke-dashoffset:1}

@media (max-width:1024px){
  .kake{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .kake{grid-template-columns:1fr;gap:26px;padding-bottom:40px}
  .kake__s{height:auto}
  .kake__hang{position:static}
  .kake__face{height:auto;padding:34px 16px;flex-direction:row;justify-content:flex-start;gap:22px}
  .kake__face h3{writing-mode:horizontal-tb;letter-spacing:.06em}
  .kake__no{font-size:34px}
  /* 縦積みでは流し込みのまま。開くと札そのものが伸びる。 */
  .kake__more{height:0}
  .kake__more p{padding-bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  /* 動かさない場合は、本文を最初から下に置いて全部見せる */
  .kake__more{position:static;height:auto;clip-path:none;opacity:1;background:none}
  .kake__more p{padding-bottom:26px}
  .kake__s{height:auto}
  .kake__hang{position:static}
}

/* ============================================================
   10. 導入事例 — 襖（ふすま）
   引手をつまんで横に引く。裏に成果が置いてある。
   ============================================================ */
/* 枚数が増えても崩れないよう、列は幅から決める。
   実績を足すときは article を足すだけでよい。 */
.fusuma-row{
  display:grid;gap:clamp(20px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
}
/* 戸が開ききっても閉じた分だけ戸が残る。その幅を裏の余白として必ず確保する。
   値は JS からも読むので、ここが唯一の定義。 */
.fusuma{--open:90%}
.fusuma{outline:none}
.fusuma__frame{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;
  background:var(--ink-1);
  border:3px solid var(--ink-0);          /* 縁（ふち） */
  box-shadow:0 20px 46px -30px rgba(22,0,41,.6);
}
/* 鴨居（かもい）と敷居（しきい）＝上下のレール。
   「これは横に引く戸だ」ということを、文字ではなく形で伝える。 */
.fusuma__frame::before,
.fusuma__frame::after{
  content:"";position:absolute;left:0;right:0;height:7px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,var(--ink-0),#2C0553);
  box-shadow:inset 0 1px 0 rgba(232,179,60,.22);
}
.fusuma__frame::before{top:0}
.fusuma__frame::after{bottom:0;background:linear-gradient(0deg,var(--ink-0),#2C0553)}
.fusuma:focus-visible .fusuma__frame{box-shadow:0 0 0 3px var(--ink-5)}

/* 裏 — 成果 */
.fusuma__back{
  position:absolute;inset:0;color:var(--washi);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(152,29,255,.30), transparent 60%),
    var(--ink-1);
}
.fusuma__info{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(20px,2.2vw,32px);
}
/* 窓 — 実際のサイトの全景。戸を開けている間だけ、ゆっくり流れる。 */
.fusuma__shot{
  position:relative;overflow:hidden;margin:0;
  background:var(--ink-0);border-left:1px solid rgba(232,179,60,.28);
}
.fusuma__shot img{width:100%;height:auto;display:block}
.fusuma__shot::after{      /* 窓の内側に落ちる影 */
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 12px 26px -14px rgba(0,0,0,.85),inset 0 -12px 26px -14px rgba(0,0,0,.85);
}
.fusuma__shot figcaption{
  position:absolute;left:10px;bottom:9px;z-index:2;
  font-family:var(--f-mincho);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  color:var(--kin);background:rgba(22,0,41,.72);padding:3px 8px;
}
.fusuma__label{
  font-family:var(--f-lat);font-size:10px;letter-spacing:.28em;color:var(--kin);
}
.fusuma__kpi{display:grid;gap:14px;margin:0}
.fusuma__kpi div{border-left:2px solid var(--kin);padding-left:14px}
.fusuma__kpi dt{font-size:11px;letter-spacing:.1em;color:var(--ink-7);opacity:.9}
.fusuma__kpi dd{
  margin:2px 0 0;font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(30px,3.4vw,46px);line-height:1.1;color:var(--washi);letter-spacing:.01em;
}
.fusuma__kpi dd em{font-style:normal;font-size:.42em;margin-left:3px;color:var(--kin)}
.fusuma__back p{font-size:13.5px;line-height:2.05;color:var(--ink-8);opacity:.84}
.fusuma__back .hanko{margin-top:auto;align-self:flex-start}

/* 表 — 引く戸 */
.fusuma__door{
  position:absolute;inset:0;z-index:2;
  padding:clamp(24px,2.4vw,34px);
  display:flex;flex-direction:column;
  background:
    linear-gradient(180deg, var(--washi) 0%, var(--washi-warm) 100%);
  border-right:3px solid var(--ink-0);
  cursor:grab;touch-action:pan-y;
  will-change:transform;
}
.fusuma__door:active{cursor:grabbing}
/* 襖紙の地紋 */
.fusuma__door::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23BD70FF' stroke-width='1' stroke-opacity='.30'%3E%3Cpath d='M30 0v104M0 26l30 -26 30 26M0 78l30 26 60 -26M0 26v52M60 26v52M0 26l30 26 30 -26M0 78l30 -26 30 26'/%3E%3C/g%3E%3C/svg%3E");
}
.fusuma__tag{
  position:relative;font-family:var(--f-lat);font-size:10.5px;letter-spacing:.22em;
  color:var(--ink-4);margin-bottom:18px;
}
.fusuma__door h3{
  position:relative;font-size:clamp(24px,2.6vw,38px);line-height:1.4;
  color:var(--ink-1);letter-spacing:.03em;
}
/* 戸の裾に控えめな番号を置き、面の間延びを抑える */
.fusuma__no{
  position:relative;margin-top:auto;
  font-family:var(--f-mincho);font-weight:800;font-size:13px;
  letter-spacing:.24em;color:var(--ink-6);
}
/* 引手（ひきて） */
.fusuma__pull{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:28px;height:70px;border-radius:14px;
  background:linear-gradient(90deg,var(--ink-2),var(--ink-0));
  box-shadow:inset 0 0 0 2px rgba(232,179,60,.55), 0 2px 6px rgba(22,0,41,.4);
  transition:box-shadow .3s var(--ease-wood);
}
.fusuma__frame:hover .fusuma__pull{
  box-shadow:inset 0 0 0 2px var(--kin), 0 0 0 5px rgba(232,179,60,.22), 0 2px 8px rgba(22,0,41,.5);
}
.fusuma__pull::after{
  content:"";position:absolute;inset:7px 9px;border-radius:6px;
  background:rgba(232,179,60,.22);
}
.fusuma__hint{
  position:absolute;right:56px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-mincho);font-weight:800;
  font-size:13.5px;letter-spacing:.22em;color:var(--ink-3);
  background:rgba(251,247,242,.9);border:1px solid rgba(39,1,71,.16);
  padding:7px 13px;border-radius:2px;white-space:nowrap;
  box-shadow:2px 2px 0 rgba(39,1,71,.14);
  transition:opacity .3s;
}
.fusuma__hint i{font-style:normal;color:var(--shu);font-size:15px;line-height:1;display:block}
.fusuma.is-open .fusuma__hint{opacity:0}

@media (max-width:900px){
  .fusuma__frame{aspect-ratio:5/6}
  /* 縦長になるので、窓は下に敷く */
  .fusuma__back{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .fusuma__shot{border-left:0;border-top:1px solid rgba(232,179,60,.28)}
  .fusuma__kpi{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .fusuma__door{position:relative;inset:auto}
  .fusuma__back{position:relative;inset:auto}
  .fusuma__frame{aspect-ratio:auto}
}

/* ============================================================
   11. FAQ — 問答（もんどう）
   開くと筆線が引かれ、答が下りる。
   ============================================================ */
.mondo__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
/* sticky だけでは効かない。grid の既定 align-items:stretch がこの升を
   行の高さまで伸ばすため、貼り付く余地が残らない（実測：貼らずに流れていた）。 */
.mondo__side{position:sticky;top:clamp(100px,13vh,128px);align-self:start}
.mondo__side .lead{max-width:26ch}

.mondo{border-top:1px solid rgba(39,1,71,.14)}
.mondo__i{border-bottom:1px solid rgba(39,1,71,.14)}
.mondo__q{
  position:relative;width:100%;display:flex;align-items:flex-start;gap:16px;
  padding:24px 4px 26px;text-align:left;
}
.mondo__mark{
  flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:2px;
  font-family:var(--f-mincho);font-weight:800;font-size:14px;
  background:var(--ink-1);color:var(--washi);margin-top:1px;
}
.mondo__mark--a{background:var(--shu)}
.mondo__t{
  font-family:var(--f-mincho);font-weight:800;font-size:clamp(15px,1.35vw,18.5px);
  line-height:1.72;color:var(--ink-1);letter-spacing:.03em;
}
.mondo__brush{
  position:absolute;left:46px;right:4px;bottom:14px;height:10px;
  opacity:0;pointer-events:none;
}
.mondo__brush path{stroke-dasharray:1;stroke-dashoffset:1}
.mondo__i.is-open .mondo__brush{opacity:1}

.mondo__a{height:0;overflow:hidden;display:flex;gap:16px;padding-left:0}
.mondo__a p{
  padding:0 4px 26px;font-size:13.5px;line-height:2.1;color:var(--ink-2);opacity:.86;
}
.mondo__a .mondo__mark--a{margin-top:2px}

@media (max-width:900px){
  .mondo__grid{grid-template-columns:1fr;gap:34px}
  .mondo__side{position:static}
}

/* ============================================================
   12. 会社概要 — 縦書きの標題と社印
   ============================================================ */
.gaiyo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.gaiyo__title{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  border-right:1px solid rgba(39,1,71,.16);padding-right:clamp(20px,3vw,44px);
}
.gaiyo__title h2{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(26px,2.8vw,40px);letter-spacing:.34em;line-height:1;color:var(--ink-1);margin:0;
}
.gaiyo__title .eyebrow{writing-mode:vertical-rl;letter-spacing:.34em;margin:0}
.gaiyo__title .eyebrow::before{width:1px;height:30px}
.gaiyo__body .lead{max-width:52ch;margin-bottom:26px}
.gaiyo__foot{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}

@media (max-width:820px){
  .gaiyo{grid-template-columns:1fr;gap:26px}
  .gaiyo__title{flex-direction:row;align-items:flex-end;justify-content:flex-start;
    border-right:0;border-bottom:1px solid rgba(39,1,71,.16);padding:0 0 18px}
}

/* ============================================================
   13. お問い合わせ — 静止のまま構図で見せる
   ============================================================ */
/* 縦書きの大見出しは撤去。帯に食い込み、左に空きを作っていた。 */

/* ============================================================
   14. フッター — 版画の締め
   ============================================================ */
.ftr__mark{
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  padding-bottom:34px;margin-bottom:38px;border-bottom:1px solid rgba(251,247,242,.14);
  flex-wrap:wrap;
}
.ftr__big{
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(30px,4.6vw,68px);line-height:1.1;letter-spacing:.06em;
  color:var(--washi);margin:0;
}
.ftr__big span{color:var(--ink-6)}
.ftr__cta{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   15. 資料請求 — 冊子
   ============================================================ */
.siryo{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:start}

/* 冊子の見た目。奥に二枚の紙を覗かせて厚みを出す */
.siryo__book{position:relative;perspective:1200px}
.siryo__cover{
  position:relative;z-index:3;aspect-ratio:5/7;
  background:linear-gradient(155deg,var(--ink-2) 0%,var(--ink-0) 62%);
  border:1px solid var(--ink-0);
  padding:clamp(24px,2.6vw,36px);
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  box-shadow:0 30px 60px -34px rgba(22,0,41,.75);
  overflow:hidden;
}
.siryo__cover::before{  /* 麻の葉の箔押し */
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23E8B33C' stroke-width='1'%3E%3Cpath d='M30 0v104M0 26l30 -26 30 26M0 78l30 26 30 -26M0 26v52M60 26v52M0 26l30 26 30 -26M0 78l30 -26 30 26'/%3E%3C/g%3E%3C/svg%3E");
}
.siryo__ribbon{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--shu);color:#fff;font-family:var(--f-mincho);font-weight:800;
  font-size:11.5px;letter-spacing:.14em;padding:7px 14px;
}
.siryo__eyebrow{
  position:relative;font-family:var(--f-lat);font-size:9.5px;letter-spacing:.3em;
  color:var(--kin);align-self:flex-start;margin-top:22px;
}
.siryo__cover h3{
  position:relative;font-size:clamp(19px,1.9vw,26px);letter-spacing:.2em;line-height:1.6;
  color:var(--washi);margin:0;text-align:left;
}
.siryo__cover .hanko{position:absolute;left:clamp(24px,2.6vw,36px);bottom:clamp(56px,6vw,84px);z-index:2}
.siryo__pdf{
  position:relative;font-family:var(--f-lat);font-size:10px;letter-spacing:.22em;
  color:rgba(251,247,242,.6);align-self:flex-start;
}
.siryo__page{
  position:absolute;inset:0;border:1px solid rgba(39,1,71,.18);background:var(--washi);
}
.siryo__page--1{z-index:2;transform:translate(9px,9px)}
.siryo__page--2{z-index:1;transform:translate(17px,17px);opacity:.7}

.siryo__body .lead{max-width:44ch}
.siryo__toc{margin:28px 0 34px;border-top:1px solid rgba(39,1,71,.12)}
.siryo__toc li{
  display:flex;gap:14px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid rgba(39,1,71,.10);
  font-size:13.5px;line-height:1.9;color:var(--ink-2);
}
.siryo__toc li span{
  flex:none;font-family:var(--f-num);font-size:14px;letter-spacing:.1em;color:var(--ink-5);
}
.siryo__form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.siryo__wide{grid-column:1 / -1}
.siryo__body .note{margin-top:16px}

@media (max-width:900px){
  .siryo{grid-template-columns:1fr;gap:34px}
  .siryo__book{max-width:300px}
  .siryo__form{grid-template-columns:1fr}
}

/* ============================================================
   16. MONA 2.0 — 自社実証の数値（themona.global の実数）
   ============================================================ */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,52px);margin:0}
.proof__i{text-align:center;padding:clamp(24px,3vw,40px) 12px;
  border:1px solid rgba(251,247,242,.18);background:rgba(251,247,242,.04)}
.proof__i dd{
  margin:0;font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(42px,6.4vw,92px);line-height:1;color:var(--kin);letter-spacing:.01em;
  display:flex;align-items:baseline;justify-content:center;
}
.proof__sign{font-size:.62em;margin-right:.04em}
.proof__unit{font-size:.4em;margin-left:.06em;color:var(--ink-7)}
.proof__i dt{margin-top:14px;font-size:12.5px;letter-spacing:.18em;color:var(--ink-7);opacity:.9}
.proof__lead{
  margin:clamp(30px,4vh,46px) auto 0;max-width:62ch;text-align:center;
  font-size:14.5px;line-height:2.15;color:var(--ink-8);opacity:.86;
}
@media (max-width:760px){ .proof{grid-template-columns:1fr;gap:14px} }
.fusuma__name{
  font-family:var(--f-mincho);font-weight:800;font-size:clamp(22px,2.2vw,31px);
  color:var(--washi);letter-spacing:.03em;line-height:1.35;margin:0;
}
.fusuma__back p{margin-top:2px}

/* ============================================================
   18. 14,000+ — 千社札（せんじゃふだ）
   寺社の門に貼り重ねられた名札。墨地に貼られ、端が浮いて風に揺れる。
   ============================================================ */
.sec--senja{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 80% at 50% 0%, #2C0553 0%, transparent 58%),
    var(--ink-0);
  padding:clamp(150px,20vh,210px) 0 clamp(10px,2vh,24px);
}
/* 木目 — 門の板 */
.sec--senja::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(251,247,242,.028) 0 2px, transparent 2px 5px, rgba(251,247,242,.015) 5px 6px, transparent 6px 13px);
}

/* --- 浮く札 --- */
/* 札は上段だけ。下の格子壁にかぶせない */
.senja-field{position:absolute;left:0;right:0;top:0;height:74%;z-index:1;pointer-events:none}
/* 変形の担当を1要素につき1つに分ける。
   以前は同じ要素に「登場」「視差」「風の揺れ」の3つが同時に yPercent と rotate を
   書き込んでいたため、登場が即座に打ち消され（落ちてこない）、
   スクロール中は視差と揺れが毎フレーム奪い合って激しく震えていた。
     .senja     … 配置と基準の傾き（CSS のみ。GSAP は触らない）
     .senja__e  … 登場（GSAP: y / opacity）
     .senja__p  … スクロール視差（GSAP: y）
     .senja__w  … 風の揺れ（GSAP: rotation） */
.senja{
  position:absolute;left:var(--x);top:var(--y);
  width:clamp(58px,6.4vw,96px);
  transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s,1));
}
.senja__e,.senja__p,.senja__w{display:block;will-change:transform}
.senja__w img{
  width:100%;height:auto;display:block;
  padding:14% 12%;
  background:var(--washi);
  border:1px solid rgba(39,1,71,.2);
  /* 貼り札の厚みと、端の浮き */
  box-shadow:0 10px 22px -12px rgba(0,0,0,.72), 0 1px 0 rgba(255,255,255,.5) inset;
  object-fit:contain;aspect-ratio:3/4;
}
/* 奥行きで濃さを変える */
.senja[style*="--dep:3"] .senja__w{opacity:.34;filter:blur(.7px)}
.senja[style*="--dep:2"] .senja__w{opacity:.62}
.senja[style*="--dep:1"] .senja__w{opacity:.92}

/* --- 中央の数字 --- */
.senja-core{position:relative;z-index:2;text-align:center}
.senja-core .eyebrow{justify-content:center}
.senja-core .eyebrow::before{background:var(--kin)}
.senja-lead{
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(20px,2.5vw,34px);line-height:1.6;letter-spacing:.04em;
  color:var(--washi);margin:0 auto;max-width:24ch;
}
.senja-lead .accent{color:var(--kin)}
.senja-num{
  margin:clamp(16px,3vh,34px) 0 0;
  font-family:var(--f-mincho);font-weight:800;
  font-size:min(19vw, 260px);line-height:.92;letter-spacing:.01em;
  color:var(--kin);
  display:flex;align-items:baseline;justify-content:center;
  text-shadow:0 6px 0 rgba(22,0,41,.55);
}
.senja-num em{font-style:normal;font-size:.42em;margin-left:.02em}
.senja-cap{
  margin:clamp(12px,2vh,26px) auto 0;max-width:44ch;
  font-size:14.5px;line-height:2.1;color:var(--ink-8);opacity:.82;
}

/* --- 格子の壁 --- */
.koshi{
  position:relative;z-index:2;margin-top:clamp(52px,8vh,96px);
  border-top:1px solid rgba(251,247,242,.16);
  border-bottom:1px solid rgba(251,247,242,.16);
  background:rgba(22,0,41,.55);
  /* 下端が次のセクションに貼り付くのを防ぐ */
  margin-bottom:clamp(56px,9vh,110px);
}
.koshi__row{overflow:hidden;border-bottom:1px dashed rgba(251,247,242,.16)}
.koshi__row:last-child{border-bottom:0}
.koshi__track{display:flex;width:max-content;will-change:transform}
.koshi__c{
  flex:none;width:clamp(104px,10vw,150px);height:clamp(74px,7vw,104px);
  display:grid;place-items:center;padding:14px 18px;
  border-right:1px dashed rgba(251,247,242,.16);
}
.koshi__c img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.42;
  transition:opacity .35s var(--ease-wood), filter .35s var(--ease-wood);
}
.koshi__c:hover img{filter:none;opacity:1}

@media (max-width:760px){
  .senja{width:clamp(46px,13vw,70px)}
  .senja-num{font-size:26vw}
}
@media (prefers-reduced-motion:reduce){
  .senja-field{display:none}
  .koshi__track{width:auto;flex-wrap:wrap}
}

/* ============================================================
   19. お客様の声・企業文化 — 暖簾（のれん）
   店先に掛ける布。日本語で「暖簾を守る」＝ 信用を守る。

   注意：暖簾は「入口の上」に掛かるもの。
   人物写真の上にかぶせて顔を隠すのは、写真を載せる意味を消す。
   布は上、人は下。重ねない。
   ============================================================ */
/* 上のロゴの壁（墨地）から続けて受ける。
   ここで白い padding を挟むと、上の節との間に白帯が生まれる。 */
.sec--voice{position:relative;background:var(--washi);padding:0;overflow:hidden}

.voice-stage{
  position:relative;
  background:linear-gradient(180deg,var(--ink-0) 0%,#2C0553 42%,var(--ink-0) 100%);
  padding-bottom:clamp(6px,1.5vh,20px);
}

/* --- 人は、遮るものなく見せる --- */
/* 見出しは墨地の中、写真の真上（global と同じ並び）。
   ここに飾りを重ねない。人の顔を隠すのも、見出しを二重に言うのも意味が無い。 */
.voice-say{position:relative;z-index:2;text-align:center;padding:clamp(72px,10vh,120px) 0 clamp(24px,4vh,44px)}
.voice-say .eyebrow{justify-content:center;color:var(--ink-7)}
.voice-say .eyebrow::before{background:var(--kin)}
.voice-say h2{
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(21px,2.7vw,38px);line-height:1.58;letter-spacing:.04em;
  color:var(--washi);margin:0;
}
.voice-say h2 .accent{color:var(--kin)}

.voice-team{position:relative;z-index:1;text-align:center}
.voice-team img{
  width:min(96%,1180px);height:auto;display:block;margin:0 auto;
  filter:saturate(.96) contrast(1.02);
}

/* --- 三つの言葉 --- */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px);margin-top:clamp(30px,4vh,52px)}
.voice{background:var(--washi);border:1px solid rgba(39,1,71,.14);overflow:hidden}
.voice__pic{aspect-ratio:16/10;overflow:hidden;background:var(--ink-9)}
.voice__pic img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease-wood);
}
.voice:hover .voice__pic img{transform:scale(1.05)}
.voice h3{
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(16px,1.5vw,20px);line-height:1.68;color:var(--ink-1);
  padding:clamp(20px,2vw,26px) clamp(20px,2vw,26px) 0;letter-spacing:.03em;
}
.voice p{
  padding:12px clamp(20px,2vw,26px) clamp(22px,2.2vw,30px);
  font-size:13.5px;line-height:2.05;color:var(--ink-2);opacity:.86;
}

@media (max-width:900px){
  .voice-grid{grid-template-columns:1fr}
}
/* 三つの姿勢の塊にも、独立した見出しを立てる */
.voice-head{padding-top:clamp(64px,9vh,110px);margin-bottom:clamp(24px,4vh,44px)}
.voice-head .h-sec{max-width:26ch;margin-inline:auto}


/* ============================================================
   走馬灯 — 優れたチーム
   灯を内に置き、十三枚の写真を巻いた筒が、その周りを回る。
   横に流すだけの帯（slider）にしないための約束：
     ・写真は平面に並べず、円筒の面に貼る（rotateY → translateZ）
     ・回転はスクロールが握る。自動では回らない
     ・手前は灯を受けて明るく、奥は紙越しの影として沈む
   ============================================================ */
.sec--somato{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 96% at 50% 44%,#2E0757 0%,var(--ink-0) 58%,#0E0019 100%);
}
.somato__pin{
  position:relative;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;align-items:center;
  padding:clamp(52px,7.5vh,92px) 0 clamp(20px,3vh,40px);
}

/* --- 灯 --- */
.somato__lamp{
  position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:min(62vw,720px);aspect-ratio:1;border-radius:50%;
  pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,
    rgba(232,179,60,.46) 0%,rgba(232,179,60,.17) 42%,rgba(152,29,255,.14) 66%,transparent 78%);
  filter:blur(2px);will-change:opacity,transform;
}
.somato__lamp i{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:26%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,241,206,.9),rgba(232,179,60,.34) 52%,transparent 76%);
}

/* --- 見出し --- */
.somato__say{position:relative;z-index:3;text-align:center}
.somato__say .eyebrow{justify-content:center}
.somato__say .h-sec{font-family:var(--f-mincho);font-weight:800;line-height:1.5;letter-spacing:.04em}
.somato__say .lead{margin-inline:auto;max-width:46ch;font-size:14.5px;margin-top:clamp(12px,1.8vh,20px)}

/* --- 筒 --- */
.somato__stage{
  position:relative;z-index:2;
  height:clamp(312px,46vh,470px);
  perspective:3000px;perspective-origin:50% 50%;
  /* 両端は闇に溶かす。切り口が見えると「箱の中の slider」に見える */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
.somato__cyl{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

.somato__f{
  position:absolute;left:50%;top:calc(50% - var(--lift,0px));margin:0;
  width:clamp(180px,19vw,290px);aspect-ratio:3/2;
  /* --a 角度 / --r 半径 / --s 手前で少しだけ大きく */
  transform:translate(-50%,-50%) rotateY(var(--a,0deg)) translateZ(var(--r,0px)) scale(var(--s,1));
  backface-visibility:visible;
  overflow:hidden;background:var(--ink-2);
  border:1px solid rgba(232,179,60,.30);
  box-shadow:0 34px 74px -44px #000;
  /* will-change は付けない。
     十三枚＋十三枚の覆いを個別のレイヤーに昇格させると、
     Chrome がラスタライズしきれず「枠だけ出て写真が出ない」状態になる（実測）。
     毎フレーム動くのは筒そのものなので、昇格はそちらに一つだけ持たせる。 */
}
.somato__f img{width:100%;height:100%;object-fit:cover;display:block}
.somato__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,0,25,.55) 0%,rgba(14,0,25,.86) 100%);
  opacity:.8;
}
.somato__f figcaption{
  position:absolute;left:10px;bottom:8px;
  font-family:var(--f-num);font-size:15px;letter-spacing:.12em;
  color:var(--kin);opacity:0;transition:opacity .4s var(--ease-wood);
}
.somato__f.is-live{border-color:rgba(232,179,60,.72);box-shadow:0 0 0 1px rgba(232,179,60,.22),0 44px 90px -46px rgba(232,179,60,.5)}
.somato__f.is-live figcaption{opacity:.92}

/* --- 裾の英字。写真とは逆に回る --- */
.somato__rim{
  position:absolute;left:0;right:0;top:50%;height:0;
  transform-style:preserve-3d;pointer-events:none;z-index:1;
}
.somato__rim span{
  position:absolute;left:50%;top:0;
  /* 札の下端より下へ、筒と同じ軸で回す。
     手前ほど遠近で下がるので、裾は自然と楕円を描く（＝灯籠の台座）。 */
  transform:translate(-50%,-50%) rotateY(var(--a,0deg)) translateZ(var(--r,0px)) translateY(var(--ry,150px));
  font-family:var(--f-lat);font-weight:700;font-size:13px;
  letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;
  color:var(--kin);opacity:.52;
  /* 裏を向いた字は鏡文字になる。影として味のある写真と違い、
     文字が反転していると単なる不具合に見える。裏は伏せる。 */
  backface-visibility:hidden;
}

/* --- 目盛り --- */
.somato__meter{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:14px;
  /* 裾の英字は筒より下へはみ出す。目盛りはその下に置く。 */
  margin-top:clamp(30px,5vh,58px);
  font-family:var(--f-num);letter-spacing:.1em;color:rgba(255,255,255,.42);font-size:17px;
}
.somato__meter b{font-weight:400;font-size:clamp(26px,3.4vh,34px);line-height:1;color:var(--kin)}
.somato__meter i{display:block;width:46px;height:1px;background:rgba(232,179,60,.4)}

/* --- 勉強会の段 --- */
.somato__note{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,52px);align-items:center;
  padding-bottom:clamp(72px,10vh,120px);
}
.somato__note figure{margin:0;overflow:hidden;border:1px solid rgba(232,179,60,.22)}
.somato__note img{width:100%;height:100%;object-fit:cover;display:block}
.somato__note h3{
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(17px,1.7vw,23px);line-height:1.62;letter-spacing:.03em;color:var(--washi);
}
.somato__note p{margin-top:14px;font-size:14px;line-height:2.05;color:rgba(255,255,255,.72)}

/* ---------- 筒を開いて、敷き並べる ----------
   狭い画面と「動きを減らす」設定は、どちらも回転を見せない。
   同じ見え方でよいので、条件を並べて一つの形にまとめる。 */
@media (max-width:1024px),(prefers-reduced-motion:reduce){
  .somato__pin{min-height:0;display:block;padding-bottom:clamp(28px,5vh,48px)}
  .somato__meter{margin-top:26px}
  .somato__lamp{top:38%;width:86vw}
  .somato__stage{height:auto;perspective:none;margin-top:clamp(26px,5vh,44px);
    -webkit-mask-image:none;mask-image:none}
  .somato__cyl{position:static;transform:none!important;transform-style:flat;
    display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .somato__f{position:static;width:auto;transform:none!important;opacity:1!important}
  .somato__f:nth-child(4n+2),.somato__f:nth-child(4n+3){margin-top:22px}
  .somato__f:last-child{grid-column:span 2;aspect-ratio:2/1}
  .somato__f figcaption{opacity:.6}
  .somato__veil{opacity:.2!important}
  /* 裾は帯になって横へ流れる */
  .somato__rim{
    position:relative;bottom:auto;height:auto;transform:none!important;transform-style:flat;
    display:flex;width:max-content;gap:34px;margin-top:26px;
    animation:somato-run 26s linear infinite;
  }
  .somato__rim span{position:static;transform:none!important;font-size:12px;opacity:.5}
  .somato__meter{margin-top:26px}
  .somato__note{grid-template-columns:1fr}
}
@keyframes somato-run{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .somato__rim{animation:none}
}


/* ============================================================
   継ぎ紙 — 紙を継ぐ

   終盤は、ほぼ同じ白の面が四つ続く。境目が見えないうえ、
   間に 84px＋84px＝168px の空白が四度も入り、
   「白いだけの長い帯」になっていた（実測）。

   巻物や襖の紙は、突き合わせず「重ねて継ぐ」。
   空白を消すのではなく、空白そのものを継ぎ目に変える。
     ・後の紙を継ぎしろぶん引き上げ、前の紙の下端に重ねる
     ・重なった端に丸みと影を与え、紙が載っていることを示す
     ・下になった紙の中身は、わずかに退いて暗くなる（＝奥行き）
   ============================================================ */
:root{
  --seam:clamp(64px,9vh,110px);      /* 継ぎしろ */
}

.sheet{
  position:relative;                  /* 重ね順は DOM 順のままでよい */
  margin-top:calc(-1 * var(--seam));
  border-radius:clamp(18px,2.4vw,34px) clamp(18px,2.4vw,34px) 0 0;
  box-shadow:0 -22px 52px -28px rgba(22,0,41,.42);
}
/* 継ぎ目の罫。紙の端に一本だけ引く。 */
.sheet::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(39,1,71,.18) 14%,rgba(39,1,71,.18) 86%,transparent);
}
.sheet.sec--ink::before{
  background:linear-gradient(90deg,transparent,rgba(232,179,60,.34) 14%,rgba(232,179,60,.34) 86%,transparent);
}

/* 余白は「継ぎしろ＋わずか」に固定する。
   下端は必ず継ぎしろより厚くしておく。薄いと次の紙が中身に乗る。 */
.sec.sheet{
  padding-top:clamp(64px,8vh,92px);
  /* 下端＝継ぎしろ＋「継ぎ目が中身に触れない分」。
     ここを薄くすると、紙の端が前の節の中身のすぐ下に来て窮屈になる。 */
  padding-bottom:calc(var(--seam) + clamp(28px,3.6vh,48px));
}

/* 退いた紙。scale と opacity は JS が握る（tsugigami）。
   will-change は付けない。合成レイヤーへ上げると、
   中の写真がラスタライズされず枠だけになる（走馬灯で実測）。 */

@media (max-width:820px){
  :root{--seam:clamp(40px,5vh,64px)}
  .sheet{box-shadow:0 -14px 32px -20px rgba(22,0,41,.38)}
}



/* ============================================================
   会社概要 — 三幕（さんまく）

   上の節（導入事例）が紙地なので、ここは墨地。
   画面を三画面ぶん留め、一本のスクラブで三つの幕を通す。
     一幕 ひらく  … 一枚が細い隙間から開き、創業年が立つ
     二幕 あつまる … 十枚が奥から飛んできて壁になる
     三幕 よむ    … 壁が退き、概要が界線とともに引かれる

   写真を持つ要素に will-change は付けない。
   合成レイヤーへ上げると中身が描かれない（この repo で二度実測）。
   ============================================================ */
.gaiyo-sec{
  position:relative;padding:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#1B0430 0%,#0B0014 62%);
  color:var(--washi);
}
.gaiyo__pin{position:relative;height:100svh;overflow:hidden}

/* ---- 一幕：隙間 ---- */
.ga-hero{position:absolute;inset:0;z-index:1}
.ga-hero__m{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(48% 0% 48% 0%);      /* 細い隙間から始まる */
}
.ga-hero__m img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.28)}
.ga-hero::after{      /* 字が乗る面を沈める */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,0,20,.72),rgba(11,0,20,.35) 40%,rgba(11,0,20,.86));
}

/* ---- 二幕：写真の壁 ---- */
.ga-wall{position:absolute;inset:0;z-index:2;perspective:1500px;opacity:0}
.ga-wall__pos{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(94vw,1520px)}
.ga-wall__in{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,.9vw,16px);
  transform-style:preserve-3d;
}
.ga-p{
  margin:0;overflow:hidden;position:relative;
  aspect-ratio:1200/922;background:#160029;
  border:1px solid rgba(232,179,60,.20);
  box-shadow:0 26px 60px -40px #000;
}
.ga-p img{width:100%;height:100%;object-fit:cover;display:block}
.ga-p::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(11,0,20,.55));pointer-events:none}

/* ---- 幕をつらぬく字 ---- */
/* 位置決めの層と、動かす層を分ける。
   translate:0 -50% を持つ要素に gsap で y を足すと、
   gsap が transform を書き直して中央寄せが消える（実測：概要が画面下へ落ちた）。 */
.ga-layer{position:absolute;inset:0;display:grid;align-content:center}
.ga-layer#gaSayL{z-index:4}
.ga-layer#gaDocL{z-index:5;opacity:0}
.ga-say{text-align:center}
.ga-say .eyebrow{justify-content:center;color:var(--kin)}
.ga-say .eyebrow::before{background:var(--kin)}
.ga-num{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  font-family:var(--f-num);line-height:.9;color:var(--washi);
  font-size:clamp(72px,14vw,210px);letter-spacing:.01em;
  text-shadow:0 18px 60px rgba(0,0,0,.6);
}
.ga-num em{font-style:normal;font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(18px,2.4vw,38px);color:var(--kin)}
.ga-cap{
  margin-top:clamp(10px,1.6vh,20px);
  font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(15px,1.9vw,27px);letter-spacing:.18em;color:var(--ink-8);
}

/* ---- 三幕：概要 ---- */
.ga-doc{
  position:relative;
  /* 二段組。九行の表を一段で置くと、留めた画面（100svh）に収まらない（実測 1020px）。 */
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,64px);align-items:start;
}
/* 概要が出るときは、後ろの壁をもう一段沈める */
.ga-doc::before{
  content:"";position:absolute;inset:-40vh -50vw;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(11,0,20,.86),rgba(11,0,20,.62) 70%,transparent);
}
.ga-doc__side{position:relative}
.ga-doc__h{font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(26px,3.4vw,48px);letter-spacing:.1em;color:var(--washi);margin:6px 0 0}
.ga-doc__side .hanko{margin-top:clamp(16px,2.4vh,28px)}
.ga-doc .profile div{
  display:grid;grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,26px);
  /* 九行を留めた画面に収める。行の余白と行間はここで決まる。 */
  padding:clamp(5px,.8vh,8px) 0;border-bottom:1px solid rgba(232,179,60,.14);
}
/* style.css の .profile は明るい面向けで、dt に淡い地色と 18px の余白を持つ。
   墨地では地色が白い塊になり、余白のせいで一行 70px になって画面に入らない。 */
.ga-doc .profile dt{
  padding:0;background:none;font-family:var(--f-mincho);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;color:var(--kin);opacity:.9;line-height:1.7;
}
.ga-doc .profile dd{padding:0;margin:0;font-size:12.5px;line-height:1.8;color:var(--ink-8)}
.ga-doc .profile{border-top:0}
.ga-doc__foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,3vh,34px)}

/* ---- 幕の目次 ---- */
.ga-acts{
  position:absolute;right:clamp(14px,2.2vw,32px);top:50%;translate:0 -50%;z-index:6;
  list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2.4vh,26px);
}
.ga-acts li{display:flex;align-items:center;gap:9px;justify-content:flex-end;
  opacity:.28;transition:opacity .45s var(--ease-wood)}
.ga-acts li.is-on{opacity:1}
.ga-acts b{font-family:var(--f-mincho);font-weight:800;font-size:14px;color:var(--kin);
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid rgba(232,179,60,.5);border-radius:50%}
.ga-acts span{writing-mode:vertical-rl;font-family:var(--f-mincho);font-weight:700;
  font-size:10.5px;letter-spacing:.24em;color:var(--ink-8)}

/* ---- 狭い画面・動きを減らす設定：留めず、順に置く ---- */
@media (max-width:1080px){
  .ga-doc{grid-template-columns:1fr;gap:clamp(16px,2.4vh,28px)}
  .ga-doc .profile div{grid-template-columns:clamp(84px,22vw,130px) minmax(0,1fr)}
}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .gaiyo__pin{height:auto;padding:clamp(64px,9vh,96px) 0 clamp(48px,7vh,80px)}
  .ga-hero{position:relative;height:clamp(220px,38vh,340px);inset:auto}
  .ga-hero__m{clip-path:none}
  .ga-hero__m img{transform:none}
  .ga-wall{position:relative;inset:auto;opacity:1;perspective:none;margin-top:clamp(20px,3vh,34px)}
  .ga-wall__pos{position:relative;left:auto;top:auto;transform:none;width:auto;
    padding-inline:clamp(16px,4vw,28px)}
  .ga-wall__in{grid-template-columns:repeat(2,1fr);transform:none !important;opacity:1 !important}
  .ga-p{transform:none !important;opacity:1 !important}
  /* 位置決めの層は流し込みへ戻す。opacity は層側が持っているので、そこを開ける。 */
  .ga-layer{position:relative;inset:auto;display:block}
  .ga-layer#gaDocL{opacity:1}
  .ga-say{margin-top:clamp(24px,4vh,40px)}
  .ga-doc{margin-top:clamp(26px,4vh,44px)}
  .ga-acts{display:none}
}


/* ============================================================
   MONA 2.0 — 実話（三つの数）

   平面の図形で道具を描くと、手を掛けるほど絵札に見える（算盤で実証済み）。
   ここでは物を一つも描かない。数字そのものを面にする。

     数   … 字の内側を自社の写真で埋める（background-clip:text）
     写真 … スクロールに合わせて字の中で流れる
     罫   … 左から引かれ、右端の見出しへつながる
     見出し… 罫が届いてから、右から入る
   ============================================================ */
.jitsu-sec{position:relative}
.jitsu{list-style:none;margin:clamp(26px,4vh,48px) 0 0;padding:0}

.jrow{
  display:grid;grid-template-columns:auto minmax(40px,1fr) auto;
  align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:clamp(14px,2.4vh,30px) 0;
  border-top:1px solid rgba(232,179,60,.18);
}
.jrow:last-child{border-bottom:1px solid rgba(232,179,60,.18)}

/* 数 — 字の内側が窓になる */
.jrow__no{
  display:flex;align-items:baseline;
  font-family:var(--f-num);line-height:.82;letter-spacing:.005em;
  font-size:clamp(64px,10.5vw,164px);
}
.jrow__sign{font-style:normal;font-size:.5em;color:var(--kin);margin-right:.03em}
.jrow__u{font-style:normal;font-size:.3em;color:var(--ink-7);margin-left:.08em;letter-spacing:.06em}
.jrow__n{
  display:inline-block;font-weight:400;
  /* 写真は要素の style 属性で渡す。カスタムプロパティに url() を入れると
     「CSS ファイルの場所」を基準に解決され、assets/css/assets/… を探しに行く（実測）。 */
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* 写真が暗いと字が沈む。縁を一本入れて形を保つ。 */
  -webkit-text-stroke:1px rgba(232,179,60,.42);
}

/* 尺 — 導入前から導入後まで、手で引ける
   空いた帯をただの罫で埋めると何も語らない。ここを操作面にする。 */
.jrow__track{
  position:relative;display:block;height:44px;outline:none;
  pointer-events:none;                 /* 見せる指標であって、操作子ではない */
}
.jt__rail{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
  background:rgba(232,179,60,.16)}
.jt__fill{position:absolute;left:0;top:50%;height:1px;margin-top:-.5px;width:0;
  background:linear-gradient(90deg,rgba(232,179,60,.35),var(--kin));
  box-shadow:0 0 10px rgba(232,179,60,.35)}

/* 刻み — 行ごとに密度が違う（10・10・60） */
.jt__ticks{position:absolute;left:0;right:0;top:50%;height:0;display:block}
.jt__t{
  position:absolute;top:0;width:1px;height:7px;margin-top:-3.5px;
  background:rgba(232,179,60,.22);transform-origin:50% 50%;
  transition:height .28s var(--ease-wood),background .28s,opacity .28s;
}
.jt__t.is-on{height:15px;margin-top:-7.5px;background:var(--kin)}

.jt__from{
  position:absolute;left:0;top:calc(50% + 13px);
  font-family:var(--f-mincho);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-7);opacity:.6;white-space:nowrap;
}
/* つまみ */
.jt__knob{
  position:absolute;top:50%;left:0;translate:-50% -50%;
  width:15px;height:15px;border-radius:50%;
  background:var(--kin);box-shadow:0 0 0 5px rgba(232,179,60,.16),0 2px 10px rgba(0,0,0,.5);
}
.jt__knob em{
  position:absolute;left:50%;top:-26px;translate:-50% 0;
  font-family:var(--f-mincho);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-0);background:var(--kin);padding:3px 9px;white-space:nowrap;
  box-shadow:2px 2px 0 rgba(22,0,41,.5);
}
/* 減る側は、右端が左へ戻る。色の流れも逆にして、向きの違いを示す。 */
.jrow__track[data-dir="down"] .jt__fill{
  background:linear-gradient(90deg,var(--kin),rgba(232,179,60,.35))}

/* 見出し */
.jrow__side{text-align:right;max-width:22ch}
.jrow__side b{
  display:block;font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(15px,1.6vw,21px);letter-spacing:.14em;color:var(--washi);
}
.jrow__side em{
  display:block;margin-top:6px;font-style:normal;
  font-size:11.5px;letter-spacing:.04em;color:var(--ink-7);opacity:.72;
}
.jrow__delta{
  display:inline-block;margin-top:11px;
  font-family:var(--f-mincho);font-weight:700;font-size:11px;letter-spacing:.12em;
  color:var(--kin);border:1px solid rgba(232,179,60,.38);padding:4px 10px;
}

/* ふれると、字の中の写真が寄る */
.jrow:hover .jrow__n{-webkit-text-stroke-color:var(--kin)}
/* 引ける面であることを、触る前に示す */
.jt__hint{
  position:absolute;left:0;top:calc(50% - 30px);
  font-size:10px;letter-spacing:.1em;color:var(--ink-7);opacity:.55;white-space:nowrap;
}

/* 締めの一行 — 上の三行と同じ骨組み（左に言葉・中に罫・右に導線） */
.jend{
  display:grid;grid-template-columns:auto minmax(40px,1fr) auto;
  align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:clamp(20px,3.4vh,38px) 0 0;
}
.jend__say{
  max-width:54ch;font-size:14px;line-height:2.05;color:var(--ink-8);opacity:.86;
}
.jend__say b{display:block;margin-top:10px;font-weight:400;color:var(--washi);opacity:1}
.jend__rule{display:block;height:1px;background:rgba(232,179,60,.14);position:relative}
.jend__rule i{
  position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(232,179,60,.2),var(--kin));
}
.jend__act{text-align:right}
.jend__note{
  margin-top:12px;font-size:11px;line-height:1.8;color:var(--ink-7);opacity:.6;
}
@media (max-width:820px){
  .jend{grid-template-columns:1fr;gap:16px;padding-top:22px}
  .jend__rule{display:none}
  .jend__act{text-align:left}
  .jend__act .wbtn{width:100%;justify-content:center}
}

@media (max-width:820px){
  .jrow{grid-template-columns:auto minmax(0,1fr);gap:10px 16px;
    padding:clamp(16px,3vh,24px) 0}
  .jrow__track{grid-column:1 / -1;height:38px;margin-top:4px}
  .jrow__side{text-align:left;grid-column:2}
  .jrow__no{font-size:clamp(56px,17vw,104px)}
}


/* ============================================================
   お問い合わせ — 入口をひとつにする

   作り直す前の問題：
     ・縦書きの見出しが帯に食い込み、左に大きな空きが残っていた
     ・同じ白い札が二枚並び、どちらが本題か分からなかった
     ・項目が八つ。長い列を見た時点で書く気が失せる

   直した方針：
     書く面（白）を主、連絡先（墨地に金の罫）を従。面の質を変えて主従を示す。
     項目は五つ。電話とメールは押せるようにする。
   ============================================================ */
.toi-sec{position:relative}
.toi__top{max-width:60ch;margin-bottom:clamp(28px,4.5vh,52px)}
.toi__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,52px);align-items:start;
}

/* --- 書く面 --- */
.toi__form{
  background:var(--washi);color:var(--sumi);
  padding:clamp(22px,2.6vw,38px);
  border:1px solid rgba(232,179,60,.30);
  box-shadow:0 30px 70px -44px #000;
  gap:clamp(16px,2vh,22px);
}
.toi__formhead{
  margin:0;padding-bottom:14px;border-bottom:1px solid rgba(39,1,71,.12);
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);
}
.toi__formhead b{font-family:var(--f-mincho);font-weight:800;color:var(--ink-1);font-size:14px}
.toi__two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}

/* 触り心地：面を大きく、境界をはっきり、焦点を強く */
.toi__form .field label{font-size:12.5px;margin-bottom:7px;color:var(--ink-1)}
.toi__form .field input,
.toi__form .field select,
.toi__form .field textarea{
  width:100%;padding:14px 15px;font-size:15px;line-height:1.6;
  background:#fff;color:var(--ink-1);
  border:1.5px solid rgba(39,1,71,.22);border-radius:2px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.toi__form .field input::placeholder,
.toi__form .field textarea::placeholder{color:rgba(39,1,71,.34)}
.toi__form .field input:focus,
.toi__form .field select:focus,
.toi__form .field textarea:focus{
  outline:none;border-color:var(--ink-5);
  box-shadow:0 0 0 3px rgba(152,29,255,.18);
}
.toi__form .field textarea{min-height:132px}
/* 送信前に赤くしない。触れて離れて、なお空のときだけ知らせる。 */
.toi__form .field input:not(:placeholder-shown):invalid,
.toi__form .field textarea:not(:placeholder-shown):invalid{
  border-color:var(--shu);box-shadow:0 0 0 3px rgba(224,48,30,.14);
}
.toi__send{
  justify-content:center;width:100%;padding:17px 24px;font-size:15.5px;
}

/* --- 連絡先（従） ---
   書く面は長く、連絡先は短い。並べたままだと、書いている間ずっと
   右側が空きっぱなしになる。短いほうを貼り付けて、視界から外さない。
   （grid の align-items:start が前提。stretch だと高さが伸びて貼り付かない） */
.toi__side{
  display:grid;gap:clamp(14px,2vh,22px);
  position:sticky;
  top:clamp(100px,13vh,128px);      /* 浮くヘッダーの下 */
}
.toi__direct{
  padding:clamp(18px,2vw,26px);
  border:1px solid rgba(232,179,60,.30);
  background:linear-gradient(180deg,rgba(232,179,60,.08),transparent 70%);
}
.toi__k{
  margin:0 0 10px;font-family:var(--f-mincho);font-weight:800;
  font-size:11.5px;letter-spacing:.2em;color:var(--kin);
}
.toi__tel{
  display:block;font-family:var(--f-num);font-size:clamp(28px,3.2vw,42px);
  line-height:1;color:var(--washi);letter-spacing:.02em;
  transition:color .25s;
}
.toi__tel:hover{color:var(--kin)}
.toi__mail{
  display:inline-block;margin-top:12px;font-size:13.5px;color:var(--ink-8);
  border-bottom:1px solid rgba(232,179,60,.4);padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.toi__mail:hover{color:var(--kin);border-color:var(--kin)}
.toi__hours{margin-top:14px;font-size:11.5px;color:var(--ink-7);opacity:.75}

.toi__assure{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(232,179,60,.16)}
.toi__assure li{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:13px clamp(14px,1.6vw,20px);background:rgba(22,0,41,.55);
}
.toi__assure b{font-family:var(--f-mincho);font-weight:800;font-size:14px;color:var(--kin);
  white-space:nowrap}
.toi__assure span{font-size:12px;color:var(--ink-8);opacity:.8}
.toi__note{font-size:11px;line-height:1.9;color:var(--ink-7);opacity:.62}

@media (max-width:980px){
  .toi__grid{grid-template-columns:1fr}
  /* 一段組では貼り付ける相手が無い。順番だけ入れ替えて、電話番号を先に見せる。 */
  .toi__side{order:-1;position:static}
}
@media (max-width:560px){
  .toi__two{grid-template-columns:1fr}
}



/* ============================================================
   体制と契約形態

   前身は「海外案件対応」。四点のうち三点が選ばれる理由と重なり、
   残る一点は読み手が違っていた（日本語の面で「海外案件を受けます」は
   読み手自身のこと）。進め方が着手で終わったあとに残る問い
   ——「誰が入るのか／どう契約するのか」——へ差し替える。

   動く節点：
     括り … 一本の線が上から下へ引かれ、四つの役をひとまとめに囲う
     役   … 名が立ち、罫が伸び、担当が続く。点は各々の周期で息をする
     組み方… 番号・罫・中身。並べたまま比べる（隠さない）
   ============================================================ */
.ts{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,72px);align-items:start;
  margin-top:clamp(24px,4vh,44px);
}
/* 左の一組は、右の三つを読み比べている間ずっと効いている情報
   （どの組み方でも入る顔ぶれは同じ）。短いほうを貼り付けて視界に残す。
   align-self:start が要る。既定の stretch だと高さが伸びて貼り付かない。 */
@media (min-width:901px){
  .ts__unit{position:sticky;top:clamp(100px,13vh,128px);align-self:start}
}
.ts__k{
  margin:0 0 clamp(14px,2vh,22px);
  font-family:var(--f-mincho);font-weight:800;font-size:11.5px;letter-spacing:.24em;
  color:var(--ink-4);
}

/* --- 一組 --- */
.ts__brace{display:grid;grid-template-columns:26px minmax(0,1fr);gap:clamp(14px,1.8vw,24px)}
.ts__brace svg{width:26px;height:100%;display:block;overflow:visible}
.ts__bracePath{stroke:var(--ink-6);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.ts__roles{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2.4vh,26px)}
.ts__role{display:grid;grid-template-columns:auto auto minmax(20px,1fr);align-items:center;
  gap:10px;row-gap:4px}
.ts__dot{width:7px;height:7px;border-radius:50%;background:var(--ink-5);flex:none}
.ts__role b{font-family:var(--f-mincho);font-weight:800;font-size:clamp(15px,1.6vw,20px);
  letter-spacing:.06em;color:var(--ink-1);white-space:nowrap}
.ts__line{display:block;height:1px;background:rgba(39,1,71,.16);
  transform-origin:0 50%;transform:scaleX(0)}
.ts__do{grid-column:2 / -1;font-size:12.5px;line-height:1.85;color:var(--ink-2);opacity:.8}
.ts__sum{
  margin-top:clamp(16px,2.4vh,26px);padding-top:clamp(14px,2vh,20px);
  border-top:1px solid rgba(39,1,71,.12);
  font-size:13px;line-height:1.95;color:var(--ink-2);opacity:.84;
}
.ts__sum b{color:var(--ink-1);opacity:1}

/* --- 三つの組み方 --- */
.ts__list{list-style:none;margin:0;padding:0}
.ts__way{
  display:grid;grid-template-columns:auto clamp(28px,4vw,72px) minmax(0,1fr);
  align-items:start;gap:clamp(12px,1.8vw,26px);
  padding:clamp(16px,2.6vh,26px) clamp(10px,1.4vw,18px);
  margin-inline:calc(-1 * clamp(10px,1.4vw,18px));
  border-top:1px solid rgba(39,1,71,.12);outline:none;
  transition:background .35s var(--ease-wood),opacity .35s var(--ease-wood);
}
.ts__way:last-child{border-bottom:1px solid rgba(39,1,71,.12)}
.ts__no{font-family:var(--f-mincho);font-weight:800;font-size:clamp(15px,1.5vw,19px);
  color:var(--ink-6);padding-top:3px}
.ts__rule{display:block;height:1px;margin-top:13px;background:rgba(39,1,71,.10);position:relative}
.ts__rule i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ink-5),rgba(152,29,255,.18))}
.ts__body h3{font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(17px,1.8vw,24px);line-height:1.5;letter-spacing:.03em;color:var(--ink-1)}
.ts__one{margin-top:6px;font-size:13.5px;line-height:1.9;color:var(--ink-3)}
.ts__desc{margin-top:10px;font-size:13px;line-height:2.05;color:var(--ink-2);opacity:.8;max-width:56ch}
.ts__fit{margin-top:12px;font-size:12px;color:var(--ink-2);opacity:.9}
.ts__fit span{
  display:inline-block;margin-right:10px;
  font-family:var(--f-mincho);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  color:var(--shu);border:1px solid rgba(224,48,30,.34);padding:3px 8px;
}
/* 一つに寄ると、ほかは静かになる。比べる面なので隠しはしない。 */
.ts__list:hover .ts__way{opacity:.5}
.ts__list:hover .ts__way:hover,.ts__way:focus-visible{opacity:1;background:rgba(152,29,255,.045)}
.ts__way:focus-visible{box-shadow:inset 3px 0 0 var(--ink-5)}
.ts__way:hover .ts__no,.ts__way:focus-visible .ts__no{color:var(--ink-5)}

.ts__ask{margin-top:clamp(16px,2.4vh,24px);font-size:12.5px;color:var(--ink-3)}
.ts__ask a{color:var(--ink-5);border-bottom:1px solid currentColor;padding-bottom:2px;margin-left:8px}

@media (max-width:900px){
  .ts{grid-template-columns:1fr;gap:clamp(26px,4vh,44px)}
  .ts__way{grid-template-columns:auto minmax(0,1fr);gap:10px 14px}
  .ts__rule{display:none}
  .ts__body{grid-column:2}
}

/* ============================================================
   17. 実機デモ — 絵看板 (kanban)

   芝居小屋の絵看板を借りる。梁から二本の綱で板を吊り、
   板の前に緞帳を下ろしておく。読み進めると緞帳が巻き上がり、
   中の画面が出る。襞は11枚とも別々の速さで上がるので裾が波打つ。
   房は23個、それぞれ違う周期で揺れる。
   ============================================================ */
.kanban-sec{overflow:hidden}
.kanban{position:relative;margin-top:clamp(26px,4vh,48px)}

/* --- 梁 --- */
.kanban__frame{display:block;width:100%;height:clamp(34px,4vw,60px)}
.kf__beam{fill:#2A1608}
.kf__cap{fill:#3D2110}
.kf__peg{fill:var(--kin);stroke:#2A1608;stroke-width:1.5}

/* --- 吊り --- */
/* 16:9 を画面幅いっぱいに取ると縦が画面を越える。板は中央に寄せて抑える。 */
.kanban__hang{position:relative;padding-top:clamp(16px,2.4vw,30px);
  max-width:min(100%,940px);margin-inline:auto}
.kanban__rope{
  position:absolute;top:0;width:2px;height:clamp(16px,2.4vw,30px);
  background:linear-gradient(180deg,#6B4A22,#8A6430);
  transform-origin:50% 0;
}
.kanban__rope--l{left:15%}
.kanban__rope--r{right:15%}

.kanban__board{
  position:relative;border-radius:4px;overflow:hidden;
  border:2px solid #2A1608;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.75), inset 0 0 0 1px rgba(232,179,60,.16);
  background:#0C0116;
  transform-origin:50% 0;
}
.kanban__scr{position:relative;aspect-ratio:16/9;background:#0C0116;isolation:isolate}
/* 元の表紙絵は配信向けの色と文字で、この頁の墨とは合わない。
   紫の一色刷りに落として「素材」に戻し、意味は日本語の題に持たせる。
   指を乗せると色が戻り、中身が確認できる。 */
.kanban__scr img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.14) brightness(.86);
  transition:filter .5s var(--ease-wood,cubic-bezier(.16,1,.3,1))}
.kanban__scr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(152deg,#4B1188 0%,#2A0350 52%,#160029 100%);
  mix-blend-mode:color;opacity:.92;
  transition:opacity .5s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.kanban__board:hover .kanban__scr img{filter:grayscale(.12) contrast(1.04) brightness(1)}
.kanban__board:hover .kanban__scr::after{opacity:.16}
.kanban.is-live .kanban__scr::after{opacity:0}
.kanban__slot{position:absolute;inset:0;display:none}
.kanban__slot iframe{width:100%;height:100%;border:0;display:block}
.kanban.is-live .kanban__slot{display:block}
.kanban.is-live .kanban__play,
.kanban.is-live .kanban__cap{opacity:0;pointer-events:none}

/* --- 緞帳 ---
   SVG で組んだ版は GSAP が path に transform を書けず動かなかった。
   襞は HTML の要素にして、scaleY を直接掛ける。 */
.kanban__maku{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;z-index:2;overflow:hidden;
}
.maku__cloth{position:absolute;inset:0;display:flex}
.maku__fold{
  flex:1 1 0;min-width:0;height:calc(100% + 8px);
  transform-origin:50% 0;
  background:linear-gradient(180deg,#8E1C12 0%,#C22B18 55%,#7A150D 100%);
  /* 裾のふくらみ。隣どうしで深さを変えると、裾が波打って見える。 */
  border-bottom-left-radius:50% var(--dip);
  border-bottom-right-radius:50% var(--dip);
  box-shadow:inset -6px 0 12px -6px rgba(0,0,0,.55),
             inset  6px 0 10px -8px rgba(255,255,255,.16);
}
.maku__fold:nth-child(even){filter:brightness(.87)}     /* 襞の陰 */

.maku__tassels{position:absolute;left:0;right:0;top:calc(100% - 46px);
  display:flex;justify-content:space-between;padding:0 2.2%}
.maku__tas{
  position:relative;width:11px;height:11px;border-radius:50%;
  background:var(--kin);transform-origin:50% 0;
  box-shadow:0 1px 0 rgba(0,0,0,.3);
}
.maku__tas::after{
  content:"";position:absolute;left:50%;top:8px;translate:-50% 0;
  width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:20px solid var(--kin);opacity:.92;
}

/* --- 判子の再生ボタン --- */
.kanban__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(74px,7vw,102px);aspect-ratio:1;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;z-index:3;
  transition:opacity .3s;
}
.kp__seal{
  position:relative;display:grid;place-items:center;width:100%;height:100%;
  border-radius:50%;background:var(--shu);color:#fff;
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .4s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.kp__seal b{font-family:var(--f-mincho);font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1}
.kp__wave{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--shu);
  animation:kpWave 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.kp__wave--2{animation-delay:1.4s}
@keyframes kpWave{
  0%   {transform:scale(1);opacity:.55}
  70%  {transform:scale(1.75);opacity:0}
  100% {transform:scale(1.75);opacity:0}
}
.kanban__play:hover .kp__seal{transform:scale(1.09) rotate(-7deg)}
.kanban__play:active .kp__seal{transform:scale(.96) rotate(-2deg)}

/* --- 題 --- */
.kanban__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(46px,5vw,70px) clamp(18px,2.4vw,34px) clamp(16px,2vw,24px);
  background:linear-gradient(180deg,transparent,rgba(12,1,22,.86) 46%,rgba(12,1,22,.96));
  transition:opacity .3s;
}
.kanban__cap b{display:block;font-family:var(--f-mincho);font-weight:800;
  font-size:clamp(15px,1.5vw,22px);color:var(--washi);letter-spacing:.04em;line-height:1.5}
.kanban__cap p{margin:6px 0 0;font-size:clamp(11.5px,1vw,13.5px);
  color:rgba(251,247,242,.7);line-height:1.8;max-width:62ch}
.kanban__meta{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.12em;
  color:rgba(232,179,60,.82)}
.kanban__meta em{font-style:normal;font-family:var(--f-num);font-size:12.5px;letter-spacing:.06em}

/* --- 木札の列 --- */
.kanban__rail{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(8px,1vw,16px);
  margin-top:clamp(30px,4vw,54px);
  padding-top:14px;
  border-top:1px solid rgba(232,179,60,.2);
}
.fuda-v{
  position:relative;padding:0;border:0;background:none;cursor:pointer;
  display:block;text-align:left;padding-top:16px;
}
.fuda-v__cord{
  position:absolute;left:50%;top:0;width:1.5px;height:16px;
  background:linear-gradient(180deg,rgba(232,179,60,.7),rgba(232,179,60,.25));
  transform-origin:50% 0;
}
.fuda-v__body{
  display:block;border:1.5px solid rgba(232,179,60,.28);border-radius:3px;
  background:rgba(255,255,255,.035);overflow:hidden;
  transform-origin:50% -16px;
  transition:border-color .3s,background .3s;
}
.fuda-v__shot{display:block;aspect-ratio:16/9;overflow:hidden;background:#160029}
.fuda-v__shot{position:relative;isolation:isolate}
.fuda-v__shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.1) brightness(.8);transition:filter .4s}
.fuda-v__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(152deg,#4B1188,#160029);
  mix-blend-mode:color;opacity:.9;transition:opacity .4s;
}
.fuda-v__txt{display:block;padding:8px 9px 10px}
.fuda-v__txt b{display:block;font-family:var(--f-mincho);font-weight:700;
  font-size:11.5px;line-height:1.55;color:rgba(251,247,242,.9);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fuda-v__txt em{display:block;margin-top:4px;font-style:normal;
  font-family:var(--f-num);font-size:10.5px;letter-spacing:.08em;color:rgba(232,179,60,.7)}
.fuda-v:hover .fuda-v__body{border-color:var(--kin);background:rgba(232,179,60,.09)}
.fuda-v:hover .fuda-v__shot img{filter:grayscale(.1) brightness(1)}
.fuda-v:hover .fuda-v__shot::after{opacity:.14}
.fuda-v.is-cur .fuda-v__body{border-color:var(--kin);background:rgba(232,179,60,.13)}
.fuda-v.is-cur .fuda-v__shot img{filter:grayscale(.1) brightness(1)}
.fuda-v.is-cur .fuda-v__shot::after{opacity:.14}

.kanban__note{
  margin:clamp(16px,2vw,24px) 0 0;font-size:11px;letter-spacing:.04em;
  color:rgba(251,247,242,.5);
}
.kanban__note a{color:var(--kin);border-bottom:1px solid rgba(232,179,60,.4)}

@media (max-width:980px){
  .kanban__rail{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kanban__rope--l{left:12%} .kanban__rope--r{right:12%}
}
@media (max-width:620px){
  .kanban__rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kanban__cap p{display:none}
  .kanban__cap{padding-top:34px}
}
@media (prefers-reduced-motion:reduce){
  .kp__wave{animation:none}
}

/* ============================================================
   18. 現場 — 貼り込み帖 (genba)

   写真を格子に整列させると台帳になる。帖に「貼る」と記録になる。
   1枚ずつ傾き・影・角の留め方が違い、列は別々の速さで流れる。
   ============================================================ */
.genba-sec{overflow:hidden}
.genba{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,26px);
  margin-top:clamp(26px,4vh,50px);
  align-items:start;
}
.genba__col{display:grid;gap:clamp(14px,2vw,30px);will-change:auto}

.genba__p{
  position:relative;margin:0;
  rotate:var(--tilt);
  background:var(--washi);
  padding:7px 7px 26px;                 /* 台紙のふち。下だけ広いのは写真帖の作法 */
  border-radius:2px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08);
  transition:rotate .5s var(--ease-wood,cubic-bezier(.16,1,.3,1)),
             translate .5s var(--ease-wood,cubic-bezier(.16,1,.3,1)),
             box-shadow .5s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.genba__p img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.82) contrast(1.05);
  transition:filter .5s;
}
.genba__p figcaption{
  position:absolute;left:9px;bottom:6px;
  font-family:var(--f-num);font-size:11px;letter-spacing:.1em;color:rgba(39,1,71,.42);
}
/* 四隅の角。写真を台紙に留めている紙の三角。 */
.genba__cn{
  position:absolute;width:14px;height:14px;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,rgba(39,1,71,.34),rgba(39,1,71,.12));
}
.genba__cn--tl{left:2px;top:2px;clip-path:polygon(0 0,100% 0,0 100%)}
.genba__cn--tr{right:2px;top:2px;clip-path:polygon(0 0,100% 0,100% 100%)}
.genba__cn--bl{left:2px;bottom:20px;clip-path:polygon(0 0,0 100%,100% 100%)}
.genba__cn--br{right:2px;bottom:20px;clip-path:polygon(100% 0,100% 100%,0 100%)}

.genba__p:hover{
  rotate:0deg;translate:0 -6px;
  box-shadow:0 22px 40px -16px rgba(0,0,0,.8);
  z-index:3;
}
.genba__p:hover img{filter:saturate(1.02) contrast(1.02)}

@media (max-width:900px){
  .genba{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .genba{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .genba__p{padding:5px 5px 20px}
  .genba__cn{width:10px;height:10px}
  .genba__cn--bl,.genba__cn--br{bottom:16px}
  .genba__p figcaption{font-size:9.5px;left:7px;bottom:4px}
}

/* --- 体制の末尾：開発フロアの帯 --- */
.ts__floor{margin-top:clamp(34px,5vh,60px);padding-top:clamp(22px,3vh,34px);
  border-top:1px solid rgba(39,1,71,.14)}
.tsf__k{margin:0 0 14px;font-family:var(--f-mincho);font-weight:800;font-size:13px;
  letter-spacing:.14em;color:var(--ink-3)}
.tsf__strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,.9vw,14px)}
.tsf__p{margin:0;overflow:hidden;border-radius:3px;border:1px solid rgba(39,1,71,.14);
  /* 帯の端ほど低く。まっすぐ並べると社員名簿に見える。 */
  aspect-ratio:4/3;
  transform:translateY(calc(var(--i) * 0px));
}
.tsf__p:nth-child(2n){margin-top:clamp(8px,1.2vw,18px)}
.tsf__p img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.04);transition:filter .45s,scale .6s var(--ease-wood,cubic-bezier(.16,1,.3,1))}
.tsf__p:hover img{filter:saturate(1) contrast(1);scale:1.05}
.tsf__note{margin:14px 0 0;font-size:11.5px;color:var(--sumi-60,rgba(28,18,38,.62));letter-spacing:.03em}
@media (max-width:760px){
  .tsf__strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- エコシステム：札の頭に実物の画面 --- */
.card--shot{padding-top:0;overflow:hidden}
.card__shot{display:block;margin:0 0 clamp(14px,2vw,22px);overflow:hidden;
  border-bottom:1.5px solid rgba(39,1,71,.14)}
.card__shot img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;
  /* height="640" の属性が残ると縦が auto でなくなり aspect-ratio が効かない */
  filter:saturate(.88) contrast(1.04);
  transition:scale .7s var(--ease-wood,cubic-bezier(.16,1,.3,1)),filter .5s}
.card--shot:hover .card__shot img{scale:1.06;filter:saturate(1) contrast(1)}
/* card--hard は内側に余白を持っている。写真は縁まで出したいので、
   文字側だけに余白を戻す。 */
.card--shot > :not(.card__shot){padding-inline:clamp(18px,2vw,26px)}
.card--shot > :last-child{padding-bottom:clamp(18px,2vw,26px)}