/* 記事・一覧・方針のページの共通の見た目
   2026-10-21 22時台 デザイン B「からだチェック型」（クロコ）：
   宮本さん「内容は良い感じ。後はデザイン。このサイトにあった明るいデザイン」「こそだてまっぷはデザインがマッチ」「姿勢のアプリは良い感じ」。
   土台＝からだチェック（白地・爽やかな緑と空色・角丸のカード・広い余白）。足した物＝こそだてまっぷの色とりどりのロゴの字・カテゴリの色・写真つきの行・旗の形の番号。
   2026-10-21 23時台 仕上げ（クロコ・点検35件を反映）：
   ・色は「意味」で配る（並び順では回さない）。カテゴリの色の表＝お金＝緑／休み方＝空／手続き＝桃／住まい＝橙／地域（堺）＝山吹。
     それ以外の飾り（ボタン・印・番号・時間の線の強調など）はサイトの緑（--accent）1色。ロゴの5色はロゴだけ。
   ・目次の番号は、その記事のカテゴリの色（body.cat-okane＝緑・body.cat-sumai＝橙）。
   字に使う濃さは白の上で4.5以上（--c-*）、札の塗りは --f-*（その上の字は --o-*）、淡い帯は --t-*。
   文字 14/16/18/20/24（トップの大見出しとロゴだけ 26/28/32）・太さ 400/500/700・余白 4/8/12/16/24/32/48/64・角丸 8/12/16px と丸い札。影は --shadow の1種類だけ。
   グラデ・絵文字・斜体・明朝・英字の飾りラベルは使わない。丸い点の印・丸い輪のアイコンは使わない（箇条の頭は角の丸い小さな四角）。
   記事の章の見出しは、頭に古墳の印・下にロゴの5色の点線（2026-10-24 宮本さんが選んだ形・◎はやめた）。目次の行の頭は番号。
   入力欄の枠は白の上で3.0以上（--field）。暗い表示の帯は濁らない暗い面（--band-dark）にし、色は波の縁・印・札の字に残す。表のマス・出典・文中のリンクも文節で折る。
   2026-10-28 垢抜け版 v2（デザインの決まり v2・宮本さん「まだこそだてまっぷより垢抜けん・実写でスタイリッシュに・100万案件で」）：
   ・字間は全部0（ロゴだけ今のまま）・本文の行間1.75・字の大きさは 14/16/18/20/24/28/32 だけ・角丸は 4（札）/8（写真・ボタン）/12（箱）の3つ。
   ・一覧は「写真の行」1つ（記事の一覧・人気の記事・新着・地域ガイドのタイル）：字の無い写真＋札→題（墨1色）→補足（灰）。外の箱なし・行の間は1pxの線。
   ・分類の札は淡い地＋濃い字の小さな札（高さ24px・角丸4px・14px/700・印12px）。色は意味で配る（お金＝緑・住まい＝橙・地域＝山吹・休み方＝空・手続き＝桃・トピックス＝緑＋芽）。
   ・ボタンは軽く：もっと見る＝1pxの枠（--line-strong・白の上で3.13）・角丸8px・墨の字。主のボタン＝緑の地・角丸8px。2px の色の枠・ピル型・影はやめた（影は浮く物＝メニューの板・地図の吹き出しだけ）。
   ・色の地の帯はやめ、薄いグレー（--surface-2 #f6f7f6）は 先に結論・足・トップの産休育休マップの章 だけ。 */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
:root {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f7f6; --ink: #1a2b26; --ink-2: #55675f; --line: #e4e8e6;
  /* 2026-10-28 押せる物の輪郭（もっと見る・月の切替・タブ）。白の上で3.13（部品の輪郭は3:1以上） */
  --line-strong: #8a948f;
  /* 2026-10-28 雲の見出しの淡い地（今の5色の淡い段を1つ足した物。白との差 1.19〜1.30 で形が見え、墨の字が11:1以上） */
  --cl-green: #d3efdf; --cl-orange: #fde2cc; --cl-sky: #d4e9f8; --cl-pink: #fbd9e6; --cl-yellow: #fbebb5;
  --accent: #15784f; --accent-ink: #ffffff; --accent-soft: #e6f4ec; --accent-press: #dbeee3; --accent-hover: #10663f;
  /* 柱の色：字に使う濃さ（白の上で4.5以上。桃・空は、押せる行の淡い緑の地 --accent-soft の上でも4.5以上になる濃さ）。山吹は橙と見分けやすいよう黄みに寄せた（白の上で5.17） */
  --c-green: #15784f; --c-orange: #b9480b; --c-sky: #166fb3; --c-pink: #c4306a; --c-yellow: #856a00;
  /* 札の塗りと、その上の字 */
  --f-green: #15784f; --f-orange: #b9480b; --f-sky: #1872b8; --f-pink: #c8336b; --f-yellow: #f5b52a;
  --o-green: #ffffff; --o-orange: #ffffff; --o-sky: #ffffff; --o-pink: #ffffff; --o-yellow: #3d2a00;
  /* 淡い帯 */
  --t-green: #e9f6ef; --t-orange: #fdf0e6; --t-sky: #e8f3fb; --t-pink: #fdeef3; --t-yellow: #fff7dc;
  /* ロゴの字（20〜26pxの太字＝大きい字。白の上でも下の帯 #f3f7f5 の上でも3.0以上。「の」は白で3.40・帯で3.15） */
  --l1: #1b8fd0; --l2: #22a063; --l3: #c97800; --l4: #ec6236; --l5: #e3457f;
  --warn-bg: #fff7dc; --warn-line: #f0c95a; --warn-ink: #4b3800;
  --mark: rgba(255, 196, 0, .34);
  --shadow: 0 2px 8px rgba(26, 64, 48, .08);
  /* 入力欄・選ぶ札の枠（白の上で3.0以上）と、暗い表示の帯の面 */
  --field: #77857f; --band-dark: #18241e;
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;   /* 2026-10-27 宮本さん「子育てサイトらしい字体」→ 本文も丸文字 */
  --gx: 16px;
  /* 印（mask で描くので色は変数） */
  /* お金＝お札（角の丸い四角に¥。丸い輪の印は使わない） */
  --i-yen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='16' height='12' rx='3'/%3E%3Cpath d='M7.5 7l2.5 3 2.5-3M10 10v3.5M8 10.5h4M8 12.5h4'/%3E%3C/svg%3E");
  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5L10 3l7.5 6.5'/%3E%3Cpath d='M4.5 8v9h11V8'/%3E%3Cpath d='M8.5 17v-5h3v5'/%3E%3C/svg%3E");
  /* 休み方＝カレンダー／手続き＝紙をはさむ板 */
  --i-yasumi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='15' height='14' rx='3'/%3E%3Cpath d='M2.5 8.5h15M6.5 2v4M13.5 2v4'/%3E%3C/svg%3E");
  --i-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5h3l1.5 4-2 1.3a9 9 0 0 0 5.2 5.2l1.3-2 4 1.5v3a2 2 0 0 1-2 2A15 15 0 0 1 2.5 4.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  --i-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v5a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M14 8.5h1.5a2 2 0 0 1 0 4H14'/%3E%3Cpath d='M6.5 2.5v2M10 2.5v2'/%3E%3C/svg%3E");
  --i-tetsuzuki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='13' height='15' rx='2.5'/%3E%3Crect x='7' y='1.5' width='6' height='3.5' rx='1.5' fill='black'/%3E%3Cpath d='M7 10h6M7 13.5h4'/%3E%3C/svg%3E");
  /* 2026-10-22 PC のナビの印：計算ツール＝電卓／記事＝本（トップの章見出しの .ic-book と同じ形） */
  --i-calc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='2' width='13' height='16' rx='2.5'/%3E%3Cpath d='M7 6h6'/%3E%3Cpath d='M7 10.5h.01M10 10.5h.01M13 10.5h.01M7 14h.01M10 14h.01M13 14h.01'/%3E%3C/svg%3E");
  --i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.5C8.5 4 6 3.5 2.5 3.5v12c3.5 0 6 .5 7.5 2 1.5-1.5 4-2 7.5-2v-12C14 3.5 11.5 4 10 5.5z'/%3E%3Cpath d='M10 5.5v12'/%3E%3C/svg%3E");
  /* 2026-10-22 スマホの右上とメニューの印：探す＝虫めがね／メニュー＝3本線／閉じる＝×／運営者情報＝人／押した札＝チェック */
  --i-find: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6L17 17'/%3E%3C/svg%3E");
  --i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E");
  --i-me: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='6.5' r='3.5'/%3E%3Cpath d='M3.5 17.5c.8-3.4 3.4-5 6.5-5s5.7 1.6 6.5 5'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18s-6-5.4-6-10a6 6 0 0 1 12 0c0 4.6-6 10-6 10z'/%3E%3Ccircle cx='10' cy='8' r='2.2'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4.5v11M4.5 10h11'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101915; --surface: #17221d; --surface-2: #1d2a24; --ink: #e6efea; --ink-2: #a9bab2; --line: #2c3b34;
    --line-strong: #7d8a84; --cl-green: #1f3a2e; --cl-orange: #3d2a1e; --cl-sky: #1d3347; --cl-pink: #40252f; --cl-yellow: #3a3218;
    --accent: #5ccf97; --accent-ink: #0b1a13; --accent-soft: #1c3428; --accent-press: #25452f; --accent-hover: #7ad9aa;
    --c-green: #5ccf97; --c-orange: #f3a06b; --c-sky: #6db8ef; --c-pink: #f08cb2; --c-yellow: #eec25a;
    --f-green: #5ccf97; --f-orange: #f3a06b; --f-sky: #6db8ef; --f-pink: #f08cb2; --f-yellow: #eec25a;
    --o-green: #101915; --o-orange: #101915; --o-sky: #101915; --o-pink: #101915; --o-yellow: #101915;
    --t-green: #1b2822; --t-orange: #1b2822; --t-sky: #1b2822; --t-pink: #1b2822; --t-yellow: #1b2822;
    --l1: #6cc0f0; --l2: #5ccf97; --l3: #f0c24f; --l4: #f5925f; --l5: #f27fa8;
    --warn-bg: #2e2610; --warn-line: #7d6a22; --warn-ink: #f4e2a3;
    --mark: rgba(238, 194, 90, .30);
    --shadow: 0 2px 8px rgba(0, 0, 0, .30);
    --field: #7d9087; --band-dark: #18241e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101915; --surface: #17221d; --surface-2: #1d2a24; --ink: #e6efea; --ink-2: #a9bab2; --line: #2c3b34;
  --line-strong: #7d8a84; --cl-green: #1f3a2e; --cl-orange: #3d2a1e; --cl-sky: #1d3347; --cl-pink: #40252f; --cl-yellow: #3a3218;
  --accent: #5ccf97; --accent-ink: #0b1a13; --accent-soft: #1c3428; --accent-press: #25452f; --accent-hover: #7ad9aa;
  --c-green: #5ccf97; --c-orange: #f3a06b; --c-sky: #6db8ef; --c-pink: #f08cb2; --c-yellow: #eec25a;
  --f-green: #5ccf97; --f-orange: #f3a06b; --f-sky: #6db8ef; --f-pink: #f08cb2; --f-yellow: #eec25a;
  --o-green: #101915; --o-orange: #101915; --o-sky: #101915; --o-pink: #101915; --o-yellow: #101915;
  --t-green: #1b2822; --t-orange: #1b2822; --t-sky: #1b2822; --t-pink: #1b2822; --t-yellow: #1b2822;
  --l1: #6cc0f0; --l2: #5ccf97; --l3: #f0c24f; --l4: #f5925f; --l5: #f27fa8;
  --warn-bg: #2e2610; --warn-line: #7d6a22; --warn-ink: #f4e2a3;
  --mark: rgba(238, 194, 90, .30);
  --shadow: 0 2px 8px rgba(0, 0, 0, .30);
  --field: #7d9087; --band-dark: #18241e;
  color-scheme: dark;
}
/* 2026-10-22 PC（1024px以上）の格子は、どのページも1つ（こそだてまっぷと同じ考え）：中身は1152pxまで（左右の余白32px）・右の列320px・間48px。
   1280px の画面で、本文の列の左端は64px・右の列は x=896。1024〜1199px は間を32pxに詰める（本文の列は608px）。
   トップ（home.css）・記事と時期ごとのやること（main.has-side）・一覧（main.wide）・計算ツール（index.html）・ヘッダーとフッターが、この値を使う */
