@media (min-width: 1024px) {
  html.has-scroll-stack {
    /* KV(ヒーロー)はブラウザ全体にフルサイズ表示。縦が足りない場合は
       .fv__hero-img の object-fit:cover で縦がクロップされる。 */
    --fv-hero-height: 100svh;
    /* fv__body のせり出し位置: 画面下端から「固定px距離」で配置する。
       比例(svh)にすると画面が低いときキャッチ(固定px高)が入りきらず切れるため、
       固定距離にしてどの高さでもキャッチが切れないようにする。
       100svh - 72px で、キャッチの下の本文(fv__text)が全PC幅で隠れる位置。
       数値を大きくすると body が上がり(本文が見えてくる)、小さくすると下がる。 */
    --fv-body-offset: calc(100svh - 72px);
  }

  html.has-scroll-stack .fv {
    overflow: visible;
    padding-top: var(--fv-body-offset);
  }

  html.has-scroll-stack .fv__hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--fv-hero-height);
    z-index: 0;
    pointer-events: none;
    transition: visibility 0s linear 0s;
  }

  html.has-scroll-stack .fv__hero--covered {
    visibility: hidden;
  }

  html.has-scroll-stack .fv__body {
    position: relative;
    z-index: 2;
    top: 1px;
  }

  /* セクション: 画像のsticky追従のため縦は visible、横は clip でテキストの
     はみ出しによる横スクロールを防ぐ。 */
  html.has-scroll-stack .js-pin-section {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    min-height: auto;
  }

  /* 右カラム(テキスト): 画像は高さベースで幅が可変なため、残り幅を柔軟に使い
     max-width で415px上限を設ける。min-widthは下位互換で240px確保。
     container-type を設定し、タイトルが cqi でコンテンツ幅に比例縮小できるようにする。 */
  html.has-scroll-stack .vision__content,
  html.has-scroll-stack .gordyarea__content,
  html.has-scroll-stack .waiwai__content {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 415px;
    padding-bottom: 120px;
    container-type: inline-size;
  }

  html.has-scroll-stack .news-about,
  html.has-scroll-stack .site-footer {
    position: relative;
  }

  /* 各セクションの内側は全幅・左寄せにして、左カラムの画像をブラウザ左端にぴったり寄せる。
     上下paddingは不要（PCのみ・左右の余白は維持）。 */
  html.has-scroll-stack .vision__inner,
  html.has-scroll-stack .gordyarea__inner,
  html.has-scroll-stack .waiwai__inner {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 左カラムの画像: ヘッダーを除いた高さ(100svh - header)の正方形。
     左端固定で、スクロールしても常にその場に追従＝縦に流れない(sticky)。
     縦横は常に同じ=正方形、サイズはビューポート高に応じて可変。 */
  html.has-scroll-stack .vision__media,
  html.has-scroll-stack .gordyarea__media,
  html.has-scroll-stack .waiwai__media {
    flex: 0 0 calc(100svh - var(--header-height));
    width: calc(100svh - var(--header-height));
    height: calc(100svh - var(--header-height));
    aspect-ratio: auto;
    position: sticky;
    top: var(--header-height);
    align-self: flex-start;
    z-index: 1;
  }
}

@media (max-width: 1023px) {
  html.has-scroll-stack {
    --fv-hero-height: 100vw;
  }

  html.has-scroll-stack .fv {
    overflow: visible;
    padding-top: var(--fv-hero-height);
  }

  html.has-scroll-stack .fv__hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--fv-hero-height);
    z-index: 0;
    pointer-events: none;
  }

  html.has-scroll-stack .fv__hero--covered {
    visibility: hidden;
  }

  html.has-scroll-stack .fv__body {
    position: relative;
    z-index: 2;
    top: 1px;
  }

  html.has-scroll-stack .js-pin-section {
    position: relative;
  }

  /* iOS Safari は <video> を別の GPU コンポジタレイヤーで描画するため、
     CSS の重なり順序を無視して動画が上に来ることがある。
     vision__content に position + z-index を付与してビデオレイヤーより上に強制する。
     gordyarea / waiwai は <img> のため不要。また position:fixed のピン留め中に
     子要素へ z-index を付与すると iOS Safari で親背景が壊れるバグがあるため
     video を持つ vision だけに限定する。 */
  html.has-scroll-stack .vision__content {
    position: relative;
    z-index: 1;
  }

  html.has-scroll-stack .news-about,
  html.has-scroll-stack .site-footer {
    position: relative;
  }

  /* iOS Safari はピン留め(position:fixed)した waiwai を GPU コンポジタレイヤーに昇格する。
     通常フローの news-about がそのレイヤーより下に描画される場合があるため、
     translate3d(0,0,0) で news-about も GPU レイヤーに乗せて z-index の比較を正常化する。 */
  html.has-scroll-stack .news-about {
    transform: translate3d(0, 0, 0);
  }
}