@charset "UTF-8";
/* ===================================================================
   KOJI TORIUMI OFFICIAL WEBSITE
   Phase 2-A : 24 FRAME TRANSITION

   Phase 1 のベース CSS は Elementor Site Settings のカスタム CSS に
   残してあります。このファイルは Phase 2-A で追加した分だけです。
   すべて .koji-hero 配下にスコープしています。
   =================================================================== */

/* ===================================================================
   [1] スライドごとの調整値 —— ここだけを編集してください
   -------------------------------------------------------------------
   --hero-desktop-x / y : PC 表示時の焦点位置（object-position）
   --hero-mobile-x  / y : SP 表示時の焦点位置（object-position）
   --hero-duration      : そのスライドの表示時間

   値は JavaScript にハードコードしていません。JS は実行時に
   getComputedStyle() でこの値を読みます。保存後は即反映されます。
   =================================================================== */
.koji-hero .koji-hero-slides > .koji-hero-slide {
  --hero-desktop-x: 50%;
  --hero-desktop-y: 50%;
  --hero-mobile-x: 50%;
  --hero-mobile-y: 40%;
  --hero-duration: 2600ms;
}

/* -------------------------------------------------------------------
   Phase 2-A で作った仕組みのまま、Phase 5 で値だけを個別調整しました。
   変えたのは 4 つの焦点位置変数だけで、--hero-duration や
   他のセクションは一切触っていません。

   切り抜かれ方の前提（実測済み）:
     PC … 画像は 16:10。ビューポートが 16:10（1440×900 / 1280×800）のときは
            切り抜きが発生しないため X / Y は見た目に影響しません。
            16:9 以上に横長い画面（1920×1080 等）で縦方向が切られ、Y が効きます。
            4:3 寄り（1024×768 等）で横方向が切られ、X が効きます。
     SP … 画像は 9:16。一般的な縦長ビューポートでは高さがぴったり合うため
            横方向だけが約 18〜20% 切られます。つまり X が主役で、
            Y は背の低い画面になったときの保険として残してあります。
   ------------------------------------------------------------------- */

/* SLIDE 01 — THE LAST LINE
   PC : 選手がほぼ中央、頭頂が上端 5% 付近。横長画面で頭が切れないよう Y を上へ。
   SP : 選手が右寄り（X 62〜92%）なので X を右端へ。 */
.koji-hero .koji-hero-slides > .koji-hero-slide:nth-child(1) {
  --hero-desktop-x: 50%;
  --hero-desktop-y: 15%;
  --hero-mobile-x: 100%;
  --hero-mobile-y: 35%;
  --hero-duration: 4000ms;
}
/* SLIDE 02 — READ THE GAME
   PC : サポーターとの集合写真。顔の列が Y 25〜35% に並ぶため余裕あり。
   SP : 鳥海選手が X 52% 。見える範囲の中央へ合わせる。 */
.koji-hero .koji-hero-slides > .koji-hero-slide:nth-child(2) {
  --hero-desktop-x: 50%;
  --hero-desktop-y: 45%;
  --hero-mobile-x: 60%;
  --hero-mobile-y: 45%;
  --hero-duration: 2600ms;
}
/* SLIDE 03 — STOP. START.
   PC : 選手 X 33〜52%、ボールが下部 Y 88%。ボールを残すため Y をやや下へ。
   SP : 選手が右寄り（X 62〜95%）。ボール X 57% も残る位置。 */
.koji-hero .koji-hero-slides > .koji-hero-slide:nth-child(3) {
  --hero-desktop-x: 35%;
  --hero-desktop-y: 55%;
  --hero-mobile-x: 95%;
  --hero-mobile-y: 35%;
  --hero-duration: 2600ms;
}
/* SLIDE 04 — NO. 24
   PC : 選手が右寄り（X 55〜72%）、ボール X 57% / Y 83%。
   SP : 選手が左寄り（X 15〜50%）、ボール X 70%。両方残る位置へ。 */
.koji-hero .koji-hero-slides > .koji-hero-slide:nth-child(4) {
  --hero-desktop-x: 80%;
  --hero-desktop-y: 35%;
  --hero-mobile-x: 15%;
  --hero-mobile-y: 40%;
  --hero-duration: 2600ms;
}
/* SLIDE 05 — QUIET STRENGTH
   PC : 選手がほぼ中央（X 40〜62%）、頭頂 Y 20%で余裕あり。
   SP : 両手を広げた姿勢。中央寄りのままで成立する。 */
