@charset "UTF-8";
/* =========================================================
   DX LIVE攻略ガイド — custom.css
   配色：黒 × シャンパンゴールド × ディープワインレッド
   本文は16px基準（最小14px）／コンテナ1200px基準
   ========================================================= */

:root {
  --clr-bg:          #0d0b10;
  --clr-bg-alt:      #14111a;
  --clr-card:        #191520;
  --clr-card-hover:  #211b2b;
  --clr-line:        #302a3a;
  --clr-gold:        #d4af6a;
  --clr-gold-bright: #eccd93;
  --clr-wine:        #8c1f3d;
  --clr-wine-bright: #b52a4f;
  --clr-text:        #ece8f0;
  --clr-text-sub:    #b9b2c4;
  --clr-text-muted:  #857d92;
  --clr-white:       #ffffff;

  --font-jp:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-deco:  "Cormorant Garamond", "Times New Roman", serif;

  --container:  1200px;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow:     0 4px 24px rgba(0, 0, 0, .45);
  --shadow-gold: 0 6px 28px rgba(212, 175, 106, .18);
}

/* ── リセット・基礎 ──────────────────────────────────────── */
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  /* 🔴 word-break:keep-all は <wbr>（BudouX）とセットでないと使ってはいけない。
     単体で付けると日本語の連なりが分割不能になり、狭いカラムで
     「DX ／ LIVEは1分ごとの…」のような不自然な折り返しになる（実測で発覚）。
     → 2026-08-03に /jp-linebreak で <wbr> を全本文へ埋め込んだので、
        SP（600px以下）に限りファイル末尾で keep-all を当てている。body既定はこのまま。 */
  overflow-wrap: break-word;
  line-break: strict;
}
body.nav-locked { overflow: hidden; }

a { color: var(--clr-gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--clr-gold-bright); }

img { max-width: 100%; height: auto; }

.l-main { display: block; }

.section-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* 横に長いものは自分の中でスクロールさせる（本文は横スクロールさせない） */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 32px 0; }

/* ── 年齢確認バー ─────────────────────────────────────────── */
.dxk-age-bar {
  margin: 0;
  padding: 8px 16px;
  background: var(--clr-wine);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: .03em;
}
.dxk-age-bar strong { color: #fff; }

/* ── ヘッダー ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 11, 16, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-line);
  transition: padding .2s;
}
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.6); }

/* 🔴 ヘッダーは本文コンテナ幅(--container)に揃えず、画面幅いっぱいに広げる。
   ナビ項目が増えて 1200px では収まらなくなったため（実測で窮屈）。 */
.header-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
@media (min-width: 1600px) {
  .header-inner { padding-left: 48px; padding-right: 48px; }
}
.site-header.is-scrolled .header-inner { padding-top: 9px; padding-bottom: 9px; }

.header-logo a { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.logo-mark {
  font-family: var(--font-deco);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--clr-gold);
}
.logo-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: .08em;
}

.logo-mark-img {
  display: block;
  height: 34px; width: auto;
  margin-right: 2px;
  /* 支給素材にグロウが焼き込まれているので、暗い背景で滲まない程度に締める */
  filter: saturate(1.05) contrast(1.06);
}
.site-header.is-scrolled .logo-mark-img { height: 30px; }
.footer-logo .logo-mark-img { height: 30px; }
.logo-img { display: block; height: 40px; width: auto; }
.footer-logo .logo-img { height: 34px; }

.header-logo { margin-right: 26px; }
.header-nav { margin-left: auto; }
.nav-list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-sub);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav-list a:hover { color: var(--clr-gold); border-bottom-color: var(--clr-gold); }

.btn-header-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--clr-wine-bright), var(--clr-wine));
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(181, 42, 79, .4);
}
.btn-header-cta:hover { filter: brightness(1.12); color: #fff !important; }
.btn-header-cta-sub { font-size: 11px; font-weight: 500; opacity: .9; }

.nav-toggle {
  display: none;
  width: 42px; height: 36px;
  background: none; border: 0; cursor: pointer;
  padding: 0; position: relative;
}
.nav-toggle span {
  display: block;
  height: 2px; width: 26px;
  margin: 6px auto;
  background: var(--clr-text);
  transition: transform .25s, opacity .25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── ボタン ───────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-outline {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .03em;
  transition: transform .2s, filter .2s, background .2s, color .2s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--clr-wine-bright), var(--clr-wine));
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(181, 42, 79, .38);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff !important; }
.btn-large { padding: 20px 48px; font-size: 18px; }

.btn-secondary {
  border: 1px solid var(--clr-gold);
  color: var(--clr-gold) !important;
}
.btn-secondary:hover { background: rgba(212, 175, 106, .1); }

.btn-outline {
  border: 1px solid var(--clr-line);
  color: var(--clr-text-sub) !important;
  padding: 13px 26px;
  font-size: 15px;
}
.btn-outline:hover { border-color: var(--clr-gold); color: var(--clr-gold) !important; }

/* ── セクション共通 ───────────────────────────────────────── */
/* 🔴 [class$="-section"] は0件マッチだった（class="stance-section fade-in" のため末尾が
   fade-in になる）。部分一致にしないと全セクションの余白が消える。実測で発覚。 */
section[class*="-section"] { padding: 104px 0; }

.section-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--clr-gold);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.section-title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
  line-height: 1.5;
  margin: 0 0 26px;
  color: var(--clr-white);
}
.section-title em {
  font-style: normal;
  color: var(--clr-gold);
  background: linear-gradient(transparent 68%, rgba(212, 175, 106, .22) 68%);
}
.section-lead {
  font-size: 16px;
  line-height: 2;
  color: var(--clr-text-sub);
  margin: 0 0 40px;
  max-width: 880px;
}
.section-source {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 28px 0 0;
}
.section-cta { margin-top: 56px; text-align: center; }
.section-cta-note { font-size: 13px; color: var(--clr-text-muted); margin: 14px 0 0; }

.fade-in { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.fade-in.is-visible { opacity: 1; transform: none; }

.sp-only { display: none; }

/* ── ヒーロー ─────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 104px 0 88px;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(140, 31, 61, .38), transparent 68%),
    radial-gradient(700px 420px at 12% 92%, rgba(212, 175, 106, .13), transparent 70%),
    linear-gradient(180deg, #120f17 0%, var(--clr-bg) 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 100% 4px;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.hero-badge {
  display: inline-block;
  margin: 0 0 22px;
  padding: 7px 16px;
  border: 1px solid rgba(212, 175, 106, .45);
  border-radius: 999px;
  background: rgba(212, 175, 106, .07);
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-gold);
  letter-spacing: .04em;
}
.hero-title {
  font-size: clamp(30px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 24px;
  color: var(--clr-white);
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--clr-gold-bright), var(--clr-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead {
  font-size: 17px;
  line-height: 2;
  color: var(--clr-text-sub);
  margin: 0 0 34px;
  max-width: 720px;
}
.hero-lead strong { color: var(--clr-text); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.hero-notes li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--clr-text-sub);
}
.hero-notes li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--clr-gold);
  font-weight: 700;
}
.hero-notes strong { color: var(--clr-gold-bright); }
.hero-source { font-size: 12px; color: var(--clr-text-muted); margin: 0; }

/* ── 立ち位置 ─────────────────────────────────────────────── */
.stance-section { background: var(--clr-bg-alt); }
.stance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.stance-item {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: border-color .25s, transform .25s;
}
.stance-item:hover { border-color: rgba(212, 175, 106, .5); transform: translateY(-3px); }
.stance-num {
  font-family: var(--font-deco);
  font-size: 30px;
  font-weight: 700;
  color: var(--clr-gold);
  opacity: .55;
  margin: 0 0 8px;
  line-height: 1;
}
.stance-item h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--clr-white);
  margin: 0 0 12px;
}
.stance-item p { font-size: 15px; line-height: 1.95; color: var(--clr-text-sub); margin: 0; }
.stance-item strong { color: var(--clr-gold-bright); }

