/* ====================================================
   婚活リアル — Cinematic Night Theme
   "A calm emotional editorial quietly living on the internet."
   v4 — Midnight Literary Edition

   Palette:
     bg         #161422  deep warm indigo (night)
     text       rgba(208,200,188,.86)  warm ivory
     sage       #6b7c6a
     sage-dk    #4a5849
     gold       #b8976e  dusty gold
     slate      #8a9ab0
     border     rgba(255,255,255,.06)
==================================================== */

/* ── FONTS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&display=swap');

/* ── CSS VARIABLE RESET ────────────────────────── */
:root {
  --primary:       #6b7c6a;
  --primary-light: rgba(107,124,106,0.18);
  --primary-dark:  #4a5849;
  --secondary:     #8a9ab0;
  --accent:        #b8976e;
  --text:          rgba(208,200,188,0.86);
  --text-light:    rgba(165,158,148,0.72);
  --bg:            #161422;
  --white:         rgba(255,255,255,0.06);
  --gray:          rgba(255,255,255,0.04);
  --border:        rgba(255,255,255,0.07);
}

/* ── BASE ──────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  color-scheme: dark !important;
}

body {
  background: #161422 !important;
  color: rgba(208, 200, 188, 0.86) !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
  font-size: 16px !important;
  line-height: 2.3 !important;
  letter-spacing: 0.03em !important;
}

p { margin-bottom: 2.2em !important; }

strong, b { font-weight: 500 !important; color: rgba(228, 222, 210, 0.96) !important; }

a { transition: opacity 0.3s ease !important; }

::selection {
  background: rgba(184,151,110,0.28) !important;
  color: rgba(235, 228, 215, 0.98) !important;
}

::-webkit-scrollbar        { width: 3px !important; }
::-webkit-scrollbar-track  { background: #161422 !important; }
::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.10) !important; border-radius: 2px !important; }

/* ── HEADER ────────────────────────────────────── */
header {
  background: #111020 !important;
  background: linear-gradient(90deg, #111020 0%, #15121e 100%) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.site-title {
  color: #e4e0da !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
}

.header-nav a {
  color: rgba(228,224,218,0.48) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  transition: color 0.35s ease !important;
}

.header-nav a:hover { color: rgba(228,224,218,0.85) !important; }

/* ── HERO — Opening Film Scene ─────────────────── */
.hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 128px 24px 108px !important;
  border-bottom: none !important;

  background:
    linear-gradient(180deg,
      rgba(10,8,20,0.55) 0%,
      rgba(12,10,24,0.45) 40%,
      rgba(10,8,20,0.68) 100%
    ),
    url('/images/article-hero.png') center 30% / cover no-repeat !important;
}

.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 70% 55% at 15% 70%,  rgba(138,154,176,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 25%,  rgba(184,151,110,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 90% 40% at 50% 110%, rgba(107,124,106,0.05) 0%, transparent 70%) !important;
}

.hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: repeating-linear-gradient(
    174deg,
    transparent          0px,
    transparent          5px,
    rgba(180,200,225,0.015) 5px,
    rgba(180,200,225,0.015) 6px
  ) !important;
}

.hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  text-align: center !important;
  animation: nt-fadeIn 1.6s ease-out both !important;
}

.hero-badge {
  background: transparent !important;
  color: rgba(184,151,110,0.70) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  margin-bottom: 28px !important;
  display: block !important;
}

.hero h1 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #eae6e1 !important;
  color: #eae6e1 !important;

  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(1.45rem, 3.5vw, 1.95rem) !important;
  font-weight: 300 !important;
  line-height: 1.88 !important;
  letter-spacing: 0.1em !important;
  text-shadow: 0 2px 40px rgba(0,0,0,0.45) !important;
  margin: 0 0 32px !important;
}

.hero-meta {
  color: rgba(184,151,110,0.62) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
  margin-bottom: 16px !important;
}

.hero-desc {
  color: rgba(228,224,218,0.65) !important;
  font-size: 0.86rem !important;
  line-height: 2.1 !important;
  max-width: 460px !important;
  margin: 18px auto 0 !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
}

/* ── HERO INLINE CTA BOX ─────────────────────── */
.hero-inner [style*="#111020"],
.hero-inner [style*="1a162a"] {
  background: rgba(10,8,20,0.28) !important;
  border: 1px solid rgba(184,151,110,0.14) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  margin: 44px auto !important;
  padding: 36px 32px !important;
  max-width: 460px !important;
}

/* ── MAIN WRAP ─────────────────────────────────── */
.main-wrap {
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: 108px 28px 148px !important;
}

/* ── HEADINGS ──────────────────────────────────── */
h2 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: rgba(228, 220, 206, 0.90) !important;
  color: rgba(228, 220, 206, 0.90) !important;

  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.12rem !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 1px solid rgba(107,124,106,0.48) !important;
  padding: 6px 0 6px 22px !important;
  margin: 128px 0 44px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.06em !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

h3 {
  -webkit-text-fill-color: rgba(215, 207, 193, 0.88) !important;
  color: rgba(215, 207, 193, 0.88) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  border-left: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0 0 10px 0 !important;
  margin: 64px 0 22px !important;
  letter-spacing: 0.04em !important;
}

h4 {
  color: rgba(205, 197, 183, 0.84) !important;
  font-size: 0.93rem !important;
  font-weight: 500 !important;
  margin: 36px 0 14px !important;
}

/* First paragraph after heading — more editorial */
h2 + p,
h3 + p {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.97rem !important;
  line-height: 2.3 !important;
  color: rgba(205, 197, 183, 0.82) !important;
  letter-spacing: 0.04em !important;
}

