/* ==========================================================
   Deaf VR - Figma準拠スタイルシート
   PC / SP レスポンシブ（ブレークポイント: 768px）

   【構成】
   1. デザイン変数・リセット・共通
   2. ヘッダー / SPメニュー
   3. ヒーロー
   4. 体験について（about）
   5. 体験から実感へ（experience）+ 端スライド装飾
   6. 活用シーン（scenes）
   7. 体験者の声・活用事例（green-section / voices / challenge）
   8. 実績（results）+ クラッカー演出
   9. お問い合わせ（contact）+ people 波形
   10. フッター
   11. 送信完了モーダル
   12. スクロールアニメーション共通
   13. SPメディアクエリ（max-width: 768px）
   ========================================================== */

/* ----------------------------------------------------------
   デザイン変数（色・コンテンツ幅）
   ---------------------------------------------------------- */
:root {
  --purple: #614a99;
  /* メイン紫（体験セクション・お問い合わせなど） */
  --yellow: #fcbc3a;
  /* メイン黄（about・実績など） */
  --green: #9ecc3b;
  /* メイン緑（体験者の声・活用事例） */
  --orange: #ec6d56;
  /* メインオレンジ（活用シーン・アクセント） */
  --black: #000000;
  --white: #ffffff;
  --content-pc: 1100px;
  /* PCヘッダー・フッターの最大幅 */
  --content-inner: 900px;
  /* 本文ブロックの最大幅 */
}

/* 全要素の余白リセットと box-sizing 統一 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* アンカーリンクのスムーススクロール */
  font-size: 16px;
  /* rem 基準 */
  overflow-x: hidden;
  /* 横スクロール（装飾はみ出し）防止 */
}

body {
  font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: var(--black);
  line-height: 1.8;
  overflow-x: hidden;
  background: var(--white);
}

/* 画像のレスポンシブ基本 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* セクション共通見出し */
.section-heading {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--black);
}

.section-heading--dark {
  color: var(--black);
}

.section-heading--light {
  color: var(--white);
  /* 紫背景上など */
}

/* PCでは非表示。SPメディアクエリ内で表示に切り替える要素 */
.is-sp-only,
.about__heading-sp,
.about__body--sp,
.experience__text--sp,
.scenes__heading--sp,
.scenes__text--sp,
.footer__description--sp {
  display: none;
}

/* ==========================================================
   ヘッダー（固定ピル型ナビ）
   ========================================================== */
.header {
  position: fixed;
  /* スクロール追従 */
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: var(--content-pc);
  z-index: 100;
  /* ページ内容より前面 */
}

.header__accent {
  display: none;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 36px;
  background: var(--white);
  border-radius: 36px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.header__logo--sp {
  display: none;
}

.header__logo-img {
  height: 36px;
  width: auto;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 36px;
}

.header__nav-link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: var(--orange);
}

/*
 * SPメニュー開閉ボタン（open / close）
 * menu-close.svg（70×70・円 r=27、影なし）を基準に、同じ座標・同じ見かけサイズへ揃える。
 * open 画像だけ円位置を CSS で合わせる。
 */
.header__menu-btn,
.sp-menu__close {
  --sp-toggle-size: 70px;
  --sp-toggle-top: max(0px, env(safe-area-inset-top, 0px));
  --sp-toggle-right: max(0px, env(safe-area-inset-right, 0px));
  position: fixed;
  top: var(--sp-toggle-top);
  right: var(--sp-toggle-right);
  width: var(--sp-toggle-size);
  height: var(--sp-toggle-size);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: visible;
  z-index: 210;
}

.header__menu-btn {
  display: none;
  /* PC非表示。SPで表示 */
}

.sp-menu__close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * open の SVG は円が viewBox 全面のため、
 * close（cx=35,cy=31,r=27 in 70×70）と同じ位置・大きさになるよう配置する
 */
.header__menu-btn img {
  position: absolute;
  display: block;
  width: calc(54 / 70 * 100%);
  height: calc(54 / 70 * 100%);
  left: calc(8 / 70 * 100%);
  top: calc(4 / 70 * 100%);
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================
   SPメニュー（全画面オーバーレイ）
   表示倍率でも崩れないよう、絶対配置の重ねではなく flex 縦分割にする
   ========================================================== */
.sp-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  z-index: 200;
  /* ヘッダーより前面 */
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s, visibility 0.35s;
}

.sp-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* 開いたときのみ操作可能 */
}

/* メニュー開閉時にヘッダーを隠す */
body.is-menu-open .header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s;
}

/* ページ先頭ではヘッダー帯を残しつつ、open ボタンだけ隠す（close と二重表示しない） */
body.is-menu-open .header:not(.is-header-scrolled) {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 199;
}

body.is-menu-open .header__menu-btn {
  opacity: 0;
  visibility: hidden;
}

.sp-menu__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* セーフエリア＋ズーム時の上下余白 */
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: 0;
  background: transparent;
  overflow: hidden;
}

/*
 * SPメニュー背景（左波型パネル）
 * 固有サイズ(379×840)のままだと画面が高い／倍率変更時に下端が切れるため、
 * コンテナを画面高さいっぱいにし、画像を縦横とも引き伸ばす
 */
.sp-menu__wave {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20%;
  width: auto;
  height: auto;
  min-height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: drop-shadow(-6px 0 16px rgba(0, 0, 0, 0.18));
}

.sp-menu__wave-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: right center;
}

.sp-menu__close {
  /* 共通スタイルは .header__menu-btn, .sp-menu__close を参照 */
  display: block;
  flex: 0 0 auto;
  align-self: flex-end;
  /* fixed のためレイアウト上の余白は取らない（見た目の座標は共通変数） */
  margin: 0;
  /* パネル内 flex の影響を受けないようサイズは共通指定のまま */
}

/* ナビは中央帯を占有し、閉じる・フッターと絶対位置で重ならない */
.sp-menu__nav {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  /* 波の白い領域内に収めつつ、全体を右寄せ */
  padding-left: 34%;
  padding-right: clamp(6px, 2vw, 14px);
  z-index: 1;
}

.sp-menu__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-height: 100%;
  /* 項目間をさらに広めに（短尺時は下の media で詰める） */
  gap: clamp(22px, 5.5vh, 64px);
  margin: 20px 0 20px 12px;
}

.sp-menu__link {
  font-size: clamp(1.125rem, 2.8vh + 0.4rem, 1.5rem);
  font-weight: 700;
  color: var(--black);
  text-align: right;
  white-space: nowrap;
  line-height: 1.3;
  margin-right: 0;
}

/*
 * ロゴは波パネル下部の「白い領域」の水平中央へ。
 * 波画像(379px)下部では白がおおよそ x=36..378（中心≈54.5%）なので、
 * 波と同じ 20%〜右端の範囲から左透過分を除いて中央揃えする。
 */