/* ── 無料でできること ─────────────────────────────────────── */
.free-section { background: var(--clr-bg); }
.free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.free-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color .25s, transform .25s;
}
.free-card:hover { border-color: rgba(212, 175, 106, .5); transform: translateY(-3px); }
.free-card.is-highlight {
  background: linear-gradient(160deg, rgba(212, 175, 106, .12), rgba(140, 31, 61, .12));
  border-color: rgba(212, 175, 106, .5);
}
.free-num {
  font-family: var(--font-deco);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-gold);
  margin: 0 0 14px;
}
.free-num span { font-size: 18px; margin-left: 2px; }
.free-card h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--clr-white);
  margin: 0 0 12px;
}
.free-card p { font-size: 15px; line-height: 1.9; color: var(--clr-text-sub); margin: 0; }

/* ── ライブ埋め込みの補足 ─────────────────────────────────── */
.live-note {
  max-width: 860px;
  margin: 32px auto 0;
  padding: 20px 24px;
  background: rgba(212, 175, 106, .07);
  border: 1px solid rgba(212, 175, 106, .3);
  border-radius: var(--radius);
}
.live-note p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--clr-text-sub); }
.live-note strong { color: var(--clr-gold-bright); }

/* ── 料金セクション ───────────────────────────────────────── */
.price-section { background: var(--clr-bg); }

.price-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15px;
}
.price-table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--clr-text-muted);
  padding-bottom: 10px;
}
.price-table th,
.price-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--clr-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
/* 🔴 Arkheが th に明るい背景を当てるため、必ず background を打ち消す。
   打ち消さないと白背景＋白文字で読めなくなる（実測で発生した） */
.price-table th { background: transparent; }
.price-table thead th {
  background: rgba(212, 175, 106, .1);
  color: var(--clr-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.price-table tbody th { color: var(--clr-white); font-weight: 700; white-space: nowrap; }
.price-table tbody td { color: var(--clr-text-sub); }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tr.is-base { background: rgba(140, 31, 61, .16); }
.price-table tr.is-base td strong { color: var(--clr-gold-bright); font-size: 17px; }
.price-table tr.is-best { background: rgba(212, 175, 106, .1); }
.price-table tr.is-best td strong { color: var(--clr-gold-bright); }
.price-table.is-compact th,
.price-table.is-compact td { padding: 12px 16px; white-space: nowrap; }

.tag-vip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--clr-gold);
  color: #1a1520;
  font-size: 12px;
  font-weight: 700;
}

.price-example {
  background: var(--clr-card);
  border-left: 3px solid var(--clr-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin: 28px 0;
}
.price-example-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-gold);
  margin: 0 0 10px;
}
.price-example ul { margin: 0; padding-left: 20px; }
.price-example li { font-size: 15px; color: var(--clr-text-sub); margin-bottom: 6px; }
.price-example strong { color: var(--clr-white); }

.price-insight {
  margin-top: 64px;
  padding: 40px 36px;
  background: linear-gradient(160deg, rgba(212, 175, 106, .09), rgba(140, 31, 61, .1));
  border: 1px solid rgba(212, 175, 106, .34);
  border-radius: var(--radius-lg);
}
.price-insight-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--clr-gold);
  color: #1a1520;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.price-insight h3 {
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--clr-white);
  margin: 0 0 16px;
}
.price-insight h3 em {
  font-style: normal;
  color: var(--clr-gold);
  background: linear-gradient(transparent 68%, rgba(212, 175, 106, .25) 68%);
}
.price-insight > p { font-size: 16px; color: var(--clr-text-sub); margin: 0 0 8px; }
.price-insight strong { color: var(--clr-gold-bright); }
.price-insight-note {
  font-size: 13px !important;
  color: var(--clr-text-muted) !important;
  margin-top: 16px !important;
  line-height: 1.8;
}
.price-insight-warn {
  margin-top: 18px !important;
  padding: 14px 18px;
  background: rgba(181, 42, 79, .16);
  border-left: 3px solid var(--clr-wine-bright);
  border-radius: 0 6px 6px 0;
  font-size: 14px !important;
  color: var(--clr-text-sub) !important;
}

/* ── 半額チャット ─────────────────────────────────────────── */
.hangaku-section { background: var(--clr-bg-alt); }
.hangaku-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 36px 0;
  flex-wrap: wrap;
}
.hangaku-step {
  flex: 1 1 220px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.hangaku-step-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--clr-gold);
  margin: 0 0 8px;
}
.hangaku-step-body { font-size: 15px; color: var(--clr-text); margin: 0; line-height: 1.7; }
.hangaku-arrow {
  display: flex;
  align-items: center;
  color: var(--clr-gold);
  opacity: .5;
  font-size: 14px;
}

.callout {
  padding: 22px 26px;
  border-radius: var(--radius);
  margin: 22px 0;
}
.callout-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: 15px; line-height: 1.85; margin: 0 0 8px; }
.callout.is-alert {
  background: rgba(181, 42, 79, .14);
  border: 1px solid rgba(181, 42, 79, .45);
}
.callout.is-alert .callout-title { color: #ff8fa8; }
.callout.is-alert p { color: var(--clr-text-sub); }
.callout.is-alert strong { color: var(--clr-white); }
.callout.is-gold {
  background: rgba(212, 175, 106, .09);
  border: 1px solid rgba(212, 175, 106, .38);
}
.callout.is-gold .callout-title { color: var(--clr-gold); }
.callout.is-gold p { color: var(--clr-text-sub); }
.callout.is-gold strong { color: var(--clr-gold-bright); }

/* ── ライブ埋め込み ───────────────────────────────────────── */
.live-section { background: var(--clr-bg); }
.dxk-girls-embed {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);
  /* 幅はJSがコンテナ実幅から算出するので横スクロールは発生しない */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.dxk-girls-frame { border-radius: 6px; }
.live-more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 28px 0 0;
}

/* ── 機能カード ───────────────────────────────────────────── */
.features-section { background: var(--clr-bg-alt); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.feature-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: border-color .25s, transform .25s, background .25s;
}
.feature-card:hover {
  border-color: rgba(212, 175, 106, .5);
  background: var(--clr-card-hover);
  transform: translateY(-3px);
}
.feature-icon { font-size: 28px; margin: 0 0 12px; line-height: 1; }
.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-white);
  margin: 0 0 12px;
  line-height: 1.5;
}
.feature-card p { font-size: 15px; line-height: 1.95; color: var(--clr-text-sub); margin: 0 0 10px; }
.feature-card strong { color: var(--clr-gold-bright); }
.feature-link { margin: 14px 0 0 !important; font-size: 14px !important; }

