/* 親ケアナビ コンポーネント：btn / header / hero / tiles / rank-card / cmp / pr-bar / toc / breadcrumb / sticky-cta / footer */

/* ---- ボタン（立体感＝押せる感・48px以上） ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;line-height:1.3;padding:.8em 1.5em;border-radius:999px;
  font-weight:700;font-size:1.0625rem;text-decoration:none;text-align:center;
  transition:background .15s,transform .12s,border-color .15s;border:2px solid transparent;cursor:pointer;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-dark);text-decoration:none;}
.btn-outline{background:#fff;color:var(--accent-dark);border-color:var(--accent);}
.btn-outline:hover{background:var(--accent-soft);text-decoration:none;}
/* 物販ボタン＝各サービスのテーマ色を穏やかに（楽天=赤／Amazon=カート金）。サイトの橙CTAと役割を分離。 */
.btn-rakuten{background:#b23a36;color:#fff;border-color:#b23a36;}
.btn-rakuten:hover{background:#993029;color:#fff;text-decoration:none;}
.btn-amazon{background:#e8bf5e;color:#2a2a2a;border-color:#d9ad44;}
.btn-amazon:hover{background:#dab04a;color:#2a2a2a;text-decoration:none;}
.btn-lg{font-size:1.2rem;padding:1em 1.8em;}
.btn-block{display:block;width:100%;}
.btn .free{margin-left:.2em;background:var(--trust);color:#fff;font-size:.74em;font-weight:800;padding:.2em .6em;border-radius:999px;white-space:nowrap;flex:0 0 auto;}
/* ボタン文言は <wbr> の位置でだけ折り返す（2026-10-29：スマホで「見積も／る」「無／料」に割れていた） */
.btn .bt{word-break:keep-all;overflow-wrap:anywhere;}

/* ---- ヘッダー ---- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;min-height:60px;}
.brand{display:inline-flex;align-items:center;gap:0;font-weight:900;font-size:1.25rem;color:var(--heading);text-decoration:none;white-space:nowrap;}
.brand::before{content:"";width:26px;height:26px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.9 2 4.5 5.3 4.5 9.4c0 5.2 7.5 12.1 7.5 12.1s7.5-6.9 7.5-12.1C19.5 5.3 16.1 2 12 2z' fill='%233a6b5e'/%3E%3Cpath d='M12 12.3c-1.9-1.7-3.2-2.8-3.2-4.2 0-1 .8-1.7 1.7-1.7.6 0 1.1.3 1.5.8.4-.5.9-.8 1.5-.8.9 0 1.7.7 1.7 1.7 0 1.4-1.3 2.5-3.2 4.2z' fill='%23d9772b'/%3E%3C/svg%3E") no-repeat center/contain;}
.brand::before{margin-right:.42rem;}
/* 2026-10-29 kakke指摘：flexの gap が文字「親ケア」と「ナビ」の間にも入っていた→ gap:0 にしてアイコンの右だけ空ける */
.brand .dot{color:var(--accent);}
.gnav{display:flex;gap:1.2rem;}
.gnav a{color:var(--text);text-decoration:none;font-weight:700;font-size:1rem;white-space:nowrap;padding:.25em 0;border-bottom:2px solid transparent;}
.gnav a:hover{color:var(--accent-dark);border-bottom-color:var(--accent);}
.header-cta{margin-left:auto;}
.header-cta .btn{min-height:42px;padding:.5em 1em;font-size:.95rem;}
/* モバイル：ナビをヘッダー2段目に横スクロールで常時表示（ハンバーガー不要・JSなし） */
@media(max-width:879px){
  .gnav{order:3;flex-basis:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem;gap:1.1rem;font-size:.95rem;}
  /* 2026-10-29 ボタンの文字が長いページ（全129中28ページ・幅360px）でボタンが3段目に落ち、ヘッダーが94→140pxになっていた。
     ボタンはロゴの横に収め、長い文言はボタンの中で2行に折る＝ヘッダーの高さをどのページでもほぼ同じにする（ページ内リンクの止まり位置を揃えるため） */
  .header-cta{flex:1 1 0;min-width:0;display:flex;justify-content:flex-end;}
  .header-cta .btn{font-size:.85rem;padding:.4em .9em;line-height:1.25;text-align:center;}
}

/* ---- ヒーロー ---- */
.hero{padding-block:clamp(2.4rem,6vw,4.4rem) clamp(2rem,5vw,3.4rem);}
.hero-grid{display:grid;gap:2rem;align-items:center;}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr;gap:3rem;} }
.hero h1{font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.28;margin:.7rem 0 .55em;letter-spacing:.01em;}
.hero h1 .hl{color:var(--accent);}
/* 日本語の改行を文節単位にする：各かたまりは途中で折り返さず、かたまり間でのみ改行 */
.hero h1 span{display:inline-block;}
.hero-lead{font-size:1.1rem;color:var(--text-sub);max-width:32em;margin:.2rem 0 1.4rem;line-height:1.85;}
.hero .lead{max-width:34em;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;}
.hero-note{font-size:var(--fs-small);color:var(--text-sub);margin-top:1rem;}
/* ヒーロー右：SVGモチーフ＋浮遊カード */
.hero-visual{position:relative;display:grid;place-items:center;}
.hero-visual svg{width:min(340px,80%);height:auto;filter:drop-shadow(0 18px 30px rgba(42,59,77,.12));}
.float-card{position:absolute;background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.10);padding:.65rem .9rem;font-size:.9rem;font-weight:700;color:var(--heading);display:flex;align-items:center;gap:.5rem;}
.float-card .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:#fff;font-size:1rem;}
.fc1{top:4%;left:-2%;} .fc2{bottom:12%;right:-3%;} .fc3{bottom:-2%;left:16%;}
@media(max-width:560px){ .float-card{display:none;} }
/* ヒーロー右側の悩みチェックカード（空白を意味あるコンテンツで埋める） */
.hero-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.5rem;box-shadow:0 10px 28px rgba(0,0,0,.07);}
.hero-card h2{font-size:1.12rem;border:0;padding:0;margin:0 0 .9rem;color:var(--heading);}
.hero-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;}
.hero-card li{display:flex;gap:.55rem;align-items:flex-start;word-break:keep-all;}
.hero-card li::before{content:"\2713";color:var(--trust);font-weight:800;flex:0 0 auto;}
.hero-card .hc-note{font-size:var(--fs-small);color:var(--text-sub);margin:1rem 0 0;}

