/* ═══════════════════════════════════════════════════════════════
   erabulab — "The Selection" (obsidian assembly tribute, erabulab world)
   Motif: 選び抜かれた原石 / brown-cream inversion / cinematic editorial
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brown world (obsidian-derived, warmed for erabulab) */
  --brown-900: #14100A;
  --brown-800: #1C160E;
  --brown-700: #2A2015;
  --brown-grad-top: #2A2015;
  --brown-grad-bot: #14100A;

  /* Cream world (inverted sections) */
  --cream-100: #F1EADE;
  --cream-200: #E5DBC9;
  --cream-bg:  #ECE3D3;

  /* Ink (text on cream) */
  --ink-900: #1A140C;
  --ink-700: #4A4036;
  --ink-500: #877B6A;

  /* Text on brown */
  --on-dark-100: #F1EADE;
  --on-dark-70:  rgba(241,234,222,.62);
  --on-dark-40:  rgba(241,234,222,.4);
  --on-dark-15:  rgba(241,234,222,.15);
  --on-dark-08:  rgba(241,234,222,.08);

  /* Accent — champagne gold (the gem light) */
  --gold:    #C2A06B;
  --gold-lt: #D9BE8E;

  /* Motion (from obsidian: --f-cubic, .9s, .3s) */
  --f-cubic: cubic-bezier(.16,1,.3,1);
  --f-io:    cubic-bezier(.83,0,.17,1);
  --t-fast:  .3s;
  --t-mid:   .9s;
  --t-slow:  1.5s;

  --radius: .4rem;

  /* Type — Latin: Fraunces / JP: Shippori Mincho (controlled mincho) */
  --serif: 'Fraunces', 'Shippori Mincho', 'Times New Roman', serif;
  --sans:  'Zen Kaku Gothic New', 'Inter', system-ui, sans-serif;

  --maxw: 1340px;
  --pad: clamp(20px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--brown-900);
  color: var(--on-dark-100);
  overflow: hidden;
}
body { overflow: hidden; cursor: none; }
@media (hover: none) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
.brand { text-transform: none; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ── Cursor trail (軌道) ─────────────────────────────────────── */
.cursor-trail {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; width: 100%; height: 100%;
}

/* ── Custom Cursor ───────────────────────────────────────────── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--gold); border-radius: 50%;
}
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid var(--on-dark-40); border-radius: 50%;
  transition: transform var(--t-fast) var(--f-cubic),
              border-color var(--t-fast), background var(--t-fast);
}
.cursor-ring.hover { transform: scale(1.6); background: rgba(194,160,107,.1); border-color: transparent; }
body.on-cream .cursor-ring { border-color: rgba(26,20,12,.3); }
body.on-cream .cursor-dot  { background: var(--ink-900); }

/* ── Header ──────────────────────────────────────────────────── */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad);
  transition: padding var(--t-fast) var(--f-cubic),
              transform var(--t-mid) var(--f-cubic),
              opacity var(--t-fast);
}
.hdr.hidden { transform: translateY(-110%); opacity: 0; }
.hdr.small { padding: 16px var(--pad); }
.hdr-logo { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.hdr-logo .dot { color: var(--gold); }
.hdr-right { display: flex; align-items: center; gap: 40px; }
.hdr-nav { display: flex; gap: 28px; }
.hdr-nav a { font-size: 14px; letter-spacing: .06em; color: #fff; opacity: .85; transition: opacity var(--t-fast); }
.hdr-nav a:hover { opacity: 1; }
body.on-cream .hdr-logo,
body.on-cream .hdr-nav a { color: var(--ink-900); }
/* ── Hamburger button ────────────────────────────────────────── */
.hdr-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 52px; height: 44px; padding: 10px 8px;
  background: none; border: none; cursor: none;
}
.hdr-burger span {
  display: block; width: 100%; height: 1px;
  background: #fff;
  transition: background var(--t-fast), transform var(--t-fast) var(--f-cubic), opacity var(--t-fast);
  transform-origin: center;
}
body.on-cream .hdr-burger span { background: var(--ink-900); }
body.fsm-open .hdr-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.fsm-open .hdr-burger span:nth-child(2) { opacity: 0; }
body.fsm-open .hdr-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Full-screen menu overlay ────────────────────────────────── */
.fsm {
  position: fixed; inset: 0; z-index: 200;
  background: var(--brown-900);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
  transition: opacity var(--t-mid) var(--f-cubic);
  overflow: hidden;
}
body.fsm-open .fsm { opacity: 1; pointer-events: auto; }

.fsm-bg {
  position: absolute; inset: 0;
  background: url('images/menu_bg.jpg') bottom right/auto 90% no-repeat;
  opacity: .6; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 95% 100%, black 30%, transparent 72%);
          mask-image: radial-gradient(ellipse 55% 70% at 95% 100%, black 30%, transparent 72%);
}

/* cursor ring/dot 色をメニュー内でダーク背景用に戻す */
body.fsm-open .cursor-ring { border-color: var(--on-dark-40); }
body.fsm-open .cursor-dot  { background: var(--gold); }

.fsm-close {
  position: absolute; top: 20px; right: calc(var(--pad) - 14px);
  padding: 14px 14px;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-40); background: none; border: none; cursor: none;
  transition: color var(--t-fast);
}
.fsm-close:hover { color: var(--on-dark-100); }

.fsm-nav {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.fsm-label {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-40); margin-bottom: 24px;
}
.fsm-link {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 7vw, 88px); line-height: 1.1; letter-spacing: -.03em;
  color: var(--on-dark-100);
  opacity: 0; transform: translateY(32px);
  transition: color var(--t-fast), opacity .6s var(--f-cubic), transform .6s var(--f-cubic);
}
.fsm-link:hover { color: var(--gold); }
body.fsm-open .fsm-link { opacity: 1; transform: none; }
body.fsm-open .fsm-link:nth-child(2) { transition-delay: .08s; }
body.fsm-open .fsm-link:nth-child(3) { transition-delay: .16s; }
body.fsm-open .fsm-link:nth-child(4) { transition-delay: .24s; }
body.fsm-open .fsm-link:nth-child(5) { transition-delay: .32s; }

/* ── Panel base (full-viewport deck, JS-driven navigation) ────── */
.hero, .section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.section { padding: clamp(60px,9vh,110px) 0; }
.section > .inner { width: 100%; }
.inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); }

.s-label { display: flex; align-items: baseline; gap: 14px; margin-bottom: 48px; }
.s-label .n { font-family: var(--serif); font-size: 13px; color: var(--gold); }
.s-label .t { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .45; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(60,44,24,.55) 0%, transparent 55%),
    linear-gradient(180deg, var(--brown-grad-top) 0%, var(--brown-900) 72%);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 50%, rgba(10,8,5,.55) 100%);
}
.hero-gem {
  position: absolute; top: 44%; left: 50%;
  width: min(68vh, 720px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1; will-change: transform;
  filter: contrast(1.1) saturate(1.08) brightness(1.05);
}
.hero-gem img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 38%, transparent 66%);
          mask: radial-gradient(circle at 50% 50%, #000 38%, transparent 66%);
}

.hero-arc { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35; }
.hero-arc path { fill: none; stroke: var(--gold); stroke-width: 1; }

.hero-content { position: relative; z-index: 3; padding: 0 var(--pad) 8vh; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.hero-eyebrow { margin-bottom: 26px; opacity: 0; transform: translateY(14px); }
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(58px, 10vw, 150px);
  line-height: .98; letter-spacing: -.03em; color: var(--cream-100);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title em { font-style: italic; color: var(--gold-lt); }
.hero-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--on-dark-08);
}
.hero-desc { font-size: 14px; line-height: 1.85; color: var(--on-dark-40); max-width: 500px; opacity: 0; transform: translateY(14px); }
.hero-scroll { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-15); white-space: nowrap; }

