/* トップページ固有（ヒーローのみ）。講師ティーザー / 料金カードなどの部品は layout.css */
.page-top .sec--hero .hero__title {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 40px);   /* 1行目（和文）。2行目の HARU を巨大にして対比を作る */
  line-height: var(--lh-heading);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
}
.page-top .sec--hero .hero__mark {
  display: block; margin-top: .04em;
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: var(--fw-display); letter-spacing: var(--ls-display);
}
.page-top .sec--hero .hero__title::before {
  content: ""; display: block; width: 32px; height: 3px; margin-bottom: var(--sp-6); background: var(--c-kinari);
}
.page-top .sec--hero p:first-of-type { margin-top: var(--sp-6); font-size: clamp(17px, 2vw, 22px); font-weight: 700; }
.page-top .sec--hero p:nth-of-type(3) { color: var(--c-on-main-sub); }
.page-top .sec--hero .cta-row { margin-top: var(--sp-8); }
.page-top .sec--hero .btn { min-height: 56px; padding: var(--sp-3) var(--sp-7); font-size: 15px; }

/* キャッチを縦組みにして、テキスト列と画像の間に置く（縦組みはこの1か所のみ。DESIGN.md §3） */
@media (min-width: 1024px) {
  .page-top .sec--hero > .sec__inner { grid-template-columns: minmax(0, 1.05fr) auto minmax(0, .95fr); column-gap: clamp(24px, 4vw, 64px); }
  .page-top .sec--hero > .sec__inner > .hero__media { grid-column: 3; }
  .page-top .sec--hero > .sec__inner > p:nth-of-type(3) {
    grid-column: 2; grid-row: 1 / span 12; align-self: center;
    margin: 0; writing-mode: vertical-rl; font-size: 17px; line-height: 2; letter-spacing: .24em;
  }
}

/* ==========================================================================
   ヒーロー演出（docs/MOTION_HERO.md）。戻すときはこのブロックと motion.js §5 を消す。
   - 入場（H1〜H7）は html.motion のときだけ。keyframes の from だけを書き、終わりは元のスタイル。
   - 常時（L1〜L3）は .is-idle（画面外）で止める。動かすのは transform 系と opacity のみ。
   - 装飾の正方形・マーキーは motion.js が aria-hidden で挿入する。
   ========================================================================== */

/* ---------- 装飾: 署名の正方形（角丸0）を並べる。motion が無くても静止した飾りとして見える ---------- */
.hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-deco i { position: absolute; display: block; border-radius: var(--radius-sig); }
.hero-deco i:nth-child(1) { top: 5%; right: 20%; width: clamp(40px, 5.5vw, 80px); aspect-ratio: 1; border: 2px solid rgb(244 238 222 / .5); }
.hero-deco i:nth-child(2) { left: -3%; bottom: -5%; width: clamp(88px, 13vw, 190px); aspect-ratio: 1; background: rgb(255 255 255 / .07); }
.hero-deco i:nth-child(3) { top: 21%; right: 5%; width: clamp(12px, 1.4vw, 20px); aspect-ratio: 1; background: var(--c-kinari); }

