/* 方向 4「無口な器」（2026-11-03 確定）。地は真っ白、端末の標準書体、本文 14px、見出し 20〜22px、線は 1px の薄い灰、面は白と薄い灰の 2 段、
   角丸 8px、影なし。アクセントの深緑は「理由の縦線」と「ボタン」だけ。個性は挿絵と言葉で出す。
   静的ページ（TOP・迷いごと・おすすめ・作り方）用。段は app.css + dan.css。値は note / mybest の実測（DESIGN.md）に寄せた */

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --paper-sub: #f5f7f8;
  --ink: #313131;
  --ink2: #5f6a70;
  --ink3: #8a949b;
  --rule: #e1e4e8;
  --rule-strong: #c9ced3;
  --navy: #1f5a46;
  --navy-hover: #174737;
  --navy-soft: #f5f7f8;
  --navy-border: #e1e4e8;
  --focus: #1f5a46;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: none;
  --shadow-hover: none;
  --shadow-btn: none;
  /* 余白の刻み（8 の倍数）。節の間だけ大きく、節の中は詰める */
  /* 型 B「強弱」（yutsudo 2026-11-03）: 節の間だけ大きく、節の中は詰める */
  --pad-x: 20px;     /* 左右 */
  --sp-scene: 20px;  /* 絵と見出し */
  --sp-lead: 36px;   /* リードと最初の節 */
  --sp-sec: 48px;    /* 節と節 */
  --sp-head: 10px;   /* 節見出しと中身 */
  --sp-row: 12px;    /* 行の上下 */
  --sp-tile: 8px;    /* タイルの隙間 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
a { color: var(--ink); }
h1, h2, h3, p, ul { margin: 0; }
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.wrap {
  max-width: 580px;
  margin: 0 auto;
  padding: 14px var(--pad-x) 64px;
}

/* 上部ナビバー */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--ink2);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.bar span:first-child {
  font-weight: 700;
  color: var(--ink);
}
.bar a {
  color: var(--ink2);
  text-decoration: none;
  font-weight: 400;
}
.bar a:hover { color: var(--ink); text-decoration: underline; }
.bar span:last-child:not(:empty) {
  font-size: 11px;
  color: var(--ink2);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 場面の挿絵（ページ上部）。生成した線画。透過 PNG を白地にそのまま置く */
.scene {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin: 0 auto var(--sp-scene);
}
.scene.tall { height: 220px; }

/* ページ見出し・リード */
h1 {
  font-weight: 700;
  font-size: clamp(20px, 5vw, 22px);
  line-height: 1.45;
  letter-spacing: 0;
  margin-bottom: 8px;
  word-break: auto-phrase;
  text-wrap: balance;
}
.lead {
  font-size: 13.5px;
  color: var(--ink2);
  margin-bottom: var(--sp-lead);
  line-height: 1.6;
}
.sub {
  font-size: 13px;
  color: var(--ink2);
  margin: -2px 0 var(--sp-lead);
}

/* 前提（こんな人向け）: 読むだけで押せない。白地に 1px 線のチップ */
.who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.who::before {
  content: none;
}
.who li {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 2px 10px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
.who li:not(:last-child)::after {
  content: none;
}
.hint {
  display: block;
  font-size: 12px;
  color: var(--ink2);
  margin: 0 0 24px;
}
.osusume h1 {
  font-size: 15px;
  color: var(--ink2);
  margin-bottom: 10px;
}
.osusume .who { margin-bottom: 28px; }

/* いちばん合う（主のおすすめ）。箱で囲まず、理由を主役に */
.hero {
  background: var(--paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin-bottom: var(--sp-sec);
}
.hero .ph {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-sub);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.hero .ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  mix-blend-mode: multiply;
}
.hero .ph a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.hero .ph .art {
  width: 46%;
  height: 66%;
  color: var(--ink);
}
.hero .ph .art svg {
  width: 100%;
  height: 100%;
}
.ph .cap {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 10.5px;
  color: var(--ink2);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 8px;
  line-height: 1.6;
}
.ph.noph span {
  font-size: 13px;
  color: var(--ink2);
  letter-spacing: 0.06em;
}
.hero .in {
  padding: 0;
}
/* 理由を左、写真を右の小さなタイルに（d4_osusume） */
.hero .main {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}
.hero .main .why { margin-bottom: 0; }
.hero .main .ph {
  height: 120px;
  margin: 0;
  border-radius: var(--radius-sm);
}
.hero .main .ph img { padding: 8px; }
.hero .main .ph .cap { display: none; }
.hero .main .ph.noph span { font-size: 11px; letter-spacing: 0; padding: 0 6px; text-align: center; }
.hero .capline {
  display: block;
  font-size: 10.5px;
  color: var(--ink2);
  text-align: center;
  margin-top: 4px;
}
.lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  margin-bottom: 6px;
}
.hero .lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 4px;
}
.hero h2 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 2px;
}
.kind {
  font-size: 12.5px;
  color: var(--ink2);
  margin-bottom: 14px;
}
.why {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  padding: 2px 0 2px 14px;
  background: none;
  border-left: 3px solid var(--navy);
  border-radius: 0;
  margin-bottom: 14px;
}
.cmp {
  display: block;
  font-size: 12.5px;
  color: var(--ink2);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 14px;
}
.cmp b {
  color: var(--navy);
  font-weight: 700;
}
.btn {
  display: block;
  text-align: center;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 16px;
  border-radius: var(--radius);
  box-shadow: none;
  transition: background 0.15s;
}
.btn:hover { background: var(--navy-hover); }
.btn:active { background: var(--navy-hover); }
.btn.official {
  background: var(--paper);
  color: var(--navy);
  border: 1.5px solid var(--navy);
  padding: 11.5px 16px;
}
.btn.official:hover { background: var(--paper-sub); }
.btn.rakuten {
  background: #9e2222;
}
.btn.rakuten:hover { background: #851c1c; }
.btn small {
  font-weight: 400;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 3px;
}
.btn.official small { border-color: var(--navy); }
.alt {
  font-size: 12.5px;
  color: var(--ink2);
  text-align: center;
  margin-top: 8px;
}
.alt a {
  color: var(--ink);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.alt small {
  font-size: 9.5px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 3px;
  color: var(--ink2);
}

/* これもあり（次点候補）。カードで囲まず、線で区切る */
.others {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--sp-sec);
}
.others .lbl {
  padding: 0;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: var(--sp-head);
}
.other {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: var(--sp-row) 0;
  border-top: 1px solid var(--rule);
  align-items: center;
}
.other:first-of-type { border-top: 1px solid var(--rule); }
.other .ph {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--paper-sub);
  overflow: hidden;
  position: relative;
}
.other .ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  mix-blend-mode: multiply;
}
.other .ph .art {
  width: 68%;
  height: 68%;
  color: var(--ink);
}
.other .ph .art svg { width: 100%; height: 100%; }
.other .ph .cap { display: none; }
.other h3 {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 2px;
}
.other p {
  font-size: 12.5px;
  color: var(--ink2);
  line-height: 1.6;
  margin: 2px 0 6px;
}
.other .b {
  font-size: 13px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: 0;
  padding-bottom: 0;
  margin-right: 12px;
}
.other .b small {
  font-size: 9.5px;
  font-weight: 400;
  margin-left: 3px;
  color: var(--ink2);
}

