/* css/section-hero.css */
/* エージェントA担当: ファーストビュー（90vhヒーロー） */

/* ヒーローセクション全体 */
.top-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px; /* 四隅を12pxラウンドに（2026-08-17） */
}

/* スクリム（ブランド色ベース・さらに0.05淡く / 全体バランス優先） */
.top-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(95,86,142,0.06) 0%, rgba(115,105,160,0.015) 38%, transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}



/* 背景画像エリア */
.top-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* プレースホルダー画像（垂直5スライス容器）
   下敷きグラデ（alpha 0.40 半透明版）: .loaded前の白飛ち/透明空白を防止し、
   不透明スライスとの明度差でワイプ進行が視認できる濃度 */
.top-hero-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(142, 209, 224, 0.40) 0%,
    rgba(187, 183, 218, 0.40) 50%,
    rgba(243, 250, 253, 0.40) 100%);
}
.top-hero-slice {
  flex: 1 1 0;
  height: 100%;
  background: linear-gradient(135deg, #8ED1E0 0%, #BBB7DA 50%, #F3FAFD 100%);
  background-size: 500% 100%;
  will-change: transform, opacity;
  /* サブピクセル継ぎ目対策: 隣接スライスを0.5pxオーバーラップ */
  margin: 0 -0.5px;
  transform-origin: left center;
}
.top-hero-slice:first-child { margin-left: 0; }
.top-hero-slice:last-child { margin-right: 0; }
.top-hero-slice-1 { background-position: 0% 50%; }
.top-hero-slice-2 { background-position: 25% 50%; }
.top-hero-slice-3 { background-position: 50% 50%; }
.top-hero-slice-4 { background-position: 75% 50%; }
.top-hero-slice-5 { background-position: 100% 50%; }

/* 背景スライス入場アニメ（左→右ワイプ: scaleX + opacity / duration 0.75s・stagger 0.07s間隔） */
@keyframes heroBgSliceWipe {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
.top-hero .top-hero-slice {
  opacity: 0;
  transform: scaleX(0);
}
.top-hero.loaded .top-hero-slice {
  animation: heroBgSliceWipe 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* delay指定はshorthandルールと同具体度で上書きする（.top-hero-slice-N単独ではshorthandのdelay:0sに負ける） */
.top-hero.loaded .top-hero-slice-1 { animation-delay: 0.05s; }
.top-hero.loaded .top-hero-slice-2 { animation-delay: 0.12s; }
.top-hero.loaded .top-hero-slice-3 { animation-delay: 0.19s; }
.top-hero.loaded .top-hero-slice-4 { animation-delay: 0.26s; }
.top-hero.loaded .top-hero-slice-5 { animation-delay: 0.33s; }


/* オーバーレイ画像（①静的表示） */
.top-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.top-hero-overlay-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
}

/* オーバーレイ画像アニメーション（②右→左移動 34px / 26px SP / 背景ワイプと逆流・2026-08-26 final-5pt absorption 28→34/20→26）
     3キー構成（2026-08-26改訂）: 折り返しは1回のみ。0%→55%はオーバーシュートなしの
     easeOutQuint（終端傾斜ゼロ）で-7px/-5px SPまで滑らかに通り越す。
    ※旧版のeaseOutBackはセグメント内で約10%（≈3.4px）隠れオーバーシュートし、
    55%での明示的な戻りと合わせて「2段階戻り＋一旦停止」＝カクカクの原因だった。
    ピーク= 0.80s + 0.90s×55% ≈ 1.295s でタイトル出現(transition-delay 1.30s)と
    同一フレーム同期。「キャラの引き」と「文字の拡がり」の連動演出は維持
     2026-08-26追記: ピボットは右下(100% 100%)。containコンテナ基準で足元を固定。78%では裾が振れるため修正
     2026-08-26 WAAPI統合時は同キーフレームをJSで駆動（hero.php Element.animate）。55%ピーク=1295msで文字と同一easing(cubic-bezier(0.45,0,0.55,1))同期。CSS @keyframesはフォールバックとして維持 */
@keyframes heroCharacterReveal {
  0% {
    opacity: 0;
    transform: translateX(34px) scale(1.02) rotate(-2deg);
    filter: blur(1.2px) brightness(0.99);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  55% {
    transform: translateX(-7px) scale(1) rotate(0.5deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: blur(0) brightness(1);
  }
}

/* 静的初期状態は新0%キーと同期（アニメ開始時のジャンプ防止・34px final absorption） */
.top-hero .top-hero-overlay {
  opacity: 0;
  transform: translateX(34px) scale(1.02) rotate(-2deg);
  filter: blur(1.2px) brightness(0.99);
  will-change: opacity, transform, filter;
  transform-origin: 100% 100%; /* 敬礼：右下ピボットで足元固定。頭・手だけが揺れる（78% 90%では裾が振れるため修正） */
}

.top-hero.loaded .top-hero-overlay {
  animation: heroCharacterReveal 0.90s cubic-bezier(0.34, 1.56, 0.64, 1) 0.80s forwards;
}



@media (prefers-reduced-motion: reduce) {
  .top-hero .top-hero-overlay,
  .top-hero.loaded .top-hero-overlay {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Ken Burns撤廃: 背景スライス演出と競合するため静止に置換 */
.top-hero .top-hero-placeholder,
.top-hero .top-hero-image img {
  transform: none;
  will-change: auto;
  animation: none !important;
}

/* コンテンツオーバーレイ */
.top-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem;
  max-width: 800px;
}

/* ③テキスト群 左半分中央揃え（PCのみ） */
.top-hero {
  justify-content: flex-start;
}

.top-hero-content {
  width: 50%;
  max-width: 50%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}



/* ④PC 16:10比率維持 */
.top-hero {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  max-height: none;
}

/* タイトル — 同系色（藤色）内で明度・彩度を下げた文字追従の柔らかい影（極端にならない2層・レスポンシブで文字に追従） */
.top-hero-title {
  font-size: 2.5em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(74,67,111,0.19), 0 4px 12px rgba(95,86,142,0.13);
  margin-bottom: 0.5em;
  line-height: 1.3;
}

/* サブタイトル — 同上、文字に追従する淡い縁取り（1段階淡く） */
.top-hero-subtitle {
  font-size: 1.2em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(74,67,111,0.16), 0 2px 10px rgba(95,86,142,0.11);
  margin-bottom: 2em;
  line-height: 1.6;
}

/* ボタンエリア */
.top-hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (min-width: 769px) {
  .top-hero-buttons {
    flex-wrap: nowrap;
  }
}

/* ボタン共通 — ウェイトは実読込 700（600は未読込で faux bold になるため 2026-08-26）/ letter-spacing 0.04 / 寸法は維持 min-width200/flex0 1 220/min-height44/padding0.85em1.6em/radius8/gap16 */
/* 2026-09-03 plan 1788438155218: radial白60%廃止→ベタtint＋上部1px光＋1px枠＋一段影へ。transitionはall→4prop限定（ちらつき・描画コスト対策。Material3/Apple HIG/Tailwind準拠） */
.top-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  flex: 0 1 220px;
  min-height: 44px;
  padding: 0.85em 1.6em;
  border-radius: 8px;
  border: 2px solid transparent;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.top-hero-btn:hover {
  /* background / color / border-color は各ボタン固有の hover で上書き */
  /* 2026-09-03 plan 1788438155218: -3px→-2pxへ緩和＋影一段控えめ（0 8 18→0 4 12。サイト白カード0 4 12より一段控えめが既定のため） */
  box-shadow: 0 4px 12px rgba(95,86,142,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

.top-hero-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(95,86,142,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

.top-hero-btn:focus-visible {
  outline: 2px solid #5F568E;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(95,86,142,0.16);
}

/* Tint Pastel × 濃色文字 B改訂・A+B組合せ（2026-08-23）: 薄すぎ・ポップさを抑えるため明度-2% + 彩度-0.07で落ち着かせた中間tint
   - ブログ(藤tint) 面 #EBE4F3 … #F0EAF7より2%暗く彩度-0.07でくすませたトーン / 文字 #5F568E (5.28:1) / 枠 rgba(95,86,142,0.34)
   - 創作(空tint) 面 #E4EDF4 … #EAF2F8より2%暗く彩度-0.07でくすませたトーン / 文字 #3F668C (5.08:1, #4B6F95では4.42でAA割れのため1段濃く) / 枠 rgba(63,102,140,0.32)
   いずれもL*差≤1・彩度差≤0.05で等重、ポップな高彩度パステルを抑え神話性のくすみに寄せる。ヒーロー最明部 #F3FAFD との差を僅かに広げ薄すぎを解消 */
.top-hero-btn-outline {
  background-color: #EBE4F3;
  /* 2026-09-03 plan 1788438155218: 白中心ラジアル廃止→ベタtint＋inset上部光。縁沈み対策のヘアライン(0 0 0 1px)はぼやけ一因のため削除し1px枠＋一段影に一本化 */
  color: #5F568E;
  border: 1px solid rgba(95,86,142,0.34);
  box-shadow: 0 2px 8px rgba(95,86,142,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

.top-hero-btn-primary {
  background-color: #E4EDF4;
  /* 2026-09-03 plan 1788438155218: 同上（空tintベタ化） */
  color: #3F668C;
  border: 1px solid rgba(63,102,140,0.32);
  box-shadow: 0 2px 8px rgba(63,102,140,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* hover: 面を4%濃くして沈みすぎない深さに（文字色は維持） + アウトラインはhoverでも維持 */
.top-hero-btn-outline:hover {
  background-color: #E1D6ED; /* #EBE4F3 の約4%ダーク */
  border-color: rgba(95,86,142,0.40);
  color: #5F568E;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(95,86,142,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.top-hero-btn-primary:hover {
  background-color: #D6E3EE; /* #E4EDF4 の約4%ダーク */
  border-color: rgba(63,102,140,0.38);
  color: #3F668C;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(63,102,140,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.top-hero-btn-outline:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(95,86,142,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.top-hero-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(63,102,140,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* スクロール誘導アイコン */
.top-hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.top-hero-scroll-icon {
  display: block;
  font-size: 1.5em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(74,67,111,0.09);
  animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

/* レスポンシブ */




@media print {
  /* 印刷時も画面同様に 16/10 比率を維持 — 印刷プレビューで潰れる問題を解消 */
  .top-hero {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .top-hero-placeholder,
  .top-hero-image {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .top-page .top-hero,
  .top-page .top-quicklinks {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .top-hero-content {
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .top-hero-overlay-img { object-position: right center !important; }
  .top-hero .top-hero-overlay,
  .top-hero .top-hero-title,
  .top-hero .top-hero-subtitle,
  .top-hero .top-hero-buttons,
  .top-hero .top-hero-compass,
  .top-hero .top-hero-placeholder,
  .top-hero .top-hero-image img,
  .top-hero .top-hero-slice,
  .top-hero.loaded .top-hero-slice {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  /* 背景スライス印刷フォールバック: 子が欠落してもグラデ維持 + print-color-adjust */
  .top-hero-placeholder {
    background: linear-gradient(135deg, #8ED1E0 0%, #BBB7DA 50%, #F3FAFD 100%) !important;
  }
  .top-hero-slice {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* キャッチコピーの二重描画防止 — Chrome PDFで text-shadow が固体化して複製に見える問題の対策 (plan 1787479586130 仮説A/B) */
  .top-hero-title,
  .top-hero-subtitle {
    text-shadow: none !important;
    -webkit-text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  /* ボタンも予防的に影/フィルタ除去 */
  .top-hero-btn,
  .top-hero-btn-outline,
  .top-hero-btn-primary {
    text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
  }
  .top-hero .top-hero-scroll { opacity:0 !important; display:none !important; }
}

/* ====================================
    ファーストビュー浮遊アニメーション（右→左微移動+blur / キャラ追従）
    背景 L→R → キャラ R→L → 文字 R→L の一筆書き視線誘導
    2026-08-26 WAAPI統合: 文字開始はキャラ55%ピーク(1295ms)と同一フレーム、easingはキャラ戻りと同一(0.45,0,0.55,1)で減速同期。
    CSS transitionはフォールバック（JS無効/WAAPI非対応時）。WAAPI時はJSが同一キーフレームをElement.animateで駆動し、CSS側は .waapi で無効化
    ==================================== */

/* 初期状態: 右からの微移動 16px + 透明 + 微ブラー（キャラ 28px より控えめに）
    scale(0.96)→1 の拡がりを併せ持ち、キャラの引き（55%ピーク≈1.295s）と同期して
    文字が外へ広がる連動表現（2026-08-26）
    2026-08-26 WAAPI: 初期値はWAAPIのfromキーフレームと同一。easingはキャラ戻り(0.45,0,0.55,1)に統一 */
.top-hero .top-hero-title,
.top-hero .top-hero-subtitle,
.top-hero .top-hero-buttons {
  opacity: 0;
  transform: translateX(16px) rotate(-0.6deg) scale(0.96);
  filter: blur(0.6px);
  /* 2026-08-26 WAAPI同期: easingをキャラ55%→100%と同一(0.45,0,0.55,1)に統一。従来0.25,0.46,0.45,0.94は廃止。WAAPI時は1295ms起点 */
  /* 2026-08-26 rhythm-final: duration 0.70→0.55s / stagger 200→160ms 圧縮でキャラ第二(1295-1700ms 405ms)と同時減速・等拍3連 sync。LCP担保のA案（総尺維持）。B案へ戻す場合は 0.70s / 1.295/1.475/1.655s へ差し替え */
  transition: opacity 0.55s cubic-bezier(0.45, 0, 0.55, 1),
              transform 0.55s cubic-bezier(0.45, 0, 0.55, 1),
              filter 0.55s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity, transform, filter;
}

/* loaded クラス付与後に右→左追従開始（コンパス 0.50s → キャラ 0.80s → タイトル 1.295s → サブタイトル 1.455s → ボタン 1.615s / stagger 160ms）
     ワイプ後半で右端に届いた視線をキャラが受け取り、コンパスの回収束と同じ向きで文字が追従する一筆書き視線誘導
     2026-08-26 rhythm-final A案: duration 0.55s / stagger 160ms 圧縮でキャラ第二(1295-1700ms)と同時減速。CSS fallbackはWAAPI 1295/1455/1615msと厳密同期（±0ms）
     B案フォールバック数値は duration 0.70s / delay 1.295/1.475/1.655s / scroll 2.455s（1行差し替えで復帰可能） */
.top-hero.loaded .top-hero-title {
  opacity: 1;
  transform: translateX(0) rotate(0) scale(1);
  filter: blur(0);
  transition-delay: 1.295s;
}

.top-hero.loaded .top-hero-subtitle {
  opacity: 1;
  transform: translateX(0) rotate(0) scale(1);
  filter: blur(0);
  transition-delay: 1.455s;
}

.top-hero.loaded .top-hero-buttons {
  opacity: 1;
  transform: translateX(0) rotate(0) scale(1);
  filter: blur(0);
  transition-delay: 1.615s;
}

/* スクロール矢印はテキスト表示完了後にフェードイン（ボタン1.615s+0.55s=2.165s完了、矢印は2.415s開始で+250ms呼吸を置いて連続誘導） */
.top-hero .top-hero-scroll {
  opacity: 0;
  transition: opacity 0.6s ease-out;
  transition-delay: 2.415s;
}

.top-hero.loaded .top-hero-scroll {
  opacity: 1;
}

/* モバイル: X移動量を短縮（16px→12px / キャラSP 20px より小さく） */


/* prefers-reduced-motion対応: 全て即表示 */
@media (prefers-reduced-motion: reduce) {
  .top-hero .top-hero-title,
  .top-hero .top-hero-subtitle,
  .top-hero .top-hero-buttons,
  .top-hero .top-hero-scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* print: 浮遊アニメの残留防止 — 詳細度対策で .top-hero 起点に !important を再宣言 (plan 1787479586130 仮説B/C) */
@media print {
  .top-hero .top-hero-title,
  .top-hero .top-hero-subtitle,
  .top-hero .top-hero-buttons {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
    transition: none !important;
    animation: none !important;
    text-shadow: none !important;
  }
}

/* ====================================
   幾何学コンパス中間レイヤー（hero_compass.png）
   レイヤー順: 背景(1) < コンパス(2) < キャラ(3) < 文字/矢印(4)
   ==================================== */
.top-hero-compass{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  overflow:hidden; border-radius:inherit;
}
.top-hero-compass-img{
  width:100%; height:100%; object-fit:cover; object-position:center center; display:block;
  opacity:0.86; mix-blend-mode:normal; filter:contrast(1.14) brightness(1.06);
  will-change:transform, opacity, filter;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 100%);
}


@supports not ((mask-image: linear-gradient(90deg, black, black)) or (-webkit-mask-image: linear-gradient(90deg, black, black))) {
  .top-hero-compass-img {
    opacity: 0.68;
    -webkit-mask-image: none;
    mask-image: none;
  }
  
}

/* 入場アニメ: scale+rotate+blur（scale 1.05→1で上から「降りて整う」/ rotate -4deg→0の回転収束が起点となり
   キャラ・文字が継承する。ワイプ前線が右端に届く頃0.50sに開始し0.60sかけて空間が整う / 2026-08-26 0.85→0.60s圧縮） */
@keyframes heroCompassReveal{
  from{ opacity:0; transform:scale(1.05) rotate(-4deg); filter:blur(3px) brightness(0.9); }
  to  { opacity:0.86; transform:scale(1) rotate(0deg); filter:blur(0) brightness(1.06) contrast(1.14); }
}
.top-hero .top-hero-compass{
  opacity:0; transform:scale(1.05) rotate(-4deg);
}
/* 2026-08-26 rhythm sync: 0.85→0.60sに圧縮しキャラ(0.80-1.70s)との重なりを550→300msに半減、総尺2.40s維持でLCP担保。0.60sで速すぎる場合は0.65sへ戻す */
.top-hero.loaded .top-hero-compass{
  animation:heroCompassReveal 0.60s cubic-bezier(0.22,1,0.36,1) 0.50s forwards;
}


/* 持続演出撤廃: 収束後静止（背景スライス演出と合わせ長時間transform占有を回避） */
.top-hero.loaded .top-hero-compass-img{
  animation: none !important;
}

/* z-index繰り上げ（コンパス挿入に伴う再定義） */
.top-hero .top-hero-overlay{ z-index:3; }
.top-hero .top-hero-content{ z-index:4; }
.top-hero .top-hero-scroll{ z-index:4; }

/* WAAPI統合時のCSS競合抑止: JSがElement.animateで駆動する要素のCSS animation/transitionを無効化し二重再生を防止。
   追加で loaded による即時可視化(opacity:1)を抑止し、WAAPI遅延期間中も非表示を維持。WAAPI fill:both と併用でフラッシュ防止。フォールバック時は .waapi 無しのため従来CSSが動作。compassはCSS駆動のため waapi 抑止対象外 */
.top-hero.waapi .top-hero-overlay {
  animation: none !important;
}
.top-hero.waapi .top-hero-title,
.top-hero.waapi .top-hero-subtitle,
.top-hero.waapi .top-hero-buttons,
.top-hero.waapi .top-hero-scroll {
  transition: none !important;
  animation: none !important;
}
/* waapi 時の loaded 可視化を打ち消し、初期非表示を保持（transition:none だけでは opacity:1 即時適用を止められないため）。opacity/transform/filter は !important を付けない - WAAPIの forwards/both が !important に勝てず永久非表示になるため。詳細度 0,3,0 で loaded(0,2,0)に勝つ */
.top-hero.waapi.loaded .top-hero-title,
.top-hero.waapi.loaded .top-hero-subtitle,
.top-hero.waapi.loaded .top-hero-buttons {
  opacity: 0;
  transform: translateX(16px) rotate(-0.6deg) scale(0.96);
  filter: blur(0.6px);
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}
.top-hero.waapi.loaded .top-hero-scroll {
  opacity: 0;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}


/* prefers-reduced-motion でも waapi 併存時に reduce を優先（詳細度対策: waapi.loaded 0,3,0 に勝つため同詳細度で上書き） */
@media (prefers-reduced-motion: reduce) {
  .top-hero.waapi.loaded .top-hero-title,
  .top-hero.waapi.loaded .top-hero-subtitle,
  .top-hero.waapi.loaded .top-hero-buttons,
  .top-hero.waapi.loaded .top-hero-scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

/* prefers-reduced-motion: 全アニメ停止 */
@media (prefers-reduced-motion:reduce){
  .top-hero .top-hero-compass,
  .top-hero.loaded .top-hero-compass,
  .top-hero.loaded .top-hero-compass-img{
    animation:none !important; opacity:0.68 !important; transform:none !important; filter:none !important;
  }
}
/* 背景スライス reduce対応: 即時表示でjank防止 */
@media (prefers-reduced-motion: reduce) {
  .top-hero .top-hero-slice,
  .top-hero.loaded .top-hero-slice {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
/* print: コンパスも画面同様に印刷（背景色維持） */
@media print{
  .top-hero-compass{ display:block !important; opacity:0.86 !important; }
  .top-hero-compass-img{ opacity:0.86 !important; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .top-hero .top-hero-slice{ opacity:1 !important; transform:none !important; animation:none !important; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* ====================================
   PCヒーロー Y方向5%削減＋キャラ97% (plan 1788599366541)
   2026-09-05: PC(screen min-width:769px)のみ対象。タブレット/モバイル・print・reduced-motion不変。
   (1)容器 16/10→16/9.5で高さ正確に95% (2)img高102.11%(=0.97/0.95)で表示scale 0.97
   (3)object-position:right topで頭頂固定・裾のみカット。ラッパー/WAAPI不変。!important不使用。
   screen指定のためprintには一切適用されない。responsive-768/480(max-width系)と排他。
   ==================================== */
@media screen and (min-width:769px){
  .top-hero{ aspect-ratio:16/9.5; }
  .top-hero-overlay-img{
    width:100%;
    height:102.11%; /* 0.97/0.95。containと組で表示scaleちょうど0.97 */
    object-fit:contain;
    object-position:right top; /* X右維持・Y上端固定 */
  }
}