@charset "UTF-8";
/* ============================================================================
   渡部塗装(t001)— D-040 作り直し版
   トークン: clients/t001/トークン設計.md(2026-08-01 改訂)
   ・書体は自ホスト+サブセット。外部通信ゼロ。ライブラリ・テンプレート不使用。
   ・もくまおうの site/ の構造・書体・配色は一切流用していない(D-040 §2-8)。
   ・「削る」「余白を広く」「静かに」という自社の設計原則は、この案件に適用しない。
     参考サイトに合わせ、**量を持ったまま整える**方向で組む(D-040 §2-7)。
   ============================================================================ */

/* ── 書体(自ホスト・サブセット)──────────────────────────────
   参考サイトは 秀英丸ゴシックB / 小町 / 海明 / わんぱく(すべて商用Webフォント)。
   無料の代替を、実際に輪郭を描いて比較して選定した(clients/t001/書体比較/)。
   すべて SIL Open Font License 1.1。ライセンス全文は ../fonts/ に同梱。

   ⚠ 積むのは**実際に使う面だけ**。
   Klee One(和文手書き)と 明朝700 は、選定はしたが本ページでは使わないため積んでいない。
   使うことになった時点で、サブセットを作って足す。 */
/* 🔴 D-060: 本文のウェイトを 300 → 500 に上げた。
   現地担当の「やや薄い気がする」を、インク被覆率で実測して判定した。
   参考サイトの本文帯(2倍解像度・外接矩形で正規化): **15.08%**
     ZenMaru Light  300 …  6.60%(参考の 44%)  ← いままで
     ZenMaru Regular400 …  9.72%
     ZenMaru Medium 500 … 12.88%  ← 最も近い。採用
   参考サイトの本文は「秀英丸ゴシック B」で、`font-weight:300` が指定されていても
   B の字面そのものが太い。こちらの Light は、その半分以下しかインクが乗っていなかった。
   **強調はウェイトではなく色で作る**(参考サイトも同じ。`.txt-blue` 等)。 */
/* 🔴 2026-10-09(D-110): 書体を入れ替えた。現地担当の指示。
   旧: ZenMaru 500(本文)/ ZenOldMincho 400(見出し)/ Sacramento(欧文の飾り)
   新: Zen Kaku Gothic New 400・700(本文と見出し)/ Josefin Sans 400(欧文と数字の飾り)
   ⚠ 上の「インキの量」の実測は、旧い書体(ZenMaru)で測った値である。新しい書体では測り直していない。
   ⚠ 太さ 500 の指定は残してあるが、面が 400 と 700 しか無いので、500 は 400 で描かれる。 */
/* 🔴 D-123(2026-10-14): 本文と小さい見出しを Noto Sans JP に入れ替えた。
   参照サイトの本文(こぶりなゴシック W6・有料)に、無料の書体でいちばん近かった(R-123 に比べ方と数字)。
   ・550 の面を 100〜600 の指定で使い、700 の面を 601〜900 で使う(本文の指定 500 は 550 で描かれる)。
   ・文字詰め(palt)を効かせる。Noto Sans JP は palt を持っている(Zen Kaku Gothic New は持っていなかった)。 */
@font-face{font-family:"NotoJP";src:url("../fonts/noto-sans-jp-550.woff2") format("woff2");
  font-weight:100 600;font-style:normal;font-display:swap}
@font-face{font-family:"NotoJP";src:url("../fonts/noto-sans-jp-700.woff2") format("woff2");
  font-weight:601 900;font-style:normal;font-display:swap}
