/* ============================================================================
   PureNext LP v2 — レスポンシブ追加分（2026-09-02）
   このファイルの中身は「すべて」 @media (max-width:1023.98px) の内側にある。
   1024px 以上には1行も効かない ＝ PC の描画は変更前と画素単位で同一。
     ・768〜1023px … CSS では何もしない。main.js が .page に zoom を掛けて縮小表示する
     ・767px 以下  … 本物の1カラム（下の入れ子メディアクエリ）
   style.css は rev22-r3 の §A（PCの直し4件: ストリップ2の引き出し線・ストリップ3の説明文と
   注記ピル・チャイルドロックの文言・FAQ3問）でだけ触っている。
   それ以外の PC の描画は変更前と画素単位で同一（機械比較で確認済み: reports/r3/pc_diff.json）。
   ============================================================================ */
@media (max-width:1023.98px){

  /* iOS の自動文字拡大を止める（横向きにしたとき本文だけ勝手に太る現象の防止） */
  html{-webkit-text-size-adjust:100%}

  /* ==========================================================================
     ここから 767px 以下 ＝ スマートフォン用の1カラム
     rev22-r3（2026-09-02 統括の指示書 §B/§C）で全面的に組み直した。
     使ってよい値はこの5つだけ。ここに無い値を新しく作らない。
       ①左右の余白 20px（内容幅 335@375。全面写真＝ヒーロー／リビング写真／フッターだけ 0）
       ②カード 角丸16px・内側の余白20px・カードの中の写真は角丸12px
       ③縦の余白は3つ 章の境目56 / 見出し→中身24 / 要素同士12
       ④文字は3段階 章見出し24・カード見出し20（入らなければ18）・本文14（注記12）
       ⑤写真の高さは3種類 L260 / M190 / S140
     ========================================================================== */
  /* rev22-r4（2026-09-03）: この入れ子の上限を 767.98 → 1023.98 に広げた。
     Galaxy Z Fold 7（開いた画面 720px・横向き 800px）が「スマホ用の1カラムを2倍に
     引き伸ばした画」になっていたため、600〜1023.98px を『タブレット層』として
     この1カラム構造の上に作り直す（物差しと写真の切り方だけ差し替える）。
     375/390 の描画は1px も変わらない（この行より下は元のまま） */
  @media (max-width:1023.98px){

  .page{width:100%;max-width:1024px;
    /* rev22-r3: SP の物差し。生の px を各ルールに直書きせず、必ずこの変数を経由させる */
    --pad:20px;          /* 左右の余白 */
    --ch:96px;           /* 章の境目。rev22-r7: 発注主指示「余白を感じる上質なページに」で 56→96 */
    --hd:32px;           /* 見出し → 中身。rev22-r7: 24→32 */
    --it:12px;           /* 要素同士・カード同士 */
    --r-card:16px;       /* カードの角丸 */
    --r-photo:12px;      /* カードの中の写真の角丸 */
    --ph-l:260px;        /* 写真 L（ブロックの主役） */
    --ph-m:190px;        /* 写真 M（カードの中） */
    --ph-s:140px;        /* 写真 S（2枚横並び） */
    --t-sec:24px;        /* 章見出し */
    --t-card:18px;       /* カード見出し。rev22-r7: 発注主指示で「選べる5つの温度」(18px) と同寸に */
    --t-body:14px;       /* 本文 */
    --t-note:12px;       /* 注記 */
    --t-num:28px;        /* 番号 */
  }

  /* PC で行幅に合わせて入れてある手動改行を、本文系だけ無効化して自然に流す */
  br.pc-br{display:none}
  /* rev22-r3: 自然に流すと「自動取／水」「繁／殖」「温／水タンク」のように語の途中で
     行が変わる。日本語の文節で折る指定を本文系にまとめて掛ける（Chrome 119+/Safari 17+。
     未対応ブラウザでは今までどおりの折り返しに戻るだけで、崩れない） */
  .memory__body,.uvcard__body,.feat .feat__body,.tanks__text,.tanks__note,
  .hygiene__facttext,.hygiene__solvebody,.strips__card--3 .strips__label,
  .extras__body,.app__lead,.faq__a,.detail__table td,.notice__body,.voice__quote p{
    word-break:auto-phrase;
  }
  /* 見出しの語の途中改行を避ける */
  .nobr{white-space:nowrap}

  /* --- 幅1024px固定・高さ固定をまとめて解除（絶対配置を流し込みへ戻す土台） --- */
  .hero,.lead,.intro,.because,.kodawari,.feat,.feat01,.feat02,.feat03,.voice,.price,
  .pfos,.pfos__band,.filter,.hygiene,.tanks,.spec,.spec__band,.strips,.extras,
  .support,.app,.detail,.notice,.faq,.footer,.footer__band{
    width:auto;height:auto;
  }

  /* ============================ S01 hero ============================ */
  /* rev22-r3: 発注主指示「写真の中に文字が入っていない。文字だけ外にはみ出ている。ダメ」。
     PC と同じく、文字を写真の上に重ねる形へ組み直した。
     写真の高さ 460px の根拠（元画像 1800×874・実測）:
       家族3人の顔 = 母 x870〜1000 / 娘 x1150〜1250 / 父 x1455〜1560、本体 x1215〜1403。
       375px 幅で全部入れるには、元画像を横 690px 以上見せる必要がある。
       cover は高さで拡大率が決まるので、見える横幅 = 375 ÷ (高さ÷874)。
         高さ520 → 630px しか見えない（3人入らない）／高さ460 → 712px 見える（入る）。
       ＝ 3人と本体を切らずに置ける最大の高さが 460px。指示の 520px は幾何的に不可能。
     object-position 78.9%: 見せる範囲を元画像 x=858〜1570 に固定した値。
       母の顔まで 12px・父の顔まで 10px の余裕があり、切れるのは左右の髪だけ（母68px・父70px で左右対称）。 */
  /* rev22-r5b §3: 第三者検品「サブコピーが母の顔にかかる」。375px の実測（文字を消して撮り、
     10px 刻みの物差しを引いて読んだ値）:
       母の髪の上端 y=104 ／ 前髪の下の地肌（顔）の上端 y=131 ／ 目 y=143
       サブコピーの箱 y=131.6〜151.6 ＝ ちょうど顔の上端から目までを横切っていた。
     写真は cover の拡大率が高さで決まり、375px では拡大後の高さ＝枠の高さなので
     縦の余りが 0。object-position の縦（50%）を動かしても写真は 1px も動かせない。
     そこで①文字ブロックを 16px 上げ ②写真を少し高くして家族を下げる、の2つで離す。
       ① 上端 28→18 ／ バッジ→見出し 8→6 ／ 見出し→サブ 10→6（合計 −16px）
          ＝ サブの下端 151.6 → 135.6px
       ② 枠 5:4 → 8:7（375px で 300 → 328.1px）。顔の上端は 131 → 143.3px
          ＝ 7.7px 空く。見出し「わたしの味方」の下端も 121.6 → 109.6 で髪より上に出る
     タブレット層（600px 以上）は写真が 450px あり元から離れているので行の高さは元に戻す */
  /* rev22-r8: 発注主指示「もっと引いて本体まで写す。ご飯（下）は切れてよく、上（顔）を出す」。
     文字ブロックを写真の下側（テーブル＝切ってよい領域）に移し、写真は上端基準で下を切る。
     行: 1fr（写真の上側を空ける）→ バッジ → 見出し → サブ → 18px → チップ */
  .hero{position:relative;display:grid;background:#fff;
    grid-template-columns:var(--pad) 1fr var(--pad);
    grid-template-rows:18px auto 6px auto 6px auto 1fr auto}
  .hero__inner{display:contents}
  /* rev22-r5 §1: 発注主指示「家族が寄りすぎ。もっと引いて、本体も写す」。
     高さ460px固定（＝見える横幅 712px）をやめ、枠を 幅:高さ = 5:4 にした。
     375px なら 375×300。cover の拡大率は高さで決まるので、見える横幅 =
     375 ÷ (300÷874) = 1092.7px ＝ これまでの 712px の 1.53 倍まで引いた画になる。
     切り取り位置は 85%（元画像 x=601〜1694 が見える）:
       母 870〜1000（左端から 269px）／娘 1150〜1250／本体 1215〜1403／
       父 1455〜1560（右端まで 134px）＝ 家族3人と本体が余裕を持って全部入る。
     指示書の 100%（右端基準）と 67.9%（x480〜1571）は実際に3枚並べて比べて外した——
       100% は母の左腕が画面の左端で切れ、67.9% は父の顔が右端で半分切れる。
       85% がどちらも切らずに一番引いて見える（左のソファだけは 31px 手前で入らない）。 */
  /* rev22-r5b §3: 枠を 5:4 → 7:6 ＋ 高さの下限 328px に。下限が要るのは、文字ブロックの
     高さが px 固定で幅に付いてこないため——比だけだと 320px で写真が 274px まで縮み、
     顔がまた文字の高さまで上がってくる（比だけの試算で 顔の上端 122.3px < サブの下端 130.4px）。
     下限 328px は 320〜382px の機種に効き、375px はちょうど 328px（整数。以下は 375px の実測）:
       顔（前髪の下の地肌）の上端 131 → 143px ／ 目 143 → 154px ／ 髪の上端 104 → 113px
       ＝ サブの下端 135.6px との差は 顔まで 7.4px・目まで 18.4px（変更前は顔・目の上を通っていた）
     見える横幅は 1092.7 → 998.9px。3人と本体（元画像 x=870〜1560 の 690px）は
     320px でも 852px 見えていて余裕（左 64.6px・右 97.9px）で入る。
     「寄りすぎ」と言われた 712px よりまだ 40% 広い画のまま */
  /* 写真: 高さ 340px 固定（375px で拡大率 .43 → 見える横幅 872px・縦 782px。下 92px＝テーブルが切れる）。
     位置 80%／0% → 元画像 x≈742〜1614（母 870〜1000・娘・本体 1215〜1403・父 〜1560 が入る）、上端から */
  .hero__bg{grid-column:1 / -1;grid-row:1 / 8;position:static;inset:auto;
    width:100%;height:auto;aspect-ratio:7 / 6;min-height:328px;
    object-fit:cover;object-position:85% 50%}
  /* 白のかぶせ。写真が 460→300px（375px幅）に低くなったので、同じ比率で 250→200px に。
     文字の下端 155px の位置でまだ 35% 残り、顔の始まり（写真の下半分）では 0 まで抜けている */
  /* rev22-r6: 発注主指摘「ママの髪とサブコピーが被って読みにくい」。
     かぶせを文字ブロックの下端（約140px）まで .88 以上で保ち、そこから 230px で抜く。
     さらに文字自体に白いにじみ（text-shadow）を付けて、髪の上でも読めるようにする */
  /* rev22-r8: かぶせを下から上へ（文字が写真の下側に移ったため）。グリッドの項目として写真の下端に揃える */
  .hero::before{content:"";position:absolute;left:0;top:0;width:100%;height:230px;z-index:1;
    background:linear-gradient(180deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.90) 140px,
      rgba(255,255,255,.55) 180px,rgba(255,255,255,0) 230px);pointer-events:none}
  .hero__badge,.hero__title,.hero__sub{text-shadow:0 0 6px #fff,0 0 12px #fff,0 0 18px #fff}
  .hero__badge{grid-column:2;grid-row:2;z-index:2;font-size:var(--t-note);letter-spacing:.06em}
  .hero__title{grid-column:2;grid-row:4;z-index:2;margin-top:0;
    font-size:26px;line-height:1.32}
  .hero__sub{grid-column:2;grid-row:6;z-index:2;margin-top:0;
    font-size:var(--t-body);font-weight:800;letter-spacing:.02em}
  /* チップ5枚は写真の中に入れると家族の顔（写真の上から195〜300px）にかぶるため、
     写真の直下（間0）に置く。2段の高さ 192px を写真の中に置くと下端が 460px なので
     y=254〜460 を覆い、母の顔（195〜268）と娘の顔（250〜300）が隠れる＝置けない */
  /* rev22-r6: 発注主指摘「チップの下線が見切れている」。下に 12px の余白を足し、影を切らない */
  .hero{overflow:visible}
  .hero__chips{grid-column:1 / -1;grid-row:8;z-index:2;margin:0;
    padding:14px var(--pad) 12px;gap:8px;flex-wrap:wrap;justify-content:center}
  /* rev22-r8: 発注主指示「チップが大きすぎる。5つ並びに収めるか小さく」。
     420px 以上は5つ横一列（高さ 74px・アイコン 26px・文字 11px）、未満は 3+2 で高さ 80px */
  .chip{flex:0 0 calc((100% - 16px) / 3);min-width:0;width:auto;height:80px;gap:5px;
    padding:0 4px;border-radius:10px}
  .chip img{width:30px;height:30px}
  .chip span{font-size:var(--t-note);line-height:1.25}
  @media (min-width:420px){
    .hero__chips{flex-wrap:nowrap;gap:6px}
    .chip{flex:1 1 0;height:74px;gap:4px;padding:0 2px}
    .chip img{width:26px;height:26px}
    .chip span{font-size:11px;line-height:1.2}
  }

  /* ============================ S02 lead ============================ */
  .lead{padding:var(--ch) 0 var(--hd);gap:14px}
  .lead__title{font-size:var(--t-sec);letter-spacing:.12em;text-indent:.12em}

  /* ============================ S03 intro ============================ */
  /* rev22-r3: 「温度バー／取水量の目盛り／本体写真」の3つを横に並べる（PCと同じ意味合い）。
     本体写真は .intro__figure の兄弟なので、.intro をグリッドにして3列目に置く。
     見出しが 18px なのは「欲しい水量がワンタッチですぐに。」16字が、カード内寸 295px に
     20px では入らない（320px 必要）ため。18px なら 288px で PC と同じ2行に収まる */
  /* rev22-r5 §8: 発注主指摘「温度・取水量の目盛りが左下に行く。左上に」。
     下ぞろえ（align-items:end）だと、本体写真のほうが背が高くなる幅（内寸 202px 超＝
     おおむね 410px 以上）で目盛りが列の下へ押し下げられていた。実測 508px で
     目盛りの上端が写真の上端より 120.8px 下。列の上ぞろえに変え、目盛りは見出しの直下から始める。
     本体写真だけは今までどおり下ぞろえ（.intro__panel の align-self:end）＝375/390 の描画は変わらない */
  .intro{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;align-items:start; /* rev22-r15: 2行目に一言を追加 */
    column-gap:10px; /* 取水量の数字と本体写真がぶつからないための隙間 */
    margin:0 var(--pad) var(--it);padding:32px 0 20px;border-radius:20px}
  .intro::after{display:none} /* PC の下側フェードは SP では不要（写真が下端に無い） */
  .intro__title{grid-area:1 / 1 / 2 / 3;position:relative;padding:0 var(--pad);
    font-size:18px;line-height:1.55}
  .intro__sub{grid-area:2 / 1 / 3 / 3;margin:8px 0 0;padding:0 var(--pad);font-size:var(--t-body);font-weight:700;color:var(--blue);line-height:1.6} /* rev22-r15 */
  .intro__figure{grid-area:3 / 1 / 4 / 2;position:static;left:auto;top:auto;
    display:flex;align-items:flex-end;gap:10px;margin:var(--hd) 0 0 var(--pad);padding:0}
  .temp{width:60px}
  .amount{width:66px}
  .figure-label{font-size:var(--t-note);letter-spacing:.08em}
  /* 温度バー 480 → 210（0.4375倍）。ラベルの縦位置は PC の比率をそのまま使う */
  .temp__body{width:60px;margin-top:8px;height:210px}
  .temp__bar{width:16px;height:210px;border-radius:8px}
  .temp__stops{width:60px}
  .temp__stop{gap:6px}
  .temp__stop i{width:10px;height:10px;margin-left:3px}
  .temp__stop i::after{left:13px;top:4px;width:7px}
  .temp__stop span{font-size:var(--t-note);margin-left:5px}
  .temp__stop--hot{top:6px}
  .temp__stop--sayu{top:53px}
  .temp__stop--w40{top:100px}
  .temp__stop--room{top:148px}
  .temp__stop--cold{top:192px}
  /* 取水量ルーラー 452 → 195 */
  .amount__unit{font-size:var(--t-note);margin-top:4px}
  .amount__ruler{margin-top:10px;height:195px;width:66px;
    background:repeating-linear-gradient(180deg,#9db6d2 0,#9db6d2 1px,transparent 1px,transparent 9.75px);
    background-size:8px 100%;background-repeat:no-repeat}
  .amount__mark::before{width:14px}
  .amount__mark em{left:20px;top:-8px;font-size:var(--t-note)}
  /* 本体写真は3列目。下端でそろえる（元画像 830×1000・contain 相当の等倍） */
  .intro__panel{grid-area:3 / 2 / 4 / 3;position:static;right:auto;bottom:auto;
    align-self:end;justify-self:end;width:100%;height:auto;margin:var(--hd) 0 0 0}

  /* rev22-r5b §1: 第三者検品「本体写真の下端が切れて宙に浮いて見える（508/720/800）」。
     実測すると CSS は写真を1ピクセルも切っていない（375〜800 の全幅で全体が出ている。
     contain / height:auto どちらの層でも同じ）。切れて見えるのは元画像 830×1000 の
     下端そのもの＝台座の途中で終わっている素材で、その断面がカードの下辺より
     21.7px 上（全幅で一定）に浮いていたため。写真が 203.6px（375）のうちは目立たないが、
     420px（720/800）では断面の灰色が 2.06 倍の大きさで見えて「切れて浮いている」になる。
     直し方は PC と同じ「下辺への裁ち落とし」。カードの下パディング（20px）ぶんだけ
     負のマージンで下げ、断面をカードの下辺に接地させる（PC は bottom:-28px で同じ処理）。
     375/390 は今の見え方が基準なので触らない＝460px 以上だけに掛ける */
  @media (min-width:460px){
    .intro__panel{margin-bottom:-20px} /* 20px = .intro の padding-bottom */
  }

  /* ==================== S04 memory / S05 uvcard（同じ様式） ==================== */
  .memory-wrap{padding:0 var(--pad) var(--it)}
  .uvcard-wrap{padding:0 var(--pad) 0}
  .memory,.uvcard{height:auto;flex-direction:column;border-radius:var(--r-card)}
  /* rev22-r5 §2: 発注主指示「アイコンの右がガラガラ」。アイコン（40px）と見出しを同じ行に置き、
     サブ見出し・本文はその下（全幅）に落とす。折り返しの単位を flex-basis で決める */
  .memory__text,.uvcard__text{width:auto;padding:var(--pad) var(--pad) 0;
    display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--it)}
  .memory__iconwrap{width:40px;height:40px;margin-bottom:0;flex:0 0 40px}
  .memory__icon{width:22px;height:22px}
  .uvcard__icon{width:40px;height:40px;margin-bottom:0;flex:0 0 40px}
  /* rev22-r5 §3: 2枚の見出しを同じ大きさ（--t-card）に統一。入らないときは縮めず
     読点「、」の後で2行に折る（HTML 側の .nobr が語を守る） */
  .memory__title,.uvcard__title{flex:1 1 0;min-width:0;
    margin-top:0;font-size:var(--t-card);line-height:1.4}
  .memory__sub,.uvcard__sub,.memory__body,.uvcard__body{flex:0 0 100%}
  /* PC の手動改行は外す。折り返しは HTML の .nobr（読点までを1かたまりにする）に任せる。
     rev22-r5 §3: 以前ここにあった `.uvcard__title{font-size:18px}`（入らないので縮める）は廃止。
     縮めずに「出てくる直前まで、／きれいな水を。」の2行に折る */
  .memory__title br,.uvcard__title br{display:none}
  .memory__sub,.uvcard__sub{margin-top:8px;font-size:var(--t-body);font-weight:700}
  .memory__body,.uvcard__body{margin-top:8px;font-size:var(--t-body);line-height:1.7}
  .memory__photo,.uvcard__photo{position:static;right:auto;top:auto;
    width:100%;height:var(--ph-l);margin-top:var(--pad)}
  /* memory: 元画像 1200×800。娘 x5〜20% / 本体 x30〜48% / 母 x45〜70%（顔 x55〜62%）。
     335×260 では横 169px（14%）が切れるので、左に寄せて娘の左端まで残す */
  .memory__photo img{object-position:30% 50%}
  /* uvcard: 元画像 1024×1024。熱水/冷水タンク y20〜35% / 出水口 y28〜40% / UVの光 y30〜60%。
     335×260 では縦 229px（22%）が切れる。上を 25% 落として y5.6〜83% を見せる */
  .uvcard__photo img{object-position:50% 25%}

  /* ============================ S06 because ============================ */
  /* 背景の 白→淡青 の切替位置は「見出し帯の下端」。SP の見出し（24px）に合わせて 112px */
  /* 章の変わり目 56 は margin-top で作る。帯（白→淡青）の切替は「バーの下端＋導入32」の
     88px（見出し35 ＋ バーまで16 ＋ バー4 ＋ 32）。ここに .because__lead の上余白を足すと
     56 が二重にかかるので、lead の padding-top は 0 にする */
  /* rev22-r5 §4: 発注主指示「『だから』の青い帯が 01 に被っている」。
     実測（375px）: 青バーの下端 55px・帯の切替 88px・01 の上端 79px ＝ 帯の境界線が
     01 の行の中を通っていた（−9px）。切替を 55+--hd = 79px に上げ、01 を
     さらに --hd 下（55+--hd×2 = 103px）へ落として、帯の上端 → 01 の上端を --hd（24px）確保する */
  .because{margin-top:var(--ch);padding-bottom:var(--hd);
    background:linear-gradient(180deg,#ffffff 0px,#ffffff 79px,#e3edf8 79px,#e0eaf5 55%,#e5ebf2 100%)}
  /* rev22-r5 §4: 波は 01〜05 の文字にかからない位置へ。01〜05 の下端は 103+190=293px なので
     その下（300px）から描く。不透明度 .5 はそのまま */
  .because__water{top:140px;width:100%;height:auto;opacity:.35} /* rev22-r10: 発注主指摘で 300→140（見出しに被らない） */
  .because__lead{padding-top:0;font-size:var(--t-sec);letter-spacing:.12em;text-indent:.12em}
  .because__leadbar{margin-top:16px}
  /* rev22-r7: 発注主指示「縦一列は散らばせて。文字は小さくていい」。
     PC と同じ 2列の互い違い（左 01・03・05／右 02・04 を半段下げ）。05 は長いので2列ぶち抜き */
  .because__list{position:static;height:auto;margin-top:calc(var(--hd) * 2);padding:0 var(--pad);
    display:grid;grid-template-columns:1fr 1fr;column-gap:8px;row-gap:14px;align-items:start}
  .because__item{position:static;left:auto;top:auto;gap:8px}
  .because__item--l1,.because__item--r1,.because__item--l2,
  .because__item--r2,.because__item--l3{left:auto;top:auto}
  .because__item--r1,.because__item--r2{margin-top:22px}
  .because__item--r2{position:relative;top:6px} /* rev22-r8: 発注主指示「04 をわずかに下げる」。他の間隔は不変 */
  .because__item--l3{grid-column:1 / -1}
  .because__item i{width:26px;height:26px;font-size:12px}
  .because__item span{font-size:15px;font-weight:700}
  /* ======================================================================
     rev22-r5 §5〜7（発注主指摘）: 「今までかけていた手間が、なくなる。」の下段を
     縦積み（見出し → 写真 → 5点）から、PC と同じ構図
     （左＝見出し＋矢印の5点 ・ 右＝本体写真）に戻す。

     やり方：この下段を「幅 1024px のキャンバス」とみなし、PC の座標をそのまま使って
     画面幅に合わせて丸ごと縮める。1u = 画面幅の 1/1024 （＝PC の 1px）。
       --u:0.09765625cqw  ⇐ 1cqw = .because__lower の幅の 1%
     文字だけは縮めず、max() で下限を入れる（見出し 20px ・ キャプション 11px ・
     バッジ 11px）。幅 1024px では max() の右側（PC の値）が必ず勝つので、
     1023px と 1024px の見え方が連続する。 */
  .because__lower{position:relative;left:auto;top:auto;
    width:100%;height:auto;aspect-ratio:1024 / 647;margin-top:var(--ch);
    display:block;container-type:inline-size;
    --u:0.09765625cqw;         /* 1u = 幅÷1024。PC の 1px と同じ意味 */
    --w5:max(220px, calc(556 * var(--u)))}  /* 5点の帯の幅。PC は 556u */
  /* 見出し。PC は left:64 / top:80 / 41px。2行目「手間が、なくなる。」9字×20px=180px が
     入る幅（190px）を下限にする */
  /* rev22-r7: 発注主指示「見出しはもっと目立つように」「実機で改行して『買う』と被る」。
     見出しと5点の帯を絶対配置から流し込みに変え、見出しが伸びても帯が下に逃げるようにする。
     行は nowrap で必ず2行。文字は 24px を下限（PC 41u）。写真とバッジは絶対配置のまま */
  .because__title{position:relative;left:auto;top:auto;
    width:auto;margin:calc(80 * var(--u)) 0 0 calc(64 * var(--u));padding:0;z-index:2;
    font-size:max(24px, calc(41 * var(--u)));line-height:1.45;white-space:nowrap;font-weight:900}
  /* 本体写真。PC は right:0 / top:6 / 470×641、左端から 140px のフェード。
     幅を狭めるのは「文字を縮めない」分だけ。内訳:
       ・写真の左端から本体の輪郭まで = 879.75u − 写真幅/2（実測で導いた式。
         元画像 1100×1400 を高さ 641u で cover したときの本体の位置）
       ・5点の帯の右端 = 56u + --w5
     この2つの間に 24px 以上あけると、キャプション「温度を合わせる」が本体に触れない。
     430px 以上では常に PC と同じ 470u（比例どおり）が選ばれる */
  .because__room{position:absolute;right:0;top:calc(6 * var(--u));
    width:min(calc(470 * var(--u)), calc(1647.5 * var(--u) - 2 * var(--w5) - 24px));
    height:calc(641 * var(--u));margin:0;
    object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(140 * var(--u)));
    mask-image:linear-gradient(90deg,transparent 0,#000 calc(140 * var(--u)))}
  /* バッジ。PC は right:64 / top:196 / 128×128 / 16px。
     中の「ワンタッチ」5字×11px = 55px が入る 62px を下限にする */
  .because__badge{position:absolute;left:auto;right:calc(64 * var(--u));top:calc(196 * var(--u));
    width:max(76px, calc(128 * var(--u)));height:max(76px, calc(128 * var(--u))); /* rev22-r8: 5字×11px が入る 76px に */
    font-size:max(11px, calc(16 * var(--u)));line-height:1.4;z-index:3;white-space:nowrap} /* rev22-r8: 「ワンタッ/チ」の変な改行を防ぐ */
  /* 5点の帯。PC は left:56 / top:268、枚 92px ・ 間隔 24px（合計 556px）。
     rev22-r5: 幅を --w5、枚を flex で均等割り付けにした。最後の「温度を合わせる」は
     キャプションが 11px で 77px と長いので、その枚だけ flex:2（他の2倍幅）にする。
     これで隣の「測る」との中心間距離が --w5/4 になり、両キャプションの半幅の和
     （(77+22)/2 = 49.5px）を常に上回る（--w5 の下限 220px → 55px）。
     揃えは flex-start。写真の高さを 96u で固定しているので、キャプションが
     （360px 未満で）2行になっても 5つの絵の上下はずれない */
  .because__items{position:relative;left:auto;top:auto;
    width:var(--w5);padding:0;margin:calc(28 * var(--u)) 0 0 calc(56 * var(--u));gap:0;align-items:flex-start;
    justify-content:space-between;z-index:1}
  /* 枠の幅は「写真（84u）とキャプションの広いほう」。余りは4つの隙間へ等分されるので、
     キャプションどうしの間が幅によらず 8.8px 以上あく（375px 実測 8.8 / 430px 10.5 / 508px 22.2） */
  /* rev22-r8: 発注主指摘「温度を合わせる が長くて絵の間隔がずれる」→ 5枚を等幅にし、キャプションは2行可 */
  .because__items figure{flex:1 1 0;min-width:0;width:auto;text-align:center}
  .because__items img{width:auto;max-width:calc(84 * var(--u));height:calc(96 * var(--u));
    object-fit:contain;object-position:50% 100%}
  /* 矢印。PC は left:-16 / bottom:48 / 566×158（帯の高さ 133 基準）。
     キャプションの行数で位置が動かないよう、bottom ではなく top（133−48−158=−73u）で置く */
  .because__arrow{left:calc(-16 * var(--u));right:auto;top:calc(-73 * var(--u));bottom:auto;
    width:calc(var(--w5) + 10 * var(--u));height:calc(158 * var(--u))}
  /* キャプションは 11px を下限に必ず1行。枚に入らない分は PC と同じ手で
     左右に逃がして中心を保つ（マイナスの外余白） */
  /* キャプションは 11px を下限に必ず1行。PC のように枠の外へ逃がす（マイナスの外余白）のはやめた——
     枠の幅を「写真とキャプションの広いほう」で決めているので、逃がすとそのぶん隣に近づく
     （実測 375px で 隣との隙間 8.8px → 4.5px）。逃がさないほうが等間隔になる */
  .because__items figcaption{margin:calc(16 * var(--u)) 0 0;
    font-size:max(11px, calc(15 * var(--u)));line-height:1.3;white-space:normal;word-break:keep-all}

  /* ============================ S07 kodawari ============================ */
  .kodawari{padding:var(--ch) var(--pad) var(--hd)}
  .kodawari__eyebrow{font-size:var(--t-note);letter-spacing:.28em;text-indent:.28em}
  .kodawari__title{margin-top:16px;font-size:22px;letter-spacing:.04em}
  .kodawari__title .num{font-size:26px}
  .kodawari__bar{margin-top:20px}
  /* 目次ピルは中身の幅で横に並べ、入らないぶんだけ折り返す（横いっぱいに伸ばさない） */
  .kodawari__index{flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:8px;max-width:none;margin:var(--hd) 0 0}
  .kodawari__index li{width:auto;height:34px;padding:0 14px;justify-content:center;gap:8px}
  .kodawari__index i{width:22px;height:22px;font-size:11px;border-width:1.5px}
  .kodawari__index span{font-size:13px}

  /* ======================= S08〜S10 feat 01/02/03 ======================= */
  .feat{overflow:hidden;margin:0 var(--pad);padding-bottom:var(--pad);border-radius:var(--r-card)}
  .feat + .feat{margin-top:var(--it)}
  /* 薄水色の帯はセクション全面の背景に。PC では帯より後ろの要素が z-index:1 の絶対配置で
     上に来ていた。流し込みに戻すと z-index が効かなくなり、帯（不透明）が中身を隠す。
     帯を z-index:0 に落とし、中身は position:relative のまま z-index:1 で上に置く */
  .feat .feat__panel{inset:0;width:auto;height:auto;z-index:0}
  /* 1行目 = 番号（28px）＋ 見出し（20px）を同じ行・ベースラインそろえ。番号の下線は出さない */
  .feat .feat__text{position:relative;left:auto;top:auto;z-index:1;
    width:auto;height:auto;padding:var(--pad) var(--pad) 0;
    display:flex;flex-wrap:wrap;align-items:baseline}
  .feat .feat__num{position:static;left:auto;top:auto;font-size:var(--t-num);line-height:1}
  .feat .feat__rule{display:none}
  .feat .feat__head{position:static;left:auto;top:auto;flex:1 1 auto;min-width:0;
    margin:0 0 0 var(--it);font-size:var(--t-card);line-height:1.35;
    letter-spacing:.02em;white-space:normal}
  .feat .feat__head br{display:none}
  .feat .feat__body{position:static;left:auto;top:auto;flex:0 0 100%;
    margin-top:var(--it);font-size:var(--t-body);line-height:1.7;letter-spacing:.01em}
  /* 強調語が行をまたいで割れないように */
  .feat__em{white-space:nowrap}
  /* S08 動画。切り取る「範囲」を比で固定してあるので、画面幅が変わっても
     液晶（y342〜510）・＋−ボタン（上端283）・ロゴ（881〜924）が必ず全部入る。
     動画の実寸 1294×1048、見せる範囲 y=270〜950 → aspect-ratio 1294/680・
     object-position 50% 73.4%（上に捨てる 270 ÷ 捨てる合計 368）。375px では高さ155px */
  .feat01__photo{position:relative;z-index:1;right:auto;top:auto;
    width:calc(100% - var(--pad) * 2);margin:var(--pad) var(--pad) 0;
    height:auto;aspect-ratio:1294/680;object-fit:cover;object-position:50% 73.4%;
    border-radius:var(--r-photo)}
  /* S09 写真2枚を横並び（S=140）。元画像はどちらも 700×850。
     マグ: カップ上端 y408・ソーサー下端 y697 → 下寄せ 85% で 430px でも全部入る。
     グラス: グラス上端 y204・下端 y595 → 35% で 430px でも全部入る */
  .feat02__photos{position:relative;z-index:1;left:auto;top:auto;width:100%;
    margin-top:var(--pad);gap:8px;padding:0 var(--pad)}
  .feat02__mug,.feat02__glass{width:calc(50% - 4px);height:var(--ph-s);
    object-fit:cover;border-radius:var(--r-photo)}
  .feat02__mug{object-position:50% 85%}
  .feat02__glass{object-position:50% 35%}
  /* rev22-r5 §9: 発注主指摘「スープだけ大きすぎる」。PC と同じ
     「左に図（熱水＋冷水＝40℃）、右にスープ」の2列に戻す。
     図の縮小は transform ではなく zoom（場所の幅も一緒に縮む）。
     zoom は文字も縮めるので、一番小さい「設定温度」15px が 11px を割らないよう
     キャンバス上の文字を先に大きくしておく（下の feat03 の3行）。
     0.42 倍 → 図の場所は 311×122 → 130.6×51.2px。375px なら右の写真列は 152px */
  /* rev22-r7: 発注主指摘「スマホによっては図と文字がはみ出る」。図の列を 131px 固定にし、
     写真の列は残り幅（min 0）で縮む。図は写真の上に重ならない */
  .feat03{display:grid;grid-template-columns:131px minmax(0,1fr);
    column-gap:var(--it);padding:0 var(--pad) var(--pad);align-items:center}
  .feat03 .feat__text{grid-column:1 / -1;padding:var(--pad) 0 0}
  .feat03__diagram{position:relative;left:auto;top:auto;grid-column:1;
    width:311px;height:122px;margin:var(--pad) 0 0;transform:none;zoom:.42}
  /* 縮めた分を文字で戻す（19×.42=8.0 → 28×.42=11.8px / 15×.42=6.3 → 28×.42=11.8px） */
  .feat03 .feat__droptext{font-size:28px;line-height:34px}
  /* 「設定温度」4字×28px = 112px は 円の幅 99px に入らないので、ラベルの器だけ左右へ
     16px ずつ広げる（中心は 49.5px のまま）。円からはみ出すのは文字ではなく透明な器 */
  .feat03 .feat__circlelabel{font-size:28px;top:60px;left:-16px;width:131px;white-space:nowrap}
  .feat03 .feat__circletemp{font-size:34px}
  .feat__drop{top:0}
  .feat__drop--hot{left:0}
  .feat__drop--cold{left:103px}
  .feat__op{top:44px}
  .feat__op--plus{left:67px}
  .feat__op--eq{left:173px;top:43px}
  .feat__circle{left:212px;top:8px}
  /* S10 スープ写真。元画像 700×800、カップ上端 y185・ソーサー下端 y590。
     見せる範囲を y=157〜608（451行）に比で固定すると、どの画面幅でも上に28px・下に18px
     余裕を持ってカップとソーサーが入る。375px では高さ190px（＝M） */
  /* rev22-r5 §9: 右列へ。スマホ層は 1:1（幅は右列いっぱい、375px で 152px）。
     切り取り位置 45% は rev22-r4 の実測どおり（カップ y185・受け皿の底 y590 が入る） */
  .feat03__photo{position:relative;z-index:1;right:auto;top:auto;grid-column:2;
    width:100%;max-width:200px;min-width:0;margin:var(--pad) 0 0;justify-self:center;
    height:auto;aspect-ratio:1 / 1;object-fit:cover;object-position:50% 45%;
    border-radius:var(--r-photo)}

  /* ============================ S11 voice ============================ */
  .voice{padding:var(--ch) 0 var(--hd);overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0px,#f2f5fb 46px,#f2f5fb calc(100% - 17px),#ffffff 100%)}
  .voice__head{position:static;left:auto;top:auto;width:auto;height:auto;padding:0 var(--pad);gap:12px}
  .voice__rule{flex:1 1 auto;min-width:16px}
  .voice__title{font-size:var(--t-card);line-height:1.5;letter-spacing:.12em;
    white-space:normal;text-align:center}
  /* カルーセル。--slide-w / --photo-h は main.js が実測して書き込む */
  .voice__stage{position:relative;left:auto;top:auto;width:100%;height:auto;
    margin-top:var(--hd);touch-action:pan-y;-webkit-user-select:none;user-select:none}
  /* 写真の上から指を引くと標準の画像ドラッグが始まってスワイプが死ぬので、それだけ止める */
  .voice__stage img{-webkit-user-drag:none;user-drag:none}
  .voice__track{position:relative;height:auto;gap:12px}
  .voice__slide{flex:0 0 var(--slide-w,80vw);width:var(--slide-w,80vw);height:auto;
    border-radius:var(--r-card)}
  .voice__photo{width:100%;height:auto;aspect-ratio:660/442}
  .voice__quote{height:auto;padding:20px 18px 22px 40px}
  .voice__quote p{font-size:15px;line-height:1.7;letter-spacing:.01em;white-space:normal}
  .voice__quote p + p{margin-top:10px}
  .voice__mark{font-size:36px}
  .voice__mark--open{left:12px;top:12px}
  .voice__mark--close{top:18px;margin-left:4px}
  .voice__slide::after{border-radius:var(--r-card)}
  /* rev22-r3: 統括判断②。左右に覗いている隣のカードは「写真だけ」が見える状態にする。
     非アクティブのカードの引用文・引用符（.voice__quote の中身すべて）を透明にする。
     opacity なので高さは残り、カードの寸法とスライド量は1pxも変わらない。
     .is-active は main.js の apply() が送りのたびに付け替えるので、
     前後ボタン・スワイプのどちらでも 0.3 秒で文字が出入りする */
  .voice__quote{transition:opacity .3s ease}
  .voice__slide:not(.is-active) .voice__quote{opacity:0}
  /* 矢印は写真の縦中央（44px 以上のタップ対象） */
  .voice__nav{width:48px;height:48px;top:calc(var(--photo-h,150px) / 2 - 24px)}
  .voice__nav i{width:14px;height:14px;border-top-width:3px;border-right-width:3px}
  .voice__nav--prev{left:20px;right:auto}
  .voice__nav--prev i{margin-right:-5px}
  .voice__nav--next{left:auto;right:20px}
  .voice__nav--next i{margin-left:-5px}
  .voice__note{position:static;left:auto;top:auto;width:auto;
    margin:var(--hd) var(--pad) 0;font-size:var(--t-note);line-height:1.8}
  /* 自然に流すと2行目だけ端まで伸びる三角形になるので、PC の改行位置をそのまま生かす */
  .voice__note .pc-br{display:inline}
  /* 注記リンクの下線が太くて文字から離れ「区切り線」に見えていたので細く近づける */
  .voice__note a{border-bottom-width:1.5px;padding-bottom:1px}

  /* ============================ S12 price ============================ */
  .price{padding:calc(var(--ch) - var(--hd)) var(--pad) var(--hd)} /* rev22-r8: 上の余白 = 前章の --hd + ここ = --ch */
  .price__solve{margin:0 0 var(--hd);font-size:var(--t-card);letter-spacing:.03em;text-indent:.03em;line-height:1.5} /* rev22-r15 */
  .price__row{top:0;padding-left:0;flex-wrap:nowrap}
  .price__label{margin-right:8px;top:-4px;font-size:22px}
  .price__num{font-size:64px}
  .price__yen{font-size:22px}
  .price__tax{font-size:var(--t-body);margin-left:4px}
  .price__taxnote{margin-top:12px;padding-left:0;font-size:var(--t-note)}
  /* 14字 × 22px = 308px。内寸 335px に1行で収まる */
  .price__title{margin-top:var(--ch);font-size:22px; /* rev22-r8: 税込 → 見出し = --ch（上の余白と同じ） */letter-spacing:.02em;text-indent:.02em;
    max-width:none;text-align:center;white-space:nowrap}
  .price__bar{margin-top:16px}

  /* ================= S13 PFOS（現在は非表示。表示版へ流用する分） ================= */
  .pfos{padding-top:32px}
  .pfos__band{height:auto}
  .pfos__inner{padding:40px var(--pad) 44px}
  .pfos__title{font-size:24px;line-height:1.5;letter-spacing:.05em}
  .pfos__body{margin-top:16px;font-size:var(--t-body);line-height:1.7;letter-spacing:.05em}
  .pfos__so{margin:32px 0 0;width:auto;padding-left:0;font-size:20px;line-height:1.4}

  /* ============= S14 安心の浄水性能（現在は非表示。表示版へ流用する分） ============= */
  .filter{display:flex;flex-direction:column;
    background:linear-gradient(180deg,#ffffff 0%,#ffffff 40%,#f2f8ff 100%)}
  .filter__inner{order:1;padding:48px var(--pad) 0}
  .filter__photo{order:2;position:static;left:auto;top:auto;width:100%;height:auto;margin-top:var(--hd);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 93%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 93%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .filter__title{font-size:var(--t-sec);letter-spacing:.08em;line-height:1.3}
  .filter__list{margin-top:var(--hd);padding-left:0}
  .filter__list li + li{margin-top:var(--it)}
  .filter__ltxt{font-size:var(--t-body);line-height:1.7}
  .filter__check{width:20px;height:20px;margin-top:3px}
  .filter__check::after{left:5px;top:3px;width:5px;height:9px}
  .filter__box{position:static;left:auto;top:auto;width:auto;height:auto;
    margin-top:var(--it);padding:16px 18px}
  .filter__box--1,.filter__box--2{top:auto;height:auto;padding-left:18px}
  .filter__icon{width:40px;height:40px}
  .filter__icon--doc{width:44px;height:44px}
  .filter__boxtxt,.filter__box--2 .filter__boxtxt{margin-left:var(--it)}
  .filter__boxhead,.filter__box--2 .filter__boxhead{font-size:var(--t-body);line-height:1.5}
  .filter__boxsub{margin-top:4px;font-size:var(--t-note);line-height:1.5}

  /* ============================ S16 hygiene ============================ */
  .hygiene{padding:var(--ch) 0 var(--hd)}
  .hygiene__lead{padding:0 var(--pad)}
  .hygiene__lead span{flex:0 1 auto;min-width:0;padding:0 12px;font-size:16px;line-height:1.5;
    white-space:normal;text-align:center}
  /* rev22-r3: 熱水タンク／冷水タンクを2列横並び、出水口まわりのカードは全幅。
     DOM は カード1 → シェブロン1 → カード2 → シェブロン2 → カード3 なので、
     グリッドの行・列を明示して置き直す（1と2の間のシェブロンは横並びでは意味が無いので消す） */
  .tanks{margin:var(--hd) var(--pad) 0;display:grid;
    grid-template-columns:1fr 1fr;column-gap:var(--it);row-gap:0}
  .tanks__card{position:relative;left:auto;top:auto;width:auto;height:auto;
    padding:14px 14px 16px;border-radius:var(--r-card)}
  .tanks__card--1{grid-area:1 / 1 / 2 / 2;left:auto;width:auto}
  .tanks__card--2{grid-area:1 / 2 / 2 / 3;left:auto;width:auto}
  .tanks__card--3{grid-area:3 / 1 / 4 / 3;left:auto;width:auto;padding:var(--pad)}
  .tanks__chev--1{display:none}
  .tanks__chev--2{grid-area:2 / 1 / 3 / 3;position:static;left:auto;top:auto;
    justify-self:center;transform:rotate(135deg);margin:calc(var(--it) + 2px) 0}
  .tanks__name{font-size:15px}
  .tanks__card--3 .tanks__name{padding-right:0;font-size:18px}
  .tanks__photo{width:100%;height:var(--ph-s);object-fit:contain;margin:10px auto 0}
  /* 出水口まわりの写真だけ、切り取る範囲を比で固定する。元画像 640×640 で
     出水口とUVの光 y32〜256・グラス y288〜576。y=30〜594（564行）を見せる比にすると
     どの画面幅でもグラスの底（576）が切れない。375px では高さ260px（＝L） */
  /* rev22-r4: セレクタを `.tanks__card--3 .tanks__photo--wide` に強めた。
     style.css の `.tanks__card--3 .tanks__photo{height:168px}` がセレクタ2つぶんで強く、
     ここの `height:auto` に勝っていたため、375px でも枠が 295×168 になり
     グラスの底（元画像 y576）が y476 で切れていた（見えていたのは y107〜476）。
     同じ強さにすると 295×260 になり、狙いどおり y30〜594 が入る（＝下に18pxの余裕）。
     統括判断（2026-09-03）で、この1件に限り 375/390 の描画変更を承認済み */
  .tanks__card--3 .tanks__photo--wide{width:100%;height:auto;aspect-ratio:640/564;object-fit:cover;
    object-position:50% 39.5%;border-radius:var(--r-photo);margin-top:var(--it)}
  .tanks__text{margin-top:var(--it);font-size:var(--t-body);line-height:1.7}
  .tanks__text--strong{margin-top:var(--it)}
  .tanks__note{margin-top:8px;padding:0;font-size:var(--t-note);line-height:1.7;white-space:normal}
  .tanks__badge{right:12px;top:-14px;width:64px;height:64px;font-size:var(--t-note);line-height:1.3}
  /* 事実の縦リスト → つなぎ線 → ピル → シェブロン → 解決カード */
  .hygiene__facts{margin:var(--it) var(--pad) 0;width:auto;padding:18px 16px;border-radius:var(--r-card)}
  .hygiene__facts::after{bottom:-24px;height:24px}
  .hygiene__factshead{font-size:13px;letter-spacing:.04em}
  .hygiene__fact{gap:var(--it);padding:10px 0}
  .hygiene__factnum{width:26px;height:26px;font-size:11px}
  .hygiene__facttext{font-size:var(--t-body);line-height:1.7}
  .hygiene__so{margin-top:var(--hd)}
  .hygiene__sopill{padding:9px 24px;font-size:15px}
  .hygiene__sochev{margin-top:10px}
  .hygiene__solve{margin:var(--it) var(--pad) 0;width:auto;padding:var(--pad);border-radius:var(--r-card)}
  .hygiene__solvetitle{font-size:var(--t-card);line-height:1.4}
  .hygiene__solvebar{margin-top:var(--it);width:64px}
  .hygiene__solvebody{margin-top:var(--it);font-size:var(--t-body);line-height:1.7}
  /* rev22-r5 §10: 発注主指摘「UV 図が見切れている」。元画像 1300×2000 の実測は
     本体上端 y60 / タンク y390〜830 / UVの継手 y840〜1000 / 出水口 y1000〜1180 /
     光の先 y1250。高さ 260px 固定（3/2 相当）では下が切れていた。
     枠を 1:1 にすると、どの幅でも縦 1300行ぶんが見えるので、上を 18% 落として
     y=126〜1426 を出す ＝ 本体の上端から光の先まで全部入る（下に 176行の余裕） */
  .hygiene__solvephoto{margin-top:var(--pad);width:100%;height:auto;aspect-ratio:1 / 1;
    object-fit:cover;object-position:50% 18%;border-radius:var(--r-photo)}

  /* ============================ S18 spec ============================ */
  .spec{padding-top:var(--ch)}
  .spec__title{font-size:var(--t-sec);letter-spacing:.12em;text-indent:.12em}
  .spec__bar{margin-top:16px}
  /* 製品帯は 1024×880 の絶対配置図を、x=92〜980（888px）/ y=0〜880 を基準にした
     相対配置(%)へ換算して、幅に合わせて丸ごと縮める */
  .spec__band{margin-top:var(--hd);aspect-ratio:888/880}
  .spec__unit{height:88.636%}
  .spec__unit--white{left:6.757%;top:1.477%}
  .spec__unit--black{left:38.288%;top:1.250%}

  /* 寸法表記（PCと同じ描き方のまま、矢じりと文字だけ SP 用に小さくする） */
  .spec__arw--h::before,.spec__arw--h::after,
  .spec__arw--v::before,.spec__arw--v::after{border-width:3px 6px}
  .spec__arw--h::before{border-width:3px 6px 3px 0;top:-2.25px}
  .spec__arw--h::after{border-width:3px 0 3px 6px;top:-2.25px}
  .spec__arw--v::before{border-width:0 3px 6px 3px;left:-2.25px}
  .spec__arw--v::after{border-width:6px 3px 0 3px;left:-2.25px}
  .spec__dimlabel{font-size:11px;line-height:1.35;letter-spacing:.01em}
  .spec__dimlabel em{font-size:8px}

  /* 高さ: 白モデルの左 */
  .spec__ext--htop{left:14.5%;top:7.727%;width:6%}
  .spec__ext--hbot{left:14.5%;top:89.091%;width:6%}
  .spec__arw--height{left:16.2%;top:7.727%;height:81.364%}
  .spec__lbl--height{left:0.5%;top:44.4%;width:12.5%;white-space:normal;text-align:right}
  /* 幅: 白モデルの下 */
  .spec__ext--wl{left:20.38%;top:89.77%;height:4%}
  .spec__ext--wr{left:41.55%;top:89.77%;height:4%}
  .spec__arw--width{left:20.38%;top:92.95%;width:21.17%}
  .spec__lbl--width{left:20.38%;top:94.5%;width:21.17%;text-align:center}
  /* 注水スペース: 黒モデルの右 */
  .spec__ext--ntop{left:73.65%;top:28.75%;width:3.5%}
  .spec__ext--nbot{left:73.65%;top:47.27%;width:3.5%}
  .spec__arw--noz{left:75.6%;top:28.75%;height:18.52%}
  .spec__lbl--noz{left:78.2%;top:34.5%}
  /* 奥行: 黒モデルの右下角から 45° */
  .spec__ext--dtop{left:73.65%;top:82.95%;width:6%}
  .spec__ext--dbot{left:73.65%;top:88.86%;width:8.35%}
  .spec__arw--depth{left:75.68%;top:82.95%;width:8.28%}
  .spec__lbl--depth{left:82.4%;top:87.5%;width:13%;white-space:normal;text-align:left}

  /* 機能ストリップ1（番号＋見出しを1行、写真 M。引き出し線は出さない） */
  .spec__strip{position:relative;margin:var(--it) var(--pad) 0;width:auto;height:auto;
    padding:var(--pad) 0 0;border-radius:var(--r-card);
    display:flex;flex-wrap:wrap;align-items:baseline}
  .spec__num{position:static;left:auto;top:auto;padding:0 0 0 var(--pad);
    font-size:var(--t-num);line-height:1}
  .spec__numbar{display:none}
  .spec__label{position:static;left:auto;top:auto;flex:1 1 auto;min-width:0;
    margin:0 var(--pad) 0 var(--it);padding:0;font-size:18px;font-weight:700;
    line-height:1.4;white-space:normal}
  .spec__label br{display:none}
  .spec__lead{display:none}
  /* 元画像 1400×700。取水口のクローズアップで被写体は中央 */
  .spec__photo{position:static;right:auto;top:auto;flex:0 0 100%;
    width:100%;height:var(--ph-m);object-position:50% 50%;margin-top:var(--pad)}

  /* ============================ S19 strips ============================ */
  .strips{padding:var(--it) var(--pad) 0;display:flex;flex-direction:column;gap:var(--it)}
  .strips__card{position:relative;left:auto;top:auto;width:auto;height:auto;
    padding:var(--pad) 0 0;border-radius:var(--r-card);
    display:flex;flex-wrap:wrap;align-items:baseline}
  .strips__card--2,.strips__card--3,.strips__card--4{top:auto;height:auto}
  .strips__num{position:static;left:auto;top:auto;padding:0 0 0 var(--pad);
    font-size:var(--t-num);line-height:1}
  .strips__numbar{display:none}
  .strips__label{position:static;left:auto;top:auto;flex:0 1 auto;min-width:0;
    margin:0 0 0 var(--it);padding:0;font-size:18px;line-height:1.4;white-space:normal}
  .strips__label br{display:none}
  /* カード3の説明文は見出しではなく本文（14px）扱い。番号の右に置く。
     写真2枚は次の行に落としたいので、高さ0の全幅ダミー（::before）を order で挟んで折り返す */
  /* rev22-r6: 発注主指示で 1・2・4 と同じ見出しの大きさ・太さに（本文扱いをやめる） */
  .strips__card--3 .strips__label{flex:1 1 0;min-width:0;margin-right:var(--pad);
    font-size:18px;font-weight:700;line-height:1.4}
  .strips__card--3 .strips__num{order:1}
  .strips__card--3 .strips__label{order:2}
  .strips__card--3::before{content:"";order:3;flex:0 0 100%;height:0}
  .strips__card--3 .strips__photo--a{order:4}
  .strips__card--3 .strips__photo--b{order:5}
  .strips__lead{display:none}
  /* 「奥行16cm」タグは見出しの右・同じ行に */
  .strips__tag{position:static;left:auto;top:auto;margin:0 var(--pad) 0 var(--it);
    padding:3px 12px;font-size:var(--t-note)}
  .strips__tag em{font-size:var(--t-body)}
  /* 元画像はどれも 1400×650。被写体（受け皿・鍋）は中央なので 50% でよい */
  .strips__photo{position:static;left:auto;top:auto;flex:0 0 100%;
    width:100%;height:var(--ph-m);object-position:50% 50%;margin-top:var(--pad)}
  /* カード3は写真2枚を横並び（S=140）。元画像 700×650、ボトル上端 y20〜下端 y507。
     上を 10% 落として、430px 幅でもキャップと受け皿が入るようにする */
  .strips__photo--half{flex:1 1 0;min-width:0;width:auto;height:var(--ph-s);
    object-position:50% 10%;border-radius:var(--r-photo)}
  .strips__photo--a{margin:var(--pad) 4px 0 var(--pad)}
  .strips__photo--b{margin:var(--pad) var(--pad) 0 4px}

  /* ============================ S19b extras ============================ */
  .extras{padding:var(--hd) var(--pad) var(--hd)}
  .extras__list{margin:0;width:auto;flex-direction:column;gap:var(--it)}
  .extras__item{padding:16px;gap:var(--it);border-radius:var(--r-card)}
  .extras__ico{width:40px;height:40px}
  .extras__ico svg{width:22px;height:22px}
  .extras__head{font-size:18px;line-height:1.4}
  .extras__body{margin-top:6px;font-size:var(--t-body);line-height:1.7}

  /* ============================ S20 support ============================ */
  .support{padding:var(--ch) 0 var(--ch)} /* rev22-r8: 下の白余白を --ch に */
  .support__head{position:static;left:auto;top:auto;width:auto}
  .support__flowtitle{font-size:var(--t-sec);letter-spacing:.12em;text-indent:.12em}
  .support__flowbar{margin-top:16px}
  .support__steps{position:static;left:auto;top:auto;width:auto;height:auto;
    display:flex;align-items:stretch;gap:6px;padding:0 var(--pad);margin-top:var(--hd)}
  .support__step{position:static;left:auto;top:auto;flex:1 1 0;min-width:0;
    width:auto;height:auto;padding:18px 4px 16px}
  .support__step:nth-of-type(1),.support__step:nth-of-type(2),.support__step:nth-of-type(3){left:auto}
  .support__steprow{padding-top:0}
  .support__stepicon{width:56px;height:44px}
  /* 「WEBで申し込み」が1文字だけ次の行に落ちるのを避ける（12px・字送り0で 86.7px） */
  .support__steplabel{margin-top:14px;font-size:var(--t-note);letter-spacing:0;line-height:1.45}
  .support__chev{position:static;left:auto;top:auto;align-self:center;flex:none;margin:0}
  .support__chev:nth-of-type(1),.support__chev:nth-of-type(2){left:auto}

  /* ============================ S21 app ============================ */
  /* rev22-r3: 説明3項目を先に、スマホ画面2枚は横並び（PCと同じ意味合い）。
     HTML に要素を足せないのでグリッドの領域名で並べ替える */
  .app{padding:calc(var(--hd) * 1.5) var(--pad) var(--hd); /* rev22-r8: 水色の上余白を減らす（96→48） */
    background:linear-gradient(180deg,#f5faff 0 calc(100% - 24px),#ffffff calc(100% - 24px));
    display:grid;grid-template-columns:1fr 1fr;column-gap:var(--it);
    grid-template-areas:"title title" "card card" "list list" "home filter"}
  /* rev22-r5 §11: 発注主指摘「語の途中で折れる」。1024px 未満では
     「PureNextアプリ」の前で必ず改行し、その語自体は折らない。
     前半「使い始めてからもずっとラクに」は日本語の文節で折る（auto-phrase） */
  .app__title{grid-area:title;position:static;left:auto;top:auto;width:auto;
    font-size:22px;line-height:1.5;word-break:auto-phrase}
  /* display:block だと蛍光ペンの下線が行いっぱいに伸びるので、幅は文字ぶんだけにして中央に置く */
  .app__title-em{display:block;width:fit-content;margin-left:auto;margin-right:auto;white-space:nowrap}
  .app__card{grid-area:card;position:static;left:auto;top:auto;
    width:auto;height:0;background:none;box-shadow:none}
  .app__list{grid-area:list;position:static;left:auto;top:auto;width:auto;margin-top:var(--hd)}
  .app__row{height:auto;padding:10px 0}
  .app__row + .app__row{margin-top:0}
  .app__row:not(:last-child)::after{bottom:0;width:100%}
  .app__ico{width:40px;height:40px}
  .app__ico img{width:22px;height:22px}
  .app__lead{margin-left:var(--it);font-size:var(--t-body);line-height:1.7}
  .app__lead br{display:none}
  .app__phone{position:static;left:auto;top:auto;width:100%;margin:16px 0 0;
    padding:4px;border-radius:20px}
  .app__phone--home{grid-area:home;left:auto}
  .app__phone--filter{grid-area:filter;left:auto;margin-top:16px}
  .app__screen{width:100%;height:auto;aspect-ratio:221/480;border-radius:16px}

  /* ======================= S22a / S23a sechead ======================= */
  .sechead{gap:16px}
  .sechead__title{font-size:var(--t-sec);letter-spacing:.12em;text-indent:.12em}
  .sechead--detail{padding:var(--ch) 0 var(--hd)}
  .sechead--faq{padding:var(--ch) 0 var(--hd)}

  /* ============================ S22 detail ============================ */
  .detail{padding:0 var(--pad) var(--hd);
    background:linear-gradient(180deg,#ffffff 0 0,#f5f8fd 0)}
  .detail__card{width:auto;padding:6px 0 8px}
  .detail__table{width:100%;table-layout:fixed}
  .detail__table th,.detail__table td{padding:12px 0;font-size:13px;line-height:1.7}
  .detail__table th{width:100px;padding-left:12px;word-break:keep-all}
  .detail__table td{padding-left:var(--it);padding-right:12px;overflow-wrap:anywhere}

  /* ============================ S23b notice ============================ */
  .notice{padding:var(--hd) var(--pad) 0}
  .notice__box{width:auto;padding:18px 14px}
  .notice__head{font-size:var(--t-card);line-height:1.5} /* rev22-r6: 目立たせる */
  .notice__body{margin-top:8px;font-size:var(--t-note);line-height:1.7}

  /* ============================ S23 faq ============================ */
  .faq{padding:0 0 var(--hd);
    background:linear-gradient(180deg,#ffffff 0 0,#f6f9fe 0)}
  .faq__card{margin:0 12px;padding:12px 0 4px;border-radius:var(--r-card)}
  .faq__item{margin:0 8px 8px} /* 白い項目の左右が 20px になる（12＋8） */
  .faq__qbtn{height:auto;min-height:48px;padding:12px 44px 12px 0;align-items:center}
  .faq__q{margin-left:14px}
  .faq__text{margin-left:var(--it);font-size:15px;line-height:1.5}
  .faq__chev{right:12px}
  .faq__a{padding:0 16px 14px 47px;font-size:var(--t-body);line-height:1.8}

  /* ============================ S25 footer ============================ */
  .footer{padding-top:var(--hd);
    background:linear-gradient(180deg,#ffffff 0 24px,#f6f9fd 24px)}
  .footer__band{height:230px}
  .footer__bandimg{width:100%;height:230px;object-position:50% 45%}
  .footer__copy{left:var(--pad);top:40px}
  .footer__lead{font-size:18px;line-height:1.6}
  .footer__logo{margin-top:10px;width:160px;height:auto} /* rev22-r14: ロゴ画像 */
  .footer__copyright{margin-top:16px;padding-bottom:24px;font-size:var(--t-note)}

  } /* /max-width:1023.98px（rev22-r4 で 767.98 から広げた。中身は SP 用のまま） */

  /* ==========================================================================
     rev22-r4（2026-09-03）タブレット層 600px 〜 1023.98px
     （この @media は max-width:1023.98px の内側にあるので上限は 1023.98px）

     何を直しているか:
       Galaxy Z Fold 7 を開いた画面はブラウザ上 720px（横向き 約800px）。
       767px 以下＝スマホ用がそのまま2倍に引き伸ばされ、
         ・「高さ固定＋cover」の写真が横長の帯になって上下が大きく切れる
         ・幅の半分ずつ置いたアプリ画面が 1枚 340px の巨大なスマホになる
       という2つの壊れ方をしていた。768〜1023 は main.js の zoom で PC を縮めていたが、
       800px では文字が 78% に縮むのでこちらも使わない（main.js 側で廃止した）。

     ここで差し替えるのは次の3つだけ。骨格（1カラム・並び順・導線）は SP のまま:
       ① 物差し（余白・角丸・文字サイズ）を1段上げる
       ② 内容の最大幅 800px・中央寄せ（全面写真だけ幅いっぱい）
       ③ 写真の「高さ固定」を「縦横比＋高さの上限」に置き換える
     ========================================================================== */
  @media (min-width:600px){

  /* --- ① 物差し（SP の変数をこの帯だけ上書きする。生の px は各ルールに直書きしない） --- */
  .page{
    --pad:32px;          /* 左右の余白・カードの内側（SP 20） */
    --ch:112px;          /* 章の境目（SP 96）。rev22-r7 */
    --hd:36px;           /* 見出し → 中身（SP 32）。rev22-r7 */
    --it:16px;           /* 要素同士・カード同士（SP 12） */
    --r-card:20px;       /* カードの角丸（SP 16） */
    --r-photo:14px;      /* 写真の角丸（SP 12） */
    --t-sec:28px;        /* 章見出し（SP 24） */
    --t-card:22px;       /* カード見出し（SP 20） */
    --t-body:15px;       /* 本文（SP 14） */
    --t-note:13px;       /* 注記（SP 12） */
    --content-max:800px; /* 内容の最大幅。全面写真だけこの外に出る */
  }

  /* --- ② 内容の最大幅と中央寄せ ---
     (a) 親に左右の余白が無いもの＝自分の margin で内側に入っていたもの */
  .intro,.memory,.uvcard,.feat,.voice__note,.tanks,.hygiene__facts,.hygiene__solve,
  .spec__band,.spec__strip,.faq__card{
    width:min(100% - var(--pad) * 2, var(--content-max));
    margin-left:auto;margin-right:auto;
  }
  /* memory / uvcard は包みの左右余白を外して、カード自身で中央に寄せる */
  .memory-wrap{padding-left:0;padding-right:0}
  .uvcard-wrap{padding-left:0;padding-right:0}

  /* (b) 自分の padding で内側に入っていたもの（左右の padding を 0 にしてから中央へ） */
  /* rev22-r5: .because__title / .because__items は下段のキャンバス（1024px 換算の絶対配置）へ
     移したので、この中央寄せの対象から外した */
  .because__list,.voice__head,.hygiene__lead,
  .strips,.support__steps,.hero__chips{
    width:min(100% - var(--pad) * 2, var(--content-max));
    margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;
  }

  /* (c) 親にすでに左右の余白があるもの */
  .kodawari__index,.extras__list,.detail__card,.notice__box,.app__title,.app__list{
    width:min(100%, var(--content-max));
    margin-left:auto;margin-right:auto;
  }
  .kodawari__index{max-width:var(--content-max)}

  /* --- ③ 写真: 高さ固定 → 縦横比＋上限 ---------------------------------------
     L（主役）= 3/2・上限480 ／ M（カードの中）= 16/9・上限420 ／ S（2枚横並び）= 4/3・上限300
     object-fit / object-position は SP の実測値をそのまま継承する（下で直す1件を除く） */

  /* L: memory・uvcard・リビング写真・解決カードのUV図 */
  /* rev22-r5: .because__room は下段のキャンバス側（641u 固定＝PC と同じ比）に移したので外した。
     §10: 「出水口までしっかり殺菌」の図は 3/2 だと出水口とUVの光の下端が切れるため、
     元画像 1300×2000 の y=126〜1426（＝本体上端から光の先まで）が入る 1/1 にする */
  .hygiene__solvephoto{
    height:auto;aspect-ratio:1 / 1;max-width:560px;margin-left:auto;margin-right:auto;
  }
  /* memory / uvcard は「囲みの div ＋ 中の img」の二重構造。囲みに縦横比を掛けると、
     中の img（height:100%）が先に正方形の高さで場所を取り、囲みが中身の高さに
     引きずられて 3/2 にならない（uvcard の元画像は 1024×1024）。
     縦横比は中の img 自身に掛ける */
  .memory__photo,.uvcard__photo{height:auto}
  .memory__photo img,.uvcard__photo img{
    display:block;height:auto;aspect-ratio:3 / 2;max-height:480px;
  }
  /* rev22-r5 §10: 枠を 1:1 にしたので切り取り位置は SP と同じ 18% でよい（上のルールに統合）。
     幅の上限 560px・中央寄せはこの層のルール（③写真）で掛けている */

  /* M: ストリップ1・ストリップ2/4 の写真 */
  .spec__photo,.strips__photo{
    height:auto;aspect-ratio:16 / 9;max-height:420px;
  }

  /* S: 2枚横並び（機能02の2枚・ストリップ3の2枚・熱水/冷水タンク）
     ※ 出水口まわり（.tanks__photo--wide）は同じ .tanks__photo を持つが別扱い */
  .feat02__mug,.feat02__glass,.strips__photo--half,
  .tanks__photo:not(.tanks__photo--wide){
    height:auto;aspect-ratio:4 / 3;max-height:300px;
  }
  .tanks__photo:not(.tanks__photo--wide){object-fit:contain}

  /* すでに比率で切ってある3枚（機能01の動画・スープ・出水口まわり）は比率を変えない。
     上限を「高さ」に掛けると cover が余分に切り、被写体が欠ける
       ・スープ 800px 幅で上限420 → 枠 670×420 になり、受け皿の底（y590）が y565 で切れた
       ・出水口 720px 幅で上限420 → 枠 592×420 になり、グラスの底（y576）が y527 で切れた
     そこで上限は「その高さになる幅」に掛ける（＝比も見える範囲も SP と同じまま守れる）。
       機能01  420 × 1294/680 = 799px ／ スープ 420 × 700/451 = 651px ／ 出水口 420 × 640/564 = 476px */
  .feat01__photo{width:min(100% - var(--pad) * 2, 799px);margin-left:auto;margin-right:auto}
  /* rev22-r5 §9: スープ写真はタブレット層で 4/3・高さ上限 260px（＝幅 346.7px）にする。
     ここは「③写真」の節なので比と上限だけ。位置（右列）は下の S08〜S10 feat で決める */
  .feat03__photo{aspect-ratio:4 / 3;max-width:calc(260px * 4 / 3)}
  /* 比と切り取りは SP 側で直したので、ここでは幅の上限（高さ420px相当）だけ掛ける */
  .tanks__card--3 .tanks__photo--wide{width:min(100%, 476px);margin-left:auto;margin-right:auto}

  /* --- S01 hero ---------------------------------------------------------- */
  /* 文字は内容の最大幅の中へ。写真は全面のまま 16/10・上限600px */
  .hero{grid-template-columns:minmax(var(--pad),1fr) minmax(0,var(--content-max)) minmax(var(--pad),1fr);
    /* rev22-r5b §3: 行の高さはタブレットでは元のまま（写真 450px で顔は y=196.5、
       サブの下端 168.2px と 28px 離れており、詰める理由がない） */
    grid-template-rows:28px auto 8px auto 10px auto 1fr auto}
  /* rev22-r5 §1: タブレット層は今までどおり 16:10・切り取り 78.9%（本体まで入っている）。
     白のかぶせも 250px に戻す（写真が 450〜600px と背が高いので 200px では足りない） */
  .hero__bg{height:auto;aspect-ratio:16 / 10;max-height:600px;object-position:78.9% 50%}
  .hero::before{height:250px;
    background:linear-gradient(180deg,rgba(255,255,255,.92) 0,rgba(255,255,255,.80) 90px,
      rgba(255,255,255,.35) 165px,rgba(255,255,255,0) 250px)}
  /* rev22-r4（統括判断 2026-09-03）: 見出しは 26 → 30px、サブは 15（--t-body）→ 16px。
     写真が 450〜600px に育つぶん、スマホのままの見出しでは写真に負けて小さく見えていた。
     チップの文字は変えない（--t-note 13px のまま） */
  .hero__title{font-size:30px}
  .hero__sub{font-size:16px}
  /* チップ5枚は 720px 幅だと3枚＋2枚で1枚 213px の空箱になるので、1行5枚にそろえる */
  .hero__chips{flex-wrap:nowrap}
  .chip{flex:1 1 0}

  /* --- S03 intro --------------------------------------------------------- */
  /* 3列横並び（温度バー／取水量／本体写真）は維持。バーと目盛りを 210→380、本体を 420 に */
  .intro__title{font-size:var(--t-card)}
  .temp,.temp__stops{width:72px}
  .temp__body,.temp__bar{height:380px}
  .temp__bar{width:20px;border-radius:10px}
  .temp__stop i{width:12px;height:12px;margin-left:4px}
  .temp__stop i::after{left:15px;top:5px;width:9px}
  .temp__stop span{margin-left:6px}
  /* 5つの目盛りの縦位置は SP の比（6/53/100/148/192 ÷ 210）をそのまま 380 に掛けた値 */
  .temp__stop--hot{top:11px}
  .temp__stop--sayu{top:96px}
  .temp__stop--w40{top:181px}
  .temp__stop--room{top:268px}
  .temp__stop--cold{top:347px}
  .amount{width:78px}
  /* 目盛りは 20本。380 ÷ 20 = 19px 間隔 */
  .amount__ruler{width:78px;height:380px;
    background:repeating-linear-gradient(180deg,#9db6d2 0,#9db6d2 1px,transparent 1px,transparent 19px);
    background-size:10px 100%;background-repeat:no-repeat}
  .amount__mark::before{width:17px}
  .amount__mark em{left:24px;top:-9px}
  .intro__panel{width:100%;height:420px;object-fit:contain;object-position:100% 100%}

  /* --- S04 memory / S05 uvcard ------------------------------------------- */
  /* SP の 18px は 335px 幅に入れるための逃げだったので、タブレットでは他と同じ 22px に戻す */
  .uvcard__title{font-size:var(--t-card)}

  /* --- S06 because ------------------------------------------------------- */
  /* 白→淡青の切替は「見出し35 ＋ バーまで16 ＋ バー4 ＋ 導入28」= 92px（SP は 88px） */
  /* rev22-r5 §4: 実測（720px）で 青バーの下端 60px・01 の上端 88px・帯の切替 92px
     ＝ 帯が 01 の行を通っていた。切替を 60+--hd = 88px に上げ、01 を 60+--hd×2 = 116px へ落とす。
     波は 01〜05 の下端（116+200=316px）より下から描く */
  .because{background:linear-gradient(180deg,#ffffff 0px,#ffffff 88px,#e3edf8 88px,#e0eaf5 55%,#e5ebf2 100%)}
  .because__water{top:324px}
  .because__item span{font-size:var(--t-card)}
  /* rev22-r5: 5点の帯・矢印・見出し・写真・バッジは下段のキャンバス（1024px 換算）で
     幅に比例して決まるので、タブレット層の上書きは全部やめた。
     720px なら 1u=0.703px ＝ 写真 67px・キャプション 11px・矢印 111px 相当になる */

  /* --- S08〜S10 feat ----------------------------------------------------- */
  /* rev22-r5 §9: 40℃の図は 0.9 倍（PC の 9割）。この大きさなら一番小さい「設定温度」も
     15×0.9 = 13.5px あるので、SP 層で入れた文字の先出し（28px 等）は元に戻す。
     図の場所は 311×122 → 279.9×109.8px。600px 幅でも左列に収まる（内寸 472px） */
  .feat03__diagram{zoom:.9}
  .feat03 .feat__droptext{font-size:19px;line-height:26px}
  .feat03 .feat__circlelabel{font-size:15px;top:63px;left:0;width:99px}
  .feat03 .feat__circletemp{font-size:29px}

  /* --- S11 voice --------------------------------------------------------- */
  /* カード幅は main.js が min(80%, 560px) で実測して --slide-w に書き込む。
     矢印はカードの左右の縁にかかる位置へ（SP の「20px」だと隣のカードから離れすぎる） */
  .voice__nav--prev{left:calc((100% - var(--slide-w,80vw)) / 2 - 24px)}
  .voice__nav--next{right:calc((100% - var(--slide-w,80vw)) / 2 - 24px)}

  /* --- S16 hygiene ------------------------------------------------------- */
  .tanks__card--3 .tanks__name{font-size:var(--t-card)}

  /* --- S18 spec / S19 strips --------------------------------------------- */
  .spec__label{font-size:var(--t-card)}
  .strips__label{font-size:var(--t-card)}
  .strips__card--3 .strips__label{font-size:var(--t-card)} /* rev22-r6: 1・2・4 と同寸 */

  /* --- S19b extras ------------------------------------------------------- */
  /* エコボタン／チャイルドロックは2列横並び */
  .extras__list{display:grid;grid-template-columns:1fr 1fr;gap:var(--it)}
  /* rev22-r5b §2: 720px で右カードだけ本文が3行になり、2枚のカードは同じ高さ（176.1px）に
     伸びるのに中身が上下中央（align-items:center）だったため、左の見出しだけ 12.7px 下がって
     見出し行が半行ずれていた。カード内を上ぞろえにして、見出しの上端を
     「カード上端＋padding 16px」で必ずそろえる（実測 720px: 左 28.7/右 16.0 → 両方 16.0）。
     800px は元から2行ずつで見出しはそろっていたが、アイコンだけ上下中央（上から 55.3px）
     だったのが 16.0px＝見出しと同じ高さに上がる。720px と同じ「アイコンと見出しが並ぶ」形になる */
  .extras__item{align-items:flex-start}
  .extras__head{font-size:var(--t-card)}

  /* --- S21 app ----------------------------------------------------------- */
  /* アプリ画面2枚を 各220px・中央・間32px に。指示書の grid-template-columns:220px 220px＋
     justify-content:center だと、同じグリッドに乗っている見出しと3項目まで 440px に
     縮んでしまうので、両脇に 1fr の余り列を足した4列にして同じ見た目を作る */
  .app{grid-template-columns:1fr minmax(0,220px) minmax(0,220px) 1fr;
    column-gap:var(--pad);
    grid-template-areas:"title title title title" "card card card card"
                        "list list list list" ". home filter ."}
  .app__phone{margin-top:var(--hd)}
  .app__phone--filter{margin-top:var(--hd)}

  /* --- S22 detail -------------------------------------------------------- */
  .detail__table th,.detail__table td{font-size:var(--t-body)}
  .detail__table th{width:120px}

  }
  /* /min-width:600px（rev22-r4 タブレット層） */

  /* ==========================================================================
     rev22-r5 §9: 460〜599px だけの中間の詰め直し。
     スマホ層の 40℃の図は 0.42 倍（130.6px）に固定してあるが、この幅ではカードの内寸が
     380〜519px あり、右のスープ写真だけが上限（240px）まで育って「スープだけ大きい」に戻る。
     図を 0.62 倍（192.8px）へ上げて、写真と 1:1.2 前後の関係にする。
     0.62 倍だと PC の文字がそのまま使えるので、スマホ層で先に大きくした3つを戻す
     （「設定温度」だけは 15×0.62 = 9.3px と下限割れなので 18px＝11.2px にする）
     ========================================================================== */
  @media (min-width:460px) and (max-width:599.98px){
    .feat03__diagram{zoom:.62}
    .feat03 .feat__droptext{font-size:19px;line-height:26px}
    .feat03 .feat__circlelabel{font-size:18px;top:62px;left:-10px;width:119px}
    .feat03 .feat__circletemp{font-size:29px}
    .feat03 .feat__op--plus{font-size:29px}
    .feat03 .feat__op--eq{font-size:28px}
  }

  /* ==========================================================================
     360px 未満（iPhone SE 第1世代・Android の小型機）だけの詰め直し。
     文字を下限（本文14px / 注記12px）より小さくはしない。詰めるのは余白と見出しだけ
     ========================================================================== */
  /* ==========================================================================
     rev22-r5 §5〜7: 368px 未満だけ、5点の帯の「温度を合わせる」を2行（「温度を／合わせる」。
     HTML の .nobr で折る位置を固定）にする。
     理由は2つ:
       ①1行（11px で 77px）のままだと隣の「測る」との間が 320px で 1.4px しかあかない
       ②帯の幅の下限（220px）が画面幅に対して大きくなりすぎ、右の本体写真が
         360px で 115px（画面の32%。PC は 45.9%）まで痩せる
     2行にすると帯が 556u（PC と同じ比）で足り、写真も PC と同じ 470u に戻る。
     実測 360px: キャプション間 最小 1.4→9.6px ／ 本体写真 115.2→164.9px
     ========================================================================== */
  @media (max-width:367.98px){
    .because__lower{--w5:calc(556 * var(--u))}
    /* rev22-r8: 等幅化に伴い最後の枚の特別扱いを廃止 */
  }

  @media (max-width:359.98px){
    .hero__chips{padding-left:12px;padding-right:12px}
    /* 26px だと「毎日をラクにしてく／れる」と語の途中で折れる（11字×26=286 > 280）。
       24px（264px）で1行に収める */
    .hero__title{font-size:24px}
    .hero__sub{letter-spacing:0}
    .because__item span{font-size:16px}
    .because__item i{width:28px;height:28px;font-size:12px}
    .price__label{font-size:20px}
    .price__num{font-size:52px}
    .price__tax{font-size:12px}
    .price__title{font-size:20px}
    .intro__figure{gap:8px}
    /* 罫線つきの小見出しは、320px だと最後の2〜3字だけ次の行に落ちる */
    .voice__head{gap:8px}
    .voice__rule{min-width:8px}
    .voice__title{font-size:18px}
    .hygiene__lead span{padding:0 6px;font-size:15px}
    .tanks__name{font-size:14px}
    /* 20px だと「使い始めてからもずっとラ／クに PureNextアプリ」と語の途中で折れる */
    .app__title{font-size:20px}
    /* 「毎日に寄り添う、3つの便利。」は 22px＋字送り.04em で 313px 必要。320px の内寸 280px に
       入れるため、字送りを 0 にして 20px に落とす（274px） */
    .kodawari__title{font-size:20px;letter-spacing:0}
    .kodawari__title .num{font-size:24px}
    /* rev22-r5 §9: 320px はカードの内寸 240px。図 130.6px ＋ 隙間 12px ＝ 右の写真が 97px。
       写真がこれ以上小さくならないよう、図をもう一段（0.36 倍＝112.0px）縮める。
       文字は 28×0.36 = 10.1px になるので、キャンバス側を 32px に上げて 11.5px を保つ */
    .feat03__diagram{zoom:.36}
    .feat03 .feat__droptext{font-size:32px;line-height:38px}
    .feat03 .feat__circlelabel{font-size:32px;top:58px;left:-16px;width:131px}
    .feat03 .feat__circletemp{font-size:38px}
    .spec__dimlabel{font-size:10px}
    .spec__dimlabel em{font-size:8px}
    /* rev22-r5 §5〜7: 320〜359px だけ、5点の帯の幅を PC 比どおり（556u）に戻す。
       下限 220px のままだと本体写真が 51px の細帯になってしまうため。
       そのぶん「温度を合わせる」は 2行に折る（HTML の .nobr で「温度を／合わせる」に固定）。
       写真の高さは 96u で固定しているので、2行になっても5つの絵の上下はそろう。
       実測 320px: 帯 173.8px・中心間 43.4px・「測る」と「合わせる」の半幅の和 33px ＝ 10.4px 空く */
    /* zoom .36 だと「＋」「＝」が 10.1〜10.4px になるので、キャンバス側を上げて 11px 以上に */
    .feat03 .feat__op--plus{font-size:32px}
    .feat03 .feat__op--eq{font-size:31px}
  }

} /* /max-width:1023.98px */

/* rev22-r7(2026-09-03): 発注主指示「出水口までしっかり殺菌・水はねしにくい取水口・エコボタン・
   チャイルドロック・10ml単位・常温水/白湯 なども、すべて『選べる5つの温度』と同じフォントと大きさに」。
   スマホ層 18px／タブレット層 22px（--t-card）・太さ 900・書体は本文と同じ Noto Sans JP */
@media (max-width:1023.98px){
  .intro__title,.memory__title,.uvcard__title,.feat .feat__head,.hygiene__solvetitle,
  .spec__label,.strips__label,.strips__card--3 .strips__label,
  .tanks__name,.tanks__card--3 .tanks__name,.extras__head{
    font-size:var(--t-card);font-weight:900;line-height:1.45;font-family:inherit}
}

/* rev22-r9(2026-09-03): スマホ層（≤599）だけのヒーロー。発注主指示「文字は上。もっと引いて本体まで写す。
   家族の顔が見えるように」。文字を写真に重ねると 375px 幅では顔と必ず重なるため、
   文字は写真の上の淡い帯（写真の壁と同じ色味）に置き、その直下に写真を「引き」で置く。
   写真: 高さ 300px・位置 80%/50% → 元画像の横幅 1093px ぶん（ソファ・母・娘・本体・父）が全部入る。
   Fold（600〜1023）と PC はこのブロックの外なので r7 の状態のまま */
@media (max-width:599.98px){
  /* rev22-r10: 発注主指示「文字は写真の中（上）。写真の外に出すな」。r9 の帯方式を撤回。
     文字は写真の上部に重ねる（r7 と同じ）。写真は高さ 372px・位置 80%/0% で引き、
     元画像の横幅 875px ぶん（母・娘・本体・父）が入る。白のかぶせは 160px までで顔を残す */
  /* rev22-r11: 発注主指示「もう少し引く・テーブルをもう少し切る・写真を下にずらして頭に余裕」。
     cover では「引く」と「下を切る」が両立しないので、写真を絶対配置で置く:
       幅 191.5vw（375px で 718px＝拡大率 .399。元画像の横 940px ぶん＝ソファ〜父まで）
       左 −75.7vw（元画像 x≈712 から）／上 +24px（頭の上に余裕。上の 24px は白のかぶせの下）
       写真の枠の高さ 90.7vw（375px で 340px）→ 写真の下 33px（テーブル）が切れる */
  /* rev22-r12: 発注主指示「もっと引いて人を小さく」「文字は少し下げて写真の中に」「チップが写真に食い込まない」。
     写真: 幅 163vw（375px で 612px＝拡大率 .34。元画像の横 1103px ぶん＝ソファ〜観葉植物まで）、
     左 −54.4vw（元画像 x≈600 から）、上 +34px。写真の枠の高さは写真そのもの（79.2vw）＋34px で、
     チップはその直下に来る（写真と重ならない） */
  .hero{overflow:hidden;grid-template-rows:34px auto 6px auto 6px auto 1fr auto}
  .hero::after{content:"";grid-column:1 / -1;grid-row:1 / 8;height:calc(79.2vw + 34px);min-height:0}
  .hero__bg{position:absolute;left:-54.4vw;top:34px;width:163vw;height:auto;max-width:none;
    aspect-ratio:auto;min-height:0;object-fit:fill;z-index:0}
  .hero__chips{padding-bottom:16px}
  .hero::before{height:200px;
    background:linear-gradient(180deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.88) 118px,
      rgba(255,255,255,.45) 160px,rgba(255,255,255,0) 200px)}
  /* 2. 「温度を合わせなくていい」→「今までかけていた手間」の間をスマホだけ詰める */
  .because__lower{margin-top:var(--hd)}
  /* 3. 「3つの便利」の目次ピルの間隔を広く */
  .kodawari__index{gap:12px 12px;margin-top:calc(var(--hd) * 1.5)}
  .kodawari{padding-bottom:calc(var(--hd) * 1.5)} /* rev22-r10: バー→目次 = 目次→カード = 48px */
  .kodawari__index li{padding:0 18px;height:38px}
  /* 4. 価格: 月額を中心に上下の余白を同じに（上=前章末 32 + 48 = 80 / 下=80） */
  /* 価格の余白は下の共通ルール（≤1023）で定義 */
}
/* 5. ストリップ1〜4のカードの高さを揃える: 3 の写真2枚を縦長（8:9）にし、1・2・4 の 16:9 と同じ高さに */
@media (max-width:1023.98px){
  .strips__photo--half{aspect-ratio:8 / 9;height:auto;max-height:none}
}

/* rev22-r10(2026-09-03): 価格ブロック。発注主指示「月額3,300円を中心に上下の余白を同じにし、両方とも広く。
   タブレットにも適用」。上 = 前章の下余白(--hd) + ここ(112) ／ 下 = 税込の下(12) + 見出しの上(116) ＝ どちらも約 144px */
@media (max-width:1023.98px){
  .price{padding:112px var(--pad) var(--hd)}
  .price__title{margin-top:116px}
}
/* rev22-r10: タブレット層の 40℃モード。スープ写真が図（熱水＋冷水＝40℃）に重なっていた。
   図の列を 300px 固定、写真は右列の右寄せ・幅は列の残り */
@media (min-width:600px) and (max-width:1023.98px){
  .feat03{grid-template-columns:300px minmax(0,1fr);column-gap:var(--hd)}
  .feat03__photo{justify-self:end;max-width:100%}
}

/* rev22-r11(2026-09-03): 発注主指示「40℃モードの図は、熱水＋冷水を1段目、＝を下向きにして、その下に 40℃。縦に」
   スマホ・タブレット共通。PC はそのまま。図の器は 176×283（ズームで縮める） */
@media (max-width:1023.98px){
  .feat03__diagram{width:176px;height:283px}
  .feat__drop{top:0}
  .feat__drop--hot{left:0}
  .feat__drop--cold{left:103px}
  .feat__op--plus{left:68px;top:44px}
  .feat__op--eq{left:68px;top:126px;transform:rotate(90deg) scaleY(1.3)}
  .feat__circle{left:38px;top:170px}
}
@media (max-width:599.98px){
  .feat03{grid-template-columns:110px minmax(0,1fr)}
  .feat03__diagram{zoom:.58}
  .feat03 .feat__droptext{font-size:22px;line-height:26px}
  .feat03 .feat__circlelabel{font-size:19px;top:62px;left:-8px;width:115px}
  .feat03 .feat__circletemp{font-size:30px}
  .feat03 .feat__op--plus{font-size:29px}
  .feat03 .feat__op--eq{font-size:28px}
}
@media (min-width:600px) and (max-width:1023.98px){
  .feat03{grid-template-columns:170px minmax(0,1fr)}
  .feat03__diagram{zoom:.85}
  .feat03 .feat__droptext{font-size:19px;line-height:26px}
  .feat03 .feat__circlelabel{font-size:16px;top:63px;left:0;width:99px}
  .feat03 .feat__circletemp{font-size:29px}
}

/* rev22-r13(2026-09-03): 99.9% の証明ブロック（スマホ・タブレット） */
@media (max-width:1023.98px){
  .hygiene__proof{margin:var(--hd) 0 0;width:auto;padding:20px 16px 18px;border-radius:var(--r-card)}
  .hygiene__prooflead{font-size:15px}
  .hygiene__proofnum{font-size:var(--t-card);margin-top:2px}
  .hygiene__proofnum em{font-size:56px}
  .hygiene__proofpct{font-size:28px;margin-right:6px}
  .hygiene__proofnote{margin-top:10px;font-size:var(--t-note);line-height:1.6}
}
@media (min-width:600px) and (max-width:1023.98px){
  .hygiene__proof{max-width:560px;margin-left:auto;margin-right:auto;padding:24px 24px 20px}
  .hygiene__proofnum em{font-size:72px}
  .hygiene__proofpct{font-size:34px}
}