/* ============================================================
   /school のモーション（試作・ド派手版）

   ランタイム JavaScript は使わず、CSS だけで動かしている。
     1. オープニング …… 時間で動くアニメーション。黄の画面でロゴがゆっくり揺れ →
                        水色と白の円が広がって画面を覆い（バーン）→ ヒーローの要素が
                        はじけ出たり飛び込んだりして入ってくる。全ブラウザで動く。
                        ローディングは「動きが多い」との意見で長く・ゆっくりにしたが、
                        ヒーローの登場はオーナーの希望で派手な動きのままにしてある。
                        ヒーロー側の delay はローディングが消える 2.9〜3.5 秒に合わせている。
     2. スクロール連動 … Scroll-driven Animations（animation-timeline）。
                        非対応ブラウザでは @supports で丸ごと無効になり、静止表示になる。
     3. 流れる帯 ……… 時間で動く無限ループ。

   「視差効果を減らす」設定の人には、ローディングも含めて何も動かさない。
   位置指定や既存の transform とぶつからないよう、動かすのは独立プロパティの
   translate / scale / rotate だけにしている。

   外すときは school/index.html の <link> 1行と、.loader / .ticker / .illust の
   マークアップ、.shero__line の span、.shero__visual の div を消せば元に戻る
   （.shero__visual を消す場合は school.css の 860px 以下の order も .shero__photo に戻す）。
   ============================================================ */

/* 横に飛んでくる要素がページの横スクロールを生まないように */
main { overflow-x: clip; }

/* ===== 装飾の丸（section--alt に足す分） ===== */
#why > .wrap, #course > .wrap, #trial > .wrap { position: relative; z-index: 1; }
#why::after, #course::after, #trial::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  pointer-events: none;
}
#why::after {
  width: clamp(160px, 22vw, 320px);
  background: var(--sky);
  opacity: .6;
  right: clamp(-150px, -8vw, -60px);
  top: 18%;
}
#course::after {
  width: clamp(110px, 14vw, 200px);
  background: var(--accent);
  opacity: .7;
  left: clamp(-80px, -5vw, -36px);
  top: 12%;
}
#trial::after {
  width: clamp(140px, 18vw, 260px);
  background: var(--accent-soft);
  left: clamp(-120px, -7vw, -44px);
  bottom: 8%;
}

/* ===== イラスト（会社概要と同じ素材。images/illust/ に1点ずつ切り出してある） =====
   どれも装飾なので alt は空。動かない環境でも配置はそのまま残る。 */
.illust { display: block; height: auto; pointer-events: none; user-select: none; }

.shero__sun {
  position: absolute;
  width: clamp(56px, 7vw, 92px);
  top: clamp(18px, 3vw, 34px);
  right: clamp(150px, 26vw, 380px);
}
.shero__rocket {
  position: absolute;
  width: clamp(90px, 12vw, 160px);
  top: clamp(60px, 9vw, 120px);
  right: clamp(8px, 4vw, 60px);
  z-index: 2;
}
.shero__visual { position: relative; }
.shero__kid {
  position: absolute;
  width: clamp(110px, 14vw, 180px);
  left: clamp(-60px, -4vw, -24px);
  bottom: clamp(-56px, -4vw, -28px);
}

.section__head { position: relative; --head-illust: clamp(56px, 7vw, 88px); }
.section__head:has(.head__illust--lg) { --head-illust: clamp(96px, 13vw, 170px); }
.head__illust {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--head-illust);
}
.head__illust--lg { bottom: -12px; }
/* イラストは見出しの右下に重ねて置くので、見出しの文字はイラストの手前で折り返させる
   （スマホ幅で「無料体験教室の、当日の流れ」がイラストに隠れていた） */
.section__head:has(.head__illust) .section__title { padding-right: calc(var(--head-illust) + 8px); }

.pillars li { position: relative; }
.pillars__illust {
  position: absolute;
  top: -12px;
  right: 0;
  width: auto;
  height: clamp(72px, 8vw, 96px);
}

.curriculum__facts { position: relative; }
.curriculum__books {
  position: absolute;
  width: clamp(80px, 9vw, 110px);
  top: -54px;
  right: 18px;
}

.course__illust { width: auto; height: 104px; margin: -4px auto 16px; }

.lab > div:last-child { position: relative; }
.lab__kid {
  width: clamp(150px, 18vw, 220px);
  margin: 0 0 18px auto;
}