/* ---- 見積りCTA帯 ---- */
.cta-band{background:var(--trust);color:#fff;text-align:center;}
.cta-band .wrap{padding-block:2rem;}
.cta-band h2{color:#fff;border:0;padding:0;margin:0 0 .3em;}
.cta-band p{color:#eaf3f0;margin-bottom:1.2rem;}
.cta-band .btn-accent{box-shadow:0 3px 0 rgba(0,0,0,.25);}

/* ---- カテゴリタイル ---- */
.cat-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media(min-width:680px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
.cat-tile{position:relative;display:block;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;
  padding:1.5rem 1.4rem;text-decoration:none;color:var(--text);text-align:left;transition:box-shadow .2s,transform .15s,border-color .2s;}
.cat-tile::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.cat-tile:hover{box-shadow:0 16px 34px rgba(0,0,0,.10);transform:translateY(-4px);border-color:#e8d9c6;text-decoration:none;}
.cat-tile:hover::after{transform:scaleX(1);}
.cat-tile .ico{font-size:1.85rem;line-height:1;display:grid;place-items:center;width:56px;height:56px;border-radius:15px;background:var(--bg-soft);margin-bottom:.7rem;}
.cat-tile h3{margin:0 0 .35em;color:var(--heading);}
.cat-tile .tags{font-size:var(--fs-small);color:var(--text-sub);word-break:keep-all;display:flex;flex-wrap:wrap;gap:.35rem;}
.cat-tile .tags span{white-space:nowrap;background:#f4f1ec;border-radius:999px;padding:.2em .65em;}
.cat-tile .go{display:inline-flex;align-items:center;gap:.3em;margin-top:.8rem;color:var(--accent-dark);font-weight:800;font-size:.95rem;}

/* ---- ポータル用カバー（記事一覧のオーバーレイ型カードとは別デザイン＝写真は上・文字は重ねず下の白地に置く。「入口を選ぶ」と「記事を読む」を視覚で区別） ---- */
.cat-tile.has-cover{padding:0;}
.cat-tile.has-cover .tile-cover{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);}
.cat-tile.has-cover .tile-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.cat-tile.has-cover:hover .tile-cover img{transform:scale(1.05);}
.cat-tile.has-cover .tile-body{display:block;padding:1.2rem 1.4rem 1.4rem;}
.cat-tile.has-cover .ico{display:none;}
.cat-tile.has-cover .go{margin-top:.7rem;}
/* ホームの注目カード：写真ヘッダー＋文字は下（.has-imgのオーバーレイは付けない＝記事一覧カードと区別） */
.post-thumb.cover-top{display:block;font-size:0;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);}
.post-thumb.cover-top img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.post-card:hover .post-thumb.cover-top img{transform:scale(1.05);}

/* ---- ランキングカード ---- */
/* 比較カードは本文(measure)幅に縛られず、ビューポート中央に広く展開。枚数が3未満なら中央寄せ（左寄り防止）。 */
.rank-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),320px));justify-content:center;
  width:min(1000px,94vw);margin-left:50%;transform:translateX(-50%);}
