/* A案『暮らしの手帖』（#318、Kelumさん 2026-10-23 16:37 決定）。決まりは ops/design-review/water-design-rules.md。
   style.css の後に読み込んだページだけがこの見た目になる（2026-10-23 はトップだけ。全ページへ広げる前に #318 で確認）。
   文字：見出し Shippori Mincho B1・本文 Zen Kaku Gothic New（自前の部分フォント。tools/font_subset.py）
   色：地 #F5F1EA・文字 #1F2321・差し色 #1D5C73／角丸なし・影なし・カードや丸いバッジをやめて細い罫線で区切る
   章番号「01 02」／黒の主ボタン1種／写真は縦4:5（届くまでは同じ比率の無地の枠）。数字・計算・PR表記・出典は変えない。 */
@font-face{font-family:"TC Mincho";src:url(fonts/tc-mincho-800.f8c6ad66.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"TC Gothic";src:url(fonts/tc-gothic-400.d0282f27.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"TC Gothic";src:url(fonts/tc-gothic-700.1776da3a.woff2) format("woff2");font-weight:600 900;font-display:swap}
:root{
--tc-bg:#F5F1EA;--tc-ink:#1F2321;--tc-sub:#555A57;--tc-acc:#1D5C73;--tc-acc-d:#123E4E;--tc-line:#DDD6CA;--tc-line2:#CFC7B8;--tc-frame:#D9D1C4;
--tc-mincho:"TC Mincho","Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
--tc-gothic:"TC Gothic","Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
--ink:var(--tc-ink);--fg:var(--tc-ink);--muted:var(--tc-sub);--bg:var(--tc-bg);--soft:#EFEAE1;--line:var(--tc-line);--line2:var(--tc-line2);
--brand:var(--tc-acc);--brand-d:var(--tc-acc-d);--brand-dd:var(--tc-acc-d);--brand-l:#E8E2D7;--brand-ll:#EFEAE1;
--accent:var(--tc-ink);--accent-d:var(--tc-ink);--accent-h:#000;
--j:var(--tc-acc);--j-d:var(--tc-acc-d);--j-l:transparent;--j-b:var(--tc-line2);
--t:#5B4A2E;--t-d:#4A3C25;--t-l:transparent;--t-b:var(--tc-line2);
--r:0;--sh:none;--sh2:none
}
body{background:var(--tc-bg);color:var(--tc-ink);font-family:var(--tc-gothic);letter-spacing:.02em}
h1,h2,h3{font-family:var(--tc-mincho);font-weight:800;color:var(--tc-ink)}
a{color:var(--tc-acc)}a:hover{color:var(--tc-acc-d)}
:focus-visible{border-radius:0;outline-color:var(--tc-acc)}

/* ヘッダー：明朝のサイト名、白地をやめて地の色、罫線1本 */
header.site{background:var(--tc-bg);border-bottom:1px solid var(--tc-line)}
header.site .brand{font-family:var(--tc-mincho);font-weight:800;letter-spacing:.08em}
header.site .brand .bname b{color:inherit}
header.site .logo{display:none}   /* A案のヘッダーは明朝のサイト名だけ（青いしずくのロゴは地の色に合わない） */
.logo{filter:none}
nav.gnav a{color:var(--tc-sub);font-weight:500}
nav.gnav a[aria-current="page"]{color:var(--tc-ink);border-bottom-color:var(--tc-ink);border-bottom-width:2px}
.pr-top{margin:0 -16px;padding:6px 16px;font-size:11.5px;letter-spacing:0;color:var(--tc-sub);border-bottom:1px solid var(--tc-line)}
.pr-top::before{border-radius:0}

/* ===== 最初の画面：大きな写真 → 明朝の見出し → 下線タブ → 罫線の結果リスト → 黒のボタン ===== */
.hero{margin:0 -16px;padding:0 0 8px;background:none;border:0;border-radius:0}
.fv-head{display:flex;flex-direction:column}
.fv-head .fv-photo{order:-1;margin:0 0 28px;border-radius:0;box-shadow:none;aspect-ratio:4/5;max-height:72vh;background:var(--tc-frame)}
.fv-head .fv-photo img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover;background:var(--tc-frame)}
/* #511 案1（tools/fv_illu_mode.py が書く。手で直さない）：写真が届くまで、枠の中に場面イラストを A案の色で */
.fv-head .fv-illu svg{display:block;width:100%;height:100%}
.fv-head .fv-illu figcaption{display:block}
.fv-head .fv-illu{background:#CDBFA8}
.fv-head .fv-illu svg [fill="#e7f2fb"],.fv-head .fv-illu svg [fill="#f3f9fe"],.fv-head .fv-illu svg [fill="#f3f7fb"],.fv-head .fv-illu svg [fill="#eef3f8"]{fill:#E9E2D6}
.fv-head .fv-illu svg [fill="#d9c4a6"]{fill:#CDBFA8}
.fv-head .fv-illu svg [fill="#c9b08d"],.fv-head .fv-illu svg [fill="#c9a77c"]{fill:#B5A68D}
.fv-head .fv-illu svg [stroke="#bdd8ee"],.fv-head .fv-illu svg [stroke="#c6d4e2"],.fv-head .fv-illu svg [stroke="#dde5ee"],.fv-head .fv-illu svg [stroke="#9fb4c8"]{stroke:#C9BFAF}
.fv-head .fv-illu svg [fill="#c6d4e2"]{fill:#C9BFAF}
.fv-head .fv-illu svg [fill="#0c3554"],.fv-head .fv-illu svg [fill="#0f1f2e"]{fill:#1F2321}
.fv-head .fv-illu svg [fill="#0b62a0"],.fv-head .fv-illu svg [fill="#0b7a55"]{fill:#1D5C73}
.fv-head .fv-illu svg [stroke="#0b7a55"]{stroke:#1D5C73}
.fv-head .fv-illu svg [fill="#8fd0f5"]{fill:#9DBAC4}
.fv-head .fv-illu svg [stroke="#5bb4ea"]{stroke:#7FA7B5}
.fv-head .fv-photo figcaption{top:12px;right:14px;bottom:auto;background:rgba(245,241,234,.9);color:#3A3935;border-radius:0;font-size:11px;padding:2px 8px}
.fv-head>:not(.fv-photo){margin-left:20px;margin-right:20px}
.eyebrow{display:block;background:none;border:0;border-radius:0;padding:0;font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--tc-acc);line-height:1.7}
.eyebrow::before{display:none}
.hero h1{font-size:34px;line-height:1.42;letter-spacing:.02em;margin:14px 0 16px}
.hero h1 small{display:block;margin-top:14px;font-family:var(--tc-gothic);font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1.6;color:var(--tc-sub)}
.fv-lead{font-size:15px;line-height:1.9;color:#3A3F3C;margin:0 0 4px}
.fv-lead b{color:var(--tc-ink);font-weight:700}

/* 条件：枠のボタンをやめて下線のタブ */
.fvcalc{margin:24px 20px 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;gap:18px}
.seg legend{float:none;width:auto;min-height:0;display:block;font-size:12px;font-weight:500;color:var(--tc-sub);margin:0 0 6px}
.seg legend small{display:inline;font-size:12px;font-weight:500;margin-left:.3em}
.seg legend+div{margin-left:0}
.seg>div{gap:0;border-bottom:1px solid var(--tc-line2)}
.seg label{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--tc-sub);font-weight:500;font-size:15px;min-height:44px;margin-bottom:-1px;box-shadow:none}
.seg label small{color:var(--tc-sub);font-weight:400}
.seg label:hover{border-color:transparent;border-bottom-color:var(--tc-line2);color:var(--tc-ink)}
.seg input:checked+label{background:none;color:var(--tc-ink);font-weight:700;border-bottom-color:var(--tc-ink);box-shadow:none}
.seg input:checked+label small{color:var(--tc-sub)}
.sw{font-size:13px;color:var(--tc-sub)}
details.rg{background:none;border:0;border-top:1px solid var(--tc-line);border-radius:0}

/* 結果：カードをやめて罫線のリスト。金額は明朝 */
.fv-right{margin:0 20px}
.fvres{margin:20px 0 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.fv-cond b{display:block;font-size:12px;font-weight:500;color:var(--tc-sub)}
.fv-cond span{font-size:11.5px;font-weight:400}
.fv-list{gap:0}
.fv-list li{padding:16px 0;gap:4px 12px;border-bottom:1px solid var(--tc-line)}
.fv-list li:last-child{border-bottom:1px solid var(--tc-line)}
.fv-list li:hover{background:rgba(31,35,33,.03)}
.fv-list li:focus-within{outline-color:var(--tc-ink)}
.fv-list .nm{font-size:15px;font-weight:700;letter-spacing:.02em}
.fv-list .nm a::before{color:var(--tc-ink);font-weight:400}
.fv-list .ty .badge{background:none;border:1px solid currentColor;border-radius:0;font-weight:500}
.fv-list .bar{display:none}
.fv-list .tot strong,.fv-list li:first-child .tot strong{font-family:var(--tc-mincho);font-weight:800;font-size:26px;color:var(--tc-ink);letter-spacing:0}
.fv-list .tot small{font-size:12px;color:var(--tc-sub)}
.fv-gap{border-top:1px solid var(--tc-line)}
.fv-gap b{color:var(--tc-ink)}

/* ボタン：黒の主ボタン1種。2つ目は文字のリンクに */
.btn{border-radius:0;box-shadow:none;font-weight:700;letter-spacing:.04em}
.btn.primary{background-color:var(--tc-ink);color:var(--tc-bg);box-shadow:none;justify-content:space-between;padding:0 22px;min-height:56px}
.btn.primary::after{content:"";width:18px;height:10px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center/18px 10px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center/18px 10px no-repeat}
.btn.primary:hover{background-color:#000;color:var(--tc-bg)}
.btn.primary:active{transform:none;box-shadow:none}
.btn.secondary,.fv-cta .btn.secondary{background:none;border:0;border-bottom:1px solid var(--tc-ink);color:var(--tc-ink);min-height:44px;justify-content:space-between;padding:0 2px}
.btn.secondary:hover{background:none;color:#000}
.btn-detail{border-radius:0;background:none;border:1px solid var(--tc-ink);color:var(--tc-ink)}
.btn-detail:hover{background:rgba(31,35,33,.04);color:var(--tc-ink)}
.fv-cta{margin-top:24px;gap:6px}
.fv-rest{font-size:12px;line-height:1.7}
.stickycta{background:rgba(245,241,234,.96);border-top:1px solid var(--tc-line);box-shadow:none}
.stickycta .btn.primary{min-height:48px;padding:6px 18px;letter-spacing:0}
@media(max-width:359px){.stickycta .btn.primary{justify-content:center;padding:6px 10px}.stickycta .btn.primary::after{display:none}}   /* 文字200%でも画面の25%以内（shot_mokuteki_a11y） */

/* ===== 本文：章番号つきの見出し（01 02 …）と罫線 ===== */
main{counter-reset:tc-ch}
main>h2,main>section>h2{counter-increment:tc-ch;display:flex;align-items:baseline;gap:12px;margin:64px 0 24px;padding:14px 0 0;border-top:1px solid var(--tc-ink);font-size:22px;line-height:1.45}
main>h2::before,main>section>h2::before{content:counter(tc-ch,decimal-leading-zero);position:static;width:auto;border-radius:0;background:none;font-size:13px;font-weight:800;flex:none}
h3{font-weight:800}
.note{color:var(--tc-sub)}

/* よくある疑問（人物＋吹き出し）：丸い吹き出しをやめて罫線のリンク */
.voice{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.voice-photo{border-radius:0}
.bubbles a{border-radius:0 !important;background:none !important;border:0 !important;border-bottom:1px solid var(--tc-line) !important;box-shadow:none !important}
.bubbles a::before,.bubbles a::after{display:none !important}
.bubbles .q{font-family:var(--tc-mincho);font-weight:800;color:var(--tc-ink)}

/* 信頼の4項目：アイコンの箱をやめて、太字の一言＋説明 */
.trust{gap:0 16px;border-top:1px solid var(--tc-ink);margin:56px 0 0}
.trust li{background:none;border:0;border-bottom:1px solid var(--tc-line);border-radius:0;padding:14px 0;font-size:13px}
.trust li::before,.trust li::after{display:none}
.trust b{font-size:14px}

/* 表・カード：角丸と影をやめて罫線 */
.tablewrap{border-radius:0;box-shadow:none;border-color:var(--tc-line)}
table{background:none}
th,td{border-color:var(--tc-line)}
thead th{background:#EFEAE1;color:var(--tc-ink)}
table.mk .mk-photo,table.mk .mk-photo img,table.mk .mk-illu,.pt-ill,.type,.points li,.faq details,.fq,.qtabs label,.badge{border-radius:0 !important;box-shadow:none !important}
.type{background:none;border:0;border-top:1px solid var(--tc-line)}
.points li{background:none;border:0;border-top:1px solid var(--tc-line)}
.fq{background:none;border:0;border-bottom:1px solid var(--tc-line)}
footer.site{background:var(--tc-ink)}
/* フッターのサイト名：ヘッダーと同じ明朝の文字だけ（水色の「比較」・青い角丸のしずくをやめる。#526 水担当B 10/25 依頼） */
footer.site .brand{font-family:var(--tc-mincho);font-weight:800;letter-spacing:.08em}
footer.site .bname b{color:inherit}
footer.site .logo{display:none}
/* フッターの文字：旧デザインの青みの灰（#C7D6E4・#E6EEF6・#AFC2D4）をやめ、A案の生成りの濃淡に（#526 水担当B 10/25 05:0x 依頼） */
footer.site{color:#DDD6CA}
footer.site a,footer.site .pr{color:#F5F1EA}
footer.site a:hover{color:#FFFFFF}
footer.site .copy{color:#CFC7B8}

/* 目的別の答え：白いカードをやめて、罫線で区切る行（絵・写真は角なし） */
table.mk tbody{gap:0}
table.mk tr{border:0;border-top:1px solid var(--tc-line);border-radius:0;background:none;box-shadow:none;padding:16px 0 20px}
table.mk tbody th{background:none;padding:0 0 10px;font-family:var(--tc-mincho);font-weight:800;font-size:17px;border:0}
table.mk tbody th::before{display:none}
table.mk td{background:none!important;padding:0}
table.mk .mk-photo,table.mk .mk-photo:is(*){margin:4px 0 12px}
table.mk td strong{font-family:var(--tc-mincho);font-weight:800;font-size:24px;color:var(--tc-ink)}
table.mk a.go{border:0;border-bottom:1px solid var(--tc-ink);border-radius:0;color:var(--tc-ink);justify-content:space-between;font-weight:700}
table.mk a.go:hover{background:none}
.fv-list li.t .ty .badge,.badge.t{color:#4A3C25}
.fv-list li.j .ty .badge,.badge.j{color:var(--tc-acc)}

@media(min-width:900px){
 .pr-top{margin:0;padding:6px 0}
 .hero{margin:0;padding:40px 0 16px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:"photo eb" "photo h1" "photo lead" "photo form" "photo right" "photo .";column-gap:56px;align-items:start}
 .fv-head{display:contents}
 .fv-head .fv-photo{grid-area:photo;margin:0;max-height:none;position:sticky;top:16px}
 .fv-head>:not(.fv-photo){margin-left:0;margin-right:0}
 .fv-head .eyebrow{grid-area:eb}.fv-head h1{grid-area:h1}.fv-head .fv-lead{grid-area:lead}
 .hero h1{font-size:44px;margin:16px 0 18px}
 .fv-lead{font-size:16px}
 .fvcalc{grid-area:form;margin:28px 0 0;padding:0}
 .fv-right{grid-area:right;margin:0}
 .fvres{margin:24px 0 0;padding:0}
 .fv-list li{padding:18px 0}
 .fv-list .tot strong,.fv-list li:first-child .tot strong{font-size:30px}
 .seg legend{width:auto}.seg legend+div{margin-left:0}
 .seg label{min-height:48px;font-size:16px}
 .trust{margin:64px 0 0;grid-template-columns:repeat(4,1fr);column-gap:24px}
 .trust li{padding:16px 0}
 main>h2,main>section>h2{font-size:26px;margin-top:88px}
}
@media(min-width:640px){table.mk tbody{column-gap:24px}}
/* #439：タブレット縦（640〜899px）。1段のままだと 4:5 の枠が幅いっぱい（768px で高さ約740px）になり、見出しと計算が最初の画面から消える
   → PC と同じ「左に写真・右に見出しと計算」の2段に。写真の列を狭め（4:6）、見出しはスマホと同じ 34px */
@media(min-width:640px) and (max-width:899px){
 .hero{margin:0;padding:24px 0 8px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:"photo eb" "photo h1" "photo lead" "photo form" "photo right" "photo .";column-gap:28px;align-items:start}
 .fv-head{display:contents}
 .fv-head .fv-photo{grid-area:photo;margin:0;max-height:none;position:sticky;top:16px}
 .fv-head>:not(.fv-photo){margin-left:0;margin-right:0}
 .fv-head .eyebrow{grid-area:eb}.fv-head h1{grid-area:h1}.fv-head .fv-lead{grid-area:lead}
 .hero h1{margin:10px 0 14px}
 .fvcalc{grid-area:form;margin:20px 0 0;padding:0}
 .fv-right{grid-area:right;margin:0}
 .fvres{margin:20px 0 0;padding:0}
}

/* ===== #456：トップの下半分に残っていた旧デザインの部品を A案の色・形に（見た目だけ。文言・数字・リンクは変えない） ===== */
/* 絵の地：旧デザインの水色 #e7f2fb を、地より一段濃い生成り #E9E2D6 に（CSS の fill は SVG の属性より強い） */
table.mk .mk-illu{background:#E9E2D6}
table.mk .mk-illu svg [fill="#e7f2fb"],table.mk .mk-illu svg [fill="#eef5fb"]{fill:#E9E2D6}
table.mk .mk-photo figcaption,.voice-photo figcaption{border-radius:0}
table.mk .mk-photo figcaption{background:rgba(31,35,33,.62)}
/* 比べるときの4つのポイントの図：地・枠・文字を A案の色に、角丸なし */
.pt-ill>rect:first-child{fill:#E9E2D6;rx:0}
.pt-ill rect{rx:0}
.pt-ill [stroke="#bdd8ee"]{stroke:var(--tc-line2)}
.pt-ill [fill="#084a7a"],.pt-ill [fill="#0b62a0"]{fill:var(--tc-ink)}
/* まず決めること：型の小さな絵の地（青・緑の角丸）を生成りの四角に。「詳しく」の丸いボタンは下線の文字リンクに */
.type .ill>rect:first-child{fill:#E9E2D6;rx:0}
.type .tb a{border-radius:0;background:none;border:0;border-bottom:1px solid var(--tc-ink);padding:0 2px;color:var(--tc-ink)}
.type .tb a:hover{background:none;color:#000}
/* #318 G2（10/25）：型の場面イラスト（tools/type_illu.py）も目的別の絵と同じ生成りの地・四角 */
.type .type-illu{background:#E9E2D6;border-radius:0}
.type .type-illu svg [fill="#e7f2fb"]{fill:#E9E2D6}
.type-illu figcaption{border-radius:0;background:rgba(31,35,33,.62)}
/* よくある疑問の人物：丸い水色の地をやめて四角の生成り */
.voice-illu svg{border-radius:0;background:#E9E2D6}
.voice-illu svg>circle:first-child{fill:#E9E2D6}
/* かんたん比較：枠のタブを下線のタブに、スマホのカードを罫線の行に、行見出しのグラデーションをやめる */
.qtabs{background:none;border:0;border-bottom:1px solid var(--tc-line2);border-radius:0;padding:0;gap:0}
.qtabs label{border-radius:0;color:var(--tc-sub);font-weight:500;min-height:44px;border-bottom:2px solid transparent;margin-bottom:-1px}
.qtabs input:checked+label{background:none;box-shadow:none;color:var(--tc-ink);font-weight:700;border-bottom-color:var(--tc-ink)}
table.quick tr{border-radius:0;box-shadow:none;background:none}
table.quick th,table.quick tbody th{background:#EFEAE1}
/* よくある質問：見出しと開閉の角丸をやめる */
.faq h3,.faq details.fq>summary,.faq details.fq h3{border-radius:0}
.faq h3{background:none}
.faq details.fq{background:none;border:0;border-top:1px solid var(--tc-line);margin:0}
.faq details.fq:last-of-type{border-bottom:1px solid var(--tc-line)}

/* #550（#318 G2）：PC（960px 以上）でも目的別の答えを2列に（3列だと場面の絵・写真が 333×187px と小さく、PC のトップの写真・図の面積が 11.9%）。
   1枚 約500×280px（16:9 のまま）。4つのポイントの図もカードの幅いっぱいに。文字・数字・リンクは変えない */
@media(min-width:960px){
 table.mk tbody{grid-template-columns:1fr 1fr;column-gap:40px}
 ol.points .pt-ill{max-width:none}
}

/* トップの main の A案にない色（水担当 10/25 05:1x。tools/shot_tehcho_colors.cjs index.html で洗い出し。下層は tehcho-sub.css 11・20・22 と同じ値。文字・大きさ・位置は変えない）
   ・最初の画面のリード文 #3A3F3C → 文字色、写真の説明 #3A3935 → 補助の文字
   ・比べる表 table.quick（スマホはカード）の白い地・PC の偶数行 #FAFCFE、表の枠 .tablewrap の白い地 → 地の色のまま（偶数行はごく薄い墨）
   ・よくある質問の「A」の札 薄い桃色 #FDEEE6 → 生成り #EFEAE1＋文字色 */
.fv-lead{color:var(--tc-ink)}
.fv-head .fv-photo figcaption{color:var(--tc-sub)}
.tablewrap,table.quick tr{background:transparent}
table.quick td{background:transparent!important}
table.quick tbody tr:nth-child(even) td{background:rgba(31,35,33,.025)!important}
.faq h3+p::before,.faq details.fq>p::before{background:#EFEAE1;color:var(--tc-ink)}
/* #318 G2：トップ「主要5社のかんたん比較」の月々の目安の横棒グラフ（gen_quick.cjs が生成） */
figure.qchart{margin:14px 0 18px;padding:12px 10px 10px;background:#EFEAE1;border:1px solid var(--tc-line)}
figure.qchart svg{display:block;width:100%;height:auto;max-width:500px;font-family:var(--tc-gothic)}
figure.qchart figcaption{margin-top:6px;font-size:.8rem;line-height:1.6;color:var(--tc-sub)}
.faq .faq-illu{background:#E9E2D6;border-radius:0}
.faq .faq-illu svg [fill="#e7f2fb"],.faq .faq-illu svg [fill="#f3f7fb"]{fill:#E9E2D6}
.faq .faq-illu figcaption{border-radius:0;background:rgba(31,35,33,.62)}
/* #619（#318 G2）：トップ「主要5社のかんたん比較」のスマホのカードで、浄水型→宅配水の境目（クリクラのカードの見出しの頭）に2コマの場面の絵（tools/sub_illu.py QROW・type_illu.quick_figure）。
   スマホ（〜719px）だけ。「浄水型」のタブではクリクラの行ごと隠れる。PC・タブレットは表のまま出さない。カードの上端いっぱいに置き、各コマの下に1行（型の違い）。注記は絵の右上（下の1行と重ねない） */
table.quick .qs-illu{display:none}
table.quick .qs-illu figcaption{border-radius:0;background:rgba(31,35,33,.62)} /* 非表示の幅でも A案の色（shot_tehcho_colors は非表示の要素も見る） */
@media(max-width:719px){
 table.quick .qs-illu{display:block;margin:-10px -14px 10px;max-width:none;border-radius:0;box-shadow:none;background:#F5F1EA;border-bottom:1px solid #DDD6CA}
 table.quick .qs-illu svg{display:block;width:100%;height:auto;aspect-ratio:16/10}
 table.quick .qs-illu svg [fill="#e7f2fb"],table.quick .qs-illu svg [fill="#f3f7fb"]{fill:#E9E2D6}
 table.quick .qs-illu svg .qs-gap{fill:#F5F1EA}
 table.quick .qs-illu .qs-lab{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;margin:0;padding:6px 10px 8px;font-size:12px;line-height:1.5;font-weight:700;color:#1F2321;word-break:auto-phrase;text-wrap:pretty}
 table.quick .qs-illu .qs-lab span:first-child{color:#1D5C73}
 table.quick .qs-illu .qs-lab span:last-child{color:#5B4A2E}
 table.quick .qs-illu figcaption{bottom:auto;top:6px}
 table.quick .qs-illu figcaption{white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:clip}
}
@media(max-width:340px){
 table.quick .qs-illu figcaption{font-size:9px;padding:1px 4px}
}
/* #526（水担当B 10/26 12:3x・13:3x の指摘）：トップの見出しも下層（tehcho-sub.css 80・101）と同じく文節で折り、行の長さをそろえる。
   320px の h2「4つのポイ／ント」と、FAQ の開閉式の見出しの最後の行が「か？」だけになるのを防ぐ。文字・HTML は不変 */
main h2,.faq details.fq h3{word-break:auto-phrase;line-break:strict;text-wrap:balance}
/* #515 見出し案C（tools/fv_h1_mode.py が書く。手で直さない）：eyebrow（2026年10月・各社公式の料金で計算）を写真の左下に札として重ね、h1 は枠の直下に2行。スマホだけ */
@media(max-width:639px){
.fv-head .fv-photo{margin-bottom:14px}
.fv-head .eyebrow{position:relative;z-index:1;align-self:flex-start;margin:-42px 0 20px 12px;padding:3px 10px;background:rgba(245,241,234,.94);color:var(--tc-acc-d);font-size:11.5px;line-height:1.6}
.hero .fv-head h1{font-size:30px;line-height:1.38;margin-top:0;margin-bottom:10px}
.hero .fv-head h1 br:nth-of-type(2){display:none}
.hero .fv-head h1 small{margin-top:6px;font-size:12.5px;line-height:1.5}
}