@media (min-width: 1024px) { :root { --pc-max: 1216px; --pc-pad: 32px; --pc-side: 320px; --pc-gap: 48px; } }
@media (min-width: 1024px) and (max-width: 1199px) { :root { --pc-gap: 32px; } }
/* @/shared ---- ここまで */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* カテゴリの色（記事の章の見出し・目次の番号）。書き出しの時に body へ cat-okane / cat-sumai を付ける */
body { --cat: var(--c-green); --cat-t: var(--t-green); margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.75; letter-spacing: 0; -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere; }
body.cat-sumai { --cat: var(--c-orange); --cat-t: var(--t-orange); }
body.cat-chiiki { --cat: var(--c-yellow); --cat-t: var(--t-yellow); }   /* 2026-10-22 堺・大阪（トップの章と同じ山吹） */
a { color: var(--accent); text-underline-offset: 3px; }
/* 2026-10-28 キーボードで選んだ時の線は墨の2px（白の上で14.82） */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 外枠が overflow:hidden の一覧（行全体を押す物）と出典の開け閉めは、輪を内側に描く（外に描くと左右と上が切れる） */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
.cards a:focus-visible, .rank a:focus-visible, .toc a:focus-visible, .links a:focus-visible, .ask a:focus-visible, .recent a:focus-visible, .srcbox summary:focus-visible, .fnav a:focus-visible { outline-offset: -2px; border-radius: 8px; }
/* @/shared ---- ここまで */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.4; }
/* 見出しは書き出しの時に文節の間へ <wbr> を入れてある（BudouX）。文字と文字の間では折らず、<wbr>・読点で折る（iPhone の Safari も同じ） */
h1, h2, h3, .toc a, .card-t, .card-d, .cta, .links a > span:first-child, .links .d, .srcbox summary, .author-cc, .author li, .author div > p, .todo-t, .ex-t, .note-t, .tl-t, .me-h, .tl-e, .byline span { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
/* 2026-10-23 精査：箇条の中で1文ずつ分けた段落の間が0で、1つの塊に見えた */
.body li > p + p { margin-top: 8px; }
/* 本文の最後の行に1〜2字だけ残さない（対応するブラウザだけ）。:where で強さを0にして、見出し・題の balance を消さない */
/* 2026-10-23 宮本さん「字が羅列しすぎ・見にくい」：本文の段落と項目は text-wrap: pretty をやめる（スマホの Safari で、どの行も右が大きく空いて読みにくかった）。題・見出しの balance はそのまま */
/* 言葉の強調（太字＋下線）。リンク（緑の字の下線）と見分けるため、字は濃い色のまま、下線は桃色 */
.ul { font-weight: 700; text-decoration: underline; text-decoration-color: var(--c-pink); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
img { max-width: 100%; height: auto; }
.nw, .nb { white-space: nowrap; }
.num, td { font-variant-numeric: tabular-nums; }

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* ---------- 枠：ロゴ（一文字ずつ柱の色）とナビ ---------- */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
/* 2026-10-28 字間は0（計算ツールのページは本文の字間が .02em なので、共通の帯と一覧はここで0にそろえる） */
body .top, body .bottom, body .cards, body .rank, body .feed, body .more-btn, body .crumbs { letter-spacing: 0; }
.top-in { max-width: 720px; margin: 0 auto; padding: 0 var(--gx); display: flex; align-items: center; justify-content: space-between; gap: 0 8px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; min-height: 56px; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-decoration: none; }
.brand .l1 { color: var(--l1); } .brand .l2 { color: var(--l2); } .brand .l3 { color: var(--l3); } .brand .l4 { color: var(--l4); } .brand .l5 { color: var(--l5); }
.gnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 -8px; }
.gnav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 16px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 8px; white-space: nowrap; }
.gnav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.gnav a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--accent); }
@media (hover: hover) { .gnav a:hover { background: var(--surface-2); } }
.gnav a:active { background: var(--accent-press); }
/* 320px ほどの細い画面：ナビの4つを1段に収める（16pxのまま、間と字間を詰める）。それでも入らない、さらに細い画面では、ナビを横に流せる帯にする */
/* 2026-10-25 ナビが6つになったので、1023px以下は横に流せる1行の帯（右に続きがあると分かるよう端を少しだけ見せる） */
@media (max-width: 1023px) {
  .gnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 16px; }
  .gnav::-webkit-scrollbar { display: none; }
  .gnav a:focus-visible { outline-offset: -3px; }
}
@media (max-width: 359px) {
  .gnav { gap: 0; flex-wrap: nowrap; margin: 0 -4px; }
  .gnav a { padding: 0 4px; }
  .gnav a[aria-current="page"]::after { left: 4px; right: 4px; }
}
@media (max-width: 319px) {
  .gnav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gnav::-webkit-scrollbar { display: none; }
  .gnav a:focus-visible { outline-offset: -3px; }
}
@media (min-width: 640px) { .gnav { margin: 0; } }
/* 2026-10-22 PC（1024px以上）のヘッダー（宮本さん「PC はこそだてまっぷと比べるとバランス悪い」）：
   真ん中に大きめの5色のロゴ（32px）、その下に1行の説明（書いた人の欄の言葉）、その下に1pxの線と、印つきのナビの横1列。
   印の色はロゴの5色から1つずつ（計算ツール＝緑・記事＝空・住まい＝橙・やること一覧＝桃）。今いるページは今と同じ緑の字と下線。
   スマホ・タブレット（1023px以下）は説明と印を出さない（今のまま） */
.tagline { display: none; }
.gn-calc { --gi: var(--i-calc); --gc: var(--l2); }
.gn-book { --gi: var(--i-book); --gc: var(--l1); }
.gn-home { --gi: var(--i-home); --gc: var(--l4); }
.gn-cal { --gi: var(--i-yasumi); --gc: var(--l5); }
.gn-find { --gi: var(--i-find); --gc: var(--l3); }
.gn-me { --gi: var(--i-me); --gc: var(--ink-2); }
.gn-pin { --gi: var(--i-pin); --gc: var(--c-yellow); }
.gn-cup { --gi: var(--i-cup); --gc: var(--c-orange); }
.gn-tel { --gi: var(--i-tel); --gc: var(--c-pink); }
@media (min-width: 1024px) {
  .top-in { max-width: none; padding: 0; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; }
  .top-in > .brand { margin-top: 16px; min-height: 48px; font-size: 32px; letter-spacing: .08em; }
  .tagline { display: block; margin: 0; padding: 0 var(--gx) 24px; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
  .gnav { width: 100%; margin: 0; padding: 0 32px; justify-content: center; flex-wrap: nowrap; gap: 0 32px; border-top: 1px solid var(--line); }
  .gnav a { gap: 8px; min-height: 64px; padding: 0 16px; font-weight: 700; color: var(--ink); }
  .gnav a::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--gc, var(--accent)); -webkit-mask: var(--gi) center / 24px 24px no-repeat; mask: var(--gi) center / 24px 24px no-repeat; }
  .gnav a[aria-current="page"] { color: var(--accent); }
  .gnav a[aria-current="page"]::after { left: 16px; right: 16px; bottom: 8px; }
}
/* ---------- 2026-10-22 スマホ・タブレット（1023px以下）の右上：「探す」と「メニュー」（宮本さん：こそだてまっぷのスマホの、検索とメニューの形が良い）。
   ボタンは 56×56px 以上（印24px＋字14px）。メニューは details（JS が無くても開け閉めできる）で、開くとヘッダーの下に重ねて出す。
   PC（1024px以上）は右上のボタンを出さず、印つきのナビの最後に「探す」を足す（スマホでは、ナビの1段に4つだけ） ---------- */
.top { position: relative; z-index: 30; }   /* 計算ツールの下の帯（z-index 20）より上：開いたメニューの板が帯の下に入らないよう */
.htools { display: flex; align-items: center; gap: 4px; margin: 0 -8px 0 auto; }
.hbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 56px; min-height: 56px; padding: 4px 8px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; }
.hbtn::-webkit-details-marker { display: none; }
.hb-i { flex: none; width: 24px; height: 24px; background: var(--hc); -webkit-mask: var(--hi) center / 24px 24px no-repeat; mask: var(--hi) center / 24px 24px no-repeat; }
.hb-find { --hi: var(--i-find); --hc: var(--l3); }
.hb-find[aria-current="page"] { position: relative; color: var(--accent); }
.hb-find[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--accent); }
.hb-menu { --hi: var(--i-menu); --hc: var(--ink); }
.hmenu[open] .hb-menu { --hi: var(--i-close); background: var(--surface-2); }
.hb-c, .hmenu[open] .hb-o { display: none; }
.hmenu[open] .hb-c { display: inline; }
@media (hover: hover) { .hbtn:hover { background: var(--surface-2); } }
.hbtn:active { background: var(--accent-press); }
.hbtn:focus-visible { outline-offset: -3px; }
.hm-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.hm-in { max-width: 720px; margin: 0 auto; padding: 16px var(--gx) 24px; }
.mnav { list-style: none; padding: 0; margin-top: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.mnav li + li { border-top: 1px solid var(--line); }
.mnav a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; color: var(--ink); font-weight: 700; line-height: 1.5; text-decoration: none; }
.mnav a::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--gc, var(--accent)); -webkit-mask: var(--gi) center / 24px 24px no-repeat; mask: var(--gi) center / 24px 24px no-repeat; }
.mnav a::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); }
.mnav a > span { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.mnav .d { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.mnav a[aria-current="page"] { background: var(--accent-soft); }
.mnav .mn-now { color: var(--accent); font-weight: 700; }
@media (hover: hover) { .mnav a:hover { background: var(--accent-soft); } }
.mnav a:active { background: var(--accent-press); }
.mnav a:focus-visible { outline-offset: -2px; border-radius: 8px; }
/* 言葉で探す欄（メニューの中と、探すページ）：入力欄は16px（iPhone で画面が拡大されない）・高さ48px、右に緑の「探す」 */
.sbox-l { display: block; font-weight: 700; line-height: 1.5; }
.sbox-r { display: flex; gap: 8px; margin-top: 8px; }
.sbox input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.sbox input::placeholder { color: var(--ink-2); opacity: 1; }
.sbox input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.top .sbox input:hover, .top .hsearch input:hover { border-color: var(--field); }
.sbox button { flex: none; min-width: 80px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .sbox button:hover { background: var(--accent-hover); } }
.sbox button:active { background: var(--accent-hover); }
/* スマホ（639px以下）：1段目＝ロゴと右上のボタン、2段目＝ナビ（横いっぱい）。タブレット：ロゴ・ナビ・ボタンの1段 */
.gnav { flex-basis: calc(100% + 16px); }
@media (max-width: 359px) { .gnav { flex-basis: calc(100% + 8px); } }
@media (min-width: 640px) and (max-width: 1023px) { .gnav { flex-basis: 100%; } }
@media (min-width: 1024px) { .gnav { flex-basis: auto; } }
@media (max-width: 1023px) { .gnav a.gn-find { display: none; } }
/* PC（1024px以上）のヘッダーの左右：左＝メニューと言葉で探す欄、右＝計算ツールへのボタン。真ん中のロゴと説明の段（ナビの段の上）の高さの真ん中にそろえる */
.hsearch, .hcta { display: none; }
.hs-l { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 1024px) {
  .top-in { position: relative; }
  /* z-index：開いたメニューを、後ろに書いてあるナビの段（位置を持つ a）より上に重ねる */
  .htools { position: absolute; z-index: 3; left: max(var(--pc-pad), calc((100% - var(--pc-max)) / 2 + var(--pc-pad))); top: 0; bottom: 65px; margin: 0; gap: 16px; }
  .hb-find { display: none; }
  .hmenu { order: -1; }
  .hb-menu { flex-direction: row; gap: 8px; padding: 0 16px 0 12px; }
  .hsearch { display: block; position: relative; }
  .hsearch input { -webkit-appearance: none; appearance: none; min-height: 48px; padding: 8px 12px 8px 44px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
  .hsearch input::placeholder { color: var(--ink-2); opacity: 1; }
  .hsearch input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .hsearch::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--l3); -webkit-mask: var(--i-find) center / 20px 20px no-repeat; mask: var(--i-find) center / 20px 20px no-repeat; pointer-events: none; }
  .hcta { position: absolute; right: max(var(--pc-pad), calc((100% - var(--pc-max)) / 2 + var(--pc-pad))); top: 0; bottom: 65px; margin: auto 0; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px 0 20px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
  .hcta-i { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-calc) center / 20px 20px no-repeat; mask: var(--i-calc) center / 20px 20px no-repeat; }
  .hcta:focus-visible { outline-offset: 3px; }
  /* メニューは左のボタンの下に、幅400pxで出す（言葉で探す欄はヘッダーにあるので、メニューの中では出さない） */
  /* 左の欄（.htools）が位置の基準になる：ボタン（高さ56px・縦の真ん中）のすぐ下 */
  .hm-panel { left: 0; right: auto; top: calc(50% + 36px); width: 400px; border: 1px solid var(--line); border-radius: 12px; }
  .hm-in { padding: 8px; }
  .hm-in > .sbox { display: none; }
  /* PC は外の箱の線だけ（中の一覧の線と二重にしない） */
  .hm-in > .mnav { margin-top: 0; border: 0; border-radius: 8px; }
}
@media (min-width: 1024px) and (hover: hover) { .hcta:hover { background: var(--accent-hover); } }
.hcta:active { background: var(--accent-hover); }
/* 左の欄の幅：真ん中の説明の一行（約370px）と35px以上あける。1200px以上＝224px、1024〜1199px＝176px＋メニューの字は読み上げだけに残して印だけ見せる */
@media (min-width: 1024px) { .hsearch input { width: 224px; } }
@media (min-width: 1024px) and (max-width: 1199px) {
  .hsearch input { width: 176px; }
  .hb-menu { padding: 0 16px; }
  .hb-menu .hb-o, .hmenu[open] .hb-menu .hb-c { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* 2026-10-22 カードの題の下：#札（3つまで）と更新日（前は PC だけ更新日を出していた。スマホでも出す） */
.card-f { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.card-g { display: flex; flex-wrap: wrap; gap: 0 8px; }
.card-u time { white-space: nowrap; }
/* @/shared ---- ここまで */
main { max-width: 720px; margin: 0 auto; padding: 8px var(--gx) 64px; }
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* パンくず：字だけのリンクでも押せる高さは48px（行の真ん中にそろえる） */
.crumbs { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--ink-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-2); border-radius: 4px; }
.crumbs a:active { background: var(--accent-press); }
/* @/shared ---- ここまで */

/* ---------- 記事の頭 ---------- */
.head { margin-top: 8px; }
.head h1 { font-family: var(--font-display); font-size: 24px; line-height: 1.4; letter-spacing: 0; }
/* 2026-10-24 大見出しの上の小さな行（地名など・分類の色）と、大見出しの主役の言葉の色（サイトの5色から） */
.head .kick { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--cat); }
.head .kick + h1 { margin-top: 0; }
.hl-pink { color: var(--c-pink); } .hl-green { color: var(--c-green); } .hl-orange { color: var(--c-orange); } .hl-sky { color: var(--c-sky); }
/* 2026-10-28 上の小さな色の行は、その記事の主役の言葉と同じ色（1ページに1色） */
.head .kick.hl-pink { color: var(--c-pink); } .head .kick.hl-green { color: var(--c-green); } .head .kick.hl-orange { color: var(--c-orange); } .head .kick.hl-sky { color: var(--c-sky); }
.eyecatch { margin-top: 16px; }
.eyecatch img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--surface-2); }
/* 2026-10-28 記事の頭の写真（字の無い実写）：3:2 に切って出す。下に写真の説明と出どころ（14px・灰） */
.eyecatch.ph img { aspect-ratio: 3 / 2; object-fit: cover; }
.eyecatch figcaption { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.eyecatch figcaption a { color: inherit; }
@media (min-width: 760px) { .eyecatch.ph { max-width: 560px; } }
/* 題の下の短い説明は文節で折る（書き出しの時に <wbr>） */
.lead { margin-top: 16px; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.meta { margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.lead { line-height: 1.75; }
.meta span { white-space: nowrap; }
.meta span + span::before { content: "／"; margin: 0 4px; }
.byline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.byline img, .author img, .me-h img { border-radius: 50%; background: var(--t-sky); flex: none; }
/* 書いた人の名前のリンク：押せる高さは48px。上下の負の余白で、行の高さは今のまま（字の行の上下に12pxずつ押せる所が広がる） */
.byline a, .author-n a { display: inline-flex; align-items: center; min-height: 48px; margin: -12px 0; border-radius: 4px; }
.byline a { color: var(--ink-2); }
.byline a:active, .author-n a:active { background: var(--accent-press); }
/* 押せる高さは48pxに広げてあるが、キーボードの輪は字のまわりに描く（下の行の字に重ねない） */
.byline a:focus-visible, .author-n a:focus-visible { outline-offset: -10px; }

/* ---------- 本文 ---------- */
.body { margin-top: 24px; counter-reset: stage; }
.body > * + * { margin-top: 24px; }
.body > p, .body .ex p, .body .me-b p { line-height: 1.75; }
/* 章の見出し：淡い色の帯（角丸12px）。色はその記事のカテゴリの色（お金＝緑・住まい＝橙）で、記事の中では変えない */
.body h2 {
  --hc: var(--cat); --ht: var(--surface-2);
  position: relative; margin-top: 48px; padding: 12px 16px;
  border-radius: 12px; background: var(--ht); color: var(--ink);
  font-family: var(--font-display); font-size: 20px; line-height: 1.4; letter-spacing: 0;
  scroll-margin-top: 16px;
}
.body h2[id] { --hc: var(--cat); --ht: var(--cat-t); }
/* 目次に載らない見出し（書いた人・次に読む・関連）：帯にせず、下に2pxの線と緑の短い線（h3 と同じ形で一回り大きく） */
.body h2:not([id]) { padding: 0 0 8px; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
.body h2:not([id])::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; background: var(--accent); }
/* 記事の一覧（分類ごとの見出しのすぐ下にカード）だけは、見出しの色を分類の色にそろえる（お金＝緑・住まい＝橙。カードの分類名と同じ色） */
.body h2[id]:has(+ .cards .card-k.k-okane) { --hc: var(--c-green); --ht: var(--t-green); }
.body h2[id]:has(+ .cards .card-k.k-sumai) { --hc: var(--c-orange); --ht: var(--t-orange); }
.body h2[id]:has(+ .cards .card-k.k-chiiki) { --hc: var(--c-yellow); --ht: var(--t-yellow); }
/* 記事の章の見出し（目次に載る h2＝id がある物）：下にロゴの5色の丸い点が並ぶ点線（「帖」＝手帳の罫線）。
   2026-10-24 宮本さん「◎は可愛さがない」「こそだてまっぷと被らないオリジナルで」→ 案F「点のレインボーが良い」。帯の色と◎はやめた */
.body h2[id] { padding: 0 0 18px; border-radius: 0; background: none; }
.body h2[id]::before { content: none; }
/* 2026-10-24 宮本さん「可愛い古墳が良い」→ 頭に古墳の印（Codex で作った、ななめ上から見た丘・堀・はにわ。images/kiji/icon/kofun_96.webp） */
/* 2026-10-28 垢抜け版：古墳の印と5色の点線は残し、弱める（印 36→28px・点の直径 8→6px・点の間隔 20→12px・字と点の間12px） */
.body h2[id] { padding-left: 36px; }
.body h2[id]::before { content: ""; position: absolute; left: 0; top: calc((1.4em - 28px) / 2); width: 28px; height: 28px; background: url("/images/kiji/icon/kofun_96.webp") center / 28px 28px no-repeat; }
.body h2[id]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none;
  background: radial-gradient(circle, var(--l1) 3px, transparent 3.5px) -27px 0 / 60px 6px repeat-x, radial-gradient(circle, var(--l2) 3px, transparent 3.5px) -15px 0 / 60px 6px repeat-x, radial-gradient(circle, var(--l3) 3px, transparent 3.5px) -3px 0 / 60px 6px repeat-x, radial-gradient(circle, var(--l4) 3px, transparent 3.5px) 9px 0 / 60px 6px repeat-x, radial-gradient(circle, var(--l5) 3px, transparent 3.5px) 21px 0 / 60px 6px repeat-x; }
.body h3 {
  position: relative; margin-top: 32px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 18px; line-height: 1.4; letter-spacing: 0;
}
.body h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 24px; height: 2px; background: var(--accent); }
.body h2 + *, .body h3 + * { margin-top: 16px; }
.body ol { padding-left: 24px; }
.body li + li { margin-top: 8px; }
.body ol > li::marker { color: var(--accent); font-weight: 700; }
/* 箇条書きの頭：丸い点ではなく、時間の線の節と同じ「角の丸い小さな四角」（8px・角丸2px・緑）。1行目の真ん中（行の高さ1.8）にそろえる。
   番号つきの箇条（ol）は数字のまま。チェックの印を持つ箱（この記事を読んだら・書いた人）と、行の一覧（.links・.cards）は除く */
.body ul:not([class]) { list-style: none; padding-left: 0; }
.body ul:not([class]):not(.todo ul):not(.author ul):not(.zu ul) > li { position: relative; padding-left: 24px; }
.body ul:not([class]):not(.todo ul):not(.author ul):not(.zu ul) > li::before { content: ""; position: absolute; left: 4px; top: calc(.875em - 4px); width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.body .stage ul:not([class]):not(.todo ul):not(.author ul):not(.zu ul) > li::before { background: var(--stb, var(--stc)); }
/* 「ラベル：中身」の項目（時期で見る）：ラベルを1段目の太字にし、中身は次の行から */
.body li > .lbl:first-child, .panel li > .lbl:first-child { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; display: block; margin-bottom: 4px; font-weight: 700; line-height: 1.5; }
.body strong { font-weight: 700; }
/* 答えの1文のマーカー（字の下半分だけ・山吹色） */
.mk { font-weight: 700; box-shadow: inset 0 -.5em 0 var(--mark); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.small { font-size: 14px; line-height: 1.7; }
/* 表のマスの中の注記も中身の一部なので、本文と同じ16px（2026-10-22） */
.tbl .small { font-size: 16px; }
.muted { color: var(--ink-2); }
.src-line { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.src-line a { color: var(--ink-2); }
/* 文中のリンク・出典の一覧・答えのマーカー・関連の一覧は、書き出しの時に文節の間へ <wbr> を入れてある。語の途中では折らない */
/* 2026-10-23 精査：マーカーの文だけ文節で折ると、行の右が100pxほど空いて帯がちぎれて見えた → マーカーは本文と同じ折り方 */
.body a, .srcs li, .links a { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }

/* 箱の題：16px・太字・濃い字。左に20pxの2色の印（::before＝薄い面、::after＝濃い線。色は箱ごとの変数） */
.toc-t, .tl-t, .ex-t, .note-t, .todo-t { position: relative; padding-left: 32px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.note-t { color: var(--warn-ink); }
.toc-t::before, .toc-t::after, .tl-t::before, .tl-t::after, .ex-t::before, .ex-t::after, .note-t::before, .note-t::after, .todo-t::before, .todo-t::after {
  content: ""; position: absolute; left: 0; top: calc((1.5em - 20px) / 2); width: 20px; height: 20px;
  -webkit-mask: var(--ico) center / 20px 20px no-repeat; mask: var(--ico) center / 20px 20px no-repeat;
}
.toc-t::before, .tl-t::before, .ex-t::before, .note-t::before, .todo-t::before { background: var(--ico-face, var(--accent-soft)); }
.toc-t::after, .tl-t::after, .ex-t::after, .note-t::after, .todo-t::after { background: var(--ico-line, var(--accent)); }
/* 目次＝中身の紙 */
.toc-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='2' width='14' height='16' rx='3' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--surface); }
.toc-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='2' width='14' height='16' rx='3'/%3E%3Cpath d='M7 7h6M7 10.5h6M7 14h3'/%3E%3C/svg%3E"); }
/* 時間の線＝カレンダー */
.tl-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='4' width='15' height='14' rx='3' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--t-sky); }
.tl-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='15' height='14' rx='3'/%3E%3Cpath d='M2.5 8.5h15M6.5 2v4M13.5 2v4'/%3E%3Ccircle cx='13' cy='13.5' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E"); --ico-line: var(--c-sky); }
/* 例・計算＝虫めがね（確かめる） */
.ex-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--surface); }
.ex-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.5 12.5L17 17'/%3E%3C/svg%3E"); --ico-line: var(--c-sky); }
/* 気をつける事＝角の丸い四角に「！」（丸い輪の印は使わない） */
.note-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='15' height='15' rx='4' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--surface); }
.note-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2.5' y='2.5' width='15' height='15' rx='4'/%3E%3Cpath d='M10 6v4.5'/%3E%3Crect x='9' y='13' width='2' height='2' rx='.5' fill='black' stroke='none'/%3E%3C/svg%3E"); --ico-line: var(--warn-ink); }
/* この記事を読んだら＝チェックの板 */
.todo-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.5' y='3.5' width='13' height='15' rx='2.5' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--accent-soft); }
.todo-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='13' height='15' rx='2.5'/%3E%3Crect x='7' y='1.5' width='6' height='3.5' rx='1.5' fill='black'/%3E%3Cpath d='M7 11.5l2.25 2.25L13.5 9.5'/%3E%3C/svg%3E"); }
/* ---------- 箱（役目ごと）：淡い色の面の箱は枠なし（気をつける事・例・ツールへの誘い）、白い箱は1pxの枠（この記事を読んだら・目次・時間の線・書いた人・出典）、先に結論だけ緑の2pxの枠 ---------- */
/* 先に結論：白地に緑の2pxの枠、題は丸い札 */
/* 2026-10-28 先に結論：枠をやめ、薄いグレーの箱（角丸12px）。題は箱の中の1行目（16px/700・頭に20pxの緑のチェック） */
.answer { position: relative; background: var(--surface-2); border: 0; border-radius: 12px; padding: 16px; margin-top: 32px; }
.answer-t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; border-radius: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; }
.answer-t::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--accent); -webkit-mask: var(--i-check) center / 20px 20px no-repeat; mask: var(--i-check) center / 20px 20px no-repeat; }
.answer li { line-height: 1.75; }
.answer li + li { margin-top: 8px; }
/* 気をつける事：淡い山吹（枠なし） */
.note { background: var(--warn-bg); color: var(--warn-ink); border-radius: 12px; padding: 16px; }
.note > * + * { margin-top: 8px; }
.note a { color: inherit; }
/* 例・計算：淡い空色 */
.ex { background: var(--t-sky); border-radius: 12px; padding: 16px; }
.ex > * + * { margin-top: 12px; }
/* 書いている私の場合：顔と名前の下に、淡い空色の吹き出し。中の文は .me-b（書き出しの時に包む）。名前の行は濃い字（空色の太字はリンクに見えるため） */
.me-h > span, .cta > span, .srcbox summary > span, .find-bn-s > span { min-width: 0; }
.me-h { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.me-b { position: relative; margin-top: 16px; background: var(--t-sky); border-radius: 12px; padding: 16px; }
.me-b > * + * { margin-top: 12px; }
/* しっぽ：16pxの四角を45度回し、顔（40px）の真ん中の下に置く */
.me-b::before { content: ""; position: absolute; left: 12px; top: -8px; width: 16px; height: 16px; background: var(--t-sky); transform: rotate(45deg); border-radius: 2px; }
/* この記事を読んだら：白地に1pxの枠（下のツールへの誘い＝淡い緑の面と見分ける） */
.todo { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.todo > * + * { margin-top: 12px; }
.todo ul { list-style: none; padding: 0; }
.todo li { position: relative; padding-left: 24px; }
.todo li + li { margin-top: 12px; }

/* ---------- 目次（行の頭は章の番号。色はその記事のカテゴリの色。◎は章の見出しだけに使う） ---------- */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.toc-t { padding: 12px 16px 12px 48px; border-bottom: 1px solid var(--line); background: none; }
.toc-t::before, .toc-t::after { left: 16px; top: calc(12px + (1.5em - 20px) / 2); }
.toc ol { list-style: none; padding: 0 !important; margin: 0; counter-reset: toc; }
.toc li { margin: 0 !important; counter-increment: toc; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; color: var(--ink); text-decoration: none; line-height: 1.5; }
.toc a > span { flex: 1; min-width: 0; }
.toc a::before { content: counter(toc); flex: none; min-width: 16px; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.toc a::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-top: -4px; }
@media (hover: hover) { .toc a:hover { background: var(--accent-soft); } }
.toc a:active { background: var(--accent-press); }

/* ---------- 絵と図 ---------- */
.fig img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--surface-2); }
/* 図や表の説明（決まりそのものが書かれている物もあるので、本文と同じ16px） */
.fig figcaption, .cap { font-size: 16px; color: var(--ink-2); margin-top: 8px; line-height: 1.75; }
/* 時間の線（日付の流れの図）。節は角の丸い小さな四角（丸い点の印は使わない）。線は日付の列と中身の列の間（16pxの真ん中）を通し、節の真ん中を線に合わせる */
.tl { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.tl-t { margin-bottom: 12px; }
.tl ol { list-style: none; padding: 0 !important; margin: 0; position: relative; }
.tl { --tld: 7.5em; }
.tl li { position: relative; display: grid; grid-template-columns: var(--tld) 1fr; gap: 0 16px; padding: 0 0 16px 0; margin: 0 !important; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: calc(var(--tld) + 7px); top: 20px; bottom: -8px; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl-d { font-size: 16px; font-weight: 700; color: var(--c-sky); line-height: 1.7; }
.tl-e { position: relative; padding-left: 16px; line-height: 1.7; }
.tl-e::before { content: ""; position: absolute; left: -14px; top: 8px; width: 12px; height: 12px; border-radius: 4px; background: var(--surface); border: 2px solid var(--c-sky); box-sizing: border-box; }
.tl li.on .tl-e::before { background: var(--accent); border-color: var(--accent); }
.tl li.on .tl-e { font-weight: 700; }

/* ---------- 表（本文と同じ16px。2列の表と数字の表は、スマホでは表の中だけ横に動く） ---------- */
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.6; letter-spacing: 0; }
.tbl th, .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
/* 表の見出しの行は文節で折る（1行に収まらない長い見出しで、表が画面からはみ出さないように） */
.tbl thead th { background: var(--surface-2); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.tbl td.r, .tbl th.r { text-align: right; white-space: nowrap; }
/* 表のマスは書き出しの時に文節の間へ <wbr> を入れ、最後の文節と「10営業日」のような数字＋単位をつないである（「以内」「同意」の1字だけが次の行に落ちない）。
   文節の途中では折らない（keep-all）。列の幅の計算では anywhere（1字ずつ折れる扱い）にして、長い文節（「住宅瑕疵担保責任保険協会の」）でも表を画面からはみ出させない */
.tbl td, .tbl th { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* 3列以上で文の長いマスがある表（書き出しの時に .stack と各マスの data-label を付ける）は、スマホでは1行を1つの塊に積む。
   行の頭のマスを太字の見出しにし、その下に「申請」「支払い」などの列の名前（14px・太字）と中身を2段で並べる */
@media (max-width: 639px) {
  .tbl.stack { overflow: visible; }
  .tbl.stack table, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: auto; }
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tbl.stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .tbl.stack tr:last-child { border-bottom: 0; }
  .tbl.stack td { padding: 0; border: 0; text-align: left; white-space: normal; }
  .tbl.stack td:first-child { font-weight: 700; line-height: 1.5; }
  .tbl.stack td + td { margin-top: 8px; }
  /* 2026-10-23 精査：1列目の名前（「配偶者の給料（額面）」など）が消え、太字の「136万円以下」が何の額か分からなかった → 1列目にも列の名前を出す */
  .tbl.stack td + td::before, .tbl.stack td:first-child::before { content: attr(data-label); display: block; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
}

/* ---------- ツールへの誘導：淡い緑の箱に、緑の丸いボタン ---------- */
.toolbox { background: var(--t-green); border-radius: 12px; padding: 16px; }
.toolbox > * + * { margin-top: 12px; }
.toolbox-t { line-height: 1.8; }
.cta { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 24px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; text-align: center; }
@media (hover: hover) { .cta:hover { background: var(--accent-hover); } }
.cta:active { background: var(--accent-hover); filter: brightness(.92); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cta-sub { font-size: 14px; color: var(--ink-2); text-align: center; }
/* 2026-10-28 プライバシーポリシーの「数えるのを止める」ボタン（.cta と同じ見た目の button） */
button.cta { width: 100%; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
button.cta[hidden] { display: none; }

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* ---------- 関連の一覧（行全体を押せる） ---------- */
.links { list-style: none; padding: 0 !important; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.links li { margin: 0 !important; }
.links li + li { border-top: 1px solid var(--line); }
.links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 16px; color: var(--ink); font-weight: 700; text-decoration: none; line-height: 1.5; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.links a::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); }
.links .d { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); }
@media (hover: hover) { .links a:hover { background: var(--accent-soft); } }
.links a:active { background: var(--accent-press); transition: none; }

/* ---------- 2026-10-28 垢抜け版：一覧の「写真の行」（1つの部品）＝記事の一覧（.cards）・人気の記事（.rank）・新着とカレンダーの一覧（.feed）・地域ガイドのタイル（.pillars-th／トップの .pillars-ph）。
   こそだてまっぷ・いこーよ・ママリ・たまひよの共通＝字の無い実写・題は黒1色・色は分類の札だけ・外の箱なし。
   スマホ：左に写真 144×96（3:2・角丸8px）、右に 札→題（16px/700 墨）→補足（14px 灰）。行の上下16px。行の間は1pxの線（写真の左端と字の右端にそろう）。
   行全体が1つのリンク（左右へ画面の端まではみ出させ、押した時の地が端まで出る。中身の左端は16pxのまま）。写真の無い行（.t-only）は右に山形。
   640px〜：写真 192×128・説明の文を出す。1024px〜：写真 240×160・題18px・1列（宮本さんの決まり：サムネ付きの一覧は PC でも1列。トップの新着だけ3列） ---------- */
.cards, .rank, .feed, .pillars-th, .pillars-ph { list-style: none; margin: 0; padding: 0 !important; display: block; border: 0; border-radius: 0; background: none; overflow: visible; }
.cards > li, .rank > li, .feed > li, .pillars-th > li, .pillars-ph > li { margin: 0 !important; padding: 0; border-radius: 0; background: none; }
.cards > li:not([hidden]) ~ li:not([hidden]), .rank > li + li, .feed > li:not([hidden]) ~ li:not([hidden]), .pillars-th > li + li, .pillars-ph > li + li { border-top: 1px solid var(--line); }
.cards a, .rank a, .feed a, .pl-a.pl-th { display: grid; grid-template-columns: 144px minmax(0, 1fr); column-gap: 12px; align-items: start; height: auto; min-height: 0; margin: 0 calc(-1 * var(--gx)); padding: 16px var(--gx); border-radius: 0; background: none; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.cards a > img, .rank a > img, .feed .fd-img, .pl-ph { display: block; width: 144px; height: 96px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.pl-ph.pl-ic { display: flex; align-items: center; justify-content: center; }
.pl-ph.pl-ic img { width: 48px; height: 48px; }
.fd-img.fd-ic { object-fit: contain; padding: 16px; }
/* 公式チラシ：一覧は上の方（日付・題）を見せる */
.fd-img.fd-fly { object-fit: cover; object-position: center top; }
/* 右の欄：札→題→補足（間4px） */
.cards a > span, .rank .rk-b, .fd-t, .pl-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
/* 2026-10-28 AD 指摘：keep-all と文節の <wbr> で「【光の」「堺・」だけの行ができ、右端がガタガタだった → 一覧の題は字を幅いっぱいまで流す（こそだてまっぷと同じ）。
   折らない塊は地名と【】の中だけ（.nb2・書き出しで付ける）。行の頭の助詞は書き出しで前の字とつないである。最後の行が1〜2字にならないよう pretty */
.card-t, .fd-h, .pl-tx .pt { display: block; margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--ink); word-break: normal; overflow-wrap: anywhere; line-break: strict; text-wrap: pretty; }
.nb2 { display: inline-block; text-indent: 0; }
/* 一覧の題は墨の1色（{ } の主役の言葉も、一覧では色を付けない。記事の大見出しでは色＝.hl） */
.pl-hl { color: inherit; }
.card-d, .pl-tx .pd { display: none; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: pretty; }
.fd-s { display: block; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.fd-t time { font-size: 14px; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.card-g { display: flex; flex-wrap: wrap; gap: 0 8px; }
.card-u time { white-space: nowrap; }
/* 「〜を探す ＞」の行は出さない（行全体が押せるので重ねない） */
.pl-go { display: none !important; }
/* 2026-10-28 地域のページの「記事の一覧」（上のタイルと同じ記事）：たたんだ字だけの行。開く所は「もっと見る」と同じ形（1pxの枠・角丸8px・墨の字）で、山形が下向き */
details.kl { margin-top: 16px; }
details.kl > summary { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
details.kl > summary::-webkit-details-marker { display: none; }
details.kl > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(135deg); }
details.kl[open] > summary::after { margin-top: 4px; transform: rotate(-45deg); }
@media (hover: hover) { details.kl > summary:hover { background: var(--accent-soft); } }
details.kl > summary:active { background: var(--accent-press); transition: none; }
details.kl > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
details.kl > .cards { margin-top: 8px; }
.cards-tx a.t-only { padding-top: 12px; padding-bottom: 12px; }
.cards-tx .card-d { display: block; margin: 0; }
.cards-tx .card-u { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 640px) { details.kl > summary { max-width: 360px; margin: 0 auto; } }
/* 写真の無い行：字だけ＋右に山形（8px・線2px・灰） */
.cards a.t-only, .rank a.t-only { grid-template-columns: minmax(0, 1fr) 8px; column-gap: 16px; align-items: center; }
.cards a.t-only::after, .rank a.t-only::after { content: ""; width: 8px; height: 8px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: translateX(-2px) rotate(45deg); }
@media (hover: hover) { .cards a:hover, .rank a:hover, .feed a:hover, .pl-a.pl-th:hover { background: var(--accent-soft); } }
.cards a:active, .rank a:active, .feed a:active, .pl-a.pl-th:active { background: var(--accent-press); transition: none; }
.cards a:focus-visible, .rank a:focus-visible, .feed a:focus-visible, .pl-a.pl-th:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
/* 細い画面（359px以下）：写真 120×80 */
@media (max-width: 359px) {
  .cards a, .rank a, .feed a, .pl-a.pl-th { grid-template-columns: 120px minmax(0, 1fr); }
  .cards a > img, .rank a > img, .feed .fd-img, .pl-ph { width: 120px; height: 80px; }
}
@media (min-width: 640px) {
  .cards a, .rank a, .feed a, .pl-a.pl-th { grid-template-columns: 192px minmax(0, 1fr); column-gap: 16px; }
  .cards a > img, .rank a > img, .feed .fd-img, .pl-ph { width: 192px; height: 128px; }
  .card-d, .pl-tx .pd { display: block; }
  .pl-tx .pd br { display: none; }
}
@media (min-width: 1024px) {
  .cards a, .rank a, .feed a, .pl-a.pl-th { grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; margin: 0 -16px; padding: 16px; border-radius: 8px; }
  .cards a > img, .rank a > img, .feed .fd-img, .pl-ph { width: 240px; height: 160px; }
  .card-t, .fd-h, .pl-tx .pt { font-size: 18px; }
  .cards a.t-only, .rank a.t-only { grid-template-columns: minmax(0, 1fr) 8px; }
  /* トップの新着だけ3列：写真が上（列の幅いっぱい・3:2）→ 札 → 題16px → 日・場所 → 日付。外の箱と縦横の線は無し */
  .feed-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .feed-home > li:not([hidden]) ~ li:not([hidden]) { border-top: 0; }
  .feed-home a { display: flex; flex-direction: column; gap: 12px; height: 100%; margin: -8px; padding: 8px; }
  .feed-home .fd-img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .feed-home .fd-h { font-size: 16px; }
}
/* 分類の札（A）：淡い地＋濃い字の小さな札。高さ24px・角丸4px・14px/700・頭に12pxの印（字と同じ色）。
   お金＝緑のお札・休み方＝空のカレンダー・手続き＝桃の板・住まい＝橙の家・地域＝山吹のピン・トピックス（イベント・開店・お知らせ）＝緑の芽。地域ガイドのタイルの札は組の色（.kc-*）＋ピン */
.card-k { --kc: var(--c-green); --kt: var(--t-green); --ki: var(--i-yen); display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 100%; height: 24px; padding: 0 8px 1px; border-radius: 4px; background: var(--kt); color: var(--kc); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.card-k::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 1px; background: currentColor; -webkit-mask: var(--ki) center / 12px 12px no-repeat; mask: var(--ki) center / 12px 12px no-repeat; }
.card-k.k-yasumi { --kc: var(--c-sky); --kt: var(--t-sky); --ki: var(--i-yasumi); }
.card-k.k-tetsuzuki { --kc: var(--c-pink); --kt: var(--t-pink); --ki: var(--i-tetsuzuki); }
.card-k.k-sumai { --kc: var(--c-orange); --kt: var(--t-orange); --ki: var(--i-home); }
.card-k.k-chiiki, .card-k.k-pl { --kc: var(--c-yellow); --kt: var(--t-yellow); --ki: var(--i-pin); }
.card-k.kc-green { --kc: var(--c-green); --kt: var(--t-green); } .card-k.kc-orange { --kc: var(--c-orange); --kt: var(--t-orange); } .card-k.kc-sky { --kc: var(--c-sky); --kt: var(--t-sky); } .card-k.kc-pink { --kc: var(--c-pink); --kt: var(--t-pink); } .card-k.kc-yellow { --kc: var(--c-yellow); --kt: var(--t-yellow); }
/* もっと見る（J）：高さ48px・1pxの枠（--line-strong）・角丸8px・白地・墨の字16px/700・右に灰の山形。スマホは幅いっぱい、640px〜は360pxで真ん中 */
.more-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; margin-top: 24px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; text-align: center; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.more-btn::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); }
@media (hover: hover) { .more-btn:hover { background: var(--surface-2); } }
.more-btn:active { background: var(--accent-press); transition: none; }
@media (min-width: 640px) { .more-btn { width: 360px; max-width: 100%; margin-left: auto; margin-right: auto; } }
/* @/shared ---- ここまで */

/* ---------- 書いた人・出典 ---------- */
.author { display: grid; grid-template-columns: 64px 1fr; gap: 12px 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.author-n { font-weight: 700; }
.author-n a { color: var(--accent); }
/* 書いた人の紹介文は文節で折るが、行の長さはそろえない（3行に収める） */
.author div > p:not(.author-n) { text-wrap: pretty; }
/* 書いた人の頭のキャッチコピー（18px・見出しの字・緑）。下に1pxの線 */
.author .author-cc { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--accent); }
.author p { font-size: 16px; line-height: 1.75; }
.author p + p { margin-top: 8px; }
.author > ul, .author > .author-c, .author > .author-xt { grid-column: 1 / -1; }
.author ul { list-style: none; padding: 0; }
/* 2026-10-22 わが家の経験：頭に年月の札（ママの休み＝桃・パパ＝空・淡い面に色の字）、その下に文。時系列。✅はやめた（できた事の一覧に見えるため） */
.author .author-xt { margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--ink-2); }
.author ul.author-x { margin-top: -4px; }
.author li { line-height: 1.75; padding: 8px 0; border-top: 1px solid var(--line); }
.author li:first-child { border-top: 0; }
.author li > span:last-child { display: block; }
/* 年月の札：分類の札（A）と同じ形（高さ24px・角丸4px・淡い地＋濃い字） */
.author-k { display: inline-flex; align-items: center; height: 24px; padding: 0 8px 1px; border-radius: 4px; font-size: 14px; font-weight: 700; line-height: 1; background: var(--akt); color: var(--akc); }
.ak-pink { --akc: var(--c-pink); --akt: var(--t-pink); } .ak-orange { --akc: var(--c-orange); --akt: var(--t-orange); } .ak-sky { --akc: var(--c-sky); --akt: var(--t-sky); } .ak-green { --akc: var(--c-green); --akt: var(--t-green); }
.todo li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.author .author-c { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.srcbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.srcbox summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; font-weight: 700; cursor: pointer; list-style: none; line-height: 1.5; }
.srcbox summary::-webkit-details-marker { display: none; }
.srcbox summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-top: -4px; }
.srcbox[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
@media (hover: hover) { .srcbox summary:hover { background: var(--accent-soft); } }
.srcbox summary:active { background: var(--accent-press); }
.srcbox .srcs { padding: 0 16px 16px 48px; }
.srcs { font-size: 16px; line-height: 1.7; padding-left: 24px; }
.srcs li + li { margin-top: 12px; }
.srcs a { display: inline; padding: 4px 0; }

/* ---------- 時期で見る：淡い面に、番号（1・2・3…）の四角と時期の名前。
   2026-10-22 0時台：トップの時期のタブと同じ色（こそだてまっぷの年齢別の札の考え）＝1 妊娠中＝桃・2 産後8週＝橙・3 育休中＝緑・4 終わる前＝山吹（番号の四角だけ山吹・題の字は本文の色）・5 育休の後＝空 ---------- */
.stage { counter-increment: stage; background: var(--stt, var(--surface-2)); border-radius: 12px; padding: 16px; --stc: var(--accent); --stf: var(--accent); --sto: var(--accent-ink); }
.stage:nth-of-type(5n+1) { --stc: var(--c-pink); --stf: var(--f-pink); --sto: var(--o-pink); --stt: var(--t-pink); }
.stage:nth-of-type(5n+2) { --stc: var(--c-orange); --stf: var(--f-orange); --sto: var(--o-orange); --stt: var(--t-orange); }
.stage:nth-of-type(5n+3) { --stc: var(--c-green); --stf: var(--f-green); --sto: var(--o-green); --stt: var(--t-green); }
.stage:nth-of-type(5n+4) { --stc: var(--ink); --stb: var(--c-yellow); --stl: var(--f-yellow); --stf: var(--f-yellow); --sto: var(--o-yellow); --stt: var(--t-yellow); }
.stage:nth-of-type(5n+5) { --stc: var(--c-sky); --stf: var(--f-sky); --sto: var(--o-sky); --stt: var(--t-sky); }
.stage > * + * { margin-top: 12px; }
.stage h3 { margin-top: 0; padding-left: 40px; color: var(--stc); border-bottom-color: rgba(127, 127, 127, .25); }
.stage h3::before { content: counter(stage); position: absolute; left: 0; top: calc((1.5em - 28px) / 2); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--stf); color: var(--sto); font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1; }
.stage h3::after { background: var(--stl, var(--stc)); }
.stage .when { font-size: 16px; line-height: 1.75; color: var(--ink-2); }

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* ---------- 下：ロゴ、2つに分けた案内（サイトの中／このサイトについて）、目安の断り ---------- */
.bottom { border-top: 1px solid var(--line); background: var(--surface-2); }
.bottom-in { max-width: 720px; margin: 0 auto; padding: 24px var(--gx) 32px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.fbrand { min-height: 48px; font-size: 20px; }
.fnavs { margin-top: 8px; }
.fnav-g + .fnav-g { margin-top: 12px; }
.fnav-h { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); }
/* 項目の間は1pxの縦線。行の左の端の線は外枠の外に出して隠す。スマホは4つを2つずつ2段（線の位置が上下でそろう）、PC は4つを1段 */
.fnav { list-style: none; padding: 0; margin: 4px 0 0 -13px; display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); overflow: hidden; }
.fnav li { display: flex; align-items: center; margin-left: -1px; border-left: 1px solid var(--line); }
.fnav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .fnav a:hover { background: var(--accent-soft); color: var(--ink); } }
.fnav a:active { background: var(--accent-press); }
.bottom-in p { margin-top: 12px; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: pretty; }
.bottom-in .fnav-h { margin-top: 0; }
@media (min-width: 640px) { .fnav { display: flex; flex-wrap: wrap; } }
/* 2026-10-22 PC（1024px以上）：こそだてまっぷの足元のように、左にロゴと説明、右に2つの案内の組（縦に並べる）。中身の幅はヘッダー・トップと同じ1152pxまで */
@media (min-width: 1024px) {
  .bottom-in { max-width: var(--pc-max); padding: 48px var(--pc-pad); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: start; }
  .bottom-in > .fbrand { grid-column: 1; grid-row: 1; justify-self: start; margin-top: -12px; }
  .bottom-in > p { grid-column: 1; max-width: 560px; }
  .fnavs { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; display: flex; gap: 64px; }
  .fnav-g + .fnav-g { margin-top: 0; }
  .fnav { display: block; margin: 4px 0 0 -12px; overflow: visible; }
  .fnav li { margin-left: 0; border-left: 0; }
}
/* @/shared ---- ここまで */

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* 暗い表示：白地の絵が夜にまぶしく浮かないよう、少しだけ暗くする */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.eyecatch, .fig, .cards, .rank) img { filter: brightness(.88); }
}
:root[data-theme="dark"] :is(.eyecatch, .fig, .cards, .rank) img { filter: brightness(.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.feed, .pillars, .photo, .feat-s) img { filter: brightness(.88); } }
:root[data-theme="dark"] :is(.feed, .pillars, .photo, .feat-s) img { filter: brightness(.88); }
/* @/shared ---- ここまで */
/* 2026-10-22 PC の右の列の写真も、暗い表示では同じだけ暗くする */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side-rank img { filter: brightness(.88); } }
:root[data-theme="dark"] .side-rank img { filter: brightness(.88); }

/* 320px ほどの細い画面：表のマスの左右の余白を詰める */
@media (max-width: 359px) {
  .tl { --tld: 6.5em; }
  .tbl th, .tbl td { padding: 8px; }
  /* 行の頭の列（「出産育児一時金」）は、細い画面では文節で折ってよい（表を画面に収める） */
  .tbl td.nw:first-child { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
}
@media (min-width: 640px) {
  :root { --gx: 24px; }
  main { padding-top: 16px; }
  .head h1 { font-size: 28px; }
  /* PC では丸いボタンを列の幅いっぱいに伸ばさず、真ん中に置く */
  .toolbox .cta { max-width: 360px; margin-left: auto; margin-right: auto; }
}
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* ---------- 旗の形の番号（読む順）。トップの「はじめての方は、この順に読む」と、PC の右の列で使う（2026-10-22 home.css から移した）。
   旗の色はロゴの5色の順（1桃・2橙・3山吹・4緑・5空）。山吹だけ字は濃い茶（7.53） ---------- */
/* 2026-10-28 垢抜け版：並び順で5色に塗るのをやめ、全部 墨の地に白字（色は意味で配る＝順位に色の意味は無い）。高さ24px・14px/700 */
.rk-n { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 32px; height: 24px; padding: 0 12px 1px 8px; background: var(--ink); color: var(--bg); font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); }