.rank-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.3rem;transition:box-shadow .2s;}
.rank-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.08);}
.rank-badge{position:absolute;top:-12px;left:14px;background:var(--accent);color:#fff;font-weight:800;
  font-size:.9rem;padding:.25em .8em;border-radius:20px;box-shadow:0 2px 5px rgba(0,0,0,.18);}
.rank-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--bg-soft);border-radius:8px;margin:.6rem 0;}
.rank-img.has-photo{display:block;padding:.5rem;}
.rank-img.has-photo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.rank-img.has-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0!important;border-radius:4px;}
.rank-name{font-size:1.1rem;margin:.4rem 0 .2rem;}
.rank-score{font-weight:700;margin:.2rem 0 .6rem;}
.rank-score .star{color:var(--star);}
.rank-meta{list-style:none;padding:0;margin:0 0 .8rem;font-size:var(--fs-small);color:var(--text-sub);}
.rank-meta li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--border);padding:.25em 0;}
.pros-cons{font-size:var(--fs-small);margin-bottom:.8rem;}
.pros b{color:var(--trust);} .cons b{color:var(--accent-dark);}
.pros-cons ul{margin:.2em 0 .8em;}
.rank-cta{display:flex;flex-direction:column;gap:.5rem;margin:0;}

/* ---- 比較表 ---- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:1.2rem;border:1px solid var(--border);border-radius:8px;
  width:min(1000px,94vw);margin-left:50%;transform:translateX(-50%);}
.cmp{border-collapse:collapse;min-width:620px;width:100%;font-size:1rem;}
.cmp th,.cmp td{border:1px solid var(--border);padding:.8em;text-align:center;word-break:keep-all;}
.cmp thead th{background:var(--bg-soft);color:var(--heading);position:sticky;top:0;}
.cmp tbody th{background:var(--surface);text-align:left;white-space:nowrap;}
.cmp .price{color:var(--accent-dark);font-weight:700;}
.cmp .ok{color:var(--trust);font-weight:700;}

/* ---- 料金相場表 ---- */
.fee-table{width:100%;border-collapse:collapse;margin:1rem 0;}
.fee-table th,.fee-table td{border:1px solid var(--border);padding:.7em .9em;text-align:left;}
.fee-table thead th{background:var(--bg-soft);color:var(--heading);}
.fee-table .price{color:var(--accent-dark);font-weight:700;}

/* ---- 作業フロー（番号付き） ---- */
.flow{list-style:none;counter-reset:step;padding:0;margin:1.2rem 0;display:grid;gap:.7rem;}
/* liはblock＋番号はabsolute配置。flexだとテキスト+strongが別アイテムに割れてスマホで縦1文字列になる（2026-07-05修正） */
.flow li{counter-increment:step;display:block;position:relative;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem .9rem 3.6rem;}
.flow li::before{content:counter(step);position:absolute;left:1rem;top:.95rem;width:2rem;height:2rem;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center;}

/* ---- 記事カード ---- */
.post-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media(min-width:560px){ .post-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:880px){ .post-grid{grid-template-columns:repeat(3,1fr);} }
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:box-shadow .2s,transform .15s;}
.post-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.10);transform:translateY(-3px);text-decoration:none;}
.post-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#eef5f1,#fbeede);display:grid;place-items:center;color:var(--text-sub);font-size:2.2rem;}
.post-thumb.has-img{display:block;font-size:0;aspect-ratio:3/2;overflow:hidden;}
.post-thumb.has-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease;}
.post-card:hover .post-thumb.has-img img{transform:scale(1.06);}
.post-card .body{padding:.9rem 1rem 1.1rem;}
/* 画像カード：下半分をグラデで暗くしタイトルを重ねる（画像がある時だけ適用） */
/* 画像カード：下半分をグラデで暗くしタイトルを重ねる（画像がある時だけ適用）
   ※2026-10-29 写真の下に暗い帯を置く形を試したが、カードが縦に長くなるので kakke指示で元のこの形に戻した */
.post-card:has(.post-thumb.has-img){position:relative;}
.post-card:has(.post-thumb.has-img) .body{position:absolute;left:0;right:0;bottom:0;
  padding:1.7rem .95rem .85rem;
  background:linear-gradient(to top,rgba(24,16,8,.9) 0%,rgba(24,16,8,.64) 42%,rgba(24,16,8,0) 100%);}
