/* ============================================================
   デジタル庁ダッシュボードガイドライン準拠
   カラーパレット: Light Blue
   https://www.digital.go.jp/resources/dashboard-guidebook
============================================================ */

[hidden] { display: none !important; }

/* ---- Design Tokens (Burgundy Palette) ---- */
:root {
  /* Text */
  --text-black:   #000000;
  --text-white:   #FFFFFF;
  --text-label:   #626264;
  --text-link:    #0017C1;

  /* Background */
  --bg-standard:  #F8F8FB;
  --bg-highlight: #7B1A45;
  --bg-control:   #F1F1F4;
  --bg-white:     #FFFFFF;

  /* Burgundy scale */
  --lb-1200: #3A0D22;
  --lb-900:  #7B1A45;
  --lb-600:  #A8285E;
  --lb-400:  #C85A82;
  --lb-200:  #EDAEC5;
  --lb-50:   #FBF0F4;

  /* Semantic */
  --border:  #E0E0E4;
  --r:       6px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg-standard);
  color: var(--text-black);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   HEADER
============================================================ */
#header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  background: transparent;
  border-bottom: none;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

#header.scrolled {
  background: transparent;
  box-shadow: none;
}

.header-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  position: absolute;
  left: 0;
  top: 14px;
  display: block;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--lb-1200);
  padding: 7px 18px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

#header.scrolled .logo {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 220px;
  height: 100vh;
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  padding: 48px 36px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 205;
}
nav.open { opacity: 1; pointer-events: auto; }

nav a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lb-1200);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.15s;
}
nav a:hover { color: var(--lb-600); }

.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 210;
  pointer-events: auto;
  margin-left: auto;
}
.menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--lb-1200);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
.menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.active span:nth-child(2) { opacity: 0; }
.menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
============================================================ */
#hero {
  background: var(--lb-1200);
  border-bottom: 1px solid var(--border);
  padding-top: 0;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: block;
  height: 100svh;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.hero-text {
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  z-index: 2;
  padding: 20px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  background: var(--lb-1200);
}

.animate-1 { animation: fadeUp 0.6s ease both; }
.animate-2 { animation: fadeUp 0.6s 0.1s ease both; }
.animate-3 { animation: fadeUp 0.6s 0.2s ease both; }
.animate-4 { animation: fadeUp 0.6s 0.3s ease both; }
.animate-5 { animation: fadeUp 0.6s 0.4s ease both; }

.hero-district {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--lb-200);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-name { margin-bottom: 20px; }

.hero-kanji {
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.0;
  letter-spacing: 0.06em;
}

.hero-reading {
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 400;
  color: var(--text-label);
  letter-spacing: 0.08em;
  margin-top: 8px;
}

.hero-role {
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 500;
  color: var(--lb-900);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.hero-sub {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--lb-50);
  margin-top: 40px;
  margin-bottom: 36px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.cta-btn {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-white);
  background: var(--lb-900);
  padding: 13px 32px;
  border-radius: var(--r);
  text-decoration: none;
  transition: background 0.15s;
  align-self: flex-start;
}
.cta-btn:hover { background: var(--lb-1200); }

/* Photo fills entire hero */
.hero-photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; margin: 0;
}

.hero-photo-inner { height: 100%; }

.hero-photo-inner img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
  mix-blend-mode: normal;
}

.hero-photo-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--lb-600);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.8;
  border: 2px dashed var(--lb-200);
  border-radius: var(--r);
}

/* ============================================================
   SECTION COMMONS
============================================================ */
section { padding: 56px 0; }

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-en {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--lb-1200);
  opacity: 0.07;
  margin-bottom: -1.2rem;
  line-height: 1;
  display: block;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--lb-1200);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   PROFILE
============================================================ */
#profile { background: var(--lb-50); }

#philosophy { background: var(--lb-1200); }
#philosophy .section-en { color: var(--lb-400); opacity: 0.3; }
#philosophy .section-title { color: #fff; }

.philosophy-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.philosophy-body p {
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--lb-200);
}
.philosophy-body p:first-child {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 500;
}

.profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.profile-photo-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg-control);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.profile-meta span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--lb-900);
  background: var(--lb-50);
  border: 1px solid var(--lb-200);
  border-radius: 2px;
  padding: 3px 12px;
}

.profile-body p {
  font-size: 0.975rem;
  color: var(--text-black);
  line-height: 1.9;
  margin-bottom: 16px;
}

/* ============================================================
   POLICIES
============================================================ */
#policies { background: var(--bg-standard); }

.policies-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.policy-card {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 28px 24px;
  transition: background 0.15s, opacity 0.5s ease;
}
.policy-card:last-child { border-bottom: none; }
.policy-card:hover { background: var(--lb-50); }
.policy-card { cursor: pointer; }

.policy-chevron {
  display: block;
  margin-left: auto;
  margin-top: 14px;
  color: var(--lb-400);
  transition: transform 0.35s ease;
  flex-shrink: 0;
}
.policy-card.open .policy-chevron { transform: rotate(180deg); }

.policy-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.policy-card.open .policy-detail { max-height: 800px; }

.policy-detail-body {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--text-black);
}

.policy-card--wide { grid-column: span 1; }

/* ---- 2026 New Policy Featured Block ---- */
.policy-new {
  margin-bottom: 36px;
}

.policy-new-badge {
  display: inline-block;
  background: var(--lb-600);
  color: var(--text-white);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.policy-new-card {
  background: var(--lb-50);
  border: 1.5px solid var(--lb-200);
  border-left: 5px solid var(--lb-600);
  border-radius: var(--r);
  padding: 28px 24px;
}

.policy-new-title {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 900;
  color: var(--lb-1200);
  margin-bottom: 16px;
  line-height: 1.3;
}

.policy-new-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.policy-new-points li {
  font-size: 0.9rem;
  font-weight: 500;
  padding-left: 18px;
  position: relative;
}

.policy-new-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--lb-600);
  border-radius: 50%;
}

.policy-new-body {
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--text-black);
  padding-top: 16px;
  border-top: 1px solid var(--lb-200);
}

