/* ====================================================================
   KANKUCHI — Adopted Theme (Variant C / Hybrid)
   ルート版。variant-c/theme.css と同内容で画像パスのみ調整。
   ==================================================================== */

:root {
  --bg:            #FAF8F2;
  --surface:       rgba(255, 255, 255, 0.78);
  --surface-hover: rgba(255, 255, 255, 0.95);
  --border:        rgba(20, 32, 46, 0.10);

  --text:          #14202E;
  --text-soft:     #4A5868;
  --text-faint:    #8A95A2;

  --accent:        #2680C4;
  --accent-2:      #5AA6E0;
  --accent-soft:   rgba(38, 128, 196, 0.12);

  --btn-bg:        #14202E;
  --btn-text:      #FFFFFF;

  --cta-bg:        #1B2D44;
  --cta-bg-image:  url('assets/hero-skyline.png');
  --cta-bg-opacity:0.18;

  --image-filter: contrast(1.02) saturate(1.0);

  --header-bg-scrolled: rgba(250, 248, 242, 0.82);
}

.accent-text { color: var(--accent); }

body {
  background: var(--bg);
}

.hero {
  background-image:
    linear-gradient(180deg,
      rgba(27, 45, 68, 0.55) 0%,
      rgba(27, 45, 68, 0.78) 65%,
      rgba(27, 45, 68, 0.92) 100%),
    url('assets/hero-skyline.png');
  background-size: cover;
  background-position: center;
  color: #F5F0E8;
}

.hero .hero-display { color: #FFFFFF; }
.hero .hero-display .accent { color: #7AC5FF; }
.hero .hero-meta { color: rgba(245, 240, 232, 0.75); }
.hero .hero-meta .dot { color: #7AC5FF; }
.hero .hero-sub { color: rgba(245, 240, 232, 0.85); }

.hero .hero-search {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hero .hero-search input { color: #FFFFFF; }
.hero .hero-search input::placeholder { color: rgba(245, 240, 232, 0.55); }
.hero .hero-search .btn {
  background: #FFFFFF;
  color: #14202E;
}

.hero .scroll-cue { color: rgba(245, 240, 232, 0.7); }
.hero .scroll-cue::after { background: linear-gradient(to bottom, #7AC5FF, transparent); }

.hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.site-header .brand-logo,
.site-header .nav-main a,
.site-header .btn-ghost {
  color: #F5F0E8;
  border-color: rgba(245, 240, 232, 0.25);
}
.site-header .nav-main a { color: rgba(245, 240, 232, 0.75); }
.site-header.is-scrolled .brand-logo,
.site-header.is-scrolled .nav-main a,
.site-header.is-scrolled .btn-ghost {
  color: #14202E;
  border-color: rgba(20, 32, 46, 0.20);
}
.site-header.is-scrolled .nav-main a { color: #4A5868; }

#review-entry,
#axes,
#imagery,
#voices,
#people  { background: rgba(255, 255, 255, 0.45); }
#ranking,
#areas,
#by-company { background: transparent; }

.axis-card,
.voice-card,
.rank-card,
.area-tile {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(20, 32, 46, 0.04);
}

.axis-card:hover  { background: rgba(255, 255, 255, 1); }
.rank-card:hover  { border-color: var(--accent); box-shadow: 0 12px 32px rgba(38, 128, 196, 0.08); }
.area-tile:hover  { background: rgba(255, 255, 255, 1); border-color: var(--accent); }
.voice-card:hover { background: rgba(255, 255, 255, 1); border-color: var(--accent-soft); }

.cta-band {
  background: linear-gradient(135deg, #1B2D44 0%, #243C5C 100%);
  border-color: rgba(38, 128, 196, 0.20);
  color: #F5F0E8;
}
.cta-band .cta-title { color: #FFFFFF; }
.cta-band .cta-text  { color: rgba(245, 240, 232, 0.78); }
.cta-band .cta-eyebrow { color: #7AC5FF; }
.cta-band::before {
  background-image: url('assets/hero-skyline.png');
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  filter: blur(1px);
}
.cta-band .btn {
  background: #FFFFFF;
  color: #14202E;
}
.cta-band .btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.30);
}

.site-footer {
  background: #F2EFE8;
  border-top-color: rgba(20, 32, 46, 0.10);
}