@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-12.html 専用の上書き  ─ 2026.09.23
   ----------------------------------------------------------------------------
   top-new.css → top-3 … → top-11.css のあとに読み込みます。
   index-11.html は変更していないため、並べて見比べられます。
   ----------------------------------------------------------------------------
   この版での変更
     01 工程ごとに働く人：国産プーアール茶の発酵（Fermentation）と
        出荷場のピッキング（Picking）を足して7点に
   ========================================================================== */

/* -------------------------------------------- 01 工程ごとに働く人（7点） */
/* 7点は1列に並べると1枚が小さくなりすぎるため、段を分けて中央にそろえます。
     PC（1024px〜）   … 4点＋3点
     タブレット        … 3点＋3点＋1点
     スマホ（〜767px） … 2点ずつ、最後の1点は中央
   グリッドだと最後の段が左に寄ってしまうので、flex の折り返しで組んでいます */
.t-people__list {
  --cols: 2;
  --gap-x: clamp(14px, 2vw, 24px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 2.6vw, 34px) var(--gap-x);
}
.t-person {
  flex: 0 0 calc((100% - var(--gap-x) * (var(--cols) - 1)) / var(--cols));
  min-width: 0;
}
/* top-10 / top-11 の段差（互い違いの上下ずらし）は、段が分かれると
   行ごとに高さがばらつくため外します */
.t-people__list .t-person:nth-child(n) { margin-top: 0; }

@media (min-width: 768px) and (max-width: 1023px) {
  .t-people__list { --cols: 3; }
}
@media (min-width: 1024px) {
  .t-people__list { --cols: 4; }
}