/* ============================================
   TOPページ専用スタイル
   CONTENTS / LINK / 築育ニュース セクション
   FUJITA築育サイト
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@400;700&family=Zen+Maru+Gothic:wght@500&display=swap');

/* TOPページのみヘッダー背景を透過に（MV上に重なるため） */
.site-header {
  background: transparent;
}

/* -----------------------------------------------
   CONTENTSセクション背景（MVの下、黄緑単色）
----------------------------------------------- */
.top-contents {
  position: relative;
  background: #89B226;
  padding-bottom: 30px;
}

.top-contents__grass {
  position: absolute;
  display: block;
  width: 30.48px;
  height: 30.75px;
}

/* -----------------------------------------------
   共通：イラスト帯〜NEWSをまとめる緑エリア
   背景：#0F825D 単色（Figma確認済み）
----------------------------------------------- */
.top-green-area {
  position: relative;
  background: #0F825D; /* Figma確認済みの単色（--color-green #0E845Cとは別値） */
  padding-bottom: var(--space-3xl);
  margin-bottom: -1px; /* フッター(#0E845C)との境目のサブピクセルの縞を防止 */
  overflow-x: hidden; /* イラスト帯（楕円・イラスト群）の横はみ出しを安全にクリップ */
}

.top-green-area__tree-footer {
  bottom: 30px; /* フッターとの間隔（要目視調整） */
}

.top-contents .inner,
.top-green-area .inner {
  max-width: var(--max-width); /* 1070px */
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* セクション間の余白 */
.top-contents,
.top-news {
  padding-top: 100px;
}

.top-link {
  position: relative;
  padding-top: 0; /* top-introのmargin-bottomで余白を確保 */
  scroll-margin-top: 90px; /* フッターからの#linkアンカー遷移時、固定ヘッダーに隠れないように */
}

.top-intro {
  position: relative;
  padding-top: 0; /* 直上のtop-illustが余白を兼ねるため */
  margin-bottom: 146px; /* 関連リンクセクションとの余白 */
}

.top-news {
  position: relative;
  scroll-margin-top: 90px; /* フッターからの#newsアンカー遷移時、固定ヘッダーに隠れないように */
}

/* -----------------------------------------------
   セクション見出し（共通パターン）
   日本語：Bold 18px 白
   英語　：Lexend Exa Regular 46px 白
----------------------------------------------- */
.top-contents__head {
  position: relative;
  z-index: 2; /* position指定された芝(position:absolute)より確実に手前に来るように */
}

.top-contents__head,
.top-link__head {
  text-align: center;
  margin-bottom: 56px;
}

.top-contents__head-ja,
.top-link__head-ja {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: var(--fs-md); /* 18px */
  color: var(--color-white);
  margin: 0 0 4px;
}

.top-contents__head-en,
.top-link__head-en {
  font-family: 'Lexend Exa', sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--color-white);
  margin: 0;
  letter-spacing: 1px;
}

/* =================================================
   8. CONTENTSセクション
================================================= */
.top-contents__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-contents__item {
  position: relative;
  width: calc((100% - 80px) / 3); /* gap:40px×2箇所ぶんを差し引いた3等分。3分割のまま比例縮小する */
  max-width: 330px;
}

.top-contents__card {
  position: relative;
  z-index: 4; /* ホバーキャラ（z-index:3）より必ず手前に来るようにする */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 330px;
  padding-bottom: 30px;
  background: var(--color-white);
  border: 8px solid transparent;
  border-radius: 30px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Figma上にホバー指定なし。操作対象であることが伝わるよう実装側で追加
   ※opacityは下げず、バナーと同じオレンジボーダーで表現 */
.top-contents__card:hover {
  opacity: 1;
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16);
  border-color: orange;
}

/* ホバー時にカードから上へ飛び出すキャラクターイラスト
   ※カードより前(DOM上の兄弟要素)に配置し、通常時はカードの裏に隠れている */
.top-contents__hover-char {
  position: absolute;
  z-index: 3; /* 見出し（z-index:2）より手前に。ただしカードよりは奥に留める */
  display: block;
  left: 50%;
  width: 286px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 260px) scale(0.9);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease-out;
}

