/* 赤ちゃん入眠研究所 — 版面
   プロトタイプのインラインstyleを、値を変えずに整理したもの。 */

*, *::before, *::after { box-sizing: border-box }
/* display を持つ要素にも hidden を効かせる（.two は display:flex のため素の hidden が効かない） */
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--am); text-decoration: none }
a:hover { color: var(--tag) }
button { font-family: inherit }
img { max-width: 100% }
:focus-visible { outline: 2px solid var(--am); outline-offset: 2px; border-radius: 4px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

.shell {
  max-width: var(--w); margin: 0 auto;
  background: var(--bg); box-shadow: 0 0 0 1px var(--ln);
  padding-bottom: 80px;
}
.sec { padding: 0 18px 28px }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums }

/* ---------- ヘッダ ---------- */
.hd {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--ln);
  padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
}
.hd .brand { display: flex; align-items: center; gap: 9px }
.dot { width: 22px; height: 22px; border-radius: 22px; background: var(--c1); display: block; flex: 0 0 22px }
.logo { font-family: var(--f-round); font-size: 17px; font-weight: 700; letter-spacing: .02em; display: flex }
.logo i { font-style: normal }
.logo i:nth-child(1) { color: var(--c1) } .logo i:nth-child(2) { color: var(--c2) }
.logo i:nth-child(3) { color: var(--c3) } .logo i:nth-child(4) { color: var(--c4) }
.logo i:nth-child(5) { color: var(--c5) } .logo i:nth-child(6) { color: var(--c1) }
.logo i:nth-child(7) { color: var(--fg) }
.themebtn {
  display: flex; align-items: center; gap: 7px; background: var(--soft);
  border: none; border-radius: var(--r-pill); padding: 8px 13px; cursor: pointer;
  color: var(--mut); min-height: 38px;
}
.themebtn:hover { color: var(--am) }
.themebtn .d { width: 8px; height: 8px; border-radius: 8px; background: var(--am); display: block }
.themebtn span:last-child { font-size: 11.5px; font-weight: 700; letter-spacing: .04em }

/* ---------- 見出し ---------- */
h1.hero {
  font-family: var(--f-round); font-weight: 700; font-size: 26px; line-height: 1.7;
  letter-spacing: .03em; margin: 0; text-wrap: pretty;
}
h2.sh {
  font-family: var(--f-round); font-size: 18px; font-weight: 700; letter-spacing: .04em;
  margin: 0; display: flex; align-items: center; gap: 8px;
}
h2.sh::before { content: ""; width: 10px; height: 10px; border-radius: 10px; background: var(--c3); display: block }
h2.sh.c1::before { background: var(--c1) } h2.sh.c4::before { background: var(--c4) }
h2.sh.c2::before { background: var(--c2) }
.sechead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px }
.sechead .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--mut) }

/* ---------- トップ ---------- */
.kick { display: flex; align-items: center; gap: 7px; margin-bottom: 11px }
.kick b { width: 8px; height: 8px; border-radius: 8px; display: block }
.kick span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--mut); margin-left: 3px }
.lead { font-size: 13.5px; line-height: 2; color: var(--mut); margin: 12px 0 0; text-wrap: pretty }
.heroimg { margin-top: 18px; border-radius: var(--r-card); overflow: hidden; height: 200px; background: var(--soft) }
.heroimg img { width: 100%; height: 100%; object-fit: cover; display: block }
.stats { display: flex; gap: 8px; margin-top: 12px }
.stat { flex: 1; background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-box); padding: 12px 13px }
.stat .v { font-family: var(--f-mono); font-size: 20px; font-weight: 600 }
.stat .v.miss { color: var(--tag) }
.stat .l { font-size: 11px; color: var(--mut); margin-top: 2px }

