@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-9.html 専用の上書き  ─ 2026.09.22
   ----------------------------------------------------------------------------
   top-new.css → top-3 → top-4 → top-5 → top-6 → top-7 → top-8 のあとに
   読み込みます。index-8.html は変更していないため、並べて見比べられます。
   ----------------------------------------------------------------------------
   この版での変更
     01 オープニングのロゴを、さらにゆっくり消えるように
     02 「私たちについて」に茶園での作業風景を1枚（文字だけで余白が広いため）
     03 最新カタログは商品ラインナップ（products.html）へ移動
        ─── HTML 側で外しました。ここでは何もしていません
   ========================================================================== */

/* -------------------------------------------- 01 オープニングのロゴの消え方 */
/* top-8.css の 1.15秒 / 0.95秒 から、およそ倍の時間をかけて消します。
   ロゴが先に薄くなり、白い面がそのあとをゆっくり追いかけます */
.t-splash {
  transition: opacity 2.1s cubic-bezier(.4, 0, .25, 1), visibility 0s linear 2.1s;
}
.t-splash__logo {
  transform: scale(1.04);
  transition: opacity 1.7s cubic-bezier(.4, 0, .25, 1), transform 2.1s cubic-bezier(.4, 0, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .t-splash__logo { transform: none; transition: opacity 1.1s linear; }
}

/* -------------------------------------------- 02 「私たちについて」の写真 */
/* 見出しと本文の2段組の下に、横長の帯として敷きます。
   .t-intro__grid は2列なので、3つめの子として左右いっぱいに置きます */
.t-intro__fig {
  grid-column: 1 / -1;
  margin: clamp(56px, 7vw, 100px) 0 0;
}
.t-intro__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover; object-position: center 45%;
  border-radius: 22px;
}
.t-intro__cap {
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.8; letter-spacing: .02em; color: var(--ink-3);
}

@media (max-width: 767px) {
  /* 縦長の画面では 21:9 だと細すぎるため、3:2 に近づけます */
  .t-intro__fig img { aspect-ratio: 16 / 11; border-radius: 16px; }
}