.sp-menu__footer {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  width: 80%;
  margin-left: 20%;
  margin-right: 0;
  margin-top: clamp(8px, 1.5vh, 16px);
  margin-bottom: clamp(16px, 3.5vh, 36px);
  /* 波PNG左の透過分（≈36/379）を除いた白領域内で中央 */
  padding-left: calc(100% * 36 / 379);
  padding-right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.sp-menu__logo {
  display: block;
  margin: 0;
  height: clamp(28px, 4.5vh, 42px);
  width: auto;
  max-width: min(260px, 85%);
}

/* 短いビューポート／高ズームでもメニュー項目とロゴが重ならないように詰める */
@media (max-height: 620px) {
  .sp-menu__list {
    gap: clamp(14px, 3.5vh, 32px);
  }

  .sp-menu__link {
    font-size: clamp(1rem, 2.2vh + 0.35rem, 1.25rem);
  }

  .sp-menu__footer {
    margin-top: 6px;
    margin-bottom: 8px;
  }

  .sp-menu__logo {
    height: clamp(24px, 4vh, 32px);
  }
}

/* ==========================================================
   ヒーロー〜about（同一黄背景で境界の白線を防ぐ）
   ========================================================== */
.hero-about {
  background: var(--yellow);
}

/* ==========================================================
   ヒーロー（KV・レイヤー順フェードイン）
   画像比率に合わせて高さを決め、画面幅による切り方の差を防ぐ
   ========================================================== */
.hero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4096 / 2276;
  overflow: hidden;
  background: var(--yellow);
  /* ズーム時のサブピクセル隙間を下方向に塗りつぶす */
  box-shadow: 0 2px 0 0 var(--yellow);
}

/* 各レイヤー共通：初期非表示 → hero-layer-in でフェードイン */
.hero__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-layer-in 0.7s ease forwards;
}

.hero__bg {
  z-index: 1;
  /* 背景 */
  animation-delay: 0.15s;
}

.hero__illust {
  z-index: 2;
  /* イラスト1 */
  animation-delay: 0.6s;
}

.hero__items {
  z-index: 3;
  /* イラスト2 */
  animation-delay: 1.05s;
}

.hero__title {
  z-index: 4;
  /* タイトル（最前面） */
  animation-delay: 1.5s;
}

.hero__layer picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  /* コンテナ比率と一致しているため fill で端のレターボックスを防ぐ */
  object-fit: fill;
  object-position: center top;
}

.hero__img--title {
  object-position: center top;
}

@keyframes hero-layer-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__layer {
    opacity: 1;
    animation: none;
  }
}

/* ==========================================================
   体験について（about / YouTube）
   ========================================================== */
.about {
  position: relative;
  /* 波(z-index:4)より手前。体験ボタンが見切れないようにする */
  z-index: 5;
  /* KV下端の波が見える分、直下余白を少し詰めてFigma寄りに */
  /* margin で hero 下端に重ね、画像縁のヘアラインも隠す */
  margin-top: -4px;
  padding: 60px 0 0;
  /* 下端 overlap は透明にし、波の右上などが about 黄で隠れないようにする */
  background: transparent;
}

/* 黄背景は experience との重なり分を空けて敷く */
.about::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 3cm;
  background: var(--yellow);
  z-index: -1;
  pointer-events: none;
}

.about__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-inner);
  margin: 0 auto;
  padding: 0 20px 88px;
}

.about__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-bottom: 88px;
}

.about__logo-area {
  flex: 0 0 310px;
  width: 310px;
  height: 310px;
  background: var(--white);
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.about__logo-img {
  width: 100%;
  height: auto;
}

.about__text {
  flex: 1;
  max-width: 560px;
}

.about__heading {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  line-height: 1.4;
}

.about__heading-pc {
  display: inline;
  white-space: nowrap;
}

.about__heading-line {
  display: block;
  white-space: nowrap;
}

.about__text p,
.about__body {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 2;
  color: var(--black);
}

.about__video {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.about__video-embed {
  position: relative;
  width: 100%;
  max-width: 644px;
  aspect-ratio: 644 / 362;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.about__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.about__video-caption {
  font-size: 1rem;
  color: var(--black);
}

.about__video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 420px;
  height: 76px;
  margin-top: calc(12px + 2cm);
  padding: 0 36px;
  background: var(--purple);
  color: var(--white);
  border: 2px solid var(--purple);
  border-radius: 38px;
  font-size: 1.375rem;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.about__video-btn:hover {
  background: var(--white);
  color: var(--purple);
}

.about__video-btn-icon {
  display: block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid currentColor;
}

/* ==========================================================
   体験から、実感へ。
   表示順（奥→手前）: 紫背景 → talk_1 → 赤（オレンジ）波
   ========================================================== */
.experience {
  position: relative;
  /* z-index を付けない: 子の blob / wave-left が赤波より手前に出せるようにする */
  z-index: auto;
  background: var(--purple);
  color: var(--white);
  overflow: visible;
  /* 黄エリアへ紫ウェーブを約3cm上げる */
  margin-top: -3cm;
  /* 波エリアまで紫を伸ばし、talk より奥の紫レイヤーにする */
  padding-bottom: calc(clamp(80px, 21vw, 304px) + 2cm);
  margin-bottom: calc(-1 * (clamp(80px, 21vw, 304px) + 2cm));
}

.experience__wave-top {
  line-height: 0;
  /* about との境界・曲線のサブピクセル白線対策 */
  margin-top: -2px;
  position: relative;
  /* about の黄より手前だが、ボタンは about(z-index:5) 側で守る */
  z-index: 4;
}

/*
 * 波の透過部の奥に紫を敷く（PC/SP共通）。
 * about 下端を透明にしているため、右上の峰などが見える。
 */
.experience__wave-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: max(100%, calc(3cm + 12px));
  background: var(--purple);
  box-shadow: 0 10px 0 0 var(--purple);
  z-index: -1;
  pointer-events: none;
}

.experience__wave-top-svg--pc {
  position: relative;
  z-index: 0;
  width: 100%;
  height: clamp(140px, 28vw, 280px);
  display: block;
  /* 黄パス縁のアンチエイリアス白線を抑える */
  filter: drop-shadow(0 1px 0 var(--yellow));
}

.experience__wave-top-sp {
  display: none;
}

.experience__body {
  position: relative;
  z-index: auto;
  padding: 48px 0 0;
  min-height: auto;
  overflow: visible;
}

.experience__decor {
  position: absolute;
  /* 本文に対する装飾の絶対配置 */
  pointer-events: none;
}

/* 黄色い小粒アイコン群の配置コンテナ */
.experience__decor--icons {
  top: 1cm;
  left: -18px;
  width: min(477px, 33vw);
  aspect-ratio: 477 / 194;
  z-index: 4;
  /* 右寄りのアイコン translate がページ幅を広げないようクリップ */
  overflow: hidden;
}

.experience__icon {
  position: absolute;
  /* コンテナ内の個別アイコン */
  height: auto;
  display: block;
}

/* PC結合レイアウト（viewBox 477×194）に合わせた個別配置・出現遅延 */
.experience__icon--1 {
  left: 3.8%;
  top: 34.5%;
  width: 17.8%;
  transition-delay: 0.05s;
}

.experience__icon--2 {
  left: 30.8%;
  top: 79.4%;
  width: 7.3%;
  transition-delay: 0.2s;
}

.experience__icon--3 {
  left: 40.3%;
  top: 26.8%;
  width: 3.6%;
  transition-delay: 0.12s;
}

.experience__icon--4 {
  left: 48.8%;
  top: 35.1%;
  width: 4.2%;
  transition-delay: 0.18s;
}

.experience__icon--5 {
  left: 72.7%;
  top: 26.8%;
  width: 9%;
  transition-delay: 0.1s;
}

.experience__icon--6 {
  left: 95.4%;
  top: 0;
  width: 4.6%;
  transition-delay: 0.28s;
}

.challenge__decor--wave {
  transition-delay: 0.05s;
}

.challenge__decor--icon {
  transition-delay: 0.18s;
}

.challenge__decor--vector19 {
  transition-delay: 0.3s;
}

/* 右端の縦長ウェーブ（experience-vector-right） */
.experience__decor--wave-right {
  top: 12%;
  right: 0;
  width: min(233px, 16.2vw);
  aspect-ratio: 233 / 681;
  z-index: 1;
  /* 子の translate をこの枠内に収め、ページ幅のはみ出しを防ぐ */
  overflow: hidden;
}

.experience__decor--wave-right picture,
.experience__decor--wave-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

.experience__decor--wave-right img {
  object-fit: fill;
  transition-delay: 0.08s;
}

/* 左端の縦長ウェーブ（experience-vector-left）= 一番大きい黄ブロブ */
.experience__decor--wave-left {
  bottom: calc(-40px - 2cm);
  left: 0;
  width: min(110px, 7.6vw);
  max-height: 70%;
  aspect-ratio: 110 / 554;
  /* 赤波(z-index:3)より手前にして下端が隠れないようにする */
  z-index: 4;
  overflow: visible;
}

.experience__decor--wave-left img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  transition-delay: 0.15s;
}

/* 左下の単体 blob（Vector 6 / experience_icon7） */
.experience__decor--blob {
  bottom: calc(8px + 1cm);
  left: calc(10% + 0.8cm);
  width: min(99px, 7vw);
  z-index: 4;
  transition-delay: 0.35s;
}

/* talk_1：紫より手前・赤波より奥（波の下からせり上がる対象） */
/* サイズは width で調整（transform は wave-rise アニメ用に空ける） */
.experience__decor--talk {
  right: max(24px, 4%);
  /* PC: 少し上へ */
  bottom: calc(-20% + 1cm - 10mm);
  width: min(390px, 27vw);
  /* 紫より手前・赤波より奥 */
  z-index: 2;
}

/* 赤（オレンジ）波: talk より手前。紫は付けない（付けると talk が紫の下になる） */
.experience-scenes-wave {
  position: relative;
  z-index: 3;
  line-height: 0;
  background: transparent;
  margin-top: -1px;
}

/* 波画像の直下にオレンジ帯を敷き、紫の隙間を物理的に覆う */
.experience-scenes-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 32px;
  margin-top: -2px;
  background: var(--orange);
  pointer-events: none;
  z-index: 0;
}

