/* =========================================================
   hero.css（Hero セクション専用スタイル / ぴったり優先版）
   ---------------------------------------------------------
   目的：
     - スマホのアドレスバー出入りによる再レイアウト（ちらつき）を抑止
     - セクション高さを「常に画面ちょうど＝1画面」に固定（min-height ではなく height）
     - dvh は使用しない（URLバー連動で高さが揺れるため）
     - 背景レイヤ（Three/波SVG）の右ガター塗り漏れ防止（--sbw）を維持

   高さ決定の優先順：
     1) height: 100svh（安定ビューポート。対応ブラウザで最優先）
     2) height: calc(var(--vh-stable, 1vh) * 100)（svh非対応フォールバック）
        - --vh-stable はロード時に 1 回だけ算出する JS（common.js 等）を推奨
        - 未設定でも 1vh にフォールバックして動作（完全安定には劣る）
   注意：
     - --sbw（スクロールバー幅＝ 100vw - 100% ）は common.css 側で定義前提
     - html, body の背景やスクロール抑止は他CSSで担当
   ========================================================= */


/* =============================
   Heroエリア（波＋メインタイトル）
   - “ぴったり優先”：高さは常に1画面ちょうど（height を使用）
   - dvh は使用しない
   ============================= */
#hero {
  position: relative;
  color: #333;
  background: #fff;        /* ← “ページ全体”ではなく、セクションだけ白に */
  margin: 0;
  padding: 0;
  overflow: hidden;        /* 波やスライダーが画面外にはみ出さないように */
  z-index: 10;

  /* --- svh 非対応時の既定高さ（JSの --vh-stable を優先） --- */
  height: calc(var(--vh-stable, 1vh) * 100);
}

/* svh が使える環境では 100svh を最優先で採用（常に1画面） */
@supports (height: 100svh) {
  #hero { height: 100svh; }
}


/* =============================
   Three.js 背景スライダー
   - 右端のスクロールバー“溝”での塗り漏れ防止
     → right を -var(--sbw) として右ににじませる
   ============================= */
.js-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: calc(var(--sbw, 0px) * -1);  /* ★右ガターまで塗る */
  height: 100%;
  overflow: hidden;
  z-index: 0; /* 背景として最背面に置く */
}
.js-slider__inner,
.js-slide {
  width: 100%;
  height: 100%;
}
.js-slide__img {
  display: none; /* Three.jsで描画するのでHTML画像は非表示 */
}


/* =============================
   SVG波アニメーション（wavify用）
   - Three と同様に右端へにじませて覆う
   ============================= */
.wave-svg {
  position: absolute;
  left: 0;
  top: 0;
  right: calc(var(--sbw, 0px) * -1);  /* ★右ガターまで塗る */
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.wave-fill {
  fill: rgba(195,192,178,1.14);
}


/* =============================
   メインタイトル・サブタイトル
   - ★変更点：ビューポート固定（fixed）→ セクション内固定（absolute）
     → スクロールで #hero と一緒に画面外へ移動（“ヒーローにくっつく”）
   - 配置は px + safe-area の安定単位を使用
   ============================= */
#main-title {
  /* ▼ここを fixed→absolute に変更（重要・要件対応） */
  position: absolute;

  /* ★右下アンカー
     - right/bottom を基準に置くことで、アドレスバーの出入りでも位置が揺れない
     - safe-area を考慮しつつ、過度に内側へ寄りすぎない固定値に調整
  */
  left: auto; /* ← 左基準は無効化 */
  right: calc(16px + env(safe-area-inset-right, 0px));
  top: auto;  /* ← 上基準は無効化 */
  bottom: calc(48px + env(safe-area-inset-bottom, 0px)); /* 右下へ落とし込む */

  z-index: 21;             /* 背景より前、ナビ（~2200）よりは下：原文維持 */
  text-align: right;       /* 右寄せ配置に合わせて右揃え */
  font-weight: 800;
  line-height: 0.65;
  letter-spacing: 0.04em;
  font-size: 3.3em;
  opacity: 1;
  transform: scale(1);

  /* 原文維持：クリックを拾わない（背面リンクの邪魔をしない） */
  pointer-events: none;

  /* ※ hero.js 側に“スクロールで拡大・フェード”の処理があれば無効化推奨
     （常時表示・常時同位置にするため） */
  transition: opacity 0.45s, transform 0.45s;

  color: #fff; /* 常に白文字（PC/SP共通） */
}
#main-title .line1{
  display: block;
  font-size: 1em;
}
#main-title .line2 {
  display: block;
  font-size: 1em;
  font-weight: 300;
}
#main-title .line2.thin {
  font-weight: 300 !important;
}
#main-title .line3 {
  display: block;
  font-size: 0.37em;
  font-weight: 500;
  opacity: 0.74;
  margin-top: 0.22em;
  letter-spacing: 0.02em;
}


