/* TokyoFX Premium — Wa-modern variant */
:root {
  --bg: #FFFFFF;
  --bg-soft: #FAFAF8;
  --bg-warm: #F5EFE2;
  --ai: #1B3A5C;          /* 深い藍 */
  --ai-deep: #122740;
  --ai-soft: #2C5482;
  --beige: #E8DCC4;
  --beige-soft: #F0E8D4;
  --ink: #2D2D2D;
  --ink-soft: #4A4A4A;
  --ink-mute: #8A8A82;
  --rule: rgba(27, 58, 92, 0.12);
  --rule-warm: rgba(45, 45, 45, 0.08);
  --shu-warn: #B85440;    /* sparingly */
}

* { box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-feature-settings: "palt" 1;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.02em;
}

.font-mincho {
  font-family: "游明朝 Pr6N", "游明朝体 Pr6N", "Yu Mincho", YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-feature-settings: "palt" 1;
}
.font-gothic {
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans", "ヒラギノ角ゴ ProN", sans-serif;
}
.font-mono {
  font-family: "Roboto Mono", "SF Mono", "Menlo", monospace;
  font-feature-settings: "tnum" 1;
}

.tnum { font-variant-numeric: tabular-nums; }

/* Hairline rules (0.5px effect via box-shadow) */
.hr-thin {
  height: 0;
  border: 0;
  box-shadow: 0 0.5px 0 0 var(--rule);
}
.border-hair-b { box-shadow: inset 0 -0.5px 0 0 var(--rule); }
.border-hair-t { box-shadow: inset 0 0.5px 0 0 var(--rule); }
.border-hair-l { box-shadow: inset 0.5px 0 0 0 var(--rule); }
.border-hair-r { box-shadow: inset -0.5px 0 0 0 var(--rule); }

/* Tiny labels */
.kicker {
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--ai);
  text-transform: none;
}
.kicker-mute { color: var(--ink-mute); }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ai);
  color: #fff;
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  padding: 14px 26px;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 1px 2px rgba(27,58,92,0.12);
}
.btn-primary:hover {
  background: var(--ai-deep);
  box-shadow: 0 4px 12px rgba(27,58,92,0.18);
  transform: translateY(-1px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--ai);
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 12px 22px;
  border-radius: 2px;
  border: 0.5px solid var(--ai);
  cursor: pointer;
  transition: all 200ms ease;
}
.btn-ghost:hover { background: rgba(27,58,92,0.04); }

/* Subtle card */
.card-soft {
  background: var(--bg);
  border-radius: 4px;
  box-shadow: 0 0 0 0.5px var(--rule), 0 1px 2px rgba(27,58,92,0.04);
}
.card-soft-hover { transition: box-shadow 220ms ease, transform 220ms ease; }
.card-soft-hover:hover {
  box-shadow: 0 0 0 0.5px var(--rule), 0 8px 24px rgba(27,58,92,0.08);
  transform: translateY(-2px);
}

/* Tab pills (segmented) */
.seg {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-warm);
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--rule);
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all 220ms ease;
}
.seg-btn:hover { color: var(--ai); }
.seg-btn.is-active {
  background: var(--bg);
  color: var(--ai);
  box-shadow: 0 1px 3px rgba(27,58,92,0.10), 0 0 0 0.5px var(--rule);
}

/* Rank circle */
.rank-circle {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ai);
  color: #fff;
  border-radius: 999px;
  font-family: "Roboto Mono", monospace;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.rank-circle.rank-2 { background: var(--ai-soft); }
.rank-circle.rank-3 { background: #4A6E96; }
.rank-circle.rank-r {
  background: transparent;
  color: var(--ai);
  box-shadow: inset 0 0 0 0.5px var(--ai);
}

/* Star rating */
.stars { color: var(--ai); letter-spacing: 0.12em; }
.stars-empty { color: var(--rule); }

/* Fade-in on scroll */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(.2,.65,.3,1), transform 700ms cubic-bezier(.2,.65,.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Number block (count-up target) */
.num-h {
  font-family: "Roboto Mono", monospace;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ai-deep);
}

/* Subtle navy section */
.section-navy {
  background: var(--ai);
  color: #fff;
}
.section-navy .kicker { color: var(--beige); }

/* Beige section */
.section-beige { background: var(--bg-warm); }

/* Sticky bottom CTA (mobile) */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -0.5px 0 0 var(--rule), 0 -4px 16px rgba(27,58,92,0.04);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
  display: none;
}
@media (max-width: 640px) {
  .sticky-cta { display: flex; gap: 10px; align-items: center; }
  .has-sticky-cta { padding-bottom: 96px; }
}

/* Disclaimer text */
.fine {
  font-size: 11px;
  line-height: 1.85;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
}

/* Subtle bullet */
.bullet {
  width: 4px; height: 4px;
  background: var(--ai);
  border-radius: 999px;
  display: inline-block;
  margin-right: 10px;
  transform: translateY(-3px);
}

.a8-pixel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.affiliate-card-premium {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Comparison table (PC優先) */
.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.cmp-table thead th {
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-align: left;
  padding: 14px 16px;
  box-shadow: inset 0 -0.5px 0 0 var(--rule);
  background: var(--bg);
}
.cmp-table tbody td {
  padding: 22px 16px;
  vertical-align: middle;
  box-shadow: inset 0 -0.5px 0 0 var(--rule);
  background: var(--bg);
  transition: background 180ms;
}
.cmp-table tbody tr:hover td { background: var(--bg-soft); }
.cmp-table .col-num {
  font-family: "Roboto Mono", monospace;
  font-feature-settings: "tnum" 1;
  text-align: right;
  color: var(--ai-deep);
}
.cmp-table .col-name { min-width: 200px; }

/* Tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--beige-soft);
  color: var(--ai-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.chip-outline {
  background: transparent;
  color: var(--ink-mute);
  box-shadow: inset 0 0 0 0.5px var(--rule);
}
.chip-navy {
  background: var(--ai);
  color: #fff;
}

/* Scoring meter */
.meter {
  display: inline-block;
  width: 70px;
  height: 4px;
  background: var(--rule-warm);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.meter > span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--ai);
  border-radius: 999px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: rgba(27,58,92,0.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,58,92,0.32); }

/* Hero accent line */
.accent-line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--beige);
  vertical-align: middle;
  margin: 0 12px 6px 0;
}

/* Quote */
.qmark {
  font-family: "游明朝", "Yu Mincho", serif;
  color: var(--beige);
  font-size: 64px;
  line-height: 0.6;
  display: inline-block;
}

/* Underline link */
.ulink {
  background-image: linear-gradient(to right, var(--ai), var(--ai));
  background-position: 0 100%;
  background-size: 100% 0.5px;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 220ms ease;
}
.ulink:hover { background-size: 0 0.5px; }

/* Article hero image placeholder — striped */
.img-placeholder {
  background-color: var(--bg-warm);
  background-image:
    repeating-linear-gradient(135deg, rgba(27,58,92,0.06) 0 1px, transparent 1px 14px);
  position: relative;
}
.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.2em;
}

/* Step circles */
.step-num {
  font-family: "游明朝", "Yu Mincho", serif;
  font-size: 14px;
  color: var(--beige);
  letter-spacing: 0.05em;
  font-feature-settings: "tnum" 1;
}