@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-6.html 専用の上書き  ─ 2026.09.22
   ----------------------------------------------------------------------------
   top-new.css → top-3.css → top-4.css → top-5.css のあとに読み込みます。
   index-5.html は変更していないため、2つを並べて見比べられます。
   ----------------------------------------------------------------------------
   この版での変更
     01 「私たちについて」の数字の一覧（創業・自社茶園面積 ほか6項目）と
        注記を削除 ─── HTML 側で削除済み。ここでは削除後の余白を整えます
     02 見出しを句の途中で折り返さないようにする
     03 商品（Our Tea）の写真を、深むし茶・国産プーアール茶・機能性表示食品の
        3点に差し替え ─── 縦長の枠に合わせて、写真ごとに表示位置を指定します
   ========================================================================== */

/* -------------------------------------------- 01 数字の一覧を外したあとの余白 */
/* 数字の一覧が下側の余白をつくっていたため、なくなるとセクションが詰まって
   見えます。下の余白だけを少し足して、商品セクションとの間合いを保ちます */
.t-intro { padding-bottom: clamp(104px, 11vw, 170px); }

/* -------------------------------------------- 02 見出しの折り返し */
/* 「牧之原の土が育てた、」「深く、やさしい一杯。」を、句の途中で
   折り返させないためのまとまり。画面が狭く1行に収まらないときだけ
   文字を縮めて、読点や「深く、」の直後以外では改行させません */
.t-nobr {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 420px) {
  /* 320〜420px の狭い端末だと 27px では1行に収まりません。
     この見出しだけを少し小さくして、2行のまま見せます */
  .t-tea .t-head__ja { font-size: clamp(22px, 6.6vw, 27px); }
}

/* -------------------------------------------- 03 商品の写真の表示位置 */
/* 枠は 3:5 の縦長です。元の写真はいずれも横長・正方形なので、
   左右が大きく切れます。湯のみ・カップが枠の中心にくるよう、
   写真ごとに object-position を指定しています */
.t-tea__item:nth-child(1) .t-tea__fig img { object-position: 65% center; } /* 深むし茶 */
.t-tea__item:nth-child(2) .t-tea__fig img { object-position: 62% center; } /* 国産プーアール茶 */
.t-tea__item:nth-child(3) .t-tea__fig img { object-position: 30% center; } /* 機能性表示食品 */