.top-contents__hover-char:has(+ .top-contents__card:hover) {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.top-contents__hover-char--haku {
  top: -220px;
}

.top-contents__hover-char--kenzo {
  top: -220px;
}

.top-contents__hover-char--horizo {
  top: -190px;
}

.top-contents__icon-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 170px; /* カード上端48px～テキスト開始位置までの間隔（Figma仕様）を、アイコンの実寸に依存せず確保 */
  margin-top: 48px; /* カード上端から48px（Figma仕様） */
}

.top-contents__icon {
  display: block;
}

.top-contents__name {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 84px; /* 2行分の高さ（line-height 1.4 × 28px × 2行 ≒ 78.4px）を基準に、多少余裕を持たせて統一。
                   1行のテキストでも同じ高さを確保することで、カードごとに文字位置がズレないようにする */
  margin: 0;
  padding-top: 21px; /* 1行時、84px高さの中で縦中央になるよう上詰め（2行時は下の--multilineで0にリセット） */
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  color: var(--color-text);
  text-align: center;
}

/* タブレット幅（769〜999px）：カード幅がPC想定(330px)より狭くなる帯域のため、
   font-sizeをvwで比例縮小し、1行テキストが折り返さず収まるようにする */
@media screen and (min-width: 769px) and (max-width: 999px) {
  .top-contents__name {
    font-size: clamp(20px, 3vw, 28px);
  }
}

/* =================================================
   9. イラスト装飾セクション（CONTENTS直下の帯）
   ※明示的なセクション枠なし。背景楕円＋イラスト群を
     ページ全幅で配置。x座標はFigma仕様の値をそのまま使用。
================================================= */
.top-illust {
  position: relative;
  width: 100%;
  height: 445px;
  background: #89B226; /* CONTENTSと同色でシームレスに継続、丘(楕円)が下から浮き上がって見える */
}

.top-illust__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
}

.top-illust__ellipse {
  position: absolute;
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
  width: max(1846px, calc(100vw + 200px));
  height: 588px;
  border-radius: 50%;
  background: var(--color-green);
}

.top-illust img {
  position: absolute;
  display: block;
}

/* Group237 */
.top-illust__bill01 { width: 135px; height: 191px; left: 2.344%; top: 132px; }
/* Group239 */
.top-illust__bill02 { width: 127px; height: 189px; left: 32.109%; top: 59px; }
/* Group236 */
.top-illust__bill03 { width: 182px; height: 204px; right: 3.125%; top: 123px; }
/* ほりぞーくん（土山の上に重ねる） */
.top-illust__hori01 {
  width: 208px; height: 293px; left: 50%; top: 77px; z-index: 1;
  transform: translateX(-50%);
  transform-origin: center;
  animation: illust-hori01-action 4.5s ease-in-out infinite;
}
/* Group75（土山） */
.top-illust__hori02 { width: 221px; height: 103px; left: 50%; transform: translateX(-50%); top: 277px; z-index: 2; }
.top-illust__car01   { width: 248px; height: 100px; left: 11.484%; top: 183px;
  animation: illust-car01-sway 2.2s ease-in-out infinite;
  transform-origin: center bottom;
}
.top-illust__car02   { width: 269px; height: 90px;  right: 19.141%; top: 199px;
  animation: illust-car02-bob 0.5s ease-in-out infinite;
}

/* car01：左右に傾くように揺れる */
@keyframes illust-car01-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-5deg); }
}

/* car02：重機がガタガタ動くイメージ */
@keyframes illust-car02-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* hori01（ほりぞーくん）：穴に引き込まれてから飛び出し、左右にキョロキョロ */
@keyframes illust-hori01-action {
  0%   { transform: translateX(-50%) translateY(0)    scaleX(1); }
  10%  { transform: translateX(-50%) translateY(36px) scaleX(1); } /* 下に引き込まれる（イーズ） */
  24%  { transform: translateX(-50%) translateY(0)     scaleX(1); } /* 上に飛び出す */
  38%  { transform: translateX(-50%) translateY(0)     scaleX(1); } /* 静止 */
  48%  { transform: translateX(-50%) translateY(0)     scaleX(-1); } /* キョロ（反転） */
  58%  { transform: translateX(-50%) translateY(0)     scaleX(1); }
  68%  { transform: translateX(-50%) translateY(0)     scaleX(-1); } /* キョロ（反転） */
  80%  { transform: translateX(-50%) translateY(0)     scaleX(1); }
  100% { transform: translateX(-50%) translateY(0)     scaleX(1); }
}