/* 写真に重ねるカードは タイトル＋日付 だけ（トップのカードに入っている説明文＝.post-desc は出さない・2026-10-29 kakke指示） */
.post-card:has(.post-thumb.has-img) .post-desc{display:none;}
/* 2026-10-29 kakke指示「文字をカバー画像の下揃えに」：日付の段落の標準の下余白16.5pxが残り、文字の下に約30pxの隙間があった */
.post-card:has(.post-thumb.has-img) .body > :last-child{margin-bottom:0;}
.post-card:has(.post-thumb.has-img) .body .post-date{margin:0;}
.post-card:has(.post-thumb.has-img) h3{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);}
.post-card:has(.post-thumb.has-img) .post-date{color:rgba(255,255,255,.85);}
.post-card:has(.post-thumb.has-img) .cat-label{background:rgba(255,255,255,.92);color:var(--accent-dark);}
.cat-label{display:inline-block;background:var(--accent-soft);color:var(--accent-dark);font-size:.78rem;
  font-weight:700;padding:.15em .6em;border-radius:4px;margin-bottom:.4rem;}
.post-card h3{font-size:1.05rem;margin:.2rem 0;}
/* 2026-10-29 見出しはキーワード以外を1段階細く（700→500）、キーワード（.kw＝oyacare_card_keywords.py が付ける）は太さ700のまま黄色系。
   写真に重ねるカード＝暗いグラデの上なので明るい山吹色／白地のカード＝白との差が足りるよう濃い黄土色 */