.koji-hero .koji-hero-slides > .koji-hero-slide:nth-child(5) {
  --hero-desktop-x: 45%;
  --hero-desktop-y: 45%;
  --hero-mobile-x: 60%;
  --hero-mobile-y: 50%;
  --hero-duration: 2600ms;
}
/* SLIDE 06 — KOJI TORIUMI
   PC : 選手が右寄り（X 63〜85%）、頭頂が Y 7% とかなり上。
        頭を優先して Y を上へ（ボールは Y 93% で横長画面だと残せない / 報告書参照）。
   SP : 別カット。選手が右寄り（X 62〜95%）、ボール X 60%。 */
.koji-hero .koji-hero-slides > .koji-hero-slide:nth-child(6) {
  --hero-desktop-x: 90%;
  --hero-desktop-y: 25%;
  --hero-mobile-x: 95%;
  --hero-mobile-y: 30%;
  --hero-duration: 4100ms;
}

/* トランジション全体の尺度（1回の切り替え時間） */
.koji-hero {
  --hero-transition: 900ms;
  --hero-afterglow: 300ms;
  --hero-24-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 140'%3E%3Cpath fill='%23fff' d='M0 0H90V84H28V112H90V140H0V56H62V28H0Z'/%3E%3Cpath fill='%23fff' d='M106 0H134V84H162V0H190V140H162V112H106Z'/%3E%3C/svg%3E");
  --hero-24-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 200 150'%3E%3Cg fill='none' stroke='%23FFD400' stroke-width='4'%3E%3Cpath d='M0 0H90V84H28V112H90V140H0V56H62V28H0Z'/%3E%3Cpath d='M106 0H134V84H162V0H190V140H162V112H106Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===================================================================
   [2] object-position の適用
   Image ウィジェット（<img>）とコンテナ背景画像の両方に対応。
   =================================================================== */
.koji-hero .koji-hero-image--desktop img,
.koji-hero .koji-hero-image--desktop .elementor-widget-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--hero-desktop-x) var(--hero-desktop-y);
}
.koji-hero .koji-hero-image--desktop {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hero-desktop-x) var(--hero-desktop-y);
}
.koji-hero .koji-hero-image--mobile img,
.koji-hero .koji-hero-image--mobile .elementor-widget-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--hero-mobile-x) var(--hero-mobile-y);
}
.koji-hero .koji-hero-image--mobile {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hero-mobile-x) var(--hero-mobile-y);
}
.koji-hero .koji-hero-image .elementor-widget-image,
.koji-hero .koji-hero-image .elementor-widget-image .elementor-widget-container,
.koji-hero .koji-hero-image figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ===================================================================
   [3] レイヤー順とスライドの基本挙動
   =================================================================== */
