/* ============================================================
   trading.css — 取引ページ固有スタイル
============================================================ */

/* ============================================================
   Page Hero
============================================================ */
.page-hero {
  margin-top: var(--header-height);
  background: var(--color-bg-gray);
  padding: 80px 0 72px;
}

.page-hero__inner {
  max-width: 848px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.page-hero__en {
  font-family: 'Manrope', sans-serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 16px;
}

.page-hero__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.15em;
  line-height: 1;
  margin-bottom: 16px;
}

.page-hero__triangles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-primary);
  font-size: 12px;
}

/* ============================================================
   Shared Layout
============================================================ */
.tr-inner {
  max-width: 848px;
  margin: 0 auto;
  padding: 0 24px;
}

.tr-inner--gray {
  background: var(--color-bg-gray);
  padding: 32px 24px;
}

.tr-section {
  padding: 20px 0;
}

.tr-section--white {
  background: var(--color-bg);
}

.tr-section--gray {
  background: var(--color-bg-gray);
}

.tr-section--top-compact {
  padding-top: 0;
}

.tr-section--top-compact .tr-inner > .tr-heading:first-child {
  margin-top: 4px;
}

/* ============================================================
   Section Headings
============================================================ */
.tr-section-head {
  margin-top: 100px;
  margin-bottom: 64px;
}

.tr-label {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  margin-left: 15px;
  position: relative;
  display: block;
  line-height: 1;
}

.tr-label::before {
  content: '▶';
  font-size: 8px;
  position: absolute;
  left: -16px;
  top: 4px;
}

.tr-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.15em;
  line-height: 1.4;
}

/* H3 レベルの見出し（下ボーダー付き） */
.tr-heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.15em;
  line-height: 1.4;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 124, 54, 0.2);
  margin-top: 64px;
  margin-bottom: 24px;
}

/* 緑色のサブラベル（18px） */
.tr-sub-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  display: block;
}

/* ============================================================
   Body Text
============================================================ */
.tr-body {
  font-size: 18px;
  color: var(--color-text);
  line-height: 2;
  margin-bottom: 40px;
}

.tr-note {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ============================================================
   Tagline（契約取引により〜産地の活性化をサポート）
============================================================ */
.tr-tagline {
  margin: 32px 0 48px;
  text-align: center;
}

.tr-tagline__badge {
  background: var(--color-bg-gray);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  display: inline-block;
  margin-bottom: 26px;
}

.tr-tagline__main {
  text-align: center;
}

.tr-tagline__text {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.5;
  padding: 13px 36px;
  display: inline-block;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) top right,
    linear-gradient(var(--color-primary), var(--color-primary)) top right,
    linear-gradient(var(--color-primary), var(--color-primary)) bottom left,
    linear-gradient(var(--color-primary), var(--color-primary)) bottom left;
  background-size: 20px 1px, 1px 30px, 20px 1px, 1px 30px;
  background-repeat: no-repeat;
}

/* ============================================================
   Green Badge（播種前契約ボックス）
============================================================ */
.tr-green-badge {
  background: var(--color-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  border-radius: 4px;
  margin: 32px auto;
  display: block;
  width: fit-content;
}

/* ============================================================
   Flow Diagram
============================================================ */
.tr-flow {
  margin-top: 32px;
  margin-bottom: 48px;
}

.tr-flow__img {
  width: 100%;
  max-width: 848px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   Merit Highlight（再生産価格ボックス）
============================================================ */
.tr-merit-highlight {
  background: var(--color-bg-gray);
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  padding: 32px 24px;
}

.tr-merit-highlight__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ============================================================
   Bullet List
============================================================ */
.tr-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 18px;
  color: var(--color-text);
  line-height: 1.6;
}

.tr-bullet-list li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  margin-top: 9px;
}

/* ============================================================
   Ranking（主要取引品目ランキング）
============================================================ */
.tr-ranking {
  margin: 24px 0 40px;
}

.tr-ranking__img {
  display: block;
  width: 100%;
  max-width: 715px;
  height: auto;
  margin: 0 auto;
}

/* ============================================================
   Map（産地マップ）
============================================================ */
.tr-map {
  margin: 40px 0 48px;
}