.experience-scenes-wave picture,
.experience-scenes-wave img {
  display: block;
  width: 100%;
  height: clamp(80px, 21vw, 304px);
  object-fit: fill;
  position: relative;
  z-index: 1;
}

.experience__inner {
  position: relative;
  z-index: 5;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

.experience__heading {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 36px;
}

.experience__text p {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 20px;
}

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

.experience__text--pc>p:first-child {
  white-space: nowrap;
}

/* ==========================================================
   活用シーン（scenes / 6カード）
   ========================================================== */
.scenes {
  position: relative;
  /* 上余白を詰めて波と重なっても見出しが手前に来るようにする */
  z-index: 4;
  background: var(--orange);
  color: var(--white);
  /*
   * 負の margin-top + 同量の padding-top で、見出し位置は保ったまま
   * オレンジ背景だけ波の下まで伸ばし紫ラインを覆う
   */
  margin-top: -24px;
  padding: 24px 0 calc(24px + 3cm + 40px);
  scroll-margin-top: 110px;
  overflow: visible;
}

.scenes__inner {
  max-width: calc(var(--content-pc) + 40px);
  /* 波との間に見出し上余白を確保 */
  margin: calc(16px - 1cm + 56px) auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.scenes__intro {
  max-width: 717px;
  margin: 0 auto 88px;
  text-align: center;
}

.scenes__heading {
  font-size: clamp(2rem, 2.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.scenes__heading-line {
  display: inline;
}

.scenes__text {
  font-size: 1rem;
  line-height: 1.8;
}

.scenes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.scenes__card {
  text-align: center;
}

.scenes__card-img {
  position: relative;
  width: min(100%, 335px);
  aspect-ratio: 335 / 235;
  margin: 0 auto 20px;
  overflow: visible;
}

.scenes__card-img picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
}

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

/* 透明付き楕円素材が枠内で小さく見える分を拡大（カフェ） */
.scenes__card-img--oval {
  width: min(100%, 385px);
}

.scenes__card-img--oval picture img {
  transform: scale(1.2);
  transform-origin: center center;
}

/* 食卓・通学路・レストラン: 枠はカフェと同じ。contain + 等比拡大で写真内構造を維持 */
.scenes__card-img--dining,
.scenes__card-img--route,
.scenes__card-img--restaurant {
  width: min(100%, 385px);
}

.scenes__card-img--dining picture img,
.scenes__card-img--route picture img,
.scenes__card-img--restaurant picture img {
  object-fit: contain;
  object-position: center center;
  transform: scale(1.2);
  transform-origin: center center;
}

.scenes__icon {
  position: absolute;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.scenes__icon--cafe {
  right: 0;
  bottom: -1px;
  width: 121px;
}

.scenes__icon--dining {
  top: 0;
  left: 48px;
  width: 137px;
}

.scenes__icon--route {
  right: -1px;
  bottom: 28px;
  width: 101px;
}

.scenes__icon--break {
  left: 0;
  bottom: -4px;
  width: 118px;
}

.scenes__icon--lesson {
  top: 8px;
  right: 22px;
  width: 99px;
}

.scenes__icon--restaurant {
  right: -2px;
  bottom: -7px;
  width: 91px;
}

/* SP専用レストラン緑ブロブ。PCでは非表示 */
.scenes__blob--restaurant {
  display: none;
}

.scenes__card-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.scenes__card-text {
  font-size: 1rem;
}

/* ==========================================================
   グリーンセクション（体験者の声 voices + 活用事例 challenge）
   ========================================================== */
.green-section {
  position: relative;
  z-index: 1;
  background: var(--green);
  /* 「体験者の声」上の余白を2cm削減 */
  padding: calc(88px - 2cm) 0 0;
  overflow: visible;
}

/* scenes→voices: 波形と人物装飾の共通基準（z-index は付けない） */
.scenes-wave-area {
  position: relative;
}

/* scenes→voices: 人物イラスト + オレンジブロブ
   教室編（休み時間）下〜波境界（赤枠位置）
   scenes(z-index:4) より手前にして頭上の見切れを防ぐ */
.voices-decor {
  position: absolute;
  /* PC: コンテンツ左端付近から、見出し寄りへ少し左へ */
  left: max(8px, calc(50% - 590px));
  /* PC: 波境界から少し下へ */
  top: 52%;
  transform: translateY(-50%) scale(1.3);
  transform-origin: center center;
  width: min(280px, 26vw);
  z-index: 5;
  pointer-events: none;
  isolation: isolate;
}

.voices-decor__blob {
  position: absolute;
  left: 50%;
  bottom: -1.5cm;
  transform: translateX(-50%);
  width: 121%;
  height: auto;
  z-index: 0;
  display: block;
}

.voices-decor__people {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* scenes（オレンジ）→体験者の声（緑）境界波形（Figma Vector 17） */
.scenes-wave {
  position: relative;
  z-index: 2;
  line-height: 0;
  background: var(--green);
  margin-top: -1px;
  overflow: visible;
}

.scenes-wave__img {
  display: block;
  width: 100%;
  height: clamp(110px, 20vw, 313px);
  object-fit: fill;
}

.voices__inner,
.challenge__inner {
  max-width: calc(var(--content-pc) + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 体験者の声（voices） --- */
.voices {
  position: relative;
  margin-bottom: 200px;
  overflow: visible;
}

/* 右下ブロブ（カード5付近・右からスライドイン） */
.voices__blob-right {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(200px, 18vw);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.voices__inner {
  position: relative;
  z-index: 1;
}

.voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
}

.voices__grid--top {
  margin-top: 56px;
}

.voices__grid--bottom {
  grid-template-columns: repeat(2, minmax(0, 335px));
  justify-content: center;
  margin-top: 40px;
}

.voices__card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.voices__number {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  max-width: 38px;
  max-height: 38px;
  margin-bottom: -19px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--green);
  color: var(--black);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  box-sizing: border-box;
  overflow: hidden;
}

.voices__bubble {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 335px;
  height: 145px;
  padding: 24px 24px 16px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.voices__bubble::after {
  content: "";
  position: absolute;
  right: 44px;
  bottom: -22px;
  width: 34px;
  height: 32px;
  background: url("../assets/figma/voices-tail.svg") no-repeat center / contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.08));
}

.voices__bubble-bg {
  display: none;
}

.voices__card-text {
  position: relative;
  z-index: 1;
  flex: 1;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--black);
  text-align: left;
}

.voices__card-name {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: 0.875rem;
  text-align: right;
  color: var(--black);
}

.voices__avatar-wrap {
  position: relative;
  z-index: 2;
  width: 183px;
  margin-top: -42px;
  display: flex;
  justify-content: center;
}

.voices__avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin-top: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  /* イラスト下部の曲線（アルファ形状）に沿う薄い影 */
  filter: drop-shadow(0 8px 6px rgba(45, 70, 15, 0.18));
}

.challenge {
  position: relative;
  /* z-index を付けない: 付けると talk が黄波より前面に固定される */
  z-index: auto;
  padding-bottom: 180px;
}

/* --- 活用事例（challenge）装飾・カード --- */
.challenge__inner {
  position: relative;
  z-index: 1;
}

.challenge__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.challenge__decor--wave {
  left: 0;
  top: 120px;
  width: clamp(64px, 8.8vw, 127px);
  height: clamp(280px, 40vw, 560px);
  object-fit: fill;
  z-index: 0;
}

/* Vector 21: 左上の小オレンジ */
.challenge__decor--icon {
  left: clamp(12px, 3.2vw, 46px);
  top: 0;
  width: clamp(64px, 6.7vw, 97px);
  height: auto;
  z-index: 2;
}

.challenge__decor--icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* Vector 19: 左の大ブロブ右端から約1cm空けて配置 */
.challenge__decor--vector19 {
  left: calc(clamp(64px, 8.8vw, 127px) + 1cm);
  bottom: calc(16px - 2cm);
  width: min(180px, 20vw);
  height: auto;
  z-index: 5;
}

/* talk: カードより手前・黄波より奥 */
.challenge__decor--talk {
  left: min(calc(100% - 280px), calc(50% + 320px));
  right: auto;
  bottom: calc(20px + 3mm);
  width: min(260px, 20vw);
  height: auto;
  z-index: 3;
}

.challenge__decor--talk img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.challenge__heading-line {
  display: inline;
}

.challenge__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px;
  max-width: var(--content-inner);
  margin: 56px auto 0;
}

.challenge__card {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 173px;
  padding: 19px 24px 19px 35px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.challenge__card-icon {
  flex: 0 0 131px;
  width: 131px;
  height: 135px;
  object-fit: contain;
}

.challenge__card-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.challenge__card-text {
  font-size: 1rem;
  line-height: 1.6;
}

/* 緑→黄の境界波形（Figma Vector 8）※ talk より手前 */
.green-section__wave {
  position: relative;
  z-index: 4;
  line-height: 0;
  margin-top: -80px;
  margin-bottom: -1px;
}

.green-section__wave picture,
.green-section__wave img {
  display: block;
  width: 100%;
  height: clamp(120px, 18vw, 260px);
  object-fit: fill;
}

/* ==========================================================
   実績（results / 人数カウント・掲載カード）
   ========================================================== */
.results {
  position: relative;
  z-index: 0;
  background: var(--yellow);
  /* 上下余白を約半分に（紫ライン・人物も同じ分だけ上へ） */
  padding: 44px 0;
  overflow: visible;
}

.results__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-inner);
  margin: 0 auto;
  padding: 0 20px;
}

.results__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 66px;
  margin: 40px 0 48px;
}