/* ── TABLE OF CONTENTS — Ghost Minimal ────────── */
.toc {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(184,151,110,0.18) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  padding: 40px 4px !important;
  margin: 0 0 100px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.toc-title {
  color: rgba(184,151,110,0.55) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.65rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.32em !important;
  border-bottom: none !important;
  padding-bottom: 26px !important;
  margin-bottom: 0 !important;
}

.toc li {
  border-bottom: none !important;
  padding: 3px 0 !important;
}

.toc-number {
  color: rgba(184,151,110,0.35) !important;
  background: none !important;
  font-size: 0.7rem !important;
  font-weight: 300 !important;
  min-width: 16px !important;
}

.toc a {
  color: rgba(172, 175, 182, 0.78) !important;
  font-size: 0.82rem !important;
  line-height: 2.0 !important;
  letter-spacing: 0.02em !important;
  transition: color 0.3s ease !important;
}

.toc a:hover {
  color: rgba(195, 200, 190, 0.95) !important;
  text-decoration: none !important;
}

.toc li.toc-sub .toc-number {
  color: rgba(184,151,110,0.20) !important;
}

.toc li.toc-sub a {
  color: rgba(155, 158, 165, 0.62) !important;
  font-size: 0.78rem !important;
}

/* ── EMPATHY BOX — Cinematic Opening Monologue ── */
.empathy-box {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(184,151,110,0.18) !important;
  border-bottom: 1px solid rgba(229,224,217,0.5) !important;
  border-radius: 0 !important;
  padding: 72px 48px !important;
  margin-bottom: 128px !important;
  text-align: center !important;
  position: relative !important;
  animation: nt-fadeInUp 1.4s ease-out 0.1s both !important;
}

/* Ornamental opening mark */
.empathy-box::before {
  content: '——' !important;
  display: block !important;
  color: rgba(184,151,110,0.28) !important;
  letter-spacing: 0.4em !important;
  font-size: 0.7rem !important;
  margin-bottom: 48px !important;
}

/* Ornamental closing mark */
.empathy-box::after {
  content: '——' !important;
  display: block !important;
  color: rgba(184,151,110,0.28) !important;
  letter-spacing: 0.4em !important;
  font-size: 0.7rem !important;
  margin-top: 48px !important;
}

.empathy-box p {
  color: rgba(200, 192, 178, 0.80) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.02rem !important;
  font-weight: 300 !important;
  line-height: 2.5 !important;
  letter-spacing: 0.06em !important;
  margin: 0 auto !important;
  max-width: 480px !important;
}

/* ── CINEMATIC SCENE BREAK between sections ───── */
/* Automatic poetic interlude between consecutive sections */
.section + .section::before {
  content: '·  ·  ·' !important;
  display: block !important;
  text-align: center !important;
  color: rgba(184,151,110,0.25) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.6em !important;
  padding: 72px 0 80px !important;
}

/* ── NUMBERED ITEMS ──────────────────────────── */
.numbered-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 36px !important;
  margin-bottom: 28px !important;
  transition: transform 0.5s ease, border-color 0.5s ease !important;
}

.numbered-item:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.number-badge {
  width: 30px !important;
  height: 30px !important;
  background: rgba(107,124,106,0.14) !important;
  color: #4a5849 !important;
  font-size: 0.8rem !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}

.numbered-item-title {
  color: rgba(222, 215, 202, 0.88) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.0rem !important;
  font-weight: 400 !important;
}

/* ── EXPERIENCE / POINT / CHECK / NG BOXES ───── */
.experience-box {
  background: rgba(248,246,243,0.65) !important;
  border-left: 1px solid rgba(138,154,176,0.38) !important;
  border-radius: 0 !important;
  padding: 22px 28px !important;
}

.experience-box-label {
  color: rgba(138,154,176,0.7) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
}

.point-box {
  background: rgba(248,249,247,0.65) !important;
  border-left: 1px solid rgba(107,124,106,0.32) !important;
  border-radius: 0 !important;
}

