/* デザイン案に無いページ（コラム一覧・記事・固定ページ・404）と、問い合わせの送信結果の見た目。
   色・文字・罫線はデザイン案の変数（common.css）をそのまま使う。影・グラデーション・アイコンは使わない */
[hidden] { display: none !important; }

/* 問い合わせの送信結果 */
.form-msg { margin: 0; padding: 14px 18px; border: 1px solid var(--ink); font-weight: 700; }
.form-msg.is-error { border-color: var(--red); color: var(--red); }
.btn-red[disabled] { opacity: .6; cursor: default; }

/* 文書ページ（プライバシーポリシー・利用規約・紹介制度の規約）と記事 */
.doc { padding-block: 56px 0; max-width: 760px; }
.doc-title { font-weight: 900; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.45; margin: 0 0 32px; }
.doc .post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-sub); margin: 0 0 14px; }
.doc .post-meta time { font-family: var(--latin); font-variant-numeric: tabular-nums; }
.doc .post-meta a { text-decoration: none; color: var(--red); font-weight: 700; }

.post-content { font-size: 16px; }
.post-content > :first-child { margin-top: 0; }
.post-content h2 { font-weight: 900; font-size: 22px; line-height: 1.5; margin: 48px 0 12px; padding-top: 20px; border-top: 1px solid var(--ink); }
.post-content h3 { font-weight: 900; font-size: 18px; margin: 32px 0 8px; }
.post-content h4 { font-weight: 700; font-size: 16px; margin: 24px 0 6px; }
.post-content p { margin: 0 0 1.2em; }
.post-content ul, .post-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.post-content li { margin-bottom: .4em; }
.post-content a { text-underline-offset: 4px; }

/* 記事の中の表・流れ図（website/CLAUDE.md「コラム運用ルール」） */
.post-figure { margin: 32px 0 36px; }
.post-figure-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.post-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-content table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; border-top: 1px solid var(--ink); }
.post-content th, .post-content td { border-bottom: 1px solid var(--line); padding: 12px 12px; text-align: left; vertical-align: top; }
.post-content thead th { font-size: 13px; color: var(--ink-sub); font-weight: 500; }
.post-content tbody th { font-weight: 700; white-space: nowrap; padding-left: 0; }
.post-content td { color: var(--ink-sub); }
.post-flow { list-style: none; margin: 0; padding: 0; counter-reset: flow; }
.post-flow li { counter-increment: flow; position: relative; padding: 0 0 18px 2.6em; margin: 0; }
.post-flow li::before { content: counter(flow, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--latin); font-weight: 600; font-size: 14px; color: var(--red); }
.post-flow li:not(:last-child)::after { content: ""; position: absolute; left: .55em; top: 28px; bottom: 4px; border-left: 1px solid var(--line); }
.post-flow li:last-child { padding-bottom: 0; }
.post-flow-step { display: block; font-weight: 900; }
.post-flow-desc { display: block; font-size: 14px; color: var(--ink-sub); }
@media (max-width: 600px) {
  .post-content table { font-size: 13px; }
  .post-content th, .post-content td { padding: 10px 8px; }
  .post-content tbody th { white-space: normal; min-width: 4.5em; }
}

.post-nav { display: grid; gap: 10px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.post-nav a { text-decoration: none; }
.post-nav a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.post-nav .nav-links { display: grid; gap: 10px; }

/* コラム一覧 */
.col-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; border-top: 1px solid var(--ink); padding-top: 28px; }
.col-filter a { font-size: 14px; text-decoration: none; border: 1px solid var(--line); padding: 4px 14px; border-radius: 999px; }
.col-filter a[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.col-search { display: flex; gap: 8px; max-width: 420px; margin: 0 0 12px; }
.col-search input { flex: 1; min-width: 0; font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--bg); color: var(--ink); }
.col-search button { font: inherit; font-weight: 700; padding: 8px 18px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); cursor: pointer; }
.col-status { font-size: 14px; color: var(--ink-sub); margin: 0 0 8px; }
.col-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.col-list li { border-bottom: 1px solid var(--line); }
.col-list a { display: grid; grid-template-columns: 7.5em 11em minmax(0, 1fr); gap: 20px; padding-block: 18px; text-decoration: none; }
.col-list a:hover .t { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.col-list time { font-family: var(--latin); color: var(--ink-sub); font-variant-numeric: tabular-nums; }
.col-list .c { font-size: 13px; color: var(--red); font-weight: 700; }
.col-list .t { font-weight: 700; }
@media (max-width: 860px) {
  .col-list a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; font-family: var(--latin); }
.pager .page-numbers { display: inline-block; min-width: 2.4em; text-align: center; padding: 4px 8px; border: 1px solid var(--line); text-decoration: none; }
.pager .page-numbers.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.no-posts { color: var(--ink-sub); padding-block: 40px; }

/* 404 */
.not-found { padding-block: 96px 0; }
.not-found .num { font-family: var(--latin); font-weight: 600; font-size: clamp(80px, 12vw, 140px); line-height: 1; color: var(--red); margin: 0; }
.not-found p { margin: 20px 0 0; }

/* 記事末尾の出典 */
.post-content .ref { font-size: 12.5px; color: var(--ink-sub); word-break: break-all; }

/* 書体の使い分け（2026-10-14）
   サーバーに残っている古い theme.json が h1・h2 に「Noto Serif JP」を指定していたのに、そのフォントを読み込んでおらず、
   端末任せの明朝体（Macはヒラギノ明朝、Windowsは游明朝）で出ていた。同じ大きさの見出しでも明朝とゴシックが混ざっていた。
   決まり: 大きい見出し（キャッチコピー・ページの冒頭・セクションの見出し・記事のタイトルと大見出し）は明朝体（Noto Serif JP 700）、
   本文・項目の見出し・ボタン・小さいラベルはゴシック体、英字のラベル・数字・日付は Inter Tight。 */
:root { --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); }

.hero .tagline, .top h1, .page-hero .big, .about .lede,
.sec-h, .split h2, .band h2, .belief h2, .name h2, .msg h2, .contact-in h2,
.price-big .unit, .mini-price .unit,
.doc-title, .post-content h2, .post-content:not(:has(h2)) h3 {
  font-family: var(--serif);
  font-weight: 700;
}

/* 記事の見出しの段: 大見出しを h3、小見出しを h4 で書いた記事も、h2・h3 で書いた記事と同じ見た目にする */
.post-content:not(:has(h2)) h3 { font-size: 22px; line-height: 1.5; margin: 48px 0 12px; padding-top: 20px; border-top: 1px solid var(--ink); }
.post-content:not(:has(h2)) h4 { font-weight: 900; font-size: 18px; margin: 32px 0 8px; }
/* 表の見出し行の1列目を、下の行見出しと同じ左端にそろえる */
.post-content thead th:first-child { padding-left: 0; }