/* 左右のクラッカー画像（congrates）。初期非表示 → congrats-pop */
.results__congrats {
  width: 198px;
  height: 198px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.78);
}

.results__congrats.is-visible {
  animation: congrats-pop 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 右側クラッカーの出現を少し遅らせる */
.results__stats .results__congrats:last-of-type {
  animation-delay: 0.2s;
}

.results__number-area {
  text-align: center;
  /* 数字・単位・日付で同じ横幅（最も長い行に合わせる） */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.results__number,
#statsNumber {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  font-size: clamp(4rem, 8vw, 5.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: center;
}

.results__number-unit {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--black);
  text-align: center;
}

.results__number-date {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.875rem;
  color: var(--black);
  margin-top: 4px;
  text-align: center;
}

.results__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.results__card {
  background: var(--white);
  border-radius: 16px;
  padding: 48px;
}

.results__card-row {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.results__card-title {
  flex: 0 0 auto;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

.results__card-list {
  flex: 1;
  min-width: 0;
}

.results__card-list p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 0;
}

.results__card-more {
  margin-top: 14px;
  font-size: 0.875rem;
  text-align: right;
}

/* ==========================================================
   お問い合わせ（contact）
   直前: 実績→お問い合わせ境界波形（people-26 体 / 紫波 / people-27 腕）
   表示順: 体(1) → 波形・お問い合わせ紫(2) → 腕(3)
   ※ contact-wave 自体に z-index を付けない（付けると体が紫の上に出る）
   ========================================================== */
/*
 * 実績(黄)→お問い合わせ(紫)の境界波
 * contact-wave-purple.svg (390×89) の比率を崩さず、下端は contact の紫と密着させる
 *
 * 重ね順（contact-wave 自体に z-index を付けない）:
 *   体(1) → contact紫(2) → 波(3) → 腕(4)
 *
 * 人物は波コンテナ高さ基準でサイズ・位置を決める（画面幅・倍率で波とずれない）
 */
.contact-wave {
  position: relative;
  z-index: auto;
  line-height: 0;
  background: var(--yellow);
  margin-top: -1px;
  margin-bottom: -1px;
  overflow: visible;
  /*
   * 人物の高さ = 波高 × --person-height-ratio
   * bottom = 波高 × --person-bottom（負で紫側へはみ出し）
   * 腕の微調整は人物自身の高さに対する %
   */
  --person-height-ratio: 0.78;
  --person-bottom: -6%;
  --person-arms-nudge-y: -2.5%;
  --person-right: max(12px, calc(50% - 720px + 226px));
}

/* サブピクセルの黄ラインだけ紫で塞ぐ */
.contact-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: var(--purple);
  z-index: 2;
  pointer-events: none;
}