@font-face{font-family:"JosefinSans";src:url("../fonts/josefin-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
/* 🔴 2026-10-09(D-111): 大きい文字だけ、以前の明朝に戻した。現地担当の判定
   「h2や大きめの文字(ヒーローの大きい文字など)は以前のフォントに戻す。小さい文字は現在のフォント」。 */
@font-face{font-family:"ZenOldMincho";src:url("../fonts/zen-old-mincho-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
/* 🔴 D-114: 「選ばれる理由」の3つの見出しだけ、明朝の太字(現地担当の指定)。その見出しに出る文字だけを積んでいる */
/* ⚠ 家族名を "ZenOldMincho" と**別にしてある**(ZenOldMinchoB)。30字しか入っていないので、
   同じ名前の 700 にすると、ほかの明朝の文字の中の太字がこの面を引いてしまい、無い字だけ別の書体に落ちる。 */
@font-face{font-family:"ZenOldMinchoB";src:url("../fonts/zen-old-mincho-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  
  /* ==========================================================================
     配色(D-053 で実測 → D-054 で承認 → D-055 で実装)
     正本: clients/t001/配色案.md

     芯: **群青は顔料の名前である。芯は変えない。変えるのは濃度である。**
     塗装屋は、同じ顔料を濃く置く所と、薄く溶いて広げる所を使い分ける。
     広い面は薄めた群青、締める所だけ濃い群青。

     参考サイト(8hands.jp)の実測: 淡い水色36.3% / 白30.6% / 濃い水色3.3% / 赤0.1%。
     **濃い色の全幅の帯は1本も無い。**よって .sec-dark は D-055 で廃止した。
     色相は 8hands が H197(水色)、こちらは H218〜220(群青)。看板は借りていない。
     ========================================================================== */
  --usu:#FBEFC8;   /* 🔴 D-124: 淡群青 #CAD3E2 → 淡い黄(黄 #FAC302 を地に溶かした色)。名前は残した */         /* 淡群青。**基調の地**(想定面積 約35%) H218 S29% L84% */
  --kami:#FBFBF9;        /* 紙。読ませる節の地(約32%)               H 60 S20% L98% */
  --usu-l:#FDF6DF;   /* D-124: #E1E6EF → ごく淡い黄 */       /* 淡群青(明)。白地の上の面・表の見出し      H218 S28% L91% */
  --soji:#E7E1CF;        /* 素地。塗る前の下地の色。第2の地           H 45 S33% L86% */
  --oka:#F2BE1E;   /* D-124: 群青(中)#4A6BA8 → 黄(中)。丘の奥・工程の番号 */         /* 群青(中)。丘の奥・中間の面               H220 S38% L47% */
  --gunjo:#FAC302;   /* 🔴 D-124: 差し色を群青 #2F5093 → 黄 #FAC302(見出しの塗り跡・「中間マージン」の下線と同じ色)。
                        ⚠ 黄は明るいので、**文字の色には使わない**(白地の上で 1.6 しか出ない)。
                        面に使い、その上の文字は墨にする。文字の強調は、墨の文字 + 黄の下線で行う(--ki-line) */       /* 群青。**差し色**(約3%)                  H220 S52% L38% */
  --gunjo-d:#E8AF00;   /* D-124: 押したとき。黄を一段深く */
  --ki-line:linear-gradient(transparent 62%,#FAC302 62%);   /* D-124: 黄の下線(マーカー)。文字の下 38% に敷く */     /* 群青(深)。押したとき・重なり             H221 S50% L28% */
  --sumi:#2E343D;        /* 墨。本文。**純黒にしない**                H216 S14% L21% */
  --hai:#4F5863;         /* 灰。補足。**3つの地すべてでAAを満たす明度** H214 S11% L35% */
  --sen:#E3D3A2;   /* D-124: 罫も青みを抜いた */         /* 罫。実線                                H215 S20% L78% */
  --sen-h:#D8D2BE;       /* 破線専用の罫(装飾語彙の一部)            H 45 S30% L79% */
  --maku:#171C22;        /* 写真の上に敷く幕。**地色ではない。**
                            写真は何色か分からないため、幕だけは深く保つ */
  --maku-a:.66;          /* 幕の濃さ。**実際の写真の最も明るい帯で実測して決めた**(D-058)。
                            仮写真での実測: .60→4.53 / .66→5.53 / .72→6.87(白文字とのコントラスト)。
                            AA(4.5)に余裕を持たせつつ、いちばん明るく見える .66 を採った。
                            ⚠ **本番の写真に差し替えたら、必ず測り直すこと。** */

  /* 紙のテクスチャを後から重ねるための穴(D-055)
     8hands は `background:#b9d5e0 url(bg-light_blue.png)` の二層で、
     **描画値が宣言値より彩度7pt沈む。**色だけ合わせてもあの地色にならない。
     テクスチャは DS-003 で Claude Design に作ってもらう(質感は視覚判断のため)。
     届いたら、この2行を差し替えるだけで全ての面に乗る。 */
  --tex:none;
  --tex-size:135px 135px;

  /* 文字
     参考サイトは 15px/行間1.9/字間0.13em + palt。
     採用書体は palt を持たないため、字間を 0.07em に下げて釣り合わせた。
     級数は品質の下限を優先して 17px。(トークン設計 参照) */
  --ls-body:.08em;   /* D-122: .07 → .08em(参照サイトの本文の字間に合わせた) */
  --ls-head:.09em;

  --sec-y:clamp(64px,8vw,120px);   /* 節の縦余白 64〜120px */
  --frames:13;                      /* 刷毛スプライトのコマ数 */
  /* 🔴 D-063: 1.4秒 → 1.0秒。現地担当の実機評価「もたついて見える」による。
     1.4秒は参考サイト(8hands.jp)のCSSから採った実測値だが、
     **こちらは13コマ・ヒーロー全面で、参考サイトとコマ数も面積も違う。**同じ秒数でも体感が違う。
     ✅ **確定値**(D-064)。現地担当が `prototype/speed-compare.html` で
        0.7 / 0.9 / 1.0 / 1.1 / 1.4 秒を実機で見比べ、**1.0秒を選んだ。**
        変えるときは、また試作で見比べてから決める。 */
  --dur:1s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background-color:var(--kami);background-image:var(--tex);
  background-size:var(--tex-size);color:var(--sumi);
  font-family:"NotoJP",-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:500;font-size:17px;line-height:2;letter-spacing:var(--ls-body);   /* D-122: 行間 1.9 → 2(参照サイトに合わせた) */
  font-feature-settings:"palt";   /* 効かない環境でも害はない。将来palt入りに差し替えたとき効く */
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sumi)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--sumi);outline-offset:2px}
.hero a:focus-visible{outline-color:#fff}   /* 写真の上だけ、白の輪郭にする */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ── 見出し(明朝ディスプレイ)──────────────────────────── */
/* 🔴 D-111: 大きい文字(20px 以上)は明朝、小さい見出し(18px 以下)は角ゴシックの太字。
   明朝: .sec-h2 24〜36px / .hero-h1 26〜42px / .lead-lg 20〜28px / .tel-box-num 26〜32px / .ft-logo 26px
   角ゴ: .reason-h3 / .svc-h3 / .flow-h3(18px。スマホは 16px) */
.sec-h2,.hero-h1,.lead-lg,.tel-box-num,.ft-logo{
  font-family:"ZenOldMincho",serif;font-weight:400;letter-spacing:var(--ls-head)}
.reason-h3,.svc-h3,.flow-h3{
  font-family:"NotoJP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-weight:700;letter-spacing:var(--ls-head)}
/* 🔴 D-085: 手書き風(Sacramento)から明朝(ZenOldMincho)へ。
   ⚠ `.deco` が付いているのは2か所ある。
     ・工事の流れの番号(`.flow-no`)  ← ここが対象
     ・追従タグの "Contact"(`.contact-tag__en`)
     後者は `deco.css` で **自分で Sacramento を指定している**ので、この変更の影響を受けない。
     **Sacramento は全廃していない。**サブセットも残す(`reports/DESIGN_TOKENS.md`)。 */
.deco{font-family:"JosefinSans","NotoJP",sans-serif;letter-spacing:.02em}

/* ── 見出しの背後のペンキ(D-080)───────────────────────────
   🔴 経緯
     D-064〜D-065 で「英語見出しの画像(Greeting / Works …)」を10枚 敷いていた。
     **D-080 で全廃し、黄色いペンキ1枚に置き換えた。**
     **導入の判断が誤っていたのではない。**現地担当の設計判断が変わった。
     素材は消していない(`clients/t001/素材/英語見出し/`)。

   🔴 いちばん大事な決まり
     **文字の長さに関わらず、すべての見出しで同じ大きさにする。**
     英語見出しのときは幅を文字幅に比例させ、上限だけ付けていた(D-067)。
     今回は比例させない。**固定値ひとつ。**

   ⚠ 大きさの決め方
     絵は viewBox 1024.5×576、黄色のインクはその中の 977×424(比 2.304)。
     つまり**箱の 95.3% × 73.5% がインク**で、まわりは透明である。
     英語見出しのときのインク幅は、短い見出しで 7.4em、長い見出しで 11.09em だった。
     **その中間あたりの 9.15em を選び、透明の余白を戻して 箱を 9.6em にした。**
     高さは viewBox の比で決まる(9.6 ÷ 1.7786 = 5.4em)。

   ⚠ 位置は英語見出しのときと同じ考え方
     **見出しの左上に出て、下端だけがわずかに重なる。**
     透明の余白のぶんだけ、左と下にずらして合わせてある。 */
.sec-h2{position:relative;display:inline-block;padding:0 .45em;
  --paint-w:9.6em;--paint-h:5.4em;   /* 絵の大きさ。幅を変えると left も自動で追従する */
  /* 絵は見出しの外(上)へ出るので、その分の場所を見出し自身が確保する。
     ⚠ D-081 で中心合わせにしたので、絵が上に出る量は (5.4em - 1.5em) ÷ 2 = 1.95em だけになった。
       D-080 の時点では 3.64em 出ていた。**その差だけ詰める。** */
  margin-top:clamp(10px,2vw,26px)}
.sec-h2::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:var(--paint-w);height:var(--paint-h);   /* 🔴 固定。文字数に依存しない */
  /* 🔴 D-086: **横は「文字の左端」を起点にする。**
     D-081 では中心合わせにしていた。**中心合わせだと、文字数が変わると絵が動く。**
       4文字(施工事例) : 文字の左端から -2.395em
       5文字          : -1.850em
       6文字(選ばれる理由): -1.305em
     絵の大きさは同じでも、**文字に対する位置**が見出しごとに違っていた。
     文字の少ない見出しでは、絵が右に余り、文字が左に寄って見える。

     → **「選ばれる理由」の位置関係(-1.305em)を、全部の見出しに同じ値で当てる。**
       文字数の多い見出しは絵から右にはみ出し、少ない見出しは絵が右に余る。
       それは許容する(現地担当の判定「多少被っても問題ない」)。

     ⚠ 起点は「h2 の箱」ではなく「文字の左端」である。
       h2 には左右 .45em の内側余白があるので、その分を足す。
     ⚠ 絵の中で黄色が始まるのは、箱の左から 1.3% の位置。その分も引く。
       → left = .45em(内側余白) - 1.305em(基準) - 絵の幅 × 1.3%

     縦は D-081 のまま(中心合わせ)。**縦は文字数で動かないので、直す理由が無い。** */
  left:calc(.45em - 1.305em - var(--paint-w) * .013);
  top:50%;
  transform:translateY(calc(-50% - .043em));
  background:url(../img/deco/h2-paint.svg) center / contain no-repeat}
/* 🔴 例外: Our Craft の見出しには付けない(司令指示 D-080)。
     14文字あり、他(4〜6文字)の2倍以上なので、同じ大きさの絵では釣り合わない。 */
#craft .sec-h2::before{content:none}
/* ⚠ 絵が無いのだから、絵のための余白も要らない。**詰める。** */
#craft .sec-h2{margin-top:0}
@media (max-width:900px){
  .sec-h2{--paint-w:8.2em;--paint-h:4.61em}   /* 位置の式は同じ。幅が変われば left も変わる */
}

/* ── ヘッダー(D-076 で参考サイトの構造に作り替え)──────────────
   寸法の出所: clients/t001/参考サイトのヘッダー実測.md
   ・先頭の高さ 131.5px / スクロール後 85.0px(参考サイトの実測値)
   ・下端の形は D-077 で「中央の円弧」から「緩やかな谷形」に変えた(下の .hd-plate)
     🔴 円弧(深さ 55.5px)は参考サイトの実測値だが、こちらの構成では膨らみが大きすぎた。
       円弧の下にあった細い線も、あわせて外した。

   ⚠ 地は**不透明**にした(参考サイトと同じ)。
     半透明だと、切った縁の内と外で色が変わって見えるため。 */
.hd{position:sticky;top:0;z-index:60;background:transparent;
  --hd-flat:131.5px;        /* 平らな部分の高さ */
  --hd-dip:calc(var(--hd-flat) * .25);   /* 下端の谷の深さ。高さの 25% */
  --hd-logo-h:56px;         /* ロゴ(屋号+欧文)の高さ。屋号は この 168/313 = 30px */
  /* アイコンの高さ。参考サイトの実測は 38px だが、**ロゴの印象が薄れる**という判定により
     D-079 で 32px に下げた(ロゴの高さ 56px に対する比 0.679 → 0.571)。実測は R-079。 */
  --ico:32px;

  /* ⚠ 場所を取る高さは「谷の分だけ低い」。
       地(.hd-plate)は --hd-flat まであり、**中央の谷はヒーローの上に少しかぶる。**
       こうしないと、谷で切り取った所に**本文の地色**が出るだけで、形が見えない。
       (D-076 の円弧は、箱の外へ出っぱっていたので見えていた。谷は箱の内側を切るため、
        同じようにはならない。**切った先に何があるか**まで見ないと、形にならない) */
  height:calc(var(--hd-flat) - var(--hd-dip));
  transition:height .2s ease-out}
/* 地 ── 下端は**緩やかな逆三角形(谷形)**。左右の端が高く、中央が下がる。

   🔴 なぜこの形か(D-077)
     サイト下部の「お問い合わせ」節の上端が、**中央が持ち上がった山形**である
     (`img/deco/07-roof-notch.svg`: 1920×120 の中で 端 y=66 → 中央 y=0。**深さ 66px**)。
     ヘッダーを谷形にすると、**ページの上下で形が対になる。**
     参考サイトの円弧とは別の形なので、模倣から離れてオリジナルになる。

   深さは **ヘッダーの高さの 25%**。
     1440px のとき 32.9px で、問い合わせ節の 66px の**ちょうど半分**になる。
     狭い画面ではヘッダー自体が低いので深さも一緒に浅くなり、傾きが急にならない。

   ⚠ SVG ではなく clip-path を選んだ理由
     (1) 画像を1つも増やさない(読み込みも増えない)
     (2) 幅に合わせて自動で伸びる。SVG を敷くと preserveAspectRatio の面倒が出る
     (3) **点の数が同じなので、縮むときに滑らかにつながる**
     (4) ヒーローの写真の上に乗るが、**切った外側は完全に透明**になる。
         半透明の重なりが生まれないので、境目に色ムラが出ない */
.hd-plate{position:absolute;left:0;right:0;top:0;height:var(--hd-flat);
  background:var(--kami);pointer-events:none;
  clip-path:polygon(0 0, 100% 0,
    100% calc(100% - var(--hd-dip)), 50% 100%, 0 calc(100% - var(--hd-dip)));
  transition:height .2s ease-out,clip-path .2s ease-out}

.hd-in{max-width:1160px;margin:0 auto;padding:0 20px;height:var(--hd-flat);
  position:relative;transition:height .2s ease-out}

/* ロゴ ── 画面の中央に絶対配置する。
   ⚠ 項目が左3・右4で非対称でも、ロゴの位置は真ん中のまま保たれる(司令裁定 T-081 B案)。 */
.hd-logo{position:absolute;left:50%;transform:translateX(-50%);top:22px;
  text-decoration:none;color:inherit;line-height:1;text-align:center;
  display:block;transition:top .2s ease-out}
/* タグライン(D-076 裁定1: 画像にせず CSS で直す)。
   参考サイトの実測値をそのまま当てた: 中央揃え / 太字 / 間隔 18px。
   ⚠ D-076 では 11px → 10px に下げていた。**タグラインの幅が屋号の幅を超えないため。**
   🔴 D-202: 10px → 14px(絶対の下限)。15字あり、ラベルの3条件を満たさない。
     ⚠ 14px では **屋号の幅(205.4px)に収める字間が存在しない**(字間0でも 210px)。
       D-076 の「屋号の幅を超えない」という条件は、14px では成立しない。
       条件を **「ナビ項目との空きを 24px 以上」** に置き換える(実測は R-202)。
     ⚠ 字間 0.3em → 0.1em。**幅の調整を、大きさではなく字間で行う。**
       0.3em のままだと 273px になり、1024px でナビとの空きが 6.9px しか残らない。 */
.hd-logo-sub{display:block;font-size:14px;font-weight:700;letter-spacing:.1em;
  line-height:1;color:#000;margin:0 0 18px;   /* D-171: ロゴ(img/logo/logo.png・純黒 #000 を測った)と同じ黒に(現地担当「ややグレーっぽい」)*/
  /* 字間は最後の1文字の右にも付く。その分だけ左にずらして、見た目の中心を合わせる */
  text-indent:.1em;
  transition:opacity .2s ease-out,height .2s ease-out,margin .2s ease-out}
.hd-logo-img{display:block;height:var(--hd-logo-h);width:auto;margin:0 auto;
  transition:height .2s ease-out}

/* メニュー ── 左3 +(ロゴのぶんの空き)+ 右4
   ⚠ 左右を「1fr ずつ」にしている。空きの箱を1つ挟むだけだと、
     左3・右4で文字数が違うぶん、空きの位置が中央からずれる。 */
.hd-nav{display:flex;align-items:flex-start;height:100%;padding-top:30px}
.hd-side{flex:1 1 0;min-width:0;display:flex;justify-content:space-evenly;align-items:flex-start}
.hd-gap{flex:0 0 auto;width:250px}      /* ロゴ(205px)+ 左右の余白 */
.hd-nav a{display:flex;flex-direction:column;align-items:center;
  color:var(--sumi);text-decoration:none;font-size:14px;letter-spacing:.1em;
  padding:0 8px;text-align:center}
.hd-ln{display:block;border-bottom:2px solid transparent;transition:border-color .2s ease-out}
.hd-nav a:hover .hd-ln{border-bottom-color:var(--gunjo);border-bottom-width:3px}

/* アイコン(D-078 で実物に差し替え)── 現地担当が用意した SVG 6枚。
   ⚠ 絵は `background-image` ではなく **mask** で敷いている。
     こうすると **色を CSS 側で決められる**(`background-color:currentColor`)。
     届いた SVG は `rgb(79,88,99)`(灰)で塗られていたが、mask なら中の色は無視される。
     文字と同じ `--sumi` になり、hover で色を変えることもできる。
   ⚠ 高さは CSS で決めている。参考サイトは指定が無く、絵の実寸がそのまま効いていた。
   ⚠ 潰れるときだけ 0.4秒。参考サイトはこの時間差(本体 0.2s / アイコン 0.4s)が
     「アイコンがゆっくり潰れる」に見えていた。それを再現している。
   ⚠ --ico-k は「見た目の大きさを揃えるための、絵ごとの微調整」。
     6枚とも 512×512 の枠いっぱいに描かれているが、**インクの面積は 22.8%〜47.0% と幅がある。**
     面積の平方根を「見た目の大きさ」とみなし、**中央値へ 1/3 だけ寄せた**(実測は R-078)。
     全部を面積で揃えると、細い絵(「?」)が巨大になる。寄せすぎない。 */
.hd-ico{display:block;width:var(--ico);height:var(--ico);margin-bottom:7.5px;
  --ico-k:1;
  background-color:currentColor;
  -webkit-mask:var(--ico-src) center / calc(100% * var(--ico-k)) no-repeat;
          mask:var(--ico-src) center / calc(100% * var(--ico-k)) no-repeat;
  flex:0 0 auto;
  transition:height .4s ease-out,margin-bottom .4s ease-out,opacity .4s ease-out}
.hd-ico[data-ico="works"]  { --ico-src:url(../img/ico/ico-works.svg);   --ico-k:.93 }
.hd-ico[data-ico="service"]{ --ico-src:url(../img/ico/ico-service.svg); --ico-k:1 }
.hd-ico[data-ico="price"]  { --ico-src:url(../img/ico/ico-price.svg);   --ico-k:1 }
.hd-ico[data-ico="flow"]   { --ico-src:url(../img/ico/ico-flow.svg);    --ico-k:1.03 }
.hd-ico[data-ico="faq"]    { --ico-src:url(../img/ico/ico-faq.svg);     --ico-k:1.05 }
.hd-ico[data-ico="company"]{ --ico-src:url(../img/ico/ico-company.svg); --ico-k:.99 }
.hd-ico[data-ico="contact"]{ --ico-src:url(../img/ico/ico-contact.png); --ico-k:1 }   /* D-188 / D-190: 封筒(現地担当が用意した toiawase.png・透明の背景)。「できる工事」と入れ替え */

/* ── ハンバーガーと引き出しメニュー(D-078)────────────────────
   ⚠ 参考サイトにも同じものがある(`.gnav_btn` 40×20px・右上 / `.gnav` は全画面)。
     時間も向こうと同じで、**帯が動くのは 0.4秒、面が出るのは 0.2秒**。
     この 0.4/0.2 は、アイコンが潰れる時間とヘッダーが縮む時間と同じである。 */
/* ⚠ 上下中央は「.hd-in の中央」ではない。
     .hd-in の高さは --hd-flat(谷の底まで)だが、**ボタンが乗っている端の白は
     --hd-flat から谷の深さを引いた高さしかない。**
     .hd-in の中央に置くと、その分だけ下にずれる(375px で約 9px)。 */
.hd-burger{display:none;position:absolute;right:12px;
  top:calc((var(--hd-flat) - var(--hd-dip)) / 2);transform:translateY(-50%);
  width:44px;height:44px;   /* 指で押す大きさ。線は中に 24px で描く */
  padding:0;border:0;background:transparent;cursor:pointer;z-index:2}
.hd-burger-bar{position:absolute;left:10px;width:24px;height:2px;border-radius:2px;
  background:var(--sumi);transition:transform .4s ease-out,opacity .4s ease-out}
.hd-burger-bar:nth-child(1){top:15px}
.hd-burger-bar:nth-child(2){top:21px}
.hd-burger-bar:nth-child(3){top:27px}
.hd-burger[aria-expanded="true"] .hd-burger-bar:nth-child(1){transform:translateY(6px) rotate(-35deg)}
.hd-burger[aria-expanded="true"] .hd-burger-bar:nth-child(2){opacity:0}
.hd-burger[aria-expanded="true"] .hd-burger-bar:nth-child(3){transform:translateY(-6px) rotate(35deg)}
.hd-burger:focus-visible{outline:2px solid var(--sumi);outline-offset:2px}

.hd-drawer{position:fixed;inset:0;z-index:80;
  background-color:var(--kami);background-image:var(--tex);background-size:var(--tex-size);
  /* ⚠ 紙の地紋は soft-light で混ぜて初めて「紙」になる。
       混ぜないと、灰色のノイズがそのまま出る(deco.css が body や .sec に付けているのと同じ指定)。
       ここを忘れて、引き出しが灰色の砂嵐になった。 */
  background-blend-mode:soft-light;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease-out,visibility 0s linear .2s}
.hd-drawer.is-open{opacity:1;visibility:visible;transition:opacity .2s ease-out,visibility 0s}
/* ⚠ D-079: 中央揃えをやめ、上寄せにした(「全体をやや上に」)。
     ヘッダーのぶん(最大 74px)を空けたところから並べる。 */
.hd-drawer-in{display:flex;flex-direction:column;justify-content:flex-start;
  height:100%;padding:84px 10% 32px;gap:2px;overflow-y:auto}
/* ⚠ 直接の子だけに効かせる(`>`)。
     D-079 で店の情報(<dl>)を足したとき、その中の電話番号(<a>)にもこの規則が当たっていた。
     `display:flex` は既定で左寄せなので、**親の text-align:center が効かず、電話番号だけ左に寄っていた。**
     セレクタを `>` にすると、メニューのリンクだけに当たる。 */
.hd-drawer-in > a{display:flex;align-items:center;gap:16px;
  padding:14px 8px;   /* 当たり判定を 48px 以上にする */
  color:var(--sumi);text-decoration:none;font-size:17px;letter-spacing:.12em;
  border-bottom:1px solid var(--sen)}
/* ⚠ D-080: `:last-child` は効かなくなっていた。
     店の情報(<dl>)を足したので、**最後の子は <a> ではなく <dl>** になったためである。
     その結果「会社概要」の下に線が残り、これが指摘された一本線だった。
     `:last-of-type` にすると、種類ごとの最後を指すので、<dl> を足しても効く。 */
.hd-drawer-in > a:last-of-type{border-bottom:0}
.hd-drawer-in a:focus-visible{outline:2px solid var(--sumi);outline-offset:2px}
/* 引き出しの中では、アイコンは文字の**左**に付く(参考サイトも同じ) */
.hd-drawer-in > a .hd-ico{width:22px;height:22px;margin-bottom:0}
/* 引き出しの下に置く店の情報(D-079)。**リンクではなく情報として常に出す。**
   電話番号だけは tel: にする(押せないと意味が無いため)。 */
/* ⚠ D-080: 区切りの線は外した。中身はすべて中央揃え。 */
.hd-drawer-info{margin-top:24px;padding-top:20px;text-align:center;
  font-size:14px;line-height:1.9;color:var(--sumi);letter-spacing:.06em}
.hd-drawer-info dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hd-drawer-info .di-name{display:block;font-size:16px;letter-spacing:.14em;margin-bottom:.4em}
.hd-drawer-info dd{margin:0}
/* ⚠ D-083: 押せる高さが 20px しかなかった。
     D-081 で `.hd-drawer-in a` の指定を `>` に絞ったとき、
     **この電話番号だけ padding も一緒に失っていた**(それまでは 14px の余白で 50px あった)。
     inline のままだと高さが作れないので inline-block にして、余白で 48px を確保する。
     ⚠ inline-block は親の text-align:center が効くので、中央揃えは保たれる。 */
.hd-drawer-info a{display:inline-block;padding:8px 20px;
  color:var(--sumi);text-decoration:none;font-size:17px;letter-spacing:.04em}
.hd-drawer-info .di-sub{color:var(--hai);font-size:14px}
/* メニューを開いている間は、後ろを動かさない */
body.is-locked{overflow:hidden}
/* ⚠ 開いている間は、ヘッダーを引き出しより上に出す。
     そうしないと **閉じるボタン(×)が引き出しの下に隠れて押せない。**
     参考サイトも同じで、ボタンとロゴだけが引き出しの上に出る。 */
body.is-locked .hd{z-index:90}

/* ── 縮んだ状態(JS が .is-fixed を付ける)───────────────── */
/* --hd-dip は「高さの 25%」なので、高さを変えるだけで谷も一緒に浅くなる */
.hd.is-fixed{--hd-flat:85px;--hd-logo-h:48px}
.hd.is-fixed .hd-logo{top:16px}
.hd.is-fixed .hd-logo-sub{opacity:0;height:0;margin:0;overflow:hidden}
.hd.is-fixed .hd-ico{height:0;margin-bottom:0;opacity:0}
.hd.is-fixed .hd-nav{padding-top:32px}

/* 動きを減らす設定のときは、**滑らかさだけを無くす。**
   高さが変わること自体は情報なので、変化そのものは残す。 */
@media (prefers-reduced-motion:reduce){
  .hd,.hd-plate,.hd-in,.hd-logo,.hd-logo-sub,.hd-logo-img,.hd-ico,
  .hd-burger-bar,.hd-drawer{
    transition-duration:0s}
  /* 徐々に出す代わりに、最初から出す(消さない) */
  .hero-kicker{animation:none;opacity:.9;transform:none}
}

@media (max-width:1100px){
  .hd-gap{width:230px}
  .hd-nav a{padding:0 4px;font-size:14px}
}
/* ナビが入らない幅では、ロゴだけにする(いままでと同じ考え方) */
@media (max-width:900px){
  .hd{--hd-flat:104px;--hd-logo-h:56px}
  .hd.is-fixed{--hd-flat:76px;--hd-logo-h:44px}
  .hd-nav{display:none}
  .hd-burger{display:block}
  .hd-logo{top:18px}
  .hd.is-fixed .hd-logo{top:14px}
}
/* スマホでは、ロゴの上の1行(対応エリア)を出さない(D-073 裁定 / T-075)。
   ⚠ 768px 未満だけ。それ以上の幅では残す。
   ・対応エリアはフッターと会社概要にも書いてあるので、情報としては失われない。 */
@media (max-width:767.98px){
  .hd{--hd-flat:74px;--hd-logo-h:44px}
  .hd.is-fixed{--hd-flat:60px;--hd-logo-h:36px}
  .hd-logo-sub{display:none}
  .hd-logo{top:14px}
  .hd.is-fixed .hd-logo{top:12px}
}

/* ── ヒーロー ──────────────────────────────────────── */
.hero{position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--maku)}
.hero-photo{position:absolute;inset:0;z-index:0}
/* ⚠ 仮の写真(D-058)。納品時に施工写真へ差し替える。
   ヒーローは参考サイトと同じく「明るい面」にした。
   幕は残すが、写真が明るいぶん薄くできる(下の --maku-a)。
   白文字のコントラストは、実際の写真の**最も明るい帯**で実測して決めた。 */
.hero-slides{overflow:hidden}
.hero-slide{position:absolute;inset:0;background-position:center 30%;
  background-size:cover;background-repeat:no-repeat;z-index:0}
.hero-slide.is-on{z-index:1}
.hero-in{position:relative;z-index:2;max-width:1000px;margin:0 auto;width:100%;
  padding:0 20px clamp(48px,7vw,90px)}
/* 幕は「文字ブロックからの固定長」で敷く。高さの割合に依存させない(DIGEST M節)
   🔴 D-062: 以前は top:-150px / 150px で終わる勾配だった。
      **勾配が終わる位置が、1行目(.hero-kicker)の上端とちょうど同じだった。**
      そのため1行目だけが薄い幕の下に置かれ、空の明るい写真ではAAを割っていた
      (D-062以前の 仮_空 でも 4.38 で、既に不足していた。誰も測っていなかっただけ)。
   → 勾配の終わりを、文字ブロックの 60px 上に引き上げた。
      「文字ブロックからの固定長」という考え方は変えていない。長さだけを直した。
      ⚠ 1行目の文字サイズや余白を変えたら、コントラストを測り直すこと。 */
.hero-in::before{content:"";position:absolute;left:-50vw;right:-50vw;top:-260px;bottom:-200px;
  background:linear-gradient(180deg,rgba(23,28,34,0) 0,rgba(23,28,34,var(--maku-a)) 200px,rgba(23,28,34,var(--maku-a)) 100%);
  z-index:-1}
/* 「Watanabe Painting」は、少し遅れて **徐々に** 出す(D-079)。
   ⚠ 時間はサイトの既存の数値から借りている。**新しい数値を増やさない。**
      出るのに 0.4秒(アイコンが潰れる時間と同じ)/ 待つのが 0.2秒(ヘッダーが縮む時間と同じ)。 */
.hero-kicker{color:#fff;font-size:clamp(22px,3.5vw,32px);line-height:1;margin:0 0 .1em;
  opacity:0;transform:translateY(6px);
  animation:kicker-in .4s ease-out .2s forwards}
@keyframes kicker-in{to{opacity:.9;transform:none}}
.hero-h1{color:#fff;font-size:clamp(26px,4.8vw,42px);line-height:1.4;margin:0 0 .5em;font-weight:400}
.hero-lead{color:#fff;opacity:.95;margin:0 0 1.6em;font-size:clamp(15px,2.2vw,18px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-note{color:#fff;opacity:.85;font-size:14px;margin:1.2em 0 0;letter-spacing:.06em}

/* ── ボタン ────────────────────────────────────────── */
/* ⚠ inline-block + text-align:center だと、**字間の最後の1文字ぶんが右に余る。**
   letter-spacing は最後の字の右にも付くため、見た目が左に寄る。
   flex で中央に置き、その1文字ぶんを text-indent で戻す。 */
.btn{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-align:center;letter-spacing:.18em;text-indent:.18em;
  padding:16px 30px;font-size:15px;transition:background-color .2s ease-out,color .2s ease-out}
.btn-tel{flex-direction:column;text-indent:0}
.btn-tel{background:var(--kami);color:var(--sumi);line-height:1.35}
.btn-tel:hover{background:var(--usu-l)}
/* 🔴 D-203(T-094): 12px → 13px。**同じ文「お電話でのご相談」が、お問い合わせの箱では
     13px(`.tel-box-label`)だった。**同じ文が2つの大きさで出るのは、どちらかが意図でない証拠。
   ⚠ 大きいほうへ揃える(下限を割る方向へ動かさない)。
   ⚠ 器は電話番号が決めており、内幅 151.9px。13px でも文字幅は 122.7px で 29.2px 余る(実測)。 */
.btn-tel-label{display:block;font-size:13px;letter-spacing:.18em;color:var(--hai)}
.btn-tel-num{display:block;font-size:22px;letter-spacing:.05em;color:var(--sumi);font-weight:500}
.btn-form{background:var(--gunjo);color:var(--sumi)}
.btn-form:hover{background:var(--gunjo-d)}
.btn-submit{background:var(--gunjo);color:var(--sumi);border:0;width:100%;cursor:pointer;
  font:inherit;font-size:16px;letter-spacing:.18em;padding:18px}
.btn-submit:hover{background:var(--gunjo-d)}

/* ── 節の共通 ──────────────────────────────────────────────────────────
   🔴 D-055: **地色は白一色ではなく、「紙」と「淡群青」の二分にした。**
   8hands の面積は 淡い水色36% / 白31% で、この二層が印象の3分の1を作っている。
   **濃い色の全幅の帯(旧 .sec-dark)は廃止した。**参考サイトに対応物が1本も無い。

   面の色は、地の**反対側**を取る(`--card`)。
   ・紙の節 → 面は淡群青(明)   ・淡群青の節 → 面は紙
   こうすると、どちらの節でも面が地から浮く。節ごとに書き分けなくてよい。
   ------------------------------------------------------------------------ */
.sec{
  padding:var(--sec-y) 0;
  --card:var(--usu-l);
  background-color:var(--kami);background-image:var(--tex);background-size:var(--tex-size);
}
.sec-usu{                            /* 淡群青の地。旧 .sec-dark の置き換え先 */
  --card:var(--kami);
  background-color:var(--usu);background-image:var(--tex);background-size:var(--tex-size);
}
/* ⚠ `.sec-en`(読み上げ用の英字 Greeting / Works …)は D-082 で全廃した。
   D-064 で画像を敷いたときに視覚的に隠し(`.vh`)、読み上げにだけ残していたもの。
   **英語見出しを視覚的に撤廃した以上、読み上げだけが読むのは不整合である。**
   「Greeting ごあいさつ」と、同じ内容を2回聞かせることにもなっていた。 */
.sec-h2{font-size:clamp(24px,3.9vw,36px);line-height:1.5;margin:0 0 .7em}
.sec-note{color:var(--hai);margin:0 0 2em;font-size:15px}
/* 🔴 D-202: 見出しの直後に来る注記だけ、上に空きを足す。
     見出しの背後のペンキ(`.sec-h2::before`)は、**見出しの下端より 43px 下まで垂れている**
     (1440px で実測)。そこに注記の1〜2文字目が乗り、灰の文字が黄色の上に来て
     **4.43:1** で AA を割っていた。⚠ これも D-202 以前からの不具合である。
     ⚠ ペンキ自体は動かさない。左端の基準(-1.305em)は D-086 で決めた恒久の値である。 */
.sec-h2 + .sec-note{margin-top:clamp(12px,1.8vw,30px)}
.center{text-align:center}
.note-sm{font-size:14px;color:var(--hai)}

/* プレースホルダの文章・欄。**未確定であることが見て分かる形にする** */
.ph-text{background:var(--card);border-left:4px solid var(--gunjo);
  padding:14px 18px;color:var(--sumi);font-size:15px}
/* 🔴 D-066: 未入力のセルの薄青を外した(料金の目安・会社概要)。
   **未入力であることは、【　】の括弧と灰色の文字で十分に分かる。**
   面を塗る必要は無かった。参考サイトの表もセルを塗っていない。 */
.ph-cell{color:var(--hai)}

/* 写真枠 */
/* 🔴 D-200: 45度の縞(`repeating-linear-gradient`)を**やめた**。
   ⚠ これが「薄い斜めの線」の正体だった(D-200 で実測・目視)。
     縁取りでも境界の線でもなく、**代表写真の枠の中身**だった。
   ⚠ 平らな色にしただけである。**枠であることは `.ph-label` の文字が伝える。** */
.ph{background:var(--usu-l);
  display:flex;align-items:center;justify-content:center;text-align:center}
.ph-label{color:var(--hai);font-size:14px;letter-spacing:.1em;line-height:1.8;padding:8px}
.ph-label small{display:block;font-size:14px}
/* 🔴 D-202: opacity:.85 を外した。灰(--hai)を .85 で薄めると **4.17:1** で AA を割る。
     ⚠ D-202 で文字を大きくしたから割ったのではない。**ずっと割っていた。**
       ページ全体を測る道具が無く、誰も測っていなかった(tools/verify_contrast_t001.py を新設)。 */

/* ── ごあいさつ ────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:36px;align-items:start}
.about-photo{aspect-ratio:4/5;min-height:260px}
/* 🔴 D-117: 枠(平らな色 + 文字)を、実際の写真の <img> に置き換えた。箱いっぱいに敷き、はみ出す分は切る。
   顔が切れないよう、上寄りを基準にする。 */
img.about-photo{display:block;width:100%;height:auto;object-fit:cover;object-position:center 20%}
.lead-lg{font-size:clamp(20px,3vw,28px);line-height:1.7;margin:0 0 1em}
/* 🔴 D-118: 代表のごあいさつの本文。長いので、後半は「続きを読む」で開く(<details>)。
   1文 = 1行の区切り(.ln)。段落のあいだに空きを入れる。 */
.greet p{margin:0 0 1.1em;font-size:15px;line-height:2}
/* D-119: トップの短い版から、全文のページへ。押す所は 48px 以上 */
.greet-link{margin:.6em 0 0}
.greet-link a,.sub-back-link{display:inline-flex;align-items:center;min-height:48px;color:var(--sumi);letter-spacing:.1em;text-underline-offset:.3em}
.greet-link a::after{content:"→";margin-left:.5em}
/* D-119: 会社概要のページ。ヘッダーの下に、ヒーローの代わりの余白を取る */
.sub-first{padding-top:clamp(36px,5vw,64px)}   /* ヘッダーは sticky で、上に重ならない(実測)。ふつうの節の余白(最大 120px)だと空きすぎるので詰めた */
.sub-back-btns{display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:center;align-items:center;margin:1em 0 0}
.greet-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:48px;
  padding:0 1.4em;margin:.2em 0 1.2em;border:1px solid var(--sumi);color:var(--sumi);background:transparent;
  font-size:15px;letter-spacing:.12em}
.greet-more>summary::-webkit-details-marker{display:none}
.greet-more>summary::after{content:"";width:.5em;height:.5em;margin-left:.9em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.greet-more[open]>summary::after{transform:translateY(.1em) rotate(-135deg)}
.greet-more>summary:focus-visible{outline:2px solid var(--sumi);outline-offset:3px}
.greet-close{display:none}
.greet-more[open] .greet-open{display:none}
.greet-more[open] .greet-close{display:inline}
.sign{margin:1.4em 0 0;letter-spacing:.12em}
.sign strong{font-weight:500;font-size:19px}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}.about-photo{aspect-ratio:3/2;min-height:0}}
/* 🔴 D-117: 狭い画面でも、人物の写真は縦長(4:5)のまま出す。横長(3:2)に切ると、腰から上が入らない。
   幅いっぱいにすると大きすぎるので、幅を抑えて中央に置く。 */
@media (max-width:760px){img.about-photo{aspect-ratio:4/5;width:min(100%,280px);margin-inline:auto}}

/* ── 節の背景写真(D-066)────────────────────────────────────────
   ④技術哲学+選ばれる理由 / ⑤できる工事 / ⑥工事の流れ の3面を、写真の上に置く。

   ⚠ **写真は未着。**いまはプレースホルダ。
     届いたら `--sec-bg-img:url(...)` を1行入れるだけで差し替わる。
     大きさと生成の指示は assets/ops/画像の推奨サイズ.md「§6 節の背景」。

   ⚠ **幕は必須。**ヒーロー(D-058)と同じ考え方だが、**極性が逆**である。
     ヒーローは白文字なので**濃い幕**を敷いた。
     ここは**濃い文字と白いカード**が乗るので、**紙色の幕**を敷いて明るく保つ。
     濃さは `--sec-maku-a`。**写真が届いたら、必ず実測して決め直す**([検証-1b])。 */
.bg-group.has-bg,.sec.has-bg{position:relative}
/* 🔴 `.sec{position:relative}`(deco.css)のせいで、節そのものが「位置指定あり」になっている。
   そのため **節の地色が、group の背景より後に描かれて覆ってしまう。**
   → group で包む場合は、**中の節の地色を透明にして、group 側で持つ。**
   (これを入れるまで、craft+reason の背景だけ何も見えなかった。service と flow は
    節の中に背景を置いているので、最初から見えていた) */
.bg-group.has-bg{background-color:var(--usu);
  background-image:var(--tex);background-size:var(--tex-size)}
.bg-group.has-bg > .sec{background-color:transparent;background-image:none}
.sec-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background-image:var(--sec-bg-img,none);background-size:cover;background-position:center;
  /* 札は**右下の隅**に置く。中央に置くと、カードや見出しの裏に隠れる */
  display:flex;align-items:flex-end;justify-content:flex-end;padding:0 20px 20px}
/* 幕。写真があってもなくても敷く(無いときは地色が少し明るくなるだけ) */
.sec-bg::after{content:"";position:absolute;inset:0;
  background:rgba(251,251,249,var(--sec-maku-a,.72))}
/* 写真が未着のあいだの見た目。**「ここに写真が入る」と分かる形にする。**
   🔴 D-200: ここも 45度の縞をやめ、平らな色にした。
   ⚠ いまこの規則に当たる要素は **0件**(3節とも `.bg-ready` が付いている)。
     ただし**宣言が残っていると、次に写真が未着の節を作ったときに縞が復活する。** */
.has-bg:not(.bg-ready) .sec-bg{ background-image:none; background-color:var(--usu-l) }
.sec-bg-label{position:relative;z-index:1;color:var(--hai);background:rgba(251,251,249,.86);
  padding:14px 22px;font-size:14px;letter-spacing:.1em;line-height:1.9;text-align:center;
  max-width:min(92%,520px)}
.sec-bg-label small{display:block;font-size:14px;opacity:.9;letter-spacing:.04em}
/* 写真が入ったら、プレースホルダの縞と札を消す */
.has-bg.bg-ready .sec-bg-label{display:none}

/* ⚠⚠ 3枚とも仮の背景です(D-067)。**AI生成。権利未確認。本番前に必ず差し替える。**
   ⚠ `url()` は**この CSS ファイルからの相対パス**で書く。
     カスタムプロパティの中の相対URLは、Chrome が「それを使っている CSS 基準」で解決するため、
     HTML の style 属性に書くと黙って表示されない(D-064 で実際に踏んだ)。 */
#craftreason{ --sec-bg-img:url(../img/bg/bg-paint-poster.jpg) }   /* D-115: 動画の最初の1コマ。動画が読めない・再生しないときに見える */
/* 🔴 D-115: 背景の動画。箱いっぱいに敷き、はみ出す分は切る。上に掛ける白い幕(.sec-bg::after)は写真のときと同じ */
.sec-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#service    { --sec-bg-img:url(../img/bg/仮_背景_できる工事_差し替え必須.jpg) }
/* D-125: #flow の節はトップから外した。仮の背景(工事の流れ)は使わなくなった */

/* ── 技術哲学の本文(D-066 の試作文)──────────────────────────── */
.craft-lead{font-size:clamp(18px,2.4vw,22px);line-height:1.9;margin:0 0 1.4em}
.craft-body{margin:0 0 1.2em;max-width:44em;margin-left:auto;margin-right:auto;font-size:15px}
.craft-body strong,.craft-lead strong{font-weight:500;color:var(--sumi)}
/* 🔴 D-113: チラシの黄色い塗り跡に当たる所。**黄色の地に墨の文字**(黄色は見出しの塗り跡と同じ #FAC302)。
   答えの行は、チラシの打ち出しに合わせて大きくした(18〜22px → 22〜32px)。 */
/* 🔴 答えの行は、どの幅でも1行に収める(現地担当の指定)。15字 × 字間 .09em が画面に入る大きさを、幅から決める(5vw) */
#craft .craft-lead{font-size:clamp(16px,5vw,32px);white-space:nowrap;font-family:"ZenOldMincho",serif;letter-spacing:var(--ls-head);line-height:1.7;margin-bottom:1em}
/* 🔴 同日の直し: 四角い黄色の地をやめ、**黄色い下線が左から右へ引かれる**形にした(現地担当の指示)。
   下線は背景の線形グラデーション1枚(単色)。太さ .36em・文字の下端に少し重ねる(マーカーで引いた線の見え方)。
   動きは style.css 末尾の「スクロールで現れる動き」と同じ仕組み(.rv-armed で 0 にして、.rv-in で 100% に伸ばす)。
   動かない環境・動きを減らす設定では、最初から引き終わった状態で出る。 */
.craft-lead strong.mark{font-weight:400;color:var(--sumi);padding:0 .08em;
  background-image:linear-gradient(#FAC302,#FAC302);background-repeat:no-repeat;
  background-position:0 92%;background-size:100% .36em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 「これは例文です」の注記。**本文と見分けが付く必要がある。** */
.ph-note{font-size:14px;color:var(--hai);letter-spacing:.06em;margin:2em 0 0}
.ph-note strong{font-weight:500;color:var(--sumi)}

/* Our Craft の見出しを中央に(D-079)。
   ⚠ `.sec-h2` は `display:inline-block` である。
     **inline-block に `margin:auto` は効かない**(自動中央寄せは block にしか働かない)。
     箱ごと中央に置くには、**親側で `text-align:center`** にする。
     こうすると背後のペンキ(.sec-h2::before)も箱に付いてくる。 */
#craft .wrap{text-align:center}
#craft .sec-h2{width:fit-content;text-align:center}

/* ── 選ばれる理由 ──────────────────────────────────── */
/* ⚠ 高さを揃えるには、これだけでは足りない。
     grid は **同じ段の中**では自動で揃うが、**段をまたぐと揃わない。**
     4枚が 3列に入ると 3+1 の2段になり、下の段だけ低くなる(実測 310.1 / 282.1)。
     `grid-auto-rows:1fr` で、すべての段を同じ高さにする。 */
/* 🔴 列数は「幅の帯」ごとに決め打ちにする(D-083 → D-084 で3段階に)。
     `auto-fit,minmax(260px,1fr)` だと、入らない幅で勝手に折り返す(1440 でも 3+1 だった)。

   🔴 D-084: **1枚の最小幅から列数を決める。**
     「768px 以上は4列」とした D-083 は、**768px で1枚が 155px** になり、
     本文が3〜4文字で折り返して 597px の縦長になった。
     4列が成り立つのは **1枚 ≧ 220px** から、つまり **画面幅 1024px 以上**である。
       1024px : (1024 - 40 - 28×3) ÷ 4 = 225px  ✅
        768px : ( 768 - 40 - 28×3) ÷ 4 = 155px  🔴
     768〜1023px は **2×2**(1枚 322px)。768px 未満は縦積み。 */
.reasons{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
  grid-auto-rows:1fr}
/* 高さを揃える(D-079)。grid の子は既定で行の高さいっぱいに伸びるが、
   **中身が上に寄ったままだと「揃っていない」ように見える。**
   カード自体を縦の flex にして、下端まで使い切る。 */
.reason{background:var(--card);padding:26px 24px 28px;position:relative;
  display:flex;flex-direction:column;height:100%}
/* ⚠ D-066 で入れた `padding-right:4.6em` は、右上の飾り番号を避けるためだった。
   D-079 で番号そのものを外したので、逃げ場も要らなくなった。 */
.reason-h3{font-size:18px;line-height:1.6;margin:0 0 .5em;color:var(--sumi)}
.reason p{margin:0;font-size:15px}
.reasons{align-items:stretch}

/* ── 施工事例(件数が多く見えるグリッド)──────────────── */
/* 🔴 D-062: 3列に固定した。
   以前は auto-fill で、1000px の器では **4列**になり 4+4+1 になっていた。
   事例は9件なので、3列だと 3×3 でちょうど埋まる。
   縞のプレースホルダのままでは、この歪みに気づけなかった。 */
.works-grid{list-style:none;margin:0 0 20px;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.work{background:var(--card)}
/* 🔴 D-062: 2:1 をやめた。
   2:1 は `hake-cell.svg` に合わせた比だったが、その刷毛は D-061 で事例から外した。
   **家形に抜くのに 2:1 は平たすぎて、家に見えない。**
   写真の実寸も 4:3 なので、4:3 なら上下をほとんど切らずに済む。 */
.work-ph{aspect-ratio:4/3;width:100%}
/* 写真を入れた枠。家形に切り抜くため、上の両角は落ちる。
   写真は 4:3 前後で枠は 2:1 なので、上下が切れる。**中央より少し下を残す。**
   屋根の稜線が家形の頂点あたりに来て、建物の下端が切れないための値(D-062で実測)。 */
/* ⚠ `display:block` を落とさないこと。`.work-ph` は <span> なので、
      これが無いとインラインのままになり、aspect-ratio も width も効かず、
      **高さ0で写真が消える。**(縞のプレースホルダは `.ph{display:flex}` で立っていた) */
.work-photo{display:block;background-size:cover;background-position:center 52%;
  background-repeat:no-repeat}
.work-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:10px 12px;font-size:14px}
.work-meta b{font-weight:500;color:var(--sumi);letter-spacing:.08em}
.work-meta span{color:var(--hai);font-size:14px}
.works-caption{font-size:14px;color:var(--hai);margin:0}
/* 🔴 D-062: 家を1軒ずつ少し傾ける。
   参考サイトの実測(`clients/t001/装飾要素一覧.md` §5)は
   **「8枚すべて角度が違う(±2〜6度)。整列していないことが効いている」。**
   ここまで写していなかった。整列した家形は、判で押したように見える。 */
.works-grid .work:nth-child(1) .work-photo{transform:rotate(-2.4deg)}
.works-grid .work:nth-child(2) .work-photo{transform:rotate(3.1deg)}
.works-grid .work:nth-child(3) .work-photo{transform:rotate(-4.6deg)}
.works-grid .work:nth-child(4) .work-photo{transform:rotate(2.2deg)}
.works-grid .work:nth-child(5) .work-photo{transform:rotate(-3.3deg)}
.works-grid .work:nth-child(6) .work-photo{transform:rotate(5.2deg)}
.works-grid .work:nth-child(7) .work-photo{transform:rotate(-2.8deg)}
.works-grid .work:nth-child(8) .work-photo{transform:rotate(4.1deg)}
.works-grid .work:nth-child(9) .work-photo{transform:rotate(-3.7deg)}
@media (max-width:520px){.works-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:760px){.works-grid{grid-template-columns:repeat(2,1fr);gap:16px}}

/* ── できる工事 ────────────────────────────────────── */
/* 🔴 列数は幅の帯ごとに決め打ち(理由と計算は .reasons と同じ)。 */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  grid-auto-rows:1fr}   /* 段をまたいでも高さを揃える(D-079)*/
.svc{background:var(--card);padding:26px 24px;
  display:flex;flex-direction:column;height:100%}   /* 高さを揃える(D-079)*/
.svc-h3{font-size:18px;margin:0 0 .5em;color:var(--sumi)}
.svc p{margin:0;font-size:15px}

/* ── 表(料金・会社概要)──────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 🔴 D-066: 表のセルから**薄青の地を外した。**
   参考サイト(8hands.jp)の `.table` を実測したところ、
     `border-top:2px solid #fff` / `border-bottom:2px solid #fff` / `padding:16px 40px`
   **セルに背景色の指定は1つも無かった。**区切りは**白い2pxの罫だけ**である。
   あちらは地が淡い水色なので、白い罫が「抜き」として効く。
   こちらは地が紙なので、白い罫は見えない。**同じ役割を `--sen` の細い罫が担う。**
   → **セルを塗るのをやめ、罫だけで分ける。**参考サイトと同じ構造になる。 */
table{border-collapse:collapse;width:100%;font-size:15px}
.price-table th,.price-table td,.company-table th,.company-table td{
  padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sen)}
.price-table thead th{background:var(--gunjo);color:var(--sumi);font-weight:500;letter-spacing:.1em;
  white-space:nowrap}
/* ⚠ D-084: 表の中の電話番号も 48px 以上にする(会社概要)。**34px しかなかった。** */
.company-table td a{display:inline-block;padding:11px 0}
/* ⚠ D-084: フッターの電話番号も 48px 以上にする。**20px しかなかった。**
     裁定は「会社概要の表」と「問い合わせ節」の2つを挙げていたが、
     **フッターにも電話番号があった**(こちらの D-083 の報告で数え漏らしていた)。
     裁定の理由「電話番号は押せないことが商売に直結する」がそのまま当たるので、同じ扱いにした。
     ⚠ フッターの**ナビのリンク**(27px)は、裁定どおり現状維持である。 */
.ft-addr a{display:inline-block;padding:12px 0}
.price-table tbody th,.company-table th{white-space:nowrap;font-weight:500;color:var(--sumi);
  width:9em}   /* 🔴 D-066: background:var(--usu-l) を外した(上の理由) */
.notes{margin:1.4em 0 0;padding-left:1.2em;font-size:14px;color:var(--hai)}
.notes li{margin-bottom:.4em}
@media (max-width:560px){
  .company-table th,.company-table td{display:block;width:auto;border-bottom:0}
  .company-table th{padding-bottom:2px}
  .company-table td{padding-top:2px;border-bottom:1px solid var(--sen)}
}

/* ── 工事の流れ ────────────────────────────────────── */
/* 🔴 D-079: PC は **5枚を必ず横一列**にする。
   `auto-fit,minmax(180px,1fr)` だと、入らない幅で勝手に折り返していた。
   「5列」と決め打ちにして、狭い幅では下のメディアクエリで縦に切り替える。 */
.flow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:stretch;
  grid-auto-rows:1fr}
.flow-step{background:var(--card);padding:24px 20px;position:relative;
  display:flex;flex-direction:column;height:100%}   /* 高さを揃える */
.flow-no{display:block;font-size:38px;line-height:1;color:var(--oka);margin-bottom:.1em;
  font-family:"ZenOldMincho",serif}   /* D-111: 38px の大きい数字なので明朝に戻した(`.deco` の Josefin Sans より後ろに置いて上書きする) */
.flow-h3{font-size:18px;margin:0 0 .4em;color:var(--sumi)}
.flow-step p{margin:0;font-size:14px;color:var(--sumi)}
/* スマホは縦に 1 から順に並べる(D-079)。5列は入らない。 */
@media (max-width:900px){ .flow{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ⚠ 1列のときは揃えない。**並ぶ相手がいないので、揃える意味が無い。**
     揃えると、短いカードに空きが増えるだけになる。 */
@media (max-width:560px){ .flow{grid-template-columns:1fr;grid-auto-rows:auto} }

/* ── よくある質問 ──────────────────────────────────── */
.faq{margin:0}
.faq dt{font-weight:500;font-size:15px;color:var(--sumi);
  padding:20px 0 6px;border-top:1px solid var(--sen)}
.faq dt::before{content:"Q．";font-family:"JosefinSans","NotoJP",sans-serif}
.faq dd{margin:0 0 6px;padding:0 0 18px 0;font-size:15px}
.faq dd::before{content:"A．";font-family:"JosefinSans","NotoJP",sans-serif;color:var(--hai)}

/* ── お問い合わせ ──────────────────────────────────── */
.sec-contact{--card:var(--kami);background-color:var(--soji);background-image:var(--tex);background-size:var(--tex-size)}
.contact-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;align-items:start}
.tel-box{background:var(--card);padding:28px 24px;text-align:center}
.tel-box-label{margin:0 0 .2em;font-size:13px;letter-spacing:.14em;color:var(--hai)}
/* ⚠ D-084: 押す所を 48px 以上にする。**電話は押せないと商売に直結する。**
     文字だけだと 34px しかなかった。上下の余白で高さを作る。 */
.tel-box-num{display:block;padding:8px 0;font-size:clamp(26px,4vw,32px);letter-spacing:.04em;
  color:var(--sumi);text-decoration:none;line-height:1.3}
.tel-box-sub{margin:.4em 0 0;font-size:14px;color:var(--hai)}
.form{background:var(--card);padding:26px 24px}
.form-notice{margin:0 0 18px;padding:10px 14px;background:#FDF3E7;border-left:4px solid #C87F25;
  font-size:14px;color:#4A3618}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;letter-spacing:.08em;margin-bottom:6px;font-weight:500}
.req{display:inline-block;margin-left:8px;background:var(--gunjo);color:var(--sumi);
  font-size:12px;letter-spacing:.08em;padding:2px 7px;font-weight:400}
.field input,.field textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;
  border:1px solid var(--hai);background:var(--kami);color:var(--sumi);border-radius:0}
.field textarea{resize:vertical}
.form-privacy{margin:14px 0 0;font-size:14px;color:var(--hai)}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ── フッター ──────────────────────────────────────────────────────────
   🔴 D-055: 墨の全幅の帯をやめ、**淡群青の地に墨の文字**にした。
   8hands のフッターも淡い水色が 80% を占め、濃い帯ではない(実測)。
   ------------------------------------------------------------------------ */
.ft{background-color:var(--usu);background-image:var(--tex);background-size:var(--tex-size);
  color:var(--sumi);padding:56px 0 96px;text-align:center}
.ft-logo{font-size:26px;letter-spacing:.16em;margin:0 0 .5em}
.ft-addr{margin:0 0 1.4em;font-size:14px;color:var(--sumi);line-height:2}
.ft-addr a{color:var(--sumi)}
/* 🔴 D-092(4): ナビの押す所を 48px にする。
   ⚠ 参考サイトは PC 15.0px / スマホ 13.0px(`line-height:1`・`a` に余白なし)だが、**写さない。**
     押す所の大きさは構造でも型でも動きでもない。**手を抜いた結果であって意匠の選択ではない。**
   ⚠ 段の数は変わらない(縦の余白を足すだけで、リンクの幅は変わらないため)。 */
.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-bottom:1.4em}
.ft-nav a{color:var(--sumi);text-decoration:none;font-size:14px;letter-spacing:.08em;
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 11px;position:relative}
.ft-nav a:hover{text-decoration:underline}
/* 項目間の1pxの縦罫(参考サイト main.css 1459-1470。`:last-child` は出さない)。
   ⚠ 折り返す幅では出さない。行末に宙に浮いた罫が残るため。
   ⚠ 罫が無くても項目は空きで分かれる。**区切りが罫でしか分からない形にはしない。** */
@media (min-width:768px){
  .ft-nav a:not(:last-child)::after{
    content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:1px;height:1.1em;background:#fff}
}

/* 🔴 D-092(3)(4): 対応エリアを箱にする。
   ⚠ 参考サイトは 白2px の枠 + 角丸5px + **白文字の見出し**(main.css 1428-1441)。
     白文字は写さない。**淡群青の地の上で 1.51:1 にしかならない**(AA 4.5 の 1/3)。
     白が 4.5:1 になるのは地の相対輝度 0.1833 以下だが、淡群青は 0.6464 [計算]。
   ⚠ 「明るく抜けた」印象は、白文字ではなく **白い枠 + 角丸 + 透けた箱** が作っている。
     枠を白のまま残し、文字だけ群青(5.18:1)にする。**新しい色は持ち込まない。** */
.ft-area{border:2px solid #fff;border-radius:5px;padding:16px 22px;
  max-width:min(100%,480px);margin:0 auto 1.4em;text-align:center}
.ft-area-ttl{font-size:15px;color:var(--sumi);margin:0 0 .4em;letter-spacing:.1em;line-height:1.5}
.ft-area p{font-size:14px;color:var(--sumi);margin:0;line-height:1.9}
.ft-copy{font-size:14px;color:var(--hai);margin:0}

/* ── 追従CTA(スクロールで出現)──────────────────────── */
.fixcta{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;gap:10px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease-out,transform .4s ease-out}
.fixcta.show{opacity:1;transform:none;pointer-events:auto}
.fixcta a{text-decoration:none;letter-spacing:.12em;box-shadow:0 6px 22px rgba(46,52,61,.22)}
.fixcta-tel{background:var(--kami);color:var(--sumi);padding:10px 18px;line-height:1.3;text-align:center}
.fixcta-cap{display:block;font-size:12px;letter-spacing:.16em;color:var(--hai)}
.fixcta-num{display:block;font-size:18px;color:var(--sumi);font-weight:500}
.fixcta-form{background:var(--gunjo);color:var(--sumi);padding:16px 22px;font-size:15px;
  display:flex;align-items:center}
.fixcta-form:hover{background:var(--gunjo-d)}
@media (max-width:760px){
  /* スマホは画面下部に固定。親指の届く位置 */
  .fixcta{left:0;right:0;bottom:0;gap:0;transform:translateY(100%)}
  .fixcta a{flex:1;box-shadow:none;border-radius:0;text-align:center;justify-content:center}
  .fixcta-tel{padding:12px 8px}
  .fixcta-form{padding:12px 8px}
  .ft{padding-bottom:120px}
}

/* 🔴 D-084: 768〜1023px は 2×2。**iPad の縦持ちがこの幅にあたる。**
   ⚠ この規則は、`.reasons` / `.svc-grid` の基本の指定より **後ろ**に置くこと。
     同じ強さ(クラス1つ)なので、**先に書くと基本の指定に負ける。**
     最初これを前に置いてしまい、768px でも4列のままだった。 */
@media (min-width:768px) and (max-width:1023.98px){
  .reasons,.svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* ── スマホの詰め(D-081)─────────────────────────────────────
   現地担当の指摘:「スマホで全ての要素が大きく、圧迫感がある。何度もスクロールする」

   🔴 詰めないもの(指令で明示された下限)
     ・本文の文字の大きさ(17px 以上)      ・コントラスト(AA 以上)
     ・押す所の大きさ(48px 以上)          ・一文一行(D-008)
     ・見出しの大きさ(h2)
   → **触ったのは「余白」と「行間」だけ**である。文字は1つも小さくしていない。

   ⚠ PC は変えない。768px 未満だけに効かせる。 */
@media (max-width:767.98px){
  /* 節の縦余白。64px → 34px */
  :root{ --sec-y:34px }
  /* 見出しの下の余白 */
  .sec-h2{ margin-bottom:.5em }
  .sec-note{ margin-bottom:1em }

  /* 本文の行間。1.9 → 1.75。**文字の大きさは変えていない。**
     一文一行にしてあるので、行間を詰めても行の切れ目は見失わない。 */
  body{ line-height:1.75 }

  /* カードの内側の余白と、カードどうしの間隔 */
  .reasons{ gap:14px }
  .reason{ padding:18px 16px 20px }
  .svc-grid{ gap:14px }
  .svc{ padding:18px 16px }
  .flow{ gap:12px }
  .flow-step{ padding:18px 16px }
  .works-grid{ margin-bottom:14px }

  /* 表(料金の目安・会社概要)の行の高さ。14/16 → 9/10 */
  .price-table th,.price-table td,
  .company-table th,.company-table td{ padding:9px 10px }
  .notes{ margin-top:1em }

  /* よくある質問 */
  .faq dt{ padding-bottom:6px }
  .faq dd{ padding-bottom:12px; margin-bottom:4px }

  /* その他の縦の間 */
  .craft-lead{ margin-bottom:1em }
  .lead-lg{ margin-bottom:.7em }
  .contact-grid{ gap:18px }
  .about-grid{ gap:18px }
  .works-caption{ margin-top:10px }

  /* 🔴 D-083: スマホでは **4枚を縦に積む。**
     横並びにも横スクロールにもしない(司令指示)。 */
  .reasons,.svc-grid{ grid-template-columns:1fr; grid-auto-rows:auto }

  /* 🔴 D-083: カードの中の文字を小さくする。
     **本文 17px → 15px。**参考サイト(8hands.jp)の本文も 15px である。
     ⚠ 14px 以下には下げない(年配の読者に厳しくなるため)。
     ⚠ 下げるのは **カードの中だけ**。節の本文(ごあいさつ・Our Craft など)は 17px のまま。
     根拠は reports/DESIGN_TOKENS.md「本文の大きさ」。 */
  .reason p,.svc p{ line-height:1.7 }   /* 大きさは全幅で 15px(D-084)。ここでは行間だけ */
  .reason-h3,.svc-h3,.flow-h3{ font-size:16px; margin-bottom:.3em }
  /* 文字が小さくなったぶん、内側の余白も詰める */
  .reason{ padding:16px 14px 18px }
  .svc,.flow-step{ padding:16px 14px }
  /* 工事の流れの飾りの数字。**本文ではないので詰めてよい** */
  .flow-no{ font-size:30px }
  .craft-body{ margin-bottom:1em }
}

/* ============================================================================
   署名要素: 刷毛でヒーローの写真を切り替える
   ・**絵は Claude Design 制作(DS-001/DS-002)。**`clients/t001/素材/刷毛/` が原本。

   🔴 D-061: 刷毛の適用先を **ヒーローの背景の切り替えだけ** に限定した。
      D-040 は「複数箇所で一貫して使う」と指示していたが、
      **参考サイト(8hands.jp)では、刷毛のマスクはヒーローの画像切り替えにしか
      使われていない。**見出し・ボタン・事例のグリッドには当たっていない。
      **テキストに当てると可読性が下がる。**参考サイトが当てていないのは、
      おそらく同じ理由である。代わりのアニメーションも入れない(参考サイトも入れていない)。

   ・切り替えの所要時間 **1.4秒 / steps(12)** は、参考サイトの実測値
     (`component.css` の `mask-play 1.4s steps(29)`。コマ数だけこちらの13コマに合わせた)。
   ・**比率別のスプライトを画面幅で切り替える。**
     1コマを要素幅まで引き伸ばすため、比率が違うと横に潰れる(D-046)。
     実測した引き伸ばし: 0.70〜1.26倍。すべて許容範囲。
   ・⚠ スプライトSVGには **`preserveAspectRatio="none"` が要る。**
     無いと既定の `meet` でレターボックスになり、
     **塗り終わりが余白に落ちて要素が丸ごと消える**(D-058)。
   ============================================================================ */
.hero-slide.is-painting{
  z-index:2;
  -webkit-mask-image:url(../img/hake-hero-square.svg);  mask-image:url(../img/hake-hero-square.svg);
  -webkit-mask-size:calc(var(--frames)*100%) 100%;      mask-size:calc(var(--frames)*100%) 100%;
  -webkit-mask-repeat:no-repeat;                        mask-repeat:no-repeat;
  -webkit-mask-position:0 0;                            mask-position:0 0;
  -webkit-animation:paint-play var(--dur) steps(12) forwards;
          animation:paint-play var(--dur) steps(12) forwards;
}
/* 画面幅で比率別のコマ絵に差し替える(ヒーローの高さは 88svh 上限 760px) */
@media (max-width:600px){
  .hero-slide.is-painting{-webkit-mask-image:url(../img/hake-hero-portrait.svg);
    mask-image:url(../img/hake-hero-portrait.svg)}
}
@media (min-width:951px){
  .hero-slide.is-painting{-webkit-mask-image:url(../img/hake-hero-wide15.svg);
    mask-image:url(../img/hake-hero-wide15.svg)}
}
@media (min-width:1651px){
  .hero-slide.is-painting{-webkit-mask-image:url(../img/hake-hero-wide26.svg);
    mask-image:url(../img/hake-hero-wide26.svg)}
}
@-webkit-keyframes paint-play{from{-webkit-mask-position:0 0}to{-webkit-mask-position:100% 0}}
@keyframes paint-play{from{mask-position:0 0}to{mask-position:100% 0}}

@supports not ((mask-image:url(x.svg)) or (-webkit-mask-image:url(x.svg))){
  /* マスクが使えない環境では、素直に重ねて切り替える */
  .hero-slide.is-painting{opacity:0;transition:opacity var(--dur) ease;z-index:2}
  .hero-slide.is-painting.on{opacity:1}
}

/* 動きを減らす設定: 一切動かさず、最終状態を即表示 */
@media (prefers-reduced-motion:reduce){
  /* 🔴 切り替えを止め、1枚目だけを出す(D-061)。
     動きを止めるだけでなく、**何が見えている状態で止まるか**まで決める。 */
  .hero-slide.is-painting{
    -webkit-mask-image:none!important;mask-image:none!important;
    -webkit-animation:none!important;animation:none!important;
    transition:none!important;display:none!important}
  .fixcta{transition:none}
}

/* .sp-br は狭い画面でだけ改行する。
   広い画面で2行になると見出しの縦横比が変わり、コマ絵の比率とずれる(D-048) */
.sp-br{display:none}
@media (max-width:560px){
  body{font-size:16px}
  .sp-br{display:inline}
}

/* ============================================================================
   🔴 D-112: スクロールで現れる動き(2026-10-09・現地担当の指示「随所で凝りたい」)

   足したのは3種類。**どれも1回だけ動いて止まる。**
     A1 節の見出しの黄色い塗り跡が、刷毛で塗られて出る(ヒーローと同じコマ送りのマスク)
     A2 カード(選ばれる理由・できる工事・工事の流れ)が、左から順に現れる
     A3 施工事例の写真が、順に現れる

   🔴 隠すのは「これから画面に入る直前」だけにしてある
     JS が、画面の下 30% まで近づいた要素に `.rv-armed` を付け(ここで初めて隠す)、
     画面に入ったら `.rv-in` を付ける(ここで動く)。
     → JS が動かない環境・動きを減らす設定・まだ遠くにある要素は、**最初から見えている。**
     → 「隠したまま出てこない」が起きる場所を、画面のすぐ下の帯だけに限っている。

   ⚠ 見出しの**文字**は動かさない。動くのは後ろの塗り跡だけである(読めない時間を作らない)。
   ⚠ 刷毛の素材は img/hake-cell.svg(13コマ・1コマ 2:1。0% → 100%)。
     塗り跡の箱は 9.6em × 5.4em(1.78:1)なので、横に 0.89倍 に縮めて使っている。
   ============================================================================ */
.sec-h2.rv-armed::before{
  -webkit-mask-image:url(../img/hake-cell.svg);         mask-image:url(../img/hake-cell.svg);
  -webkit-mask-size:calc(var(--frames)*100%) 100%;      mask-size:calc(var(--frames)*100%) 100%;
  -webkit-mask-repeat:no-repeat;                        mask-repeat:no-repeat;
  -webkit-mask-position:0 0;                            mask-position:0 0}
.sec-h2.rv-armed.rv-in::before{
  -webkit-animation:paint-play .8s steps(12) .1s forwards;
          animation:paint-play .8s steps(12) .1s forwards}

.rv-group.rv-armed>*{opacity:0;transform:translateY(18px)}
.rv-group.rv-armed.rv-in>*{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--rv-i,0)*90ms)}
.rv-group>:nth-child(2){--rv-i:1} .rv-group>:nth-child(3){--rv-i:2} .rv-group>:nth-child(4){--rv-i:3}
.rv-group>:nth-child(5){--rv-i:4} .rv-group>:nth-child(6){--rv-i:5} .rv-group>:nth-child(7){--rv-i:6}
.rv-group>:nth-child(8){--rv-i:7} .rv-group>:nth-child(9){--rv-i:8}

/* 下線が引かれる動き(#craft の「中間マージン」)。0.25秒待ってから 0.7秒で引く */
.rv-line.rv-armed .mark{background-size:0 .36em}
.rv-line.rv-armed.rv-in .mark{background-size:100% .36em;
  transition:background-size .7s cubic-bezier(.3,.7,.2,1) .25s}

/* ============================================================================
   🔴 D-114: 「選ばれる理由」— 3枚・縦に1列(2026-10-09・現地担当の指示)
     「改行を指定のとおりに。どの画面の大きさでも同じ見え方で」。
     → 横に並べると1枚の幅が足りず、指定の行が入らない(いちばん長い行は 29字)。
       **どの幅でも縦1列**にして、1行ずつ <span class="ln"> で区切った。
     ⚠ それでも、幅 560px 未満の画面では、長い4行が画面より長くなり、その行の中でもう1回折り返す
       (字を 14px より小さくすれば入るが、読める下限を割るので、しない)。
     ⚠ `.reasons,.svc-grid` の共通の指定(列数)より強くするため、#reason を付けている。
   ============================================================================ */
#reason .reasons{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;max-width:640px;margin-inline:auto}
#reason .reason{padding:24px 28px 26px}
#reason .reason-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:20px;line-height:1.6;margin:0 0 .5em}
#reason .reason p{font-size:15px;letter-spacing:.08em;line-height:1.9}
.ln{display:block}

/* 🔴 D-116: 「できる工事」も、同じ並べ方にそろえる(4枚・縦に1列・見出しは明朝の太字で「選ばれる理由」と同じ大きさ) */
#service .svc-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;max-width:640px;margin-inline:auto}
#service .svc{padding:24px 28px 26px}
#service .svc-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:20px;line-height:1.6;margin:0 0 .5em}
#service .svc p{font-size:15px;letter-spacing:.08em;line-height:1.9;margin:0}
#service .svc .svc-list{margin-bottom:1.1em}   /* 箇条書きと、下の一文のあいだの1行ぶんの空き */
/* 🔴 問いかけの節の本文も、指定の改行にそろえる。狭い画面では字と字間を詰めて、1行に入る字数を増やす
   (いちばん長い行は 25字。14px より小さくはしない) */
#craft .craft-body{letter-spacing:.08em}
@media (max-width:560px){
  #reason .reason{padding:18px 16px 20px}
  #reason .reason-h3{font-size:18px}
  #reason .reason p{font-size:14px;letter-spacing:.02em;line-height:1.8}
  #service .svc{padding:18px 16px 20px}
  #service .svc-h3{font-size:18px}
  #service .svc p{font-size:14px;letter-spacing:.02em;line-height:1.8}
  #craft .craft-body{font-size:14px;letter-spacing:0;line-height:1.9}
  /* 見出しは、どの幅でも2行(11字 + 11字)。幅 320px でも1行 11字が入る大きさに、幅から決める */
  #craft .sec-h2{font-size:clamp(19px,6.2vw,30px)}
}

/* 動きを減らす設定: 一切動かさず、出来上がった状態を即表示(JS も付けないが、CSS でも二重に守る) */
@media (prefers-reduced-motion:reduce){
  .sec-h2.rv-armed::before{-webkit-mask-image:none!important;mask-image:none!important;
    -webkit-animation:none!important;animation:none!important}
  .rv-group.rv-armed>*{opacity:1!important;transform:none!important;transition:none!important}
  .rv-line.rv-armed .mark{background-size:100% .36em!important;transition:none!important}
}

/* ============================================================================
   🔴 D-124: 差し色を青から黄へ(2026-10-14・現地担当の指示)
     「青を使用している部分を、黄色に。「中間マージン」のアンダーラインや、h2背景のペンキと似た色で統一」
     ・黄(#FAC302)は明るく、白地の上の文字には使えない(1.6)。**文字は墨にして、黄は下線・面に使う。**
     ・カードの見出し・強調の文字には、「中間マージン」と同じ黄の下線(マーカー)を敷く。
   ============================================================================ */
.reason-h3>span.mk,.svc-h3>span.mk,.flow-h3>span.mk,
.craft-body strong,.ph-note strong,.work-meta b{
  background-image:var(--ki-line);background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
a{text-decoration-color:var(--gunjo);text-decoration-thickness:2px}
/* D-124: 質問(dt)は行いっぱいの箱なので、下線を敷くと太い帯になる(絵を見て外した)。代わりに「Q．」を黄の丸の中に置く */
.faq dt::before{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;margin-right:.6em;
  border-radius:50%;background:var(--gunjo);color:var(--sumi);font-size:.85em}

/* ============================================================================
   🔴 D-125: 工事の流れのページ(flow.html)。参照サイトの「工事の流れ」の構造と寸法をなぞった。
     参照の実測(loops.css / main.css):
       ・手順1つ: 最大 860px・中央 / 左に 86px の空き / 下に 40px / 手順の間 16px
       ・番号の丸: 48px・左 -80px / 番号と番号を縦の線(3px・角丸)でつなぐ。線は丸の中心(左 28px)から下へ
       ・写真: 最大 248px・左に回り込み・右に 40px・角丸 16px
       ・枠: 960px 以内・二重線の見出し
       ・題の帯: 高さ 520px(1080px 以下 320px / 767px 以下 184px)・和文の題 + 小さな欧文の札
       ・767px 以下: 左の空き 40px / 丸 32px / 写真は回り込みをやめて上に置く・角丸 8px
     色は D-124 のとおり(黄の面に墨の文字)。番号の丸は黄、縦の線は黄。
   ============================================================================ */
.page-ttl{display:flex;align-items:center;justify-content:center;height:520px;padding:40px 20px;text-align:center;
  background:var(--usu) var(--page-ttl-img,none) center/cover no-repeat}   /* 写真が届いたら --page-ttl-img:url(...) を1行足す。
     ⚠ 最初は紙の質感(--tex)を敷いたが、単独では濃い灰色の網に見えたので外した(絵を見て直した) */
.page-ttl-in{margin:0;line-height:1.5;font-weight:400}
.page-ttl-jp{display:block;margin-bottom:16px;font-family:"ZenOldMincho",serif;font-size:41px;line-height:1.26;letter-spacing:.11em;color:var(--sumi)}
.page-ttl-en{display:inline-block;padding:6px 16px;font-family:"JosefinSans","NotoJP",sans-serif;font-size:12px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;border-radius:4px;background:var(--sumi);color:#fff}
@media (max-width:1080px){.page-ttl{height:320px}}
@media (max-width:767px){.page-ttl{height:184px}.page-ttl-jp{font-size:33px;margin-bottom:8px}}

.flow-page .flow-lead{display:block;width:max-content;max-width:100%;margin-inline:auto;text-align:center}
.flow-list{list-style:none;margin:40px 0 0;padding:0;counter-reset:none}
.flow-item{position:relative;max-width:860px;margin:0 auto 16px;padding:0 0 40px 86px}
.flow-item:not(:last-child)::before{content:"";position:absolute;top:60px;left:28px;width:3px;height:calc(100% - 56px);
  border-radius:2px;background:var(--gunjo)}
.flow-ttl{position:relative;margin:0 0 16px;line-height:1.4;font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:24px;letter-spacing:.06em}
.flow-num{position:absolute;top:-6px;left:-86px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:24px;background:var(--gunjo);color:var(--sumi);font-family:"JosefinSans","NotoJP",sans-serif;font-size:17px;line-height:1;letter-spacing:0}
.flow-text p{margin:0 0 1em;font-size:16px;line-height:2}
.flow-text b.mk-b{font-weight:700;background-image:var(--ki-line);background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.clearfix::after{content:"";display:block;clear:both}
.flow-photo{float:left;width:248px;max-width:40%;aspect-ratio:4/3;margin:4px 40px 12px 0;border-radius:16px;overflow:hidden}
.flow-photo.ph{display:flex;align-items:center;justify-content:center;text-align:center}
.flow-photo img{display:block;width:100%;height:100%;object-fit:cover}
.flow-box{clear:both;max-width:960px;margin:24px 0 8px;padding:28px 32px;background:var(--usu-l)}
.flow-box-ttl{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 16px;font-size:18px;letter-spacing:.08em;font-weight:700}
.flow-box-ttl::before,.flow-box-ttl::after{content:"";width:23px;height:6px;border-top:2px solid var(--gunjo-d);border-bottom:2px solid var(--gunjo-d)}
.flow-box ul{margin:0;padding-left:1.3em}
.flow-box li,.flow-box p{font-size:15px;line-height:1.9;margin:0 0 .3em}
.flow-btn{margin-top:1.2em}
.flow-end{text-align:center;margin:24px 0 0}
@media (max-width:767px){
  .flow-item{padding:0 0 20px 40px;margin-bottom:8px}
  .flow-item:not(:last-child)::before{top:34px;left:15px;height:calc(100% - 37px)}
  .flow-ttl{margin-bottom:8px;font-size:19px}
  .flow-num{top:-2px;left:-40px;width:32px;height:32px;border-radius:16px;font-size:14px}
  .flow-photo{float:none;width:100%;max-width:none;margin:2px 0 8px;border-radius:8px}
  .flow-text p{font-size:15px;line-height:1.9}
  .flow-box{padding:18px 16px}
}

/* ============================================================================
   🔴 D-126(2026-10-14)
   ① ヒーローの見出しを画像に。黒い文字の画像を、写真の上では白にする(invert)。
   ② 問いかけの節に人物の絵。広い画面では本文の左に添え、狭い画面では見出しの上に小さく置く。
   ③ 問いかけの本文を大きく(15px → 16〜19px)。段落のあいだを空ける。
   ============================================================================ */
.hero-h1 .hero-copy{display:block;width:clamp(220px,30vw,400px);height:auto;filter:invert(1)}
#craft .wrap{position:relative}
/* D-130: パソコン用の問いかけに添える人物の絵(c1ef939 の指定のまま) */
.naze-person{display:block;height:150px;width:auto;margin:0 auto 6px}
@media (min-width:1024px){
  .naze-person{position:absolute;left:max(0px,calc(50% - 470px));top:0;height:280px;margin:0}
}
#craft .craft-body{font-size:clamp(15px,4.2vw,19px);line-height:1.9;margin:0 auto 1.3em;width:max-content;max-width:100%}   /* 段落の箱を文字の幅に詰める(人物の絵と箱が重ならないように) */

/* ============================================================================
   🔴 D-129(2026-10-14): ヒーローと問いかけの場面(D-128 を現地担当の指示で組み直した)
   ・ヒーロー: 見出しを中央に大きく。4行が左から順に現れる(時間で動く。読み込んだときに1回)
   ・ヒーローと次の節の境目: 線が出ないよう、次の節の上端をぼかす
   ・問いかけ: 画面の中央に大きく → 問いが浮き出る → **ローラーが問いを黄色で塗りつぶす** →
     その上に「答えは、/「中間マージン」/です。」が3行で左から現れる →
     答えが上へずれ、本文が画面いっぱいに現れる
   ・JS が html に .story-on を付けたときだけ場面にする(動きを減らす設定・JS なし・枠の中・縦に長い窓ではふだんの並び)
   ・進み具合は JS が渡す: --s1 人物 / --s2 問い / --s3 ローラー / --pt 塗った幅(0〜1)/ --a0〜--a2 答えの3行 /
     --s6 答えが上へ・本文へ / --b0〜--b3 本文 / --up 答えを上げる量(px)
   ============================================================================ */
/* 🔴 D-130(2026-10-14): **この場面はスマホ(767px 以下)だけ。**パソコンは c1ef939(場面を入れる直前)の形に戻した(現地担当の指示)。
   ・HTML にパソコン用(.pc-only)とスマホ用(.sp-only)の両方を置き、幅で片方を隠す。
   ・JS も 767px 以下のときだけ .story-on を付ける。 */
.sp-only{display:none}
@media (max-width:767px){
  .pc-only{display:none!important}
  .sp-only{display:block}
  span.scroll-cue.sp-only{display:inline}
  h1.hero-h1.sp-only{display:block}
  /* ── ヒーロー ── */
  .scroll-cue{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);color:#fff;
    font-family:"JosefinSans","NotoJP",sans-serif;font-size:14px;letter-spacing:.3em;padding-top:46px}   /* 下限 14px */
  .scroll-cue::before{content:"";position:absolute;left:50%;top:0;width:1px;height:38px;background:rgba(255,255,255,.75);
    animation:cue 1.8s ease-in-out infinite;transform-origin:top}
  .hero{align-items:center}
  .hero-in{display:flex;justify-content:center;padding-bottom:0}
  /* D-131: 縦書きの見出し。縦に長いので、幅は画面の幅と高さの小さいほうで決める */
  /* D-138: 1.5倍にした(現地担当の指示。27.2vw,21.7svh → 40.8vw,32.55svh)。
     ⚠ ヒーローはヘッダー(56px)の下から始まり、高さは画面いっぱいなので、そのまま中央に置くと画面の中心より 56px 下になる
       (390×800 で測った: 見出しの中心 455px / 画面の中心 400px)。ヘッダーを含めた画面の中央に来るよう、56px 上げる */
  .hero-h1{margin:0;width:min(40.8vw,32.55svh);position:relative;top:-56px}
  /* D-137: 見出しの動画(1400×900・段違いの縦書き)。文字は 横 38.2〜61.8%・縦 10.8〜87.6%(最後のコマで測った値)。
     その周りを少し残して 横 36〜64%・縦 9〜90% を窓にし、はみ出しを隠す。黒は screen で消す(下の注記) */
  .hero-vwrap{display:block;position:relative;width:100%;aspect-ratio:392/729;overflow:hidden}
  /* D-139: 列ごとに切り抜いて、右の列から順に浮かび上がらせる。
     列の境目は、画像(392px 幅)の中で測った列のすき間の真ん中: 110.5 / 200.5 / 281.5px → 28.19% / 51.15% / 71.81% */
  .hero-col{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
    animation:col-in 1.1s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.3s + var(--c) * .55s)}
  .hero-col[style*="--c:0"]{clip-path:inset(0 0 0 71.81%)}
  .hero-col[style*="--c:1"]{clip-path:inset(0 28.19% 0 51.15%)}
  .hero-col[style*="--c:2"]{clip-path:inset(0 48.85% 0 28.19%)}
  .hero-col[style*="--c:3"]{clip-path:inset(0 71.81% 0 0)}
  /* ⚠ 黒を消す合成(screen)を、写真と幕の上に効かせるための層の組み方(撮って2回直した):
       ・動画そのものに当てると、.hero-in(z-index:2)が層を区切っていて、黒い四角が残った。
       ・.hero-in 全体に当てると、文字の後ろの暗い幕(.hero-in::before)まで消え、白い文字が読みにくくなった。
     → 層の区切りを .hero に移し(isolation)、.hero-in は区切らない(z-index:auto)。
       幕は写真(z-index:0)の上の 1、動画の窓は 2 にして、窓に screen を当てる */
  .hero{isolation:isolate}
  .hero-in{z-index:auto}
  .hero-in::before{z-index:1}
  .hero-vwrap{z-index:2;mix-blend-mode:screen}


  /* ── ふだんの並び(場面にしないとき)── */
  .naze-center{position:relative}
  .naze-q{position:relative;width:min(560px,94%);margin:0 auto}
  .naze-qp{display:block;width:100%;height:auto}
  .naze-qb{position:absolute;left:0;top:0;width:100%;height:auto}
  .qln{display:block}
  #craft-sp .naze-q-txt{position:absolute;left:50%;top:2%;transform:translateX(-50%);width:max-content;max-width:96%;margin:0;
    text-align:center;font-size:clamp(19px,5vw,32px);line-height:1.55}
  #craft-sp .naze-q-txt::before{content:none}
  /* 答えの画像(1400×900)。3行の位置は 行1 14.8〜33.7% / 行2「中間マージン」40.2〜59.6% / 行3 67.0〜85.4%(透明でない所を測った値)*/
  .naze-a{position:relative;width:min(420px,72%);margin:40px auto 30px;aspect-ratio:1400/900;isolation:isolate}
  .naze-a-ln{position:absolute;inset:0;width:100%;height:100%}
  .naze-a-ln[style*="--i:1"],.naze-a-ln[style*="--i:2"]{display:none}   /* 場面でないときは1枚で足りる */
  /* 「中間マージン」の後ろの黄色。見出しと同じ絵(h2-paint.svg)。
     ⚠ 絵は左下 → 右上の斜めの帯で、縦の中央の高さでは箱の 12〜84% にしか黄色が無い(測った値)。
       → 中央の帯が行(画像の 2.4〜97.4%)を覆うよう、画像の 132% の幅にして左へ 14% ずらす。
       縦は 62%(絵の本来の比より少しつぶす。70% では1行目の「、」と3行目にかかった)。斜めの両端は、1行目の右の空き・3行目の左の空きに逃げる */
  .naze-a-paint{position:absolute;z-index:-1;left:-14%;width:132%;top:50%;height:62%;transform:translateY(-50%);
    background:url(../img/deco/h2-paint.svg) center / 100% 100% no-repeat}
  .naze-body{margin-top:8px}

  /* D-129: 背景の動画を外したので、地を紙の色にする(淡い黄 + 紙の質感だと、質感だけが灰色に浮いて見えた) */
  #craftreason.bg-group.has-bg{background:var(--kami)}
  /* ── 境目をぼかす(場面にするときも、しないときも)── */
  #craftreason{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 180px);mask-image:linear-gradient(to bottom,transparent 0,#000 180px)}

  /* ── 場面にするとき ── */
  html.story-on .hero{position:sticky;top:0;z-index:0;min-height:100svh;opacity:var(--hero-o,1)}
  /* D-158(2026-10-15・現地担当「最初の時点ですでに下部がぼやけている」): 重ねる量を 180px → 見出しの分(74px の 3/4)にした。
     ヒーローは見出しの下から 100svh あるので、一番下の 55.5px は画面の外。重ねる量をそれと同じにすると、
     この節の上端(透け始め)がちょうど画面の下端に来て、最初の画面ではぼやけない。ヒーローは貼りつく(sticky)ので、
     下へ送れば透ける帯はこれまでどおりヒーローの上を上がってくる。
     ⚠ スマホの見出しの高さ(768px 未満の --hd-flat)を変えたら、ここの 74px も変える */
  html.story-on #craftreason{z-index:1;margin-top:calc(74px * -.75)}
  /* D-158: 行き道でも SCROLL を出す(画面の外に出ていた)。位置は帰り道と同じ(画面の上からの距離をそろえる) */
  html.story-on .scroll-cue{bottom:calc(22px + 100svh - min(88svh,760px))}
  html.story-on #craft-sp.story{height:860svh;padding:0}   /* D-145: 最後に白で塗り戻す区間を足した(760 → 860svh) */   /* D-133: 選ばれる理由を場面に入れ、フェードアウトまでの間も延ばしたので 560 → 760svh */
  html.story-on .story-stage{position:sticky;top:0;height:100svh;overflow:hidden;padding-top:72px;box-sizing:border-box}
  /* D-144: 中央は上部の帯を含めた画面全体で取る(現地担当の指示・恒久)。前は帯の下の範囲の中央(+36px)だった */
  html.story-on .naze-center{position:absolute;left:50%;top:50%;width:var(--qw);height:var(--qh);
    transform:translate(-50%,calc(-50% - var(--up,0) * 1px)) scale(calc(1 - var(--s6,0) * var(--shrink,0)));transform-origin:50% 0}
  html.story-on .naze-q{position:absolute;inset:0;width:auto;margin:0;
    clip-path:circle(var(--cr,2000px) at 50% 50%)}   /* まるが縮むと、その外は消える */
  /* その場で浮き出る(下から上がらない): 透明 → 不透明・ぼかし → くっきり・わずかに大きく → 等倍 */
  html.story-on .naze-qp{opacity:var(--s1,0);filter:blur(calc((1 - var(--s1,0)) * 8px));transform:scale(calc(.96 + var(--s1,0) * .04))}
  html.story-on .naze-qb{opacity:var(--s1b,0);filter:blur(calc((1 - var(--s1b,0)) * 8px));transform:scale(calc(.96 + var(--s1b,0) * .04))}
  html.story-on #craft-sp .naze-q-txt{font-size:calc(var(--qw) * .058)}
  html.story-on .qln{opacity:var(--qk,0);filter:blur(calc((1 - var(--qk,0)) * 6px))}
  html.story-on .qln[style*="--j:0"]{--qk:var(--q0)} html.story-on .qln[style*="--j:1"]{--qk:var(--q1)}
  html.story-on .naze-a{position:absolute;left:50%;top:50%;width:min(calc(var(--qw) * 1.02),calc(100vw / 1.36));margin:0;transform:translate(-50%,-50%)}   /* 黄色(132%)が画面からはみ出さない幅 */
  html.story-on .naze-a-ln{display:block!important}
  /* 3行を1行ずつ左から。上下の帯で切り分け、右側を進み具合で開く */
  html.story-on .naze-a-ln[style*="--i:0"]{clip-path:inset(0 calc(100% - var(--a0,0) * 100%) 63.5% 0)}
  html.story-on .naze-a-ln[style*="--i:1"]{clip-path:inset(36.5% calc(100% - var(--a1,0) * 100%) 36.5% 0)}
  html.story-on .naze-a-ln[style*="--i:2"]{clip-path:inset(63.5% calc(100% - var(--a2,0) * 100%) 0 0)}
  /* 黄色は、見出しと同じ刷毛のコマ(hake-cell.svg・13コマ)を、スクロールの量で進める */
  html.story-on .naze-a-paint{
    -webkit-mask-image:url(../img/hake-cell.svg);mask-image:url(../img/hake-cell.svg);
    -webkit-mask-size:calc(var(--frames) * 100%) 100%;mask-size:calc(var(--frames) * 100%) 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:calc(var(--pf,0) * 100% / 12) 0;mask-position:calc(var(--pf,0) * 100% / 12) 0}
  html.story-on .naze-body{position:absolute;left:0;right:0;bottom:0;top:var(--body-top,40%);display:flex;flex-direction:column;justify-content:center;
    padding:0 20px;margin:0}
  html.story-on #craft-sp .naze-b{font-size:var(--body-fs,19px);line-height:1.85;margin:0 auto .9em;
    opacity:var(--bk,0);transform:translateY(calc((1 - var(--bk,0)) * 20px))}
  html.story-on .naze-b[style*="--k:0"]{--bk:var(--b0)} html.story-on .naze-b[style*="--k:1"]{--bk:var(--b1)}
  html.story-on .naze-b[style*="--k:2"]{--bk:var(--b2)} html.story-on .naze-b[style*="--k:3"]{--bk:var(--b3)}
}
/* 🔴 D-131(2026-10-14・現地担当の指示): ローラーをやめ、次の順にした(スマホだけ)
   人物が浮き出る → 吹き出しが浮き出る → 問いの1行目 → 2行目 → **白いまるが中央へ縮んで、絵と問いを消す** →
   答えの画像(現地担当)が1行ずつ左から・「中間マージン」の後ろに見出しと同じ黄色いペンキ → 答えが上へ → 本文(字を小さく)
   JS が渡す: --s1 人物 / --s1b 吹き出し / --q0 --q1 問いの2行 / --cr まるの半径(px)/
   --a0〜--a2 答えの3行 / --pf ペンキのコマ(0〜12)/ --s6 答えが上へ / --b0〜--b3 本文 */
/* 🔴 D-132(2026-10-14・現地担当の指示・スマホだけ):
   ・問いかけの場面の終わりで、答えと本文がフェードアウトし、「選ばれる理由」が現れる(--fo は JS が渡す)
   ・「選ばれる理由」: 見出しを外し(HTML で .pc-only)、3つを画面の中央に。カードの地は外して、文字と黄の下線だけにした(ミニマル)
   ・「できる工事」: 背景を現場の動画にした(.sec-bg.sp-only)。上に掛ける幕は写真のときと同じ */
@media (max-width:767px){
  html.story-on .naze-center,html.story-on .naze-body{opacity:calc(1 - var(--fo,0))}
  /* 画面の高さいっぱいにするのは、場面が動いているとき(.story-on)だけ。
     ⚠ 検査の道具はページを縦に長い枠(数千 px)で開くので、100svh がその高さまで伸び、次の節が絵の外へ押し出された */
  /* D-133: 場面が動いているときは、選ばれる理由の .wrap を JS が場面の中(.naze-reason)へ移す。#reason に残るのは仕切りの曲線だけ */
  html.story-on #reason{padding:0}
  .naze-reason{display:none}
  html.story-on .naze-reason{display:flex;position:absolute;inset:0;padding:0 20px;   /* D-144: 帯を含めた画面の中央 */
   flex-direction:column;justify-content:center;
    opacity:calc(var(--rv,0) * (1 - var(--ro,0)));pointer-events:none}
  html.story-on .naze-reason .wrap{padding:0;width:100%}
  html.story-on .naze-reason .reasons{display:grid;grid-template-columns:1fr;gap:28px;max-width:640px;margin:0 auto;padding:0;list-style:none;text-align:center}
  html.story-on .naze-reason .reason{background:none;box-shadow:none;border:0;padding:0}
  html.story-on .naze-reason .reason::before,html.story-on .naze-reason .reason::after{content:none}
  html.story-on .naze-reason .reason-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:18px;line-height:1.6;margin:0 0 .4em}
  html.story-on .naze-reason .reason p{font-size:14px;letter-spacing:0;line-height:1.75;margin:0}
  html.story-on .naze-reason .ln{display:block;word-break:keep-all;overflow-wrap:anywhere}
  /* 中に入れたので、下から上がる出方(.rv-group)は使わない。場面のフェードインだけにする */
  html.story-on .naze-reason .rv-group.rv-armed>*{opacity:1;transform:none;transition:none}
  #reason .reasons{gap:44px;text-align:center}
  #reason .reason{background:none;box-shadow:none;border:0;padding:0}
  /* D-134: 仕切りは、濃い黄の曲線1本だけにする(現地担当の指示)。
     選ばれる理由の下の丘(薄い黄・濃い黄・白の3層 + 木)は隠し、できる工事の上端に曲線を置く。
     曲線より上は紙の色で塗ってあるので、動画の背景は曲線のところから始まって見える */
  #reason .hills-wrap{display:none}
  #service{padding-top:calc(clamp(48px,14vw,96px) + 28px)}
  #service img.divider-curve{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  #service > .wrap,#service > .svc-stick > .wrap{position:relative;z-index:2}
  /* D-136: 選ばれる理由の終わりの余白を少し詰める(現地担当の指示)。できる工事を 48px 上へ重ねる(重なる所は場面の下の空白) */
  /* D-136 の重ね(-48px・z-index:2)は D-147 で置き換えた(下の #service の指定)*/
  /* ⚠ z-index:2 が要る: 上の塊(#craftreason・場面のとき z-index:1)の紙の地が、重ねた 48px の中の曲線を覆い隠し、
       仕切りが直線に見えた(現地担当の指摘・2026-10-15。撮った絵で、境目が左右どこでも同じ高さだったことで確かめた) */
  /* 本文は下限 14px を守る(検査器 verify_font_floor)。いちばん長い行(28字)はスマホの幅に入りきらないので、
     その行の中で折り返す。そのとき1〜2字だけ次の行にこぼれないよう、行の中を均等に分ける(text-wrap:balance) */
  #reason .reason p{font-size:14px;letter-spacing:0}
  /* 言葉の途中で分けない(「お／見積もり」と分かれた)。分けてよい所は HTML の <wbr>(読点のあと)だけにする。
     それでも入らない場合に備えて overflow-wrap:anywhere を残す */
  #reason .reason .ln{word-break:keep-all;overflow-wrap:anywhere}
  #reason .reason::before,#reason .reason::after{content:none}
  #service{--sec-bg-img:url(../img/bg/bg-paint-poster.jpg)}
}
/* 🔴 D-138(2026-10-15・現地担当の指示・スマホだけ): 問いかけを、Canva の文字の動画 + 背景の動画にした(人物と吹き出しは外した)
   文字は動画の 横 38.0〜61.9%・縦 7.6〜89.9%(全文がそろったコマで測った)。窓は 横 36〜64%・縦 6〜92% */
