/* ============================================================
   ももかわ一郎 公式サイト — 静的プレビュー
   写真・原稿は差し替え前提のプレースホルダ
   ============================================================ */

:root {
  /* 参政党オレンジを基調／練馬区グリーンを答弁色に */
  --ink: #222222;
  --ink-mid: #555555;
  --ink-soft: #888888;
  --paper: #faf8f4;
  --paper-2: #f3eee6;
  --white: #ffffff;
  --line: #e4e4e4;
  --accent: #f08000;
  --accent-deep: #c86800;
  --orange: #f08000;
  --orange-line: #e8912d;
  --orange-bg: #fdf6ee;
  --orange-ink: #b35f00;
  --blue: #2f6fb0;
  --blue-soft: #f1f6fb;
  --green: #4e9a5e;
  --green-soft: #f1f8f2;
  --green-ink: #2f6b3c;
  --orange-soft: #fdf6ee;
  --btn-fill: linear-gradient(155deg, #f09020 0%, #d96a00 72%, #b35500 100%);
  --btn-fill-hover: linear-gradient(155deg, #ffa033 0%, #e87800 72%, #c86800 100%);
  --btn-radius: 10px;
  --btn-edge: 1px solid rgba(255, 255, 255, 0.55);
  --btn-glow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px rgba(180, 90, 0, 0.18);
  --max: 1120px;
  --narrow: 720px;
  --header-h: calc(5.25rem + 3px);
  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Noto Sans JP", serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic Medium", Meiryo, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

main {
  overflow-x: clip;
  max-width: 100%;
}

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

a {
  color: var(--accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.6em;
  letter-spacing: 0.06em;
  color: var(--ink);
}

p {
  margin: 0 0 1em;
}

ul, ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.wrap {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - 2.5rem, var(--narrow));
  margin-inline: auto;
}

/* ---- Reveal motion ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal-side {
  opacity: 0;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

.reveal-side[data-side="left"],
.reveal-side[data-side="right"] {
  transform: translateY(16px);
}

.reveal-side.is-in {
  opacity: 1;
  transform: none;
}

/* ---- Header（参政党オレンジ×白抜き） ---- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 40;
  max-width: 100%;
  background: var(--accent);
  border-bottom: 3px solid #c86800;
  animation: header-enter 0.75s var(--ease) both;
  transition:
    box-shadow 0.45s var(--ease),
    background-color 0.45s var(--ease),
    border-bottom-color 0.45s var(--ease);
}

@keyframes header-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-header.is-scrolled {
  background: #e07000;
  border-bottom-color: #b85a00;
  box-shadow: 0 10px 28px rgba(90, 42, 0, 0.28);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  min-height: 5.25rem;
  padding-block: 0.55rem;
  transition: min-height 0.45s var(--ease), padding-block 0.45s var(--ease);
}

.site-header.is-scrolled .bar {
  min-height: 4.65rem;
  padding-block: 0.35rem;
}

.site-header a,
.site-header .brand,
.site-header .brand:hover,
.site-header .nav a,
.site-header .nav a:hover,
.site-header .nav a[aria-current="page"] {
  color: #ffffff !important;
}

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.95rem;
  text-decoration: none;
  color: #ffffff;
}

.brand:hover {
  color: #ffffff;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.brand .name {
  font-family: var(--font-display);
  font-size: clamp(1.48rem, 2.5vw, 1.82rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: #ffffff !important;
  transition: font-size 0.45s var(--ease);
}

.site-header.is-scrolled .brand .name {
  font-size: clamp(1.38rem, 2.3vw, 1.68rem);
}

.brand .role {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.95) !important;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.55rem;
  align-items: center;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: #ffffff !important;
  font-size: clamp(0.9rem, 1.2vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.5rem 0;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: #ffffff;
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-header .bar,
  .brand .name {
    transition: none;
  }

  .reveal,
  .reveal-side {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #e87800;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1.25rem 1rem;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3.05rem;
  padding: 0.7rem 1.55rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-decoration: none;
  border: 1.5px solid transparent;
  background: var(--accent);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(180, 90, 0, 0.18);
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s var(--ease),
    box-shadow 0.25s ease;
}

a.btn,
a.btn:hover,
a.btn:focus {
  color: #ffffff;
  text-decoration: none;
}

.btn:hover {
  background: var(--accent-deep);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(180, 90, 0, 0.24);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

a.btn-ghost,
a.btn-ghost:hover {
  color: #ffffff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #ffffff;
  color: #ffffff;
}

/* 新着情報下：議会報告（オレンジ）／ブログ（濃色） */
.btn-alt {
  background: #3d4a3f;
  border-color: #3d4a3f;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(40, 50, 42, 0.16);
}

a.btn-alt,
a.btn-alt:hover {
  color: #ffffff;
  text-decoration: none;
}

.btn-alt:hover {
  background: #2c3630;
  border-color: #2c3630;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(40, 50, 42, 0.22);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---- Hero banner（人物メイン・フルブリード） ---- */
.hero-banner {
  position: relative;
  min-height: min(88vh, 760px);
  display: grid;
  align-items: end;
  color: var(--white);
  overflow: hidden;
}

.hero-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 18%;
}

.hero-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Soft left wash for text; keep face area bright */
  background:
    linear-gradient(90deg, rgba(18, 16, 14, 0.58) 0%, rgba(18, 16, 14, 0.32) 36%, rgba(18, 16, 14, 0.08) 58%, transparent 76%),
    linear-gradient(0deg, rgba(18, 16, 14, 0.38) 0%, transparent 48%);
}

.hero-banner-body {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--max));
  margin: 0 auto;
  padding: 5rem 0 4.25rem;
}

.hero-banner .hero-role {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
}

.hero-banner .hero-name {
  margin: 0 0 0.95rem;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.2vw, 2.75rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.4;
  max-width: 13em;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.hero-banner .hero-lead {
  margin: 0 0 1.65rem;
  max-width: 28rem;
  font-size: clamp(1.28rem, 2.6vw, 1.58rem);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

.hero-banner .hero-sub {
  display: none;
}

.hero-banner .hero-swap {
  margin: 1.15rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}

.hero-banner .btn,
.hero-banner .btn-ghost {
  min-height: 2.85rem;
  padding: 0.65rem 1.35rem;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.hero-banner .btn {
  background: var(--accent);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.hero-banner .btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: #ffffff;
}

.hero-banner .btn:hover {
  background: var(--accent-deep);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.hero-banner .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #ffffff;
  color: #ffffff;
}

@media (max-width: 720px) {
  .hero-banner {
    min-height: min(82vh, 640px);
    align-items: end;
  }

  .hero-banner-media img {
    object-position: 58% 8%;
    /* スマホでは顔まわりを明るく見せる */
    filter: brightness(1.12) contrast(1.04) saturate(1.05);
  }

  .hero-banner-media::after {
    /* 顔（上〜中央）はほぼ素通し。文字がある下側だけ暗くする */
    background:
      linear-gradient(
        180deg,
        rgba(18, 16, 14, 0.02) 0%,
        rgba(18, 16, 14, 0.05) 38%,
        rgba(18, 16, 14, 0.28) 62%,
        rgba(18, 16, 14, 0.58) 82%,
        rgba(18, 16, 14, 0.72) 100%
      );
  }

  .hero-banner-body {
    padding: 3.25rem 0 2.5rem;
  }

  .hero-banner .hero-name {
    font-size: clamp(1.7rem, 6.8vw, 2.15rem);
  }
}

/* ---- Hero trust（予備レイアウト） ---- */
.hero-trust {
  padding: 3.5rem 0 3.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hero-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 2.75rem;
  align-items: center;
}

.hero-trust-copy .hero-role {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}

.hero-trust-copy .hero-name {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--ink);
}

.hero-trust-copy .hero-lead {
  margin: 0 0 0.65rem;
  max-width: 28rem;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.hero-trust-copy .hero-sub {
  margin: 0 0 1.75rem;
  max-width: 30rem;
  color: var(--ink-mid);
  font-size: 0.98rem;
  line-height: 1.85;
}

.hero-trust-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  max-width: 380px;
  margin-left: auto;
}

.hero-trust-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.hero-trust-photo .swap-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.45rem 0.65rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

@media (max-width: 800px) {
  .hero-trust {
    padding: 2.25rem 0 2rem;
  }

  .hero-trust-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .hero-trust-photo {
    max-width: 280px;
    margin: 0;
    order: -1;
  }
}

/* ---- Hero (legacy full-bleed; kept for inner pages if needed) ---- */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: grid;
  align-items: end;
  color: var(--white);
  overflow: hidden;
}

.hero-person .hero-media img {
  object-position: 68% 18%;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: heroDrift 24s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-0.8%, -0.6%, 0); }
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 16, 18, 0.88) 0%, rgba(14, 16, 18, 0.55) 42%, rgba(14, 16, 18, 0.18) 72%, rgba(14, 16, 18, 0.12) 100%),
    linear-gradient(0deg, rgba(14, 16, 18, 0.55) 0%, transparent 42%);
}

.hero-body {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--max));
  margin: 0 auto;
  padding: 5rem 0 4.5rem;
}

.hero-role {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.78);
}

.hero-name {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
}

.hero-lead {
  margin: 0 0 0.5rem;
  max-width: 28rem;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.hero-sub {
  margin: 0 0 1.75rem;
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
}

.hero-swap {
  margin: 1.25rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.hero .btn,
.hero .btn-ghost {
  border: var(--btn-edge);
  background: var(--btn-fill);
  color: #fff;
  box-shadow: var(--btn-glow);
}

.hero .btn:hover,
.hero .btn-ghost:hover {
  background: var(--btn-fill-hover);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 720px) {
  .hero-person .hero-media img {
    object-position: 62% 12%;
  }

  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(14, 16, 18, 0.35) 0%, rgba(14, 16, 18, 0.82) 55%, rgba(14, 16, 18, 0.92) 100%);
  }
}

/* ---- Page hero (inner) ---- */
.page-hero {
  --page-hero-image: url("../img/hero-assembly-report.jpg");
  --page-hero-position: center 42%;
  position: relative;
  padding: 4.5rem 0 3.25rem;
  background: #1a1008;
  color: var(--white);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 12, 6, 0.84) 0%, rgba(20, 12, 6, 0.56) 38%, rgba(20, 12, 6, 0.24) 64%, rgba(20, 12, 6, 0.08) 84%),
    linear-gradient(0deg, rgba(20, 12, 6, 0.38) 0%, transparent 48%),
    radial-gradient(ellipse 70% 80% at 88% 18%, rgba(240, 128, 0, 0.2), transparent 58%),
    var(--page-hero-image) var(--page-hero-position) / cover no-repeat;
}

.page-hero--assembly {
  --hero-wall: #9a7448;
  --hero-wood: #6e4b2e;
  --hero-floor: #745032;
  position: relative;
  min-height: clamp(13.5rem, 24vw, 17.5rem);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--hero-wall) 0%,
    var(--hero-wall) 56%,
    var(--hero-wood) 56%,
    var(--hero-floor) 100%
  );
}

.page-hero--assembly::before {
  display: none;
}

.page-hero--assembly .page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero--assembly .page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: none;
  transform: none;
}

.page-hero--assembly .page-hero-media {
  display: none;
}

.page-hero--assembly .page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(8, 6, 5, 0.9) 0%,
      rgba(12, 10, 8, 0.72) 11%,
      rgba(16, 14, 12, 0.46) 24%,
      rgba(20, 18, 14, 0.2) 38%,
      transparent 52%,
      rgba(20, 18, 14, 0.2) 62%,
      rgba(16, 14, 12, 0.46) 76%,
      rgba(12, 10, 8, 0.72) 89%,
      rgba(8, 6, 5, 0.9) 100%
    ),
    linear-gradient(0deg, rgba(16, 12, 8, 0.26) 0%, transparent 34%);
}

.page-hero--assembly .wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2.5rem;
}

.page-hero--assembly h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.8);
}

.page-hero--assembly .desc {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.page-hero--assembly .en {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .page-hero--assembly .wrap {
    padding-block: 2rem;
  }

  .page-hero--assembly .page-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(24, 28, 32, 0.78) 0%,
        rgba(40, 32, 24, 0.42) 46%,
        rgba(80, 56, 32, 0.12) 100%
      );
  }
}

.page-hero--policy {
  --hero-wood: #3d2209;
  --hero-wood-mid: #5a3410;
  --hero-carpet: #b99267;
  position: relative;
  min-height: clamp(13.5rem, 24vw, 17.5rem);
  padding: 0;
  overflow: hidden;
  background: var(--hero-wood);
}

.page-hero--policy::before {
  display: none;
}

.page-hero--policy .page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero--policy .page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: none;
  transform: none;
}

.page-hero--policy .page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(34, 18, 6, 0.9) 0%,
      rgba(58, 32, 10, 0.68) 18%,
      rgba(74, 40, 12, 0.34) 34%,
      transparent 50%,
      rgba(74, 40, 12, 0.34) 66%,
      rgba(58, 32, 10, 0.68) 82%,
      rgba(34, 18, 6, 0.9) 100%
    ),
    linear-gradient(0deg, rgba(34, 18, 6, 0.16) 0%, transparent 30%);
}

.page-hero--policy .wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2.5rem;
}

.page-hero--policy h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.8);
}

.page-hero--policy .desc {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.page-hero--policy .en {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .page-hero--policy {
    min-height: clamp(12rem, 34vw, 15rem);
  }

  .page-hero--policy .wrap {
    padding-block: 2rem;
  }

  .page-hero--policy .page-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(40, 22, 8, 0.88) 0%,
        rgba(70, 40, 12, 0.55) 42%,
        rgba(154, 116, 72, 0.18) 100%
      );
  }
}

.page-hero--profile {
  --hero-profile-edge: #2a3324;
}

.page-hero--blog {
  --page-hero-image: url("../img/hero-blog.jpg");
  --page-hero-position: center 35%;
}

.page-hero--contact {
  --page-hero-image: url("../img/hero-contact.jpg");
  --page-hero-position: center 40%;
}

.page-hero--donation {
  --hero-green: #243018;
  position: relative;
  min-height: clamp(13.5rem, 24vw, 17.5rem);
  padding: 0;
  overflow: hidden;
  background: var(--hero-green);
}

.page-hero--donation::before {
  display: none;
}

.page-hero--donation .page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero--donation .page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: none;
  transform: none;
}

.page-hero--donation .page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(36, 48, 24, 0.9) 0%,
      rgba(48, 62, 32, 0.62) 14%,
      rgba(70, 56, 28, 0.22) 28%,
      rgba(80, 52, 24, 0.06) 40%,
      transparent 48%,
      transparent 52%,
      rgba(80, 52, 24, 0.06) 60%,
      rgba(70, 56, 28, 0.22) 72%,
      rgba(48, 62, 32, 0.62) 86%,
      rgba(36, 48, 24, 0.9) 100%
    ),
    linear-gradient(0deg, rgba(80, 40, 16, 0.18) 0%, transparent 36%);
}

.page-hero--donation .wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2.5rem;
}

.page-hero--donation h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.8);
}

.page-hero--donation .desc {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.page-hero--donation .en {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .page-hero--donation {
    min-height: clamp(12rem, 34vw, 15rem);
  }

  .page-hero--donation .wrap {
    padding-block: 2rem;
  }

  .page-hero--donation .page-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(36, 48, 24, 0.88) 0%,
        rgba(80, 52, 24, 0.55) 42%,
        rgba(196, 82, 31, 0.18) 100%
      );
  }
}

.page-hero .wrap {
  position: relative;
  z-index: 1;
}

.page-hero--policy .wrap,
.page-hero--donation .wrap,
.page-hero--assembly .wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.page-hero .en {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
}

.page-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #ffffff !important;
}

.page-hero .desc {
  margin: 1rem 0 0;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
}

/* ---- Sections ---- */
.section {
  padding: 2.6rem 0 3.5rem;
}

.section-alt {
  background: var(--paper-2);
}

.section-head {
  margin-bottom: 1.85rem;
}

.section-head .ja {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.45;
  color: #1a1a1a;
}

.section-head .en {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
}

.section-head--center {
  text-align: center;
}

.section-lead {
  margin: -0.5rem 0 2rem;
  max-width: 40rem;
  color: var(--ink-mid);
}

.section-more {
  margin-top: 2rem;
}

/* Dual CTA row（新着情報下） */
.section-more-dual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.95rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.85rem;
}

.section-more-dual .btn,
.section-more-dual .btn-alt {
  min-width: 14.5rem;
  min-height: 3.15rem;
  padding: 0.75rem 1.6rem;
  font-size: 0.98rem;
  border-radius: 8px;
}

.section-more-dual .btn {
  background: var(--accent);
  border: 1.5px solid var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(180, 90, 0, 0.18);
}

.section-more-dual .btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #ffffff;
}

.section-more-dual .btn-alt {
  background: #3d4a3f;
  border: 1.5px solid #3d4a3f;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(40, 50, 42, 0.16);
}

.section-more-dual .btn-alt:hover {
  background: #2c3630;
  border-color: #2c3630;
  color: #ffffff;
}

/* ---- Policy pillars on home ---- */
.section-policy-home {
  background: #faf8f4;
  padding-block: 2.6rem 3.5rem;
}

.section-policy-home .section-more {
  text-align: center;
  margin-top: 1.75rem;
}

.pillar-body h3 a {
  color: inherit;
  text-decoration: none;
}

.pillar-body h3 a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---- Policy feature boxes（写真＋解説＋詳しく見る） ---- */
.section-policy-feature {
  background: #0c3d5c;
  color: var(--white);
  padding: 4.75rem 0;
}

.section-head-on-dark .ja {
  color: var(--white);
}

.section-lead-on-dark {
  color: rgba(255, 255, 255, 0.78);
}

.feature-stack {
  display: grid;
  gap: 1.35rem;
  margin-top: 0.5rem;
}

.feature-box {
  display: grid;
  grid-template-columns: minmax(200px, 0.95fr) minmax(0, 1.25fr);
  gap: 1.5rem;
  align-items: stretch;
  padding: 1.15rem;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--ink);
}

.feature-media {
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-2);
  min-height: 180px;
}

.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease);
  transform: scale(1);
}

.feature-box:hover .feature-media img {
  transform: scale(1.06);
}

.feature-body {
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.5rem 0.25rem 0;
  min-width: 0;
}

.feature-body h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-body);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0c3d5c;
}

.feature-body p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 0.95rem;
  line-height: 1.85;
  flex: 1;
}

.btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  align-self: flex-end;
  margin-top: 1.25rem;
  min-height: 2.85rem;
  padding: 0.55rem 1.35rem;
  text-decoration: none;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--btn-fill);
  border: var(--btn-edge);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-glow);
  transition:
    background 0.28s ease,
    color 0.28s ease,
    transform 0.28s var(--ease),
    box-shadow 0.28s ease;
}

.btn-detail-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-detail:hover {
  color: #fff;
  background: var(--btn-fill-hover);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 24px rgba(12, 61, 92, 0.22);
}

.btn-detail:hover .btn-detail-ico {
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(2px);
}

.btn-on-dark {
  background: var(--btn-fill);
  color: #fff;
  border: var(--btn-edge);
  box-shadow: var(--btn-glow);
}

.btn-on-dark:hover {
  background: var(--btn-fill-hover);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 760px) {
  .feature-box {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .feature-media {
    min-height: 200px;
    aspect-ratio: 16 / 9;
  }
}

/* ---- Blog cards（画像上・文字下・詳細表示） ---- */
.section-blog-cards .section-head .ja {
  color: #1a1a1a;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.blog-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.blog-card {
  width: 100%;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
}

.blog-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease);
}

.blog-card-wrap:hover .blog-card-media img {
  transform: scale(1.06);
}

.blog-card-body {
  padding: 1.1rem 1.15rem 1.25rem;
}

.blog-card-body time {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--accent-deep);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.blog-card-body h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: var(--ink);
}

.blog-card-body p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 0.9rem;
  line-height: 1.7;
}

.blog-card-action {
  align-self: center;
}

.blog-card-action .btn-detail-label {
  order: 0;
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
    max-width: min(100%, 28rem);
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .section {
    scroll-margin-top: 6rem;
    padding-block: 2.15rem 2.85rem;
  }

  .wrap,
  .wrap-narrow {
    width: min(100% - 1.5rem, var(--max));
  }

  .section-blog-cards {
    padding-top: 2.15rem;
  }

  .section-blog-cards .section-head {
    margin-bottom: 1.35rem;
  }

  .section-blog-cards .section-head .ja {
    font-size: clamp(1.65rem, 6.8vw, 2.05rem);
    line-height: 1.35;
  }

  .blog-grid {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    gap: 1.25rem;
  }

  .blog-card-wrap {
    width: 100%;
    max-width: none;
  }

  .blog-card-body {
    padding: 1rem 1rem 1.15rem;
  }

  .blog-card-body h3 {
    font-size: 1rem;
  }

  .blog-card-action {
    width: min(100%, 16rem);
  }
}

/* ---- Blog archive page ---- */
.section-blog-archive {
  position: relative;
  padding-block: 2.75rem 2.5rem;
  background: linear-gradient(180deg, #f7fafc 0%, #eef4f9 100%);
}

.section-blog-archive::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%);
  pointer-events: none;
}

.blog-archive-head {
  position: relative;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.blog-archive-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a1a1a;
  line-height: 1.45;
}

.blog-archive-title .en {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
}

.blog-archive-lead {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--ink-mid);
}

.blog-archive-status {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
}

.blog-cards--archive {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  margin-bottom: 2rem;
}

.blog-card--archive {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  align-items: stretch;
  min-height: 13.5rem;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(200, 216, 232, 0.9);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 10px 24px rgba(12, 61, 92, 0.07);
  transition:
    transform 0.32s var(--ease),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

.blog-card--archive {
  position: relative;
}

.blog-card--archive::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 1;
}

.blog-card--archive:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 134, 196, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 16px 34px rgba(12, 61, 92, 0.12);
}

.blog-card--archive:hover::before {
  opacity: 1;
}

.blog-card--archive .blog-card-media {
  position: relative;
  min-height: 13.5rem;
  height: 100%;
  aspect-ratio: auto;
  background: #dce8f2;
  overflow: hidden;
}

.blog-card--archive .blog-card-media img {
  width: 100%;
  height: 100%;
  min-height: 13.5rem;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease);
}

.blog-card--archive:hover .blog-card-media img {
  transform: scale(1.03);
}

.blog-card--archive .blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 13.5rem;
  padding: 1.35rem 1.5rem 1.4rem;
  background: #ffffff;
}

.blog-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

.blog-card-badge {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 4px;
  background: var(--accent-deep);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.blog-card-date {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2a4560;
}

.blog-card-title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 2);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--ink);
}

.blog-card-excerpt {
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.82em * 2);
  font-size: 0.94rem;
  line-height: 1.82;
  letter-spacing: 0.02em;
  color: #334d63;
}

.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  transition: gap 0.25s ease, color 0.25s ease;
}

.blog-card-cta-arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.blog-card--archive:hover .blog-card-cta {
  color: var(--accent);
}

.blog-card--archive:hover .blog-card-cta-arrow {
  transform: translateX(3px);
}

/* ---- Blog article (読み物) ---- */
.section-blog-read {
  padding-block: 2.5rem 3.5rem;
  background: var(--white);
}

.blog-read-wrap {
  display: grid;
  gap: 3rem;
  max-width: 760px;
}

.blog-article {
  padding-top: 2.5rem;
  border-top: 1px solid rgba(200, 216, 232, 0.95);
  scroll-margin-top: 5.5rem;
}

.blog-article:first-child {
  padding-top: 0;
  border-top: none;
}

.blog-article-head {
  margin: 0 0 1.35rem;
}

.blog-article-media + .blog-article-head {
  margin-top: 0.15rem;
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
}

.blog-article-badge {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 4px;
  background: var(--accent-deep);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.blog-article-meta time {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2a4560;
}

.blog-article-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--ink);
}

.blog-article-media {
  margin: 0 0 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(200, 216, 232, 0.85);
  box-shadow: 0 10px 24px rgba(12, 61, 92, 0.08);
}

.blog-article-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-article-caption {
  padding: 0.65rem 1rem;
  background: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
}

.blog-article-content {
  font-size: 1.12rem;
  line-height: 2.05;
  letter-spacing: 0.02em;
  color: #334d63;
}

.blog-article-content p {
  margin: 0 0 1.15rem;
}

.blog-article-content p:last-child {
  margin-bottom: 0;
}

.blog-article-content a {
  color: var(--accent-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blog-article-content a:hover {
  color: var(--accent);
}

.blog-article-foot {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(200, 216, 232, 0.85);
}

.blog-article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  text-decoration: none;
  transition: color 0.22s ease, gap 0.22s ease;
}

.blog-article-back:hover {
  color: var(--accent);
  gap: 0.5rem;
}

@media (max-width: 820px) {
  .blog-card--archive {
    grid-template-columns: 1fr;
  }

  .blog-card--archive .blog-card-media {
    min-height: 0;
  }

  .blog-card--archive .blog-card-media img {
    min-height: 200px;
    aspect-ratio: 16 / 9;
  }

  .blog-card--archive .blog-card-body {
    min-height: 12.5rem;
    padding: 1.2rem 1.15rem 1.25rem;
  }
}

/* ---- Category grid ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  background: transparent;
  border: none;
}

.cat-card {
  --cat-fill: linear-gradient(155deg, #1a4f70 0%, #0c3d5c 72%, #082f47 100%);
  --cat-spin-dur: 4s;
  --cat-spin-delay: 0s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding: 1.15rem 1.05rem;
  min-height: 4.6rem;
  text-decoration: none;
  color: #fff;
  background: var(--cat-fill);
  border-radius: 14px;
  border: none;
  box-shadow: 0 10px 22px rgba(8, 40, 62, 0.18);
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s ease;
}

/* 縁を回る白い光（transform回転＝確実に動く） */
.cat-card::before {
  content: "";
  position: absolute;
  width: 160%;
  height: 160%;
  top: 50%;
  left: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 300deg,
    rgba(255, 255, 255, 0.05) 318deg,
    rgba(255, 255, 255, 0.55) 334deg,
    #ffffff 346deg,
    rgba(255, 255, 255, 0.55) 354deg,
    transparent 360deg
  );
  animation: cat-border-spin var(--cat-spin-dur) linear infinite;
  animation-delay: var(--cat-spin-delay);
  z-index: 0;
  pointer-events: none;
}

/* 本体面（外周に光の帯を残す） */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 11.5px;
  background: var(--cat-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(8, 40, 62, 0.25);
  z-index: 1;
  pointer-events: none;
  transition: background 0.28s ease;
}

.cat-card > * {
  position: relative;
  z-index: 2;
}

.cat-card:hover {
  color: #fff;
  --cat-fill: linear-gradient(155deg, #256387 0%, #134a6b 72%, #0c3d5c 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(8, 40, 62, 0.26);
}

.cat-card:hover::after {
  background: var(--cat-fill);
}

/* ボタンごとに速度・方向・開始位置・光の形をずらす */
.cat-card:nth-child(1) {
  --cat-spin-dur: 3.2s;
  --cat-spin-delay: -0.7s;
}

.cat-card:nth-child(2) {
  --cat-spin-dur: 4.8s;
  --cat-spin-delay: -2.1s;
}

.cat-card:nth-child(2)::before {
  animation-name: cat-border-spin-rev;
}

.cat-card:nth-child(3) {
  --cat-spin-dur: 2.6s;
  --cat-spin-delay: -1.4s;
}

.cat-card:nth-child(3)::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 285deg,
    rgba(255, 255, 255, 0.2) 310deg,
    #ffffff 335deg,
    rgba(255, 255, 255, 0.25) 350deg,
    transparent 360deg
  );
}

.cat-card:nth-child(4) {
  --cat-spin-dur: 5.5s;
  --cat-spin-delay: -0.9s;
}

.cat-card:nth-child(4)::before {
  animation-name: cat-border-spin-rev;
}

.cat-card:nth-child(5) {
  --cat-spin-dur: 3.7s;
  --cat-spin-delay: -2.6s;
}

.cat-card:nth-child(6) {
  --cat-spin-dur: 4.3s;
  --cat-spin-delay: -1.2s;
}

.cat-card:nth-child(6)::before {
  animation-name: cat-border-spin-rev;
  background: conic-gradient(
    from 90deg,
    transparent 0deg,
    transparent 295deg,
    rgba(255, 255, 255, 0.15) 320deg,
    #ffffff 340deg,
    transparent 360deg
  );
}

.cat-card:nth-child(7) {
  --cat-spin-dur: 5.9s;
  --cat-spin-delay: -3.3s;
}

.cat-card:nth-child(7)::before {
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    transparent 260deg,
    rgba(255, 255, 255, 0.12) 290deg,
    rgba(255, 255, 255, 0.9) 320deg,
    rgba(255, 255, 255, 0.2) 340deg,
    transparent 360deg
  );
}

.cat-card:nth-child(8) {
  --cat-spin-dur: 3s;
  --cat-spin-delay: -0.4s;
}

.cat-card:nth-child(8)::before {
  animation-name: cat-border-spin-rev;
}

@keyframes cat-border-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes cat-border-spin-rev {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card::before {
    animation: none;
    background: rgba(255, 255, 255, 0.45);
    width: auto;
    height: auto;
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
  }
}

.cat-ico {
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cat-ico svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cat-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.cat-grid .n {
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 2.1vw, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #fff;
}

.cat-grid .c {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 900px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .cat-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Report / blog list ---- */
.list-stack {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.list-item {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: background 0.2s ease;
}

.list-item:hover {
  background: color-mix(in srgb, var(--white) 70%, transparent);
}

.list-item .meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.list-item .meta .field {
  display: block;
  margin-top: 0.35rem;
  color: var(--accent-deep);
}

.list-item h3 {
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
  letter-spacing: 0.03em;
}

.list-item .ex {
  margin: 0;
  color: var(--ink-mid);
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .list-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* ---- Report cards（ヘッダー案D寄り：写真＋暗パネル＋タイトル重ね） ---- */
.report-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.report-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, transform 0.35s var(--ease);
}

.report-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-2px);
}

.report-card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a3a58;
}

.report-card .thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.report-card:hover .thumb > img {
  transform: scale(1.04);
}

.report-card .thumb-panel {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 1;
  padding: 0.95rem 1rem 0.9rem;
  background: rgba(12, 16, 22, 0.54);
  color: var(--white);
}

.report-card .thumb-badge {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.18rem 0.55rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.report-card .thumb-title {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.28rem, 2.6vw, 1.62rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.report-card .thumb-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.report-card .thumb-date::before {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm.75-13h-1.5v6.25l5.25 3.15.75-1.25-4.5-2.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm.75-13h-1.5v6.25l5.25 3.15.75-1.25-4.5-2.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.report-card .body {
  padding: 1rem 1.15rem 1.2rem;
}

.report-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.report-card .meta .field {
  color: var(--accent-deep);
}

.report-card .ex {
  margin: 0;
  color: var(--ink-mid);
  font-size: 1.05rem;
  line-height: 1.7;
}

.report-card[hidden],
.report-cards--archive .report-card[hidden] {
  display: none !important;
}

/* ---- Report archive (一覧ページ) ---- */
.section-report-archive {
  position: relative;
  padding-block: 2.75rem 3rem;
  background: linear-gradient(180deg, #f7fafc 0%, #eef4f9 100%);
}

.section-report-archive::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%);
  pointer-events: none;
}

.report-archive-head {
  position: relative;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.report-archive-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a1a1a;
  line-height: 1.45;
}

.report-archive-title .en {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
}

.report-archive-lead {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--ink-mid);
}

.report-archive-status {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
}

.report-archive-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-mid);
  font-size: 0.95rem;
  line-height: 1.7;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(26, 134, 196, 0.28);
  border-radius: var(--btn-radius);
}

.report-archive-empty[hidden] {
  display: none;
}

.report-cards--archive {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 16rem;
  gap: 1.15rem;
  margin-bottom: 2.25rem;
}

.report-cards--archive .report-card {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  align-items: stretch;
  height: 100%;
  max-height: 16rem;
  min-height: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid rgba(200, 216, 232, 0.9);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 10px 24px rgba(12, 61, 92, 0.07);
  transition:
    transform 0.32s var(--ease),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

.report-cards--archive .report-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.report-cards--archive .report-card {
  position: relative;
}

.report-cards--archive .report-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26, 134, 196, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 16px 34px rgba(12, 61, 92, 0.12);
}

.report-cards--archive .report-card:hover::before {
  opacity: 1;
}

/* Archive list markup uses .thumb / .body (same as home cards). */
.report-cards--archive .report-card .thumb {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  background: #dce8f2;
}

.report-cards--archive .report-card .thumb > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease);
}

.report-cards--archive .report-card:hover .thumb > img {
  transform: scale(1.03);
}

.report-cards--archive .report-card .thumb-panel {
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.65rem;
  padding: 0.75rem 0.85rem 0.7rem;
}

.report-cards--archive .report-card .thumb-title {
  font-size: clamp(0.92rem, 1.6vw, 1.08rem);
  line-height: 1.45;
}

.report-cards--archive .report-card .thumb-date {
  margin-top: 0.4rem;
  font-size: 0.78rem;
}

.report-cards--archive .report-card .body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.55rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 1.35rem 1.5rem 1.4rem;
}

.report-cards--archive .report-card .body .ex {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.report-cards--archive .report-card .body .report-card-cta {
  margin-top: auto;
}

.report-card-media {
  position: relative;
  min-height: 0;
  height: 100%;
  background: #dce8f2;
  overflow: hidden;
}

.report-card-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease);
}

.report-cards--archive .report-card:hover .report-card-media img {
  transform: scale(1.03);
}

.report-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 1.35rem 1.5rem 1.4rem;
  background: #ffffff;
}

.report-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

.report-card-badge {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 4px;
  background: var(--accent-deep);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

.report-card-date {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2a4560;
}

.report-card-title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 2);
  max-height: calc(1.55em * 2);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--ink);
}

.report-card-field {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-deep);
}

.report-card-excerpt {
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.82em * 2);
  max-height: calc(1.82em * 2);
  font-size: 0.94rem;
  line-height: 1.82;
  letter-spacing: 0.02em;
  color: #334d63;
}

.report-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  transition: gap 0.25s ease, color 0.25s ease;
}

.report-card-cta-arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.report-cards--archive .report-card:hover .report-card-cta {
  color: var(--accent);
}

.report-cards--archive .report-card:hover .report-card-cta-arrow {
  transform: translateX(3px);
}

.report-pager {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  padding: 1.35rem 1rem 0.25rem;
}

.report-pager-size {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.report-pager-size-label {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2a4560;
  white-space: nowrap;
}

.report-pager-size-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 4.75rem;
  min-height: 2.45rem;
  padding: 0.4rem 2.1rem 0.4rem 0.85rem;
  border: 1px solid rgba(200, 216, 232, 0.95);
  border-radius: 10px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-deep) 50%),
    linear-gradient(135deg, var(--accent-deep) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 52%,
    calc(100% - 0.7rem) 52%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(12, 61, 92, 0.06);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.report-pager-size-select:hover,
.report-pager-size-select:focus {
  border-color: rgba(240, 128, 0, 0.45);
  outline: none;
  box-shadow: 0 6px 14px rgba(12, 61, 92, 0.1);
}

.report-pager-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 0.85rem;
}

.report-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(200, 216, 232, 0.95);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(12, 61, 92, 0.06);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s var(--ease);
}

.report-pager-btn:hover:not(.is-disabled):not([aria-disabled="true"]) {
  border-color: rgba(240, 128, 0, 0.45);
  color: var(--accent-deep);
  transform: translateY(-1px);
}

.report-pager-btn.is-disabled,
.report-pager-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}

.report-pager-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-pager-list .is-current,
.report-pager-list [aria-current="page"] {
  display: inline-grid;
  place-items: center;
  min-width: 2.45rem;
  min-height: 2.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  background: linear-gradient(155deg, #f09020 0%, var(--accent-deep) 72%, #b35500 100%);
  border: 1px solid transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 14px rgba(200, 104, 0, 0.22);
}

.report-pager-list a,
.report-pager-list button {
  display: inline-grid;
  place-items: center;
  min-width: 2.45rem;
  min-height: 2.45rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(200, 216, 232, 0.95);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink-mid);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.report-pager-list a:hover,
.report-pager-list button:hover {
  border-color: rgba(240, 128, 0, 0.45);
  color: var(--accent-deep);
}

.report-pager-ellipsis {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  min-height: 2.45rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.report-pager-note {
  width: 100%;
  margin: 0.65rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .report-cards--archive {
    grid-auto-rows: auto;
  }

  .report-cards--archive .report-card {
    grid-template-columns: 1fr;
    max-height: none;
    height: auto;
  }

  .report-cards--archive .report-card .thumb {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 13.5rem;
    max-height: none;
  }

  .report-cards--archive .report-card .thumb > img {
    min-height: 13.5rem;
  }

  .report-cards--archive .report-card .body {
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 1.2rem 1.15rem 1.25rem;
  }

  .report-card-media {
    min-height: 13.5rem;
  }

  .report-card-media img {
    min-height: 13.5rem;
    aspect-ratio: 16 / 9;
  }

  .report-card-body {
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 1.2rem 1.15rem 1.25rem;
  }
}

@media (max-width: 720px) {
  .report-cards {
    grid-template-columns: 1fr;
  }
}

/* ---- Report category filter (core) ---- */
.section-report-core {
  position: relative;
  padding-block: 2.75rem 2.25rem;
  background:
    linear-gradient(180deg, rgba(230, 240, 248, 0.95) 0%, var(--paper) 100%);
  border-bottom: 1px solid rgba(200, 216, 232, 0.85);
  overflow: hidden;
}

.section-report-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(26, 134, 196, 0.12), transparent 60%),
    radial-gradient(circle at 12% 88%, rgba(26, 134, 196, 0.06), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(13, 106, 158, 0.05), transparent 38%);
  pointer-events: none;
}

.report-core-head {
  position: relative;
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}

.report-core-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a1a1a;
  line-height: 1.45;
}

.report-core-title .en {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
}

.report-core-lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: var(--ink-mid);
}

.filter-bar--core {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem 0.85rem;
  padding-top: 0.7rem;
}

.filter-chip {
  --chip-fill: linear-gradient(155deg, #1a4f70 0%, #0c3d5c 72%, #082f47 100%);
  --chip-orbit-dur: 4.8s;
  --chip-orbit-delay: 0s;
  --chip-star-opacity: 0.72;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 4.75rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font: inherit;
  color: #fff;
  box-shadow: 0 10px 22px rgba(8, 40, 62, 0.16);
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s ease;
}

a.filter-chip,
a.filter-chip:visited,
a.filter-chip:hover,
a.filter-chip:focus,
a.filter-chip:active {
  color: #fff;
  text-decoration: none;
}

/* 縁を回る白い光 */
.filter-chip::before {
  content: "";
  position: absolute;
  width: 170%;
  height: 170%;
  top: 50%;
  left: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 298deg,
    rgba(255, 255, 255, 0.06) 316deg,
    rgba(255, 255, 255, 0.5) 332deg,
    #ffffff 344deg,
    rgba(255, 255, 255, 0.45) 352deg,
    transparent 360deg
  );
  animation: filter-border-spin var(--chip-orbit-dur) linear infinite;
  animation-delay: var(--chip-orbit-delay);
  z-index: 0;
  pointer-events: none;
}

/* 内側の面 */
.filter-chip::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 11.5px;
  background: var(--chip-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(8, 40, 62, 0.22);
  z-index: 1;
  pointer-events: none;
  transition: background 0.28s ease, box-shadow 0.28s ease;
}

/* 星の光が周回 */
.filter-chip-orbit {
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  z-index: 3;
  pointer-events: none;
  animation: filter-star-orbit var(--chip-orbit-dur) linear infinite;
  animation-delay: var(--chip-orbit-delay);
}

.filter-star {
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.85) 35%, transparent 72%);
  opacity: var(--chip-star-opacity);
  box-shadow:
    0 0 5px 1px rgba(255, 255, 255, 0.95),
    0 0 12px 3px rgba(180, 220, 255, 0.75),
    0 0 22px 6px rgba(100, 180, 255, 0.35);
  animation: filter-star-twinkle 2.4s ease-in-out infinite;
}

.filter-star::before,
.filter-star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%);
  border-radius: 1px;
}

.filter-star::before {
  width: 11px;
  height: 1.5px;
}

.filter-star::after {
  width: 1.5px;
  height: 11px;
}

.filter-star:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.filter-star:nth-child(2) {
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) scale(0.82);
  animation-delay: -0.8s;
}

.filter-star:nth-child(3) {
  top: 100%;
  left: 18%;
  transform: translate(-50%, -50%) scale(0.68);
  animation-delay: -1.6s;
}

.filter-chip-face {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.7rem 0.85rem;
}

.filter-chip-ico {
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.filter-chip-ico svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filter-chip-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: clamp(0.86rem, 1.45vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.filter-chip-count {
  position: absolute;
  top: 0;
  right: 0.55rem;
  z-index: 4;
  transform: translateY(-50%);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    var(--chip-fill);
  border: 1px solid rgba(255, 255, 255, 0.42);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.filter-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(8, 40, 62, 0.24);
  --chip-fill: linear-gradient(155deg, #256387 0%, #134a6b 72%, #0c3d5c 100%);
  --chip-star-opacity: 0.95;
  color: #fff;
  text-decoration: none;
}

.filter-chip:hover::after {
  background: var(--chip-fill);
}

/* 未選択は少し抑え、選択中だけオレンジで一目で分かるようにする */
.filter-bar:has(.filter-chip.is-active) .filter-chip:not(.is-active) {
  opacity: 0.72;
  filter: saturate(0.85);
}

.filter-bar:has(.filter-chip.is-active) .filter-chip:not(.is-active):hover {
  opacity: 1;
  filter: none;
}

.filter-chip.is-active {
  transform: translateY(-2px);
  opacity: 1;
  filter: none;
  z-index: 1;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--accent),
    0 16px 34px rgba(180, 90, 0, 0.32);
  --chip-fill: var(--btn-fill);
  --chip-star-opacity: 1;
  color: #fff;
}

.filter-chip.is-active::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 290deg,
    rgba(255, 255, 255, 0.1) 310deg,
    rgba(255, 255, 255, 0.7) 330deg,
    #ffffff 342deg,
    rgba(255, 255, 255, 0.55) 352deg,
    transparent 360deg
  );
}

.filter-chip.is-active::after {
  background: var(--chip-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(140, 60, 0, 0.22),
    inset 0 0 20px rgba(255, 220, 160, 0.14);
}

.filter-chip.is-active .filter-chip-ico {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.filter-chip.is-active .filter-chip-count {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.95);
  color: var(--accent-deep);
  box-shadow: 0 4px 12px rgba(180, 90, 0, 0.22);
}

.filter-chip.is-active:hover {
  --chip-fill: var(--btn-fill-hover);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--accent),
    0 18px 36px rgba(180, 90, 0, 0.38);
}

/* ボタンごとに速度・方向・星のタイミングをずらす */
.filter-chip:nth-child(1) { --chip-orbit-dur: 3.6s; --chip-orbit-delay: -0.5s; }
.filter-chip:nth-child(2) { --chip-orbit-dur: 5.2s; --chip-orbit-delay: -1.8s; }
.filter-chip:nth-child(2)::before { animation-name: filter-border-spin-rev; }
.filter-chip:nth-child(2) .filter-chip-orbit { animation-name: filter-star-orbit-rev; }
.filter-chip:nth-child(3) { --chip-orbit-dur: 4.1s; --chip-orbit-delay: -2.4s; }
.filter-chip:nth-child(4) { --chip-orbit-dur: 5.8s; --chip-orbit-delay: -0.9s; }
.filter-chip:nth-child(4)::before { animation-name: filter-border-spin-rev; }
.filter-chip:nth-child(4) .filter-chip-orbit { animation-name: filter-star-orbit-rev; }
.filter-chip:nth-child(5) { --chip-orbit-dur: 3.3s; --chip-orbit-delay: -1.5s; }
.filter-chip:nth-child(6) { --chip-orbit-dur: 4.7s; --chip-orbit-delay: -3.1s; }
.filter-chip:nth-child(6)::before { animation-name: filter-border-spin-rev; }
.filter-chip:nth-child(6) .filter-chip-orbit { animation-name: filter-star-orbit-rev; }
.filter-chip:nth-child(7) { --chip-orbit-dur: 5.4s; --chip-orbit-delay: -0.7s; }
.filter-chip:nth-child(8) { --chip-orbit-dur: 3.9s; --chip-orbit-delay: -2.2s; }
.filter-chip:nth-child(8)::before { animation-name: filter-border-spin-rev; }
.filter-chip:nth-child(8) .filter-chip-orbit { animation-name: filter-star-orbit-rev; }
.filter-chip:nth-child(9) { --chip-orbit-dur: 4.4s; --chip-orbit-delay: -1.1s; }
.filter-chip:nth-child(10) { --chip-orbit-dur: 6s; --chip-orbit-delay: -2.8s; }
.filter-chip:nth-child(10)::before { animation-name: filter-border-spin-rev; }
.filter-chip:nth-child(10) .filter-chip-orbit { animation-name: filter-star-orbit-rev; }

@keyframes filter-border-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes filter-border-spin-rev {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes filter-star-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes filter-star-orbit-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes filter-star-twinkle {
  0%, 100% { opacity: calc(var(--chip-star-opacity) * 0.55); filter: brightness(0.9); }
  50% { opacity: var(--chip-star-opacity); filter: brightness(1.25); }
}

@media (max-width: 1024px) {
  .filter-bar--core {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .filter-bar--core {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .filter-chip {
    height: 4.5rem;
  }

  .filter-chip-face {
    padding: 0.65rem 0.75rem;
    gap: 0.45rem;
  }

  .filter-chip-label {
    font-size: 0.88rem;
  }

  .filter-chip-count {
    font-size: 0.72rem;
    padding: 0.14rem 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip::before,
  .filter-chip-orbit {
    animation: none;
  }

  .filter-star {
    animation: none;
    opacity: 0.85;
  }
}

/* ---- Legacy filter bar (fallback) ---- */
.filter-bar:not(.filter-bar--core) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.filter-bar:not(.filter-bar--core) button {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-mid);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-bar:not(.filter-bar--core) button:hover,
.filter-bar:not(.filter-bar--core) button.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.list-item[hidden] {
  display: none;
}

/* ---- Profile ---- */
.prof-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 2rem 2.25rem;
  align-items: stretch;
  margin-bottom: 3rem;
  padding: 1.5rem;
  max-width: 100%;
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--btn-radius);
  box-shadow:
    0 0 0 1px rgba(200, 216, 232, 0.65),
    0 14px 32px rgba(12, 61, 92, 0.08);
}

.prof-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-2);
  text-decoration: none;
  color: inherit;
  cursor: zoom-in;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px rgba(12, 61, 92, 0.12);
  transition: transform 0.28s var(--ease), box-shadow 0.28s ease;
}

.prof-photo:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 14px 28px rgba(12, 61, 92, 0.16);
}

.prof-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.prof-photo .swap-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.45rem 0.65rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.prof-photo-hint {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(12, 61, 92, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.prof-intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.35rem 0.25rem 0.15rem 0;
}

.prof-intro .role {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

.prof-intro .name {
  margin: 0 0 0.25rem;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: 0.08em;
}

.prof-intro .kana {
  display: block;
  margin-bottom: 1.15rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  font-weight: 400;
}

.prof-brief {
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.prof-brief > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.prof-brief dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
}

.prof-brief dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}

.prof-lead {
  margin: 0 0 0.85rem;
  color: var(--ink-mid);
  line-height: 1.9;
}

.prof-note {
  margin: auto 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ---- Profile journey timeline ---- */
.prof-journey {
  margin-bottom: 3rem;
  padding: 2rem 1.5rem 2.25rem;
  max-width: 100%;
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--btn-radius);
  box-shadow:
    0 0 0 1px rgba(200, 216, 232, 0.65),
    0 14px 32px rgba(12, 61, 92, 0.08);
}

.journey-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.35rem;
  align-items: center;
  margin-bottom: 1.75rem;
}

.journey-photo-ring {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  flex-shrink: 0;
  overflow: hidden;
}

.journey-photo-ring img {
  position: absolute;
  inset: 0.8rem;
  width: calc(100% - 1.6rem);
  height: calc(100% - 1.6rem);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.journey-photo-ring::before {
  content: "";
  position: absolute;
  inset: 0.35rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.journey-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent-deep);
  overflow: visible;
}

.journey-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.45;
  color: #1a1a1a;
}

.journey-timeline {
  --year-w: 6.4rem;
  --rail-w: 12px;
  --gap-x: 0.85rem;
  --line-x: calc(var(--year-w) + var(--gap-x) + (var(--rail-w) / 2));
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 100%;
  min-width: 0;
}

.journey-timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--line-x) - 1px);
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

.journey-item {
  display: grid;
  grid-template-columns: var(--year-w) var(--rail-w) minmax(0, 1fr);
  column-gap: var(--gap-x);
  row-gap: 0;
  align-items: start;
  padding: 0 0 1.25rem;
  position: relative;
  z-index: 1;
}

.journey-item:last-child {
  padding-bottom: 0;
}

.journey-year {
  margin: 0.1rem 0 0;
  text-align: right;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: var(--accent-deep);
  white-space: normal;
  overflow-wrap: anywhere;
}

.journey-rail {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: var(--rail-w);
  min-height: 1rem;
  padding-top: 0.28rem;
}

.journey-dot {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f0c84a;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--paper);
}

.journey-body {
  min-width: 0;
  max-width: 100%;
  padding-top: 0;
}

.journey-body p {
  margin: 0 0 0.45rem;
  color: var(--ink-mid);
  line-height: 1.75;
  font-size: 1.08rem;
}

.journey-body p:last-child {
  margin-bottom: 0;
}

.journey-figure {
  --journey-photo-w: 9.375rem;
  margin: 0.55rem 0 0;
  width: min(var(--journey-photo-w), 100%);
  max-width: 100%;
}

.journey-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 12px rgba(12, 61, 92, 0.1);
}

.journey-figure figcaption {
  margin-top: 0.3rem;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.45;
}

.journey-figure-grid {
  --journey-figure-gap: 0.85rem;
  display: grid;
  grid-template-columns: repeat(2, min(var(--journey-photo-w, 9.375rem), calc((100% - var(--journey-figure-gap)) / 2)));
  align-items: start;
  gap: 0.7rem var(--journey-figure-gap);
  margin-top: 0.55rem;
  width: 100%;
  max-width: 100%;
}

.journey-figure-grid .journey-figure {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.prof-gallery {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.prof-gallery .section-head {
  text-align: center;
}

.prof-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: min(58rem, 100%);
  margin-inline: auto;
}

.prof-gallery-item {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-2);
  box-shadow: 0 6px 16px rgba(12, 61, 92, 0.1);
  transition: transform 0.28s var(--ease), box-shadow 0.28s ease;
}

.prof-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(12, 61, 92, 0.14);
}

.prof-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-item--milestone {
  display: block;
  padding: 0.45rem 0 1.5rem;
  position: relative;
  z-index: 1;
}

.journey-milestone {
  --mile: 5.25rem;
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--mile);
  max-width: 100%;
  min-width: 0;
  padding-left: calc(var(--line-x) + (var(--mile) / 2) + 0.85rem);
}

.journey-milestone-photo {
  position: absolute;
  left: calc(var(--line-x) - (var(--mile) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: var(--mile);
  height: var(--mile);
  flex-shrink: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--paper);
}

.journey-milestone-photo img {
  position: absolute;
  inset: 0.65rem;
  width: calc(100% - 1.3rem);
  height: calc(100% - 1.3rem);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}

.journey-milestone-photo::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.journey-arc--sm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent-deep);
}

.journey-milestone-title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--accent-deep);
  overflow-wrap: anywhere;
}

.journey-note {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.prof-body h2 {
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}

.prof-body h2:first-child {
  margin-top: 0;
}

/* ---- Values heart（大切にする心） ---- */
.section-values-heart {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 5.25rem;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26, 134, 196, 0.22) 0%, transparent 55%),
    linear-gradient(165deg, #0a2f47 0%, #0c3d5c 42%, #082638 100%);
}

.values-bg-glow {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(26, 134, 196, 0.14) 0%, transparent 45%);
  animation: values-glow-pulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.values-bg-ring {
  position: absolute;
  top: 50%;
  right: -8rem;
  width: min(42vw, 420px);
  translate: 0 -50%;
  color: rgba(255, 255, 255, 0.35);
  animation: values-ring-spin 48s linear infinite;
  pointer-events: none;
}

@keyframes values-glow-pulse {
  from { opacity: 0.65; transform: scale(1); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes values-ring-spin {
  to { rotate: 360deg; }
}

.values-wrap {
  position: relative;
  z-index: 1;
}

.values-head {
  text-align: center;
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: 2.75rem;
}

.values-kicker {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
}

.values-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

.values-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.78);
}

.values-credo {
  position: relative;
  margin: 0 auto 3rem;
  padding: 2rem 1.5rem 2.25rem;
  max-width: 44rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.18);
}

.values-credo-mark {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
}

.values-credo p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.85;
}

.values-credo-line {
  display: block;
  width: 5rem;
  height: 2px;
  margin: 1.35rem auto 0;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s var(--ease) 0.15s;
}

.values-credo.is-in .values-credo-line {
  transform: scaleX(1);
}

.values-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-bottom: 2.75rem;
}

.values-pillar {
  padding: 1.35rem 1.25rem 1.45rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 28px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease),
    border-color 0.3s ease,
    background 0.3s ease;
}

.values-pillars.is-in .values-pillar:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

.values-pillars.is-in .values-pillar:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.28s;
}

.values-pillars.is-in .values-pillar:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.44s;
}

.values-pillar:hover {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.12);
}

.values-pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.values-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}

.values-ico {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.values-ico svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.values-pillar h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.values-pillar p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}

.values-foot {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.values-closing {
  margin: 0 0 0.85rem;
  font-size: 0.96rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}

.values-note {
  margin: 0;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 860px) {
  .values-pillars {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  .values-bg-ring {
    right: -25%;
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .values-bg-glow,
  .values-bg-ring {
    animation: none;
  }

  .values-pillar {
    opacity: 1;
    transform: none;
  }

  .values-credo-line {
    transform: scaleX(1);
  }
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(10, 24, 38, 0.82);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-dialog {
  position: relative;
  width: min(100%, 920px);
  max-height: min(90vh, 920px);
}

.lightbox-dialog img {
  width: 100%;
  height: auto;
  max-height: min(86vh, 880px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: #0a1826;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.lightbox-close {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: #0c3d5c;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.lightbox-close:hover {
  background: var(--accent);
}

@media (max-width: 900px) {
  .prof-card {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    padding: 1.15rem;
  }

  .prof-photo {
    width: min(100%, 17.5rem);
    margin-inline: auto;
  }

  .prof-intro {
    padding: 0;
  }

  .journey-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .journey-item--milestone {
    padding-left: 0;
  }

  .journey-milestone {
    --mile: 4.75rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 0;
    padding-top: calc(var(--mile) + 0.75rem);
    min-height: 0;
  }

  .journey-milestone-photo {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 3.35rem 0 2.35rem;
  }

  .page-hero h1 {
    font-size: clamp(1.85rem, 6.8vw, 2.35rem);
    line-height: 1.35;
  }

  .prof-card {
    margin-bottom: 2.25rem;
    padding: 1.1rem;
  }

  .prof-intro .name {
    font-size: clamp(1.55rem, 6.4vw, 1.95rem);
  }

  .prof-brief > div {
    grid-template-columns: 4.75rem 1fr;
    gap: 0.55rem;
  }

  .prof-brief dd {
    font-size: 0.92rem;
  }

  .prof-lead {
    font-size: 0.95rem;
    line-height: 1.85;
  }

  .prof-journey {
    margin-bottom: 2.25rem;
    padding: 1.25rem 1rem 1.5rem;
  }

  .journey-head {
    gap: 0.85rem;
    margin-bottom: 1.35rem;
  }

  .journey-timeline {
    --year-w: 4.85rem;
    --rail-w: 10px;
    --gap-x: 0.55rem;
  }

  .journey-item {
    grid-template-columns: var(--year-w) var(--rail-w) minmax(0, 1fr);
    column-gap: var(--gap-x);
    padding-bottom: 1.1rem;
  }

  .journey-year {
    font-size: 0.88rem;
  }

  .journey-body p {
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .journey-milestone {
    --mile: 4.5rem;
    padding-top: calc(var(--mile) + 0.65rem);
  }

  .journey-milestone-title {
    font-size: clamp(0.92rem, 3.8vw, 1.08rem);
  }

  .journey-figure {
    --journey-photo-w: 9.375rem;
  }

  .journey-figure-grid {
    grid-template-columns: repeat(2, min(9.375rem, calc((100% - 0.85rem) / 2)));
    width: 100%;
    max-width: 100%;
  }

  .prof-gallery {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }

  .prof-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 0.65rem;
  }
}

@media (max-width: 480px) {
  .prof-brief > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding-bottom: 0.65rem;
  }

  .prof-brief dt {
    margin-bottom: 0.1rem;
  }

  .journey-timeline {
    --year-w: 0;
    --rail-w: 10px;
    --gap-x: 0.5rem;
    --line-x: calc(var(--rail-w) / 2);
  }

  .journey-timeline::before {
    left: calc(var(--rail-w) / 2 - 1px);
  }

  .journey-item {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-areas:
      "year year"
      "rail body";
    column-gap: var(--gap-x);
    row-gap: 0.2rem;
    padding-left: 0.15rem;
  }

  .journey-year {
    grid-area: year;
    text-align: left;
    margin: 0 0 0.15rem;
    padding-left: calc(var(--rail-w) + var(--gap-x));
    font-size: 0.86rem;
  }

  .journey-rail {
    grid-area: rail;
  }

  .journey-body {
    grid-area: body;
  }

  .journey-figure-grid {
    grid-template-columns: repeat(2, min(9.375rem, calc((100% - 0.85rem) / 2)));
    width: 100%;
  }

  .journey-figure {
    --journey-photo-w: 9.375rem;
  }

  .prof-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Policy pillars ---- */
.pillars {
  display: grid;
  gap: 1.15rem;
}

.pillar-box {
  display: grid;
  grid-template-columns: minmax(148px, 210px) 1fr;
  gap: 1.35rem;
  align-items: start;
  padding: 1.25rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 10px 24px rgba(12, 61, 92, 0.08);
  transition: transform 0.28s var(--ease), box-shadow 0.28s ease;
}

.pillar-box:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 14px 32px rgba(12, 61, 92, 0.12);
}

.pillar-diagram {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 148px;
  padding: 1rem 0.75rem;
  border-radius: 12px;
  background: linear-gradient(155deg, #e3f2fb 0%, #f3f8fc 55%, #e8f4fc 100%);
  border: 1px solid rgba(200, 216, 232, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.pillar-num {
  position: absolute;
  top: 0.65rem;
  left: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  opacity: 0.85;
}

.pillar-chart {
  width: min(100%, 118px);
  height: auto;
  color: var(--accent-deep);
  margin-top: 0.35rem;
}

.pillar-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 0.15rem 0;
}

.pillar-body h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--ink);
}

.pillar-body p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 0.95rem;
  line-height: 1.85;
}

.pillar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pillar-list li {
  position: relative;
  margin: 0 0 0.42rem;
  padding-left: 1.15rem;
  color: var(--ink-mid);
  font-size: 0.95rem;
  line-height: 1.7;
}

.pillar-list li:last-child {
  margin-bottom: 0;
}

.pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #f0c84a;
  box-shadow: 0 0 0 1px rgba(200, 150, 20, 0.18);
}

@media (max-width: 680px) {
  .pillar-box {
    grid-template-columns: 1fr;
  }

  .pillar-diagram {
    min-height: 120px;
  }

  .pillar-chart {
    width: min(100%, 100px);
  }
}

.policy-cat {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.policy-cat .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.policy-cat h3 {
  margin: 0;
  font-size: 1.15rem;
}

.policy-cat .head a {
  font-size: 0.82rem;
  text-decoration: none;
}

.policy-cat ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.policy-cat li a {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.policy-cat li a:hover .t {
  color: var(--accent-deep);
}

.policy-cat .d {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

/* ---- Assembly work (議会での取り組み) ---- */
.section-assembly {
  padding-bottom: 4rem;
}

.assembly-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 0.5rem;
  margin: 0 auto 2.5rem;
  padding: 1.15rem 1.25rem;
  max-width: 36rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(12, 61, 92, 0.07);
}

.assembly-flow-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.assembly-flow.is-in .assembly-flow-step:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}

.assembly-flow.is-in .assembly-flow-step:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}

.assembly-flow.is-in .assembly-flow-step:nth-child(5) {
  opacity: 1;
  transform: none;
  transition-delay: 0.38s;
}

.assembly-flow-num {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.assembly-flow-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  white-space: nowrap;
}

.assembly-flow-arrow {
  width: 1.35rem;
  height: 2px;
  background: var(--accent);
  position: relative;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.5s ease, transform 0.5s var(--ease);
}

.assembly-flow-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  translate: 0 -50%;
  border: 4px solid transparent;
  border-left-color: var(--accent);
}

.assembly-flow.is-in .assembly-flow-arrow:nth-child(2) {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.15s;
}

.assembly-flow.is-in .assembly-flow-arrow:nth-child(4) {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.32s;
}

.assembly-grid {
  display: grid;
  gap: 1.15rem;
}

.assembly-box {
  display: grid;
  grid-template-columns: minmax(100px, 130px) 1fr;
  gap: 1.25rem;
  padding: 1.25rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  box-shadow: 0 10px 24px rgba(12, 61, 92, 0.08);
  transition: transform 0.28s var(--ease), box-shadow 0.28s ease;
}

.assembly-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(12, 61, 92, 0.11);
}

.assembly-diagram {
  display: grid;
  place-items: center;
  min-height: 100px;
  padding: 0.85rem;
  border-radius: 12px;
  background: linear-gradient(155deg, #e3f2fb, #f3f8fc);
  border: 1px solid rgba(200, 216, 232, 0.85);
}

.assembly-chart {
  width: min(100%, 72px);
  color: var(--accent-deep);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assembly-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--accent);
}

.assembly-head h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
}

.assembly-head a {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--accent-deep);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: background 0.2s ease, color 0.2s ease;
}

.assembly-head a:hover {
  background: var(--accent-deep);
  color: #fff;
  border-color: var(--accent-deep);
}

.assembly-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.assembly-items li {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.assembly-box.is-in .assembly-items li:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

.assembly-box.is-in .assembly-items li:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.3s;
}

.assembly-items a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s var(--ease);
}

.assembly-items a:hover {
  background: var(--blue-soft);
  border-color: var(--line);
  transform: translateX(4px);
}

.assembly-item-main,
.assembly-item-sub {
  grid-column: 1;
  display: grid;
  gap: 0.2rem;
}

.assembly-item-sub {
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--line);
}

.assembly-tag {
  display: inline-block;
  width: fit-content;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: var(--accent-deep);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.assembly-tag--how {
  background: #0c3d5c;
}

.assembly-items time {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.assembly-title {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--ink);
}

.assembly-desc {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink-mid);
}

.assembly-go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  font-size: 0.95rem;
  transition: transform 0.25s var(--ease), background 0.25s ease;
}

.assembly-items a:hover .assembly-go {
  transform: translateX(3px);
  background: var(--accent);
}

@media (max-width: 680px) {
  .assembly-flow {
    border-radius: 14px;
    flex-direction: column;
    align-items: stretch;
    max-width: 280px;
  }

  .assembly-flow-arrow {
    width: 2px;
    height: 1rem;
    margin-inline: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .assembly-flow-arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    translate: -50% 0;
    border: 4px solid transparent;
    border-top-color: var(--accent);
    border-left-color: transparent;
  }

  .assembly-flow.is-in .assembly-flow-arrow {
    transform: scaleY(1);
  }

  .assembly-box {
    grid-template-columns: 1fr;
  }

  .assembly-diagram {
    min-height: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assembly-flow-step,
  .assembly-flow-arrow,
  .assembly-items li {
    opacity: 1;
    transform: none;
  }
}

/* ---- Report article（第17項寄せ） ---- */
.article-page {
  --font-display: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.article-page h1,
.article-page h2,
.article-page h3,
.article-page .brand .name {
  font-family: var(--font-body);
  font-weight: 700;
}

.article {
  padding: 3rem 0 4.5rem;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16.5rem;
  gap: 2.75rem;
  align-items: start;
}

.article-main .crumb {
  font-size: 0.82rem;
  margin-bottom: 1rem;
}

.article-eyecatch {
  margin: 0 0 1.15rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px solid rgba(200, 216, 232, 0.85);
}

.article-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-main h1,
.page-article-title {
  font-size: clamp(1.55rem, 3.2vw, 2.05rem);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.article-note {
  margin: 1rem 0 2rem;
  padding: 0.9rem 1rem;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: 0.9rem;
  color: var(--ink-mid);
}

.sec-head {
  margin-top: 2.25rem;
  padding-bottom: 0.45rem;
  border-bottom: 3px solid var(--accent);
  font-size: 1.28rem;
  letter-spacing: 0.04em;
}

.q-box,
.a-box {
  margin: 1.25rem 0;
  padding: 1.25rem 1.35rem;
  border-radius: 2px;
}

.q-box {
  background: var(--orange-soft);
  border: 1px solid #b7d6ec;
}

.a-box {
  background: var(--blue-soft);
  border: 1px solid #c5d7e8;
}

.q-box .label,
.a-box .label {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.q-box .label { color: var(--accent-deep); }
.a-box .label { color: var(--blue); }

.a-point {
  margin: 0 0 0.85rem;
  padding: 0.95rem 1.05rem;
  background: var(--green-soft);
  border-left: 3px solid var(--green);
  font-size: 1.05rem;
  line-height: 1.75;
}

.a-point strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--green);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.a-full {
  margin: 0;
  border-top: 1px dashed #c5d7e8;
  padding-top: 0.65rem;
}

.a-full summary {
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--blue);
  letter-spacing: 0.04em;
  list-style: none;
}

.a-full summary::-webkit-details-marker {
  display: none;
}

.a-full summary::before {
  content: "＋ ";
}

.a-full[open] summary::before {
  content: "− ";
}

.a-full-text {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-mid);
}

u.em {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
  font-style: normal;
}

.num-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.5rem 0 0.5rem;
}

.num-grid .cell {
  background: var(--white);
  padding: 1.25rem 1rem;
  text-align: center;
}

.num-grid .v {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.num-grid .k {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  color: var(--ink-mid);
  font-weight: 500;
}

.num-note {
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.summary-box {
  margin: 1rem 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
}

.summary-box p {
  margin: 0 0 0.85rem;
  font-size: 1.08rem;
  line-height: 1.85;
}

.summary-box .summary-wish {
  margin: 0;
  font-size: 1.08rem;
}

.back-link {
  margin-top: 2.5rem;
}

.article-side {
  position: sticky;
  top: 5.5rem;
}

.side-block {
  margin-bottom: 1.75rem;
  padding: 1.15rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
}

.side-block h3 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-list li + li {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.related-list a {
  display: grid;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
}

.related-list a:hover .r-title {
  color: var(--accent-deep);
}

.related-list .r-field {
  font-size: 0.72rem;
  color: var(--accent-deep);
  letter-spacing: 0.04em;
}

.related-list .r-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}

.side-note {
  margin: 0;
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-side {
    position: static;
    order: 2;
  }
}

@media (max-width: 640px) {
  .num-grid {
    grid-template-columns: 1fr;
  }
}

.source-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 1rem;
}

.source-table th,
.source-table td {
  border: 1px solid var(--line);
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.source-table th {
  width: 7rem;
  background: var(--paper-2);
  font-weight: 500;
}

/* ---- Donation / contact ---- */
.section-page-body {
  position: relative;
  padding-block: 2.75rem 3.25rem;
  background: linear-gradient(180deg, #f7fafc 0%, #eef4f9 100%);
}

.section-page-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%);
  pointer-events: none;
}

.page-body-head {
  position: relative;
  text-align: center;
  margin-bottom: 2rem;
}

.support-club-logo {
  display: flex;
  justify-content: center;
  margin: 0 0 0.65rem;
}

.support-club-logo img {
  display: block;
  width: min(12rem, 72vw);
  height: auto;
}

.page-body-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a1a1a;
  line-height: 1.45;
}

.page-body-title .en {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
}

.page-body-lead {
  margin: 0;
  max-width: 38rem;
  margin-inline: auto;
  font-size: 0.96rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--ink-mid);
}

.content-stack {
  position: relative;
  display: grid;
  gap: 1.15rem;
}

.content-panel {
  padding: 1.65rem 1.75rem 1.75rem;
  background: #ffffff;
  border: 1px solid rgba(200, 216, 232, 0.9);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 10px 24px rgba(12, 61, 92, 0.06);
}

.content-panel--notice {
  background: linear-gradient(180deg, #f8fbfe 0%, #ffffff 100%);
  border-color: rgba(183, 214, 236, 0.85);
}

.content-panel--form {
  padding-bottom: 1.85rem;
}

.content-panel-title {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1a1a1a;
  line-height: 1.45;
}

.content-prose {
  font-size: 0.96rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #334d63;
}

.content-prose p {
  margin: 0 0 1rem;
}

.content-prose p:last-child {
  margin-bottom: 0;
}

.content-prose--compact {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(200, 216, 232, 0.85);
}

.content-note {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.notice-lead {
  font-weight: 700;
  color: var(--ink);
}

.notice-list {
  margin: 0.85rem 0 1rem;
  padding-left: 1.25rem;
  color: #334d63;
}

.notice-list li {
  margin-bottom: 0.55rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.notice-list li:last-child {
  margin-bottom: 0;
}

.info-dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.info-dl div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(200, 216, 232, 0.85);
}

.info-dl div:first-child {
  padding-top: 0;
}

.info-dl div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.info-dl dt {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-deep);
}

.info-dl dd {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #334d63;
}

.info-dl a {
  color: var(--accent-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.info-dl a:hover {
  color: var(--accent);
}

.page-body-actions {
  position: relative;
  margin-top: 2rem;
  text-align: center;
}

.page-body-actions-lead {
  margin: 0 0 1rem;
  font-size: 0.94rem;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: var(--ink-mid);
}

.btn-page-action {
  min-width: 12rem;
  justify-content: center;
}

.bank-box,
.warn-box {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  background: var(--white);
  margin: 1rem 0 1.75rem;
}

.warn-box {
  background: #f0f7fc;
  border-color: #b7d6ec;
}

.warn-box ul {
  margin-bottom: 0;
}

.form {
  display: grid;
  gap: 1rem;
  margin-bottom: 0;
}

.form--page {
  margin-top: 0.25rem;
}

.form label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.form input,
.form textarea,
.form select {
  width: 100%;
  border: 1px solid rgba(200, 216, 232, 0.95);
  background: #fafcfe;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 10px;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.form input::placeholder,
.form textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.85;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: rgba(26, 134, 196, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 134, 196, 0.12);
}

.form textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.75;
}

.form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-actions {
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .form .row-2 {
    grid-template-columns: 1fr;
  }

  .info-dl div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .content-panel {
    padding: 1.35rem 1.25rem 1.45rem;
  }
}

.form-msg {
  display: none;
  padding: 1rem 1.15rem;
  background: var(--green-soft);
  border: 1px solid rgba(47, 138, 106, 0.25);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #1f4d3c;
}

.form-msg.is-show {
  display: block;
}

.contact-dl {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.contact-dl div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.contact-dl dt {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.contact-dl dd {
  margin: 0;
}

/* ---- CTA band ---- */
.cta-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  background: transparent;
  border: none;
}

.cta-band a {
  display: block;
  padding: 1.65rem 1.45rem;
  background: var(--btn-fill);
  border: var(--btn-edge);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-glow);
  text-decoration: none;
  color: #fff;
  transition:
    background 0.28s ease,
    transform 0.28s var(--ease),
    box-shadow 0.28s ease;
}

.cta-band a:hover {
  background: var(--btn-fill-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 24px rgba(12, 61, 92, 0.22);
}

.cta-band .h {
  display: block;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
  color: #fff;
}

.cta-band .d {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .cta-band {
    grid-template-columns: 1fr;
  }
}

/* ---- Swap note (placeholders) ---- */
.placeholder-banner {
  margin: 0;
  padding: 0.55rem 1rem;
  background: #0d4a72;
  color: #d5e8f5;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.placeholder-banner strong {
  color: #fff;
  font-weight: 500;
}

/* ---- Footer ---- */
.site-footer {
  background: linear-gradient(180deg, #0f4666 0%, #0c3d5c 55%, #082f47 100%);
  color: rgba(255, 255, 255, 0.72);
  padding: 3rem 0 2rem;
  margin-top: 0;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-brand-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.footer-brand .name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 1.95rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.footer-brand .role {
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}

.footer-party {
  display: flex;
  align-items: center;
  margin-top: 0.85rem;
}

.footer-party-logo {
  display: block;
  width: min(10rem, 100%);
  height: auto;
  aspect-ratio: 800 / 299;
  object-fit: contain;
  object-position: left center;
  background: #ff7b00;
}

.footer-nav {
  display: grid;
  gap: 0.55rem;
  font-size: 1.05rem;
}

.footer-copy {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---- Scroll progress / back-to-top ---- */
.scroll-progress {
  position: fixed;
  right: 1.15rem;
  bottom: 1.25rem;
  z-index: 50;
  width: 3.35rem;
  height: 3.35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fffaf4;
  box-shadow:
    0 0 0 1px rgba(200, 120, 40, 0.16),
    0 10px 22px rgba(140, 70, 0, 0.16);
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.28s var(--ease),
    visibility 0.28s var(--ease),
    transform 0.28s var(--ease),
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.scroll-progress.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.scroll-progress.is-end {
  cursor: pointer;
  background: var(--accent);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 10px 22px rgba(140, 70, 0, 0.28);
}

.scroll-progress.is-end:hover {
  background: var(--accent-deep);
}

.scroll-progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.scroll-progress-ring circle {
  fill: none;
  stroke-width: 3.2;
}

.scroll-progress-track {
  stroke: rgba(240, 128, 0, 0.18);
}

.scroll-progress-bar {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 113.1;
  transition: stroke-dashoffset 0.12s linear, stroke 0.2s ease;
}

.scroll-progress.is-end .scroll-progress-track,
.scroll-progress.is-end .scroll-progress-bar {
  stroke: rgba(255, 255, 255, 0.92);
}

.scroll-progress-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.scroll-progress-pct {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  line-height: 1;
}

.scroll-progress-top {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  color: #fff;
  line-height: 1;
}

.scroll-progress-top svg {
  width: 0.85rem;
  height: 0.85rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll-progress-top span {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.scroll-progress.is-end .scroll-progress-pct {
  display: none;
}

.scroll-progress.is-end .scroll-progress-top {
  display: flex;
}

@media (max-width: 720px) {
  .scroll-progress {
    right: 0.85rem;
    bottom: 0.95rem;
    width: 3.05rem;
    height: 3.05rem;
  }
}


/* ==================================================================
   アイキャッチに記事タイトルを重ねる（要件定義書 第17項⑥）
   ------------------------------------------------------------------
   7月30日のご要望「アイキャッチ画像に記事タイトルを重ねたい（添付6案）」
   への回答として、こう定めてある。

     分野ごとの背景画像に、タイトルを重ねて表示します。
     画像を1本ずつ作る必要はございません。
     文字は画面上で重ねるため常に鮮明で、タイトルを直せば表示も変わります。

   写真は分野ごとに決まるため、194本のあいだで同じ写真が何度も出る。
   重ねる題名が違えば別の記事として読める、というのがこの作りの要。

   ※この区画は「Gikai report (pipeline)」の区切りより前に置くこと。
     区切りより後ろは tools/update_preview.py が記事CSSで丸ごと
     置き換えるため、後ろに書くと同期のたびに消える（実際に消えた）。
   ================================================================== */

.article-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1.15rem;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border: 1px solid rgba(200, 216, 232, 0.85);
}

.article-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 写真の明るさに関わらず白文字が読めるよう、上から下へ濃くする */
.article-hero-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.7rem;
  padding: 1.7rem 1.5rem;
  background: linear-gradient(180deg, rgba(9, 32, 52, 0.22), rgba(9, 32, 52, 0.48));
}

.article-hero-panel .badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: #E8811F;
  border-radius: 3px;
  padding: 0.22em 0.85em;
}

.article-hero-panel .ttl {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  max-width: 28em;
}

.article-hero-panel .sign {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
  .article-hero { aspect-ratio: 4 / 3; }
  .article-hero-panel { padding: 1.1rem 1rem; gap: 0.5rem; }
  .article-hero-panel .ttl { font-size: 1rem; line-height: 1.5; }
  .article-hero-panel .sign { font-size: 0.7rem; }
}


/* ================================================================
   ご確認のお願いの頁（check.html）
   ※この区画は「Gikai report (pipeline)」の区切りより前に置くこと。
     後ろに置くと update_preview.py の差し替えで消える。
   ================================================================ */

.check-lead,
.lead {
  margin: 0 0 1.6rem;
  font-size: clamp(0.98rem, 1.6vw, 1.06rem);
  line-height: 1.9;
  color: var(--ink, #1b2430);
}

/* お願いすることの見出し。三つを数字で並べる */
.container > h2 {
  margin: 3rem 0 1rem;
  padding: 0 0 0.6rem;
  border-bottom: 2px solid var(--accent, #ff7b00);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.5;
}

.container > h3 {
  margin: 2.2rem 0 0.7rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--accent, #ff7b00);
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.55;
}

.container > h3 .n {
  margin-left: 0.4rem;
  font-size: 0.85em;
  font-weight: 600;
  color: #6b7683;
}

/* 何が起きているか */
p.what {
  margin: 0 0 0.9rem;
  line-height: 1.9;
}

/* お決めいただきたいこと。ここがいちばん大事なので枠で囲う */
p.ask {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background: #fff7ef;
  border-left: 4px solid var(--accent, #ff7b00);
  line-height: 1.85;
}

p.ask strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.92em;
  letter-spacing: 0.04em;
  color: #a04e00;
}

/* 記事へのリンクの並び */
ul.rv-list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line, #e2e6ea);
}

ul.rv-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid var(--line, #e2e6ea);
}

ul.rv-list li > a {
  font-size: clamp(0.98rem, 1.7vw, 1.06rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink, #1b2430);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

ul.rv-list li > a:hover {
  color: var(--accent, #ff7b00);
  border-bottom-color: currentColor;
}

/* 会議名と日付 */
ul.rv-list .m {
  font-size: 0.84rem;
  color: #6b7683;
  letter-spacing: 0.02em;
}

/* 機械が何に迷ったか。細かい話なので小さく置く */
ul.rv-list .d {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #8a949f;
}

/* 抜き取りの10本は番号を振る */
ul.rv-spot {
  counter-reset: spot;
}

ul.rv-spot li {
  position: relative;
  padding-left: 2.4rem;
  counter-increment: spot;
}

ul.rv-spot li::before {
  content: counter(spot);
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, #ff7b00);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 50%;
}

@media (max-width: 640px) {
  ul.rv-list li { padding: 0.75rem 0.1rem; }
  ul.rv-spot li { padding-left: 2.1rem; }
  p.ask { padding: 0.8rem 0.9rem; }
}


/* ================================================================
   記事をキーワードで探す（8月26日のご要望）
   ※この区画は「Gikai report (pipeline)」の区切りより前に置くこと。
     後ろに置くと update_preview.py の差し替えで消える。
   ================================================================ */
.archive-search {
  max-width: 30rem;
  margin: 1.4rem auto 0.6rem;
  text-align: center;
}

.archive-search-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-mid, #55606c);
}

.archive-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.archive-search-input {
  width: 100%;
  padding: 0.75rem 2.6rem 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink, #1b2430);
  background: #fff;
  border: 1px solid var(--line, #d9dee4);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.archive-search-input:focus {
  outline: none;
  border-color: var(--accent, #f08000);
  box-shadow: 0 0 0 3px rgba(240, 128, 0, 0.16);
}

/* ブラウザが付ける×印は、こちらの消すボタンと重なるので隠す */
.archive-search-input::-webkit-search-cancel-button { display: none; }

.archive-search-clear {
  position: absolute;
  right: 0.5rem;
  width: 1.85rem;
  height: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: #fff;
  background: var(--ink-mid, #8a949f);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.archive-search-clear:hover { background: var(--accent, #f08000); }

/* display:flex は hidden 属性を打ち消してしまうので、明示的に隠す */
.archive-search-clear[hidden] { display: none; }
.archive-search-note[hidden] { display: none; }

.archive-search-note {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-ink, #a04e00);
}

@media (max-width: 600px) {
  .archive-search { margin-top: 1.1rem; }
  .archive-search-input { font-size: 16px; }  /* iOSの拡大を防ぐ */
}


/* ================================================================
   ブログ・プロフィールの見出し帯に写真を敷く
   ※この区画は「Gikai report (pipeline)」の区切りより前に置くこと。

   8月26日、ももかわ様が分野ごとの写真と一緒に
   ブログ用・プロフィール用の写真もお送りくださった。

   プロフィールは応援ページと同じく「横長合成＋両側を写真色でつなぐ」方式。
   原寸の高さの約72％を中央に残し、帯の高さは他ページと揃える。
   ================================================================ */
.page-hero--blog {
  position: relative;
  min-height: clamp(13.5rem, 24vw, 17.5rem);
  padding: 0;
  overflow: hidden;
}

.page-hero--profile {
  --hero-profile-edge: #2a3324;
  position: relative;
  min-height: clamp(13.5rem, 24vw, 17.5rem);
  padding: 0;
  overflow: hidden;
  background: var(--hero-profile-edge);
}

.page-hero--blog::before,
.page-hero--profile::before {
  display: none;
}

.page-hero--blog .page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero--profile .page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero--blog .page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.page-hero--profile .page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: none;
  transform: none;
}

/* 白い題名が読めるよう、写真の上に暗い膜をかける */
.page-hero--blog .page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8, 6, 5, 0.86) 0%,
      rgba(12, 10, 8, 0.66) 14%,
      rgba(16, 14, 12, 0.4) 30%,
      rgba(20, 18, 14, 0.24) 46%,
      rgba(16, 14, 12, 0.4) 70%,
      rgba(8, 6, 5, 0.86) 100%),
    linear-gradient(0deg, rgba(16, 12, 8, 0.3) 0%, transparent 40%);
}

/* プロフィール：木々の緑が続く一体の帯。題名用にごく薄い暗幕のみ */
.page-hero--profile .page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(18, 24, 14, 0.55) 0%,
      rgba(18, 24, 14, 0.28) 12%,
      rgba(18, 24, 14, 0.08) 28%,
      transparent 42%,
      transparent 58%,
      rgba(18, 24, 14, 0.08) 72%,
      rgba(18, 24, 14, 0.28) 88%,
      rgba(18, 24, 14, 0.55) 100%
    ),
    linear-gradient(0deg, rgba(12, 16, 10, 0.18) 0%, transparent 40%);
}

.page-hero--blog .wrap,
.page-hero--profile .wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: 2.5rem;
}

.page-hero--profile h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.8);
}

.page-hero--profile .en {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .page-hero--profile {
    min-height: clamp(12rem, 34vw, 15rem);
  }

  .page-hero--profile .wrap {
    padding-block: 2rem;
  }

  .page-hero--profile .page-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(24, 32, 20, 0.88) 0%,
        rgba(40, 48, 28, 0.55) 42%,
        rgba(56, 52, 28, 0.22) 100%
      );
  }
}


/* ================================================================
   議会報告一覧・分野から探す・ブログ一覧の帯を詰める
   ※この区画は「Gikai report (pipeline)」の区切りより前に置くこと。

   8月27日 ももかわ様
     「議会報告一覧 と 分野から探す の帯が上下に間のびしているので
       高さを縮めた方が良いです。（ヘッダーに書いてあるので説明文はいらないかも）」
     「ブログ一覧 の帯が上下に間のびしているので高さを縮めた方が良いです。」

   説明文はページ上部の見出し帯に同じことが書いてあるため、二度読ませない。
   ================================================================ */
.section-report-archive,
.section-report-core,
.section-blog-archive {
  padding-block: 1.5rem 2rem;
}

.report-archive-head,
.blog-archive-head {
  margin-bottom: 1.1rem;
}

/* 見出しの下の説明文。上の帯と同じことを言っているので出さない */
.report-archive-lead,
.blog-archive-lead,
.report-core-lead {
  display: none;
}

/* 見出しそのものも、間隔を詰める */
.report-archive-title,
.blog-archive-title {
  margin-bottom: 0.4rem;
}

@media (max-width: 600px) {
  .section-report-archive,
  .section-report-core,
  .section-blog-archive {
    padding-block: 1.2rem 1.6rem;
  }
}


/* ================================================================
   ヘッダー・フッターの「ももかわ一郎」をメニューと同じ書体にする
   ※この区画は「Gikai report (pipeline)」の区切りより前に置くこと。

   8月27日 ももかわ様
     「議会報告ページのヘッダーとフッターの『ももかわ一郎』の文字の
       フォントが他メニューと違う（ゴシック？）ので合わせる」

   実測すると、名前だけが Noto Serif JP（明朝）の太さ900で、
   メニューと肩書は Noto Sans JP（ゴシック）だった。
   メニューに合わせてゴシックに揃える。
   大きさは名前としての位置づけがあるのでそのまま残す。
   ================================================================ */
.site-header .brand .name,
.site-footer .footer-brand .name {
  font-family: var(--font-body, "Noto Sans JP"), system-ui, sans-serif;
  font-weight: 700;
}

/* ---- Gikai report (pipeline) ---- */
/* ==================================================================
 *  議会報告 記事の表示部品
 *
 *  src/render.py が出す HTML に当たるスタイル。
 *  記事本文（投稿データ）には <style> を含めない。文字だけを保存し、
 *  見え方はすべてこのファイルで決める。あとから一括で調整できる。
 *
 *  配色は site-preview のモックアップに合わせた紺基調。
 *  ただしモックアップ側の .gikai-report は
 *    ・第17項の切替機構（書体・文字サイズ・強調・折りたたみ）が無い
 *    ・@media(max-width:600px) が閉じておらず、文字の拡大が
 *      スマートフォンでしか効いていない
 *  という状態だったため、こちらの構造を残して配色のみ取り込んでいる。
 *
 *  要件定義書 第17項（見え方に関するご要望）の対応箇所には ★印 を付す。
 * ================================================================== */

.gikai-report {
	/* --- 配色 --------------------------------------------------------
	 * 8月のご指摘により、質問と回答の色を分ける。
	 *
	 *   質問（議員の問いかけ）… オレンジ系（党のカラー）
	 *   回答（区の答弁）      … グリーン系（練馬区のカラー）
	 *
	 * 読み手が色だけで「誰の発言か」を見分けられるようにするための指定。
	 * 答弁のポイントは、回答と同系だと沈むため、
	 * 回答の枠の中で一段濃い緑に白地を重ねて区別する。
	 *
	 * 変数名は役割で付ける。
	 *   q = 議員の問いかけ　a = 区の答弁　pt = 答弁のポイント
	 * ---------------------------------------------------------------- */
	--paper: #FFFFFF;
	--ink: #1F2A33;
	--ink-mid: #4A5966;
	--ink-soft: #7A8A96;
	--line: #DCE3E8;
	--line-soft: #F0F4F7;

	/* 質問側 … オレンジ（党のカラー） */
	--q: #E8811F;
	--q-line: #E8912D;
	--q-bg: #FDF4E8;
	--q-ink: #A85A00;

	/* 回答側 … グリーン（練馬区のカラー） */
	--a: #2E8B57;
	--a-line: #4FA377;
	--a-bg: #EDF7F1;
	--a-ink: #1D6B41;

	/* 答弁のポイント … 回答の枠の中で目立たせる */
	--pt: #1D6B41;
	--pt-bg: #FFFFFF;
	--pt-ink: #14512F;

	--quote-bg: #F7F5F1;
	--quote-line: #E0D5C2;
	--sum-bg: #FDFAF3;
	--sum-line: #E3C77A;

	/* --- 文字の大きさ ---------------------------------------------
	 * ★② 可視化の文字／★③ ポイントとまとめの文字を大きくする
	 * ★⑤ 答弁の全文は小さくして圧縮する
	 * 比較用に .mk-size-compact（以前の大きさ）を用意している
	 * ------------------------------------------------------------- */
	/* 8月のご指摘「文字が小さい」「可視化の文字が小さい。
	   本文とのメリハリがない」を受けて、全体を一段大きくし、
	   可視化は本文よりはっきり大きくしている。 */
	--f-body:      17px;     /* 質問・背景の本文 */
	--f-answer:    14.5px;   /* ★⑤ 答弁の全文（本文より小さく） */
	--f-point:     17px;     /* ★③ 答弁のポイント */
	--f-point-lbl: 14.5px;
	/* 8月26日のご指摘「最後のまとめの文字が小さい」。
	   本文と同じ17pxだったため、まとめだけが目に入らなかった。
	   記事の結論にあたる部分なので、本文より一段大きくする。 */
	--f-sum:       18.5px;   /* ★③ まとめ */
	--f-sum-ttl:   21px;
	/* 8月26日のご指摘「最後のまとめ“ ”の文字が小さい」。
	   締めの引用が15pxで、本文17pxより小さかった。
	   議員のご発言をそのまま載せる、記事の締めにあたる部分なので
	   本文と同じ大きさにする。 */
	--f-quote:     17px;     /* 締めの引用 */
	--f-viz-cap:   19px;     /* ★② 可視化の見出し */
	--f-viz-head:  16px;     /* ★② 比較カードの見出し */
	--f-viz-body:  16.5px;   /* ★② 比較カード・フロー図の本文 */
	--f-num-key:   14.5px;   /* ★② 数値カード */
	--f-num-val:   36px;
	--f-num-note:  13.5px;
	--f-h2:        22px;
	--f-bg-h:      19px;     /* 背景の小見出し。本文より大きくする */

	/* ★④ 1センテンスごとに空白行を入れる。
	   ご指摘「2〜3行（1センテンス）で空白行を入れる」に対応。
	   render.py が句点・読点で行を分けているので、
	   その各行の間隔をここで決める。 */
	--gap-line: 1.15em;

	color: var(--ink);
	font-size: var(--f-body);
	line-height: 1.9;
}

/* 以前の大きさ。ご確認いただくための比較用 */
.gikai-report.mk-size-compact {
	--f-body: 14.5px;  --f-answer: 13.5px;  --f-bg-h: 16.5px;
	--f-point: 13px;   --f-point-lbl: 12.5px;
	--f-sum: 14px;     --f-sum-ttl: 14px;   --f-quote: 13.5px;
	--f-viz-cap: 14px; --f-viz-head: 12.5px; --f-viz-body: 13.5px;
	--f-num-key: 12px; --f-num-val: 22px;    --f-num-note: 11.5px;
	--f-h2: 19px;
}

.gikai-report * { box-sizing: border-box; }


/* --- 冒頭 -------------------------------------------------------- */

.gikai-report .kaigi { font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
.gikai-report .intro { font-size: 15px; color: var(--ink-mid); margin: 0 0 6px; line-height: 1.95; }
.gikai-report .intro-note {
	font-size: 12px; color: var(--ink-soft); margin: 0 0 34px;
	padding-bottom: 22px; border-bottom: 1px solid var(--line);
}


/* --- 見出し ------------------------------------------------------ */

.gikai-report h2 {
	font-size: var(--f-h2); margin: 44px 0 18px; font-weight: 700;
	padding-bottom: 9px; border-bottom: 3px solid var(--q-line); line-height: 1.55;
}
/* 背景の小見出し。
   8月23日のご指摘「こちら文字が小さいのでもう少し大きい方が良い」。
   本文が17pxなのに小見出しが15.5pxで、見出しのほうが小さかった。
   本文より大きくし、線も濃くして見出しらしくする。 */
.gikai-report .bg-h {
	font-size: var(--f-bg-h); font-weight: 700; margin: 28px 0 10px;
	padding-left: 12px; border-left: 4px solid var(--q-line); color: var(--ink);
	line-height: 1.6;
}


/* --- 地の文（背景の説明） ---------------------------------------- */

.gikai-report .talk { margin: 0 0 20px; }
.gikai-report .talk p { margin: 0 0 var(--gap-line); font-size: var(--f-body); line-height: 1.95; }
.gikai-report .talk p.gap { margin-bottom: 16px; }

.gikai-report .bg-note {
	font-size: 12px; color: var(--ink-soft); margin: 4px 0 20px;
	padding: 8px 12px; background: var(--line-soft);
	border-left: 3px solid var(--line); line-height: 1.8;
}


/* --- 質問 -------------------------------------------------------- */

.gikai-report .q {
	background: var(--q-bg); border: 1px solid var(--q-line);
	border-radius: 6px; padding: 16px 19px; margin: 22px 0;
}
.gikai-report .q .ttl {
	font-size: 15px; font-weight: 700; color: var(--q-ink);
	margin: 0 0 10px; line-height: 1.7;
}
.gikai-report .q p { margin: 0 0 var(--gap-line); font-size: var(--f-body); line-height: 1.9; }
.gikai-report .q p:last-child { margin-bottom: 0; }


/* --- 答弁 -------------------------------------------------------- */

.gikai-report .a {
	background: var(--a-bg); border: 1px solid var(--a-line);
	border-radius: 6px; padding: 16px 19px; margin: 22px 0;
}
.gikai-report .a .ttl { font-size: 14.5px; font-weight: 700; color: var(--a-ink); margin: 0 0 12px; }

/* 答弁のポイント ★③ */
.gikai-report .pt {
	background: var(--pt-bg); border: 1px solid var(--pt);
	border-radius: 5px; padding: 13px 16px; margin: 0 0 13px;
}
/* 答弁が2つ以上ある節では、ポイントを答弁の枠の外に1度だけ置く
   （8月19日のご指摘。答弁ごとに繰り返すと別の答弁に別の要点が付く）。
   枠の外に出ると答弁との結びつきが見えにくいので、
   回答側の色をわずかに敷いて、続きであることを示す。 */
.gikai-report .pt-lead {
	background: var(--a-bg);
	border-color: var(--a-line);
	margin: 0 0 10px;
}
.gikai-report .pt .lbl {
	font-size: var(--f-point-lbl); font-weight: 700; color: var(--pt-ink); margin: 0 0 6px;
}
/* 要点も1文ごとに段落を分ける（8月13日「2〜3行で空白行を入れる」）。
   以前は要点が1つの <p> だったため margin: 0 でよかったが、
   文ごとに分けたので段落の間に空きが要る。最後の段落だけ空けない。 */
.gikai-report .pt p { margin: 0 0 .9em; font-size: var(--f-point); color: var(--pt-ink); line-height: 1.9; }
.gikai-report .pt p:last-child { margin-bottom: 0; }

/* 答弁の全文 ★⑤ 小さくして圧縮する */
.gikai-report .a .body { font-size: var(--f-answer); color: var(--ink-mid); line-height: 1.85; margin: 0; }
.gikai-report .a .body p { margin: 0 0 .95em; }

/* ★⑤ 折りたたみ。ポイントだけ読んで先へ進める */
.gikai-report details.fold { margin: 0; }
.gikai-report details.fold > summary {
	cursor: pointer; list-style: none;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 700; color: var(--a-ink);
	padding: 6px 12px; border: 1px solid var(--a-line); border-radius: 4px;
	background: rgba(255, 255, 255, .7); user-select: none;
}
.gikai-report details.fold > summary::-webkit-details-marker { display: none; }
.gikai-report details.fold > summary::after { content: "＋"; font-size: 12px; }
.gikai-report details.fold.is-expanded > summary::after { content: "－"; }
.gikai-report details.fold.is-expanded > summary { margin-bottom: 11px; }
.gikai-report details.fold > summary:hover { background: #fff; }

/* 答弁・出典の折りたたみ：高さと不透明度をなめらかに */
.gikai-report details.fold > .fold-panel,
.gikai-report details.src-fold > .fold-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.46s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.gikai-report details.fold.is-expanded > .fold-panel,
.gikai-report details.src-fold.is-expanded > .fold-panel {
  grid-template-rows: 1fr;
}

.gikai-report details.fold > .fold-panel > .fold-panel-inner,
.gikai-report details.src-fold > .fold-panel > .fold-panel-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(3px);
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.03s,
    filter 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.03s;
}

.gikai-report details.fold.is-expanded:not(.is-closing) > .fold-panel > .fold-panel-inner,
.gikai-report details.src-fold.is-expanded:not(.is-closing) > .fold-panel > .fold-panel-inner {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.gikai-report details.fold.is-expanded > summary::after,
.gikai-report details.src-fold.is-expanded > summary::after {
  content: "－";
}

@media (prefers-reduced-motion: reduce) {
  .gikai-report details.fold > .fold-panel,
  .gikai-report details.src-fold > .fold-panel,
  .gikai-report details.fold > .fold-panel > .fold-panel-inner,
  .gikai-report details.src-fold > .fold-panel > .fold-panel-inner,
  .gikai-report details.fold > summary::after,
  .gikai-report details.src-fold > summary::after {
    transition: none;
    transform: none;
    filter: none;
  }

  .gikai-report details.fold[open] > .fold-panel,
  .gikai-report details.src-fold[open] > .fold-panel {
    grid-template-rows: 1fr;
  }

  .gikai-report details.fold[open] > .fold-panel > .fold-panel-inner,
  .gikai-report details.src-fold[open] > .fold-panel > .fold-panel-inner {
    opacity: 1;
  }
}


/* --- 可視化 ★② ------------------------------------------------- */

.gikai-report .viz { border: 1px solid var(--line); border-radius: 6px; padding: 20px; margin: 28px 0; }
.gikai-report .viz .cap {
	text-align: center; font-size: var(--f-viz-cap); font-weight: 700; margin: 0 0 18px; line-height: 1.6;
}

/* 比較カード */
.gikai-report .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gikai-report .col { border: 1px solid var(--line); border-radius: 5px; padding: 15px; text-align: center; }
.gikai-report .col.l { border-top: 3px solid var(--q-line); }
.gikai-report .col.r { border-top: 3px solid var(--a-line); }
.gikai-report .col .h { font-size: var(--f-viz-head); font-weight: 700; margin: 0 0 9px; line-height: 1.6; }
.gikai-report .col.l .h { color: var(--q-ink); }
.gikai-report .col.r .h { color: var(--a-ink); }
.gikai-report .col p { margin: 3px 0; font-size: var(--f-viz-body); line-height: 1.8; }

/* 数値カード */
.gikai-report .nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.gikai-report .num { text-align: center; padding: 6px; }
.gikai-report .num .k { font-size: var(--f-num-key); color: var(--ink-soft); margin: 0 0 6px; line-height: 1.6; }
.gikai-report .num .v { font-size: var(--f-num-val); font-weight: 700; margin: 0; line-height: 1.2; color: var(--a-ink); letter-spacing: -.01em; }
.gikai-report .num .v small { font-size: .55em; }
.gikai-report .num .s { font-size: var(--f-num-note); color: var(--ink-soft); margin: 6px 0 0; line-height: 1.65; }

/* フロー図 */
.gikai-report .flow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gikai-report .flow .step {
	border: 1px solid var(--line); border-radius: 5px; padding: 11px 17px;
	font-size: var(--f-viz-body); text-align: center; width: 100%; max-width: 440px; line-height: 1.7;
}
.gikai-report .flow .arw { color: var(--ink-soft); font-size: 13px; }


/* --- 締めのことば ------------------------------------------------
 * 長い意見表明をまるごと引用の枠に入れると読みづらい。
 * 前半は見出しと地の文、訴えかけの部分だけを引用の枠に入れる。
 * ---------------------------------------------------------------- */

.gikai-report .closing-h {
	font-size: var(--f-h2);
	font-weight: 700;
	margin: 44px 0 18px;
	padding-bottom: 9px;
	border-bottom: 3px solid var(--q-line);
	line-height: 1.55;
}
.gikai-report .closing-lead { margin: 0 0 8px; }
.gikai-report .closing-lead p {
	font-size: var(--f-body);
	line-height: 1.95;
	margin: 0 0 var(--gap-line);
}

.gikai-report .quote {
	background: var(--quote-bg); border-radius: 6px; padding: 26px 30px;
	margin: 32px 0; position: relative;
}
.gikai-report .quote::before {
	content: "\201C"; position: absolute; left: 12px; top: 2px; font-size: 44px;
	color: var(--quote-line); line-height: 1; font-family: Georgia, serif;
}
.gikai-report .quote p { margin: 0; font-size: var(--f-quote); line-height: 2.0; }


/* --- まとめ ★③ ------------------------------------------------- */

.gikai-report .sum {
	background: var(--sum-bg); border: 1px solid var(--sum-line); border-radius: 6px;
	padding: 20px 24px; margin: 32px 0;
}
.gikai-report .sum .ttl { text-align: center; font-size: var(--f-sum-ttl); font-weight: 700; margin: 0 0 15px; }
.gikai-report .sum ul { margin: 0; padding-left: 21px; }
.gikai-report .sum li { font-size: var(--f-sum); margin: 10px 0; line-height: 1.9; }
.gikai-report .sum .req {
	margin: 17px 0 0; padding-top: 15px; border-top: 1px solid var(--sum-line);
	font-size: var(--f-sum); font-weight: 700; line-height: 1.9;
}


/* --- 強調 ★④ ---------------------------------------------------
 * 下線・太字・背景色のいずれで見せるかをご確認いただく。
 * どこを強調するかは第10項で確定済み（原文の一部を指定し、実在を検証する）。
 * ---------------------------------------------------------------- */

.gikai-report .mk { font-style: normal; font-weight: 600; }

/* 既定：下線＋薄い背景 */
.gikai-report .mk,
.mk-emph-marker .gikai-report .mk {
	border-bottom: 2px solid var(--q-line);
	background: linear-gradient(transparent 58%, rgba(232, 129, 31, .22) 58%);
}
/* 下線のみ */
.mk-emph-underline .gikai-report .mk {
	border-bottom: 2px solid var(--q-line);
	background: none;
}
/* 太字のみ */
.mk-emph-bold .gikai-report .mk {
	border-bottom: none; background: none;
	font-weight: 700; color: var(--q-ink);
}
/* 背景色のみ */
.mk-emph-bg .gikai-report .mk {
	border-bottom: none;
	background: rgba(232, 129, 31, .22);
	padding: 1px 3px; border-radius: 2px;
}


/* --- 要確認 ------------------------------------------------------ */

.gikai-report .review {
	background: #FFF4F4; border: 1px solid #E0A0A0; border-radius: 6px;
	padding: 12px 16px; margin: 20px 0; font-size: 13px; color: #9A3B3B;
}


/* --- 出典 -------------------------------------------------------- */

.gikai-report .src { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.gikai-report .src h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 10px; }
.gikai-report .src .meta { font-size: 12.5px; font-weight: 700; margin: 0 0 8px; }
.gikai-report .src a { color: var(--a-ink); }
.gikai-report table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gikai-report th {
	text-align: left; padding: 8px; background: var(--line-soft); border: 1px solid var(--line);
	font-weight: 700; font-size: 11.5px; color: var(--ink-mid); white-space: nowrap;
}
.gikai-report td { padding: 9px 8px; border: 1px solid var(--line); vertical-align: top; line-height: 1.75; }
.gikai-report td.c { white-space: nowrap; }
.gikai-report .src .note { font-size: 11.5px; color: var(--ink-soft); margin: 9px 0 0; line-height: 1.8; }

/* 出典の表は行数が多い。既定では折りたたむ */
.gikai-report .src details > summary,
.gikai-report details.src-fold > summary {
	cursor: pointer; list-style: none;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 700; color: var(--ink-mid);
	padding: 7px 14px; border: 1px solid var(--line); border-radius: 4px;
	background: var(--line-soft); user-select: none;
}
.gikai-report .src details > summary::-webkit-details-marker,
.gikai-report details.src-fold > summary::-webkit-details-marker { display: none; }
.gikai-report .src details > summary::before,
.gikai-report details.src-fold > summary::before { content: none; }
.gikai-report .src details > summary::after,
.gikai-report details.src-fold > summary::after { content: "＋"; font-size: 12px; }
.gikai-report .src details.is-expanded > summary::after,
.gikai-report details.src-fold.is-expanded > summary::after { content: "－"; }
.gikai-report .src details.is-expanded > summary,
.gikai-report details.src-fold.is-expanded > summary { margin-bottom: 12px; }
.gikai-report .src details > summary:hover,
.gikai-report details.src-fold > summary:hover { background: #fff; }


/* --- 画面が狭いとき ---------------------------------------------- */

@media (max-width: 600px) {
	/* 小見出しは本文より大きく、大見出しより小さく。
	   携帯側に --f-bg-h を書き忘れると、19px のまま残って
	   大見出し（18px）を上回り、大小が逆転する。 */
	.gikai-report {
		--f-body: 15px; --f-h2: 18px; --f-bg-h: 16.5px;
		--f-num-val: 23px; --f-viz-cap: 15px;
	}
	.gikai-report .cols { grid-template-columns: 1fr; }
	.gikai-report th, .gikai-report td { padding: 6px 5px; font-size: 11px; }
	.gikai-report .q, .gikai-report .a { padding: 14px 15px; }
	.gikai-report .quote { padding: 22px 20px 22px 26px; }
	.gikai-report .sum { padding: 17px 16px; }
}


/* ==================================================================
   手書きのブログ記事
   ------------------------------------------------------------------
   8月15日のご要望
     「議会報告と同じフォーマット（体裁）で投稿できると良いです
        アイキャッチ画像 → ブログタイトル → イントロダクション文章
        → 見出し１ → 文章 → 見出し２ → 文章」

   議会報告の本文は、組み立て側が .talk などの目印を付けて出力する。
   一方、編集画面で書いた記事は素の <p> と <h2> でしかない。
   そこで、目印の無い段落・見出し・画像にも同じ体裁が当たるようにする。
   ================================================================== */

/* イントロダクション（抜粋欄に書いた文） */
.article-lead {
	font-size: 16.5px;
	line-height: 1.95;
	color: var(--ink, #24313D);
	background: var(--q-bg, #FDF4E8);
	border-left: 4px solid var(--q-line, #E8912D);
	border-radius: 0 8px 8px 0;
	padding: 18px 20px;
	margin: 0 0 30px;
}

/* 本文の段落。議会報告の .talk p と同じ見え方にする */
.post-body > p {
	font-size: var(--f-body, 17px);
	line-height: 1.95;
	margin: 0 0 var(--gap-line, 1.15em);
	color: var(--ink, #24313D);
}

/* 見出し。議会報告の h2 は組み立て側が出すが、
   編集画面で入れた h2・h3 にも同じ体裁を当てる */
.post-body > h3 {
	font-size: 17.5px;
	font-weight: 700;
	margin: 34px 0 14px;
	padding-left: 11px;
	border-left: 4px solid var(--a-line, #4FA377);
	color: var(--ink, #24313D);
	line-height: 1.6;
}
.post-body > h4 {
	font-size: 16px;
	font-weight: 700;
	margin: 26px 0 10px;
	color: var(--q-ink, #A85A00);
}

/* 記事の中に置いた画像 */
.post-body figure,
.post-body .wp-block-image {
	margin: 26px 0;
}
.post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}
.post-body figcaption {
	font-size: 13.5px;
	color: var(--muted, #6B7A88);
	margin-top: 8px;
	text-align: center;
}

/* 箇条書き */
.post-body > ul,
.post-body > ol {
	font-size: var(--f-body, 17px);
	line-height: 1.9;
	margin: 0 0 22px;
	padding-left: 1.6em;
}
.post-body > ul > li,
.post-body > ol > li {
	margin-bottom: 8px;
}

/* 引用。議会報告の締めの引用と同じ形 */
.post-body > blockquote {
	margin: 26px 0;
	padding: 22px 24px 22px 30px;
	background: var(--paper-2, #F5F8FA);
	border-left: 4px solid var(--quote-line, #C9D6E0);
	border-radius: 0 8px 8px 0;
	font-size: 16px;
	line-height: 1.95;
}

/* 区切り線 */
.post-body > hr {
	border: 0;
	border-top: 1px solid var(--line, #DCE5EC);
	margin: 38px 0;
}

@media (max-width: 600px) {
	.article-lead { font-size: 15.5px; padding: 15px 16px; }
	.post-body > h3 { font-size: 16.5px; }
}

/* --- 答弁の塊（一般質問） ---------------------------------------
 * 8月26日 ももかわ様
 *   「①背景、質問 ②背景、質問 ③背景、質問
 *     → 答弁①、答弁②、答弁③ の並びにした方が良いかもしれません」
 *
 * 一般質問は区が所管部署ごとにまとめて答弁するため、
 * 質問1つ1つに答弁を割り当てず、記事の最後にまとめて並べる。
 * 質問の列と答弁の列の境目がはっきり分かるようにする。
 * ------------------------------------------------------------- */
.gikai-report .ans-block {
	margin: 34px 0 8px;
	padding: 22px 20px 6px;
	background: var(--a-bg, #f4f7fa);
	border-top: 3px solid var(--accent, #f08000);
}

.gikai-report .ans-block-ttl {
	margin: 0 0 4px;
	font-size: var(--f-h2);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ink);
	border: 0;
	padding: 0;
}

/* 塊の中の答弁は、下の枠線で区切るだけにして軽くする */
.gikai-report .ans-block .a {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line, #dfe4ea);
	border-radius: 0;
	margin: 0;
	padding: 14px 0;
}

.gikai-report .ans-block .a:last-child { border-bottom: 0; }

/* 部署名と、答弁の中の見出し */
.gikai-report .ans-block .a .ttl { margin: 0; }

.gikai-report .ans-block .pt { margin: 12px 0 18px; }

@media (max-width: 600px) {
	.gikai-report .ans-block { padding: 16px 14px 4px; margin-top: 26px; }
}

/* --- 記事のアイキャッチ。中段だけを透過の帯にする -------------------
 * 8月27日 ももかわ様
 *   「議会報告の個別ページのアイキャッチ画像は一覧で表示されるものと
 *     同じ中段を透過にしたもので統一した方が見やすい（暗く見えるため）」
 *
 * これまでは写真の全面に暗い膜をかけていたため、写真そのものが沈んでいた。
 * 一覧のカードは帯の部分だけが暗く、写真は素のまま見える。
 * 記事ページも同じ形にする。
 * ------------------------------------------------------------------ */
.article-hero-panel {
	inset: auto 0 auto 0;            /* 上下いっぱいに広げない */
	top: 50%;
	transform: translateY(-50%);
	padding: 1.4rem 1.5rem;
	background: rgba(12, 16, 22, 0.54);   /* 一覧と同じ透過帯。元の0.72より少し明るく */
	gap: 0.55rem;
}

@media (max-width: 600px) {
	.article-hero-panel {
		padding: 1rem 1rem;
		gap: 0.4rem;
	}
}

/* --- 比較カードの数値を大きくする -----------------------------------
 * 8月27日 ももかわ様「比較カードの数値が小さい」
 *
 * 見出しが16px、その下の数値も16.5pxで、ほぼ同じ大きさだった。
 * 比べていただくための部品なので、数値が目に入る必要がある。
 * 数値カードほど大きくはせず、見出しとの差がつく程度にする。
 * ------------------------------------------------------------------ */
/* 見出しの直後の1行が比べる数値。ここだけ大きくする。
 * .col p だと見出し（p.h）にも当たり、
 * .col p ~ p だと数値そのものに当たってしまうので、
 * 見出しの隣という指定にする。 */
.gikai-report .col .h + p {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
	margin: 6px 0 3px;
}

@media (max-width: 600px) {
	.gikai-report .col .h + p { font-size: 21px; }
}

/* 数字と単位の組。ここで折り返さない（8月27日）
 * 「55,000」と「人」が別の行に分かれていた。 */
.gikai-report .num .v .nv {
	white-space: nowrap;
	display: inline-block;
}

/* 数値の出どころ（8月27日）
 * 背景や質問の数値も数値カードにするようにしたため、
 * 区が答えた数字と議員が挙げた数字が同じ見た目で並ぶ。
 * 取り違えないよう、項目名の横に小さく添える。 */
.gikai-report .num .k .src-tag {
	display: inline-block;
	margin-left: .4em;
	padding: .05em .45em;
	font-size: .8em;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 3px;
	vertical-align: 1px;
}
.gikai-report .num .k .src-a { background: var(--a-bg); color: var(--a-ink); }
.gikai-report .num .k .src-q { background: var(--q-bg); color: var(--q-ink); }


/* ==================================================================
   キーワードのタグ
   ------------------------------------------------------------------
   8月30日 ももかわ様
     「横断タグ　キーワードのタグを別に表示頂いた方が
       閲覧者が興味のある記事に辿り着きやすいと思いますのでお願い致します」

   分野は記事の住所（1記事に1つ）、タグは関心事（1記事に複数）。
   役割が違うので、分野のボタンとは見た目を変える。
   分野は写真つきの大きなボタン、タグは文字の小さな札にする。
   ================================================================== */

.mk-tags {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	margin: 26px 0 0;
}
.mk-tags-label {
	font-size: 12px; font-weight: 700; color: #8A8A85;
	letter-spacing: .06em; margin-right: 2px;
}
.mk-tag {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 5px 12px 5px 9px;
	border: 1px solid #E0DCD3; border-radius: 999px;
	background: #FBFAF7; color: #4A4A45;
	font-size: 12.5px; line-height: 1.4; text-decoration: none;
	transition: background .18s, border-color .18s, color .18s;
}
.mk-tag-mark { color: #C9A227; font-weight: 700; }
.mk-tag-count {
	margin-left: 4px; font-size: 11px; color: #9A9A93;
}
.mk-tag:hover, .mk-tag:focus-visible {
	background: #FDF6EE; border-color: var(--orange-line, #E8912D);
	color: #B35F00;
}
.mk-tag.is-active {
	background: #B35F00; border-color: #B35F00; color: #fff;
}
.mk-tag.is-active .mk-tag-mark,
.mk-tag.is-active .mk-tag-count { color: #FBE5C8; }

/* 一覧ページ。検索の窓のすぐ下に、札だけを並べる。
   8月31日 ももかわ様
     「検索窓の下に配置しますが、キーワードのみを配置し、
       キーワードと同じヘッダー文字などは配置しないでください」
   見出しを付けず、検索の続きとして読める間隔にする。 */
.mk-tags--bar {
	margin: 12px auto 0; gap: 8px;
	justify-content: center; max-width: 720px;
}
.mk-tags--bar .mk-tag { padding: 5px 12px 5px 9px; font-size: 12.5px; }

@media (max-width: 600px) {
	.mk-tag { font-size: 12px; padding: 5px 10px 5px 8px; }
}

/* ------------------------------------------------------------------
   記事の右欄の、書き手のご紹介
   8月30日 ももかわ様
     「記事の最下段か右側のメニューの下に写真と簡易紹介、
       プロフィールリンクを入れる」
   ------------------------------------------------------------------ */

.side-block.side-profile {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: linear-gradient(165deg, #ffffff 0%, #fdf8f2 100%);
  box-shadow: 0 10px 24px rgba(180, 90, 0, 0.06);
}

.side-block.side-profile h3 {
  margin: 0;
  padding: 0.95rem 1.1rem 0.75rem;
  border-bottom: none;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
}

.side-profile-card {
  padding: 0 1.1rem 1.1rem;
}

.side-profile-head {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.85rem;
  align-items: center;
}

.side-profile-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex: 0 0 auto;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 1px rgba(240, 128, 0, 0.22),
    0 8px 18px rgba(180, 90, 0, 0.16);
}

.side-profile-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.side-profile-role {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-mid);
}

.side-profile-role span {
  display: inline-flex;
  align-items: center;
}

.side-profile-role span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.side-profile-note {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--ink-mid);
}

.side-profile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.58rem 0.9rem;
  border-radius: 8px;
  background: var(--btn-fill);
  border: var(--btn-edge);
  box-shadow: var(--btn-glow);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.side-profile-cta::after {
  content: "→";
  font-size: 0.9rem;
  line-height: 1;
}

.side-profile-cta:hover {
  background: var(--btn-fill-hover);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 900px) {
  .side-profile-head {
    grid-template-columns: 76px 1fr;
    gap: 0.75rem;
  }

  .side-profile-photo {
    width: 76px;
    height: 76px;
  }
}

/* ------------------------------------------------------------------
   本番のお問い合わせフォーム（Contact Form 7）

   確認用サイトのフォームは押しても送られない見せかけで、
   お名前とメールアドレスを .row-2 で横に並べていた。
   本番は Contact Form 7 が実際に送るが、入力欄を一つずつ
   <p><label>…</label></p> の形で出すため、横並びにならない。

   そこで、フォームそのものを二列の格子にして、
   はじめの二つだけ横に並べ、残りは全幅にする。
   確認用サイトと同じ見え方になる。
   ------------------------------------------------------------------ */
.wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.wpcf7-form > p {
  grid-column: 1 / -1;
  margin: 0 0 18px;
}

.wpcf7-form > p:nth-of-type(1) { grid-column: 1 / 2; }
.wpcf7-form > p:nth-of-type(2) { grid-column: 2 / -1; }

.wpcf7-form .hidden-fields-container { grid-column: 1 / -1; }

.wpcf7-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
}

.wpcf7-form .req {
  margin-left: 6px;
  color: #c0392b;
  font-size: 12px;
  font-weight: 700;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #d8d8d2;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
}

.wpcf7-form textarea { min-height: 220px; resize: vertical; }

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--c-accent, #e8801a);
  box-shadow: 0 0 0 3px rgba(232, 128, 26, .16);
}

.wpcf7-form .wpcf7-quiz-label { display: block; margin-top: 6px; font-weight: 400; }

.wpcf7-form .wpcf7-submit { min-width: 190px; cursor: pointer; }

.wpcf7-form .wpcf7-not-valid-tip { margin-top: 6px; color: #c0392b; font-size: 13px; }

.wpcf7-form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 1px solid #d8d8d2;
  border-radius: 10px;
  font-size: 14px;
}

@media (max-width: 720px) {
  .wpcf7-form { grid-template-columns: 1fr; }
  .wpcf7-form > p:nth-of-type(1),
  .wpcf7-form > p:nth-of-type(2) { grid-column: 1 / -1; }
}

/* === テーマだけに要る規則（sync_theme_css.py が残した） === */
.brand-mark {
  flex-shrink: 0;
  width: 2.55rem;
  height: 2.55rem;
  color: var(--accent-deep);
  background-color: currentColor;
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
  mask: url("../img/logo-mark.svg") center / contain no-repeat;
}