.contact__kids,
.contact__robot { position: absolute; bottom: 24px; z-index: 1; }
.contact__kids  { width: clamp(120px, 17vw, 230px); left: clamp(8px, 5vw, 80px); }
.contact__robot { width: clamp(80px, 10vw, 140px); right: clamp(12px, 8vw, 140px); bottom: clamp(60px, 9vw, 120px); }

@media (max-width: 860px) {
  .shero__sun { right: 40%; }
  /* 1カラムになると本文のすぐ下に箱が来るので、上にはみ出す本の分だけ空ける */
  .curriculum__facts { margin-top: 40px; }
  .shero__rocket { top: 14px; }
}
@media (max-width: 620px) {
  .shero__sun { display: none; }
  .shero__rocket { width: 72px; top: 8px; right: 8px; }
  .shero__kid { width: 96px; left: -8px; bottom: -34px; }
  .section__head:has(.head__illust--lg) { --head-illust: 84px; }
  .pillars__illust { height: 64px; }
  .curriculum__books { top: -40px; width: 72px; }
  /* スマホでは本文と重ならないよう、申込み欄のイラストは下に並べる */
  .contact { padding-bottom: 150px; }
  .contact__kids { width: 130px; left: 16px; bottom: 16px; }
  .contact__robot { width: 84px; right: 24px; bottom: 30px; }
}

/* ===== ローディング（動かない環境では表示しない） ===== */
.loader { display: none; }

/* ===== 流れる帯 ===== */
.ticker {
  background: var(--bg);
  padding-block: clamp(28px, 5vw, 56px);
  overflow: hidden;
}
.ticker--sky { background: var(--surface); }
.ticker__track {
  display: flex;
  width: max-content;
  background: var(--ink);
  color: var(--accent);
  rotate: -2.5deg;
  scale: 1.06;
}
.ticker--sky .ticker__track { background: var(--accent); color: var(--ink); rotate: 2deg; }
.ticker__track p {
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 72px);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: pre;   /* 末尾の空白を残して、2枚の継ぎ目を詰まらせない */
  padding: .3em 0;
}

