@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-15 専用の上書き  ─ 2026.09.24
   ----------------------------------------------------------------------------
   top-new.css → top-3 … → top-13.css のあとに読み込みます（index-14 は CSS の変更なし）。
   ----------------------------------------------------------------------------
   この版での変更
     01 工程（From Soil to Harvest）の各カードを、お茶づくりの詳細へのリンクに
     （見出し・工程の中身・Our Strength 03 の文言は HTML 側の変更です）
   ========================================================================== */

/* -------------------------------------------- 01 工程のカードをリンクに */
/* 行を増やすと 1280×720 の画面で縦に収まらなくなるため、
   「詳しく見る」の文字は置かず、見出しの横の矢印と写真の拡大で押せることを示します */
.t-step__link {
  display: block;
  color: inherit;
  border-radius: 22px;
}
.t-step__link:focus-visible { outline: 2px solid var(--matcha-lt); outline-offset: 6px; }

.t-step__fig img { transition: transform 1s var(--e-out); }
.t-step__link:hover .t-step__fig img { transform: scale(1.05); }

.t-step__link .t-step__title {
  display: flex; align-items: center; gap: 12px;
}
.t-step__link .t-step__title::after {
  content: ""; flex: none;
  width: 16px; height: 10px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat;
          mask: var(--i-arrow) center / contain no-repeat;
  opacity: .6;
  transition: transform .5s var(--e-out), opacity .3s;
}
.t-step__link:hover .t-step__title::after { transform: translateX(6px); opacity: 1; }
.t-step__link:hover .t-step__title { color: var(--matcha-lt); }