.koji-hero {
  touch-action: pan-y;
}
.koji-hero .koji-hero-slides {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* JS が初期化した後だけスライド制御を引き継ぐ。
   JS が動かない環境では Phase 1 の「1枚目のみ表示」のまま。 */
/* 不透明度はトランジションさせずに切り替えます。
   見た目のブレンドは 24 マスク側が担当し、
   ブラウザがアニメーションを間引いてもスライドが二重に残らないようにします。 */
.koji-hero.koji-hero--ready .koji-hero-slides > .koji-hero-slide {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: none;
}
.koji-hero.koji-hero--ready .koji-hero-slides > .koji-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.koji-hero.koji-hero--ready .koji-hero-slides > .koji-hero-slide.is-leaving {
  opacity: 1;
  z-index: 1;
}
.koji-hero.koji-hero--ready .koji-hero-slides > .koji-hero-slide.is-entering {
  opacity: 1;
  z-index: 2;
  transition: none;
}

/* ===================================================================
   [4] 24 FRAME マスク
   入ってくるスライドの画像レイヤーを 24 の形で切り抜き、
   マスクを拡大して全面表示へつなげます。
   グリフは SVG の path なので Web フォントの読み込みに依存しません。
   =================================================================== */
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering .koji-hero-image {
  -webkit-mask-image: var(--hero-24-glyph);
  mask-image: var(--hero-24-glyph);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 0% auto;
  mask-size: 0% auto;
  will-change: -webkit-mask-size, mask-size;
  animation-duration: var(--hero-transition);
  animation-timing-function: cubic-bezier(0.66, 0, 0.2, 1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

/* コピーはマスクしない。少し遅れてフェードイン。 */
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering .koji-hero-copy {
  animation: koji24-copy-in var(--hero-transition) cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes koji24-copy-in {
  0%, 45% { opacity: 0; transform: translateY(14px); }
  100%    { opacity: 1; transform: none; }
}

/* 出ていくスライドのコピーは先に消す（コピー同士の重なり防止） */
.koji-hero.koji-hero--ready .koji-hero-slide.is-leaving .koji-hero-copy {
  animation: koji24-copy-out calc(var(--hero-transition) * 0.5) ease-in both;
}
@keyframes koji24-copy-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- バリエーション 01 中央から拡大 ---- */
@keyframes koji24-center {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto;   -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
  12%  { -webkit-mask-size: 15% auto;  mask-size: 15% auto; }
  100% { -webkit-mask-size: 520% auto; mask-size: 520% auto; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
}
/* ---- バリエーション 02 左から右へ移動 ---- */
@keyframes koji24-sweep {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto;   -webkit-mask-position: 0% 50%;   mask-position: 0% 50%; }
  12%  { -webkit-mask-size: 16% auto;  mask-size: 16% auto; }
  100% { -webkit-mask-size: 520% auto; mask-size: 520% auto; -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
}
/* ---- バリエーション 03 上下分割 ---- */
@keyframes koji24-split {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto;   clip-path: inset(48% 0 48% 0); }
  12%  { -webkit-mask-size: 18% auto;  mask-size: 18% auto;  clip-path: inset(40% 0 40% 0); }
  100% { -webkit-mask-size: 520% auto; mask-size: 520% auto; clip-path: inset(0 0 0 0); }
}
/* ---- バリエーション 04 縦スリット ---- */
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="4"] .koji-hero-image {
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
@keyframes koji24-slit {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto; }
  14%  { -webkit-mask-size: 6% auto;   mask-size: 6% auto; }
  55%  { -webkit-mask-size: 48% auto;  mask-size: 48% auto; }
  100% { -webkit-mask-size: 520% auto; mask-size: 520% auto; }
}
/* ---- バリエーション 05 輪郭発光 / 06 輪郭だけ残す ---- */
/* マスク自体は 01 と同じ。演出差は .koji-hero-24glow 側でつけます。 */

.koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="1"] .koji-hero-image { animation-name: koji24-center; }
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="2"] .koji-hero-image { animation-name: koji24-sweep; }
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="3"] .koji-hero-image { animation-name: koji24-split; }
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="4"] .koji-hero-image { animation-name: koji24-slit; }
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="5"] .koji-hero-image { animation-name: koji24-center; }
.koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="6"] .koji-hero-image { animation-name: koji24-center; }

/* ===================================================================
   [5] 補助レイヤー（黄色ライン / 輪郭 / 残光）
   =================================================================== */
.koji-hero .koji-hero-24stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.koji-hero .koji-hero-24stage > span {
  position: absolute;
  display: block;
  opacity: 0;
}