.section-sub-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-label);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.policy-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  background: var(--lb-1200);
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 16px;
  border-radius: 2px;
}

.policy-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lb-1200);
  margin-bottom: 14px;
}

.policy-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.policy-card li {
  font-size: 0.85rem;
  color: var(--text-label);
  padding-left: 14px;
  position: relative;
  line-height: 1.65;
}
.policy-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--lb-600);
}

/* ============================================================
   LINKS
============================================================ */
#links { background: var(--bg-white); }

.links-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, opacity 0.5s ease, transform 0.5s ease;
}
.link-card:last-child { border-bottom: none; }
.link-card:hover { background: var(--lb-50); }

.link-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lb-1200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.link-text {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.link-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--lb-1200);
}
.link-handle {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--text-label);
}

.link-card::after {
  content: '›';
  font-size: 1.2rem;
  color: var(--lb-400);
  margin-left: auto;
}

/* ============================================================
   MASCOT (fixed corner)
============================================================ */
.mascot {
  position: fixed;
  bottom: 0;
  right: 16px;
  width: 96px;
  z-index: 150;
  pointer-events: auto;
  cursor: pointer;
}

.mascot img {
  width: 100%;
  display: block;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.5s ease, translate 0.5s ease;
}
.mascot img.visible {
  opacity: 1;
  translate: 0 0;
}

.scroll-hint {
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--lb-600);
  text-decoration: none;
  animation: scrollBounce 1.4s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll-hint-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  white-space: nowrap;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

@keyframes mascotEntrance {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mascotJump {
  0%   { transform: scaleX(-1) translateY(0)     scaleY(1);    }
  12%  { transform: scaleX(-1.08) translateY(0)     scaleY(0.86); }
  35%  { transform: scaleX(-0.94) translateY(-52px)  scaleY(1.1);  }
  65%  { transform: scaleX(-0.94) translateY(-28px)  scaleY(1.06); }
  80%  { transform: scaleX(-1.1)  translateY(0)     scaleY(0.82); }
  90%  { transform: scaleX(-1)    translateY(-10px)  scaleY(1.03); }
  100% { transform: scaleX(-1)    translateY(0)     scaleY(1);    }
}
.mascot img.jumping {
  animation: mascotJump 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: var(--lb-1200);
  padding: 40px 0;
  border-top: 3px solid var(--lb-900);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-logo {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-white);
  letter-spacing: 0.04em;
}

.footer-nav { display: flex; gap: 24px; }
.footer-nav a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-nav a:hover { color: var(--lb-400); }

.footer-disclaimer {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 560px;
}
.footer-copy {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.7; }
}

/* ============================================================
   RESPONSIVE — tablet (≤ 1024px)
============================================================ */
/* ============================================================
   RESPONSIVE — mobile (≤ 768px)
============================================================ */
@media (max-width: 768px) {
  #header { padding: 0 20px; }

  .hero-text { max-width: 330px; }
  .hero-kanji { font-size: 2.8rem; }
  .hero-sub { font-size: 1.4rem; margin-top: 40px; margin-bottom: 0; padding-left: 3px; }

  .hero-district { margin-bottom: 0; }
  .hero-name { margin-bottom: 0; }

  .profile-layout { grid-template-columns: 1fr; gap: 28px; }
  .profile-photo-placeholder { max-width: 200px; aspect-ratio: 1/1; border-radius: 50%; }

  .policies-grid { grid-template-columns: 1fr; }
  .policy-card--wide { grid-column: span 1; }


  .footer-inner { flex-direction: column; text-align: center; }
  .footer-nav { justify-content: center; }
}

@media (max-width: 480px) {
}

/* ============================================================
   v6 UPGRADES — Timeline / Anshin / Icons / Animations
============================================================ */

/* -- Enhanced fade-in (more dramatic spring) -- */
.fade-in {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* -- Profile Stats Strip -- */
.profile-stats {
  display: flex;
  border: 1px solid var(--lb-200);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 44px;
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 8px;
  border-right: 1px solid var(--lb-200);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--lb-600);
  line-height: 1;
  margin-bottom: 7px;
  letter-spacing: -0.02em;
}
.stat-num small { font-size: 1rem; font-weight: 700; }
.stat-label {
  font-size: 0.67rem;
  font-weight: 500;
  color: var(--text-label);
  letter-spacing: 0.06em;
}

/* -- Timeline -- */
.timeline { display: flex; flex-direction: column; gap: 0; }

.tl-item {
  display: grid;
  grid-template-columns: 44px 20px 1fr;
  column-gap: 14px;
  padding-bottom: 28px;
}
.tl-item:last-child { padding-bottom: 0; }

.tl-year-col {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--lb-600);
  letter-spacing: 0.03em;
  text-align: right;
  padding-top: 3px;
  line-height: 1.3;
}
.tl-line-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lb-50);
  border: 2px solid var(--lb-400);
  flex-shrink: 0;
  margin-top: 3px;
  z-index: 1;
}
.tl-dot--accent {
  background: var(--lb-600);
  border-color: var(--lb-600);
  width: 12px;
  height: 12px;
  margin-top: 2px;
}
.tl-vline {
  width: 1px;
  flex: 1;
  min-height: 12px;
  background: var(--lb-200);
  margin-top: 3px;
}
.tl-item:last-child .tl-vline { display: none; }
.tl-content-col { padding-top: 0; }
.tl-head {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--lb-1200);
  line-height: 1.5;
}
.tl-body {
  font-size: 0.8rem;
  color: var(--text-label);
  line-height: 1.75;
  margin-top: 5px;
}

