/* ガイド（記事）の型 v2 — 2026-11-14
   Ry「デザインごと1から変更」「タイトルはもっと小さく記事として」
     「記事は世界観も大事だけど見やすさとかが大事だから一般的な記事のUI」
     「さまざまなブロックのフォーマットを作って、それを組み合わせて記事を作る」
   見やすさを先に: 見出しはゴシック 500 で段差をはっきり。角丸・影は使わない。
   値は renovy-tokens.css の変数で書く。 */
.ga { background: var(--bg); color: var(--body); font-family: var(--jp); -webkit-text-size-adjust: 100%; }
.ga-wrap { width: min(680px, 100% - 40px); margin-inline: auto; }

/* ── 記事の頭 ── */
.ga-head { padding-top: 88px; }
.ga-crumb { font-size: 12px; line-height: 1.8; color: var(--ink-faint); }
.ga-crumb a { color: inherit; text-decoration: none; }
.ga-crumb span { margin: 0 .4em; }
.ga-label { display: inline-block; margin-top: 24px; padding: 3px 10px; background: var(--ink); color: var(--bg); font-size: 12px; letter-spacing: .06em; }
.ga-title { margin: 14px 0 0; font-weight: 500; font-size: 22px; line-height: 1.55; letter-spacing: .02em; color: var(--ink); }
.ga-date { margin-top: 12px; font-size: 13px; color: var(--ink-faint); }
.ga-lead { margin-top: 24px; font-size: 16px; line-height: 1.95; }
.ga-photo { margin: 32px 0 0; }
.ga-photo img { display: block; width: 100%; height: auto; }
.ga-photo figcaption { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* ── 目次（地の色の面） ── */
.ga-toc { margin-top: 40px; padding: 24px 24px 20px; background: var(--bg-soft); }
.ga-toc-label { display: block; font-weight: 500; font-size: 15px; color: var(--ink); }
.ga-toc ol { list-style: none; margin: 12px 0 0; padding: 0; }
.ga-toc a { display: flex; gap: 10px; padding: 7px 0; font-size: 15px; line-height: 1.7; color: var(--ink); text-decoration: none; }
.ga-toc a i { font-style: normal; color: var(--ink-faint); min-width: 1.4em; }

/* ── 本文 ── */
.ga-body { padding-bottom: 72px; }
.ga-sec { margin-top: 64px; scroll-margin-top: 80px; }
.ga-num { display: none; }
.ga-h2 { margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-weight: 500; font-size: 20px; line-height: 1.6; color: var(--ink); }
.ga-h3 { margin: 32px 0 0; padding-left: 12px; border-left: 3px solid var(--ink); font-weight: 500; font-size: 17px; line-height: 1.6; color: var(--ink); }
.ga-sec p { margin: 20px 0 0; font-size: 16px; line-height: 1.95; }
.ga-sec p a, .ga-sum a { color: var(--ink); text-underline-offset: 3px; }
.ga-sec .ga-photo { margin-top: 28px; }

/* ── まとめ ── */
.ga-sum { margin-top: 64px; padding: 24px; background: var(--bg-soft); }
.ga-sum .ga-h2 { border: 0; padding: 0; font-size: 17px; }
.ga-sum ul { margin: 12px 0 0; padding-left: 1.2em; }
.ga-sum li { font-size: 15px; line-height: 1.9; }

/* ── 相談 ── */
.ga-cta { padding: 56px 0; background: var(--bg-soft); text-align: center; }
.ga-cta-h { margin: 0; font-weight: 500; font-size: 18px; line-height: 1.7; color: var(--ink); }
.ga-cta p { margin: 12px 0 0; font-size: 15px; line-height: 1.9; }
.ga-btn { display: flex; justify-content: center; align-items: center; margin: 24px auto 0; max-width: 340px; padding: 17px 24px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; letter-spacing: .04em; text-decoration: none; }
.ga-btn span { display: block; text-align: center; }

/* ── 関連・監修 ── */
.ga-foot { padding: 56px 0 88px; }
.ga-foot h2 { margin: 0; font-weight: 500; font-size: 16px; color: var(--ink); }
.ga-foot ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ga-foot li a { display: block; padding: 14px 1.4em 14px 0; border-bottom: 1px solid var(--line); position: relative; font-size: 15px; line-height: 1.7; color: var(--ink); text-decoration: none; }
.ga-foot li a::after { content: "›"; position: absolute; right: 4px; top: 13px; color: var(--ink-faint); }
.ga-credit { margin-top: 32px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.ga-credit a { color: inherit; }

/* ── ブロック（記事はこの組み合わせで作る。見本 /preview-ai/guide/_blocks/） ── */
/* 写真 2 枚 */
.gb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
.gb-duo figure { margin: 0; }
.gb-duo img { display: block; width: 100%; height: auto; }
.gb-duo figcaption { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
/* 手順 */
.gb-steps { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: gbstep; }
.gb-steps li { counter-increment: gbstep; position: relative; padding: 0 0 24px 48px; }
.gb-steps li::before { content: counter(gbstep); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; background: var(--ink); color: var(--bg); font-size: 14px; line-height: 30px; text-align: center; }
.gb-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 38px; bottom: 6px; width: 2px; background: var(--line); }
.gb-steps b { display: block; font-weight: 500; font-size: 16px; line-height: 1.7; color: var(--ink); }
.gb-steps span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.9; }
/* 要点 */
.gb-points { margin: 20px 0 0; padding: 20px 24px; background: var(--bg-soft); list-style: none; }
.gb-points li { position: relative; padding: 6px 0 6px 1.5em; font-size: 15px; line-height: 1.85; }
.gb-points li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--ink); }
/* ポイント・補足の面 */
.gb-note { margin-top: 28px; padding: 20px 24px; background: var(--bg-soft); border-left: 3px solid var(--ink); }
.gb-note b { display: block; font-weight: 500; font-size: 15px; color: var(--ink); }
.gb-note p, .ga-sec .gb-note p { margin: 8px 0 0; font-size: 15px; line-height: 1.85; }
/* 表 */
.gb-scroll { margin-top: 28px; overflow-x: auto; }
.gb-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.gb-table th, .gb-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gb-table thead th { background: var(--ink); color: var(--bg); font-weight: 500; }
.gb-table tbody th { background: var(--bg-soft); font-weight: 500; color: var(--ink); white-space: nowrap; }
/* 一言（強調したい一文） */
.gb-quote { margin: 32px 0 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--line); font-weight: 500; font-size: 17px; line-height: 1.9; color: var(--ink); }
/* よくある質問 */
.gb-faq { margin-top: 24px; }
.gb-faq details { border-bottom: 1px solid var(--line); }
.gb-faq details:first-child { border-top: 1px solid var(--line); }
.gb-faq summary { list-style: none; cursor: pointer; position: relative; padding: 18px 2em 18px 2em; font-weight: 500; font-size: 15px; line-height: 1.8; color: var(--ink); }
.gb-faq summary::-webkit-details-marker { display: none; }
.gb-faq summary::before { content: "Q"; position: absolute; left: 0; top: 18px; font-weight: 500; color: var(--ink); }
.gb-faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 18px; color: var(--ink-soft); }
.gb-faq details[open] summary::after { content: "−"; }
.gb-faq details p, .ga-sec .gb-faq details p { position: relative; margin: 0; padding: 0 0 20px 2em; font-size: 15px; line-height: 1.9; }
.gb-faq details p::before { content: "A"; position: absolute; left: 0; top: 0; font-weight: 500; color: var(--ink-faint); }

