@charset "UTF-8";
/* ===================================================================
   KOJI TORIUMI OFFICIAL WEBSITE
   Phase 2-B : レスポンシブ検証で見つかった不具合の修正

   24 FRAME TRANSITION の基本仕様（SVG マスク / バリエーション順 /
   表示時間 / 操作方法）は変えていません。
   ファーストビューとグローバルヘッダーにスコープしています。
   koji-site.css の後に読み込まれます。
   =================================================================== */

/* ===================================================================
   [2B-1] 高さの基準を svh に固定
   svh = small viewport height。アドレスバーが出ている状態の高さなので、
   バーの伸縮でレイアウトが跳ねません。
   Elementor の --min-height:100vh より確実に勝つ位置で宣言します。
   =================================================================== */
.koji-hero,
.koji-hero .koji-hero-slides {
  min-height: 100svh;
}
@supports not (min-height: 100svh) {
  .koji-hero,
  .koji-hero .koji-hero-slides { min-height: 100vh; }
}

/* ===================================================================
   [2B-2] 左右の基準線をそろえる
   コピーはスライドの padding（80 / 40 / 20px）、
   KOJI TORIUMI とプログレスは --koji-gutter（80 / 64 / 40 / 20 / 16px）を
   見ていたため、1200、1599px で 16px、374px 以下で 4px ずれていました。
   すべて --koji-gutter に統一します。
   env() は viewport-fit=cover 未指定の現状では 0 なので余白は増えません。
   =================================================================== */
.koji-hero .koji-hero-slides > .koji-hero-slide {
  padding-left: max(var(--koji-gutter, 80px), env(safe-area-inset-left)) !important;
  padding-right: max(var(--koji-gutter, 80px), env(safe-area-inset-right)) !important;
}
.koji-hero .koji-hero-fixed,
.koji-hero .koji-hero-progress,
.koji-hero .koji-hero-nav {
  left: max(var(--koji-gutter, 80px), env(safe-area-inset-left));
  right: max(var(--koji-gutter, 80px), env(safe-area-inset-right));
}

/* ===================================================================
   [2B-3] コピーの文字サイズをヒーロー専用の clamp で固定
   これまでは Elementor グローバルタイポグラフィ（clamp(48px,8vw,160px)）が
   勝っており、1920px で 153.6px、390px 以下では下限 48px のせいで
   「READ THE GAME」「QUIET STRENGTH」が 2 行に折れていました。
   7.2vw / 下限 36px / 上限 132px で、全幅で 1 行に収まります。
   =================================================================== */
.koji-hero .koji-hero-copy .elementor-heading-title,
.koji-hero .koji-hero-slide .koji-hero-copy .elementor-heading-title {
  /* 幅だけでなく高さも見ることで、横向きのスマートフォンなど
     背の低い画面でもヘッダーや固定情報とぶつかりません。 */
  font-size: clamp(36px, min(7.2vw, 13vh), 132px);
  line-height: 0.9;
}

/* ===================================================================
   [2B-11] Phase B-1: OFFICIAL WEBSITE を TORIUMI と同じ幅に揃える

   [2B-3] はコピー 2 行をまとめて同じ font-size にしているため、
   OFFICIAL WEBSITE が TORIUMI より長く見えていました。

   変更前の実測（全幅で一定）:
     TORIUMI 幅 : OFFICIAL WEBSITE 幅 = 1 : 2.1745
     例) 1440px … TORIUMI 413.45px / OFFICIAL WEBSITE 899.05px

   必要倍率 = 1 / 2.1745 = 0.45989
   [2B-3] の clamp の各項をこの倍率で縮めています。
     36px    ->  16.8px   （SP 下限。375px 付近で TORIUMI とほぼ同幅）
     7.2vw   ->  3.311vw
     13vh    ->  5.979vh
     132px   ->  60.7px   （PC 上限）

   セレクタは .koji-hero-copy 直下の最後の見出し＝OFFICIAL WEBSITE。
   4 スライドすべてに効き、スライドを増やしても自動で適用されます。
   詳細度はクラス 6 個 (0,6,0) で [2B-3] の (0,4,0) に確実に勝つため
   !important は不要です。

   ※ KOJI / TORIUMI 側（.koji-hero-copy の最初の見出し）は一切変更していません。
   ※ font-family / weight / style / letter-spacing / line-height も変更していません。
   =================================================================== */
.koji-hero .koji-hero-slide .koji-hero-copy
  > .elementor-widget-heading:last-child .elementor-heading-title {
  font-size: clamp(16.8px, min(3.311vw, 5.979vh), 60.7px);
}