/* ── 記事カード ───────────────────────────────────────────── */
.posts-section { background: var(--clr-bg); }
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 44px;
}
.post-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s, border-color .25s;
}
.post-card:hover { transform: translateY(-4px); border-color: rgba(212, 175, 106, .5); }
.post-card-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-card-thumb img { transform: scale(1.05); }
.post-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card-cat {
  align-self: flex-start;
  padding: 3px 11px;
  border-radius: 4px;
  background: rgba(212, 175, 106, .16);
  color: var(--clr-gold);
  font-size: 12px;
  font-weight: 700;
}
.post-card-title { font-size: 17px; font-weight: 700; line-height: 1.6; margin: 0; }
.post-card-title a { color: var(--clr-text); }
.post-card-title a:hover { color: var(--clr-gold); }
.post-card-date { font-size: 13px; color: var(--clr-text-muted); margin: auto 0 0; }
.posts-more { text-align: center; margin-top: 40px; }
.posts-empty { color: var(--clr-text-muted); font-size: 15px; }

/* ── カテゴリカード ───────────────────────────────────────── */
.category-section { background: var(--clr-bg-alt); }
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.category-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 14px;
  align-items: center;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color .25s, transform .25s;
}
.category-card:hover { border-color: rgba(212, 175, 106, .55); transform: translateY(-3px); }
.category-card-icon { grid-row: 1 / 3; font-size: 24px; text-align: center; }
.category-card-name { font-size: 16px; font-weight: 700; color: var(--clr-white); }
.category-card-desc { font-size: 13px; color: var(--clr-text-muted); line-height: 1.6; }

/* ── 最終CTA ──────────────────────────────────────────────── */
.final-cta-section {
  background:
    radial-gradient(720px 400px at 50% 0%, rgba(140, 31, 61, .42), transparent 70%),
    var(--clr-bg);
  text-align: center;
}
.final-cta-title {
  font-size: clamp(24px, 4.4vw, 40px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--clr-white);
  margin: 0 0 20px;
}
.final-cta-lead {
  font-size: 16px;
  line-height: 2;
  color: var(--clr-text-sub);
  margin: 0 auto 34px;
  max-width: 720px;
}
.final-cta-lead strong { color: var(--clr-gold-bright); }
.final-cta-note { font-size: 13px; color: var(--clr-text-muted); margin: 22px 0 0; line-height: 1.9; }

/* ── バナースロット ───────────────────────────────────────── */
/* 🔴 バナー素材は672x560と大きい。幅を指定しないと本文幅いっぱいまで伸びる
   （英語版で実測724px）。ぴょこバナーと同じ300px幅に揃える。 */
.banner-slot { margin: 28px 0 0; text-align: center; min-height: 0; }
.banner-slot a { display: inline-block; line-height: 0; }
.banner-slot img {
  width: 300px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: inline-block;
}
.banner-slot.is-filled { margin: 28px 0; }
.banner-slot img { border-radius: 6px; display: inline-block; }

/* ── Contact Form 7（ダーク配色に合わせる） ───────────────── */
.wpcf7 { margin-top: 2em; }
.wpcf7-form p { font-size: 15px; color: var(--clr-text-sub); margin: 0 0 1.4em; }
.wpcf7-form label { display: block; font-weight: 700; color: var(--clr-white); margin-bottom: 8px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 13px 15px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: 6px;
  color: var(--clr-text);
  font-family: inherit;
  font-size: 16px; /* iOSでフォーカス時に拡大されないよう16px以上を維持 */
  line-height: 1.7;
}
.wpcf7-form textarea { min-height: 190px; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: 0;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 106, .16);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--clr-text-muted); }
.wpcf7-form input[type="submit"] {
  width: auto;
  padding: 16px 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--clr-wine-bright), var(--clr-wine));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(181, 42, 79, .38);
  transition: transform .2s, filter .2s;
}
.wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.12); }
.wpcf7-form .wpcf7-not-valid-tip { color: #ff8fa8; font-size: 13px; margin-top: 6px; }
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid var(--clr-line);
  color: var(--clr-text-sub);
  font-size: 14px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: rgba(181, 42, 79, .6); }
.wpcf7 form.sent .wpcf7-response-output { border-color: rgba(212, 175, 106, .6); color: var(--clr-gold-bright); }
.wpcf7-spinner { background-color: var(--clr-gold); }

@media (max-width: 600px) {
  .wpcf7-form input[type="submit"] { width: 100%; padding: 16px 20px; }
}

/* ── パンくず ─────────────────────────────────────────────── */
.breadcrumb {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb a { color: var(--clr-text-muted); }
.breadcrumb a:hover { color: var(--clr-gold); }
.breadcrumb-sep { opacity: .6; }

/* ── 記事ページ ───────────────────────────────────────────── */
.single-article {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 24px 88px;
}
.article-head { margin-bottom: 32px; }
.article-cat {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 4px;
  background: rgba(212, 175, 106, .16);
  color: var(--clr-gold);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 16px;
}
.article-title {
  font-size: clamp(24px, 4.4vw, 38px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--clr-white);
  margin: 0 0 18px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--clr-text-muted);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--clr-line);
}
.article-thumb { margin: 0 0 36px; border-radius: var(--radius); overflow: hidden; }

/* PR表示（functions.phpが本文冒頭に自動挿入） */
.dxk-pr-notice {
  background: rgba(212, 175, 106, .07);
  border: 1px solid rgba(212, 175, 106, .3);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 32px;
}
.dxk-pr-notice p {
  font-size: 13px !important;
  line-height: 1.85;
  color: var(--clr-text-muted) !important;
  margin: 0 !important;
}
.dxk-pr-notice strong { color: var(--clr-gold); }