@media (min-width: 768px) {
  .ga-head { padding-top: 120px; }
  .ga-title { font-size: 28px; }
  .ga-h2 { font-size: 22px; }
  .ga-sec { margin-top: 80px; }
  .gb-duo { gap: 16px; }
  .ga-cta { padding: 80px 0; }
  .ga-cta-h { font-size: 20px; }
}

/* ── 上品さを添える（試し・2026-11-14 Ry「このUIのまま少しだけ上品さを添えて」） ── */
.ga { color: var(--body); letter-spacing: .03em; }
.ga-label { background: none; color: var(--ink-soft); padding: 0; font-family: var(--label); font-size: 13px; letter-spacing: .16em; }
.ga-label::before { content: ""; display: inline-block; width: 24px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--ink-soft); }
.ga-title { font-family: var(--serif); font-weight: 500; letter-spacing: .05em; line-height: 1.7; }
.ga-date { font-family: var(--label); letter-spacing: .08em; }
.ga-lead { color: var(--ink-soft); line-height: 2.05; }
.ga-photo figcaption { font-size: 12px; letter-spacing: .04em; }
.ga-toc { padding: 28px 28px 24px; }
.ga-toc-label { font-weight: 400; font-size: 13px; letter-spacing: .1em; color: var(--ink-soft); }
.ga-toc-label::before { content: "contents"; margin-right: 12px; font-family: var(--label); letter-spacing: .16em; color: var(--ink-faint); }
.ga-toc a i { font-family: var(--serif); color: var(--ink-faint); }
.ga-sec { margin-top: 80px; }
.ga-num { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 15px; letter-spacing: .12em; color: var(--ink-faint); }
.ga-h2 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); letter-spacing: .05em; }
.ga-sec p { line-height: 2.05; }
.gb-steps li { padding-left: 52px; }
.gb-steps li::before { width: auto; height: auto; background: none; color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.4; content: counter(gbstep, decimal-leading-zero); }
.gb-steps li:not(:last-child)::after { left: 12px; top: 40px; width: 1px; }
.gb-points { background: none; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gb-points li::before { content: ""; top: 1.5em; width: .8em; height: 1px; background: var(--ink-soft); }
.gb-note { border-left: 0; padding: 24px 28px; }
.gb-note b { font-family: var(--serif); font-weight: 500; letter-spacing: .05em; }
.gb-table thead th { background: var(--bg-soft); color: var(--ink-soft); font-size: 13px; }
.gb-table tbody th { background: none; }
.gb-quote { border-left: 0; padding: 0; font-family: var(--serif); font-size: 19px; line-height: 2; letter-spacing: .06em; }
.gb-faq summary::before, .gb-faq details p::before { font-family: var(--serif); font-size: 17px; }
.ga-sum .ga-num { display: none; }
.ga-sum .ga-h2 { font-family: var(--serif); letter-spacing: .06em; }
.ga-cta-h { font-family: var(--serif); letter-spacing: .06em; }
.ga-foot h2 { font-family: var(--serif); letter-spacing: .06em; }
@media (min-width: 768px) { .ga-sec { margin-top: 96px; } .gb-quote { font-size: 21px; } }

/* ボタンの文字が黒地に黒で消えていた（header.css の a:link{color:inherit} が勝っていた）2026-11-14 */
.ga a.ga-btn, .ga a.ga-btn:link, .ga a.ga-btn:visited, .ga a.ga-btn:hover { color: var(--bg); }
/* 写真は横長にそろえる（Ry 2026-11-14「基本的に画像は横長の写真にしよう」） */
.ga-photo img, .gb-duo img { aspect-ratio: 3 / 2; object-fit: cover; }
/* 強調の一文は淡い背景のブロックに（Ry 2026-11-14「少しだけ背景つけてブロック化」） */
.ga .gb-quote { margin: 40px 0 0; padding: 36px 24px; background: var(--bg-soft); text-align: center; font-size: 18px; line-height: 2; }
@media (min-width: 768px) { .ga .gb-quote { padding: 48px 40px; font-size: 20px; } }
.ga .gb-quote { padding: 32px 16px; font-size: min(16px, 4.2vw); letter-spacing: .03em; }
.gb-quote span { display: block; white-space: nowrap; }
@media (min-width: 768px) { .ga .gb-quote { padding: 48px 40px; font-size: 20px; } }
/* 補足の面の見出しを囲んでタイトルらしく（Ry 2026-11-14「囲ったりしてタイトル感つけた方が」） */
.ga .gb-note b { display: inline-block; padding: 5px 14px; border: 1px solid var(--ink); background: var(--bg); font-family: var(--jp); font-weight: 500; font-size: 14px; line-height: 1.6; letter-spacing: .04em; }
.ga .gb-note p:first-of-type { margin-top: 16px; }
/* 棒グラフ（数値の幅を横棒で） */
.gb-bars { margin-top: 32px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gb-bars-title { margin: 0 0 16px !important; font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--ink); }
.gb-bar { display: grid; grid-template-columns: 7.5em 1fr 5.5em; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.gb-bar-name { color: var(--ink); }
.gb-bar-track { position: relative; height: 8px; background: var(--bg-soft); }
.gb-bar-track i { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.gb-bar-val { text-align: right; font-family: var(--serif); color: var(--ink-soft); white-space: nowrap; }
.gb-bars-note { margin: 12px 0 0 !important; font-size: 13px !important; line-height: 1.8 !important; color: var(--ink-soft); }
/* 選び方の一覧（重視すること → 向くもの） */
.gb-choices { margin-top: 28px; border-top: 1px solid var(--line); }
.gb-choice { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.gb-choice b { font-weight: 500; color: var(--ink); text-align: right; }
.gb-choice b::before { content: "→ "; color: var(--ink-faint); }
/* 良い点・気になる点 */
.gb-proscons { display: grid; gap: 16px; margin-top: 28px; }
.gb-proscons > div { padding: 20px 24px; background: var(--bg-soft); }
.gb-proscons b { display: block; font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--ink); }
.gb-proscons ul { margin: 10px 0 0; padding-left: 1.2em; }
.gb-proscons li { font-size: 15px; line-height: 1.9; }
/* 文字のリンク */
.gb-more { margin-top: 24px !important; }
.gb-more a { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }
.gb-more a::after { content: " →"; }
@media (min-width: 768px) { .gb-proscons { grid-template-columns: 1fr 1fr; } }
.ga-credit p { margin: 0 0 6px; }
/* 図（元のページの SVG をそのまま置く） */
.gb-svg { margin: 28px 0 0; }
.gb-svg svg { display: block; width: 100%; height: auto; }
.gb-svg figcaption { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
/* 表はスマホの幅に収めて折り返す（横に動かさないと読めなかった・2026-11-14） */
.gb-table { min-width: 0; table-layout: auto; }
.gb-table th, .gb-table td { padding: 12px 8px; word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) { .gb-table { font-size: 13px; } .gb-table tbody th { white-space: normal; min-width: 4.5em; } }