@media (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------------------------
     1. オープニング（時間で動く）
     ------------------------------------------------------------ */
  .loader {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--accent);
    overflow: hidden;
    pointer-events: none;
    animation: loader-out .6s ease-out 2.9s forwards;
  }
  .loader__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 22px;
    animation: loader-center-out .5s ease-in 1.8s forwards;
  }
  .loader__dots { display: flex; gap: 14px; }
  .loader__dots span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink);
    animation: dot-bounce .7s ease-in-out infinite alternate;
  }
  .loader__dots span:nth-child(2) { background: var(--bg); animation-delay: .23s; }
  .loader__dots span:nth-child(3) { animation-delay: .46s; }
  .loader__word {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(11px, 1.6vw, 14px);
    letter-spacing: 0.3em;
    color: var(--ink);
    animation: word-in 1s cubic-bezier(.2, .8, .2, 1) .3s both;
  }
  /* 中心から弾ける円。水色 → ページの地色（白）の順に画面を覆い、そのまま消える */
  .loader__burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    aspect-ratio: 1;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: var(--sky);
    scale: 0;
    animation: burst .9s cubic-bezier(.5, 0, .3, 1) 1.9s forwards;
  }
  .loader__burst--2 { background: var(--bg); animation-delay: 2.2s; }

  /* ヘッダーは上から落ちてくる（ローディングが消え始める 2.9 秒の直後から） */
  .header { animation: drop-in .6s cubic-bezier(.2, 1.4, .4, 1) 3s both; }

  /* ヒーロー: 丸がはじけ出て、見出しが1行ずつ浮き上がる。
     見出しの叩きつけ（と着地の画面の揺れ）は 2026-09-27 に外した */
  .shero__badge { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) 3.05s both; }
  .shero__line { display: inline-block; animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .shero__line:nth-of-type(1) { animation-delay: 3.15s; }
  .shero__line:nth-of-type(2) { animation-delay: 3.3s; }
  /* マーカーは見出しが出たあとに左から引く */
  .shero__title mark {
    background-size: 0% 100%;
    background-repeat: no-repeat;
    animation: marker .5s ease-out 3.75s forwards;
  }
  .shero__lead    { animation: rise .6s cubic-bezier(.2, .8, .2, 1) 3.55s both; }
  .shero__actions { animation: rise .6s cubic-bezier(.2, .8, .2, 1) 3.65s both; }
  .shero__photo   { animation: photo-in .8s cubic-bezier(.2, 1.4, .4, 1) 3.4s both; }

  /* 申込みボタンはずっと小さく脈打たせる */
  .contact .btn--primary { animation: heartbeat 1.6s ease-in-out infinite; }
  .shero__actions .btn--primary { animation: heartbeat 1.6s ease-in-out 4.45s infinite; }

  /* ローディングの会社ロゴ。ロゴの「ha」は黄色で、黄の地に置くと消えるため、
     白地ごと丸く切り抜いてバッジにする（画像は白背景・ロゴが中央にある正方形） */
  .loader__logo {
    width: clamp(120px, 16vw, 168px);
    height: auto;
    border-radius: 50%;
    box-shadow: 0 10px 0 color-mix(in srgb, var(--ink) 12%, transparent);
    animation: logo-in .9s cubic-bezier(.3, 1.3, .5, 1) .1s both, sway 1.2s ease-in-out 1s infinite alternate;
  }

  /* ヒーローのイラスト: 太陽は回り続け、ロケットは画面外から飛び込み、
     男の子は写真の角から跳ねて出てくる */
  .shero__sun {
    animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) 3.35s both, spin 14s linear 3.95s infinite;
  }
  .shero__rocket {
    animation: rocket-in 1.1s cubic-bezier(.3, .6, .2, 1) 3.45s both, bob 2.4s ease-in-out 4.55s infinite alternate;
  }
  .shero__kid {
    animation: jump-in .7s cubic-bezier(.2, 1.6, .4, 1) 3.8s both, bob 2.8s ease-in-out 4.55s infinite alternate;
  }
  /* ほかのイラストはふわふわ上下する（スクロール連動が効く環境では下で上書き） */
  .illust:not(.shero__sun, .shero__rocket, .shero__kid) {
    animation: bob 2.8s ease-in-out infinite alternate;
  }
  .pillars li:nth-child(2) .illust,
  .course:nth-child(2) .illust { animation-delay: -.9s; }
  .pillars li:nth-child(3) .illust,
  .course:nth-child(3) .illust { animation-delay: -1.8s; }

  /* 流れる帯 */
  .ticker__track { animation: ticker 18s linear infinite; }
  .ticker--sky .ticker__track { animation-direction: reverse; }

  /* ------------------------------------------------------------
     2. スクロール連動
     ------------------------------------------------------------ */
  @supports (animation-timeline: view()) {

    /* 文字を含む要素の「動き終わる位置」。画面の下端から 160px 入ったところで
       完了させ、読む位置に来たときにはもう止まっているようにする。
       （cover 30〜40% まで引っぱると、読んでいる最中も動き続けてちらつく） */
    :root {
      --reveal:   entry 0% entry 160px;
      --reveal-2: entry 40px entry 200px;   /* 横並びの2つ目 */
      --reveal-3: entry 80px entry 240px;   /* 横並びの3つ目 */
    }

    /* 画面上端の進捗バー */
    body::after {
      content: "";
      position: fixed;
      inset: 0 0 auto;
      height: 5px;
      z-index: 60;
      background: linear-gradient(90deg, var(--accent), var(--sky));
      transform-origin: left;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }

    /* ヒーローの丸: 最初にはじけ出て（時間）、その後はスクロールで流れる */
    .shero::before {
      animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) 3.05s both, px-down-far linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    .shero::after {
      animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) 3.2s both, px-up-far linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    .shero__head {
      animation: px-sink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }

    /* 写真: 枠は固定、中の写真だけ遅れて動く */
    .shero__photo img,
    .lab__photo img {
      scale: 1.2;
      animation: px-photo linear both;
      animation-timeline: view();
    }
    /* 自習室の写真は円形に広がって現れる */
    .lab__photo {
      animation: iris linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* 装飾の丸は本文より速く流れる */
    #why::after, #trial::after, .contact::after {
      animation: px-float linear both;
      animation-timeline: view();
    }
    #course::after {
      animation: px-float-rev linear both;
      animation-timeline: view();
    }

    /* 見出し: 少し大きい状態から縮んで収まる */
    .section__head .eyebrow {
      animation: swipe-in linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }
    .section__title,
    .contact__title {
      transform-origin: left center;
      animation: slam-scroll linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }
    .contact__title { transform-origin: center; }
    .lede, .slogan {
      animation: rise-scroll linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }

    /* 3本柱: 番号の丸（文字ではない）は回転しながら飛び出す */
    .pillars li {
      animation: rise-scroll linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }
    .pillars li::before {
      animation: spin-pop linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }
    .pillars li:nth-child(2) { animation-range: var(--reveal-2); }
    .pillars li:nth-child(3) { animation-range: var(--reveal-3); }

    /* カードは左右から少しだけ寄ってくる */
    .sched li:nth-child(1),
    .course:nth-child(odd),
    .flow > li:nth-child(odd) {
      animation: fly-left linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }
    .sched li:nth-child(2),
    .course:nth-child(even),
    .flow > li:nth-child(even) {
      animation: fly-right linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }
    .lab__list li {
      animation: fly-right linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }

    /* 開校特典と料金: 少し傾いた状態から着地する */
    .campaign,
    .lab__fee,
    .course__meta {
      animation: stamp linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }

    /* よくある質問・教室案内は下から順に */
    .faq details,
    .info > div {
      animation: rise-scroll linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }
    .classinfo__map {
      animation: stamp linear both;
      animation-timeline: view();
      animation-range: var(--reveal);
    }

    /* イラスト: 画面に入るとポンと飛び出し、その後はふわふわ上下する */
    .illust:not(.shero__sun, .shero__rocket, .shero__kid) {
      animation: pop-scroll linear both, bob 2.8s ease-in-out infinite alternate;
      animation-timeline: view(), auto;
      animation-range: var(--reveal), normal;
    }
    /* 申込み欄の2人とロボットは下から跳ね上がる */
    .contact__kids,
    .contact__robot {
      animation: jump-scroll linear both, bob 2.8s ease-in-out infinite alternate;
      animation-timeline: view(), auto;
      animation-range: var(--reveal), normal;
    }
  }
}

