/* hero-fullbleed-side-glass-scroll — 全面写真 + 天地いっぱいの縦長すりガラス帯 + SCROLL誘導
 * 出典: Figma「sitemeister_module」main8。
 * ★hero-fullbleed-glass-card との違いは「カード(箱)」か「天地を貫く帯」か。
 *   帯は高さ100%なので、写真を左右に分断して見せる構図になる。
 *   → この構図が成立する条件は「左右に写真が十分残ること」。帯を固定幅にすると
 *     狭い画面で帯が画面の85%を占め、構図そのものが消える。だから帯は可変幅にしている。
 * ★面色はサイトの背景色の透過(color-mix)。rgba(255,255,255,.7) 直書きは禁止。
 * ★トーンは「テック / 硬質・建築的」。17番(和・框・中央寄せ)と素材は同じすりガラスだが、
 *   縁を左右2辺だけにして「柱」に見せ、テキストを左寄せにして分けている。 */

.hero-fullbleed-side-glass-scroll {
  position: relative;
  min-height: min(88vh, 720px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.hero-fullbleed-side-glass-scroll__media {
  position: absolute;
  inset: 0;
}

.hero-fullbleed-side-glass-scroll__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-fullbleed-side-glass-scroll__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* --space-sm は common.css の :root に未定義。フォールバックが無いと gap が丸ごと消える */
  gap: var(--space-sm, 24px);
  padding: clamp(28px, 4vw, 60px);
  /* 下端の SCROLL 誘導のための余地。中身と誘導が近づきすぎるのを構造的に防ぐ */
  padding-bottom: clamp(80px, 12vh, 132px);
  /* セクション幅に対する比率にして、どの幅でも左右に写真を残す(帯が写真を分断する構図の条件) */
  width: clamp(460px, 50%, 720px);
  box-sizing: border-box;
  text-align: center;
  /* すりガラスは「光は通すが像は通さない」。面82%/blur10px では背後の輪郭が読めて
     ただの半透明の膜になる。88%/24px が素材として成立する範囲(17番の実測)。 */
  background: transparent;
  /* 縁は左右2辺だけ。四辺を囲むと17番の「框に入ったカード」になり、
     天地を貫いている(=柱である)ことが読めなくなる。
     ★濃度 30% は実測で決めた。17番(四辺の框)は 14% が適量だったが、
       2辺だけだと 14% では「縁なし」と見分けがつかず、意匠として効いていなかった。
       2辺なので濃くしても額縁にはならず、30% で初めて柱の稜線として読める。 */
}

.hero-fullbleed-side-glass-scroll__heading {
  font-family: var(--font-heading);
  /* 帯幅に連動させる。固定幅の器 × clamp(vw) のフォントは「広いほど行数が増える」破綻を生む
     (受領時は1366px以上で3行目が帯幅の8%しかない孤立行になっていた)。
     ★上限は必ずトークン。デザインシステムの最大値は動かさない。
     下の @supports が本命で、こちらは非対応環境向けのフォールバック(帯幅≒画面の50%)。 */
  font-size: clamp(1.75rem, 3.4vw, var(--fs-hero-md));
  line-height: 1.4;
  letter-spacing: 0.04em;
  /* --color-heading-ink は common.css の :root に未定義。フォールバックが無いと本文と同色になる */
  color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));
  margin: 0;
  text-wrap: balance;
  /* 読み込み時に上からゆっくり降りてくる演出。opacity:0 始まりなので
     見出しが一瞬でも欠けて見えないよう forwards で最終状態を保持する。 */
  opacity: 0;
  animation: hero-fullbleed-side-glass-scroll-heading-drop 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes hero-fullbleed-side-glass-scroll-heading-drop {
  0%   { opacity: 0; transform: translateY(-36px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed-side-glass-scroll__heading {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@supports (container-type: inline-size) {
  .hero-fullbleed-side-glass-scroll__panel { container-type: inline-size; }
  /* N = 100 ÷ (1行に入れたい字数 × (1 + letter-spacing)) = 100 ÷ (11 × 1.04) ≒ 8.7 → 余裕を見て 8.2 */
  .hero-fullbleed-side-glass-scroll__heading {
    font-size: clamp(1.75rem, 8.2cqw, var(--fs-hero-md));
  }
}

.hero-fullbleed-side-glass-scroll__light { font-weight: 300; }

.hero-fullbleed-side-glass-scroll__lead {
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}

/* CTA の面は common.css の .btn（--color-primary ＋ --color-on-primary）をそのまま使う。
   ★ホバーだけ上書きする理由: common.css の .btn:hover は
     「面を --color-primary-dark にして文字を #fff にする」ため、
     淡色ベージュのプリセットで【白文字 × 明るいベージュ = 2.59:1】になり読めなくなる（実測）。
     面と文字の組（--color-primary / --color-on-primary）は変えず、
     ホバーの合図は【浮き】で出す。矩形は動かない。 */
.hero-fullbleed-side-glass-scroll .btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

/* SCROLL 誘導。ガラス帯の上に乗るのでインク色で読める。
   硬質さは装飾ではなく字間で作る。 */
.hero-fullbleed-side-glass-scroll__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  letter-spacing: 0.24em;
  color: var(--color-text);
  text-decoration: none;
}

.hero-fullbleed-side-glass-scroll__scroll-line {
  position: relative;
  overflow: hidden;
  width: 1px;
  height: clamp(56px, 12vh, 116px);
  /* 下端を透明に落とす。画面下端で線が断ち落とされると「終わった」のか
     「続いている」のかが読めないため、消えていくことで続きを示す。 */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-text) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 60%, transparent) 55%,
    transparent 100%
  );
}

