@charset "UTF-8";
/* ============================================================================
   株式会社荒畑園  トップページ index-3.html 専用の上書き  ─ 2026.09
   ----------------------------------------------------------------------------
   top-new.css のあとに読み込みます。index-new.html は変更していないため、
   2つのファイルを並べて見比べられます。
   ----------------------------------------------------------------------------
   01 ファーストビューの見出しを明朝体に
   02 ヘッダーのロゴをトップページへのリンクとして分かるように
   03 オンラインショップのボタンに買い物カゴのアイコン
   ========================================================================== */

:root {
  /* 見出し用の明朝体。読み込み前・失敗時は端末の明朝体で表示します */
  --ff-mincho: "Shippori Mincho B1", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
               "Hiragino Mincho Pro", "MS PMincho", serif;
}

/* ------------------------------------- 01 ファーストビューの見出しを明朝体に */
/* 1行 7 文字（お茶づくりは、）が右半分に収まる寸法。
   字送りを広げると折り返すため、文字サイズと letter-spacing は据え置きです */
.t-fv__title {
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: clamp(36px, 5.1vw, 88px);
  line-height: 1.38;
  letter-spacing: .06em;
  /* 明朝は縦線が細く写真に沈みやすいため、影をやや強めに置いています */
  text-shadow: 0 2px 26px rgba(8, 20, 13, .45), 0 1px 3px rgba(8, 20, 13, .28);
}

.t-fv__lead {
  letter-spacing: .1em;
  text-shadow: 0 1px 14px rgba(8, 20, 13, .45);
}

/* 大見出しと同じ明朝を、各セクションの和文見出しにも */
.t-head__ja,
.t-recruit__words,
.t-gate__ja {
  font-family: var(--ff-mincho);
  font-weight: 600;
}
.t-head__ja { letter-spacing: .08em; }
.t-gate__ja small { font-family: var(--ff-jp); font-weight: 400; }

/* --------------------------------- 02 ヘッダーのロゴ＝トップページへのリンク */
.t-logo {
  border-radius: 8px;
  transition: opacity .3s, transform .5s var(--e-out);
}
.t-logo:hover { opacity: .72; transform: translateY(-1px); }
.t-logo:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* 全画面メニュー・フッターのロゴもトップへ戻れるように（リンク化にあわせて） */
.t-menu__logo-link { display: block; width: clamp(118px, 10.5vw, 150px); }
.t-menu__logo-link .t-menu__logo { width: 100%; }
.t-footer__logo-link { display: inline-block; width: 170px; }
.t-footer__logo-link .t-footer__logo { width: 100%; }
.t-menu__logo-link:hover, .t-footer__logo-link:hover { opacity: .72; }

/* ------------------------- 03 オンラインショップのボタン（買い物カゴアイコン） */
.t-shopbtn {
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  background: #fff;
  border-color: #fff;
  color: var(--g900);
  box-shadow: 0 6px 20px -8px rgba(8, 20, 13, .5);
}
.t-shopbtn:hover {
  background: var(--g700);
  border-color: var(--g700);
  color: #fff;
}
.is-solid .t-shopbtn {
  background: var(--g700);
  border-color: var(--g700);
  color: #fff;
  box-shadow: 0 6px 18px -10px rgba(29, 74, 51, .8);
}
.is-solid .t-shopbtn:hover { background: var(--g600); border-color: var(--g600); color: #fff; }

.t-shopbtn__cart {
  width: 19px; height: 19px; flex: none;
  fill: none;
  stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.t-shopbtn__cart circle { fill: currentColor; stroke: none; }
/* 外部サイトアイコン（.t-ext）は currentColor のマスクなので、地色の変化に追従します */
.t-shopbtn .t-ext { opacity: .7; }

/* 1100px 以下はナビが畳まれるため、ボタンをやや小さく */
@media (max-width: 1100px) {
  .t-shopbtn { height: 42px; padding: 0 18px; font-size: 12px; }
  .t-shopbtn__cart { width: 17px; height: 17px; }
}
/* 600px 以下はヘッダーから消えるかわりに、全画面メニューの中で目立たせます */
.t-pill--light .t-shopbtn__cart { width: 18px; height: 18px; margin-right: 2px; }