.contact-wave__bg {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 89;
  margin: 0;
  object-fit: fill;
  vertical-align: bottom;
}

/*
 * 人物: 波の右稜線に腰〜肘が来るよう、波高基準でアンカー
 * height% / bottom% はともに波コンテナ（＝波画像）高さ基準
 */
.contact-wave__person {
  position: absolute;
  right: var(--person-right);
  top: auto;
  bottom: var(--person-bottom);
  height: calc(100% * var(--person-height-ratio));
  width: auto;
  aspect-ratio: 186 / 242;
  margin: 0;
  line-height: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.contact-wave__person img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* 体は波・contact 紫より奥。はみ出しは紫が隠す */
.contact-wave__person--body {
  z-index: 1;
}

/* 腕・手は波と紫より手前 */
.contact-wave__person--arms {
  z-index: 4;
  transform: translate3d(0, var(--person-arms-nudge-y), 0);
}

.contact {
  padding: 88px 0 240px;
  background: var(--purple);
  position: relative;
  margin-top: 0;
  /* 体より前・腕より後ろ → はみ出した胴体を紫で隠す */
  z-index: 2;
}

.contact__inner {
  max-width: var(--content-inner);
  margin: 0 auto;
  padding: 0 20px;
}

.contact__form {
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact__form-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px 60px;
  align-items: start;
}

.contact__label {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--white);
  padding-top: 6px;
}

.contact__label--message {
  white-space: nowrap;
}

.contact__label--privacy {
  align-items: flex-start;
  line-height: 1.4;
}

.contact__label--privacy .contact__required {
  margin-left: 8px;
  vertical-align: middle;
}

.contact__label-text {
  flex: 0 1 auto;
  min-width: 0;
}

.contact__label--message .contact__label-text {
  flex: 0 0 auto;
  white-space: nowrap;
}

.contact__required {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 37px;
  height: 19px;
  padding: 0 6px;
  background: var(--yellow);
  color: var(--purple);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.contact__input,
.contact__textarea {
  width: 100%;
  max-width: 600px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
}

.contact__input {
  height: 44px;
}

.contact__textarea {
  min-height: 132px;
  resize: vertical;
}

.contact__input.is-error,
.contact__textarea.is-error {
  outline: 2px solid #e74c3c;
}

.contact__error {
  min-height: 1.2em;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--yellow);
}

.contact__privacy-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--white);
  margin-bottom: 16px;
}

.contact__privacy-text a {
  text-decoration: underline;
}

.contact__checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
}

.contact__checkbox {
  width: 24px;
  height: 24px;
  accent-color: var(--yellow);
}

.contact__submit {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 16px auto 0;
  padding: 16px;
  border: 2px solid var(--purple);
  border-radius: 32px;
  background: var(--yellow);
  color: var(--purple);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.contact__submit:hover:not(:disabled) {
  background: var(--white);
  color: var(--purple);
}

.contact__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.contact__honeypot {
  position: absolute;
  /* スパム対策用隠しフィールド */
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__iframe {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================
   送信完了モーダル（お問い合わせ送信後）
   ========================================================== */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.contact-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.contact-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 40px 32px 32px;
  border-radius: 16px;
  background: var(--white);
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.contact-modal__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 12px;
}

.contact-modal__message {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--black);
  white-space: pre-line;
  margin-bottom: 28px;
}

.contact-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 12px 24px;
  border: none;
  border-radius: 32px;
  background: var(--yellow);
  color: var(--purple);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================
   フッター（波・ロゴ・SNS・コピーライト）
   ========================================================== */
.footer {
  position: relative;
  z-index: 2;
  margin-top: -220px;
  overflow: visible;
  background: transparent;
}

.footer__wave {
  position: relative;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
  margin-bottom: -1px;
  filter: none;
  box-shadow: none;
}

.footer__wave-svg--pc {
  display: block;
  width: 100%;
  height: 280px;
  overflow: hidden;
  shape-rendering: geometricPrecision;
}

.footer__wave-img--sp {
  display: none;
}

.footer__body {
  position: relative;
  z-index: 1;
  background: #fff;
  padding-bottom: 48px;
}

.footer__inner {
  position: relative;
  max-width: var(--content-pc);
  margin: -3cm auto 0;
  /* ロゴ上の余白 */
  padding: 56px 20px 0;
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
}

.footer__logo {
  display: block;
  /* width だけ縮めて height 固定だと比率が崩れるため、両方 auto + 上限で比率維持 */
  width: auto;
  height: auto;
  max-width: min(540px, 100%);
  max-height: 76px;
  aspect-ratio: 540 / 76;
  object-fit: contain;
  margin-bottom: 32px;
  /* ロゴのアルファ形状に沿う影 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.footer__description {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--black);
  max-width: 540px;
}

.footer__banner-link {
  display: inline-block;
  max-width: 100%;
  /* バナー角丸に合わせてクリップし、四隅の白隙間・四角い影を消す */
  border-radius: 15px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.footer__banner-img {
  display: block;
  width: 418px;
  max-width: 100%;
  height: auto;
}

.footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.footer__social-intro {
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: 12px;
}

.footer__social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  /* note画像右余白で左に寄って見える分を補正（上下間隔は変えない） */
  transform: translateX(36px);
}

.footer__social-icon {
  width: 28px;
  height: auto;
  transform: translateX(-10px);
}

.footer__social-note {
  width: 200px;
  height: auto;
  /* 余白込み画像の高さ増分を相殺し、元のアイコン列位置を維持 */
  margin-block: -30px;
  /* 画像左右の余白分を少しだけ打ち消し（Xとの間隔は残す） */
  margin-left: -28px;
  margin-right: -56px;
  /* レイアウト位置は変えず見た目だけ拡大 */
  transform: scale(1.38);
  transform-origin: center center;
}

.footer__copyright {
  text-align: right;
}

.footer__cns-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px auto;
}