/* この部品で唯一の動き。線の中を光が降りる(スクロール方向の提示)。
   ★登場アニメーションは付けない。同カテゴリの既出6本が登場演出を使い切っているため、
     動きは誘導側だけに寄せて差別化する。 */
.hero-fullbleed-side-glass-scroll__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  background: linear-gradient(to bottom, transparent, var(--color-text));
  animation: hero-fullbleed-side-glass-scroll-drop 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-fullbleed-side-glass-scroll-drop {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* 光そのものを消す(animation:none だと線の頭に明るい塊が残るため) */
  .hero-fullbleed-side-glass-scroll__scroll-line::after { display: none; }
}

@media (max-width: 768px) {
  .hero-fullbleed-side-glass-scroll {
    min-height: min(80vh, 560px);
    align-items: center;
  }

  .hero-fullbleed-side-glass-scroll__media img {
    /* ユーザー指定: スマホは被写体を中央に見せる構図にする */
    object-position: center center;
  }

  .hero-fullbleed-side-glass-scroll__panel {
    /* align-items:center は保ったまま、帯自身の高さで天地に迫らせる。
       受領時は高さが中身なりの「浮いた箱」で、17番(中央のすりガラスカード)と
       見分けがつかなかった。SPでも「柱」であることを保つ。 */
    min-height: min(74vh, 516px);
    /* 内寸は画面幅から左右余白を引いた値。90%固定+560px上限だと極小幅端末で
       左右の余白が足りず見出しが窮屈になっていたため、box-sizingで確実に画面内へ収める。 */
    width: 92%;
    max-width: 560px;
    box-sizing: border-box;
    padding: 24px 16px;
    /* ユーザー指定: テキストをさらに下へずらす(行高1.3 × フォント約1.9rem ≒ 1行39px → 約6.5行分) */
    padding-top: calc(24px + 6.5 * 1.3 * clamp(1.7rem, 8.2vw, 2.4rem));
    padding-bottom: 24px;
    gap: 20px;
    margin: 0 auto;
    justify-content: flex-start;
  }

  /* design.md No.5: モバイル h1 は固定的に絞る。
     ★この見出しは <br> で3行に手動改行されているため、一般則(7vw)より
       優先して「3行に収まり折り返さない」ことを保証する専用サイズにする。
     ★PC向けインラインstyle(margin-left:-16em 等)がスマホでは巨大なマイナス
       マージンとなり見出し全体が画面外へはみ出して「切れる」原因になっていたため、
       margin/letter-spacing/position もここで明示的に無効化する。 */
  .hero-fullbleed-side-glass-scroll__heading.hero-fullbleed-side-glass-scroll__heading {
    font-size: clamp(1.7rem, 8.2vw, 2.4rem) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    position: static !important;
    max-width: 100% !important;
    display: inline-block;
    color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000)) !important;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .hero-fullbleed-side-glass-scroll__lead { font-size: var(--fs-body); }
  /* PC 用の改行を SP に持ち込むと、1セグメントが2行に割れて末尾に数文字だけ残る */
  .hero-fullbleed-side-glass-scroll__lead br { display: none; }
  .hero-fullbleed-side-glass-scroll__cta { width: 100%; text-align: center; }
  .hero-fullbleed-side-glass-scroll__scroll { display: none; }
}

@media (max-width: 360px) {
  .hero-fullbleed-side-glass-scroll__panel { width: 94%; padding: 20px 12px; }
  .hero-fullbleed-side-glass-scroll__heading.hero-fullbleed-side-glass-scroll__heading {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }
}