/* ================================
   CSS変数定義（JSから設定される値）
================================ */
:root {
  /* JSから動的に設定される値（初期値は fallback） */
  --w: 960px; /* スライド1枚の基本幅 */
  --h: 540px; /* スライド1枚の基本高さ（16:9比率） */
  --overlap: 14vw; /* 隣接スライド間の重なり幅 */
  --stride: 0px;
  --diag-x: 0px;
  --poly: 0px;
  --gap: 0px; /* スライド移動時の実際の移動距離 */

  /* マスク制御（JSから動的に更新） */
  --mask-angle: 15deg; /* 斜めマスクの角度 */
  --mask-offset: 0px; /* マスク位置の横方向オフセット */
  --mask-trim-top: 0px; /* マスクの上部カット量 */
  --mask-trim-bottom: 0px; /* マスクの下部カット量 */
  --slit-left: 0px; /* 左側の斜めカット幅（JSで計算） */
  --slit-right: 0px; /* 右側の斜めカット幅（JSで計算） */

  /* アニメーション時間（JSから設定） */
  --xfade-ms: 450ms;
  --arrow-zoom-ms: 900ms;
  --arrow-slideout-ms: 2500ms;

  /* 透明度制御（JSから動的に更新） */
  --stage-bg-opacity: 1;
  --video-opacity: 0;
  --slides-opacity: 1;

  /* CSS専用の静的な値（JSでは使わない） */
  /* マスク上端 = 実ヘッダー高さに一致させる */
  --header-h: var(--header-height); /* ヘッダーの高さ */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1); /* 標準イージング */
  --xfade-ease: linear; /* クロスフェード用 */
  --arrow-slideout-ease: cubic-bezier(0.2, 0.7, 0, 1); /* スライドアウト用 */
  --arrow-zoom-ease: cubic-bezier(0.42, 0, 1, 1); /* ズーム用: 初期ゆっくり→後半加速 */
  --diag-angle: 110deg; /* ロゴの斜めカット角度 */
  --edge-final: 11.5%; /* ロゴの斜めカット最終位置 */
  --arrow-dy: calc(-9.5 * (var(--h) / 540) + 7px); /* 矢印の初期Y軸オフセット（+5px下げる） */
  --arrow-slideout-dx: calc(3 * var(--w)); /* 矢印が右へ飛び出す距離 */
  --arrow-slideout-dx-sp: calc(5 * var(--w)); /* SP時の矢印が右へ飛び出す距離 */
  --arrow-zoom-scale: 140; /* 矢印の最大拡大率 */
  /* 斜カット境界のにじみ幅と位置合わせ（微調整用） */
  --edge-band: 0.1%; /* マスクの透明側のバンド幅 */
  --edge-mid: calc(var(--edge-band) / 2); /* バンド中央（位置合わせ用） */
  /* アスペクト比（JSで上書き） */
  --aspect: 0.5625; /* 540/960 の初期値 */

  /* 画面下部のグローバルぼかし（高さ・フェード・強さ）
     - vmin基準でサイズに比例させ、px下限は設けない
     - 16:9(1920x1080)基準で従来感に近い値
  */
  --bottom-blur-solid: 14vmin; /* しっかりぼかす高さ */
  --bottom-blur-fade: 14vmin; /* 上方向へのフェード高さ */
  --bottom-blur-strength: 1.85vmin; /* 強さ */
  /* コピー下専用（マスクの下側だけ効かせる） */
  --copy-bottom-blur: var(--bottom-blur-strength);
  --copy-bottom-solid: calc(0.06 * var(--w));
  --copy-bottom-fade: calc(0.08 * var(--w));
  /* ヒーローロゴのオフセット（中央基準にするため既定0） */
  --copy-ox: 0px;
  --copy-oy: 0px;

  /* ===== コピー配置とサイズ ===== */
  /* PC */
  /* mv1 */
  --mv1-width: calc(0.35 * var(--w));
  --mv1-left: calc(0.13 * var(--w));
  --mv1-bottom: calc(0.08 * var(--w));
  /* mv2 */
  --mv2-width: calc(0.37 * var(--w));
  --mv2-left: calc(0.15 * var(--w));
  --mv2-bottom: calc(0.08 * var(--w));
  /* mv3 */
  --mv3-width: calc(0.37 * var(--w));
  --mv3-left: calc(0.15 * var(--w));
  --mv3-bottom: calc(0.08 * var(--w));
  --mv3-scale: 1;

  /* SP */
  --sp-mv1-width: calc(0.7 * var(--w));
  --sp-mv1-left: calc(0.04 * var(--w));
  --sp-mv1-bottom: calc(0.65 * var(--h));

  --sp-mv2-width: calc(0.8 * var(--w));
  --sp-mv2-left: calc(0.04 * var(--w));
  --sp-mv2-bottom: calc(0.6 * var(--h));

  --sp-mv3-width: calc(0.4 * var(--w));
  --sp-mv3-left: calc(0.08 * var(--w));
  --sp-mv3-bottom: calc(0.7 * var(--h));
  --sp-mv3-scale: 2;

  /* ===== 画像配置とサイズ ===== */
}

