/* ══════════════════════════════════════════════════════════════════════
   ジャーナル（記事のコーナー）固有の部品。版面・書体・色は assets/pages.css をそのまま使い、
   ここには pages.css に無い部品だけを置く。
   色は assets/pages.css の :root（DESIGN.md §2）だけを使う。生の色を書かない。
   見せ方の根拠は 260722_サイト改修/91_ガイドの見せ方リサーチ.md
   ══════════════════════════════════════════════════════════════════════ */
/* 題名は、行末に1〜2字だけ残る字切れを避ける */
main h1,.g-feat .t,.g-rows .t,.g-item .nm{text-wrap:pretty;word-break:auto-phrase}

.g-draft{max-width:var(--menu-col);margin:0 auto 8px;padding:8px 24px;font-size:12px;line-height:1.8;color:var(--ink-muted)}
@media (min-width:1024px){ .g-draft{max-width:none;margin:0;padding:16px 40px;border-bottom:1px solid var(--rule)} }

/* 仮の写真の札（写真が届いたら消える） */
.kari{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:100px;background:rgba(255,255,255,.85);
  font-size:12px;line-height:1.7;color:var(--ink-muted)}

/* パンくず */
.crumbs{font-size:12px;line-height:1.8;color:var(--ink-muted);margin-bottom:16px}
main .crumbs a{text-decoration:none;padding:0}
.crumbs a:hover{text-decoration:underline}

/* 左パネルは公開版のまま。ジャーナルにいるときだけ「ジャーナル」を濃くする */
@media (min-width:1024px){ .brand nav.mnav a[aria-current="page"]{color:var(--ink-strong)} }

/* ── グループの切り替え：タブ（本文の上）──
   ボタンの並びに見えるとメニューと区別がつかないので、下線のタブにする。
   スマホで収まらないときは横にスクロールし、右端を見切れさせて続きを示す */
/* 表示の決まり（DESIGN.md §12.1）：一覧・グループ・記事の**全ページで、本文のいちばん上（ヘッダーのすぐ下）に同じ形で出す**。
   記事ではその記事のグループに印。2026-10-22 本人指摘「記事に入るとタブが無い」 */
/* 画面の上に固定する（2026-10-22 本人「固定した方がジャーナルの中に入る感が増す」）。
   スマホは共通ヘッダーのすぐ下、PCは画面のいちばん上。面は不透明（下の文字が透けない） */
.g-tabs{position:sticky;top:calc(var(--header-h,48px) + env(safe-area-inset-top));z-index:15;margin:0 -24px;background:var(--ground);border-bottom:1px solid var(--rule)}
@media (min-width:1024px){ .g-tabs{top:0;margin:0 -40px;background:var(--white)} }
/* ページ内の飛び先（目次・出典）がヘッダーとタブの下に隠れないように */
html:has(.g-tabs){scroll-padding-top:calc(var(--header-h,48px) + env(safe-area-inset-top) + 56px)}
@media (min-width:1024px){ html:has(.g-tabs){scroll-padding-top:64px} }
.g-tabs + .lead,.g-tabs + .g-feat,.g-tabs + .g-hero{margin-top:24px}
.g-tabs ul{list-style:none;display:flex;gap:0;margin:0;padding:0 16px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}   /* 縦は止める（下線の-1pxで中身が1px高く、スマホで縦にも動いた・2026-10-23 本人実機）。横の送りが画面の戻る操作に化けないよう contain */
@media (min-width:1024px){ .g-tabs ul{padding:0 32px} }
.g-tabs ul::-webkit-scrollbar{display:none}
main .g-tabs li{margin:0;flex:0 0 auto}
main .g-tabs a{display:flex;align-items:center;min-height:48px;padding:0 8px;margin-bottom:-1px;
  font-size:12px;font-weight:600;color:var(--ink-muted);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent}
main .g-tabs a:hover{color:var(--ink)}
/* タブのアイコン（Lucide・DESIGN.md §12.1）。16px・線は文字と同じ色。文字の左に置く。
   スマホは横にフリックして送る（2026-10-23 本人「子育て・おでかけが入ったら横にフリックできる方が良い」。
   5つで等分すると1つ75pxで「子育て・おでかけ」が入らない）。右端を薄くぼかして、続きがあることを見せる */
