/* ============================================================================
   column.css — shikanoba.jp/column/ だけで使う追加分（2026-10-10 ビーグル）
   見た目の正本は LP と同じ styles.css / refinements.css / v3.css / site.css。
   ここには「読み物として読みやすくする」ための最小限だけを書く。色は LP の変数を使う。
   ============================================================================ */

/* パンくず（LP の .breadcrumb は1つのリンク用なので、列にした形をここで足す） */
.crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; color: var(--muted); }
.crumbs li { display: inline; }
.crumbs li + li:before { content: '/'; margin: 0 8px; color: #9fb3c6; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

/* 記事 */
.column-article h1 { margin: 14px 0 10px; }
.column-article .meta { margin-bottom: 26px; }
.column-lead { font-size: 17px; }
/* 見出し（H2・H3）は下の「案B マーク＋2色の下線」（2026-10-23 オーナー決定）で決める */
.column-body ul, .column-body ol { padding-left: 1.4em; margin: 0 0 22px; }
.column-body li { margin-bottom: 6px; }
.column-body a { overflow-wrap: anywhere; }
.column-body strong { color: var(--navy); }

/* 目次 */
.column-toc { margin: 26px 0 8px; padding: 22px 26px; background: #f3f9ff; border: 1px solid var(--line); border-radius: 16px; }
.column-toc p { margin: 0 0 8px; font-weight: 700; color: var(--navy); font-size: 14px; }
.column-toc ol { margin: 0; padding-left: 1.4em; font-size: 15px; }
.column-toc li { margin: 4px 0; }
.column-toc a { text-decoration: none; }
.column-toc a:hover { text-decoration: underline; }

/* 表（列が多い表はスマホで横に送る。ページ全体は横に動かさない） */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }
.table-scroll table { margin: 0; table-layout: auto; min-width: 100%; }
.table-scroll th, .table-scroll td { padding: 10px 12px; }
.table-scroll td:first-child, .table-scroll td.num { white-space: nowrap; }
/* 数字・日付を折り返さない分、ほかの文字の列が1字幅に潰れないよう最低幅を持たせる（狭い画面では表の中で横に送る） */
.table-scroll th, .table-scroll td:not(.num):not(:first-child) { min-width: 6.5em; }
.table-scroll th.num { min-width: 5em; }
.table-scroll td a { white-space: nowrap; }
.nowrap { white-space: nowrap; }
@media (max-width: 760px) { .table-scroll th, .table-scroll td { padding: 8px 8px; font-size: 13px; } }
.table-scroll td.num, .table-scroll th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 注意書きの枠（> で書いたもの） */
.column-note { margin: 22px 0; padding: 16px 20px; background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 12px; font-size: 15px; }
.column-note p { margin: 0 0 6px; }
.column-note p:last-child { margin-bottom: 0; }

/* 途中の案内（1回だけ・枠や色で目立たせない） */
.column-mid-note { margin: 26px 0; font-size: 14px; color: var(--muted); }
.column-mid-note a { color: var(--muted); }

/* 確かめた日・次の見直し */
.column-checked { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* 最後の CTA */
.column-cta .wrap { max-width: 920px; }
.column-cta .bridge { font-size: 16px; margin-bottom: 26px; }
.column-cta-grid { display: grid; grid-template-columns: 1fr 240px; gap: 40px; align-items: center; text-align: left; margin: 10px auto 18px; }
.column-cta-points { list-style: none; padding: 0; margin: 0; counter-reset: pt; }
.column-cta-points li { counter-increment: pt; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #cde1ef; font-size: 15px; }
.column-cta-points li:before { content: '0' counter(pt); font-weight: 700; color: var(--blue); }
.column-cta .phone { width: 220px; height: auto; }
.column-cta figcaption { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; }
.column-cta .share-cta-note { text-align: center; }
.column-cta-icon { display: block; width: 72px; height: 72px; border-radius: 16px; margin: 0 auto 14px; box-shadow: 0 6px 18px rgba(10,40,80,.14); }
.column-cta-points-solo { max-width: 640px; margin: 10px auto 22px; text-align: left; }

/* 一覧 */
.column-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; max-width: 860px; }
.column-list li { margin: 0; }
.column-list a.column-card { display: block; padding: 26px 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); }
.column-list a.column-card:hover { border-color: #9cc9ee; }
.column-card .tags { margin-bottom: 10px; }
.column-card h2 { font-size: 21px; margin: 0 0 8px; }
.column-card p { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.column-card .meta { margin: 0; }
.column-back { margin-top: 26px; font-size: 14px; }

@media (max-width: 760px) {
  .column-lead { font-size: 16px; }
  .column-toc { padding: 18px 18px; }
  .column-cta-grid { grid-template-columns: 1fr; gap: 24px; }
  .column-cta .phone { width: 200px; }
  .column-list a.column-card { padding: 20px; }
  .column-card h2 { font-size: 18px; }
}

/* =========================================================
   見出し 案B「マーク＋2色の下線」 2026-10-23 オーナー決定（意思決定ログ 23:01）
   見本：_作業記録/20261023_SEOブログ計画/見本_見出しとH2画像/見出し/案B_マークと下線.css をそのまま
   マーク：/assets/logo-small.png（今あるアプリのアイコン）
   効く範囲：.column-body の直下の h2・h3 だけ
   ========================================================= */
.column-body > h2{
  position:relative;
  margin:58px 0 22px;
  padding:0 0 12px 46px;
  min-height:34px;
  background:
    linear-gradient(var(--blue),var(--blue)) left bottom / 72px 3px no-repeat,
    linear-gradient(var(--line),var(--line)) left bottom / 100% 1px no-repeat;
  color:var(--navy);
  font-size:23px;line-height:1.5;
  text-wrap:pretty;
  scroll-margin-top:24px;
}
.column-body > h2::before{
  content:"";position:absolute;left:0;top:.1em;width:34px;height:34px;border-radius:9px;
  background:url("/assets/logo-small.png") center / cover no-repeat;
  box-shadow:0 3px 10px rgba(7,53,104,.14);
}
.column-body > h3{
  margin:34px 0 12px;
  padding:2px 0 2px 14px;
  border-left:3px solid var(--blue);
  color:var(--navy);
  font-size:19px;line-height:1.55;
  text-wrap:pretty;
}
@media (max-width:760px){
  .column-body > h2{font-size:20px;padding-left:40px;margin-top:46px}
  .column-body > h2::before{width:30px;height:30px;border-radius:8px}
  .column-body > h3{font-size:17px}
}

/* H2 の直後の図（2026-10-23 案A：フラットな図解・文字と数字なし。1200×600 WebP・遅延読み込み） */
.column-h2-figure{margin:0 0 24px}
.column-h2-figure img{display:block;width:100%;height:auto;aspect-ratio:2/1;border-radius:14px;background:#eef8ff;border:1px solid var(--line)}

/* サムネイル（記事の頭・一覧のカード。1200×630） */
.column-thumb{margin:6px 0 26px}
.column-thumb img{display:block;width:100%;height:auto;aspect-ratio:40/21;border-radius:16px;background:#eef8ff;border:1px solid var(--line)}
.column-list a.column-card.has-thumb{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start}
.column-card-thumb{display:block;width:100%;height:auto;aspect-ratio:40/21;border-radius:12px;background:#eef8ff;border:1px solid var(--line)}
@media (max-width:760px){
  .column-list a.column-card.has-thumb{grid-template-columns:1fr;gap:14px}
}

/* 招待コードの特典（2026-10-23。記事の途中と最後。文言は invite.html から写す） */
.column-perk{margin:18px 0 28px;padding:20px 22px;background:#f3f9ff;border:1px solid var(--line);border-radius:16px}
.column-perk-head{margin:0 0 12px;font-weight:700;color:var(--navy);font-size:16px;line-height:1.6}
.column-perk-head strong{color:var(--blue)}
.column-perk-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 10px}
.column-perk-more{font-size:14px}
.column-perk-note{margin:0 0 4px;font-size:13px;color:var(--muted);line-height:1.7}
.column-perk .stores{margin:14px 0 0;justify-content:flex-start}
.column-cta .column-perk{max-width:640px;margin:6px auto 22px;text-align:left;background:#fff}
@media (max-width:760px){.column-perk{padding:16px}.column-perk-head{font-size:15px}}