/* -- ANSHIN MAP Section -- */
#anshin {
  background: var(--lb-1200);
  padding: 64px 0;
}
#anshin .section-en {
  color: var(--lb-400);
  opacity: 0.22;
}
#anshin .section-title {
  color: #fff;        /* v13以降は #anshin .section-title { color: var(--lb-1200) } で上書き済み */
  margin-bottom: 0;   /* section-title-row 内での余白はrowのmargin-bottomで統一 */
}
.anshin-kv {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.anshin-badge {
  display: inline-block;
  background: var(--lb-600);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
/* 政策提言2026 サブタイトル — 全セクション共通（ライト背景前提） */
.anshin-sub {
  font-size: 0.83rem;
  color: var(--text-label);
  font-weight: 500;
  line-height: 1.5;
}
.risk-grid {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.risk-item {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r);
  padding: 18px 6px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transition: background 0.18s;
}
.risk-item:hover { background: rgba(255,255,255,0.13); }
.risk-icon { font-size: 26px; line-height: 1; }
.risk-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
.anshin-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 28px;
}
.anshin-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 14px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  transition: background 0.15s;
}
.anshin-points li:last-child { border-bottom: none; }
.anshin-points li:hover { background: rgba(255,255,255,0.08); }
.apt-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--lb-400);
  background: rgba(168,40,94,0.2);
  padding: 2px 8px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}
.anshin-body {
  font-size: 0.85rem;
  line-height: 1.95;
  color: rgba(237,174,197,0.65);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* -- Policy Card Icons -- */
.policy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--lb-50);
  border-radius: var(--r);
  color: var(--lb-600);
  margin-bottom: 10px;
}

/* -- Policy card: inset accent on hover -- */
.policy-card:hover {
  background: var(--lb-50);
  box-shadow: inset 3px 0 0 var(--lb-600);
}

/* -- Link card: arrow slide on hover -- */
.link-card:hover::after {
  transform: translateX(5px);
  display: inline-block;
  transition: transform 0.2s ease;
}

/* -- Mobile v6 -- */
@media (max-width: 768px) {
  .risk-grid { flex-wrap: wrap; }
  .risk-item { min-width: calc(33.33% - 6px); flex: none; }
  .tl-item { grid-template-columns: 32px 18px 1fr; column-gap: 10px; }
  .profile-stats { flex-wrap: wrap; }
  .stat-item { min-width: 50%; }
  .stat-num { font-size: 1.3rem; }
}

/* ============================================================
   v7 COLORFUL GRID — Per-card accent colors + 2-column layout
============================================================ */

/* Wider container for 2-col policy grid */
#policies > .container { max-width: 760px; }

/* 2-column grid */
.policies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  border: none;
  border-radius: 0;
  overflow: visible;
}