.g-tabs .ic{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
main .g-tabs a{gap:6px}
@media (max-width:1023px){
  .g-tabs ul{padding:0 8px}
  main .g-tabs a{padding:0 12px}
}
.g-tabs ul.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
main .g-tabs a[aria-current]{color:var(--ink-strong);border-bottom-color:var(--accent)}   /* 記事の中では所属グループ（aria-current="true"）にも同じ印 */

/* 記事の終わりの「ほかのグループ」は小さな丸いボタン（タブとは役割が違う） */
.g-chips{list-style:none;padding:0;margin-top:16px;display:flex;flex-wrap:wrap;gap:16px 8px}
main .g-chips li{margin:0}
/* 見た目は高さ32px・文字14px（HugKum・たまひよ・Material 3 の中央値。DESIGN.md §5.4）。押せる範囲は上下に広げて48px */
main .g-chips a{position:relative;display:inline-flex;align-items:center;height:32px;min-height:0;padding:0 14px;border-radius:100px;
  border:1px solid var(--rule);background:var(--white);font-size:14px;font-weight:600;line-height:1;text-decoration:none}
main .g-chips a::after{content:"";position:absolute;inset:-8px 0}

/* ── 一覧の先頭の1本（写真を全幅で） ── */
main a.g-feat{display:block;margin-top:32px;padding:0;text-decoration:none}
.g-feat .ph{position:relative;display:block;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--panel)}
.g-feat .ph img{width:100%;height:100%;object-fit:cover}
.g-feat .cat{display:block;margin-top:16px;font-size:12px;font-weight:600;color:var(--accent-ink);letter-spacing:.04em}
.g-feat .t{display:block;margin-top:4px;font-size:20px;font-weight:600;line-height:1.6}
.g-feat .d{display:block;margin-top:8px;font-size:12px;line-height:1.9;color:var(--ink-muted)}
.g-feat:hover .t{color:var(--ink-strong);text-decoration:underline}

/* ── 一覧の行：小さな写真（左）＋文字 ── */
.g-rows{list-style:none;padding:0;margin-top:16px;border-top:1px solid var(--rule)}
main .g-rows li{margin:0;border-bottom:1px solid var(--rule)}
main .g-rows a{display:flex;gap:16px;align-items:flex-start;padding:16px 0;text-decoration:none}
.g-rows .th{flex:0 0 88px;width:88px;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--panel)}
.g-rows .th img{width:100%;height:100%;object-fit:cover}
.g-rows .tx{display:flex;flex-direction:column;min-width:0}
.g-rows .cat{font-size:12px;font-weight:600;color:var(--accent-ink);letter-spacing:.04em;line-height:1.7}
.g-rows .t{font-size:16px;font-weight:600;line-height:1.7}
.g-rows .dt{margin-top:4px;font-family:var(--f-latin);font-size:12px;letter-spacing:.08em;color:var(--ink-muted)}
.g-rows a:hover .t{color:var(--ink-strong);text-decoration:underline}
.g-more{margin-top:8px;font-size:12px;text-align:right}
main .g-more a{padding-block:8px}

/* ── 記事：読みもの型の冒頭写真 ── */
.g-hero{position:relative;margin:0 0 32px;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.g-hero img{width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){ .g-hero{margin:0 -24px 32px;width:calc(100% + 48px)} }
@media (min-width:1024px){ .g-hero{margin:0 -36px 0;width:calc(100% + 72px)} .g-hero + .lead{padding-top:40px} }

/* ── 記事の写真（2026-10-23）：調べもの型の題名の下と、本文の途中。文字の列の幅いっぱい・3:2・角丸16（カードと同じ）。
   参考＝HugKum・北欧、暮らしの道具店・MilK（題名の下に1枚、本文は見出し2つに1枚、列幅いっぱい）。DESIGN.md §12.2 */
.g-eye{margin:24px 0 0;aspect-ratio:3/2;overflow:hidden;border-radius:16px;background:var(--panel)}
.g-eye img{width:100%;height:100%;object-fit:cover;display:block}
.g-body p:has(> img:only-child){margin:32px 0}
.g-body p > img:only-child{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:var(--panel)}

/* ── 記事：調べもの型の「書いた人・最終更新」 ── */
.g-by{margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 24px;font-size:12px;line-height:1.8}
.g-by div{display:flex;gap:8px}
.g-by dt{color:var(--ink-muted)}
.g-by dd{font-weight:600}
.g-meta{margin-top:16px;font-family:var(--f-latin);font-size:12px;letter-spacing:.08em;color:var(--ink-muted)}

/* 目次：開閉式。スマホは閉じて始め、PCは開いて始める（93_ S5） */
.g-toc{margin-top:32px;padding:0 16px;background:var(--white);border:1px solid var(--rule);border-radius:12px}
@media (min-width:1024px){ .g-toc{background:var(--ground);border-color:transparent} }  /* PCは本文カラムが白なので地色で浮かせる */
.g-toc > summary{display:flex;align-items:center;min-height:56px;font-size:12px;font-weight:600;cursor:pointer;list-style:none}
.g-toc > summary::-webkit-details-marker{display:none}
.g-toc > summary::after{content:"＋";margin-left:auto;font-weight:400;font-size:20px}
.g-toc[open] > summary::after{content:"−"}
main .g-toc ol{margin:0 0 8px;padding-left:0;list-style:none;counter-reset:toc}
main .g-toc li{font-size:12px;margin:0;counter-increment:toc;display:flex;align-items:center;gap:8px}
main .g-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-latin);font-weight:600;font-size:12px;color:var(--accent-ink)}
main .g-toc a{display:flex;align-items:center;min-height:48px;padding-block:0;text-decoration:none;flex:1}
main .g-toc a:hover{text-decoration:underline}