/* 記事本文 — 見出しを p のスタイルに潰されないよう個別に定義する */
.article-body { font-size: 16px; line-height: 2; color: var(--clr-text-sub); }
.article-body > p { margin: 0 0 1.9em; }
.article-body h2 {
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--clr-white);
  margin: 3em 0 1em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--clr-gold);
}
.article-body h3 {
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--clr-white);
  margin: 2.4em 0 .9em;
  padding-left: 14px;
  border-left: 3px solid var(--clr-gold);
}
.article-body h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-gold-bright);
  margin: 2em 0 .8em;
}
.article-body strong { color: var(--clr-white); font-weight: 700; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body ul,
.article-body ol { margin: 0 0 1.9em; padding-left: 1.6em; }
.article-body li { margin-bottom: .6em; }
.article-body blockquote {
  margin: 0 0 1.9em;
  padding: 18px 24px;
  background: var(--clr-card);
  border-left: 3px solid var(--clr-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15px;
  margin: 0 0 1.9em;
}
.article-body th,
.article-body td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--clr-line);
  text-align: left;
  line-height: 1.7;
}
/* 同上：Arkheの th 背景を打ち消してから色を当てる */
.article-body th { background: transparent; color: var(--clr-white); font-weight: 700; }
.article-body thead th {
  background: rgba(212, 175, 106, .1);
  color: var(--clr-gold);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
/* 本文の表は .table-scroll（functions.phpが自動で包む）の中で横スクロールさせる */
.article-body .table-scroll { margin: 0 0 1.9em; }
.article-body .table-scroll table { margin: 0; min-width: 520px; }
.article-body img { border-radius: var(--radius); }
.article-body hr { border: 0; border-top: 1px solid var(--clr-line); margin: 3em 0; }

/* 記事内の注意・出典ボックス（記事HTMLで使う共通クラス） */
.article-body .dxk-source {
  font-size: 13px;
  color: var(--clr-text-muted);
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  margin: 0 0 1.9em;
}
.article-body .dxk-warn {
  padding: 16px 20px;
  background: rgba(181, 42, 79, .14);
  border-left: 3px solid var(--clr-wine-bright);
  border-radius: 0 6px 6px 0;
  margin: 0 0 1.9em;
  font-size: 15px;
}
.article-body .dxk-point {
  padding: 20px 24px;
  background: rgba(212, 175, 106, .08);
  border: 1px solid rgba(212, 175, 106, .34);
  border-radius: var(--radius);
  margin: 0 0 1.9em;
}
.article-body .dxk-point > p:first-child { color: var(--clr-gold); font-weight: 700; }
.article-body .dxk-point p:last-child { margin-bottom: 0; }

/* 記事末尾CTA */
.article-cta {
  margin: 56px 0 0;
  padding: 36px 30px;
  background: linear-gradient(160deg, rgba(140, 31, 61, .22), rgba(212, 175, 106, .07));
  border: 1px solid rgba(212, 175, 106, .3);
  border-radius: var(--radius-lg);
  text-align: center;
}
.article-cta-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--clr-gold);
  margin: 0 0 12px;
}
.article-cta-title {
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 900;
  line-height: 1.55;
  color: var(--clr-white);
  margin: 0 0 14px;
}
.article-cta-body { font-size: 15px; color: var(--clr-text-sub); margin: 0 0 26px; }
.article-cta-note { font-size: 13px; color: var(--clr-text-muted); margin: 18px 0 0; }

/* 著者欄 */
.article-author-box {
  margin: 40px 0 0;
  padding: 24px 26px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
}
.article-author-box-name { font-size: 16px; font-weight: 700; color: var(--clr-white); margin: 0 0 10px; }
.article-author-box-desc { font-size: 14px; color: var(--clr-text-sub); margin: 0 0 10px; }
.article-author-box-link { font-size: 14px; margin: 0; }

/* 関連記事 */
.article-related { margin: 48px 0 0; }
.article-related-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--clr-white);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-line);
}
.article-related-list { list-style: none; margin: 0; padding: 0; }
.article-related-list li { border-bottom: 1px dashed var(--clr-line); }
.article-related-list a { display: block; padding: 14px 0; font-size: 15px; line-height: 1.7; }

/* 前後記事 */
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 0; }
.article-nav a {
  display: block;
  padding: 18px 20px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  transition: border-color .25s;
}
.article-nav a:hover { border-color: rgba(212, 175, 106, .5); }
.article-nav-next { text-align: right; grid-column: 2; }
.article-nav-label { display: block; font-size: 12px; color: var(--clr-text-muted); margin-bottom: 6px; }
.article-nav-title { display: block; font-size: 15px; color: var(--clr-text); line-height: 1.6; }

/* ── アーカイブ ───────────────────────────────────────────── */
.archive-section { padding: 48px 0 88px; }
.archive-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  color: var(--clr-white);
  margin: 0 0 14px;
}
.archive-desc { font-size: 16px; color: var(--clr-text-sub); margin: 0 0 8px; max-width: 820px; }
.archive-pagination { margin-top: 48px; }
.archive-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--clr-line);
  border-radius: 6px;
  color: var(--clr-text-sub);
  font-size: 14px;
}
.archive-pagination .page-numbers:hover { border-color: var(--clr-gold); color: var(--clr-gold); }
.archive-pagination .page-numbers.current {
  background: var(--clr-gold);
  border-color: var(--clr-gold);
  color: #1a1520;
  font-weight: 700;
}
.archive-cta { margin-top: 56px; text-align: center; }

/* ── フッター ─────────────────────────────────────────────── */
.site-footer { background: #08070b; border-top: 1px solid var(--clr-line); }
.footer-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.footer-brand { flex: 1 1 280px; }
.footer-logo { margin: 0 0 12px; display: flex; align-items: baseline; gap: 7px; }
.footer-tagline { font-size: 14px; color: var(--clr-text-muted); margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-col-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--clr-gold);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 14px; color: var(--clr-text-sub); }
.footer-col a:hover { color: var(--clr-gold); }

.footer-bottom {
  border-top: 1px solid var(--clr-line);
  padding: 24px;
  text-align: center;
}
.footer-bottom p { margin: 0 auto 10px; max-width: 900px; }
.footer-disclosure { font-size: 12px; color: var(--clr-text-muted); line-height: 1.9; }
.footer-age { font-size: 12px; color: var(--clr-text-sub); }
.footer-copy { font-size: 12px; color: var(--clr-text-muted); margin-bottom: 0 !important; }

/* ── レスポンシブ ─────────────────────────────────────────── */
/* 🔴 ナビ項目名を「チャトレのXアカウント」に変えて横幅が増えたので、
   詰め始めるポイントを 1080px から 1400px に前倒しした。 */
@media (max-width: 1400px) {
  .header-inner { gap: 18px; padding-left: 22px; padding-right: 22px; }
  .nav-list { gap: 14px; }
  .nav-list a { font-size: 13px; }
}

/* 🔴 ナビ項目名が長くなり 1280px でもCTAがはみ出すため、
   横並びをやめてハンバーガーへ切り替える幅を 900px → 1180px に上げた。 */
@media (max-width: 1180px) {
  .sp-only { display: inline; }
  .nav-toggle { display: block; order: 3; margin-left: auto; }
  .header-cta { order: 2; margin-left: auto; }

  .header-nav {
    order: 4;
    flex-basis: 100%;
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .header-nav.is-open { max-height: 70vh; overflow-y: auto; }
  .nav-list {
    flex-direction: column;
    gap: 0;
    padding: 12px 0 4px;
  }
  .nav-list li { border-bottom: 1px solid var(--clr-line); }
  .nav-list a { display: block; padding: 14px 2px; font-size: 15px; }
  .header-inner { flex-wrap: wrap; gap: 12px; }
  .btn-header-cta { padding: 8px 15px; font-size: 13px; }

  section[class*="-section"] { padding: 72px 0; }
  .hero { padding: 64px 0 56px; }
  .hangaku-arrow { display: none; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-next { grid-column: 1; text-align: left; }
  .footer-nav { gap: 32px; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .section-inner,
  .hero-inner,
  .header-inner,
  .footer-inner { padding-left: 18px; padding-right: 18px; }
  .single-article { padding: 32px 18px 64px; }
  .btn-primary, .btn-secondary { display: block; width: 100%; }
  .btn-large { padding: 18px 24px; font-size: 16px; }
  .hero-cta { flex-direction: column; }
  .hero-notes { gap: 8px 18px; }
  .price-insight { padding: 24px 20px; }
  .article-cta { padding: 28px 20px; }
  .stance-item, .feature-card { padding: 22px 20px; }
}

/* ── 動きを減らす設定への配慮 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* =========================================================
   2026-08-02 TOP全面改稿ぶん
   絵文字→SVGラインアイコン統一／数字の強調／バッジ化／
   セクション間のゴールドライン／カード高さ揃え／FAQ
   ========================================================= */

/* ── ラインアイコン ─────────────────────────────────────── */
.dxk-icon { display: block; color: var(--clr-gold); flex: none; }

/* ── 強調する数字 ───────────────────────────────────────── */
.num {
  font-family: var(--font-deco);
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-gold-bright);
  letter-spacing: .01em;
}
.unit { font-size: .95em; font-weight: 700; color: var(--clr-gold); margin-left: 2px; }

/* ── 安心バッジ ─────────────────────────────────────────── */
.trust-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0 0 30px; padding: 0;
}
.trust-badges.is-center { justify-content: center; margin: 30px 0; }
.trust-badges li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(212, 175, 106, .38);
  border-radius: 999px;
  background: rgba(212, 175, 106, .07);
  font-size: 13px; font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
}