@media (max-width:767px){
  .naze-scene{position:relative;background:#0b2a3a;padding:24px 0;overflow:hidden}
  .naze-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  #craft-sp .naze-q-txt{position:relative;margin:0 auto;width:min(60vw,26svh);padding:0;transform:none;left:auto;top:auto;max-width:none}
  #craft-sp .naze-q-txt::before{content:none}
  .naze-qwrap{display:block;position:relative;width:100%;aspect-ratio:392/774;overflow:hidden;mix-blend-mode:multiply}
  .naze-qv{position:absolute;left:-128.571%;top:-6.977%;width:357.143%;height:auto}
  html.story-on .naze-qwrap{opacity:0;transition:opacity .2s}   /* D-152: 再生が始まるまで隠す(全文の poster の写り込み)*/
  html.story-on #craft-sp.q-on .naze-qwrap{opacity:1}
  /* 文字の後ろの白いかすみ。⚠ 背景の動画には黒いローラーの柄・赤い部分があり、黒い文字が重なると読めない瞬間があった(撮って見た)。
     白 58% を敷くと、背景がどんな色でも、かすみの上の地は灰色 148 以上になる(真っ黒の上で 255×0.58)。
     黒い文字との差は 6:1 前後になり、AA(4.5)を割らない。縁は blur でぼかし、四角に見せない */
  .naze-haze{position:absolute;inset:-100px;pointer-events:none;
    background:radial-gradient(ellipse closest-side,rgba(255,255,255,.62) 85%,rgba(255,255,255,0) 100%)}
  /* ⚠ 最初は四角(blur)にしたが、白い四角がはっきり見えた(撮って見た)。楕円にして縁を消した。
       文字は右上から左下へ段違いに並ぶので、窓の四隅にも文字がある。四隅でも 62% が残る大きさにした
       (窓の半分 104×205px に対して楕円の半径 204×305px。四隅は半径の 84% の位置 = 85% より内側) */
  .naze-qwrap{z-index:1}
  html.story-on .naze-scene{position:absolute;inset:0;padding:0;display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;opacity:var(--s1,0)}   /* D-144: 帯を含めた画面の中央。D-140: まるの切り抜きはやめた(ペンキの面で塗り替える) */
}
/* 🔴 D-140 / D-141(2026-10-15・現地担当の指示・スマホだけ): 背景の動画とかすみを外し、ローラーで塗る動きで問いを塗り消す
   ・塗り跡(.rs)4本: 幅 52vw・高さ 150svh。25vw おきに並べ、上り(/)と下り(\)を交互に 5度傾ける。
     ⚠ 隣どうしは傾きが逆なので、端で 2×(75svh×tan5°)≒ 13vw 開く。重なり(52−25 = 27vw)がそれより大きいので、すき間は出ない
   ・塗り跡は、要素の下から上へ伸びる(--k)。下りの2本は 180度回してあるので、画面では上から下へ伸びる
   ・かすれは mask(roller-stroke.png)。要素の上端(= 塗り終わり側)ほどかすれる
   ・色は横に濃淡(ローラーの両端は押しつけが弱く濃くなる)。4本が塗り終わったら --wo で引く */
@media (max-width:767px){
  .naze-scene{background:var(--kami)}
  .naze-roll{display:none}
  html.story-on .naze-scene{opacity:calc(var(--s1,0) * (1 - var(--qoff,0)))}
  html.story-on .naze-roll{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  /* D-145: 黄色の塗りは引かずに、答え・本文・選ばれる理由の地にする(z-index 0 = 文字の後ろ)。
     ⚠ 問いの文字(.naze-scene)より手前にする必要があるので、問いは z-index:-1 側に置く */
  html.story-on .naze-scene{z-index:-1}
  html.story-on .story-stage{isolation:isolate}
  html.story-on .naze-center,html.story-on .naze-body,html.story-on .naze-reason{z-index:1}   /* 黄色の地(0)の上に文字 */
  /* D-147 → D-149: 最後は、黄色を塗った塗り跡そのものを同じ道で消していき、消えた所から真下の「できる工事」(カード・背景の動画)が見える。
     ・#service を場面の最後の部分の真下に重ねる(場面より下の重なり順)。場面と節の地は透明にし、紙の色の地は .nm3 が持つ(黄色を塗り終わったら消す)
     ・D-147 では別に作った穴の形(390×800 に焼き込んだ画像)を使ったが、画面の縦横比が違うと黄色の道とずれ、
       先端も画面に水平だったので「まっすぐ横に残る」黄色ができた(現地担当の指摘)。D-149 で塗り跡そのものを消す形にした */
  html.story-on .nm{position:absolute;inset:0}
  /* D-149: 穴の形(別に作った画像)はやめた。黄色を塗った塗り跡そのものを、同じ道で消していく(下の .rs の消しゴム)。
     紙の色の地は、黄色が画面を塗り終わったら(--bo = 1)消す。そこから下は、黄色(とその下の埋めた塗り跡)だけが地になる */
  html.story-on .nm3{background:rgba(251,251,249,calc(1 - var(--bo,0)));isolation:isolate}
  html.story-on #craftreason.bg-group.has-bg{background:transparent}
  /* D-148: カードを止める仕組みを sticky にした(JS で毎回押し戻していたのでブルブル揺れた・現地担当の指摘)。
     ・#service を「最後の1画面 + とどまる長さ(.svc-run = 130svh)」だけ上へ重ねる
     ・中身(.svc-stick)は、節の頭が画面の上端に来たら止まり、.svc-run のぶんスクロールしても動かない。そのあと普通に流れる
     ・130svh = 場面の送り量 760svh × 17%(ローラーが通り始める 83% から最後まで)*/
  html.story-on #service{margin-top:calc(-100svh - 130svh);z-index:0;padding-top:0}
  html.story-on #service .svc-stick{position:sticky;top:0;padding-top:64px;padding-bottom:var(--sec-y);min-height:100svh;box-sizing:border-box}   /* 止まっている間、動画の背景が画面の下まで届くように */   /* D-150: 96 → 64px(帯の下端 45px のすぐ下から。4枚を1画面に収めるため)*/   /* 最初のカードが上部の帯(約 72px)に隠れないように */
  /* 節の下の余白は .svc-stick の中に移す。節の側に残すと、動画の背景が届かず、節の地(淡い黄)が帯になって見えた(撮って見た) */
  html.story-on #service{padding-bottom:0}
  .svc-run{display:none}
  html.story-on #service .svc-run{display:block;height:130svh}
  /* 節の見出しは出さない(現地担当の指示で除去)。白い曲線の仕切りも、このつなぎ方とぶつかるので出さない */
  html.story-on #service .svc-stick > .wrap > .sec-h2,html.story-on #service img.divider-curve:not(.divider-bottom){display:none}
  /* D-145: 「中間マージン」の後ろの黄色いペンキは外す(黄色の地とぶつかる・現地担当の指示) */
  html.story-on .naze-a-paint{display:none}
  /* D-146: 下線は外し、見出しを少しだけ大きくした(18 → 20px・現地担当「白の下線は微妙」) */
  html.story-on .naze-reason .reason-h3>span.mk{background-image:none}
  html.story-on .naze-reason .reason-h3{font-size:20px}
  html.story-on .rs{position:absolute;top:-25svh;width:60vw;height:150svh;left:calc(var(--i) * 25vw - 17.5vw);
    background:url(../img/deco/roller-shade.png) 0 0 / 100% 100% no-repeat,
      linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);
    /* 3枚の mask を重ねる(全部が不透明な所だけ見える):
       ① 消しゴムの先端(roller-edge-down.png。--e で下から上へ。塗ったのと同じ道で消える・D-149)
       ② 塗りの先端(roller-edge.png・毛先のぎざぎざ。--k で下から上へ) ③ かすれ(roller-stroke-*.png) */
    -webkit-mask-image:url(../img/deco/roller-edge-down.png),url(../img/deco/roller-edge.png),var(--rsk);
            mask-image:url(../img/deco/roller-edge-down.png),url(../img/deco/roller-edge.png),var(--rsk);
    -webkit-mask-size:100% 200%,100% 200%,100% 100%;mask-size:100% 200%,100% 200%,100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 calc(var(--e,0) * 100%),0 calc(var(--k,0) * 100%),0 0;mask-position:0 calc(var(--e,0) * 100%),0 calc(var(--k,0) * 100%),0 0;
    -webkit-mask-composite:source-in,source-in,source-over;mask-composite:intersect,intersect,add}
  /* D-149: 黄色のかすれのすき間を埋める塗り跡(同じ置き方・同じ色・すき間を埋めた形 roller-solid-*.png)。黄色の真下に敷く。
     黄色を塗り終わったあと(--sb = 1)から出す。消しゴムも同じ(すき間から下の節が透けないように) */
  html.story-on .naze-roll-s{opacity:var(--sb,0)}
  html.story-on .naze-roll-s .rs{background:linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);--rsk:var(--rss)}
  /* D-142: 傾きを 5 → 4度にゆるめ、塗り跡ごとに違うかすれ・蛇行(roller-stroke-0〜3.png)を当てる */
  html.story-on .rs[style*="--i:0"]{transform:rotate(4deg);--k:var(--k0);--rsk:url(../img/deco/roller-stroke-0.png);--e:var(--e0);--rss:url(../img/deco/roller-solid-0.png)}
  html.story-on .rs[style*="--i:1"]{transform:rotate(176deg);--k:var(--k1);--rsk:url(../img/deco/roller-stroke-1.png);--e:var(--e1);--rss:url(../img/deco/roller-solid-1.png)}
  html.story-on .rs[style*="--i:2"]{transform:rotate(4deg);--k:var(--k2);--rsk:url(../img/deco/roller-stroke-2.png);--e:var(--e2);--rss:url(../img/deco/roller-solid-2.png)}
  html.story-on .rs[style*="--i:3"]{transform:rotate(176deg);--k:var(--k3);--rsk:url(../img/deco/roller-stroke-3.png);--e:var(--e3);--rss:url(../img/deco/roller-solid-3.png)}
}
/* 🔴 D-150(2026-10-15・現地担当の指示・スマホだけ): できる工事のカード4枚が、1画面に収まるように。
   項目を1行ずつ並べるのをやめ、「 / 」区切りで横に並べる(項目の途中では折り返さない)。カードの余白も少し詰める。
   ⚠ 戻すとき: タグ t001-svc-1行ずつ(コミット 4d7c194)がその状態。この塊を消し、HTML の .bul のくくりはそのままでよい */