/* ===================================================================
   [2B-4] Elementor コンテナの transition をヒーロー画像層で切る
   .e-con には transition: background .3s / transform .4s が入っており、
   背景画像を入れたときに 24 マスクのアニメーションと競合します。
   （検証で background-position の値が transition に固定されるのを確認）
   =================================================================== */
.koji-hero .koji-hero-image,
.koji-hero .koji-hero-slides > .koji-hero-slide {
  transition: none;
}

/* ===================================================================
   [2B-5] タップ領域 44px の確保
   プログレスラインは 22px、Instagram アイコンは 22×31px しかなく、
   スマートフォンで押しにくい状態でした。見た目の 2px ラインはそのままです。
   =================================================================== */
.koji-hero .koji-hero-progress .koji-hero-progress-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
}
.koji-header .koji-header-instagram a,
.koji-header .koji-header-instagram .elementor-icon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===================================================================
   [2B-6] 下部の重なり解消とセーフエリア
   プログレスが画面最下端に接しており、ホームインジケーターと
   重なる可能性がありました。固定情報との間隔も確保します。
   =================================================================== */
.koji-hero .koji-hero-progress {
  bottom: env(safe-area-inset-bottom);
}
.koji-hero .koji-hero-fixed {
  bottom: calc(clamp(72px, 6vw, 96px) + env(safe-area-inset-bottom));
}

/* ===================================================================
   [2B-7] タブレット縦向き（768～1024px / portrait）
   16:10 の PC 素材を 3:4 の窓に入れると左右を大きく切り落とすため、
   縦向きは 9:16 の SP 素材を使い、24 も縦画面用の「下から上へ抜ける」動きに
   そろえます。横向きのタブレットは従来どおり PC 素材です。
   使う画像はフェーズ1で用意済みの 12 枚のままで、新しい素材は増やしません。
   =================================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .koji-hero .koji-hero-slide .koji-hero-image--desktop { display: none; }
  .koji-hero .koji-hero-slide .koji-hero-image--mobile  { display: flex; }

  .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; }
}

/* ===================================================================
   [2B-7b] バリエーション 05（輪郭発光）の縦画面版
   Phase 2-A では variant 5 の輪郭だけが PC 用キーフレーム（中央拡大）のままで、
   マスク（下から上へ）と動きがずれていました。発光は残したまま
   弧だけ sp-rise にそろえます。
   =================================================================== */
@keyframes koji24-sp-outline-pulse {
  0%   { opacity: 0; background-size: 0% auto;   background-position: 50% 118%; filter: drop-shadow(0 0 0 rgba(255, 212, 0, 0)); }
  14%  { opacity: 1; background-size: 62% 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: 700% auto; background-position: 50% -18%; filter: drop-shadow(0 0 10px rgba(255, 212, 0, 0)); }
}
@media (max-width: 767px) {
  .koji-hero.is-transitioning[data-koji-variant="5"] .koji-hero-24glow { animation-name: koji24-sp-outline-pulse; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .koji-hero.is-transitioning[data-koji-variant="5"] .koji-hero-24glow { animation-name: koji24-sp-outline-pulse; }
}

/* ===================================================================
   [2B-8] スマートフォンの下部間隔
   PREV / NEXT を中央へ退避したので、残るのは
   コピー → 固定情報 → プログレスの 3 段です。
   =================================================================== */
@media (max-width: 767px) {
  .koji-hero .koji-hero-fixed {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/* ===================================================================
   [2B-9] 横向きのスマートフォンなど、高さが極端に低い画面
   ヘッダーとコピーが近づきすぎないように文字と余白を落とします。
   =================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  .koji-hero .koji-hero-fixed {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  /* 高さがないので PREV / NEXT を上げてコピーの上に重ならないようにする */
  .koji-hero .koji-hero-nav {
    top: 34%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .koji-hero .koji-hero-nav button {
    padding: 10px 8px;
    font-size: 9px;
  }
}

/* ===================================================================
   [2B-10] Elementor 編集画面
   編集中はスライドを縦積みで見せるため、
   Phase 2-B で追加した固定配置も解除しておきます。
   =================================================================== */
body.elementor-editor-active .koji-hero,
body.elementor-editor-active .koji-hero .koji-hero-slides {
  min-height: 0;
}
body.elementor-editor-active .koji-hero .koji-hero-slide .koji-hero-image--desktop,
body.elementor-editor-active .koji-hero .koji-hero-slide .koji-hero-image--mobile {
  display: flex;
}