/* ---------- 柱ツール ---------- */
.tool { background: var(--amw); border-radius: 18px; padding: 18px 16px 16px }
.tool .th { display: flex; align-items: center; gap: 9px }
.tool .th .dot { background: var(--am) }
.tool .note { font-size: 12.5px; line-height: 1.9; color: var(--mut); margin: 8px 0 0 }
.now { background: var(--sf); border-radius: var(--r-box); margin-top: 14px; padding: 14px 15px 6px }
.nowhd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px }
.nowhd .t { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--am) }
.nowhd .t .c { font-family: var(--f-mono); font-size: 11px; color: var(--mut); margin-left: 7px }
.nowhd .st { font-family: var(--f-mono); font-size: 11px; color: var(--mut) }

.row { border-top: 1px solid var(--ln); padding: 11px 0 12px; display: flex; gap: 12px; align-items: flex-start }
.row .ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--r-in); overflow: hidden; background: var(--soft) }
.row .ic img { width: 100%; height: 100%; object-fit: cover; display: block }
.row .b { flex: 1; min-width: 0 }
.row .nm { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.row .nm b { font-size: 14px; font-weight: 700; letter-spacing: .03em }
.row .nm .cat { font-size: 11px; color: var(--mut); background: var(--soft); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap }
.row .sp { font-family: var(--f-mono); font-size: 11.5px; color: var(--mut); margin-top: 5px }
.row .sg { font-size: 12px; line-height: 1.75; color: var(--mut); margin-top: 2px }
.row .go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  background: var(--amw); color: var(--am); font-size: 12px; font-weight: 700;
  letter-spacing: .02em; border-radius: var(--r-pill); padding: 7px 13px; min-height: 34px;
}
.row .go:hover { background: var(--am); color: #fff }
.row .soonlab { font-size: 11.5px; color: var(--mut); margin-top: 8px; opacity: .75 }
.more {
  width: 100%; border: none; border-top: 1px solid var(--ln); background: transparent;
  color: var(--am); font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  padding: 12px 0 13px; cursor: pointer; min-height: 44px;
}
.two { display: flex; gap: 8px; margin-top: 8px }
.two .col { flex: 1; background: var(--sf); border-radius: var(--r-box); padding: 12px 13px 13px }
.two .col h3 { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--mut); margin: 0 0 7px }
.two .col.soon h3 { color: var(--bl) }
.two .col p { font-size: 12.5px; line-height: 1.85; color: var(--mut); margin: 0 }
.two .col p.none { opacity: .7; font-size: 12px; line-height: 1.8 }

.ctrl { margin-top: 14px }
.ctrl .lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--mut); margin-bottom: 8px }
.ctrl .lab + .lab, .ctrl .months + .lab { margin-top: 14px }
.conds { display: flex; flex-wrap: wrap; gap: 7px }
.conds button {
  border: 1px solid var(--ln); background: var(--sf); color: var(--mut);
  border-radius: var(--r-pill); padding: 9px 14px; font-size: 12.5px;
  font-weight: 700; cursor: pointer; min-height: 40px;
}
.conds button[aria-pressed="true"] { border-color: var(--am); background: var(--am); color: #fff }
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px }
.months button {
  border: 1px solid var(--ln); background: var(--sf); color: var(--mut);
  border-radius: var(--r-in); padding: 0; height: 44px;
  font-family: var(--f-mono); font-size: 14px; font-weight: 600; cursor: pointer;
}
.months button[aria-pressed="true"] { border-color: var(--am); background: var(--am); color: #fff }

/* ---------- 月齢から入る ---------- */
.ages { display: grid; grid-template-columns: 1fr 1fr; gap: 9px }
.ages a {
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-box);
  padding: 13px 14px 14px; display: block; color: var(--fg);
}
.ages a:hover { border-color: var(--am) }
.ages .r { font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--am) }
.ages .r small { font-size: 11px; color: var(--mut); margin-left: 3px }
.ages .t { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; margin-top: 6px }
.ages .s { font-size: 11px; line-height: 1.7; color: var(--mut); margin-top: 4px }

