@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-4.html 専用の上書き  ─ 2026.09
   ----------------------------------------------------------------------------
   top-new.css → top-3.css のあとに読み込みます。
   index-3.html は変更していないため、2つを並べて見比べられます。
   ----------------------------------------------------------------------------
   狙い
     ・支給いただいた「牧之原台地（富士山）」を、1枚目に全幅で見せる
     ・元データは 1880×837px（比率 2.25:1）の横長。左右を半分に割ると
       台地の広がりも富士山も失われるため、ファーストビューを
       「左：写真／右：映像」の2分割から、全幅のスライドへ組み替えています
       （映像は電柱が多く写るため、HTMLごと外しています）
     ・読み込み時の覆い（下から上へ上がる演出）と、スクロールで写真が左へ抜ける
       動きは外し、静かに写真が入れ替わるだけのファーストビューにしています
   ========================================================================== */

/* -------------------------------------------- 01 スライドを画面いっぱいに */
.t-fv__a { right: 0; }                 /* 左半分 → 全幅 */

/* 牧之原台地は 1880×837px の横長。16:9 前後の画面に収めると左右が切れるため、
   富士山が画面外へ出ないよう表示位置を少し左に寄せています。
   富士山は画面の上、コピーは左の中段なので、位置が重なることはありません。
   新芽の写真（3:2）は切れ幅が小さいため、中央のままです */
.t-fv__slide:first-child img { object-position: 34% center; }

/* ---------------------------------------- 01-2 スクロール連動の動きを外す */
/* 写真を左へ送る演出をやめます。貼り付き（pin）の長さは 320vh → 200vh に短縮。
   写真は動かないまま画面1つ分だけ留まり、そのあいだに次のセクション
   （.t-intro が margin-top:-100vh で重なる作り）が下から上がってきます。
   100vh まで詰めると .t-intro の負のマージンが効きすぎて重なってしまうため、
   200vh が下限です */
.fx .t-fv { height: 200vh; height: 200svh; }
.t-fv__a { transform: none; }

/* 読み込み時、下から上へ覆いが上がる演出（clip-path）を外し、
   写真は最初から表示された状態にします */
.fx .t-fv__a,
.fx .t-fv.is-in .t-fv__a { clip-path: none; transition: none; }

/* -------------------------------------------- 02 コピーを左端に置きなおす */
.t-fv__copy {
  left: 0;
  width: min(100%, 980px);
  padding: 0 var(--gut);
  transform: translate3d(0, -50%, 0);   /* スクロールしても動かさない */
}

/* -------------------------------------------- 03 文字が読めるだけの陰影に */
/* top-new.css の陰影はスライドの中にあり、写真が切り替わるたびに一緒に
   フェードします。どの写真でも同じ濃さを保てるよう、外側の動かない一枚に
   まとめ、元のものは消しています。
   空が淡いため上側にも薄く敷きますが、富士山が沈まない濃さに抑えています */
.t-fv__shade, .t-fv__shade--a { background: none; }

.t-fv__sticky::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,20,13,.34) 0%, rgba(8,20,13,0) 22%),
    linear-gradient(95deg, rgba(8,20,13,.68) 0%, rgba(8,20,13,.44) 34%, rgba(8,20,13,.12) 62%, rgba(8,20,13,0) 100%),
    linear-gradient(0deg, rgba(8,20,13,.5) 0%, rgba(8,20,13,0) 28%);
}

/* -------------------------------------------- 04 縦長の画面（タブレット・スマホ） */
@media (max-width: 767px) {
  /* top-new.css の「上：写真／下：映像」の2分割も解除して全画面に */
  .t-fv__a { bottom: 0; transform: none; }

  /* 画面が縦長になるほど左右が大きく切れるので、さらに左へ寄せて
     富士山と茶畑が必ず画面に入るようにしています */
  .t-fv__slide:first-child img { object-position: 22% center; }

  .t-fv__copy {
    left: 0; top: auto; bottom: clamp(96px, 20svh, 170px);
    width: 100%;
    transform: none;
  }
  .t-fv__meta { bottom: clamp(24px, 5svh, 48px); top: auto; }
  .t-fv__ctrl { bottom: clamp(18px, 4svh, 40px); top: auto; }
  /* 縦長ではコピーが下に来るので、陰影も下から立ち上げます */
  .t-fv__sticky::after {
    background:
      linear-gradient(180deg, rgba(8,20,13,.38) 0%, rgba(8,20,13,0) 26%),
      linear-gradient(0deg, rgba(8,20,13,.82) 0%, rgba(8,20,13,.46) 36%, rgba(8,20,13,0) 64%);
  }
}

/* -------------------------------------------- 05 印刷時 */
@media print {
  .t-fv__a { position: static; clip-path: none; transform: none; }
}