/* ======================================================
   00. RESET（基本触らない）
====================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #111827;
  background: #fff;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; height: auto; display: block; }

/* ======================================================
   01. THEME TOKENS（色・角丸・幅など） ← EDIT HERE
====================================================== */
:root{
  --brand:#f8b500;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:16px;
  --container:1200px;
  --sidebar:380px;     /* サイドバー幅 */
  --header-h:60px;     /* ヘッダー高さ（SPナビの基準） */
}

/* ======================================================
   02. LAYOUT BASE（共通レイアウト） ← EDIT HERE
====================================================== */
.container{ width:min(var(--container), 92%); margin-inline:auto; padding:0 1.25rem; }
.section{ padding:4rem 0; }

/* ======================================================
   03. COMPONENTS - BUTTONS（ボタン） ← EDIT HERE
====================================================== */
.btn{
  display:inline-block;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  font-weight:600;
}
.btn--primary{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ======================================================
   04. HEADER（ヘッダー/ナビ） ← EDIT HERE
====================================================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(3px);
}
.site-header__row,
.header-inner{
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
}
.site-title{ font-weight:700; letter-spacing:.02em; }
.site-title img.site-logo,
.custom-logo{ height:44px; width:auto; display:block; }

.site-nav{ display:flex; gap:24px; }
.site-nav a{ padding:.4rem .2rem; border-radius:8px; }
.site-nav a:hover{ background:#f8fafc; }

/* トグル（SP） */
.menu-toggle,.nav-toggle{
  display:none; font-size:.9rem;
  border:1px solid var(--border); border-radius:10px; padding:.4rem .7rem; background:#fff; cursor:pointer;
}
@media (max-width:900px){
  .menu-toggle,.nav-toggle{ display:block; }
  .site-nav{
    display:none; position:absolute; top:var(--header-h); right:4%; left:4%;
    flex-direction:column; background:#fff; border:1px solid var(--border);
    border-radius:var(--radius); padding:12px;
  }
  .site-nav.is-open{ display:flex; }
}

/* ======================================================
   05. MAIN LAYOUT（2カラム/本文） ← EDIT HERE
====================================================== */
.two-column{ display:flex; gap:2rem; margin-top:1.5rem; }
.content-area{ flex:1; min-width:0; }
.sidebar-area{ width:var(--sidebar); flex-shrink:0; }
.sidebar-area .widget{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:1rem; margin-bottom:1.5rem;
}
.sidebar-area .widget-title,
.sidebar-area .widget h3{
  font-size:1rem; margin:0 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--border);
}

/* ======================================================
   06. TABLE（横スクロール／太罫デザイン／thead無し対応）
   - 外側背景なし・テーブル本体に太め外枠
   - 外枠は inset box-shadow で確実に表示（角丸対応）
   - thead 無しは tbody 先頭行をヘッダー化
   - 左端列は常にアクセント、ストライプは左端以外
====================================================== */

/* 色と太さを変数化 */
.entry-content{
  --table-accent: #2fa6b3;      /* ヘッダー/左列の背景色 */
  --table-accent-text: #fff;    /* アクセント上の文字色 */
  --table-border: #9aa4b2;      /* 罫線色 */
  --table-border-w: 2px;        /* 枠線の太さ */
}

/* ラッパ（横スクロール容器のみ、装飾は持たない） */
.entry-content .table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:transparent;
  border:0;
  border-radius:0;
  margin:1rem 0;
  padding:0;
  cursor:grab;
}
.entry-content .table-scroll.is-dragging{ cursor:grabbing; }

/* Gutenberg/素のtableどちらも対象 */
.entry-content .table-scroll > .wp-block-table,
.entry-content .table-scroll > table{
  display:block;
  min-width:100%;
}

/* 本体テーブル（★外枠の確実表示版） */
.entry-content .table-scroll > .wp-block-table > table,
.entry-content .table-scroll > table{
  width:max(760px, 100%);
  max-width:none !important;
  table-layout:auto !important;

  /* ここを変更：collapse→separate にして角丸と外枠を安定表示 */
  border-collapse:separate;
  border-spacing:0;

  /* 外枠は border ではなく inset box-shadow で描く（角丸対応・競合しない） */
  border:0;
  border-radius:10px;
  box-shadow:inset 0 0 0 var(--table-border-w) var(--table-border);
  overflow:hidden;

  background:#fff;
}

/* セル共通（内側の区切りは従来通り太め） */
.entry-content .table-scroll th,
.entry-content .table-scroll td{
  padding:1rem 1.1rem;
  line-height:1.7;
  vertical-align:top;
  text-align:left;
  border:var(--table-border-w) solid var(--table-border);
  color:var(--text);
}