/* ---------- 記事 ---------- */
.feat { margin-top: 14px; background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-card); overflow: hidden; display: block; color: var(--fg) }
.feat .ph { height: 190px; background: var(--soft) }
.feat .ph img { width: 100%; height: 100%; object-fit: cover; display: block }
.feat .bd { padding: 14px 15px 16px }
.meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px }
.meta .d { font-family: var(--f-mono); color: var(--mut) }
.meta .c { color: var(--tag); font-weight: 700 }
.meta .new { border: 1px solid var(--tag); color: var(--tag); font-size: 10px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 8px; letter-spacing: .06em }
.feat h3 { font-family: var(--f-round); font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; margin: 9px 0 0 }

/* ★実測ボックス — サイトの署名。全記事で同じ形 */
.meas { margin-top: 12px; background: var(--amw); border-radius: var(--r-in); padding: 13px 14px }
.meas .h { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--am); margin-bottom: 9px }
.meas dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 12.5px; line-height: 1.55; margin: 0 }
.meas dt { color: var(--mut) }
.meas dd { margin: 0; font-family: var(--f-mono); font-weight: 600 }
.meas dd small { color: var(--mut); font-weight: 500; font-family: var(--f-body) }
.meas dd.v { font-family: var(--f-body); font-weight: 700; color: var(--am) }
.buyrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap }
.buyrow .p { font-family: var(--f-mono); font-size: 13px; font-weight: 600 }
.buyrow .buy { background: var(--am); color: #fff; font-size: 12px; font-weight: 700; border-radius: var(--r-pill); padding: 7px 14px }
.buyrow .rent { border: 1px solid var(--bl); color: var(--bl); font-size: 12px; font-weight: 700; border-radius: var(--r-pill); padding: 6px 13px }
.meas .miss { font-size: 12px; line-height: 1.8; color: var(--mut); margin-top: 11px }
.meas .miss b { color: var(--fg); font-weight: 700 }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin-top: 16px }
.grid a { display: block; color: var(--fg) }
.grid .ph { height: 135px; background: var(--soft); border-radius: var(--r-box); overflow: hidden }
.grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block }
.grid .meta { margin-top: 9px; font-size: 11px }
.grid h3 { font-family: var(--f-round); font-size: 14.5px; font-weight: 700; line-height: 1.65; letter-spacing: .03em; margin: 6px 0 0; text-wrap: pretty }

/* ---------- 道具で絞る ---------- */
.cats { display: flex; flex-wrap: wrap; gap: 8px }
.cats a {
  background: var(--sf); border: 1px solid var(--ln); color: var(--fg);
  padding: 10px 14px; border-radius: var(--r-pill); font-size: 12.5px;
  font-weight: 500; display: flex; align-items: center; gap: 8px;
}
.cats a:hover { border-color: var(--am); color: var(--am) }
.cats a span { font-family: var(--f-mono); font-size: 11px; color: var(--mut) }

/* ---------- フッタ ---------- */
footer { margin: 0 18px; background: var(--soft); border-radius: 18px; padding: 20px 18px 22px }
footer .t { font-family: var(--f-round); font-size: 15px; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px }
footer .who { display: flex; gap: 14px; align-items: flex-start }
footer .who .av { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; overflow: hidden; background: var(--bg) }
footer .who .av img { width: 100%; height: 100%; object-fit: cover; display: block }
footer .who .nm { font-family: var(--f-round); font-size: 14px; font-weight: 700; letter-spacing: .03em; line-height: 1.7 }
footer .who p { font-size: 12.5px; line-height: 1.95; color: var(--mut); margin: 8px 0 0; text-wrap: pretty }
footer .cr { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--mut); margin-top: 18px }

/* ---------- 記事ページ ----------
   2026-09-15 改訂：読みにくくて離脱するという指摘を受けて作り直した。
   原因は3つで、どれも文章ではなく体裁の問題だった。

     1. 本文が 14px。スマホで長文を読ませるには小さすぎた
     2. 見出しの区切りが下線1本だけ。どこで話が変わるか分からない
     3. 段落の間が 18px。文の行間(2.05)とほぼ同じで、段落が段落に見えない

   本文は 16.5px、段落間は行間の1.5倍、見出しは上下を罫線で挟む。

   ★さらに根本原因がもう1つあった：
     セレクタが `.art .body` だったが、HTML上 .body は .art の**兄弟**であって
     子孫ではない。つまり**記事本文のCSSは一度も適用されていなかった。**
     文字サイズも見出しも、ずっとブラウザ既定のまま出ていた。
     .body は記事ページ専用のクラスなので、`.art` の限定を外す。 */
.art { padding: 22px 18px 8px }
.art h1 {
  font-family: var(--f-round); font-size: 24px; font-weight: 700;
  line-height: 1.6; letter-spacing: .03em; margin: 10px 0 0; text-wrap: pretty;
}
.body { font-size: 16.5px; line-height: 2.0; color: var(--fg) }

/* 段落は「離す」。行間と同じ幅だと、改行なのか段落替えなのか読み取れない */
.body p { margin: 0 0 28px }

/* リード（最初の段落）だけ少し大きく。記事の入口で失速させない */
.body > p:first-child { font-size: 17.5px; line-height: 1.95 }

/* 見出しは上下を罫線で挟む。話の切り替わりを、読む前に目で分かるようにする */
.body h2 {
  font-family: var(--f-round); font-size: 19.5px; font-weight: 700;
  letter-spacing: .04em; line-height: 1.6; color: var(--tag);
  margin: 46px 0 22px; padding: 16px 0 14px;
  border-top: 2px solid var(--tag); border-bottom: 1px solid var(--ln);
  display: flex; align-items: flex-start; gap: 10px; text-wrap: pretty;
}
.body h2::before {
  content: ""; width: 10px; height: 10px; border-radius: 10px;
  background: var(--tag); flex: 0 0 10px; margin-top: .62em;
}

/* 箇条書き */
.body ul { margin: 0 0 28px; padding-left: 1.3em }
.body li { margin-bottom: 10px }
.body li::marker { color: var(--tag) }

/* 注意書き。地の文に混ぜず、面を変えて「ここは別の話」と分かるようにする */
.body .sub {
  color: var(--mut); font-size: 14px; line-height: 1.95;
  background: var(--sf); border-left: 3px solid var(--ln);
  border-radius: 0 var(--r-in) var(--r-in) 0;
  padding: 14px 16px; margin: 0 0 28px;
}

/* ---------- 目次 ----------
   長い記事ほど「何が書いてあるか」を先に見せる。
   読む前に降りる先が分かると、途中で離脱されにくい。 */
.toc {
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-box);
  padding: 16px 18px 18px; margin-top: 22px;
}
.toc .t {
  font-family: var(--f-round); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; color: var(--mut); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.toc .t::before {
  content: ""; width: 8px; height: 8px; border-radius: 8px; background: var(--am);
}
.toc ol { margin: 0; padding-left: 1.4em; font-size: 14.5px; line-height: 1.85 }
.toc li { margin-bottom: 8px }
.toc li::marker { font-family: var(--f-mono); color: var(--mut); font-size: 12px }
.toc a { color: var(--fg) }
.toc a:hover { color: var(--am) }
.crumb { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--mut) }
.crumb a { color: var(--mut) } .crumb a:hover { color: var(--am) }
/* PR表記 — 景表法（ステマ規制）で必要なのは「広告だと分かること」。
   目立たせる必要はないが、記事の頭で見える位置に置く。 */
.pr { font-size: 11px; color: var(--mut); letter-spacing: .04em; margin-top: 6px }
/* 末尾の注記 — PRとは別物。医療・発達の線引きだけを一行で。 */
.disc { margin: 30px 0 0; padding-top: 14px; border-top: 1px solid var(--ln);
        font-size: 11px; line-height: 1.85; color: var(--mut) }

/* ---------- 空の状態 ----------
   記事もデータも無い時期をきちんと見せる。
   「準備中」を曖昧にせず、何点あって何が足りないかを書く。 */
.empty {
  background: var(--sf); border: 1px dashed var(--ln); border-radius: var(--r-box);
  padding: 18px 16px; text-align: left;
}
.empty b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .03em; margin-bottom: 6px }
.empty p { margin: 0; font-size: 12.5px; line-height: 1.95; color: var(--mut) }

