@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-8.html 専用の上書き  ─ 2026.09.22
   ----------------------------------------------------------------------------
   top-new.css → top-3.css → top-4.css → top-5.css → top-6.css → top-7.css の
   あとに読み込みます。index-7.html は変更していないため、並べて見比べられます。
   ----------------------------------------------------------------------------
   この版での変更
     01 商品セクションの背景が抜けて、ファーストビューの写真が透けていたのを修正
     02 最新カタログ（デジタルブック）への導線
     03 オープニングのロゴを、ゆっくり消えるように
   ========================================================================== */

/* -------------------------------------------- 01 商品セクションの背景 */
/* ファーストビューは高さ 320vh のスクロール区間で、中身が sticky で貼り付いたまま
   動きます。その上に「私たちについて」(.t-intro) が margin-top:-100vh で
   白い面としてかぶさり、以降のセクションを隠す作りです。
   .t-tea はこの白い面の続きにあたりますが、背景色が指定されていなかったため、
   index-6 で数字の一覧を外してセクションが短くなった分だけ、下にある
   ファーストビューの茶畑が見出しの背後に透けていました。
   .t-intro と同じ白と重なり順を与えて、面としてつながるようにします */
.t-tea {
  position: relative; z-index: 3;
  background: #fff;
}

/* -------------------------------------------- 02 最新カタログ */
.t-catalog {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 18px; align-items: center;
  margin-top: 40px; padding: 18px 20px 18px 18px;
  border: 1px solid var(--line); border-radius: 18px;
  background: #fff; color: inherit; text-decoration: none;
  transition: border-color .4s var(--e-out), background-color .4s var(--e-out), transform .5s var(--e-out);
}
.t-catalog:hover { border-color: var(--g600); background: var(--paper); transform: translateY(-2px); }
.t-catalog:focus-visible { outline: 2px solid var(--g600); outline-offset: 3px; }

.t-catalog__fig {
  overflow: hidden; border-radius: 6px;
  box-shadow: 0 6px 18px -10px rgba(8, 20, 13, .5);
}
.t-catalog__fig img { display: block; width: 100%; height: auto; }

.t-catalog__body { display: block; }
.t-catalog__en {
  display: block;
  font-family: var(--ff-en); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--g600);
}
.t-catalog__ja { display: block; margin-top: 6px; font-weight: 700; font-size: 15px; }
.t-catalog__text {
  display: block; margin-top: 8px;
  font-size: 13px; line-height: 1.9; color: var(--ink-2);
}

/* 外部リンクを示す斜め矢印。.t-arrow と同じ見た目にそろえています */
.t-catalog__arrow {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  transition: border-color .4s var(--e-out), background-color .4s var(--e-out);
}
.t-catalog__arrow::before {
  content: "↗"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 14px; color: var(--g700);
  transition: color .4s var(--e-out);
}
.t-catalog:hover .t-catalog__arrow { border-color: var(--g700); background: var(--g700); }
.t-catalog:hover .t-catalog__arrow::before { color: #fff; }

@media (max-width: 520px) {
  .t-catalog { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .t-catalog__arrow { display: none; }
  .t-catalog__ja::after { content: " ↗"; font-size: 12px; color: var(--g600); }
}

/* -------------------------------------------- 03 オープニングのロゴの消え方 */
/* 一瞬で切り替わらないよう、白い面とロゴを1秒以上かけてゆっくり薄くします。
   ロゴはわずかに拡大しながら消えて、白い面が最後に残ります */
.t-splash {
  transition: opacity 1.15s cubic-bezier(.33, 0, .2, 1), visibility 0s linear 1.15s;
}
.t-splash__logo {
  opacity: 0; transform: scale(1.03);
  transition: opacity .95s cubic-bezier(.33, 0, .2, 1), transform 1.15s cubic-bezier(.33, 0, .2, 1);
}
:root.is-splash .t-splash__logo { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* 動きを抑える設定の端末では、拡大はせずフェードだけにします */
  .t-splash__logo { transform: none; transition: opacity .6s linear; }
}