/* ── LIVEドット ─────────────────────────────────────────── */
.live-dot {
  display: inline-block; width: 8px; height: 8px;
  margin-right: 8px; border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 0 0 rgba(255, 77, 109, .7);
  animation: dxk-pulse 1.8s infinite;
  vertical-align: middle;
}
@keyframes dxk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 109, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 77, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ── セクション間の細いゴールドライン ───────────────────── */
.gold-rule {
  height: 1px; border: 0; margin: 0 auto;
  max-width: var(--container);
  background: linear-gradient(90deg,
    transparent, rgba(212, 175, 106, .05) 12%,
    rgba(212, 175, 106, .45) 50%,
    rgba(212, 175, 106, .05) 88%, transparent);
}

/* ── 出典・注記（小さく静かに） ─────────────────────────── */
.micro-note {
  font-size: 12.5px; line-height: 1.85;
  color: var(--clr-text-muted);
  margin: 16px 0 0;
}
.micro-note a { color: var(--clr-text-sub); text-decoration: underline; text-underline-offset: 3px; }

/* ── 2. メリット3つ ─────────────────────────────────────── */
.merit-section { background: var(--clr-bg-alt); }
.merit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px; margin-top: 48px;
  align-items: stretch;
}
.merit-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  padding: 40px 30px 34px;
  transition: border-color .25s, transform .25s;
}
.merit-card:hover { border-color: rgba(212, 175, 106, .5); transform: translateY(-3px); }
.merit-no {
  position: absolute; top: 20px; right: 24px;
  font-family: var(--font-deco); font-size: 32px; font-weight: 700;
  line-height: 1; color: var(--clr-gold); opacity: .3; margin: 0;
}
.merit-ico { margin-bottom: 20px; }
.merit-card h3 {
  font-size: 19px; font-weight: 700; line-height: 1.55;
  color: var(--clr-white); margin: 0 0 14px;
}
.merit-card p { font-size: 15px; line-height: 1.95; color: var(--clr-text-sub); margin: 0; }

/* ── 3. 無料でもらえるもの ──────────────────────────────── */
.free-section { background: var(--clr-bg); }
.free-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 36px;
  padding: 40px 40px;
  background: linear-gradient(135deg, rgba(212, 175, 106, .13), rgba(140, 31, 61, .13));
  border: 1px solid rgba(212, 175, 106, .4);
  border-radius: var(--radius-lg);
  margin-bottom: 44px;
}
.free-hero-num { flex: none; text-align: center; }
.free-hero-num .num { font-size: 76px; }
.free-hero-num .unit { font-size: 26px; }
.free-hero-cap {
  display: block; margin-top: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--clr-gold);
}
.free-hero-body { flex: 1 1 320px; }
.free-hero-body p { font-size: 16px; line-height: 2; color: var(--clr-text-sub); margin: 0 0 8px; }
.free-hero-body p:last-child { margin-bottom: 0; }
.free-hero-body strong { color: var(--clr-white); }