/* Per-card accent palette */
.policy-card:nth-child(1) { --card-color: #2563EB; }
.policy-card:nth-child(2) { --card-color: #7C3AED; }
.policy-card:nth-child(3) { --card-color: #0891B2; }
.policy-card:nth-child(4) { --card-color: #D97706; }
.policy-card:nth-child(5) { --card-color: #059669; }

/* Card: individual border + colored top accent */
.policy-card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--card-color, var(--lb-600));
  border-radius: var(--r);
}
.policy-card:last-child { border-bottom: 1px solid var(--border); }

/* Hover: tinted background + colored left inset */
.policy-card:hover {
  background: color-mix(in srgb, var(--card-color, var(--lb-600)) 6%, white);
  box-shadow: inset 3px 0 0 var(--card-color, var(--lb-600));
}

/* Full-width 5th card */
.policy-card--wide { grid-column: 1 / -1; }

/* Icon: tinted background + matching color */
.policy-icon {
  background: color-mix(in srgb, var(--card-color, var(--lb-600)) 12%, white);
  color: var(--card-color, var(--lb-600));
}

/* Number badge: tinted chip */
.policy-num {
  background: color-mix(in srgb, var(--card-color, var(--lb-1200)) 14%, white);
  color: var(--card-color, var(--lb-1200));
  border: 1px solid color-mix(in srgb, var(--card-color, var(--lb-1200)) 28%, white);
}

/* Mobile v7 */
@media (max-width: 768px) {
  #policies > .container { max-width: 100%; }
  .policies-grid { grid-template-columns: 1fr; }
  .policy-card--wide { grid-column: span 1; }
}

/* ============================================================
   v8 WHITE BASE — sections on white, vivid color accents
============================================================ */

/* All non-hero sections: white */
#profile  { background: #fff; }
#anshin   { background: #fff; padding: 56px 0; }
#policies { background: #fff; }
#links    { background: #fff; }
/* #philosophy stays dark – sole dark contrast anchor */

/* ---- Profile: stats as editorial bordered cards ---- */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 48px;
}
.stat-item {
  align-items: flex-start;
  padding: 20px 20px 16px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--lb-600);
  border-radius: var(--r);
  background: #fff;
  gap: 5px;
}
.stat-item:last-child { border-right: 1px solid var(--border); }
.stat-num {
  font-size: 1.85rem;
  color: var(--lb-1200);
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
.stat-label { font-size: 0.7rem; color: var(--text-label); }

/* ---- Anshin: reset to white-bg styling ---- */
#anshin .section-en   { color: var(--lb-1200); opacity: 0.07; }
#anshin .section-title { color: var(--lb-1200); }
#anshin .anshin-badge  { background: var(--lb-1200); }
/* .anshin-sub の色は基本スタイルで統一済み — ここの上書き不要 */

/* Risk tiles: each its own vivid color */
.risk-item:nth-child(1) { --risk-color: #0891B2; }
.risk-item:nth-child(2) { --risk-color: #7C3AED; }
.risk-item:nth-child(3) { --risk-color: #DC2626; }
.risk-item:nth-child(4) { --risk-color: #92400E; }
.risk-item:nth-child(5) { --risk-color: #D97706; }

.risk-item {
  background: var(--risk-color, var(--lb-600));
  border: none;
  border-radius: 10px;
  padding: 24px 8px 18px;
}
.risk-item:hover { filter: brightness(1.09); background: var(--risk-color, var(--lb-600)); }
.risk-icon { font-size: 34px; }
.risk-name { color: #fff; font-size: 0.82rem; }

/* Anshin / Ijime: 3-column card sections */

.anshin-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 28px;
}
.anshin-points li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--point-color, var(--lb-600));
  border-bottom: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 16px 20px;
  color: var(--lb-1200);
}
.anshin-points li:hover {
  background: color-mix(in srgb, var(--point-color, var(--lb-600)) 5%, white);
}
.anshin-points li:nth-child(1) { --point-color: #0891B2; }
.anshin-points li:nth-child(2) { --point-color: #7C3AED; }
.anshin-points li:nth-child(3) { --point-color: #059669; }

.apt-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--point-color, var(--lb-600));
  background: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 0;
  flex-shrink: 0;
}

.anshin-body {
  color: var(--text-label);
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .anshin-points { grid-template-columns: 1fr; }
}

/* ---- Policy icons: larger ---- */
.policy-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

/* ---- Policy number: big, bold, matching card color ---- */
.policy-num {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--card-color, var(--lb-1200));
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  margin-bottom: 8px;
}

/* ---- Policy card: colored header band ---- */

/* Reset card padding – header/body handle it */
.policy-card {
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

/* Colored header band */
.policy-card-header {
  background: var(--card-color, var(--lb-600));
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  transition: filter 0.15s;
}
.policy-card:hover .policy-card-header { filter: brightness(1.1); }
.policy-card:hover { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.07); }

.policy-card-htxt { flex: 1; min-width: 0; }

/* Number: white, large */
.policy-card-header .policy-num {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 6px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Title: white */
.policy-card-header h3 {
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 0;
  line-height: 1.45;
}

/* Icon: white tint */
.policy-card-header .policy-icon {
  background: rgba(255,255,255,0.18);
  color: #fff;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  margin-top: 2px;
}

/* Body: white area with list + chevron */
.policy-card-body {
  padding: 14px 20px 10px;
  display: flex;
  flex-direction: column;
}

/* Detail: horizontal padding when expanded */
.policy-detail { padding: 0 20px; }
.policy-card.open .policy-detail { padding-bottom: 16px; }

/* Coming soon card */
.policy-card--comingsoon { --card-color: #94A3B8; }
.policy-card--comingsoon .policy-card-header { background: var(--bg-control); }
.policy-card--comingsoon .policy-card-header .policy-num {
  color: var(--text-label);
  font-size: 1.6rem;
}
.policy-card--comingsoon .policy-card-header h3 { color: var(--text-label); }
.policy-comingsoon-text {
  font-size: 0.82rem;
  color: var(--text-label);
  line-height: 1.7;
}

/* ---- Hide section watermark text ---- */
.section-en { display: none; }

/* ---- Risk icon: white SVG on colored tile ---- */
.risk-icon {
  color: rgba(255,255,255,0.92);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile v8 */
@media (max-width: 768px) {
  .profile-stats { gap: 8px; }
  .stat-item { padding: 14px 12px; }
  .stat-num { font-size: 1.4rem; }
}
@media (max-width: 400px) {
  .profile-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   v9 — 横タイムライン (Profile section)
============================================================ */

#profile { background: #fff; padding: 56px 0; }
#profile > .container { max-width: 840px; }

.timeline {
  display: flex;
  flex-direction: row;
  position: relative;
  gap: 0;
  margin-top: 32px;
}

/* horizontal connector line */
.timeline::before {
  content: '';
  position: absolute;
  top: 31px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--lb-200);
  z-index: 0;
}

.tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 4px;
}

.tl-year-col {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--lb-600);
  letter-spacing: 0.06em;
  min-height: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}

.tl-line-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lb-200);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--lb-200);
  flex-shrink: 0;
}

.tl-dot--accent {
  background: var(--lb-600);
  box-shadow: 0 0 0 2px var(--lb-600);
}

.tl-vline { display: none; }

.tl-content-col {
  text-align: center;
  padding: 0 2px;
}

.tl-head {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lb-1200);
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tl-body { display: none; }

/* Mobile: stack vertically */
@media (max-width: 640px) {
  .timeline {
    flex-direction: column;
    gap: 0;
  }
  .timeline::before {
    top: 8%;
    bottom: 8%;
    left: 56px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .tl-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 20px;
  }
  .tl-year-col {
    width: 44px;
    flex-shrink: 0;
    text-align: right;
    padding-bottom: 0;
    padding-top: 2px;
    min-height: auto;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .tl-line-col {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .tl-content-col { text-align: left; }
  .tl-head { text-align: left; }
  .tl-body { display: block; font-size: 0.78rem; color: var(--text-label); margin-top: 4px; line-height: 1.6; }
}

/* ============================================================
   v10 — Interactive timeline strip (Profile → below Hero)
============================================================ */

/* Section */
#profile {
  background: #fff;
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--border);
}
#profile > .container { max-width: 900px; }

/* Horizontal flex wrap */
.tl-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tl-wrap::-webkit-scrollbar { display: none; }

/* Horizontal connector line: runs at dot center height */
.tl-wrap::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 7%;
  right: 7%;
  height: 2px;
  background: var(--lb-200);
  z-index: 0;
  pointer-events: none;
}

/* Each item column */
.tl-item {
  flex: 1;
  min-width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
  padding: 0 4px;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tl-item:hover { opacity: 0.75; }
.tl-item:focus-visible { outline: 2px solid var(--lb-600); outline-offset: 4px; border-radius: 4px; }

/* Year */
.tl-year {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--lb-600);
  letter-spacing: 0.08em;
  height: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

/* Dot wrapper (for sizing / z-index) */
.tl-node {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Dot */
.tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lb-200);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--lb-200);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  display: block;
}
.tl-item:hover .tl-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--lb-400);
}
.tl-item--active .tl-dot {
  background: var(--lb-600) !important;
  box-shadow: 0 0 0 3px var(--lb-600) !important;
  transform: scale(1.3);
}
.tl-dot--accent {
  background: var(--lb-600);
  box-shadow: 0 0 0 2px var(--lb-600);
}
.tl-dot--future {
  background: transparent;
  border: 3px solid var(--lb-400);
  box-shadow: none;
  animation: tl-pulse 1.8s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 0px rgba(168,40,94,0.35); }
  50%       { box-shadow: 0 0 0 7px rgba(168,40,94,0); }
}

/* Label */
.tl-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--lb-1200);
  text-align: center;
  margin-top: 8px;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tl-item--future .tl-label {
  color: var(--lb-600);
  font-style: italic;
  letter-spacing: 0.04em;
}