/* ── 本文（Markdown）。h2 は pages.css の罫つき見出し ──
   記事は下層ページ（14px）より一段上げて15px。1行はPCで約29字・スマホで約22字（WCAGの40字以下） */
.g-body p,main .g-body li,.g-body + section .qa details p{font-size:16px;line-height:2.05}
.g-body.study{counter-reset:sec}
.g-body.study h2{counter-increment:sec}
.g-body.study h2::before{
  content:counter(sec,decimal-leading-zero);display:block;margin-bottom:4px;
  font-family:var(--f-latin);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent-ink);
}
.g-body h3{margin-top:32px;font-size:16px;font-weight:600;line-height:1.7}
.g-body h3 + *{margin-top:8px}
.g-body ol,.g-body ul{margin-top:16px}
/* 本文の表（2026-10-23 お金の記事の一覧表）：細い罫・14px・スマホでも2列まで */
.g-body table{width:100%;margin-top:24px;border-collapse:collapse;border-top:1px solid var(--rule)}
.g-body th,.g-body td{padding:12px 8px;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.7;text-align:left;vertical-align:top;word-break:normal;line-break:strict;overflow-wrap:anywhere}
.g-body th{font-size:12px;font-weight:600;color:var(--ink-muted)}
.g-body td:first-child{width:46%}
.g-body td strong{font-weight:600}
/* 出典の番号 */
.ref{font-size:12px;line-height:0;vertical-align:super;margin-left:1px}
main .ref a{padding:0;text-decoration:none;font-family:var(--f-latin);color:var(--accent-ink)}

/* 注意書き */
.g-notice{margin-top:40px;padding:16px 16px;border:1px solid var(--rule);border-radius:12px}
.g-notice p{font-size:12px;line-height:1.9;color:var(--ink-muted)}

/* 参考にした資料 */
.g-src ol{padding-left:0;list-style:none;counter-reset:src}
main .g-src li{font-size:12px;line-height:1.9;color:var(--ink-muted);counter-increment:src;margin-top:8px;padding-left:2.4em;text-indent:-2.4em}
main .g-src li::before{content:"［" counter(src) "］";display:inline-block;width:2.4em;text-indent:0;font-family:var(--f-latin);color:var(--accent-ink)}
main .g-src a{padding:0;color:var(--ink)}
.g-src li:target{color:var(--ink)}

/* ── 商品（読みもの型は章の中、調べもの型は末尾に1か所） ── */
.g-item{display:flex;gap:16px;align-items:center;margin-top:24px;padding:16px;border:1px solid var(--rule);border-radius:14px;background:var(--white)}
.g-item img{flex:0 0 96px;width:96px;height:96px;object-fit:cover;border-radius:10px}
.g-item .nm{font-size:16px;font-weight:600;line-height:1.7}
.g-item .dc{margin-top:2px;font-size:12px;line-height:1.8;color:var(--ink-muted)}
main .g-item a{
  display:inline-flex;margin-top:8px;padding:8px 16px;border-radius:100px;
  background:var(--amz);color:var(--amz-ink);font-weight:700;font-size:12px;text-decoration:none;
}
.g-cta{margin-top:48px;padding-top:24px;border-top:1px solid var(--rule)}
.g-cta .g-item{background:var(--ground)}