/* ---------- 2026-10-22 PC（1024px以上）の組み方（宮本さん「PC はこそだてまっぷと比べるとバランス悪い」）。スマホ・タブレット（1023px以下）は今のまま ----------
   ・格子はどのページも1つ（上の --pc-*）：中身は1152pxまで（1280pxの画面で左右64px）・右の列320px・間48px。
   ・記事・時期ごとのやること・計算ツール：本文の列（1280pxで784px）＋右の列（はじめての方は、この順に読む・書いた人の小さい箱。記事は計算ツールの箱も）。
   ・記事の一覧（/kiji/・/sumai/）と「次に読む」：写真が上の3列のカード（分類の色の字・題・説明・更新日）。こそだてまっぷの記事の並びの形 */
/* 字の高さと字間は記事の本文と同じ（計算ツールのページは本文の字の並びが違うので、ここで決める） */
.side { display: none; line-height: 1.75; letter-spacing: 0; }
/* 右の列の見出し：上下に5色の線（こそだてまっぷの「よく読まれるおすすめ記事」の形）。線の色はロゴの5色。右の列の見出しは、この形1つだけ */
.side-st { text-align: center; }
.side-st h2 { padding: 12px 8px; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; }
.stripe { display: grid; grid-template-columns: repeat(5, 1fr); height: 4px; border-radius: 2px; overflow: hidden; }
.stripe i:nth-child(1) { background: var(--l1); } .stripe i:nth-child(2) { background: var(--l2); } .stripe i:nth-child(3) { background: var(--l3); } .stripe i:nth-child(4) { background: var(--l4); } .stripe i:nth-child(5) { background: var(--l5); }
.side-st h2 + .stripe { grid-template-columns: repeat(5, 1fr); direction: rtl; }
/* 計算ツールの箱（淡い緑の面に、題と丸いボタン） */
.side-tool-t { position: relative; padding-left: 32px; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.side-tool-t::before { content: ""; position: absolute; left: 0; top: calc((1.5em - 24px) / 2); width: 24px; height: 24px; background: var(--accent); -webkit-mask: var(--i-calc) center / 24px 24px no-repeat; mask: var(--i-calc) center / 24px 24px no-repeat; }
.side-tool .cta-sub { margin-top: 8px; }
.side-tool .toolbox-t { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: pretty; }
/* はじめての方は、この順に読む（短い一覧）：左に写真、右に旗の番号と題。今読んでいる記事は淡い緑の面 */
.side-rank { list-style: none; padding: 0; margin: 8px 0 0; }
.side-rank li + li { border-top: 1px solid var(--line); }
.side-rank a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 -8px; padding: 12px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; transition: background-color .15s ease-out; }
.side-rank a.t-only { grid-template-columns: minmax(0, 1fr); }
.side-rank img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.side-rank .card-t { margin-top: 4px; font-size: 16px; line-height: 1.5; text-wrap: pretty; letter-spacing: 0; }
.side-rank a[aria-current="page"] { background: var(--accent-soft); }
@media (hover: hover) { .side-rank a:hover { background: var(--accent-soft); } }
.side-rank a:active { background: var(--accent-press); transition: none; }
.side-rank a:focus-visible { outline-offset: -2px; }
/* 書いた人の小さい箱：キャッチコピー、顔と名前と一言。くわしくは名前のリンク（運営者情報）へ */
.side-me { margin-top: 16px; }
.side-me .author-cc { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--accent); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.side-me-r { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
.side-me-r img { display: block; border-radius: 50%; background: var(--t-sky); }
.side-me .author-n { font-weight: 700; line-height: 1.75; }
/* 名前のリンク：押せる高さは48px（上下の負の余白で行の高さは変えない。記事の下の書いた人と同じ形。計算ツールの右の列でも使う） */
.side-me .author-n a { display: inline-flex; align-items: center; min-height: 48px; margin: -12px 0; border-radius: 4px; color: var(--accent); }
.side-me .author-n a:active { background: var(--accent-press); }
.side-me .author-n a:focus-visible { outline-offset: -10px; }
.side-me-l { margin-top: 4px; font-size: 16px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
/* @/shared ---- ここまで */
@media (min-width: 1024px) {
  /* 記事と時期ごとのやること：本文の列＋右の列（トップ・一覧・計算ツールと同じ格子） */
  main.has-side { max-width: var(--pc-max); display: grid; grid-template-columns: minmax(0, 1fr) var(--pc-side); column-gap: var(--pc-gap); align-items: start; padding: 16px var(--pc-pad) 64px; }
  main.has-side > :not(.side) { grid-column: 1; }
  main.has-side > .side { display: flex; flex-direction: column; gap: 48px; grid-column: 2; grid-row: 2 / span 2; align-self: stretch; padding-top: 8px; }
  main.has-side .side-tool { position: sticky; top: 16px; }
  /* 本文の列が784px（1280pxの画面）に広がるので、記事の本文の字は18px（1行43字ほど。前の672pxの列の16px＝1行41字と同じ読みやすさ）。
     見出しと箱の題も一段ずつ上げる（章の見出し24px・小見出し20px・箱の題18px）。書いた人の箱・表・カードは今の大きさのまま */
  main.has-side .lead, main.has-side .body { font-size: 18px; }
  main.has-side .body h2 { font-size: 24px; }
  /* 2026-10-22 ページの題は章の見出し（24px）よりはっきり大きく */
  main.has-side .head h1, main.wide .head h1 { font-size: 28px; line-height: 1.4; }
  main.has-side .body h3 { font-size: 20px; }
  main.has-side :is(.toc-t, .tl-t, .ex-t, .note-t, .todo-t) { font-size: 18px; }
  main.has-side .body .author { font-size: 16px; }
  main.has-side .body .me-h { font-size: 16px; }
  /* 記事の一覧：広い1列（見出しと説明は読みやすい672pxまで） */
  main.wide { max-width: var(--pc-max); padding: 16px var(--pc-pad) 64px; }
  main.wide .head { max-width: 672px; }
  main.wide.plain .body { max-width: 672px; }
  main.wide .toolbox { max-width: 672px; margin-left: auto; margin-right: auto; padding: 24px; }
  main.wide .toolbox-t { text-align: center; }
  .body .cards + .links { margin-top: 32px; }
  main.has-side .eyecatch.ph, main.wide .eyecatch.ph { max-width: 560px; }
}
/* ---------- 2026-10-23 章ごとの説明の図（宮本さん「見出しごとに説明の図や絵がないと見にくい」）。
   白い箱に1pxの枠（ほかの白い箱と同じ）。題は太字。中の部品：入る／入らない（〇×の箱を縦に）・順番（番号の丸と線）・計算（式の箱）・要点（印つきの行）。
   色はカテゴリの色と、〇＝緑・×＝桃。印と字で分け、色だけに頼らない ---------- */
.zu { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.zu-t { font-weight: 700; line-height: 1.5; }
.zu-t + * { margin-top: 12px; }
.zu-box { padding: 12px 16px; border-radius: 8px; background: var(--zt, var(--surface-2)); }
.zu-box + .zu-box { margin-top: 12px; }
.zu-y { --zt: var(--t-green); --zc: var(--c-green); --zi: var(--i-check); }
.zu-n { --zt: var(--t-pink); --zc: var(--c-pink); --zi: var(--i-close); }
/* 2026-10-23 前は flex で並べていたが、中の字が数字のつなぎ（nw）で分かれると別の塊になり「入らない（　非課税)」のように空いた → 印は左に置き、字は1つの流れのまま */
.zu-h { position: relative; padding-left: 28px; font-weight: 700; line-height: 1.5; color: var(--zc, var(--ink)); }
.zu-h::before { content: ""; position: absolute; left: 0; top: calc(.75em - 10px); width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--zi, var(--i-check)) center / 20px 20px no-repeat; mask: var(--zi, var(--i-check)) center / 20px 20px no-repeat; }
.zu-box:not(.zu-y):not(.zu-n) > .zu-h { padding-left: 0; }
.zu-box:not(.zu-y):not(.zu-n) > .zu-h::before { display: none; }
.zu-h + * { margin-top: 8px; }
.body .zu ul { list-style: none; padding-left: 0; }
.body .zu ul > li { position: relative; padding-left: 20px; margin: 0; line-height: 1.6; }
.body .zu ul > li + li { margin-top: 4px; }
.body .zu ul > li::before { content: ""; position: absolute; left: 4px; top: calc(.8em - 3px); width: 6px; height: 6px; border-radius: 2px; background: var(--zc, var(--accent)); }
/* 順番：番号の丸を縦の線でつなぐ（番号は1から。01 の形にしない） */
.body .zu-step ol { list-style: none; padding: 0; margin: 0; counter-reset: zs; }
.body .zu-step .zu-t + ol { margin-top: 16px; }
.body .zu-step ol > li { position: relative; padding-left: 44px; margin: 0; counter-increment: zs; line-height: 1.6; }
.body .zu-step ol > li + li { margin-top: 16px; }
.body .zu-step ol > li::before { content: counter(zs); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1; }
.body .zu-step ol > li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: -12px; width: 2px; border-radius: 1px; background: var(--line); }
.zu li, .zu-s, .zu-d, .zu-t, .zu-h { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.zu-s { display: block; font-weight: 700; line-height: 1.5; }
.zu-d { display: block; margin-top: 4px; color: var(--ink-2); line-height: 1.6; }
/* 計算：数字の箱と記号を横に並べ、入らなければ次の行へ */
.zu-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 2026-10-23 精査：スマホでは式が2行に折れ、「＝」「×」が行の端に取り残された → 600px 未満は1行に1つ（記号を左、数字の箱を右）の縦の式にする */
@media (max-width: 599px) {
  .zu-eq { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; }
  .zu-eq > .zu-v { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; min-width: 0; text-align: left; }
  .zu-eq > .zu-op { grid-column: 1; text-align: center; }
  .zu-eq > .zu-op + .zu-v { margin-top: 0; }
}
.zu-v { display: flex; flex-direction: column; align-items: center; min-width: 88px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); text-align: center; }
.zu-v b { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zu-v > span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.zu-v.ans { background: var(--t-yellow); }
.zu-op { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink-2); }
/* 要点：印つきの行（印＝お金・カレンダー・書類・家・場所・電話・チェック） */
.body .zu-pts ul > li { padding-left: 32px; }
.body .zu-pts ul > li + li { margin-top: 12px; }
.body .zu-pts ul > li::before { left: 0; top: 2px; width: 20px; height: 20px; border-radius: 0; background: var(--accent); -webkit-mask: var(--zi, var(--i-check)) center / 20px 20px no-repeat; mask: var(--zi, var(--i-check)) center / 20px 20px no-repeat; }
.zu-pts .zi-yen { --zi: var(--i-yen); } .zu-pts .zi-cal { --zi: var(--i-yasumi); } .zu-pts .zi-doc { --zi: var(--i-tetsuzuki); }
.zu-pts .zi-home { --zi: var(--i-home); } .zu-pts .zi-pin { --zi: var(--i-pin); } .zu-pts .zi-check { --zi: var(--i-check); } .zu-pts .zi-tel { --zi: var(--i-tel); }

/* ---------- 2026-10-22 赤ちゃんの駅の一覧：区ごとに開け閉め（details）。設備は札の字と印で（〇＝あり・×＝なし・記載なし）、色だけで分けない ---------- */
.ak-filter[hidden], .ak [hidden] { display: none !important; }
.ak-ft { font-weight: 700; line-height: 1.5; }
.ak-filter .chips { margin-top: 8px; }
.ak-res { margin-top: 8px; color: var(--ink); font-weight: 700; }
.ak-res:empty { display: none; }
.ak-filter + .ak { margin-top: 16px; }
.ak, .tag-w { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.find h2 + .tag-w { margin-top: 16px; }
.tag-d + .tag-d { border-top: 1px solid var(--line); }
.tag-n { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.tag-d > .chips { padding: 0 16px 16px !important; }
.ak-w:not([hidden]) ~ .ak-w:not([hidden]) { border-top: 1px solid var(--line); }
.ak-w > summary, .tag-d > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; }
.ak-w > summary::-webkit-details-marker, .tag-d > summary::-webkit-details-marker { display: none; }
.ak-w > summary::after, .tag-d > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; margin-right: 4px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(135deg); }
.ak-w[open] > summary::after, .tag-d[open] > summary::after { transform: rotate(-45deg); }
.ak-c { font-weight: 400; color: var(--ink-2); }
@media (hover: hover) { .ak-w > summary:hover, .tag-d > summary:hover { background: var(--accent-soft); } }
.ak-w > summary:active, .tag-d > summary:active { background: var(--accent-press); }
.ak-w > summary:focus-visible, .tag-d > summary:focus-visible { outline-offset: -2px; border-radius: 8px; }
.body .ak-l { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.body .ak-l > li { margin: 0; padding: 16px; }
/* 絞って隠した施設の分の線：見えている施設どうしの間だけに線 */
.body .ak-l > li:not([hidden]) ~ li:not([hidden]) { border-top: 1px solid var(--line); }
.ak-n { font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.body .ak-f { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 8px; }
.body .ak-f li { margin: 0; padding: 2px 8px; border-radius: 4px; font-size: 14px; line-height: 1.5; }
.ak-f .y { background: var(--t-green); color: var(--ink); font-weight: 700; }
.ak-f .n { background: var(--surface-2); color: var(--ink-2); }
.ak-f .u { border: 1px solid var(--line); color: var(--ink-2); }
.ak-a, .ak-t { margin-top: 8px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.ak-t { margin-top: 0; }
.ak-t.hk-l { margin-top: 12px; font-weight: 700; color: var(--ink); }
.ak-m a { display: inline-flex; align-items: center; min-height: 48px; color: var(--accent); font-weight: 700; }

/* ---------- 2026-10-22 広告（PR）：記事の頭のお知らせと、広告の枠。「PR」の札の字は周りの字より小さくせず、薄い色にもしない（広告の方針・消費者庁の運用基準） ---------- */
.pr-b { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 40px; height: 28px; padding: 0 8px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.pr-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 16px; line-height: 1.7; }
.pr-note a { color: var(--accent); }
.pr { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
/* 題は字の流れのまま（flex にすると、折り目の span が別の塊になって字の間が空く） */
.pr-t { font-weight: 700; line-height: 1.75; }
.pr-t .pr-b { margin-right: 8px; vertical-align: middle; }
.pr-code { margin-top: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.pr-code img { max-width: 100%; height: auto; }
.pr-n { margin-top: 8px; }

/* ---------- 2026-10-22 「時期と困りごとで探す」の入口（トップの困りごとの下・PC の右の列・記事の一覧の頭）。
   淡い山吹の面（枠なし）に、左に題と一言、右に宮本さんの絵（白地を抜いた物）。行全体を押せる ---------- */
.find-bn { display: flex; align-items: center; gap: 12px; min-height: 112px; padding: 16px; border-radius: 12px; background: var(--t-yellow); color: var(--ink); text-decoration: none; }
.find-bn-b { flex: 1; min-width: 0; }
.find-bn-t { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.find-bn-s { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--c-yellow); word-break: keep-all; overflow-wrap: anywhere; }
.find-bn-s::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.find-bn-i { flex: none; display: block; width: 112px; height: auto; }
@media (hover: hover) { .find-bn:hover .find-bn-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
.find-bn:active { background: var(--accent-press); }
.find-bn:focus-visible { outline-offset: 2px; }
@media (max-width: 359px) { .find-bn-i { width: 88px; } .find-bn-t { font-size: 18px; } }
@media (min-width: 640px) { .find-bn { padding: 16px 24px; } .find-bn-i { width: 144px; } }
.sec > .ask + .find-bn { margin-top: 16px; }
.side-ask .find-bn { margin-top: 24px; }
.side-ask .find-bn { padding: 16px; }
.side-ask .find-bn-i { width: 96px; }
.side-ask .find-bn-t { font-size: 18px; }
@media (min-width: 1024px) { main.wide .body > .find-bn { max-width: 672px; } }

/* ---------- 2026-10-22 探すページ（/sagasu/）：言葉の欄・時期の札・テーマの札・結果のカード。札は押すと濃い色の面に白い字とチェック（もう一度押すと外れる） ---------- */
.find [hidden] { display: none !important; }
.find > * + * { margin-top: 48px; }
.body .find h2 { margin-top: 0; padding: 0 0 8px; border-radius: 0; background: none; border-bottom: 1px solid var(--line); font-size: 20px; }
.body .find h2::before { content: none; }
.body .find h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; background: var(--accent); }
.fres-n { margin-left: 12px; font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.find .tag-k { margin-top: 24px; }
.find h2 + .tag-k { margin-top: 16px; }
.find .tag-k + .chips { margin-top: 8px; }
.chips { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { margin: 0 !important; }
.chip { --cht: var(--surface-2); --chf: var(--accent); --cho: var(--accent-ink); position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--cht); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer; word-break: keep-all; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.chip::after { content: ""; position: absolute; inset: -2px 0; }
.cj-pink { --cht: var(--t-pink); --chf: var(--f-pink); --cho: var(--o-pink); }
.cj-orange { --cht: var(--t-orange); --chf: var(--f-orange); --cho: var(--o-orange); }
.cj-green, .ct-okane { --cht: var(--t-green); --chf: var(--f-green); --cho: var(--o-green); }
.cj-sky, .ct-yasumi { --cht: var(--t-sky); --chf: var(--f-sky); --cho: var(--o-sky); }
.ct-sumai { --cht: var(--t-orange); --chf: var(--f-orange); --cho: var(--o-orange); }
.ct-chiiki { --cht: var(--t-yellow); --chf: var(--f-yellow); --cho: var(--o-yellow); }
.chip[aria-pressed="true"] { background: var(--chf); color: var(--cho); }
.chip::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--chi, var(--i-plus)) center / 14px 14px no-repeat; mask: var(--chi, var(--i-plus)) center / 14px 14px no-repeat; }
.chip[aria-pressed="true"] { --chi: var(--i-check); }
@media (hover: hover) { .chip[aria-pressed="false"]:hover { background: var(--accent-soft); } }
.chip[aria-pressed="false"]:active { background: var(--accent-press); }
.fgrp .chips + .links { margin-top: 16px; }
.fres-c { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; line-height: 1.6; color: var(--ink-2); }
.find-res h2 + .fres-c { margin-top: 8px; }
.find-res .fres-c + .cards, .find-res .fres-live + .cards { margin-top: 16px; }
.fres-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fclear { min-height: 48px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (hover: hover) { .fclear:hover { background: var(--accent-soft); } }
.fclear:active { background: var(--accent-press); }
.fnone { margin-top: 16px; padding: 24px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); text-align: center; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
/* 絞って隠したカードの分の線：見えているカードどうしの間だけに線（隠したカードのすぐ後ろの1枚目に線が残らないよう） */
@media (min-width: 1024px) {
  main.wide .find > :not(.find-res) { max-width: 672px; }
}

@media print {
  .top, .bottom, .cta, .cta-sub, .crumbs, .toc, .toolbox, .cards, .rank, .side, .pc-side, .find-bn, .find > :not(.find-res) { display: none !important; }
  .find-res .cards { display: block !important; }
  body { background: #fff; color: #000; }
}

/* 2026-10-24 宮本さんが撮った写真（<!--photo:…-->） */
.body .photo { margin: 24px 0 0; }
.body .photo img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--surface-2); }
.body .photo figcaption { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.body .photo figcaption a { color: inherit; }

/* 2026-10-25 一覧のページの頭の横長の写真（2:1）。PC では説明の文より少し小さい 560px まで（宮本さん「もう少し横長で小さい方が良い」） */
.body .photo.band img { aspect-ratio: 2 / 1; object-fit: cover; }
@media (min-width: 760px) { .body .photo.band { max-width: 560px; } }
/* 2026-10-25 宮本さん「これもお店紹介やのにでかい」→ 記事の中の写真も PC では 560px まで（スマホは画面の幅いっぱいのまま） */
@media (min-width: 760px) { .body .photo { max-width: 560px; } }

/* 2026-10-27 トピックス・新着（宮本さん「地域ニュースの新着の形・記事も新着に」）：左に絵、右に札・見出し・日付。区切りは1px線、行全体を押せる */
/* 宮本さん「こそだてニュースの文字の色や芽の印が良い」→ トピックスの札は緑の字＋芽の印でそろえる（種類は札の言葉で分かる） */
:root { --i-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 22V13C11 9 8 6 3 6c0 5 3 8 8 8M13 22v-7c0-4 3-7 8-7 0 5-3 8-8 8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.card-k.k-ev, .card-k.k-open, .card-k.k-news { --kc: var(--c-green); --ki: var(--i-sprout); }
.tp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tp-tabs[hidden], .tp-ev[hidden], .tp-all[hidden] { display: none !important; }
.tp-tab { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; line-height: 1.5; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
@media (hover: hover) { .tp-tab:hover { background: var(--surface-2); } }
.tp-tab:active { background: var(--accent-press); transition: none; }
.tp-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tp-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 2026-10-27 公式チラシ：一覧は上の方（日付・題）を見せる。1件ずつのページは全体を、出典つきで */
.tp-fly { margin: 24px 0 0; }
.tp-fly img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; }
.tp-fly figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
/* 2026-10-27 カレンダー（/calendar/）：7列の月の表。催しのある日は押せる（48px以上）、件数を小さく。土曜は青・日曜は赤の字 */
.cal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cal-m-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
@media (hover: hover) { .cal-m-link:hover { background: var(--surface-2); } }
.cal-m-link:active { background: var(--accent-press); transition: none; }
.cal { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-w span { padding: 8px 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); }
.cal-c { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; }
.cal-c > span { font-size: 16px; line-height: 1.2; }
/* 件数の札：14px/700・緑の地に白字・高さ20px・角丸4px（2026-10-28 12px→14px） */
.cal-c i { display: inline-flex; align-items: center; height: 20px; margin-top: 2px; padding: 0 4px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-style: normal; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
a.cal-c.cal-has { font-weight: 700; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
@media (hover: hover) { a.cal-c.cal-has:hover { background: var(--accent-soft); } }
a.cal-c.cal-has:active { background: var(--accent-press); transition: none; }
a.cal-c:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* 今日のマス＝淡い緑の地 */
.cal-c.cal-today { background: var(--accent-soft); }
.cal-sun, .cal-c.cal-sun > span { color: var(--c-pink); }
.cal-sat, .cal-c.cal-sat > span { color: var(--c-sky); }
.cal-e { background: var(--surface-2); }
.body h3.cal-day { margin-top: 32px; scroll-margin-top: 72px; }
.body h3.cal-day + .feed { margin-top: 8px; }
/* 2026-10-27 習い事・トピックスの項目の表（見出し：中身）。スマホは見出しの下に中身の2段（宮本さんの決まり「ラベル：内容は2段に」） */
.body .tp-d { margin: 8px 0 0; }
.body .tp-d dt { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.5; }
.body .tp-d dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
@media (min-width: 760px) {
  .body .tp-d { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; }
  .body .tp-d dt, .body .tp-d dd { margin-top: 8px; }
}

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* 2026-10-27 メニューと PC のナビの印＝色の絵（線の印は出さない） */
.mnav a::before { display: none; }
.mn-pic { flex: none; width: 48px; height: 48px; }
.gnav .gn-pic { display: none; }
@media (min-width: 1024px) {
  .gnav a::before { display: none; }
  .gnav .gn-pic { display: block; flex: none; width: 32px; height: 32px; }
}
.pic-me { border-radius: 50%; }
@media (min-width: 1024px) { .gnav a { gap: 6px; padding: 0 10px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .gnav .gn-pic { display: none; } .gnav a::before { display: block; } }
/* @/shared ---- ここまで */
.chip-age { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* 2026-10-27 「時期とテーマで記事を探す」の入口＝Canva のバナー */
.find-bn2 { display: block; margin-top: 16px; border-radius: 12px; overflow: hidden; }
.find-bn2 img { display: block; width: 100%; height: auto; }
.find-bn2:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* @/shared ---- ここまで */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
.ichiran { display: block; height: 0; scroll-margin-top: 16px; }
/* @/shared ---- ここまで */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* 2026-10-27 宮本さん「こそだてまっぷの『小学校低学年』みたいな見出しがかわいい」→ 雲の形の見出し。
   2026-10-28 垢抜け版：形（上下のふくらみ）は残し、小さく淡く（こそだてまっぷの雲は高さ45px）。高さ44px（帯32px＋上下のふくらみ）・淡い地 --cl-*・墨の字16px/700・絵24px（白い丸の地をやめた）・左揃え。
   ふくらみは半径6pxの丸を16pxごと（上と下で8pxずらす）。両端は高さの半分の丸（雲の形のため）。トップの章の見出しは home.css で高さ48px・18px */
.cloud { --cc: var(--cl-green); }
.cloud, .body h2.cloud, .body h3.cloud { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; margin: 32px 0 0; padding: 6px 20px 6px 12px; border: 0; border-radius: 22px; color: var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 0;
  background: radial-gradient(circle at 50% 100%, var(--cc) 5.5px, transparent 6px) 4px 0 / 16px 6px repeat-x, radial-gradient(circle at 50% 0, var(--cc) 5.5px, transparent 6px) 12px 100% / 16px 6px repeat-x, linear-gradient(var(--cc), var(--cc)) 0 5px / 100% calc(100% - 10px) no-repeat; }
.cloud img { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 0; background: none; }
.cloud.cl-orange { --cc: var(--cl-orange); } .cloud.cl-pink { --cc: var(--cl-pink); } .cloud.cl-sky { --cc: var(--cl-sky); } .cloud.cl-yellow { --cc: var(--cl-yellow); }
.body h2.cloud::before, .body h2.cloud::after, .body h3.cloud::before, .body h3.cloud::after { content: none; display: none; }
/* 雲から最初の行まで（行の上の余白16pxと合わせて写真まで16px）。
   2026-10-28 AD 指摘：組と組の間（写真から次の雲まで32px）が、行と行の間（写真の間33px）と同じで、ぼかすと組の切れ目が見えなかった →
   組の最後の行から次の雲まで48px（写真から64px＝行の間の約2倍）。地域ガイドの雲も字18px・高さ48px（トップの章の雲と同じ） */
.body .cloud + .pillars { margin-top: 0; }
.body .pillars + .cloud { margin-top: 48px; }
.body h3.cloud { min-height: 48px; font-size: 18px; line-height: 28px; border-radius: 24px; }
/* @/shared ---- ここまで */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* @/shared ---- ここまで */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* 2026-10-28 AD 指摘：計算ツール（/keisan/・<main class="page"> はこのページだけ）が新しい決まりに合わせ直されていなかった
   （ピル型＋2pxの緑の枠のボタン・箱の影・黄色の帯と波の縁・角丸16px・見出しの字間・表の見出しの中の太字が900）。
   計算（calc.js）とツールの CSS（index.html）は触らず、ここで main.page を付けて上書きする（ツールの CSS はこの後に入るので、詳しさで勝たせる） */
main.page .btn, main.page .fold-close { border-width: 1px; border-radius: 8px; }
main.page .btn.ghost, main.page .fold-close { border-color: var(--line-strong); color: var(--ink); }
main.page .btn.primary { min-height: 48px; }
main.page .tab, main.page .seg2 button { border-radius: 8px; }
main.page .tab[aria-selected="true"], main.page .seg2 button[aria-pressed="true"] { outline: 0; }
main.page .kyear > span { border-radius: 4px; }
main.page .quick, main.page #form .input-folds { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
main.page #form.sec { background: none; border-radius: 0; }
main.page #form.sec::before, main.page #form.sec::after { display: none; }
main.page #details .folds, main.page .kbox { border-radius: 12px; }
main.page .hero-thumb img { border-radius: 8px; }
main.page .hero h1 { letter-spacing: 0; line-height: 1.4; }
main.page :is(.grp > h5, .result > h2, .details > h2, .reads > h2, .pblock > h3, .next > h3, .subh, .tabs-h, .big, .crumbs, .reads) { letter-spacing: 0; }
:root:has(main.page) :is(.top, .bottom) { letter-spacing: 0; }
main.page th b { font-weight: inherit; }
main.page :is(input[type="text"], input[type="date"], input[type="month"], select, textarea) { border-radius: 8px; }
/* PC：帯の地が無くなったので、入力の箱の左右を本文の列の端にそろえる（前は帯の内側32px） */
@media (min-width: 1024px) { main.page #form.sec { padding: 0 0 32px; } }
:root:has(main.page) :focus-visible { outline: 2px solid var(--ink); }
/* @/shared ---- ここまで */
/* 2026-10-27 子育てマップ（Googleマップ版・リベシティマップの形） */
.kmap-w { margin-top: 12px; }
.km-chips { list-style: none; padding: 0; margin: 0 0 8px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.km-chips::-webkit-scrollbar { display: none; }
.km-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.km-chip[aria-pressed="false"] { opacity: .45; }
.km-dot { width: 12px; height: 12px; border-radius: 50%; }
.km-n { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.kmap-box { position: relative; height: calc(100dvh - 210px); min-height: 460px; max-height: 760px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.kmap { position: absolute; inset: 0; }
.kme { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.25); }
.km-me { position: absolute; right: 12px; bottom: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 48px; min-height: 48px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; box-shadow: var(--shadow); cursor: pointer; }
.km-me-i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid currentColor; }
.km-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--line); }
/* 2026-10-28 リストを出すボタン＝「もっと見る」と同じ形（1pxの枠・角丸8px・墨の字） */
.km-listbtn { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .km-listbtn:hover { background: var(--surface-2); } }
.km-listbtn:active { background: var(--accent-press); }
.km-sheet, .km-list { position: absolute; left: 8px; right: 8px; bottom: 72px; max-height: 60%; overflow: auto; padding: 16px; border-radius: 12px; background: var(--surface); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.km-sheet[hidden], .km-list[hidden] { display: none; }
.km-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: none; font-size: 24px; color: var(--ink-2); cursor: pointer; }
.km-k { margin: 0; font-size: 14px; font-weight: 700; } .km-nm { margin: 4px 40px 8px 0; font-size: 18px; font-weight: 700; line-height: 1.4; } .km-i { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.km-b { display: flex; gap: 8px; margin: 12px 0 0; }
.km-b a { flex: 1; display: grid; place-items: center; min-height: 48px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.km-go { background: var(--accent); color: var(--accent-ink); } .km-dir { border: 1px solid var(--line-strong); color: var(--ink); }
.km-lh { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.km-list ul { list-style: none; padding: 0; margin: 0; }
.km-list li + li { border-top: 1px solid var(--line); }
.km-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.km-list b { display: block; font-size: 16px; } .km-list small { display: block; font-size: 14px; color: var(--ink-2); }
.km-ld { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.km-msg { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
/* 2026-10-27 PCのトップの右の列のカレンダー */
.mini-cal { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mini-cal .cal-c { min-height: 44px; }
.mini-cal .cal-c > span { font-size: 14px; }
.mini-cal .cal-c i { font-size: 14px; height: 18px; padding: 0 4px; margin-top: 0; }
.mini-cal-n { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.side-cal .cta { margin-top: 12px; }
.mini-cal-m { margin-top: 16px; font-weight: 700; color: var(--ink); }
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* 2026-10-27 上のナビに「マップ」を足して9つになったので、PCは少し詰める */
@media (min-width: 1024px) { .gnav a { padding: 0 6px; gap: 4px; font-size: 16px; } .gnav .gn-pic { width: 28px; height: 28px; } }
/* 2026-10-28 字を16pxにそろえたので、1024〜1279px はナビの間を詰め、1199px までは印を出さない（9つが横1列に収まるように） */
@media (min-width: 1024px) and (max-width: 1279px) { .gnav { gap: 0 16px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .gnav a::before { display: none; } .gnav { gap: 0 8px; } }
/* @/shared ---- ここまで */
.body .km-list li::before, .km-list li::before, .body .km-chips li::before { content: none; display: none; }
.body .km-list li, .body .km-chips li { padding-left: 0; margin: 0; }
.km-chip[aria-pressed="false"] { opacity: 1; background: var(--surface); }
.km-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.km-chip[aria-pressed="true"] .km-n { color: #fff; }
.km-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 1px 4px rgba(0,0,0,.2); font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.km-hint[hidden] { display: none; }

/* 2026-10-27 22:00 宮本さん「（しずく形の記号は）全くだめ」「人のマークもない」「公園の写真を切り抜いてアイコンにするくらい」「プロレベル」
   → リベシティマップ型のピン：丸い写真か親子の絵（色のふち）＋左上に種類の印＋とんがり＋下に色の名前の札。ピンの先が場所 */
.kp { position: absolute; width: 64px; height: 74px; transform: translate(-50%, -100%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kp-av { position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--kc); padding: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.kp-av img { display: block; width: 58px; height: 58px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #fff; }
.kp-av::after { content: ""; position: absolute; left: 50%; top: 61px; transform: translateX(-50%); border: 8px solid transparent; border-top: 13px solid var(--kc); border-bottom: 0; }
.kp-b { position: absolute; left: -7px; top: -5px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kc); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.kp-b svg { width: 15px; height: 15px; fill: #fff; }
.kp-name { position: absolute; left: 50%; top: 77px; transform: translateX(-50%); display: none; width: max-content; max-width: 148px; padding: 4px 8px; border-radius: 4px; background: var(--kc); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  display: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.km-near .kp-name { display: -webkit-box; }
.km-near .kp-nl .kp-name { display: none; }
.kp-sm { width: 46px; height: 54px; }
.kp-sm .kp-av { width: 46px; height: 46px; padding: 2px; }
.kp-sm .kp-av img { width: 42px; height: 42px; }
.kp-sm .kp-av::after { top: 44px; border-width: 6px; border-top-width: 10px; }
.kp-sm .kp-b { width: 18px; height: 18px; left: -5px; top: -4px; } .kp-sm .kp-b svg { width: 10px; height: 10px; }
.kp-sm .kp-name { top: 57px; font-size: 14px; }
.kp-on { z-index: 999999 !important; } .kp-on .kp-av { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--kc), 0 3px 8px rgba(0,0,0,.35); }
.kme { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.25); }
.km-chip { --kc: var(--accent); }
.km-chip .km-dot { background: var(--kc); }
.km-chip[aria-pressed="true"] { background: var(--kc); border-color: var(--kc); color: #fff; }
.km-chip[aria-pressed="true"] .km-dot { background: #fff; }
.km-hd { display: flex; align-items: center; gap: 12px; margin: 0 36px 8px 0; }
.km-av { flex: none; width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: var(--kc); }
.km-av img { display: block; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.km-k { display: flex; align-items: center; gap: 6px; color: var(--kc); }
.km-kb { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--kc); } .km-kb svg { width: 12px; height: 12px; fill: #fff; }
.km-hd .km-nm { margin: 2px 0 0; }
.km-cr { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; } .km-cr a { color: inherit; }
.km-la { flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: var(--kc); }
.km-la img { display: block; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.km-lh b { color: var(--kc); }
.km-hint { white-space: nowrap; }

/* 地図の上に出す物は、地図より前に */
.km-sheet, .km-list, .km-bar, .km-me, .km-hint { z-index: 5; }

/* 2026-10-27 23:00 宮本さん「シンプルすぎる」→ 種類のボタン：丸い絵（ピンと同じ）＋種類の色をうすく敷く。押した物は種類の色で塗る */
.km-chips { gap: 8px; padding: 2px 0 4px; }
.km-chip { gap: 8px; min-height: 48px; padding: 4px 14px 4px 4px; border: 1.5px solid color-mix(in srgb, var(--kc) 35%, #fff); background: color-mix(in srgb, var(--kc) 9%, #fff); color: var(--ink); border-radius: 24px; }
.km-chip[aria-pressed="false"] { background: color-mix(in srgb, var(--kc) 9%, #fff); }
.km-ci { flex: none; width: 38px; height: 38px; border-radius: 50%; padding: 2px; background: var(--kc); }
.km-ci img { display: block; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.km-cl { font-size: 14px; font-weight: 700; }
.km-chip .km-n { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.km-chip .km-dot { display: none; }
.km-chip[aria-pressed="true"] { background: var(--kc); border-color: var(--kc); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--kc) 40%, transparent); }
.km-chip[aria-pressed="true"] .km-ci { background: #fff; }
.km-chip[aria-pressed="true"] .km-n { color: #fff; }
@media (hover: hover) { .km-chip[aria-pressed="false"]:hover { background: color-mix(in srgb, var(--kc) 16%, #fff); } }
.km-chip:active { filter: brightness(.95); }
.km-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 12種類を2段で横に流す（スマホでも一度に4〜5個見える）。段ごとに詰めて並べ、まとめて横に動く */
.km-chips-w { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 0 8px; padding: 2px 0 4px; }
.km-chips-w::-webkit-scrollbar { display: none; }
.km-chips { display: flex; flex-wrap: nowrap; width: max-content; gap: 8px; margin: 0; padding: 0; overflow: visible; }
.km-chips + .km-chips { margin-top: 8px; }
.km-chip { min-height: 44px; padding: 3px 12px 3px 3px; }
.km-ci { width: 36px; height: 36px; } .km-ci img { width: 32px; height: 32px; }
.km-cl { font-size: 14px; }
@media (min-width: 1024px) { .km-chips-w { overflow: visible; } .km-chips { width: auto; flex-wrap: wrap; } }
/* 2026-10-27 PCの子育てマップは横いっぱいに（本文の672pxの枠から出す）。下の説明とリンクは読みやすい幅のまま */
@media (min-width: 1024px) {
  main.wide.plain .body:has(.kmap-w) { max-width: none; }
  .body:has(.kmap-w) > :not(.kmap-w) { max-width: 672px; }
  .kmap-box { height: calc(100vh - 260px); min-height: 560px; max-height: 820px; }
  .km-sheet, .km-list { left: auto; right: 16px; width: 400px; bottom: 80px; max-height: calc(100% - 120px); }
}

/* 2026-10-27 一覧の記事の「地図で見る」（子育てマップへ） */
.body .to-map { margin: 8px 0 16px; }
.to-map a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease-out; }
.to-map-i { width: 20px; height: 20px; background: var(--accent); -webkit-mask: var(--i-pin) center / contain no-repeat; mask: var(--i-pin) center / contain no-repeat; }
@media (hover: hover) { .to-map a:hover { background: var(--surface-2); } }
.to-map a:active { background: var(--accent-press); transition: none; }

/* 2026-10-28 このサイトの写真について（/shashin/）：使っている所（14px 灰）→ 写真の説明 → 撮った人と条件（14px 灰）。行の間は1pxの線 */
.body ul.cr-l { list-style: none; padding: 0; }
.body .cr-l > li { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); line-height: 1.6; }
.body .cr-l > li:first-child { border-top: 0; }
.cr-w { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.cr-m { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.cr-m a { color: inherit; }
/* 2026-10-28 320pxの細い画面：数字と単位をつないだ長い塊（.nw。「2か月が終わる日がある月の、月末」など）が画面の右にはみ出していた → 359px以下は塊の中でも折る */
@media (max-width: 359px) { .body p .nw, .body li .nw, .body .zu-d .nw { white-space: normal; } }

/* 2026-10-28 書いた人（サイボウズ式の並び）：写真の右に小さい肩書きと名前、下に紹介文・注意書き・「書いた記事をもっと読む」の行（行の矢印は .links と同じ形） */
.author.au2 { align-items: center; }
.author.au2 .author-r { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.author.au2 .author-r + .author-n { margin-top: 0; }
.author.au2 > .author-b, .author.au2 > .author-more { grid-column: 1 / -1; }
.author.au2 > .author-b { margin-top: 4px; word-break: normal; overflow-wrap: anywhere; line-break: strict; }   /* 段落は行いっぱいまで詰める（文節で折ると行が短く切れて段落が変わったように見える・2026-10-28 宮本さん）。小さい字・句読点は行頭に置かない */
.author-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin: 4px -16px -16px; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; color: var(--ink); font-weight: 700; line-height: 1.5; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.author-more::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); }
@media (hover: hover) { .author-more:hover { background: var(--accent-soft); } }
.author-more:active { background: var(--accent-press); transition: none; }
.author-more:focus-visible { outline-offset: -2px; }