/* theadあり → ヘッダー行 */
.entry-content .wp-block-table thead{ border-bottom:1px solid #CCC; }
.entry-content .table-scroll thead th{
  background:var(--table-accent);
  color:var(--table-accent-text);
  font-weight:700;
}

/* theadなし → 先頭行を自動でヘッダー扱い */
.entry-content .table-scroll:has(table:not(:has(thead))) tbody tr:first-child > *{
  background:var(--table-accent);
  color:var(--table-accent-text);
  font-weight:700;
}

/* 左端列は常にアクセント背景 */
.entry-content .table-scroll table tr > *:first-child{
  background:var(--table-accent);
  color:var(--table-accent-text);
  font-weight:700;
  white-space:nowrap;
}

/* 左端列を無効化したい場合は table.no-sidehead を付与 */
.entry-content .table-scroll table.no-sidehead tr > *:first-child{
  background:transparent !important;
  color:var(--text) !important;
  font-weight:600 !important;
}

/* ===== ストライプ処理 ===== */
/* 左端を見出しに使う通常テーブル → 2列目以降のみ */
.entry-content .table-scroll table:not(.no-sidehead) tbody tr:nth-child(even) > :not(:first-child){
  background:#f9fbfc;
}
/* no-sidehead テーブルは全列にストライプ */
.entry-content .table-scroll table.no-sidehead tbody tr:nth-child(even) > *{
  background:#f9fbfc;
}

/* テキスト処理 */
.entry-content .table-scroll th{ white-space:nowrap; }
.entry-content .table-scroll td{ word-break:break-word; }

/* スクロールバー */
.entry-content .table-scroll::-webkit-scrollbar{ height:8px; }
.entry-content .table-scroll::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px; }
.entry-content .table-scroll::-webkit-scrollbar-track{ background:transparent; }

/* Gutenberg側はリセット */
.entry-content .wp-block-table{ overflow:visible !important; border:0; padding:0; }

/* PCは内容幅に追従 */
@media (min-width:768px){
  .entry-content .table-scroll > .wp-block-table,
  .entry-content .table-scroll > table{ min-width:100%; }
  .entry-content .table-scroll > .wp-block-table > table,
  .entry-content .table-scroll > table{
    width:max-content !important;
    max-width:none !important;
    table-layout:auto !important;
  }
}

/* ===== ダークモード ===== */
@media (prefers-color-scheme: dark){
  .entry-content{
    --table-accent:#1e8a96;
    --table-accent-text:#f8fafc;
    --table-border:#3a4656;
  }
  .entry-content .table-scroll > .wp-block-table > table,
  .entry-content .table-scroll > table{
    background:#0b0f14;
    color:#e5e7eb;
  }
  .entry-content .table-scroll table:not(.no-sidehead) tbody tr:nth-child(even) > :not(:first-child){
    background:#0f1520;
  }
  .entry-content .table-scroll table.no-sidehead tbody tr:nth-child(even) > *{
    background:#0f1520;
  }
}



/* ======================================================
   07. TYPOGRAPHY（本文・要素）
====================================================== */
.entry-header{ margin-bottom:1rem; }
.entry-title{ font-size:clamp(1.4rem, 2.6vw, 2rem); line-height:1.35; margin:0 0 .25rem; }
.entry-meta{ color:var(--muted); font-size:.9rem; }

.entry-content{
  font-size:1.05rem; line-height:1.85; color:var(--text); word-break:break-word;
}
.entry-content > * + *{ margin-top:1.1rem; }
.entry-content p{ margin:0 0 1.2rem; }
.entry-content strong{ font-weight:700; }
.entry-content a{ text-decoration:underline; text-underline-offset:2px; }
.entry-content a:hover{ opacity:.9; }

/* リスト体裁（UL/OLで別指定） */
.entry-content ul,
.entry-content ol{
  margin:0 0 1.2rem;
  background-color:#f7e5c157;
  padding:1rem 2.5rem;
  border-radius:5px;
}
.entry-content ul li{ list-style:disc; }
.entry-content ol li{ list-style:decimal; }
.entry-content li + li{ margin-top:.35rem; }
.entry-content ul ul,
.entry-content ol ol{ margin-top:.35rem; }

.entry-content img{ border-radius:10px; width:100%; height:auto; }
.entry-content figure{ margin:1.5rem 0; }
.entry-content figcaption{ font-size:.9rem; color:var(--muted); text-align:center; margin-top:.4rem; }

