@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-5.html 専用の上書き  ─ 2026.09.18
   ----------------------------------------------------------------------------
   top-new.css → top-3.css → top-4.css のあとに読み込みます。
   index-4.html は変更していないため、2つを並べて見比べられます。
   ----------------------------------------------------------------------------
   狙い
     ・ファーストビューの写真を、ファイル名に「大茶園」「牧之原台地」が
       入っている画像だけにそろえる
     ・2枚目・3枚目を新芽の寄りから大茶園に差し替えたことで、写真の比率が
       2.25:1（1枚目）と 3:2（2・3枚目）で混ざるため、表示位置を分ける
   ========================================================================== */

/* -------------------------------------------- 01 スライドごとの表示位置 */
/* 1枚目の牧之原台地（1880×837px・2.25:1）は top-4.css の指定をそのまま使います。
   セレクタが :first-child のままだと 2・3枚目に効かないため、ここで
   :nth-child() を使って 2枚目・3枚目だけを上書きします。

   大茶園の2点は 3:2（1535×1025px 前後）で、1枚目より縦長です。
   全幅のファーストビューに合わせると上下が切れるので、
   2枚目は富士山の山頂が上端で切れないよう、少し上寄りにしています。
   3枚目は空より畝を見せたいので中央のままです */
.t-fv__slide:nth-child(2) img { object-position: center 30%; }
.t-fv__slide:nth-child(3) img { object-position: center center; }

/* -------------------------------------------- 02 縦長の画面（タブレット・スマホ） */
@media (max-width: 767px) {
  /* 縦長になるほど左右が大きく切れます。
     2枚目は富士山が画面の中央やや右に写っているため右へ寄せ、
     3枚目は畝の見え方が自然な中央のままにしています */
  .t-fv__slide:nth-child(2) img { object-position: 60% 40%; }
  .t-fv__slide:nth-child(3) img { object-position: center center; }
}