.point-box-title { color: #4a5849 !important; }
.point-box li    { color: #3d3d3d !important; }

.ng-box {
  background: rgba(250,246,246,0.65) !important;
  border-left: 1px solid rgba(184,144,144,0.32) !important;
  border-radius: 0 !important;
}

.ng-box-title { color: #8b5a5a !important; }

.check-box {
  background: rgba(247,249,247,0.65) !important;
  border-left: 1px solid rgba(107,124,106,0.32) !important;
  border-radius: 0 !important;
}

.check-box-title     { color: #4a5849 !important; }
.check-box li::before { color: rgba(107,124,106,0.7) !important; }

/* ── SUMMARY BOX — Minimal ───────────────────── */
.summary-box {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(184,151,110,0.20) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  padding: 48px 8px !important;
  margin: 72px 0 !important;
}

.summary-box-title {
  color: rgba(184,151,110,0.6) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.68rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.26em !important;
  margin-bottom: 24px !important;
}

/* ── CLOSING MESSAGE ─────────────────────────── */
.closing-message {
  background: rgba(17,16,32,0.72) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 56px 44px !important;
  margin: 80px 0 !important;
  color: rgba(228,224,218,0.78) !important;
}

.closing-message p {
  color: rgba(228,224,218,0.78) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300 !important;
  line-height: 2.3 !important;
}

/* ── CHARACTER COMMENT — Quiet Narrator ──────── */
.char-comment {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(107,124,106,0.18) !important;
  border-radius: 0 !important;
  padding: 8px 0 8px 32px !important;
  margin: 64px 0 !important;
}

.char-name {
  color: rgba(107,124,106,0.55) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 10px !important;
}

.char-comment p {
  color: rgba(195, 188, 175, 0.80) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.93rem !important;
  font-weight: 300 !important;
  line-height: 2.2 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0 !important;
}

.char-avatar {
  margin-bottom: 10px !important;
}

.char-avatar img {
  opacity: 0.8 !important;
  filter: brightness(0.95) !important;
}

/* ── CTA BUTTON — Quiet Invitation ──────────── */
/*
 * Transforms the default bold pill-button into a
 * restrained, amber-toned, cinematic invitation.
 * "Not a push. A gentle opening of a door."
 */
.cta-btn {
  display: block !important;
  background: transparent !important;
  color: rgba(184,151,110,0.70) !important;
  border: 1px solid rgba(184,151,110,0.22) !important;
  border-radius: 2px !important;
  padding: 13px 24px !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: border-color 0.45s ease, color 0.45s ease, background 0.45s ease !important;
  box-shadow: none !important;
  margin-top: 18px !important;
  font-family: 'Noto Serif JP', serif !important;
}

.cta-btn:hover {
  background: rgba(184,151,110,0.04) !important;
  border-color: rgba(184,151,110,0.40) !important;
  color: rgba(184,151,110,0.92) !important;
  opacity: 1 !important;
}

/* ── RANKING ITEMS — Quiet List ──────────────── */
.ranking-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(229,224,217,0.38) !important;
  border-radius: 0 !important;
  padding: 28px 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

.ranking-item:last-child {
  border-bottom: none !important;
}

.rank {
  color: rgba(184,151,110,0.48) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.70rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.20em !important;
}

/* ── PR LABEL — Ghost Tag ────────────────────── */
.pr-label {
  color: rgba(107,107,107,0.35) !important;
  border: 1px solid rgba(107,107,107,0.18) !important;
  border-radius: 0 !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.24em !important;
  padding: 2px 8px !important;
}

/* ── PR SECTION DESCRIPTION TEXT ─────────────── */
.pr-section p {
  color: rgba(90,80,72,0.60) !important;
  font-size: 0.88rem !important;
  line-height: 2.0 !important;
}

/* ── INLINE BODY CTA BOXES — Quiet Section ───── */
/*
 * Applies to both .main-wrap and .container pages.
 * Converts dark navy CTA block → clean editorial section.
 */
.main-wrap [style*="linear-gradient(160deg, #111020"],
.main-wrap [style*="linear-gradient(160deg,#111020"],
.container [style*="linear-gradient(160deg, #111020"],
.container [style*="linear-gradient(160deg,#111020"] {
  background: rgba(248,246,243,0.95) !important;
  border: none !important;
  border-top: 1px solid rgba(184,151,110,0.14) !important;
  border-bottom: 1px solid rgba(229,224,217,0.50) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 80px 0 !important;
  padding: 60px 40px !important;
}

.main-wrap [style*="linear-gradient(160deg, #111020"] p,
.main-wrap [style*="linear-gradient(160deg,#111020"] p,
.container [style*="linear-gradient(160deg, #111020"] p,
.container [style*="linear-gradient(160deg,#111020"] p {
  color: #4a4038 !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300 !important;
}

.main-wrap [style*="linear-gradient(160deg, #111020"] a,
.main-wrap [style*="linear-gradient(160deg,#111020"] a,
.container [style*="linear-gradient(160deg, #111020"] a,
.container [style*="linear-gradient(160deg,#111020"] a {
  background: transparent !important;
  color: rgba(184,151,110,0.70) !important;
  border: 1px solid rgba(184,151,110,0.22) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 12px 28px !important;
  letter-spacing: 0.14em !important;
  font-size: 0.78rem !important;
  font-family: 'Noto Serif JP', serif !important;
  transition: all 0.4s ease !important;
}

.main-wrap [style*="linear-gradient(160deg, #111020"] a:hover,
.main-wrap [style*="linear-gradient(160deg,#111020"] a:hover,
.container [style*="linear-gradient(160deg, #111020"] a:hover,
.container [style*="linear-gradient(160deg,#111020"] a:hover {
  background: rgba(184,151,110,0.05) !important;
  border-color: rgba(184,151,110,0.40) !important;
  color: rgba(184,151,110,0.92) !important;
}

.main-wrap [style*="linear-gradient(160deg, #111020"] p[style*="0.74rem"],
.main-wrap [style*="linear-gradient(160deg, #111020"] p[style*="0.75rem"],
.main-wrap [style*="linear-gradient(160deg,#111020"] p[style*="0.74rem"],
.main-wrap [style*="linear-gradient(160deg,#111020"] p[style*="0.75rem"],
.container [style*="linear-gradient(160deg, #111020"] p[style*="0.74rem"],
.container [style*="linear-gradient(160deg,#111020"] p[style*="0.75rem"] {
  color: rgba(74,64,56,0.30) !important;
}

/* ── INLINE PILL BUTTONS — Quiet Link ────────── */
/*
 * Converts bold, pill-shaped affiliate buttons into
 * minimal, restrained amber invitations.
 * Targets: a[href][style*="border-radius:50px"]
 */
a[style*="border-radius:50px"] {
  display: block !important;
  background: transparent !important;
  color: rgba(107,124,106,0.68) !important;
  border: 1px solid rgba(107,124,106,0.22) !important;
  border-radius: 2px !important;
  font-weight: 400 !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.77rem !important;
  letter-spacing: 0.14em !important;
  padding: 12px 22px !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.42s ease !important;
  box-shadow: none !important;
  margin-top: 14px !important;
}

a[style*="border-radius:50px"]:hover {
  border-color: rgba(107,124,106,0.42) !important;
  color: rgba(107,124,106,0.92) !important;
  background: rgba(107,124,106,0.04) !important;
  opacity: 1 !important;
}

/* ── RANKING CARD HEADERS — Muted Amber Label ── */
/*
 * Converts bright pink/navy card header bars into
 * quiet amber category labels.
 */
[style*="background:#FF6B8A"][style*="padding:12px 18px"],
[style*="background:#FF8FA3"][style*="padding:12px 18px"],
[style*="background: linear-gradient(160deg, #111020"][style*="padding:12px 18px"],
[style*="background:linear-gradient(160deg, #111020"][style*="padding:12px 18px"],
[style*="background: linear-gradient(160deg,#111020"][style*="padding:12px 18px"],
[style*="background:linear-gradient(160deg,#111020"][style*="padding:12px 18px"] {
  background: transparent !important;
  color: rgba(184,151,110,0.50) !important;
  padding: 14px 0 6px !important;
  font-weight: 300 !important;
  font-family: 'Noto Serif JP', serif !important;
  letter-spacing: 0.08em !important;
  font-size: 0.82rem !important;
  border-bottom: 1px solid rgba(229,224,217,0.40) !important;
}

/* ── RANKING CARD OUTER WRAPPER — Minimal ────── */
[style*="border:1px solid #FFD0DC"][style*="border-radius:12px"],
[style*="border: 1px solid #FFD0DC"][style*="border-radius:12px"] {
  border: none !important;
  border-top: 1px solid rgba(229,224,217,0.38) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
}

/* ── TABLE HEADERS — Muted Tones ─────────────── */
/*
 * Converts aggressive magenta (#FF3D6B) table headers
 * into calm editorial tones.
 */
[style*="background:#FF3D6B"],
[style*="background: #FF3D6B"] {
  background: rgba(17,16,32,0.75) !important;
  color: rgba(228,224,218,0.70) !important;
}

[style*="background:#FF3D6B"] th,
[style*="background: #FF3D6B"] th {
  color: rgba(228,224,218,0.70) !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  font-size: 0.82rem !important;
}

/* ── INLINE ADVICE / HIGHLIGHT BOXES (light pink bg) ── */
/* Prevent browser dark mode from inverting inline-style pink boxes */
[style*="background:#FFF0F4"],
[style*="background: #FFF0F4"],
[style*="background:#FFF9FA"],
[style*="background: #FFF9FA"] {
  color: #2d2b28 !important;
}

/* ── HIGHLIGHT MARKERS ───────────────────────── */
.marker       { background: linear-gradient(transparent 62%, rgba(184,151,110,0.20) 62%) !important; }
.marker-pink  { background: linear-gradient(transparent 62%, rgba(138,154,176,0.20) 62%) !important; }
.marker-green { background: linear-gradient(transparent 62%, rgba(107,124,106,0.16) 62%) !important; }

/* ── ILLUSTRATIONS ───────────────────────────── */
img[src*="/images/illustrations/"] {
  border-radius: 12px !important;
  opacity: 0.92 !important;
  filter: brightness(0.90) saturate(0.82) contrast(1.04) !important;
  display: block !important;
  max-width: 100% !important;
}

img[src*="/images/illust-"] {
  display: block !important;
  margin: 0 auto !important;
  max-width: 220px !important;
  width: 58% !important;
  border-radius: 50% !important;
  opacity: 0.85 !important;
}

div:has(> img[src*="/images/illust-"]) {
  margin: 72px 0 !important;
}

/* ── PR / AFFILIATE SECTION ──────────────────── */
.pr-section {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(184,151,110,0.14) !important;
  border-bottom: 1px solid rgba(229,224,217,0.55) !important;
  border-radius: 0 !important;
  padding: 64px 0 !important;
  margin: 96px 0 !important;
}

.pr-section-title {
  color: #2d2b28 !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
}

.pr-notice { color: rgba(107,107,107,0.65) !important; }

.pr-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(229,224,217,0.45) !important;
  border-radius: 0 !important;
  padding: 32px 0 !important;
  box-shadow: none !important;
}

.pr-card:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.pr-card-name { color: #2d2b28 !important; }
.pr-card-desc { color: rgba(107,107,107,0.7) !important; }

.pr-card-btn {
  background: transparent !important;
  color: #4a5849 !important;
  border: 1px solid rgba(107,124,106,0.38) !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  padding: 10px 24px !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  transition: all 0.4s ease !important;
}

.pr-card-btn:hover {
  background: rgba(107,124,106,0.05) !important;
  border-color: rgba(107,124,106,0.55) !important;
  opacity: 1 !important;
}

/* ── RELATED ARTICLES ────────────────────────── */
.related-section,
.related-box {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 !important;
  padding-top: 48px !important;
  margin-top: 80px !important;
}

.related-section h2 {
  background: none !important;
  -webkit-text-fill-color: rgba(107,124,106,0.65) !important;
  color: rgba(107,124,106,0.65) !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  font-size: 0.72rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.24em !important;
}

.related-box h3 {
  color: rgba(107,124,106,0.65) !important;
  -webkit-text-fill-color: rgba(107,124,106,0.65) !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  font-size: 0.78rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.16em !important;
}

.related-list li {
  border-bottom: 1px solid rgba(229,224,217,0.4) !important;
  padding: 12px 0 !important;
}

.related-list a {
  color: rgba(158, 162, 155, 0.72) !important;
  font-size: 0.85rem !important;
  line-height: 1.75 !important;
  transition: color 0.3s ease !important;
}

.related-list a:hover { color: rgba(185, 190, 178, 0.92) !important; }

/* ── FAQ ─────────────────────────────────────── */
.faq-section { border-color: rgba(255,255,255,0.07) !important; }
.faq-title   { color: rgba(155, 175, 155, 0.80) !important; border-left-color: rgba(107,124,106,0.38) !important; }
.faq-item    { border-color: rgba(255,255,255,0.06) !important; background: rgba(255,255,255,0.02) !important; }
.faq-q       { color: rgba(175, 180, 168, 0.78) !important; }
.faq-a       { color: rgba(195, 188, 175, 0.78) !important; line-height: 2.2 !important; }

/* ── PROFILE CARD — dark glass ───────────────── */
.profile-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 24px 22px !important;
}

.profile-card .name,
.profile-info .name {
  color: rgba(225, 218, 205, 0.88) !important;
  font-weight: 400 !important;
  font-size: 0.92rem !important;
}

.profile-card .bio,
.profile-info .bio {
  color: rgba(160, 153, 140, 0.68) !important;
  font-size: 0.82rem !important;
  line-height: 2.0 !important;
}

.profile-avatar {
  background: rgba(107,124,106,0.15) !important;
  box-shadow: none !important;
}

/* ── PR / ADVERTISING BANNER ─────────────────── */
div[style*="background:#f0ece5"],
div[style*="background: #f0ece5"] {
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  color: rgba(155, 148, 135, 0.52) !important;
}

div[style*="background:#f0ece5"] strong,
div[style*="background: #f0ece5"] strong {
  color: rgba(155, 148, 135, 0.65) !important;
}

/* ── INLINE ALERT BOXES (yellow / green) ─────── */
div[style*="background:#fff3cd"],
div[style*="background: #fff3cd"] {
  background: rgba(184,151,110,0.06) !important;
  border-left-color: rgba(184,151,110,0.32) !important;
  border-radius: 0 !important;
  color: rgba(200, 192, 178, 0.82) !important;
}

div[style*="background:#f0fff4"],
div[style*="background: #f0fff4"],
div[style*="background:#F0FFF4"] {
  background: rgba(107,124,106,0.06) !important;
  border-left-color: rgba(107,124,106,0.32) !important;
  border-radius: 0 !important;
  color: rgba(200, 192, 178, 0.82) !important;
}

/* ── EXPERIENCE BOX — dark bg adjustment ─────── */
.experience-box {
  background: rgba(255,255,255,0.03) !important;
  border-left: 1px solid rgba(138,154,176,0.38) !important;
  border-radius: 0 !important;
  padding: 22px 28px !important;
}

.experience-box-label {
  color: rgba(138,154,176,0.65) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
}

.experience-box p {
  color: rgba(195, 188, 175, 0.78) !important;
}

/* ── SEPARATORS ──────────────────────────────── */
.main-wrap hr {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  margin: 88px auto !important;
  width: 48% !important;
}

/* ── FOOTER ──────────────────────────────────── */
footer {
  background: #111020 !important;
  color: rgba(176,166,150,0.4) !important;
}

footer p { color: rgba(176,166,150,0.4) !important; }

footer a {
  color: rgba(176,166,150,0.35) !important;
  transition: color 0.3s !important;
}

footer a:hover {
  color: rgba(176,166,150,0.7) !important;
}

footer .char-comment {
  border-left-color: rgba(107,124,106,0.2) !important;
  background: transparent !important;
}

/* ── SERIES IDENTITY — Film Label ───────────── */
.nt-series-id {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-bottom: 36px !important;
}

.nt-series-num {
  color: rgba(184,151,110,0.45) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.58rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.38em !important;
}

.nt-series-sep {
  color: rgba(184,151,110,0.22) !important;
  font-size: 0.5rem !important;
}

.nt-series-name {
  color: rgba(228,224,218,0.58) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.7rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.24em !important;
}

/* ── SERIES FOOTER — Closing Film Card ──────── */
.nt-series-footer {
  text-align: center !important;
  padding: 80px 0 48px !important;
  margin-top: 96px !important;
  border-top: 1px solid rgba(184,151,110,0.12) !important;
}

.nt-series-footer-label {
  color: rgba(184,151,110,0.38) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.6rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.38em !important;
  margin: 0 0 14px !important;
}

.nt-series-footer-title {
  color: rgba(58,51,48,0.52) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  margin: 0 0 18px !important;
}

.nt-series-footer-tagline {
  color: rgba(107,107,107,0.38) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.76rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
}

/* ── CINEMATIC INTERLUDE — Midnight scene break ── */
/*
 * A quiet cinematic pause between article sections.
 * Feels like a subtitle card in an arthouse midnight film.
 * Dark atmospheric background with grain + bokeh.
 * "A line quietly appearing inside a midnight memory."
 */
.cinematic-interlude {
  position: relative !important;
  width: calc(100% + 56px) !important;
  margin: 8px -28px !important;
  padding: 100px 64px !important;
  overflow: hidden !important;
  text-align: center !important;

  /* Deep midnight gradient — multiple atmospheric layers */
  background:
    radial-gradient(ellipse 90% 65% at 14% 58%, rgba(55,40,95,0.32) 0%, transparent 62%),
    radial-gradient(ellipse 70% 55% at 84% 30%, rgba(28,22,60,0.22) 0%, transparent 58%),
    radial-gradient(ellipse 100% 80% at 50% 108%, rgba(8,6,20,0.48) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 65% 15%, rgba(184,151,110,0.03) 0%, transparent 55%),
    linear-gradient(172deg, #090817 0%, #0b091c 50%, #070617 100%) !important;
}

/* Film grain texture */
.cinematic-interlude::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 220px 220px !important;
  opacity: 0.032 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Soft atmospheric bokeh — city lights blur */
.cinematic-interlude::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle 110px at 16% 65%, rgba(184,151,110,0.048) 0%, transparent 100%),
    radial-gradient(circle 75px  at 80% 30%, rgba(138,154,176,0.038) 0%, transparent 100%),
    radial-gradient(circle 160px at 50% 85%, rgba(90,70,140,0.032) 0%, transparent 100%),
    radial-gradient(circle 90px  at 62% 16%, rgba(180,165,120,0.022) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.cinematic-interlude p {
  position: relative !important;
  z-index: 1 !important;
  color: rgba(210,202,190,0.58) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.93rem !important;
  font-weight: 300 !important;
  line-height: 2.8 !important;
  letter-spacing: 0.22em !important;
  font-style: normal !important;
  margin: 0 auto !important;
  max-width: 380px !important;
  text-shadow: 0 2px 32px rgba(0,0,0,0.65) !important;
  margin-bottom: 0 !important;
}

/* ── EMOTIONAL QUOTE — Isolated film line ─────── */
/*
 * Use for emotionally resonant standalone lines.
 * Feels like a quiet quote card in an arthouse film.
 */
.emotional-quote {
  text-align: center !important;
  padding: 80px 48px !important;
  margin: 120px 0 !important;
  border-top: 1px solid rgba(184,151,110,0.13) !important;
  border-bottom: 1px solid rgba(229,224,217,0.50) !important;
  position: relative !important;
}

.emotional-quote p {
  color: rgba(200, 192, 178, 0.65) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 1.04rem !important;
  font-weight: 300 !important;
  line-height: 2.6 !important;
  letter-spacing: 0.08em !important;
  margin: 0 auto !important;
  max-width: 460px !important;
}

.emotional-quote p {
  margin-bottom: 0 !important;
}

/* ── CINEMATIC FIGURE IMAGES — Scene transitions ── */
/*
 * Individual images inserted in the article flow.
 * Each feels like a still frame from a midnight film.
 * "text → emotional pause → single cinematic image → more text"
 */
/* ── Scene intro line — quiet emotional breath before image ── */
.scene-intro {
  margin: 100px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: rgba(210, 202, 190, 0.32) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.77rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.46em !important;
  line-height: 2.0 !important;
}

/* ── Cinematic image block — dissolves into the atmosphere ── */
.main-wrap figure {
  position: relative !important;
  line-height: 0 !important;
  margin: 22px 0 100px !important;
  max-width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Subtle lean via transform — no cream gap exposed on sides */
.main-wrap figure.fig-left  { transform: translateX(-7px) !important; }
.main-wrap figure.fig-right { transform: translateX(7px)  !important; }
.main-wrap figure.fig-center { transform: none !important; }

.main-wrap figure img {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  display: block !important;
  opacity: 0.90 !important;
  filter: brightness(0.93) contrast(1.05) saturate(0.88) !important;
  transition: opacity 1.6s ease !important;
  /* Atmospheric dissolve — image fades into the page, not cut out of it */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent        0%,
    rgba(0,0,0,0.55)  10%,
    black             26%,
    black             74%,
    rgba(0,0,0,0.55)  90%,
    transparent       100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent        0%,
    rgba(0,0,0,0.55)  10%,
    black             26%,
    black             74%,
    rgba(0,0,0,0.55)  90%,
    transparent       100%
  );
}

.main-wrap figure:hover img {
  opacity: 0.97 !important;
}

.main-wrap figure figcaption {
  line-height: 2.0 !important;
  margin-top: 10px !important;
  padding: 0 !important;
  font-size: 0.69rem !important;
  color: rgba(158, 148, 136, 0.32) !important;
  letter-spacing: 0.30em !important;
  text-align: center !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

/* ── READING RHYTHM — Deeper section breathing ── */
/* Give h2 more atmospheric entrance space */
.main-wrap h2,
main h2 {
  margin-top: 148px !important;
}

/* First h2 after empathy-box or toc gets tighter top */
.empathy-box + * h2,
.toc + h2 {
  margin-top: 80px !important;
}

/* Paragraph immediately after cinematic-interlude: serif lead-in */
.cinematic-interlude + * p:first-child,
.cinematic-interlude + p {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.97rem !important;
  line-height: 2.4 !important;
  letter-spacing: 0.04em !important;
}

/* ── ANIMATIONS — Slow, Cinematic ────────────── */
@keyframes nt-fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nt-fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.toc { animation: nt-fadeInUp 1.0s ease-out 0.1s both !important; }

/* ── MOBILE ──────────────────────────────────── */
@media (max-width: 640px) {
  .hero {
    padding: 80px 20px 64px !important;
  }

  .hero h1 {
    font-size: 1.28rem !important;
    letter-spacing: 0.07em !important;
    font-weight: 300 !important;
  }

  .hero-desc {
    font-size: 0.83rem !important;
  }

  .main-wrap {
    padding: 64px 22px 96px !important;
  }

  h2 {
    font-size: 1.04rem !important;
    margin: 88px 0 32px !important;
    padding-left: 18px !important;
  }

  h3 {
    font-size: 0.95rem !important;
    margin: 52px 0 18px !important;
  }

  .empathy-box {
    padding: 52px 24px !important;
    margin-bottom: 88px !important;
  }

  .empathy-box p {
    font-size: 0.96rem !important;
  }

  .toc {
    padding: 32px 0 !important;
    margin-bottom: 72px !important;
  }

  .section + .section::before {
    padding: 52px 0 60px !important;
  }

  .cinematic-interlude {
    width: calc(100% + 44px) !important;
    margin: 8px -22px !important;
    padding: 72px 32px !important;
  }

  .cinematic-interlude p {
    font-size: 0.88rem !important;
    letter-spacing: 0.16em !important;
  }

  .scene-intro {
    margin: 72px 0 0 !important;
    font-size: 0.73rem !important;
    letter-spacing: 0.32em !important;
  }

  .main-wrap figure {
    margin: 18px 0 72px !important;
  }

  .main-wrap figure.fig-left  { transform: translateX(-4px) !important; }
  .main-wrap figure.fig-right { transform: translateX(4px)  !important; }

  .main-wrap figure figcaption {
    padding: 0 !important;
    font-size: 0.66rem !important;
  }

  .emotional-quote {
    padding: 60px 24px !important;
    margin: 88px 0 !important;
  }

  .emotional-quote p {
    font-size: 0.96rem !important;
  }

  .char-comment {
    padding-left: 22px !important;
    margin: 52px 0 !important;
  }

  .main-wrap [style*="linear-gradient(160deg, #111020"],
  .main-wrap [style*="linear-gradient(160deg,#111020"] {
    padding: 48px 22px !important;
    margin: 60px 0 !important;
  }

  .pr-section {
    padding: 48px 0 !important;
    margin: 72px 0 !important;
  }

  .closing-message {
    padding: 40px 24px !important;
  }

  img[src*="/images/illust-"] {
    max-width: 190px !important;
    width: 55% !important;
  }

  .main-wrap hr {
    width: 72% !important;
    margin: 64px auto !important;
  }

  .numbered-item {
    padding: 24px 18px !important;
  }

  .nt-series-footer {
    padding: 60px 0 36px !important;
    margin-top: 72px !important;
  }

  .nt-series-footer-title {
    font-size: 1.0rem !important;
  }
}

/* ══════════════════════════════════════════════════
   COMPARISON / INFO UI — Cinematic Night Glass
   "比較表ではなく、夜に静かに並べられた感情の対比"
   ══════════════════════════════════════════════════ */

/* ── Point / Check boxes — deep glass ─────────── */
.point-box,
.check-box {
  background: rgba(8, 10, 22, 0.72) !important;
  border: 1px solid rgba(190, 205, 245, 0.07) !important;
  border-left: 1px solid rgba(107, 124, 106, 0.38) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 32px 36px !important;
  margin: 40px 0 !important;
  box-shadow: none !important;
}

.point-box-title,
.check-box-title {
  color: rgba(155, 175, 155, 0.82) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.78rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.20em !important;
}

.point-box li,
.check-box li {
  color: rgba(200, 195, 185, 0.75) !important;
  font-size: 0.90rem !important;
  line-height: 2.3 !important;
  margin-bottom: 6px !important;
}

.point-box-label,
.check-box-label {
  color: rgba(107, 124, 106, 0.58) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.24em !important;
}

/* ── NG box ────────────────────────────────────── */
.ng-box {
  background: rgba(8, 10, 22, 0.72) !important;
  border: 1px solid rgba(190, 205, 245, 0.07) !important;
  border-left: 1px solid rgba(175, 120, 120, 0.35) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 32px 36px !important;
  margin: 40px 0 !important;
  box-shadow: none !important;
}

.ng-box-title,
.ng-box h4 {
  color: rgba(175, 128, 128, 0.80) !important;
  font-weight: 300 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.10em !important;
}

.ng-box li {
  color: rgba(200, 195, 185, 0.72) !important;
  font-size: 0.90rem !important;
  line-height: 2.3 !important;
}

/* ── Lead box ──────────────────────────────────── */
.lead {
  background: rgba(8, 10, 22, 0.65) !important;
  border: none !important;
  border-left: 1px solid rgba(138, 154, 176, 0.35) !important;
  border-radius: 0 !important;
  color: rgba(200, 195, 185, 0.80) !important;
  box-shadow: none !important;
  padding: 28px 32px !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300 !important;
  line-height: 2.4 !important;
  margin: 36px 0 !important;
}

/* ── Comparison table ──────────────────────────── */
.compare-table-wrap {
  background: transparent !important;
  padding: 0 !important;
  margin: 48px 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.compare-table {
  background: transparent !important;
  border-collapse: collapse !important;
  width: 100% !important;
  border: 1px solid rgba(190, 205, 245, 0.07) !important;
  border-radius: 0 !important;
}

.compare-table th,
.compare-table thead th {
  background: rgba(10, 12, 28, 0.90) !important;
  color: rgba(185, 180, 168, 0.62) !important;
  font-weight: 300 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.10em !important;
  border: none !important;
  border-bottom: 1px solid rgba(190, 205, 245, 0.08) !important;
  padding: 16px 14px !important;
  font-family: 'Noto Serif JP', serif !important;
  text-align: center !important;
}

.compare-table th:first-child {
  background: rgba(10, 12, 28, 0.90) !important;
  color: rgba(165, 158, 145, 0.52) !important;
}

.compare-table td {
  background: rgba(8, 10, 22, 0.62) !important;
  color: rgba(192, 187, 177, 0.75) !important;
  border-bottom: 1px solid rgba(190, 205, 245, 0.05) !important;
  padding: 14px 14px !important;
  font-size: 0.88rem !important;
  line-height: 1.9 !important;
}

.compare-table tr:last-child td {
  border-bottom: none !important;
}

.compare-table td:first-child {
  background: rgba(10, 12, 28, 0.50) !important;
  color: rgba(205, 200, 190, 0.82) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Table cell semantic colors — subdued, not primary */
.good {
  color: rgba(145, 185, 145, 0.82) !important;
  font-weight: 400 !important;
}
.mid {
  color: rgba(184, 151, 110, 0.78) !important;
  font-weight: 400 !important;
}
.bad {
  color: rgba(175, 128, 128, 0.75) !important;
  font-weight: 400 !important;
}

/* ── Checklist ─────────────────────────────────── */
.checklist {
  background: rgba(8, 10, 22, 0.72) !important;
  border: none !important;
  border-left: 1px solid rgba(107, 124, 106, 0.32) !important;
  border-radius: 0 !important;
  padding: 32px 36px !important;
  margin: 40px 0 !important;
  box-shadow: none !important;
}

.checklist h3 {
  color: rgba(170, 188, 170, 0.80) !important;
  font-weight: 300 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  font-family: 'Noto Serif JP', serif !important;
}

.checklist-item {
  color: rgba(192, 187, 177, 0.78) !important;
  font-size: 0.90rem !important;
  line-height: 2.1 !important;
  margin-bottom: 16px !important;
  gap: 14px !important;
}

.check-icon {
  background: transparent !important;
  color: rgba(107, 135, 107, 0.72) !important;
  border: 1px solid rgba(107, 135, 107, 0.26) !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 0.58rem !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

/* ── Rank badges — typography, no gold fills ──── */
.rank-1 {
  background: transparent !important;
  color: rgba(184, 155, 100, 0.72) !important;
  border: 1px solid rgba(184, 155, 100, 0.22) !important;
  box-shadow: none !important;
  font-weight: 300 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  font-family: 'Noto Serif JP', serif !important;
}

.rank-2 {
  background: transparent !important;
  color: rgba(165, 170, 180, 0.62) !important;
  border: 1px solid rgba(165, 170, 180, 0.18) !important;
  box-shadow: none !important;
  font-weight: 300 !important;
  font-size: 0.72rem !important;
  font-family: 'Noto Serif JP', serif !important;
}

.rank-3 {
  background: transparent !important;
  color: rgba(158, 145, 120, 0.58) !important;
  border: 1px solid rgba(158, 145, 120, 0.16) !important;
  box-shadow: none !important;
  font-weight: 300 !important;
  font-size: 0.72rem !important;
  font-family: 'Noto Serif JP', serif !important;
}

.rank-4 {
  background: transparent !important;
  color: rgba(140, 140, 155, 0.50) !important;
  border: 1px solid rgba(140, 140, 155, 0.14) !important;
  box-shadow: none !important;
  font-weight: 300 !important;
  font-size: 0.72rem !important;
  font-family: 'Noto Serif JP', serif !important;
}

/* ── Affiliate / Ranking section ───────────────── */
.affiliate-section {
  background: rgba(8, 10, 22, 0.72) !important;
  border: none !important;
  border-top: 1px solid rgba(184, 151, 110, 0.14) !important;
  border-bottom: 1px solid rgba(190, 205, 245, 0.07) !important;
  border-radius: 0 !important;
  padding: 52px 36px !important;
  margin: 80px 0 !important;
  box-shadow: none !important;
}

.affiliate-section h2 {
  color: rgba(202, 195, 182, 0.82) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(202, 195, 182, 0.82) !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  font-size: 0.90rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.12em !important;
}

.affiliate-section .sub-text {
  color: rgba(145, 140, 130, 0.60) !important;
  font-size: 0.82rem !important;
  margin-bottom: 36px !important;
}

.agency-card {
  background: rgba(10, 12, 28, 0.60) !important;
  border: none !important;
  border-left: 1px solid rgba(184, 151, 110, 0.18) !important;
  border-bottom: 1px solid rgba(190, 205, 245, 0.05) !important;
  border-radius: 0 !important;
  padding: 24px 22px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

.agency-rank {
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 300 !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
}

.agency-name {
  color: rgba(215, 208, 195, 0.85) !important;
  font-weight: 400 !important;
  font-size: 0.92rem !important;
}

.agency-point {
  color: rgba(150, 145, 132, 0.62) !important;
  font-size: 0.82rem !important;
  line-height: 1.9 !important;
}

.agency-btn {
  background: transparent !important;
  color: rgba(184, 151, 110, 0.68) !important;
  border: 1px solid rgba(184, 151, 110, 0.22) !important;
  border-radius: 2px !important;
  padding: 10px 22px !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  box-shadow: none !important;
  font-family: 'Noto Serif JP', serif !important;
  transition: all 0.42s ease !important;
}

.agency-btn:hover {
  background: rgba(184, 151, 110, 0.05) !important;
  border-color: rgba(184, 151, 110, 0.40) !important;
  color: rgba(184, 151, 110, 0.90) !important;
}

/* PR badge */
.pr-badge,
.affiliate-note {
  color: rgba(125, 120, 110, 0.50) !important;
  background: transparent !important;
  border: 1px solid rgba(125, 120, 110, 0.18) !important;
  border-radius: 0 !important;
  font-size: 0.63rem !important;
  letter-spacing: 0.14em !important;
  font-weight: 300 !important;
  box-shadow: none !important;
}

/* ── Share buttons — LINE green → ghost ────────── */
.btn-line {
  background: transparent !important;
  color: rgba(100, 185, 120, 0.70) !important;
  border: 1px solid rgba(100, 185, 120, 0.22) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* ── Char comment with inline green left border ─── */
.char-comment[style*="#5FCC95"],
.char-comment[style*="5fcc95"],
.char-comment[style*="#5fc"] {
  border-left-color: rgba(107, 148, 107, 0.30) !important;
}

/* ── MOBILE: more vertical breathing room ──────── */
@media (max-width: 640px) {
  .point-box,
  .check-box,
  .ng-box,
  .checklist {
    padding: 24px 22px !important;
    margin: 32px 0 !important;
  }

  .lead {
    padding: 22px 20px !important;
  }

  .affiliate-section {
    padding: 40px 22px !important;
    margin: 60px 0 !important;
  }

  .agency-card {
    padding: 20px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
  }

  .compare-table th,
  .compare-table td {
    padding: 12px 10px !important;
    font-size: 0.82rem !important;
  }

  .checklist-item {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
}