/* 買う前に、これで足りるかも。薄い灰の面。緑は使わない */
.before {
  border: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: var(--paper-sub);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin: 0 0 var(--sp-sec);
}
.before h2 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink2);
}
.before p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 6px;
}
.before p:last-child { margin-bottom: 0; }
.before b { font-weight: 700; }
.before a { font-size: 13px; }

/* セクション小見出し。線は引かず、文字だけ */
h2.sec {
  display: block;
  font-size: 12px;
  color: var(--ink2);
  font-weight: 700;
  letter-spacing: 0;
  margin: var(--sp-sec) 0 var(--sp-head);
}
/* 見出しの直後の節は、リードの余白に任せる（:first-of-type は節ごとに効いて履歴の見出しが詰まったので使わない） */
.sub + h2.sec, .lead + h2.sec, .hint + h2.sec, .who + h2.sec { margin-top: 0; }
h2.sec::after {
  content: none;
}

/* リスト（場面から入る・実はこれも気になる）。行を線で区切る */
.list {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.list a {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--sp-row) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
}
.list a:last-child { border-bottom: 1px solid var(--rule); }
.list a:hover { background: none; }
.list a:hover .tx { text-decoration: underline; text-underline-offset: 3px; }
.list a .ic {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--navy);
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list a .ic svg { width: 100%; height: 100%; }
.list a .tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.list a .tx > span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.list a::after {
  content: "›";
  flex: none;
  color: var(--ink3);
  font-weight: 400;
  font-size: 16px;
  margin-left: 10px;
}
.list .h {
  padding: 14px 0 2px;
  font-weight: 700;
  font-size: 14px;
  border-top: 0;
}
.list a.h .ic { display: none; }