/* Arrow connector */
.tl-connector {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 4px;
}
.tl-connector-spacer { height: 24px; }
.tl-connector-arrow {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lb-400);
  position: relative;
  z-index: 2;
  background: #fff;
}

/* Detail panel */
.tl-detail {
  position: relative;
  margin-top: 18px;
  background: var(--lb-50);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lb-600);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 44px 14px 20px;
  animation: tl-detail-in 0.18s ease;
}
@keyframes tl-detail-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tl-detail-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.tl-detail-year {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--lb-600);
  letter-spacing: 0.1em;
}
.tl-detail-label {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--lb-1200);
}
.tl-detail-text {
  font-size: 0.82rem;
  color: var(--text-body, #444);
  line-height: 1.75;
  margin: 0;
}
.tl-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label, #aaa);
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.tl-detail-close:hover {
  background: var(--border, #e5e5e5);
  color: var(--lb-1200);
}

/* Mobile */
@media (max-width: 600px) {
  #profile { padding: 28px 0 20px; }
  .tl-item { min-width: 72px; }
  .tl-label { font-size: 0.62rem; }
}

/* ============================================================
   v11 — Timeline arrowhead from line + section label
============================================================ */

/* Extend line past 2026 dot */
.tl-wrap::before {
  right: 5%;
}

/* Arrowhead — emerges from line end */
.tl-wrap::after {
  content: '';
  position: absolute;
  top: 31px;                        /* 38px (line) - 7px (half of 14px) */
  right: calc(5% - 10px);          /* left edge of triangle = right edge of line */
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--lb-200);
  z-index: 1;
  pointer-events: none;
}

/* Section label above timeline */
.tl-section-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lb-400);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ============================================================
   v12 — Section upper tags, SNS icon grid
============================================================ */

/* Section upper tag (pill label) */
.sec-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--lb-1200);
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* Profile sec-tag inline spacing */
#profile .sec-tag { margin-bottom: 16px; }

/* Anshin: remove old badge since sec-tag handles category */
.anshin-badge { display: none; }
.anshin-kv { margin-top: 0; padding-top: 0; }

/* SNS icon grid */
.sns-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sns-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  width: 96px;
  padding: 18px 8px 14px;
  border-radius: 12px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.sns-item:hover { background: var(--lb-50); }

.sns-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--lb-1200);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.sns-item:hover .sns-icon {
  background: var(--lb-600);
  transform: translateY(-2px);
}

.sns-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--lb-1200);
  text-align: center;
  line-height: 1.3;
}
.sns-handle {
  font-size: 0.6rem;
  color: var(--text-label);
  text-align: center;
}

/* Links section white bg */
#links { background: #fff; }

/* ============================================================
   v13 — Uniform container width + larger sec-tag
============================================================ */

/* Widen all containers to match profile strip width */
.container { max-width: 900px; }

/* Reset specific overrides that were narrower */
#anshin > .container { max-width: 900px; }
#ijime  > .container { max-width: 900px; }
#profile > .container { max-width: 900px; }

/* Larger sec-tag */
.sec-tag {
  font-size: 0.78rem;
  padding: 6px 18px;
  margin-bottom: 16px;
}

/* ============================================================
   v14 — sec-tag +2 steps, proposal-label, links narrow padding
============================================================ */

/* sec-tag: 2 steps up (0.78→1.0rem) */
.sec-tag {
  font-size: 1.0rem;
  padding: 7px 22px;
  margin-bottom: 16px;
}

/* "追加提言N" — outlined accent pill */
.proposal-label {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--lb-600);
  border: 2px solid var(--lb-600);
  padding: 5px 18px;
  border-radius: 100px;
  margin-bottom: 14px;
  letter-spacing: 0.06em;
}

/* Links section: narrow vertical padding */
#links { padding: 28px 0 32px; }

/* ============================================================
   v15 — section-title-row (heading + proposal-label inline)
============================================================ */

.section-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-title-row .section-title { margin-bottom: 0; }

/* ============================================================
   v16 — proposal-label "NEW!" sticker style + larger policy h3
============================================================ */

/* Sticker badge (amber fill, slight tilt) */
.proposal-label {
  background: #D97706;
  color: #fff;
  border: none;
  font-size: 0.88rem;
  padding: 5px 16px;
  transform: rotate(-2deg);
  box-shadow: 2px 3px 0 rgba(0,0,0,0.18);
  letter-spacing: 0.05em;
}

/* Policy card heading: larger + heavier */
.policy-card-header h3 {
  font-size: 1.15rem;
  font-weight: 900;
}

/* ============================================================
   v17 — proposal-label: no rotation
============================================================ */
.proposal-label {
  transform: none;
}

/* ============================================================
   v18 — Hero: full-screen editorial, centered composition
============================================================ */

#hero {
  background: var(--lb-1200);
  min-height: 100svh;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-bottom: none;
  display: flex;
  align-items: stretch;
}

/* Large semi-transparent "SUGINAMI" watermark */
.hero-wm {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(5.5rem, 26vw, 20rem);
  letter-spacing: -0.04em;
  color: var(--lb-900);
  opacity: 0.2;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  bottom: -0.06em;
  right: -0.03em;
  z-index: 0;
  line-height: 1;
}

/* Vertical center stage */
.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 28px 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
}

/* Meta: role label above name */
.hero-meta {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--lb-400);
  text-align: center;
  margin-bottom: 12px;
  line-height: 2;
}

/* Name block */
.hero-name-wrap { text-align: center; margin-bottom: 20px; }

.hero-name-main {
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.0;
  letter-spacing: 0.05em;
  display: block;
}

.hero-name-en {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.44em;
  color: var(--lb-400);
  display: block;
  margin-top: 10px;
}

/* Photo */
.hero-fig {
  width: min(240px, 56vw);
  aspect-ratio: 3/4;
  max-height: 44svh;
  position: relative;
  margin: 0 auto 20px;
  border: 2px solid var(--lb-900);
  flex-shrink: 0;
  overflow: hidden;
}

