@charset "UTF-8";
/* ファン選び (fanerabi.com) デザインシステム
   仕様: docs/仕様書_fanerabi.md 第5章
   制約: 写真素材・演者画像を一切使わない。タイポグラフィとカードだけで「選べる」体験を作る */

/* ---------- トークン ---------- */
:root{
  --bg:#12131A;
  --surface:#1C1E28;
  --surface-2:#232634;
  --accent:#E8B44A;
  --accent-dim:#B98D33;
  --text:#F2F3F7;
  --meta:#9AA0B4;
  --line:#333849;
  --surface-alert:#241E22;
  --line-alert:#4A3436;
  --alert:#E8807A;   /* WCAG AA: card 6.16 / bg 6.88 */

  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --fs-xs:var(--fs-sm); --fs-sm:.8125rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.125rem;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --radius:10px; --radius-lg:14px;
  --wrap:720px;
}

/* ---------- アイコン（Lucide / ISC・SVGスプライトをインライン） ---------- */
.icon{
  width:1em; height:1em; flex:none; vertical-align:-.14em;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon--lg{width:1.15em;height:1.15em}

/* ---------- ベース ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.85;
  font-feature-settings:"palt" 1;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-4)}

/* ---------- ヘッダー / フッター ---------- */
.site-header{
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:20;
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:56px}
.site-logo{display:flex;align-items:center;min-height:24px;color:var(--text);font-weight:700;font-size:var(--fs-lg);letter-spacing:.04em}
.site-logo img{display:block;height:24px;width:auto}
.site-logo span{color:var(--accent)}
.site-nav{display:flex;gap:var(--sp-4);font-size:var(--fs-sm);white-space:nowrap}
@media (max-width:420px){.site-nav{gap:var(--sp-3)}}
.site-nav a{color:var(--meta)}
.site-nav a:hover{color:var(--text);text-decoration:none}

.site-footer{border-top:1px solid var(--line);margin-top:var(--sp-8);padding-block:var(--sp-6);color:var(--meta);font-size:var(--fs-sm)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.site-footer a{color:var(--meta)}

/* ---------- 年齢・広告表記（仕様 C-6 / C-7） ---------- */
.age-notice{
  border:1px solid var(--line-alert); background:var(--surface-alert); color:var(--alert);
  border-radius:var(--radius); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); line-height:1.7; margin-block:var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-2);
}
.pr-badge{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--sp-3) var(--sp-4);
  color:var(--meta); font-size:var(--fs-sm); line-height:1.7; margin-block:var(--sp-4);
}
.pr-badge strong{color:var(--text)}
.pr-badge__label{display:flex;align-items:center;gap:var(--sp-2);color:var(--accent);font-weight:700;margin-bottom:var(--sp-2)}
.pr-badge p{margin:0}

/* ---------- 記事タイポグラフィ ---------- */
.article{padding-block:var(--sp-5) var(--sp-7)}
.article__title{font-size:var(--fs-2xl);line-height:1.45;margin:0 0 var(--sp-3);letter-spacing:.01em}
.article__meta{color:var(--meta);font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.article__lead{font-size:var(--fs-lg);line-height:1.9;color:var(--text)}

.article h2{
  font-size:var(--fs-xl); line-height:1.5; margin:var(--sp-7) 0 var(--sp-4);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--sp-2);
  scroll-margin-top:76px;
}
.article h2 .icon{color:var(--accent)}
.article h3{font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-3);color:var(--text)}
.article p{margin:0 0 var(--sp-4)}
.article .pr-badge p{margin:0}
.article strong{color:var(--accent)}
.article ul,.article ol{margin:0 0 var(--sp-4);padding-left:1.4em}
.article li{margin-bottom:var(--sp-2)}

/* ---------- 作品カード（このサイトの主役） ---------- */
.rank-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5) var(--sp-4) var(--sp-4);
  margin-block:var(--sp-5); position:relative;
  scroll-margin-top:76px; /* sticky header に順位バッジが隠れないように */
}
.rank-card__badge{
  position:absolute; top:-14px; left:var(--sp-4);
  background:var(--accent); color:#12131A;
  font-weight:700; font-size:var(--fs-sm); letter-spacing:.06em;
  padding:2px var(--sp-3); border-radius:999px;
}
.rank-card--top .rank-card__badge{box-shadow:0 0 0 4px rgba(232,180,74,.15)}
.rank-card--top{border-color:var(--accent-dim)}
.rank-card__title{font-size:var(--fs-lg);line-height:1.6;margin:var(--sp-2) 0 var(--sp-3);color:var(--text);word-break:auto-phrase}
.rank-card__specs{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4);
  border-block:1px solid var(--line); padding-block:var(--sp-3);
  margin-bottom:var(--sp-3); font-size:var(--fs-sm); color:var(--meta);
}
.rank-card__specs b{color:var(--text);font-weight:600}
.rank-card__specs > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rank-card__specs b,.rank-card__price{font-variant-numeric:tabular-nums;font-feature-settings:"palt" 0}
.rank-card__specs .icon{color:var(--meta)}
.rank-card__price .icon{color:var(--accent)}
.rank-card__price{color:var(--accent);font-weight:700;font-size:var(--fs-base)}
.rank-card__unit-price b{font-size:var(--fs-base)}
.rank-card__points{margin:0 0 var(--sp-4);padding-left:1.2em;font-size:var(--fs-sm);color:var(--text)}
.rank-card__points li{margin-bottom:var(--sp-1)}
.cta-btn{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  text-align:center; background:var(--accent); color:#12131A;
  font-weight:700; border-radius:var(--radius); padding:var(--sp-3) var(--sp-4);
  letter-spacing:.02em;
}
.cta-btn:hover{background:var(--accent-dim);text-decoration:none}
.cta-note{text-align:center;color:var(--meta);font-size:var(--fs-xs);margin-top:var(--sp-2)}

/* ---------- ジャンル一覧 ---------- */
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3);margin-block:var(--sp-5);padding:0;list-style:none}
.genre-grid a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); color:var(--text);
}
.genre-grid a:hover{border-color:var(--accent-dim);text-decoration:none}
.genre-grid__empty{grid-column:1/-1;color:var(--meta);font-size:var(--fs-sm);padding:var(--sp-3) 0}
.genre-grid .count{display:block;color:var(--meta);font-size:var(--fs-xs);margin-top:2px}
.genre-grid .icon{color:var(--meta);opacity:.6}

/* ---------- 囲み ---------- */
.box-point,.box-caution{border-radius:var(--radius);padding:var(--sp-4);margin-block:var(--sp-5);font-size:var(--fs-sm);line-height:1.85}
.box-point{background:var(--surface-2);border:1px solid var(--line)}
.box-caution{background:var(--surface-alert);border:1px solid var(--line-alert)}
.box-point__label,.box-caution__label{display:flex;align-items:center;gap:var(--sp-2);font-weight:700;margin-bottom:var(--sp-2);letter-spacing:.04em}
.box-point__label{color:var(--accent)}
.box-caution__label{color:var(--alert)}
.box-point p:last-child,.box-caution p:last-child{margin-bottom:0}

/* ---------- 早見表（リード直後・各行から作品カードへ） ---------- */
.quick-table{
  width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0;
  margin-block:var(--sp-5); font-size:var(--fs-sm); line-height:1.7;
  font-variant-numeric:tabular-nums; font-feature-settings:"palt" 0;
}
.quick-table caption{text-align:left;padding-bottom:var(--sp-2)}
.quick-table__title{display:block;color:var(--text);font-size:var(--fs-base);font-weight:700}
.quick-table__note{display:block;color:var(--meta);font-size:var(--fs-sm);font-weight:400}
.quick-table__rank{width:15%}
.quick-table__duration{width:29%}
.quick-table__price{width:29%}
.quick-table__unit{width:27%}
.quick-table th,.quick-table td{padding:var(--sp-2);border-bottom:1px solid var(--line);white-space:nowrap}
.quick-table thead th{background:var(--surface-2);color:var(--meta);font-weight:600;text-align:right}
.quick-table th:first-child,.quick-table td:first-child{text-align:left}
.quick-table tbody tr{position:relative;background:var(--surface)}
.quick-table tbody tr:hover,.quick-table tbody tr:focus-within{background:var(--surface-2)}
.quick-table td{text-align:right;font-size:var(--fs-base)}
.quick-table td.num{color:var(--accent);font-weight:600}
.quick-table__link{display:inline-block;min-height:24px;line-height:24px;font-weight:700;text-decoration:underline;text-underline-offset:.2em}
/* 行内のリンクは1つ。表の見出し構造を保ったまま行全体をタップできる。 */
.quick-table__link::after{content:"";position:absolute;inset:0}
.quick-table__link:focus-visible{outline:none}
.quick-table__link:focus-visible::after{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- 比較テーブル ---------- */
.table-scroll{overflow-x:auto;margin-block:var(--sp-5);-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:420px}
.compare-table th,.compare-table td{border:1px solid var(--line);padding:var(--sp-2) var(--sp-3);text-align:left;white-space:nowrap}
.compare-table thead th{background:var(--surface-2);color:var(--meta);font-weight:600}
.compare-table td.num{text-align:right;color:var(--accent);font-weight:600}

/* ---------- FAQ ---------- */
.faq{margin-block:var(--sp-5)}
.faq__q{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);font-weight:700;margin-bottom:var(--sp-2);display:flex;gap:var(--sp-2);align-items:flex-start}
.faq__q .icon{color:var(--accent);margin-top:.25em}
.faq__a{padding:0 var(--sp-4) var(--sp-4);font-size:var(--fs-sm);color:var(--text)}

/* ---------- パンくず・関連 ---------- */
.breadcrumb{font-size:var(--fs-xs);color:var(--meta);padding-top:var(--sp-4);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.breadcrumb a{color:var(--meta)}
.breadcrumb .icon{width:.85em;height:.85em;opacity:.7}
.related-links{background:var(--surface);border-radius:var(--radius-lg);padding:var(--sp-4);margin-block:var(--sp-6)}
.related-links h2{font-size:var(--fs-base);margin:0 0 var(--sp-3);border:0;padding:0}
.related-links ul{margin:0;padding-left:1.2em;font-size:var(--fs-sm)}

/* ---------- トップ ---------- */
.hero{padding-block:var(--sp-7) var(--sp-5);border-bottom:1px solid var(--line)}
.hero h1{font-size:var(--fs-2xl);line-height:1.5;margin:0 0 var(--sp-3)}
.hero p{color:var(--meta);margin:0}
.section-title{font-size:var(--fs-xl);margin:var(--sp-7) 0 var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-2)}
.section-title .icon{color:var(--accent)}
.post-list{list-style:none;padding:0;margin:0}
.post-list li{border-bottom:1px solid var(--line);padding-block:var(--sp-4)}
.post-list a{color:var(--text);font-size:var(--fs-base);line-height:1.6}
.post-list .date{display:block;color:var(--meta);font-size:var(--fs-xs);margin-top:var(--sp-1)}

/* ---------- PC ---------- */
@media (min-width:768px){
  :root{--fs-2xl:2rem;--fs-xl:1.5rem}
  .article__title{letter-spacing:.02em}
  .rank-card{padding:var(--sp-5)}
}

/* 文節折り（Chromium）。本文・囲みの語が行またぎで割れるのを防ぐ。非対応ブラウザでは無視される */
.article p,.box-point p,.box-caution p,.faq__a,.article li,.rank-card__points li{word-break:auto-phrase}
.nb{white-space:nowrap}

/* ---------- PRラベル（ステマ規制の最小表示。箱にしない） ---------- */
.ad-label{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid var(--line);border-radius:999px;color:var(--meta);font-size:var(--fs-sm);line-height:1;text-decoration:none}
.ad-label:hover{color:var(--text);text-decoration:none}

/* ---------- サンプル動画（作者のX投稿の公式埋め込み／公式素材へのリンク） ---------- */
.sample{margin:var(--sp-3) 0 var(--sp-4)}
.sample--x{min-height:220px;background:var(--surface-2);border-radius:var(--radius);overflow:hidden}
.sample--x .twitter-tweet{margin:0 auto!important}
.sample--img{position:relative;display:block;background:var(--surface-2);border-radius:var(--radius);overflow:hidden}
.sample--img img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain} /* トリミングしない（リツイート事件の氏名表示権の論点を避ける） */
.sample__play{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);pointer-events:none}
.sample__play .icon{width:56px;height:56px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.65))}
.sample--img:hover .sample__play{color:#F2F3F7}
.sample--link a{display:flex;align-items:center;gap:var(--sp-2);color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.sample--link .icon{color:var(--accent)}