/* 細い黄色ライン */
.koji-hero .koji-hero-24line {
  left: 0;
  right: 0;
  top: 52%;
  height: 2px;
  background: var(--koji-yellow, #FFD400);
  box-shadow: 0 0 18px var(--koji-yellow-glow, rgba(255, 212, 0, 0.35));
  transform: scaleX(0);
  transform-origin: left center;
}
.koji-hero.is-transitioning .koji-hero-24line {
  animation: koji24-line calc(var(--hero-transition) * 0.62) cubic-bezier(0.5, 0, 0.2, 1) both;
}
@keyframes koji24-line {
  0%   { opacity: 0; transform: scaleX(0); transform-origin: left center; }
  10%  { opacity: 1; }
  52%  { opacity: 1; transform: scaleX(1); transform-origin: left center; }
  53%  { opacity: 1; transform: scaleX(1); transform-origin: right center; }
  100% { opacity: 0; transform: scaleX(0); transform-origin: right center; }
}

/* 24 の輪郭 */
.koji-hero .koji-hero-24glow {
  inset: 0;
  background-image: var(--hero-24-outline);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 0% auto;
  filter: drop-shadow(0 0 12px var(--koji-yellow-glow, rgba(255, 212, 0, 0.35)));
}
.koji-hero.is-transitioning .koji-hero-24glow {
  animation: koji24-outline-follow var(--hero-transition) cubic-bezier(0.66, 0, 0.2, 1) both;
}
.koji-hero.is-transitioning[data-koji-variant="5"] .koji-hero-24glow {
  animation: koji24-outline-pulse var(--hero-transition) cubic-bezier(0.66, 0, 0.2, 1) both;
}
.koji-hero.is-transitioning[data-koji-variant="6"] .koji-hero-24glow {
  animation: koji24-outline-linger calc(var(--hero-transition) + var(--hero-afterglow)) linear both;
}
/* 輪郭はマスク（koji24-center）と同じ尺度で拡大させ、切り抜きの縁に重ねます。 */
@keyframes koji24-outline-follow {
  0%   { opacity: 0;    background-size: 0% auto; }
  12%  { opacity: 0.85; background-size: 15% auto; }
  100% { opacity: 0;    background-size: 520% auto; }
}
@keyframes koji24-outline-pulse {
  0%   { opacity: 0; background-size: 0% auto;   filter: drop-shadow(0 0 0 rgba(255, 212, 0, 0)); }
  12%  { opacity: 1; background-size: 15% auto;  filter: drop-shadow(0 0 26px rgba(255, 212, 0, 0.9)); }
  55%  { opacity: 1;                             filter: drop-shadow(0 0 34px rgba(255, 212, 0, 0.75)); }
  100% { opacity: 0; background-size: 520% auto; filter: drop-shadow(0 0 10px rgba(255, 212, 0, 0)); }
}
/* バリエーション 06：マスク完了（全体の75%）までマスクと同じ弧をなぞり、
   その後輪郭だけが約 0.3 秒残って消えます。
   マスク側の cubic-bezier をサンプルした値を並べているので timing-function は linear。 */
@keyframes koji24-outline-linger {
  0%     { opacity: 0;   background-size: 0% auto; }
  9%     { opacity: 0.9; background-size: 15% auto; }
  15%    { opacity: 1;   background-size: 18.7% auto; }
  22.5%  { opacity: 1;   background-size: 38% auto; }
  30%    { opacity: 1;   background-size: 90.9% auto; }
  37.5%  { opacity: 1;   background-size: 237.9% auto; }
  45%    { opacity: 1;   background-size: 401.9% auto; }
  52.5%  { opacity: 1;   background-size: 470.3% auto; }
  60%    { opacity: 1;   background-size: 501.9% auto; }
  67.5%  { opacity: 1;   background-size: 516.1% auto; }
  75%    { opacity: 1;   background-size: 520% auto; }
  100%   { opacity: 0;   background-size: 560% auto; }
}

/* 黄色い残光（約 0.3 秒） */
.koji-hero .koji-hero-24flash {
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(255, 212, 0, 0.42) 0%, rgba(255, 212, 0, 0.12) 45%, rgba(255, 212, 0, 0) 78%);
  mix-blend-mode: screen;
}
.koji-hero.is-transitioning .koji-hero-24flash {
  animation: koji24-flash var(--hero-afterglow) ease-out both;
  animation-delay: calc(var(--hero-transition) - 60ms);
}
@keyframes koji24-flash {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===================================================================
   [6] 操作 UI（PREV / NEXT / プログレス）
   =================================================================== */
.koji-hero .koji-hero-fixed  { z-index: 4; }
.koji-hero .koji-hero-progress { z-index: 5; }
.koji-hero .koji-hero-nav {
  position: absolute;
  left: var(--koji-gutter, 80px);
  right: var(--koji-gutter, 80px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: none;
  width: auto;
}
.koji-hero .koji-hero-nav .elementor-widget-container { width: 100%; }
.koji-hero .koji-hero-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: none;
}
.koji-hero .koji-hero-nav button {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--koji-line, rgba(255, 255, 255, 0.16));
  border-radius: 0;
  color: var(--koji-white, #F3F1EB);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  min-width: 44px;
  min-height: 44px;
  padding: 12px 18px;
  cursor: pointer;
  transition: color 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}
.koji-hero .koji-hero-nav button:hover,
.koji-hero .koji-hero-nav button:focus-visible {
  color: var(--koji-yellow, #FFD400);
  border-color: var(--koji-yellow, #FFD400);
  background-color: rgba(7, 7, 7, 0.45);
}

/* プログレスラインをボタン化 */
.koji-hero .koji-hero-progress .koji-hero-progress-bar {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  cursor: pointer;
  flex: 1 1 0;
  height: auto;
  position: relative;
  display: block;
}
.koji-hero .koji-hero-progress .koji-hero-progress-bar > span {
  position: relative;
  display: block;
  height: 2px;
  width: 100%;
  background: var(--koji-line, rgba(255, 255, 255, 0.16));
  inset: auto;
  transition: background-color 0.3s ease;
}
/* 進行バー本体。JS が width を直接制御します。 */
.koji-hero .koji-hero-progress .koji-hero-progress-bar > span > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 0;
  font-style: normal;
  background: var(--koji-yellow, #FFD400);
}
.koji-hero.koji-hero--ready .koji-hero-progress .koji-hero-progress-bar:first-child > span {
  width: 100%;
}
.koji-hero .koji-hero-progress .koji-hero-progress-bar:hover > span,
.koji-hero .koji-hero-progress .koji-hero-progress-bar:focus-visible > span {
  background: rgba(255, 255, 255, 0.42);
}

/* ドラッグ中のカーソル */
.koji-hero.is-dragging { cursor: grabbing; }
.koji-hero.is-dragging * { user-select: none; }

/* ===================================================================
   [7] スマートフォン（～767px）
   24 は下から上へ抜ける。横スクロールは発生させない。
   =================================================================== */
@media (max-width: 767px) {
  .koji-hero { overflow-x: clip; }
  /* Phase 2-B: PREV / NEXT を下部の積み重なりから外し、PC と同じ中央左右へ。
     以前は bottom:96px でコピー・固定情報・プログレスの間隔が 2～10px しかなく、
     実機で押し間違えやすい状態でした。 */
  .koji-hero .koji-hero-nav {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .koji-hero .koji-hero-nav button {
    font-size: 9px;
    padding: 12px 8px;
    letter-spacing: 0.14em;
  }
  .koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="1"] .koji-hero-image,
  .koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="5"] .koji-hero-image,
  .koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="6"] .koji-hero-image { animation-name: koji24-sp-rise; }
  .koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="2"] .koji-hero-image { animation-name: koji24-sp-rise-sweep; }
  .koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="3"] .koji-hero-image { animation-name: koji24-sp-split; }
  .koji-hero.koji-hero--ready .koji-hero-slide.is-entering[data-koji-variant="4"] .koji-hero-image { animation-name: koji24-sp-slit; }
  .koji-hero.is-transitioning .koji-hero-24glow { animation-name: koji24-sp-outline; }
  .koji-hero.is-transitioning[data-koji-variant="6"] .koji-hero-24glow { animation-name: koji24-sp-outline-linger; animation-timing-function: linear; }
}
/* 巨大な 24 が下から上へ抜ける */
@keyframes koji24-sp-rise {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto;   -webkit-mask-position: 50% 118%; mask-position: 50% 118%; }
  14%  { -webkit-mask-size: 62% auto;  mask-size: 62% auto; }
  100% { -webkit-mask-size: 700% auto; mask-size: 700% auto; -webkit-mask-position: 50% -18%; mask-position: 50% -18%; }
}
@keyframes koji24-sp-rise-sweep {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto;   -webkit-mask-position: 0% 118%;   mask-position: 0% 118%; }
  14%  { -webkit-mask-size: 62% auto;  mask-size: 62% auto; }
  100% { -webkit-mask-size: 700% auto; mask-size: 700% auto; -webkit-mask-position: 100% -18%; mask-position: 100% -18%; }
}
@keyframes koji24-sp-split {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto;   -webkit-mask-position: 50% 118%; mask-position: 50% 118%; clip-path: inset(48% 0 48% 0); }
  14%  { -webkit-mask-size: 62% auto;  mask-size: 62% auto;  clip-path: inset(38% 0 38% 0); }
  100% { -webkit-mask-size: 700% auto; mask-size: 700% auto; -webkit-mask-position: 50% -18%; mask-position: 50% -18%; clip-path: inset(0 0 0 0); }
}
@keyframes koji24-sp-slit {
  0%   { -webkit-mask-size: 0% auto;   mask-size: 0% auto;   -webkit-mask-position: 50% 118%; mask-position: 50% 118%; }
  16%  { -webkit-mask-size: 16% auto;  mask-size: 16% auto; }
  56%  { -webkit-mask-size: 90% auto;  mask-size: 90% auto; }
  100% { -webkit-mask-size: 700% auto; mask-size: 700% auto; -webkit-mask-position: 50% -18%; mask-position: 50% -18%; }
}
@keyframes koji24-sp-outline {
  0%   { opacity: 0;    background-size: 0% auto;   background-position: 50% 118%; }
  14%  { opacity: 0.85; background-size: 62% auto; }
  100% { opacity: 0;    background-size: 700% auto; background-position: 50% -18%; }
}
@keyframes koji24-sp-outline-linger {
  0%     { opacity: 0;   background-size: 0% auto;   background-position: 50% 118%; }
  10.5%  { opacity: 0.9; background-size: 62% auto;  background-position: 50% 99%; }
  16.4%  { opacity: 1;   background-size: 66.6% auto;  background-position: 50% 90%; }
  23.7%  { opacity: 1;   background-size: 91.1% auto;  background-position: 50% 79%; }
  31%    { opacity: 1;   background-size: 157.9% auto; background-position: 50% 66%; }
  38.4%  { opacity: 1;   background-size: 343.6% auto; background-position: 50% 51%; }
  45.7%  { opacity: 1;   background-size: 550.8% auto; background-position: 50% 32%; }
  53%    { opacity: 1;   background-size: 637.2% auto; background-position: 50% 12%; }
  60.3%  { opacity: 1;   background-size: 677.2% auto; background-position: 50% -4%; }
  67.7%  { opacity: 1;   background-size: 695.1% auto; background-position: 50% -13%; }
  75%    { opacity: 1;   background-size: 700% auto;   background-position: 50% -18%; }
  100%   { opacity: 0;   background-size: 760% auto;   background-position: 50% -22%; }
}