/* ── THESIS (brown) ──────────────────────────────────────────── */
.thesis { background: var(--brown-900); }
.thesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.thesis-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--cream-100);
}
.thesis-h em { font-style: italic; color: var(--gold-lt); }
.thesis-body { font-size: 15px; line-height: 1.95; color: var(--on-dark-40); max-width: 380px; }
.thesis-body .big, .big { font-family: var(--serif); font-size: 1.4em; color: var(--gold); font-style: italic; }
@media (max-width: 820px){ .thesis-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── LATEST REVIEWS — 雑誌レイアウト ────────────────────────── */
.mag {
  background: var(--cream-bg); color: var(--ink-900);
  justify-content: flex-start;
  padding-top: clamp(48px, 6vh, 72px);
  padding-bottom: clamp(36px, 4vh, 56px);
}
.mag .s-label .t { color: var(--ink-500); opacity: 1; }
.mag .s-label .n { color: var(--gold); }

.mag-grid {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: 2px;
  margin-top: 32px;
  background: rgba(26,20,12,.1);
  border: 1px solid rgba(26,20,12,.1);
  /* 画面の高さに関わらず収まるよう上限を設定（はみ出し防止） */
  height: min(58vh, 580px);
  min-height: 380px;
}

/* 左：メイン大記事 */
.mag-main {
  display: flex; flex-direction: column;
  height: 100%;
  cursor: none;
  overflow: hidden;
  background: var(--cream-bg);
  transition: background var(--t-fast);
}
.mag-main:hover { background: var(--cream-200); }
.mag-main-img {
  flex: 1 1 auto; min-height: 0;
  overflow: hidden; background: var(--cream-200);
}
.mag-main-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.92) saturate(.9);
  transition: transform var(--t-slow) var(--f-cubic), filter var(--t-slow);
}
.mag-main:hover .mag-main-img img { transform: scale(1.04); filter: brightness(1) saturate(1); }
.mag-main-body { padding: 24px 32px 28px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; max-height: 48%; overflow: hidden; }
.mag-main-meta { display: flex; align-items: center; justify-content: space-between; }
.mag-main-title {
  font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400; color: var(--ink-900);
  letter-spacing: -.02em; line-height: 1.3;
}
.mag-main-ex { font-size: 13px; line-height: 1.9; color: var(--ink-500); }
.mag-verdict { display: flex; align-items: flex-end; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(26,20,12,.1); }
.mag-verdict-n { font-family: var(--serif); font-size: 42px; line-height: .85; color: var(--gold); }
.mag-verdict-l { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); padding-bottom: 6px; }

/* 右：サブ記事 2件 */
.mag-side { display: flex; flex-direction: column; gap: 2px; background: rgba(26,20,12,.1); height: 100%; }
.mag-sub {
  flex: 1 1 50%; min-height: 0; display: flex; flex-direction: column;
  background: var(--cream-bg); cursor: none; overflow: hidden;
  transition: background var(--t-fast);
}
.mag-sub:hover { background: var(--cream-200); }
.mag-sub-img {
  flex: 1 1 auto; min-height: 0;
  overflow: hidden; background: var(--cream-200);
}
.mag-sub-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.92) saturate(.9);
  transition: transform var(--t-slow) var(--f-cubic), filter var(--t-slow);
}
.mag-sub:hover .mag-sub-img img { transform: scale(1.05); filter: brightness(1) saturate(1); }
.mag-sub-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; max-height: 55%; overflow: hidden; }
.mag-sub-meta { display: flex; align-items: center; justify-content: space-between; }
.mag-sub-title {
  font-family: var(--serif); font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400; color: var(--ink-900);
  letter-spacing: -.01em; line-height: 1.4;
}
.mag-cat { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.mag-date { font-family: var(--serif); font-size: 13px; color: var(--ink-500); }
.mag-verdict--sm .mag-verdict-n { font-size: 26px; }
.mag-verdict--sm { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(26,20,12,.1); }

.mag-all {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px;
  font-family: var(--serif); font-size: 15px;
  color: var(--ink-500);
  border-bottom: 1px solid rgba(26,20,12,.2);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.mag-all:hover { color: var(--ink-900); border-color: var(--ink-900); }
.mag-all span { transition: transform var(--t-fast) var(--f-cubic); }
.mag-all:hover span { transform: translateX(4px); }

@media (max-width: 820px) {
  .mag-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mag-main, .mag-side { height: auto; }
  .mag-main-img, .mag-sub-img { flex: none; }
  .mag-side { gap: 2px; }
}

/* ── FEATURED COVER (brown) ──────────────────────────────────── */
.cover { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; cursor: none; }
.cover-media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--brown-700); }
.cover-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--f-cubic), filter var(--t-slow); filter: brightness(.85) saturate(.9); }
.cover:hover .cover-media img { transform: scale(1.04); filter: brightness(1) saturate(1); }
.cover-cat { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.cover-title { font-family: var(--serif); font-size: clamp(26px,3vw,42px); line-height: 1.25; letter-spacing: -.02em; color: var(--cream-100); margin: 16px 0 18px; }
.cover-ex { font-size: 14px; line-height: 1.9; color: var(--on-dark-40); margin-bottom: 26px; }
.cover-verdict { display: flex; align-items: flex-end; gap: 12px; padding-top: 18px; border-top: 1px solid var(--on-dark-08); }
.cover-verdict .num { font-family: var(--serif); font-size: 56px; line-height: .8; color: var(--gold); }
.cover-verdict .lab { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-40); padding-bottom: 8px; }
@media (max-width: 820px){ .cover { grid-template-columns: 1fr; gap: 26px; } }

/* ── CATEGORIES ──────────────────────────────────────────────── */
.cats {
  background: var(--brown-900);
  color: var(--on-dark-100); overflow: hidden;
}
.cats .s-label .t { color: var(--on-dark-40); opacity: 1; }
.cats .s-label .n { color: var(--gold); }

/* 背景レイヤー（Selectedテキスト＋原石オブジェ） */
.cats-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.cats-bg-word {
  position: absolute;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(100px, 18vw, 260px); line-height: 1;
  letter-spacing: -.04em; white-space: nowrap;
  color: rgba(26,20,12,.06);
  bottom: 12%; left: 50%; transform: translateX(-50%);
  pointer-events: none; user-select: none;
}
.cats-img {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius);
}
.cats-img img { width: 100%; height: 100%; object-fit: cover; }
/* エッジのみマスク（石はシャープ、外周だけ背景に溶かす） */
.cats-img.a {
  width: 16%; aspect-ratio: 2/3; bottom: -2%; left: 6%; opacity: .95;
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at 40% 55%, black 55%, transparent 88%);
          mask-image: radial-gradient(ellipse 60% 65% at 40% 55%, black 55%, transparent 88%);
}
.cats-img.b {
  width: 13%; aspect-ratio: 2/3; bottom: -4%; left: 50%; transform: translateX(-50%); opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at 50% 50%, black 55%, transparent 88%);
          mask-image: radial-gradient(ellipse 60% 65% at 50% 50%, black 55%, transparent 88%);
}
.cats-img.c {
  width: 16%; aspect-ratio: 2/3; bottom: -2%; right: 6%; opacity: .95;
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at 60% 55%, black 55%, transparent 88%);
          mask-image: radial-gradient(ellipse 60% 65% at 60% 55%, black 55%, transparent 88%);
}