/* カスタムプロパティ定義 */
@property --mw {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --edge {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --zoom {
  syntax: "<number>";
  inherits: false;
  initial-value: 140;
}
@property --tx {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
@property --dot-step {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ================================
   ベーススタイル
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #fff;
  color: #111;
  font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
}

html.header-under #header {
  z-index: 900;
}

/* ================================
   フローティングロゴ（ヘッダー互換表示）
   - フルスクリーン展開時のみ表示（html.header-under 時）
   - ヘッダーの .logo と同じ見た目/寸法
================================ */
.logo-float {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2200; /* すべてのオーバーレイより上 */
  display: none; /* 通常は非表示 */
  text-decoration: none;
  color: inherit;
  background: #fff;
  height: var(--header-height);
  width: min(247px, 50vw);
  clip-path: polygon(0 0, calc(100% - 37px) 0, 100% 100%, 0% 100%);
}

html.header-under .logo-float {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.logo-float .brand-logo {
  display: block;
  padding: 6px 12px;
  height: auto;
  width: 168px;
  max-width: 100%;
}
.logo-float .brand-badge {
  font-size: 11px;
  padding: 6px 12px;
  display: inline-block;
  background: #efefef;
}

@media screen and (max-width: 767px) {
  .logo-float .brand-logo {
    padding: 3px 12px;
  }
  .logo-float .brand-badge {
    font-size: 9px;
    padding: 2px 10px;
  }
}

/* ================================
   ステージ（スライダー本体）
================================ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: transparent;
  overflow: hidden;
}

/* ================================
   コピー直下の局所ぼかし無効化
================================ */
.slide-copy::after {
  display: none;
}

.stage-bg {
  position: absolute;
  inset: 0;
  background: #fff; /* 背景動画の上に被せるレイヤー（フェードで外す） */
  z-index: 0;
  opacity: var(--stage-bg-opacity, 1);
}

.slider-bg {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 0;
  opacity: var(--stage-bg-opacity, 1);
}

.stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--video-opacity, 0);
  pointer-events: none;
  z-index: 1;
}

.stage-inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, var(--stage-oy, 0px));
  width: var(--w);
  height: var(--h);
}

/* ================================
   ビューポート
================================ */
.viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--viewport-bg, #fff);
  z-index: 2;
}

.viewport-center {
  z-index: 3;
}

/* 中心基準で完全対称: 左上 = base + (gap - diag)/2; 右上 = TL + (W - gap); 右下 = TR + diag; 左下 = TL + diag */ /* var(--diag-x)/3の補正は手動調整 */
.viewport-window {
  clip-path: polygon(
    calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) - var(--diag-x)) / 2) + var(--diag-x) / 3) var(--header-h),
    calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) - var(--diag-x)) / 2) + (var(--w) - var(--gap)) - var(--diag-x) / 3) var(--header-h),
    calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) + var(--diag-x)) / 2) + (var(--w) - var(--gap)) - var(--diag-x) / 3) calc(100% - var(--mask-trim-bottom)),
    calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) + var(--diag-x)) / 2) + var(--diag-x) / 3) calc(100% - var(--mask-trim-bottom))
  );
}