@media (max-width:767px){
  #service .svc-list .ln{display:inline;white-space:nowrap}
  #service .svc-list .bul{display:none}
  /* ⚠ 項目の中は折り返さない(nowrap)が、項目の間では折り返せるようにする。
       区切りを項目の中(nowrap の中)にだけ置くと、行のどこにも折り返せる所がなくなり、カードが画面より広がった(529px・測った) */
  /* 「/」は前の項目の後ろにつける(行の頭に「/」が来ないように)。その後ろの空白でだけ折り返す */
  #service .svc-list .ln:not(:last-child)::after{content:"\00a0/ ";white-space:normal;color:var(--hai)}
  #service .svc-list{line-height:1.75}
  #service .svc-grid{gap:12px}
  #service .svc{padding:14px 16px 15px}
  #service .svc-h3{margin-bottom:.25em}
  #service .svc .svc-list{margin-bottom:.45em}
  /* 下の一文は、言葉の途中で分けない(「お答えしま／す。」と1字こぼれた)。分けてよいのは読点のあとの <wbr> だけ */
  #service .svc-note .ln{word-break:keep-all;overflow-wrap:anywhere}
}
/* D-150: 背の低い画面(高さ 740px 以下)では、カードの内側とカードの間をさらに詰める。文字の大きさは変えない(本文の下限 14px)*/
@media (max-width:767px) and (max-height:740px){
  #service .svc-grid{gap:8px}
  #service .svc{padding:10px 14px 11px}
  #service .svc-h3{font-size:17px}
}
/* D-150: いちばん小さい画面(幅 340px 以下・高さ 700px 以下)では、行間と左右の余白も詰める。文字は 14px のまま */
@media (max-width:340px) and (max-height:700px){
  #service .svc-list,#service .svc p{line-height:1.6}
  #service .svc{padding:9px 12px 10px}
  html.story-on #service .svc-stick .wrap{padding-left:12px;padding-right:12px}
  #service .svc-note .ln{word-break:normal}   /* 1字こぼれより、行が増えるほうを避ける */
}
/* 🔴 D-151(2026-10-15・現地担当の指示・スマホだけ)
   ・できる工事のカード一覧を、上部の帯を含めた画面の中央に(止まっている間)
   ・できる工事と、よくある質問の間に、曲線の仕切り(D-134 の曲線を上下反転)
   ・よくある質問・お問い合わせの見出しを中央に。よくある質問の答えは「。」で改行 */