/* ── Category grid（実データ駆動：タイル数は投稿があるカテゴリ数で可変）── */
.cats-grid {
  display: grid;
  /* --tile-count はfront-page.phpから実タイル数を渡す。3本より少なければ
     その本数だけの列にして、空の列が右側に間延びして見えるのを防ぐ */
  grid-template-columns: repeat(min(3, var(--tile-count, 3)), 1fr);
  gap: 1px;
  margin-top: 28px;
  background: rgba(241,234,222,.08);
  border: 1px solid rgba(241,234,222,.08);
}
/* タイルが1〜2枚しかない間は、グリッド自体の横幅も絞って中央に寄せる */
.cats-grid.is-sparse {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* カテゴリがまだ1つも公開されていない場合のプレースホルダー */
.cats-empty {
  margin-top: 28px;
  padding: 64px 24px;
  text-align: center;
  background: rgba(30,22,14,.5);
  border: 1px solid rgba(241,234,222,.08);
  color: var(--on-dark-70);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .02em;
}
.cat-tile {
  position: relative;
  padding: 28px 26px 26px;
  background: rgba(30,22,14,.6);
  backdrop-filter: blur(4px);
  cursor: none;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: background var(--t-mid) var(--f-cubic),
              transform var(--t-mid) var(--f-cubic),
              box-shadow var(--t-mid) var(--f-cubic);
  z-index: 0;
}
.cat-tile:hover {
  background: rgba(44,32,18,.92);
  transform: scale(1.32);
  box-shadow: 0 28px 80px rgba(5,3,1,.5);
  z-index: 10;
}
.ct-num {
  font-family: var(--serif); font-size: 11px;
  color: var(--gold); letter-spacing: .1em;
}
.ct-name {
  font-family: var(--serif); font-size: clamp(17px, 1.5vw, 22px);
  color: var(--on-dark-100); letter-spacing: -.01em; line-height: 1.2;
}
/* サブカテゴリ：ホバーで出現 */
.ct-subs {
  list-style: none;
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .55s var(--f-cubic), opacity .45s var(--f-cubic);
  display: flex; flex-direction: column; gap: 0;
  margin-top: 6px;
}
.cat-tile:hover .ct-subs { max-height: 400px; opacity: 1; }
.ct-subs li { border-top: none; margin-top: 6px; }
.ct-subs li:first-child { margin-top: 0; }
.ct-subs li a {
  display: flex; align-items: center;
  height: 52px;
  padding: 0 16px;
  background: rgba(241,234,222,.07);
  border-radius: 4px;
  font-size: 14px; color: var(--on-dark-70);
  letter-spacing: .01em;
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast) var(--f-cubic);
}
.ct-subs li a:hover {
  background: rgba(241,234,222,.15);
  color: var(--on-dark-100);
  padding-left: 22px;
}
.ct-count {
  margin-top: auto;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark-40);
}
.cat-tile:hover .ct-count { opacity: 0; }
.cat-tile::after {
  content: '→';
  position: absolute; top: 26px; right: 22px;
  font-size: 13px; color: var(--gold);
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--f-cubic);
}
.cat-tile:hover::after { opacity: 1; transform: translate(0,0); }
@media (max-width: 1024px) { .cats-grid { grid-template-columns: repeat(min(2, var(--tile-count, 2)), 1fr); } }
@media (max-width: 820px)  { .cats-grid { grid-template-columns: 1fr; } }

/* ── LATEST (cream) ──────────────────────────────────────────── */
.latest { background: var(--cream-bg); color: var(--ink-900); padding-top: 0; }
.latest .s-label .t { color: var(--ink-500); opacity: 1; }
.latest .s-label .n { color: var(--gold); }
.review { display: grid; grid-template-columns: 48px 130px 1fr auto; gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid rgba(26,20,12,.12); cursor: none; transition: padding-left var(--t-fast) var(--f-cubic); }
.review:hover { padding-left: 12px; }
.review:last-child { border-bottom: 1px solid rgba(26,20,12,.12); }
.review .rn { font-family: var(--serif); font-size: 14px; color: var(--ink-500); }
.review .rthumb { aspect-ratio: 16/10; border-radius: 3px; overflow: hidden; background: var(--cream-200); }
.review .rthumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.95) saturate(.9); transition: transform var(--t-mid) var(--f-cubic), filter var(--t-mid); }
.review:hover .rthumb img { transform: scale(1.05); filter: brightness(1) saturate(1); }
.review .rcat { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.review .rtitle { font-family: var(--serif); font-size: clamp(18px,1.8vw,24px); color: var(--ink-900); line-height: 1.3; margin-top: 6px; }
.review .rdate { font-family: var(--serif); font-size: 13px; color: var(--ink-500); }
@media (max-width: 820px){ .review { grid-template-columns: 32px 1fr; } .review .rthumb, .review .rdate { display: none; } }

/* ── CREDO (dark marble, circular mask + giant initial) ──────── */
.credo { background: var(--brown-900); text-align: center; overflow: hidden; position: relative; }
.credo-initial { position: absolute; font-family: var(--serif); font-size: 60vh; line-height: 1; color: var(--on-dark-08); top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; pointer-events: none; }
.credo-circle { position: relative; z-index: 2; width: min(50vh, 460px); aspect-ratio: 1; margin: 0 auto 48px; border-radius: 50%; overflow: hidden; }
.credo-circle img { width: 100%; height: 100%; object-fit: cover; }
.credo-circle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 80px rgba(20,16,10,.6); }
.credo-h { position: relative; z-index: 2; font-family: var(--serif); font-size: clamp(28px,4vw,56px); line-height: 1.4; letter-spacing: -.01em; color: var(--cream-100); }
.credo-h em { font-style: italic; color: var(--gold-lt); }
.credo-sub { position: relative; z-index: 2; margin-top: 28px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-40); }

/* ── Category Overlay (A) — center float ─────────────────────── */
.cov {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
body.cov-open .cov { pointer-events: auto; }

/* 外周の透過背景（クリックで閉じる） */
.cov-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,7,3,.55);
  opacity: 0;
  transition: opacity var(--t-mid) var(--f-cubic);
  cursor: none;
}
body.cov-open .cov-backdrop { opacity: 1; }

/* パネル本体（中央、上下左右 約10% の余白） */
.cov-panel {
  position: relative; z-index: 1;
  width: 78vw; max-width: 1100px;
  height: 80vh;
  background: rgba(20,15,9,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(241,234,222,.07);
  border-radius: 8px;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 100px rgba(5,3,1,.6);
  opacity: 0; transform: scale(.96);
  transition: opacity var(--t-mid) var(--f-cubic),
              transform var(--t-mid) var(--f-cubic);
}
body.cov-open .cov-panel { opacity: 1; transform: scale(1); }

.cov-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 36px 40px 28px;
  border-bottom: 1px solid var(--on-dark-08);
  flex-shrink: 0;
}
.cov-label {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 8px;
}
.cov-title {
  font-family: var(--serif); font-size: clamp(24px, 3vw, 40px);
  font-weight: 400; color: var(--on-dark-100);
  letter-spacing: -.02em; line-height: 1.1;
}
.cov-sub {
  display: block; margin-top: 6px;
  font-size: 13px; color: var(--on-dark-40); letter-spacing: .04em;
}
.cov-close {
  flex-shrink: 0; margin-top: 4px; padding: 12px 16px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-40); background: none; border: none; cursor: none;
  transition: color var(--t-fast);
}
.cov-close:hover { color: var(--on-dark-100); }

.cov-body {
  flex: 1;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 0 40px;
  min-height: 0; /* flex子要素がoverflowするための必須指定 */
}
.cov-body::-webkit-scrollbar { width: 3px; }
.cov-body::-webkit-scrollbar-track { background: transparent; }
.cov-body::-webkit-scrollbar-thumb { background: rgba(241,234,222,.2); border-radius: 2px; }