/* 木・芝の背景イラスト（イラスト帯／紹介バナー／LINK／NEWSのいずれでも使用） */
.top-illust__tree {
  position: absolute;
  display: block;
  z-index: 3;
}

.top-illust__grass {
  position: absolute;
  display: block;
  width: 30.48px;
  height: 30.75px;
  z-index: 4;
}

/* PC/SPで出し分け（pxの座標セットが異なるため要素ごと別に出力）
   ※`.top-illust img{display:block}`等、詳細度の高いルールに負けないようimportantを付与 */
.is-pc-only { display: block !important; }
.is-sp-only { display: none !important; }

/* =================================================
   10. 紹介バナー（フジタってどんな会社？ / 保護者のみなさまへ）
================================================= */
.top-intro__list {
  display: flex;
  flex-direction: column;
  gap: 139px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 982px;
}

.top-intro__card {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 982px;
  height: 387px;
  background: var(--color-white);
  border: 2px solid var(--color-green);
  border-radius: 60px;
  text-decoration: none;
  transition: border-color var(--transition), border-width var(--transition);
}

/* ホバー時はopacityを下げず、ボーダー色の変化で気付けるようにする
   （a:hoverのopacity低下を打ち消す） */
.top-intro__card:hover {
  opacity: 1;
  border: 8px solid orange;
}

/* バナー2自身は常に最前面（ハク・バナー1より手前） */
.top-intro__card--photo-right {
  z-index: 7;
}

.top-intro__item {
  position: relative;
  z-index: 2; /* .top-illust__frame(z-index:1)より手前。内部のcard/hover-charの重なりはこの中で独立して機能する */
}

/* ホバー時にスライドインするキャラクターイラスト
   ※カードより前(DOM上の兄弟要素)に配置し、カードの白い背面に隠れる形にしている。
     通常時は写真の裏あたりに位置し、ホバー時にそこから大きくスライドして現れる。
     ホバー判定は:has()でカード自体を基準にする（はみ出した部分での判定外れを防止） */
.top-intro__hover-char {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  z-index: 1; /* 通常時は自分のカードの裏 */
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease-out, z-index 0s;
}

.top-intro__hover-char:has(+ .top-intro__card:hover) {
  opacity: 1;
}

/* バナー1：けんぞー（写真の裏→左上へスライド）※z-indexは常に1のまま変更しない */
.top-intro__hover-char--kenzo {
  top: -200px;
  left: -65px;
  width: 208px;
  height: 269px;
  transform: translate(212px, 231.5px) scale(0.9); /* 写真中央あたりに隠れている位置 */
}

.top-intro__hover-char--kenzo:has(+ .top-intro__card:hover) {
  transform: translate(0, 0) scale(1);
}

/* バナー2：ハク（写真の裏→右上へスライド／バナー1に重なる）
   優先順位：バナー2(自分のカード) > ハク > バナー1 > けんぞー */
.top-intro__hover-char--haku {
  top: -177px;
  right: -80px;
  width: 208px;
  height: 239px;
  transform: translate(-228px, 223.5px) scale(0.9); /* 写真中央あたりに隠れている位置 */
}

.top-intro__hover-char--haku:has(+ .top-intro__card:hover) {
  z-index: 6; /* バナー1(z-index:5)より手前、バナー2(z-index:7)より裏 */
  transform: translate(0, 0) scale(1);
}

.top-intro__photo {
  position: absolute;
  bottom: 19px;
  width: 459px;
  height: 404px;
}

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

/* バナー1：写真左（左22px・下19px・上に36pxはみ出し） */
.top-intro__card--photo-left .top-intro__photo {
  left: 22px;
}