/* ---------- 装飾: 背面の大きな欧文（輪郭だけ）。motion のときだけ出る ---------- */
.hero-marquee { display: none; position: absolute; left: 0; right: 0; bottom: -.2em; z-index: -1; pointer-events: none; overflow: hidden;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(72px, 13vw, 200px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.hero-marquee__track { display: flex; align-items: center; width: max-content; }
.hero-marquee span { color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .22); }
.hero-marquee i { display: block; flex: none; width: .3em; aspect-ratio: 1; margin-inline: .45em; background: rgb(255 255 255 / .12); border-radius: var(--radius-sig); }

/* ---------- 「HARU」: 1文字ずつ（JS が .hero-ch に分割） ---------- */
.page-top .sec--hero .hero__mark { overflow: hidden; padding-block: .06em; margin-block: -.02em; }
.page-top .sec--hero .hero-ch { display: inline-block; }
.page-top .sec--hero .hero-chars { display: block; }

/* ---------- 入場（html.motion のみ） ---------- */
.motion .page-top .sec--hero .hero__title::before { transform-origin: 0 50%; animation: hero-line .5s var(--ease-out) .05s both; }
.motion .page-top .sec--hero .hero__title { animation: hero-rise .6s var(--ease-out) .15s both; }
/* 分割前のちらつきを防ぐ。JS が動かなくても 1.5s 後には必ず見える（保険） */
.motion .page-top .sec--hero .hero__mark:not(.is-split) { animation: hero-failsafe 0s 1.5s both; }
.motion .page-top .sec--hero .hero-ch { animation: hero-char .8s var(--ease-pop) both; }
.motion .page-top .sec--hero .hero-ch:nth-of-type(1) { animation-delay: .25s; }
.motion .page-top .sec--hero .hero-ch:nth-of-type(2) { animation-delay: .33s; }
.motion .page-top .sec--hero .hero-ch:nth-of-type(3) { animation-delay: .41s; }
.motion .page-top .sec--hero .hero-ch:nth-of-type(4) { animation-delay: .49s; }

.motion .page-top .sec--hero .sec__inner > p:nth-of-type(1) { animation: hero-rise .55s var(--ease-out) .55s both; }
.motion .page-top .sec--hero .sec__inner > p:nth-of-type(2) { animation: hero-rise .55s var(--ease-out) .62s both; }
.motion .page-top .sec--hero .sec__inner > p:nth-of-type(3) { animation: hero-rise .55s var(--ease-out) .67s both; }
.motion .page-top .sec--hero .sec__inner > .cta-row         { animation: hero-rise .55s var(--ease-out) .72s both; }

/* 写真: きなりの枠が先に立ち上がり、写真が下から現れる（枠は .media の地色） */
.motion .page-top .sec--hero .hero__media { animation: hero-card .7s var(--ease-out) .2s both; }
.motion .page-top .sec--hero .hero__media img {
  animation: hero-photo 1s var(--ease-out) .3s both, hero-kenburns 24s ease-in-out 1.4s infinite alternate;
}

/* 正方形: 順に弾けて出る → ゆっくり漂う（周期は要素ごとに変える） */
.motion .hero-deco i:nth-child(1) { animation: hero-pop .6s var(--ease-pop) .70s both, hero-drift-a 17s ease-in-out 1.3s infinite alternate; }
.motion .hero-deco i:nth-child(2) { animation: hero-pop .6s var(--ease-pop) .80s both, hero-drift-b 21s ease-in-out 1.4s infinite alternate; }
.motion .hero-deco i:nth-child(3) { animation: hero-pop .6s var(--ease-pop) .90s both, hero-drift-c 14s ease-in-out 1.5s infinite alternate; }

/* マーキー */
.motion .hero-marquee { display: block; animation: hero-fade 1s ease 1s both; }
.motion .hero-marquee__track { animation: hero-marquee 48s linear infinite; }

/* 画面外では常時の動きを止める（motion.js が .is-idle を付ける） */
.motion .page-top .sec--hero.is-idle :is(.hero__media img, .hero-deco i, .hero-marquee__track) { animation-play-state: paused; }

/* CTA: 要素ごとに挙動を変える（主=光の帯が走る／ghost=塗りが左から伸びる） */
.page-top .sec--hero .btn { position: relative; overflow: hidden; isolation: isolate; }
.motion .page-top .sec--hero .btn::before,
.motion .page-top .sec--hero .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.motion .page-top .sec--hero .btn--primary::after {
  background: linear-gradient(105deg, transparent 32%, color-mix(in srgb, var(--c-main) 16%, transparent) 50%, transparent 68%);
  translate: -110% 0;
}
.motion .page-top .sec--hero .btn--primary:is(:hover, :focus-visible)::after { translate: 110% 0; transition: translate .7s var(--ease-out); }
.motion .page-top .sec--hero .btn--ghost::before { background: rgb(255 255 255 / .14); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.motion .page-top .sec--hero .btn--ghost:is(:hover, :focus-visible)::before { transform: scaleX(1); }

/* 縦組みのキャッチ（PC）: 上から下へ現れる */
@media (min-width: 1024px) {
  .motion .page-top .sec--hero .sec__inner > p:nth-of-type(3) { animation: hero-wipe .9s var(--ease-out) .9s both; }
}

/* スクロール視差（付加。非対応でも完成形）: ヒーローが出ていく間、写真と正方形の群で速度差を作る */
@supports (animation-timeline: scroll()) {
  .motion .page-top .sec--hero .hero__media {
    animation: hero-card .7s var(--ease-out) .2s both, hero-par-media linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0 90vh;
  }
  .motion .hero-deco { animation: hero-par-deco linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
}

@keyframes hero-line { from { transform: scaleX(0); } }
@keyframes hero-rise { from { opacity: 0; translate: 0 16px; } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-failsafe { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-char { from { translate: 0 105%; rotate: 8deg; } }
@keyframes hero-card { from { opacity: 0; scale: .96; } }
@keyframes hero-photo { from { clip-path: inset(100% 0 0 0); scale: 1.2; } }
@keyframes hero-kenburns { to { transform: scale(1.05); } }
@keyframes hero-pop { from { scale: 0; } }
@keyframes hero-drift-a { to { translate: 12px -14px; rotate: 6deg; } }
@keyframes hero-drift-b { to { translate: -10px -16px; rotate: -5deg; } }
@keyframes hero-drift-c { to { translate: -14px 12px; rotate: 8deg; } }
@keyframes hero-marquee { to { transform: translateX(-50%); } }
@keyframes hero-wipe { from { clip-path: inset(0 0 100% 0); opacity: 0; } }
@keyframes hero-par-media { to { translate: 0 -36px; } }
@keyframes hero-par-deco { to { translate: 0 72px; } }

/* ==========================================================================
   背景動画（docs/MOTION_HERO.md §2b）。motion.js が .hero-video を最背面に挿入する。
   朱色への馴染ませ方: 映像を灰色にして朱の面へ overlay → 映像が朱の濃淡になる。
   左（文字側）は朱の深い色を multiply で重ね、白文字のコントラストを保つ。
   ========================================================================== */
.hero-video { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; mix-blend-mode: overlay; }
.hero-video.is-ready { opacity: 1; }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.hero-video::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(90deg, var(--c-main-deep) 0%, color-mix(in srgb, var(--c-main-deep) 40%, transparent) 55%, transparent 100%);
}