/*
 * 家庭用エアコンLP（流山エアコン工事店）ページ固有CSS
 *
 * 意匠の正本は work/home-aircon-lp/design-direction-v6/ の確定ファイルと
 * APPROVAL-RECORD.md の照合値。ここはそれを1ページへ束ねた実装層である。
 *
 * 規則（docs/operations/wordpress-coding-standards.md 6章）
 * - すべて .hs-aircon 配下へscopeする
 * - html / body / * へページ固有指定を書かない
 * - mobile-first。PCは @media(min-width:900px) で足す
 * - 共通基礎層 hs-ui-foundation.css は継承しない。あれはコーポレートサイトの
 *   トークン（--hs-blue:#005AA0、font-size:16px）で、このサブブランドの配色と
 *   ぶつかる。共通層への昇格は複数ページで再利用できたときだけ行う
 *
 * セクションclassは s-fv / s-svc / s-price / s-cta / s-area / s-reason /
 * s-case / s-process / s-warranty / s-flow / s-faq / s-form / s-footer。
 * 意匠ファイル間で .hd .sec .btn など18件のclass名が衝突するため、
 * セクション単位でスコープしている。
 */

.hs-aircon {
  /* 色（design-direction-v6 README 3章の確定トークン） */
  --ink: #1a1a1a;          /* 本文 */
  --navy: #123a5e;         /* 見出し・金額・強調 */
  --h2: #14232e;           /* 明るい地のH2 */
  --navy2: #0e2e4b;        /* 濃紺のベタ */
  --deep: #0b63c4;         /* 白文字を載せる濃青 */
  --brand: #1a86e8;        /* 明るいブランド青 */
  --sub: #0596d8;
  --tl: #00a396;
  --grn: #2aa049;
  --pale: #e9f3fc;         /* 淡青 */
  --ylp: #fff6cc;          /* 淡黄 */
  --yl: #ffdd00;           /* CTA黄 */
  --gray: #4a5b6a;         /* 注記 */
  --shot: #e3ebf3;         /* 写真枠 */
  --gold: linear-gradient(150deg, #fff8cc 0%, #eeb700 40%, #fff09e 62%, #e3a800 100%);

  /* 余白は8pxの階段8段だけを使う */
  --s1: 8px;  --s2: 12px; --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px; --s8: 88px;

  background: #fff;
  color: var(--ink);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  /* clip であって hidden ではない。**hidden は overflow-y を auto へ計算させ、
     スクロールコンテナを作る。**すると中の position:sticky はそのコンテナに
     貼り付き、ページと一緒に流れてヘッダーが画面外へ出る（2026-08-10に実測。
     3,000pxスクロールでヘッダーの top が -3,000px になっていた）。
     clip はスクロールコンテナを作らないので sticky が生きる */
  overflow-x: clip;
}

.hs-aircon *,
.hs-aircon *::before,
.hs-aircon *::after { box-sizing: border-box; }

.hs-aircon p,
.hs-aircon h1,
.hs-aircon h2,
.hs-aircon h3,
.hs-aircon dl,
.hs-aircon dd,
.hs-aircon dt,
.hs-aircon figure { margin: 0; }

.hs-aircon ul,
.hs-aircon ol { margin: 0; padding: 0; list-style: none; }

.hs-aircon a { color: inherit; }

/* 追従ヘッダーの入れ物。**箱を作らない**（display:contents）。
   ヘッダーは意匠上 .s-fv の部品なので .s-fv .hd のままにしたいが、
   position:sticky は親要素の箱の中でしか動けない。FVの中に置くと
   FVの高さぶん（672px）で止まり、そこから先はCTAごと画面外へ流れる。
   この入れ物は箱を持たないので、ヘッダーの包含ブロックは .hs-aircon になる */
.hs-aircon .hd-host { display: contents; }

/* ヘッダーのstickyで飛んだ先が隠れないようにする（v3 styles.css:36）。
   ヘッダーの高さは PC 80px / SP 58px */
.hs-aircon .s-form,
.hs-aircon [id] { scroll-margin-top: 58px; }

@media (min-width: 900px) {
  .hs-aircon [id] { scroll-margin-top: 80px; }
}

/* ===== セクション末尾のCTA =====
   2026-08-10（第2回。ユーザー指摘）。**受け皿をやめ、濃紺の板を画面いっぱいの
   帯にした。**それまでは板を1120pxにして直前のセクションの地を左右へ覗かせて
   いたが、「CTAにも中途半端に薄い水色の背景があり、このブロックの構造が
   わかりにくい」となった。**色が変わるところは必ず全幅の帯にする。**
   板が全幅なら受け皿は要らず、CTAは誰が見ても独立した帯として読める。
   末尾CTAは4か所（工事・料金・選ばれる理由・施工例）とも同じこの部品を使う。 */
.hs-aircon .s-cta { padding: 0; }


/* ===== モック台について =====
   料金と施工例の意匠ファイルは390pxの端末を模した台の上に載っている。
   実ページではセクションそのものになるため台は要らない。
   2026-08-10まではここに打ち消しを置いていたが、後から来る各セクションの
   基底ルールに同じ詳細度で負けていて効いていなかった（料金の濃青が
   866pxの箱として白の上に浮いていた）。打ち消しはやめ、各セクションの
   基底ルールそのものを書き換えた。 */


/* ===== ヘッダー＋ファーストビュー（fv-approved.html） ===== */
.hs-aircon .s-fv{
 --navy:#123a5e;--ink:#1a1a1a;--blue:#0a66b5;
 --btn:#ffdd00;--btn-ink:#111111;--wrap:1120px;
 --gold:linear-gradient(180deg,#fff8cc 0%,#fff09e 22%,#eeb700 70%,#e3a800 100%);
 --c1:#1a86e8;--c2:#0596d8;--c3:#00a396;--c4:#2aa049;
 --t1:#e8f3fd;--t2:#e4f4fd;--t3:#e2f7f5;--t4:#eaf8ee}.hs-aircon .s-fv{box-sizing:border-box}.hs-aircon .s-fv /* 本文400・色は黒。太字は見出し、ラベル、数値、強調にだけ使う */
body{margin:0;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;color:var(--ink);background:#fff;line-height:1.7}.hs-aircon .s-fv h1,.hs-aircon .s-fv p,.hs-aircon .s-fv ul{margin:0}.hs-aircon .s-fv ul{padding:0;list-style:none}.hs-aircon .s-fv a{color:inherit;text-decoration:none}.hs-aircon .s-fv /* 追従はヘッダーのstickyだけ。下部固定バーは使わない（v3 styles.css:72、2026-08-02確定）。
   ページ内リンクの着地点が隠れないよう、各セクションへ scroll-margin-top を置く。
   このヘッダーの高さは PC 80px / SP 58px */
html{scroll-behavior:smooth}.hs-aircon .s-fv /* ヘッダー。CTAを最大化し、電話はラベルを外す */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:2px solid #e6eef5}.hs-aircon .s-fv .hd__in{max-width:var(--wrap);margin:0 auto;padding:0 20px;height:80px;display:flex;align-items:center;justify-content:space-between;gap:18px}.hs-aircon .s-fv .bd{display:grid;line-height:1.3}.hs-aircon .s-fv .bd small{font-size:14px;color:#4a5b6a;font-weight:500}.hs-aircon .s-fv .bd strong{font-size:21px;font-weight:900;color:var(--navy);letter-spacing:-.02em}.hs-aircon .s-fv .hd__r{display:flex;align-items:center;gap:16px}.hs-aircon .s-fv .tel{display:grid;justify-items:end;line-height:1.2}.hs-aircon .s-fv .tel b{font-family:"Roboto Condensed",sans-serif;font-size:27px;color:var(--navy)}.hs-aircon .s-fv .tel span{font-size:14px;color:#4a5b6a;font-weight:500}.hs-aircon .s-fv /* 確定ボタン（Y3）。面はフラットな黄、縁だけ2pxの金、影は無彩色 */
.btn{color:var(--btn-ink);border-radius:6px;border:2px solid transparent;
 background-image:linear-gradient(var(--btn),var(--btn)),var(--gold);
 background-origin:border-box;background-clip:padding-box,border-box;
 box-shadow:0 12px 26px -10px rgba(16,32,48,.32)}.hs-aircon .s-fv .btn .ar{flex:none;position:relative;width:20px;height:20px;font-style:normal}.hs-aircon .s-fv .btn .ar::before{content:"";position:absolute;left:0;top:9px;width:18px;height:2.5px;background:currentColor}.hs-aircon .s-fv .btn .ar::after{content:"";position:absolute;right:1px;top:3.5px;width:11px;height:11px;
 border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg)}.hs-aircon .s-fv .hd__cta{display:flex;align-items:center;gap:14px;height:62px;padding:0 22px;min-width:352px}.hs-aircon .s-fv .hd__cta b{font-size:18px;font-weight:900;letter-spacing:-.02em;white-space:nowrap}.hs-aircon .s-fv .hd__cta .ar{margin-left:auto}
@media(max-width:899px){.hs-aircon .s-fv .hd__in{height:58px;padding:0 12px;gap:8px}.hs-aircon .s-fv .bd small{font-size:14px}.hs-aircon .s-fv .bd strong{font-size:15px;white-space:nowrap}.hs-aircon .s-fv .tel{display:none}.hs-aircon .s-fv .hd__cta{height:46px;min-width:0;padding:0 12px;gap:9px;box-shadow:0 12px 26px -10px rgba(16,32,48,.32)}.hs-aircon .s-fv .hd__cta b{font-size:14px}.hs-aircon .s-fv .btn .ar{width:15px;height:15px}.hs-aircon .s-fv .btn .ar::before{top:6.5px;width:13px;height:2px}.hs-aircon .s-fv .btn .ar::after{top:2.5px;width:8.5px;height:8.5px;border-width:2px}
}.hs-aircon .s-fv /* ===== v3の幾何（変更しない） ===== */
.hero{position:relative;isolation:isolate;display:block;width:100%;height:min(640px,calc(100svh - 108px));min-height:420px;overflow:hidden}.hs-aircon .s-fv .hero__photo{position:absolute;z-index:-2;inset:0;margin:0;display:grid;align-content:start;
 background:linear-gradient(to bottom right,transparent calc(50% - .5px),#ccd6de 50%,transparent calc(50% + .5px)),
            linear-gradient(to top right,transparent calc(50% - .5px),#ccd6de 50%,transparent calc(50% + .5px)),#eaeff3}.hs-aircon .s-fv .hero::after{position:absolute;z-index:-1;inset:0;content:"";pointer-events:none;
 background:linear-gradient(to top,rgba(255,255,255,.66) 0%,rgba(255,255,255,.58) 50%,rgba(255,255,255,0) 78%)}.hs-aircon .s-fv .hero__body{position:absolute;z-index:2;top:43%;right:16px;left:16px}.hs-aircon .s-fv .hero__badge{position:absolute;z-index:3;top:20px;right:16px;width:92px;height:92px;margin:0;line-height:1;text-align:center;
 display:grid;align-content:center;justify-items:center;gap:1px}.hs-aircon .s-fv .badge__art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hs-aircon .s-fv .hero__badge small,.hs-aircon .s-fv .hero__badge span,.hs-aircon .s-fv .hero__badge strong{position:relative}.hs-aircon .s-fv .hero__badge small,.hs-aircon .s-fv .hero__badge strong{font-size:14px;font-weight:900;letter-spacing:.06em;color:#3a2a00}.hs-aircon .s-fv .hero__badge span{font-family:"Roboto Condensed",sans-serif;font-size:23px;letter-spacing:-.02em;font-weight:700;color:#241a00}.hs-aircon .s-fv .hero h1{max-width:12em;font-weight:900;font-size:clamp(26px,8vw,31px);letter-spacing:-.05em;line-height:1.2;color:var(--navy)}.hs-aircon .s-fv .hero h1 em{font-style:normal;color:var(--blue)}.hs-aircon .s-fv .hero__service{margin-top:12px;font-size:clamp(14px,3.6vw,15px);font-weight:500;color:#1a1a1a;line-height:1.55}.hs-aircon .s-fv /* 特徴4つ（パターン2の骨格） */
.hero__points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;background:#fff;padding:9px;column-gap:7px;row-gap:7px}.hs-aircon .s-fv .hero__points li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px 7px}.hs-aircon .s-fv .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal}.hs-aircon .s-fv .ic svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.hs-aircon .s-fv .hero__points li:nth-child(1) .ic{background:var(--c1)}.hs-aircon .s-fv .hero__points li:nth-child(2) .ic{background:var(--c2)}.hs-aircon .s-fv .hero__points li:nth-child(3) .ic{background:var(--c3)}.hs-aircon .s-fv .hero__points li:nth-child(4) .ic{background:var(--c4)}.hs-aircon .s-fv .hero__points li:nth-child(1) b{color:var(--c1)}.hs-aircon .s-fv .hero__points li:nth-child(2) b,.hs-aircon .s-fv .hero__points li:nth-child(2) i{color:var(--c2)}.hs-aircon .s-fv .hero__points li:nth-child(3) b{color:var(--c3)}.hs-aircon .s-fv .hero__points li:nth-child(4) b{color:var(--c4)}.hs-aircon .s-fv .hero__points strong{display:block;font-weight:900;line-height:1.35}.hs-aircon .s-fv .hero__points span{display:block;font-size:14px;font-weight:700;letter-spacing:-.04em;color:#4a5b6a}.hs-aircon .s-fv .hero__points b{display:inline-block;font-size:19px;font-weight:900;line-height:1.1;letter-spacing:-.055em;white-space:nowrap}.hs-aircon .s-fv .hero__points i{margin-left:2px;font-style:normal;font-size:14px;font-weight:900;white-space:nowrap}.hs-aircon .s-fv /* CTA。確定ボタン（Y3）。高さと中央揃えはv3のまま */
.hero__action{margin-top:12px}.hs-aircon .s-fv .hero__cta{display:flex;align-items:center;justify-content:center;min-height:54px;gap:12px;padding:10px 18px}.hs-aircon .s-fv .hero__cta span{font-size:15px;font-weight:900;letter-spacing:-.03em}.hs-aircon .s-fv .hero__note{margin-top:8px;text-align:center;font-weight:500;line-height:1.45;font-size:14px;color:#1a1a1a}.hs-aircon .s-fv .fv-note{margin:10px 0 0;text-align:center;font-size:11px;line-height:1.6;font-weight:500;color:#5b6b7a}
@media (min-width:900px){
  .hs-aircon .s-fv .fv-note{font-size:12px;margin-top:12px}
}
/* 340px未満（iPhone SE第1世代など）でだけ、FVバッジのラベルを1行に収める。
   360px以上は無変更。ここを緩めると注釈がFVの箱から溢れて切れる。 */
@media (max-width:340px){
  .hs-aircon .s-fv .hero__points span{font-size:12px}
  .hs-aircon .s-fv .fv-note{margin-top:6px}
}

@media(min-width:900px){.hs-aircon .s-fv .hero{height:min(760px,84svh);min-height:600px}.hs-aircon .s-fv .hero::after{background:linear-gradient(to right,rgba(255,255,255,.86) 0%,rgba(255,255,255,.66) 42%,rgba(255,255,255,0) 62%)}.hs-aircon .s-fv .hero__body{top:50%;right:auto;left:max(20px,calc((100% - var(--wrap))/2));width:min(560px,46vw);transform:translateY(-50%)}.hs-aircon .s-fv .hero__badge{top:auto;right:max(20px,calc((100% - var(--wrap))/2));bottom:48px;width:150px;height:150px}.hs-aircon .s-fv .hero__badge small,.hs-aircon .s-fv .hero__badge strong{font-size:17px}.hs-aircon .s-fv .hero__badge span{font-size:37px;letter-spacing:-.02em}.hs-aircon .s-fv .hero h1{font-size:clamp(42px,3.9vw,56px);line-height:1.16}.hs-aircon .s-fv .hero__service{margin-top:16px;font-size:clamp(15px,1.3vw,18px)}.hs-aircon .s-fv .hero__points{margin-top:24px;padding:16px;column-gap:14px;row-gap:14px}.hs-aircon .s-fv .hero__points li{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:10px 12px 11px}.hs-aircon .s-fv .ic{width:52px;height:52px}.hs-aircon .s-fv .ic svg{width:28px;height:28px}.hs-aircon .s-fv .hero__points span{font-size:14px}.hs-aircon .s-fv .hero__points b{font-size:23px}.hs-aircon .s-fv .hero__points i{font-size:15px;margin-left:5px}.hs-aircon .s-fv .hero__action{margin-top:24px;width:min(460px,100%)}.hs-aircon .s-fv .hero__cta{min-height:66px;padding:10px 24px;gap:14px}.hs-aircon .s-fv .hero__cta span{font-size:21px;letter-spacing:-.035em}.hs-aircon .s-fv .hero__cta .ar{width:22px;height:22px}.hs-aircon .s-fv .hero__cta .ar::before{top:10px;width:20px}.hs-aircon .s-fv .hero__cta .ar::after{top:4px;width:12px;height:12px}.hs-aircon .s-fv .hero__note{margin-top:12px;font-size:14px}
}.hs-aircon .s-fv /* パターンB：淡い色面のタイルへ載せる */
.hero__points li:nth-child(1){background:var(--t1)}.hs-aircon .s-fv .hero__points li:nth-child(2){background:var(--t2)}.hs-aircon .s-fv .hero__points li:nth-child(3){background:var(--t3)}.hs-aircon .s-fv .hero__points li:nth-child(4){background:var(--t4)}.hs-aircon .s-fv .hero__points li{padding:7px 9px 8px}
@media(min-width:900px){.hs-aircon .s-fv .hero__points li{padding:12px 14px 13px}}


/* ===== 工事（サービス）（services-flat.html） ===== */
.hs-aircon .s-svc{
 --navy:#123a5e;--h2:#14232e;--navy2:#0e2e4b;--blue:#1a86e8;--deep:#0b63c4;--sub:#0596d8;--tl:#00a396;--grn:#2aa049;
 --body:#1a1a1a;--mute:#4a5b6a;
 --pale:#e9f3fc;--faint:#d3e6f9;--yl:#ffdd00;--ylPale:#fff6cc;
 --gold:linear-gradient(180deg,#fff8cc 0%,#fff09e 22%,#eeb700 70%,#e3a800 100%);
 --shot:#e3ebf3;
 --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:88px}.hs-aircon .s-svc{box-sizing:border-box}.hs-aircon .s-svc{margin:0;background:#fff;color:var(--body);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:2}.hs-aircon .s-svc p,.hs-aircon .s-svc h2,.hs-aircon .s-svc h3,.hs-aircon .s-svc ol,.hs-aircon .s-svc figure{margin:0}.hs-aircon .s-svc ol{padding:0;list-style:none}.hs-aircon .s-svc .num{font-family:"Roboto Condensed",sans-serif;font-weight:700}.hs-aircon .s-svc /* スマホでだけ改行する。PCでは1行に収まるので出さない */
br.sp{display:none}.hs-aircon .s-svc .sec{padding:var(--s8) 20px calc(var(--s8) + var(--s3))}.hs-aircon .s-svc .in{max-width:1120px;margin:0 auto}.hs-aircon .s-svc /* ---- 見出し。確定寸法 H2 34px・900・中央 ---- */
.hd{text-align:center;margin-bottom:var(--s6)}.hs-aircon .s-svc /* リードは線だけのピル（m6）。地色は抜き、線と文字の色だけ地に合わせる */
.hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-svc .hd h2{margin-top:var(--s2);font-size:34px;font-weight:900;color:var(--h2);letter-spacing:-.035em;line-height:1.3}.hs-aircon .s-svc .hd .ld{margin:var(--s2) auto 0;max-width:47em;font-size:15px;font-weight:400;color:var(--body);line-height:2}.hs-aircon .s-svc /* ---- 工事4件 ----
   確定文法にそろえる。面と面が継ぎ目なく接し、影・角丸・輪郭を使わない。
   浮かせるかわりに、工事ごとの淡い色面で区切りを作る（ここが色の楽しさを担う） */
.stories{display:grid;gap:var(--s3)}.hs-aircon .s-svc .story{display:grid;grid-template-columns:1.15fr .85fr;min-height:340px}.hs-aircon .s-svc .story:nth-child(even){grid-template-columns:.85fr 1.15fr}.hs-aircon .s-svc .story:nth-child(even) .shots{order:2}.hs-aircon .s-svc .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}.hs-aircon .s-svc .ph{position:relative;display:grid;place-content:center;text-align:center;background:var(--shot)}.hs-aircon .s-svc .ph b{font-size:14px;font-weight:500;color:#67809a}.hs-aircon .s-svc .ph i{position:absolute;left:0;top:0;font-style:normal;padding:3px 9px;
 background:var(--navy2);color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em}.hs-aircon .s-svc /* 4件を青→緑へ流す。面は淡い色、チップは同系の濃い色 */
.copy{position:relative;align-self:stretch;display:grid;align-content:center;
 padding:var(--s6) var(--s6) calc(var(--s6) - var(--s1));background:#eaf3fd;overflow:hidden}.hs-aircon .s-svc .story:nth-child(2) .copy{background:#e5f5fc}.hs-aircon .s-svc .story:nth-child(3) .copy{background:#e2f6f3}.hs-aircon .s-svc .story:nth-child(4) .copy{background:#e8f6ea}.hs-aircon .s-svc .copy .no{position:absolute;right:var(--s4);top:var(--s2);font-size:96px;line-height:1;
 letter-spacing:-.04em;color:#d3e6f9}.hs-aircon .s-svc .story:nth-child(2) .no{color:#cbeaf7}.hs-aircon .s-svc .story:nth-child(3) .no{color:#c6ebe5}.hs-aircon .s-svc .story:nth-child(4) .no{color:#d3ecd7}.hs-aircon .s-svc .copy .kind{position:relative;display:inline-block;justify-self:start;padding:4px 12px;
 background:var(--deep);color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.6}.hs-aircon .s-svc .story:nth-child(2) .kind{background:#0578b0}.hs-aircon .s-svc .story:nth-child(3) .kind{background:#048174}.hs-aircon .s-svc .story:nth-child(4) .kind{background:#1d7f39}.hs-aircon .s-svc .copy h3{position:relative;margin-top:var(--s2);font-size:23px;font-weight:900;color:var(--navy);
 letter-spacing:-.04em;line-height:1.45}.hs-aircon .s-svc .copy p{position:relative;margin-top:var(--s2);font-size:14px;font-weight:400;color:var(--body);line-height:2.05}.hs-aircon .s-svc /* 用語の言い換え */
.plain{position:relative;margin-top:var(--s4);padding:var(--s2) var(--s3);background:rgba(255,255,255,.82)}.hs-aircon .s-svc .plain b{display:block;font-size:14px;font-weight:700;color:var(--navy)}.hs-aircon .s-svc .plain span{display:block;font-size:14px;font-weight:400;color:var(--body);line-height:1.9}.hs-aircon .s-svc /* ---- 工事内容を決める4つのチェックポイント ----
   淡青のベタ面。中の4枚も面で接する（2pxの継ぎ目に地色を見せるだけ） */
.check{margin-top:var(--s6);padding:var(--s6);background:var(--pale)}.hs-aircon .s-svc .check__hd{text-align:center;max-width:46em;margin:0 auto var(--s5)}.hs-aircon .s-svc .check__hd h3{font-size:25px;font-weight:900;color:var(--navy);letter-spacing:-.04em;line-height:1.55}.hs-aircon .s-svc /* 黄のマーカーはページ内でここだけ */
.check__hd mark{background:linear-gradient(transparent 56%,#ffe95c 56%,#ffd400 100%);color:inherit;padding:0 3px}.hs-aircon .s-svc .check__hd em{font-style:normal;font-size:34px;font-weight:900;color:var(--deep);letter-spacing:-.05em;padding:0 2px}.hs-aircon .s-svc .check__hd .note{margin-top:var(--s2);font-size:14px;font-weight:400;color:#4a5b6a;line-height:1.85}.hs-aircon .s-svc .points{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.hs-aircon .s-svc /* 補足が2行になる列が出ても白面の高さを揃える。写真=固定、白面=残り全部 */
.points li{display:grid;grid-template-rows:auto minmax(0,1fr)}.hs-aircon .s-svc .points .ph2{position:relative;height:150px;display:grid;place-content:center;text-align:center;background:var(--shot)}.hs-aircon .s-svc .points .ph2 b{font-size:14px;font-weight:500;color:#67809a}.hs-aircon .s-svc .points .n{position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;
 font-size:16px;color:#fff;background:var(--deep)}.hs-aircon .s-svc .points li:nth-child(2) .n{background:#0578b0}.hs-aircon .s-svc .points li:nth-child(3) .n{background:#048174}.hs-aircon .s-svc .points li:nth-child(4) .n{background:#1d7f39}.hs-aircon .s-svc .points .tx{padding:var(--s3);background:#fff}.hs-aircon .s-svc .points .tx b{display:block;font-size:16px;font-weight:900;color:var(--navy);letter-spacing:-.03em;line-height:1.5;
 text-decoration:underline;text-decoration-color:#7cc0f5;text-decoration-thickness:4px;text-underline-offset:3px}.hs-aircon .s-svc .points li:nth-child(2) .tx b{text-decoration-color:#6fd3f5}.hs-aircon .s-svc .points li:nth-child(3) .tx b{text-decoration-color:#5fd9cb}.hs-aircon .s-svc .points li:nth-child(4) .tx b{text-decoration-color:#8ee0a0}.hs-aircon .s-svc .points span{display:block;margin-top:var(--s1);font-size:14px;font-weight:400;color:var(--body);line-height:1.8}.hs-aircon .s-svc /* ---- 締めのCTA。確定色 #0E2E4B のベタ面 ---- */
.cta{margin-top:var(--s6);padding:var(--s7) var(--s6);text-align:center;background:var(--navy2);color:#fff}

/* ================= スマホ 390px =================
   写真を横に2枚以上並べない（3章）。複数枚はスライド・タブ・枚数を絞る
   のいずれかで捌く。ここは枚数を絞る（施工例の重ねは施工例の部品であって、
   ほかのブロックへ広げるものではない） */
@media(max-width:899px){.hs-aircon .s-svc .sec{padding:var(--s6) var(--s3) var(--s7)}.hs-aircon .s-svc .hd{margin-bottom:var(--s5)}.hs-aircon .s-svc .hd h2{font-size:24px;letter-spacing:-.04em;line-height:1.34}.hs-aircon .s-svc .hd .ld{font-size:14px;line-height:1.9}.hs-aircon .s-svc br.sp{display:inline}.hs-aircon .s-svc .stories{gap:var(--s2)}.hs-aircon .s-svc .story,.hs-aircon .s-svc .story:nth-child(even){grid-template-columns:1fr;min-height:0}.hs-aircon .s-svc .story:nth-child(even) .shots{order:0}.hs-aircon .s-svc /* 写真は1枚だけ全幅で出す。各ペアの1枚目を残すと4つとも違う絵になり、
    読み手が「自分はどの工事か」を見分けられる。2枚目を残すと01と02が
    どちらも「完成」で同じ絵になる。2枚目はPCでだけ見せる */
 .shots{display:block;height:196px}.hs-aircon .s-svc .ph{height:100%}.hs-aircon .s-svc .shots .ph:nth-child(n+2){display:none}.hs-aircon .s-svc .copy{padding:var(--s4) var(--s3) var(--s5)}.hs-aircon .s-svc .copy .no{right:var(--s2);top:2px;font-size:62px}.hs-aircon .s-svc .copy .kind{font-size:14px;padding:3px 10px}.hs-aircon .s-svc .copy h3{margin-top:10px;font-size:20px;line-height:1.42}.hs-aircon .s-svc .copy p{margin-top:10px;font-size:14px;line-height:1.95}.hs-aircon .s-svc .plain{margin-top:var(--s3);padding:11px var(--s2)}.hs-aircon .s-svc .plain b,.hs-aircon .s-svc .plain span{font-size:14px}.hs-aircon .s-svc .check{margin-top:var(--s5);padding:var(--s5) var(--s3)}.hs-aircon .s-svc .check__hd{margin-bottom:var(--s4)}.hs-aircon .s-svc .check__hd h3{font-size:20px;line-height:1.5}.hs-aircon .s-svc .check__hd em{font-size:27px}.hs-aircon .s-svc .check__hd .note{font-size:14px;line-height:1.9}.hs-aircon .s-svc /* 4項目も縦に積む。写真は「何を撮ればよいか」を示す役なので外さない */
 .points{grid-template-columns:1fr}.hs-aircon .s-svc .points li{grid-template-rows:none;grid-template-columns:46% 1fr}.hs-aircon .s-svc .points .ph2{height:105px}.hs-aircon .s-svc .points .ph2--photo{display:block;overflow:hidden;background:#e3ebf3}.hs-aircon .s-svc .points .ph2--photo picture,.hs-aircon .s-svc .points .ph2--photo img{display:block;width:100%;height:100%;object-fit:cover}.hs-aircon .s-svc .points .ph2 b{font-size:14px}.hs-aircon .s-svc .points .n{width:34px;height:34px;font-size:14px}.hs-aircon .s-svc .points .tx{padding:10px 14px;display:grid;align-content:center}.hs-aircon .s-svc .points .tx b{font-size:15px;text-decoration-thickness:3px}.hs-aircon .s-svc .points span{font-size:13px;line-height:1.65;margin-top:3px}.hs-aircon .s-svc .btn{width:100%;min-width:0;height:58px;font-size:15px;padding:0 14px;margin-top:var(--s3)}
}


/* ===== 対応メーカー =====
   ページ共通の「全幅帯 → 1120px内寸 → 中央見出し → 面」の文法へ合わせる。
   淡青の帯＋白いロゴ面の2層だけとし、影・角丸・カード枠は使わない。 */
.hs-aircon .s-makers{
 --navy:#123a5e;--h2:#14232e;--pale:#e9f3fc;--body:#1a1a1a;
 box-sizing:border-box;background:var(--pale);color:var(--body);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif
}
.hs-aircon .s-makers *{box-sizing:border-box}.hs-aircon .s-makers p,.hs-aircon .s-makers h2,.hs-aircon .s-makers ul{margin:0}.hs-aircon .s-makers ul{padding:0;list-style:none}
.hs-aircon .s-makers .sec{padding:104px 20px}.hs-aircon .s-makers .in{max-width:1120px;margin:0 auto}.hs-aircon .s-makers .hd{text-align:center;margin-bottom:48px}
.hs-aircon .s-makers .hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}
.hs-aircon .s-makers .hd h2{margin-top:12px;color:var(--h2);font-size:34px;font-weight:900;letter-spacing:-.035em;line-height:1.3}
.hs-aircon .s-makers .hd .ld{max-width:47em;margin:12px auto 0;color:var(--body);font-size:15px;font-weight:400;line-height:2}
.hs-aircon .s-makers .maker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#c8dced}
.hs-aircon .s-makers .maker-grid li{min-width:0;height:128px;padding:28px 36px;display:grid;place-items:center;background:#fff}
.hs-aircon .s-makers .maker-grid img{display:block;width:auto;height:auto;max-width:78%;max-height:58px;object-fit:contain}
.hs-aircon .s-makers .maker-grid li:nth-child(2) img,.hs-aircon .s-makers .maker-grid li:nth-child(8) img{max-width:88%}
.hs-aircon .s-makers .maker-grid li:nth-child(7) img{max-height:74px}
@media(max-width:899px){
 .hs-aircon .s-makers .sec{padding:64px 16px}.hs-aircon .s-makers .hd{margin-bottom:32px}
 .hs-aircon .s-makers .hd h2{font-size:24px;letter-spacing:-.04em;line-height:1.34}
 .hs-aircon .s-makers .hd .ld{font-size:14px;line-height:1.9}
 .hs-aircon .s-makers .maker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hs-aircon .s-makers .maker-grid li{height:88px;padding:18px 10px}
 .hs-aircon .s-makers .maker-grid img{max-width:96%;max-height:42px}
 .hs-aircon .s-makers .maker-grid li:nth-child(2) img,.hs-aircon .s-makers .maker-grid li:nth-child(8) img{max-width:100%}
}

/* ===== 料金 ===== */
/* 2026-08-10、色を絞った（README 6.6 ③）。
   ・オレンジ #E8892B は3章の色トークン表に無い色だったので廃止
   ・並列の系列はこのセクションに1つだけ。料金3カードの 青→水色→ティール が
     それで、決まり方の3ステップは色分けしない（3章「並列ブロック1つにつき1系列」）。
     どれが条件つきかは色ではなく「ご自宅の条件により加算」の札が言っている
   ・「お見積り金額」の金の帯を廃止。黄はCTAボタンの色である（3章） */
.hs-aircon .s-price{--ink:#1a1a1a;--navy:#123a5e;--navy2:#0e2e4b;--deep:#0b63c4;--brand:#1a86e8;--sub:#0596d8;--tl:#00a396;
 --pale:#e9f3fc;--yl:#ffdd00;
 --c1:#1a86e8;
 --col:46px}.hs-aircon .s-price{box-sizing:border-box}.hs-aircon .s-price{color:var(--ink);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}.hs-aircon .s-price p,.hs-aircon .s-price h2{margin:0}.hs-aircon .s-price .num{font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:-.045em}.hs-aircon .s-price .stage{display:block;padding:0}.hs-aircon .s-price .sp{width:auto}.hs-aircon .s-price /* ===== 主ブロック｜料金 ===== */
.main{background:var(--deep);padding:34px 14px 34px}.hs-aircon .s-price .hd{text-align:center;margin-bottom:18px}.hs-aircon .s-price /* リードは線だけのピル（m6）。地色は抜き、線と文字の色だけ地に合わせる */
.hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid rgba(255,221,0,.85);color:var(--yl);font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-price .hd h2{margin-top:9px;font-size:24px;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.34}.hs-aircon .s-price .prices{display:grid;gap:2px}.hs-aircon .s-price .pc{background:#fff;display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center}.hs-aircon .s-price .pc > .head{align-self:stretch;display:grid;place-items:center;padding:12px 6px;font-size:15px;font-weight:900;color:#fff;line-height:1.4;text-align:center}.hs-aircon .s-price .pc:nth-child(1) > .head{background:var(--c1)}.hs-aircon .s-price .pc:nth-child(2) > .head{background:var(--sub)}.hs-aircon .s-price .pc:nth-child(3) > .head{background:var(--tl)}.hs-aircon .s-price .pc > .bd{padding:12px 14px 14px}.hs-aircon .s-price .pc .price{display:flex;align-items:baseline;gap:5px;margin-bottom:16px}.hs-aircon .s-price .pc .price s{text-decoration:none;font-size:14px;font-weight:700;color:var(--navy);background:var(--pale);padding:2px 7px}.hs-aircon .s-price .pc .price .n{font-size:32px;line-height:1;color:var(--deep)}.hs-aircon .s-price .pc .price u{text-decoration:none;font-size:14px;font-weight:900;color:var(--deep)}.hs-aircon .s-price .pc .what{margin-top:0;font-size:14px;font-weight:700;color:var(--navy);line-height:1.65}.hs-aircon .s-price .pc .basis{margin-top:8px;font-size:14px;color:#4a5b6a;line-height:1.7}.hs-aircon .s-price .source{margin-top:2px;background:#0a56aa;color:#d7e8fa;padding:12px 14px;font-size:14px;line-height:1.85}.hs-aircon .s-price /* ===== サブブロック｜決まり方（POINT） =====
   濃青が下向きの三角で下の面へ食い込み、ブロックが変わったことを示す。
   2026-08-10、地を白から淡青へ変えた（README 6.6 ①）。白のままだと
   「料金のPOINT → 末尾CTAの受け皿 → 対応エリア」で白が3つ続いていた */
.sub{position:relative;background:var(--pale);padding:38px 14px 34px}.hs-aircon .s-price /* 式は縦に読む。演算子は番号の柱の真下に置き、中央へ寄せない */
.calc{margin-top:16px}.hs-aircon .s-price /* 2026-08-10（ユーザー指示）。番号を左の柱にすると、中身が柱のぶん右へずれて
   図解が面の中心から外れていた。**番号を面の上の丸にし、中身を中央へ寄せる。**
   これで面ひとつが1つのまとまりとして読める */
.blk{background:#fff;padding:20px 16px 22px;text-align:center}.hs-aircon .s-price /* 番号の柱と面は3つとも同じ。淡青の地に白い面という組み方は
   選ばれる理由・FAQと同じ文法である */
.blk > .n{width:40px;height:40px;border-radius:50%;margin:0 auto;display:grid;place-items:center;font-size:18px;color:#fff;background:var(--deep)}.hs-aircon .s-price /* 条件つきであることを言う札。線だけのピル（m6と同じ文法）。
   白い面の上にもう1枚の面を置くと3層になるので塗らない */
.cond{display:inline-block;margin-top:5px;padding:2px 8px;background:none;box-shadow:inset 0 0 0 1.5px #9dc4e6;color:var(--navy);font-size:14px;font-weight:700}.hs-aircon .s-price /* 演算子。式は縦に流れるので中央へ置く */
.op{display:grid;place-items:center;height:32px}.hs-aircon .s-price /* ＝は流れと平行になるよう90度回して縦向きにする。3と答えの間に1回だけ */
.op.eq{height:38px}.hs-aircon .s-price /* 答え。柱を持たない全幅の帯。
   2026-08-10に金のグラデーションをやめて濃青ベタにした（README 6.6 ③）。
   黄・金はCTAボタンの色で、押せない部品へ広げると「押す場所」の合図が薄まる。
   濃青は主ブロック（料金）の地と同じ色で、3つを足すと上の金額になることを言う */
.res{background:var(--deep);padding:15px 14px 17px;text-align:center}

/* ================= PC 700px以上 =================
   スマホファーストなので作り込まない。決めたのは4つだけ。
   ①最大幅は3つだけ。1120px＝面で見せる／並べて比べるもの。860px＝1カラムだが
     写真を横に並べるもの。640px＝文字を読ませる1カラム
   ②H2は34px（確定トークン）③横へ戻すのは「並べて比べる情報」だけ
   ④式は文字の1カラムなので縦のまま640pxで中央へ置く */
@media(min-width:900px){.hs-aircon .s-price /* 2026-08-10。PCでモック台の余白が残っていて、濃青と淡青が
   1120pxの箱として白の上に浮いていた。2.5の表は「料金の地＝濃青」なので、
   面を全幅へ伸ばし、中身だけを1120pxで止める（README 6.6 ①） */
 .stage{padding:0}.hs-aircon .s-price .sp{width:100%;max-width:none}.hs-aircon .s-price .main{padding:var(--s8) 20px var(--s7)}.hs-aircon .s-price .sub{padding:var(--s7) 20px var(--s8)}.hs-aircon .s-price .hd,.hs-aircon .s-price .prices,.hs-aircon .s-price .source,.hs-aircon .s-price .ph{max-width:1120px;margin-left:auto;margin-right:auto}.hs-aircon .s-price .hd{margin-bottom:32px}.hs-aircon .s-price .hd h2{margin-top:12px;font-size:34px;letter-spacing:-.035em;line-height:1.3}.hs-aircon .s-price /* 3つの料金は並べて比べる情報なので横に戻す。色帯は上へ */
 .prices{grid-template-columns:repeat(3,minmax(0,1fr))}.hs-aircon .s-price .pc{grid-template-columns:minmax(0,1fr);align-items:stretch;grid-template-rows:auto minmax(0,1fr)}.hs-aircon .s-price .pc > .head{padding:13px 10px;font-size:17px}.hs-aircon .s-price .pc > .bd{padding:20px 22px 24px}.hs-aircon .s-price .pc .price .n{font-size:38px}.hs-aircon .s-price .pc .price s{font-size:14px}.hs-aircon .s-price .pc .price u{font-size:14px}.hs-aircon .s-price .pc .what{margin-top:0;font-size:14px}.hs-aircon .s-price .pc .basis{margin-top:8px;font-size:14px}.hs-aircon .s-price .source{padding:14px 22px;font-size:14px}.hs-aircon .s-price .ph h3{font-size:32px}.hs-aircon .s-price .ph h3 em{font-size:44px}.hs-aircon .s-price /* 式は縦に読む設計を変えない。幅だけ絞って中央へ */
 /* 3つは横に並べる。＋は面と面の間の列に入り、＝と答えは下の行で全幅になる */
 .calc{max-width:1120px;margin:32px auto 0;display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:stretch}.hs-aircon .s-price .op{height:auto}.hs-aircon .s-price .op.eq{grid-column:1/-1;height:44px}.hs-aircon .s-price .res{grid-column:1/-1}.hs-aircon .s-price .blk{padding:28px 24px 30px}.hs-aircon .s-price .blk > .n{width:46px;height:46px;font-size:20px}.hs-aircon .s-price .blk h4{font-size:19px}.hs-aircon .s-price .tx{font-size:14px}.hs-aircon .s-price .items > li{grid-template-columns:92px minmax(0,1fr);gap:14px}.hs-aircon .s-price .items svg{width:92px}.hs-aircon .s-price .items b{font-size:14px}.hs-aircon .s-price .items span{font-size:14px}.hs-aircon .s-price .art svg{max-width:280px}.hs-aircon .s-price .res{padding:18px 20px 20px}.hs-aircon .s-price .res h4{font-size:26px}.hs-aircon .s-price .res p{font-size:14px}
}


/* ===== セクション末尾のCTA（cta-approved.html） ===== */
.hs-aircon .s-cta{--navy:#123a5e;--navy2:#0e2e4b;--deep:#0b63c4;--pale:#e9f3fc;--y:#ffdd00;
 --c1:#1a86e8;--c2:#0596d8;--c3:#00a396;--c4:#2aa049}.hs-aircon .s-cta{box-sizing:border-box}.hs-aircon .s-cta p,.hs-aircon .s-cta ul{margin:0}.hs-aircon .s-cta ul{padding:0;list-style:none}.hs-aircon .s-cta /* 確定ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
 height:64px;min-width:300px;padding:0 26px;font-size:17px;font-weight:900;letter-spacing:-.02em;
 color:#111;text-decoration:none;border-radius:6px;border:2px solid transparent;
 background-image:linear-gradient(#ffdd00,#ffdd00),linear-gradient(180deg,#fff8cc 0%,#fff09e 22%,#eeb700 70%,#e3a800 100%);
 background-origin:border-box;background-clip:padding-box,border-box;
 box-shadow:0 12px 26px -10px rgba(16,32,48,.32)}.hs-aircon .s-cta .btn .ar{width:20px;height:20px;flex:none;position:relative}.hs-aircon .s-cta .btn .ar::before{content:"";position:absolute;left:0;top:9px;width:18px;height:2.5px;background:currentColor}.hs-aircon .s-cta .btn .ar::after{content:"";position:absolute;right:1px;top:3.5px;width:11px;height:11px;
 border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg)}.hs-aircon .s-cta .hook{font-size:27px;font-weight:900;letter-spacing:-.04em;line-height:1.35}.hs-aircon .s-cta .lead{margin-top:10px;font-size:14px;font-weight:400;line-height:1.8;max-width:640px;margin-left:auto;margin-right:auto}.hs-aircon .s-cta /* ===== 約束4点：FVの特徴4つと同じ組み方 ===== */
.pr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;background:#fff;padding:18px 20px;margin:20px auto 0;max-width:760px;text-align:left}.hs-aircon .s-cta .pr li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:6px 8px}.hs-aircon .s-cta .pr .ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}.hs-aircon .s-cta .pr .ic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.hs-aircon .s-cta .pr li:nth-child(1) .ic{background:var(--c1)}.hs-aircon .s-cta .pr li:nth-child(2) .ic{background:var(--c2)}.hs-aircon .s-cta .pr li:nth-child(3) .ic{background:var(--c3)}.hs-aircon .s-cta .pr li:nth-child(4) .ic{background:var(--c4)}.hs-aircon .s-cta .pr strong{display:block;font-weight:900;line-height:1.3}.hs-aircon .s-cta .pr span{display:block;font-size:14px;font-weight:700;letter-spacing:-.03em;color:#a9c4da}.hs-aircon .s-cta .pr b{display:inline-block;font-size:23px;font-weight:900;line-height:1.1;letter-spacing:-.05em;white-space:nowrap;color:#fff}.hs-aircon .s-cta /* 採用した板（比較シートの案1＋白パネルをやめるv3）。
   案2・案3、v1・v2、比較シートの土台（.sheet .case .hostw .hostd）は
   描画されない死んだCSSだったので2026-08-10に削除した */
.c1{background:var(--navy2);padding:var(--s6) var(--s3);text-align:center;color:#fff}.hs-aircon .s-cta .c1 > *{max-width:1120px;margin-left:auto;margin-right:auto}.hs-aircon .s-cta .c1 .hook{color:#fff}.hs-aircon .s-cta .c1 .lead{color:#c9dced}.hs-aircon .s-cta .c1 .btn{margin-top:18px}.hs-aircon .s-cta .v3 .pr{background:none;padding:0;max-width:1120px;gap:10px}.hs-aircon .s-cta .v3 .pr li{background:#16436b;padding:12px 14px}

/* ================= スマホ 390px =================
   2026-08-10に新設。CTAブロックには @media が1つも無く、約束4点が
   2列のままだったため「かかりません」「増えません」が画面の外へ出ていた
   （.hs-aircon の overflow-x:hidden で切れて見えなくなっていた）。
   値は工事ブロックの末尾CTA（.s-svc .cta）のSP版に合わせる */
@media(min-width:900px){.hs-aircon .s-cta .c1{padding:var(--s8) 20px}
 /* 約束4点。1120pxで2列にすると1枚555pxになり、CTAの中で一番目立ってしまう。
    4列にして文字も落とす。押す場所はボタンであって、この4枚ではない
    （2026-08-10。ユーザー指摘「CTAのココが大きすぎて目立ちすぎてないか？」） */
 .hs-aircon .s-cta .v3 .pr{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .hs-aircon .s-cta .v3 .pr li{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px}
 .hs-aircon .s-cta .pr .ic{width:40px;height:40px}
 .hs-aircon .s-cta .pr .ic svg{width:22px;height:22px}
 .hs-aircon .s-cta .pr span{font-size:14px}
 .hs-aircon .s-cta .pr b{font-size:17px}
 .hs-aircon .s-cta .pr small{font-size:14px}}

@media(max-width:899px){.hs-aircon .s-cta .c1{padding:var(--s6,48px) var(--s3,16px)}.hs-aircon .s-cta .hook{font-size:21px;line-height:1.45}.hs-aircon .s-cta .lead{font-size:14px;line-height:1.9}.hs-aircon .s-cta .btn{width:100%;min-width:0;height:58px;font-size:15px;padding:0 14px}.hs-aircon .s-cta .v3 .pr{grid-template-columns:minmax(0,1fr);gap:8px}.hs-aircon .s-cta .v3 .pr li{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:11px 13px}.hs-aircon .s-cta .pr .ic{width:44px;height:44px}.hs-aircon .s-cta .pr .ic svg{width:24px;height:24px}.hs-aircon .s-cta .pr b{font-size:20px}
}


/* ===== 対応エリア（area-approved.html） ===== */
.hs-aircon .s-area{
 --navy:#123a5e;--h2:#14232e;--blue:#1a86e8;--deep:#0b63c4;--sub:#0596d8;
 --pale:#e9f3fc;--yl:#ffdd00;--ylPale:#fff6cc;--ink:#1a1a1a}.hs-aircon .s-area{box-sizing:border-box}.hs-aircon .s-area{margin:0;background:#fff;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;color:var(--ink);line-height:1.9}.hs-aircon .s-area p,.hs-aircon .s-area h2,.hs-aircon .s-area h3,.hs-aircon .s-area ul{margin:0}.hs-aircon .s-area ul{padding:0;list-style:none}.hs-aircon .s-area /* スマホでだけ改行する。PCでは1行に収まるので出さない */
br.sp{display:none}.hs-aircon .s-area /* v3準拠のセクション外枠。対応エリアの地色は白 */
.sec{background:#fff;padding:88px 18px 104px}.hs-aircon .s-area .in{max-width:1120px;margin:0 auto}.hs-aircon .s-area .hd{text-align:center;margin-bottom:40px}.hs-aircon .s-area /* リードは線だけのピル（m6）。地色は抜き、線と文字の色だけ地に合わせる */
.hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-area .hd h2{margin-top:13px;font-size:34px;font-weight:900;color:var(--h2);letter-spacing:-.035em;line-height:1.3}.hs-aircon .s-area .hd .ld{margin:12px auto 0;max-width:47em;font-size:15px;font-weight:400;color:var(--ink);line-height:2}.hs-aircon .s-area h3{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900;color:var(--navy);letter-spacing:-.02em}.hs-aircon .s-area h3::before{content:"";width:14px;height:14px;flex:none;background:var(--blue)}.hs-aircon .s-area /* 地図の枠。中身のSVGはCodexが生成する */
.map{width:940px;max-width:100%;margin:0 auto;overflow:hidden;background:#dcecf7}.hs-aircon .s-area .area-map{display:block;width:100%;height:auto;background:#dcecf7}.hs-aircon .s-area .area-map--sp{display:none}.hs-aircon .s-area .area-map__land path{stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke}.hs-aircon .s-area .area-map__outside{fill:#f2f6f9}.hs-aircon .s-area .area-map__other{fill:#e9f3fc}.hs-aircon .s-area .area-map__other path{stroke:#b7d4ee;stroke-width:1.5}.hs-aircon .s-area .area-map__free{fill:#0b63c4}.hs-aircon .s-area .area-map__focus{fill:#ffdd00}.hs-aircon .s-area .area-map__rivers{fill:none;stroke:#79b9df;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.hs-aircon .s-area .area-map text{font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;text-anchor:middle;dominant-baseline:central}.hs-aircon .s-area .area-map__province-labels{fill:#8ca4b7;font-size:20px;font-weight:900;letter-spacing:.18em}.hs-aircon .s-area .area-map__river-labels{fill:#347da9;font-size:14px;font-weight:900}.hs-aircon .s-area .area-map__river-labels text{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}.hs-aircon .s-area .area-map__label{font-size:14px;font-weight:900;paint-order:stroke;stroke-width:3px;stroke-linejoin:round}.hs-aircon .s-area .area-map__label--free{fill:#fff;stroke:#0b63c4}.hs-aircon .s-area .area-map__label--other{fill:#2d5878;stroke:#e9f3fc}.hs-aircon .s-area .area-map__label--focus{fill:#111;stroke:#ffdd00;font-size:18px}.hs-aircon .s-area .area-map__leader{fill:none;stroke:#6d879b;stroke-width:1;vector-effect:non-scaling-stroke}.hs-aircon .s-area .lg{display:flex;justify-content:center;gap:28px;margin-top:16px;font-size:14px;font-weight:700;color:var(--ink)}.hs-aircon .s-area .lg li{display:flex;align-items:center;gap:8px}.hs-aircon .s-area .lg i{width:26px;height:16px;flex:none}.hs-aircon .s-area .lg .near{background:var(--deep)}.hs-aircon .s-area .lg .far{background:var(--pale);box-shadow:inset 0 0 0 1.5px #b7d4ee}.hs-aircon .s-area .scale{margin-top:10px;text-align:center;font-size:14px;font-weight:400;color:#4a5b6a}.hs-aircon .s-area .source{max-width:940px;margin:6px auto 0;font-size:14px;font-weight:400;color:#607282;line-height:1.65}.hs-aircon .s-area /* 小見出しは料金条件そのものを言う。地域名は県ラベルと市名チップが担うため置かない */
.tier1 h3{font-size:26px;letter-spacing:-.04em}

/* ================= スマホ 390px =================
   PCの値には触らない。地図の枠が940px固定で画面をはみ出すのが最大の欠陥だった */
@media(max-width:899px){.hs-aircon .s-area .sec{padding:var(--s6,48px) 16px 64px}.hs-aircon .s-area .hd{margin-bottom:32px}.hs-aircon .s-area .hd h2{margin-top:12px;font-size:24px;letter-spacing:-.04em;line-height:1.34}.hs-aircon .s-area .hd .ld{font-size:14px;line-height:1.9}.hs-aircon .s-area br.sp{display:inline}.hs-aircon .s-area /* 940×380 の固定枠を全幅・低い比率へ。実SVGが入ったら高さを詰め直す */
 .map{width:100%;height:auto;padding:0}.hs-aircon .s-area .area-map--pc{display:none}.hs-aircon .s-area .area-map--sp{display:block}.hs-aircon .s-area .area-map--sp .area-map__province-labels{font-size:30px}.hs-aircon .s-area .area-map--sp .area-map__river-labels{font-size:28px}.hs-aircon .s-area .area-map--sp .area-map__label{font-size:29px;stroke-width:5px}.hs-aircon .s-area .area-map--sp .area-map__label--focus{font-size:34px}.hs-aircon .s-area /* 凡例は横に並ばない。左寄せで縦に積み、色見本の左端をそろえる */
 .lg{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;
  margin-top:14px;font-size:14px}.hs-aircon .s-area .scale{margin-top:12px;text-align:left;font-size:14px;line-height:1.75}.hs-aircon .s-area .source{margin-top:8px;font-size:14px;line-height:1.7}.hs-aircon .s-area .tier1{margin-top:32px;padding:24px 16px 26px}.hs-aircon .s-area .tier2{margin-top:12px;padding:24px 16px 26px}.hs-aircon .s-area .tier1 h3{font-size:19px;line-height:1.4}.hs-aircon .s-area .tier2 h3{font-size:17px;line-height:1.4}.hs-aircon .s-area h3{gap:8px}.hs-aircon .s-area h3::before{width:12px;height:12px}.hs-aircon .s-area .tier1 .note{margin-top:14px;font-size:14px;line-height:1.85}.hs-aircon .s-area .tier2 .note{margin-top:14px;font-size:14px;line-height:1.85}.hs-aircon .s-area /* 県ラベルは104pxだと市名チップの幅を食う */
 .rows{margin-top:14px;gap:6px}.hs-aircon .s-area .row{grid-template-columns:70px minmax(0,1fr);gap:8px;align-items:start}.hs-aircon .s-area .row .pf{padding:7px 0;font-size:14px}.hs-aircon .s-area .row .ct{gap:5px}.hs-aircon .s-area .row .ct span{padding:6px 10px;font-size:14px}.hs-aircon .s-area .tier2 .row .ct span{padding:6px 10px;font-size:14px}.hs-aircon .s-area .tier2 .row .ct b{font-size:14px;padding:6px 0 6px 3px}
}


/* ===== 選ばれる理由（reasons-approved.html） ===== */
.hs-aircon .s-reason{--navy:#123a5e;--h2:#14232e;--ink:#1a1a1a;--b:#1a86e8;--y:#ffdd00;--y-pale:#fff6cc;--max:1120px}.hs-aircon .s-reason{box-sizing:border-box}.hs-aircon .s-reason{margin:0;background:#e9f3fc;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;color:var(--ink);line-height:1.9}.hs-aircon .s-reason h2,.hs-aircon .s-reason h3,.hs-aircon .s-reason p{margin:0}.hs-aircon .s-reason .num{font-family:"Roboto Condensed",sans-serif;font-weight:700}.hs-aircon .s-reason /* 最大幅は外枠ではなく中身へ掛ける。外枠へ掛けると
   左右のpaddingぶん内寸が他セクションより40px狭くなっていた（README 6.6 ④） */
.sec{padding:88px 20px 104px}.hs-aircon .s-reason .sec__hd{max-width:var(--max);margin:0 auto 48px;text-align:center}.hs-aircon .s-reason /* リードは線だけのピル（m6）。地色は抜き、線と文字の色だけ地に合わせる */
.eyebrow{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-reason .sec h2{margin-top:12px;font-size:34px;font-weight:900;line-height:1.3;letter-spacing:-.035em;color:var(--h2)}.hs-aircon .s-reason .sec__lead{margin:12px auto 0;max-width:47em;font-size:15px;font-weight:400;color:var(--ink);line-height:2}.hs-aircon .s-reason /* v3: .reason-stories は gap 18px のグリッド。article は白、PCで左右交互の2カラム */
.reasons{display:grid;gap:16px;max-width:var(--max);margin:0 auto}.hs-aircon .s-reason .rc{display:grid;overflow:hidden;background:#fff}.hs-aircon .s-reason /* 写真枠（未撮影のため仮） */
.ph{position:relative;margin:0;min-height:220px;display:grid;place-items:center;background:#e3ebf3}.hs-aircon .s-reason .ph__tag{position:absolute;left:0;top:0;background:#0e2e4b;color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em;padding:3px 9px}.hs-aircon .s-reason .ph__note{padding:0 22px;font-size:14px;font-weight:500;color:#67809a;text-align:center}.hs-aircon .s-reason .strip{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);min-height:220px}.hs-aircon .s-reason .strip__cell{display:grid;place-items:center;align-content:center;gap:5px;padding:14px 8px;font-size:14px;font-weight:500;color:#67809a;text-align:center;background:#e3ebf3}.hs-aircon .s-reason .strip__cell span{font-size:14px;font-weight:700;letter-spacing:.08em;color:#fff;background:#0e2e4b;padding:2px 7px 3px}.hs-aircon .s-reason /* テキスト側。番号は見出しの背面へ回り込ませる */
.rc__txt{position:relative;padding:20px;overflow:hidden}.hs-aircon .s-reason .rc__no{position:absolute;right:16px;top:8px;z-index:0;font-size:110px;line-height:.8;color:#d3e6f9;letter-spacing:-.05em;pointer-events:none}.hs-aircon .s-reason .rc__col{position:relative;z-index:1}.hs-aircon .s-reason .rc__lbl{display:inline-block;background:var(--y);color:#111;font-size:14px;font-weight:900;letter-spacing:.1em;padding:2px 10px 3px}.hs-aircon .s-reason .rc__line{display:block;margin-top:7px}.hs-aircon .s-reason .rc h3{font-size:22px;font-weight:900;line-height:1.4;letter-spacing:-.04em;color:var(--navy)}.hs-aircon .s-reason .rc__line--b{margin-top:11px}.hs-aircon .s-reason .rc__body{font-size:14px;font-weight:400;color:var(--ink);line-height:2.05}.hs-aircon .s-reason .rc__line--n{margin-top:8px}.hs-aircon .s-reason .rc__note{font-size:13px;font-weight:400;color:#4a5b6a;line-height:1.75}

@media(min-width:900px){.hs-aircon .s-reason .sec{padding:88px 20px 104px}.hs-aircon .s-reason /* v3 base.css:1896- と同じ比率・同じ交互配置 */
 .rc{grid-template-columns:1.15fr .85fr;align-items:stretch}.hs-aircon .s-reason .rc:nth-child(even){grid-template-columns:.85fr 1.15fr}.hs-aircon .s-reason .rc:nth-child(even) > :first-child{order:2}.hs-aircon .s-reason .rc__txt{align-self:center;padding:38px}.hs-aircon .s-reason .rc__no{right:30px;top:10px;font-size:132px}.hs-aircon .s-reason .rc__lbl{font-size:14px}.hs-aircon .s-reason .rc h3{font-size:23px}.hs-aircon .s-reason .rc__body{font-size:14px}.hs-aircon .s-reason .ph,.hs-aircon .s-reason .strip{min-height:260px}
}

@media(max-width:899px){.hs-aircon .s-reason .sec{padding:34px 16px 38px}.hs-aircon .s-reason .sec h2{margin-top:10px;font-size:24px;line-height:1.34}.hs-aircon .s-reason .sec__lead{font-size:14px}.hs-aircon .s-reason .reasons{margin-top:22px;gap:14px}.hs-aircon .s-reason .ph,.hs-aircon .s-reason .strip{min-height:170px}.hs-aircon .s-reason .strip__cell{font-size:14px}.hs-aircon .s-reason /* スマホでは写真を横に並べない。この3枚組はスライドにせず、
    最も伝わる1枚だけを全幅で出す。残りはPCでだけ見せる。
    1枚になった枠は .ph と同じ見え方にする（札は左上、注記は中央） */
 .strip{grid-template-columns:1fr}.hs-aircon .s-reason .strip__cell:not(.is-key){display:none}.hs-aircon .s-reason .strip__cell{position:relative;padding:0 22px;font-size:14px}.hs-aircon .s-reason .strip__cell span{position:absolute;left:0;top:0;font-size:14px;padding:3px 9px}.hs-aircon .s-reason .rc__txt{padding:16px}.hs-aircon .s-reason .rc__no{left:auto;right:8px;top:2px;font-size:88px}.hs-aircon .s-reason .rc__lbl{font-size:14px;letter-spacing:.1em}.hs-aircon .s-reason .rc h3{font-size:19px;line-height:1.42}.hs-aircon .s-reason .rc__body{font-size:14px}
}


/* ===== 施工例（cases-sp.html） ===== */
.hs-aircon .s-case{--ink:#1a1a1a;--navy:#123a5e;--navy2:#0e2e4b;--deep:#0b63c4;--sub:#0596d8;--tl:#00a396;
 --pale:#e9f3fc;--yl:#ffdd00;--mute:#4a5b6a;--shot:#e3ebf3}.hs-aircon .s-case{box-sizing:border-box}.hs-aircon .s-case /* 本文の基本色は黒。濃紺は見出しと金額にだけ使う */
body{margin:0;background:#f4f6f8;color:var(--ink);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}.hs-aircon .s-case p,.hs-aircon .s-case h2,.hs-aircon .s-case h3,.hs-aircon .s-case figure{margin:0}.hs-aircon .s-case .num{font-family:"Roboto Condensed",sans-serif;font-weight:700}.hs-aircon .s-case .board{display:block;padding:0}.hs-aircon .s-case{background:var(--deep)}.hs-aircon .s-case .sp{width:auto;background:var(--deep);padding:44px 16px 48px}.hs-aircon .s-case .hd{text-align:center;margin-bottom:24px}.hs-aircon .s-case /* リードは線だけのピル（m6）。地色は抜き、線と文字の色だけ地に合わせる */
.hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid rgba(255,221,0,.85);color:var(--yl);font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-case .hd h2{margin-top:10px;font-size:24px;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.35}.hs-aircon .s-case /* スマホでは正式なスライダーとして1件ずつ表示する。
   前後ボタン・ドット・枚数・フリックは末尾の共通スライダー規則が担う */
.slide{overflow:visible;margin:0}.hs-aircon .s-case .track{display:grid;gap:12px;align-items:stretch}.hs-aircon .s-case .card{display:flex;flex-direction:column;background:#fff}.hs-aircon .s-case .card .txt{flex:1}.hs-aircon .s-case .slide.is-slider-ready{overflow:hidden;touch-action:pan-y;cursor:grab}.hs-aircon .s-case .slide.is-slider-ready .track{display:flex;gap:0}.hs-aircon .s-case .slide.is-slider-ready .card{flex:0 0 100%;width:100%}.hs-aircon .s-case /* 写真は1枚を大きく。タグは工事の種類そのものを出す */
.ph{position:relative;height:206px;display:grid;place-content:center;text-align:center;background:var(--shot)}.hs-aircon .s-case .ph b{font-size:14px;font-weight:500;color:#67809a}.hs-aircon .s-case .after{position:absolute;left:0;top:0;padding:5px 12px;background:var(--navy2);color:#fff;
 font-size:14px;font-weight:700;letter-spacing:.04em}.hs-aircon .s-case /* 工事前は完成写真の中へ重ねる。カードの高さを増やさずにBefore/Afterを両立させる */
.before{position:absolute;right:10px;bottom:10px;width:118px;height:80px;display:grid;place-content:center;
 background:#d5dfe9;box-shadow:0 0 0 3px #fff}.hs-aircon .s-case .before b{font-size:14px;font-weight:500;color:#5d7285}.hs-aircon .s-case .before span{position:absolute;left:0;top:0;padding:2px 7px;background:var(--navy2);color:#fff;
 font-size:14px;font-weight:700;letter-spacing:.04em}.hs-aircon .s-case .txt{padding:16px 14px 18px}.hs-aircon .s-case /* 地域は小さく灰。文字の階段の一番下 */
.place{font-size:14px;font-weight:700;color:var(--mute);letter-spacing:.06em}.hs-aircon .s-case .place .kind{color:var(--deep);font-weight:900}.hs-aircon .s-case .card:nth-child(2) .place .kind{color:#0578b0}.hs-aircon .s-case .card:nth-child(3) .place .kind{color:#048174}.hs-aircon .s-case /* 相談文が一番大きい。効く語だけ濃青900へ上げる */
.txt h3{margin-top:4px;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.65}.hs-aircon .s-case .txt h3 em{font-style:normal;font-weight:900;color:var(--navy)}.hs-aircon .s-case /* 金額の行。細い罫線で区切る */
.foot{margin-top:14px;padding-top:14px;display:flex;align-items:baseline;justify-content:space-between;
 background:linear-gradient(to right,#dbe5ee 0 100%) top/100% 1px no-repeat}.hs-aircon .s-case .foot .lbl{padding:4px 10px;background:var(--pale);color:var(--navy);font-size:14px;font-weight:700;letter-spacing:.04em}.hs-aircon .s-case .fee{display:flex;align-items:baseline;gap:3px}.hs-aircon .s-case .fee .num{font-size:32px;line-height:1;color:var(--deep);letter-spacing:-.04em}.hs-aircon .s-case .fee u{text-decoration:none;font-size:15px;font-weight:900;color:var(--deep)}.hs-aircon .s-case .sub{margin-top:7px;font-size:14px;font-weight:400;color:#4a5b6a;line-height:1.75}

/* ================= PC 700px以上 =================
   スマホファーストなので作り込まない。共通の規則は4つだけ。
   ①最大幅は3つだけ。1120px＝面で見せる／並べて比べるもの。
     860px＝1カラムだが写真を横に並べるもの（作業工程のみ。640pxだと
     4枚並べたとき1枚が150px未満になる）。640px＝文字を読ませる1カラム
   ②H2は34px（確定トークン）
   ③横へ戻すのは「並べて比べる情報」だけ。手順は縦のまま
   ④SPで隠した写真・スライドはPCで並べて全部見せる */
@media(min-width:900px){.hs-aircon .s-case /* 390pxのステージをやめて全幅の帯にする。
   2026-08-10、台の余白が残っていて濃青が1120pxの箱として白の上に浮いていたので
   面を全幅へ伸ばし、中身だけを1120pxで止めた（README 6.6 ①） */
 .board{display:block;padding:0}.hs-aircon .s-case .sp{width:100%;max-width:none;padding:var(--s8,88px) 20px}.hs-aircon .s-case .sp > *{max-width:1120px;margin-left:auto;margin-right:auto}.hs-aircon .s-case .hd{margin-bottom:var(--s5,32px)}.hs-aircon .s-case .hd h2{font-size:34px;letter-spacing:-.035em;line-height:1.3}.hs-aircon .s-case /* 3件は並べて比べる情報。スライドをやめて横に並べる */
 /* SPの margin-right:-16px を戻す。auto にしないと右マージンが0のまま残り、
    中央寄せが効かずカードだけ60px右へずれる（2026-08-10に実測。
    ユーザー指摘「微妙にここの横幅他とあってないだろ？」の原因） */
 .slide,.hs-aircon .s-case .slide.is-slider-ready{overflow:visible;margin-left:auto;margin-right:auto;cursor:auto;touch-action:auto}.hs-aircon .s-case .track,.hs-aircon .s-case .slide.is-slider-ready .track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;transform:none}.hs-aircon .s-case .card,.hs-aircon .s-case .slide.is-slider-ready .card{width:auto;flex:none}.hs-aircon .s-case .hs-slider__controls{display:none}
}


/* ===== 作業工程（process-approved.html） ===== */
.hs-aircon .s-process{--ink:#1a1a1a;--navy:#123a5e;--h2:#14232e;--navy2:#0e2e4b;--deep:#0b63c4;--blue:#1a86e8;
 --pale:#e9f3fc;--yl:#ffdd00;--shot:#e3ebf3;
 --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:88px}.hs-aircon .s-process{box-sizing:border-box}.hs-aircon .s-process{margin:0;background:#fff;color:var(--ink);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}.hs-aircon .s-process p,.hs-aircon .s-process h2,.hs-aircon .s-process h3{margin:0}.hs-aircon .s-process ol{margin:0;padding:0;list-style:none}.hs-aircon .s-process .num{font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:-.045em}.hs-aircon .s-process .sec{background:#fff;padding:var(--s6) var(--s3) var(--s7)}.hs-aircon .s-process .hd{text-align:center;margin-bottom:var(--s5)}.hs-aircon .s-process /* リードは線だけのピル（m6） */
.hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-process .hd h2{margin-top:var(--s2);font-size:24px;font-weight:900;color:var(--h2);letter-spacing:-.04em;line-height:1.34}.hs-aircon .s-process /* 写真枠。スマホでは必ず全幅で1枚。横に並べない */
.sh{position:relative;display:grid;place-content:center;text-align:center;background:var(--shot)}.hs-aircon .s-process .sh b{font-size:14px;font-weight:500;color:#67809a;padding:0 12px;line-height:1.6}.hs-aircon .s-process .sh > span{position:absolute;left:0;top:0;padding:3px 9px;background:var(--navy2);color:#fff;
 font-size:14px;font-weight:700;letter-spacing:.06em}.hs-aircon .s-process /* 工程は8つ全部を縦に出す。左の番号列は青から濃紺へ流れ、進行を示す */
.fl{display:grid}.hs-aircon .s-process .fl > li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:stretch}.hs-aircon .s-process .fl > li > .n{display:grid;justify-items:center;align-content:start;padding-top:12px;font-size:20px;color:#fff}.hs-aircon .s-process .fl > li:nth-child(1) > .n{background:#7db9ef}.hs-aircon .s-process .fl > li:nth-child(2) > .n{background:#5aa6ea}.hs-aircon .s-process .fl > li:nth-child(3) > .n{background:#3b92e4}.hs-aircon .s-process .fl > li:nth-child(4) > .n{background:#1a86e8}.hs-aircon .s-process .fl > li:nth-child(5) > .n{background:#0f6fc9}.hs-aircon .s-process .fl > li:nth-child(6) > .n{background:#0b5aa4}.hs-aircon .s-process .fl > li:nth-child(7) > .n{background:#1b456b}.hs-aircon .s-process .fl > li:nth-child(8) > .n{background:var(--navy2)}.hs-aircon .s-process .fl > li > .c{background:#f4f8fc;padding:12px 0 16px 14px}.hs-aircon .s-process .fl h3{font-size:17px;font-weight:900;color:var(--navy);letter-spacing:-.04em;line-height:1.45;padding-right:14px}.hs-aircon .s-process .fl > li > .c > p{margin-top:3px;font-size:14px;line-height:1.8;padding-right:14px}.hs-aircon .s-process /* 条件つきの工程を示す札 */
.only{display:inline-block;margin-top:7px;padding:3px 9px;background:#fff;color:#0a4f9e;font-size:14px;font-weight:700}.hs-aircon .s-process /* 写真1枚だけの工程 */
.one{margin-top:10px;margin-right:14px;height:168px}.hs-aircon .s-process /* 写真が複数ある工程。スマホでは正式なスライダーで1枚ずつ送る */
.sl{margin-top:10px;overflow:visible}.hs-aircon .s-process .sl .tr{display:grid;gap:8px}.hs-aircon .s-process .sl .sh{height:168px}.hs-aircon .s-process .sl.is-slider-ready{overflow:hidden;touch-action:pan-y;cursor:grab}.hs-aircon .s-process .sl.is-slider-ready .tr{display:flex;gap:0}.hs-aircon .s-process .sl.is-slider-ready .sh{width:100%;flex:0 0 100%}.hs-aircon .s-process /* 工事時間の注記 */
.dur{margin-top:var(--s5);background:var(--pale);padding:var(--s3) var(--s3) 18px;max-width:1120px;margin-left:auto;margin-right:auto}.hs-aircon .s-process .dur b{display:block;font-size:14px;font-weight:900;color:var(--navy)}.hs-aircon .s-process .dur p{margin-top:4px;font-size:14px;line-height:1.85}

/* ================= PC 700px以上 =================
   スマホファーストなので作り込まない。共通の規則は4つだけ。
   ①最大幅は3つだけ。1120px＝面で見せる／並べて比べるもの。
     860px＝1カラムだが写真を横に並べるもの（作業工程のみ。640pxだと
     4枚並べたとき1枚が150px未満になる）。640px＝文字を読ませる1カラム
   ②H2は34px（確定トークン）
   ③横へ戻すのは「並べて比べる情報」だけ。手順は縦のまま
   ④SPで隠した写真・スライドはPCで並べて全部見せる */
@media(min-width:900px){.hs-aircon .s-process .sec{padding:var(--s8) 20px var(--s8)}.hs-aircon .s-process .hd{margin-bottom:var(--s6)}.hs-aircon .s-process .hd h2{font-size:34px;letter-spacing:-.035em;line-height:1.3}.hs-aircon .s-process .fl{max-width:1120px;margin:0 auto}.hs-aircon .s-process .one{margin-right:0}.hs-aircon .s-process .sl,.hs-aircon .s-process .sl.is-slider-ready{overflow:visible;cursor:auto;touch-action:auto}.hs-aircon .s-process .sl .tr,.hs-aircon .s-process .sl.is-slider-ready .tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;transform:none}.hs-aircon .s-process .sl .sh,.hs-aircon .s-process .sl.is-slider-ready .sh{width:auto;flex:none;height:220px}.hs-aircon .s-process .hs-slider__controls{display:none}.hs-aircon .s-process /* 1枚だけの工程は全幅になるので、200pxだと帯に見える */
 /* 1枚だけの工程は1120pxの全幅になるので、320pxだと3.5:1の帯に見える */
 .one{height:420px}.hs-aircon .s-process .dots{display:none}.hs-aircon .s-process .note{max-width:1120px;margin-left:auto;margin-right:auto}
}


/* ===== 保証（warranty-approved.html） ===== */
.hs-aircon .s-warranty{--ink:#1a1a1a;--navy:#123a5e;--h2:#14232e;--navy2:#0e2e4b;--deep:#0b63c4;--yl:#ffdd00;--ylp:#fff6cc;
 --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:88px}.hs-aircon .s-warranty{box-sizing:border-box}.hs-aircon .s-warranty{margin:0;background:var(--ylp);color:var(--ink);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}.hs-aircon .s-warranty p,.hs-aircon .s-warranty h2,.hs-aircon .s-warranty dl,.hs-aircon .s-warranty dt,.hs-aircon .s-warranty dd{margin:0}.hs-aircon .s-warranty /* 地色は確定表どおりの淡黄ベタ。グラデーションは使わない
   （グラデは暗い面の奥行き・金の光沢・写真の減光の3用途に限る） */
.wr{background:var(--ylp);padding:var(--s8) var(--s5)}.hs-aircon .s-warranty .in{max-width:1120px;margin:0 auto}.hs-aircon .s-warranty .hd{text-align:center;margin-bottom:var(--s6)}.hs-aircon .s-warranty /* リードは線だけのピル（m6）。淡黄の地では線を濃くしないと埋もれる */
.hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #c8a200;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-warranty .hd h2{margin-top:var(--s2);font-size:34px;font-weight:900;color:var(--h2);letter-spacing:-.04em;line-height:1.3}.hs-aircon .s-warranty .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s6);align-items:start}.hs-aircon .s-warranty /* 保証書の紙。傾きと影は「紙が置いてある」状態を言うもので、
   造形の規則の「手前にある／持ち上がっている」に当たる。
   ページ内で唯一の『物』の表現なので、ここだけ残す */
.doc{position:relative;padding:var(--s3) 0 var(--s5)}.hs-aircon .s-warranty .doc .paper{position:relative;transform:rotate(-1.6deg);border-radius:4px;background:#fff;
 box-shadow:0 30px 56px -22px rgba(90,71,0,.45),0 4px 10px -4px rgba(90,71,0,.28)}.hs-aircon .s-warranty .doc .paper .inner{padding:var(--s5);display:grid;place-items:center;min-height:286px;text-align:center}.hs-aircon .s-warranty .doc .paper .inner b{font-size:14px;font-weight:700;color:#8a9099}.hs-aircon .s-warranty .doc .paper .tagp{position:absolute;left:0;top:0;padding:4px 11px;
 background:var(--navy2);color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em}.hs-aircon .s-warranty /* 金の輪。グラデは金の光沢に当たるので可。
   章は「工事保証」だけにする。年数は下の言い切り文が言うので2回言わない */
.doc .badge{position:absolute;right:-8px;bottom:8px;width:126px;height:126px;display:grid;place-content:center;
 justify-items:center;text-align:center;line-height:1;filter:drop-shadow(0 14px 22px rgba(90,71,0,.42))}.hs-aircon .s-warranty .doc .badge svg{position:absolute;inset:0;width:100%;height:100%}.hs-aircon .s-warranty .doc .badge small{position:relative;font-size:15px;font-weight:900;color:#3a2a00;letter-spacing:.06em}.hs-aircon .s-warranty /* 言い切りの宣言板。下端の三角が「中身は次の2つ」を指す
   （料金ブロックで確立した、面が三角で次へ食い込む文法） */
.say{position:relative;background:var(--navy2);padding:26px var(--s4) 28px;text-align:center}.hs-aircon .s-warranty .say p{font-size:29px;font-weight:900;color:#fff;letter-spacing:-.055em;line-height:1.42}.hs-aircon .s-warranty .say em{font-style:normal;color:var(--yl)}.hs-aircon .s-warranty .say::after{content:"";position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);
 width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;
 border-top:19px solid var(--navy2)}.hs-aircon .s-warranty /* 保証の中身。並んでいるだけの面なので影も角丸も付けない（3章 造形の規則）。
   2pxの隙間で淡黄の地を覗かせる＝継ぎ目は色の切り替わりで作る。
   宣言板の三角が「中身は次の2つ」を指しているので、浮かせると関係が切れる */
.mer{margin-top:42px;display:grid;gap:2px}.hs-aircon .s-warranty .mer > div{display:grid;grid-template-columns:46px minmax(0,1fr);gap:var(--s3);align-items:start;
 background:#fff;padding:18px var(--s4) 20px}.hs-aircon .s-warranty .mer .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
 background:linear-gradient(160deg,#8fc4f5,#0b63c4)}.hs-aircon .s-warranty .mer .ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.hs-aircon .s-warranty .mer dt{font-size:17px;font-weight:900;color:var(--navy);letter-spacing:-.03em;line-height:1.5}.hs-aircon .s-warranty .mer dd{margin-top:2px;font-size:14px;line-height:1.9}.hs-aircon .s-warranty /* 対象外は注意事項なので備考として面の外へ。影も角丸も付けない */
.rem{margin-top:var(--s4);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px #efe0b0;padding:var(--s3) var(--s4) 18px}.hs-aircon .s-warranty .rem dt{font-size:14px;font-weight:700;color:#8a6a00;letter-spacing:.06em}.hs-aircon .s-warranty .rem dd{margin-top:3px;font-size:14px;color:#5f5230;line-height:1.85}

@media(max-width:899px){.hs-aircon .s-warranty .wr{padding:var(--s6) var(--s3) var(--s7)}.hs-aircon .s-warranty .hd{margin-bottom:var(--s5)}.hs-aircon .s-warranty .hd h2{font-size:24px;line-height:1.34}.hs-aircon .s-warranty .grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.hs-aircon .s-warranty .doc{padding:var(--s1) 0 var(--s6)}.hs-aircon .s-warranty .doc .paper .inner{min-height:210px}.hs-aircon .s-warranty .doc .badge{right:0;bottom:0;width:104px;height:104px}.hs-aircon .s-warranty .doc .badge small{font-size:14px}.hs-aircon .s-warranty .say{padding:24px 20px 26px}.hs-aircon .s-warranty .say p{font-size:26px}.hs-aircon .s-warranty .mer{margin-top:38px}.hs-aircon .s-warranty .mer > div{grid-template-columns:40px minmax(0,1fr);gap:var(--s2);padding:15px var(--s3) 17px}.hs-aircon .s-warranty .mer .ic{width:40px;height:40px}.hs-aircon .s-warranty .mer .ic svg{width:21px;height:21px}.hs-aircon .s-warranty .mer dt{font-size:15px}.hs-aircon .s-warranty .mer dd{font-size:14px}
}


/* ===== 見積り・依頼の流れ（2026-08-10にK1で作り直し。flow-options-2.html） =====
   前の版は縦1列だった。1120pxに広げたとき、48pxの丸と1行の本文が
   端から端まで伸びて中身が薄く見えたため、4つを横に並べる形へ変えた。
   「横へ戻すのは並べて比べる情報だけ。手順は縦のまま」（2.30 規則3）は
   ここで破る。1120pxでは手順も横に置いたほうが読める、という判断である。

   **地はステップごとに1段ずつ濃くする。**同じ色相のまま4段で、色相は増やさない。
   並列の4項目ではなく順番のあるものなので、色の違いは「種類」ではなく
   「進み」を言う必要がある。作業工程の番号列（青→濃紺の8段）と同じ文法。

   **地は青系にしない（2026-08-10。ユーザー指摘）。**最初は淡青の4段にしたが、
   見出しは濃紺 `#123A5E`、無料の札も濃紺＋青の線なので、**青の地に青系の文字**
   という組み合わせになった。見出しの濃紺はページ全体で確定している色なので、
   **あとから足した地のほうを中立の灰へ寄せる。**

   **矢印で読む向きを出す。**4つが等しい面で横に並ぶだけでは、どこから見るのかが
   分からない（ユーザー指摘）。面と面の隙間に濃青の三角を置き、PCでは右向き、
   SPでは下向きにする。**CTAボタンは01の中に置く**（同指摘）。最初の一手が
   「フォームから相談」であることを、手順の中で言う。 */
.hs-aircon .s-flow{--ink:#1a1a1a;--navy:#123a5e;--h2c:#14232e;--navy2:#0e2e4b;--deep:#0b63c4;--blue:#1a86e8;
 --pale:#e9f3fc;--yl:#ffdd00;
 --f1:#dbe2e9;--f2:#e6ebf0;--f3:#eff2f5;--ylp:#fff6cc;
 --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:88px}
.hs-aircon .s-flow{box-sizing:border-box;margin:0;background:#fff;color:var(--ink);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}
.hs-aircon .s-flow p,.hs-aircon .s-flow h2,.hs-aircon .s-flow h3{margin:0}
.hs-aircon .s-flow ol{margin:0;padding:0;list-style:none}
.hs-aircon .s-flow .num{font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:-.045em}
.hs-aircon .s-flow .sec{background:#fff;padding:var(--s6) var(--s3) var(--s7)}
.hs-aircon .s-flow .in{max-width:1120px;margin:0 auto}
.hs-aircon .s-flow .hd{text-align:center;margin-bottom:var(--s5)}
/* リードは線だけのピル（m6） */
.hs-aircon .s-flow .hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}
.hs-aircon .s-flow .hd h2{margin-top:var(--s2);font-size:24px;font-weight:900;color:var(--h2c);letter-spacing:-.04em;line-height:1.34}

/* ================= PC 700px以上 =================
   最大幅は1120px（面で見せる／並べて比べるもの）。 */
@media(min-width:900px){
 .hs-aircon .s-flow .sec{padding:var(--s8) 20px}
 .hs-aircon .s-flow .hd{margin-bottom:var(--s6)}
 .hs-aircon .s-flow .hd h2{font-size:34px;letter-spacing:-.035em;line-height:1.3}
 /* 01だけ広く取る。CTAボタンが入る幅（約320px）が要る */
 /* 02と03は無料の札が入るので少し広く、04は本文だけなので狭くする。
    01=350 / 02・03=266 / 04=230px。札が2行に折り返さない幅である */
 .hs-aircon .s-flow .st{grid-template-columns:1.45fr 1.1fr 1.1fr .95fr}
 .hs-aircon .s-flow .st > li{padding:var(--s5) 20px}
 /* 矢印は右向きへ。番号の丸の高さに合わせる */
 .hs-aircon .s-flow .st > li:not(:last-child)::after{left:auto;right:-9px;bottom:auto;top:44px;transform:none;
  border-left:10px solid var(--deep);border-right:0;border-top:9px solid transparent;border-bottom:9px solid transparent}
 .hs-aircon .s-flow .n{width:52px;height:52px;font-size:19px}
 .hs-aircon .s-flow .st h3{margin-top:var(--s3);font-size:19px;line-height:1.45}
 .hs-aircon .s-flow .st p{margin-top:8px;font-size:14px;line-height:1.85}
 .hs-aircon .s-flow .freetag{margin-top:12px;font-size:14px}
 .hs-aircon .s-flow .btn{width:100%;height:60px;font-size:15px}
 .hs-aircon .s-flow .freetag{font-size:14px;padding:5px 10px 6px}
}

/* ===== よくある質問（faq-approved.html） ===== */
.hs-aircon .s-faq{--ink:#1a1a1a;--navy:#123a5e;--h2c:#14232e;--deep:#0b63c4;
 --pale:#e9f3fc;
 --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:88px}.hs-aircon .s-faq{box-sizing:border-box}.hs-aircon .s-faq{margin:0;background:#fff;color:var(--ink);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}.hs-aircon .s-faq p,.hs-aircon .s-faq h2,.hs-aircon .s-faq h3{margin:0}.hs-aircon .s-faq .sec{background:var(--pale);padding:var(--s6) var(--s3) var(--s7)}.hs-aircon .s-faq .hd{text-align:center;margin-bottom:var(--s5)}.hs-aircon .s-faq /* リードは線だけのピル（m6） */
.hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}.hs-aircon .s-faq .hd h2{margin-top:var(--s2);font-size:24px;font-weight:900;color:var(--h2c);letter-spacing:-.04em;line-height:1.34}.hs-aircon .s-faq /* 白の面を2pxの隙間で並べ、地色を覗かせる。カードとして浮かせない */
.list{display:grid;gap:2px}.hs-aircon .s-faq details{background:#fff}.hs-aircon .s-faq /* 閉じている状態では質問だけが残る。Aは丸ごと消える */
summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;
 padding:var(--s3)}.hs-aircon .s-faq summary::-webkit-details-marker{display:none}.hs-aircon .s-faq summary h3{flex:1;font-size:15px;font-weight:900;color:var(--navy);letter-spacing:-.04em;line-height:1.5}.hs-aircon .s-faq /* Q・Aの正方形（FAQ-1の部品）。質問は明るい青、答えは濃い紺。
   淡青のベタにしていたが、隣の濃青に負けて答えの位置が見えなかった。
   濃紺のベタは「言い切り」にだけ使う規則（3章）だが、この四角が導くのは
   「できます。」という言い切りそのものなので、規則の意図と合っている */
.qm{flex:none;width:26px;height:26px;display:grid;place-items:center;
 background:var(--deep);color:#fff;font-size:14px;font-weight:900;line-height:1}.hs-aircon .s-faq .am{flex:none;width:26px;height:26px;display:grid;place-items:center;
 background:var(--navy);color:#fff;font-size:14px;font-weight:900;line-height:1}.hs-aircon .s-faq /* 開閉の矢印。CTAボタンの矢印と同じ作り方（2辺のborderを回す） */
.cv{flex:none;width:20px;height:20px;position:relative;margin-top:3px}.hs-aircon .s-faq .cv::after{content:"";position:absolute;left:3px;top:4px;width:11px;height:11px;
 border-right:2.5px solid #7f96a8;border-bottom:2.5px solid #7f96a8;transform:rotate(45deg)}.hs-aircon .s-faq details[open] .cv::after{top:8px;transform:rotate(-135deg)}.hs-aircon .s-faq /* 答え。1行目を大きくして結論にする。札は使わない */
.a{display:flex;gap:12px;align-items:flex-start;padding:0 var(--s3) var(--s4)}.hs-aircon .s-faq .a p{font-size:14px;line-height:1.85}.hs-aircon .s-faq .a b{display:block;margin-bottom:3px;font-size:15px;font-weight:900;color:var(--navy);letter-spacing:-.03em}

/* ================= PC 700px以上 =================
   スマホファーストなので作り込まない。共通の規則は4つだけ。
   ①最大幅は3つだけ。1120px＝面で見せる／並べて比べるもの。
     860px＝1カラムだが写真を横に並べるもの（作業工程のみ。640pxだと
     4枚並べたとき1枚が150px未満になる）。640px＝文字を読ませる1カラム
   ②H2は34px（確定トークン）
   ③横へ戻すのは「並べて比べる情報」だけ。手順は縦のまま
   ④SPで隠した写真・スライドはPCで並べて全部見せる */
@media(min-width:900px){.hs-aircon .s-faq .sec{padding:var(--s8) 20px var(--s8)}.hs-aircon .s-faq .hd{margin-bottom:var(--s6)}.hs-aircon .s-faq .hd h2{font-size:34px;letter-spacing:-.035em;line-height:1.3}.hs-aircon .s-faq .hd h2 br{display:none}.hs-aircon .s-faq /* 文字だけの1カラムなので読み幅は640px。860pxは1行が57字ほどになり長い（README 6.6 ④） */
 .list{max-width:1120px;margin:0 auto}.hs-aircon .s-faq summary{padding:var(--s4) var(--s4)}.hs-aircon .s-faq summary h3{font-size:18px}.hs-aircon .s-faq .a{padding:0 var(--s4) var(--s4)}.hs-aircon .s-faq .a p{font-size:14px}
}


/* ===== 無料見積り相談フォーム（form-t1.html） ===== */
.hs-aircon .s-form{--ink:#1a1a1a;--navy:#123a5e;--navy2:#0e2e4b;--deep:#0b63c4;
 --pale:#e9f3fc;--yl:#ffdd00;--gray:#4a5b6a;--line:#c3d3e0;--red:#c62828;--grd:#eff2f5;
 --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:88px}.hs-aircon .s-form{box-sizing:border-box}.hs-aircon .s-form /* ヘッダーのstickyで飛んだ先が隠れないようにする（v3 styles.css:36 と同じ） */
html{scroll-behavior:smooth}.hs-aircon .s-form{margin:0;background:#fff;color:var(--ink);
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}.hs-aircon .s-form p,.hs-aircon .s-form h3{margin:0}

/* 2026-08-17 復元。ここから4ルールはフォームページ（/aircon-estimate/）だけが使う。
   LPのDOMには `.s-form .hd` が存在しないため、2026-08-16の未使用CSS削除で
   巻き添えで消えていた。**あの監査はLPのDOMだけで行い、フォームページを見ていない。**
   本番へ送る直前に、公開中のフォームページのDOMで再監査して検出した。
   消えると、見出しブロックの中央寄せ、ラベルの枠、モバイルの見出しサイズ、
   リード文の幅がすべて失われる。

   下の @media(min-width:900px) 側がPCの上書きなので、必ずその前に置く。
   メディアクエリは詳細度を上げないため、後ろに置くとPCの値を打ち消す。

   見出しは h2 から h1 へ変更済み（このページの主見出しでH1が他に無いため）。 */
.hs-aircon .s-form .hd{text-align:center;padding:var(--s6) var(--s3) var(--s5)}
.hs-aircon .s-form .hd .lb{display:inline-block;padding:4px 16px;border-radius:99px;background:none;
 border:1.5px solid #e2c766;color:#7a5c00;font-size:14px;font-weight:700;line-height:1.6}
.hs-aircon .s-form .hd h1{margin-top:var(--s2);font-size:24px;font-weight:900;color:var(--h2,#14232e);letter-spacing:-.04em;line-height:1.34}
.hs-aircon .s-form .hd .ld{margin:14px auto 0;max-width:24em;font-size:14px;color:var(--ink);line-height:1.8}.hs-aircon .s-form .sec{background:#fff;padding-bottom:0;scroll-margin-top:58px}.hs-aircon .s-form /* 見出し帯とのあいだに余白を作らない。境目は色の切り替わりだけで作る（3章） */
.body{padding:0 var(--s3)}.hs-aircon .s-form /* ===== 項目 =====
   2026-08-10（ユーザー指摘「薄いグレー背景はダサくないか？背景の構造変えた
   ほうがいい気がする。選択肢に背景を設定しているがそれでいいのか」）。
   **項目ごとの灰の面をやめた。**白の帯 → 灰の項目面 → 白の選択肢ボタン、で
   面が3層になっており、自分で立てた「1つの帯の中の地色は2層まで」に反していた。
   **面を持つのは操作する部品（選択肢のボタン・入力欄）だけにし、
   項目の区切りは余白でとる。** */
.f{display:grid;gap:var(--s5)}.hs-aircon .s-form /* 面は全幅に出す。.body の左右16pxを打ち消してから内側で16pxを払う。
   二重に払うと入力欄が330pxまで痩せ、ラベルの左端が送信ボタンとずれる */
.fd{padding:0}.hs-aircon .s-form /* 先頭だけ余分に空ける。濃青との境が硬いので、13pxだとラベルが張り付いて見える */
.f .fd:first-child{padding-top:var(--s4)}.hs-aircon .s-form /* 必須は赤。ページで赤を使うのはここだけで、注意の意味に限る */
.req{flex:none;padding:2px 7px 3px;background:var(--red);color:#fff;font-size:14px;font-weight:700;line-height:1.5}.hs-aircon .s-form ::placeholder{color:#93a6b6}.hs-aircon .s-form /* 選択肢はセレクトではなくボタンにする。
   セレクトは「タップ→リストが出る→選ぶ」で2〜3手、ボタンは1タップで済む */
.ch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hs-aircon .s-form /* 選んだものに印を出す。複数が同時に点いている状態が読み取れる */
.ch input[type=checkbox]:checked + span::before{content:"";position:absolute;left:9px;top:50%;
 width:11px;height:6px;margin-top:-5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}.hs-aircon .s-form /* 郵便番号。入力欄の形にせず、面も持たせない（面が3層になるため） */
.zip{display:grid;grid-template-columns:148px minmax(0,1fr);gap:10px;align-items:center}.hs-aircon .s-form /* 郵便番号を知らない人のための逃げ道。ここが無いと必須にできない */
.esc{margin-top:9px}.hs-aircon .s-form /* ===== 写真の案内。入力欄と混同させないため、白＋角丸＋実線の枠を使わない ===== */
.pg{margin:var(--s5) 0 0;padding:0}.hs-aircon .s-form /* 添付。入力欄より背を高くし、破線と中央揃えで「押す場所」にする */
.file{position:relative;margin-top:11px;display:grid;place-items:center;gap:4px;height:84px;cursor:pointer;
 border:2px dashed #9dc4e6;background:#fbfdff;color:var(--deep);text-decoration:none}.hs-aircon .s-form /* 選んだ写真の控え。入力欄ではないので白＋角丸＋実線の枠は使わない */
.thumbs{margin-top:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.hs-aircon .s-form /* ===== 同意と送信 ===== */
.agree{margin-top:var(--s4);display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;
 font-size:14px;line-height:1.75}.hs-aircon .s-form /* ===== 電話。フォームの後ろへ置き、同列に並べない ===== */
/* 面は全幅。項目・写真の案内と同じ扱いにする。
   内側に残すと、ここだけ左右に余白が残って取りこぼしに見える */
.tel{margin:var(--s6) 0 0;background:var(--pale);padding:var(--s6) var(--s3)}.hs-aircon .s-form .telin{max-width:1120px;margin:0 auto}.hs-aircon .s-form .tel h2,.hs-aircon .s-form .tel h3{font-size:15px;font-weight:900;color:var(--navy);letter-spacing:-.04em;line-height:1.5}.hs-aircon .s-form .tel p{margin-top:5px;font-size:14px;line-height:1.8}.hs-aircon .s-form .telbtn{margin-top:14px;display:block;text-align:center;background:#fff;padding:12px 10px 13px;
 border:1.5px solid var(--deep);border-radius:4px;text-decoration:none}.hs-aircon .s-form .telbtn small{display:block;font-size:14px;font-weight:700;color:var(--deep)}.hs-aircon .s-form .telbtn strong{display:block;margin-top:1px;font-family:"Roboto Condensed",sans-serif;font-size:27px;color:var(--navy);line-height:1.2}.hs-aircon .s-form .telbtn span{display:block;font-size:14px;color:var(--gray)}

/* ================= PC 700px以上 =================
   スマホファーストなので作り込まない。共通の規則は4つだけ。
   ①最大幅は3つだけ。1120px＝面で見せる／並べて比べるもの。
     860px＝1カラムだが写真を横に並べるもの（作業工程のみ。640pxだと
     4枚並べたとき1枚が150px未満になる）。640px＝文字を読ませる1カラム
   ②H2は34px（確定トークン）
   ③横へ戻すのは「並べて比べる情報」だけ。手順は縦のまま
   ④SPで隠した写真・スライドはPCで並べて全部見せる */
@media(min-width:900px){.hs-aircon .s-form .hd{padding:var(--s8) 20px var(--s6)}.hs-aircon .s-form .hd h1{font-size:34px;letter-spacing:-.035em;line-height:1.3}.hs-aircon .s-form .hd h1 br{display:none}.hs-aircon .s-form /* 34pxのH2の下で24emだと3行に折り返して窮屈になる */
 .hd .ld,.hs-aircon .s-form .hd p{max-width:44em;font-size:14px}.hs-aircon .s-form .sec{padding-bottom:0}.hs-aircon .s-form /* PCは余白を持たせ、文字を少し大きくする（2026-08-10。ユーザー指示） */
 .body{max-width:1120px;margin:0 auto;padding:0 20px;font-size:15px}.hs-aircon .s-form .fd{padding:0}.hs-aircon .s-form .lab{font-size:15px}.hs-aircon .s-form .help{font-size:14px;margin-top:8px}.hs-aircon .s-form input[type=text],.hs-aircon .s-form input[type=email],.hs-aircon .s-form input[type=tel],.hs-aircon .s-form select{font-size:16px;height:56px}.hs-aircon .s-form textarea{font-size:16px}.hs-aircon .s-form .ch span{height:52px;font-size:14px}.hs-aircon .s-form .pg{padding:0;margin-top:var(--s6)}.hs-aircon .s-form .btn{height:64px;font-size:17px}.hs-aircon .s-form .fd{padding:0}.hs-aircon .s-form .f .fd:first-child{padding-top:var(--s5)}.hs-aircon .s-form .pg{margin:var(--s6) 0 0;padding:0}.hs-aircon .s-form .tel{margin:var(--s8) 0 0;padding:var(--s8) 20px}.hs-aircon .s-form .btn{max-width:420px;margin-left:auto;margin-right:auto}.hs-aircon .s-form /* 2026-08-10（第2回）。面の幅は1120pxへそろえたが、
   入力欄・写真枠まで1120pxへ引き伸ばすとSPの設計がそのまま拡大された絵になる。
   **面（灰の項目行）はブロックの端としてそろえ、操作する部品は手の届く幅で止める。**
   ここは「幅がばらばら」ではなく「面と部品は別物」という区別である */
 input[type=text],.hs-aircon .s-form input[type=email],.hs-aircon .s-form input[type=tel],.hs-aircon .s-form select{max-width:520px}.hs-aircon .s-form .zip input{max-width:220px}.hs-aircon .s-form textarea{max-width:820px}.hs-aircon .s-form .half{max-width:520px}.hs-aircon .s-form .esc .in select{max-width:520px}.hs-aircon .s-form /* 選択肢は4列まで。1120pxで2列にすると1つが550pxの帯になる */
 .ch{grid-template-columns:repeat(4,minmax(0,1fr))}.hs-aircon .s-form .ch.c3{grid-template-columns:repeat(4,minmax(0,1fr))}.hs-aircon .s-form .ch .wide{grid-column:auto}.hs-aircon .s-form /* 写真の控えは1枚160pxまで。1120pxの4分割だと1枚270px四方になる */
 .thumbs{grid-template-columns:repeat(4,minmax(0,160px))}.hs-aircon .s-form .file{max-width:520px}
}


/* ===== フッター（footer-approved.html） ===== */
.hs-aircon .s-footer{--navy2:#0e2e4b;--deep:#0b63c4;
 --s1:8px;--s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:88px}.hs-aircon .s-footer{box-sizing:border-box}.hs-aircon .s-footer{margin:0;background:#fff;color:#1a1a1a;
 font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-weight:400;font-size:15px;line-height:1.9}.hs-aircon .s-footer p{margin:0}.hs-aircon .s-footer dl,.hs-aircon .s-footer dd,.hs-aircon .s-footer dt{margin:0;padding:0;list-style:none}.hs-aircon .s-footer /* ページの終端。濃紺一色で、直前の白いフォームから切り替える */
.ft{background:var(--navy2);color:#fff;padding:var(--s6) var(--s3) var(--s4)}.hs-aircon .s-footer .ft a{color:#fff}.hs-aircon .s-footer .bd{font-size:20px;font-weight:900;letter-spacing:-.035em;line-height:1.4}.hs-aircon .s-footer .run{margin-top:4px;font-size:14px;color:#c2d6e8;line-height:1.7}.hs-aircon .s-footer /* 資格・登録。説明はしない。有資格者・登録があることだけ伝える。
   線だけの札は、見出しのリード（m6）や無料の約束の札と同じ文法 */
.bgs{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:8px}.hs-aircon .s-footer .bg{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 9px;
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
 font-size:14px;font-weight:700;letter-spacing:-.03em;line-height:1.5}.hs-aircon .s-footer .bg svg{flex:none;width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.hs-aircon .s-footer .dl{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.18);display:grid;gap:11px}.hs-aircon .s-footer .dl div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.75}.hs-aircon .s-footer .dl dt{color:#9fc0dc;font-weight:500}.hs-aircon .s-footer /* 電話。フォーム末尾に大きな電話カードがあるので、ここでは押す部品にしない */
.tel{font-family:"Roboto Condensed",sans-serif;font-size:20px;text-decoration:none;line-height:1.3}.hs-aircon .s-footer .hrs{font-size:14px;color:#c2d6e8}.hs-aircon .s-footer .nav{margin-top:var(--s5);padding-top:var(--s1);border-top:1px solid rgba(255,255,255,.18);display:grid}.hs-aircon .s-footer .nav a{display:flex;align-items:center;gap:10px;padding:13px 0;font-size:14px;text-decoration:none;line-height:1.5}.hs-aircon .s-footer .nav a + a{border-top:1px solid rgba(255,255,255,.12)}.hs-aircon .s-footer .nav em{font-style:normal;font-size:14px;color:#9fc0dc;margin-left:auto}.hs-aircon .s-footer .nav .ar{flex:none;width:14px;height:14px;position:relative;opacity:.55;margin-left:auto}.hs-aircon .s-footer .nav em + .ar{margin-left:8px}.hs-aircon .s-footer .nav .ar::before{content:"";position:absolute;left:1px;top:2px;width:9px;height:9px;
 border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(45deg)}.hs-aircon .s-footer /* 公式サイト（hasegawa-jusetsu.co.jp）の表記に合わせる。年は毎年更新するか動的に出す */
.cr{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.18);
 text-align:center;font-family:"Roboto Condensed",sans-serif;font-size:14px;color:#9fc0dc;letter-spacing:.02em}

/* ================= PC 700px以上 =================
   スマホファーストなので作り込まない。共通の規則は4つだけ。
   ①最大幅は3つだけ。1120px＝面で見せる／並べて比べるもの。
     860px＝1カラムだが写真を横に並べるもの（作業工程のみ。640pxだと
     4枚並べたとき1枚が150px未満になる）。640px＝文字を読ませる1カラム
   ②H2は34px（確定トークン）
   ③横へ戻すのは「並べて比べる情報」だけ。手順は縦のまま
   ④SPで隠した写真・スライドはPCで並べて全部見せる */
@media(min-width:900px){.hs-aircon .s-footer .ft{padding:var(--s7) 20px var(--s5)}.hs-aircon .s-footer /* 左＝会社の情報、右＝出口のリンク。自動で流すと行が混ざるので配置を明示する */
 .in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;
  column-gap:var(--s8);align-items:start}.hs-aircon .s-footer .bd,.hs-aircon .s-footer .run,.hs-aircon .s-footer .bgs,.hs-aircon .s-footer .dl{grid-column:1}.hs-aircon .s-footer .bd{grid-row:1}.hs-aircon .s-footer .run{grid-row:2}.hs-aircon .s-footer .bgs{grid-row:3}.hs-aircon .s-footer .dl{grid-row:4}.hs-aircon .s-footer .dl{margin-top:var(--s5);padding-top:var(--s4)}.hs-aircon .s-footer .nav{grid-column:2;grid-row:1/5;align-self:start;margin-top:0;padding-top:0;border-top:0}.hs-aircon .s-footer .cr{grid-column:1/-1;grid-row:5;margin-top:var(--s6)}
}



/* ===================================================================
   ベースの文字サイズ（2026-08-10 確定。**ここが正本**）
   ===================================================================
   **値は3つだけ。**細かく切り分けない。新しく足すときもこの3つから選ぶ。

   | トークン | 役割 | SP | PC |
   |---|---|---|---|
   | `--fs`   | **ベース＝本文・ラベル・入力欄・選択肢** | 15px | 16px |
   | `--fs-s` | 注記・補足・札（本文に添えるもの） | 13px | 14px |
   | `--fs-m` | 項目の見出し | 19px | 21px |

   見出し（H2・ブロック内の主見出し）と数値は、ブロックごとに確定済みの
   値がある。ここでは触らない。

   **適用しているのはフォーム周りと、名指しされた4か所だけである。**
   ほかのブロックは2026-08-10の是正前のまま。**一部の指摘に、全体の
   一括変更で応えない**（同日の失敗。`APPROVAL-RECORD.md` 10章）。
   ほかのブロックを触るときに、そのブロックだけこの3つへ寄せる。 */

.hs-aircon { --fs: 15px; --fs-s: 14px; --fs-m: 19px; }

@media (min-width: 900px) {
  .hs-aircon { --fs: 16px; --fs-s: 14px; --fs-m: 21px; }
}

/* ---- ベース（本文・ラベル・入力欄・選択肢） ---- */
.hs-aircon .s-form .tel p,
.hs-aircon .s-footer .dl div { font-size: var(--fs); line-height: 1.85; }

/* ---- 注記・補足・札 ---- */
.hs-aircon .s-form .telbtn small,
.hs-aircon .s-form .telbtn span,
.hs-aircon .s-footer .hrs{ font-size: var(--fs-s); line-height: 1.8; }

/* ---- 項目の見出し ---- */
.hs-aircon .s-form .tel h2,
.hs-aircon .s-form .tel h3 { font-size: var(--fs-m); line-height: 1.5; }

@media (min-width: 900px) {
}

/* ---- 名指しの是正（2026-08-10。ユーザー指摘） ----
   ・SPのCTAの約束4点「無料／かかりません／2営業日以内／増えません」が大きすぎた
   ・料金の「設置場所に合わせて必要になる工事」の3項目だけ中央寄せになっていなかった
   ・対応エリアの市名が大きすぎた
   値はベースのトークン（--fs / --fs-s / --fs-m）から採る */
@media (max-width: 899px) {
  .hs-aircon .s-cta .pr b { font-size: var(--fs-m); }
  .hs-aircon .s-cta .pr span { font-size: var(--fs-s); }
}

/* ---- 14px未満を全廃した（2026-08-10。ユーザー指摘「全然フォントサイズが14px以下が
   あるじゃねーかよ」）。CSS全体の146箇所を14pxへ引き上げた。**これ以降、14px未満を
   書かない。**注記も札も下限は14px。値は --fs / --fs-s / --fs-m から採る ---- */

/* SPのCTAの約束4点。まだ大きい（ユーザー指摘） */
@media (max-width: 899px) {
  .hs-aircon .s-cta .pr b { font-size: var(--fs); }
}
.hs-aircon .s-case .place { font-size: 12px; }

@media (min-width: 900px) {  /* .sl .ft の方が詳細度が高いので合わせる */
}
.hs-aircon .s-case .txt { padding: 20px; }
.hs-aircon .s-faq .a { padding: 0 20px 20px; }

/* ---- 本文の行間 ---- */
.hs-aircon .s-svc .copy p,
.hs-aircon .s-reason .rc__body,
.hs-aircon .s-process .fl > li > .c > p,
.hs-aircon .s-warranty .mer dd,
.hs-aircon .s-faq .a p,
.hs-aircon .s-cta .lead { line-height: 1.9; }

@media (min-width: 900px) {
  /* ---- セクションの上下 ---- */
  .hs-aircon .s-svc .sec,
  .hs-aircon .s-area .sec,
  .hs-aircon .s-reason .sec,
  .hs-aircon .s-process .sec,
  .hs-aircon .s-flow .sec,
  .hs-aircon .s-faq .sec,
  .hs-aircon .s-warranty .wr,
  .hs-aircon .s-case .sp,
  .hs-aircon .s-cta .c1 { padding-top: 104px; padding-bottom: 104px; }
  .hs-aircon .s-price .main { padding-top: 104px; }

  /* ---- 見出しと中身の間 ---- */
  .hs-aircon .s-svc .hd,
  .hs-aircon .s-price .hd,
  .hs-aircon .s-area .hd,
  .hs-aircon .s-case .hd,
  .hs-aircon .s-process .hd,
  .hs-aircon .s-warranty .hd,
  .hs-aircon .s-flow .hd,
  .hs-aircon .s-faq .hd,
  .hs-aircon .s-reason .sec__hd { margin-bottom: 48px; }
  .hs-aircon .s-reason .rc__txt { padding: 32px; }
  .hs-aircon .s-faq .a { padding: 0 32px 32px; }
  .hs-aircon .s-case .txt { padding: 24px; }
  .hs-aircon .s-process .fl > li > .c { padding: 24px; }
  .hs-aircon .s-process .fl h3,
  .hs-aircon .s-process .fl > li > .c > p { padding-right: 0; }
  .hs-aircon .s-process .one{ margin-right: 0; }
}

/* ===== 固定ヘッダーと CTAボタン（2026-08-10。ユーザー指示） =====
   ・ヘッダーCTAの副題「相談フォームへ」を削除（HTML側）。
     2.2の部品の規則「CTAボタンは1行＋矢印。副題を持たない」に戻したことになる
   ・電話番号をもう少し目立たせる。線で囲んで「押せる場所」だと分かるようにし、
     受話器のアイコンを添える。番号自体の大きさは変えない
   ・PC版のCTAボタンの横幅を少し狭める */
@media (min-width: 900px) {
  .hs-aircon .s-fv .hd__cta { min-width: 0; padding: 0 24px; }
  .hs-aircon .s-fv .hd__cta b { font-size: 17px; }

  /* 電話。線だけの囲み＋受話器。ヘッダーで唯一の「もう一つの入口」だと分かるようにする */
  .hs-aircon .s-fv .tel {
    display: grid; grid-template-columns: 20px auto; align-items: center;
    column-gap: 10px; justify-items: start;
    padding: 8px 18px 9px; border-radius: 6px;
    box-shadow: inset 0 0 0 1.5px #b7d4ee; background: #f5faff;
  }
  .hs-aircon .s-fv .tel::before {
    content: ""; grid-row: 1 / 3; width: 20px; height: 20px;
    background: var(--deep);
    -webkit-mask: no-repeat center/20px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.2 1z'/%3E%3C/svg%3E");
    mask: no-repeat center/20px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.2 1z'/%3E%3C/svg%3E");
  }
  .hs-aircon .s-fv .tel b { grid-column: 2; }
  .hs-aircon .s-fv .tel span { grid-column: 2; }

  /* CTAボタンの横幅。420pxは1120pxの帯の中で伸びすぎていた */
  .hs-aircon .s-cta .btn { min-width: 0; padding: 0 40px; }
  .hs-aircon .s-flow .btn { width: 100%; max-width: 340px; }
  .hs-aircon .s-form .btn { max-width: 340px; }
}

/* ===== 14px未満にする例外（2026-08-10。ユーザーの委任で判断した） =====
   下限は14px。**下げるのは次の5種類だけ。**いずれも「読ませる文章ではなく、
   何かに付随する印」であり、14pxだと付随先と大きさが競う。

   1. 写真の上に載る札（工事後／工事前／接写・全景／理由の「写真」）… 11px
      写真そのものを隠さないため。**実写真が入っても残る札**である
   2. 写真枠のプレースホルダ文字（実写真で消える足場）… 11px
   3. 金額の接頭「税込」… 11px。38pxの数字の前に付く印で、14pxだと数字と競う
   4. 値に添う脚注「工事内容が変わらない場合」… 12px。上の値（23px）の但し書き
   5. 必須／任意のバッジ、著作権表記、送り枚数 … 12px
      ラベル（16px）の横に付く印で、14pxだとラベルと競う */

/* 1・2 写真の上の札とプレースホルダ */
.hs-aircon .s-case .after,
.hs-aircon .s-case .before span,
.hs-aircon .s-case .before b,
.hs-aircon .s-case .ph b,
.hs-aircon .s-reason .ph__tag,
.hs-aircon .s-reason .ph__note,
.hs-aircon .s-reason .strip__cell,
.hs-aircon .s-process .sh > span,
.hs-aircon .s-process .sh b,
.hs-aircon .s-svc .ph i,
.hs-aircon .s-svc .ph b,
.hs-aircon .s-warranty .doc .paper .tagp{ font-size: 11px; }

/* 3 金額の接頭 */
.hs-aircon .s-price .pc .price s { font-size: 11px; }

/* 5 印のバッジ */
.hs-aircon .s-footer .cr{ font-size: 12px; }

/* ===== 電話と流れの手直し（2026-08-10。ユーザー指摘） =====
   ・受話器のアイコンをやめてスマホのアイコンにする
   ・電話番号が青系統で目立たないので、白地＋濃青の枠＋黒の番号にする
   ・流れの01〜04の色の変化が地味。淡青から淡黄へ4段で流し、番号の丸も
     青→濃紺へ段階を付ける（作業工程の番号列と同じ文法）
   ・面に色が付いた以上、無料の札も面を持たせる（白ベタ＋濃青の枠） */

@media (min-width: 900px) {
  .hs-aircon .s-fv .tel {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--deep);
    padding: 7px 18px 8px;
  }
  .hs-aircon .s-fv .tel b { color: #111111; }
  .hs-aircon .s-fv .tel span { color: #4a5b6a; }
  .hs-aircon .s-fv .tel::before {
    -webkit-mask: no-repeat center/20px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.6'/%3E%3Cpath d='M10.4 5.1h3.2' stroke-linecap='round'/%3E%3Cpath d='M12 18.7h.01' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    mask: no-repeat center/20px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.6'/%3E%3Cpath d='M10.4 5.1h3.2' stroke-linecap='round'/%3E%3Cpath d='M12 18.7h.01' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* ---- 対応エリア図。SPは市区名を左右へ引き出して重なりを防ぐ ---- */
.hs-aircon .s-area .area-map__rivers {
  stroke: #8cc7e8;
  stroke-width: 1.4;
  opacity: .78;
}
.hs-aircon .s-area .area-map__leader { stroke: #92a8b8; opacity: .72; }
.hs-aircon .s-area .area-map .area-map__label--left { text-anchor: start; }
.hs-aircon .s-area .area-map .area-map__label--right { text-anchor: end; }

@media (max-width: 899px) {
  .hs-aircon .s-area .area-map--sp .area-map__province-labels { font-size: 26px; }
  .hs-aircon .s-area .area-map--sp .area-map__river-labels { font-size: 25px; }
  .hs-aircon .s-area .area-map--sp .area-map__label { font-size: 26px; stroke-width: 4px; }
  .hs-aircon .s-area .area-map--sp .area-map__label--focus { font-size: 34px; }
}

/* ===== 対応エリア地図（2026-08-11） =====
   国土数値情報の県境形状を使い、市区境界と細かな地名は表示しない。 */
.hs-aircon .s-area .area-map-frame {
  /* 2026-08-22。B案SVGは自前で全面の地色(#EBF5F9)を持つ。枠にも#DCECF7を
     敷くと、ほぼ同じ淡青が二重になって外周に細い段が出る。枠側を透明にし、
     地色はSVGの1枚だけにする。 */
  background: transparent;
}
.hs-aircon .s-area .area-prefecture-map {
  display: block;
  width: 100%;
  height: auto;
}
.hs-aircon .s-area .area-map-frame figcaption {
  padding: 12px 16px 14px;
  background: #0e2e4b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
.hs-aircon .s-area .area-map-source {
  padding-right: 2px;
  padding-left: 2px;
}

@media (max-width: 899px) {
  .hs-aircon .s-area .area-map-frame figcaption { padding: 10px 12px 12px; }
}

/* 2026-08-22。SP用の地図は720×1750で、縦が横の2.43倍ある。幅に追従させると
   899pxのタブレットで852×2071となり、地図だけで画面2枚分を超える。
   切替は700pxまで下げ、SP用を出す範囲でも幅を420pxで止める。
   700px超はPC用（1180×720）にする。PC用は表示幅660pxで市名12px、
   852pxで16pxとなり判読できる。 */
@media (max-width: 700px) {
  /* 2026-08-24。SP用地図を1180x762の横並びへ作り直したため、旧版(720x1750)向けの
     420px制限は不要になった。スマホは文字が小さくなるので、セクションの左右padding(16px)を
     打ち消して画面幅いっぱいに使う。 */
  .hs-aircon .s-area .area-map-frame {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    max-width: none;
  }
  .hs-aircon .s-area .area-prefecture-map { max-width: none; }
}

/* ===== 写真スライダー（2026-08-11） =====
   横スクロールとscroll-snapは使わない。JavaScriptがtrackのtransformを管理し、
   前後ボタン・ドット・現在位置・キーボード・スマホのフリックで1枚ずつ送る。 */
.hs-aircon .s-area [hidden] { display: none; }
.hs-aircon .is-slider-ready .track,
.hs-aircon .is-slider-ready .tr {
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.hs-aircon .hs-slider__controls { display: none; }

@media (max-width: 899px) {
  .hs-aircon .is-slider-ready .hs-slider__controls {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }
  .hs-aircon .hs-slider__button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 900 28px/1 "Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    cursor: pointer;
  }
  .hs-aircon .hs-slider__button:disabled { cursor: default; opacity: .35; }
  .hs-aircon .hs-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .hs-aircon .hs-slider__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #9fb8cb;
    cursor: pointer;
  }
  .hs-aircon .hs-slider__dot[aria-current="true"] { background: #ffdd00; transform: scale(1.18); }
  .hs-aircon .hs-slider__status {
    min-width: 44px;
    font-family: "Roboto Condensed",sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
  }
  .hs-aircon .s-case .hs-slider__status { color: #fff; }
  .hs-aircon .s-process .hs-slider__status { color: #123a5e; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-aircon .is-slider-ready .track,
  .hs-aircon .is-slider-ready .tr { transition-duration: 1ms; }
}

/* ===== 対応エリア条件｜チェックポイントブロック準拠（2026-08-12） =====
   外枠1120px、淡青の親面、白い情報面、青→緑の4色アクセントを共用する。
   無料面の左端は親面の文字とそろえ、見出し以外を一律に太字にしない。 */
.hs-aircon .s-area .area-coverage {
  margin-top: 48px;
  padding: 20px;
  background: #e9f3fc;
  color: #1a1a1a;
}
.hs-aircon .s-area .area-coverage h3::before { display: none; }
.hs-aircon .s-area .area-coverage__parent { padding: 0 0 24px; }
.hs-aircon .s-area .area-coverage__parent h3 {
  gap: 0;
  color: #123a5e;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.04em;
}
.hs-aircon .s-area .area-coverage__prefs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
  color: #123a5e;
  font-size: 17px;
  font-weight: 700;
}
.hs-aircon .s-area .area-coverage__prefs li {
  display: flex;
  align-items: center;
}
/* 下線をliへ置くと、同じliの::afterで出す区切り「｜」へも伝播する。
   県名spanだけへ限定し、区切りは装飾対象に含めない。 */
.hs-aircon .s-area .area-coverage__prefs li > span {
  line-height: 1.6;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.hs-aircon .s-area .area-coverage__prefs li:nth-child(1) > span { text-decoration-color: #7cc0f5; }
.hs-aircon .s-area .area-coverage__prefs li:nth-child(2) > span { text-decoration-color: #6fd3f5; }
.hs-aircon .s-area .area-coverage__prefs li:nth-child(3) > span { text-decoration-color: #5fd9cb; }
.hs-aircon .s-area .area-coverage__prefs li:nth-child(4) > span { text-decoration-color: #8ee0a0; }
.hs-aircon .s-area .area-coverage__prefs li:not(:last-child)::after {
  content: "｜";
  margin: 0 5px;
  color: #8298a8;
  font-weight: 400;
}
.hs-aircon .s-area .area-coverage__free {
  margin: 0;
  padding: 20px;
  background: #fff;
  color: #1a1a1a;
}
.hs-aircon .s-area .area-coverage__free h3 {
  gap: 0;
  color: #123a5e;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.035em;
}
.hs-aircon .s-area .area-coverage__cities {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  background: #e9f3fc;
}
.hs-aircon .s-area .area-coverage__cities > div {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
}
.hs-aircon .s-area .area-coverage__cities dt {
  color: #123a5e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.hs-aircon .s-area .area-coverage__cities > div:nth-child(1) dt { text-decoration-color: #7cc0f5; }
.hs-aircon .s-area .area-coverage__cities > div:nth-child(2) dt { text-decoration-color: #6fd3f5; }
.hs-aircon .s-area .area-coverage__cities > div:nth-child(3) dt { text-decoration-color: #5fd9cb; }
.hs-aircon .s-area .area-coverage__cities dd {
  margin: 0;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}
.hs-aircon .s-area .area-coverage__free-note {
  margin-top: 14px;
  color: #3f3a33;
  font-size: 14px;
  line-height: 1.85;
}
.hs-aircon .s-area .area-coverage__condition {
  margin: 14px 0 0;
  padding: 0;
  color: #514d46;
  font-size: 14px;
  line-height: 1.85;
}
.hs-aircon .s-area .area-coverage__condition b { color: #1a1a1a; font-weight: 700; }

@media (min-width: 900px) {
  .hs-aircon .s-area .area-coverage { padding: 32px; }
  .hs-aircon .s-area .area-coverage__parent { padding-bottom: 32px; }
  .hs-aircon .s-area .area-coverage__parent h3 { font-size: 25px; }
  .hs-aircon .s-area .area-coverage__prefs { font-size: 18px; }
  .hs-aircon .s-area .area-coverage__prefs li:not(:last-child)::after {
    margin-right: 7px;
    margin-left: 7px;
  }
  .hs-aircon .s-area .area-coverage__free {
    padding: 32px;
  }
  .hs-aircon .s-area .area-coverage__free h3 {
    font-size: 22px;
    line-height: 1.5;
  }
  .hs-aircon .s-area .area-coverage__cities > div {
    grid-template-columns: 76px minmax(0,1fr);
    padding: 12px 16px;
  }
}

/* ===== 背景配色の整理（2026-08-14・ユーザー承認） =====
   正しい順序「工事 → 料金 → 対応メーカー → CTA」を前提に、
   白と薄灰青を交互に置く。強い青はCTAとアクセントへ限定する。 */
.hs-aircon .s-fv .hero__photo picture,
.hs-aircon .s-fv .hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.hs-aircon .s-fv .hero__photo img {
  object-fit: cover;
  object-position: center top;
}
/* 帯の地は白と淡青#e9f3fcの2色だけで交互にする。淡黄#fff6ccは保証だけの特例。
   薄灰青#f2f5f7は白からΔE2.63しか離れず、隣の白帯とも中の白カードとも
   区別がつかなかったため帯色としては使わない（2026-08-16、実測により変更）。 */
.hs-aircon .s-price .main {
  background: #e9f3fc;
  color: #1a1a1a;
}
.hs-aircon .s-price .hd .lb,
.hs-aircon .s-case .hd .lb {
  border-color: #e2c766;
  color: #7a5c00;
}
.hs-aircon .s-price .hd h2,
.hs-aircon .s-case .hd h2 {
  color: #14232e;
}
.hs-aircon .s-price .source {
  background: #e3ebf2;
  color: #435465;
}
.hs-aircon .s-case,
.hs-aircon .s-case .sp {
  background: #e9f3fc;
}
.hs-aircon .s-makers {
  background: #fff;
}
.hs-aircon .s-makers .maker-grid {
  background: #d8e4ed;
}
.hs-aircon .s-makers .maker-grid li {
  background: #fff;
}

@media (max-width: 899px) {
  /* コピーの背面だけを寒色の不透明面へ着地させ、人物の顔とエアコンは隠さない。 */
  .hs-aircon .s-fv .hero::after {
    background: linear-gradient(
      to bottom,
      rgb(242 245 247 / 0%) 0%,
      rgb(242 245 247 / 0%) 37%,
      rgb(242 245 247 / 72%) 44%,
      #f2f5f7 50%,
      #f2f5f7 100%
    );
  }
  /* 下地が不透明になるため、4特徴の外側に重ねていた白い箱は外す。 */
  .hs-aircon .s-fv .hero__points {
    padding: 0;
    background: transparent;
  }
  .hs-aircon .s-case .hs-slider__status {
    color: #123a5e;
  }
}

@media (min-width: 900px) {
  .hs-aircon .s-fv .hero__photo img {
    object-position: center center;
  }
  /* 4特徴の外側を囲っていた白い箱を外す。899px以下では既に外してある。
     4つのタイルは自前の淡色を持つため、白い受け皿は二重の面になっていた
     （2026-08-16）。 */
  .hs-aircon .s-fv .hero__points {
    padding: 0;
    background: transparent;
  }
}

/* ============================================================
   見積り・依頼の流れ（2026-08-16 全面改修）

   旧実装は横4列のカードで、背景を1枚ずつ別の色にし、01の中へCTAボタンを
   入れていた。色の変化に意味がなく、情報量も01に偏っていたため作り直した。
   CTAは追従ヘッダーのボタンと完全に重複していたので削除した。

   一方通行を「輪郭」で示す。帯の右端（縦積みでは下端）を三角に尖らせ、
   次のカードの切り欠きへ噛ませる。

   ずれない仕組み:
     帯は .fstep の箱へ top:0 / bottom:-22px で固定してある。
     clip-path の底辺は「帯の高さ - 22px」＝ .fstep の高さ、つまり必ず
     カードの下端に一致する。カードの高さが本文量で変わっても追従する。
   張り出しの量:
     必ず「カード間の隙間 + 尖りの深さ」にする。今は隙間0なので22px。
     隙間を戻すときは --fgap と --fover を対で変える。
   整数で揃える理由:
     行送りが小数だと境界が小数位置へ落ち、枠線と尖りの肩が別々に滲む。
     このセクションの縦寸法はすべて整数pxで指定している。

   旧 .s-flow .st / .freetag / .shot / .btn / .n の各規則は、対応する
   markup を外したため一切マッチしない。整理は別途。
   ============================================================ */
.hs-aircon .s-flow{
  --fnotch:22px;
  --fgap:0px;
  --fover:22px;   /* = fgap + fnotch */
  --fs1:#0b63c4; --fs2:#0596d8; --fs3:#00a396; --fs4:#2f9e5f;
  --fs1l:#4f97e0; --fs2l:#4fbbe8; --fs3l:#4cc4ba; --fs4l:#6fc48d;
}
/* 見出しの行送りも整数にする。小数だと以降の境界が小数位置へずれる */
.hs-aircon .s-flow .hd h2{line-height:32px}
.hs-aircon .s-flow .hd .lb{line-height:20px}

.hs-aircon .s-flow .fsteps{display:block;max-width:1060px;margin:0 auto}
.hs-aircon .s-flow .fstep{position:relative;padding-left:78px;margin-bottom:var(--fgap)}
.hs-aircon .s-flow .fstep:last-child{margin-bottom:0}
.hs-aircon .s-flow .fstep__band{position:absolute;left:0;top:0;bottom:calc(var(--fover) * -1);
  width:78px;
  clip-path:polygon(0 0, 50% var(--fnotch), 100% 0,
                    100% calc(100% - var(--fnotch)), 50% 100%, 0 calc(100% - var(--fnotch)))}
.hs-aircon .s-flow .fstep:first-child .fstep__band{
  clip-path:polygon(0 0, 100% 0,
                    100% calc(100% - var(--fnotch)), 50% 100%, 0 calc(100% - var(--fnotch)))}
.hs-aircon .s-flow .fstep:last-child .fstep__band{bottom:0;
  clip-path:polygon(0 0, 50% var(--fnotch), 100% 0, 100% 100%, 0 100%)}
.hs-aircon .s-flow .fstep:nth-child(1) .fstep__band{background:linear-gradient(160deg,var(--fs1),var(--fs1l))}
.hs-aircon .s-flow .fstep:nth-child(2) .fstep__band{background:linear-gradient(160deg,var(--fs2),var(--fs2l))}
.hs-aircon .s-flow .fstep:nth-child(3) .fstep__band{background:linear-gradient(160deg,var(--fs3),var(--fs3l))}
.hs-aircon .s-flow .fstep:nth-child(4) .fstep__band{background:linear-gradient(160deg,var(--fs4),var(--fs4l))}
.hs-aircon .s-flow .fstep__n{position:absolute;left:0;right:0;top:30px;text-align:center;
  font-size:40px;line-height:1;color:rgba(255,255,255,.45)}
.hs-aircon .s-flow .fstep:first-child .fstep__n{top:20px}
/* ステップ間の仕切り線は .fstep の箱から直接生やす。
   帯の clip-path の底辺も .fstep の箱から決まる（bottom:-22px なので
   底辺＝帯の高さ-22px＝.fstep の高さ）。同じ箱を基準にしているため、
   この2つの位置は構造として一致し、計算が食い違う余地がない。
   本文の border-bottom に持たせると「本文が .fstep の唯一の通常フロー子
   要素である」という暗黙の前提に依存する。子を足しただけで崩れるので使わない。
   外周（1枚目の上辺・最後の下辺・右辺）は継ぎ目ではないので本文側でよい。 */
.hs-aircon .s-flow .fstep__body{border:0;border-right:1px solid #d8e4ed;background:#fff;
  padding:16px 18px 20px;min-height:132px}
.hs-aircon .s-flow .fstep:first-child .fstep__body{border-top:1px solid #d8e4ed}
.hs-aircon .s-flow .fstep:last-child .fstep__body{border-bottom:1px solid #d8e4ed}
.hs-aircon .s-flow .fstep:not(:last-child)::after{content:"";position:absolute;
  left:78px;right:0;bottom:0;height:1px;background:#d8e4ed}
.hs-aircon .s-flow .fstep__body h3{font-size:17px;line-height:28px;font-weight:900;
  color:var(--navy);letter-spacing:-.01em;margin:0 0 7px}
.hs-aircon .s-flow .fstep__body p{margin:0;font-size:15px;line-height:26px;color:#2c3a46}
.hs-aircon .s-flow .fsteps__note{max-width:1060px;margin:24px auto 0;padding-top:18px;
  border-top:1px solid #d8e4ed;font-size:14px;line-height:24px;color:#4a5b6a;
  display:flex;gap:9px;align-items:flex-start}
.hs-aircon .s-flow .fsteps__note svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px;
  fill:none;stroke:var(--navy);stroke-width:1.7}
.hs-aircon .s-flow .fsteps__note b{color:#14232e}

/* 横4列。内寸が常に1060px（÷4＝265pxの整数列）になる幅から始める。
   .sec の左右padding 20px を差し引いて 1060px を確保できるのは1100px以上。
   これより狭い幅で4列にすると列幅が小数になり、枠線と尖りが別々に滲む。
   2×2の折返しは採らない。2枚目の尖りが行末で行き場を失い、矢印が嘘をつく。 */
@media (min-width:1100px){
  .hs-aircon .s-flow .hd h2{line-height:44px}
  .hs-aircon .s-flow .fsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fgap)}
  .hs-aircon .s-flow .fstep{padding-left:0;margin-bottom:0;display:flex;flex-direction:column}
  .hs-aircon .s-flow .fstep__band{position:relative;left:auto;top:auto;bottom:auto;
    width:auto;height:96px;margin:0 calc(var(--fover) * -1) 0 0;
    clip-path:polygon(0 0, calc(100% - var(--fnotch)) 0, 100% 50%,
                      calc(100% - var(--fnotch)) 100%, 0 100%, var(--fnotch) 50%)}
  .hs-aircon .s-flow .fstep:first-child .fstep__band{
    clip-path:polygon(0 0, calc(100% - var(--fnotch)) 0, 100% 50%,
                      calc(100% - var(--fnotch)) 100%, 0 100%)}
  .hs-aircon .s-flow .fstep:last-child .fstep__band{margin-right:0;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--fnotch) 50%)}
  .hs-aircon .s-flow .fstep__n,
  .hs-aircon .s-flow .fstep:first-child .fstep__n{position:absolute;left:30px;right:auto;
    top:50%;transform:translateY(-50%);font-size:64px;text-align:left}
  .hs-aircon .s-flow .fstep:first-child .fstep__n{left:22px}
  /* 横並びでも同じ規則。仕切りは .fstep の箱から縦線として生やす。
     帯の高さ96pxのぶん下げて、本文の範囲だけに引く */
  .hs-aircon .s-flow .fstep__body{border:0;border-bottom:1px solid #d8e4ed;
    padding:18px 18px 22px;min-height:0;flex:1}
  .hs-aircon .s-flow .fstep:first-child .fstep__body{border-top:0;
    border-left:1px solid #d8e4ed}
  .hs-aircon .s-flow .fstep:last-child .fstep__body{border-right:1px solid #d8e4ed}
  .hs-aircon .s-flow .fstep:not(:last-child)::after{left:auto;right:0;
    top:96px;bottom:0;width:1px;height:auto}
  .hs-aircon .s-flow .fstep__body h3{font-size:17px;line-height:28px;text-align:center;
    margin:0 0 8px}
  .hs-aircon .s-flow .fstep__body p{font-size:14px;line-height:25px}
}

/* ============================================================
   2026-08-16 追補
   ============================================================ */

/* --- 対応工事・選ばれる理由を「1枠1枚」へ ---------------------
   旧構成は1工事2枚（作業中＋完成）、理由02・05は3分割の帯だった。
   写真は1工事1枚・1理由1枚で制作されているため枠を作り直す。 */
.hs-aircon .s-svc .shots{grid-template-columns:1fr;gap:0}
.hs-aircon .s-reason .ph{min-height:0;aspect-ratio:1.85 / 1}
@media (min-width:900px){
  /* PCは奇数カード約644px・偶数カード約476pxの幅に対し高さ260pxで固定する */
  /* PCは写真と本文を横に並べて高さを揃える構造のため、比率を固定すると
     どちらかが余って地の色が見える。ここは高さの下限だけを決め、行に合わせて
     伸びられるようにする。写真は object-fit:cover なので、比率が2.1〜2.5の
     範囲で動いても切り取り量が変わるだけで破綻しない。
     899px以下は縦積みで高さを揃える相手がいないため、1.85で固定してよい。 */
  .hs-aircon .s-reason .ph{aspect-ratio:auto;min-height:340px}
}

/* --- 対応メーカー：ロゴ間の線を消す -----------------------------
   格子の背景色が2pxの隙間から見えて線になっていた。白へ揃えて消す。
   隙間自体は残すのでロゴ同士は接触しない。 */
.hs-aircon .s-makers .maker-grid{background:#fff}

/* --- 流れ：写真のお願いをステップ1の中へ ------------------------
   末尾に置くとどのステップの話か分からない。相談時の要点なので01へ入れ、
   淡黄で少しだけ持ち上げる（保証と同じ色。ここだけの例外にしない）。 */
.hs-aircon .s-flow .fstep__body p.fstep__tip{display:grid;grid-template-columns:18px minmax(0,1fr);
  gap:9px;align-items:start;margin:18px 0 0;padding:12px 14px;background:#fff6cc;
  font-size:13px;line-height:22px;color:#3a2a00}
.hs-aircon .s-flow .fstep__tip svg{width:18px;height:18px;margin-top:2px;fill:none;
  stroke:#7a5c00;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hs-aircon .s-flow .fstep__tip b{color:#14232e}

/* --- FAQ：QとAの左端をそろえ、Aを赤系統にする --------------------
   summary と .a で字下げが違い、Aの本文だけ左へ出ていた。
   同じ2列グリッドにして、印の幅と間隔を共通の変数で持つ。 */
.hs-aircon .s-faq{--faq-mark:30px;--faq-gap:12px}
.hs-aircon .s-faq summary{display:grid;
  grid-template-columns:var(--faq-mark) minmax(0,1fr) 24px;
  gap:var(--faq-gap);align-items:start}
.hs-aircon .s-faq .a{display:grid;
  grid-template-columns:var(--faq-mark) minmax(0,1fr);
  gap:var(--faq-gap);align-items:start}
.hs-aircon .s-faq .qm,
.hs-aircon .s-faq .am{width:var(--faq-mark);height:var(--faq-mark);display:grid;
  place-items:center;font-family:"Roboto Condensed",sans-serif;font-size:17px;
  font-weight:700;line-height:1;color:#fff}
.hs-aircon .s-faq .qm{background:#123a5e}
.hs-aircon .s-faq .am{background:#b3261e}

/* --- スライダー：操作感の不具合を直す ---------------------------
   1. is-dragging をJSが付け外ししていたのにCSS側の定義がなく、指で送る間も
      320msのトランジションが効いて追従しなかった。ドラッグ中は必ず切る。
   2. ドラッグ中に本文が選択状態になっていた。
   3. ドットが12pxしかなく、指で狙えなかった。当たり判定を44pxへ広げる
      （見た目の丸は12pxのまま）。
   4. 表示していないスライドの中のリンクがキーボードで拾えていた。 */
.hs-aircon .is-slider-ready.is-dragging .track,
.hs-aircon .is-slider-ready.is-dragging .tr{transition:none}
.hs-aircon .is-slider-ready{-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.hs-aircon .is-slider-ready .track,
.hs-aircon .is-slider-ready .tr{backface-visibility:hidden}
@media (max-width: 899px) {
  /* 当たり判定を44px相当まで広げる。疑似要素を重ねる方式だと隣同士の判定が
     重なって狙った点を押せなくなるため、ボタン自体を敷き詰める。
     見た目の丸は中央に12pxで描く。 */
  .hs-aircon .hs-slider__dots{gap:0}
  .hs-aircon .hs-slider__dot{position:relative;width:30px;height:44px;
    background:transparent;transform:none}
  .hs-aircon .hs-slider__dot::before{content:"";position:absolute;left:50%;top:50%;
    width:12px;height:12px;border-radius:50%;background:#9fb8cb;
    transform:translate(-50%,-50%)}
  .hs-aircon .hs-slider__dot[aria-current="true"]{background:transparent;transform:none}
  .hs-aircon .hs-slider__dot[aria-current="true"]::before{background:#ffdd00;
    width:14px;height:14px}
}

/* FAQ：質問と回答の字下げをそろえる。
   質問側の左右paddingは 899px以下が --s3、900px以上が --s4 と切り替わるのに、
   回答側は 20px / 32px の固定値だったため縦がそろっていなかった。
   同じ変数へ寄せて追従させる。 */
.hs-aircon .s-faq .a{padding-left:var(--s3);padding-right:var(--s3)}
@media (min-width:900px){
  .hs-aircon .s-faq .a{padding-left:var(--s4);padding-right:var(--s4)}
}

/* ===== FVの写真の置き方を作り直す（2026-08-16） =====
   直していた不具合:
   1. .hero__photo が display:grid + align-content:start のため行が内容高になり、
      picture / img の height:100% が解決できていなかった。結果、写真の高さが
      「幅 ÷ 元画像の比率」で決まり、
        ・広いウィンドウ … heroより縦に長くなり下が切れる（1600pxで211px）
        ・狭いウィンドウ … heroより縦に短くなり下に隙間ができる（900pxで182px）
      という両方の症状が出ていた。899px以下はこの先頭詰めが「写真を上に置いて
      下でフェードさせる」意図した挙動なので、PC側だけ直す。
   2. object-fit:cover は箱の幅にも追随するため、ウィンドウを広げるほど写真が
      拡大し続けていた（1000pxで56% → 1600pxで96%）。
      写真の大きさを「heroの高さ」だけで決め、右端に固定する。
      こうすると横幅をいくら広げても人物の大きさは変わらない。
      写真より左に残る面はコピーが載る領域で、既存の白いグラデーションが掛かる。 */
@media (min-width:900px){
  .hs-aircon .s-fv .hero__photo{
    display:block;
    left:auto; right:0; top:0; bottom:0;
    width:auto; height:100%;
    aspect-ratio:1672 / 941;
  }
  .hs-aircon .s-fv .hero__photo picture,
  .hs-aircon .s-fv .hero__photo img{display:block;width:100%;height:100%}
  .hs-aircon .s-fv .hero__photo img{object-fit:cover;object-position:center center}
}

/* ===== スライダーの現在位置の見え方（2026-08-16） =====
   当たり判定を広げるためにボタン自体を30×44pxにしたため、区画別の
   「現在位置は青」という指定がボタン全体を塗り、青い楕円として出ていた。
   色は必ず中の丸（::before）へ当てる。
   併せて、現在位置の黄 #ffdd00 をやめる。施工例は淡青、作業工程は白の帯で、
   どちらの地でも黄色は沈んで見分けがつかなかった。 */
.hs-aircon .hs-slider__dot[aria-current="true"]{background:transparent}
.hs-aircon .hs-slider__dot::before{background:#9fb8cb}
.hs-aircon .hs-slider__dot[aria-current="true"]::before{background:#0b63c4}

/* ===== 対応工事の写真（2026-08-16 実装） =====
   承認済み素材（final-photos の approved 4件）を組み込んだ。
   枠はPC 644×340、SP 358×196。元画像1672×904とほぼ同じ比率なので切り取りは僅か。
   生成画像であり実在の作業員・現場ではないため、区画の末尾に必ず断りを置く。 */
.hs-aircon .s-svc .ph--photo{display:block;overflow:hidden;background:#e3ebf3;position:relative}
.hs-aircon .s-svc .ph--photo picture,
.hs-aircon .s-svc .ph--photo img{display:block;width:100%;height:100%;object-fit:cover}
.hs-aircon .s-svc .ph--photo figcaption{position:absolute;left:0;bottom:0;
  padding:5px 12px 6px;background:rgba(14,46,75,.82);color:#fff;
  font-size:13px;line-height:20px;font-weight:700;letter-spacing:-.01em}
.hs-aircon .s-svc .shots__disclosure{margin-top:14px;font-size:13px;line-height:22px;
  color:#4a5b6a;text-align:center}
@media (min-width:900px){
  .hs-aircon .s-svc .ph--photo figcaption{font-size:14px;padding:6px 14px 7px}
  .hs-aircon .s-svc .shots__disclosure{margin-top:20px;font-size:14px}
}

/* ===== 流れ：アイコンを見出しの横へ、要点にマーカー（2026-08-16） =====
   帯の中はゴースト数字だけにし、アイコンは見出しの隣へ置く。
   アイコンが説明する内容の真横に来るので結び付きが分かりやすい。
   色は帯と同じ4色を使い、どの段の話か色でも追えるようにする。 */
.hs-aircon .s-flow .fstep__body h3{display:flex;align-items:center;gap:9px;
  text-align:left}
.hs-aircon .s-flow .fstep__ic{position:static;left:auto;right:auto;top:auto;
  transform:none;width:22px;height:22px;flex:0 0 22px;
  fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hs-aircon .s-flow .fstep:nth-child(1) .fstep__ic{stroke:var(--fs1)}
.hs-aircon .s-flow .fstep:nth-child(2) .fstep__ic{stroke:var(--fs2)}
.hs-aircon .s-flow .fstep:nth-child(3) .fstep__ic{stroke:var(--fs3)}
.hs-aircon .s-flow .fstep:nth-child(4) .fstep__ic{stroke:var(--fs4)}
/* 帯に残るのは数字だけ。縦横とも中央へ置く */
.hs-aircon .s-flow .fstep__n,
.hs-aircon .s-flow .fstep:first-child .fstep__n{left:0;right:0;top:50%;
  transform:translateY(-50%);text-align:center}

/* 要点のマーカー。線を文字の下に敷くだけにして、面で塗らない。
   面で塗ると帯の色数と競合し、どこが重要か分からなくなる。 */
.hs-aircon .s-flow .fstep__mark{font-style:normal;font-weight:700;color:#14232e;
  background:linear-gradient(transparent 64%, #ffe28f 64%)}

@media (min-width:900px){
  .hs-aircon .s-flow .fstep__body p.fstep__tip{margin-top:22px;padding:13px 15px}
  .hs-aircon .s-flow .fstep__body h3{justify-content:center}
  .hs-aircon .s-flow .fstep__ic{width:24px;height:24px;flex:0 0 24px}
  .hs-aircon .s-flow .fstep__n,
  .hs-aircon .s-flow .fstep:first-child .fstep__n{left:0;right:0;text-align:center}
}

/* ===== 施工例を2件構成へ（2026-08-16） =====
   3件の仮データを、流山市の2階建てアパート2件へ差し替えた。
   PCの3列固定のままだと2枚が左に寄って右が空くため、枚数に追従させる。
   スライダー（899px以下）は2枚でもそのまま動く。 */
@media (min-width:900px){
  .hs-aircon .s-case .track,
  .hs-aircon .s-case .slide.is-slider-ready .track{
    grid-template-columns:repeat(auto-fit,minmax(0,1fr));
    max-width:860px;margin-left:auto;margin-right:auto}
}

/* 施工例の工事内容。室外機の置き場所など費用に効く条件を、
   見出しや注記に埋めず独立して読めるようにする（2026-08-16） */
.hs-aircon .s-case .spec{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.hs-aircon .s-case .spec li{position:relative;padding-left:17px;font-size:14px;
  line-height:1.7;color:#2c3a46}
.hs-aircon .s-case .spec li::before{content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;background:var(--deep)}
.hs-aircon .s-case .card:nth-child(2) .spec li::before{background:#0578b0}
@media (min-width:900px){
  .hs-aircon .s-case .spec{margin-top:14px;gap:6px}
}

/* ============================================================
   写真枠の比率を固定する（2026-08-17）

   これまで写真枠は高さをpxで固定し、幅だけが流動していた。そのため幅が
   変わるたびに比率が動き、768px前後で極端な横長になっていた。
     チェックポイント 1.70 →(768px) 5.42
     施工例           2.05 →(768px) 3.57
     作業工程         2.45 →(768px) 3.95
   5.42:1の枠にどんな構図を入れても上下が消える。写真を作る前にここを
   決めないと、撮り直しになる。

   比率はCodexが用意済みの切り出し寸法に合わせる。
     チェックポイント … PC 1024×600(1.71) / SP・タブレット 1600×640(2.5)
     選ばれる理由     … PC 644×260(2.48) / 899px以下 1.85（実装済み）
   施工例と作業工程は新規に決める。壁掛けの室内機は縦の情報が要るため
   1.6前後を採る。作業工程の大枠だけは横長のまま残す。
   ============================================================ */

/* --- チェックポイント --- */
.hs-aircon .s-svc .points .ph2{height:auto;aspect-ratio:640 / 375}
@media (min-width:900px){
  .hs-aircon .s-svc .points .ph2{height:auto;aspect-ratio:1024 / 600}
}

/* --- 施工例。工事後の枠。工事前の小窓は現状の118×80のまま --- */
.hs-aircon .s-case .ph{height:auto;aspect-ratio:16 / 10}

/* --- 作業工程。行の中では幅が揃うので、比率を決めれば高さも揃う --- */
.hs-aircon .s-process .sl .sh,
.hs-aircon .s-process .sl.is-slider-ready .sh{height:auto;aspect-ratio:16 / 10}
@media (min-width:900px){
  .hs-aircon .s-process .sl .sh,
  .hs-aircon .s-process .sl.is-slider-ready .sh{height:auto;aspect-ratio:3 / 2}
  /* 大枠(.one)はスライダーの外にあるため .sl 配下の指定では届かない。直接当てる */
}

/* --- 作業工程の大枠。写真1枚だけの工程で全幅になるもの。
       .sl（スライダー）の外にあるので、区画直下で指定する。

       PCは12:5だったが、2026-08-22に2:1へ改めた。工程が11枚へ減って
       06・07が1枚枠へ入ったとき、この2枚は素材が3:2の寄りで、12:5では
       高さの37.5％が落ちて首から上しか残らなかった。切り取り位置を
       どこへ置いても胴が入らない。2:1なら75％残り、頭・肩・腕・作業点が
       同時に入る。16:9の01・02・08も残りが74％から89％へ増える。
       SPは元から2:1なので、これでPCとSPが同じ比率になる。 --- */
.hs-aircon .s-process .one{height:auto;aspect-ratio:2 / 1}

/* ============================================================
   承認済み写真の当て込み（2026-08-22）

   PLACEMENT-MAP.csv の approved 25件のうち、対応工事4件は2026-08-16に
   実装済み。残るチェックポイント4件、選ばれる理由5件、作業工程11件、
   保証書1件をここで枠へ入れる。

   枠の比率は2026-08-17に決めた値をそのまま使い、画像側を
   build_lp_photos.py で同じ比率に切ってから書き出している。CSS側で
   object-fit に頼って大きく切らないので、切り取り位置が枠幅で動かない。
   ============================================================ */

/* --- 共通。生成画像であることの断り。s-svc の shots__disclosure と同じ文 --- */
.hs-aircon .photo-note{margin:14px 0 0;font-size:13px;line-height:22px;
  color:#4a5b6a;text-align:center}
@media (min-width:900px){
  .hs-aircon .photo-note{margin-top:20px;font-size:14px}
}

/* --- チェックポイント。番号の札は写真の上へ残す --- */
.hs-aircon .s-svc .points .ph2--photo{display:block;overflow:hidden;background:#e3ebf3}
.hs-aircon .s-svc .points .ph2--photo picture,
.hs-aircon .s-svc .points .ph2--photo img{display:block;width:100%;height:100%;
  object-fit:cover}

/* --- 選ばれる理由 --- */
.hs-aircon .s-reason .ph--photo{display:block;overflow:hidden;background:#e3ebf3}
.hs-aircon .s-reason .ph--photo picture,
.hs-aircon .s-reason .ph--photo img{display:block;width:100%;height:100%;
  object-fit:cover}

/* --- 作業工程。ラベルは s-svc の figcaption と同じ見え方に揃える --- */
.hs-aircon .s-process .sh--photo{display:block;overflow:hidden;background:var(--shot)}
.hs-aircon .s-process .sh--photo picture,
.hs-aircon .s-process .sh--photo img{display:block;width:100%;height:100%;
  object-fit:cover}
/* プレースホルダ時代の札は `.sh > span` に top:0 が入っている。同じ span を
   使うと top と bottom の両方が効いて、枠の高さいっぱいの縦帯になる。
   ここで top:auto へ戻し、要素セレクタを含めて優先度も上に置く。 */
.hs-aircon .s-process .sh--photo > .sh__cap{position:absolute;left:0;top:auto;
  bottom:0;padding:5px 12px 6px;background:rgba(14,46,75,.82);color:#fff;
  font-size:13px;line-height:20px;font-weight:700;letter-spacing:-.01em}
@media (min-width:900px){
  .hs-aircon .s-process .sh--photo > .sh__cap{font-size:14px;padding:6px 14px 7px}
}

/* 写真1枚だけの工程は、枚数が減った06・07・08も、もとから1枚だった
   01・02と同じ扱いにする。作業工程のPC枠は枚数で横幅が変わる設計で、
   1枚なら全幅の帯（12:5）、2枚なら半分ずつ（3:2）になる。11枚を同じ
   大きさへ揃えるのではなく、枚数に応じた元の枠へ合わせるのが正しい。
   比率は上の .one（PC 12:5 / SP 2:1）をそのまま使う。
   帯は縦を大きく捨てるので、06・07・08は切り取り位置を上端側へ寄せて
   人物の頭・室内機・作業点を残す。位置は build_lp_photos.py で持つ。 */

/* --- 選ばれる理由・対応工事：PCで写真の左右が切れるのを止める（2026-08-22）
   写真枠は高さの下限340pxを持ち、幅だけが列に追従していた。そのため
   PC幅900〜1150pxで枠が縦長に振れ、素材1.85に対して左右を切っていた。
       900px  枠1.43（左右22.8％を切る）
      1024px  枠1.64（同11.4％）
      1160px～ 枠1.85（0％）
   下限をやめて枠自身に比率を持たせ、行の高さが写真に追従するようにする。
   本文がそれより高い行だけ、はみ出した分を cover が引き受ける（実測3％以内）。 */
@media (min-width:900px){
  /* 比率を持たせるだけでは足りない。写真は行の高さいっぱいへ縦に伸びる
     グリッド項目なので、高さが確定した状態で比率が効くと、幅がその
     高さ×1.85まで膨らみ、本文の列へ重なった（900pxで485pxの列に対し
     写真が624pxになった）。縦に伸ばさず、幅だけを列に合わせる。
     本文のほうが高い行では、写真の下に白いカード地が残る。 */
  .hs-aircon .s-reason .ph--photo{min-height:0;align-self:center;max-width:100%;
    height:auto;aspect-ratio:1.85 / 1}
  .hs-aircon .s-svc .story{min-height:0}
  .hs-aircon .s-svc .story .shots{align-self:center}
  .hs-aircon .s-svc .story .ph--photo{height:auto;max-width:100%;aspect-ratio:1.85 / 1}
  /* fr は既定で min-content を下限に持つ。写真に比率を持たせると、その
     下限が本文の長さで動き、5枚の写真幅が526〜624pxとばらついた。
     minmax(0,…) で下限を外し、どの行も同じ比率で分ける。 */
  .hs-aircon .s-reason .rc{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hs-aircon .s-reason .rc:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .hs-aircon .s-svc .story{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hs-aircon .s-svc .story:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* --- 工事保証書。紙の傾きと影は枠側に残し、中身だけ写真へ差し替える --- */
.hs-aircon .s-warranty .doc .paper--photo{overflow:hidden}
.hs-aircon .s-warranty .doc .paper--photo picture,
.hs-aircon .s-warranty .doc .paper--photo img{display:block;width:100%;height:auto}

/* --- 対応工事：タブレット幅の潰れを直す（2026-08-22）-------------
   899px以下は .shots の高さを196pxで固定していたため、幅だけが伸びる
   タブレット（768〜899px）で 852×196＝4.35:1 まで潰れていた。
   2026-08-17に他の3区画で直した「高さpx固定をやめて比率で持つ」を、
   ここにも当てる。390pxでの見え方（358×196＝1.83）は変えない。 */
@media (max-width:899px){
  .hs-aircon .s-svc .shots{height:auto}
  .hs-aircon .s-svc .ph--photo{height:auto;aspect-ratio:1.85 / 1}
}

/* --- 施工例1の実写真（2026-08-22）------------------------------
   ここだけ生成画像ではなく実際の工事写真である。工事後は枠いっぱい、
   工事前は右下の118×80の小窓へ入れる。「工事後」「工事前」の札は
   絶対配置なので、写真の上へそのまま乗る。
   **公開許諾と案件情報・金額の確定が済むまで公開しない。** */
.hs-aircon .s-case .ph--photo{display:block;overflow:hidden;background:#e3ebf3}
.hs-aircon .s-case .ph--photo > img{display:block;width:100%;height:100%;object-fit:cover}
.hs-aircon .s-case .before:has(img){display:block;overflow:hidden}
.hs-aircon .s-case .before > img{display:block;width:100%;height:100%;object-fit:cover}

/* --- 対応エリア地図の出典（2026-08-23）------------------------------
   国土数値情報の利用規約で、出典と加工した事実の明記が条件になっている
   （docs/research/source-register.md）。消せないが、本文と同じ大きさで
   左に置くと読ませる文章に見える。小さく右へ寄せて注記として扱う。 */
.hs-aircon .s-area .area-map-source {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #8b9aa6;
  text-align: right;
}

/* ===== 2026-08-25 対応工事04と保証注記の表示調整 =========================
   04だけ用語説明が1段多く、PCで本文370pxに対して写真348pxが中央配置に
   なっていた。04の写真面だけ行高まで伸ばし、他3件と同じ接合にする。
   保証注記は .s-warranty p のmarginリセットに負けていたため、専用指定で
   グリッドとの間隔を明示する。 */
@media (min-width: 900px) {
  .hs-aircon .s-svc .story:nth-child(4) .shots {
    align-self: stretch;
  }

  .hs-aircon .s-svc .story:nth-child(4) .ph--photo {
    height: 100%;
    aspect-ratio: auto;
  }
}

.hs-aircon .s-warranty .photo-note {
  margin-top: 24px;
}

@media (min-width: 900px) {
  .hs-aircon .s-warranty .photo-note {
    margin-top: 32px;
  }
}

/* --- 工事保証書の傾きをやめる（2026-08-23）--------------------------
   .doc .paper に rotate(-1.6deg) が掛かっていた。プレースホルダの
   「紙を置いた風」の演出だったが、実物の写真を入れた今は、
   写真そのものが傾いて見えるだけなので外す。影と角丸は残す。 */
.hs-aircon .s-warranty .doc .paper {
  transform: none;
}

/* ヘッダー固定CTAの文言。既定（PC）は従来どおり。SPだけ短い方へ差し替える */
.hs-aircon .s-fv .hd__cta-short { display: none; }

/* ===== 2026-08-24 スマホ表示の詰め直し ==========================================
   ユーザー指示。ベースレイアウト（縦帯＋本文の構成）は変えない。帯を細くして
   写真とテキストの幅を稼ぐ。既存のSP規則を上書きするため、意図的に末尾へ置く。
   ============================================================================= */
@media (max-width: 899px) {

  /* --- 対応エリア図の説明帯はSPでは出さない ---
     同じ内容が図の alt と、直前の本文「掲載地域以外でも…」で伝わっている。
     縦70pxを丸ごと削れる。 */
  .hs-aircon .s-area .area-map-frame figcaption { display: none; }

  /* --- 作業工程：番号帯を 44px → 32px ---
     構成は変えない。写真とテキストの列が12px広がる。 */
  .hs-aircon .s-process .fl > li { grid-template-columns: 32px minmax(0, 1fr); }
  .hs-aircon .s-process .fl > li > .n { font-size: 16px; padding-top: 10px; }

  /* --- 見積り・依頼の流れ：番号帯を 78px → 52px ---
     .fstep は padding-left で帯の場所を空けているので、帯の幅と一緒に詰める。 */
  .hs-aircon .s-flow .fstep { padding-left: 52px; }
  .hs-aircon .s-flow .fstep__band { width: 52px; }
  .hs-aircon .s-flow .fstep__body { padding-left: 14px; }
  /* 工程どうしの区切り線は left:78px が直書きで、帯を細くした分だけ右へ26pxずれていた。
     帯の右端（52px）から引き直す。 */
  .hs-aircon .s-flow .fstep:not(:last-child)::after { left: 52px; }

  /* --- CTAの安心材料を3点・3列へ ---
     アイコンを上、文字を下の中央そろえにする。横に3つ並べるとアイコンを左に置く余地が
     無いため。1列で左に置くと1件あたり53px要り、合計160pxになる（実測）。 */
  .hs-aircon .s-cta .v3 .pr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; }
  .hs-aircon .s-cta .v3 .pr li { grid-template-columns: minmax(0, 1fr); justify-items: center;
    text-align: center; gap: 6px; padding: 10px 6px 11px; min-width: 0; }
  .hs-aircon .s-cta .v3 .pr .ic { width: 32px; height: 32px; }
  .hs-aircon .s-cta .v3 .pr .ic svg { width: 18px; height: 18px; }
  .hs-aircon .s-cta .v3 .pr strong { min-width: 0; font-size: 12px; line-height: 1.45; }
  .hs-aircon .s-cta .v3 .pr strong span { font-size: 11.5px; letter-spacing: -.03em; }
  .hs-aircon .s-cta .v3 .pr strong b { font-size: 13px; letter-spacing: -.04em; white-space: nowrap; }

  /* --- ヘッダー固定CTA：矢印を外して幅を詰める --- */
  .hs-aircon .s-fv .hd__cta .ar { display: none; }
  .hs-aircon .s-fv .hd__cta { gap: 0; padding: 0 14px; }

  /* ヘッダー固定CTA：SPは短い文言に差し替えて幅を詰める（PCは従来のまま） */
  .hs-aircon .s-fv .hd__cta-long { display: none; }
  .hs-aircon .s-fv .hd__cta-short { display: inline; }
}


/* ===== 2026-08-24 CTAの安心材料が3点になったことによるPC側の調整 =====
   基準の指定が repeat(4,...) で、3件だと右端に空き枠が1つできるため。 */
@media (min-width: 900px) {
  .hs-aircon .s-cta .v3 .pr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ===== 2026-08-24 料金ブロックを「ベース＋オプション」へ =====
   金額の根拠は docs/research/aircon-option-price-draft-2026-08-24.md
   （他社中央値と、流山市の法人・福田電子の実価格から算出した仮金額）。
   追加工事は details で畳む。他社も全社が畳んでいる
   （エアコンサル2タブ／エアデポ7タブ／ライフテックスは独立ページ）。 */
.hs-aircon .s-price .pc .price .est{font-size:22px;font-weight:900;color:var(--deep);letter-spacing:-.03em}
.hs-aircon .s-price h3,.hs-aircon .s-price h4{margin:0}
.hs-aircon .s-price .pc:nth-child(4) > .head{background:#0f6fc9}

.hs-aircon .s-price .incl{background:#fff;margin-top:2px;padding:16px 14px 18px}
.hs-aircon .s-price .incl h3{font-size:16px;font-weight:900;color:var(--navy);letter-spacing:-.04em;line-height:1.5}
.hs-aircon .s-price .incl ul{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:7px}
.hs-aircon .s-price .incl li{position:relative;padding-left:22px;font-size:14px;line-height:1.7;color:#2c3a46}
.hs-aircon .s-price .incl li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--c1);border-bottom:2px solid var(--c1);transform:rotate(-45deg)}
.hs-aircon .s-price .incl .note{margin-top:12px;padding-top:11px;border-top:1px solid #d8e4ed;
  font-size:13.5px;line-height:1.8;color:#4a5b6a}

.hs-aircon .s-price .opt{margin-top:20px}
.hs-aircon .s-price .opt > h3{margin-bottom:9px;font-size:17px;font-weight:900;color:var(--navy);letter-spacing:-.04em}
.hs-aircon .s-price .oc{background:#fff;margin-top:2px}
.hs-aircon .s-price .oc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 14px}
.hs-aircon .s-price .oc summary::-webkit-details-marker{display:none}
.hs-aircon .s-price .oc summary h4{flex:1;font-size:15px;font-weight:900;color:var(--navy);letter-spacing:-.04em}
.hs-aircon .s-price .oc .cv{position:relative;flex:0 0 16px;width:16px;height:16px}
.hs-aircon .s-price .oc .cv::after{content:"";position:absolute;left:2px;top:3px;width:9px;height:9px;
  border-right:2px solid var(--c1);border-bottom:2px solid var(--c1);transform:rotate(45deg);
  transition:transform .15s ease, top .15s ease}
.hs-aircon .s-price .oc[open] .cv::after{top:8px;transform:rotate(-135deg)}
.hs-aircon .s-price .oc .ot{padding:0 14px 15px}
.hs-aircon .s-price .oc table{width:100%;border-collapse:collapse}
.hs-aircon .s-price .oc thead,
.hs-aircon .s-price .oc .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hs-aircon .s-price .oc tbody tr{border-top:1px solid #e3ecf3}
.hs-aircon .s-price .oc tbody th{text-align:left;font-weight:400;padding:10px 10px 10px 0;vertical-align:top}
.hs-aircon .s-price .oc tbody th b{display:block;font-size:14px;font-weight:900;color:var(--navy);letter-spacing:-.03em;line-height:1.55}
.hs-aircon .s-price .oc tbody th span{display:block;margin-top:3px;font-size:12.5px;line-height:1.7;color:#4a5b6a}
.hs-aircon .s-price .oc tbody td{width:1%;text-align:right;padding:10px 0 10px 8px;vertical-align:top;white-space:nowrap}
.hs-aircon .s-price .oc tbody td .num{font-style:normal;font-size:19px;color:var(--deep);letter-spacing:-.045em}
.hs-aircon .s-price .oc tbody td u{text-decoration:none;font-size:13px;font-weight:900;color:var(--deep);margin-left:2px}
.hs-aircon .s-price .oc tbody td .est{font-size:13px;margin-left:0}
.hs-aircon .s-price .oc .on{margin-top:12px;padding:10px 12px;background:var(--pale);font-size:12.5px;line-height:1.75;color:#4a5b6a}

@media (min-width: 900px) {
  .hs-aircon .s-price .prices{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hs-aircon .s-price .incl,
  .hs-aircon .s-price .opt{max-width:1120px;margin-left:auto;margin-right:auto}
  .hs-aircon .s-price .incl{padding:24px 26px 26px}
  .hs-aircon .s-price .incl h3{font-size:19px}
  .hs-aircon .s-price .incl ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px}
  .hs-aircon .s-price .opt > h3{font-size:20px;margin-bottom:11px}
  .hs-aircon .s-price .oc summary{padding:16px 26px}
  .hs-aircon .s-price .oc summary h4{font-size:18px}
  .hs-aircon .s-price .oc .ot{padding:0 26px 22px}
  .hs-aircon .s-price .oc tbody th b{font-size:15px}
  .hs-aircon .s-price .oc tbody th span{font-size:13.5px}
  .hs-aircon .s-price .oc tbody td .num{font-size:22px}
}

/* ページ最上部のショルダー帯。stickyヘッダーの外（.hs-aircon直下）に置き、
   スクロールで流す。ネストの内側へ入れるとセレクタが .s-fv 配下へ寄って
   効かなくなるため、必ずファイル末尾のトップレベルに置くこと。 */
.hs-aircon .topbar{margin:0;background:#123a5e;color:#fff;text-align:center;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.01em;padding:8px 12px}
/* 折り返すとしても区切りの位置だけにする。語の途中で1文字だけ落ちるのを防ぐ。 */
.hs-aircon .topbar .seg{white-space:nowrap}
.hs-aircon .topbar .sep{opacity:.55;margin:0 .35em}
@media (min-width:900px){
  .hs-aircon .topbar{font-size:13px;padding:9px 20px;line-height:1.4}
}

/* ===== ヘッダーの屋号をワードマークへ差し替え（2026-09-02） =====
   正本は work/home-aircon-lp/logo-20260901/approved/。比率は 900:120＝7.5:1。
   ガイドラインの推奨表示幅はPC241px以上・SP150〜240pxで、150px未満では使わない。
   SVG内に max-width:240px の切替があり、240px以下では「エアコン」が単色青になる。
   これは img で読み込むと描画幅に対して評価されるため、幅指定だけで意図どおり効く。
   旧 .bd strong への指定は文字が無くなったため効かないが、フッターの .bd と
   セレクタを共有していないので残さず消してよい。 */
.hs-aircon .s-fv .bd{display:block;line-height:0}
/* ロゴの高さは22px（PC33px）しかなく、そのままだとリンクのタップ領域が浅い。
   縦paddingで44px以上を確保する。.hd__in は flex + align-items:center なので
   ヘッダー高（SP58px／PC80px）は変わらない。横幅にも影響しない。 */
.hs-aircon .s-fv .bd{padding-block:11px}
.hs-aircon .s-fv .bd img{display:block;width:168px;height:auto}
@media (min-width:900px){
  .hs-aircon .s-fv .bd img{width:248px}
}