.top-intro__card--photo-left .top-intro__body {
  margin-left: 516px; /* 22 + 459 + 35(gap) */
}

/* バナー2：写真右（右22px・下19px・上に36pxはみ出し） */
.top-intro__card--photo-right .top-intro__photo {
  right: 22px;
}

.top-intro__card--photo-right .top-intro__body {
  margin-left: auto;
  margin-right: 516px;
  text-align: right;
}

.top-intro__body {
  width: 420px;
}

.top-intro__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.top-intro__logo img {
  width: 178px;
  height: 95px;
}

.top-intro__heading {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 36px;
  text-align: center;
  margin: 0 0 12px;
}

.top-intro__heading .is-green {
  color: var(--color-green);
}

.top-intro__heading .is-gray {
  color: var(--color-text);
}

.top-intro__heading .is-small {
  font-size: 22px;
  color: var(--color-text);
}

.top-intro__text {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.51px;
  line-height: 38px;
  color: var(--color-text);
  text-align: left;
  margin: 0 0 31px;
}

.top-intro__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 162.71px;
  height: 34px;
  margin: 0 auto;
  background: var(--color-green);
  border-radius: 40px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 16px;
}

.top-intro__btn-label {
  white-space: nowrap;
  line-height: 1;
}

.top-intro__btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21.86px;
  height: 21.86px;
  border-radius: 50%;
  background: var(--color-white);
  flex-shrink: 0;
}

.top-intro__btn-arrow img {
  width: 4px;
  height: 8px;
}

/* =================================================
   11. 関連リンク（LINK）セクション
================================================= */
.top-link__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 22px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 798px; /* 251px×3 + 22px×2 */
}

.top-link__banner {
  position: relative;
  z-index: 5;
  display: block;
  width: 251px;
  height: 106px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition), box-shadow var(--transition);
}

.top-link__banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
}

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

/* =================================================
   12. 築育ニュースセクション
================================================= */
.top-news__head {
  text-align: center;
  margin-bottom: 48px;
}

.top-news__head-en {
  font-family: 'Lexend Exa', sans-serif;
  font-weight: 400;
  font-size: var(--fs-lg); /* 20px：CONTENTS/LINKの英語より小さいアイブロウ想定 */
  color: var(--color-white);
  letter-spacing: 2px;
  margin: 0 0 8px;
}

.top-news__head-ja {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 48px;
  line-height: 67px;
  color: var(--color-white);
  margin: 0;
}

.top-news__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 982px;
}

.top-news__item {
  position: relative;
  z-index: 5;
  display: block;
  height: 76px;
  background: var(--color-white);
  border-radius: 38px;
  box-shadow: 0 4px 14px rgba(23, 62, 105, 0.1);
}

.top-news__body {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 23px;
}

.top-news__date {
  white-space: nowrap;
  font-family: 'Lexend Exa', sans-serif;
  font-size: var(--fs-base); /* 16px */
  color: #767676;
}

.top-news__divider {
  width: 1px;
  height: 36px;
  background: #d9d9d9;
}

.top-news__title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: var(--fs-xl); /* 24px */
  line-height: 50px;
  letter-spacing: -0.3125px;
  color: var(--color-green);
  white-space: nowrap;
}

/* =================================================
   0. MVセクション（トップビジュアル）
================================================= */
.site-header {
  background: transparent; /* TOPページのみ：MVの上に乗るため透過 */
}

.page-content {
  padding-top: 0; /* TOPページはヘッダーが透過でMVに重なるため、固定ヘッダー分の余白は不要 */
}

.top-mv {
  position: relative;
  width: 100%;
  height: 900px; /* オブジェクトの見切れ防止のため確保 */
  overflow: hidden;
}

.top-mv__sky {
  position: absolute;
  inset: 0;
  background: #b1e0f8;
}

.top-mv__ground {
  position: absolute;
  left: 0;
  right: 0;
  top: 587px;
  bottom: 0; /* セクション最下部まで届かせ、CONTENTSとの隙間を解消 */
  background: #89b226;
}