.tr-map__img {
  width: 100%;
  max-width: 717px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   Award（受賞テキスト）
============================================================ */
.tr-award-text {
  font-size: 18px;
  color: var(--color-text);
  line-height: 2;
}

.tr-award-text__year {
  font-weight: 500;
  color: var(--color-primary);
}

/* ============================================================
   Comparison Diagram
============================================================ */
.tr-compare {
  margin-top: 48px;
}

.tr-compare__img {
  width: 100%;
  max-width: 848px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   Summary Box（緑ボーダーまとめボックス）
============================================================ */
.tr-summary-box {
  background: var(--color-bg-gray);
  border-radius: 8px;
  padding: 32px 24px;
  margin-bottom: 56px;
}

.tr-summary-box__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ============================================================
   Merit Items（5つのメリット）
============================================================ */
.tr-merit-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.tr-merit-item {
  display: flex;
  align-items: center;
}

.tr-merit-item__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}

.tr-merit-item__en {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  line-height: 1;
}

.tr-merit-item__num {
  font-family: 'Manrope', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}

.tr-merit-item__text {
  background: var(--color-bg-gray);
  width: 772px;
  margin-left: -28px;
  padding: 16px 24px 16px 44px;
  min-height: 56px;
  font-size: 18px;
  color: var(--color-text);
  line-height: 1.6;
  border-radius: 4px;
  margin-bottom: 0;
}

.tr-merit-item__key {
  font-weight: 700;
  color: var(--color-primary);
}

/* ============================================================
   Flow SP（SP専用：デフォルト非表示）
============================================================ */
.tr-flow-sp {
  display: none;
}

/* ============================================================
   Ranking SP（SP専用：デフォルト非表示）
============================================================ */
.tr-ranking-sp {
  display: none;
}

/* ============================================================
   Compare SP（SP専用：デフォルト非表示）
============================================================ */
.tr-compare-sp {
  display: none;
}

/* ============================================================
   Centered Section Head
============================================================ */
.tr-section-head--center {
  text-align: center;
}

.tr-section-head--center .tr-label {
  display: inline-block;
  margin-left: 0;
}

.tr-section-head--center .tr-label::before {
  left: -15px;
}


/* ============================================================
   Header — Active link state
============================================================ */
.header__nav-link--active {
  color: var(--color-primary);
}

/* ============================================================
   Tablet Portrait (769–1024px)
============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-hero__inner,
  .tr-inner {
    max-width: 720px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .page-hero__en {
    font-size: 40px;
  }

  .tr-title {
    font-size: 28px;
  }

  .tr-merit-item__text {
    width: auto;
    flex: 1;
  }
}

/* ============================================================
   SP (768px以下)
============================================================ */
@media (max-width: 768px) {
  /* Page Hero */
  .page-hero {
    padding: 52px 0 48px;
  }

  .page-hero__inner {
    padding: 0 20px;
  }

  .page-hero__en {
    font-size: 40px;
  }

  .page-hero__title {
    font-size: 16px;
  }

  /* Layout */
  .tr-inner {
    padding: 0 20px;
  }

  .tr-section {
    padding: 48px 0;
  }

  .tr-section--top-compact {
    padding-top: 0;
  }

  .tr-section-head {
    margin-top: 0;
    margin-bottom: 32px;
  }

  /* Section labels & titles */
  .tr-label {
    font-size: 13px;
  }

  .tr-title {
    font-size: 24px;
  }

  .tr-heading {
    font-size: 20px;
    margin-top: 40px;
  }

  .tr-sub-label {
    font-size: 15px;
  }

  /* Body */
  .tr-body {
    font-size: 15px;
    margin-bottom: 28px;
  }

  /* Flow: PC画像を隠してSP版を表示 */
  .tr-flow {
    display: none;
  }

  .tr-flow-sp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 460px;
    margin: 24px auto 40px;
  }

  /* エンティティボックス（生産者・MCプロデュース・実需者） */
  .tr-flow-sp__entity {
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    line-height: 1.3;
  }

  .tr-flow-sp__entity--blue {
    background: #1a72ba;
  }

  .tr-flow-sp__entity--mc {
    background: var(--color-primary);
    padding: 12px 16px;
    font-size: 16px;
  }

  .tr-flow-sp__entity--mc-img {
    background: #e8f5ee;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 16px;
  }

  .tr-flow-sp__mc-icon-wrap {
    display: block;
    width: 38px;
    height: 38px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .tr-flow-sp__mc-icon-img {
    display: block;
    height: 38px;
    width: auto;
    max-width: none;
  }

  .tr-flow-sp__mc-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* 直接接続 + 生産窓口バイパス エリア */
  .tr-flow-sp__junction {
    display: flex;
    align-items: stretch;
    min-height: 90px;
    margin: 2px 0;
  }

  /* 左：直接ルート（実線） */
  .tr-flow-sp__direct {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .tr-flow-sp__direct-arrow {
    font-size: 36px;
    line-height: 1;
    color: #e06b00;
  }

  .tr-flow-sp__direct-label {
    font-size: 10px;
    font-weight: 700;
    color: #e06b00;
    letter-spacing: 0.1em;
    background: rgba(224, 107, 0, 0.1);
    padding: 1px 8px;
    border-radius: 2px;
  }

  /* 右：生産窓口バイパス（点線） */
  .tr-flow-sp__bypass {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 10px;
  }

  .tr-flow-sp__bypass-line {
    flex: 1;
    width: 2px;
    min-height: 10px;
    background: repeating-linear-gradient(
      180deg,
      #e06b00 0,
      #e06b00 4px,
      transparent 4px,
      transparent 9px
    );
  }

  .tr-flow-sp__window-box {
    background: #eef6fc;
    border: 2px dashed #4a9fd4;
    border-radius: 4px;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1a72ba;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
  }

  .tr-flow-sp__window-box span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #555;
    margin-top: 3px;
    line-height: 1.5;
  }

  /* MCプロデュース↔実需者など、単純な矢印 */
  .tr-flow-sp__arrow {
    font-size: 22px;
    line-height: 1;
    color: #e06b00;
    padding: 4px 0;
    text-align: center;
  }

  /* コンテンツカード */
  .tr-flow-sp__card {
    background: var(--color-bg-gray);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 4px 4px 0;
    padding: 14px 16px;
    margin: 6px 0;
  }

  .tr-flow-sp__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .tr-flow-sp__list li {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .tr-flow-sp__note {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    padding-left: 6px;
  }

  /* Ranking SP */
  .tr-ranking {
    display: none;
  }

  .tr-ranking-sp {
    display: block;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    background: #f2f9f5;
    overflow: hidden;
    margin: 20px 0 36px;
  }

  .tr-ranking-sp__head {
    padding: 12px 16px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 124, 54, 0.2);
  }

  .tr-ranking-sp__title-crown {
    height: 22px;
    width: auto;
    display: block;
    margin: 0 auto 6px;
    max-width: none;
  }

  .tr-ranking-sp__title-bar {
    background: var(--color-primary);
    border-radius: 4px;
    padding: 8px 20px;
    display: inline-block;
  }

  .tr-ranking-sp__title-text {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin: 0;
  }

  .tr-ranking-sp__title-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    margin: 3px 0 0;
    line-height: 1;
  }

  .tr-ranking-sp__list {
    list-style: none;
    padding: 10px 12px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* 第1位（オレンジ背景） */
  .tr-ranking-sp__row--first {
    background: #ed6a02;
    border-radius: 4px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  .tr-ranking-sp__row-crown {
    height: 28px;
    width: auto;
    flex-shrink: 0;
    max-width: none;
  }

  .tr-ranking-sp__first-rank {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2px;
    line-height: 1;
  }

  /* 名前と量を横並びにする共通コンテナ */
  .tr-ranking-sp__row-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .tr-ranking-sp__first-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    line-height: 1.2;
  }

  .tr-ranking-sp__first-vol {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
  }

  .tr-ranking-sp__first-detail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin: 3px 0 0;
    line-height: 1.3;
  }

  /* 第2〜5位 */
  .tr-ranking-sp__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(0, 124, 54, 0.12);
  }

  .tr-ranking-sp__row:last-child {
    border-bottom: none;
  }

  .tr-ranking-sp__row-rank {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 38px;
  }

  .tr-ranking-sp__row-body {
    flex: 1;
    min-width: 0;
  }

  .tr-ranking-sp__row-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    flex: 1;
    line-height: 1.2;
  }

  .tr-ranking-sp__row-vol {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
  }

  .tr-ranking-sp__row-detail {
    font-size: 11px;
    color: #666;
    margin: 2px 0 0;
    line-height: 1.3;
  }

  /* Compare SP */
  .tr-compare {
    display: none;
  }

  .tr-compare-sp {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
  }

  /* 各ブロック共通 */
  .tr-compare-sp__block {
    border-radius: 8px;
    overflow: hidden;
  }

  .tr-compare-sp__block--gray {
    background: #f4f4f4;
  }

  .tr-compare-sp__block--orange {
    background: #fff5ee;
  }

  /* ブロックタイトル */
  .tr-compare-sp__block-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 12px;
    letter-spacing: 0.05em;
    line-height: 1;
  }

  .tr-compare-sp__block-title--dark {
    background: #555;
    color: #fff;
  }

  .tr-compare-sp__block-title--orange {
    background: #fff5ee;
    color: #ed6a02;
    border-bottom: 2px solid #ed6a02;
  }

  /* フロー縦並び */
  .tr-compare-sp__flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    gap: 0;
  }

  /* エンティティボックス */
  .tr-compare-sp__entity {
    width: 100%;
    max-width: 200px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 4px;
    line-height: 1.3;
  }

  .tr-compare-sp__entity--outline {
    background: #fff;
    border: 2px solid #5a8ec4;
    color: #333;
  }

  .tr-compare-sp__entity--blue {
    background: #1a72ba;
    color: #fff;
  }

  .tr-compare-sp__entity--inner {
    background: #fff;
    border: 1.5px solid #5a8ec4;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-width: none;
  }

  .tr-compare-sp__entity--inner strong {
    font-size: 14px;
    font-weight: 700;
  }

  .tr-compare-sp__entity--inner span {
    font-size: 11px;
    font-weight: 400;
    color: #555;
  }

  /* 矢印 */
  .tr-compare-sp__arrow-down {
    font-size: 22px;
    color: #4a6a8a;
    line-height: 1;
    padding: 4px 0;
    text-align: center;
    width: 100%;
  }

  .tr-compare-sp__arrow-down--inner {
    font-size: 18px;
    padding: 2px 0;
    color: #4a6a8a;
    text-align: center;
    width: 100%;
  }

  .tr-compare-sp__arrow-down--orange {
    color: #ed6a02;
  }

  /* 卸売市場ラッパー */
  .tr-compare-sp__market {
    width: 100%;
    border: 2px solid #5a8ec4;
    border-radius: 4px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
  }

  .tr-compare-sp__market-label {
    font-size: 11px;
    font-weight: 700;
    color: #4a6a8a;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
  }

  /* MCプロデュースボックス */
  .tr-compare-sp__mc {
    width: 100%;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    padding: 10px 14px;
    background: #fff;
  }

  .tr-compare-sp__mc-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }

  .tr-compare-sp__mc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tr-compare-sp__mc-list li {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }

  .tr-compare-sp__mc-list li::before {
    content: '●';
    color: var(--color-primary);
    font-size: 8px;
    flex-shrink: 0;
    margin-top: 4px;
  }

  /* Section1 下部ラベル */
  .tr-compare-sp__note {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    text-align: center;
    padding: 10px 16px 14px;
    line-height: 1.5;
    margin: 0;
  }

  /* Section2 下部バナー */
  .tr-compare-sp__banner {
    background: #ed6a02;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 12px 16px;
    line-height: 1.6;
    margin-top: 4px;
  }

  /* Tagline */
  .tr-tagline {
    margin: 20px 0 24px;
  }

  .tr-tagline__badge {
    font-size: 14px;
  }

  .tr-tagline__text {
    font-size: 16px;
    padding: 10px 20px;
  }

  /* Lists */
  .tr-bullet-list li {
    font-size: 15px;
  }

  /* Merit items */
  .tr-merit-item__text {
    width: auto;
    flex: 1;
    font-size: 15px;
    padding: 12px 16px 12px 36px;
  }

  /* Boxes */
  .tr-merit-highlight__title {
    font-size: 18px;
  }

  .tr-summary-box__title {
    font-size: 18px;
  }

  .tr-green-badge {
    font-size: 15px;
  }

  .tr-award-text {
    font-size: 15px;
  }
}

/* 400px以下：「MCプロデュースの取引体制」が改行しないようvwでスケール */
@media (max-width: 400px) {
  .tr-title {
    font-size: clamp(19px, 5.7vw, 24px);
  }
}