/* 画像配置（WP既定） */
.entry-content .alignleft{ float:left; margin:.2rem 1rem .8rem 0; max-width:48%; }
.entry-content .alignright{ float:right; margin:.2rem 0 .8rem 1rem; max-width:48%; }
.entry-content .aligncenter{ display:block; margin-inline:auto; }
@media (max-width:800px){
  .entry-content .alignleft,
  .entry-content .alignright{ float:none; margin:0 auto 1rem; max-width:100%; }
}

/* 引用/コード/区切り/表（ベース表・ラッパと競合しない範囲） */
.entry-content blockquote{
  margin:1.5rem 0; padding:.9rem 1rem .9rem 1.1rem;
  border-left:4px solid var(--brand); background:#fffdf2; color:#374151;
}
.entry-content blockquote p:last-child{ margin-bottom:0; }
.entry-content blockquote cite{ display:block; margin-top:.5rem; font-size:.9rem; color:var(--muted); }

.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:#f5f7fb; border:1px solid var(--border);
  border-radius:6px; padding:.1rem .35rem; font-size:.95em;
}
.entry-content pre{
  overflow:auto; padding:1rem; border-radius:10px;
  background:#0b1220; color:#e5e7eb; border:1px solid #0f172a;
}
.entry-content hr{ border:0; border-top:1px solid var(--border); margin:2rem auto; }