@media (max-width:767px){
  html.story-on #service .svc-stick{display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:0}
  img.divider-bottom{display:none}
  html.story-on #service img.divider-bottom{display:block;position:absolute;left:0;bottom:-1px;top:auto;width:100%;
    height:clamp(48px,14vw,96px);transform:scaleY(-1);z-index:1;pointer-events:none}
  #faq .sec-h2,#contact .sec-h2{display:table;margin-left:auto;margin-right:auto}
  .faq dd .fl:not(:first-child){display:block}
}
/* 🔴 D-153(2026-10-15・現地担当の指示・スマホだけ): 帰り道 = 行き道を一度通ったあと(と、動きを減らす設定)の、動かない並び。
   行き道の雰囲気を残す: 問い(紙の地)→ 黄色の地に 答え・本文・選ばれる理由 → 曲線の仕切り → できる工事(動画の背景)→ 曲線 → よくある質問
   ・黄色の地の上端は、ローラーの毛先のぎざぎざ(roller-edge.png)
   ・「中間マージン」の後ろのペンキと、選ばれる理由の下線は出さない(行き道と同じ)。できる工事の見出しも出さない */
.divider-curve.divider-y{display:none}
.naze-q-ret{display:none}
@media (max-width:767px){
  #service .sec-h2{display:none}
  html:not(.story-on) #craft-sp{padding:0}
  /* D-157(2026-10-15・現地担当の指示): 帰り道のヒーローは画面いっぱい(88svh だと一番下に紙の色が少し見えた)。
     SCROLL は今の位置のまま(下げると字が見えなくなる)。伸ばした分だけ下からの距離を足す。
     ヒーローは見出しの下から始まる。スマホの見出しが場所を取るのは --hd-flat(74px)の 3/4 = 55.5px(幅600で実測 56px)。
     ⚠ スマホの見出しの高さ(768px 未満の --hd-flat)を変えたら、ここの 74px も変える */
  /* ⚠ 上限 1100px(実際のスマホは届かない)。検査の道具は縦に数千 px の窓で開くので、上限がないとヒーローがその高さまで伸び、
       本文が撮影範囲の外へ押し出された(verify_bg_contrast が「測定窓が空」で止まった・観察 #345 と同じ型)*/
  html:not(.story-on) .hero{min-height:min(calc(100svh - 74px * .75),1100px)}
  html:not(.story-on) .scroll-cue{bottom:calc(22px + min(calc(100svh - 74px * .75),1100px) - min(88svh,760px))}
  html:not(.story-on) .naze-scene{padding:72px 0 64px}
  /* D-154: 帰り道の問いは横書きの画像。動画の縦の切り抜きは出さない。白は multiply で紙の色になじませる */
  html:not(.story-on) .naze-qwrap{display:none}
  html:not(.story-on) #craft-sp .naze-q-txt{width:auto}
  /* 節の上端は 180px かけて透ける(境目をぼかす)。横書きの画像は背が低く、上の行が透けて薄く見えた。
     帰り道だけ、透ける帯を 96px に縮め、問いはその下から始める */
  /* D-156: 「なんで」の上下の余白がまだ多い(現地担当)。透ける帯を 40px に縮め、問いはそのすぐ下から */
  html:not(.story-on) #craftreason{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}
  /* D-155: 問いと答えの画像を小さくし(現地担当「もう少し小さくていい」)、その分だけ上下を詰める */
  html:not(.story-on) #craft-sp .naze-scene{padding:48px 0 0}
  html:not(.story-on) .naze-q-ret{display:block;width:min(68%,330px);height:auto;margin:0 auto;mix-blend-mode:multiply}
  html:not(.story-on) .naze-center,html:not(.story-on) .naze-body,html:not(.story-on) #reason{background:#F3C01E}
  html:not(.story-on) #craftreason #reason{background:#F3C01E}
  /* D-156(2026-10-15・現地担当の指示): 紙の色 → 黄色の仕切りは、黄色 → できる工事 と同じ曲線(divider-curve.svg・実行担当が引いたもの)。
     高さもそちらと同じ。上が紙の色で塗られた形なので、黄色の節の上端に重ねる。答えは曲線のいちばん深い所(高さの約 73%)より下から。
     ⚠ D-155 では ShapeDividers.com の形をそのまま使ったが、その形は利用条件が確認できず使わないと決めていた(R-133 §4・divider-curve.svg の注記)。D-156 で外れた */
  html:not(.story-on) .naze-center{--wv:clamp(48px,14vw,96px);padding:calc(var(--wv) * .73 + 20px) 0 4px}
  html:not(.story-on) .naze-center::before{content:"";position:absolute;left:0;right:0;top:-1px;height:var(--wv);z-index:3;pointer-events:none;
    background:url(../img/deco/divider-curve.svg) 0 0 / 100% 100% no-repeat}
  html:not(.story-on) .naze-a{width:min(300px,58%);margin:0 auto 12px}
  html:not(.story-on) .naze-a-paint{display:none}
  html:not(.story-on) .naze-body{padding:4px 20px 28px;margin:0}
  html:not(.story-on) #craft-sp .naze-b{font-size:14px;line-height:1.85;margin:0 auto 1em}
  html:not(.story-on) #reason{padding:36px 0 calc(clamp(48px,14vw,96px) + 32px)}
  html:not(.story-on) #reason .reason-h3>span.mk{background-image:none}
  html:not(.story-on) #reason .reason-h3{font-size:20px}
  html:not(.story-on) #reason .reasons{gap:32px}
  /* 黄色から、できる工事(動画)への仕切り。曲線より上を黄色で塗った版を出し、紙の色の版は隠す */
  html:not(.story-on) #service img.divider-curve:not(.divider-y):not(.divider-bottom){display:none}
  html:not(.story-on) #service img.divider-y{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  html:not(.story-on) #service{padding-top:calc(clamp(48px,14vw,96px) + 24px);padding-bottom:calc(clamp(48px,14vw,96px) + 24px)}
  html:not(.story-on) #service img.divider-bottom{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:clamp(48px,14vw,96px);transform:scaleY(-1);z-index:1;pointer-events:none}
}
/* 🔴 D-160(2026-10-15・現地担当の指示・スマホだけ): TAP 版
   ・止めている間(html.tap-lock)はページを動かさない(JS でも指の動きを止めている)
   ・次のタップを待っている間(html.tap-wait)だけ、画面の下に「TAP」の合図を出す */
.tap-cue{display:none}
@media (max-width:767px){
  /* ⚠ overflow:hidden は使わない。ページ全体を止めると、画面に貼りつく仕組み(ヘッダー・場面)まで止まり、ヘッダーが消えた(撮って見た)。
       止めるのは JS(指の動き・ホイールを止め、位置を保つ)だけにする */
  html.tap-lock,html.tap-lock body{overscroll-behavior:none}
  html.story-on .tap-cue{display:flex;position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:20;transform:translateX(-50%);
    flex-direction:column;align-items:center;gap:8px;font-family:"JosefinSans","NotoJP",sans-serif;font-size:14px;letter-spacing:.3em;color:var(--sumi);
    opacity:0;transition:opacity .4s;pointer-events:none}
  html.story-on.tap-wait .story-stage .tap-cue{opacity:.85}
  /* D-161: ヒーローでは SCROLL の代わりに TAP。位置は SCROLL と同じ。写真の上なので白 */
  html.story-on .scroll-cue{display:none}
  html.story-on .tap-cue-hero{position:absolute;bottom:calc(22px + 100svh - min(88svh,760px));color:#fff;z-index:3}
  html.story-on.hero-wait .tap-cue-hero{opacity:.9}
  .tap-dot{display:block;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;animation:tap-pulse 1.6s ease-out infinite}
}
@keyframes tap-pulse{0%{transform:scale(.6);opacity:1}70%{transform:scale(1.15);opacity:0}100%{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.tap-dot{animation:none}}
/* 🔴 D-162(2026-10-15・現地担当の指示): お問い合わせの背景・上端の曲線(スマホ)/ フッターの丸いロゴ(全幅)*/
.ft-logo-img{display:block;width:150px;height:auto;margin:0 auto}
.divider-contact{display:none}
/* D-168: お問い合わせの背景(パソコンは横長の写真)。上に紙の色の幕(.sec-bg::after)。中身は背景より手前 */
#contact{--sec-bg-img:url(../img/bg/contact-pc.jpg);position:relative}
#contact > .wrap,#contact > .hills-wrap{position:relative;z-index:2}
#contact > .wrap > .sec-note{color:var(--sumi)}   /* 灰色(--hai)だと、壁の写真の濃い所で 4.07:1(375 幅・検査器で測った)*/
@media (max-width:767px){
  #contact.roof-top{-webkit-mask-image:none;mask-image:none;padding-top:calc(clamp(48px,14vw,96px) + 32px);position:relative}
  #contact{--sec-bg-img:url(../img/bg/contact-sp.jpg)}   /* D-168: AI 生成の塗り壁(縦長)*/
  #contact > .wrap{position:relative;z-index:2}
  #contact img.divider-contact{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  #contact .hills-wrap{position:relative;z-index:2}
  .ft-logo-img{width:132px}
  /* D-163(現地担当の指示): フッターとの境目は、紙の色→黄色と同じ曲線。フッターの地は、答えの節と同じ黄色 */
  #contact .hills-ft{display:none}
  #contact{padding-bottom:calc(clamp(48px,14vw,96px) + 40px)}
  #contact img.divider-ft{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:clamp(48px,14vw,96px);transform:scaleY(-1);z-index:1;pointer-events:none}
  .ft{background:#F3C01E}
  .ft-copy{color:var(--sumi)}   /* 灰色(--hai)は黄色の上で 4.25:1(AA に届かない・検査器で測った)*/
}
.divider-ft{display:none}
/* D-165: 個ページのフッターの上端の曲線(トップは #contact の下端に置いている)*/
.divider-ft-top{display:none}
@media (max-width:767px){
  .ft{position:relative}
  .ft img.divider-ft-top{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,14vw,96px);z-index:1;pointer-events:none}
  .ft:has(.divider-ft-top){padding-top:calc(clamp(48px,14vw,96px) + 32px)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.scroll-cue::before,.hero-col{animation:none}}
@keyframes col-in{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* 🔴 D-132: 料金の目安は price.html の最後の節になった(すぐ下がフッター)。
   下側の斜めの板が、幅 1024px でフッターの文字に 14px かかった(verify_footer_skew で測った)。板が届く分だけ空ける */
#price.skew-band{margin-bottom:clamp(24px,4vw,64px)}

/* ============================================================================
   🔴 D-166(2026-10-15・現地担当の指示): フッターの形(参照サイトに寄せた・全ページ・全幅)
   ・地の黄色・上端の曲線・丸いロゴは、これまでどおり
   ============================================================================ */
.ft2{text-align:left}
.ft2 .ft2-in{max-width:1100px}
.ft2 .ft-logo{margin:0 0 18px}
.ft2 .ft-logo-img{width:120px;margin:0}
.ft2-addr,.ft2-tel,.ft2-area{margin:0 0 8px;font-size:14px;line-height:1.8;color:var(--sumi);letter-spacing:.06em}
.ft2-tel a{color:var(--sumi);font-weight:700;letter-spacing:.1em;text-decoration:none;display:inline-block;padding:12px 0;margin:-12px 0}
/* MAP: 押せる箱は 48px(検査器 verify_taps)。見た目の丸い枠は中の span(30px)。文字は下限の 14px */
.ft2-map{display:inline-flex;align-items:center;min-height:48px;margin:-9px 0 -9px 8px;vertical-align:middle;text-decoration:none;color:var(--sumi)}
.ft2-map span{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border:1.5px solid var(--sumi);border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1}
.ft2-btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.ft2-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-width:150px;min-height:56px;padding:0 26px;border-radius:999px;
  font-size:15px;font-weight:700;letter-spacing:.1em;text-decoration:none}
.ft2-btn::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.ft2-btn-w{background:#fff;color:var(--sumi);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.ft2-btn-k{background:var(--sumi);color:#fff}
.ft2-nav{display:flex;flex-direction:column;margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(0,0,0,.18)}
.ft2-nav a{display:block;padding:12px 0;font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--sumi);text-decoration:none}
.ft2 .ft-copy{text-align:center;color:var(--sumi);font-size:14px;margin:26px 0 0;letter-spacing:.06em}
@media (min-width:768px){
  .ft2 .ft2-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}
  .ft2-nav{margin:0;padding:0 0 0 56px;border-top:0;border-left:1px solid rgba(0,0,0,.18);display:grid;grid-template-columns:1fr 1fr;align-content:start}
}

/* ============================================================================
   🔴 D-167(2026-10-16): 個ページの題の帯に写真(現地担当が Google Flow で作った AI 画像)。
   文字は白にし、写真の上に暗い幕を敷く(コントラスト AA を測って幕の濃さを決めた)。英字の札は白地に墨
   ============================================================================ */
body:has(.page-ttl) .page-ttl{position:relative;isolation:isolate}
.page-ttl::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(23,28,34,var(--ttl-maku,.5))}
.page-ttl{--ttl-maku:.62}   /* .5 だと白い文字の後ろが最悪 3.58:1(施工事例)。.62 で全ページ 4.5 以上を測って決めた */
.page-ttl:not([style*="background-image"])::before{content:none}
/* ⚠ 写真は HTML の style に background-image で直接書く。CSS の変数(--page-ttl-img)に url(img/...) を入れると、
     相対パスが css/ から解決されて読み込めなかった(撮って、帯が灰色のままだったことで気づいた)*/
.page-ttl[style*="background-image"] .page-ttl-jp{color:#fff}
.page-ttl[style*="background-image"] .page-ttl-en{background:#fff;color:var(--sumi)}

/* ============================================================================
   🔴 D-169(2026-10-16・現地担当の指示・パソコン): 右端のお問い合わせのタグを、ペンキのかすれた塗り跡の上に文字が乗る形に。
   ・板の絵(05-contact-tag.svg)をやめ、なんでエリアと同じローラーの塗り跡(roller-stroke-3.png・まっすぐ・かすれ)を黄色で敷く
   ・塗り跡は文字の後ろ(::before)。mask は ::before だけに当てる(文字まで切らないように)
   ・「いますぐお問い合わせ」は明朝(Regular。Bold はこの文字を持っていない)。「Contact」はそのまま
   ⚠ deco.css があとから読まれるので、a.contact-tag で指定を強くした(最初、板の絵が残った)
   ============================================================================ */
a.contact-tag{background:none;isolation:isolate}
a.contact-tag::before{content:"";position:absolute;inset:-10px -16px -10px -4px;z-index:-1;
  background:url(../img/deco/roller-shade.png) 0 0 / 100% 100% no-repeat,linear-gradient(90deg,#E9B414 0,#F6C523 45%,#F3C01E 100%);
  /* 下の端にも毛先のぎざぎざ(roller-edge-down.png の境目を、高さの 96% の所に置く)*/
  -webkit-mask-image:url(../img/deco/roller-stroke-3.png),url(../img/deco/roller-edge-down.png);mask-image:url(../img/deco/roller-stroke-3.png),url(../img/deco/roller-edge-down.png);
  -webkit-mask-size:100% 100%,100% 200%;mask-size:100% 100%,100% 200%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0,0 4%;mask-position:0 0,0 4%;-webkit-mask-composite:source-in;mask-composite:intersect;
  filter:drop-shadow(-2px 3px 6px rgba(80,55,0,.18))}
a.contact-tag .contact-tag__label{font-family:"ZenOldMincho",serif;font-weight:400;font-size:21px;letter-spacing:.24em}

/* ============================================================================
   🔴 D-170(2026-10-16・現地担当の指示): パソコン版を、スマホ版に合わせて部分的に直す(768px 以上)
   ============================================================================ */
/* よくある質問の答えは「。」で改行(全幅。スマホと同じ)*/
.faq dd .fl:not(:first-child){display:block}
/* フッターの地は、スマホと同じ黄色(全幅)*/
.ft{background:#F3C01E}
.ft-copy{color:var(--sumi)}
@media (min-width:768px){
  /* ── ヒーロー: 見出しはスマホと同じ縦書き4列(右の列から順に浮かぶ)。置き場所は今の位置(左下)── */
  h1.hero-h1.sp-only{display:block;width:min(clamp(200px,17vw,250px),28svh);margin:0 0 .5em}   /* D-175: 背の低い画面で上部の帯に入らないよう、高さでも抑える */
  .hero-h1.pc-only{display:none!important}   /* D-172: 説明の2行(.hero-lead)は残す(現地担当の指示)*/
  /* 説明の2行は見出しの下に置き、文字の後ろの暗い幕(.hero-in::before・z-index 1)より手前に出す
     (D-170 で .hero-in の重なりの区切りを外したため、幕が文字の上にかぶって薄く見えた)*/
  .hero-in{display:flex;flex-direction:column;align-items:flex-start}
  .hero-lead.pc-only{order:2;position:relative;z-index:2}
  .hero{isolation:isolate}
  .hero-in{z-index:auto}
  .hero-in::before{z-index:1}
  .hero-vwrap{display:block;position:relative;width:100%;aspect-ratio:392/729;overflow:hidden;z-index:2;mix-blend-mode:screen}
  .hero-col{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
    animation:col-in 1.1s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.3s + var(--c) * .55s)}
  .hero-col[style*="--c:0"]{clip-path:inset(0 0 0 71.81%)}
  .hero-col[style*="--c:1"]{clip-path:inset(0 28.19% 0 51.15%)}
  .hero-col[style*="--c:2"]{clip-path:inset(0 48.85% 0 28.19%)}
  .hero-col[style*="--c:3"]{clip-path:inset(0 71.81% 0 0)}
  /* ── なんでエリア: 絵を外す。「中間マージン」の後ろに、見出しと同じ黄色いペンキ(下線の代わり)── */
  #craft .naze-person{display:none}
  #craft .craft-lead .mark,#craft .rv-line.rv-armed .mark,#craft .rv-line.rv-armed.rv-in .mark{
    background:url(../img/deco/h2-paint.svg) 50% 52% / 118% 230% no-repeat;padding:.1em .2em;transition:none}
  /* ── 選ばれる理由・できる工事: 見出しを外し、上の余白を詰める ── */
  #reason{padding-top:calc(var(--sec-y) * .45)}
  #reason .sec-h2{display:none}   /* D-172: D-170 で外し忘れていた(現地担当の指摘)*/
  /* D-172: 問い(なんで…)と答えの間をあけ、問いと答えだと分かるように */
  #craft .sec-h2{margin-bottom:64px}
  #service .sec-h2{display:none}
  /* ── 仕切り: スマホと同じ曲線 ──
     ・選ばれる理由 → できる工事: 上の節の背景が動画なので、紙の色の絵ではなく、できる工事の節の上端を曲線で切り抜く(divider-mask.svg)
     ・できる工事 → よくある質問 / よくある質問 → お問い合わせ / お問い合わせ → フッター: スマホと同じ絵 */
  #reason .hills-wrap{display:none}
  #reason{padding-bottom:calc(clamp(48px,7vw,110px) + 40px)}
  #service{--dv:clamp(48px,7vw,110px);margin-top:calc(-1 * var(--dv));padding-top:calc(var(--dv) + 36px);padding-bottom:calc(var(--dv) + 40px);position:relative;
    -webkit-mask-image:url(../img/deco/divider-mask.svg),linear-gradient(#000,#000);mask-image:url(../img/deco/divider-mask.svg),linear-gradient(#000,#000);
    -webkit-mask-size:100% var(--dv),100% calc(100% - var(--dv) + 1px);mask-size:100% var(--dv),100% calc(100% - var(--dv) + 1px);
    -webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  #service img.divider-bottom{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:var(--dv);transform:scaleY(-1);z-index:1;pointer-events:none}
  #contact.roof-top{-webkit-mask-image:none;mask-image:none;padding-top:calc(clamp(48px,7vw,110px) + 40px);position:relative}
  #contact img.divider-contact{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,7vw,110px);z-index:1;pointer-events:none}
  #contact .hills-ft{display:none}
  #contact{padding-bottom:calc(clamp(48px,7vw,110px) + 40px)}
  #contact img.divider-ft{display:block;position:absolute;left:0;top:auto;bottom:-1px;width:100%;height:clamp(48px,7vw,110px);transform:scaleY(-1);z-index:1;pointer-events:none}
  .ft img.divider-ft-top{display:block;position:absolute;left:0;top:-1px;width:100%;height:clamp(48px,7vw,110px);z-index:1;pointer-events:none}
  .ft:has(.divider-ft-top){position:relative;padding-top:calc(clamp(48px,7vw,110px) + 40px)}
}
@media (min-width:768px) and (prefers-reduced-motion:reduce){.hero-col{animation:none}}

/* ============================================================================
   🔴 D-173(2026-10-16・現地担当の指示・パソコン): 問い → 答え → 選ばれる理由 の流れを、印と線で見せる
   ・Q / A の印(丸の中に文字 + 英字の札)。Q は墨、A は黄
   ・答えの本文の下から、黄の線が下へ伸び(画面に入ったら)、「SOLUTION / だから、」→ 選ばれる理由のカード(番号 01〜03)
   ============================================================================ */
.qa-tag,.qa-bridge,.qa-bridge-txt{display:none}
@media (min-width:768px){
  #craft{padding-bottom:20px}
  #craft .sec-h2{margin-bottom:56px}
  .qa-tag{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 14px}
  .qa-ch{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;font-size:28px;line-height:1;padding-top:4px;box-sizing:border-box}
  .qa-en{font-size:14px;letter-spacing:.3em;color:var(--sumi)}
  .qa-q .qa-ch{background:var(--sumi);color:#fff}
  .qa-a .qa-ch{background:#F3C01E;color:var(--sumi)}
  .qa-bridge{display:flex;flex-direction:column;align-items:center;gap:12px;margin:40px auto 0}
  .qa-line{display:block;width:2px;height:90px;background:#F3C01E;transform-origin:top;animation:qa-grow 1.2s cubic-bezier(.3,.7,.2,1) both;
    animation-timeline:view();animation-range:entry 10% cover 40%}
  .qa-bridge-txt{display:block;margin:10px 0 0;text-align:center;font-family:"ZenOldMincho",serif;font-size:clamp(24px,2.4vw,32px);letter-spacing:.2em;color:var(--sumi)}
  #reason{padding-top:28px}
  #reason .reason{padding-left:96px}
  .reason-num{display:block;position:absolute;left:28px;top:22px;font-size:40px;line-height:1;color:#F3C01E;letter-spacing:.02em}
}
@keyframes qa-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.qa-line{animation:none}}

/* D-174 → 🔴 D-184(2026-10-16・現地担当の指示・パソコン): 問いかけと選ばれる理由を、スクロールの位置に結びつけて出す。
   進み具合 --up(0〜1)は JS が渡す(js/main.js の D-184)。時間の動き(transition)は付けない(スクロールそのものが動き)*/
.up-armed{opacity:var(--up,0);transform:translateY(calc((1 - var(--up,0)) * 18px))}
.qa-line.up-armed{opacity:1;transform:scaleY(var(--up,0));transform-origin:top;animation:none}

/* D-175(2026-10-16・現地担当の指示・パソコン): ヒーローの見出し(と説明の2行)を右へ、左に丸いロゴを大きめに。どちらも上下の中央 */
.hero-logo{display:none}
@media (min-width:768px){
  .hero{align-items:center}
  .hero-in{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-items:center;column-gap:14vw;padding-bottom:0;
    max-width:min(1280px,92vw);   /* D-177: 左右を両端へ(1000px → 1280px・間 4vw → 14vw)。現地担当「中央に寄りすぎ」 */
    position:relative}   /* D-176: パソコンは、上部の帯を除いた範囲(ヒーロー)の上下中央(現地担当の指示)。ずらさない */   /* 上部の帯(99px)を含めた画面の中央へ(帯の下の範囲の中央だと 29px 下にずれた)*/
  .hero-logo{display:block;grid-column:1;grid-row:1;align-self:end;justify-self:center;margin-bottom:28px;width:clamp(192px,19.2vw,272px);height:auto;filter:invert(1);   /* D-179: 80% に */
    position:relative;z-index:2;opacity:.92}
  .hero-in h1.hero-h1.sp-only{grid-column:2;grid-row:1 / 3;justify-self:center;margin:0}
  .hero-in .hero-lead.pc-only{grid-column:1;grid-row:2;align-self:start;justify-self:center;margin:0;text-align:center}   /* D-176: 説明の2行は左(ロゴの下)*/
}

/* D-178(2026-10-16・現地担当の指示・パソコン): QUESTION → | → ANSWER → |(長め)→ SOLUTION → だから、→ 選ばれる理由(囲いと番号なし)*/
@media (min-width:768px){
  #craft .sec-h2{margin-bottom:0}
  .qa-bridge-q{margin:28px auto 24px}
  .qa-bridge-q .qa-line{height:140px}   /* D-179: 80 → 140px */
  .qa-bridge:not(.qa-bridge-q) .qa-line{height:240px}   /* D-179: 150 → 240px(こちらを長めに)*/
  #reason .reason{background:none;box-shadow:none;border:0;padding:0;text-align:center}
  #reason .reason::before,#reason .reason::after{content:none}
  #reason .reason-num{display:none}
  #reason .reasons{gap:48px}
}


/* ============================================================================
   🔴 D-180(2026-10-16・現地担当の指示・パソコン): ヒーロー → 問いかけ の境目を広げ、切り替えを入れる
   ・スマホは「視差 + ぼかし」で切り替わる。パソコンもこの境目だけ同じ考え方にする:
     ① ヒーローの写真と文字が、スクロールより遅く沈み(視差)、ぼやけ、暗くなる
     ② 問いかけの塊(#craftreason)をヒーローの下端に --ov だけ重ね、上端を透明 → 不透明のぼかしにする
   ・重ねた分、ヒーローを --ov 高くし、下に同じだけ余白を足す(ヒーローの中身の上下中央は動かない・D-176)
   ・境目の帯(紙の色だけの所)を広げる: 問いの印(Q)を下げる
   ・動きはスクロールの量に結びつける(animation-timeline)。対応しないブラウザ・動きを減らす設定では、
     ぼかしの縁と広い帯だけが残る(壊れない)
   ============================================================================ */
@media (min-width:768px){
  /* ⚠ --ov と --fade は同じにする: 透け終わる前にヒーローが終わると、その下の白い地との境に線が出た(撮って確かめた)*/
  :root{--ov:300px;--fade:var(--ov)}
  /* ⚠ 文字の後ろの暗い幕は、文字の塊の 200px 下で切れる。ヒーローを高くしたので、切れ目が見える所に出た → 下端まで伸ばす */
  .hero-in::before{bottom:calc(-200px - var(--ov))}
  .hero{min-height:calc(min(88svh,760px) + var(--ov));padding-bottom:var(--ov);box-sizing:border-box}
  #craftreason{position:relative;z-index:1;margin-top:calc(-1 * var(--ov));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade))}
  #craft{padding-top:calc(var(--fade) + 40px)}
}
/* 🔴 D-181(2026-10-16・現地担当「もう少しスクロール量を増やしてから視差が発生するように。ヒーロー部分だけスクロールがやや重い感じ。じっくりとぼやけてセクション移動」):
   ・ヒーローを包み(.hero-hold)の中で画面に止め(sticky)、包みの下に --hold の空きを足す。この間はヒーローが動かず、ゆっくりぼやけるだけ(重い区間)
   ・空きを過ぎると次の節がせり上がり、そこから写真が沈む(視差)
   ・進み具合は JS が --hb(ぼかし 0〜1)/ --hs(沈み 0〜1)で渡す(js/main.js の D-181)。D-180 の animation-timeline はやめた
     (止まっている間はヒーローの位置が変わらず、ヒーロー自身の見え方では進まないため)
   🔴 D-182: 包みは HTML に書かない。パソコンの幅のときだけ JS が付ける(js/main.js の (9))。
     D-181 で HTML に書いたら、スマホでヒーローが出なくなった(現地担当の指摘・デグレ)。スマホの組み立ては一切変えない */
@media (min-width:768px){
  :root{--hold:45svh}
  .hero-hold::after{content:"";display:block;height:var(--hold)}
  .hero-hold > .hero{position:sticky;top:0}
  .hero{filter:blur(calc(var(--hb,0) * 8px))}
  .hero-photo{transform:translateY(calc(var(--hs,0) * 40%));filter:brightness(calc(1 - var(--hs,0) * .3))}
}

/* 🔴 D-185(2026-10-16・現地担当の指示・パソコン): よくある質問・お問い合わせの見出しを中央に(スマホは既に中央。「#faq .sec-h2,#contact .sec-h2」のスマホの指定と同じ形)。
   お問い合わせの背景は、送られた写真(塗り壁・黄)の色がそのまま見えるように、上に掛けていた紙の色の幕(.sec-bg::after・72%)を外す */
@media (min-width:768px){
  #faq .sec-h2,#contact .sec-h2{display:table;margin-left:auto;margin-right:auto}
  #contact{--sec-maku-a:0}
}

/* 🔴 D-186(2026-10-16・現地担当「お電話でのご相談の部分が安っぽいので少し変えたい」・パソコン): 参考サイト(sansei_flow)の電話の欄の作りに寄せる
   ・地は白から温かい生成り(写真の黄色い壁から浮かせつつ、なじませる)。上端に差し色の黄の帯
   ・見出しは墨・太字。左右に二本線の飾り(＝)
   ・番号は太いゴシック(Noto Sans JP 700・自ホスト)で大きく。左に電話の印(CSS の mask・HTML は変えない)
   ・受付時間は墨の字(14px・下限)*/
/* D-193(2026-10-16・現地担当「sp版もPC版のデザインとフォントに合わせて。縦積みのままでOK」): 下のカードの指定を、パソコンだけ → 全幅にした。
   スマホで変えるのは番号の大きさだけ(下の @media max-width:767px)*/
@media (min-width:768px){
  .contact-grid{grid-template-columns:minmax(0,350px) minmax(0,1fr)}   /* 番号を大きくしても1行に収まる幅(300 → 350px)*/
}
  .tel-box{background:#F7F2E8;padding:30px 20px 28px;border-top:4px solid #F3C01E;box-shadow:0 8px 24px rgba(90,64,0,.12)}
  .tel-box-label{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 6px;
    font-family:"NotoJP",sans-serif;font-weight:700;font-size:16px;letter-spacing:.12em;color:var(--sumi)}
  .tel-box-label::before,.tel-box-label::after{content:"";flex:none;width:18px;height:6px;border-top:2px solid var(--sumi);border-bottom:2px solid var(--sumi);box-sizing:border-box}
  .tel-box-num{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0 8px;
    font-family:"NotoJP",sans-serif;font-weight:700;font-size:32px;letter-spacing:.02em;line-height:1.1;white-space:nowrap;font-feature-settings:"palt"}
  .tel-box-num::before{content:"";flex:none;width:.72em;height:.72em;background:var(--sumi);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat}
  .tel-box-sub{margin:4px 0 0;font-size:14px;letter-spacing:.08em;color:var(--sumi)}   /* 13px は文字の下限(14px)を割った(検査器)*/
@media (max-width:767px){
  .tel-box-num{font-size:clamp(24px,7.6vw,32px);min-height:48px;box-sizing:border-box}   /* 320 幅でも1行に収まる大きさ(カードの中は 240px 前後)。押す所は 48px 以上(320 幅で 46.7px になった・検査器)*/
  .tel-box{padding:26px 16px 24px}
}

/* ============================================================================
   🔴 D-187(2026-10-16・現地担当の指示): お問い合わせの個ページ(contact.html)。参照サイトの構造をなぞる
   ・地は温かい生成り。フォームは白い箱を墨の太い枠(5px)で囲み、上端の中央に電話番号の札を重ねる
   ・1行 = 左に項目名と「必須」/ 右に入力欄。行の間に細い線。スマホは項目名の下に入力欄
   ・下に「残りの必須項目」の数。必須がそろうまで、送信ボタンは押せない(js/main.js の (10))
   ============================================================================ */
.cf-page{background:#F3EDE2}
.cf-lead{text-align:center;font-size:16px;line-height:2;letter-spacing:.08em;margin:0 0 64px;color:var(--sumi)}
.cf-lead .ln{display:block}
.cf-box{position:relative;max-width:1080px;margin:0 auto;background:#fff;border:5px solid #3B3330;padding:84px 60px 56px}
.cf-tel{position:absolute;left:50%;top:0;transform:translate(-50%,-62%);background:#fff;border:4px solid #3B3330;
  padding:12px 44px 10px;text-align:center;white-space:nowrap}
.cf-tel-num{display:block;font-family:"NotoJP",sans-serif;font-weight:700;font-size:32px;line-height:1.15;letter-spacing:.04em;
  color:var(--sumi);text-decoration:none;font-feature-settings:"palt"}
.cf-tel-sub{margin:2px 0 0;font-size:14px;letter-spacing:.08em;color:var(--sumi)}
.cf-form .form-notice{margin:0 0 12px}
.cf-row{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 32px;align-items:center;padding:18px 0;border-bottom:1px solid #E6E0D5}
.cf-th{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding-left:16px;font-size:16px;letter-spacing:.06em;color:var(--sumi)}
.cf-th .req{flex:none}
.cf-td input[type=text],.cf-td input[type=tel],.cf-td input[type=email],.cf-td textarea{width:100%;box-sizing:border-box;
  border:1px solid #BDB6AA;border-radius:3px;background:#fff;padding:10px 12px;font:inherit;font-size:16px;color:var(--sumi)}
.cf-td input:focus,.cf-td textarea:focus{outline:2px solid #F3C01E;outline-offset:1px;border-color:#3B3330}
.cf-td textarea{min-height:140px;resize:vertical}
.cf-check{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:16px;letter-spacing:.06em;color:var(--sumi);cursor:pointer}
.cf-check input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:2px solid #5A524C;background:#fff;display:grid;place-content:center;cursor:pointer}
.cf-check input[type=radio]{border-radius:50%}
.cf-check input::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s;background:#3B3330}
.cf-check input[type=checkbox]::before{clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.cf-check input[type=radio]::before{border-radius:50%}
.cf-check input:checked::before{transform:scale(1)}
.cf-check input:focus-visible{outline:2px solid #F3C01E;outline-offset:2px}
.cf-note{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--sumi)}
.cf-left{margin:32px 0 0;text-align:center;font-family:"NotoJP",sans-serif;font-weight:700;font-size:17px;letter-spacing:.06em;color:#B23A22}
.cf-left.is-done{color:var(--sumi)}
.cf-submit{margin:24px 0 0;text-align:center}
.cf-btn{min-width:260px;min-height:56px;padding:0 32px;border:0;border-radius:3px;background:#3B3330;color:#fff;font:inherit;font-size:16px;letter-spacing:.1em;cursor:pointer}
.cf-btn:disabled{background:#CFCAC2;color:#4A4440;cursor:not-allowed}
.cf-sent{margin:16px 0 0;text-align:center;font-size:15px;color:var(--sumi)}
.cf-form .form-privacy{margin:24px 0 0;text-align:center}
@media (max-width:767px){
  .cf-lead{font-size:15px;text-align:left;margin-bottom:56px}
  .cf-lead .ln{display:inline}
  .cf-box{border-width:4px;padding:64px 18px 36px}
  .cf-tel{padding:10px 18px 8px}
  .cf-tel-num{font-size:26px}
  .cf-row{grid-template-columns:1fr;gap:10px;padding:16px 0}
  .cf-th{padding-left:0;justify-content:flex-start}
}

/* ============================================================================
   🔴 D-190(2026-10-16・現地担当の指示): トップのお問い合わせの節。フォームをやめ、参照サイトのように2枚のカード
   ・左: お電話(D-186 の形)/ 右: WEB(お問い合わせのページへ飛ぶ丸いボタン・封筒のアイコン・右に「›」)
   ・パソコンは2枚を同じ幅・同じ高さで横に並べ、中身を上下中央。スマホは縦に積む(電話の欄はスマホの今の形のまま)
   ============================================================================ */
.web-box{display:flex;flex-direction:column;align-items:center;justify-content:center}
.web-box-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:340px;min-height:60px;margin:10px auto 0;
  padding:0 40px;box-sizing:border-box;border-radius:999px;background:#F3C01E;color:var(--sumi);text-decoration:none;
  font-family:"NotoJP",sans-serif;font-weight:700;font-size:17px;letter-spacing:.08em;transition:background-color .2s}
.web-box-btn:hover{background:#E5B10F}
.web-box-btn::after{content:"";position:absolute;right:24px;top:50%;width:8px;height:8px;border-top:2px solid var(--sumi);border-right:2px solid var(--sumi);transform:translateY(-50%) rotate(45deg)}
.web-box-ico{flex:none;width:22px;height:22px;background:var(--sumi);
  -webkit-mask:url(../img/ico/ico-contact.png) center / contain no-repeat;mask:url(../img/ico/ico-contact.png) center / contain no-repeat}
@media (min-width:768px){
  #contact .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:0 auto;align-items:stretch;gap:24px}
  #contact .tel-box{display:flex;flex-direction:column;justify-content:center}
}

/* D-192(2026-10-16・現地担当の指示): トップのお問い合わせの節の一文を、現地担当の文言(2段落・指定の改行)に。パソコン・スマホとも中央・1行ずつ */
#contact .ct-lead{text-align:center;line-height:2;letter-spacing:.06em;margin:0 0 32px}
#contact .ct-lead p{margin:0}
#contact .ct-lead p + p{margin-top:1em}
#contact .ct-lead .ln{display:block}
#contact .ct-lead .ct-ph{display:inline-block}

/* D-193: スマホのWEBのボタン。⚠ D-190 のボタンの指定より後ろに置く(前に置いたら上書きされて効かなかった)
   320 幅でボタンの文字が2行に折れ、詰めたらカードからはみ出して横に 19px 広がった → 字を 14px まで下げ、余白を詰めて1行に */
@media (max-width:767px){
  .web-box-btn{padding:0 28px 0 16px;gap:8px;font-size:clamp(14px,4.4vw,17px);letter-spacing:.04em;white-space:nowrap}
  .web-box-btn::after{right:16px}
  .web-box-ico{width:20px;height:20px}
}

/* D-194(2026-10-16・現地担当「カードが大きすぎるし、フォントサイズも大きすぎる。少し小さく修正！PC版も！」): 下の2枚のカードを一回り小さく
   ⚠ 押す所は 48px 以上・字は 14px 以上(検査器の下限)を守る */
.tel-box{padding:22px 18px 20px}
.tel-box-label{font-size:14px;gap:10px;margin-bottom:2px}
.tel-box-label::before,.tel-box-label::after{width:14px;height:5px}
.tel-box-num{font-size:26px;min-height:48px;padding:6px 0 4px;box-sizing:border-box}
.tel-box-sub{font-size:14px;margin-top:0}
.web-box-btn{min-height:50px;max-width:290px;font-size:15px;margin-top:8px}
.web-box-ico{width:19px;height:19px}
@media (min-width:768px){
  #contact .contact-grid{max-width:800px;gap:20px}
}
@media (max-width:767px){
  .tel-box{padding:20px 16px 18px}
  .tel-box-num{font-size:clamp(22px,6.6vw,26px)}
  .web-box-btn{font-size:clamp(14px,4vw,15px)}
  #contact .contact-grid{gap:14px}
}

/* ============================================================================
   🔴 D-195(2026-10-16・現地担当の指示・スマホだけ): オープニング(読み込みの幕)
   ・「答えは、」の場面と同じローラーの塗り跡4本(roller-shade / roller-edge / roller-stroke-0〜3)を、時間で下から塗る
   ・塗り終わったら黄色ですき間を埋め、中央に丸いロゴ(フッターと同じ)がふわっと出る → 幕ごと消えて本ページ
   ・時間: 塗り 0.2〜1.95s / 埋め 1.9〜2.3s / ロゴ 2.2〜3.2s / 消える 3.8〜4.5s(合計 約4.6秒・現地担当「4〜5秒」)
   ・ヒーローの見出し(列ごとに浮かぶ)は、幕が消え始めてから始める(:has で遅らせる。JS が幕を取り除くと元に戻る)
   ============================================================================ */
.opening{display:none}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .opening{display:block;position:fixed;inset:0;z-index:9999;background:var(--kami);overflow:hidden;pointer-events:auto;
    animation:op-out .7s ease 3.8s forwards}
  .op-roll{position:absolute;inset:0;background:linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);
    background-color:transparent;background-size:100% 100%;opacity:1}
  .op-roll::before{content:"";position:absolute;inset:0;background:var(--kami);animation:op-fill .4s ease 1.9s forwards}   /* 塗り終わるまでは紙の色。すき間を黄色で埋める = この紙を消す */
  .op-rs{position:absolute;top:-25svh;width:60vw;height:150svh;left:calc(var(--i) * 25vw - 17.5vw);z-index:1;
    background:url(../img/deco/roller-shade.png) 0 0 / 100% 100% no-repeat,
      linear-gradient(90deg,#DFAA0E 0,#F2BF1C 18%,#F7C726 50%,#F3C01E 82%,#E2AD10 100%);
    -webkit-mask-image:url(../img/deco/roller-edge.png),var(--rsk);mask-image:url(../img/deco/roller-edge.png),var(--rsk);
    -webkit-mask-size:100% 200%,100% 100%;mask-size:100% 200%,100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 0%,0 0;mask-position:0 0%,0 0;
    -webkit-mask-composite:source-in;mask-composite:intersect;
    animation:op-paint .7s cubic-bezier(.45,.05,.35,1) calc(.2s + var(--i) * .35s) forwards}
  .op-rs[style*="--i:0"]{transform:rotate(4deg);--rsk:url(../img/deco/roller-stroke-0.png)}
  .op-rs[style*="--i:1"]{transform:rotate(176deg);--rsk:url(../img/deco/roller-stroke-1.png)}
  .op-rs[style*="--i:2"]{transform:rotate(4deg);--rsk:url(../img/deco/roller-stroke-2.png)}
  .op-rs[style*="--i:3"]{transform:rotate(176deg);--rsk:url(../img/deco/roller-stroke-3.png)}
  .op-logo{position:absolute;left:50%;top:50%;z-index:2;width:min(46vw,190px);height:auto;opacity:0;
    transform:translate(-50%,-50%) scale(.92);filter:blur(6px);animation:op-logo 1s ease-out 2.2s forwards}
  /* ヒーローの見出しは、幕が消え始めて(3.8s)から */
  html:has(#opening) .hero-col{animation-delay:calc(3.8s + .3s + var(--c) * .55s)}
}
@keyframes op-paint{from{-webkit-mask-position:0 0%,0 0;mask-position:0 0%,0 0}to{-webkit-mask-position:0 100%,0 0;mask-position:0 100%,0 0}}
@keyframes op-fill{to{opacity:0}}
@keyframes op-logo{to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}}
@keyframes op-out{to{opacity:0;visibility:hidden;pointer-events:none}}

/* ============================================================================
   🔴 D-196(2026-10-16・現地担当の指示・スマホの帰り道): ① ヒーローと問いの節の境目をぼかす ② 問い → 答え を線でつなぐ(パソコンの線と同じ考え)
   ① 問いの塊(#craftreason)をヒーローの下端に --ovs だけ重ね、上端を 透明 → 不透明 にする(行き道の境目と同じ作り)。問いの位置は変えない(重ねた分だけ上の余白を足す)
   ② 線は1本。問いの文字の下(節の下の余白 34px のうち 30px)から始まる。白い所(紙の色)では黄色、黄色の地では白。色の切り替えは、仕切りの曲線(divider-curve.svg)の中央の高さ = 高さの 37.7%(曲線の式から計算)
   ============================================================================ */
@media (max-width:767px){
  html:not(.story-on){--ovs:120px}   /* ⚠ 透け終わる所 = ヒーローの下端(重ねる量 = ぼかしの長さ)。透け終わる前にヒーローが終わると、その下の白との境に線が出た(撮って確かめた)*/
  html:not(.story-on) #craftreason{position:relative;z-index:1;margin-top:calc(-1 * var(--ovs));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ovs));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ovs))}
  html:not(.story-on) #craft-sp .naze-scene{padding:calc(48px + var(--ovs)) 0 34px}
  html:not(.story-on) .naze-center::after{content:"";position:absolute;left:50%;top:-30px;z-index:4;width:2px;margin-left:-1px;pointer-events:none;
    height:calc(30px + var(--wv) * .73 + 8px);
    background:linear-gradient(to bottom,#F3C01E 0,#F3C01E calc(30px + var(--wv) * .377),#fff calc(30px + var(--wv) * .377),#fff 100%)}
}

/* ============================================================================
   🔴 D-197(2026-10-16・現地担当の指示・スマホの帰り道)
   ① いちばん上の状態ではぼけていないように: ヒーローを重ねる分(--ovs)だけ長くし、下に同じだけ余白を足す(見出しの上下の位置は変わらない)。
      SCROLL も同じだけ下からの距離を足して、今の位置のまま。少しスクロールすると、ぼかしの帯が画面に入ってくる
   ② QUESTION / ANSWER の印(パソコンと同じ作り・同じ書体 Josefin Sans)。小さめ(まる 40px)。
      A は黄色の地の上なので、まるを白にした(パソコンの黄色のまるだと地と同じ色で見えない)
   ============================================================================ */
@media (max-width:767px){
  html:not(.story-on) .hero{min-height:min(calc(100svh - 74px * .75 + var(--ovs)),1220px);padding-bottom:var(--ovs);box-sizing:border-box}
  html:not(.story-on) .scroll-cue{bottom:calc(22px + var(--ovs) + min(calc(100svh - 74px * .75),1100px) - min(88svh,760px))}
  html:not(.story-on) .qa-sp{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 14px}
  html:not(.story-on) .qa-sp .qa-ch{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:20px;line-height:1;padding-top:3px;box-sizing:border-box}
  html:not(.story-on) .qa-sp .qa-en{font-size:12px;letter-spacing:.3em;color:var(--sumi)}
  html:not(.story-on) .qa-q.qa-sp .qa-ch{background:var(--sumi);color:#fff}
  html:not(.story-on) .qa-a.qa-sp .qa-ch{background:#fff;color:var(--sumi)}
  html:not(.story-on) .naze-center .qa-sp{position:relative;z-index:4}
}

/* D-198(2026-10-16・現地担当「ぼかしが不自然すぎる」・スマホの帰り道):
   ① 文字の後ろの暗い幕(.hero-in::before)は、文字の塊の 200px 下で切れる。D-197 でヒーローを 120px 長くしたので、その切れ目が画面に出て横線になった
      → 幕をヒーローの下端まで伸ばす(パソコンの D-180 と同じ直し)
   ② 透け方を直線から、ゆっくり始まりゆっくり終わる形に(途中の段を足した)。長さも 120 → 160px にのばした(重ねる量 = ぼかす長さ のまま)*/
@media (max-width:767px){
  html:not(.story-on){--ovs:160px}
  html:not(.story-on) .hero-in::before{bottom:-100vh}
  html:not(.story-on) #craftreason{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.06) calc(var(--ovs) * .2),rgba(0,0,0,.25) calc(var(--ovs) * .4),rgba(0,0,0,.55) calc(var(--ovs) * .6),rgba(0,0,0,.84) calc(var(--ovs) * .8),#000 var(--ovs));
            mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.06) calc(var(--ovs) * .2),rgba(0,0,0,.25) calc(var(--ovs) * .4),rgba(0,0,0,.55) calc(var(--ovs) * .6),rgba(0,0,0,.84) calc(var(--ovs) * .8),#000 var(--ovs))}
}

/* D-199(2026-10-16・現地担当「PC版と同じように、『だから、』も入れてください」・スマホの帰り道):
   本文の最後 → 線(白・黄色の地なので)→ SOLUTION → 「だから、」(明朝)→ 選ばれる理由。パソコンの D-173 / D-178 と同じ並び */
.qa-bridge-sp,.qa-bridge-txt-sp{display:none}
@media (max-width:767px){
  html:not(.story-on) .qa-bridge-sp{display:flex;flex-direction:column;align-items:center;gap:10px;margin:20px auto 0}
  html:not(.story-on) .qa-line-sp{display:block;width:2px;height:72px;background:#fff}
  html:not(.story-on) .qa-bridge-sp .qa-en{font-size:12px;letter-spacing:.3em;color:var(--sumi)}
  html:not(.story-on) .qa-bridge-txt-sp{display:block;margin:6px 0 0;text-align:center;font-family:"ZenOldMincho",serif;font-size:24px;letter-spacing:.2em;color:var(--sumi)}
}
/* D-200(2026-10-16・現地担当「ここのセンタリングを綺麗に」): 「だから、」と SOLUTION の見た目の中央を、線の中央にそろえる。
   字間(.2em / .3em)が最後の字の後ろにも付く + 「、」は字の枠の左下に小さく書かれる → 字の黒い所の中央が、線より 9.5px / 2.5px 左だった(測った)。
   左に余白を足して打ち消す(.8em ≒ 19px → 右へ約 9.6px / .3em ≒ 3.6px → 右へ約 1.8px)*/
@media (max-width:767px){
  html:not(.story-on) .qa-bridge-txt-sp{padding-left:.8em}
  html:not(.story-on) .qa-bridge-sp .qa-en{padding-left:.3em}
}

/* ============================================================================
   🔴 D-201(2026-10-16・現地担当の指示): 本文の字を、お問い合わせの電話の欄の札(.tel-box-label)と同じ字にする
   字 = Noto Sans JP(自ホスト)・太さ 700・14px・字間 .12em・墨。行の高さと並びは変えない
   当てる所(現地担当が貼った文の場所): 問いかけの本文(パソコン #craft / スマホ #craft-sp)/ 選ばれる理由の説明 / できる工事の項目と説明 /
     よくある質問の答え(「A.」の1行目は除く。貼られた文も除いていた)/ お問い合わせの節の一文 / フッターのメニュー(全ページ)
   ⚠ スマホの場面(行き道)の本文は、画面に収まる字の大きさを JS が決めている(--body-fs)。そこは大きさだけ今のまま(html.story-on の指定のほうが強い)
   ============================================================================ */
html body #craft .craft-body,
html body #craft-sp .naze-b,
html body #reason .reason p,
html body #service .svc-list,
html body #service .svc-note,
html body .faq dd .fl:not(:first-child),
html body #contact .ct-lead,
html body .ft2-nav a{
  font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--sumi)}

/* D-202(2026-10-16・現地担当「センタリングしてください。そしてもう少しだけ大きく」・スマホ): フッターの丸いロゴを中央に、120 → 150px(全ページ共通のフッター)*/
@media (max-width:767px){
  .ft2 .ft-logo-img{width:150px;margin:0 auto}
}

/* D-203(2026-10-16・現地担当の指示): フッターのボタン「お電話する」「無料見積もり」も、電話の欄の札と同じ字(Noto Sans JP 700・14px・字間 .12em)。
   色: 「お電話する」(白の地)は墨。⚠ 「無料見積もり」は墨の地なので、字を墨にすると読めない → 白のまま */
html body .ft2-btn{font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em}
html body .ft2-btn-w{color:var(--sumi)}

/* ============================================================================
   🔴 D-204(2026-10-16・現地担当の指示): 個ページ(お問い合わせ・料金の目安・工事の流れ・会社概要・施工事例)の中身の字を、
   D-201 と同じ字(Noto Sans JP 700・14px・字間 .12em・墨)に。「明朝以外」(現地担当)
   ・当てない: 明朝・英字の飾り(題の帯・見出し・代表のあいさつの大きな一文)/ 見出しの役の太字(h5)/ 大きな電話番号 / 「必須」の札 / 代表の署名
   ・色は本文だけ墨。注意書きの枠(茶)・残りの必須項目(赤)・ボタン・リンクは今の色のまま
   ⚠ 個ページは .page-ttl(題の帯)を持つページ。トップには無いので当たらない
   ============================================================================ */
body:has(.page-ttl) main :is(p,li,th,td,label,button,a.btn,a.sub-back-link,.cf-check span):not(.lead-lg):not(.sign):not(.cf-tel-num):not(.req):not(.sec-h2){
  font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em}
body:has(.page-ttl) main :is(p,li,th,td,label,.cf-check span):not(.lead-lg):not(.sign):not(.form-notice):not(.cf-left){color:var(--sumi)}
/* 段落の中の太字・言葉のまとまりは、段落の字に合わせる(自分で大きさや字間を持っているものがあった) */
/* ⚠ 直下の子だけ(工事の流れの番号は li > h3 > span で、見出し(明朝)の字になってしまった)。太さも段落に合わせる(strong が 900 になった)*/
body:has(.page-ttl) main :is(p,li,th,td):not(.lead-lg):not(.sign) > :is(b,strong,span:not(.req)){font-size:inherit;letter-spacing:inherit;font-family:inherit;font-weight:inherit}
body:has(.page-ttl) .work-meta :is(b,span){font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em}   /* 施工事例の札(工事の種類・場所)。場所は補足の灰色のまま */

/* D-205(2026-10-16・現地担当の指示): 「だから、」を現地担当の画像(素材/だから/だから、.png・背景が透明)に置き換えた(パソコン・スマホとも)。
   字のある所だけを、上下左右に同じ余白(10px)をつけて切り出した(img/dakara.png)→ 画像の中央 = 字の中央。D-200 の左の余白(.8em)は外す */
.dakara-img{display:block;height:auto;margin:0 auto}
@media (min-width:768px){ #craft .qa-bridge-txt .dakara-img{width:150px} }
@media (max-width:767px){
  html:not(.story-on) .qa-bridge-txt-sp{padding-left:0}
  html:not(.story-on) .qa-bridge-txt-sp .dakara-img{width:120px}
}
@media (min-width:768px){ #craft .qa-bridge:not(.qa-bridge-q) .qa-en{padding-left:.3em} }   /* D-205: パソコンの SOLUTION も、字間(.3em)の分だけ左に寄っていた(スマホの D-200 と同じ直し)*/

/* D-207(2026-10-16・現地担当の指示): 工事の流れの手順の文を、貼られた改行のとおり1行ずつ(狭い画面で入りきらない行は、その中で折り返す)*/
.flow-text p > .ln{display:block}

/* D-208(2026-10-16・現地担当「カードをもう少し小さく(テキストサイズはそのまま)」・スマホ): 下の2枚のカードを、幅いっぱい → 最大 300px・中央に。余白も少し詰める */
@media (max-width:767px){
  #contact .contact-grid{max-width:300px;margin-left:auto;margin-right:auto;gap:12px}
  #contact .tel-box{padding:16px 14px 14px}
}

/* D-209(2026-10-17・現地担当の指示): お問い合わせのページの最初の文を、スマホも「。」で改行・中央(パソコンと同じ)。
   言葉のまとまり(.cf-ph)の途中では折れないように(D-191 と同じ。⚠ 名前を .ph にすると写真の仮の枠の色が付く)*/
.cf-lead .cf-ph{display:inline-block}
@media (max-width:767px){
  .cf-lead{text-align:center}
  .cf-lead .ln{display:block}
}

/* D-210(2026-10-17・現地担当の指示): お問い合わせのページ。個人情報の一文を2行に / 入力欄のプレースホルダーの字を本文と同じ字に(Noto Sans JP 700・14px・字間 .12em・墨)*/
.cf-form .form-privacy .ln{display:block}
.cf-td input::placeholder,.cf-td textarea::placeholder{font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--sumi);opacity:1}
.cf-form .form-privacy .cf-ph{display:inline-block}
.co-note .ln{display:block}   /* D-211: 会社概要の下の一文を2行に */
.sec-note.sec-note-c{text-align:center}   /* D-212: 料金の目安・施工事例のページの一文を中央に */

/* D-213(2026-10-17・現地担当「個ページの始まり部分、見出し前後の余白を綺麗に。広すぎず、狭すぎず」・スマホ):
   帯 → 最初の文(見出し)= 48px / 最初の文 → 次の部品 = 32px に、5ページそろえる(測ってから決めた。前は 34px / 9〜14px、工事の流れだけ 74px)*/
@media (max-width:767px){
  body:has(.page-ttl) main > section:first-of-type{padding-top:48px}
  body:has(.page-ttl) .sec-note-c{margin-bottom:32px}
  body:has(.page-ttl) main > section:first-of-type .sec-h2{margin-top:0;margin-bottom:32px}
  .cf-lead{margin-bottom:79px}   /* 電話の札が枠の上へ 47px はみ出す分を足して、札の上端まで 32px */
  .flow-page .flow-list{margin-top:0}
  .flow-page .flow-list > .flow-item:first-child{margin-top:0;padding-top:0}
}
.sec-note-c .nw{display:inline-block}   /* D-213: 言葉のまとまりの途中で折れないように(390 で「変わりま / す。」と折れた)*/

/* D-214(2026-10-17・現地担当「PC版もそろえて」): パソコンの個ページの始まり。帯 → 最初の文(見出し)= 80px / 最初の文 → 次の部品 = 48px
   (前は 115px / 9〜28px。スマホ D-213 の 48 / 32 を、画面の大きさに合わせて一回り大きく)*/
@media (min-width:768px){
  body:has(.page-ttl) main > section:first-of-type{padding-top:80px}
  body:has(.page-ttl) .sec-note-c{margin-bottom:48px}
  body:has(.page-ttl) main > section:first-of-type .sec-h2{margin-top:0;margin-bottom:48px}
  .cf-lead{margin-bottom:103px}   /* 電話の札が枠の上へはみ出す分(55px)を足して、札の上端まで 48px */
  .flow-page .flow-list{margin-top:0}
  .flow-page .flow-list > .flow-item:first-child{margin-top:0;padding-top:0}
}

/* D-215(2026-10-17): ごあいさつ。大きな2行は言葉のまとまり(.nw)で折る(「スピー / ド。」と折れた)。
   本文は、言葉の切れ目で折る(word-break:auto-phrase。対応しないブラウザは今までどおり)*/
.about-text .lead-lg .nw{display:inline-block}
.greet .ln{word-break:auto-phrase}

/* ============================================================================
   🔴 D-216(2026-10-17・現地担当の指示): 会社概要のページ
   ・見出し(h2)は中央(パソコン・スマホとも)
   ・会社概要の表は参照サイトの形: スマホでも左右2列(項目名 | 中身)、行の間に墨の線(2px)、最初の線の上にも。
     パソコンは最大 760px で中央。余白は詰めめ、字は小さめ(14px・D-201 の字)
   ⚠ 電話番号のリンクは押す所 48px 以上を保つ(行の高さで確保)
   ============================================================================ */
body:has(.page-ttl) main .sec-h2{display:table;margin-left:auto;margin-right:auto;text-align:center}
.company-table{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse;border-top:2px solid var(--sumi)}
.company-table th,.company-table td{display:table-cell;border-bottom:2px solid var(--sumi);vertical-align:middle;
  padding:14px 12px;font-size:14px;line-height:1.8;text-align:left;background:none}
.company-table th{width:30%;white-space:nowrap}
.company-table td a{display:inline-block;padding:12px 0;margin:-12px 0;min-height:48px;box-sizing:border-box;line-height:24px}
.company-table td .note-sm{display:block;font-size:14px}
body:has(.page-ttl) .table-scroll:has(.company-table){max-width:760px;margin:32px auto 0}
@media (min-width:768px){
  .company-table th,.company-table td{padding:20px 24px}
  .company-table th{width:200px}
}
@media (max-width:767px){
  .company-table th{width:96px;padding-left:8px;padding-right:8px}
  .company-table td{padding-left:8px;padding-right:8px}
}
/* 見出しと表の間(見出しの塗り跡が表の上の線にかかった)・住所などが言葉の途中で折れないように */
@media (min-width:768px){ body:has(.page-ttl) .table-scroll:has(.company-table){margin-top:40px} }   /* ⚠ 上の body:has(...) の指定のほうが強いので、同じ強さで書く(最初は効かなかった)*/
.company-table td{word-break:auto-phrase}

/* D-217(2026-10-17・試し): 手書き風の署名の画像。文章の終わりの右に添える */
.sign-img{text-align:right;margin-top:24px}
.sign-img img{display:inline-block;width:260px;max-width:70%;height:auto}
@media (max-width:767px){ .sign-img{text-align:left} .sign-img img{width:170px} }   /* 現地担当「sp版は左寄せで、少しもっと小さく」 */

/* ============================================================================
   🔴 D-218(2026-10-17・現地担当の指示): サイト全体の字を「小さめで落ち着いた」感じに
   ・本文(14px)は大きさを下げない(文字の下限 14px・DESIGN_TOKENS)。太さを 700 → 500 に戻す(参照サイトの本文と同じ太さ)。
     ボタン・札(電話の欄の見出し・フッターのボタンなど)は太字のまま
   ・見出し・大きな字を一回り小さく(現地担当が表の案を承認)
   ⚠ 参照サイトの字が小さく見えるのは、画面の幅を 1080px に固定して縮めて見せる作りのため(本文の指定は 16px)。まねはしない
   ============================================================================ */
html body #craft .craft-body,html body #craft-sp .naze-b,html body #reason .reason p,html body #service .svc-list,html body #service .svc-note,
html body .faq dd .fl:not(:first-child),html body #contact .ct-lead,html body .ft2-nav a{font-weight:500}
body:has(.page-ttl) main :is(p,li,th,td,label,.cf-check span):not(.lead-lg):not(.sign):not(.cf-tel-num):not(.req):not(.sec-h2):not(.cf-left){font-weight:500}
body:has(.page-ttl) .work-meta :is(b,span){font-weight:500}
.cf-td input::placeholder,.cf-td textarea::placeholder{font-weight:500}
html body .faq dt,html body .faq dd .fl:first-child{font-size:14px}
@media (min-width:768px){
  html body .sec-h2{font-size:30px}
  html body .page-ttl-jp{font-size:36px}
  html body .about-text .lead-lg{font-size:24px}
  html body #craft .craft-lead{font-size:26px}
  html body .reason-h3,html body .svc-h3{font-size:18px}
  html body .flow-ttl{font-size:20px}
}
@media (max-width:767px){
  html body main .sec-h2{font-size:min(var(--h2-sp,22px),22px)}
  html body .page-ttl-jp{font-size:30px}
  html body .about-text .lead-lg{font-size:18px}
  html body .reason-h3,html body .svc-h3,html.story-on body .naze-reason .reason-h3,html:not(.story-on) body #reason .reason-h3{font-size:17px}
  html body .flow-ttl{font-size:17px}
}
/* D-218: 小見出しは #reason / #service の指定(id の強さ)に負けたので、同じ強さ以上で書く */
@media (min-width:768px){ html body #reason .reason-h3,html body #service .svc-h3{font-size:18px} }
@media (max-width:767px){ html body #reason .reason-h3,html body #service .svc-h3,html.story-on body .naze-reason .reason-h3{font-size:17px} }

/* D-219(2026-10-18・現地担当「この部分もテキストサイズを小さめに」): 引き出しメニュー(スマホ)の字を小さめに。
   メニュー 17 → 15px・アイコン 22 → 19px / 店の名前 16 → 14px・電話番号 17 → 15px(住所・受付は 14px の下限のまま)。
   押す所は 48px 以上を保つ(余白で高さを作っている)*/
.hd-drawer-in > a{font-size:15px;gap:14px;padding-top:15px;padding-bottom:15px}
.hd-drawer-in > a .hd-ico{width:19px;height:19px}
.hd-drawer-info .di-name{font-size:14px}
.hd-drawer-info a{font-size:15px;padding-top:12px;padding-bottom:12px}
.hd-drawer-info dd{word-break:auto-phrase}   /* D-219: 住所が「イルクオ / ーレD号室」と折れた */

/* D-220(2026-10-18・現地担当の指示): 工事の流れの枠の見出し(こんなことがありました / お打ち合わせの内容 / お支払い方法)の左の「＝」を、
   現地担当が用意したアイコンに(素材/工事の流れアイコン/。色は CSS の mask で墨)。右の「＝」はそのまま。
   ⚠ 最初は HTML の style に --fb-ico:url(img/...) と書いたが、変数の url は使う側(この CSS)から解決され、css/img/... を探して読めなかった(測って気づいた)。
     → アイコンごとに CSS の中に ../img/ で書く */
.flow-box-ttl.fb-ico::before{width:26px;height:26px;border:0;background:var(--sumi);
  -webkit-mask:var(--fb-ico) center / contain no-repeat;mask:var(--fb-ico) center / contain no-repeat}
.fb-case{--fb-ico:url(../img/ico/flow-case.svg)} .fb-meeting{--fb-ico:url(../img/ico/flow-meeting.svg)} .fb-pay{--fb-ico:url(../img/ico/flow-pay.svg)}

/* ============================================================================
   D-221(2026-10-18・現地担当の指示・パソコン): 右端の「いますぐお問い合わせ」のタグを、現地担当が Canva で作った絵(contact-tag.svg)に置き換える
   ・絵の中に文字(CONTACT / いますぐお問い合わせ)と封筒が入っている → HTML の文字は見せずに読み上げにだけ残す
   ・D-169 の塗り跡(::before)は外す。出し入れ(スクロールで出る・問い合わせの節で引っ込む)と、ホバーで左へ少し出るのはそのまま
   ・絵は 242×820(絵のある範囲だけを viewBox で切り出した)。高さ 300px に合わせる
   ============================================================================ */
@media (min-width:761px){
  a.contact-tag{width:89px;height:300px;padding:0;background:url(../img/contact-tag.svg) right center / contain no-repeat}
  a.contact-tag::before{content:none}
  a.contact-tag > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* D-222(2026-10-18・現地担当「もう少し大きく！」/「この部分の"="マークは全て除去」):
   右端のお問い合わせのタグ 300 → 360px(幅も絵の比のまま 89 → 107px)/ 工事の流れの枠の見出しの右の「＝」を外す(左はアイコン)*/
@media (min-width:761px){ a.contact-tag{width:107px;height:360px} }
.flow-box-ttl.fb-ico::after{content:none}

/* D-223(2026-10-19・現地担当「h1エリアの仕切りを全て斜めに(右下がりと左下がりでランダム)」):
   料金の目安は下の節(skew-band)で斜めにしている(左が下・右が上)。ほかの4ページは帯そのものの下の端を斜めに切る。
   傾きの量は料金の目安と同じ(--skew-2e。スマホ 22px・パソコン 52〜108px)。向き: 施工事例・工事の流れ・お問い合わせ = 右下がり / 会社概要 = 左下がり */
.page-ttl.ttl-r,.page-ttl.ttl-l{--ttl-sk:clamp(16px, calc(var(--sec-y) - 12px), 112px)}
.page-ttl.ttl-r{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--ttl-sk)))}
.page-ttl.ttl-l{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ttl-sk)),0 100%)}
body:has(.cf-page) main{background:#F3EDE2}   /* D-223: お問い合わせのページは、帯を斜めに切った下を、下の節と同じ生成りで埋める(白い地が見えた)*/

/* ============================================================================
   🔴 D-225(2026-10-19・現地担当の指示): スマホ(767px 以下)では、14px の字を 13px にする
   ・現地担当が DESIGN_TOKENS の「絶対の下限 14px」を、スマホだけ 13px に改めることを承認した(R-195)
   ・14px を指定している規則(パソコンだけの塊を除く)を道具で拾い、同じ相手に 13px を当てる(html を前に付けて、あとから読まれる deco.css にも勝つ)
   ・拾い直すとき: /tmp の sp13.py と同じ手順(R-195 D-225 に書いた)
   ============================================================================ */
@media (max-width:767px){
html .hd-logo-sub,
html .hd-nav a,
html .hd-drawer-info,
html .hd-drawer-info .di-sub,
html .hero-note,
html .note-sm,
html .ph-label,
html .ph-label small,
html .sec-bg-label,
html .sec-bg-label small,
html .ph-note,
html .work-meta,
html .work-meta span,
html .works-caption,
html .notes,
html .flow-step p,
html .tel-box-sub,
html .form-notice,
html .field label,
html .form-privacy,
html .ft-addr,
html .ft-nav a,
html .ft-area p,
html .ft-copy,
html #reason .reason p,
html #service .svc p,
html #craft .craft-body,
html .flow-num,
html .scroll-cue,
html:root.story-on .naze-reason .reason p,
html:root:not(.story-on) #craft-sp .naze-b,
html:root.story-on .tap-cue,
html .ft2-addr,
html .ft2-tel,
html .ft2-area,
html .ft2-map span,
html .ft2 .ft-copy,
html .cf-tel-sub,
html .cf-note,
html .tel-box-label,
html:root body #craft .craft-body,
html:root body #craft-sp .naze-b,
html:root body #reason .reason p,
html:root body #service .svc-list,
html:root body #service .svc-note,
html:root body .faq dd .fl:not(:first-child),
html:root body #contact .ct-lead,
html:root body .ft2-nav a,
html:root body .ft2-btn,
html body:has(.page-ttl) main :is(p,li,th,td,label,button,a.btn,a.sub-back-link,.cf-check span):not(.lead-lg):not(.sign):not(.cf-tel-num):not(.req):not(.sec-h2),
html body:has(.page-ttl) .work-meta :is(b,span),
html .cf-td input::placeholder,
html .cf-td textarea::placeholder,
html .company-table th,
html .company-table td,
html .company-table td .note-sm,
html:root body .faq dt,
html:root body .faq dd .fl:first-child,
html .hd-drawer-info .di-name
{font-size:13px}
}
/* D-225: 13px にしたら、フッターのメニューと電話番号の押す所が 46.8 / 47.4px になった(検査器)→ 48px 以上を高さで確保 */
@media (max-width:767px){
  html body .ft2-nav a{min-height:48px;box-sizing:border-box;display:flex;align-items:center}
  html body .ft2-tel a{display:inline-flex;align-items:center;min-height:48px}
}

/* D-226(2026-10-19・現地担当「上は狭すぎる。下は広すぎる」・スマホの帰り道): 線 → SOLUTION と、だから、→ 選ばれる理由の見出し の空きを 24px にそろえる
   (前は 10px / 64px。SOLUTION と だから、の間は組なので狭いまま)*/
@media (max-width:767px){
  html:not(.story-on) .qa-bridge-sp{gap:24px}
  html:not(.story-on) .naze-body{padding-bottom:0}
  html:not(.story-on) #craftreason #reason{padding-top:24px}
}

/* D-227(2026-10-19): ヒーローの「説明を見る」「Webサイトへ」(スマホの場面のときだけ・見出しが出きってから)。TAP の合図の代わりに置く */
.hero-choice{display:none}
.hc-btn{min-width:136px;min-height:48px;padding:0 20px;border-radius:999px;font:inherit;font-family:"NotoJP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.1em;cursor:pointer}   /* 幅を問わず字の大きさを決めておく(隠れている幅でも検査器が読む)*/
@media (max-width:767px){
  html.story-on .hero-choice{display:flex;gap:12px;justify-content:center;position:absolute;left:0;right:0;z-index:4;
    bottom:calc(28px + 100svh - min(88svh,760px));opacity:0;pointer-events:none;transition:opacity .5s ease}
  html.story-on.hero-wait .hero-choice{opacity:1;pointer-events:auto}
  html.story-on.hero-wait .tap-cue-hero{opacity:0}
  .hc-go{background:#F3C01E;color:var(--sumi);border:0}
  .hc-skip{background:rgba(23,28,34,.35);color:#fff;border:1.5px solid rgba(255,255,255,.9)}
  .hc-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
}
/* D-227 の直し: 「Webサイトへ」の切り替えを、薄くして隠す(main だけ。上部の帯は動かさない)*/
main{transition:opacity .25s ease}
html.hc-fade main{opacity:0;transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){ main,html.hc-fade main{transition:none} }

/* D-229(2026-10-19・現地担当「PC版の SOLUTION / だから、の上と下の余白も、sp版同様にバランスよく」): 線 → SOLUTION と、だから、→ 見出し を 32px にそろえる
   (前は 12px / 48px。SOLUTION と だから、の間は組なので 10px のまま。スマホは D-226 の 24px)*/
@media (min-width:768px){
  #craft .qa-bridge:not(.qa-bridge-q){gap:32px}
  html body #reason{padding-top:12px}
}

/* ============================================================================
   🔴 D-230(2026-10-19・現地担当「画像テキストのサイズが揺れてます。統一してください」): 問い・答え・だから、の文字の大きさをそろえる
   測り方: 画像の中の字の高さを、同じ字を Zen Old Mincho で描いた高さと比べ、1文字の大きさ(em)を出した
     問いの画像 em = 幅の 0.1073 / 答えの画像 em = 幅の 0.1325 / だから、の画像 em = 幅の 0.2657
   前(測った): パソコン 問い 30px・答え 26px・だから、約 40px / スマホ(390)問い 28.4・答え 29.9・だから、31.9(だから、だけ幅が固定で、320 では 23.4 / 24.6 / 31.9)
   後: パソコンは 3つとも 28px / スマホは問いの画像に合わせ、3つとも画面の幅に比例(390 で約 28.4px)
   ============================================================================ */
@media (min-width:768px){
  html body #craft .sec-h2{font-size:28px}
  html body #craft .craft-lead{font-size:28px;font-weight:400}   /* 問いと同じ太さ(書体は 400 と 700 しか持っていないので、500 の指定は 400 で出ていた)*/
  html body #craft .qa-bridge-txt .dakara-img{width:105px}        /* 28 / 0.2657 */
}
@media (max-width:767px){
  /* ⚠ 直し(現地担当「sp版壊れてる」): 画像の幅を vw にしたら、入れ物の見出し(.naze-q-txt)が中身の幅に縮み、左に寄った → 見出しを全幅にして中央に置く
     ⚠ 直し(現地担当「もうほんの少しだけ小さくてもいい」): 3つとも 約 8% 小さく(390 で 1文字 約 26px)*/
  html:not(.story-on) body #craft-sp .naze-q-txt{display:block;width:100%;text-align:center}
  html:not(.story-on) body .naze-q-ret{width:min(62vw,300px);margin-left:auto;margin-right:auto}
  html:not(.story-on) body .naze-a{width:min(50.2vw,243px)}        /* 問いと同じ em: 62 × 0.1073 / 0.1325 */
  html:not(.story-on) body .qa-bridge-txt-sp .dakara-img{width:min(25vw,121px)}   /* 62 × 0.1073 / 0.2657 */
}

/* D-231(2026-10-19・現地担当「この辺りの四角いカードの縁を、(お問い合わせのフォームの)枠の縁と同じ色、同じ太さに」):
   工事の流れの枠(こんなことがありました ほか)と、できる工事のカード4枚の縁を、フォームの枠(.cf-box)と同じ 墨茶 #3B3330・パソコン 5px / スマホ 4px に */
/* ⚠ できる工事のカードにも付けたが、現地担当「ここだけは前の状態に戻します」で外した(縁なしに戻す)*/
.flow-box{border:5px solid #3B3330;box-sizing:border-box}
@media (max-width:767px){ .flow-box{border-width:4px} }

/* ============================================================================
   🔴 D-232(2026-10-19・現地担当の指示): 「できる工事」の個ページ(service.html)と、お問い合わせのページのよくある質問
   ・ヘッダー / 引き出し: 施工事例・できる工事・料金の目安 | 工事の流れ・会社概要・お問い合わせ(全部が個ページ)
   ・カードはトップの #service と同じ見た目(トップの #service には場面用の指定が多いので、id は使わず .svc-page で当てる)
   ============================================================================ */
.svc-page .svc-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;max-width:640px;margin-inline:auto}
.svc-page .svc{padding:24px 28px 26px}
html body .svc-page .svc-h3{font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-weight:700;font-size:18px;line-height:1.6;margin:0 0 .5em}
.svc-page .svc .svc-list{margin-bottom:1.1em}
.svc-page .svc-list .ln{display:block}
.svc-page .flow-end{margin-top:48px}
.cf-faq{background:#F3EDE2;padding-top:0}
@media (max-width:767px){
  .svc-page .svc{padding:18px 16px 20px}
  html body .svc-page .svc-h3{font-size:17px}
  .svc-page .flow-end{margin-top:32px}
}
.svc-page .svc-note .ln{word-break:auto-phrase}   /* 「お答えし / ます。」と折れた */
.faq dd .fl,.faq dt{word-break:auto-phrase}   /* D-232: 「ありませ / ん。」と折れた(トップ・お問い合わせのページとも)*/
/* D-233: できる工事のページの、誠実さを伝える3行(囲いなし・中央・1行ずつ)*/
.svc-promise{max-width:640px;margin:48px auto 0;text-align:center;line-height:2}
.svc-promise .ln{display:block}
.svc-promise .nw{display:inline-block}
.svc-page .svc-promise + .flow-end{margin-top:32px}
@media (max-width:767px){ .svc-promise{margin-top:36px} .svc-page .svc-promise + .flow-end{margin-top:24px} }
@media (min-width:900px){ body:has(.page-ttl) .works-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }   /* D-234: 1現場4枚が1列に並ぶように(3列だと1枚だけ下に残った)*/
/* D-234: ヒーロー2枚目(職人さんが筆で目地を塗る)。スマホは縦長の元写真を使う(横長の切り出しだと、顔と手元が両方は入らない)*/
@media (max-width:767px){ html body .hero-slide.hero-slide-6{background-image:url(../img/photos/hero-6-sp.jpg)!important;background-position:40% 45%!important} }

/* ============================================================================
   🔴 D-235(2026-10-19・現地担当の指示): 施工事例 = 1現場 1枚のカード → 押すと詳しいページ(works-01.html)
   ============================================================================ */
.work-link{display:block;color:inherit;text-decoration:none}
.work-more{display:block;margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--sumi);text-align:right}
.work-more::after{content:" ›"}
.work-link:hover .work-more,.work-link:focus-visible .work-more{text-decoration:underline}
@media (min-width:900px){ body:has(.page-ttl) .works-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }   /* 現場ごとのカードなので3列に戻す */
.wd-crumb{font-size:14px;margin:0 0 24px;color:var(--hai)}
.wd-crumb a{color:var(--sumi)}
.wd-page .sec-h2{margin-bottom:24px}
.wd-main{max-width:960px;margin:32px auto 0}
.wd-main img,.wd-fig img{display:block;width:100%;height:auto;border-radius:6px}
.wd-page figcaption{margin-top:8px;font-size:14px;text-align:center;color:var(--sumi)}
.wd-h3{max-width:960px;margin:56px auto 20px;font-family:"ZenOldMinchoB","ZenOldMincho",serif;font-size:20px;letter-spacing:.1em;text-align:center}
.wd-grid{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.wd-grid-2{grid-template-columns:minmax(0,1fr);max-width:480px}
.wd-fig{margin:0}
.wd-fig img{aspect-ratio:3/4;object-fit:cover}
.wd-back{text-align:center;margin:48px 0 0}
.wd-back a{color:var(--sumi);font-size:14px}
@media (max-width:767px){
  .wd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wd-h3{margin-top:40px;font-size:18px}
  .wd-crumb{margin-bottom:16px}
}
.wd-page figcaption,.wd-page .sec-note{word-break:auto-phrase}
@media (max-width:767px){ .wd-grid.wd-grid-2{grid-template-columns:minmax(0,1fr);max-width:320px} }   /* 仕上がりの1枚が半分の幅で残った */

/* D-236(2026-10-20): ページが見つからないときの画面(404.html)。円のロゴ・サイトと同じ書体 */
.nf-page{text-align:center;padding-top:96px;padding-bottom:96px}
.nf-logo{display:block;width:160px;height:auto;margin:0 auto 24px}
.nf-en{margin:0 0 12px;font-size:14px;letter-spacing:.3em;color:var(--sumi)}
.nf-h1{margin:0 0 20px;font-family:"ZenOldMincho",serif;font-weight:400;font-size:28px;line-height:1.6;letter-spacing:.1em;color:var(--sumi)}
.nf-note{margin:0;line-height:2}
.nf-note .nw{display:inline-block}
@media (max-width:767px){ .nf-page{padding-top:64px;padding-bottom:64px} .nf-logo{width:130px} .nf-h1{font-size:22px} }
/* D-237: お問い合わせの送信。見えない欄(ボット対策)と、結果の表示 */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-sent{margin:24px 0 0;padding:16px 18px;border:2px solid #3B3330;background:#FBFBF9;font-weight:700;line-height:1.9;text-align:center;color:var(--sumi)}
.cf-sent.is-ng{border-color:#B23A22;color:#7A2414}

/* D-241(2026-10-22・現地担当「全ての工事に、別途足場代がかかります。の部分にアンダーラインを」): サイトの強調の決まり(黄の下線 --ki-line)で引く。
   字は墨にする(灰の字のままだと、黄の上でコントラストが足りない)*/
.notes .mk-u{color:var(--sumi);background-image:var(--ki-line);background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}