/* ─────────────────────────────────
   HERO
───────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 680px;
  padding-left: 40px;
}

.hero-image {
  position: absolute;
  /* .hero-left（右端 470px）に 24px だけ重ねる。これ以上重ねると 1 枚目の画像内タイトル（左から約 5%）に H1 のすりガラスが掛かる */
  left: 446px;
  right: 0;
  top: 0;
  bottom: auto;
  height: auto;
  overflow: visible;
  --c-slide-w: min(960px, calc(100% - 80px));
  --c-gap: 20px;
}

.hero-left {
  position: relative;
  z-index: 2;
  width: 430px;
  padding-top: 40px;
  padding-bottom: 48px;
}

.hero-since {
  margin: 0 0 6px;
  font-weight: 700; font-size: clamp(12px, 1vw, 14px); color: #0093a5;
  line-height: 1.5;
}
.hero-subtitle {
  font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); color: #333;
  line-height: 1.5; margin-bottom: 10px;
  /* すりガラス */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  /* h1 の白帯と右端を揃える（inline-block だと文字幅で止まりズレる） */
  display: block;
  padding: 4px 10px 4px 0px;
  border-radius: 0 5px 5px 0;
}

.hero-h1 {
  font-weight: 900; font-size: clamp(30px, 4vw, 41px);
  line-height: 1.4; color: #2c3e50;
  margin-bottom: 22px;
  /* すりガラス */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  padding: 8px 0 12px 0;
  border-radius: 0 10px 10px 0;
}
/* 「プラットフォーム」とロゴを同じ行に保つ。ロゴ幅は .hero-left の幅に 1 行で収まる大きさ */
/* reset.css が span を font-weight: normal にするので h1 の太さを引き継ぐ */
.hero-h1-line { white-space: nowrap; font-weight: inherit; letter-spacing: -0.06em; }
.hero-h1-river {
  display: inline-block; vertical-align: middle;
  width: 94px; height: 25px; margin-left: 6px;
}

.hero-bullets { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.hero-bullet  { display: flex; align-items: center; gap: 10px; }
.bullet-icon  { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; }
.bullet-text  { font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); color: #333; line-height: 1.5; }
.bullet-text .teal { color: #0093a5; font-weight:bold;}

/* 一枚絵のバナーボタン。webp だけを見せるので背景・枠は持たせない。
   高さは指定せず画像のアスペクト比(672:216)に従わせる。 */
.btn-sim {
  display: block;
  width: 300px;
  max-width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  /* webp は透過付きなので drop-shadow が角丸の形に沿う。
     hover で影を消しつつ影の分だけ下げると、押し込まれたように見える。 */
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.22));
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
.btn-sim:hover {
  transform: translateY(4px);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.22));
  opacity: 0.9;
}
/* img に width/height 属性を持たせない代わりに、比率と読み込み前の高さを CSS で確保する */
.btn-sim img { width: 100%; height: auto; aspect-ratio: 672 / 216; display: block; }

/* ─────────────────────────────────
   CAROUSEL
───────────────────────────────── */
.carousel      { position: relative; width: 100%; height: min(600px, calc((100% - 80px) * 5 / 8)); overflow: hidden; }
/* 横スクロール + scroll-snap。スワイプはブラウザ標準のスクロールに任せ、JS は自動送り・次へ・ドットだけ。
   --c-slide-w は % 指定なので、枠に padding を付けると基準幅が縮む。左右の余白は padding ではなく
   先頭カードの margin-left（--c-offset: スマホで中央寄せして隣を覗かせる）と末尾の ::after
   （最後のカードも先頭位置までスクロールできるようにする余白）で取る。 */
.c-slides {
  display: flex; height: 100%; align-items: flex-start;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--c-offset, 0px);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  user-select: none; -webkit-user-select: none;
}
.c-slides::-webkit-scrollbar { display: none; }
.c-slides > .c-slide:first-child { margin-left: var(--c-offset, 0px); }
.c-slides::after {
  content: "";
  flex: 0 0 max(0px, calc(100% - var(--c-slide-w) - var(--c-gap) - var(--c-offset, 0px)));
  height: 1px;
}
/* 箱は全スライド 3:2 で統一（画像だけのスライドも、テキストを持つ 1 枚目も同じ大きさ） */
.c-slide       { position: relative; flex: 0 0 var(--c-slide-w); aspect-ratio: 3 / 2; height: auto; margin-right: var(--c-gap); display: block; text-decoration: none; cursor: pointer; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 46px rgba(15, 49, 87, 0.18), 0 4px 16px rgba(15, 49, 87, 0.12); scroll-snap-align: start; }
/* 1 枚目（固定）: タイトル入り画像（スライドと同じ 3:2）を全面に敷き、タイトルの下にテキストとボタンを重ねる。
   LCP 要素として早く見つけて優先取得させるため CSS background ではなく <img> にしている。
   位置は画像内のタイトル左端・グラフ左端に合わせた % 指定、文字サイズはカード幅（cqi）に合わせて伸縮 */