/* 記事カード */
.cov-articles { display: flex; flex-direction: column; }
.cov-article {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: 20px; align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--on-dark-08);
  transition: padding-left var(--t-fast) var(--f-cubic);
}
.cov-article:first-child { border-top: 1px solid var(--on-dark-08); }
.cov-article:hover { padding-left: 6px; }
.cov-thumb {
  aspect-ratio: 16/10; border-radius: var(--radius);
  overflow: hidden; background: var(--brown-700);
}
.cov-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); transition: filter var(--t-mid), transform var(--t-mid) var(--f-cubic); }
.cov-article:hover .cov-thumb img { filter: brightness(1); transform: scale(1.04); }
.cov-cat {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 5px;
}
.cov-atitle {
  font-family: var(--serif); font-size: clamp(14px, 1.3vw, 18px);
  color: var(--on-dark-100); line-height: 1.4;
}
.cov-date { font-family: var(--serif); font-size: 13px; color: var(--on-dark-40); white-space: nowrap; }
.cov-loading {
  display: flex; align-items: center; justify-content: center;
  height: 200px; color: var(--on-dark-40);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.cov-loading.hidden { display: none; }
.cov-footer {
  padding: 22px 40px 32px;
  border-top: 1px solid var(--on-dark-08); flex-shrink: 0;
}
.cov-more {
  font-family: var(--serif); font-size: 15px; color: var(--on-dark-40);
  display: inline-flex; align-items: center; gap: 10px;
  transition: color var(--t-fast);
}
.cov-more:hover { color: var(--gold); }
.cov-more span { transition: transform var(--t-fast) var(--f-cubic); }
.cov-more:hover span { transform: translateX(4px); }

@media (max-width: 820px) {
  .cov-panel { width: 100%; }
  .cov-article { grid-template-columns: 80px 1fr; }
  .cov-date { display: none; }
}

/* ── FOOTER (cream, giant serif nav) ─────────────────────────── */
.foot { background: var(--cream-bg); color: var(--ink-900); padding: 100px 0 50px; position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.foot-nav { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.foot-nav a { font-family: var(--serif); font-size: clamp(40px,7vw,90px); line-height: 1.05; letter-spacing: -.03em; color: var(--ink-900); transition: color var(--t-fast); cursor: none; }
.foot-nav a:hover { color: var(--gold); }
.foot-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 80px; padding-top: 28px;
  border-top: 1px solid rgba(26,20,12,.12);
  font-size: 13px; color: var(--ink-500);
}
.foot-disc {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.foot-copy { text-align: right; }
.foot-logo { font-family: var(--serif); font-size: 18px; color: var(--ink-900); }
.foot-logo .dot { color: var(--gold); }

/* ═══ Scroll Choreography (per-panel, obsidian-style) ═══════════
   各要素は初期状態で隠れ、親パネルに .active が付くと
   方向性を持って段階的に登場する。スクロールで再生される。
   ─────────────────────────────────────────────────────────────── */
[data-anim] {
  opacity: 0;
  transition: opacity 1.1s var(--f-cubic), transform 1.1s var(--f-cubic), clip-path 1.2s var(--f-cubic);
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
}
[data-anim="up"]    { transform: translateY(48px); }
[data-anim="down"]  { transform: translateY(-40px); }
[data-anim="left"]  { transform: translateX(-56px); }
[data-anim="right"] { transform: translateX(56px); }
[data-anim="scale"] { transform: scale(.86); }
[data-anim="rise"]  { transform: translateY(110%); }
[data-anim="clip"]  { clip-path: inset(0 0 100% 0); opacity: 1; }
[data-anim="fade"]  { transform: none; }

.active [data-anim] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* rise はオーバーフロー隠しの親が必要 */
.lines-mask { overflow: hidden; display: block; }

/* モバイル: 自然な縦スクロールに */
@media (max-width: 820px) {
  html, body { overflow: auto; }
  .hero, .section { min-height: auto; }
  .section { padding: 80px 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Info Overlay (About / Contact) ─────────────────────────── */
.iov {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
body.iov-open .iov.active { pointer-events: auto; }

.iov-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,7,3,.55);
  opacity: 0;
  transition: opacity var(--t-mid) var(--f-cubic);
  cursor: none;
}
.iov.active .iov-backdrop { opacity: 1; }

.iov-panel {
  position: relative; z-index: 1;
  width: 78vw; max-width: 860px;
  max-height: 88vh;
  background: rgba(20,15,9,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(241,234,222,.08);
  border-radius: 8px;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 100px rgba(5,3,1,.6);
  opacity: 0; transform: scale(.96);
  transition: opacity var(--t-mid) var(--f-cubic),
              transform var(--t-mid) var(--f-cubic);
}
.iov.active .iov-panel { opacity: 1; transform: scale(1); }

.iov-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 36px 22px;
  border-bottom: 1px solid rgba(241,234,222,.08);
  flex-shrink: 0;
}
.iov-title {
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  color: var(--on-dark-100); letter-spacing: -.02em;
}
.iov-close {
  padding: 10px 14px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-40); background: none; border: none; cursor: none;
  transition: color var(--t-fast);
}
.iov-close:hover { color: var(--on-dark-100); }

.iov-body {
  flex: 1;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 24px 36px;
  min-height: 0;
}
.iov-body::-webkit-scrollbar { width: 3px; }
.iov-body::-webkit-scrollbar-track { background: transparent; }
.iov-body::-webkit-scrollbar-thumb { background: rgba(241,234,222,.2); border-radius: 2px; }

/* iov open 中はカーソルをダーク背景用に強制 */
body.iov-open .cursor-ring { border-color: var(--on-dark-40) !important; }
body.iov-open .cursor-dot  { background: var(--gold) !important; }

.iov-sec { margin-bottom: 24px; }
.iov-sec:last-child { margin-bottom: 0; }
.iov-sec-title {
  font-family: var(--serif); font-size: 15px; font-weight: 400;
  color: var(--gold); letter-spacing: .04em;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(241,234,222,.1);
}
.iov-sec p {
  font-size: 12px; line-height: 1.9; color: var(--on-dark-40);
  margin-bottom: 10px;
}
.iov-sec p:last-child { margin-bottom: 0; }

.iov-dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; }
.iov-dl dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-40); padding-top: 2px; }
.iov-dl dd { font-size: 13px; color: var(--on-dark-100); }
.iov-link { color: var(--gold); border-bottom: 1px solid rgba(194,160,107,.3); transition: border-color var(--t-fast); }
.iov-link:hover { border-color: var(--gold); }

/* Contact form */
.iov-lead { font-size: 14px; line-height: 1.85; color: var(--on-dark-40); margin-bottom: 32px; }
.iov-body--contact { display: flex; flex-direction: column; }