/* 型から選ぶ: 3 列のタイル。白地に 1px 線、挿絵（生成）か線画 */
.kata {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-tile);
  margin: 0;
}
.kata.c2 { grid-template-columns: repeat(2, 1fr); }
.kata a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 12px 8px 10px;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: border-color 0.14s ease;
}
.kata a:hover {
  transform: none;
  border-color: var(--rule-strong);
  box-shadow: none;
}
.kata .art {
  width: 78%;
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto 6px;
  color: var(--ink);
  background: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kata .art svg, .kata .art img { width: 100%; height: 100%; object-fit: contain; }
.kata b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
}
.kata span {
  display: block;
  font-size: 11px;
  color: var(--ink2);
  line-height: 1.4;
  margin-top: 3px;
}

/* 4 問へ（どんな形が似合う？＋一文）。主役の入口なので箱にする */
.cta {
  display: block;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0;
  border: 1.5px solid var(--navy);
  position: relative;
  transition: background 0.15s;
}
.cta:hover { background: var(--paper-sub); }
.cta b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.cta span {
  display: block;
  font-size: 13px;
  color: var(--ink2);
  margin-top: 3px;
  padding-right: 18px;
}
.cta::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--navy);
  font-size: 18px;
}
/* 迷いごとの優先順位: tl2 は 4 問が主役、tl3 は困りごとが主役 */
.tl2 .cta { padding: 20px 18px; }
.tl2 .cta b { font-size: 18px; }
.tl2 .kata b { font-size: 11.5px; }
.tl2 .kata .art { width: 64%; }
.tl2 .cta + h2.sec { margin-top: var(--sp-sec); }
.tl3 .list a { font-size: 15px; padding: 16px 0; }
.tl3 .kata b { font-size: 11.5px; }
.tl3 .kata .art { width: 64%; }
.kata + .cta { margin-top: 4px; }

/* おすすめの一覧（畳んだ索引） */
details.idx {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  overflow: visible;
}
details.idx:last-of-type { border-bottom: 1px solid var(--rule); }
details.idx summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}
details.idx summary:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
details.idx summary::-webkit-details-marker { display: none; }
details.idx summary .ic {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--navy);
}
details.idx summary .ic svg { width: 100%; height: 100%; }
details.idx summary .n {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--ink2);
  font-weight: 400;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
details.idx summary::after {
  content: "▾";
  flex: none;
  font-size: 12px;
  color: var(--ink3);
  margin-left: 4px;
  transition: transform 0.2s;
}
details.idx[open] summary::after {
  transform: rotate(180deg);
}
details.idx .list {
  background: var(--paper-sub);
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 4px 14px;
  margin-bottom: 12px;
}
details.idx .list a {
  padding: 9px 0;
  font-weight: 400;
  font-size: 13.5px;
  border-top: 1px solid var(--rule);
}
details.idx .list a:first-child { border-top: 0; }
details.idx .list a:last-child { border-bottom: 0; }