/* ===== keyframes: オープニング ===== */
@keyframes dot-bounce { from { translate: 0 0; } to { translate: 0 -22px; } }
@keyframes word-in { from { opacity: 0; letter-spacing: 1em; } }
@keyframes loader-center-out { to { opacity: 0; scale: .6; } }
@keyframes burst { to { scale: 200; } }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
@keyframes drop-in { from { translate: 0 -100%; } }
@keyframes pop {
  0%   { scale: 0; rotate: -25deg; }
  70%  { scale: 1.2; rotate: 6deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes marker { to { background-size: 100% 100%; } }
@keyframes rise { from { opacity: 0; translate: 0 36px; } }
@keyframes photo-in {
  0%   { opacity: 0; scale: .3; rotate: 14deg; }
  70%  { opacity: 1; scale: 1.06; rotate: -2deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes heartbeat {
  0%, 60%, 100% { scale: 1; }
  15% { scale: 1.08; }
  30% { scale: .98; }
  45% { scale: 1.05; }
}
@keyframes ticker { to { translate: -50% 0; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes rocket-in {
  0%   { opacity: 0; translate: -70vw 30vh; rotate: -25deg; scale: .6; }
  60%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes jump-in {
  0%   { opacity: 0; scale: 0; rotate: -20deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes logo-in {
  0%   { opacity: 0; scale: .6; }
  100% { opacity: 1; scale: 1; }
}
@keyframes bob { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes pop-scroll {
  0%   { opacity: 0; scale: .5; rotate: -12deg; }
  70%  { opacity: 1; scale: 1.1; rotate: 3deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes jump-scroll {
  0%   { opacity: 0; scale: .6; }
  70%  { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}

/* ===== keyframes: スクロール連動 ===== */
@keyframes progress { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes px-down-far { to { translate: 0 42vh; } }
@keyframes px-up-far   { to { translate: 0 -22vh; } }
@keyframes px-sink     { to { translate: 0 8vh; opacity: .6; } }
@keyframes px-photo    { from { translate: 0 -8%; } to { translate: 0 8%; } }
@keyframes px-float     { from { translate: 0 160px; } to { translate: 0 -160px; } }
@keyframes px-float-rev { from { translate: 0 -120px; } to { translate: 0 200px; } }
@keyframes iris {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}
@keyframes swipe-in { from { opacity: 0; translate: -24px 0; } }
/* 文字のぼかしはちらつきの元なので使わない */
@keyframes slam-scroll { from { opacity: 0; scale: 1.15; } }
@keyframes rise-scroll { from { opacity: 0; translate: 0 24px; } }
@keyframes spin-pop {
  0%   { scale: 0; rotate: -360deg; }
  75%  { scale: 1.3; rotate: 20deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes fly-left  { from { opacity: 0; translate: -64px 0; rotate: -2deg; } }
@keyframes fly-right { from { opacity: 0; translate: 64px 0;  rotate: 2deg; } }
@keyframes stamp {
  0%   { opacity: 0; scale: .88; rotate: -3deg; }
  70%  { opacity: 1; scale: 1.02; rotate: .5deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}