/* =============================
   キャッチフレーズ（Hero部専用）
   - 既定は px で安定配置（svh 非対応でも揺れない）
   - svh が使える環境では相対余白に上書き
   ============================= */
#catchphrase-container {
  position: absolute;
  bottom: 48px;   /* 既定：px で安定配置 */
  left: 6vw;
  z-index: 20;
  pointer-events: none;
  max-width: 80%;
}

/* svh 環境：見た目の一貫性のため相対余白に上書き */
@supports (height: 100svh) {
  #catchphrase-container { bottom: 6svh; }
}

#catchphrase {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  white-space: pre; /* 半角スペース保持 */
}

#catchphrase .letter-wrapper {
  overflow: hidden;
  display: inline-block;
  height: 1.0em; /* ★初期値：JS 側で実測 px に上書きされるための“たたき台” */
}
#catchphrase .letter {
  display: inline-block;
  transform: translateY(100%);
}

#catchphrase .letter.visible {
  transform: translateY(0); /* 上にスライドインして表示 */
}

#subphrase {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 400;
  margin-top: 0.5em;
  color: rgba(255, 255, 255, 0.85);
}


/* ======== スマホ・タブレット用（幅700px以下） ========
   - 中央寄せに変更（高さは #hero の height に委ねる）
   ===================================================== */
@media (max-width: 700px) {
  #catchphrase-container {
    position: absolute;
    top: 50%;                         /* 表示領域の中央 */
    left: 50%;
    transform: translate(-50%, -50%); /* 中央寄せ */
    max-width: 90%;
    text-align: center;
  }

  #catchphrase {
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.2;
  }

  #subphrase {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
    margin-top: 0.6em;
  }
}


/* =============================
   レスポンシブ（スマホサイズ）
   - #main-title のサイズだけ調整
   - #hero の高さはここで dvh を与えず、上の height 制御に任せる
   ============================= */
@media (max-width: 700px) {
  #main-title {
    /* オーバーレイメニューのタイトルサイズと統一 */
    font-size: clamp(2rem, 7vw, 3rem);

    /* ★SP も“右下・セクション内固定”
       - safe-area を加味して URLバー出入りでも位置が安定
       - インジケータと干渉しにくい最小限のボトム余白
    */
    left: auto;
    right: calc(16px + env(safe-area-inset-right, 0px));
    top: auto;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    text-align: right;

    color: #fff; /* 念のためSPでも白文字を明示 */
  }
}


/* =============================
   Hero部中央下 Scrollインジケータ
   - 既定は px で安定配置
   - svh 環境では相対余白に上書き（見た目維持）
   ============================= */
.scroll-indicator {
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: 56px;                 /* 既定：px（安定） */
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* ノッチ端末の安全域 */
}

/* svh が使える環境では相対余白に上書き */
@supports (height: 100svh) {
  .scroll-indicator { bottom: 3.5svh; }
}

.scroll-indicator.hide {
  opacity: 0;
}
.scroll-text {
  writing-mode: vertical-rl;
  font-size: 1.02em;
  letter-spacing: 0.1em;
  opacity: 0.79;
  font-weight: 300;
  margin-bottom: 14px;
}
.scroll-bar {
  width: 3px;
  height: 100px;
  background: linear-gradient(to bottom, currentColor 20%, transparent 100%);
  border-radius: 1.2px;
  position: relative;
}
.scroll-bar-inner {
  width: 3px;
  height: 28px;
  background: currentColor;
  border-radius: 1.2px;
  position: absolute;
  animation: scrollBarSlide 2.8s cubic-bezier(.5,0,.3,1) infinite normal;
}
@keyframes scrollBarSlide {
  0%    { top: 0;    opacity: 0; }
  18%   { top: 0;    opacity: 1; }
  80%   { top: 64px; opacity: 1; }
  100%  { top: 90px; opacity: 0; }
}


/* ======== スマホ用（幅700px以下） ========
   - #hero の高さは上で固定済み。ここでは配置微調整のみ。
   ======================================= */
@media (max-width: 700px) {
  #hero {
    position: relative; /* 高さは上の height 制御に委ねる（dvhは使わない） */
  }

  #hero .scroll-indicator {
    position: absolute;
    bottom: 20px; /* 極小画面では固定値でさらに下げる（安全域と重複してもOK） */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
  }

  #hero .scroll-text {
    writing-mode: horizontal-tb;
    font-size: 0.9em;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
  }

  #hero .scroll-bar {
    height: 60px;
  }
}