/* TOP: 迷いごとの一覧。カードにせず、線で区切った行。挿絵の列が目印 */
.themes a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: calc(var(--sp-row) + 4px) 28px calc(var(--sp-row) + 4px) 0;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 0;
  position: relative;
  transition: none;
}
.themes a:last-child { border-bottom: 1px solid var(--rule); }
.themes a:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--rule);
}
.themes a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.themes a::after {
  content: "›";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--ink3);
  display: block;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  transition: none;
}
.themes a:hover::after {
  background: none;
  color: var(--ink);
}
.themes .hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.themes b {
  display: block;
  font-size: 18px;
  line-height: 1.4;
}
.themes .hd .q { text-align: right; flex: none; max-width: 55%; }
.themes .arts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.themes .arts i {
  display: block;
  width: 46px;
  height: 46px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.themes .arts svg, .themes .arts img { width: 100%; height: 100%; object-fit: contain; }
.themes .q {
  font-size: 13px;
  color: var(--ink2);
  font-weight: 400;
}
.themes span {
  font-size: 12.5px;
  color: var(--ink2);
  line-height: 1.5;
}

/* 本文（作り方） */
.essay {
  margin-top: var(--sp-sec);
  padding-top: 0;
  font-size: 14px;
}
.essay h2 {
  font-weight: 700;
  font-size: 15px;
  margin: 20px 0 6px;
  color: var(--ink);
}
.essay p {
  margin-bottom: 10px;
  color: var(--ink);
}
.essay ul {
  padding-left: 1.25em;
  margin-bottom: 12px;
  color: var(--ink2);
}

.seen { font-size: 13px; }
.seen:empty { display: none; }
.seen h2.sec { font-weight: 400; }
.seen .list a { font-weight: 400; font-size: 13px; color: var(--ink2); padding: 10px 0; }
.seen .list a:hover { color: var(--ink); }
.seen .list a::after { font-size: 14px; }

footer {
  margin-top: 36px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  font-size: 11.5px;
  color: var(--ink2);
  line-height: 1.7;
}
footer a { color: var(--ink2); }
footer a:hover { color: var(--ink); }

/* 4 問の入口の見せ方（PP_CTA_STYLE）。tile: 型タイルの並びに「わからない」のタイルとして置く。sec: 独立した節の行にする */
.kata a.ask {
  border-style: dashed;
  border-color: var(--rule-strong);
  justify-content: center;
}
.kata a.ask .art {
  width: 40%;
  color: var(--navy);
}
.kata a.ask b { color: var(--navy); white-space: normal; }
.kata a.ask .tx > span { color: var(--ink2); }
.kata a.ask.wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
}
.kata a.ask.wide .art { width: 28px; height: 28px; aspect-ratio: auto; margin: 0; }
.kata a.ask.wide .tx { text-align: left; }
.kata a.ask.wide b { display: inline; margin-right: 8px; }
.kata a.ask.wide .tx > span { display: inline; margin: 0; }
.ask-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-row) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.ask-row .ic {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--navy);
}
.ask-row .ic svg { width: 100%; height: 100%; }
.ask-row b { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.ask-row span { display: block; font-size: 12px; color: var(--ink2); }
.ask-row::after { content: "›"; margin-left: auto; color: var(--ink3); font-size: 16px; }
.ask-row.under { border-bottom: 0; padding: 12px 0 4px; }
.ask-row.under b { display: inline; }
.ask-row.under b::after { content: "　›"; color: var(--ink3); font-weight: 400; }
.ask-row.under::after { content: none; }
.kata + .ask-row.under { margin-top: 0; }
.kata { margin-bottom: 12px; }

/* ---- 2026-11-10: TOP の行の基準線（案 1）。端は左右の 2 本だけ: 名前・添え書き・アイコン列は左端、「›」とアイコン列の終わりは右端 ---- */
.themes a { gap: 6px; padding: 20px 0; }
.themes a::after { top: 20px; right: 0; transform: none; line-height: 1.4; font-size: 18px; }
.themes b { padding-right: 24px; }
.themes .tz { margin-bottom: 6px; }
.themes .arts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.themes .arts i { width: auto; height: auto; aspect-ratio: 1; padding: 4px; }

/* ---- 2026-11-10: 挿絵と見出し。TOP と迷いごとは案 A（薄い灰の面に絵、文字は面の下で左）、おすすめは案 B（文字を左、絵を右） ---- */
.scene, .scene.tall {
  display: block;
  width: 100%;
  height: 200px;
  background: var(--paper-sub);
  border-radius: var(--radius);
  padding: 16px 0;
  margin: 0 0 var(--sp-scene);
}
.osusume .scene {
  float: right;
  width: 44%;
  height: 120px;
  background: none;
  padding: 0;
  margin: 0 -8px 8px 12px;
  object-position: right center;
}
.osusume h1 { padding-top: 16px; }
.osusume .hero { clear: both; }

/* ---- 2026-11-10b（yutsudo 決定）: 挿絵の面をやめて白に。おすすめは絵を上に戻し、答えを 1 枚の枠で囲む。節の見出しは 15px の濃い字 ---- */
.scene, .scene.tall { background: none; padding: 0; height: 190px; border-radius: 0; }
.osusume .scene { float: none; display: block; width: 100%; height: 150px; margin: 0 0 16px; padding: 0; background: none; object-position: center; }
.osusume h1 { padding-top: 0; }
.hero { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 16px 16px; }
h2.sec, .others .lbl, .before h2 { font-size: 15px; color: var(--ink); }
.hero .lbl { font-size: 13px; }

/* ---- 2026-11-10c: 「買う前に」は 1 手 1 行。記事は答えと分けて「読みもの」として組む ---- */
.before .act { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--rule); }
.before .act:first-of-type { border-top: 0; padding-top: 4px; }
.before .act .ic { width: 22px; height: 22px; color: var(--ink2); margin-top: 1px; }
.before .act .ic svg { width: 100%; height: 100%; }
.before .act h3 { font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0 0 2px; }
.before .act p { font-size: 13px; color: var(--ink2); line-height: 1.6; margin: 0; }
.before .act p.lk { margin-top: 4px; }
.essay { margin-top: var(--sp-sec); padding-top: 32px; border-top: 1px solid var(--rule); }
.essay .eyebrow { font-size: 12px; font-weight: 700; color: var(--ink2); margin: 0 0 4px; }
.essay h2 { font-size: 20px; line-height: 1.45; margin: 0 0 8px; }
.essay .lede { font-size: 15px; line-height: 1.8; color: var(--ink2); margin-bottom: 8px; }
.essay h3 { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 28px 0 6px; padding-top: 0; }
.essay p { font-size: 15px; line-height: 1.8; }
.essay ul { font-size: 14px; line-height: 1.8; }
.essay .note { font-size: 12.5px; color: var(--ink2); line-height: 1.7; margin-top: 28px; padding: 12px 14px; background: var(--paper-sub); border-radius: var(--radius); }