.top-mv__frame {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  z-index: 10; /* railなどの.top-mv直下要素より確実に手前。かつスタッキングコンテキストを確立し、内部の負のz-indexがground/sky側まで漏れないようにする */
  /* 画面幅が1280pxを超えた分の片側余白。1280px以下では0になる */
  --mv-edge-margin: max(0px, calc(50vw - 640px));
}

.top-mv__frame img,
.top-mv__frame > * {
  position: absolute;
}

.top-mv__cloud { width: 70px; }

.top-mv__grass {
  width: 30.48px;
  height: 30.75px;
  z-index: -2; /* MV内の全画像（アニメーションする/しない問わず）より背面に */
}

.top-mv__load,
.top-mv__rail {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-repeat: repeat-x;
}

.top-mv__rail {
  height: 47px;
  z-index: 2; /* ビルより手前に */
  background-image: url('../img/top/mv-rail.svg');
  background-size: 1280px 47px;
}

.top-mv__load {
  height: 60px;
  background-image: url('../img/top/mv-load.svg');
  background-size: 1280px 60px;
}

.top-mv__bill {
  width: 1273px;
}

.top-mv__roop-bill {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 254px;
  background-repeat: repeat-x;
  background-image: url('../img/top/mv-roop-bill.svg');
  background-size: 978px 254px;
  z-index: 1; /* 青空より手前。.top-mv__frame（z-index:10）より奥なのでmv-billより確実に奥になる */
}

.top-mv__train {
  width: 300px; /* 仮サイズ。実寸は869x38、表示サイズ未確定 */
  animation: mv-train-drive-x 16s linear infinite;
}

.top-mv__baloon {
  width: 32px;
  animation: mv-float-y 3s ease-in-out infinite;
}

.top-mv__fly {
  width: 158px;
  animation: mv-fly-drift 26s linear infinite;
}

.top-mv__air {
  width: 180px; /* 仮サイズ */
  z-index: -1; /* mv-bill(z-index未指定=auto)より奥に */
  animation: mv-air-drift 20s linear infinite;
}

.top-mv__machine01 {
  z-index: 3; /* レールより手前に */
}

.top-mv__machine01-body,
.top-mv__machine01-arm {
  position: absolute;
}

.top-mv__machine01-body {
  z-index: 1;
}

.top-mv__machine01-arm {
  z-index: 2; /* 本体より手前に */
  transform-origin: 86.89% 31.39%; /* アームの肩の支点（元SVGとのピクセル照合による確定値） */
  animation: mv-dig 2.4s ease-in-out infinite;
}

@keyframes mv-dig {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-10deg); }
}

.top-mv__machine02 {
  width: 280px; /* 仮サイズ */
  z-index: 4; /* car01〜03(z-index:3)より手前に */
  animation: mv-vibrate 0.4s ease-in-out infinite;
}

.top-mv__car {
  width: 116px;
  z-index: 3; /* レールより手前に */
  animation: mv-drive-x 14s linear infinite;
}

.top-mv__car--reverse {
  animation: mv-drive-x-reverse 14s linear infinite;
}

.top-mv__goods01 {
  width: 38px;
}

.top-mv__goods02 {
  width: 112px;
}

.top-mv__char-link {
  display: block;
  cursor: pointer;
}

/* キャラリンクは<a>のため、グローバルのa:hover{opacity:0.8}が効いて
   キャラ画像や子の吹き出し(opacity:1)まで薄くなってしまう。これを打ち消し、
   ホバー時も不透明度を1に保つ（吹き出しはホバーで0→1表示） */
.top-mv__char-link:hover,
.top-mv__char-link:focus-visible {
  opacity: 1;
}

.top-mv__char-link img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

.top-mv__char-link--horizo {
  width: 150px;
  z-index: 5; /* car(z:3)・machine02(z:4)より手前に。PC/SPともこの<div>自体が位置指定要素 */
}

.top-mv__horizo {
  animation: mv-hop 1.8s ease-in-out infinite;
}

.top-mv__haku {
  animation: mv-sway-x 3s ease-in-out infinite;
}

.top-mv__kenzo {
  animation: mv-float-y 2.5s ease-in-out infinite;
}