.hero-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.hero-fig-ph {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--lb-400);
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.8;
  background: var(--lb-900);
}

/* Catchcopy */
.hero-catch {
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Hamburger: white on dark hero, dark after scroll, dark when open */
.menu-btn span { background: rgba(255,255,255,0.85); }
#header.scrolled .menu-btn span { background: var(--lb-1200); }
.menu-btn.active span { background: var(--lb-1200); }

/* Scroll hint: white on dark hero background; hide text to avoid overlap */
.scroll-hint { color: rgba(255,255,255,0.55); }
.scroll-hint-text { display: none; }

/* ============================================================
   v19 — Hero: 3-column (left name | center photo | right catch)
============================================================ */

.hero-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100svh;
  min-height: 480px;
  position: relative;
  z-index: 2;
}

/* Shared side column styles */
.hero-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 60px 0;
}

.hero-side--left {
  width: min(140px, 17vw);
  border-right: 1px solid rgba(255,255,255,0.1);
}

.hero-side--right {
  width: min(120px, 14vw);
  border-left: 1px solid rgba(255,255,255,0.1);
}

/* Vertical name */
.hero-name-v {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.0;
}

/* Latin subtitle under name */
.hero-en-v {
  writing-mode: vertical-rl;
  font-family: 'Inter', sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--lb-400);
}

/* Vertical catchcopy */
.hero-catch-v {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(1.1rem, 1.9vw, 1.8rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* Vertical meta label */
.hero-meta-v {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lb-400);
  opacity: 0.7;
}

/* Center photo: fills remaining width × full height */
.hero-fig-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.hero-fig-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.hero-fig-ph {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--lb-400);
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.8;
  background: var(--lb-900);
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .hero-main { flex-direction: column; }
  .hero-side--left {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 44px 24px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    gap: 12px;
  }
  .hero-side--right {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 12px 24px 56px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 12px;
  }
  .hero-name-v, .hero-catch-v, .hero-en-v, .hero-meta-v {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
  .hero-name-v { font-size: 2.6rem; }
  .hero-catch-v { font-size: 1.2rem; }
  .hero-fig-wrap { min-height: 52svh; }
}

/* ============================================================
   v20 — Hero: photo right + large catchphrase left + gradient
============================================================ */

#hero {
  background: var(--lb-1200);
  height: 100svh;
  min-height: 480px;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: block;
}

/* Photo: right-aligned, full height, slightly wider than half */
.hero-bg-fig {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 62%;
}

.hero-bg-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: block;
}

/* Gradient: bleeds photo into left bg */
.hero-bg-fig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #3A0D22 0%,
    rgba(58,13,34,0.92) 18%,
    rgba(58,13,34,0.55) 42%,
    rgba(58,13,34,0.1) 68%,
    transparent 82%
  );
}

/* Text block: left side, vertically centered */
.hero-content {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 56px 80px 48px;
  z-index: 2;
}

.hero-role {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--lb-400);
  margin-bottom: 20px;
  line-height: 1;
}

/* Catchphrase: very large */
.hero-catch {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 40px;
  text-align: left;
  text-wrap: nowrap;
}

.hero-name-block { display: flex; flex-direction: column; gap: 6px; }

.hero-name-lg {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1;
}

.hero-name-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--lb-400);
}

/* Mobile */
@media (max-width: 640px) {
  .hero-bg-fig { width: 100%; }
  .hero-bg-fig::after {
    background: linear-gradient(
      to top,
      #3A0D22 0%,
      rgba(58,13,34,0.9) 30%,
      rgba(58,13,34,0.5) 60%,
      transparent 80%
    );
  }
  .hero-content {
    width: 100%;
    align-items: flex-end;
    padding: 40px 28px 72px;
  }
  .hero-catch { font-size: clamp(2.2rem, 8vw, 3rem); }
}

/* ============================================================
   v22 — Hero: transparent PNG right, white → burgundy gradient
============================================================ */

#hero {
  background: linear-gradient(to right, #ffffff 0%, #ffffff 42%, #9B2855 68%, #9B2855 100%);
}

.hero-bg-fig {
  width: 65%;
  left: 54%;
  right: auto;
  background: transparent;
}

.hero-bg-fig::after { display: none; }

.hero-bg-fig img {
  height: 112%;
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  margin-top: -6%;
}

.hero-content {
  width: 48%;
  gap: 14px;
  justify-content: flex-start;
  padding-top: 9vh;
  padding-bottom: 20px;
}

.hero-role {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lb-600);
  margin-bottom: 24px;
}

.hero-name-lg {
  font-size: clamp(3.5rem, 6.5vw, 5.5rem);
  font-weight: 900;
  color: var(--lb-1200);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0;
}

.hero-catch {
  font-size: clamp(3.4rem, 5.5vw, 4.6rem);
  font-weight: 700;
  font-style: italic;
  color: var(--lb-900);
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-top: auto;
  padding-bottom: 28px;
  text-wrap: nowrap;
}

/* scroll hint: burgundy circle, page center */
.scroll-hint {
  left: 0;
  right: 0;
  transform: none;
  bottom: 32px;
  width: 56px;
  height: 56px;
  background: var(--lb-1200);
  border-radius: 50%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.scroll-hint svg {
  background: none;
  border-radius: 0;
  padding: 0;
  width: 26px;
  height: 30px;
}

/* 透過PNG の浮き感を drop-shadow で解消 */
.hero-bg-fig img {
  filter: drop-shadow(-12px 0 32px rgba(100, 20, 50, 0.55))
          drop-shadow(0 24px 40px rgba(0, 0, 0, 0.32))
          drop-shadow(12px 0 20px rgba(100, 20, 50, 0.2));
}

@media (max-width: 640px) {
  #hero {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 38%, #9B2855 66%, #9B2855 100%);
  }
  /* 写真: full幅・下半分に配置 */
  .hero-bg-fig {
    left: -10%;
    right: auto;
    width: 120%;
    top: 42%;
    bottom: 0;
  }
  .hero-bg-fig img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top center;
    margin-top: 0;
    filter: drop-shadow(0 -8px 24px rgba(155, 40, 85, 0.35))
            drop-shadow(0 20px 32px rgba(0, 0, 0, 0.22));
  }
  /* テキスト: 上半分・左揃え */
  .hero-content {
    width: 100%;
    height: auto;
    top: 0;
    bottom: auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 52px 28px 0;
    gap: 6px;
    padding-top: 52px;
    padding-bottom: 0;
  }
  .hero-role {
    font-size: 1rem;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    color: var(--lb-600);
  }
  .hero-name-lg {
    font-size: clamp(2.8rem, 11vw, 3.6rem);
  }
  .hero-catch {
    font-size: clamp(1.8rem, 7.5vw, 2.4rem);
    margin-top: 12px;
    padding-bottom: 0;
    color: var(--lb-1200);
    text-wrap: wrap;
  }
}

