/* ============================================================
   ホームページ制作ページ専用 — 検尺（けんじゃく）と朱印

   このページだけの仕掛け。ホームの機構は一切使わない。
   「合格ライン」という言葉をそのまま物にする：
     ・朱の横線が上から下へ降りてくる（＝合格ライン）
     ・線が項目を通り過ぎた瞬間、その項目に朱印「合」が捺される
     ・印は硬い判子ではなく、墨が紙に食い込む所作にする
       （一瞬つぶれて、にじみ足が遅れて締まる）
     ・左端の尺は目盛り。線の位置に合わせて数字が動く
   ============================================================ */

.kenjaku{position:relative;margin-top:clamp(30px,4vh,48px);padding-left:clamp(56px,7vw,96px)}

/* --- 左端の尺（ものさし） --- */
.kj__rule{position:absolute;left:0;top:0;bottom:0;width:clamp(40px,5vw,64px);pointer-events:none}
.kj__spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(151,29,255,0) 0%,var(--ink-4,#8129DB) 8%,var(--ink-4,#8129DB) 92%,rgba(151,29,255,0) 100%)}
.kj__tick{position:absolute;left:50%;height:1px;background:var(--ink-4,#8129DB);opacity:.42;transform:translateX(-50%)}
.kj__tick--lg{width:26px;opacity:.7}
.kj__tick--sm{width:13px}
.kj__num{position:absolute;left:50%;transform:translate(-50%,-50%);font-family:var(--f-num,inherit);
  font-size:11px;letter-spacing:.06em;color:var(--ink-6,#B266F5);opacity:.75;background:var(--ink-0,#160029);padding:2px 4px}

/* --- 降りてくる合格ライン --- */
.kj__line{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:4;mix-blend-mode:multiply}
.kj__line i{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#D6321F 0%,#FF6A4D 60%,rgba(214,50,31,0) 100%);
  box-shadow:0 0 14px rgba(214,50,31,.55)}
.kj__line b{position:absolute;left:8px;top:-11px;font-size:10.5px;letter-spacing:.22em;
  color:#FFD9CF;background:#D6321F;padding:3px 9px;border-radius:2px;white-space:nowrap;font-weight:700}
.kj__line em{position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;
  background:#D6321F;box-shadow:0 0 0 4px rgba(214,50,31,.22)}

/* --- 項目の札 --- */
.kj__item{position:relative;display:grid;grid-template-columns:1fr auto;gap:clamp(14px,2vw,28px);
  align-items:start;padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px);margin-bottom:14px;
  background:var(--washi,#FBF7F2);border:2px solid var(--ink-1,#270147);border-radius:14px;
  box-shadow:5px 6px 0 rgba(22,0,41,.28);color:var(--sumi,#1C1226)}
.kj__k{display:block;font-size:12px;letter-spacing:.16em;color:var(--ink-4,#8129DB);margin-bottom:8px}
.kj__t{margin:0 0 8px;font-family:var(--f-mincho,serif);font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink-1,#270147)}
.kj__t b{color:#D6321F;font-weight:800}
.kj__how{margin:0;font-size:13.5px;line-height:1.85;opacity:.82}
.kj__how span{display:block;font-size:11.5px;letter-spacing:.14em;opacity:.6;margin-bottom:3px}

/* --- 朱印 --- */
.kj__seal{position:relative;width:clamp(58px,6.4vw,78px);height:clamp(58px,6.4vw,78px);flex:none;
  display:grid;place-items:center;opacity:0}
.kj__seal svg{position:absolute;inset:0;width:100%;height:100%}
.kj__seal .kj__ring{fill:none;stroke:#D6321F;stroke-width:5.5;opacity:.92}
.kj__seal .kj__blot{fill:#D6321F;opacity:.14}
.kj__seal u{position:relative;font-family:var(--f-mincho,serif);font-weight:800;text-decoration:none;
  font-size:clamp(24px,2.8vw,32px);color:#D6321F;line-height:1;transform:translateY(1px)}
.kj__item.is-stamped{box-shadow:5px 6px 0 rgba(214,50,31,.30)}

/* --- 締めの検収印 --- */
.kj__end{position:relative;margin-top:26px;display:flex;align-items:center;gap:16px;
  color:var(--ink-8,#E6D3FB);font-size:13.5px;line-height:1.9}
.kj__end .kj__seal{width:84px;height:84px}
.kj__end .kj__seal u{font-size:19px;letter-spacing:.05em;line-height:1.15;text-align:center}

@media (max-width:720px){
  .kenjaku{padding-left:44px}
  .kj__item{grid-template-columns:1fr;gap:12px}
  .kj__seal{justify-self:end}
}
@media (prefers-reduced-motion:reduce){
  .kj__seal{opacity:1}
  .kj__line{display:none}
}

/* ============================================================
   ここから下は、この節のためだけの組み。ホームの並び（見出し＋三枚のカード）
   をやめる。読み手が「使える」面にする。
   ============================================================ */

/* --- 審査票：左に票、右に判定が貼り付く --- */
.shinsa{display:grid;grid-template-columns:1fr clamp(260px,26vw,340px);
  gap:clamp(24px,3vw,52px);align-items:start}
.shinsa__list{list-style:none;margin:0;padding:0;counter-reset:sh}
.shinsa__row{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.8vw,22px);
  align-items:start;padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px);
  border-bottom:1px dashed rgba(39,1,71,.22);transition:background .3s}
.shinsa__row:first-child{border-top:1px dashed rgba(39,1,71,.22)}
.shinsa__row.is-on{background:rgba(151,29,255,.055)}
.shinsa__box{appearance:none;-webkit-appearance:none;flex:none;cursor:pointer;
  width:clamp(38px,4vw,46px);height:clamp(38px,4vw,46px);border-radius:9px;
  border:2px solid var(--ink-1,#270147);background:var(--washi,#FBF7F2);
  display:grid;place-items:center;box-shadow:3px 3px 0 rgba(39,1,71,.28);
  transition:transform .18s,box-shadow .18s,background .25s}
.shinsa__box:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(39,1,71,.34)}
.shinsa__box:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(39,1,71,.3)}
.shinsa__box i{width:60%;height:60%;display:block;background:var(--ink-5,#981DFF);
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 70%);
  transform:scale(0);transform-origin:50% 50%;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.shinsa__box[aria-pressed="true"]{background:#F3E9FF;border-color:var(--ink-4,#8129DB)}
.shinsa__box[aria-pressed="true"] i{transform:scale(1)}
.shinsa__row b{display:block;font-family:var(--f-mincho,serif);font-size:clamp(16px,1.9vw,20px);
  line-height:1.55;color:var(--ink-1,#270147);margin-bottom:6px}
.shinsa__row b em{font-style:normal;font-size:11.5px;letter-spacing:.16em;color:var(--ink-4,#8129DB);
  display:block;margin-bottom:5px}
.shinsa__row p{margin:0;font-size:13.5px;line-height:1.9;opacity:.82}

/* 判定 */
.shinsa__verdict{position:sticky;top:clamp(96px,12vh,132px);
  padding:clamp(20px,2.4vw,28px);border-radius:14px;
  background:var(--ink-0,#160029);color:var(--washi,#FBF7F2);
  border:2px solid var(--ink-2,#3D0A6B);box-shadow:6px 8px 0 rgba(22,0,41,.35)}
.shinsa__gauge{height:8px;border-radius:99px;background:rgba(207,163,250,.22);overflow:hidden}
.shinsa__gauge i{display:block;height:100%;width:calc(var(--p,0) * 1%);
  background:linear-gradient(90deg,var(--ink-5,#981DFF),#FF6A4D);transition:width .45s cubic-bezier(.16,1,.3,1)}
.shinsa__n{margin:14px 0 4px;font-family:var(--f-num,inherit);font-size:34px;line-height:1}
.shinsa__n span{font-size:15px;opacity:.6}
.shinsa__say{margin:0;font-size:13px;line-height:1.85;opacity:.88;min-height:3.7em}
.shinsa__stamp{margin-top:14px;display:grid;place-items:center;width:76px;height:76px;
  position:relative;opacity:0}
.shinsa__stamp svg{position:absolute;inset:0;width:100%;height:100%}
.shinsa__stamp u{position:relative;text-decoration:none;font-family:var(--f-mincho,serif);
  font-weight:800;color:#D6321F;font-size:15px;line-height:1.15;text-align:center}

/* --- 鍵束：横に並べて、押すと開く --- */
.kagi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(26px,3.4vh,40px);align-items:start}
.kagi__k{position:relative;
  text-align:left;cursor:pointer;appearance:none;border:2px solid var(--ink-2,#3D0A6B);
  background:linear-gradient(180deg,rgba(246,238,254,.10),rgba(246,238,254,.03));
  color:var(--washi,#FBF7F2);border-radius:12px;padding:clamp(16px,1.9vw,22px);
  transition:transform .28s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.kagi__k:hover{transform:translateY(-4px);border-color:var(--ink-5,#981DFF)}
.kagi__k[aria-expanded="true"]{background:var(--washi,#FBF7F2);color:var(--sumi,#1C1226);
  border-color:var(--washi,#FBF7F2);transform:translateY(-6px);box-shadow:5px 7px 0 rgba(22,0,41,.4)}
.kagi__no{display:block;font-size:11px;letter-spacing:.2em;opacity:.62;margin-bottom:10px}
.kagi__t{display:block;font-family:var(--f-mincho,serif);font-size:clamp(14px,1.6vw,17px);line-height:1.5}
.kagi__d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1);
  margin-top:0}
.kagi__k[aria-expanded="true"] .kagi__d{grid-template-rows:1fr;margin-top:10px}
.kagi__d>span{overflow:hidden;font-size:12.5px;line-height:1.85;opacity:.86}
/* 鍵の歯 */
.kagi__blade{position:absolute;right:14px;top:14px;width:26px;height:10px;border-radius:2px;
  background:var(--ink-6,#B266F5);opacity:.5;
  clip-path:polygon(0 0,72% 0,72% 45%,84% 45%,84% 0,100% 0,100% 100%,0 100%)}
.kagi__k[aria-expanded="true"] .kagi__blade{background:#D6321F;opacity:1}

/* --- 料金のつまみ --- */
.tsumami{display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vh,38px)}
.tm__row{display:grid;grid-template-columns:clamp(96px,11vw,140px) 1fr;gap:clamp(14px,2vw,24px);align-items:center}
.tm__k{font-size:12.5px;letter-spacing:.12em;color:var(--ink-6,#B266F5)}
.tm__bar{position:relative;display:flex;gap:6px}
.tm__step{flex:1;appearance:none;cursor:pointer;height:clamp(40px,4.6vw,52px);border-radius:10px;
  border:2px solid var(--ink-2,#3D0A6B);background:rgba(246,238,254,.05);
  color:var(--ink-8,#E6D3FB);font-size:12.5px;letter-spacing:.06em;
  transition:background .25s,color .25s,transform .18s,border-color .25s}
.tm__step:hover{transform:translateY(-2px);border-color:var(--ink-5,#981DFF)}
.tm__step[aria-pressed="true"]{background:var(--ink-5,#981DFF);color:#fff;border-color:var(--washi,#FBF7F2)}
.tm__out{margin-top:clamp(18px,2.4vh,28px);padding:clamp(18px,2.2vw,26px);border-radius:14px;
  background:var(--washi,#FBF7F2);color:var(--sumi,#1C1226);border:2px solid var(--ink-1,#270147);
  box-shadow:5px 7px 0 rgba(22,0,41,.34)}
.tm__weight{display:flex;height:14px;border-radius:99px;overflow:hidden;border:1px solid rgba(39,1,71,.25)}
.tm__weight i{display:block;transition:flex-grow .5s cubic-bezier(.16,1,.3,1)}
.tm__weight i:nth-child(1){background:var(--ink-5,#981DFF)}
.tm__weight i:nth-child(2){background:#FF6A4D}
.tm__weight i:nth-child(3){background:var(--ink-3,#5C1A9C)}
.tm__legend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0;font-size:11.5px;opacity:.75}
.tm__legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.tm__legend span:nth-child(1)::before{background:var(--ink-5,#981DFF)}
.tm__legend span:nth-child(2)::before{background:#FF6A4D}
.tm__legend span:nth-child(3)::before{background:var(--ink-3,#5C1A9C)}
.tm__say{margin:14px 0 0;font-size:13.5px;line-height:1.9}

@media (max-width:860px){
  .kagi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shinsa{grid-template-columns:1fr}
  .shinsa__verdict{position:static}
  .tm__row{grid-template-columns:1fr;gap:8px}
}

@media (max-width:560px){ .kagi{grid-template-columns:1fr} }

/* ============================================================
   見積書（みつもりしょ）— 「含まれるもの」を、帳面の行として引く

   ホームの屏風をやめる。このページは見積の読み方を教える面なので、
   範囲そのものを見積書の体裁で出したほうが、話が一本につながる。
   行は上から順に引かれ、右端に「含む／別途」が入る。
   ============================================================ */
.mitsu{margin-top:clamp(26px,3.4vh,42px);background:var(--washi,#FBF7F2);
  border:2px solid var(--ink-1,#270147);border-radius:14px;overflow:hidden;
  box-shadow:6px 8px 0 rgba(22,0,41,.30);color:var(--sumi,#1C1226)}
.mitsu__head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,28px);background:var(--ink-1,#270147);color:var(--washi,#FBF7F2)}
.mitsu__head b{font-family:var(--f-mincho,serif);font-size:clamp(15px,1.8vw,19px);letter-spacing:.06em}
.mitsu__head span{font-size:11.5px;letter-spacing:.16em;opacity:.72}
.mitsu__row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,1.8vw,22px);
  align-items:center;padding:clamp(14px,1.7vw,19px) clamp(18px,2.2vw,28px);
  position:relative;opacity:0}
.mitsu__row+.mitsu__row::before{content:"";position:absolute;left:clamp(18px,2.2vw,28px);
  right:clamp(18px,2.2vw,28px);top:0;height:1px;background:rgba(39,1,71,.16);
  transform:scaleX(0);transform-origin:0 50%}
.mitsu__no{font-family:var(--f-num,inherit);font-size:12px;opacity:.5;min-width:22px}
.mitsu__t b{display:block;font-family:var(--f-mincho,serif);font-size:clamp(15px,1.7vw,17.5px);line-height:1.5}
.mitsu__t span{display:block;font-size:12.5px;line-height:1.8;opacity:.76;margin-top:3px}
.mitsu__m{font-size:11.5px;letter-spacing:.12em;padding:5px 11px;border-radius:99px;white-space:nowrap;
  border:1.5px solid currentColor}
.mitsu__m--in{color:var(--ink-4,#8129DB);background:rgba(151,29,255,.08)}
.mitsu__m--ex{color:#B4562F;background:rgba(214,50,31,.07)}
.mitsu__foot{padding:clamp(14px,1.8vw,20px) clamp(18px,2.2vw,28px);
  border-top:2px solid var(--ink-1,#270147);font-size:12.5px;line-height:1.85;opacity:.84;
  background:rgba(151,29,255,.05)}

/* ============================================================
   工程帯（こうていおび）— 4〜6週間を、週の目盛りの上に置く

   ホームの縦の「墨の道」は使わない。ここは期間の話なので、
   週を横に引いて、帯が伸びるほうが正しい。
   ============================================================ */
.obi{margin-top:clamp(26px,3.4vh,42px)}
.obi__scale{display:grid;grid-template-columns:clamp(104px,12vw,150px) 1fr;gap:clamp(12px,1.6vw,20px);
  align-items:end;margin-bottom:10px}
.obi__weeks{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid rgba(207,163,250,.35)}
.obi__weeks span{font-size:11px;letter-spacing:.1em;color:var(--ink-7,#CFA3FA);opacity:.8;
  padding:0 0 7px 8px;border-left:1px solid rgba(207,163,250,.25)}
.obi__row{display:grid;grid-template-columns:clamp(104px,12vw,150px) 1fr;gap:clamp(12px,1.6vw,20px);
  align-items:center;padding:7px 0}
.obi__k{font-size:12.5px;line-height:1.6;color:var(--ink-8,#E6D3FB)}
.obi__k em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.12em;opacity:.55;margin-top:2px}
.obi__track{position:relative;height:clamp(38px,4.4vw,46px);border-radius:8px;
  background:repeating-linear-gradient(90deg,rgba(207,163,250,.10) 0 calc(100%/6 - 1px),
    rgba(207,163,250,.25) calc(100%/6 - 1px) calc(100%/6))}
.obi__bar{position:absolute;top:6px;bottom:6px;border-radius:6px;
  left:calc(var(--s) / 6 * 100%);width:calc(var(--w) / 6 * 100%);
  background:linear-gradient(90deg,var(--ink-4,#8129DB),var(--ink-5,#981DFF));
  border:1.5px solid rgba(251,247,242,.55);display:flex;align-items:center;padding:0 12px;
  font-size:11.5px;color:#fff;white-space:nowrap;overflow:hidden;transform-origin:0 50%;transform:scaleX(0)}
.obi__row--qa .obi__bar{background:linear-gradient(90deg,#D6321F,#FF6A4D)}
.obi__hand{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.obi__hand span{font-size:11.5px;letter-spacing:.06em;padding:6px 12px;border-radius:99px;
  border:1px solid rgba(207,163,250,.4);color:var(--ink-8,#E6D3FB);opacity:.9}

/* ============================================================
   問答帳 — FAQ。ホームの筆線つき開閉はやめ、帳面の行にする。
   ============================================================ */
.mondocho{border-top:1px solid rgba(39,1,71,.2)}
.mc__i{border-bottom:1px solid rgba(39,1,71,.2)}
.mc__q{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:clamp(16px,2vw,22px) 4px;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:var(--ink-1,#270147)}
.mc__no{font-family:var(--f-num,inherit);font-size:12px;opacity:.45}
.mc__t{font-family:var(--f-mincho,serif);font-size:clamp(15px,1.8vw,18px);line-height:1.6}
.mc__mk{width:26px;height:26px;flex:none;position:relative}
.mc__mk::before,.mc__mk::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink-4,#8129DB);
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.mc__mk::before{width:16px;height:2px}
.mc__mk::after{width:2px;height:16px}
.mc__q[aria-expanded="true"] .mc__mk::after{transform:translate(-50%,-50%) scaleY(0)}
.mc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
.mc__q[aria-expanded="true"]+.mc__a{grid-template-rows:1fr}
.mc__a>div{overflow:hidden}
.mc__a p{margin:0 0 clamp(16px,2vw,22px);padding-left:38px;font-size:13.5px;line-height:1.95;opacity:.84;
  max-width:70ch}

/* --- 審査票：質問文を持ち帰る／MONAの答えを並べる --- */
.shinsa__act{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:10px}
.shinsa__ask{appearance:none;cursor:pointer;font:inherit;font-size:11.5px;letter-spacing:.06em;
  padding:7px 13px;border-radius:99px;border:1.5px solid var(--ink-4,#8129DB);
  background:rgba(151,29,255,.07);color:var(--ink-3,#5C1A9C);transition:background .2s,transform .15s}
.shinsa__ask:hover{background:rgba(151,29,255,.16);transform:translateY(-1px)}
.shinsa__ask.is-copied{background:var(--ink-5,#981DFF);color:#fff;border-color:var(--ink-5,#981DFF)}
.shinsa__ask--self{border-style:dashed;cursor:default;opacity:.7;background:none}
.shinsa__mona{font-size:12px;line-height:1.8;opacity:.8;flex:1 1 260px}
.shinsa__mona i{font-style:normal;display:inline-block;font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-4,#8129DB);border:1px solid currentColor;border-radius:99px;padding:1px 8px;margin-right:8px}
.shinsa__cap{margin:0 0 10px;font-size:11px;letter-spacing:.2em;opacity:.6}
.shinsa__todo{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.shinsa__todo li{font-size:12px;line-height:1.7;opacity:.86;display:flex;gap:9px;align-items:baseline}
.shinsa__todo b{font-family:var(--f-mincho,serif);color:#FF6A4D;font-size:13px}

/* 5/5 のときだけ出す戻り道。押し売りにしないので、既定は隠す。 */
.shinsa__back{margin:14px 0 0;font-size:12px;line-height:1.85;opacity:0;height:0;overflow:hidden;
  transition:opacity .4s,height .4s}
.shinsa__back.is-on{opacity:.82;height:auto}
.shinsa__back a{color:#FFD9CF}
.shinsa__mona a{color:var(--ink-3,#5C1A9C);text-underline-offset:3px}

/* ============================================================
   見出し（banner）— 行灯（あんどん）で、見積を照らす

   前の版は白い札を並べただけで、光も奥行きも無かった。
   この面の主張は「値段では比べられない」。だったら読み手に
   実際に「見ようとして、見えない」をやってもらうのが早い。

     ・暗い机の上に、五社の見積が伏せてある
     ・読み込むと灯りが左から右へ一度だけ流れる（紙の目が起きる）
     ・そのあと灯りはポインタについてくる
     ・どこを照らしても、合計欄だけは黒いまま
   紫摺の世界の道具で、紫摺の主張を触らせる。
   ============================================================ */
.hero-mi{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,58px);align-items:center;min-height:clamp(430px,64vh,640px)}
.hm__copy{position:relative;z-index:3}
.hm__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.24em;
  color:var(--ink-7,#CFA3FA);margin-bottom:clamp(16px,2.4vh,26px)}
.hm__eyebrow i{width:26px;height:1px;background:currentColor;display:block}
.hm__h{margin:0;font-family:var(--f-mincho,serif);font-weight:800;letter-spacing:.02em;
  font-size:clamp(30px,5.6vw,68px);line-height:1.24;color:var(--washi,#FBF7F2)}
.hm__h .ln{display:block;overflow:hidden}
.hm__h .ln>span{display:block;transform:translateY(105%)}
.hm__h em{font-style:normal;color:var(--kin,#E8B33C)}
.hm__h u{text-decoration:none;position:relative;white-space:nowrap}
.hm__h u::after{content:"";position:absolute;left:0;right:0;bottom:.12em;height:.09em;
  background:#D6321F;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.hm__h u.is-drawn::after{transform:scaleX(1)}
.hm__lead{margin:clamp(18px,2.6vh,28px) 0 0;font-size:14.5px;line-height:2.05;
  color:var(--ink-8,#E6D3FB);opacity:0;max-width:44ch}
.hm__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vh,34px);opacity:0}

/* ---- 机（暗がり） ---- */
.hm__desk{position:relative;height:clamp(320px,50vh,470px);border-radius:18px;overflow:hidden;
  --lx:50%; --ly:46%;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(92,26,156,.22), transparent 60%),
    linear-gradient(180deg,#150127 0%,#0C0118 100%);
  border:1px solid rgba(207,163,250,.16);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(207,163,250,.10)}
.hm__papers{position:absolute;inset:0;perspective:1200px;transform-style:preserve-3d}

/* ---- 見積の紙 ---- */
.hm__slip{position:absolute;left:50%;top:52%;width:min(64%,290px);translate:-50% -50%;
  transform-origin:50% 60%;padding:16px 18px 17px;border-radius:5px;opacity:0;
  color:#2B1B3A;
  background:
    linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,238,225,.86)),
    repeating-linear-gradient(0deg,rgba(43,27,58,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(43,27,58,.04) 0 1px,transparent 1px 3px);
  box-shadow:0 22px 34px -20px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.5) inset;
  border:1px solid rgba(43,27,58,.22)}
.hm__slip b{display:block;font-family:var(--f-mincho,serif);font-size:12.5px;letter-spacing:.06em;
  margin-bottom:11px;color:#3A2350}
.hm__rule{display:block;height:1px;background:rgba(43,27,58,.15);margin:7px 0}
.hm__rule--s{width:58%} .hm__rule--m{width:86%} .hm__rule--l{width:71%}
.hm__amt{display:flex;align-items:baseline;gap:7px;margin-top:14px;position:relative;
  padding-top:11px;border-top:1.5px solid rgba(43,27,58,.28)}
.hm__amt i{font-style:normal;font-size:11px;color:#5C1A9C;opacity:.85}
.hm__try{font-family:var(--f-num,inherit);font-size:12.5px;letter-spacing:.04em;color:#3A2350;
  opacity:0;position:absolute;left:36px;white-space:nowrap}
/* 合計だけは、どれだけ照らしても黒いまま */
.hm__amt s{text-decoration:none;display:inline-block;height:14px;flex:1;border-radius:2px;
  background:linear-gradient(90deg,#1B0B2E,#2B1240);
  box-shadow:0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(0,0,0,.35)}
/* 朱の印。紙が本物に見えるかどうかは、この一点で決まる */
.hm__seal-s{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(214,50,31,.8);display:grid;place-items:center;transform:rotate(-9deg);
  font-family:var(--f-mincho,serif);font-size:11px;color:rgba(214,50,31,.85);
  background:rgba(214,50,31,.06)}

/* ---- 灯り：紙の照り返し ---- */
.hm__glow{position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--lx) var(--ly),
    rgba(255,238,198,.95) 0%, rgba(255,214,140,.5) 16%, rgba(255,200,120,.12) 34%, transparent 52%)}
/* ---- 灯りの外は暗がり ---- */
.hm__dark{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(circle at var(--lx) var(--ly),
    rgba(9,1,20,0) 12%, rgba(9,1,20,.55) 34%, rgba(9,1,20,.9) 62%, rgba(9,1,20,.96) 100%)}
/* 灯心のにじみ */
.hm__wick{position:absolute;left:var(--lx);top:var(--ly);translate:-50% -50%;z-index:5;
  width:130px;height:130px;border-radius:50%;pointer-events:none;opacity:.55;
  background:radial-gradient(circle,rgba(255,236,190,.5),transparent 62%);filter:blur(6px)}

.hm__cut{position:absolute;left:-4%;right:-4%;top:52%;height:2px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(214,50,31,0),#D6321F 12%,#FF6A4D 70%,rgba(214,50,31,0));
  box-shadow:0 0 16px rgba(214,50,31,.6);z-index:6}
.hm__seal{position:absolute;left:50%;top:50%;translate:-50% -50%;width:112px;height:112px;
  display:grid;place-items:center;opacity:0;z-index:7;pointer-events:none}
.hm__seal svg{position:absolute;inset:0;width:100%;height:100%}
.hm__seal u{position:relative;text-decoration:none;font-family:var(--f-mincho,serif);font-weight:800;
  color:#FF5137;font-size:20px;line-height:1.15;text-align:center;text-shadow:0 0 12px rgba(214,50,31,.6)}
.hm__note{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:11px;letter-spacing:.14em;
  color:rgba(255,236,190,.72);opacity:0;z-index:8}

@media (max-width:900px){
  .hero-mi{grid-template-columns:1fr;gap:clamp(26px,5vh,40px)}
  .hm__desk{height:clamp(260px,38vh,340px);order:2}
  .hm__copy{order:1}
  .hm__slip{width:min(74%,260px)}
}
@media (prefers-reduced-motion:reduce){
  .hm__h .ln>span{transform:none}
  .hm__lead,.hm__act,.hm__slip,.hm__note{opacity:1}
  .hm__cut{transform:scaleX(1)}
  .hm__dark{background:radial-gradient(circle at 50% 46%,rgba(9,1,20,.1),rgba(9,1,20,.85))}
}

/* ============================================================
   ここから下は、この節のためだけの組み。ホームの並び（見出し＋三枚のカード）
   をやめる。読み手が「使える」面にする。
   ============================================================ */

/* --- 審査票：左に票、右に判定が貼り付く --- */
.shinsa{display:grid;grid-template-columns:1fr clamp(260px,26vw,340px);
  gap:clamp(24px,3vw,52px);align-items:start}
.shinsa__list{list-style:none;margin:0;padding:0;counter-reset:sh}
.shinsa__row{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.8vw,22px);
  align-items:start;padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px);
  border-bottom:1px dashed rgba(39,1,71,.22);transition:background .3s}
.shinsa__row:first-child{border-top:1px dashed rgba(39,1,71,.22)}
.shinsa__row.is-on{background:rgba(151,29,255,.055)}
.shinsa__box{appearance:none;-webkit-appearance:none;flex:none;cursor:pointer;
  width:clamp(38px,4vw,46px);height:clamp(38px,4vw,46px);border-radius:9px;
  border:2px solid var(--ink-1,#270147);background:var(--washi,#FBF7F2);
  display:grid;place-items:center;box-shadow:3px 3px 0 rgba(39,1,71,.28);
  transition:transform .18s,box-shadow .18s,background .25s}
.shinsa__box:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(39,1,71,.34)}
.shinsa__box:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(39,1,71,.3)}
.shinsa__box i{width:60%;height:60%;display:block;background:var(--ink-5,#981DFF);
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 70%);
  transform:scale(0);transform-origin:50% 50%;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.shinsa__box[aria-pressed="true"]{background:#F3E9FF;border-color:var(--ink-4,#8129DB)}
.shinsa__box[aria-pressed="true"] i{transform:scale(1)}
.shinsa__row b{display:block;font-family:var(--f-mincho,serif);font-size:clamp(16px,1.9vw,20px);
  line-height:1.55;color:var(--ink-1,#270147);margin-bottom:6px}
.shinsa__row b em{font-style:normal;font-size:11.5px;letter-spacing:.16em;color:var(--ink-4,#8129DB);
  display:block;margin-bottom:5px}
.shinsa__row p{margin:0;font-size:13.5px;line-height:1.9;opacity:.82}

/* 判定 */
.shinsa__verdict{position:sticky;top:clamp(96px,12vh,132px);
  padding:clamp(20px,2.4vw,28px);border-radius:14px;
  background:var(--ink-0,#160029);color:var(--washi,#FBF7F2);
  border:2px solid var(--ink-2,#3D0A6B);box-shadow:6px 8px 0 rgba(22,0,41,.35)}
.shinsa__gauge{height:8px;border-radius:99px;background:rgba(207,163,250,.22);overflow:hidden}
.shinsa__gauge i{display:block;height:100%;width:calc(var(--p,0) * 1%);
  background:linear-gradient(90deg,var(--ink-5,#981DFF),#FF6A4D);transition:width .45s cubic-bezier(.16,1,.3,1)}
.shinsa__n{margin:14px 0 4px;font-family:var(--f-num,inherit);font-size:34px;line-height:1}
.shinsa__n span{font-size:15px;opacity:.6}
.shinsa__say{margin:0;font-size:13px;line-height:1.85;opacity:.88;min-height:3.7em}
.shinsa__stamp{margin-top:14px;display:grid;place-items:center;width:76px;height:76px;
  position:relative;opacity:0}
.shinsa__stamp svg{position:absolute;inset:0;width:100%;height:100%}
.shinsa__stamp u{position:relative;text-decoration:none;font-family:var(--f-mincho,serif);
  font-weight:800;color:#D6321F;font-size:15px;line-height:1.15;text-align:center}

/* --- 鍵束：横に並べて、押すと開く --- */
.kagi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(26px,3.4vh,40px);align-items:start}
.kagi__k{position:relative;
  text-align:left;cursor:pointer;appearance:none;border:2px solid var(--ink-2,#3D0A6B);
  background:linear-gradient(180deg,rgba(246,238,254,.10),rgba(246,238,254,.03));
  color:var(--washi,#FBF7F2);border-radius:12px;padding:clamp(16px,1.9vw,22px);
  transition:transform .28s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.kagi__k:hover{transform:translateY(-4px);border-color:var(--ink-5,#981DFF)}
.kagi__k[aria-expanded="true"]{background:var(--washi,#FBF7F2);color:var(--sumi,#1C1226);
  border-color:var(--washi,#FBF7F2);transform:translateY(-6px);box-shadow:5px 7px 0 rgba(22,0,41,.4)}
.kagi__no{display:block;font-size:11px;letter-spacing:.2em;opacity:.62;margin-bottom:10px}
.kagi__t{display:block;font-family:var(--f-mincho,serif);font-size:clamp(14px,1.6vw,17px);line-height:1.5}
.kagi__d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1);
  margin-top:0}
.kagi__k[aria-expanded="true"] .kagi__d{grid-template-rows:1fr;margin-top:10px}
.kagi__d>span{overflow:hidden;font-size:12.5px;line-height:1.85;opacity:.86}
/* 鍵の歯 */
.kagi__blade{position:absolute;right:14px;top:14px;width:26px;height:10px;border-radius:2px;
  background:var(--ink-6,#B266F5);opacity:.5;
  clip-path:polygon(0 0,72% 0,72% 45%,84% 45%,84% 0,100% 0,100% 100%,0 100%)}
.kagi__k[aria-expanded="true"] .kagi__blade{background:#D6321F;opacity:1}

/* --- 料金のつまみ --- */
.tsumami{display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vh,38px)}
.tm__row{display:grid;grid-template-columns:clamp(96px,11vw,140px) 1fr;gap:clamp(14px,2vw,24px);align-items:center}
.tm__k{font-size:12.5px;letter-spacing:.12em;color:var(--ink-6,#B266F5)}
.tm__bar{position:relative;display:flex;gap:6px}
.tm__step{flex:1;appearance:none;cursor:pointer;height:clamp(40px,4.6vw,52px);border-radius:10px;
  border:2px solid var(--ink-2,#3D0A6B);background:rgba(246,238,254,.05);
  color:var(--ink-8,#E6D3FB);font-size:12.5px;letter-spacing:.06em;
  transition:background .25s,color .25s,transform .18s,border-color .25s}
.tm__step:hover{transform:translateY(-2px);border-color:var(--ink-5,#981DFF)}
.tm__step[aria-pressed="true"]{background:var(--ink-5,#981DFF);color:#fff;border-color:var(--washi,#FBF7F2)}
.tm__out{margin-top:clamp(18px,2.4vh,28px);padding:clamp(18px,2.2vw,26px);border-radius:14px;
  background:var(--washi,#FBF7F2);color:var(--sumi,#1C1226);border:2px solid var(--ink-1,#270147);
  box-shadow:5px 7px 0 rgba(22,0,41,.34)}
.tm__weight{display:flex;height:14px;border-radius:99px;overflow:hidden;border:1px solid rgba(39,1,71,.25)}
.tm__weight i{display:block;transition:flex-grow .5s cubic-bezier(.16,1,.3,1)}
.tm__weight i:nth-child(1){background:var(--ink-5,#981DFF)}
.tm__weight i:nth-child(2){background:#FF6A4D}
.tm__weight i:nth-child(3){background:var(--ink-3,#5C1A9C)}
.tm__legend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0;font-size:11.5px;opacity:.75}
.tm__legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.tm__legend span:nth-child(1)::before{background:var(--ink-5,#981DFF)}
.tm__legend span:nth-child(2)::before{background:#FF6A4D}
.tm__legend span:nth-child(3)::before{background:var(--ink-3,#5C1A9C)}
.tm__say{margin:14px 0 0;font-size:13.5px;line-height:1.9}

@media (max-width:860px){
  .kagi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shinsa{grid-template-columns:1fr}
  .shinsa__verdict{position:static}
  .tm__row{grid-template-columns:1fr;gap:8px}
}

@media (max-width:560px){ .kagi{grid-template-columns:1fr} }

/* ============================================================
   見積書（みつもりしょ）— 「含まれるもの」を、帳面の行として引く

   ホームの屏風をやめる。このページは見積の読み方を教える面なので、
   範囲そのものを見積書の体裁で出したほうが、話が一本につながる。
   行は上から順に引かれ、右端に「含む／別途」が入る。
   ============================================================ */
.mitsu{margin-top:clamp(26px,3.4vh,42px);background:var(--washi,#FBF7F2);
  border:2px solid var(--ink-1,#270147);border-radius:14px;overflow:hidden;
  box-shadow:6px 8px 0 rgba(22,0,41,.30);color:var(--sumi,#1C1226)}
.mitsu__head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,28px);background:var(--ink-1,#270147);color:var(--washi,#FBF7F2)}
.mitsu__head b{font-family:var(--f-mincho,serif);font-size:clamp(15px,1.8vw,19px);letter-spacing:.06em}
.mitsu__head span{font-size:11.5px;letter-spacing:.16em;opacity:.72}
.mitsu__row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,1.8vw,22px);
  align-items:center;padding:clamp(14px,1.7vw,19px) clamp(18px,2.2vw,28px);
  position:relative;opacity:0}
.mitsu__row+.mitsu__row::before{content:"";position:absolute;left:clamp(18px,2.2vw,28px);
  right:clamp(18px,2.2vw,28px);top:0;height:1px;background:rgba(39,1,71,.16);
  transform:scaleX(0);transform-origin:0 50%}
.mitsu__no{font-family:var(--f-num,inherit);font-size:12px;opacity:.5;min-width:22px}
.mitsu__t b{display:block;font-family:var(--f-mincho,serif);font-size:clamp(15px,1.7vw,17.5px);line-height:1.5}
.mitsu__t span{display:block;font-size:12.5px;line-height:1.8;opacity:.76;margin-top:3px}
.mitsu__m{font-size:11.5px;letter-spacing:.12em;padding:5px 11px;border-radius:99px;white-space:nowrap;
  border:1.5px solid currentColor}
.mitsu__m--in{color:var(--ink-4,#8129DB);background:rgba(151,29,255,.08)}
.mitsu__m--ex{color:#B4562F;background:rgba(214,50,31,.07)}
.mitsu__foot{padding:clamp(14px,1.8vw,20px) clamp(18px,2.2vw,28px);
  border-top:2px solid var(--ink-1,#270147);font-size:12.5px;line-height:1.85;opacity:.84;
  background:rgba(151,29,255,.05)}

/* ============================================================
   工程帯（こうていおび）— 4〜6週間を、週の目盛りの上に置く

   ホームの縦の「墨の道」は使わない。ここは期間の話なので、
   週を横に引いて、帯が伸びるほうが正しい。
   ============================================================ */
.obi{margin-top:clamp(26px,3.4vh,42px)}
.obi__scale{display:grid;grid-template-columns:clamp(104px,12vw,150px) 1fr;gap:clamp(12px,1.6vw,20px);
  align-items:end;margin-bottom:10px}
.obi__weeks{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid rgba(207,163,250,.35)}
.obi__weeks span{font-size:11px;letter-spacing:.1em;color:var(--ink-7,#CFA3FA);opacity:.8;
  padding:0 0 7px 8px;border-left:1px solid rgba(207,163,250,.25)}
.obi__row{display:grid;grid-template-columns:clamp(104px,12vw,150px) 1fr;gap:clamp(12px,1.6vw,20px);
  align-items:center;padding:7px 0}
.obi__k{font-size:12.5px;line-height:1.6;color:var(--ink-8,#E6D3FB)}
.obi__k em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.12em;opacity:.55;margin-top:2px}
.obi__track{position:relative;height:clamp(38px,4.4vw,46px);border-radius:8px;
  background:repeating-linear-gradient(90deg,rgba(207,163,250,.10) 0 calc(100%/6 - 1px),
    rgba(207,163,250,.25) calc(100%/6 - 1px) calc(100%/6))}
.obi__bar{position:absolute;top:6px;bottom:6px;border-radius:6px;
  left:calc(var(--s) / 6 * 100%);width:calc(var(--w) / 6 * 100%);
  background:linear-gradient(90deg,var(--ink-4,#8129DB),var(--ink-5,#981DFF));
  border:1.5px solid rgba(251,247,242,.55);display:flex;align-items:center;padding:0 12px;
  font-size:11.5px;color:#fff;white-space:nowrap;overflow:hidden;transform-origin:0 50%;transform:scaleX(0)}
.obi__row--qa .obi__bar{background:linear-gradient(90deg,#D6321F,#FF6A4D)}
.obi__hand{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.obi__hand span{font-size:11.5px;letter-spacing:.06em;padding:6px 12px;border-radius:99px;
  border:1px solid rgba(207,163,250,.4);color:var(--ink-8,#E6D3FB);opacity:.9}

/* ============================================================
   問答帳 — FAQ。ホームの筆線つき開閉はやめ、帳面の行にする。
   ============================================================ */
.mondocho{border-top:1px solid rgba(39,1,71,.2)}
.mc__i{border-bottom:1px solid rgba(39,1,71,.2)}
.mc__q{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:clamp(16px,2vw,22px) 4px;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:var(--ink-1,#270147)}
.mc__no{font-family:var(--f-num,inherit);font-size:12px;opacity:.45}
.mc__t{font-family:var(--f-mincho,serif);font-size:clamp(15px,1.8vw,18px);line-height:1.6}
.mc__mk{width:26px;height:26px;flex:none;position:relative}
.mc__mk::before,.mc__mk::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink-4,#8129DB);
  transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.mc__mk::before{width:16px;height:2px}
.mc__mk::after{width:2px;height:16px}
.mc__q[aria-expanded="true"] .mc__mk::after{transform:translate(-50%,-50%) scaleY(0)}
.mc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
.mc__q[aria-expanded="true"]+.mc__a{grid-template-rows:1fr}
.mc__a>div{overflow:hidden}
.mc__a p{margin:0 0 clamp(16px,2vw,22px);padding-left:38px;font-size:13.5px;line-height:1.95;opacity:.84;
  max-width:70ch}

/* --- 審査票：質問文を持ち帰る／MONAの答えを並べる --- */
.shinsa__act{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:10px}
.shinsa__ask{appearance:none;cursor:pointer;font:inherit;font-size:11.5px;letter-spacing:.06em;
  padding:7px 13px;border-radius:99px;border:1.5px solid var(--ink-4,#8129DB);
  background:rgba(151,29,255,.07);color:var(--ink-3,#5C1A9C);transition:background .2s,transform .15s}
.shinsa__ask:hover{background:rgba(151,29,255,.16);transform:translateY(-1px)}
.shinsa__ask.is-copied{background:var(--ink-5,#981DFF);color:#fff;border-color:var(--ink-5,#981DFF)}
.shinsa__ask--self{border-style:dashed;cursor:default;opacity:.7;background:none}
.shinsa__mona{font-size:12px;line-height:1.8;opacity:.8;flex:1 1 260px}
.shinsa__mona i{font-style:normal;display:inline-block;font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-4,#8129DB);border:1px solid currentColor;border-radius:99px;padding:1px 8px;margin-right:8px}
.shinsa__cap{margin:0 0 10px;font-size:11px;letter-spacing:.2em;opacity:.6}
.shinsa__todo{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.shinsa__todo li{font-size:12px;line-height:1.7;opacity:.86;display:flex;gap:9px;align-items:baseline}
.shinsa__todo b{font-family:var(--f-mincho,serif);color:#FF6A4D;font-size:13px}

/* 5/5 のときだけ出す戻り道。押し売りにしないので、既定は隠す。 */
.shinsa__back{margin:14px 0 0;font-size:12px;line-height:1.85;opacity:0;height:0;overflow:hidden;
  transition:opacity .4s,height .4s}
.shinsa__back.is-on{opacity:.82;height:auto}
.shinsa__back a{color:#FFD9CF}
.shinsa__mona a{color:var(--ink-3,#5C1A9C);text-underline-offset:3px}

/* ============================================================
   見出し（banner）— 見積の束

   この面の主張は「値段以外に比べる物差しが無い」。
   だから最初に見せるのは、読めない見積の束にする。
     ・和紙の伝票が数枚、重なって浮いている
     ・金額の桁は塗りつぶしてある（読めない＝比べられない）
     ・朱の線が一度だけ横に走り、束を裁つ
     ・見出しは面が開いて現れる（motion.dev の遮蔽から拝借した所作）
     ・ポインタに合わせて奥行きぶんだけ動く
   ============================================================ */
.hero-mi{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,64px);align-items:center;min-height:clamp(420px,62vh,620px)}
.hm__copy{position:relative;z-index:3}
.hm__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.24em;
  color:var(--ink-7,#CFA3FA);margin-bottom:clamp(16px,2.4vh,26px)}
.hm__eyebrow i{width:26px;height:1px;background:currentColor;display:block}
.hm__h{margin:0;font-family:var(--f-mincho,serif);font-weight:800;letter-spacing:.02em;
  font-size:clamp(30px,5.6vw,68px);line-height:1.24;color:var(--washi,#FBF7F2)}
.hm__h .ln{display:block;overflow:hidden}
.hm__h .ln>span{display:block;transform:translateY(105%)}
.hm__h em{font-style:normal;color:var(--kin,#E8B33C)}
.hm__h u{text-decoration:none;position:relative;white-space:nowrap}
.hm__h u::after{content:"";position:absolute;left:0;right:0;bottom:.12em;height:.09em;
  background:#D6321F;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.hm__h u.is-drawn::after{transform:scaleX(1)}
.hm__lead{margin:clamp(18px,2.6vh,28px) 0 0;font-size:14.5px;line-height:2.05;
  color:var(--ink-8,#E6D3FB);opacity:0;max-width:44ch}
.hm__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vh,34px);opacity:0}

/* --- 束 --- */
.hm__stack{position:relative;height:clamp(280px,46vh,430px);perspective:1100px}
.hm__slip{position:absolute;left:50%;top:50%;width:min(78%,320px);
  translate:-50% -50%;transform-origin:50% 60%;
  background:var(--washi,#FBF7F2);border:1.5px solid rgba(39,1,71,.5);border-radius:6px;
  padding:16px 18px 18px;box-shadow:0 18px 40px -22px rgba(0,0,0,.9);opacity:0}
.hm__slip b{display:block;font-family:var(--f-mincho,serif);font-size:12.5px;color:var(--ink-1,#270147);
  letter-spacing:.06em;margin-bottom:12px}
.hm__rule{display:block;height:1px;background:rgba(39,1,71,.16);margin:7px 0}
.hm__rule--s{width:62%} .hm__rule--m{width:84%} .hm__rule--l{width:73%}
.hm__amt{display:flex;align-items:baseline;gap:6px;margin-top:14px;
  padding-top:11px;border-top:1.5px solid rgba(39,1,71,.3)}
.hm__amt i{font-style:normal;font-size:11px;color:var(--ink-3,#5C1A9C);opacity:.8}
.hm__amt s{text-decoration:none;display:inline-block;height:13px;flex:1;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--ink-2,#3D0A6B) 0 13px,transparent 13px 17px);opacity:.75}
/* 裁つ線 */
.hm__cut{position:absolute;left:-6%;right:-6%;top:52%;height:2px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(214,50,31,0),#D6321F 12%,#FF6A4D 70%,rgba(214,50,31,0));
  box-shadow:0 0 16px rgba(214,50,31,.6);z-index:4}
.hm__note{position:absolute;left:50%;bottom:-2px;translate:-50% 0;font-size:11px;letter-spacing:.14em;
  color:var(--ink-7,#CFA3FA);opacity:0;white-space:nowrap}

@media (max-width:900px){
  .hero-mi{grid-template-columns:1fr;gap:clamp(28px,5vh,44px)}
  .hm__stack{height:clamp(240px,34vh,320px);order:2}
  .hm__copy{order:1}
}
@media (prefers-reduced-motion:reduce){
  .hm__h .ln>span{transform:none}
  .hm__lead,.hm__act,.hm__slip,.hm__note{opacity:1}
  .hm__cut{transform:scaleX(1)}
}

/* --- 束：数字が出ようとして、出ない --- */
.hm__try{font-family:var(--f-num,inherit);font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-2,#3D0A6B);opacity:0;position:absolute;left:34px;white-space:nowrap}
.hm__amt{position:relative}
.hm__seal{position:absolute;left:50%;top:50%;translate:-50% -50%;width:104px;height:104px;
  display:grid;place-items:center;opacity:0;z-index:6;pointer-events:none}
.hm__seal svg{position:absolute;inset:0;width:100%;height:100%}
.hm__seal u{position:relative;text-decoration:none;font-family:var(--f-mincho,serif);font-weight:800;
  color:#D6321F;font-size:19px;line-height:1.15;text-align:center}

/* ============================================================
   見積書（改）— 行に、その仕事の現物を並べる

   文字だけの表は、書いてあることが本当かどうか分からない。
   行を選ぶと右側にその工程の写真（と一本は映像）が出る。
   写真は自社の現場のもの。ここは実物で担保する面にする。
   ============================================================ */
.mitsu2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(20px,3vw,44px);align-items:start;margin-top:clamp(26px,3.4vh,42px)}
.mitsu2__rows{list-style:none;margin:0;padding:0;background:var(--washi,#FBF7F2);
  border:2px solid var(--ink-1,#270147);border-radius:14px;overflow:hidden;
  box-shadow:6px 8px 0 rgba(22,0,41,.30);color:var(--sumi,#1C1226)}
.mitsu2__head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:clamp(15px,1.9vw,20px) clamp(16px,2vw,24px);background:var(--ink-1,#270147);color:var(--washi,#FBF7F2)}
.mitsu2__head b{font-family:var(--f-mincho,serif);font-size:clamp(14px,1.7vw,17px);letter-spacing:.06em}
.mitsu2__head span{font-size:10.5px;letter-spacing:.16em;opacity:.72}
.m2row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(10px,1.5vw,18px);align-items:center;
  width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  padding:clamp(13px,1.6vw,17px) clamp(16px,2vw,24px);position:relative;
  border-top:1px solid rgba(39,1,71,.14);transition:background .25s}
.m2row:first-of-type{border-top:0}
.m2row:hover{background:rgba(151,29,255,.05)}
.m2row[aria-selected="true"]{background:rgba(151,29,255,.10)}
.m2row[aria-selected="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink-5,#981DFF)}
.m2row__no{font-family:var(--f-num,inherit);font-size:11.5px;opacity:.45;min-width:20px}
.m2row__t b{display:block;font-family:var(--f-mincho,serif);font-size:clamp(14px,1.6vw,16.5px);line-height:1.5}
.m2row__t span{display:block;font-size:12px;line-height:1.75;opacity:.72;margin-top:2px}
.m2row__m{font-size:11px;letter-spacing:.1em;padding:4px 10px;border-radius:99px;white-space:nowrap;border:1.5px solid currentColor}
.m2row__m--in{color:var(--ink-4,#8129DB);background:rgba(151,29,255,.08)}
.m2row__m--ex{color:#B4562F;background:rgba(214,50,31,.07)}
.mitsu2__foot{padding:clamp(13px,1.7vw,18px) clamp(16px,2vw,24px);border-top:2px solid var(--ink-1,#270147);
  font-size:12.5px;line-height:1.85;opacity:.84;background:rgba(151,29,255,.05)}

/* 右：現物 */
.mitsu2__view{position:sticky;top:clamp(96px,12vh,132px)}
.m2view{position:relative;border-radius:14px;overflow:hidden;border:2px solid var(--ink-2,#3D0A6B);
  background:#0E0620;aspect-ratio:4/3;box-shadow:0 24px 60px -34px rgba(0,0,0,.95)}
.m2view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform 6s linear}
.m2view img.is-on{opacity:1;transform:scale(1.05)}
.m2view iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.m2play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;width:74px;height:74px;
  border-radius:50%;border:2px solid var(--washi,#FBF7F2);background:rgba(22,0,41,.55);cursor:pointer;
  display:none;place-items:center;color:var(--washi,#FBF7F2);font-family:var(--f-mincho,serif);font-size:19px;
  backdrop-filter:blur(3px);transition:transform .25s,background .25s}
.m2play.is-on{display:grid}
.m2play:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(214,50,31,.75)}
.m2cap{margin:12px 2px 0;font-size:12.5px;line-height:1.85;color:var(--ink-8,#E6D3FB);opacity:.86;min-height:3.6em}
.m2cap b{display:block;font-family:var(--f-mincho,serif);font-size:14px;color:var(--washi,#FBF7F2);margin-bottom:4px}

@media (max-width:900px){
  .mitsu2{grid-template-columns:1fr}
  .mitsu2__view{position:static;order:-1}
}

/* ============================================================
   引き渡し — 鍵が、こちらから御社へ渡る

   カードを六枚並べるのをやめる。引き渡しの本質は「移る」こと。
   左に弊社、右に御社。スクロールに連れて鍵が一本ずつ渡り、
   渡り終えると左の輪は空になる。そのとき右では、実際に
   お渡ししたサイトの画面がはっきりしてくる。
   最後に残る一行は「こちらには、何も残りません。」
   ============================================================ */
.watashi{position:relative;margin-top:clamp(26px,3.4vh,44px);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(18px,3vw,46px);
  align-items:stretch}

/* 左：弊社の輪 */
/* 左は「鍵の輪」と「渡し終えたあとの一言」で持たせる。
   鍵が渡り切ったあと左が空白のまま残ると、面の半分が抜けて見える。 */
.wt__col{display:flex;flex-direction:column;gap:clamp(14px,2vh,22px)}
.wt__side{position:relative;padding:clamp(16px,2vw,22px);border-radius:14px;
  border:1.5px dashed rgba(207,163,250,.42);min-height:clamp(250px,33vh,330px)}
.wt__after{margin:0;font-size:12.5px;line-height:1.95;color:var(--ink-8,#E6D3FB);opacity:.84;
  padding:clamp(14px,1.8vw,20px);border-radius:12px;background:rgba(151,29,255,.07);
  border:1px solid rgba(207,163,250,.22)}
.wt__after b{color:var(--kin,#E8B33C);font-weight:700}
.wt__after a{color:var(--ink-7,#CFA3FA)}
.wt__k{font-size:11px;letter-spacing:.2em;color:var(--ink-7,#CFA3FA);opacity:.85}
.wt__ring{position:relative;margin-top:14px;height:clamp(238px,31vh,292px);overflow:visible}
.wt__hook{position:absolute;left:50%;top:-4px;translate:-50% 0;width:52px;height:52px;border-radius:50%;
  border:3px solid var(--ink-6,#B266F5);opacity:.85}
/* 輪の口金。ここに鍵が掛かっている、と分かる形にする。 */
.wt__hook i{position:absolute;left:50%;bottom:-7px;translate:-50% 0;width:14px;height:12px;border-radius:3px;
  background:var(--ink-6,#B266F5)}
.wt__hookk{position:absolute;left:50%;top:52px;translate:-50% 0;font-size:10px;letter-spacing:.2em;
  color:var(--ink-7,#CFA3FA);opacity:.7}
/* 鍵を吊るしている紐。渡るほど短くなる。 */
.wt__cord{position:absolute;left:50%;top:44px;translate:-50% 0;width:2px;
  background:linear-gradient(180deg,var(--ink-6,#B266F5),rgba(178,102,245,.15));border-radius:2px}
.wt__empty{position:absolute;left:50%;top:46%;translate:-50% -50%;text-align:center;opacity:0;
  font-family:var(--f-mincho,serif);font-size:clamp(15px,1.9vw,19px);line-height:1.7;color:var(--washi,#FBF7F2)}
.wt__empty span{display:block;margin-top:8px;font-family:var(--f-jp,inherit);font-size:12px;opacity:.7;letter-spacing:.04em}

/* 鍵 */
.wt__key{position:absolute;left:50%;top:58px;translate:-50% 0;width:min(88%,250px);
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;
  padding:10px 13px;border-radius:10px;background:var(--washi,#FBF7F2);color:var(--sumi,#1C1226);
  border:1.5px solid var(--ink-1,#270147);box-shadow:3px 4px 0 rgba(22,0,41,.45);z-index:2}
.wt__blade{width:26px;height:11px;border-radius:2px;background:var(--ink-4,#8129DB);flex:none;
  clip-path:polygon(0 0,70% 0,70% 42%,83% 42%,83% 0,100% 0,100% 100%,0 100%)}
.wt__key b{font-family:var(--f-mincho,serif);font-size:13px;line-height:1.45;display:block}
.wt__key em{font-style:normal;font-size:11px;line-height:1.6;opacity:.7;display:block;margin-top:2px}

/* 右：御社の側 */
.wt__got{position:relative}
.wt__frame{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--ink-2,#3D0A6B);
  background:#0E0620;aspect-ratio:4/3;box-shadow:0 26px 64px -36px rgba(0,0,0,.95)}
.wt__bar{position:absolute;left:0;right:0;top:0;height:26px;background:rgba(39,1,71,.9);z-index:3;
  display:flex;align-items:center;gap:6px;padding:0 11px}
.wt__bar i{width:8px;height:8px;border-radius:50%;background:rgba(207,163,250,.5)}
.wt__bar u{text-decoration:none;margin-left:8px;font-size:10px;letter-spacing:.08em;color:var(--ink-7,#CFA3FA);opacity:.8}
.wt__frame img{position:absolute;inset:26px 0 0;width:100%;height:calc(100% - 26px);object-fit:cover;object-position:50% 0}
/* 引き渡し前は、こちらの管理下にあることを幕で示す。出来上がりは既に完成している。 */
.wt__veil{position:absolute;inset:26px 0 0;z-index:2;background:rgba(22,0,41,.66);
  backdrop-filter:saturate(.5) blur(1px);display:flex;align-items:center;justify-content:flex-end;padding-right:clamp(14px,2.4vw,34px);
  border-left:2px solid rgba(232,179,60,.55);box-shadow:-14px 0 34px -10px rgba(232,179,60,.35) inset}
.wt__veil{transition:none}
.wt__veil span{font-size:12px;letter-spacing:.16em;color:var(--ink-7,#CFA3FA);
  border:1px solid rgba(207,163,250,.45);border-radius:99px;padding:7px 15px;background:rgba(22,0,41,.5)}
.wt__stage{margin-left:auto;font-size:10px;letter-spacing:.12em;padding:3px 9px;border-radius:99px;
  background:rgba(207,163,250,.18);color:var(--ink-7,#CFA3FA);text-decoration:none}
.wt__stage.is-done{background:var(--kin,#E8B33C);color:var(--ink-0,#160029)}
.wt__owner{position:absolute;right:12px;bottom:12px;z-index:4;padding:7px 13px;border-radius:99px;
  font-size:11.5px;letter-spacing:.08em;background:var(--washi,#FBF7F2);color:var(--ink-1,#270147);
  border:1.5px solid var(--ink-1,#270147);opacity:0}
.wt__list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px 22px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.wt__list li{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
  font-size:12.5px;line-height:1.75;color:var(--ink-8,#E6D3FB);opacity:0;
  padding:5px 8px 5px 10px;
  transition:background .35s ease, color .35s ease;
}
.wt__list b{font-family:var(--f-mincho,serif);color:var(--kin,#E8B33C);font-size:12px}
/* いま渡っている一本だけ、名前を明るくする。
   目を絵ではなく字のほうへ連れていくのが、この節の役目 */
.wt__list li::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--kin,#E8B33C);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .3s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.wt__list li.is-now{background:rgba(232,179,60,.13);color:var(--washi,#FBF7F2)}
.wt__list li.is-now::before{transform:scaleY(1)}
.wt__list li.is-done{color:var(--ink-8,#E6D3FB)}
.wt__list li.is-done::before{transform:scaleY(1);background:rgba(232,179,60,.42)}

@media (max-width:900px){
  .watashi{grid-template-columns:1fr}
  .wt__side{min-height:auto}
  .wt__ring{height:clamp(200px,28vh,260px)}
}

/* ============================================================
   商家の中を歩く — 敷居・大暖簾・見本帳・現場

   一枚の値 --o（0 閉 → 1 開）だけで全部の敷居が動く。
   何がどう開くかは、ここの様式ごとの取り決め。
   ============================================================ */

/* ---------- 障子ガラス — 実物の上に浮く札 ---------- */
.shoji-g{
  position:relative;
  background:rgba(251,247,242,.14);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.14),
             0 18px 40px -24px rgba(26,3,48,.6);
  border-radius:3px;
  overflow:hidden;
}
.shoji-g::after{           /* 組子 — 細い桟を二本だけ */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:
    linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.6) calc(33.33% - .5px),rgba(255,255,255,.6) calc(33.33% + .5px),transparent calc(33.33% + .5px)),
    linear-gradient(90deg,transparent calc(66.66% - .5px),rgba(255,255,255,.6) calc(66.66% - .5px),rgba(255,255,255,.6) calc(66.66% + .5px),transparent calc(66.66% + .5px));
}

/* ---------- 布 — 紺の地に、織りの目 ---------- */
.cloth{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#1B0134 0%,var(--ink-1,#270147) 34%,#310159 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.34);
}
/* 型染めの字 — 白く抜く */
.dye{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:"Noto Serif JP",var(--f-mincho,serif);font-weight:900;
  color:var(--washi,#FBF7F2);
  letter-spacing:.06em;line-height:1.02;
  text-shadow:0 0 1px rgba(251,247,242,.6), 0 0 14px rgba(251,247,242,.12);
}
/* 竿 */
.rod{
  position:absolute;left:0;right:0;top:0;height:9px;z-index:3;
  background:linear-gradient(180deg,#7A5A34,#43301A 60%,#2A1D10);
  box-shadow:0 3px 10px -4px rgba(0,0,0,.7);
}
.rod::before,.rod::after{
  content:"";position:absolute;top:-3px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#8C6A3E,#3A2814);
}
.rod::before{left:-7px} .rod::after{right:-7px}

/* ============================================================
   序 — 大暖簾が割れる
   ============================================================ */
.hero-n{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(150px,18vh,196px) 0 clamp(30px,5vh,56px);
  background:var(--ink-1,#270147);
  --o:0;
}
.hn__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hn__media video,.hn__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.10 - var(--o) * .06));
  transform-origin:52% 46%;
}
/* 実物の上に紫を薄く敷いて、字を乗せられる面にする */
.hn__wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,0,42,.90) 0%,rgba(18,0,42,.72) 30%,rgba(18,0,42,.24) 58%,rgba(18,0,42,.06) 100%),
    linear-gradient(180deg,rgba(18,0,42,.66) 0%,rgba(18,0,42,.06) 22%,rgba(18,0,42,.10) 56%,rgba(18,0,42,.86) 100%);
}

.hn__noren{position:absolute;inset:0;z-index:4;pointer-events:none}
.hn__noren .rod{opacity:calc(1 - var(--o))}
.hn__cloth{
  position:absolute;top:0;bottom:0;width:52%;
  transition:none;will-change:transform;
}
.hn__cloth--l{left:0;  transform:translate3d(calc(var(--o) * -104%),0,0) rotate(calc(var(--o) * -1.1deg))}
.hn__cloth--r{right:0; transform:translate3d(calc(var(--o) *  104%),0,0) rotate(calc(var(--o) *  1.1deg))}
.hn__fab{
  position:absolute;inset:0;
  animation:norenSway 6.5s ease-in-out infinite;
  transform-origin:50% 0;
}
.hn__cloth--r .hn__fab{animation-delay:-2.4s}
@keyframes norenSway{
  0%,100%{transform:skewY(0deg) rotate(0deg)}
  50%    {transform:skewY(.22deg) rotate(-.16deg)}
}
/* 裾 — 少し重く */
.hn__fab::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.42));
}
/* 割れ目の影 */
.hn__cloth--l .hn__fab::before,.hn__cloth--r .hn__fab::before{
  content:"";position:absolute;top:0;bottom:0;width:44px;
  opacity:calc(1 - var(--o));
}
.hn__cloth--l .hn__fab::before{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.5))}
.hn__cloth--r .hn__fab::before{left:0; background:linear-gradient(270deg,transparent,rgba(0,0,0,.5))}
.hn__dye{
  position:absolute;top:clamp(96px,15vh,168px);
  font-size:clamp(64px,11vw,170px);
}
.hn__cloth--l .hn__dye{right:clamp(18px,3.4vw,56px)}
.hn__cloth--r .hn__dye{left:clamp(18px,3.4vw,56px)}
/* 布の下に小さく屋号 */
.hn__mon{
  position:absolute;bottom:clamp(40px,7vh,84px);left:50%;transform:translateX(-50%);
  font-family:var(--f-lat,sans-serif);font-size:10.5px;letter-spacing:.42em;
  color:rgba(251,247,242,.5);white-space:nowrap;
}

.hn__body{position:relative;z-index:5;flex:0 1 auto}
.hn__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-lat,sans-serif);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-7,#CFA3FA);margin-bottom:clamp(14px,2vh,22px);
}
.hn__eyebrow i{width:26px;height:1px;background:var(--kin,#E8B33C);display:block}
.hn__h{
  margin:0 0 clamp(16px,2.4vh,26px);
  font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(31px,5.4vw,68px);line-height:1.22;letter-spacing:.02em;
  color:var(--washi,#FBF7F2);
}
.hn__h .ln{display:block;overflow:hidden}
.hn__h .ln > span{display:block}
.hn__h u{text-decoration:none;position:relative;white-space:nowrap}
.hn__h u::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.09em;
  background:var(--shu,#D6321F);
}
.hn__lead{
  margin:0;max-width:52ch;font-size:clamp(14px,1.5vw,16.5px);line-height:2.05;
  color:rgba(251,247,242,.86);
}
.hn__lead em{font-style:normal;color:var(--kin,#E8B33C)}
.hn__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,32px)}

/* 実物の説明札 */
.hn__spec{
  margin-top:clamp(22px,3.4vh,38px);display:inline-flex;flex-wrap:wrap;
  gap:0;padding:0;color:var(--washi,#FBF7F2);max-width:100%;
}
.hn__spec b,.hn__spec span{
  display:block;padding:11px clamp(13px,1.6vw,20px);font-size:12px;line-height:1.5;
  border-right:1px solid rgba(255,255,255,.16);
}
.hn__spec b{font-family:var(--f-lat,sans-serif);letter-spacing:.16em;font-size:10px;
  text-transform:uppercase;color:var(--kin,#E8B33C);white-space:nowrap}
.hn__spec span:last-child{border-right:0}
.hn__spec em{font-style:normal;opacity:.62}

.hn__down{
  position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(24px,4vh,44px);z-index:5;
  writing-mode:vertical-rl;font-family:var(--f-lat,sans-serif);font-size:10px;
  letter-spacing:.32em;text-transform:uppercase;color:rgba(251,247,242,.55);
  display:flex;align-items:center;gap:12px;
}
.hn__down::after{
  content:"";width:1px;height:56px;
  background:linear-gradient(180deg,rgba(251,247,242,.6),transparent);
  animation:hnDrop 2.4s ease-in-out infinite;transform-origin:50% 0;
}
@keyframes hnDrop{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}

/* ============================================================
   敷居 — 部屋と部屋のあいだ
   ============================================================ */
.shiki{position:relative;--o:0}

/* --- 半暖簾の帯（軽い敷居） --- */
.shiki--band{
  /* 継ぎしろ（--seam）ぶん次の紙が乗るので、その分を足して高さを取る。
     ここを薄くすると敷居が「ただの継ぎ目」になり、戸が開くところが見えない。 */
  height:calc(clamp(150px,24vh,270px) + var(--seam,0px));
  overflow:hidden;pointer-events:none;
  /* 店の壁は明るい。暗いのは掛かっている布のほう */
  background:var(--washi-warm,#F5EDE2);
  box-shadow:inset 0 1px 0 rgba(39,1,71,.10), inset 0 -1px 0 rgba(39,1,71,.10);
}
.sk__band{position:absolute;inset:0;overflow:hidden}
.sk__cap{
  position:absolute;left:50%;top:clamp(12px,2vh,22px);transform:translateX(-50%);
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);opacity:calc(var(--o) * .85);
  white-space:nowrap;z-index:6;
}

/* 縄暖簾 — 一本ずつ遅れて払われる */
.sk__nawa{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;gap:0}
.sk__nawa i{
  flex:1 1 auto;position:relative;
  --d:calc(var(--n) / 26);
  --p:clamp(0, calc((var(--o) - var(--d) * .34) / .66), 1);
  transform:translate3d(calc(var(--p) * var(--dir) * 150%),0,0) rotate(calc(var(--p) * var(--dir) * 7deg));
  transform-origin:50% 0;
}
.sk__nawa i::before{
  content:"";position:absolute;left:50%;top:0;bottom:14%;width:clamp(5px,.5vw,8px);
  transform:translateX(-50%);border-radius:0 0 99px 99px;
  background:linear-gradient(180deg,#1B0134,var(--ink-1,#270147) 40%,#3B0668);
  box-shadow:1px 0 0 rgba(0,0,0,.4);
  animation:nawaSway 4.2s ease-in-out infinite;
  animation-delay:calc(var(--n) * -.11s);
}
@keyframes nawaSway{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(1.1deg)}}

/* 格子戸 — 奥へ開く */
.sk__koshi{position:absolute;inset:0;perspective:900px}
.sk__koshi i{
  position:absolute;top:0;bottom:0;width:50%;
  background:
    repeating-linear-gradient(90deg,rgba(251,247,242,.9) 0 3px,transparent 3px 26px),
    repeating-linear-gradient(0deg,rgba(251,247,242,.9) 0 3px,transparent 3px 34px),
    linear-gradient(180deg,#2B0450,#1B0134);
  box-shadow:inset 0 0 0 4px #6B4A26;
}
.sk__koshi i:first-child{left:0; transform-origin:left center; transform:rotateY(calc(var(--o) * -78deg))}
.sk__koshi i:last-child {right:0;transform-origin:right center;transform:rotateY(calc(var(--o) *  78deg))}

/* 掛け札 — 帳場の札が順に裏返る */
.sk__fuda{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;gap:clamp(8px,1.4vw,20px);perspective:800px}
.sk__fuda i{
  width:clamp(44px,6vw,84px);height:74%;
  --d:calc(var(--n) / 8);
  --p:clamp(0, calc((var(--o) - var(--d) * .5) / .5), 1);
  transform-origin:50% 0;transform:rotateX(calc(var(--p) * -96deg));
  background:linear-gradient(180deg,#F0E4D2,#D9C4A4);
  box-shadow:0 8px 16px -10px rgba(0,0,0,.6);
  display:grid;place-items:center;
  font-family:var(--f-mincho,serif);font-weight:800;color:#3A2814;
  font-size:clamp(13px,1.5vw,19px);writing-mode:vertical-rl;
  letter-spacing:.1em;padding-top:10px;
}

/* 引き戸 — 一枚が横へ逃げる */
.sk__hiki{position:absolute;inset:0;overflow:hidden}
.sk__hiki i{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 22px),
    linear-gradient(90deg,#1B0134,var(--ink-1,#270147) 50%,#1B0134);
  box-shadow:inset 0 0 0 5px #6B4A26;
  transform:translate3d(calc(var(--o) * -103%),0,0);
}
.sk__hiki i::after{               /* 引手 */
  content:"";position:absolute;right:clamp(30px,7vw,90px);top:50%;
  width:16px;height:34px;border-radius:99px;transform:translateY(-50%);
  background:rgba(232,179,60,.85);
}

/* 暖簾を掛ける — 上から降りてきて、店を閉める */
.sk__kake{position:absolute;inset:0;overflow:hidden}
.sk__kake i{
  position:absolute;left:0;right:0;top:0;height:100%;
  transform:translate3d(0,calc((1 - var(--o)) * -100%),0);
}

/* --- 全画面の敷居 --- */
.shiki--full{height:180vh}
.sk__stage--furo .sk__peek img{filter:none;transform:scale(calc(1.06 - var(--o) * .06))}
.sk__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}

/* 障子 — 人影が写真になる */
.sk__peek{position:absolute;inset:0}
.sk__peek img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(calc((1 - var(--o)) * 16px)) saturate(calc(.4 + var(--o) * .6));
  transform:scale(calc(1.14 - var(--o) * .1));
}
.sk__peek::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,3,48,.5),rgba(26,3,48,.12) 40%,rgba(26,3,48,.8));
  opacity:calc(.35 + (1 - var(--o)) * .5);
}
.sk__shoji{position:absolute;inset:0;display:flex}
.sk__shoji i{
  flex:1;position:relative;
  background:
    repeating-linear-gradient(90deg,rgba(126,96,58,.42) 0 1.5px,transparent 1.5px 46px),
    repeating-linear-gradient(0deg,rgba(126,96,58,.42) 0 1.5px,transparent 1.5px 54px),
    linear-gradient(180deg,#FDFAF4,#F1E9DB);
  box-shadow:inset 0 0 0 5px #7A5A34, 0 0 40px -8px rgba(0,0,0,.45);
}
.sk__shoji i:nth-child(1){transform:translate3d(calc(var(--o) * -104%),0,0)}
.sk__shoji i:nth-child(2){transform:translate3d(calc(var(--o) *  104%),0,0);z-index:2}
.sk__shoji i:nth-child(3){transform:translate3d(calc(var(--o) *  208%),0,0)}
.sk__title{
  position:relative;z-index:5;text-align:center;color:var(--washi,#FBF7F2);
  /* 紙がまだ閉じているあいだ、白い字が白い紙に沈む。地を一枚敷く */
  isolation:isolate;
  opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 26px));
  padding:0 20px;
}
.sk__title::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(120vw,1000px);height:min(70vh,420px);z-index:-1;
  background:radial-gradient(closest-side,rgba(20,2,38,.62),rgba(20,2,38,.26) 54%,transparent 80%);
  /* 紙が退いて写真が出るほど、地は要らなくなる */
  opacity:calc(1 - var(--o) * .5);
}
.sk__title b{
  display:block;font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(28px,5.2vw,64px);line-height:1.3;letter-spacing:.03em;
  text-shadow:0 6px 30px rgba(26,3,48,.7);
}
.sk__title span{
  display:block;margin-top:14px;font-size:13px;letter-spacing:.14em;
  color:rgba(251,247,242,.76);
}
/* 影絵 — 障子の紙に映る人影 */
.sk__kage{
  position:absolute;left:0;right:0;bottom:0;height:62%;z-index:3;pointer-events:none;
  opacity:calc((1 - var(--o)) * .55);
  background:
    radial-gradient(24% 46% at 22% 100%,rgba(40,20,10,.9),transparent 70%),
    radial-gradient(19% 38% at 41% 100%,rgba(40,20,10,.85),transparent 70%),
    radial-gradient(22% 52% at 63% 100%,rgba(40,20,10,.9),transparent 70%),
    radial-gradient(17% 34% at 81% 100%,rgba(40,20,10,.8),transparent 70%);
  filter:blur(4px);
}

/* 風呂敷 — 四隅がほどける */
.sk__furo{position:absolute;inset:0;display:grid;place-items:center;perspective:1100px}
.sk__furo i{
  position:absolute;width:74vmin;height:74vmin;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 5px,transparent 5px 13px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.10) 0 5px,transparent 5px 13px),
    linear-gradient(140deg,#5A159B,#37065F 52%,#25013F);
  box-shadow:0 24px 60px -26px rgba(0,0,0,.85), inset 0 0 60px rgba(0,0,0,.28);
}
.sk__furo i:nth-child(1){clip-path:polygon(50% 50%,0 0,100% 0);   transform-origin:50% 0;   transform:rotateX(calc(var(--o) * -132deg))}
.sk__furo i:nth-child(2){clip-path:polygon(50% 50%,100% 0,100% 100%);transform-origin:100% 50%;transform:rotateY(calc(var(--o) * 132deg))}
.sk__furo i:nth-child(3){clip-path:polygon(50% 50%,100% 100%,0 100%);transform-origin:50% 100%;transform:rotateX(calc(var(--o) * 132deg))}
.sk__furo i:nth-child(4){clip-path:polygon(50% 50%,0 100%,0 0);   transform-origin:0 50%;   transform:rotateY(calc(var(--o) * -132deg))}
.sk__knot{
  position:absolute;z-index:4;width:clamp(56px,7vmin,84px);height:clamp(56px,7vmin,84px);
  border-radius:50%;background:radial-gradient(circle at 36% 32%,#4C0A85,#20013C);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9);
  opacity:calc(1 - var(--o) * 2.4);transform:scale(calc(1 - var(--o) * .4));
}

/* ============================================================
   一丁 — 見本帳
   表の一枚だけを起こし、残りは伏せて脇へ寄せる
   ============================================================ */
.mihon{margin-top:clamp(26px,4vh,44px)}
.mh__stage{
  position:relative;height:clamp(272px,56vh,600px);
  perspective:1500px;touch-action:pan-y;cursor:grab;
}
.mh__stage:active{cursor:grabbing}
.mh__leaf{
  /* 高さで決める。幅から決めると縦に溢れて隣の丁を踏む */
  position:absolute;top:50%;left:50%;height:86%;width:auto;aspect-ratio:16/10;
  max-width:76%;
  --a:max(-1, min(1, var(--r)));                 /* 左右どちら側か */
  --d:max(0, min(2, calc(var(--r) * var(--a))));  /* 表からの隔たり */
  transform:
    translate(-50%,-50%)
    translateX(calc(var(--a) * (34% + var(--d) * 15%)))
    translateZ(calc(var(--d) * -300px))
    rotateY(calc(var(--a) * -34deg))
    scale(calc(1 - var(--d) * .04));
  transition:transform .58s var(--ease-wood,cubic-bezier(.16,1,.3,1)),
             opacity .45s ease, filter .45s ease;
  opacity:calc(1 - var(--d) * .48);
  filter:saturate(calc(1 - var(--d) * .62)) brightness(calc(1 - var(--d) * .16)) blur(calc(var(--d) * 1.1px));
  z-index:calc(10 - var(--d));
  background:var(--washi,#FBF7F2);
  padding:0;border:0;cursor:pointer;
  box-shadow:0 40px 70px -46px rgba(26,3,48,.8), 0 2px 0 rgba(26,3,48,.1);
}
.mh__leaf.is-face{cursor:default;height:100%;box-shadow:0 54px 90px -42px rgba(26,3,48,.9)}
/* 綴じ側の糸目 */
.mh__leaf::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:14px;z-index:3;
  background:linear-gradient(90deg,rgba(26,3,48,.16),transparent);
}
.mh__win{
  position:absolute;inset:9px;overflow:hidden;background:#0E0120;
}
.mh__win video,.mh__win img{width:100%;height:100%;object-fit:cover;display:block}
.mh__bar{
  position:absolute;left:9px;right:9px;top:9px;height:26px;z-index:4;
  display:flex;align-items:center;gap:6px;padding:0 10px;
  background:rgba(20,2,38,.62);backdrop-filter:blur(6px);
}
.mh__bar i{width:7px;height:7px;border-radius:50%;background:rgba(251,247,242,.35)}
.mh__bar u{
  text-decoration:none;margin-left:8px;font-family:var(--f-lat,sans-serif);
  font-size:10px;letter-spacing:.1em;color:rgba(251,247,242,.66);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mh__no{
  position:absolute;right:-1px;bottom:-1px;z-index:5;
  background:var(--ink-1,#270147);color:var(--washi,#FBF7F2);
  font-family:var(--f-num,sans-serif);font-size:15px;letter-spacing:.1em;
  padding:5px 11px;
}

/* 見本の説明 */
.mh__under{
  display:grid;grid-template-columns:1fr auto;gap:clamp(16px,2.4vw,34px);
  align-items:end;margin-top:clamp(20px,3vh,34px);
}
.mh__spec b{
  display:block;font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(17px,2.1vw,23px);line-height:1.5;margin-bottom:8px;
}
.mh__spec p{margin:0;font-size:13.5px;line-height:1.95;opacity:.84;max-width:56ch}
.mh__spec dl{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px}
.mh__spec dt{
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);align-self:center;
}
.mh__spec dd{margin:0;font-size:12.5px;letter-spacing:.04em}

/* 送り */
.mh__nav{display:flex;align-items:center;gap:10px}
.mh__count{font-family:var(--f-num,sans-serif);font-size:22px;letter-spacing:.08em;opacity:.7}
.mh__count b{font-size:30px;opacity:1}
.mh__arw{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(39,1,71,.28);background:transparent;color:inherit;
  display:grid;place-items:center;font-size:16px;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.mh__arw:hover{transform:scale(1.07);background:rgba(151,29,255,.09);border-color:var(--ink-4,#8129DB)}
.mh__tabs{display:flex;gap:8px;margin-top:clamp(16px,2.4vh,26px);flex-wrap:wrap}
.mh__tab{
  cursor:pointer;border:1px solid rgba(39,1,71,.2);background:transparent;color:inherit;
  font-family:var(--f-jp,sans-serif);font-size:12px;letter-spacing:.06em;
  padding:8px 14px;border-radius:99px;transition:all .2s ease;
}
.mh__tab[aria-selected="true"]{
  background:var(--ink-1,#270147);color:var(--washi,#FBF7F2);border-color:var(--ink-1,#270147);
}
.mh__note{margin:14px 0 0;font-size:12px;line-height:1.9;opacity:.6}

/* ============================================================
   二丁 — 現場
   ============================================================ */
.genba2{margin-top:clamp(26px,4vh,44px)}
/* ---------- 現場の壁 ----------
   一枚ずつ並べただけでは、少しスクロールすれば終わってしまう。
   三本の柱に積み、柱ごとに丈を変える。丈が違えば流れる速さも違うので、
   同じ進捗で動かすだけで奥行きが出る（速さを別々に指定すると、
   短い柱が先に底に着いて隙間ができる）。 */
.gb__wall{
  position:relative;margin-top:clamp(26px,4vh,44px);
  height:clamp(520px,84vh,880px);
  /* overflow:hidden だと Chrome が中の動画を「描画されていない」と見なして
     再生を止める（実測：hidden で停止、clip で再生）。clip なら同じように
     はみ出しを切るが、スクロール枠を作らないので動画は動く。
     clip を解さない古い版のために hidden を先に置く。 */
  overflow:hidden;overflow:clip;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  opacity:var(--wallIn,0);
  transform:translateY(calc((1 - var(--wallIn,0)) * 26px));
  transition:opacity .9s ease, transform 1s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
/* 上下の端は霞ませる。切り取った窓ではなく、続いている壁に見せる */
.gb__wall::before,.gb__wall::after{
  content:"";position:absolute;left:0;right:0;height:clamp(46px,7vh,90px);z-index:3;pointer-events:none;
}
.gb__wall::before{top:0;background:linear-gradient(180deg,var(--washi,#FBF7F2),transparent)}
.gb__wall::after{bottom:0;background:linear-gradient(0deg,var(--washi,#FBF7F2),transparent)}

.gb__col{
  display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);
  /* align-self:start が要る。既定の stretch だと grid が三本とも
     いちばん長い柱の丈に揃えてしまい、余り丈が同じになって
     三本が同じ速さで流れる（＝奥行きが出ない） */
  align-self:start;
  will-change:transform;transform:translate3d(0,var(--cy,0px),0);
}
.gb__t{
  position:relative;margin:0;min-width:0;flex:none;overflow:hidden;
  aspect-ratio:var(--ar,4/3);background:var(--ink-1,#270147);
}
.gb__t img,.gb__t video{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--ts,1));
  transition:transform .55s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.gb__t::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,transparent 66%,rgba(26,3,48,.42));
}
.gb__t figcaption{
  position:absolute;left:0;bottom:0;z-index:2;
  background:rgba(20,2,38,.74);color:var(--washi,#FBF7F2);
  font-size:10.5px;letter-spacing:.1em;padding:6px 10px;
}
.gb__t--vid figcaption::before{
  content:"";display:inline-block;width:0;height:0;margin-right:7px;
  border-left:6px solid var(--kin,#E8B33C);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transform:translateY(1px);
}
@media (hover:hover){ .gb__t:hover{--ts:1.06} }

.gb__note{margin:14px 0 0;font-size:12px;line-height:1.9;opacity:.62}

.gb__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(14px,2vw,30px);margin-top:clamp(26px,4vh,46px);
  border-top:1px solid rgba(39,1,71,.16);padding-top:clamp(20px,3vh,32px);
}
.gb__f dt{
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);margin-bottom:9px;
}
.gb__f dd{margin:0;font-size:13.5px;line-height:1.95;opacity:.86}
.gb__f dd b{
  display:block;font-family:var(--f-num,sans-serif);font-size:clamp(34px,4.4vw,54px);
  line-height:1;color:var(--ink-5,#981DFF);margin-bottom:6px;letter-spacing:.02em;
}
.gb__f dd b em{font-style:normal;font-family:var(--f-mincho,serif);font-size:16px;margin-left:4px}

/* ============================================================
   狭い画面
   ============================================================ */
@media (max-width:900px){
  .mh__leaf{width:min(86%,560px)}
  .mh__under{grid-template-columns:1fr;gap:16px}
  .mh__nav{justify-content:flex-start}
  .gb__wall{grid-template-columns:repeat(2,minmax(0,1fr));height:clamp(460px,72vh,700px)}
  .gb__col:last-child{display:none}
  .hn__dye{font-size:clamp(52px,15vw,110px);top:clamp(70px,12vh,120px)}
  .shiki--full{height:170vh}
  .sk__furo i{width:86vmin;height:86vmin}
}
@media (max-width:560px){
  .hn__spec{flex-direction:column}
  .hn__spec b,.hn__spec span{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .mh__stage{height:clamp(240px,44vh,340px)}
  .sk__fuda i{width:clamp(30px,9vw,52px);font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .hn__fab,.sk__nawa i::before,.hn__down::after{animation:none}
  .mh__leaf{transition:none}
}

/* 屋号は布と一緒に消える */
.hn__mon{opacity:calc(1 - var(--o))}
/* パンくずは実物の上に出る */
.hero-n .crumb{position:relative;z-index:5;color:rgba(251,247,242,.62);margin-bottom:clamp(14px,2vh,22px)}
.hero-n .crumb a{color:rgba(251,247,242,.72)}
.hero-n .crumb b{color:var(--washi,#FBF7F2)}
/* 横に染め抜く（帯の敷居用） */
.dye--h{
  writing-mode:horizontal-tb;text-orientation:mixed;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:clamp(15px,2.2vw,26px);letter-spacing:.24em;white-space:nowrap;
}

/* 数字と単位は一行に */
.gb__num{display:block;line-height:1;margin-bottom:8px}
.gb__num b{display:inline;margin:0}
.gb__num em{
  font-style:normal;font-family:var(--f-mincho,serif);font-size:16px;margin-left:5px;
  color:var(--ink-4,#8129DB);
}

/* --- 直し --- */
/* 数字と単位を一行に戻す（.gb__f dd b の block が勝っていた） */
.gb__f dd .gb__num b{display:inline;margin:0}

/* 縄暖簾は縄。線ではない */
.sk__nawa i::before{
  width:clamp(9px,.85vw,14px);
  background:linear-gradient(90deg,#180130,var(--ink-1,#270147) 32%,#43097A 62%,#1B0134);
  box-shadow:2px 0 4px -1px rgba(0,0,0,.45);
}
.sk__nawa{padding-top:9px}

/* 実物の上では、輪郭だけのボタンは沈む */
.hero-n .wbtn--ghost{
  border-color:rgba(251,247,242,.5);color:var(--washi,#FBF7F2);
  background:rgba(20,2,38,.28);backdrop-filter:blur(6px);
}
.hero-n .wbtn--ghost:hover{border-color:var(--kin,#E8B33C);color:var(--kin,#E8B33C)}

/* 見本帳の脇の丁は画面の外へ流す。ただし横スクロールは作らせない。
   overflow-x:clip は縦の影を残したまま横だけ切れる（hidden だと縦も巻き込む） */
#works{overflow-x:clip}

/* ---------- 動く現場 ----------
   縦の映像を二本、並べて置く。柱の中（overflow で切っている場所）に
   入れると Chrome が再生を止めるので、切り取りの外に出してある。 */
.gb__reel{
  display:grid;grid-template-columns:auto auto 1fr;align-items:end;
  gap:clamp(12px,1.8vw,26px);margin-top:clamp(24px,3.6vh,40px);
}
.gb__rv{
  position:relative;margin:0;width:clamp(150px,17vw,250px);aspect-ratio:9/16;
  overflow:hidden;background:var(--ink-1,#270147);
  box-shadow:0 26px 44px -34px rgba(26,3,48,.8);
}
.gb__rv video{width:100%;height:100%;object-fit:cover;display:block}
.gb__rv figcaption{
  position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:7px;
  background:rgba(20,2,38,.74);color:var(--washi,#FBF7F2);
  font-size:10.5px;letter-spacing:.1em;padding:6px 10px;
}
.gb__rv figcaption::before{
  content:"";width:0;height:0;
  border-left:6px solid var(--kin,#E8B33C);border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.gb__rt{
  margin:0 0 6px;font-family:var(--f-mincho,serif);font-size:clamp(15px,1.9vw,20px);
  line-height:1.7;color:var(--ink-1,#270147);
}
.gb__rt span{
  display:block;margin-top:8px;font-family:var(--f-jp,sans-serif);
  font-size:12px;line-height:1.9;opacity:.62;
}
@media (max-width:760px){
  .gb__reel{grid-template-columns:1fr 1fr;}
  .gb__rv{width:100%}
  .gb__rt{grid-column:1 / -1}
}