/* ホバー吹き出し（PC限定・幅1001px以上のみ有効）
   枠は指定画像（block-voice.webp）を使用し、文字サイズはvw基準で
   吹き出し内に収まるよう可変にする */
.top-mv__speech {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 6px;
  width: 320px;
  aspect-ratio: 604 / 282;
  background: url('../img/top/block-voice.webp') no-repeat center / 100% 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6% 12% 6% 15%; /* 左右の丸み・尻尾部分に文字がかからないための余白 */
  color: #009661;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(10px, 1.1vw, 18px);
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 9999; /* サイト内で最優先。必ず最前面に表示する */
}

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

/* ハクは画面右寄りに配置されているため、吹き出しを左側に表示（見切れ防止）。
   背景（尻尾込み）だけ左右反転させ、文字は読めるように打ち消す */
.top-mv__char-link--haku .top-mv__speech {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 6px;
  transform: translateY(-50%) scaleX(-1);
}

.top-mv__char-link--haku .top-mv__speech-text {
  display: inline-block;
  transform: scaleX(-1);
}

@media screen and (min-width: 1281px) {
  .top-mv__speech {
    font-size: 18px; /* コンテナ最大幅(1280px)を超えたらvwでの拡大を止める */
  }
}

@media screen and (min-width: 1001px) {
  .top-mv__char-link:hover .top-mv__speech,
  .top-mv__char-link:focus-visible .top-mv__speech {
    opacity: 1;
    visibility: visible;
  }
}

/* SP：タップで吹き出し表示（character-bubble.jsでis-openをトグル） */
@media screen and (max-width: 768px) {
  .top-mv__char-link.is-open .top-mv__speech {
    opacity: 1;
    visibility: visible;
  }

  .top-mv__speech {
    width: 200px;
  }
}

/* 車・電車：画面左端の外側から右端の外側へループ移動 */
@keyframes mv-drive-x {
  0%   { transform: translateX(calc(-300px - var(--mv-edge-margin))); }
  100% { transform: translateX(calc(1500px + var(--mv-edge-margin))); }
}

/* car03：右端の外側から左端の外側へ（逆方向） */
@keyframes mv-drive-x-reverse {
  0%   { transform: translateX(calc(1500px + var(--mv-edge-margin))); }
  100% { transform: translateX(calc(-300px - var(--mv-edge-margin))); }
}

/* 電車：car/flyと同じ仕組みだが、画像実幅(868.7px)が車より大きいため
   開始バッファを車用(-300px)より広く取り、先頭が完全に隠れた状態から出てくるようにする */
@keyframes mv-train-drive-x {
  0%   { transform: translateX(calc(-950px - var(--mv-edge-margin))); }
  100% { transform: translateX(calc(1500px + var(--mv-edge-margin))); }
}

/* mv-air：左下の画面外から右上の画面外へ斜めに移動するループ（train/flyと同じ無限ループ構造、方向のみ斜め） */
@keyframes mv-air-drift {
  0%   { transform: translate(calc(-300px - var(--mv-edge-margin)), 280px); }
  100% { transform: translate(calc(1500px + var(--mv-edge-margin)), -150px); }
}

/* バルーン・けんぞー：上下にふわふわ */
@keyframes mv-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* 飛行船：画面右端の外側から左端の外側へループ移動しつつ、時折ふわふわ揺れる */
@keyframes mv-fly-drift {
  0%   { transform: translate(calc(1450px + var(--mv-edge-margin)), 0); }
  12%  { transform: translate(calc(1200px + var(--mv-edge-margin)), -8px); }
  24%  { transform: translate(calc(950px + var(--mv-edge-margin)), 6px); }
  38%  { transform: translate(calc(680px + var(--mv-edge-margin)), -10px); }
  50%  { transform: translate(calc(420px + var(--mv-edge-margin)), 4px); }
  64%  { transform: translate(calc(150px + var(--mv-edge-margin)), -6px); }
  78%  { transform: translate(calc(-100px + var(--mv-edge-margin)), 8px); }
  100% { transform: translate(calc(-350px + var(--mv-edge-margin)), 0); }
}