@media screen and (max-width: 767px) {
  /* SP専用のマスク */
  .is-sp .viewport-window {
    clip-path: polygon(
      calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) - var(--diag-x)) / 2)) var(--header-h),
      calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) - var(--diag-x)) / 2) + (var(--w) - var(--gap))) var(--header-h),
      calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) + var(--diag-x)) / 2) + (var(--w) - var(--gap))) calc(100% - var(--mask-trim-bottom)),
      calc((var(--mask-offset) + (var(--stride) * var(--k))) + ((var(--gap) + var(--diag-x)) / 2)) calc(100% - var(--mask-trim-bottom))
    );
  }
}

.viewport .slide > img,
.viewport .slide .pan-img {
  opacity: var(--slides-opacity, 1);
  transition: opacity 0.3s linear;
}

/* ================================
   スライド
================================ */
.track {
  display: flex;
  width: max-content;
  height: 100%;
  transform: translateX(0);
  transition: none;
}

.slide {
  width: var(--w);
  height: var(--h);
  display: grid;
  place-items: center;
  font-size: calc(72 * (var(--h) / 540));
  font-weight: 700;
  position: relative;
  background: transparent; /* PCサイドの白余白を避ける */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SP: 通常スライドの上下の白余白を解消（トリミング許容） */
html.is-sp .slide > img {
  object-fit: cover;
}

/* スライドコピー */
.slide-copy {
  position: absolute;
  left: calc(0.15 * var(--w));
  bottom: calc(0.06 * var(--w));
  z-index: 3;
  pointer-events: none;
}

.slide-copy img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

/* ================================
   スクロールインジケーター
================================ */

/* 固定オーバーレイ用のコンテナ */
#scroll-overlay {
  /* 画面下基準ではなく、ステージ領域（var(--w)×var(--h)）基準 */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, var(--stage-oy, 0px));
  width: var(--w);
  height: var(--h);
  pointer-events: none;
  z-index: 2122; /* FXよりも上に表示して常に可視 */
}

/* コピーSVGをブラーの上に重ねるオーバーレイ */
#copy-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2121; /* FX(2110)より上、インジケータ(2122)より下 */
}

/* ヒーロー（最終）フェーズではコピーオーバーレイを消す */
html.copy-overlay-hidden #copy-overlay {
  display: none;
}

/* オーバーレイ内に、ステージと同じ座標系を構築 */
#copy-overlay .copy-stage-inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, var(--stage-oy, 0px));
  width: var(--w);
  height: var(--h);
}

/* オーバーレイ側のビューポートは背景透明 */
#copy-overlay .viewport {
  background: transparent;
}

/* オーバーレイの各スライド背景も透明 */
#copy-overlay .slide {
  background: transparent;
}

#copy-overlay .overlay-copy {
  position: absolute;
  left: calc(0.15 * var(--w));
  bottom: calc(0.06 * var(--w));
  width: var(--overlay-copy-width, calc(0.3 * var(--w)));
  z-index: 1;
  isolation: isolate;
}

#copy-overlay .overlay-copy img {
  display: block;
  width: 100%;
  height: auto;
  filter: none; /* くっきり表示 */
}

.copy--mv3 {
  width: var(--mv3-width);
  left: var(--mv3-left);
  bottom: var(--mv3-bottom);
  transform-origin: left bottom;
}

html.is-sp .copy--mv3 {
  width: var(--sp-mv3-width);
  left: var(--sp-mv3-left);
  bottom: var(--sp-mv3-bottom);
  transform: scale(var(--sp-mv3-scale));
  transform-origin: left bottom;
}

/* 個別サイズの調整（.copy--mvX を継承） */
#copy-overlay .overlay-copy.copy--mv1 {
  width: var(--mv1-width);
  left: var(--mv1-left);
  bottom: var(--mv1-bottom);
  transform-origin: left bottom;
}
#copy-overlay .overlay-copy.copy--mv2 {
  width: var(--mv2-width);
  left: var(--mv2-left);
  bottom: var(--mv2-bottom);
  transform-origin: left bottom;
}
#copy-overlay .overlay-copy.copy--mv3 {
  width: var(--mv3-width);
  left: var(--mv3-left);
  bottom: var(--mv3-bottom);
  transform-origin: left bottom;
}