/* ============================================================
   v21 — Policy card color: card3 → green / card5 → rainbow
============================================================ */

.policy-card:nth-child(3) { --card-color: #059669; }

.policy-card:nth-child(5) .policy-card-header {
  background: repeating-linear-gradient(
    -55deg,
    #B85C5C  0px, #B85C5C  16px,
    #C07840 16px, #C07840  32px,
    #B8A840 32px, #B8A840  48px,
    #3E8F5E 48px, #3E8F5E  64px,
    #3A6BB5 64px, #3A6BB5  80px,
    #6E4BA8 80px, #6E4BA8  96px
  );
}

/* ============================================================
   v23 — モバイル表示バグ修正 + タイムラインナビ + anshin数字カラー
============================================================ */

/* タイムライン detail パネル: flex水平配置でナビボタンを左右に固定 */
.tl-detail {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.tl-detail-body {
  flex: 1;
  padding: 14px 10px;
  min-width: 0;
}

/* 左右ナビボタン: flexアイテムとして左右に配置 */
.tl-detail-nav {
  flex-shrink: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lb-400);
  transition: color 0.15s, background 0.12s;
}
.tl-detail-nav:hover:not(:disabled) {
  color: var(--lb-600);
  background: rgba(168,40,94,0.07);
}
.tl-detail-nav:disabled {
  opacity: 0.2;
  cursor: default;
}
.tl-detail-prev { border-radius: 0 0 0 var(--r, 6px); order: -1; }
.tl-detail-next { border-radius: 0 var(--r, 6px) var(--r, 6px) 0; }

/* anshin 01〜03 の数字色をバーガンディスケールに統一（リスクアイコン色と混同しないよう） */
.anshin-points li:nth-child(1) { --point-color: var(--lb-600); }
.anshin-points li:nth-child(2) { --point-color: var(--lb-900); }
.anshin-points li:nth-child(3) { --point-color: var(--lb-1200); }

/* タイムライン: 古い縦型タイムラインのgap:12pxがモバイルで残存→リセット */
.tl-item { gap: 0; }

/* あんしんセクション: タイトル+NEWバッジが折り返して別行になる問題 */
@media (max-width: 640px) {
  .section-title-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }
  .section-title-row .section-title {
    font-size: 1.4rem;
    line-height: 1.25;
  }
}

/* v23 — あんしんセクション: ピラーカラー（ijimeと別色セット） */
#anshin .ijime-pillar:nth-child(1) { --pillar-color: #0891B2; } /* 地図でリスク可視化: シアン */
#anshin .ijime-pillar:nth-child(2) { --pillar-color: #DC2626; } /* リアルタイム更新: レッド */
#anshin .ijime-pillar:nth-child(3) { --pillar-color: #7C3AED; } /* データ開示を推進: パープル */