/* ハク：左右にeaseで揺れる（振幅を拡大） */
@keyframes mv-sway-x {
  0%, 100% { transform: translateX(-45px); }
  50%      { transform: translateX(45px); }
}

/* ほりぞーくん：ぴょんぴょん跳ねる */
@keyframes mv-hop {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-26px); }
  40%      { transform: translateY(0); }
  55%      { transform: translateY(-10px); }
  70%, 100% { transform: translateY(0); }
}

/* ショベルカー(machine02)：小刻みな振動 */
@keyframes mv-vibrate {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.top-mv__logo {
  height: auto;
  transform: translateX(-50%);
}

.top-mv__catch {
  position: absolute;
  left: 50%;
  top: 227px;
  width: 895px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 40px;
  color: #1c5191;
  text-align: center;
  /* 白縁。-webkit-text-strokeは主要ブラウザ(Chrome/Edge/Safari/Firefox)で対応 */
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
}

.top-mv__coin-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #9b9b9c;
  color: #fff;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
}

/* -----------------------------------------------
   レスポンシブ（768px以下 = SP）
----------------------------------------------- */
@media screen and (max-width: 768px) {
  .is-pc-only { display: none !important; }
  .is-sp-only { display: block !important; }

  .top-mv {
    height: 850px; /* SP要素の最大下端(ほりぞーくん831px・コーン830.2px)を収める。PCのoverflow:hiddenはそのまま有効 */
  }

  .top-mv__frame {
    max-width: 390px;
  }

  .top-mv__ground {
    top: 525px; /* PC(587px)から-62px。mv-billとの隙間を解消 */
  }

  .top-mv__rail {
    top: 532px !important; /* PC共通値(594px)からground同様-62pxシフト。インライン指定を上書きするため!important */
  }

  .top-mv__load {
    top: 628px !important; /* PC共通値(690px)から-62pxシフト */
  }

  .top-mv__catch {
    left: 50%;
    top: 161.9px;
    width: 367px;
    height: 50px;
    transform: translateX(-50%);
    font-size: 20px;
    line-height: 50px;
    white-space: nowrap; /* Figma確定：改行なしの1行 */
    -webkit-text-stroke: 4px #fff; /* PC(8px/40px)の比率に合わせて縮小。要確認 */
  }

  .top-illust__tree { z-index: 4; }
  .top-illust__grass { z-index: 3; }

  .top-contents,
  .top-news {
    padding-top: 64px;
  }

  .top-news {
    margin-top: 50px; /* 関連リンクとの間隔 */
  }

  .top-link {
    padding-top: 100px;
  }

  .top-intro {
    margin-bottom: 65px; /* 関連リンクセクションとの余白（SP） */
  }

  .top-contents__head-en,
  .top-link__head-en {
    font-size: 36px;
  }

  .top-news__head-ja {
    font-size: 36px;
    line-height: 1.4;
  }

  /* CONTENTS：縦積み */
  .top-contents__list {
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }

  .top-contents__item {
    width: 100%;
    max-width: 330px;
  }

  /* イラスト装飾セクション
     ※SP側の各イラストのレイヤー対応はFigma仕様書のグループ名から
       アスペクト比で推定したものです。実機確認の上ズレがあれば
       座標値を調整してください。 */
  .top-illust {
    height: 417px;
  }

  .top-illust__frame {
    max-width: 390px;
  }

  .top-illust__ellipse {
    top: 153px;
    width: max(848px, calc(100vw + 100px));
    height: 588px;
  }

  .top-illust__bill01 { width: 42px; height: 59px; left: 1.026%;  top: 144px; }
  .top-illust__bill02 { width: 39px; height: 58px; left: 12.564%; top: 120px; }
  .top-illust__bill03 { width: 56px; height: 63px; left: 85.897%; top: 133px; }
  .top-illust__car01  { width: 97px; height: 38px; left: 1.538%;  top: 195px; }
  .top-illust__car02  { width: 83px; height: 27px; left: 62.821%; top: 157px; }
  .top-illust__hori01 { width: 132px; height: 186px; left: 50%; transform: translateX(-50%); top: 29px; }
  .top-illust__hori02 { width: 140px; height: 65px;  left: 50%; transform: translateX(-50%); top: 166px; }

  /* 紹介バナー：写真上＋テキスト下の縦積み（左右交互配置は解除） */
  .top-intro__list {
    gap: 83px;
    max-width: 336px;
  }

  .top-intro__card,
  .top-intro__card--photo-right {
    flex-direction: column;
    align-items: center;
    width: 336px;
    height: auto;
    border-radius: 30px;
    padding: 0 0 40px;
    overflow: visible;
  }

  .top-intro__card--photo-left .top-intro__photo,
  .top-intro__card--photo-right .top-intro__photo {
    position: static;
    flex: none;
    width: 311px;
    height: 274px;
    margin: 10px 0 24px;
  }

  .top-intro__card--photo-left .top-intro__body,
  .top-intro__card--photo-right .top-intro__body {
    margin: 0;
    text-align: center;
  }

  .top-intro__body {
    width: 286px;
  }

  /* 保護者のみなさまへ：見出しのみ上マージン60px */
  .top-intro__card--photo-right .top-intro__heading {
    margin-top: 0px;
  }

  .top-intro__card--photo-left .top-intro__logo,
  .top-intro__card--photo-right .top-intro__logo {
    justify-content: center;
  }

  .top-intro__heading {
    font-size: 26px;
    text-align: center;
  }

  .top-intro__btn {
    width: 248.86px;
    height: 52px;
    font-size: 18px;
    margin: 0 auto;
  }

  .top-intro__btn-arrow {
    width: 33.43px;
    height: 33.43px;
  }

  .top-intro__btn-arrow img {
    width: 6px;
    height: 12px;
  }

  /* LINK：縦積み */
  .top-link__list {
    flex-direction: column;
    align-items: center;
    max-width: none;
    gap: 37px;
  }

  .top-link__banner {
    width: 336px;
    height: 142px;
  }

  /* NEWS：縦積み（日付→タイトルの順） */
  .top-news__list {
    max-width: none;
    gap: 16px;
  }

  .top-news__item {
    position: relative;
    height: auto;
    min-height: 125px;
    width: 100%;
    max-width: 345px;
    margin: 0 auto;
    border-radius: 19px;
  }

  .top-news__body {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    padding: 20px 60px 20px 16px;
  }

  .top-news__divider {
    display: none;
  }

  .top-news__title {
    font-size: var(--fs-lg); /* 20px */
    line-height: 30px;
    white-space: normal;
  }
}