/* SP時はオーバーレイ側のコピー位置も分離可 */
html.is-sp #copy-overlay .overlay-copy.copy--mv1 {
  width: var(--sp-mv1-width);
  left: var(--sp-mv1-left);
  bottom: var(--sp-mv1-bottom);
  transform-origin: left bottom;
}
html.is-sp #copy-overlay .overlay-copy.copy--mv2 {
  width: var(--sp-mv2-width);
  left: var(--sp-mv2-left);
  bottom: var(--sp-mv2-bottom);
  transform-origin: left bottom;
}
html.is-sp #copy-overlay .overlay-copy.copy--mv3 {
  width: var(--sp-mv3-width);
  left: var(--sp-mv3-left);
  bottom: var(--sp-mv3-bottom);
  transform-origin: left bottom;
}

/* オーバーレイ稼働中は元のコピーは隠す（重なり防止） */
/* 元のステージ内だけ非表示にし、オーバーレイのコピーは表示 */
html.copy-overlay-active .stage-inner .viewport .slide .slide-copy {
  visibility: hidden;
}
/* オーバーレイを隠している間だけ、元のコピーを再表示（ダブり防止） */
html.copy-overlay-hidden .stage-inner .viewport .slide .slide-copy {
  visibility: visible;
}

/* フルスクリーン展開以降はスライド内インジケータを隠し、オーバーレイのみ表示 */
html.header-under .slide .scroll-indicator {
  display: none;
}
.scroll-indicator {
  position: absolute;
  right: calc(0.05 * var(--w));
  /* マスク下端（var(--mask-trim-bottom)) を基準に配置 */
  bottom: calc(var(--mask-trim-bottom) + 0.05 * var(--w) - var(--dot-base-offset, 0px));
  z-index: 2110;
  pointer-events: none;
  /* 子要素の%/calcの基準を作るため、明示サイズを持つ */
  width: calc(0.12 * var(--w));
  height: calc(0.18 * var(--w));

  /* 共有プロパティ（バーとドットの整合性確保） */
  --bar-right: calc(0.05 * var(--w)); /* この箱の右端基準 */
  --bar-bottom: calc(-0.05 * var(--w)); /* この箱の下端基準 */
  --bar-width: calc(0.005 * var(--w));
  --bar-height: calc(0.15 * var(--w)); /* 元は15vw相当 */
  --dot-size: calc(0.015 * var(--w));
  --dot-travel-scale: 0.5; /* 0〜1で移動量を縮小 */
  /* 1ステップの長さ（travel/segments）と初期オフセット */
  --dot-segments: 3; /* points(=4) - 1 の既定。JSで上書き可 */
  --dot-step-len: calc(((var(--bar-height) - var(--dot-size)) * var(--dot-travel-scale)) / var(--dot-segments));
  --dot-base-offset-steps: 1; /* 基準から何ステップ分ずらすか。1=一段下げ */
  --dot-base-offset: calc(var(--dot-step-len) * var(--dot-base-offset-steps));
  transition: opacity 300ms ease;
}

/* SP専用（現状はPCと同値。微調整はここで） */
html.is-sp .scroll-indicator {
  right: calc(0.07 * var(--w));
  bottom: calc(var(--mask-trim-bottom) + 0.05 * var(--w) - var(--dot-base-offset, 0px));
  width: calc(0.24 * var(--w));
  height: calc(0.36 * var(--w));
  --bar-right: calc(0.07 * var(--w));
  --bar-bottom: calc(-0.05 * var(--w));
  --bar-width: calc(0.01 * var(--w));
  --bar-height: calc(0.3 * var(--w));
  --dot-size: calc(0.03 * var(--w));
  --dot-travel-scale: 0.5;
  --dot-segments: 3;
  --dot-step-len: calc(((var(--bar-height) - var(--dot-size)) * var(--dot-travel-scale)) / var(--dot-segments));
  --dot-base-offset-steps: 1;
  --dot-base-offset: calc(var(--dot-step-len) * var(--dot-base-offset-steps));
}

/* ロケーションバー（水平線） */
.location-bar {
  position: absolute;
  right: var(--bar-right);
  bottom: var(--bar-bottom);
  width: var(--bar-width);
  height: var(--bar-height);
  z-index: 1;
}

.location-bar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.15));
}

/* ロケーションドット（現在位置を示す四角形） */
.location-dot {
  position: absolute;
  right: calc(var(--bar-right) + (var(--bar-width) - var(--dot-size)) / 2);
  /* バーの上端センターから、指定ステップ数だけ下げた初期位置に、さらに JS からの --dot-step を適用 */
  bottom: calc(var(--bar-bottom) + var(--bar-height) - (var(--dot-size) * 0.5) - var(--dot-base-offset) - (var(--dot-step-len) * var(--dot-step)));
  width: var(--dot-size);
  height: var(--dot-size);
  z-index: 2;
}

.location-dot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.2));
}

/* SCROLLテキスト */
.scroll-text {
  position: absolute;
  bottom: calc(0.042 * var(--w));
  right: calc(0.035 * var(--w));
  width: calc(0.01 * var(--w));
  height: auto;
  z-index: 3;
}

/* SP専用（現状はPCと同値。微調整はここで） */
html.is-sp .scroll-text {
  bottom: calc(0.15 * var(--w));
  right: calc(0.035 * var(--w));
  width: calc(0.02 * var(--w));
}

.scroll-text img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.15));
  opacity: 0.8;
}

/* 縦長スライド */
.slide--tall {
  overflow: hidden;
}

.slide--tall .pan-content {
  width: 100%;
  height: calc(3600 * (var(--h) / 540));
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide--tall .pan-content img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================
   エフェクトオーバーレイ（フェーズ1: ロゴ表示）
================================ */
#fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 2110;
  pointer-events: none;
}

#fx-overlay .fx-copy-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#fx-overlay .hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translate(var(--copy-ox, 0px), var(--copy-oy, 0px));
}

/* フェーズ1: ロゴアニメーション基本 */
.slide--tall .hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: none;
}

#fx-overlay .hero-copy .line,
.slide--tall .hero-copy .line {
  width: clamp(120px, 56vw, 840px);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.25));
  --mw: 100%;
  -webkit-mask-image: linear-gradient(#fff 0 0);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#fff 0 0);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  transform: translateX(calc((100% - var(--mw)) / 2));
  opacity: 0;
}

/* フェーズ1: show-hero (ロゴ表示) */
#fx-overlay.show-hero .hero-copy {
  animation: heroFade 400ms var(--ease) forwards;
}

#fx-overlay.show-hero .hero-copy .line {
  animation: textReveal 900ms var(--ease) forwards;
}

/* フェーズ2: hide-hero (斜めカット) */
#fx-overlay.hide-hero .hero-copy .line {
  --edge: var(--edge-final);
  -webkit-mask-image: linear-gradient(var(--diag-angle), #fff var(--edge), transparent calc(var(--edge) + var(--edge-band)));
  mask-image: linear-gradient(var(--diag-angle), #fff var(--edge), transparent calc(var(--edge) + var(--edge-band)));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: 0 0;
  animation: hideDiagonal 900ms var(--ease) forwards;
  /* 斜めカットの基準（バンド中央）で位置を合わせる */
  transform: translateX(calc((100% - (var(--edge) + var(--edge-mid))) / 2));
}

/* フェーズ3: fade-line (ロゴフェードアウト) */
#fx-overlay.hide-hero.fade-line .hero-copy .line {
  animation: lineFadeOut var(--xfade-ms) var(--xfade-ease) forwards;
  /* 斜めカット最終位置に固定してからフェード */
  transform: translateX(calc((100% - (var(--edge-final) + var(--edge-mid))) / 2 - 1.2%));
}

/* ================================
   矢印オーバーレイ（フェーズ4-6）
================================ */
/* 矢印レイヤー基本 */
.slide--tall .hero-arrow-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: translate(var(--sp-arrow-dx, var(--arrow-dx, 0px)), var(--sp-arrow-dy, var(--arrow-dy, -12px)));
}

.slide--tall .hero-arrow {
  width: calc(0.05 * var(--w)); /* 約1.1倍 */
  height: auto;
  display: block;
  transform-origin: 50% 50%;
  transform: rotate(90deg);
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.25));
}

/* フェーズ4-5: プレオーバーレイ（フェードイン＆回転） */
#arrow-pre-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2120;
  background: transparent;
}

#arrow-pre-overlay .hero-arrow-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translate(var(--sp-arrow-dx, var(--arrow-dx, 0px)), var(--sp-arrow-dy, var(--arrow-dy, -12px)));
}