/* ベースのtable体裁（スクロールラッパと共存可） */
.entry-content table{
  width:100%; border-collapse:collapse; border:1px solid var(--border);
  border-radius:10px;
}
.entry-content th, .entry-content td{ padding:.65rem .75rem; border-bottom:1px solid var(--border); text-align:left; }
.entry-content thead th{ background:#fafafa; }
.entry-content tbody tr:nth-child(even){ background:#fcfcfc; }

/* 前後ナビ */
.post-nav,.post-navigation{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:2rem; padding-top:1rem; border-top:1px solid var(--border);
}

/* 固定ページ全幅 */
.content-full { width:100%; }

/* ======================================================
   08. FRONT PAGE（トップ固有） — 最小セット
====================================================== */
/* Hero */
.hero{
  background:linear-gradient(180deg,#fff 0,#fff9e6 100%);
  padding:4rem 0;
  text-align:center;
}
.hero-inner{ max-width:960px; margin:0 auto; }
.hero-title{ font-size:clamp(2rem, 4vw, 2.6rem); line-height:1.3; margin-bottom:.5rem; }
.hero-subtitle{
  font-size:1.2rem; color:var(--muted);
  margin-bottom:1.5rem; max-width:60ch; margin-inline:auto;
}
.hero-actions{ display:flex; gap:.5rem; justify-content:center; }

/* セクション見出し */
.section-title{
  text-align:center; margin-bottom:2rem; font-weight:700; letter-spacing:.02em;
  position:relative; display:inline-block; padding-bottom:.35rem;
}
.section-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:72px; height:3px; background:var(--brand); border-radius:2px;
}

/* カテゴリセクション */
.front-sec{ padding:2.5rem 0; }
.front-sec__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:1rem;
}
.front-sec__more{
  font-size:.95rem; color:#2563eb;
  text-decoration:underline; text-underline-offset:2px;
}

/* 横スクロール行（カード） */
.h-scroll{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap:20px;
  overflow-x:auto;
  padding-bottom:.25rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.h-scroll > .card{ scroll-snap-align:start; }

/* カード（全体リンク＆最低限の体裁） */
.card--link .card__a{ display:block; height:100%; }
.card__thumb{ border-radius:var(--radius); overflow:hidden; }
.card__title{ margin:.6rem 0 0; font-size:1rem; line-height:1.45; font-weight:700; }

/* SP：カード幅を広めにしてスワイプしやすく */
@media (max-width:640px){
  .h-scroll{ grid-auto-columns: minmax(260px, 80%); }
}

/* ======================================================
   09. CARDS & GRID（一覧カード/グリッド）
====================================================== */
.card{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; transition:box-shadow .2s ease, border-color .2s ease, transform .05s ease;
}
.card:hover{ border-color:#d9dde3; box-shadow:0 6px 18px rgba(0,0,0,.05); transform:translateY(-1px); }
.card-title{ margin:.25rem 0 .5rem; }
.card-text{ color:var(--muted); }
.grid{ display:grid; gap:20px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3{ grid-template-columns:1fr; } }

/* ======================================================
   10. COMMENTS（コメントUI）
====================================================== */
#comments,.comments-area{ margin-top:2rem; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list > li{ padding:1rem 0; border-top:1px solid var(--border); }
.comment-list > li:first-child{ border-top:0; }
.comment-meta{ font-size:.9rem; color:var(--muted); }
.comment-content p{ margin:.75rem 0; }
.comment-respond{ margin-top:1.5rem; }
.comment-respond label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.25rem; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:.65rem .8rem; background:#fff;
}
.comment-respond input[type="submit"]{ appearance:none; border:none; cursor:pointer; }
.comment-respond .submit,.comment-form .submit{
  display:inline-block; margin-top:.5rem; background:var(--brand); color:#111; font-weight:700; padding:.7rem 1rem; border-radius:12px;
}

/* ======================================================
   11. PAGINATION（the_posts_pagination）
====================================================== */
.navigation.pagination{ margin-top:2rem; text-align:center; }
.navigation .nav-links{ display:inline-flex; gap:.4rem; align-items:center; }
.page-numbers{
  display:inline-flex; min-width:36px; height:36px; align-items:center; justify-content:center;
  padding:0 .6rem; border:1px solid var(--border); border-radius:10px; text-decoration:none;
}
.page-numbers.current{ background:var(--brand); border-color:var(--brand); color:#111; font-weight:700; }
.page-numbers:hover{ background:#f8fafc; }

/* ======================================================
   12. FOOTER（フッター）
====================================================== */
.site-footer,#site-footer{ background:#fafafa; }
.footer-inner{ padding:1.25rem 0; }
#site-footer p{ margin:0; padding:1rem; font-size:.9rem; color:#6b7280; }

/* ======================================================
   13. HERO（記事上部）／TOC／Progress ← EDIT HERE
====================================================== */
/* ヒーロー：背景画像をサイドバー幅ぶん右へ寄せる */
.post-hero{
  position:relative;
  background-size:contain;
  background-repeat:no-repeat;
  background-position: calc(50% + (var(--sidebar) - 40px)) center; /* 中央 + サイドバー幅 - 余白 */
  min-height:500px;
  display:flex;
  align-items:flex-end;
}
/* 半透明オーバーレイ（クリック可能） */
.post-hero__overlay{
  position:absolute; inset:0; display:flex; align-items:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.70) 100%);
  padding:1rem 0;
}
.post-hero__overlay .container .container_box { width: calc(100% - var(--sidebar)); }

.post-hero__title{
  color:#fff; font-size:clamp(1.8rem, 4vw, 2.4rem);
  margin:0 0 .5rem; line-height:1.25;
  padding-bottom:1rem; margin-bottom:1rem; border-bottom:2px solid #FFF;
}
.post-hero__excerpt{ color:rgba(255,255,255,.9); width:100%; }
.lesson-meta{
  display:flex; gap:1rem; padding:0; margin:1rem 0 0; list-style:none; flex-wrap:wrap;
}
.lesson-meta li{
  color:#fff; font-size:.9rem; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.15);
  padding:.35rem .6rem; border-radius:999px;
}

/* 読了進捗バー */
.reading-progress{ position:sticky; top:0; height:4px; background:transparent; z-index:1001; }
.reading-progress__bar{ display:block; height:100%; width:0; background:var(--brand); }

/* TOC */
.toc{ font-size:.95rem; }
.toc ol{ margin:0; padding-left:1rem; }
.toc li{ white-space:nowrap; overflow:hidden; }
.toc a{ text-decoration:none; }
.toc a:hover{ text-decoration:underline; }
.toc--mobile{ display:none; margin:1rem 0 1.5rem; padding:1rem; border:1px solid var(--border); border-radius:12px; }
.sticky{ position:sticky; top:calc(48px + 40px); } /* 例：ヘッダー＋余白 */
.toc > ol > li:not([style*="margin-left"]) > a{
  font-weight:bold; font-size:1.1em; color:#ff6c00;
}
@media (max-width:1024px){
  .post-hero{ background-position:center; }
  .post-hero__overlay .container .container_box{ width:100%; }
  .toc--mobile{ display:block; }
}

/* レッスンフッターナビ */
.lesson-nav{
  display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--border);
}
.lesson-nav a{ text-decoration:none; }

/* ======================================================
   14. CALLOUTS（教材用ボックス） ← EDIT HERE
====================================================== */
.callout{ border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:12px; padding:1rem; background:#fffef6; }
.callout.info{ border-left-color:#3b82f6; background:#f5faff; }
.callout.warn{ border-left-color:#f59e0b; background:#fff8eb; }
.callout.ok{ border-left-color:#10b981; background:#f0fff7; }

/* ======================================================
   15. CHAPTER HEADINGS（自動採番H2／UI風H3） ← EDIT HERE
====================================================== */
.entry-content{ counter-reset:chapter; }
.entry-content h2{
  counter-increment:chapter;
  position:relative;
  margin:4rem 0 1.2rem;
  padding:.2rem 0 .6rem;
  display:flex; align-items:center; gap:.75rem;
  font-size:clamp(1.45rem, 2vw, 1.7rem);
  font-weight:800; color:#111; text-align:left;
}
.entry-content h2::before{
  content:"CHAPTER " counter(chapter);
  display:inline-block; padding:.28rem .8rem;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; color:#111;
  background:linear-gradient(90deg, #ffe279 0%, #ffbe2e 100%);
  border:1px solid rgba(0,0,0,.22); border-radius:999px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7), 0 4px 10px rgba(255,190,46,.25);
}
.entry-content h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:#111; opacity:.95;
}
.entry-content h3{
  position:relative; margin:3.5rem 0 1.5rem;
  display:flex; align-items:center; gap:.65rem;
  font-size:clamp(1.12rem, 1.7vw, 1.3rem); font-weight:700; color:#111; line-height:1.35;
}
.entry-content h3::before{
  content:"";
  width:13px; height:13px; border-radius:999px;
  background:radial-gradient(circle at 40% 40%, #fff 0 10%, var(--brand) 50% 100%);
  box-shadow:0 0 8px rgba(248,181,0,.35);
}
.entry-content h3::after{
  content:""; flex:1 1 auto; height:1px; background:rgba(0,0,0,.12); margin-left:.4rem;
}
.entry-content h4{ font-weight:bold; font-size:1.2em; color:#ef5a00; }

/* 目次ジャンプ時の上部被り防止 */
.js-lesson-content h2[id],
.js-lesson-content h3[id]{ scroll-margin-top:96px; }

/* スマホ：バッジ1行目固定／本文2行目以降に強制 */
@media (max-width:640px){
  .entry-content h2{
    display:grid; grid-template-columns:1fr;
    justify-items:center; text-align:center;
    margin:3rem 0 1.2rem; padding:1.1rem 0 .9rem; gap:0;
    text-wrap:balance;
    font-size:clamp(1.25rem, 4.6vw, 1.6rem); line-height:1.35;
  }
  .entry-content h2::before{ grid-row:1; margin:0 0 .6rem; display:inline-block; transform:translateY(0); }
  .entry-content h2::after{ grid-row:3; left:10%; right:10%; opacity:.9; }
}
@media (max-width:390px){
  .entry-content h2{ font-size:1.15rem; padding:1rem 0 .8rem; }
  .entry-content h2::before{ font-size:.68rem; padding:.26rem .72rem; margin-bottom:.5rem; }
}

/* ======================================================
   16. ARCHIVE（並び替えタブ／カード）
====================================================== */
/* ソートタブ */
.sort-tabs{ display:flex; gap:.5rem; margin:0 0 1rem; align-items:center; }
.sort-tab{
  display:inline-block; padding:.4rem .8rem; border:1px solid var(--border);
  border-radius:999px; font-size:.95rem; background:#fff;
}
.sort-tab:hover{ background:#f8fafc; }
.sort-tab.is-active{ background:var(--brand); border-color:var(--brand); color:#111; font-weight:700; }

/* アーカイブ用カード（画像はスクエア） */
.card.card--link{
  display:block; height:100%;
  border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; background:#fff;
  transition:box-shadow .2s, border-color .2s, transform .05s;
}
.card.card--link:hover{ border-color:#d9dde3; box-shadow:0 6px 18px rgba(0,0,0,.05); transform:translateY(-1px); }
.card__a{ display:block; height:100%; color:inherit; }
.card__thumb{ width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; margin-bottom:.7rem; }
.card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__title{ margin:0 0 .35rem; font-weight:700; line-height:1.35; font-size:1.05rem; }
.card__excerpt{
  color:var(--muted); font-size:.95rem; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__meta{
  margin-top:.6rem; display:flex; gap:.6rem; align-items:center;
  font-size:.85rem; color:#6b7280;
}

/* ======================================================
   17. RESPONSIVE EXTRA（補強）
====================================================== */
@media (max-width:960px){
  .two-column{ gap:1.25rem; flex-direction:column; }
  .sidebar-area{ width:100%; }
  .hero-inner{ padding:0 .25rem; }
}

/* ======================================================
   18. 404
====================================================== */
.not-found{ text-align:center; padding:6rem 0; }
.not-found__title{ font-size:clamp(2rem, 4vw, 2.6rem); font-weight:800; color:#111; margin-bottom:1rem; }
.not-found__text{ color:#555; font-size:1rem; margin-bottom:2.5rem; line-height:1.7; }
.not-found__actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }