@charset "UTF-8";

/* =========================================
 * 履歴書EX 読み物（コラムの記事・記事一覧）と、読み物・静的ページ共通のヘッダーのナビ
 * 生成元：tools/skins/07（node tools/skins/build.mjs 07）。
 * 配色トークン（--primary / --accent / --sidebar-bg / --sidebar-text / --bg-main / --card-bg /
 * --border / --text-main / --text-muted）は style.css の :root を共用する。
 * 数値は既存CSS（style.css・static.css）の段から選ぶ：
 *   文字 12/12.5/13/13.5/14/15/18/20/26px・角丸 6/8px・罫線 1px var(--border)・見出しの左線 4px。
 * インラインstyle禁止。
 * ========================================= */

/* ページの長短でスクロールバーの有無が変わり、本文が左右にずれるのを防ぐ */
html { scrollbar-gutter: stable; }

/* ---------- ヘッダーのナビ（静的ページのヘッダーに「コラム」を足す） ---------- */
body.static .site-header__inner { gap: 12px; }
.site-nav { display: flex; gap: 16px; margin-left: auto; font-size: 13.5px; font-weight: 600; }
.site-nav a { color: var(--text-main); text-decoration: none; }
.site-nav a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- 記事一覧（/column/） ---------- */
.aidx__group { margin: 0 0 28px; }
.aidx__group:last-child { margin-bottom: 0; }
.aidx__h { font-size: 15px; color: var(--text-main); border-left: 4px solid var(--text-main); padding-left: 12px; margin: 0 0 12px; line-height: 1.5; }
.aidx__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aidx__list a { display: block; padding: 12px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; }
.aidx__list a:hover { border-color: var(--primary); background: var(--bg-main); }
.aidx__list b { display: block; font-size: 15px; font-weight: 600; color: var(--primary); line-height: 1.6; }
.aidx__list span { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.6; }
.aidx__home { margin: 28px 0 0; text-align: center; font-size: 14px; }
.aidx__home a { color: var(--primary); font-weight: 600; text-decoration: underline; }

/* ---------- 記事 ---------- */
.post { max-width: 860px; margin: 0 auto; }
.post__head { margin: 16px 0 20px; }
.post__h1 { font-size: 26px; color: var(--text-main); line-height: 1.5; margin: 0 0 12px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-muted); margin: 0; }
.post__meta a { color: var(--primary); text-decoration: underline; }
/* アイキャッチ（@meta の IMAGE_ALT がある記事だけ）。幅は記事いっぱい・高さは width/height 属性の比率に従う。 */
.post__eye { margin: 0 0 20px; }
.post__eye img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
.post__lead { font-size: 15px; line-height: 1.9; color: var(--text-main); margin: 0 0 20px; }
.post__answer { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 16px 20px; margin: 0 0 20px; }
.post__answer-h { font-weight: 700; color: var(--text-main); font-size: 14px; margin: 0 0 6px; }
.post__answer p:last-child { font-size: 14px; line-height: 1.8; color: var(--text-main); margin: 0; }
.post__toc { background: var(--bg-main); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 0 0 24px; }
.post__toc-h { font-weight: 700; font-size: 14px; margin: 0 0 6px; color: var(--text-main); }
.post__toc ol { margin: 0; padding-left: 1.4em; font-size: 13.5px; line-height: 1.9; }
.post__toc a { color: var(--primary); text-decoration: underline; }

.post__body { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 28px 26px; margin: 0 0 24px; font-size: 15px; line-height: 1.9; color: var(--text-main); }
.post__body h2 { font-size: 18px; color: var(--text-main); border-left: 4px solid var(--text-main); padding: 2px 0 2px 12px; margin: 40px 0 16px; line-height: 1.5; scroll-margin-top: 80px; }
.post__body h2:first-child { margin-top: 0; }
.post__body h3 { font-size: 15px; color: var(--text-main); margin: 24px 0 8px; }
.post__body p { margin: 0 0 16px; }
.post__body ul, .post__body ol { margin: 0 0 16px; padding-left: 1.4em; }
.post__body li { margin: 0 0 6px; }
.post__body strong { font-weight: 700; color: var(--text-main); }
.post__body a { color: var(--primary); text-decoration: underline; }

/* 表：狭い画面では枠の中で横に送る（ページごと横にずらさない） */
.tbl { overflow-x: auto; margin: 0 0 16px; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.7; }
.tbl th, .tbl td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
.tbl th { background: var(--bg-main); font-weight: 700; white-space: nowrap; }

/* 記入例・例文（原稿の改行と字下げをそのまま見せ、長い行は折り返す） */
.post__body pre.ex { background: var(--bg-main); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; margin: 0 0 16px; font-family: inherit; font-size: 14px; line-height: 1.8; color: var(--text-main); white-space: pre-wrap; overflow-wrap: anywhere; }

/* よくある質問（画面と FAQPage は同じデータから生成） */
.faqs { margin: 0 0 24px; }
.faqs__h { font-size: 18px; color: var(--text-main); margin: 0 0 12px; }
.faqs__item { border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); margin: 0 0 8px; }
.faqs__item summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--text-main); list-style: none; line-height: 1.7; }
.faqs__item summary::-webkit-details-marker { display: none; }
.faqs__item summary::before { content: "Q. "; color: var(--primary); }
.faqs__a { padding: 0 16px 16px; font-size: 14px; color: var(--text-main); line-height: 1.8; }
.faqs__a a { color: var(--primary); text-decoration: underline; }

/* 記事末 */
.post__cta { background: var(--sidebar-bg); border-radius: 8px; padding: 24px 20px; text-align: center; margin: 0 0 24px; }
.post__cta-h { font-weight: 700; font-size: 18px; color: #fff; margin: 0 0 8px; line-height: 1.5; }
.post__cta p { font-size: 13.5px; margin: 0 0 16px; color: var(--sidebar-text); line-height: 1.8; }
.post__cta-btn { display: inline-block; background: var(--primary); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 6px; }
.post__cta-btn:hover { background: var(--primary-hover); }
.post__rel { margin: 0 0 24px; }
.post__rel-h { font-weight: 700; font-size: 15px; color: var(--text-main); margin: 0 0 12px; }
.post__rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.post__rel a { display: block; padding: 12px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.post__rel a:hover { border-color: var(--primary); background: var(--bg-main); }
.post__rel a span { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.post__sources { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; }
.post__sources-h { font-weight: 700; margin: 0 0 4px; }
.post__sources ul { margin: 0; padding-left: 1.4em; }
.post__sources a { color: var(--primary); text-decoration: underline; }
.post__pub { font-size: 12px; color: var(--text-muted); line-height: 1.8; }
.post__pub p { margin: 0 0 6px; }
.post__pub a { color: var(--primary); text-decoration: underline; }

@media (max-width: 560px) {
  body.static .site-header__inner { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; margin-left: 0; font-size: 13px; }
  .post__h1 { font-size: 20px; }
  .post__body { padding: 20px 16px; font-size: 14px; }
  .post__body h2 { font-size: 18px; }
}