#arrow-pre-overlay .hero-arrow {
  width: calc(0.05 * var(--w));
  height: auto;
  display: block;
  transform-origin: 31.5% 50%;
  transform: rotate(90deg) scale(1);
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.25));
}

#arrow-pre-overlay.show-arrow .hero-arrow-layer {
  animation: arrowFadeIn var(--xfade-ms) var(--xfade-ease) forwards;
}

#arrow-pre-overlay.rotate-arrow .hero-arrow {
  animation: arrowSpinBack 1200ms var(--ease) forwards;
}

/* フェーズ6: ズームオーバーレイ（ズーム＆スライドアウト） */
#arrow-zoom-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2121;
  background: transparent;
  --zoom: 1;
}

#arrow-zoom-overlay .hero-arrow-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translate(var(--sp-arrow-dx, var(--arrow-dx, 0px)), var(--sp-arrow-dy, var(--arrow-dy, -12x)));
}

#arrow-zoom-overlay .hero-arrow {
  width: calc(0.05 * var(--w)); /* 約1.1倍 */
  height: auto;
  display: block;
  transform-origin: 31.5% 50%;
  transform: rotate(0deg) scale(var(--zoom, 1.1));
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.25));
}

#arrow-zoom-overlay.zoom .hero-arrow-layer {
  opacity: 1;
}

#arrow-zoom-overlay.zoom .hero-arrow {
  animation: arrowZoomVars var(--arrow-zoom-ms, 800ms) var(--arrow-zoom-ease, ease) forwards;
}

#arrow-zoom-overlay.slideout .hero-arrow-layer {
  animation: arrowLayerSlide var(--arrow-slideout-ms, 900ms) var(--arrow-slideout-ease, ease) forwards;
}

@media screen and (max-width: 767px) {
  #arrow-zoom-overlay.zoom .hero-arrow {
    animation: arrowZoomVarsSp var(--arrow-zoom-ms, 800ms) var(--arrow-zoom-ease, ease) forwards;
  }

  #arrow-zoom-overlay.slideout .hero-arrow-layer {
    animation: arrowLayerSlideSp var(--arrow-slideout-ms, 900ms) var(--arrow-slideout-ease, ease) forwards;
  }
}

/* ================================
   アニメーション定義
================================ */
/* フェーズ1: ロゴ表示 */
@keyframes heroFade {
  to {
    opacity: 1;
  }
}

@keyframes textReveal {
  0% {
    opacity: 0;
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    opacity: 1;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

/* フェーズ2: 斜めカット */
@keyframes hideDiagonal {
  0% {
    opacity: 1;
    --edge: 100%;
  }
  100% {
    opacity: 1;
    --edge: var(--edge-final);
  }
}

/* フェーズ3: フェードアウト */
@keyframes lineFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* フェーズ4: 矢印フェードイン */
@keyframes arrowFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* フェーズ5: 矢印回転 */
@keyframes arrowSpinBack {
  from {
    transform: rotate(90deg) scale(1);
  }
  to {
    transform: rotate(0deg) scale(1.1);
  }
}

/* フェーズ6: 矢印ズーム＆スライドアウト */
@keyframes arrowZoomVars {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(140);
  }
}

@keyframes arrowZoomVarsSp {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(260);
  }
}

@keyframes arrowLayerSlide {
  from {
    transform: translate(var(--sp-arrow-dx, var(--arrow-dx, 0px)), var(--sp-arrow-dy, var(--arrow-dy, -12px)));
  }
  to {
    transform: translate(calc(var(--sp-arrow-dx, var(--arrow-dx, 0px)) + var(--arrow-slideout-dx, 40vw)), var(--sp-arrow-dy, var(--arrow-dy, -12px)));
  }
}

@keyframes arrowLayerSlideSp {
  from {
    transform: translate(var(--sp-arrow-dx, var(--arrow-dx, 0px)), var(--sp-arrow-dy, var(--arrow-dy, -12px)));
  }
  to {
    transform: translate(calc(var(--sp-arrow-dx, var(--arrow-dx, 0px)) + var(--arrow-slideout-dx-sp, 40vw)), var(--sp-arrow-dy, var(--arrow-dy, -12px)));
  }
}

html.is-visited .view-old {
  display: none;
}

html.is-visited #topmv {
  display: none;
}

html.is-visited .movie-overlay {
  display: none;
}