/*
 * ABOUT(page-about.php。旧 TRADE ページの内容を統合)のレイアウト
 * FOR PRODUCERS・TOURISM & ACADEMY でも、年表・流れの帯・CTA などの部品を共用している
 * 部品は producers.css・wines.css と共通
 */

/* ---------- ヒーロー(見出しは日本語のため明朝で) ---------- */
.gzt-hero__title{
  font-family: var(--gz-serif-ja);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.55;
}

/* ---------- 信頼性 ---------- */
.gzt-credibility{
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 96px;
}
.gzt-credibility__head{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gzt-credibility__body{
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gzt-credibility__text{
  font-family: var(--gz-serif-ja);
  font-size: 18px;
  line-height: 2.1;
}
.gzt-timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--gz-line);
}
.gzt-timeline li{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 0 0;
}
.gzt-timeline__year{
  font-family: var(--gz-serif-en);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--gz-green);
}
.gzt-timeline__text{
  font-size: 13px;
  line-height: 1.8;
  color: var(--gz-ink-soft);
}

/* ---------- 提供できる価値・訴求の流れ ---------- */
.gzt-offer{
  background: var(--gz-paper);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gzt-offer__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--gz-line-strong);
}
.gzt-offer__list li{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 0 0;
  font-family: var(--gz-serif-ja);
  font-size: 16px;
  line-height: 1.8;
}
.gzt-offer__num{
  font-family: var(--gz-serif-en);
  font-size: 28px;
  line-height: 1;
  color: var(--gz-terracotta);
}
.gzt-flow{
  list-style: none;
  margin: 0;
  padding: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 0;
  border: 1px solid var(--gz-line-strong);
  font-family: var(--gz-serif-en);
  font-size: 19px;
  color: var(--gz-green);
}
.gzt-flow li + li::before{
  content: "→";
  margin: 0 18px;
  color: var(--gz-terracotta);
}

/* 垂直統合モデルの図解(信頼性ブロック内。日本語の工程名なので明朝) */
.gzt-chain{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gzt-flow--ja{
  font-family: var(--gz-serif-ja);
  font-size: 17px;
  letter-spacing: 0.08em;
}
.gzt-chain__caption{
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  color: var(--gz-ink-soft);
}

/* ---------- 流通区分の実例 ---------- */
.gzt-examples{
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.gzt-examples__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.gzt-example{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.gzt-example__head{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;   /* 説明文の長さが違っても、下の商品カードの位置を揃える */
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gz-line);
}
.gzt-example__name{
  font-family: var(--gz-serif-ja);
  font-size: 22px;
  line-height: 1.5;
}
.gzt-example__text{
  font-size: 13px;
  line-height: 1.9;
  color: var(--gz-ink-soft);
}
.gzt-example__brand{
  margin-top: auto !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gz-terracotta);
}
.gzt-example .gzw-card{ flex-grow: 1; }

/* ---------- 事業概要 ---------- */
.gzt-business{
  background: var(--gz-paper);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.gzt-business__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--gz-line-strong);
}
.gzt-company{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 32px 8px 0;
}
.gzt-company + .gzt-company{
  padding-left: 32px;
  border-left: 1px solid var(--gz-line);
}
.gzt-company__label{
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gz-terracotta);
}
.gzt-company__name{
  font-family: var(--gz-serif-en);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
}
.gzt-company__text{
  font-size: 14px;
  line-height: 2;
  color: var(--gz-ink-soft);
}

