/* 食品プロジェクト 固有スタイル（Wix: 茶畑の全面写真＋世界地図の薄敷き＋商品3点＋取扱概要表） */

/* 冒頭（Wix: 1440×900 全面写真・コピーは右側 x=990 / y≈40%） */
.food-hero { position: relative; margin-top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 560px; max-height: 860px; overflow: hidden; }
.food-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.food-hero-copy { position: absolute; left: 62%; top: 44%; transform: translateY(-50%); width: min(480px, 36vw); color: var(--ink); }
.food-hero-copy .en { font-size: 13px; letter-spacing: 0.2em; line-height: 1.6; }
.food-hero-copy h1 { margin-top: 10px; font-size: clamp(19px, 1.5vw, 21px); font-weight: 400; letter-spacing: 0.14em; line-height: 1.8; text-wrap: balance; }
.food-breadcrumb { justify-content: flex-start; margin-top: 18px; }
.breadcrumb .sep { color: var(--gray); }

/* 日本から、世界へ届ける。（Wix: 世界地図 956×589 を不透明度0.24で敷く） */
.food-intro { position: relative; isolation: isolate; overflow: hidden; }
.food-map {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(956px, 92vw); height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.24;
  pointer-events: none;
}
.food-intro .sec-title-l { letter-spacing: 0.2em; text-indent: 0.2em; }
.food-intro-text { max-width: 680px; margin-left: auto; margin-right: auto; }
.food-intro-text .text { text-align: left; }

/* 抹茶ラインナップ（写真なしのグレードカード3枚・design-reference price.md A型を踏襲） */
.food-grade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); max-width: 1040px; margin-left: auto; margin-right: auto; }
.food-grade { position: relative; background: #fff; border: 1px solid var(--line); border-top: 4px solid #6f8f5a; padding: clamp(28px, 3vw, 40px) clamp(22px, 2.6vw, 32px) clamp(28px, 3vw, 36px); text-align: center; }
.food-grade.is-top { border-top-color: #3f6b3a; }
.food-grade .grade-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #eef3e8; color: #3f6b3a; font-size: 24px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; }
.food-grade h3 { margin-top: 18px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: 0.16em; text-indent: 0.16em; line-height: 1.5; }
.food-grade .grade-season { margin-top: 12px; font-size: 14px; letter-spacing: 0.06em; color: var(--ink); }
.food-grade .grade-season span { display: inline-block; margin-right: 10px; padding: 2px 10px; border: 1px solid #6f8f5a; color: #3f6b3a; font-size: 11px; letter-spacing: 0.16em; line-height: 1.6; vertical-align: middle; }
.food-grade .grade-desc { margin-top: 16px; font-size: 14px; line-height: 1.9; color: var(--ink-soft); text-align: left; }
.food-grade-note { margin-top: 24px; }

/* 取扱概要（共通 .def-table） */
.food-spec .def-table td { letter-spacing: 0.08em; }

@media (max-width: 900px) {
  .food-grade-grid { grid-template-columns: 1fr; max-width: 560px; }
  .food-hero { min-height: 500px; max-height: 720px; }
  .food-hero-copy { left: auto; right: var(--gutter); width: auto; }
}
@media (max-width: 760px) {
  .food-hero { height: calc(100svh - var(--header-h)); min-height: 480px; max-height: none; }
  .food-hero-copy { top: 30%; }
  .food-intro .sec-title-l { font-size: 22px; letter-spacing: 0.14em; text-indent: 0.14em; }
  .food-hero-img { object-position: 50% 60%; }
  .food-hero-copy { left: auto; right: var(--gutter); top: 26%; transform: none; width: calc(100% - var(--gutter) * 2); text-align: right; }
  .food-hero-copy h1 { font-size: 18px; white-space: normal; }
  .food-breadcrumb { margin-top: 14px; }
  .food-map { width: 140vw; }
  .food-grade-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
  .food-grade { padding: 24px 20px; }
}