.free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px; align-items: stretch;
}
.free-card {
  display: flex; flex-direction: column;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color .25s, transform .25s;
}
.free-card:hover { border-color: rgba(212, 175, 106, .5); transform: translateY(-3px); }
.free-card.is-highlight {
  background: linear-gradient(160deg, rgba(212, 175, 106, .13), rgba(140, 31, 61, .1));
  border-color: rgba(212, 175, 106, .5);
}
.free-ico { margin-bottom: 16px; }
.free-tag {
  align-self: flex-start;
  padding: 3px 12px; margin: 0 0 12px;
  border-radius: 999px;
  background: rgba(212, 175, 106, .16);
  color: var(--clr-gold);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.free-card h3 {
  font-size: 16.5px; font-weight: 700; line-height: 1.6;
  color: var(--clr-white); margin: 0 0 10px;
}
.free-card p { font-size: 14.5px; line-height: 1.9; color: var(--clr-text-sub); margin: 0; }

.section-cta.is-wide { margin-top: 64px; }

/* ── 4. ライブ ───────────────────────────────────────────── */
.live-section { background: var(--clr-bg-alt); }
.live-head { display: flex; flex-direction: column; }
.live-label {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  margin: 0 0 16px; padding: 6px 15px 6px 13px;
  border: 1px solid rgba(255, 77, 109, .5);
  border-radius: 999px;
  background: rgba(255, 77, 109, .1);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: #ff8fa8;
}
.live-refresh {
  margin: 16px 0 0; text-align: center;
  font-size: 12.5px; color: var(--clr-text-muted);
}
.live-note {
  margin: 32px auto 0; max-width: 900px;
  padding: 22px 26px;
  background: rgba(212, 175, 106, .07);
  border: 1px solid rgba(212, 175, 106, .3);
  border-radius: var(--radius);
}
.live-note p { margin: 0; font-size: 15px; line-height: 1.95; color: var(--clr-text-sub); }
.live-note strong { color: var(--clr-gold-bright); }

/* ── 5. 機能 ─────────────────────────────────────────────── */
.features-section { background: var(--clr-bg); }
.features-grid { align-items: stretch; }
.feature-card { display: flex; flex-direction: column; }
.feature-ico { margin-bottom: 18px; }
.feature-lead {
  font-size: 15.5px !important; font-weight: 700;
  color: var(--clr-gold-bright) !important;
  margin: 0 0 10px !important;
}
.feature-card .feature-link { margin-top: auto !important; padding-top: 14px; }

/* ── 6. 料金 ─────────────────────────────────────────────── */
.price-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px;
  padding: 32px 36px; margin-bottom: 8px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-left: 3px solid var(--clr-gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.price-hero-main .num { font-size: 58px; }
.price-hero-main .unit { font-size: 20px; }
.price-hero-cap {
  display: block; margin-top: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--clr-gold);
}
.price-hero-plus { margin: 0; font-size: 17px; font-weight: 700; color: var(--clr-text-sub); }

.price-insight h3 .num,
.callout-title .num { font-size: 1.5em; }

/* ── 8. FAQ ──────────────────────────────────────────────── */
.faq-section { background: var(--clr-bg-alt); }
.faq-list { margin-top: 44px; display: grid; gap: 14px; }
.faq-item {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s;
}
.faq-item[open] { border-color: rgba(212, 175, 106, .45); }
.faq-item summary {
  display: flex; align-items: center; gap: 13px;
  padding: 22px 26px;
  font-size: 16.5px; font-weight: 700; line-height: 1.6;
  color: var(--clr-white);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 10px; height: 10px;
  border-right: 1.6px solid var(--clr-gold);
  border-bottom: 1.6px solid var(--clr-gold);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-item summary:hover { color: var(--clr-gold-bright); }
.faq-body { padding: 0 26px 24px 62px; }
.faq-body p { margin: 0; font-size: 15px; line-height: 2; color: var(--clr-text-sub); }
.faq-body strong { color: var(--clr-gold-bright); }

/* ── 9. 記事カード（情報量を増やす） ────────────────────── */
.posts-grid { align-items: stretch; }
.post-card { height: 100%; }
.post-card-body { gap: 12px; }
.post-card-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(212, 175, 106, .18), transparent 60%),
    linear-gradient(140deg, #1c1725, #241a26 55%, #2a1a24);
}
.post-card-ph-txt {
  font-size: 15px; font-weight: 700; letter-spacing: .12em;
  color: rgba(212, 175, 106, .82);
}
.post-card-ex {
  font-size: 14px; line-height: 1.85; color: var(--clr-text-sub);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: auto 0 0 !important;
  font-size: 12.5px; color: var(--clr-text-muted);
}
.post-card-read { display: inline-flex; align-items: center; }
.post-card-read::before {
  content: ""; width: 4px; height: 4px; margin-right: 8px;
  border-radius: 50%; background: var(--clr-gold); opacity: .6;
}

/* ── 11. 最終CTA ─────────────────────────────────────────── */
.final-cta-eyebrow {
  display: inline-flex; align-items: center;
  margin: 0 0 18px; padding: 6px 16px 6px 14px;
  border: 1px solid rgba(255, 77, 109, .45);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: #ff8fa8;
}
.final-cta-lead { line-height: 2.05; }

/* ── レスポンシブ ───────────────────────────────────────── */
@media (max-width: 900px) {
  .free-hero { padding: 32px 26px; gap: 24px; justify-content: center; text-align: center; }
  .free-hero-num { margin: 0 auto; }
  .free-hero-num .num { font-size: 62px; }
  .price-hero { padding: 26px 24px; }
  .price-hero-main .num { font-size: 46px; }
  .faq-item summary { padding: 18px 20px; font-size: 15.5px; gap: 10px; }
  .faq-body { padding: 0 20px 20px 50px; }
  .merit-card { padding: 34px 24px 28px; }
}
@media (max-width: 600px) {
  .trust-badges { gap: 8px; }
  .trust-badges li { font-size: 12px; padding: 7px 12px; }
  .free-hero-num .num { font-size: 54px; }
  .faq-body { padding: 0 20px 20px 20px; }
}

/* ── フッター（簡素化：ライン → サイト名 → カテゴリ → 運営情報 → コピーライト） ── */
.site-footer { background: #08070b; border-top: 0; }
.site-footer .gold-rule { max-width: 100%; opacity: .55; }
.footer-inner {
  display: block;
  width: 100%; max-width: 900px;
  margin: 0 auto;
  padding: 72px 24px 56px;
  text-align: center;
}
.footer-logo {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin: 0 0 12px;
}
.footer-tagline { font-size: 14px; color: var(--clr-text-muted); margin: 0 0 40px; }

.footer-cats,
.footer-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px;
}
.footer-cats { margin-bottom: 26px; }
.footer-cats a { font-size: 14.5px; font-weight: 700; color: var(--clr-text-sub); }
.footer-cats a:hover { color: var(--clr-gold); }
.footer-meta { margin-bottom: 40px; }
.footer-meta a { font-size: 13px; color: var(--clr-text-muted); }
.footer-meta a:hover { color: var(--clr-gold); }

.footer-disclosure {
  max-width: 720px; margin: 0 auto 28px;
  font-size: 12px; line-height: 1.95; color: var(--clr-text-muted);
}
.footer-copy { font-size: 12px; color: var(--clr-text-muted); margin: 0; }

@media (max-width: 600px) {
  .footer-inner { padding: 56px 20px 44px; }
  .footer-cats { gap: 10px 18px; }
  .footer-cats a { font-size: 13.5px; }
}

/* ヘッダーの「配信中」だけ視線を集める */
.nav-live { color: var(--clr-text) !important; font-weight: 700; }
.nav-live:hover { color: var(--clr-gold) !important; }

/* ゴールドラインはセクションの境目に置くので、背景差に埋もれないよう上下に余白を持たせる */
.gold-rule { position: relative; z-index: 1; }

/* =========================================================
   特異度の是正（2026-08-02）
   -----------------------------------------------------------
   🔴 自作CSS同士の潰し合いが5箇所あった。
      例：.merit-card p (0,0,1,1) が .merit-no (0,0,1,0) に勝ち、
          「01」が金の32pxではなく灰色15pxで出ていた。
      Arkheに負けるだけでなく、自分のCSS内でも同じことが起きる。
      検出は TOOLS/qa-gate/css_conflict.py（親セレクタを足して勝たせる）。
   ========================================================= */
.price-insight .price-insight-label {
  color: #1a1520;
  font-size: 12px;
  margin: 0 0 14px;
}
.callout .callout-title { font-size: 16.5px; margin: 0 0 12px; }
.merit-card .merit-no {
  font-size: 32px;
  line-height: 1;
  color: var(--clr-gold);
  margin: 0;
}
.free-card .free-tag {
  color: var(--clr-gold);
  font-size: 12px;
  margin: 0 0 12px;
}
.nav-list a.nav-live { font-weight: 700; }

/* =========================================================
   2026-08-02 LP化（トップを説明書からランディングへ戻す）
   -----------------------------------------------------------
   背景のリズム：色は増やさず質感だけ変える
     ヒーロー=写真 / 配信=完全な黒 / 3つの理由=紫黒 /
     登録=ワインの弱いグラデ / 機能=写真 / 料金=黒＋金罫線 /
     節約=紫黒 / FAQ=黒 / 記事=紫黒 / 最終CTA=夜景写真
   ========================================================= */

.live-section    { background: #08070b; }
.merit-section   { background: var(--clr-bg-alt); }
.signup-section  {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(140, 31, 61, .26), transparent 72%),
    var(--clr-bg);
}
.price-section   { background: #08070b; }
.save-section    { background: var(--clr-bg-alt); }
.faq-section     { background: var(--clr-bg); }
.posts-section   { background: var(--clr-bg-alt); }

/* 料金は上下に金の罫線を引いて締める */
.price-section {
  border-top: 1px solid rgba(212, 175, 106, .22);
  border-bottom: 1px solid rgba(212, 175, 106, .22);
}

.section-lead.is-tight { margin-bottom: 44px; }

/* ── 2. 配信中 ─────────────────────────────────────────── */
.live-sub {
  font-size: 15px; line-height: 1.9;
  color: var(--clr-text-sub);
  margin: 0 0 36px; max-width: 820px;
}
.live-cta {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; align-items: center;
  margin-top: 40px;
}

/* ── 3. 3つの理由（数字を主役に） ───────────────────────── */
.merit-card { padding: 44px 32px 36px; }
.merit-card .merit-no {
  position: static;
  font-size: 46px;
  opacity: 1;
  margin: 0 0 4px;
}
.merit-en {
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em;
  color: var(--clr-text-muted);
  margin: 0 0 20px;
}
.merit-card h3 { font-size: 20px; line-height: 1.55; margin: 0 0 16px; }
.merit-card p { font-size: 14.5px; line-height: 1.95; }

/* ── 4. 無料登録パネル ─────────────────────────────────── */
.signup-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 44px;
  background: rgba(212, 175, 106, .3);
  border: 1px solid rgba(212, 175, 106, .3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.signup-item {
  background: #14111a;
  padding: 34px 20px 30px;
  text-align: center;
}
.signup-item.is-key {
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(212, 175, 106, .12), transparent 68%),
    #171320;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 106, .5);
}
.signup-k {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--clr-gold); margin: 0 0 12px;
}
.signup-v { margin: 0; line-height: 1; }
.signup-v .num { font-size: 44px; }
.signup-v .unit { font-size: 18px; }

/* ── 5. 機能（大きな写真1枚＋3つ） ─────────────────────── */
.feature-hero {
  position: relative;
  padding: 116px 0;
  background-color: #0a0810;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.feature-hero::before {
  content: ""; position: absolute; inset: 0;
  /* 写真の質感が残る程度まで黒幕を緩める。文字が乗るのはカードの中だけなので
     セクション全体を沈める必要はない */
  background: linear-gradient(180deg, rgba(10,8,16,.80), rgba(10,8,16,.52) 45%, rgba(10,8,16,.88));
  pointer-events: none;
}
.feature-hero .section-inner { position: relative; z-index: 1; }
.feature-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; margin-top: 48px;
}
.feature-item {
  text-align: left;
  padding: 30px 26px;
  background: rgba(20, 17, 26, .72);
  border: 1px solid rgba(212, 175, 106, .26);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
.feature-item h3 {
  font-size: 19px; font-weight: 700; color: var(--clr-white);
  margin: 16px 0 10px;
}
.feature-item p { font-size: 14.5px; line-height: 1.9; color: var(--clr-text-sub); margin: 0; }
.feature-more {
  margin: 40px 0 0;
  font-size: 14.5px; line-height: 1.9; color: var(--clr-text-muted);
}
.feature-more a { margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* ── 6. 料金の要点（数字3つ） ──────────────────────────── */
.price-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 44px 0 40px;
}
.pf {
  text-align: center;
  padding: 34px 16px 28px;
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  background: var(--clr-card);
}
.pf.is-key {
  border-color: rgba(212, 175, 106, .55);
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(212, 175, 106, .11), transparent 68%),
    #171320;
}
.pf-num { margin: 0 0 10px; line-height: 1; }
.pf-num .num { font-size: 52px; }
.pf-num .unit { font-size: 19px; }
.pf-cap { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--clr-text-sub); }