/* ---------- 記事の型（2026-09-17）----------
   src/build_articles.py が全記事に同じ形で出す部品。
   ここを直すと7本すべてに反映される。 */

/* 日付。継続して記録しているサイトなので、更新日を出すこと自体が主張になる */
.meta .d, .meta .u { font-family: var(--f-mono); color: var(--mut); font-size: 11px }
.meta .u::before { content: "／"; margin: 0 4px; color: var(--ln) }

/* ★結論 — 見出しのすぐ下。深夜の読者にスクロールさせる前に答える */
.lede {
  margin-top: 18px; background: var(--sf);
  border: 1px solid var(--ln); border-left: 4px solid var(--am);
  border-radius: 0 var(--r-box) var(--r-box) 0; padding: 16px 18px 18px;
}
.lede .h {
  font-family: var(--f-round); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; color: var(--am); margin-bottom: 8px;
}
.lede .v { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.85; letter-spacing: .02em }
.lede .who { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--ln); display: grid; gap: 8px }
.lede .who .r { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; align-items: start }
.lede .who dt { font-size: 12px; font-weight: 700; color: var(--mut); line-height: 1.8 }
.lede .who dd { margin: 0; font-size: 13.5px; line-height: 1.8 }

/* 著者 — 誰が書いたから読む価値があるのか、を記事ごとに示す */
.byline {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--ln);
  display: flex; gap: 14px; align-items: flex-start;
}
.byline img { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; object-fit: cover; background: var(--soft) }
.byline p { margin: 0; font-size: 12.5px; line-height: 1.95; color: var(--mut) }
.byline b { color: var(--fg); font-size: 13.5px; letter-spacing: .02em }

/* 関連記事 — 回遊。物販中心なので、1人あたりの閲覧本数がそのまま収益に効く */
.rel { margin-top: 34px }
.rel .sh { font-size: 17px; margin-bottom: 14px }
.rel .sh::before { background: var(--c4) }
.relgrid { display: grid; gap: 10px }
.relgrid a {
  display: block; background: var(--sf); border: 1px solid var(--ln);
  border-radius: var(--r-box); padding: 14px 16px; color: var(--fg);
}
.relgrid a:hover { border-color: var(--am) }
.relgrid .c { display: block; font-size: 11px; font-weight: 700; color: var(--tag); margin-bottom: 5px }
.relgrid .t { display: block; font-family: var(--f-round); font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .02em }
.relgrid .s { display: block; font-size: 12.5px; line-height: 1.8; color: var(--mut); margin-top: 6px }

/* ---------- 参考にしたページ ----------
   一次情報が売りのサイトでも、安全や一般的な知識は自分で確かめようがない。
   そこを書くなら出典を出す。出典を出さずに混ぜると、実測のほうまで
   信用されなくなる。 */
.refs {
  margin-top: 26px; padding: 15px 17px;
  background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-box);
}
.refs .t {
  font-family: var(--f-round); font-size: 13px; font-weight: 700;
  color: var(--mut); letter-spacing: .06em; margin-bottom: 9px;
}
.refs ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.75 }
.refs li { margin-bottom: 7px }
.refs a { color: var(--am) }
.refs .by {
  display: block; font-size: 11.5px; color: var(--mut);
  font-family: var(--f-mono); letter-spacing: .03em;
}
.refs p { margin: 10px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--mut) }

/* ---------- 引用 ----------
   公的機関の記載を引くときに使う。自分の言葉と混ぜないために、
   見た目でもはっきり分ける。要約せず、原文をそのまま置く。 */
.body blockquote {
  margin: 0 0 28px; padding: 14px 16px;
  background: var(--sf); border-left: 3px solid var(--am);
  border-radius: 0 var(--r-in) var(--r-in) 0;
  font-size: 15.5px; line-height: 1.9;
}
.body blockquote p { margin: 0 }
.body blockquote cite {
  display: block; margin-top: 8px; font-style: normal;
  font-size: 11.5px; color: var(--mut); font-family: var(--f-mono);
}