/* 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;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-fullbleed-side-glass-scroll__media {
  position: relative;
  width: 100%;
  height: min(60vh, 560px);
  overflow: hidden;
}

.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;
  gap: var(--space-sm, 24px);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 60px);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  background: transparent;
}

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

@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__panel {
    /* align-items:center は保ったまま、帯自身の高さで天地に迫らせる。
       受領時は高さが中身なりの「浮いた箱」で、17番(中央のすりガラスカード)と
       見分けがつかなかった。SPでも「柱」であることを保つ。 */
    min-height: min(74vh, 516px);
    /* 内寸は PC と同じ「1行11字」を基準に決める。受領時(内寸298px)は 11字目が入らず、
       「笑顔」のような語が行またぎで割れていた。
       必要な内寸 = 11字 × (1em + letter-spacing 0.04em) = 300.3px(375px・26.25px時)。
       ★見出しは align-items が stretch 以外(=center)なので fit-content になり、
         内寸が max-content と同値だと丸めで 0.8px 足りずに折り返す。
         数px の余地を必ず持たせる(実測 内寸305.5px に対し max-content 300.3px)。 */
    width: min(560px, 90%);
    padding: 24px 16px;
    padding-bottom: 24px;
    gap: 20px;
  }

  /* design.md No.5: モバイル h1 は固定的に絞る */
  .hero-fullbleed-side-glass-scroll__heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .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; }
}