.cf7 { display: flex; flex-direction: column; gap: 22px; }
.cf7-row { display: flex; flex-direction: column; gap: 8px; }
.cf7-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-40); }
.cf7-req { color: var(--gold); }
.cf7-input {
  background: rgba(241,234,222,.06);
  border: 1px solid rgba(241,234,222,.12);
  border-radius: 4px;
  padding: 13px 16px;
  font-size: 14px; font-family: var(--sans);
  color: var(--on-dark-100);
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cf7-input::placeholder { color: rgba(241,234,222,.2); }
.cf7-input:focus { border-color: rgba(194,160,107,.5); background: rgba(241,234,222,.09); }
.cf7-textarea { resize: vertical; min-height: 120px; }
.cf7-submit-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.cf7-btn {
  padding: 14px 36px;
  background: var(--gold); color: var(--brown-900);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  border: none; border-radius: 4px; cursor: none;
  font-family: var(--sans); font-weight: 500;
  transition: background var(--t-fast), transform var(--t-fast) var(--f-cubic);
}
.cf7-btn:hover { background: var(--gold-lt); transform: translateY(-1px); }

/* ═══ MOBILE ONLY (max-width: 820px) ══════════════════════════
   PCとタブレット表示には一切影響しない
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ── Hero ─────────────────────────────────────────────────── */
  .hero { min-height: 100svh; justify-content: flex-end; }
  .hero-gem {
    top: 32%; width: min(60vw, 320px);
    opacity: .75;
  }
  .hero-title {
    font-size: clamp(44px, 12vw, 72px);
  }
  .hero-content { padding: 0 20px 6vh; }
  .hero-foot { flex-direction: column; gap: 16px; align-items: flex-start; }
  .hero-desc { max-width: 100%; font-size: 13px; }
  .hero-scroll { display: none; }
  .hero-eyebrow { font-size: 9px; }

  /* ── Categories ─────────────────────────────────────────────
     2列グリッド + サブ項目は非表示（タップで展開） */
  .cats {
    padding-top: 56px; padding-bottom: 56px;
    min-height: auto; /* タイル展開時に画面外へはみ出ないよう可変に */
  }
  .cats-grid { grid-template-columns: repeat(min(2, var(--tile-count, 2)), 1fr); }
  .cats-bg-word { display: none; }
  .cats-img { display: none; }

  /* サブ項目はタップ（.open）で展開 */
  .ct-subs { max-height: 0; opacity: 0; overflow: hidden;
             transition: max-height .4s ease, opacity .3s ease; }
  .cat-tile.open .ct-subs { max-height: 300px; opacity: 1; }

  .cat-tile {
    padding: 16px 14px;
    transform: none !important;
    box-shadow: none !important;
    z-index: 0 !important;
  }
  .cat-tile:hover {
    transform: none !important; box-shadow: none !important;
    background: rgba(30,22,14,.6) !important; z-index: 0 !important;
  }
  .cat-tile.open { background: rgba(44,32,18,.9) !important; }
  .cat-tile::after { opacity: 0 !important; }

  .ct-num { font-size: 10px; }
  .ct-name { font-size: 15px; line-height: 1.3; }
  .ct-count { display: block; font-size: 10px; margin-top: auto; }
  .ct-subs li a { height: 40px; font-size: 12px; }

  /* ── Magazine ──────────────────────────────────────────────── */
  .mag {
    min-height: 100svh;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .mag-grid { grid-template-columns: 1fr; }
  .mag-main-img { aspect-ratio: 16/9; }
  .mag-main-body { padding: 18px 16px 20px; }
  .mag-main-title { font-size: clamp(18px, 5vw, 24px); }
  .mag-main-ex { display: none; }
  .mag-sub-img { aspect-ratio: 16/7; }
  .mag-sub-body { padding: 12px 16px 14px; }

  /* ── Category overlay ──────────────────────────────────────── */
  .cov-panel { width: 100%; border-radius: 0; }
  .cov-header { padding: 20px 20px 16px; }
  .cov-body { padding: 0 20px; }
  .cov-footer { padding: 16px 20px 24px; }
  .cov-article { grid-template-columns: 80px 1fr; gap: 14px; }
  .cov-date { display: none; }

  /* ── Info overlays (About/Contact) ─────────────────────────── */
  .iov-panel {
    width: 92vw;
    max-height: 88vh;
    border-radius: 6px;
  }
  .iov-header { padding: 20px 24px 16px; }
  .iov-body { padding: 20px 24px; }
  .iov-title { font-size: 22px; }

  /* ── Footer ─────────────────────────────────────────────────── */
  .foot { min-height: auto; padding: 60px 0 40px; justify-content: flex-start; }
  .foot-nav a { font-size: clamp(30px, 8vw, 46px); }
  .foot-meta {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .foot-logo { font-size: 16px; }
  .foot-copy { text-align: center; }
  .foot-disc { gap: 6px; }

  /* ── Header ─────────────────────────────────────────────────── */
  .hdr { padding: 18px 20px; }
  .hdr-logo { font-size: 18px; }
  /* 幅が足りないモバイルではテキストナビを隠し、ハンバーガーの全画面メニューに
     一本化する（フッターの大きな文字ナビは常に到達可能なまま） */
  .hdr-nav { display: none; }

  /* ── FSM (full screen menu) ─────────────────────────────────── */
  .fsm-link { font-size: clamp(36px, 10vw, 56px); }
}

/* ── Legal links (footer) ────────────────────────────────────── */
.foot-legal {
  display: flex; justify-content: center; gap: 28px;
  margin-top: 60px; padding-top: 24px;
  border-top: 1px solid rgba(26,20,12,.12);
  font-size: 13px;
}
.foot-legal a { color: var(--ink-500); transition: color var(--t-fast); }
.foot-legal a:hover { color: var(--ink-900); }
@media (max-width: 820px) {
  .foot-legal { flex-direction: column; align-items: center; gap: 12px; }
}

/* ── About overlay — legal links ─────────────────────────────── */
.iov-legal {
  display: flex; justify-content: center; gap: 24px;
  padding: 18px 0 4px;
  border-top: 1px solid rgba(241,234,222,.1);
  margin-top: 4px;
}
.iov-legal-link {
  font-size: 13px; letter-spacing: .04em;
  color: var(--on-dark-40);
  transition: color var(--t-fast);
  border-bottom: 1px solid rgba(241,234,222,.15);
  padding-bottom: 1px;
}
.iov-legal-link:hover { color: var(--gold); border-color: var(--gold); }

/* ═══ ARTICLE PAGE / CATEGORY ARCHIVE (single.php / category.php) ═══
   トップページと同じ世界観（ブラウン×クリーム×ゴールド）で統一
   ─────────────────────────────────────────────────────────────── */

/* スナップ無効の静的ヘッダー・フッター（記事・カテゴリページ用） */
.hdr--static { position: fixed; }
.foot--static {
  min-height: auto;
  padding: 90px 0 40px;
  justify-content: center;
}
.page-main { display: block; }

/* ── 記事ページ ── */
.post { background: var(--cream-bg); color: var(--ink-900); padding-top: 120px; }

.post-header { max-width: 820px; margin: 0 auto 32px; padding-top: 20px; }
.post-meta-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.post-cat {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(194,160,107,.4);
  padding: 5px 12px; border-radius: 100px;
  transition: background var(--t-fast), color var(--t-fast);
}
.post-cat:hover { background: var(--gold); color: var(--brown-900); }
.post-date { font-family: var(--serif); font-size: 13px; color: var(--ink-500); }
.post-verdict-chip {
  margin-left: auto;
  font-family: var(--serif); font-size: 14px; color: var(--gold);
  display: flex; align-items: baseline; gap: 5px;
}
.post-verdict-chip span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.post-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.3; letter-spacing: -.02em;
  color: var(--ink-900);
}

.post-hero { max-width: 900px; margin: 0 auto 40px; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

.post-body { max-width: 820px; margin: 0 auto; padding-bottom: 60px; }
.post-content { background: #fff; border-radius: 10px; padding: 8px clamp(20px, 4vw, 40px) 40px; box-shadow: 0 12px 48px rgba(20,16,10,.08); }

.post-related { max-width: 1100px; margin: 0 auto; padding: 40px 0 100px; border-top: 1px solid rgba(26,20,12,.1); }
.post-related .s-label { margin-top: 36px; }
.post-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-related-card { display: flex; flex-direction: column; cursor: none; }
.post-related-thumb { aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; background: var(--cream-200); margin-bottom: 12px; }
.post-related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-mid) var(--f-cubic); }
.post-related-card:hover .post-related-thumb img { transform: scale(1.05); }
.post-related-title { font-family: var(--serif); font-size: 16px; color: var(--ink-900); line-height: 1.4; margin-bottom: 6px; }
.post-related-date { font-family: var(--serif); font-size: 11px; color: var(--ink-500); }

@media (max-width: 820px) {
  .post { padding-top: 90px; }
  .post-related-grid { grid-template-columns: 1fr; }
  .post-verdict-chip { margin-left: 0; }
}

/* ── カテゴリアーカイブ ── */
.cat-archive { background: var(--cream-bg); color: var(--ink-900); padding: 130px 0 80px; min-height: 100svh; }
.cat-archive-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 5vw, 56px); letter-spacing: -.02em;
  color: var(--ink-900); margin: 16px 0 12px;
}
.cat-archive-desc { font-size: 14px; color: var(--ink-500); max-width: 560px; margin-bottom: 40px; }