/* 構成図（/structure/・試作用） */
.tree{list-style:none;padding:0;font-size:12px;line-height:1.9}
main .tree ul{list-style:none;margin:0;padding-left:24px;border-left:1px solid var(--rule)}
main .tree li{font-size:12px;margin:0;padding:1px 0}
main .tree a{padding-block:2px}
.tree code{font-family:var(--f-latin);font-size:12px;color:var(--ink-muted);margin-left:8px}
.tree .todo{color:var(--ink-muted)}
.tree .todo::after{content:"（未作成）"}
.tree .new > a{color:var(--amz-red)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* 「戻る」の文字は assets/pages.css 側（全下層ページ共通） */

/* 読み終わりの LINE */


/* ── 読み終わり（94_ §4 案A）──
   記事の終わりから下は地の色を変え、記事の続きではなく「次の行き先」だと分かるようにする（2026-10-22 本人指摘） */
/* 地は白（2026-10-22 本人「白の方がいい」）。記事の地（クリーム）から白に切り替わることで記事の外だと分かる。
   白の上のカードは地色にして浮かせる（PCの一覧と同じ扱い） */
.g-after{margin:48px -24px 0;padding:8px 24px 64px;background:var(--white)}
@media (min-width:1024px){ .g-after{margin:48px -40px 0;padding:8px 40px 72px;border-top:1px solid var(--rule)} }
main .g-after .g-rows.g-card{background:var(--ground);box-shadow:none}
main .g-after .g-chips a{background:var(--ground);border-color:transparent}
/* スマホは記事の終わりの面もクリームの地にする（2026-10-23 夜 本人「場所によって足元のつまみが白・色付きとバラバラ。LPと同じく色がマッチした状態に」）。
   一覧のページと同じく、足元のつまみ（クリーム）がすぐ上の地と同じ色でつながる。本文との境は細い罫で、中のカードは白に返す。PCも同じ（トップの足元のすぐ上「選ばれた理由」の区画がクリームなのと同じ組み） */
.g-after{background:var(--ground);border-top:1px solid var(--rule)}
main .g-after .g-rows.g-card{background:var(--white)}
main .g-after .g-chips a{background:var(--white)}
.g-after h2{border-top:0;padding-top:24px;margin-top:24px}
.g-after .g-rows,.g-after main .g-rows li{border-color:rgba(95,73,72,.12)}
.g-after .g-feat .ph{box-shadow:0 0 0 1px rgba(95,73,72,.08)}
.g-next .g-feat{margin-top:16px}
.g-other{margin-top:0}
.g-back{margin-top:24px;display:flex;flex-direction:column;gap:0}
main .g-back a{display:flex;align-items:center;gap:16px;min-height:56px;font-size:16px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(95,73,72,.12)}

/* ── 下のバー（スマホだけ）。上に戻すスクロールのときだけ出る（94_ §4 案B）
   文字つきのアイコン3つ。Amazon は入れない（記事を移る場所と買う場所を分ける） ── */
.g-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:0 8px env(safe-area-inset-bottom);
  background:var(--ground);border-top:1px solid var(--rule);   /* 固定する面は不透明に（NN/g Sticky Headers） */
  transform:translateY(100%);transition:transform 240ms cubic-bezier(.22,.8,.3,1);
}
.g-bar.show{transform:none}
.g-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;
  font-size:12px;font-weight:600;line-height:1;color:var(--ink);text-decoration:none}
.g-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1024px){ .g-bar{display:none} }   /* PCは左パネルが常に見えている */
@media (prefers-reduced-motion:reduce){ .g-bar{transition:none} }

/* ── 書いた人（記事の終わりに小さく・2026-10-22） ── */
.g-author{margin-top:40px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.g-author .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:12px;line-height:1.8}
.g-author .lbl{color:var(--ink-muted);width:100%}
main .g-author .who a{font-weight:600;padding:0}
.g-author .role{color:var(--ink-muted)}
.g-author .cred{margin-top:4px;font-size:12px;line-height:1.8;color:var(--ink-muted)}
.g-author .line{margin-top:8px;font-size:12px;line-height:1.9;color:var(--ink)}