.price-table.is-simple { min-width: 0; font-size: 16px; }
.price-table.is-simple th { width: 62%; }
.price-table.is-simple td { text-align: right; }
.price-table.is-simple td strong { font-size: 18px; color: var(--clr-gold-bright); }

/* ── 7. 節約術（横一列の図） ───────────────────────────── */
.save-flow {
  display: flex; flex-wrap: wrap;
  align-items: stretch; justify-content: center;
  gap: 14px;
}
.save-step {
  flex: 1 1 200px; max-width: 280px;
  text-align: center;
  padding: 30px 18px 26px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
}
.save-step.is-key {
  border-color: rgba(212, 175, 106, .6);
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(212, 175, 106, .12), transparent 68%),
    #171320;
}
.save-step-cap {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--clr-gold);
}
.save-step-val { margin: 0; line-height: 1; }
.save-step-val .num { font-size: 42px; }
.save-step-val .unit { font-size: 17px; }
.save-arrow { display: flex; align-items: center; color: var(--clr-gold); opacity: .55; }

/* ── 9. 記事3件 ────────────────────────────────────────── */
.posts-grid.is-trio { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* カテゴリ名はバッジだけに出す。プレースホルダに文字は入れない（二重表示になっていた） */
.post-card-ph {
  display: block; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(115deg, rgba(212,175,106,.035) 0 2px, transparent 2px 34px),
    radial-gradient(120% 90% at 22% 12%, rgba(212,175,106,.16), transparent 62%),
    linear-gradient(140deg, #1b1624, #241a26 55%, #2a1a24);
}

/* ── 10. 最終CTA（夜景写真） ───────────────────────────── */
.final-cta-section {
  position: relative;
  background-color: #08070b;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}
.final-cta-section::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 420px at 50% 0%, rgba(140, 31, 61, .38), transparent 72%),
    linear-gradient(180deg, rgba(8,7,11,.88), rgba(8,7,11,.80) 50%, rgba(8,7,11,.95));
  pointer-events: none;
}
.final-cta-section .section-inner { position: relative; z-index: 1; }

/* ── レスポンシブ ─────────────────────────────────────── */
@media (max-width: 900px) {
  .signup-panel { grid-template-columns: repeat(2, 1fr); }
  .signup-v .num { font-size: 38px; }
  .price-figures { gap: 14px; }
  .pf { padding: 26px 10px 22px; }
  .pf-num .num { font-size: 38px; }
  .pf-num .unit { font-size: 15px; }
  .pf-cap { font-size: 12px; }
  .feature-hero { padding: 84px 0; }
  .save-arrow { display: none; }
  .merit-card .merit-no { font-size: 40px; }
}
@media (max-width: 600px) {
  .price-figures { grid-template-columns: 1fr; }
  .pf { display: flex; align-items: baseline; justify-content: space-between; text-align: left; padding: 20px 22px; }
  .pf-num { margin: 0; }
  .live-cta .btn-primary, .live-cta .btn-outline { width: 100%; }
}

/* ======================================================
   日本語の改行整形（jp-linebreak）

   文節の区切りは BudouX で HTML に <wbr> を埋め込み済み。
   keep-all で「文節の途中では折り返さない」を全ブラウザで担保する。
   （word-break: auto-phrase は Chrome/Edge 専用。Safari(iOS)・Firefox は未対応なので使わない）

   ※WordPressの「追加CSS」に貼る場合、子セレクタ > は &gt; にエスケープされて
     ルールごと破棄される。> を含むセレクタを書かないこと。
   ====================================================== */
@media (max-width: 600px) {
  .article-body p,
  .article-body li,
  .article-body h2,
  .article-body h3,
  .article-body td,
  .article-body th,
  .article-body dd,
  .article-body figcaption,
  .dxk-point p,
  .dxk-warn p,
  .dxk-source p,
  .hero-lead,
  .hero-source,
  .hero p,
  .section-lead,
  .live-sub,
  .section-cta-note,
  .merit-card p,
  .signup-panel p,
  .feature-item p,
  .save-step p,
  .faq-item summary,
  .faq-item p,
  .post-card p,
  .final-cta-section p,
  .archive-desc,
  .footer-disclosure {
    text-align: justify;
    text-align-last: left;
    -webkit-text-align-last: left;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
  }
}

/* 記事・固定ページのタイトルは post_title 由来で <wbr> を仕込めない。
   文節分割の代わりに text-wrap で行長を均し、末尾に1〜2文字だけ残るのを防ぐ。
   （balance は Chrome 114+ / Safari 17.5+。非対応ブラウザは無視するだけなので安全） */
.article-title,
.archive-title,
.hero-title,
.section-title {
  text-wrap: balance;
}
@media (max-width: 600px) {
  .article-title,
  .archive-title { text-wrap: pretty; }
}

/* =========================================================
   Xアカウント一覧（固定ページ /dxlive-girls-x/）
   ========================================================= */
.xd-search {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 20px;
}
.xd-search input {
  flex: 1; min-width: 0;
  padding: 12px 16px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  color: var(--clr-text);
  font-family: inherit; font-size: 15px;
}
.xd-search input::placeholder { color: var(--clr-text-muted); }
.xd-search input:focus {
  outline: none;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 106, .12);
}
.xd-count {
  flex: none;
  color: var(--clr-gold);
  font-size: 14px; letter-spacing: .04em;
}

