/*
 * FOR PRODUCERS(page-for-producers.php。本文は全編英語)
 * 部品は producers.css・trade.css と共通。ここではこのページ独自のレイアウトと、英語の見出し・本文の書体だけを指定する
 */

/* ---------- 英語の見出し・本文 ---------- */
.gzf-hero__title{ font-size: clamp(52px, 5.4vw, 78px); line-height: 1.08; }
.gzf-h2{
  font-family: var(--gz-serif-en);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
}
.gzf-text{
  font-size: 16px;
  line-height: 1.9;
  color: var(--gz-ink-soft);
}
.gzf-lead{
  font-family: var(--gz-serif-en);
  font-size: 24px;
  line-height: 1.6;
}
.gzf .gzt-timeline__text{ font-size: 14px; line-height: 1.7; }

/* ---------- Beyond Wine / Why Japan Now ---------- */
.gzf-intro{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 96px;
}
.gzf-intro__item{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Common Challenges(Q&A) ---------- */
.gzf-challenges{
  background: var(--gz-paper);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gzf-qa{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
  border-top: 1px solid var(--gz-line-strong);
}
.gzf-qa__item{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0;
  border-bottom: 1px solid var(--gz-line);
}
.gzf-qa__q,
.gzf-qa__a{
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
}
.gzf-qa__q{
  font-family: var(--gz-serif-en);
  font-size: 24px;
  line-height: 1.35;
}
.gzf-qa__a{
  font-size: 15px;
  line-height: 1.85;
  color: var(--gz-ink-soft);
}
.gzf-qa__mark{
  font-family: var(--gz-serif-en);
  font-size: 24px;
  line-height: 1;
  color: var(--gz-green);
}
.gzf-qa__mark--a{ color: var(--gz-terracotta); font-size: 20px; }

/* ---------- Currently Proven With ---------- */
.gzf-proven{
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 0;
}
.gzf-proven__text{ max-width: 860px; }
.gzf-proven__text a{
  color: var(--gz-ink);
  border-bottom: 1px solid var(--gz-line-strong);
}
.gzf-proven__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}
.gzf-proven .gzp-other__name{ font-size: 22px; }

/* ---------- 垂直統合モデル ---------- */
.gzf-model{ padding-top: 0; }
.gzf-flow{ font-size: 24px; padding: 32px; }
.gzf-model__caption{
  font-family: var(--gz-serif-en);
  font-style: italic;
  font-size: 20px;
  color: var(--gz-terracotta);
}

/* ---------- CTA ---------- */
.gzf-cta__title{ font-family: var(--gz-serif-en); font-size: 40px; line-height: 1.3; }

/* ---------- タブレット ---------- */
@media (max-width: 1179px){
  /* 画面の横幅が狭いと写真を横にずらせず、船が文字の後ろに来るため、文字側のグラデーションを濃くする */
  .gzf .gzp-hero::before{ background: linear-gradient(90deg, rgba(7,50,41,0.94) 0%, rgba(7,50,41,0.84) 50%, rgba(7,50,41,0.45) 75%, rgba(59,42,34,0.25) 100%); }
  .gzf-intro{ gap: 56px; }
  .gzf-qa{ gap: 0 40px; }
  .gzf-proven__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gzf-flow{ font-size: 20px; }
}
@media (max-width: 1023px){
  .gzf-intro{ grid-template-columns: 1fr; gap: 56px; }
  .gzf-qa{ grid-template-columns: 1fr; }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 767px){
  .gzf-hero__title{ font-size: 40px; }
  /* 縦長の画面では、写真をヒーローの上の約2/3に収めて船とタグボートを丸ごと見せ、
     文字はその下の深緑の地に置く(写真の下端は深緑へ溶け込ませる) */
  .gzf .gzp-hero__img{ height: 64%; object-position: var(--gzf-hero-pos-sp, var(--gzp-hero-pos)); }
  .gzf .gzp-hero::before{ background: linear-gradient(180deg, rgba(7,50,41,0.78) 0%, rgba(7,50,41,0.05) 22%, rgba(7,50,41,0.1) 42%, rgb(7,50,41) 64%, rgb(7,50,41) 100%); }
  .gzf .gzp-hero::after{ display: none; }
  .gzf-h2{ font-size: 30px; }
  .gzf-text{ font-size: 14px; }
  .gzf-lead{ font-size: 19px; }
  .gzf-qa__item{ padding: 24px 0; }
  .gzf-qa__q{ font-size: 20px; }
  .gzf-qa__a{ font-size: 14px; }
  .gzf-proven__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .gzf-proven .gzp-other__name{ font-size: 18px; }
  .gzf-flow{ font-size: 18px; padding: 20px 16px; }
  .gzf-model__caption{ font-size: 17px; }
  .gzf-cta__title{ font-size: 28px; }
}