/* -----------------------------------------------
   中間ブレークポイント（679px〜1069px）
   .top-intro__cardの固定幅982pxが原因で右に余白ができるため、
   このレンジでは.top-intro__itemをSPと同じレイアウトにする
----------------------------------------------- */
@media screen and (min-width: 679px) and (max-width: 1069px) {
  .top-intro__list {
    gap: 83px;
    max-width: 670px;
  }

  .top-intro__card,
  .top-intro__card--photo-right {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 670px;
    height: auto;
    border-radius: 30px;
    padding: 0 0 40px;
    overflow: visible;
  }

  .top-intro__card--photo-left .top-intro__photo,
  .top-intro__card--photo-right .top-intro__photo {
    position: static;
    flex: none;
    width: 311px;
    height: 274px;
    margin: -46px 0 24px;
  }

  .top-intro__card--photo-left .top-intro__body,
  .top-intro__card--photo-right .top-intro__body {
    margin: 0;
    text-align: center;
  }

  .top-intro__body {
    width: 286px;
  }

  .top-intro__card--photo-right .top-intro__heading {
    margin-top: 60px;
  }

  .top-intro__card--photo-left .top-intro__logo,
  .top-intro__card--photo-right .top-intro__logo {
    justify-content: center;
  }

  .top-intro__heading {
    font-size: 26px;
    text-align: center;
  }

  .top-intro__btn {
    width: 248.86px;
    height: 52px;
    font-size: 18px;
    margin: 0 auto;
  }

  .top-intro__btn-arrow {
    width: 33.43px;
    height: 33.43px;
  }

  .top-intro__btn-arrow img {
    width: 6px;
    height: 12px;
  }
}