.c-slide--lead { container-type: inline-size; }
.c-slide.c-slide--lead img { object-fit: cover; background: transparent; }
.c-slide-lead__text {
  position: absolute;
  left: 4%;
  top: 57%;
  width: 44%;
  color: #0b2d7a;
}
.c-slide-lead__copy {
  padding: clamp(6px, 1.2cqi, 12px) clamp(8px, 1.5cqi, 14px);
  /* すりガラス */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 10px;
}
.c-slide-lead__title {
  margin: 0;
  font-size: clamp(11px, 1.6cqi, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: inherit;
}
.c-slide-lead__body {
  margin: 0.5em 0 0;
  font-size: clamp(10px, 1.4cqi, 14px);
  font-weight: 500;
  line-height: 1.7;
  color: #1f2d3d;
}
.c-slide-lead__btn {
  display: inline-flex; align-items: center; gap: 1em;
  margin-top: 1em;
  padding: 0.7em 0.9em 0.7em 1.6em;
  font-size: clamp(11px, 1.9cqi, 18px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(90deg, #4fd3c4 0%, #3f8fc4 45%, #2a56c0 100%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 70, 160, 0.28);
  transition: filter .2s;
  animation: c-slide-lead-btn-pulse 1.8s ease-in-out infinite;
}
.c-slide--lead:hover .c-slide-lead__btn { filter: brightness(1.08); }
@keyframes c-slide-lead-btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .c-slide-lead__btn { animation: none; }
}
.c-slide-lead__btn-arrow {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em;
  color: #2a56c0;
  background: #fff;
  border-radius: 50%;
}
.c-slide-lead__btn-arrow svg { width: 55%; height: 55%; }
/* カードが狭め（PC 幅の下限付近）だとボタンが下端からはみ出すので、本文を外す */
@container (max-width: 620px) {
  .c-slide-lead__body { display: none; }
}
/* カードが狭い（スマホなど）とテキストが収まらないので、ボタンだけにする。
   外した文章は .hero-left 側の .hero-lead-copy に出す（下の media query と幅を合わせる） */
@container (max-width: 500px) {
  .c-slide-lead__text { top: auto; bottom: 8%; }
  .c-slide-lead__copy { display: none; }
  .c-slide-lead__btn { margin-top: 0; }
}
/* 1 枚目のスライドに重ねられなかった文章の出し先（H1 の下）。カード幅 500px 以下になる画面幅でだけ表示:
   スマホ（縦積み・カード幅 = 100vw - 72px）は 572px 以下、タブレット（横並び・100vw - 388px）は 888px 以下、
   PC（100vw - 526px）は 1026px 以下 */
.hero-lead-copy { display: none; }
@media (max-width: 572px), (min-width: 769px) and (max-width: 888px), (min-width: 1025px) and (max-width: 1026px) {
  .hero-lead-copy { display: block; margin-bottom: 20px; }
}
/* 横並びのときはカルーセルが .hero-left の右端に被るので、その分だけ文章を内側に収める */
@media (min-width: 769px) {
  .hero-lead-copy { padding-right: 28px; }
}
.hero-lead-copy__title {
  margin: 0;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: #0b2d7a;
}
.hero-lead-copy__body {
  margin: 0.5em 0 0;
  font-size: clamp(13px, 3.5vw, 14px);
  font-weight: 500;
  line-height: 1.7;
  color: #1f2d3d;
}
.c-slide::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42); pointer-events: none; }
.c-slide img   { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: #fff; }
.c-slide .slide-credit-icon { position: absolute; z-index: 3; bottom: 16px; left: 16px; width: clamp(52px, 6vw, 80px); height: auto; object-fit: contain; background: transparent; pointer-events: none; }
.slide-category-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 55, 88, 0.88);
  color: #fff;
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
.c-next        {
  position: absolute;
  right: 112px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #0093a5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: background .2s;
}
.c-next:hover { background: #f0fafb; }
.c-next svg   { width: 18px; height: 18px; }

.slide-overlay {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  max-width: max-content;
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: #fff;
  border: 2px solid #0093a5;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .2s;
}
.c-slide:hover .slide-overlay { background: #f0fafb; }
.ovl-arrow { flex-shrink: 0; display: flex; align-items: center; }
.ovl-loc  { font-weight: 700; font-size: clamp(12px, 1.15vw, 14px); color: #4f4f4f; line-height: 1.35; flex-shrink: 0; white-space: nowrap; }
.ovl-desc { font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); color: #333; text-decoration: underline; text-decoration-skip-ink: none; }

@media (max-width: 768px) {
  .c-next { right: 20px; }

  .slide-overlay {
    gap: 8px;
    padding: 10px 14px;
    white-space: normal;
  }
  .ovl-loc  { font-size: clamp(11px, 0.9vw, 12px); }
  .ovl-desc { font-size: clamp(12px, 1.15vw, 14px); }
}

@media (max-width: 480px) {
  .c-slide .slide-credit-icon { bottom: 10px; left: 10px; width: 52px; }

  .slide-category-badge {
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .slide-overlay {
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
  }
  .ovl-loc  { font-size: clamp(10px, 0.9vw, 11px); }
  .ovl-desc { font-size: clamp(12px, 0.9vw, 13px); }
}

/* ─────────────────────────────────
   CAROUSEL DOTS
───────────────────────────────── */
.hero-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; height: 42px;
  padding-left: 0;
  width: var(--c-slide-w);
}
.c-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: none; padding: 0; background: #ccc; cursor: pointer;
  transition: background .3s;
}
.c-dot.active { background: #0093a5; }

/* ─────────────────────────────────
   HERO STORY
───────────────────────────────── */
/* firstview → hero-story の区切り: 凹カーブ + 流線2本でアクア帯へ繋ぐ。
   自身の高さ分だけ firstview 側へ食い込ませる(透過・クリック非阻害) */
.hero-story-divider {
  position: relative;
  margin-top: calc(-1 * clamp(36px, 5.5vw, 80px));
  pointer-events: none;
}
.hero-story-divider svg {
  display: block;
  width: 100%;
  height: clamp(36px, 5.5vw, 80px);
}
.hero-story-divider__fill {
  fill: #f3fbfd;
}
.hero-story-divider__stream {
  fill: none;
  stroke-linecap: round;
}
.hero-story-divider__stream--1 {
  stroke: #59c1c7;
  stroke-width: 2;
  opacity: 0.5;
}
.hero-story-divider__stream--2 {
  stroke: #0093a5;
  stroke-width: 1.5;
  opacity: 0.25;
}
.hero-story {
  margin: 0 0 clamp(40px, 6vw, 88px);
  padding: clamp(24px, 3vw, 44px) 100px;
  background:
    radial-gradient(circle at 8% 30%, rgba(170, 220, 240, 0.35), transparent 35%),
    radial-gradient(circle at 92% 70%, rgba(180, 225, 240, 0.32), transparent 40%),
    linear-gradient(180deg, #f3fbfd 0%, #e8f5fa 50%, #f3fbfd 100%);
}
.hero-story__head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.hero-story__head-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
}
.hero-story__head-line {
  width: clamp(48px, 8vw, 110px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #8fc6d8);
}
.hero-story__head-line--r {
  background: linear-gradient(90deg, #8fc6d8, transparent);
}
.hero-story__head-title {
  margin: 0;
  color: #0f3b66;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.hero-story__head-lead {
  margin: 12px 0 0;
  color: #4a5568;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 500;
  line-height: 1.8;
}
.hero-story__panel {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 36px);
  border-radius: 24px;
  padding: clamp(20px, 2.4vw, 36px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(232, 247, 251, 0.66) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 2px 4px rgba(15, 32, 60, 0.05),
    0 18px 36px rgba(15, 76, 129, 0.14),
    0 48px 96px rgba(15, 76, 129, 0.24);
}
.hero-story__thumbs {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  flex: 0 0 min(360px, 31vw);
  width: min(360px, 31vw);
  border-top: 1px solid rgba(15, 59, 102, 0.14);
}
.hero-story__thumb {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15, 59, 102, 0.14);
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.24s ease, color 0.24s ease;
}
.hero-story__thumb::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 2px;
  background: #0093a5;
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.hero-story__thumb:hover,
.hero-story__thumb:focus-visible,
.hero-story__thumb.is-active {
  background: rgba(220, 244, 248, 0.72);
}
.hero-story__thumb.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}
.hero-story__thumb:focus-visible {
  outline: 2px solid #0093a5;
  outline-offset: -2px;
}
.hero-story__thumb-media {
  display: none;
}
.hero-story__thumb-number {
  align-self: start;
  padding-top: 3px;
  color: #68a9b7;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.hero-story__thumb-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.hero-story__thumb-title {
  color: #0f3b66;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 800;
  line-height: 1.4;
  white-space: normal;
}
.hero-story__thumb-text {
  color: #4a6473;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.24s ease;
}
.hero-story__thumb.is-active .hero-story__thumb-text {
  opacity: 1;
}
.hero-story__thumb-arrow,
.hero-story__copy-arrow {
  width: 9px;
  height: 9px;
  border-top: 2px solid #0093a5;
  border-right: 2px solid #0093a5;
  transform: rotate(45deg);
}
.hero-story__media {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(15, 76, 129, 0.16);
}
.hero-story__visual {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #dceef3;
}
.hero-story__visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: rgba(3, 26, 48, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-story__media:hover .hero-story__visual::after,
.hero-story__media:focus-visible .hero-story__visual::after {
  opacity: 1;
}
.hero-story__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: scale(1.02);
  transform-origin: 50% 35%;
  transition: opacity 0.9s ease;
}
.hero-story__image:nth-child(2n) {
  transform-origin: 68% 60%;
}
.hero-story__image:nth-child(3n) {
  transform-origin: 32% 58%;
}
/* is-active → is-leaving でアニメーション指定を変えないことで、
   退場中もケンバーンズが途切れず継続する（逆戻りのガタツキ防止） */
.hero-story__image.is-active,
.hero-story__image.is-leaving {
  /* 5s = オート切替4s + クロスフェード分。表示中ずっとズームし続ける */
  animation: hero-story-kenburns 5s linear forwards;
}
.hero-story__image.is-active {
  opacity: 1;
}
@keyframes hero-story-kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-story__image.is-active,
  .hero-story__image.is-leaving {
    animation: none;
  }
  .hero-story__image.is-active {
    transform: scale(1);
  }
}
.hero-story__copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding:
    clamp(80px, 8vw, 120px)
    clamp(20px, 2.2vw, 30px)
    clamp(20px, 2.2vw, 30px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.88) 48%,
    rgba(255, 255, 255, 0.97) 100%
  );
}
.hero-story__copy-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.hero-story__label {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 3px solid #0093a5;
  color: #0093a5;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}
.hero-story__title {
  color: #0f3b66;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}
.hero-story__description {
  max-width: 620px;
  margin-top: 8px;
  color: #526b79;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.7;
}
.hero-story__copy-arrow {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  border-color: #0093a5;
}
@media (max-width: 768px) {
  .hero-story {
    padding: 20px 12px 24px;
  }
  .hero-story__panel {
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
  }
  .hero-story__media {
    min-height: 0;
    order: 1;
  }
  .hero-story__copy {
    padding:
      clamp(48px, 14vw, 72px)
      clamp(16px, 5vw, 24px)
      clamp(16px, 5vw, 24px);
  }
  .hero-story__visual {
    position: absolute;
  }
  .hero-story__title {
    font-size: clamp(18px, 5.2vw, 24px);
  }
  .hero-story__description {
    font-size: 12px;
    line-height: 1.7;
  }
  .hero-story__thumbs {
    display: grid;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    order: 2;
    flex: none;
    width: 100%;
    border-top: 0;
  }
  .hero-story__thumb {
    grid-template-columns: 92px 30px minmax(0, 1fr) 18px;
    min-height: 82px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(15, 59, 102, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
  }
  .hero-story__thumb-media {
    display: block;
    height: 64px;
    overflow: hidden;
    border-radius: 7px;
  }
  .hero-story__thumb-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-story__thumb-number {
    align-self: center;
    padding-top: 0;
  }
  .hero-story__thumb-text {
    display: none;
  }
  .hero-story__thumb::before {
    display: none;
  }
}
.disaster-wrap { padding: 30px 40px 50px; max-width: 1400px; margin: 0 auto; }
.hero-image .disaster-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--c-gap) 28px 0;
}
/* 災害支援バナーがある時だけの調整。
   hero-image は絶対配置なのでバナー分だけセクション下端をはみ出し、
   さらに hero-story-divider の負マージン(食い込み)がバナーを覆い隠す。
   バナー分の高さを確保し、食い込みを止める。 */
@media (min-width: 769px) {
  .hero-section:has(.disaster-wrap) { padding-bottom: 40px; }
}
/* 左カラム（.hero-left）がカルーセル + バナーより低いと、バナーが下の hero-story-divider に隠れる。
   カルーセルの高さ（幅 min(960px, 100vw - 446px - 80px) の 3:2）+ ドット 62px + バナー本体約 90px + 余白 を
   セクションの最低高さとして確保する（区切りの波線は svg の中ほどにあるので余白は詰めてよい）。
   .hero-image の left / --c-slide-w を変えたらここも合わせる */
@media (min-width: 1025px) {
  .hero-section:has(.disaster-wrap) { min-height: calc(min(640px, (100vw - 526px) * 2 / 3) + 165px); }
}
.hero-section:has(.disaster-wrap) + .hero-story-divider { margin-top: 0; }
.disaster-support {
  width: 100%;
  overflow: hidden;
  border: 2px solid var(--colorAccent);
  display: flex;
  background-color: #fff;
}
.disaster-support__title {
  background-color: var(--colorAccent);
  color: #fff;
  padding: 1% 3%;
  font-weight: bold;
  font-size: clamp(14px, 1.5vw, 16px);
  min-width: 7em;
  text-align: center;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  text-decoration: none;
}
.disaster-support__title__sub {
  display: none;
}
.disaster-support__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
}
.disaster-support__text {
  padding: 0 20px;
  font-size: clamp(14px, 1.5vw, 16px);
  flex-grow: 1;
  text-decoration: underline;
  white-space: normal;
  font-weight: bold;
  color: #333;
}
.disaster-support__text:hover { text-decoration: none; }
.disaster-support__status {
  background-color: var(--colorAccent);
  color: #fff;
  padding: 6px 30px;
  font-weight: bold;
  font-size: clamp(12px, 1.15vw, 14px);
  text-align: center;
  border-radius: 4px;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
@media (max-width: 1000px) {
  .disaster-support__title { min-width: inherit; flex-direction: column; }
}
@media (max-width: 768px) {
  .disaster-support__content { flex-direction: row; align-items: center; }
  .disaster-support__text { padding: 10px; }
  .disaster-support__status { margin: 0 10px; padding: 10px; font-size: clamp(11px, 0.9vw, 12px); }
}
@media (max-width: 600px) {
  .disaster-support__title__sub { display: block; width: 3em; margin: 3px auto; font-size: clamp(11px, 0.9vw, 12px); color: #fff; font-weight: bold; }
  .disaster-support__status { display: none; }
}

/* ═══ タブレット ≤1024px ═══ */
@media (max-width: 1024px) {

  .hero-section { padding-left: 24px; }
  .hero-image   {
    left: 338px;
    height: auto;
    --c-slide-w: calc(100% - 50px);
    --c-gap: 12px;
  }
  .carousel     { height: min(450px, calc((100% - 50px) * 5 / 8)); }
  .hero-left    { width: 330px; }
  .hero-h1-river { width: 90px; height: 24px; }
  .hero-dots    { padding-left: 0; }
  .hero-h1      { font-size: clamp(26px, 2.6vw, 32px); }
  .hero-subtitle { font-size: clamp(13px, 1.15vw, 15px); }
  .bullet-text  { font-size: clamp(13px, 1.15vw, 15px); }
  .btn-sim      { width: 260px; }
  .disaster-wrap { padding: 20px 24px 40px; }
}

/* ═══ スマホ ≤768px ═══ */
@media (max-width: 768px) {

  /* ── ヒーロー：縦積みに切り替え ── */
  .hero-section {
    position: static;
    min-height: auto;
    padding-left: 0;
    display: flex;
    flex-direction: column;  /* 画像(1st)→テキスト(2nd)。DOM は .hero-left が先なので order で入れ替える */
  }
  .hero-image {
    order: 1;
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100%;
    height: auto;
    /* カードを画面中央に置き、左右に隣のカードを 24px ずつ覗かせる。
       余白 (100% - slide-w) / 2 = 36px、うち gap 12px を除いた分が見える幅。 */
    --c-slide-w: calc(100% - 72px);
    --c-gap: 12px;
    --c-offset: 36px;
    border-radius: 0;
    overflow: visible;
  }
  .carousel { height: calc((100% - 72px) * 5 / 8); }
  .hero-left {
    order: 2;
    position: static;
    width: 100%;
    padding: 16px 16px 20px;
  }
  .hero-h1      { font-size: clamp(22px, 2.6vw, 28px); padding: 6px 0 10px; }
  .hero-h1-river { width: 90px; height: 24px; }
  .hero-subtitle { font-size: clamp(12px, 1.15vw, 14px); margin-bottom: 8px; }
  .bullet-text  { font-size: clamp(14px, 3.9vw, 16px); }
  .hero-bullets { gap: 10px; margin-bottom: 20px; }
  .btn-sim      { width: 100%; max-width: 260px; margin-left: auto; margin-right: auto; }

  /* カルーセルは中央寄せなので、ドットも画面幅基準で中央に揃える */
  .hero-dots { padding-left: 0; height: 44px; width: 100%; }

  /* ── ディザスターバナー ── */
  .disaster-wrap { padding: 16px 16px 28px; }
  /* ヒーロー内の災害支援バナーは左右余白 0 で画面端に貼り付くので、SP では左右を揃える */
  .hero-image .disaster-wrap { padding: 0 16px 8px; }
  /* 共通 style.css の margin:20px auto 30px が下に 30px 足して余白過多になる */
  .hero-image .disaster-support { margin: 0 auto; }
}

/* ═══ スマホ小 ≤480px ═══ */
@media (max-width: 480px) {
  .carousel    { height: calc((100% - 72px) * 5 / 8); }
  .hero-h1     { font-size: clamp(20px, 1.8vw, 24px); }
}

/* ↓ このブロックは tenant-home-rest.css（描画後に読み込む）ではなくここに置く。
   遅延側にあると、読み込み前は .jichitai-page__bg（absolute）の基準がビューポートになり、
   読み込み後に位置が飛んでレイアウトシフト（CLS）になる。 */
/* ═══════════════════════════════════════════════════════
   CPRIVER SECTION WAVES（個別セクションだけウェーブ背景を表示）
   - TargetAudienceSection（自治体の方へ／企業の方へ）
   - MunicipalitiesSection（企業版ふるさと納税対象自治体）
   両者の直下に <JichitaiSilkyWaves /> を置いて、そのセクション内のみで
   絶対配置の波 canvas を見せる。
═══════════════════════════════════════════════════════ */
.cpriver-section-waves {
  position: relative;
  isolation: isolate;
}
.cpriver-section-waves > .jichitai-page__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* canvas より上に来るよう relative 化（z-index は子要素が持っている既存値を尊重） */
.cpriver-section-waves > *:not(.jichitai-page__bg) {
  position: relative;
}
/* 既に z-index 指定のない service-section に最低限の z-index を付与（canvas:0 より前） */
.cpriver-section-waves > .service-section,
.cpriver-section-waves > .service-reveal {
  z-index: 1;
}
/* ScrollReveal でラップしても service-section が canvas より前に来るように */
.cpriver-section-waves .service-reveal {
  position: relative;
}
/* river-separator は本来 z-index: 10。 service-section が overlap した時に separator を上に */
.cpriver-section-waves > .river-separator {
  z-index: 10;
}

/* .municipalities-hero の本体は tenant-home-rest.css。波の基準位置だけ描画前に確定させる */
.municipalities-hero { position: relative; }
/* MunicipalitiesSection 内の波（既に .municipalities-hero が isolate + overflow:hidden） */
.municipalities-hero > .jichitai-page__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}