.xd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin: 0 0 28px;
}
.xd-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .2s, background .2s;
  /* 長い源氏名でカードが横に伸びないようにする */
  min-width: 0;
}
.xd-card:hover { border-color: var(--clr-gold); background: var(--clr-card-hover); }
.xd-card[hidden] { display: none; }

.xd-name {
  color: var(--clr-text);
  font-size: 15px; font-weight: 700;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.xd-x {
  color: var(--clr-gold);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.xd-x:hover { color: var(--clr-gold-bright); }

.xd-empty {
  color: var(--clr-text-sub);
  text-align: center;
  padding: 32px 0;
}

@media (max-width: 600px) {
  .xd-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .xd-card { padding: 10px 12px; }
  .xd-name { font-size: 14px; }
}

/* =========================================================
   internal-links（関連記事ボックス）
   TOOLS/internal-links/links.py が本文へ挿入する .jcg-* のスタイル。
   既定値ではなく、このサイトの :root（ワイン＋金）へ寄せてある。
   ========================================================= */
.jcg-mustread {
  margin: 2em 0;
  padding: 1.25em 1.4em 1.35em;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-left: 4px solid var(--clr-wine-bright);
  border-radius: var(--radius);
}
.jcg-mustread__label {
  display: inline-block;
  margin-bottom: .55em;
  padding: .2em .7em;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-white);
  background: var(--clr-wine-bright);
  border-radius: 999px;
}
.jcg-mustread__lead {
  margin: 0 0 .5em;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--clr-text-sub);
}
.jcg-mustread__link {
  display: inline-block;
  font-weight: 700;
  line-height: 1.6;
  color: var(--clr-gold-bright);
  border-bottom: 1px solid var(--clr-wine-bright);
  text-decoration: none;
}
.jcg-mustread__link::before { content: "\25B6\FE0E  "; }

.jcg-related {
  margin: 2em 0;
  padding: 1.1em 1.3em;
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
}
.jcg-related__lead {
  margin: 0 0 .45em;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--clr-text-sub);
}
.jcg-related__link {
  display: inline-block;
  font-weight: 600;
  line-height: 1.6;
  color: var(--clr-gold);
  border-bottom: 1px solid var(--clr-line);
  text-decoration: none;
}
.jcg-related__link::before { content: "\2192  "; }
.jcg-related__link:hover,
.jcg-mustread__link:hover { color: var(--clr-gold-bright); }

/* =========================================================
   動画入口カード（.video-picks）— 記事末尾
   ビジュアルは DTI 配布の 300x250 素材（iframe / 画像リンクが混在）。
   🔴 クリック領域はビジュアルだけ。文字はリンクにしない
      （カード全体を <a> にすると iframe とクリックが競合し、
        テーマのリンク下線が文字に乗る）。
   ========================================================= */
.video-picks {
  margin: 56px 0 0;
  padding: 28px 24px 22px;
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
}
.vp-heading {
  margin: 0 0 6px;
  font-family: var(--font-deco);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--clr-gold-bright);
}
.vp-lead-top {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--clr-text-sub);
}
.vp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  justify-items: center;
}
.vp-card {
  width: 100%;
  max-width: 320px;
  padding: 10px 10px 14px;
  background: var(--clr-card);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  transition: border-color .2s, background .2s;
}
.vp-card:hover { background: var(--clr-card-hover); border-color: var(--clr-gold); }
.vp-visual {
  width: 300px;
  height: 250px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: var(--clr-bg);
}
.vp-visual iframe,
.vp-visual img {
  display: block;
  width: 300px;
  height: 250px;
  max-width: 100%;
  border: 0;
}
.vp-visual a { display: block; text-decoration: none; border-bottom: 0; }
.vp-body { padding: 12px 6px 0; }
.vp-en {
  margin: 0;
  font-family: var(--font-deco);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--clr-text-muted);
}
.vp-name {
  margin: 2px 0 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-gold-bright);
}
.vp-lead {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--clr-text-sub);
}
.vp-note {
  margin: 18px 0 0;
  font-size: 11.5px;
  color: var(--clr-text-muted);
}

/* 🔴 本文の justify + keep-all は <wbr>（BudouX）とセットで成立する設計。
   このカードはテーマが出力するテキストで <wbr> を仕込めないため、
   均等割り付けの対象から外す（外さないとSPで字間が極端に開く。実測で発生）。 */
.video-picks p {
  text-align: left;
  word-break: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .video-picks { margin-top: 44px; padding: 22px 14px 18px; }
  .vp-heading { font-size: 19px; }
  .vp-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* =========================================================
   ぴょこバナー（iframe版・300x250 固定）
   先方配布が300x250固定なので拡大縮小しない。中央寄せだけ行う。
   ========================================================= */
.pyoco-banner {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}
.pyoco-banner iframe {
  width: 300px;
  height: 250px;
  max-width: 100%;
  border: 0;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.pyoco-after-merit { margin-top: 48px; }
.pyoco-in-cta { margin-top: 28px; }
@media (max-width: 700px) {
  .pyoco-after-merit { margin-top: 36px; }
}

/* =========================================================
   2026-08-05 ヘッダー修正（ロゴのズレ／SPの崩れ）
   ========================================================= */

/* 🔴 .header-logo a は align-items:baseline。画像はテキストのベースラインを持たず、
   「画像の下端＝文字のベースライン」に揃うため、ディセンダのぶんだけ画像が上に浮いていた。
   画像だけ中央揃えに逃がす（テキスト2つのベースライン揃えはそのまま生かす）。 */
.header-logo a .logo-mark-img,
.footer-logo a .logo-mark-img,
.header-logo a .logo-img,
.footer-logo a .logo-img { align-self: center; }

/* 🔴 SPヘッダーが3行に割れて間延びしていた原因：
   .header-cta と .nav-toggle の両方に margin-left:auto が効き、
   2行目でCTAとハンバーガーが左右に引き離されていた。
   ロゴ／CTA／ハンバーガーを1行に収める。 */
@media (max-width: 600px) {
  .header-inner { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .header-logo { margin-right: 0; flex: 1 1 auto; min-width: 0; }
  .header-cta { order: 2; margin-left: 0; }
  .nav-toggle { order: 3; margin-left: 6px; }

  .logo-mark { font-size: 19px; }
  .logo-sub { font-size: 11px; letter-spacing: .04em; }
  .logo-mark-img { height: 24px; }
  .header-logo a { gap: 5px; }

  .btn-header-cta { padding: 7px 12px; font-size: 12px; line-height: 1.25; }
  .btn-header-cta-sub { font-size: 10px; }

  /* 年齢確認バーが3行に折り返してファーストビューを潰していた */
  .dxk-age-bar { padding: 6px 12px; font-size: 11.5px; line-height: 1.5; }
}