.footer__cns-icon {
  height: 24px;
  width: auto;
  display: block;
}

.footer__cns-text {
  height: 10px;
  width: auto;
  display: block;
}

.footer__copyright p {
  font-size: 0.875rem;
}

/* ==========================================================
   スクロールアニメーション共通クラス
   JS（IntersectionObserver）が .is-visible を付与して発火
   ========================================================== */
/* 汎用：下からフェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 波形の下からせり上がるフェードイン（talk / people 装飾） */
.wave-rise {
  opacity: 0;
  transform: translateY(72px);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.05s;
}

.wave-rise.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 背景端からゆっくりスライドイン（体験・活用事例の装飾） */
.edge-appear {
  opacity: 0;
  transition:
    opacity 2.6s ease-in-out,
    transform 2.6s ease-in-out;
}

.edge-appear--from-left {
  transform: translateX(-50px);
}

.edge-appear--from-right {
  transform: translateX(50px);
}

/* 左右ウェーブは枠内クリップ前提で、自身の幅ぶん端から入場させる */
.experience__decor--wave-left img.edge-appear--from-left:not(.is-visible) {
  transform: translateX(-100%);
}

.experience__decor--wave-right img.edge-appear--from-right:not(.is-visible) {
  transform: translateX(100%);
}

.edge-appear.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 実績のクラッカー：ふわっと出現 → 一回り大きく → 元サイズへ */
@keyframes congrats-pop {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  55% {
    opacity: 1;
    transform: scale(1.28);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .fade-in,
  .wave-rise,
  .edge-appear {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .results__congrats {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ==========================================================
   レスポンシブ（SP: 768px 以下）
   PCルールの上書き。位置調整は各セクションの bottom / top / width を参照
   ========================================================== */
@media (max-width: 768px) {

  /* --- SP: PC用テキストを隠し、SP用テキストを表示 --- */
  .about__heading-pc,
  .about__body--pc,
  .experience__text--pc,
  .scenes__heading--pc,
  .scenes__text--pc,
  .footer__description--pc {
    display: none;
  }

  .about__heading-sp,
  .about__body--sp,
  .experience__text--sp,
  .scenes__heading--sp,
  .scenes__text--sp,
  .footer__description--sp {
    display: block;
  }

  .section-heading {
    font-size: 1.625rem;
    letter-spacing: 0.05em;
  }

  /* --- SP: ヘッダー（全幅・ハンバーガー） --- */
  .header {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
  }

  .header__accent {
    display: none;
  }

  .header__inner {
    position: relative;
    height: 58px;
    padding: 0 16px;
    border-radius: 0;
    box-shadow: none;
    background: #EC6D56;
    transition: background-color 0.3s ease;
    overflow: visible;
  }

  /* スクロール後は背景を透かし、下のセクションが見えるようにする */
  .header.is-header-scrolled .header__inner {
    background: transparent;
  }

  .header__logo--pc {
    display: none;
  }

  .header__logo--sp {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .header__logo-img--center {
    height: 28px;
  }

  .header__nav {
    display: none;
  }

  .header__menu-btn {
    display: block;
  }

  .hero {
    height: auto;
    aspect-ratio: 1625 / 3230;
    margin-top: 58px;
  }

  .about {
    /* KV下端の波が見える分、直下余白を少し詰めてFigma寄りに */
    padding: 36px 0 0;
  }

  .about__inner {
    /* 体験ボタンが黄ウェーブに被らない余白（overlap 3cm + 波高ぶん） */
    padding-bottom: calc(48px + 4cm);
  }

  .about__content {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
  }

  .about__logo-area {
    flex: none;
    width: 260px;
    height: 260px;
  }

  .about__heading-line {
    display: block;
    text-align: center;
    white-space: nowrap;
  }

  .about__heading {
    font-size: 1.625rem;
    text-align: center;
  }

  .about__text {
    max-width: 350px;
    margin: 0 auto;
    text-align: center;
  }

  .about__text p,
  .about__body {
    font-size: 1rem;
    line-height: 1.9;
  }

  .about__video-embed {
    max-width: 350px;
  }

  .about__video-btn {
    min-width: 0;
    width: 100%;
    max-width: 350px;
    height: 70px;
    font-size: 1.25rem;
    /* SP: ボタンを1cm上へ */
    margin-top: calc(12px + 1cm);
  }

  /* SP: 黄ウェーブは添付 Vector 2 のみ。about より手前。上の紫線を消す */
  .experience__wave-top {
    z-index: 4;
    /* 75%ズーム時、about 黄との隙間を潰す */
    margin-top: -1px;
    margin-bottom: -2px;
  }

  /* 波上端の紫のはみ出し（1px線）を黄で塞ぐ。波の谷は透過のまま */
  .experience__wave-top::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--yellow);
    pointer-events: none;
    z-index: 1;
  }

  /*
   * SP: 波画像の透過部の奥に紫を敷く。
   * about 下端が透明なので、SVG の谷から紫が見える。
   * height は波画像より少し長めにし、下端の隙間を防ぐ。
   */
  .experience__wave-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: max(100%, calc(3cm + 12px));
    background: var(--purple);
    box-shadow: 0 10px 0 0 var(--purple);
    z-index: -1;
    pointer-events: none;
  }

  /* about 黄を波側へ 2px 伸ばし、ズーム時の黄内ヘアラインを防ぐ */
  .about::before {
    bottom: calc(3cm - 2px);
  }

  .experience__wave-top .experience__wave-top-svg--pc {
    display: none;
  }

  .experience__wave-top-sp {
    display: block;
    position: relative;
    z-index: 0;
    line-height: 0;
  }

  .experience__wave-top-wave--sp {
    display: block;
    width: 100%;
    height: auto;
  }

  .experience__body {
    /* 波形と見出しの間を少し広げる */
    padding: calc(2cm + 24px) 0 0;
    min-height: auto;
  }

  /* SP: アイコン群を中央から右上へ寄せる */
  .experience__decor--icons {
    top: -56px;
    left: auto;
    right: 12px;
    transform: none;
    width: 236px;
    aspect-ratio: 235.659 / 132.899;
    z-index: 4;
    overflow: visible;
  }

  /* SP結合レイアウト（viewBox 235.659×132.899） */
  .experience__icon--1 {
    left: 75.5%;
    top: 62.5%;
    width: 20.4%;
  }

  .experience__icon--2 {
    left: 33%;
    top: 46.2%;
    width: 9.7%;
  }

  .experience__icon--3 {
    left: 0;
    top: 44.2%;
    width: 4.2%;
  }

  .experience__icon--4 {
    left: 22.5%;
    top: 16.3%;
    width: 5.1%;
  }

  .experience__icon--5 {
    left: 65.4%;
    top: 25%;
    width: 10.6%;
  }

  .experience__icon--6 {
    left: 94.2%;
    top: 0;
    width: 5.5%;
  }

  /* SPでは icon1 が右寄りなので右端から入場 */
  .experience__icon--1.edge-appear--from-left:not(.is-visible) {
    transform: translateX(50px);
  }

  /* SP: 左の縦長ブロブは非表示。右の Vector 3 は人物の下に出す */
  .experience__decor--wave-left {
    display: none;
  }

  /* --- SP: Vector 3（右ブロブ）を人物イラストより奥に配置 --- */
  .experience__decor--wave-right {
    display: block;
    top: auto;
    /* さらに3cm下へ（SPのみ） */
    bottom: calc(-52px - 3cm);
    right: -1cm;
    left: auto;
    /* Figma SP 390幅基準の縦長ブロブ（少し拡大） */
    width: min(130px, 33vw);
    aspect-ratio: 233 / 681;
    z-index: 1;
    /* talk(2)・赤波(3) より奥 */
    overflow: hidden;
  }

  .experience__decor--blob {
    bottom: calc(16px - 3cm);
    /* さらに3cm下へ（SPのみ） */
    left: 20px;
    top: auto;
    right: auto;
    width: 59px;
    z-index: 2;
  }

  /* --- SP: 体験セクション装飾・talk_1 位置（bottom で波との関係を調整） --- */
  /* PC同様: 紫を波高まで伸ばし talk より奥に。paddingだけ+3cmで赤波を下げて紫範囲を拡大（PC非影響） */
  .experience {
    /* about 下余白内だけ重ね、ボタンに被せない */
    margin-top: -3cm;
    padding-bottom: calc(95px + 2.4cm + 3cm);
    margin-bottom: calc(-95px - 2.4cm);
  }

  /* Figma SP 390幅基準。狭い端末でもはみ出さないよう % 化 */
  /* さらに3cm下へ（SPのみ） */
  .experience__decor--talk {
    right: auto;
    left: calc(214 / 390 * 100%);
    bottom: calc(-52px - 3cm);
    width: min(175px, 45vw);
    z-index: 2;
    /* Vector 3(1) より手前 */
  }

  .experience-scenes-wave picture,
  .experience-scenes-wave img {
    height: 95px;
  }

  .experience-scenes-wave::after {
    height: 40px;
  }

  .scenes {
    /* 赤余白を2cm削減 → 緑ライン・人物・下ブロブが2cm上へ（SPのみ） */
    /* 負margin + padding-top で波下の紫をオレンジで覆う */
    margin-top: -32px;
    padding: 32px 0 calc(48px + 3cm + 16px - 2cm);
  }

  .experience__heading {
    font-size: 1.625rem;
  }

  .experience__text p {
    font-size: 1rem;
    line-height: 2;
  }

  .scenes__intro {
    margin-bottom: 48px;
  }

  .scenes__heading--sp {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin-bottom: 24px;
    white-space: normal;
  }

  .scenes__text--sp {
    font-size: 1rem;
    line-height: 1.9;
  }

  .scenes__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 350px;
    margin: 0 auto;
  }

  .scenes__card-img {
    width: min(100%, 335px);
  }

  .scenes__card-img--oval,
  .scenes__card-img--dining,
  .scenes__card-img--route,
  .scenes__card-img--restaurant {
    width: min(100%, 365px);
  }

  .scenes__icon--cafe {
    width: 108px;
  }

  .scenes__icon--dining {
    left: 48px;
    width: 122px;
  }

  .scenes__icon--route {
    width: 90px;
  }

  .scenes__icon--break {
    width: 105px;
  }

  .scenes__icon--lesson {
    width: 88px;
  }

  .scenes__icon--restaurant {
    /* SP: 左レイヤーとして皿アイコンを左下へ */
    left: 4px;
    right: auto;
    bottom: -7px;
    width: 82px;
    z-index: 2;
  }

  /* SP: 緑ブロブをレストラン画像（picture z-index:1）より奥に */
  .scenes__card-img--restaurant picture {
    z-index: 1;
  }

  .scenes__blob--restaurant {
    display: block;
    position: absolute;
    height: auto;
    z-index: 0;
    /* 画像レイヤーより下 */
    pointer-events: none;
  }

  .scenes__blob--restaurant-left {
    left: calc(-8px - 0.5cm);
    /* 0.5cm左へ */
    bottom: calc(-28px - 2cm);
    /* 2cm下へ */
    width: 97px;
  }

  .scenes__blob--restaurant-right {
    right: calc(-8px + 1.5cm);
    /* 3cm左へ */
    left: auto;
    bottom: calc(-28px - 5cm);
    width: 45px;
  }

  .scenes__card-title {
    font-size: 1.25rem;
  }

  .scenes__card-text {
    font-size: 0.875rem;
  }

  .green-section {
    /* 「体験者の声」上余白を+2cm（SPのみ・1cm詰め） */
    padding: calc(max(0px, 48px - 2cm) + 2cm) 0 0;
    /* 75%ズーム: scenes-wave との境の横線を潰す（中身の位置はほぼそのまま） */
    margin-top: -2px;
    box-shadow: 0 -2px 0 0 var(--green);
  }

  .voices-decor {
    /* モバイルでは画面外にはみ出さないよう左端内に収める。一回り大きく */
    left: 8px;
    top: 42%;
    transform: translateY(-50%) scale(1.3);
    transform-origin: center center;
    width: min(168px, 42vw);
  }

  /* SP: 人物下の赤ブロブ（0.3cm上へ、見切れ防止で少し右へ） */
  .voices-decor__blob {
    bottom: calc(-1.5cm + 0.8cm);
    left: calc(50% + 20px);
  }

  .voices-decor__people {
    left: 12px;
  }

  .voices__blob-right {
    right: 0;
    bottom: calc(8px - 5cm);
    /* さらに2cm下へ（SPのみ） */
    width: min(120px, 32vw);
  }

  /* 波ブロック下端を green-section に重ねる（画像サイズ・人物位置は変更しない） */
  .scenes-wave {
    margin-bottom: -2px;
  }

  .scenes-wave__img {
    height: clamp(70px, 22vw, 120px);
  }

  .voices {
    margin-bottom: 80px;
  }

  .voices__grid,
  .voices__grid--bottom {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }

  .voices__grid--bottom {
    margin-top: 40px;
  }

  .voices__card-text {
    font-size: 0.875rem;
  }

  .voices__card-name {
    font-size: 0.75rem;
  }

  .voices__avatar-wrap {
    width: 170px;
    margin-top: -28px;
  }

  .voices__avatar {
    width: 100%;
    margin-top: 0;
    filter: drop-shadow(0 6px 5px rgba(45, 70, 15, 0.18));
  }

  .challenge {
    /* 「気づきで終わらせない」上余白 4cm（SPのみ） */
    padding-top: 4cm;
    /* 黄ウェーブ・人物を1cm上げ（SPのみ） */
    padding-bottom: calc(100px + 1cm);
  }

  .challenge__decor--wave {
    display: none;
  }

  /* SP: 赤ブロブ（vector19）の斜め左上に小パーツ。1cm上へ */
  .challenge__decor--icon {
    display: block;
    left: calc(1cm - 0.5cm);
    top: auto;
    bottom: calc(28px - 1cm + 56px + 1cm);
    width: 26px;
    height: auto;
    z-index: 5;
  }

  .challenge__decor--vector19 {
    /* SPでは大ブロブ非表示のため、左端から1cm。1cm下へ */
    left: 1cm;
    bottom: calc(28px - 1cm);
    width: 72px;
    z-index: 5;
  }

  /* --- SP: 活用事例 talk（challenge-talk-right）位置 --- */
  /* 0.3cm上へ。黄波(z-index:4)より奥(z-index:3)で少し隠れる */
  .challenge__decor--talk {
    left: auto;
    right: 0;
    bottom: calc(16px + 4mm - 0.2cm);
    width: min(170px, 44vw);
    z-index: 3;
  }

  .green-section__wave {
    margin-top: -56px;
    /* 75%ズーム: results との隙間のみ重ねる（上位置・画像サイズは変えない） */
    margin-bottom: -4px;
  }

  .green-section__wave picture,
  .green-section__wave img {
    height: 89px;
  }

  .challenge__heading-line {
    display: block;
  }

  .challenge__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 350px;
  }

  .challenge__card {
    min-height: 162px;
    padding: 16px 20px;
  }

  .challenge__card-icon {
    flex: 0 0 104px;
    width: 104px;
    height: 107px;
  }

  .challenge__card-title {
    font-size: 1.25rem;
  }

  .results {
    /* レイアウトを動かさないよう box-shadow で黄の隙間を塞ぐ */
    margin-top: -4px;
    /* 出展カード下〜波までの余白を確保 */
    padding: 24px 0 48px;
    box-shadow: 0 -2px 0 0 var(--yellow);
  }

  .results__stats {
    /* 数字＋左右クラッカーが常に1行に収まるよう、間隔も可変に */
    gap: clamp(6px, 2vw, 16px);
    margin: 32px 0;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(4px, 2vw, 12px);
    box-sizing: border-box;
  }

  /* --- SP: 実績クラッカーは非表示 --- */
  .results__congrats {
    display: none;
  }

  .results__number-area {
    flex: 0 1 auto;
    min-width: 0;
    width: max-content;
    max-width: 100%;
  }

  .results__number,
  #statsNumber {
    /* Figma SP参考: クラッカー非表示分も含め大きめに */
    font-size: clamp(3.75rem, 20vw, 6rem);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    white-space: nowrap;
  }

  .results__number-unit {
    font-size: clamp(1.125rem, 5.2vw, 1.5rem);
    white-space: nowrap;
  }

  .results__number-date {
    font-size: clamp(0.7rem, 2.6vw, 1.05rem);
  }

  .results__card {
    /* 下側の見切れ防止：カード内下余白を広めに */
    padding: 20px 24px 32px;
  }

  .results__card-more {
    margin-top: 18px;
    margin-bottom: 4px;
  }

  .results__card-row {
    flex-direction: column;
    gap: 12px;
  }

  .results__card-title {
    flex: none;
    font-size: 1.125rem;
  }

  /* --- SP: 波が低いため人物は波高の約2倍、右稜線に腰が乗る位置 --- */
  .contact-wave__bg {
    margin-top: 0;
  }

  .contact-wave {
    --person-height-ratio: 2.05;
    --person-bottom: -48%;
    --person-arms-nudge-y: -2.5%;
    --person-right: max(4px, 2vw);
  }

  .contact-wave__person--body {
    z-index: 1;
  }

  .contact-wave__person--arms {
    z-index: 4;
  }

  .contact {
    margin-top: 0;
    /* 送信ボタン〜フッター白波までの紫余白（波の重なり分も見込む） */
    padding: 48px 0 180px;
  }

  .contact__form {
    margin-top: 40px;
    gap: 20px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }

  .contact__form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact__label {
    font-size: 1.25rem;
    padding-top: 0;
  }

  .contact__label--message {
    white-space: normal;
  }

  /* SP: 「個人情報の取り扱いについて」+「必須」を一行に */
  .contact__label--privacy {
    align-items: center;
    white-space: nowrap;
  }

  .contact__label--privacy .contact__label-text br {
    display: none;
  }

  .contact__input,
  .contact__textarea {
    max-width: none;
  }

  .contact__input {
    height: 40px;
  }

  .contact__textarea {
    min-height: 140px;
  }

  .contact__submit {
    max-width: none;
    /* 同意する〜送信すると同程度＋白波までの余白 */
    margin-bottom: 48px;
  }

  /* --- SP: wave-rise の移動量を小さく --- */
  .wave-rise {
    transform: translateY(40px);
  }

  .wave-rise.is-visible {
    transform: translateY(0);
  }

  .footer {
    margin-top: -120px;
  }

  /* SP: PC用SVGを消し、footer-wave-sp.svg（390×72）だけ表示 */
  .footer__wave .footer__wave-svg--pc {
    display: none;
  }

  .footer__wave-img--sp {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 72;
    object-fit: fill;
  }

  .footer__body {
    /* 波下の白エリアに重ね、稜線だけ紫側に残す（比率は SVG 390×72 基準） */
    position: relative;
    z-index: 1;
    margin-top: calc(-100vw * 72 / 390 * 0.55);
    padding-bottom: 32px;
    background: #fff;
  }

  .footer__inner {
    margin-top: 0;
    /* 白波の下〜ロゴまでの余白 */
    padding: 44px 20px 0;
  }

  .footer__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* バナー〜social-intro の余白を半分に */
    margin-bottom: 24px;
  }

  .footer__logo {
    max-height: 46px;
    margin: 0 auto 24px;
  }

  .footer__description {
    font-size: 0.875rem;
    max-width: 350px;
  }

  .footer__banner-link {
    border-radius: 8px;
  }

  .footer__banner-img {
    width: 216px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .footer__copyright {
    text-align: center;
  }

  .footer__cns-link {
    margin: 0 auto 4px;
  }

  .footer__social-intro {
    font-size: 0.75rem;
  }

  .footer__social-icon {
    width: 24px;
  }

  .footer__social-links {
    transform: translateX(30px);
  }

  .footer__social-note {
    width: 170px;
    margin-block: -25px;
    margin-left: -24px;
    margin-right: -48px;
    transform: scale(1.38);
    transform-origin: center center;
  }
}