.cat-archive-list { display: flex; flex-direction: column; margin-top: 32px; }
.cat-archive-item {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
  padding: 24px 0; border-top: 1px solid rgba(26,20,12,.1);
  cursor: none; transition: padding-left var(--t-fast) var(--f-cubic);
}
.cat-archive-list a:last-child { border-bottom: 1px solid rgba(26,20,12,.1); }
.cat-archive-item:hover { padding-left: 10px; }
.cat-archive-thumb { aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; background: var(--cream-200); }
.cat-archive-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-mid) var(--f-cubic); }
.cat-archive-item:hover .cat-archive-thumb img { transform: scale(1.05); }
.cat-archive-item-title { font-family: var(--serif); font-size: clamp(18px,2vw,24px); color: var(--ink-900); line-height: 1.4; margin-bottom: 8px; }
.cat-archive-excerpt { font-size: 13px; color: var(--ink-500); line-height: 1.7; margin-bottom: 12px; }
.cat-archive-meta { display: flex; gap: 16px; align-items: center; font-family: var(--serif); font-size: 12px; color: var(--ink-500); }
.cat-archive-verdict { color: var(--gold); }

.cat-archive-pagination { display: flex; justify-content: center; gap: 16px; margin-top: 50px; font-size: 13px; }
.cat-archive-pagination .page-numbers { color: var(--ink-500); padding: 8px 14px; transition: color var(--t-fast); }
.cat-archive-pagination .page-numbers.current { color: var(--gold); font-weight: 700; }
.cat-archive-pagination a.page-numbers:hover { color: var(--ink-900); }

@media (max-width: 820px) {
  .cat-archive { padding: 100px 0 60px; }
  .cat-archive-item { grid-template-columns: 110px 1fr; gap: 16px; }
}

/* 記事・カテゴリページはパネル(snap)がないため通常スクロールに戻す（JS未適用時の保険） */
html:has(body.single),
html:has(body.category),
html:has(body.archive) { overflow: auto; }
body.single, body.category, body.archive { overflow: auto; }

/* ═══ 記事本文スタイル (elab-*) — html_renderer.py が出力するクラス ═══
   視覚階層: 開示(最小) → メタ(小) → タイトル類(大) → 本文(中) → セクション見出し(中大)
   ─────────────────────────────────────────────────────────────── */
.elab-article{font-family:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif;color:#2A2015;font-size:17px;line-height:1.9;max-width:760px;margin:0 auto;background:#fff}
.elab-article *{box-sizing:border-box}

/* 開示バナー：最も控えめなトーン。本文と明確に差をつける */
.elab-disclosure{
  display:flex; flex-direction:column; gap:3px;
  border-left:2px solid #D9C9A8; padding:8px 0 8px 14px;
  margin-bottom:28px;
  font-size:11px; color:#9A8C76; line-height:1.7;
}
.elab-disclosure strong{
  display:block; font-size:10px; letter-spacing:.08em;
  color:#B0A088; font-weight:700; margin-bottom:2px;
}

/* 免責バナー */
.elab-caution{background:#FFF8E8;border-left:3px solid #C2A06B;padding:12px 16px;margin:24px 0;font-size:12px;color:#6B5B44;line-height:1.7;border-radius:0 6px 6px 0}

/* ヘッダーメタ行：カテゴリバッジ＋日付＋AI表記を明確に区切る */
.elab-hero-wrap{position:relative;margin-bottom:28px}
.elab-hero{width:100%;border-radius:10px;overflow:hidden;aspect-ratio:16/9;object-fit:cover;display:block}
.elab-hero-caption{position:absolute;bottom:10px;right:12px;font-size:10px;color:rgba(255,255,255,.75);background:rgba(20,16,10,.55);padding:3px 9px;border-radius:20px;backdrop-filter:blur(3px)}
.elab-meta{
  display:flex; align-items:center; gap:0;
  font-size:11px; color:#A89A84; margin-bottom:14px; flex-wrap:wrap;
}
.elab-meta span{ display:inline-flex; align-items:center; }
.elab-meta span:not(:last-child)::after{
  content:'·'; margin:0 10px; color:#D9C9A8; font-weight:700;
}
.elab-badge{
  display:inline-flex; align-items:center; gap:5px;
  background:#14100A; color:#C2A06B;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:5px 14px; border-radius:20px;
  margin-bottom:14px;
}

/* タイトル直下の余白を明確に */
.elab-article > .elab-meta + h1,
.elab-article > h1 { margin-top:4px; margin-bottom:24px; }

/* Verdict：スコアリングの中央配置を確実化 */
.elab-verdict{background:#F7F3EC;border:1px solid #D9C9A8;border-radius:12px;padding:28px;margin:32px 0;position:relative;overflow:hidden}
.elab-verdict::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#C2A06B,#D9BE8E)}
.elab-verdict-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9A8C76;margin-bottom:18px}
.elab-verdict-inner{display:flex;align-items:center;gap:24px}
.elab-score-ring{position:relative;width:84px;height:84px;flex:0 0 84px;display:flex;align-items:center;justify-content:center}
.elab-score-ring svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}
.elab-score-num{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.elab-score-num .n{font-size:24px;font-weight:700;color:#C2A06B;line-height:1.1}
.elab-score-num .l{font-size:9px;color:#9A8C76;letter-spacing:.06em;margin-top:2px}
.elab-verdict-summary{font-size:14px;color:#4A3820;line-height:1.8}
.elab-verdict-note{font-size:11px;color:#9A8C76;margin-top:18px;padding-top:16px;border-top:1px solid #E8DDD0;line-height:1.7}

/* 7軸評価表 */
.elab-eval-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:13px}
.elab-eval-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9A8C76;background:#F7F3EC;border-bottom:1px solid #E8DDD0}
.elab-eval-table td{padding:13px 14px;border-bottom:1px solid #F0E8DA;vertical-align:top;line-height:1.6}
.elab-eval-table .axis{color:#2A2015;font-weight:600;width:32%}
.elab-eval-table .score-cell{color:#C2A06B;font-weight:700;width:14%;font-size:14px}
.elab-eval-table .note-cell{color:#6B5B44;font-size:13px}
.elab-eval-table tr:last-child td{border-bottom:none}

/* 複数商品比較マトリクス（elab-cmp）: 2026-07-20〜 横スクロールする11列テーブルを廃止し、
   商品1件=カード1枚の縦積み表示に変更（どの画面幅でも横スクロールが発生しない）。
   全商品を同じカード構成で並べることで公正性（提携有無で表示を変えない）を維持する。 */
.elab-cmp{margin:28px 0}
.elab-cmp-head{
  padding:14px 18px; background:#F7F3EC;
  border:1px solid #D9C9A8; border-bottom:none;
  border-radius:10px 10px 0 0;
  font-size:15px; font-weight:700; color:#2A2015;
}
/* 1つの連続した表: 横に「商品｜7軸｜総合」を並べ、縦罫線でスコアを商品間比較しやすく。
   寸評・ボタンは各商品の2行目以降に全幅で出し、罫線は次商品へ連続する。
   table-layout:fixed + width:100% で横スクロールを出さない。 */
.elab-cmp-table{
  width:100%; max-width:100%; min-width:0; border-collapse:collapse; table-layout:fixed;
  border:1px solid #D9C9A8; font-size:13px;
}
/* 2026-07-22修正: table-layout:fixedでも、幅未指定のセルはブラウザが内容(特に
   日本語ラベルの改行しにくい実測幅)を基準に列を広げてしまい、ページが右にはみ出す
   実害が本番で発生した。全<th>/<td>に min-width:0 を明示して内容依存の拡張を止める。 */
.elab-cmp-table th,.elab-cmp-table td{
  border:1px solid #D9C9A8; padding:8px 6px; line-height:1.4;
  overflow-wrap:anywhere; min-width:0; max-width:100%;
}
.elab-cmp-table thead th{
  background:#14100A; color:#F1EADE; font-weight:700;
  font-size:11.5px; text-align:center; vertical-align:middle;
}
.elab-cmp-c-name{width:20%; text-align:left !important}
.elab-cmp-c-total{width:11%}
/* 7軸の列は必ずクラスで幅を明示する（軸数は可変だが7が既定）。
   幅未指定のまま残さないことが本修正の核心。 */
.elab-cmp-c-axis{width:9.86%}
.elab-cmp-table thead .elab-cmp-c-total{background:#4A3820}
.elab-cmp-r-score th.elab-cmp-c-name{
  background:#F7F3EC; color:#14100A; font-weight:700; text-align:left;
  font-size:14px; vertical-align:middle;
}
.elab-cmp-r-score td{
  text-align:center; font-weight:700; color:#C2A06B; font-size:15px;
  background:#fff; vertical-align:middle;
}
.elab-cmp-r-score td.elab-cmp-c-total{background:#FBF7EF; color:#14100A; font-size:17px}
/* 各列(7軸＋総合)で最高点のセルを強調（生成時に列maxを計算して付与） */
/* 最高点セル: 通常セルの金文字(#C2A06B on 白)と紛れないよう、濃い金地×白文字ではっきり強調する。
   小さな★を先頭に付けて色覚に依存しない見分け方も添える。 */
.elab-cmp-r-score td.elab-cmp-best{
  background:#C2A06B; color:#fff; font-weight:800;
  box-shadow:inset 0 0 0 2px #8A6C3E;
}
.elab-cmp-r-score td.elab-cmp-best::before{content:'★ '; font-size:11px}
.elab-cmp-r-score td.elab-cmp-c-total.elab-cmp-best{
  background:#8A6C3E; color:#fff;
  box-shadow:inset 0 0 0 2px #C2A06B;
}
/* 寸評行（全幅・縦罫線は上下のスコア行で連続） */
.elab-cmp-r-note td{
  background:#FBF7EF; color:#3A2E1C; font-size:14.5px; line-height:1.8;
  text-align:left; padding:12px 14px;
}
/* ボタン行（全幅・従来CTAと同じ明確なボタン）。
   2026-07-24: 実物バナーは比較表内から撤去（表内では小さく印象が薄いとの指摘）。
   バナーは各商品の評価セクション・末尾CTAという独立した見せ場に大きく表示する
   （.elab-banner-link を参照。render_section/render_cta 経由）。 */
.elab-cmp-r-btn td{background:#fff; padding:12px 14px 16px; text-align:center}
.elab-cmp-btn{
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 10px;
  max-width:100%; box-sizing:border-box;
  background:#C2A06B; color:#14100A !important;
  font-weight:700; font-size:15px; letter-spacing:.02em;
  padding:13px 28px; min-height:48px;
  border-radius:8px; text-decoration:none !important;
  transition:background .2s, transform .2s;
}
.elab-cmp-btn-arrow{transition:transform .2s}
.elab-cmp-btn:hover,.elab-cmp-btn:focus-visible{
  background:#D9BE8E; transform:translateY(-1px);
  outline:2px solid #9A8C76; outline-offset:2px;
}
.elab-cmp-btn:hover .elab-cmp-btn-arrow{transform:translateX(3px)}
.elab-cmp-btn-none{
  background:#EDE7DB; color:#9A8C76 !important; font-weight:700;
  display:inline-flex; align-items:center; min-height:44px; padding:11px 20px; border-radius:8px;
}
.elab-cmp-pr{
  display:inline-block; margin-left:2px;
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:#14100A; background:rgba(20,16,10,.14); border-radius:4px;
  padding:2px 6px; vertical-align:middle;
}
.elab-cmp-foot{
  font-size:12px; color:#9A8C76; line-height:1.7;
  border:1px solid #D9C9A8; border-top:none;
  border-radius:0 0 10px 10px; padding:10px 14px; background:#F7F3EC;
}

/* 本文中のリンク（出典・関連記事）：色付き＋下線で「押せる」ことを分かりやすくする */
.elab-methodology a,
.elab-related-list a,
.elab-section-body a{
  color:#9C7C3F !important;
  text-decoration:none;
  border-bottom:1px solid rgba(156,124,63,.45);
  transition:border-color .2s, color .2s;
}
.elab-methodology a:hover,
.elab-related-list a:hover,
.elab-section-body a:hover{
  color:#C2A06B !important;
  border-bottom-color:#C2A06B;
}

/* 本文セクション：結論の先出し＋折りたたみ詳細（elab-sec / 2026-07-18追加）
   シニア読者が要点を一目で掴めるよう、一言結論(elab-sec-lead)を大きく見せ、
   詳細段落はネイティブ<details>（JS不要）に格納して既定で畳んでおく。 */
.elab-sec{margin:32px 0}
.elab-sec-lead{
  font-size:19px; font-weight:700; line-height:1.6;
  color:#14100A;
  background:#F7F3EC;
  border-left:4px solid #C2A06B;
  padding:14px 18px;
  margin:14px 0 16px;
  border-radius:0 8px 8px 0;
}
.elab-sec-more{margin-top:4px}
.elab-sec-more summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; box-sizing:border-box;
  padding:10px 20px;
  font-size:14.5px; font-weight:700; color:#9C7C3F;
  background:#fff; border:1.5px solid #C2A06B; border-radius:24px;
  transition:background .2s, color .2s, transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.elab-sec-more summary::-webkit-details-marker{display:none}
.elab-sec-more summary::marker{content:''}
.elab-sec-more summary::after{
  content:'▼'; font-size:10px; color:#C2A06B;
  transition:transform .25s var(--f-cubic, ease);
}
.elab-sec-more[open] summary::after{transform:rotate(180deg)}
.elab-sec-more summary:hover{background:#F7F3EC; transform:translateY(-1px)}
.elab-sec-more summary:focus-visible{
  outline:2px solid #9A8C76; outline-offset:2px;
}
.elab-sec-more[open] summary{
  background:#14100A; color:#C2A06B; border-color:#14100A;
}
.elab-sec-more .elab-section-body{
  padding:18px 4px 4px; font-size:17px; line-height:1.9; color:#2A2015;
}
.elab-sec-more .elab-section-body p{margin:0 0 16px}
.elab-sec-more .elab-section-body p:last-child{margin-bottom:0}

/* メリット・デメリット */
.elab-pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
@media(max-width:540px){.elab-pc{grid-template-columns:1fr}}
.elab-pc-box{background:#F7F3EC;border:1px solid #E8DDD0;border-radius:10px;padding:18px}
.elab-pc-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.elab-pc-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;font-size:13.5px;color:#3A2E1C;line-height:1.7}
.elab-pc-item:last-child{margin-bottom:0}
.elab-pc-dot{width:5px;height:5px;border-radius:50%;margin-top:7px;flex-shrink:0}

/* 比較表 */
.elab-compare{border:1px solid #E8DDD0;border-radius:10px;overflow:hidden;margin:28px 0}
.elab-compare-head{padding:14px 18px;background:#F7F3EC;border-bottom:1px solid #E8DDD0;font-size:13px;font-weight:700;color:#2A2015}
.elab-table{width:100%;border-collapse:collapse;font-size:13px}
.elab-table th{padding:11px 16px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9A8C76;background:#F7F3EC;border-bottom:1px solid #E8DDD0}
.elab-table td{padding:12px 16px;border-bottom:1px solid #F0E8DA;color:#3A2E1C;line-height:1.7}
.elab-table tr:last-child td{border-bottom:none}
.elab-table .label{color:#9A8C76;font-weight:500}

/* FAQ: 2026-07-20〜 ネイティブ<details>によるアコーディオンに変更（既定で折りたたみ）。
   questionが<summary>になったため既定マーカーを消し、▼はopen時に回転させる。 */
.elab-faq{margin:28px 0}
.elab-faq-item{border:1px solid #E8DDD0;border-radius:10px;margin-bottom:10px;overflow:hidden}
.elab-faq-q{
  padding:16px 18px;font-size:13.5px;font-weight:700;color:#2A2015;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  background:#F7F3EC;gap:12px;
  list-style:none; min-height:44px; box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
.elab-faq-q::-webkit-details-marker{display:none}
.elab-faq-q::marker{content:''}
.elab-faq-caret{color:#C2A06B;font-size:11px;transition:transform .25s}
.elab-faq-item[open] .elab-faq-caret{transform:rotate(180deg)}
.elab-faq-q:hover{background:#F1E9D9}
.elab-faq-q:focus-visible{outline:2px solid #9A8C76;outline-offset:2px}
.elab-faq-a{padding:14px 18px;font-size:13.5px;color:#3A2E1C;line-height:1.8;background:#fff}

/* CTA：個別ボタンとして強調デザイン */
.elab-cta{
  background:linear-gradient(135deg,#1C160E,#14100A);
  border-radius:14px; padding:28px 28px 24px;
  margin:32px 0; position:relative; overflow:hidden;
}
.elab-cta::after{
  content:''; position:absolute; top:-40%; right:-10%;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(194,160,107,.18),transparent 70%);
}
.elab-cta-product{position:relative;font-size:18px;font-weight:700;color:#F1EADE;margin-bottom:4px}
.elab-cta-price{position:relative;font-size:22px;font-weight:700;color:#C2A06B;margin-bottom:14px}
.elab-cta-price::before{content:'¥';font-size:14px;margin-right:2px;opacity:.7}
.elab-cta-note{position:relative;font-size:11px;color:rgba(241,234,222,.45);margin-top:14px;line-height:1.7}
.elab-cta-btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  background:#C2A06B; color:#14100A;
  font-size:13.5px; font-weight:700; padding:14px 30px;
  border-radius:8px; text-decoration:none; letter-spacing:.03em;
  transition:background .25s, transform .25s; margin-top:18px;
}
.elab-cta-btn:hover{background:#D9BE8E; transform:translateY(-1px)}
.elab-cta-arrow{transition:transform .25s}
.elab-cta-btn:hover .elab-cta-arrow{transform:translateX(3px)}

/* 実物バナー付きクリックリンク（2026-07-24新設）: 商品評価セクション(隠れる部分の上)・
   末尾CTAの両方から共通で使う、同じ見た目・サイズのバナーリンク。比較表内には置かない。
   .elab-cta（ダーク背景）・.elab-sec（明るい背景）のどちらに置かれても浮かないよう
   白背景＋枠のカードにして自己完結させる。 */
.elab-banner-link{
  position:relative; display:block;
  max-width:420px; margin:18px auto; text-align:center;
  background:#fff; border:1px solid #D9C9A8; border-radius:12px;
  padding:10px; box-shadow:0 4px 16px rgba(20,16,10,.08);
  text-decoration:none !important;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.elab-banner-link:hover,.elab-banner-link:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(20,16,10,.14);
  border-color:#C2A06B;
  outline:none;
}
.elab-banner-link-img{
  display:block; width:100%; height:auto; max-height:300px;
  object-fit:contain; border-radius:6px; margin:0 auto;
}
.elab-banner-link-pr{
  position:absolute; top:8px; right:8px;
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:#14100A; background:rgba(194,160,107,.9); border-radius:4px;
  padding:2px 7px;
}

/* まとめ・フック */
.elab-summary{background:#F7F3EC;border-left:3px solid #C2A06B;border-radius:0 10px 10px 0;padding:18px 22px;margin:24px 0;font-size:13.5px;color:#3A2E1C;line-height:1.85}
.elab-hook{font-size:15px;color:#2A2015;line-height:1.95;margin-bottom:28px}
.elab-h2{font-size:19px;font-weight:700;color:#14100A;margin:40px 0 16px;padding-bottom:10px;border-bottom:1px solid #E8DDD0;letter-spacing:-.01em}

/* for-whom */
.elab-for-whom{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
@media(max-width:540px){.elab-for-whom{grid-template-columns:1fr}}
.elab-for-box{background:#F7F3EC;border:1px solid #E8DDD0;border-radius:10px;padding:16px 18px;font-size:13.5px;color:#3A2E1C;line-height:1.75}
.elab-for-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:#9A8C76}

/* -- CF7 -------------------------------------------------------- */
.wpcf7{width:100%}.wpcf7-form{display:flex;flex-direction:column;gap:22px}
.wpcf7-form p{display:flex;flex-direction:column;gap:8px;margin:0}
.wpcf7-form p br{display:none}
.wpcf7-form label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(241,234,222,.5)}
.wpcf7-form .wpcf7-form-control-wrap{display:block}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form textarea{width:100%;background:rgba(241,234,222,.06);border:1px solid rgba(241,234,222,.12);border-radius:4px;padding:13px 16px;font-size:14px;color:rgba(241,234,222,.9);outline:none;box-sizing:border-box;transition:border-color .3s,background .3s}
.wpcf7-form input::placeholder,.wpcf7-form textarea::placeholder{color:rgba(241,234,222,.2)}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{border-color:rgba(194,160,107,.5);background:rgba(241,234,222,.09)}
.wpcf7-form textarea{resize:vertical;min-height:120px}
.wpcf7-form input[type=submit]{align-self:flex-end;padding:14px 36px;background:#C2A06B;color:#14100A;font-size:13px;letter-spacing:.12em;text-transform:uppercase;border:none;border-radius:4px;cursor:pointer;transition:background .3s,transform .3s}
.wpcf7-form input[type=submit]:hover{background:#D9BE8E;transform:translateY(-1px)}
.wpcf7-not-valid-tip{font-size:11px;color:#e88;margin-top:4px}
.wpcf7-response-output{font-size:13px;padding:12px 16px;border-radius:4px;margin-top:8px;border:1px solid rgba(194,160,107,.3);color:rgba(241,234,222,.7)}
/* 素のWP/Gutenbergテーブル用の汎用リセット。.elab-cmp-table(記事の比較表システム)は
   除外する（2026-07-22修正: この汎用ルールのth幅160px指定が.elab-cmp-tableのthにも
   詳細度で勝って適用され、9列×160px=1440pxとなりページが右にはみ出す実害があった） */
.post-content table:not(.elab-cmp-table){width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.post-content table:not(.elab-cmp-table) th{text-align:left;width:160px;padding:12px 16px;color:var(--ink-500);background:var(--cream-200);border-bottom:1px solid rgba(26,20,12,.1);vertical-align:top}
.post-content table:not(.elab-cmp-table) td{padding:12px 16px;border-bottom:1px solid rgba(26,20,12,.1)}