/* ============================================================
くらべごはん 共通スタイル
palette: 黄色バンド＋オレンジを主役に、明るく親しみやすく
※配達のがっこうのCSSを土台にしているが、色の変数名は緑固定の
--green ではなく中立の --brand に改名済み（2026-08-11）。
色を変えるときはこの :root だけ触れば全体に効く。
※3ジャンル（宅食＝緑／食材宅配＝青／デリバリー＝橙）はそれぞれ
専用色を持たせ、どのページにいるか色で分かるようにしている。
============================================================ */
:root{
--nav-h:68px; /* 固定ナビの高さ。比較表の見出しを貼り付ける位置に使う */
--bg:#fffdf8; /* ごく薄いクリーム */
--surface:#ffffff;
--ink:#3b2e27; /* やわらかい焦げ茶の黒 */
--ink-soft:#7c6b60;
--line:#f2e6d8;
--brand:#f57320; /* オレンジ・主役 */
--brand-deep:#d9530a;
--brand-soft:#fff0e3;
--brand-tint:#fff8f2;
--amber:#f5a623; /* アクセント（お得・特典） */
--ink-on-brand:#ffffff;
/* 上部バンドの黄色。ロゴ帯・フッター帯・見出しの飾りに使う */
--sun:#ffce4a;
--sun-deep:#f5b312;
--sun-soft:#fff6d9;
/* CTAのピンク。ここぞの1箇所だけに使い、押す場所を迷わせない */
--pink:#fa4e72;
--pink-lt:#ff7e9b;
/* 3ジャンルの色 */
--g-shoku:#52b45b; /* 宅食＝緑 */
--g-shoku-soft:#eef8ef;
--g-shokuzai:#3b9fe0; /* 食材宅配＝青 */
--g-shokuzai-soft:#eaf5fc;
--g-deli:#ff7a45; /* デリバリー＝橙 */
--g-deli-soft:#fff0ea;
/* ロゴマーク：長さの違う3本のバー＝「くらべる」を表す。
.brand .mark::after が mask としてこれを使うので、単色シルエットでよい */
--glyph-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='11' y='15' width='42' height='9' rx='4.5'/%3E%3Crect x='11' y='27.5' width='26' height='9' rx='4.5'/%3E%3Crect x='11' y='40' width='34' height='9' rx='4.5'/%3E%3C/svg%3E");
--shadow:0 1px 2px rgba(120,80,40,.05),0 8px 22px rgba(120,80,40,.07);
--shadow-lg:0 4px 12px rgba(120,80,40,.08),0 22px 44px rgba(120,80,40,.11);
--r:20px; /* まるっとした丸み */
--r-sm:13px;
--r-pill:999px;
/* 見出しは丸ゴシック。日本語で「やさしさ・親しみ」を出す一番効く手。
Google Fontsは日本語を使う文字だけ小分けで配るので、見出し用途なら軽い。
読み込めなかった場合に備え、OS標準の丸ゴシックを後ろに並べてある */
--display:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
--body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* ===== shared shell ===== */
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}
@media(max-width:560px){.wrap{padding:0 1.1rem}}
/* ===== top nav ===== */
.nav{position:sticky;top:0;z-index:100;background:rgba(253,249,245,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:1rem;height:68px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
/* ロゴマーク（2026-08-25）：器に3本の比較バーが乗ったアイコン画像に差し替えた。
HTMLは のままなので、CSSを直すだけで全ページ（54箇所）が切り替わる。
画像は168px（42pxの4倍）でRetinaでも滲まない。角丸は画像側にも入っているが、
端まで塗りたいので border-radius はCSS側でかけている。 */
.brand .mark{width:42px;height:42px;border-radius:13px;position:relative;
background:url("../img/logo-mark.png?v=20260825") center/cover no-repeat;
box-shadow:0 2px 8px rgba(120,80,40,.16)}
.brand .bt{display:flex;flex-direction:column;line-height:1.15}
.brand .bt .n{font-size:1.05rem;font-weight:800;letter-spacing:.01em;color:var(--ink)}
.brand .bt .n em{color:var(--brand-deep);font-style:normal}
.brand .bt .s{font-size:.62rem;color:var(--ink-soft);font-family:var(--mono);letter-spacing:.04em}
.nav-links{margin-left:auto;display:flex;gap:.3rem;align-items:center}
.nav-links a{font-size:.86rem;color:var(--ink-soft);text-decoration:none;padding:.5rem .8rem;border-radius:var(--r-pill);transition:.15s}
.nav-links a:hover{color:var(--ink);background:var(--brand-soft)}
.nav-cta{background:var(--ink);color:#fff!important;font-weight:700;padding:.5rem 1.1rem!important}
.nav-cta:hover{background:var(--brand-deep)!important;color:#fff!important}
/* モバイル：リンクを隠さず2段目の横スクロール列に（回遊を守る） */
@media(max-width:780px){
/* モバイルはナビが2段になるので、貼り付け位置もそれに合わせる */
:root{--nav-h:92px}
.nav-in{flex-wrap:wrap;height:auto;padding:.55rem 0;row-gap:.15rem}
.nav-links{width:100%;order:3;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:.2rem;padding-bottom:.25rem;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a:not(.nav-cta){display:inline-flex;font-size:.8rem;padding:.35rem .7rem;white-space:nowrap}
.nav-links .nav-cta{white-space:nowrap;font-size:.8rem}
}
/* ===== hero ===== */
.hero{position:relative;overflow:hidden;padding:3.4rem 0 2rem}
.hero::before{content:"";position:absolute;inset:0;background:
radial-gradient(60% 50% at 85% 0%,rgba(226,102,44,.10),transparent 70%),
radial-gradient(40% 40% at 0% 100%,rgba(229,167,35,.07),transparent 70%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
@media(max-width:880px){.hero-in{grid-template-columns:1fr;gap:1.8rem}}
.hero .pill{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--brand-deep);font-size:.76rem;font-weight:700;padding:.4rem .85rem;border-radius:var(--r-pill);margin-bottom:1.3rem}
.hero .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(226,102,44,.2);animation:pilldot 2.2s ease-in-out infinite}
@keyframes pilldot{0%,100%{box-shadow:0 0 0 3px rgba(226,102,44,.2)}50%{box-shadow:0 0 0 6px rgba(226,102,44,.08)}}
.hero h1{font-family:var(--display);font-size:clamp(2.05rem,5.2vw,3.25rem);line-height:1.18;letter-spacing:-.02em;font-weight:800;margin-bottom:1.1rem}
.hero h1 .hl{position:relative;white-space:nowrap;background:linear-gradient(120deg,var(--brand-deep) 0%,var(--brand) 55%,#f2a33d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .hl::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.08em;height:.42em;background:rgba(226,102,44,.16);z-index:-1;border-radius:3px}
.hero p.sub{font-size:1.05rem;color:var(--ink-soft);max-width:30em;margin-bottom:1.7rem}
.hero .btns{display:flex;gap:.7rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;padding:.8rem 1.4rem;border-radius:var(--r-pill);text-decoration:none;transition:.18s;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);color:#fff;box-shadow:0 6px 18px rgba(226,102,44,.30)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 10px 24px rgba(226,102,44,.38)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-deep)}
.hero .reassure{margin-top:1.1rem;font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;gap:.4rem}
/* ===== hero dashboard card (signature) ===== */
.dash{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:1.3rem;position:relative}
.dash .dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.dash .dash-top .ttl{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.dash .dash-top .live{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;font-family:var(--mono);color:var(--brand-deep);background:var(--brand-soft);padding:.2rem .55rem;border-radius:var(--r-pill)}
.dash .dash-top .live .d{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.dash .big{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.2rem}
.dash .big .v{font-family:var(--mono);font-size:2.7rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
.dash .big .u{font-size:1rem;color:var(--ink-soft);font-weight:700}
.dash .big .delta{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--brand-deep);background:var(--brand-soft);padding:.2rem .5rem;border-radius:var(--r-pill)}
.dash .cap{font-size:.74rem;color:var(--ink-soft);margin-bottom:1.1rem}
.dash .bars{display:flex;align-items:flex-end;gap:5px;height:64px;padding:.4rem 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin-bottom:1rem}
.dash .bars i{flex:1;background:linear-gradient(var(--brand),var(--brand-soft));border-radius:4px 4px 2px 2px;opacity:.85;animation:grow .9s ease both}
@keyframes grow{from{height:0!important;opacity:0}}
.dash .legend{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.dash .legend div{background:var(--brand-tint);border-radius:var(--r-sm);padding:.6rem .7rem}
.dash .legend .k{font-size:.66rem;color:var(--ink-soft);font-family:var(--mono);letter-spacing:.03em;margin-bottom:.15rem}
.dash .legend .vv{font-size:1rem;font-weight:800;color:var(--ink);font-family:var(--mono)}
.dash .note{position:absolute;top:-10px;right:14px;background:var(--amber);color:#3a2402;font-size:.64rem;font-weight:800;padding:.25rem .6rem;border-radius:var(--r-pill);box-shadow:0 4px 10px rgba(229,167,35,.35);transform:rotate(2deg)}
/* ===== marquee logos (services) ===== */
.svcrow{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.4rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.svcrow .lbl{font-size:.72rem;color:var(--ink-soft);font-family:var(--mono)}
.svcrow .chips{display:flex;gap:.5rem;flex-wrap:wrap}
.svcrow .chip{font-size:.8rem;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:.35rem .8rem;border-radius:var(--r-pill);box-shadow:var(--shadow);text-decoration:none;transition:.15s}
a.chip:hover{border-color:var(--brand);color:var(--brand-deep)}
/* ===== section base ===== */
.section{padding:3.2rem 0}
/* トップページの各ブロック。.section より一段控えめな余白（2026-08-12 追加：
index.html が .sec を使っているのに定義が無く、区切りが潰れていたため） */
.sec{padding:2.6rem 0}
.sec+.sec{padding-top:0}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:800;letter-spacing:.08em;color:var(--brand-deep);text-transform:uppercase;font-family:var(--mono);margin-bottom:.7rem}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--brand);border-radius:2px}
.section h2{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.05rem);font-weight:800;letter-spacing:-.01em;line-height:1.3;margin-bottom:.6rem}
.section .desc{color:var(--ink-soft);max-width:40em;margin-bottom:1.8rem}
/* ===== why (背骨) — softened ===== */
.why{background:linear-gradient(160deg,#241a12,#36261b);color:#f2e9e2;border-radius:28px;padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;top:-30%;right:-10%;width:50%;height:160%;background:radial-gradient(circle,rgba(226,102,44,.18),transparent 65%)}
.why .eyebrow{color:#f6b877}
.why h2{color:#fff;position:relative}
.why .free{font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.85;color:#ecdfd3;margin:1.1rem 0;position:relative;max-width:30em}
.why .free b{color:#fff}
.why .turn{position:relative;font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:800;color:#fff;line-height:1.5;margin:1.4rem 0;padding-left:1.1rem;border-left:3px solid var(--brand)}
.why .turn mark{background:var(--brand);color:var(--ink-on-brand);padding:0 .25em;border-radius:5px}
.why p.bd{position:relative;color:#d3c5b8;max-width:42em;margin-bottom:.9rem;font-size:.96rem;line-height:1.85}
.why p.bd b{color:#fff}
.why .sign{position:relative;margin-top:1.4rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.84rem;color:#f6b877;font-weight:700}
/* ===== roadmap — stepper ===== */
.steps{display:grid;gap:.9rem}
.step{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--shadow);transition:.18s;position:relative}
a.step{color:inherit;text-decoration:none}
a.step:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:#eed9c6}
.step .idx{width:48px;height:48px;border-radius:14px;background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:1.15rem;flex-shrink:0}
.step.pay .idx{background:linear-gradient(145deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 6px 14px rgba(188,74,23,.28)}
.step .st h3{font-size:1rem;font-weight:800;margin-bottom:.2rem}
.step .st p{font-size:.84rem;color:var(--ink-soft);line-height:1.6}
.step .st .tags{margin-top:.5rem;display:flex;gap:.35rem;flex-wrap:wrap}
.step .st .tags span{font-size:.66rem;font-weight:700;color:var(--brand-deep);background:var(--brand-tint);padding:.2rem .55rem;border-radius:var(--r-pill)}
.step .arrow{color:var(--ink-soft);font-size:1.3rem;transition:.18s}
a.step:hover .arrow{color:var(--brand);transform:translateX(3px)}
.step .opt{position:absolute;top:.7rem;right:1rem;font-size:.66rem;font-weight:800;color:#9a6212;font-family:var(--mono)}
@media(max-width:600px){.step{grid-template-columns:auto 1fr}.step .arrow{display:none}}
/* ===== compare ===== */
.tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.ctable{width:100%;border-collapse:collapse;font-size:.88rem}
.ctable thead th{background:var(--brand-tint);color:var(--ink);font-weight:800;font-size:.78rem;text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
/* ===== 比較表：列見出しを画面上部に貼り付ける =====
15行ある表を下までスクロールすると「472円」が何の列の数字か分からなくなるため。
★ position:sticky は overflow を持つ親があると、その親を基準にしてしまい画面に貼り付かない。
.tablewrap(overflow:hidden) と .scrollx(overflow-x:auto) が両方とも該当するので、
この2つを解除しないと sticky はまったく効かない（ここを見落として一度失敗した）。
★ 561px未満では .ctable--cards が thead を display:none にしてカード表示になるため不要。
横スクロールもその幅でしか要らない（PC幅では表がぴったり収まることを実測で確認済み）。
★ 角丸は .tablewrap の overflow:hidden で切っていたので、解除するぶん表の四隅に直接かける。 */
@media(min-width:561px){
.tablewrap--sticky{overflow:visible}
.tablewrap--sticky .scrollx{overflow:visible}
.tablewrap--sticky .ctable thead th{position:sticky;top:var(--nav-h);z-index:5}
.tablewrap--sticky .ctable thead th:first-child{border-top-left-radius:var(--r)}
.tablewrap--sticky .ctable thead th:last-child{border-top-right-radius:var(--r)}
.tablewrap--sticky .ctable tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r)}
.tablewrap--sticky .ctable tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r)}
}
.ctable td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.ctable tbody tr:last-child td{border-bottom:none}
.ctable tbody tr{transition:.12s}
.ctable tbody tr:hover{background:var(--brand-tint)}
.ctable .svc{font-weight:800;color:var(--ink)}
/* 2026-08-26：.66rem(10.6px)はスマホで読めないため .75rem(12px) に。
ここは「まごころ手鞠」「nosh」などプラン名が入る、読ませる情報なので装飾ラベルとは扱いが違う */
.ctable .svc small{display:block;font-weight:500;color:var(--ink-soft);font-family:var(--mono);font-size:.75rem;margin-top:2px}
.ctable .num{font-family:var(--mono);font-weight:700}
.ctable .hot{color:var(--brand-deep)}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:800;padding:.22rem .55rem;border-radius:var(--r-pill)}
.badge.now{background:var(--brand-soft);color:var(--brand-deep)}
.badge.now .d{width:5px;height:5px;border-radius:50%;background:var(--brand)}
.badge.soon{background:#fdeccf;color:#9a6212}
.tbtn{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:700;color:#fff;background:var(--ink);text-decoration:none;padding:.4rem .8rem;border-radius:var(--r-pill);white-space:nowrap;transition:.15s}
.tbtn:hover{background:var(--brand-deep)}
@media(max-width:880px){.tbtn{padding:.6rem 1rem}}
.tnote{font-size:.72rem;color:var(--ink-soft);margin-top:.8rem;font-family:var(--mono)}
/* モバイル：比較表を横スクロールから縦カードへ切替（560px以下）
※data-labelを持つ表（.ctable--cards）専用。記事内の表は.scrollxの横スクロールを維持 */
@media(max-width:560px){
.scrollx-cards{overflow-x:visible;background:none}
.ctable--cards{font-size:.92rem}
.ctable--cards thead{display:none}
.ctable--cards,.ctable--cards tbody,.ctable--cards tr,.ctable--cards td{display:block;width:100%}
.ctable--cards tbody tr{padding:.5rem 1rem 1rem}
.ctable--cards tbody tr:not(:last-child){border-bottom:6px solid var(--bg)}
.ctable--cards tbody tr:hover{background:none}
.ctable--cards td{padding:.42rem 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;gap:.9rem}
.ctable--cards td::before{content:attr(data-label);font-size:.72rem;font-weight:800;color:var(--ink-soft);font-family:var(--mono);flex-shrink:0}
.ctable--cards td.svc{display:block;font-size:1.08rem;padding:.5rem 0;border-bottom:2px solid var(--line)}
.ctable--cards td.svc::before{display:none}
.ctable--cards td.act{padding-top:.75rem;border-bottom:none}
.ctable--cards td.act::before{display:none}
.ctable--cards td.act .tbtn{width:100%;justify-content:center;padding:.6rem}
}
/* ===== articles ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column}
.acard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.acard .top{height:7px;background:linear-gradient(90deg,var(--brand),var(--amber))}
.acard .pad{padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.acard .cat{font-size:.66rem;font-weight:800;color:var(--brand-deep);font-family:var(--mono);letter-spacing:.03em}
.acard h3{font-size:.98rem;font-weight:800;line-height:1.5}
.acard .meta{margin-top:auto;display:flex;gap:.6rem;flex-wrap:wrap;font-size:.7rem;color:var(--ink-soft);font-family:var(--mono);padding-top:.5rem;border-top:1px solid var(--line)}
/* ===== orderer coupons ===== */
.order{background:linear-gradient(135deg,var(--brand-tint),#fff);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;margin-top:1.4rem}
.order h3{font-size:1.15rem;font-weight:800;margin-bottom:.3rem}
.order .od{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.1rem;max-width:42em}
.coupons{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
@media(max-width:680px){.coupons{grid-template-columns:1fr}}
.coupon{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem .9rem;box-shadow:var(--shadow)}
.coupon .amt{font-family:var(--mono);font-weight:800;color:var(--brand-deep);font-size:1.05rem;line-height:1;white-space:nowrap}
.coupon .ci{flex:1}
.coupon .ci .s{font-weight:800;font-size:.84rem}
.coupon .ci .s small{display:block;font-weight:500;color:var(--ink-soft);font-size:.64rem;font-family:var(--mono)}
.coupon a{font-size:.72rem;font-weight:700;color:var(--brand-deep);text-decoration:none;border:1px solid var(--brand);padding:.55rem .8rem;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--r-pill);white-space:nowrap}
.coupon a:hover{background:var(--brand);color:#fff}
.bridge{margin-top:1rem;font-size:.85rem;background:var(--surface);border:1px dashed var(--brand);border-radius:var(--r-sm);padding:.8rem 1rem;color:var(--ink)}
.bridge b{color:var(--brand-deep)}
.bridge a{color:var(--brand-deep);font-weight:700}
/* ===== stats strip ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}
@media(max-width:560px){.stats{grid-template-columns:1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;text-align:center;box-shadow:var(--shadow)}
.stat .v{font-family:var(--mono);font-size:1.9rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.stat .l{font-size:.76rem;color:var(--ink-soft);margin-top:.2rem}
/* ===== footer ===== */
footer{margin-top:3rem;background:#241a12;color:#c3b3a6}
.foot-in{padding:2.4rem 0;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
footer .brand .bt .n{color:#fff}
footer .brand .bt .n em{color:var(--brand)}
footer .brand .bt .s{color:#958375}
footer .disc{max-width:34em;font-size:.72rem;line-height:1.75;color:#958375;font-family:var(--mono)}
footer a.fl{color:#f0dcc8;text-decoration:none;font-size:.84rem}
footer a.fl:hover{color:#fff}
.fbrand{max-width:24em}
.fbrand .disc{margin-top:1rem}
.fcol{display:flex;flex-direction:column;gap:.55rem;min-width:10em}
.fttl{font-size:.7rem;font-weight:800;color:#958375;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
/* 新着記事セクション末尾のハブ導線 */
.hub-links{text-align:center;margin-top:1.8rem}
.hub-note{font-size:.86rem;color:var(--ink-soft);margin-bottom:.9rem}
.hub-btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
/* ===== article view ===== */
.article{max-width:760px;margin:0 auto;padding:2.2rem 1.5rem 3rem}
.crumb{font-size:.72rem;color:var(--ink-soft);font-family:var(--mono);margin-bottom:1.1rem}
.crumb a{color:var(--brand-deep);text-decoration:none}
.article h1{font-family:var(--display);font-size:clamp(1.5rem,4vw,2rem);font-weight:800;line-height:1.4;letter-spacing:-.01em;margin-bottom:.9rem}
.abyline{display:flex;align-items:center;gap:.7rem;font-size:.76rem;color:var(--ink-soft);font-family:var(--mono);padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem}
.abyline .who{display:flex;align-items:center;gap:.45rem;color:var(--ink);font-weight:800;font-family:var(--body)}
.abyline .dot{width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,var(--brand),var(--brand-deep));color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:900;line-height:1;padding-bottom:1px}
/* 2026-08-27 追加：価格をいつ調べたかをバイラインに出す。
価格比較サイトで「更新日が無い」のは致命的だが、技術的な修正しかしていない記事に
一律で「更新日」を付けるのは嘘になる。そこで各記事が本文で既に書いている
「調査日」を拾い上げて表に出している。★価格を再調査したらこの日付も直すこと。 */
.abyline .surveyed{display:inline-flex;align-items:center;gap:.3rem;background:var(--brand-tint);
border:1px solid var(--line);border-radius:var(--r-pill);padding:.2rem .7rem;color:var(--brand-deep);font-weight:700}
@media(max-width:560px){
.abyline{flex-wrap:wrap;gap:.45rem .7rem}
}
.progress{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.3rem 0}
/* 目次の各項目。2026-08-02にspan→aへ変えて本物の目次にしたので、両方に同じ見た目を当てる */
.progress span,.progress a{font-size:.7rem;font-family:var(--mono);color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:.25rem .6rem;border-radius:var(--r-pill)}
.progress span b,.progress a b{color:var(--brand-deep)}
.progress a{text-decoration:none;transition:.15s}
.progress a:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.block{margin:1.6rem 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
/* 目次から飛んだとき、見出しが上部の固定ナビに隠れないよう余白を取る。
ナビはPCで68px、780px以下では2段になって106pxまで伸びるので幅で分ける */
.block[id]{scroll-margin-top:84px}
@media(max-width:780px){.block[id]{scroll-margin-top:120px}}
.block>.lab{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;font-size:.78rem;font-weight:800;background:var(--brand-tint);border-bottom:1px solid var(--line)}
.block>.lab .n{width:22px;height:22px;border-radius:7px;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem}
.block>.bd{padding:1.1rem}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:540px){.specs{grid-template-columns:1fr}}
.specs div{background:var(--brand-tint);border-radius:var(--r-sm);padding:.7rem .85rem}
/* 2026-08-26：項目名は「戻り幅がいちばん小さい」のような文が入るので .74rem(11.8px) に上げた */
.specs .k{font-size:.74rem;color:var(--ink-soft);font-family:var(--mono);margin-bottom:.2rem;line-height:1.5}
.specs .v{font-weight:800;font-size:.98rem}
.specs .v small{font-weight:500;color:var(--ink-soft);font-family:var(--mono);font-size:.7rem}
.nippo table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.84rem}
.nippo td{padding:.5rem .7rem;border-bottom:1px solid var(--line)}
.nippo td.k{color:var(--ink-soft);width:38%}
.nippo td.v{font-weight:700}
.nippo .tot td{background:var(--brand-soft);color:var(--brand-deep);font-weight:800;border:none}
.hand{margin-top:.9rem;font-size:.92rem;line-height:1.85}
.bd-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.84rem;margin:.4rem 0}
.bd-table td{padding:.45rem .3rem;border-bottom:1px dashed var(--line)}
.bd-table td:last-child{text-align:right;font-weight:700}
.bd-table .m td:last-child{color:#c2691f}
.bd-table .net td{border-top:2px solid var(--ink);border-bottom:none;color:var(--brand-deep);font-weight:800;font-size:.95rem}
.revs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:540px){.revs{grid-template-columns:1fr}}
.rev{border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem;background:var(--bg)}
.rev .rt{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.rev .stars{color:var(--amber);font-size:.8rem}
.rev .who{margin-left:auto;font-size:.64rem;color:var(--ink-soft);font-family:var(--mono)}
.rev p{font-size:.84rem;line-height:1.6}
.rev .src{margin-top:.4rem;font-size:.66rem;color:var(--ink-soft);font-family:var(--mono)}
.honest{border-color:#f0d9b8}
.honest>.lab{background:#fdf2e2;color:#9a6212}
.honest>.lab .n{background:var(--amber)}
.honest ul{list-style:none}
.honest li{position:relative;padding:.55rem 0 .55rem 1.5rem;font-size:.9rem;border-bottom:1px dashed #f0d9b8;line-height:1.6}
.honest li:last-child{border-bottom:none}
.honest li::before{content:"!";position:absolute;left:0;top:.55rem;width:18px;height:18px;background:var(--amber);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.66rem;font-weight:800;font-family:var(--mono)}
.cta{margin:1.8rem 0;border-radius:var(--r);overflow:hidden;background:linear-gradient(150deg,#2a1c12,#43301f);color:#f2e9e2;padding:1.5rem}
.cta h3{color:#fff;font-size:1.1rem;font-weight:800;margin-bottom:.4rem}
.cta p{font-size:.84rem;color:#d8c9ba;margin-bottom:1rem}
.cta .code{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.06);border:1px dashed var(--brand);border-radius:var(--r-sm);padding:.6rem .9rem;margin-bottom:1rem;font-family:var(--mono);font-size:.9rem}
.cta .code b{color:#fff;letter-spacing:.15em;font-size:1.05rem;flex:1}
.cta .code button{background:var(--brand);color:var(--ink-on-brand);border:none;font-weight:800;padding:.55rem .9rem;border-radius:var(--r-pill);cursor:pointer;font-size:.74rem}
.cta .go{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:var(--ink-on-brand);font-weight:800;text-decoration:none;padding:.75rem 1.4rem;border-radius:var(--r-pill)}
.cta .go:hover{background:#fff}
/* CTA内のセカンダリ（アウトライン）ボタン。ダーク背景前提 */
.cta .go.go-outline{background:transparent;color:#fff;border:1px solid var(--brand)}
.cta .go.go-outline:hover{background:var(--brand);color:var(--ink-on-brand)}
.cta .go+.go{margin-left:.6rem}
@media(max-width:560px){.cta .go{display:flex;justify-content:center}.cta .go+.go{margin:.6rem 0 0}}
/* ⑥ 本命1つ＋サブ複数、をきれいに並べるコンテナ（3ボタン以上向け） */
.cta-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.2rem}
.cta-actions .go{margin:0;flex:1 1 210px;justify-content:center}
.cta-actions .go-full{flex:1 1 100%}
@media(max-width:560px){.cta-actions .go{flex:1 1 100%}}
.cta .pr{margin-top:.9rem;font-size:.72rem;color:#9d8b7c;font-family:var(--mono);line-height:1.6}
.endnote{text-align:center;font-size:.8rem;color:var(--ink-soft);margin-top:1.5rem}
/* ===== 3本柱（サイトの地図） ===== */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:780px){.pillars{grid-template-columns:1fr}}
.pillar-card{display:flex;flex-direction:column;gap:.45rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.5rem;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:.18s;position:relative;overflow:hidden}
.pillar-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--brand),var(--amber))}
.pillar-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:#eed9c6}
.pillar-card .pico{width:52px;height:52px;border-radius:15px;background:var(--brand-soft);display:grid;place-items:center;font-size:1.6rem;margin-bottom:.2rem}
.pillar-card .pnum{font-size:.66rem;font-weight:800;color:var(--ink-soft);font-family:var(--mono);letter-spacing:.1em}
.pillar-card h3{font-size:1.22rem;font-weight:800}
.pillar-card .pdesc{font-size:.86rem;color:var(--ink-soft);line-height:1.75}
.pillar-card .pin{margin-top:.3rem;display:flex;flex-wrap:wrap;gap:.4rem}
.pillar-card .pin span{font-size:.68rem;font-weight:700;color:var(--brand-deep);background:var(--brand-tint);padding:.25rem .6rem;border-radius:var(--r-pill)}
.pillar-card .pmore{margin-top:auto;padding-top:.9rem;font-size:.84rem;font-weight:800;color:var(--brand-deep)}
.pillar-card:hover .pmore{color:var(--brand)}
/* ===== 家事按分ビジュアル ===== */
.anbun-formula{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1rem;margin:1.2rem 0}
.anbun-formula .fbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem;text-align:center;min-width:96px}
/* 2026-08-26：「コース合計」「送料」など計算式の意味を伝えるラベル。
ここが読めないと式そのものが伝わらないので .74rem(11.8px) に上げた */
.anbun-formula .fbox .ft{font-size:.74rem;color:var(--ink-soft);font-family:var(--mono);margin-bottom:.2rem}
.anbun-formula .fbox .fv{font-weight:800;font-size:1.05rem;font-family:var(--mono)}
.anbun-formula .fbox.res{background:var(--brand);border-color:var(--brand)}
.anbun-formula .fbox.res .ft{color:rgba(255,255,255,.85)}
.anbun-formula .fbox.res .fv{color:#fff}
.anbun-formula .op{font-size:1.4rem;font-weight:800;color:var(--brand-deep)}
.anbun-item{display:flex;gap:.95rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.1rem;margin-bottom:.8rem;box-shadow:var(--shadow)}
.anbun-ico{flex-shrink:0;width:46px;height:46px;border-radius:13px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand-deep)}
.anbun-ico svg{width:24px;height:24px}
.anbun-body{flex:1;min-width:0}
.anbun-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.45rem}
.anbun-head .nm{font-weight:800;font-size:.95rem}
.anbun-head .pct{font-family:var(--mono);font-weight:800;color:var(--brand-deep);white-space:nowrap;font-size:.86rem}
.anbun-bar{height:18px;border-radius:6px;overflow:hidden;background:#efe9e4;position:relative}
.anbun-bar .biz{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-deep));border-radius:6px 0 0 6px}
.anbun-legend{display:flex;gap:1.1rem;font-size:.7rem;color:var(--ink-soft);margin-top:.4rem;font-family:var(--mono)}
.anbun-legend i{font-style:normal}
.anbun-legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem;vertical-align:-1px}
.anbun-legend .sw.b{background:var(--brand-deep)}
.anbun-legend .sw.p{background:#d8cfc7}
.anbun-note{font-size:.8rem;color:var(--ink-soft);line-height:1.65;margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem}
.anbun-note b{color:var(--brand-deep)}
/* ===== 手取り内訳バー（3分割） ===== */
.breakdown{margin:1.2rem 0}
.breakdown .b3-ttl{font-size:.84rem;font-weight:800;margin-bottom:.5rem}
.breakdown .bar3{display:flex;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.breakdown .bar3 > span{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:var(--mono);min-width:0;overflow:hidden;white-space:nowrap;line-height:1.2}
.breakdown .bar3 .lab{font-size:.66rem;opacity:.9}
.breakdown .bar3 .amt{font-size:.84rem;font-weight:800}
.breakdown .seg-keihi{background:#b3b7bc}
.breakdown .seg-zei{background:var(--amber)}
.breakdown .seg-net{background:linear-gradient(90deg,var(--brand),var(--brand-deep))}
.breakdown .b3-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.6rem;font-size:.74rem;color:var(--ink-soft)}
.breakdown .b3-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.breakdown .b3-legend .sw.k{background:#b3b7bc}
.breakdown .b3-legend .sw.z{background:var(--amber)}
.breakdown .b3-legend .sw.n{background:var(--brand-deep)}
/* ===== 黒ナンバー：2つの窓口は別物 ===== */
.twowin{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:stretch;margin:1.2rem 0}
.twowin .win{border-radius:var(--r-sm);padding:1rem .9rem;text-align:center;border:1.5px solid}
.twowin .win.unyu{background:var(--brand-tint);border-color:var(--brand)}
.twowin .win.zei{background:#fdf2e2;border-color:var(--amber)}
.twowin .win .wlbl{font-size:.64rem;font-weight:800;font-family:var(--mono);letter-spacing:.05em}
.twowin .win.unyu .wlbl{color:var(--brand-deep)}
.twowin .win.zei .wlbl{color:#9a6212}
.twowin .win .wname{font-size:1rem;font-weight:800;margin:.2rem 0}
.twowin .win .wfor{font-size:.76rem;color:var(--ink-soft)}
.twowin .vs{display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:var(--ink-soft);font-family:var(--mono)}
@media(max-width:560px){.twowin{grid-template-columns:1fr;gap:.5rem}.twowin .vs{padding:.2rem}}
/* ===== 手順フロー（縦ステッパー） ===== */
.flow{margin:1.2rem 0}
.flow-row{display:flex;gap:.9rem;align-items:flex-start;position:relative;padding-bottom:.9rem}
.flow-row:not(:last-child)::before{content:"";position:absolute;left:18px;top:40px;bottom:-2px;width:2px;background:var(--line)}
.flow-num{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:.9rem;z-index:1;background:#fff}
.flow-num.unyu{color:var(--brand-deep);border:2px solid var(--brand)}
.flow-num.zei{color:#9a6212;border:2px solid var(--amber)}
.flow-body{flex:1;padding-top:.2rem}
.flow-body .ftag{display:inline-block;font-size:.6rem;font-weight:800;padding:.12rem .5rem;border-radius:999px;margin-bottom:.25rem;font-family:var(--mono)}
.flow-body .ftag.unyu{background:var(--brand-soft);color:var(--brand-deep)}
.flow-body .ftag.zei{background:#fdf2e2;color:#9a6212}
.flow-body h4{font-size:.98rem;font-weight:800;margin-bottom:.12rem}
.flow-body p{font-size:.82rem;color:var(--ink-soft);line-height:1.6}
/* ============================================================
UIレビュー反映パッチ（H1/H3/H4/H5/M2/M3/M6/M7/H2/L2）
============================================================ */
/* H1: 図解バーのコントラスト改善（白文字が読めない問題） */
.breakdown .seg-keihi{background:#5b6270}
.breakdown .bar3 .seg-zei{color:#3a2402}
.breakdown .b3-legend .sw.k{background:#5b6270}
/* L2: 星評価はアクセント色と役割を分ける */
.rev .stars{color:#d98a1f}
/* H3: 固定ヘッダ分、アンカー着地が隠れないように */
[id]{scroll-margin-top:84px}
/* M2: キーボード/支援技術向けフォーカスリング */
a:focus-visible,button:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px;border-radius:6px}
/* M3: ロゴを黒地にする指定は、2026-08-25にアイコン画像へ差し替えたため廃止。
（ここが残っていると上書きされて画像が黒い四角に潰れる） */
/* H5: 本文タイポの底上げ
2026-08-26：本文を .95rem(15.2px) → 1rem(16px) に。
日本語の長文本文は16〜17pxが標準で、4,000字を15.2pxで読ませていた。 */
.article{font-size:1rem}
.hand{font-size:1rem}
.block>.lab{font-size:.85rem;letter-spacing:.01em}
/* H4: 「あわせて読みたい」枠の共通クラス（inline廃止用） */
.related{background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;margin:1.8rem 0}
.related-ttl{font-size:.8rem;font-weight:800;color:var(--brand-deep);font-family:var(--mono);margin-bottom:.7rem}
.related-list{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.related-list a{color:var(--ink);text-decoration:none;font-weight:700}
.related-list a:hover{color:var(--brand-deep)}
/* M7: 横スクロール表に「まだ続く」シャドウを出す */
.scrollx{overflow-x:auto;background:
linear-gradient(90deg,var(--surface) 30%,rgba(255,255,255,0)),
linear-gradient(90deg,rgba(255,255,255,0),var(--surface) 70%) 100% 0,
radial-gradient(farthest-side at 0 50%,rgba(36,29,23,.16),rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%,rgba(36,29,23,.16),rgba(0,0,0,0)) 100% 0;
background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
/* M6: ヒーローの実績ダッシュボードをリンク化 */
a.dash{text-decoration:none;color:inherit;display:block;transition:.18s}
a.dash:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.dash-more{margin-top:.9rem;text-align:right;font-size:.74rem;font-weight:800;color:var(--brand-deep);font-family:var(--mono)}
/* H2: アフィリ未設定リンクは「準備中」表示で無効化 */
.go-soon{background:#dcd3cb!important;color:#4a423c!important;box-shadow:none!important;pointer-events:none;cursor:default;flex-direction:column;gap:.15rem}
.go-soon::after{content:"リンク準備中";display:block;font-size:.7rem;font-weight:800;letter-spacing:.05em;opacity:.85}
.tbtn.soon{background:#d8cfc7;color:#6d6057;pointer-events:none}
.coupon a.soon{border-color:#d8cfc7;color:#9aa0a6;pointer-events:none}
/* 記事本文のリンク：色＋太字だけでなく下線でも識別（色覚対応） */
.article .bd a:not(.go):not(.go-inline):not(.tbtn),.article .lead a{text-decoration:underline;text-decoration-color:rgba(188,74,23,.4);text-underline-offset:3px;text-decoration-thickness:1px}
/* 本文中の控えめアフィリボタン（記事末尾の本命CTAより一段弱い階層） */
.go-inline{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--brand-deep);background:var(--brand-soft);border:1px solid var(--brand);padding:.4rem .9rem;border-radius:var(--r-pill);text-decoration:none;transition:.15s}
.go-inline:hover{background:var(--brand);color:#fff}
/* カテゴリチップ */
.cat-chip{display:inline-flex;align-items:center;font-size:.8rem;font-weight:700;text-decoration:none;color:var(--brand-deep);background:var(--brand-tint);padding:.35rem .85rem;border-radius:var(--r-pill);transition:.15s}
.cat-chip:hover{background:var(--brand-soft)}
/* ===== 目次（トップページ） ===== */
.toc{border-bottom:1px solid var(--line);background:var(--surface)}
.toc-in{display:flex;align-items:center;gap:.4rem;padding:.7rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.toc-in::-webkit-scrollbar{display:none}
.toc-in .cat-chip{flex-shrink:0;white-space:nowrap}
.toc-ttl{font-size:.72rem;font-weight:800;color:var(--ink-soft);font-family:var(--mono);letter-spacing:.05em;flex-shrink:0;margin-right:.2rem;white-space:nowrap}
/* ===== シェアボタン ===== */
.share-box{margin-top:2rem;padding:1.4rem 1.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.share-ttl{font-size:.9rem;font-weight:800;color:var(--ink)}
.share-btns{display:flex;gap:.6rem}
.share-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;text-decoration:none;padding:.55rem 1.05rem;border-radius:var(--r-pill);transition:.15s;min-height:44px}
.share-btn svg{width:16px;height:16px;flex-shrink:0}
.share-x{background:#000;color:#fff}
.share-x:hover{background:#262626}
.share-line{background:#06c755;color:#fff}
.share-line:hover{background:#05ad4a}
@media(max-width:560px){.share-box{flex-direction:column;align-items:flex-start}.share-btns{width:100%}.share-btn{flex:1;justify-content:center}}
/* ===== サジェストワード（他の人はこちらも検索 風） ===== */
.suggest-sec{background:linear-gradient(150deg,#2a1c12,#43301f);border-radius:28px;margin:0 0 3.2rem;padding:clamp(1.8rem,4vw,2.6rem)}
.suggest-ttl{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:800;color:#fff;margin-bottom:1.2rem}
.suggest-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:680px){.suggest-grid{grid-template-columns:1fr}}
.suggest-item{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);padding:.85rem 1.05rem;text-decoration:none;color:#f2e9e2;font-size:.86rem;font-weight:700;transition:.15s}
.suggest-item:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.suggest-item svg{flex-shrink:0;opacity:.55;width:16px;height:16px;color:#f2e9e2}
/* ============================================================
公開前パッチ2（PR表記/行長/印刷/inlineクラス化）
============================================================ */
/* ② 行長：プロセ（文章）は読みやすい幅で折り返す。表・図は全幅維持 */
.article p,.article ul,.article ol{max-width:42em}
/* ④ inline置換用の共通クラス */
.lead{font-size:1.05rem;line-height:1.9}
.note-sm{font-size:.84rem;color:var(--ink-soft);line-height:1.7}
.tbl-intro{font-size:.92rem;margin-bottom:.6rem}
.acard-desc{font-size:.82rem;color:var(--ink-soft);line-height:1.6;max-width:none}
/* ① 記事冒頭のPR（広告）表記ラベル */
.pr-top{display:inline-block;font-size:.7rem;font-weight:700;color:var(--ink-soft);background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--r-pill);padding:.2rem .75rem;margin-bottom:1.1rem;font-family:var(--mono);letter-spacing:.02em}
/* ⑤ 記事ヒーロー画像 */
.hero-figure{margin:0 0 1.3rem;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-figure img{width:100%;height:auto;display:block}
.hero-figure figcaption{font-size:.78rem;color:var(--ink-soft);background:var(--surface);padding:.55rem .9rem;border-top:1px solid var(--line)}
/* ⑥ 本文中の図版（2026-08-03 追加）
これまで画像は記事の先頭（hero-figure）にしか置けなかった。
長い記事の途中に図や写真を挟んで、読み疲れを減らすための枠。
img に height:auto を必ず効かせる（width/height属性を書くと縦に潰れるため） */
.infig{margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.infig img{width:100%;height:auto;display:block}
.infig figcaption{font-size:.76rem;color:var(--ink-soft);padding:.5rem .9rem;border-top:1px solid var(--line);line-height:1.6}
/* ⑦ 対話（2026-08-03 追加）
「配達のがっこう」なので、先生と生徒のやりとりで要点を挟む。
.talk … 新人ドライバー（読者の分身）＝左から
.talk.z … スーパー配達員Z（運営者）＝右から・緑を薄く敷いて話者を色で区別する
吹き出しの三角は border で描く（::before＝枠線色、::after＝中身の色を重ねる） */
.talk{display:flex;gap:.7rem;align-items:flex-start;margin:1.15rem 0}
.talk .ico{flex:0 0 auto;width:56px;text-align:center}
.talk .ico img{width:56px;height:56px;border-radius:50%;display:block;background:#fff;border:2px solid var(--line);object-fit:cover}
.talk .ico .nm{display:block;font-size:.6rem;color:var(--ink-soft);font-family:var(--mono);margin-top:.25rem;line-height:1.35}
.talk .bub{position:relative;flex:1 1 auto;min-width:0;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:.8rem 1rem;font-size:.92rem;line-height:1.8}
.talk .bub::before{content:"";position:absolute;top:16px;left:-10px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--line)}
.talk .bub::after{content:"";position:absolute;top:17px;left:-8px;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:9px solid var(--surface)}
.talk.z{flex-direction:row-reverse}
.talk.z .bub{background:var(--brand-tint);border-color:var(--brand-soft)}
.talk.z .bub::before{left:auto;right:-10px;border-right:0;border-left:10px solid var(--brand-soft)}
.talk.z .bub::after{left:auto;right:-8px;border-right:0;border-left:9px solid var(--brand-tint)}
.talk.z .ico img{border-color:var(--brand-soft)}
@media(max-width:520px){
.talk{gap:.5rem}
.talk .ico{width:44px}
.talk .ico img{width:44px;height:44px}
.talk .ico .nm{font-size:.56rem}
.talk .bub{font-size:.88rem;padding:.7rem .85rem;line-height:1.75}
}
/* ③ 印刷スタイル：ナビ・CTA・装飾を隠し、本文を読みやすく */
@media print{
.nav,.cta,.go-soon,.related,.endnote,.dash-more,footer .disc{display:none!important}
body{background:#fff;color:#000}
.article{max-width:100%;padding-top:1rem}
.block,.dash,.acard{box-shadow:none}
a{color:#000;text-decoration:underline}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}
/* ============================================================
図解アニメーション強化（スクロールで動く演出）
============================================================ */
/* 内訳バー（bar3）：スクロールで0%→実値へ伸びる */
.breakdown .bar3[data-reveal] > span{width:0;transition:width 1.1s cubic-bezier(.16,.84,.44,1)}
.breakdown .bar3[data-reveal].is-in > span{width:var(--w)}
/* 3段階の推移ミニ棒グラフ（手取りシミュ用） */
.minichart{display:flex;gap:1.1rem;align-items:flex-end;justify-content:center;height:150px;margin:1.4rem 0 .6rem;padding:0 .4rem}
.minichart .mc-col{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.minichart .mc-amt{font-family:var(--mono);font-weight:800;font-size:.92rem;color:var(--brand-deep);margin-bottom:.3rem}
.minichart .mc-bar{width:100%;max-width:52px;height:0;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--brand),var(--brand-deep));transition:height 1.1s cubic-bezier(.16,.84,.44,1)}
.minichart[data-reveal].is-in .mc-bar{height:var(--h)}
.minichart .mc-lab{margin-top:.5rem;font-size:.72rem;color:var(--ink-soft);text-align:center;line-height:1.4}
/* サービス識別バッジ（比較表の丸アイコン） */
.svc-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.66rem;font-weight:800;color:#fff;background:var(--brand-deep);margin-right:.4rem;flex-shrink:0;vertical-align:middle}
.ctable tr.reco{background:var(--brand-tint)}
.ctable tr.reco td.svc{font-weight:800}
/* 手順フロー：スクロールで1つずつ現れる演出 */
.flow[data-reveal] .flow-row{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.flow[data-reveal].is-in .flow-row{opacity:1;transform:translateY(0)}
.flow[data-reveal].is-in .flow-row:nth-child(1){transition-delay:.05s}
.flow[data-reveal].is-in .flow-row:nth-child(2){transition-delay:.2s}
.flow[data-reveal].is-in .flow-row:nth-child(3){transition-delay:.35s}
.flow[data-reveal].is-in .flow-row:nth-child(4){transition-delay:.5s}
.flow[data-reveal].is-in .flow-row:nth-child(5){transition-delay:.65s}
@media(max-width:560px){.minichart{gap:.6rem}}
/* 比較表：フェードで登場 */
.tablewrap[data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.tablewrap[data-reveal].is-in{opacity:1;transform:translateY(0)}
/* ============================================================
2026-08-01 アイコン刷新：記号をやめてCSSで描く
（▶ ▸ ・ はフォント依存で環境ごとに形が変わるため撤去）
============================================================ */
/* カードのカテゴリ＝ピル型バッジ */
.acard .cat{align-self:flex-start;background:var(--brand-soft);padding:.2rem .6rem;border-radius:var(--r-pill);line-height:1.5}
/* 「あわせて読みたい」＝左のアクセントバー */
.related-ttl{padding-left:.6rem;border-left:3px solid var(--brand);line-height:1.25}
/* 関連リンクの行頭＝CSSで描く矢印（フォント非依存） */
.related-list a{position:relative;padding-left:1.15rem;display:inline-block}
.related-list a::before{content:"";position:absolute;left:.2rem;top:.6em;width:5px;height:5px;
border-top:2px solid var(--brand);border-right:2px solid var(--brand);
transform:rotate(45deg);transition:transform .15s,border-color .15s}
.related-list a:hover::before{border-color:var(--brand-deep);transform:rotate(45deg) translate(1.5px,-1.5px)}
/* ============================================================
トップページ用パーツ（2026-08-12 新設・モックアップ準拠）
明るい黄色バンド＋3ジャンル色分けの「比較サイトらしい」型。
写真は img.ph を差し替えるだけで入る作りにしてある
============================================================ */
/* --- 写真の枠。まだ画像が無いので、入るべき場所を灰色で示しておく --- */
.ph{display:block;width:100%;height:100%;object-fit:cover}
.ph-slot{position:relative;background:var(--sun-soft);border:2px dashed var(--sun-deep);border-radius:var(--r-sm);
display:grid;place-items:center;color:#b8860b;font-size:.72rem;font-weight:800;text-align:center;line-height:1.5;overflow:hidden;padding:.5rem}
.ph-slot img{position:absolute;inset:0}
/* 画像が入った枠は点線と下地を消す。点線は「まだ画像が無い」ことの印なので、
入ったら枠線ぶんの隙間ごと消さないと画像のまわりに2pxの黄色が残る */
.ph-slot:has(img){border:0;background:transparent}
/* --- 上部の黄色バンド（ヒーロー全体の下地） --- */
.lp-hero{background:linear-gradient(170deg,var(--sun) 0%,#ffdf7a 42%,var(--sun-soft) 100%);padding:1.6rem 0 2.4rem;position:relative;overflow:hidden}
.lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:var(--bg);
border-radius:50% 50% 0 0/100% 100% 0 0}
/* 上部の丸タブ（かんたん比較／お得な情報／口コミ・評判） */
.lp-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem;position:relative;z-index:1}
.lp-tab{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border-radius:var(--r-pill);
padding:.5rem 1.1rem;font-size:.82rem;font-weight:800;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:.15s}
.lp-tab:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.lp-tab .ic{font-size:1rem;line-height:1}
@media(max-width:560px){.lp-tab{font-size:.74rem;padding:.42rem .8rem}}
.lp-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:1.8rem;align-items:center}
@media(max-width:880px){.lp-hero-in{grid-template-columns:1fr;gap:1.4rem}}
/* 「忙しい毎日に、」のような小さな吹き出しタグ */
.lp-tag{display:inline-block;position:relative;background:var(--surface);color:var(--brand-deep);font-weight:800;
font-size:.84rem;padding:.4rem .95rem;border-radius:var(--r-pill);box-shadow:var(--shadow);margin-bottom:.7rem}
.lp-tag::after{content:"";position:absolute;left:1.5rem;bottom:-6px;border:7px solid transparent;border-top-color:var(--surface);border-bottom:0}
.lp-lead{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2.6vw,1.4rem);color:var(--ink);margin-bottom:.35rem}
.lp-lead em{font-style:normal;color:var(--brand-deep)}
/* サイト名の特大タイトル。白フチ＋オレンジのベタ塗りで、写真の上でも読める */
.lp-title{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,7.4vw,4.1rem);line-height:1.12;
letter-spacing:-.01em;color:var(--brand);
-webkit-text-stroke:7px #fff;paint-order:stroke fill;
text-shadow:0 4px 0 rgba(217,83,10,.18);margin-bottom:.7rem}
.lp-title .d{color:var(--brand-deep);display:block}
/* 2026-08-26：金額をタイトルに出すようになったので、数字用の変種を用意した。
「472円〜1,068円」は1行で読ませたい（"〜"が行頭に落ちると範囲に見えない）。
そのぶん字を少し小さくし、行内で色を変える。 */
.lp-title--num{font-size:clamp(1.9rem,5.6vw,3.2rem);-webkit-text-stroke-width:5px;white-space:nowrap}
.lp-title--num .d{display:inline}
/* 茶色いリボン帯（同じ宅配弁当で、2倍以上ひらきます） */
.lp-ribbon{display:inline-block;background:#5b4032;color:#fff;font-family:var(--display);font-weight:800;
font-size:clamp(.86rem,2.1vw,1.05rem);padding:.55rem 1.3rem;border-radius:6px;box-shadow:0 4px 0 #3f2b21}
/* 2026-08-26 追加：ヒーローの「なぜこの数字なのか」の説明と、CTAボタン列。
黄色いヒーロー地の上に置くので、白い箱に載せてコントラストを確保する。 */
.lp-why{margin-top:1rem;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.86rem;line-height:1.8;color:var(--ink);
max-width:30em;backdrop-filter:blur(2px)}
.lp-why b{color:var(--brand-deep)}
.lp-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
/* ヒーロー内のボタンは、黄色地から浮かせたいので影を強める */
.lp-actions .btn{box-shadow:0 4px 14px rgba(120,80,40,.18)}
.lp-actions .btn-ghost{background:var(--surface);border-color:var(--line)}
@media(max-width:880px){
.lp-why{max-width:none}
.lp-actions .btn{flex:1 1 auto;justify-content:center}
}
/* 丸い吹き出し（一人暮らしも、共働きも、…） */
.lp-bubble{background:var(--surface);border-radius:50%;aspect-ratio:1;display:grid;place-items:center;text-align:center;
padding:1.2rem;font-size:.86rem;font-weight:700;line-height:1.7;box-shadow:var(--shadow-lg);max-width:190px}
.lp-bubble b{color:var(--brand-deep)}
/* 王冠つきの丸バッジ（徹底比較！） */
.lp-crown{position:absolute;top:6%;right:2%;width:118px;height:118px;border-radius:50%;
background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;display:grid;place-items:center;
text-align:center;font-family:var(--display);font-weight:900;font-size:1.02rem;line-height:1.3;
box-shadow:0 6px 16px rgba(217,83,10,.35);border:4px solid #fff;transform:rotate(-6deg)}
.lp-crown small{display:block;font-size:.56rem;font-weight:700;opacity:.95;margin-bottom:.15rem}
@media(max-width:880px){.lp-crown{width:92px;height:92px;font-size:.84rem}}
/* --- メリットの丸アイコン横並び（時短でラクラク／お得に続けられる…） --- */
.lp-merits{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin-top:1.8rem}
@media(max-width:880px){.lp-merits{grid-template-columns:repeat(3,1fr);gap:.9rem}}
@media(max-width:420px){.lp-merits{grid-template-columns:repeat(2,1fr)}}
.lp-merit{background:var(--surface);border-radius:var(--r-sm);padding:.9rem .5rem;text-align:center;box-shadow:var(--shadow)}
.lp-merit .ic{width:44px;height:44px;margin:0 auto .45rem;border-radius:50%;background:var(--sun-soft);
display:grid;place-items:center;font-size:1.35rem;line-height:1}
/* 絵文字ではなくアイコン画像を入れたとき。画像は背景を透過してあるので、
上の --sun-soft の丸がそのまま台座になる（丸を二重に描かない） */
.lp-merit .ic img{width:100%;height:100%;display:block;object-fit:contain}
.lp-merit .tx{font-size:.72rem;font-weight:800;line-height:1.5}
.lp-merit .tx em{font-style:normal;color:var(--brand-deep)}
/* --- ＼ 見出し ／ ：両脇に斜線を置く比較サイト定番の見出し --- */
.lp-h2{font-family:var(--display);font-weight:900;font-size:clamp(1.25rem,3.4vw,1.75rem);text-align:center;
display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:1.4rem;line-height:1.5}
.lp-h2::before,.lp-h2::after{content:"";width:3px;height:1.5em;background:var(--sun-deep);border-radius:2px;flex-shrink:0}
.lp-h2::before{transform:rotate(-20deg)}
.lp-h2::after{transform:rotate(20deg)}
.lp-h2 em{font-style:normal;color:var(--brand-deep)}
.lp-h2 .big{font-size:1.35em;color:var(--brand)}
/* --- 3ジャンルのカード --- */
.lp-genres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:880px){.lp-genres{grid-template-columns:1fr}}
/* カード全体がなので、リンクの既定色（青／訪問済みの紫）と下線を必ず打ち消す。
これが無いと、中のがブラウザ既定のリンク色で表示される。
.acard / .pillar-card / a.dash などにも同じ指定が入っている。 */
.gcard{background:var(--surface);border:3px solid var(--gc);border-radius:var(--r);padding:1.2rem;
display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow);transition:.18s;
text-decoration:none;color:inherit}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gcard.shoku{--gc:var(--g-shoku);--gc-soft:var(--g-shoku-soft)}
.gcard.shokuzai{--gc:var(--g-shokuzai);--gc-soft:var(--g-shokuzai-soft)}
.gcard.deli{--gc:var(--g-deli);--gc-soft:var(--g-deli-soft)}
.gcard .gh{display:flex;align-items:center;gap:.5rem;justify-content:center}
.gcard .gh .ic{font-size:1.5rem;line-height:1}
.gcard .gh h3{font-family:var(--display);font-weight:900;font-size:1.32rem;color:var(--gc)}
.gcard .gsub{text-align:center;font-size:.8rem;color:var(--ink-soft);margin-top:-.35rem}
.gcard .ph-slot{aspect-ratio:16/10;border-color:var(--gc);background:var(--gc-soft);color:var(--gc)}
.gcard ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.gcard li{position:relative;padding-left:1.5rem;font-size:.84rem;line-height:1.6}
/* チェックマークをCSSで描く（記号フォントに依存させない） */
.gcard li::before{content:"";position:absolute;left:0;top:.15em;width:16px;height:16px;border-radius:50%;background:var(--gc)}
.gcard li::after{content:"";position:absolute;left:5px;top:.42em;width:4px;height:7px;
border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.gcard .gbtn{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
background:var(--gc);color:#fff;font-weight:800;font-size:.86rem;text-decoration:none;
padding:.7rem 1.1rem;border-radius:var(--r-pill);transition:.15s}
.gcard .gbtn:hover{filter:brightness(1.08)}
.gcard .gbtn::after{content:"";width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);flex-shrink:0}
/* まだ記事が無いジャンルのカード。リンクにせず「準備中」と分かる見た目にする
（リンク切れはASPの審査でも読者の体験でもマイナスなので、作るまでは出さない） */
.gcard.soon{opacity:.62;filter:grayscale(.35)}
.gcard.soon .gbtn{background:#b9b1aa;pointer-events:none;justify-content:center}
.gcard.soon .gbtn::after{display:none}
/* --- ランキングTOP3 --- */
.lp-rank{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(max-width:560px){.lp-rank{grid-template-columns:1fr}}
.rcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
padding:.9rem .8rem;text-align:center;box-shadow:var(--shadow)}
.rcard .rno{position:absolute;top:-10px;left:-6px;width:34px;height:34px;border-radius:50%;color:#fff;
display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:.8rem;
background:#b9b9b9;box-shadow:0 3px 7px rgba(0,0,0,.18);border:2px solid #fff}
.rcard.r1 .rno{background:linear-gradient(145deg,#ffd34d,#e0a800)}
.rcard.r2 .rno{background:linear-gradient(145deg,#cdd3d8,#9aa4ad)}
.rcard.r3 .rno{background:linear-gradient(145deg,#e0a878,#b57843)}
.rcard .ph-slot{aspect-ratio:4/3;margin-bottom:.55rem}
.rcard .stars{color:var(--amber);font-size:.86rem;letter-spacing:.06em}
.rcard .score{font-size:.74rem;color:var(--ink-soft);margin:.15rem 0 .5rem}
.rcard .score b{font-family:var(--mono);color:var(--ink);font-size:.9rem}
.rcard .rbtn{display:inline-block;font-size:.76rem;font-weight:800;color:var(--ink);background:var(--bg);
border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem .9rem;text-decoration:none;transition:.15s}
.rcard .rbtn:hover{border-color:var(--brand);color:var(--brand-deep)}
/* --- ピンクの大型CTA --- */
.lp-cta{background:var(--sun-soft);border-radius:var(--r);padding:1.6rem;text-align:center}
.lp-cta .ct{font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,2.8vw,1.45rem);line-height:1.5;margin-bottom:1rem}
.lp-cta .ct em{font-style:normal;color:var(--pink)}
.btn-pink{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
background:linear-gradient(135deg,var(--pink-lt),var(--pink));color:#fff;font-family:var(--display);font-weight:900;
font-size:1.08rem;padding:.95rem 2.4rem;border-radius:var(--r-pill);text-decoration:none;
box-shadow:0 6px 0 #c73253,0 10px 20px rgba(250,78,114,.3);transition:.12s}
.btn-pink:hover{transform:translateY(2px);box-shadow:0 4px 0 #c73253,0 7px 14px rgba(250,78,114,.3)}
.btn-pink::after{content:"";width:8px;height:8px;border-top:2.5px solid #fff;border-right:2.5px solid #fff;transform:rotate(45deg)}
.lp-cta .reassure{display:flex;justify-content:center;flex-wrap:wrap;gap:1.1rem;margin-top:1rem;font-size:.76rem;font-weight:700;color:var(--ink-soft)}
.lp-cta .reassure span{display:inline-flex;align-items:center;gap:.3rem}
/* ランキングとCTAの2段組。狭い画面では縦に積む */
@media(max-width:880px){.lp-bottom{grid-template-columns:1fr!important}}
/* --- 下部の黄色い帯 --- */
.lp-band{background:linear-gradient(90deg,var(--sun),#ffdf7a);text-align:center;padding:.9rem 1rem;
font-family:var(--display);font-weight:800;font-size:.92rem;color:#6b4a12}
/* ============================================================
ご利用の流れ（横5ステップ・2026-08-14 追加）
LP素材のモックアップを参考に、事実だけで構成し直したもの
（素材にあった「利用者数120万人」等の架空統計は不採用）
============================================================ */
.usesteps{display:flex;align-items:flex-start;justify-content:center;gap:.3rem;margin-top:1.6rem}
.usestep{flex:1 1 0;max-width:130px;display:flex;flex-direction:column;align-items:center;text-align:center}
.usestep .un{width:54px;height:54px;border-radius:50%;background:var(--surface);border:2px solid var(--line);
display:grid;place-items:center;font-size:1.5rem;margin-bottom:.55rem;box-shadow:var(--shadow)}
.usestep .uno{font-family:var(--mono);font-size:.62rem;font-weight:800;color:var(--brand-deep);margin-bottom:.15rem}
.usestep .ulb{font-size:.8rem;font-weight:800;line-height:1.4}
.usearrow{align-self:center;flex:0 0 auto;width:12px;height:12px;margin-top:20px;
border-top:2.5px solid var(--line);border-right:2.5px solid var(--line);transform:rotate(45deg)}
@media(max-width:680px){
.usesteps{flex-wrap:wrap;gap:1.1rem 0}
.usestep{flex:1 1 30%;max-width:none}
.usearrow{display:none}
}
/* ============================================================
よくある質問（アコーディオン・2026-08-14 追加）
ネイティブの を使用。JSなしで開閉できる
（プログレッシブ・エンハンスメント）
============================================================ */
.faq{display:grid;gap:.7rem;margin-top:1.4rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1rem 1.2rem;font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:.7rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;font-weight:800}
.faq summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-a{padding:0 1.2rem 1.1rem 3.6rem;font-size:.88rem;line-height:1.8;color:var(--ink-soft)}
.faq .faq-a b{color:var(--ink)}
.faq .faq-a a{color:var(--brand-deep);font-weight:700}
/* ============================================================
比較表の操作パネル（compare.js とセット・2026-08-11 新設）
ボタンを押すと .is-on が付く。JSが動かなくても表は普通に読める
============================================================ */
.cmp-ctl{display:flex;flex-direction:column;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1rem 1.1rem;margin-bottom:1rem}
.cmp-grp{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
.cmp-lbl{font-size:.68rem;font-weight:800;font-family:var(--mono);color:var(--ink-soft);letter-spacing:.06em;margin-right:.3rem;flex-shrink:0}
.cmp-btn{font-size:.78rem;font-weight:700;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);
padding:.4rem .85rem;border-radius:var(--r-pill);cursor:pointer;transition:.15s;font-family:var(--body);line-height:1.5}
.cmp-btn:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-tint)}
.cmp-btn.is-on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-brand)}
.cmp-btn:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
/* 並べ替えボタンが降順のときだけ出る「▼」相当の三角（CSSで描く＝フォント非依存） */
.cmp-btn[data-sort]::after{content:"";display:inline-block;width:0;height:0;margin-left:.4rem;vertical-align:middle;
border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;
opacity:0;transition:transform .15s,opacity .15s}
.cmp-btn[data-sort].is-on::after{opacity:.75}
.cmp-btn[data-sort].is-on.is-desc::after{transform:rotate(180deg)}
.cmp-btn[data-sort="default"]::after{display:none}
.cmp-count{font-size:.76rem;color:var(--ink-soft);font-family:var(--mono);margin-bottom:.5rem}
.cmp-count b{color:var(--brand-deep);font-size:.95rem}
.cmp-empty{padding:2rem 1rem;text-align:center;font-size:.88rem;color:var(--ink-soft)}
/* 表が画面幅を超えたら、表の中だけ横スクロールさせる（ページ全体は動かさない） */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-scroll .ctable{min-width:640px}
@media(max-width:560px){
.cmp-lbl{width:100%;margin-bottom:.1rem}
.cmp-btn{font-size:.74rem;padding:.35rem .7rem}
}
/* ============================================================
商品カード（物販リンク用・2026-08-20 追加）
配達のがっこうで使っていた .prod を移植。
変数名だけ --green 系 → --brand 系に読み替えている。
============================================================ */
.prod{display:grid;grid-template-columns:140px 1fr;gap:1.1rem;align-items:start;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:1.1rem;margin:1.1rem 0}
.prod.best{border-color:var(--brand);border-width:2px;background:var(--brand-tint)}
.prod .pimg{display:block;width:100%;height:auto;border-radius:8px;background:#fff;border:1px solid var(--line)}
.prod .ptag{display:inline-block;font-size:.64rem;font-weight:800;font-family:var(--mono);letter-spacing:.04em;padding:.18rem .6rem;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep);margin-bottom:.35rem}
.prod.best .ptag{background:var(--brand-deep);color:#fff}
.prod h4{font-size:1.02rem;font-weight:900;line-height:1.4;margin-bottom:.4rem}
.prod .pspec{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0}
.prod .pspec span{font-size:.72rem;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem;color:var(--ink-soft)}
.prod .pspec span.hit{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}
.prod .pnote{font-size:.82rem;color:var(--ink-soft);line-height:1.65;margin:.45rem 0 .6rem}
.prod .pbuy{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
@media(max-width:520px){.prod{grid-template-columns:1fr}.prod .pimg{max-width:200px;margin:0 auto}}
/* ============================================================
シェアボタン（2026-08-30 追加）
・外部スクリプトは読み込まない。intent URL を叩くだけの素のリンク。
公式ウィジェットを使うと表示が遅くなり、追跡も入るため採用しない。
・リンクは share.js が location と title から組み立てる。
記事ごとにURLを手で書かないので、URLエンコード漏れが起きない。
============================================================ */
.share{margin:2rem 0 1.4rem;padding:1.1rem 1.2rem;background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--r-sm)}
.share-ttl{font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:.2rem}
.share-sub{font-size:.8rem;color:var(--ink-soft);line-height:1.6;margin-bottom:.75rem}
.share-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.sbtn{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-weight:800;font-size:.82rem;
padding:.55rem .95rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);
transition:transform .12s ease,box-shadow .12s ease}
.sbtn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.08)}
.sbtn .si{font-weight:900;font-size:.9rem;line-height:1}
.sbtn.x{background:#000;color:#fff;border-color:#000}
.sbtn.line{background:#06c755;color:#fff;border-color:#06c755}
.sbtn.hatena{background:#00a4de;color:#fff;border-color:#00a4de}
.sbtn.copy{background:#fff;color:var(--ink)}
.sbtn.copy.done{background:var(--brand);color:var(--ink-on-brand);border-color:var(--brand)}
@media(max-width:420px){.share-btns{gap:.4rem}.sbtn{font-size:.78rem;padding:.5rem .8rem}}
/* ============================================================
SNSの投稿を引用するブロック（2026-08-30 追加）
・味や好みの感想は引用しない。「冷凍庫に何食入ったか」のように
確かめられる事実に触れた投稿だけを、記事の主張の裏づけとして引く。
・外部スクリプト（widgets.js）は読み込まない。静的な引用として組む。
公式の埋め込みAPI(oEmbed)は2026年時点で有料になっており、
本文をこちらで検証できないため、確認できたものだけを手で置く。
・引用の要件を満たすため、出所（投稿者・日付・原文リンク）を必ず出す。
============================================================ */
.voice{margin:1.6rem 0;padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--line);
border-left:4px solid var(--brand);border-radius:var(--r-sm)}
.voice-ttl{font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:.7rem}
.voice-q{margin:0;padding:0 0 0 .2rem}
.voice-q p{margin:0 0 .5rem;font-size:.95rem;line-height:1.85;color:var(--ink)}
.voice-q cite{display:block;font-style:normal;font-size:.78rem;color:var(--ink-soft)}
.voice-q cite a{color:var(--brand-deep)}
.voice-note{margin:.8rem 0 0;padding-top:.7rem;border-top:1px dashed var(--line);
font-size:.79rem;line-height:1.7;color:var(--ink-soft)}