/* v23 — いじめセクション: 上部カラー・下部白の2トーンピラーカード */
.ijime-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.ijime-pillar {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ijime-pillar:nth-child(1) { --pillar-color: #0891B2; }
.ijime-pillar:nth-child(2) { --pillar-color: #D97706; }
.ijime-pillar:nth-child(3) { --pillar-color: #059669; }
.ijime-pillar-head {
  background: var(--pillar-color);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ijime-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255,255,255,0.5);
}
.ijime-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.ijime-icon-row strong {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.ijime-pillar-body {
  background: #fff;
  padding: 14px 16px 18px;
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--lb-1200);
}
@media (max-width: 600px) {
  .ijime-pillars { grid-template-columns: 1fr; }
}

/* ============================================================
   AREA MAP SECTION
============================================================ */
#area-map {
  background: #fff;
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
#area-map > .container { max-width: 900px; }

.area-map-intro {
  font-size: 0.88rem;
  color: var(--text-label);
  margin-bottom: 1.5rem;
}

.area-map-wrap {
  max-width: 100%;
}

#suginami-map {
  width: 100%;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}

.area-region {
  transition: filter 0.14s;
  cursor: pointer;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.area-region:hover { filter: brightness(1.12); }
.area-region.selected {
  stroke: #fff;
  stroke-width: 3;
  filter: brightness(0.88);
}

.train-line {
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}
.train-chuo       { stroke: #E65C14; stroke-width: 2.8; }
.train-seibu      { stroke: #1458C8; stroke-width: 2.4; }
.train-keio       { stroke: #2A9D8A; stroke-width: 2.4; }
.train-marunouchi { stroke: #E50012; stroke-width: 2.4; }
.train-keio-main  { stroke: #E22B6E; stroke-width: 2.4; }

.station-label {
  font-size: 7.5px;
  fill: #222;
  pointer-events: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}

.area-label {
  font-size: 10px;
  font-weight: 700;
  fill: #fff;
  pointer-events: none;
  text-anchor: middle;
  font-family: 'Noto Sans JP', sans-serif;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.35);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.area-label-sm { font-size: 8.5px; }

/* Overlay */
.area-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.area-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.area-overlay-sheet {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px 22px;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 4px solid var(--area-color, #888);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.area-overlay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-label);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1;
}
.area-overlay-close:hover { background: var(--lb-100); }

.area-panel-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--area-color, var(--lb-600));
}
.area-panel-header h3 {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--lb-1200);
  margin-bottom: 3px;
}
.area-panel-header p {
  font-size: 0.72rem;
  color: var(--text-label);
}
.area-panel-block { margin-bottom: 12px; }
.area-panel-block-ttl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--area-color, var(--lb-600));
  margin-bottom: 6px;
}
.area-panel-block ul { list-style: none; padding: 0; margin: 0; }
.area-panel-block ul li {
  font-size: 0.82rem;
  padding: 5px 0 5px 1.1rem;
  position: relative;
  color: var(--lb-1200);
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.area-panel-block ul li:last-child { border-bottom: none; }
.area-panel-block ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--area-color, var(--lb-600));
  font-size: 0.7rem;
  top: 6px;
}

/* ============================================================
   v29 — Visual polish (デザイン基調・レイアウト不変のリッチ化)
   - 深度: カードに多層シャドウ + ホバーリフト
   - タイポ: 見出しにpalt詰め
   - ヒーロー: テキスト3段ステージング
   - アクセシビリティ: reduced-motion対応
============================================================ */

/* ---- Selection & anchor offset ---- */
::selection { background: var(--lb-200); color: var(--lb-1200); }
html { scroll-padding-top: 24px; }

/* ---- 見出しの和文詰め（palt） ---- */
.section-title, .hero-catch, .hero-name-lg, .policy-card-header h3,
.tl-detail-label, .area-panel-header h3 {
  font-feature-settings: "palt";
}

/* ---- ヒーロー: 3段ステージング入場 ---- */
.hero-content .hero-role    { animation: fadeUp 0.55s 0.05s ease both; }
.hero-content .hero-name-lg { animation: fadeUp 0.6s  0.18s ease both; }
.hero-content .hero-catch   { animation: fadeUp 0.7s  0.38s ease both; }

/* ヒーロー写真: ふわっと浮かび上がる */
.hero-bg-fig { animation: heroFigIn 0.9s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes heroFigIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- カード深度: 多層シャドウ + ホバーリフト ---- */
.ijime-pillar, .policy-card, .stat-item {
  box-shadow: 0 1px 2px rgba(58,13,34,0.04), 0 2px 8px rgba(58,13,34,0.04);
}
.ijime-pillar, .stat-item {
  transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.15s;
}
/* policy-card は fade-in 入場と競合しないよう、visible後にのみリフト用transitionを適用 */
.policy-card.visible {
  transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.15s;
}
.ijime-pillar:hover, .stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(58,13,34,0.07), 0 12px 28px rgba(58,13,34,0.09);
}
.policy-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(58,13,34,0.07), 0 12px 28px rgba(58,13,34,0.10);
}
/* fade-in と transform が競合しないよう、visible後のみリフト */
.policy-card.fade-in:not(.visible):hover,
.ijime-pillar.fade-in:not(.visible):hover { transform: translateY(36px); }

/* 開閉チェブロン: カード色に追従 */
.policy-chevron { color: var(--card-color, var(--lb-400)); }

/* policy詳細の展開をなめらかに */
.policy-detail { transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* ---- sec-tag: 平坦な単色 → 深みのあるグラデ ---- */
.sec-tag {
  background: linear-gradient(135deg, var(--lb-900) 0%, var(--lb-1200) 60%);
  box-shadow: 0 2px 8px rgba(58,13,34,0.18);
}

/* ---- タイムライン: 詳細パネルに浮遊感 ---- */
.tl-detail { box-shadow: 0 2px 10px rgba(58,13,34,0.06); }
.tl-item--active .tl-label { color: var(--lb-600); }

/* ---- 地域マップ: ホバーで領域がふっと浮く ---- */
.area-region {
  transition: filter 0.18s ease, opacity 0.18s ease;
}
.area-region:hover {
  filter: brightness(1.1) drop-shadow(0 3px 6px rgba(58,13,34,0.28));
}
#suginami-map:has(.area-region:hover) .area-region:not(:hover) { opacity: 0.75; }
.area-overlay-backdrop { backdrop-filter: blur(2px); background: rgba(58,13,34,0.3); }
.area-overlay-sheet { animation: sheetIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- SNS: アイコンに弾み ---- */
.sns-item:hover .sns-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(58,13,34,0.22);
}
.sns-icon { transition: background 0.15s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s; }

/* ---- 理念セクション: 奥行きのあるラジアルグラデ + 装飾引用符 ---- */
#philosophy {
  background: radial-gradient(ellipse 120% 90% at 20% 0%, #54143251 0%, transparent 60%),
              var(--lb-1200);
  position: relative;
  overflow: hidden;
}
#philosophy .container { position: relative; }
#philosophy .container::before {
  content: '“';
  position: absolute;
  top: -0.35em;
  left: -8px;
  font-family: Georgia, serif;
  font-size: 7rem;
  line-height: 1;
  color: var(--lb-900);
  opacity: 0.55;
  pointer-events: none;
}
#philosophy .section-title { position: relative; }

/* ---- フッター: 上端をグラデボーダーに ---- */
footer {
  border-top: none;
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--lb-900), var(--lb-600), var(--lb-900));
}

/* ---- NEWバッジ: 視線を引く控えめなシャイン ---- */
.proposal-label {
  position: relative;
  overflow: hidden;
}
.proposal-label::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: badgeShine 4.5s ease-in-out infinite;
}
@keyframes badgeShine {
  0%, 70% { left: -60%; }
  85%, 100% { left: 130%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   v30 — 地域マップ: 課題⇔提案ペア表示
============================================================ */
.area-overlay-sheet { max-width: 400px; }

.area-pairs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.area-pair {
  border: 1px solid var(--border);
  border-left: 3px solid var(--area-color, var(--lb-600));
  border-radius: 0 var(--r) var(--r) 0;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.area-pair-issue,
.area-pair-plan {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.area-pair-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border-radius: 100px;
  margin-top: 2px;
  background: var(--bg-control);
  color: var(--text-label);
}
.area-pair-badge--plan {
  background: var(--area-color, var(--lb-600));
  color: #fff;
}
.area-pair p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--lb-1200);
}
.area-pair-issue p { color: var(--text-label); }
/* 提案行: 課題と同じ左位置で並べる */
.area-pair-plan {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}