.post-card h3{font-weight:500;}
.post-card h3 .kw{font-weight:700;color:#966400;}
.post-card:has(.post-thumb.has-img) h3 .kw{color:#ffe08a;}
.post-date{font-size:var(--fs-small);color:var(--text-sub);}

/* ---- 信頼シグナル ---- */
.trust-grid{display:grid;gap:var(--gap);grid-template-columns:1fr;}
@media(min-width:680px){ .trust-grid{grid-template-columns:repeat(3,1fr);} }
.trust-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.1rem;}
.trust-item .ico{font-size:1.6rem;}
.trust-item h3{font-size:1.05rem;margin:.3rem 0;}

/* ---- PR表記バー ---- */
.pr-bar{background:var(--pr-bar);color:var(--text-sub);font-size:var(--fs-small);
  padding:.6em .9em;border-radius:6px;margin:0 0 1.2em;}
.pr-badge{background:var(--text-sub);color:#fff;padding:.05em .5em;border-radius:4px;font-weight:700;margin-right:.5em;}

/* ---- 目次 ---- */
.toc{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:1rem 1.2rem;margin:1.4rem 0;}
.toc-title{font-weight:700;color:var(--heading);margin:0 0 .5em;}
.toc ol{margin:0;padding-left:1.4em;}
.toc a{color:var(--text);}

/* ---- パンくず ---- */
.breadcrumb{font-size:var(--fs-small);color:var(--text-sub);padding:.8rem 0;}
.breadcrumb a{color:var(--accent-dark);}

/* ---- 関連リンク ---- */
.related{background:var(--bg-soft);border-radius:8px;padding:1.2rem;margin:2rem 0;}

/* ---- 追従CTA（モバイル固定） ---- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--border);
  padding:.6em .8em;box-shadow:0 -2px 8px rgba(0,0,0,.08);}
.sticky-cta .btn{display:block;}
@media(min-width:768px){ .sticky-cta{display:none;} }
/* 2026-10-29 kakke指示「スマホ画面の下のボタン（比較表を見る など）は不要」＝全ページで出さない。
   HTMLは119ページに残っている（記事の生成工程が今後も付ける）ので、CSSで消す。下に空けていた80pxの余白も外した */
.sticky-cta{display:none!important;}

/* ---- フッター ---- */
.site-footer{background:#27302e;color:#cdd4d0;margin-top:3rem;}
.site-footer .wrap{padding-block:2rem;}
.site-footer a{color:#e9c9a8;}
.foot-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;padding:0;margin:0 0 1rem;}
.foot-nav a{text-decoration:none;}
.foot-small{font-size:var(--fs-small);color:#a9a49c;}

/* ---- v2: 共通ヘルパー（トップ背景 / eyebrow / セクション見出し / chips / 3ステップ / CTAバンド / スクロールリビール） ---- */
body.home{background:
  radial-gradient(1100px 560px at 82% -8%, #eef5f1 0%, rgba(238,245,241,0) 58%),
  radial-gradient(820px 480px at -6% 3%, #fbf1e6 0%, rgba(251,241,230,0) 54%),
  var(--bg);}
.eyebrow{display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.12em;color:var(--trust);
  background:#e7f0ec;border:1px solid #d3e4dc;padding:.35em .9em;border-radius:999px;}
.sec-head{text-align:center;max-width:40rem;margin:0 auto 2.2rem;}
.sec-title{border:0;padding:0;margin:.6rem 0 .4rem;font-size:clamp(1.5rem,3.4vw,2rem);}
.sec-title span,.ctaband h2 span{display:inline-block;} /* 文節チャンク＝1文字孤立改行の防止 */
.sec-sub{color:var(--text-sub);margin:0;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem .7rem;margin-top:1.4rem;}
.chip{display:inline-flex;align-items:center;gap:.4em;font-size:.9rem;color:var(--text-sub);
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:.4em .85em;}
.chip b{color:var(--trust);}
.steps{display:grid;gap:1.1rem;grid-template-columns:1fr;}
@media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);} }
.step{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.5rem 1.3rem;}
.step .n{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--trust);color:#fff;font-weight:900;display:grid;place-items:center;font-size:1.15rem;margin-bottom:.7rem;}
.step h3{margin:.2rem 0 .35rem;font-size:1.12rem;}
.step p{margin:0;color:var(--text-sub);font-size:.98rem;}
.ctaband{background:linear-gradient(135deg,var(--trust),#2f5a4f);color:#fff;border-radius:22px;padding:clamp(2rem,5vw,3rem);text-align:center;}
.ctaband h2{color:#fff;border:0;padding:0;margin:0 0 .5rem;font-size:clamp(1.4rem,3.4vw,1.9rem);}
.ctaband p{color:#e6f0ec;margin:0 auto 1.4rem;max-width:34em;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }
/* カードの説明文（トップ）。白地のカードでは日付と同じ小さめの灰色で出す */
.post-desc{font-size:var(--fs-small);color:var(--text-sub);margin:0;}

/* ---- スマホの読みやすさ（2026-10-29 kakke採用：試作 デザイン試作/mobile-read を全記事へ） ----
   ①② 表→カード＝/js/mobile-read.js が .mcards を作る（幅600px以下だけ表示・元の表は隠す）
   ③ 長い段落の分割・④ 出典の折りたたみ・⑥ 目次を導入文の直下へ＝ガチアフィリエイト/tools/oyacare_mobile_read.py（公開時に自動）
   ④ 先に結論の箇条書き＝.sum-box（同スクリプトが tools/oyacare_summary_boxes.json から作る）
   ⑤ スマホの本文 15px→16px */
.mcards{display:none;}
.mr-narrow .mcards{display:grid;gap:12px;margin:1rem 0 1.4rem;}
.mr-narrow .mcards-src{display:none!important;}
.mcard{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px 14px;}
.mcard-h{font-weight:700;color:var(--heading);font-size:16px;line-height:1.5;margin:0 0 8px;}
.mcard-h small,.mcard-h span{font-weight:400;color:var(--text-sub);font-size:13px;}
.mcard dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:15px;line-height:1.55;}
.mcard dt{color:var(--text-sub);}
.mcard dd{margin:0;font-weight:700;}
.mcard details{margin-top:8px;border-top:1px dashed var(--border);padding-top:6px;}
.mcard summary{color:var(--accent-dark);font-weight:700;font-size:14px;cursor:pointer;}
.mcard details dl{margin-top:6px;}
.mcard details dd{font-weight:400;}
.sum-box{border:2px solid var(--trust);border-radius:12px;padding:12px 16px;margin:1.2rem 0 1.4rem;background:#f3f8f6;}
.sum-box .sum-h{font-weight:900;color:var(--trust);margin:0 0 .3rem;}
.sum-box ul{margin:0;padding-left:1.2em;}
.sum-box li{margin:.25rem 0;line-height:1.7;}
.sum-box .sum-go{margin:.4rem 0 0;font-size:.95em;}
details.src-fold summary{font-weight:700;color:var(--heading);cursor:pointer;padding:.2rem 0;}
details.src-fold[open] summary{margin-bottom:.5rem;}
@media(max-width:600px){ main p,main li{font-size:16px;} }
/* 2列の表（カードにしない表）はスマホ幅で横にはみ出さないようにする：最小幅620px・単語の途中で折らない指定を外す */
@media(max-width:600px){
  .cmp{min-width:0;}
  .cmp th,.cmp td{word-break:normal;overflow-wrap:anywhere;padding:.6em;}
  .cmp tbody th{white-space:normal;}
}