/* ============================================================
   オーダーメイドシステム開発ページ専用 — 説明の往復（ラリー）

   このページで一番痛いところは「実装より、説明に時間が溶ける」。
   それを卓球のラリーにする：

     ・左に御社、右に開発会社。あいだを言葉が往復する
     ・往復するたびに数が増える。増えるほど、着手が遠のく
     ・途中で BA が真ん中に立つ。そこから先は一往復で通る

   ホームの機構は使わない。
   ============================================================ */

.rally{position:relative;margin-top:clamp(28px,4vh,44px)}
.ry__court{position:relative;height:clamp(300px,40vh,400px);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(38,4,72,.5),rgba(22,0,41,.92));
  border:2px solid var(--ink-2,#3D0A6B)}

.ry__side{position:absolute;top:0;bottom:0;width:clamp(96px,15vw,180px);display:grid;
  align-content:start;gap:6px;padding:18px 14px;color:var(--ink-8,#E6D3FB)}
.ry__side--l{left:0;border-right:1px dashed rgba(207,163,250,.3)}
.ry__side--r{right:0;text-align:right;border-left:1px dashed rgba(207,163,250,.3)}
.ry__side b{font-family:var(--f-mincho,serif);font-size:clamp(14px,1.7vw,17px);color:var(--washi,#FBF7F2)}
.ry__side span{font-size:11px;letter-spacing:.1em;opacity:.6;line-height:1.7}

/* 往復する言葉 */
.ry__ball{position:absolute;max-width:min(46%,300px);padding:10px 14px;border-radius:12px;
  font-size:12.5px;line-height:1.65;background:var(--washi,#FBF7F2);color:var(--sumi,#1C1226);
  border:2px solid var(--ink-1,#270147);box-shadow:3px 4px 0 rgba(22,0,41,.5);opacity:0}
.ry__ball--r{background:#EFE3FF}

/* 真ん中に立つ BA */
.ry__ba{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;
  display:grid;place-items:center;gap:6px;padding:14px 18px;border-radius:14px;
  background:var(--ink-5,#981DFF);color:#fff;border:2px solid var(--washi,#FBF7F2);
  box-shadow:0 0 0 6px rgba(151,29,255,.18);text-align:center}
.ry__ba b{font-family:var(--f-mincho,serif);font-size:15px;letter-spacing:.08em}
.ry__ba span{font-size:11px;opacity:.9;letter-spacing:.06em}

/* 数え */
.ry__count{display:flex;align-items:baseline;gap:14px;margin-top:20px;flex-wrap:wrap}
.ry__count b{font-family:var(--f-num,inherit);font-size:clamp(34px,5vw,54px);line-height:1;color:#FF6A4D}
.ry__count i{font-style:normal;font-size:12px;letter-spacing:.16em;color:#FF6A4D}
.ry__count span{font-size:13.5px;line-height:1.85;color:var(--ink-8,#E6D3FB);opacity:.9}
.ry__count.is-done b{color:#22C58B}
.ry__count.is-done i{color:#22C58B}

.ry__note{margin-top:14px;font-size:13.5px;line-height:1.95;color:var(--ink-8,#E6D3FB);opacity:.86}

@media (max-width:720px){ .ry__ball{max-width:60%;font-size:11.5px} }
@media (prefers-reduced-motion:reduce){ .ry__court{height:auto;min-height:180px} }

/* ============================================================
   帳場（ちょうば） — このページだけの世界

   売っているのは「御社の数え方に合わせた台帳」。
   ならば道具は帳場のもの：大福帳、罫、算盤。
   戸（制作ページ）も糸（オーダーメイドWeb）も持ち込まない。
   ============================================================ */

/* ---------- 序 — 開発フロアの上に、骨組みを引く ----------

   写真が画面を占める。実際に手が動いている場所を出すのが
   いちばん早い。その上に、帳面の桁が表の桁へ渡る図を線だけで引く。
   売っているのは「御社の数え方を、そのまま形にすること」なので、
   序で見せるべきは完成画面ではなく、構造そのものである。
   参考にした型：Systema（線だけの立体・字は小さく静か）と
   Data Relay（見出しの上に、実測値を刻んだ極小の mono）。 */
.chouba{
  position:relative;isolation:isolate;overflow:clip;
  min-height:min(100svh,940px);display:flex;align-items:center;
  padding:clamp(132px,17vh,180px) 0 clamp(40px,6vh,70px);
  background:#0B0716;
  --o:0;
}
.cb__photo{position:absolute;inset:0;z-index:-3}
.cb__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.12) brightness(1.04);
  scale:1.04;
}
/* 紫摺。色相だけ移し、明るさは写真のまま残す（multiply では顔が沈む） */
.cb__photo::after{
  content:"";position:absolute;inset:0;background:#3A1268;
  mix-blend-mode:color;opacity:.84;
}
.cb__veil{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    /* 字が乗る左だけ厚く。右は写真に息をさせる（前の版はここで写真を殺していた） */
    radial-gradient(105% 74% at 6% 52%, rgba(11,7,22,.92) 0%, rgba(11,7,22,.62) 46%, rgba(11,7,22,0) 76%),
    linear-gradient(92deg, rgba(11,7,22,.86) 0%, rgba(11,7,22,.66) 32%,
                    rgba(11,7,22,.26) 56%, rgba(11,7,22,.04) 76%, rgba(11,7,22,.26) 100%),
    linear-gradient(180deg, rgba(11,7,22,.86) 0%, rgba(11,7,22,0) 26%),
    linear-gradient(0deg,   rgba(11,7,22,.80) 0%, rgba(11,7,22,0) 22%);
}
.cb__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:3px 3px;
}

/* ---------- 骨組み ---------- */
.cb__schema{
  /* 見出しに被せない。骨組みは右の余白だけで完結させる */
  position:absolute;right:clamp(-30px,-1.5vw,0px);top:50%;translate:0 -50%;
  width:min(42vw,600px);height:auto;z-index:-1;pointer-events:none;
  color:rgba(232,179,60,.95);
}
/* 線は細い。下に板を敷くと写真が消えるので、線のほうに影を持たせる。
   板で背景を殺すか、線に影を付けるか。迷ったら線に影を付ける。 */
.cb__schema{filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(0,0,0,.6))}
.cbs__ln,.cbs__wire{
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  vector-effect:non-scaling-stroke;
}
.cb__schema.is-drawn .cbs__ln{animation:cbsDraw .9s cubic-bezier(.16,1,.3,1) var(--d,0s) forwards}
.cb__schema.is-drawn .cbs__wire{
  stroke:rgba(232,179,60,.9);stroke-width:1.2;
  animation:cbsDraw 1.1s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .5s) forwards;
}
@keyframes cbsDraw{to{stroke-dashoffset:0}}
.cbs__hd{stroke-width:1.4}
.cbs__dot{fill:rgba(232,179,60,.95);stroke:none;opacity:0}
.cb__schema.is-drawn .cbs__dot{animation:cbsPop .5s ease-out calc(1.2s + var(--i) * .12s) forwards}
@keyframes cbsPop{from{opacity:0;r:0}to{opacity:1}}
.cbs__jp{fill:rgba(255,255,255,.62);font-size:12px;font-family:var(--f-mincho,serif);stroke:none;letter-spacing:.14em}
.cbs__en{fill:rgba(232,179,60,.9);font-size:11px;font-family:var(--f-mono,ui-monospace,monospace);stroke:none;letter-spacing:.06em}
.cb__schema.is-instant .cbs__ln,.cb__schema.is-instant .cbs__wire{stroke-dashoffset:0;animation:none}
.cb__schema.is-instant .cbs__dot{opacity:1;animation:none}

/* ---------- 字 ---------- */
.cb__body{position:relative;width:min(100% - 40px,var(--wrap,1240px))}
/* パンくずは共通部品。暗い地の上では墨のままだと沈む */
.chouba .crumb,.chouba .crumb a{color:rgba(246,239,228,.62)}
.chouba .crumb b{color:rgba(246,239,228,.9)}
.chouba .crumb a{border-bottom-color:rgba(246,239,228,.3)}
/* 見出しの上に、確かめられる事実だけを極小の mono で置く */
.cb__pill{
  display:inline-flex;align-items:center;gap:9px;margin:clamp(16px,2.2vh,24px) 0 clamp(16px,2.2vh,22px);
  padding:6px 14px;border:1px solid rgba(232,179,60,.42);border-radius:999px;
  font-family:var(--f-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.05em;
  color:rgba(240,224,190,.92);white-space:nowrap;
}
.cb__pill i{width:6px;height:6px;border-radius:50%;background:#E8B33C;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){ .cb__pill i{animation:cbPulse 2.6s ease-in-out infinite} }
@keyframes cbPulse{50%{box-shadow:0 0 0 5px rgba(232,179,60,.10)}}
.cb__pill b{font-weight:400;opacity:.42;margin:0 2px}
.cb__h{
  margin:0;font-family:var(--f-mincho,serif);font-weight:900;
  font-size:clamp(29px,5.2vw,66px);line-height:1.24;letter-spacing:.01em;color:#F6EFE4;
}
.cb__h .ln{display:block;overflow:hidden}
.cb__h .ln > span{display:block}
.cb__h u{
  text-decoration:none;color:#E8B33C;
  background:linear-gradient(transparent 62%, rgba(232,179,60,.28) 62%, rgba(232,179,60,.28) 78%, transparent 78%);
}
.cb__lead{
  margin:clamp(18px,2.6vh,26px) 0 0;max-width:50ch;
  font-size:clamp(13.5px,1.5vw,16px);line-height:2.05;color:rgba(246,239,228,.76);
}
.cb__lead em{font-style:normal;color:#E8B33C;font-weight:700}
.cb__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,30px)}
/* 暗い地の上では、外枠だけのボタンが沈む */
.cb__act .wbtn--ghost{border-color:rgba(246,239,228,.5);color:#F6EFE4}
.cb__act .wbtn--ghost:hover{border-color:#E8B33C;color:#E8B33C}

/* 仕様の帯。短い事実を四つだけ。ここは飾らない */
.cb__spec{
  list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid rgba(232,179,60,.28);max-width:min(100%,980px);
}
.cb__spec li{
  padding:14px clamp(12px,1.4vw,20px) 4px;border-right:1px solid rgba(255,255,255,.12);
  font-size:11.5px;line-height:1.7;color:rgba(246,239,228,.62);min-width:0;
}
.cb__spec li:last-child{border-right:0}
.cb__spec b{
  display:block;margin-bottom:5px;font-family:var(--f-mono,ui-monospace,monospace);
  font-size:10px;letter-spacing:.12em;color:#E8B33C;font-weight:400;
}
.cb__down{
  position:absolute;right:clamp(14px,3vw,40px);bottom:clamp(12px,2vh,22px);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;
  color:rgba(246,239,228,.38);
}
@media (max-width:1000px){
  .cb__schema{width:76vw;right:-14vw;top:auto;bottom:2vh;translate:0 0;opacity:.5}
  .cb__veil{background:
    linear-gradient(180deg, rgba(11,7,22,.9) 0%, rgba(11,7,22,.82) 44%, rgba(11,7,22,.66) 72%, rgba(11,7,22,.9) 100%)}
}
@media (max-width:760px){
  .cb__spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb__spec li:nth-child(2n){border-right:0}
  .cb__spec li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .cb__pill{white-space:normal;font-size:9.5px}
}

/* ---------- 敷居 — 算盤の珠 ---------- */
.soroban{
  position:relative;--o:0;overflow:hidden;pointer-events:none;
  height:calc(clamp(96px,15vh,160px) + var(--seam,0px));
  background:linear-gradient(180deg,#2B1B0C,#1D1207);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.4);
}
.sb__rod{
  position:absolute;left:6%;right:6%;top:clamp(46px,7.2vh,80px);height:3px;
  background:linear-gradient(180deg,#C8A46A,#7A5A2E);border-radius:2px;
}
.sb__beads{position:absolute;left:6%;right:6%;top:clamp(30px,5.2vh,60px);height:36px}
.sb__beads i{
  position:absolute;top:0;width:30px;height:36px;
  --p:clamp(0, calc((var(--o) - var(--n) / 14) / .62), 1);
  /* 位置そのものを補間する。translateX の % は自分の幅が基準になり、
     珠が動かない（一度これで踏んだ） */
  left:calc((var(--from) + var(--p) * (var(--to) - var(--from))) * 1%);
  background:radial-gradient(circle at 38% 32%,#F0D9A8,#B5813C 62%,#6E4A1B);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.sb__cap{
  position:absolute;left:50%;top:clamp(10px,1.8vh,18px);translate:-50% 0;z-index:5;
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(240,217,168,.85);opacity:calc(var(--o) * .9);white-space:nowrap;
}

/* ---------- 帳場の写真帯 — 作っている人 ---------- */
.choubaBand{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);margin-top:clamp(24px,3.6vh,40px);
}
/* 帳面に罫を引くように、左から right へ紙が出る */
.cbB{
  position:relative;margin:0;min-width:0;overflow:hidden;background:var(--ink-1,#270147);
  aspect-ratio:4/3;clip-path:inset(0 var(--rvx,100%) 0 0);
}
.cbB img{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:100%;height:122%;object-fit:cover;display:block;
  transform:translate3d(0,var(--py,0px),0);
}
.cbB figcaption{
  transform:translateX(var(--cx,-110%));
  transition:transform .55s var(--ease-wood,cubic-bezier(.16,1,.3,1)) .18s;
}
.cbB figcaption{
  position:absolute;left:0;bottom:0;background:rgba(20,2,38,.74);color:var(--washi,#FBF7F2);
  font-size:10.5px;letter-spacing:.1em;padding:6px 10px;
}
@media (max-width:760px){ .choubaBand{grid-template-columns:minmax(0,1fr)} }

@media (max-width:900px){
  .cb__wash{
    background:linear-gradient(180deg,rgba(12,2,28,.56) 0%,rgba(12,2,28,.80) 22%,rgba(12,2,28,.90) 46%,rgba(12,2,28,.94) 100%);
  }
  .cb__tag{flex-direction:column}
  .cb__tag b,.cb__tag span{border-right:0;border-bottom:1px solid rgba(60,32,10,.26)}
}
@media (prefers-reduced-motion:reduce){ .cb__down::after{animation:none} }

/* ---------- 桁 — 算盤の珠が、表の枡になる ----------
   線と珠だけで組む。写真も画像も使わない代わり、
   一本ずつ引いた線で「構造を作る会社」に見せる。 */
.keta{
  position:relative;margin:0 0 clamp(28px,4vh,46px);--o:0;
  padding:clamp(14px,2vw,26px) 0 0;
}
.keta__svg{display:block;width:100%;height:auto;overflow:visible}
.kt__frame{fill:none;stroke:rgba(39,1,71,.22);stroke-width:1.2}
.kt__beam{stroke:rgba(39,1,71,.34);stroke-width:1.4}
.kt__rod{stroke:rgba(39,1,71,.20);stroke-width:1}
.kt__ruleH{stroke:rgba(39,1,71,.14);stroke-width:1}
.kt__ruleV{stroke:rgba(39,1,71,.14);stroke-width:1}
.kt__track{stroke:rgba(39,1,71,.10);stroke-width:1;stroke-dasharray:2 5}
.kt__jp{fill:var(--sumi-60,rgba(28,18,38,.6));font-size:13px;font-family:var(--f-mincho,serif);letter-spacing:.1em}
.kt__en{fill:var(--ink-1,#270147);font-size:12px;font-family:var(--f-mono,ui-monospace,monospace);letter-spacing:.06em;opacity:0}
.kt__gem{fill:var(--ink-1,#270147);stroke:rgba(255,255,255,.5);stroke-width:.8}
.kt__cell{fill:rgba(39,1,71,.13);opacity:0}
.keta__cap{
  margin:clamp(10px,1.6vh,16px) 0 0;font-size:12.5px;line-height:1.95;
  color:var(--sumi-60,rgba(28,18,38,.64));max-width:74ch;
}
.keta__cap b{display:block;margin-bottom:4px;font-family:var(--f-mincho,serif);font-size:15px;color:var(--sumi,#1C1226)}
@media (max-width:760px){
  .keta__svg{min-height:200px}
  .kt__jp,.kt__en{font-size:15px}
}
.kt__ghost{fill:none;stroke:rgba(39,1,71,.26);stroke-width:1;stroke-dasharray:2 3}
.kt__gem--fix{fill:rgba(39,1,71,.34);stroke:none}

/* ---------- 見積の幅 — 金額ではなく、金額を動かすもの ----------
   数字は一つも出さない。出せば相場を言ったことになる。
   出すのは「どちら寄りか」で幅が変わる、という事実だけ。 */
.mitsu{margin:clamp(22px,3.4vh,36px) 0 clamp(26px,4vh,40px);--o:0}
.mitsu__hint{
  margin:0 0 clamp(18px,2.6vh,26px);font-size:12.5px;line-height:1.95;
  color:rgba(246,239,228,.6);max-width:76ch;
}
.mitsu__hint b{color:#E8B33C;font-weight:700}
.mitsu__r{
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(14px,2vw,30px);align-items:center;
  padding:clamp(12px,1.8vh,18px) 0;border-top:1px solid rgba(255,255,255,.13);
}
.mitsu__r:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.mitsu__k b{display:block;font-family:var(--f-mincho,serif);font-size:clamp(15px,1.8vw,19px);color:#F6EFE4}
.mitsu__k span{display:block;margin-top:3px;font-size:11px;line-height:1.6;color:rgba(246,239,228,.5)}
.mitsu__rail{
  position:relative;height:26px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 28px) 0 50%/100% 9px no-repeat;
}
.mitsu__span{
  position:absolute;left:0;top:50%;translate:0 -50%;height:9px;border-radius:1px;
  /* 幅は進捗から。狭いところから、その項目ぶんだけ開く */
  /* --max は項目ごと。連携がいちばん開く — 本文で「いちばん金額を動かす」と
     書いている以上、絵のほうも同じことを言わなければ意味が無い */
  width:calc((.14 + clamp(0, (var(--o) - var(--n) * .12) * 2.1, 1) * (var(--max,1) - .14)) * 100%);
  background:linear-gradient(90deg, rgba(232,179,60,.85), rgba(232,179,60,.22));
  box-shadow:0 0 14px rgba(232,179,60,.22);
}
.mitsu__lo,.mitsu__hi{
  position:absolute;top:calc(50% + 12px);font-style:normal;font-size:10px;letter-spacing:.06em;
  color:rgba(246,239,228,.44);white-space:nowrap;
}
.mitsu__lo{left:0}
.mitsu__hi{right:0;color:rgba(232,179,60,.7)}
@media (max-width:700px){
  .mitsu__r{grid-template-columns:minmax(0,1fr);gap:10px}
  .mitsu__rail{height:30px}
}