/*
 * 見た目の統一 (v0.69.0)
 *
 * BOSSの依頼（2026-10-07）：「AIが作成した感じが強い」「機能が多すぎて使い方が分からない」。
 * 昔からの人気サイト（av-wiki.net・SIOKAN・vod365.net）を測って、次をそろえた。
 *
 *   書体   … ゴシック体だけ（ヒラギノ角ゴ／Noto Sans JP／メイリオ）。見出しの明朝（Georgia）はやめた。
 *            Webフォントは読み込まない（共有サーバーで表示が遅くなる。端末の和文ゴシックで十分）。
 *   見出し … 左に色の線＋太字。英語の小見出し（RANKING・QUICK PICKS など）は出さない。
 *   大きさ … 本文16px・行間1.8、ページの見出しは22〜30px。雑誌の表紙のような巨大な見出しはやめた。
 *   色     … 3つの役割だけ。
 *              ブランド（ピンク）… ロゴ・見出しの線・選択中のメニュー
 *              買う（オレンジ）  … 販売元へ飛ぶボタン（buy-buttons.css）
 *              セール（赤）      … セールの札（.mo-sale-pill）
 *            金は 1位 の札にだけ残す。以前は見出し・ラベル・枠・選択中・ボタンのすべてが金だった。
 *
 * light-theme.css のあとに読む（mo-child-discovery.php）。ライト用の :root[data-mo-theme="light"] … より
 * 強い詳細度が要るところは :root[data-mo-theme] を付けて書く。
 */
:root {
  --mo-font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, "Yu Gothic Medium", sans-serif;
  --mo-font-head: var(--mo-font-jp);
  --mo-brand: #f06595;      /* 暗い地の上 */
  --mo-brand-ink: #ffffff;
}
:root[data-mo-theme="light"] {
  --mo-brand: #d6336c;      /* 白い地の上（白い文字で4.6） */
}

/* ---- 書体 ---- */
/* body.mo-standalone-shell（catalog.css）と Cocoon の body より後・同じ強さ以上で書く */
:root body, :root body.mo-standalone-shell, :root .mo-db, :root .mo-db input, :root .mo-db button, :root .mo-db select, :root .mo-db textarea { font-family: var(--mo-font-jp); }
:root .mo-db h1, :root .mo-db h2, :root .mo-db h3 { font-family: var(--mo-font-head); letter-spacing: 0; }
:root .mo-db h1 { font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.45; }

/* ---- 英語の小見出しは出さない（関数が出しているものも含めて） ---- */
:root .mo-section-head > p, :root .mo-kicker, :root .mo-eyebrow, :root .mo-page-head > p { display: none; }

/* ---- 見出し：左に線、太字のゴシック ---- */
:root .mo-section-head { align-items: center; flex-wrap: wrap; gap: 6px 14px; }
:root .mo-section-head h2 { position: relative; margin: 0 auto 0 0; padding-left: 12px; color: var(--mo-text); font: 700 22px/1.4 var(--mo-font-head); }
:root .mo-section-head h2::before { content: ""; position: absolute; top: .18em; bottom: .18em; left: 0; width: 4px; border-radius: 2px; background: var(--mo-brand); }
:root .mo-section-head > a { color: var(--mo-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  :root .mo-section-head h2 { flex-basis: 100%; font-size: 19px; }
}

/* ---- ヘッダー：日本語のサイト名 ---- */
:root .mo-db-brand > b { color: var(--mo-brand-ink); background: var(--mo-brand); font: 800 20px/1 var(--mo-font-jp); letter-spacing: 0; }
:root .mo-db-brand strong { color: var(--mo-text); font: 700 20px/1.2 var(--mo-font-jp); letter-spacing: .02em; }
:root .mo-db-brand small { margin-top: 3px; color: var(--mo-muted); font: 500 11px/1.3 var(--mo-font-jp); letter-spacing: 0; }
:root .mo-db-nav-links a { font-size: 15px; }
:root .mo-db-nav-links a.is-active::after { background: var(--mo-brand); }
@media (max-width: 640px) {
  :root .mo-db-brand strong { font-size: 17px; }
  :root .mo-db-brand small { font-size: 10px; }
  :root .mo-db-nav-links a { font-size: 13px; }
}
:root[data-mo-theme="light"] .mo-db-brand > b { color: var(--mo-brand-ink); background: var(--mo-brand); }

/* ---- トップの冒頭：何のサイトかを一文で、入口は3つ ---- */
:root .mo-home-hero.mo-home-hero-ahegao { padding: 34px 0 30px; background: var(--mo-panel); }
:root .mo-home-hero-ahegao h1 { margin: 0 0 8px; color: var(--mo-text); font: 700 clamp(24px, 3vw, 34px)/1.4 var(--mo-font-head); }
:root .mo-home-hero-ahegao .mo-home-lead { margin: 0 0 18px; color: var(--mo-muted); font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.7; }
.mo-home-ahegao-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 0 0 18px; }
:root .mo-db .mo-home-ahegao-links a { display: grid; gap: 2px; padding: 14px 12px; color: var(--mo-text); background: var(--mo-bg); border: 1px solid var(--mo-line); border-left: 4px solid var(--mo-brand); border-radius: 6px; text-decoration: none; }
:root .mo-db .mo-home-ahegao-links a:hover { border-color: var(--mo-brand); }
.mo-home-ahegao-links b { font-size: 18px; font-weight: 700; }
.mo-home-ahegao-links small { color: var(--mo-muted); font-size: 12px; }
:root .mo-home-hero-ahegao form { margin-top: 0; }
@media (max-width: 640px) {
  .mo-home-ahegao-links { gap: 6px; }
  :root .mo-db .mo-home-ahegao-links a { padding: 10px 8px; }
  .mo-home-ahegao-links b { font-size: 16px; }
}
/* 帯の明暗の交互はやめて、全部同じ地にする（段の区切りは見出しの線で十分） */
:root .mo-home-dark { background: transparent; }

/* ---- 検索ボタン：金をやめてブランド色に（金は1位の札だけ） ---- */
:root .mo-db .mo-db-global-search button, :root .mo-db .mo-home-hero form button,
:root[data-mo-theme="light"] .mo-db .mo-db-global-search button, :root[data-mo-theme="light"] .mo-db .mo-home-hero form button {
  color: var(--mo-brand-ink); background: var(--mo-brand); border-color: var(--mo-brand); font-weight: 700;
}
/* 検索ボタンが縦に折れない（375pxで「検／索」になっていた） */
:root .mo-db .mo-db-global-search button { min-width: 64px; white-space: nowrap; }
@media (max-width: 640px) {
  :root .mo-home-hero-ahegao h1 { font-size: 22px; }
}