/* ---------- お取引を検討中の方へ(#trade) ---------- */
.gzt-trade{
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.gzt-trade__block{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.gzt-trade__subhead{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}
.gzt-trade__sub{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gz-terracotta);
}
.gzt-trade__sub span{
  font-family: var(--gz-serif-ja);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--gz-ink);
}
.gzt-trade__lead{
  max-width: 640px;
  margin-top: 12px !important;
  font-size: 14px;
  line-height: 2;
  color: var(--gz-ink-soft);
}
/* 資料ダウンロード・お取引のご相談(薄いベージュの面) */
.gzt-trade__cta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 48px;
  background: var(--gz-paper);
}
.gzt-trade__buttons{
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.gzt .gzt-trade__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  border: 1px solid var(--gz-ink);
  color: var(--gz-ink);
  font-size: 14px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.gzt .gzt-trade__button:hover{ background: var(--gz-ink); color: var(--gz-cream); }
.gzt .gzt-trade__button--solid{ background: var(--gz-green); border-color: var(--gz-green); color: var(--gz-on-dark); }
.gzt .gzt-trade__button--solid:hover{ background: var(--gz-green-deep); border-color: var(--gz-green-deep); color: var(--gz-on-dark); }

/* ---------- CTA ---------- */
.gzt-cta{
  background: var(--gz-green-deep);
  color: var(--gz-on-dark);
  padding: 112px var(--gz-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.gzt-cta__eyebrow{
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gz-mint);
}
.gzt-cta__title{
  font-family: var(--gz-serif-ja);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.6;
}
.gzt-cta__lead{
  font-size: 14px;
  line-height: 2;
  color: rgba(244,239,228,0.8);
}
.gzt-cta__buttons{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.gzt .gzt-cta__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  padding: 0 36px;
  border: 1px solid rgba(244,239,228,0.6);
  color: var(--gz-on-dark);
  font-size: 14px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gzt .gzt-cta__button:hover{ color: var(--gz-on-dark); background: rgba(244,239,228,0.1); border-color: var(--gz-on-dark); }
.gzt .gzt-cta__button--solid{
  background: var(--gz-on-dark);
  border-color: var(--gz-on-dark);
  color: var(--gz-green-deep);
}
.gzt .gzt-cta__button--solid:hover{ background: var(--gz-cream); color: var(--gz-green-deep); }
.gzt-cta__meta{
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  border: 1px solid currentColor;
}
.gzt-cta__mail{
  margin-top: 12px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.gzt .gzt-cta__mail a{ color: var(--gz-on-dark); border-bottom: 1px solid rgba(244,239,228,0.4); }
.gzt .gzt-cta__mail a:hover{ color: var(--gz-mint); border-color: var(--gz-mint); }
.gzt-cta__mail span{ color: rgba(244,239,228,0.5); }

/* ---------- タブレット ---------- */
@media (max-width: 1179px){
  .gzt-credibility{ gap: 56px; }
  .gzt-offer__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  /* 年表は4列だと1列が細くなるため、2列×2段にする */
  .gzt-timeline{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gzt-timeline li{ padding-bottom: 20px; }
  .gzt-flow--ja{ font-size: 15px; padding: 22px 20px; }
  .gzt-flow--ja li + li::before{ margin: 0 12px; }
  .gzt-examples__grid{ gap: 24px; }
}
@media (max-width: 1023px){
  .gzt-trade__subhead{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .gzt-trade__cta{ flex-direction: column; align-items: flex-start; padding: 36px; }
  .gzt-credibility{ grid-template-columns: 1fr; gap: 32px; }
  .gzt-examples__grid{ grid-template-columns: 1fr; gap: 56px; }
  .gzt-example__head{ min-height: 0; }
  .gzt-business__grid{ grid-template-columns: 1fr; }
  .gzt-company,
  .gzt-company + .gzt-company{ padding: 28px 0; border-left: 0; }
  .gzt-company + .gzt-company{ border-top: 1px solid var(--gz-line); }
  .gzt-flow{ flex-direction: column; font-size: 17px; }
  .gzt-flow li{ text-align: center; }
  /* 工程名は短いので、タブレットでは横並びのまま */
  .gzt-flow--ja{ flex-direction: row; font-size: 15px; padding: 22px 20px; }
  .gzt-flow li + li::before{ content: "↓"; display: block; margin: 4px 0 6px; line-height: 1; }
  .gzt-flow--ja li + li::before{ content: "→"; display: inline; margin: 0 12px; }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 767px){
  .gzt-trade{ gap: 56px; }
  .gzt-trade__sub span{ font-size: 19px; }
  .gzt-trade__cta{ padding: 28px 20px; gap: 24px; }
  .gzt-trade__buttons{ align-self: stretch; flex-direction: column; }
  .gzt .gzt-trade__button{ padding: 0 16px; }
  .gzt-hero__title{ font-size: 28px; line-height: 1.6; }
  /* 写真が明るいため、文字の来る下半分を暗くする(色は page-trade.php の --gzt-hero-overlay-sp) */
  .gzt .gzp-hero::before{ background: var(--gzt-hero-overlay-sp, var(--gzp-hero-overlay)); }
  .gzt-credibility__text{ font-size: 16px; line-height: 2; }
  .gzt-timeline{ grid-template-columns: 1fr; }
  .gzt-flow--ja{ flex-direction: column; font-size: 16px; }
  .gzt-flow--ja li + li::before{ content: "↓"; display: block; margin: 4px 0 6px; line-height: 1; }
  .gzt-chain__caption{ font-size: 12px; }
  .gzt-timeline li{ flex-direction: row; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gz-line); }
  .gzt-timeline__year{ flex-shrink: 0; width: 72px; font-size: 28px; }
  .gzt-offer__list{ grid-template-columns: 1fr; row-gap: 0; }
  .gzt-offer__list li{ flex-direction: row; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gz-line); font-size: 15px; }
  .gzt-offer__num{ flex-shrink: 0; width: 32px; font-size: 22px; }
  .gzt-flow{ padding: 20px 16px; font-size: 16px; }
  .gzt-company__name{ font-size: 26px; }
  .gzt-cta{ padding: 80px 24px; }
  .gzt-cta__title{ font-size: 24px; }
  .gzt-cta__lead{ font-size: 13px; }
  .gzt-cta__buttons{ flex-direction: column; align-self: stretch; }
  .gzt .gzt-cta__button{ padding: 0 20px; }
}