/* ── 書いている人のページ ── */
.g-person h2 .role{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--ink-muted)}
/* 書いている人のページ：丸い顔写真80px（記事の終わりの56pxより一段大きく。§12.6 の収め方） */
.g-person{margin-top:48px;padding-top:32px;border-top:1px solid var(--rule)}
.g-person .who{display:flex;align-items:center;gap:16px}
main .g-person .who h2{margin:0;padding:0;border:0;font-size:20px}
main .g-person .who h2::before,main .g-person .who h2::after{content:none}
.g-person .ph{flex:0 0 80px;width:80px;height:80px;border-radius:50%;object-fit:cover;background:var(--panel);box-shadow:0 0 0 1px var(--rule)}
.g-person > p{margin-top:16px}
main .g-person .facts{margin-top:16px;border-top:1px solid var(--rule)}
main .g-person .facts div{display:grid;grid-template-columns:6em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
main .g-person .facts dt{font-size:12px;font-weight:600;color:var(--ink-muted);line-height:2}
main .g-person .facts dd{margin:0;font-size:14px;line-height:2;word-break:auto-phrase}
main .g-person-posts{margin-top:16px;padding-left:1.2em}
main .g-person-posts li{font-size:14px;line-height:1.9}

/* ── 次に進むところに矢印で動きを持たせる（2026-10-22 本人指摘「素っ気ない」）──
   矢印は1つの形（右向きの矢印）だけを使い回す。押せるところで右へ少し動く */
:root{ --g-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.arw,.go{position:relative;display:inline-flex;flex:0 0 auto;border-radius:50%}
.arw::before,.go::before{content:"";position:absolute;inset:0;margin:auto;width:50%;height:50%;
  -webkit-mask:var(--g-arrow) center/contain no-repeat;mask:var(--g-arrow) center/contain no-repeat;
  transition:transform 240ms cubic-bezier(.22,.8,.3,1)}
/* 小さい矢印：枠の丸＋茶の矢印（一覧へ・見出しの頭） */
.arw{width:24px;height:24px;border:1px solid var(--accent)}
.arw::before{background:var(--accent)}
/* 大きい矢印：ピンクの丸＋白の矢印（次の記事へ） */
.go{width:48px;height:48px;background:var(--accent)}
.go::before{background:var(--white)}
main a:hover .arw::before,main a:hover .go::before,main a:focus-visible .arw::before,main a:focus-visible .go::before{transform:translateX(4px)}

/* 次に読む：見出しの頭に NEXT と矢印 */
/* 次の記事は白いカード。写真の下に題名と大きな矢印 */
/* 横幅いっぱい（画面の端から端まで）に広げ、ほかの行き先より1段強く見せる（2026-10-22 本人指摘） */
main a.g-next-card{display:block;margin:16px -24px 0;padding:0;background:var(--ground);border-radius:0;overflow:hidden;text-decoration:none}
@media (min-width:1024px){ main a.g-next-card{margin:16px -40px 0} }
main a.g-next-card:hover .t{text-decoration:underline}
.g-next-card .ph{position:relative;display:block;aspect-ratio:3/2;background:var(--panel)}
.g-next-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-next-card .body{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;padding:24px 24px 32px}
@media (min-width:1024px){ .g-next-card .body{padding:24px 40px 32px} }
.g-next-card .cat{grid-column:1/2;font-size:12px;font-weight:600;color:var(--accent-ink);letter-spacing:.04em}
.g-next-card .t{grid-column:1/2;font-size:16px;font-weight:600;line-height:1.7;text-wrap:pretty;word-break:auto-phrase}
.g-next-card .go{grid-column:2/3;grid-row:1/3}

@media (prefers-reduced-motion:reduce){
  .arw::before,.go::before{transition:none}
  main a:hover .arw::before,main a:hover .go::before{transform:none}
}

/* ── 記事の終わりの見出しを1つの型にそろえる（2026-10-22 本人指摘）──
   英字ラベル（--accent・Futura）＋見出し。区切りの罫は引かず、ラベルが区切りを兼ねる */
.g-kicker{margin-top:48px;font-family:var(--f-latin);font-size:12px;font-weight:600;letter-spacing:.2em;line-height:1;color:var(--accent-ink)}
main h2.g-h{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:0;border-top:0;font-size:20px;line-height:1.6}
.g-after > section:first-child .g-kicker{margin-top:40px}
.g-cta .g-kicker{margin-top:0}
.g-cta .g-h + .g-item{margin-top:16px}

/* ほかの記事：白いカードの中に行を並べる（次に読むのカードと同じ面） */
main .g-rows.g-card{margin-top:16px;padding:0 16px;background:var(--white);border:0;border-radius:16px;box-shadow:0 16px 32px -24px rgba(95,73,72,.4)}
main .g-rows.g-card li:last-child{border-bottom:0}
main .g-after .g-rows li{border-color:var(--rule)}

/* 題名の下の副題（一覧の行・次に読むのカード） */
.g-rows .sub{margin-top:2px;font-size:12px;line-height:1.8;color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-next-card .t{font-size:20px}
.g-next-card .sub{grid-column:1/2;font-size:12px;line-height:1.8;color:var(--ink-muted)}
.g-next-card .go{grid-row:1/4}



/* ── 一覧のグループの区画も、記事の終わりと同じ型（英字ラベル＋見出し＋白いカード＋矢印）── */
.g-sec-lead{margin-top:4px;font-size:12px;line-height:1.9;color:var(--ink-muted)}
.g-sec .g-back{margin-top:8px}
main .g-sec .g-back a{border-bottom:0}
/* PCは本文カラムが白なので、一覧のカードは地色にして浮かせる（記事の終わりは暖色の地の上なので白のまま） */
@media (min-width:1024px){ main > .g-sec .g-card, main > .g-card{background:var(--ground);box-shadow:none} }

/* 足元はトップの #sec-line の写し（/site-foot.css）。本文の下に余白を残さず、つまみを上の面に付ける */
main:has(.g-after){padding-bottom:0}

/* ── 押せる範囲を48px以上に（BPボード検査・2026-10-22）。行の高さは変えず、当たり判定だけ広げる ── */
main .crumbs a{padding-block:16px}
main .g-author .who a{padding-block:12px}
main .g-src a{padding-block:8px}
main .g-item a{min-height:48px;padding:0 24px;font-size:16px;align-items:center}

/* 文字詰めの基準（DESIGN.md §3.4.1）：見出しは行頭の括弧を半角に。題名も同じ */
main h1,main h2,main h3,.g-feat .t,.g-rows .t,.g-next-card .t{text-spacing-trim:trim-start}

/* ── この記事を書いた私たち（全記事の最後・2026-10-23）──
   書いた人と＆UTAの紹介を1つの欄に。白いカード・角丸16・内側24。ボタンはトップと同じ丸い形（DESIGN.md §5.1） */
.g-we{margin-top:48px;padding:24px;border-radius:16px;background:var(--white);box-shadow:0 16px 32px -24px rgba(95,73,72,.4)}
@media (min-width:1024px){ .g-we{background:var(--ground);box-shadow:none} }   /* PCは本文カラムが白 */
.g-we .g-kicker{margin-top:0}
/* 紹介文は枠の幅いっぱいに流す。文節での折り返し（auto-phrase）だと行末がそろわず、改行しているように見えた（2026-10-23 本人指摘） */
.g-we .we-body{margin-top:12px;font-size:16px;line-height:2;word-break:normal;line-break:strict;text-wrap:wrap;text-align:justify}
.g-we .we-who{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
/* 書いた人の顔（丸）：トップの夫婦の写真から切り出し。56px */
.g-we .we-ph{flex:0 0 56px;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--panel);box-shadow:0 0 0 1px var(--rule)}   /* 写真の地が白いので、細い線で丸を見せる */
.g-we .we-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:12px;line-height:1.8}
.g-we .we-who .lbl{color:var(--ink-muted)}
main .g-we .we-name a{font-weight:600;padding-block:12px;margin-block:-12px}   /* 押せる高さは保ち、行の間は広げない */
.g-we .we-who .role,.g-we .we-cred{color:var(--ink-muted);font-size:12px;line-height:1.8;word-break:auto-phrase}
.g-we .we-cred{margin-top:0}
.g-we .g-item{margin-top:16px;background:var(--ground)}
@media (min-width:1024px){ .g-we .g-item{background:var(--white)} }
.g-we .we-acts{display:flex;flex-direction:column;gap:8px;margin-top:24px}
main .g-we .we-amz{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:100px;background:var(--amz);color:var(--amz-ink);font-size:15px;font-weight:700;letter-spacing:.04em;text-decoration:none;padding:0 24px}
main .g-we .we-about{display:flex;align-items:center;gap:16px;min-height:48px;font-size:16px;font-weight:600;text-decoration:none}

/* ── 記事の終わりの商品とLINE（2026-10-23 本人「ボディソープとミルクローションそれぞれのAmazonへ」「LINE登録がお得、の引き」）──
   ボタンの形は §5.1：単品＝線（Amazon）、2本セット＝塗り（その区画でいちばん押してほしい1つ）、LINE＝白地に緑の線 */
.g-we .we-items{list-style:none;padding:0;margin:16px 0 0}
.g-we .we-items .g-item{margin-top:8px;align-items:center}
.g-we .we-bottle{flex:0 0 72px;width:72px;height:96px;object-fit:contain;border-radius:0;background:none}
.g-we .we-items .dc{margin-top:0}
main .g-we .we-amz-line{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:8px;padding:0 20px;border-radius:100px;box-shadow:inset 0 0 0 1.4px var(--amz);background:var(--white);color:var(--amz-ink);font-size:13px;font-weight:700;text-decoration:none}
.g-we .we-items + .we-acts{margin-top:16px}
.g-we .we-line{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);text-align:center}
.g-we .we-line-lead{font-size:16px;font-weight:700;line-height:1.7}
.g-we .we-line-body{margin-top:4px;font-size:14px;line-height:1.9}
main .g-we .we-line-btn{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:16px;border-radius:100px;background:var(--white);box-shadow:inset 0 0 0 1.4px var(--line-dark);color:var(--line-dark);font-size:15px;font-weight:700;text-decoration:none}
.g-we .we-line-note{margin-top:8px;font-size:12px;line-height:1.8;color:var(--ink-muted)}
.g-we .we-line + .we-acts{margin-top:16px}

/* ══ 本文の余白と箇条書きの決まり（2026-10-23 本人「微妙な空きの違いが出るならルールを」・DESIGN.md §12.5）══
   余白は場所ごとに1つの値だけ。①ブロック同士（段落・箇条書き・表）24px ②見出しの上48px／下16px
   ③小見出しの上32px／下8px ④写真の上下32px。箇条書きのあとの段落が0pxになっていた（改行が抜けて見えた）のを解消 */
.g-body > *{margin-top:0;margin-bottom:0}
.g-body > * + *{margin-top:24px}
.g-body > h2{margin-top:48px}
.g-body > h2 + *{margin-top:16px}
.g-body > h3{margin-top:32px}
.g-body > h3 + *{margin-top:8px}
.g-body > p:has(> img:only-child){margin-top:32px}
.g-body > p:has(> img:only-child) + *{margin-top:32px}
.g-body > :first-child{margin-top:0}

/* 箇条書きは、地の色を変えた箱に入れ、項目の間に細い罫線（スマホは白い箱・PCは本文が白なので生成りの箱） */
.g-body > ul,.g-body > ol{list-style:none;padding:4px 16px;border-radius:12px;background:var(--white);counter-reset:li}
@media (min-width:1024px){ .g-body > ul,.g-body > ol{background:var(--ground)} }
main .g-body > ul > li,main .g-body > ol > li{position:relative;margin:0;padding:12px 0 12px 22px;line-height:1.9}
.g-body > ul > li + li,.g-body > ol > li + li{border-top:1px solid var(--rule)}
.g-body > ul > li::before{content:"";position:absolute;left:4px;top:calc(12px + .95em - 3px);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.g-body > ol > li{counter-increment:li}
.g-body > ol > li::before{content:counter(li);position:absolute;left:0;top:12px;font-family:var(--f-latin);font-size:14px;font-weight:600;line-height:30px;color:var(--accent-ink)}
/* 項目が太字で始まるときは、太字を見出しとして1行目に置き、説明を次の行へ */
/* 太字で始まる項目の改行は、記事側で <br> を入れる（CSSの :first-child は前の文字を見ないので、文の途中の太字まで改行してしまった） */
.g-body > p:has(> img:only-child) + h2{margin-top:48px}
/* 箇条書きの項目は短い文なので、文節で折り返して行末に1〜2字を残さない（本文の段落は流し組みのまま） */
main .g-body > ul > li,main .g-body > ol > li{word-break:normal}
.nb{white-space:nowrap}   /* 文末の1字と出典番号をつなげ、番号だけが次の行に落ちないように */
/* 最初の見出しの上の区切り線は、目次の箱の真下にくっつくだけで意味がない（2026-10-23 本人）。区切り線は2つめの章から。目次との間は見出しの決まりどおり48px */
.g-body > h2:first-child{margin-top:48px;padding-top:0;border-top:0}
/* 段落は流し組みのまま、最後の行が1〜2字だけにならないようにブラウザに調整させる */


/* 「まず読んでほしい記事」の番号（2026-10-23）。写真の左上に小さな丸。一覧の行の形はそのまま */
.g-rows .th{position:relative}
.g-rows .rk{position:absolute;top:4px;left:4px;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--white);color:var(--ink-strong);font-family:var(--f-latin);font-size:12px;font-weight:600;line-height:1;box-shadow:0 2px 6px rgba(95,73,72,.18)}
.g-pop ol.g-rows{margin-left:0}

/* 柱（グループの中の小見出し）と、柱のページの送り（2026-10-23） */
main .g-pillar h2.g-h{font-size:18px}
.g-pager{margin-top:32px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
main .g-pager a,.g-pager span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:22px;font-family:var(--f-latin);font-size:14px;font-weight:600;text-decoration:none}
main .g-pager a{border:1px solid var(--rule);color:var(--ink)}
.g-pager [aria-current="page"]{background:var(--ink-strong);color:var(--white)}
main .g-pillar h2.g-h a{color:inherit;text-decoration:none}
main .g-pillar h2.g-h a:hover{text-decoration:underline}

/* 列の多い表は、表だけを横にずらして読む（ページ全体を横にあふれさせない・2026-10-23 47都道府県の表）。記事では <div class="g-scroll"> で囲む */
.g-scroll{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.g-scroll table{margin-top:0;width:auto;min-width:100%}   /* 画面の幅に合わせて、セルを折り返す。列が多くて入らないときだけ横に送る */
/* 表のセルは折り返して2段・3段になってよい。1列目を1行に固定し、セルに最大幅をつけていたので、長い商品名が隣のセルの文字に重なった（2026-10-24 本人） */
.g-scroll th,.g-scroll td{min-width:7em}
.g-scroll td:first-child{min-width:9em}

/* PCのタブは、本文の列の幅を等分したボタンの並び（2026-10-23 本人「横幅に均等で、本当にタブボタンのように」）。
   地の色の溝の中に、選んでいるタブだけ白く浮かせる（セグメントの形）。スマホは今の下線のタブのまま（5つで画面幅を等分済み） */
@media (min-width:1024px){
  .g-tabs{padding:12px 32px;border-bottom:1px solid var(--rule)}
  .g-tabs ul{padding:4px;gap:4px;background:var(--ground);border-radius:12px}
  main .g-tabs li{flex:1 0 auto}   /* 入るときは等分、入らないときは横に送る（本文の列は456px・5つで598px要る・実測） */
  main .g-tabs a{justify-content:center;gap:8px;min-height:40px;padding:0 12px;margin:0;border:0;border-radius:8px;font-size:13px}
  main .g-tabs a:hover{background:rgba(255,255,255,.6)}
  main .g-tabs a[aria-current]{background:var(--white);color:var(--ink-strong);box-shadow:0 1px 2px rgba(95,73,72,.12),0 4px 12px -6px rgba(95,73,72,.25)}
}

/* PCの本文カラムはトップと同じ白・左右とも同じ影（2026-10-24 本人「トップから来たとき不自然。右側にだけうっすらグラデーション」）。
   影はトップと同じ値（pages.css .col）。左は左パネル（position:sticky）が上に描かれて影を隠していたので、カラムを前に出す */
@media (min-width:1024px){ .col{position:relative;z-index:1} }

/* 子育てグッズの記事の「この記事で紹介した商品」（楽天市場の写真・価格・評価・2026-10-24）。形は .g-item（＆UTAの商品カード）にそろえる */
.g-goods{margin-top:48px}
.g-goods-list{list-style:none;padding:0;margin:16px 0 0}
.g-goods-list .g-item{margin-top:8px;align-items:flex-start}
.g-goods-list .g-item > div{flex:1 1 auto;min-width:0}
.g-goods-list .g-item img{object-fit:contain;background:var(--white);border:1px solid var(--rule)}
.g-goods-list .tag{display:inline-block;margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--accent)}
.g-goods-list .nm{font-size:15px}
main .g-goods-list a.buy{display:inline-flex;white-space:nowrap;width:auto;align-items:center;justify-content:center;min-height:40px;margin-top:8px;padding:0 20px;border-radius:100px;box-shadow:inset 0 0 0 1.4px #BF0000;background:var(--white);color:#BF0000;font-size:13px;font-weight:700;text-decoration:none}
.g-goods-note{margin-top:16px;font-size:11px;line-height:1.8;color:var(--ink-muted)}
.g-goods-note a{color:inherit}

/* 見出し・題名・商品名などは、組み立てのときに文節の切れ目に <wbr> を入れて class="pw" を付ける（tools/phrase-wrap.mjs）。
   そこでだけ折り返す。iPhone の Safari は word-break:auto-phrase に未対応で、単語の途中で折れてガタガタに見えた（2026-10-24 本人 iPhone Pro Max） */
.pw{word-break:keep-all;overflow-wrap:anywhere}

/* 本文は両端そろえで、文字を四角い箱に組む（2026-10-24 本人「iPhone Pro Max で本文の行末がガタガタ。箱になっていない」）。
   それまでは左寄せ＋text-wrap:pretty。新しい iPhone の Safari は pretty を段落の全行に効かせるので、行が早めに折れて行末が不ぞろいになっていた。
   見出し・題名は .pw（文節で折り返す）なので対象外。表のセルも対象外（短い語が多く、両端そろえだと字間が開く） */
.g-body > p,main .g-body li,main .intro,main .qa details p,.g-goods-note{text-align:justify;text-wrap:wrap;line-break:strict;word-break:normal}