/* 解説ページ（/guide/）用の追加 CSS。LP の style.css を先に読み込んだうえで重ねる。
   色は FP3（--green）と FP2（--blue）のどちらでも動くようフォールバックを付けている。 */
.guide-header { background: var(--green-deep, var(--blue-deep, #0A652F)); color: #fff; padding: 12px 0; }
.guide-header .container { display: flex; align-items: center; }
.guide-header .hero-app-name { margin-bottom: 0; color: #fff; text-decoration: none; } /* ピルの見た目は LP の .hero-app-name をそのまま使う */
.guide-main { max-width: 760px; margin: 0 auto; padding: 24px 24px 56px; }
.guide-crumbs { font-size: .85rem; color: var(--muted, #8a7a68); margin-bottom: 16px; }
.guide-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; }
.guide-crumbs li + li::before { content: "›"; margin-right: 8px; }
.guide-crumbs a { color: inherit; }
.guide-article h1 { font-size: 1.7rem; line-height: 1.4; margin: 0 0 12px; }
.guide-article h2 { font-size: 1.3rem; line-height: 1.5; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--green, var(--blue, #1B944A)); }
.guide-article h3 { font-size: 1.1rem; margin: 28px 0 8px; }
.guide-article p, .guide-article ul, .guide-article ol { margin: 0 0 16px; }
.guide-article ul, .guide-article ol { padding-left: 1.4em; }
.guide-article a { color: var(--green-deep, var(--blue, #0A652F)); }
.guide-article table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .95rem; background: var(--white, #fff); }
.guide-article th, .guide-article td { border: 1px solid var(--line, #e7dcc4); padding: 8px 10px; text-align: left; vertical-align: top; }
.guide-article th { background: var(--line-soft, #f0e8d6); }
.guide-meta { font-size: .85rem; color: var(--text-light, #6B5B4A); margin: 0 0 24px; }
.guide-meta span + span { margin-left: 16px; }
.guide-article h1, .guide-article h2, .guide-article h3 { text-wrap: balance; }
.guide-meta time { white-space: nowrap; }
/* 末尾の CTA は LP の section.cta（style.css）をそのまま使う。足すのは紹介ページへのリンクの色だけ */
.cta .guide-lp-link { margin: 28px 0 0; font-size: .95rem; }
.cta .guide-lp-link a { color: #fff; text-decoration: underline; }
/* フッタ：LP は .footer-copy を不透明度 .5 にしているが、解説ページは「運営：」のリンクを置くので読める濃さにする */
.footer .footer-copy { opacity: 1; color: rgba(255,255,255,.78); }
.footer .footer-copy a { color: rgba(255,255,255,.92); text-decoration: underline; }
/* ノート画像（原稿の単独行の画像記法）。縦長なので幅を絞って中央に置く */
.guide-article figure { margin: 0 auto 20px; max-width: 400px; }
.guide-article figure img { display: block; width: 100%; height: auto; }