/* ===================================================================
   [8] Reduce Motion
   自動再生停止 / 24 マスク停止 / クロスフェードへ /
   黄色フラッシュ停止 / パララックス停止。
   PREV / NEXT / キーボードは引き続き使えます。
   =================================================================== */
.koji-hero.koji-hero--reduced .koji-hero-slide.is-entering .koji-hero-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: none !important;
  clip-path: none !important;
}
.koji-hero.koji-hero--reduced .koji-hero-slide.is-entering .koji-hero-copy { animation: none !important; }
.koji-hero.koji-hero--reduced .koji-hero-slides > .koji-hero-slide.is-entering {
  animation: koji-reduced-fade 320ms linear both;
}
@keyframes koji-reduced-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.koji-hero.koji-hero--reduced .koji-hero-24stage { display: none !important; }
.koji-hero.koji-hero--reduced .koji-hero-slide { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .koji-hero .koji-hero-24stage { display: none !important; }
  .koji-hero .koji-hero-slide.is-entering .koji-hero-image {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    animation: none !important;
    clip-path: none !important;
  }
  .koji-hero .koji-hero-slide.is-entering .koji-hero-copy { animation: none !important; }
}

/* ===================================================================
   [9] Elementor 編集画面の安全弁
   編集中はスライドを縦積みのままにし、
   マスクやオーバーレイで編集を邪魔しない。
   =================================================================== */
body.elementor-editor-active .koji-hero .koji-hero-24stage,
body.elementor-editor-active .koji-hero .koji-hero-nav { display: none !important; }
body.elementor-editor-active .koji-hero .koji-hero-slides > .koji-hero-slide {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.elementor-editor-active .koji-hero .koji-hero-slide .koji-hero-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: none !important;
}