/* ---- 2026-11-10d（yutsudo 決定 案 2）: 色に意味を持たせる。緑＝買う側（ボタン・理由・節の頭の縦線）、暖色＝買わなくていいかも（「買う前に」だけ）。記事は薄い灰の帯で答えと分ける ---- */
h2.sec, .others .lbl { display: flex; align-items: center; gap: 8px; }
h2.sec::before, .others .lbl::before { content: ""; flex: none; width: 3px; height: 15px; background: var(--navy); border-radius: 2px; }
.seen h2.sec::before { content: none; }
.before { background: #fbf4e8; border-color: #eeddbf; }
.before h2 { color: #8a5a14; }
.before .act .ic { color: #b7791f; }
.before .act { border-top-color: #eeddbf; }
.essay { background: var(--paper-sub); margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); padding: 32px var(--pad-x) 28px; border-top: 0; }
.essay .note { background: #fff; }

/* ---- 2026-11-10e（yutsudo「案 2 はガチャガチャする」→ 案 1）: 色は緑 1 色のまま、薄い面にも使う。暖色と記事の灰の帯はやめる ---- */
.before { background: #eef5f1; border-color: #d5e6dc; }
.before h2 { color: var(--navy); }
.before .act .ic { color: var(--navy); }
.before .act { border-top-color: #d5e6dc; }
.essay { background: none; margin-left: 0; margin-right: 0; padding: 32px 0 0; border-top: 1px solid var(--rule); }
.essay .note { background: var(--paper-sub); }
.essay h3 { border-left: 3px solid var(--navy); padding-left: 10px; }

/* ---- 2026-11-10f: 謎の余白（yutsudo）。リストの最後の下線と、次の部分の上の線が 48px 空けて二重になり、空の箱に見えていた。
   リストの最後の行は下線を引かず、区切りの線は次の部分の 1 本だけにする ---- */
.list a:last-child, .themes a:last-child, details.idx:last-of-type, .ask-row.under { border-bottom: 0; }
.list a:last-child { padding-bottom: 4px; }

/* ---- 2026-11-10g: 運営者情報・プライバシーポリシーの表 ---- */
table.info { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 20px; }
table.info th, table.info td { text-align: left; vertical-align: top; padding: 10px 8px 10px 0; border-top: 1px solid var(--rule); }
table.info th { width: 7em; font-weight: 700; color: var(--ink2); }

/* 作り方・運営者情報・プライバシー: 記事の区切り線と縦線は使わない（おすすめページの記事とは別物） */
.essay.doc { margin-top: 8px; padding-top: 0; border-top: 0; }
.essay.doc h2 { font-size: 16px; margin: 28px 0 6px; }

/* 段の記事ページ（/…/erabikata/）2026-11-11 */
.essay.doc .lede { font-size: 15px; line-height: 1.8; color: var(--ink2); margin: 0 0 4px; }
.essay.doc h2 { font-size: 18px; margin: 32px 0 8px; }
.essay.doc h3 { margin: 22px 0 4px; }
.essay .unfit { font-size: 14px; color: var(--ink2); }
.essay .unfit span { display: inline-block; font-size: 11.5px; font-weight: 700; border: 1px solid var(--rule); border-radius: 4px; padding: 0 6px; margin-right: 6px; line-height: 1.7; }
.essay-cta { margin: 24px 0 8px; }