/* =====================================================================
   lineup-sanchoku.css — 商品ラインナップ 詳細「産直商品」(C03)
   prefix: p-sc（他ページのマーカーと衝突しない接頭辞）
   2段階レスポンシブ: モバイル(375基準) / デスクトップ(>=1024, 1440基準)
   カルーセルなし（静的グリッド）。
   ===================================================================== */
.p-sc { background: var(--bg-default); }
.p-sc__wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-24); }

/* ============ Hero ============ */
.p-sc__hero { position: relative; padding-top: var(--space-24); }
@media (max-width: 599px) { .p-sc__hero { padding-top: 0; } }   /* SP: KV上部マージン削除 */
.p-sc__hero-media { position: relative; max-width: 1200px; margin-inline: auto; }
.p-sc__hero-img { width: 100%; aspect-ratio: 375 / 400; overflow: hidden; background: var(--container-level1); }
.p-sc__hero-img img { width: 100%; height: 100%; display: block; }
.p-sc__hero-title {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: min(80%, 600px); background: var(--container-white-alfa);
  border-radius: 0 var(--radius-40) var(--radius-40) 0; padding: var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-16);
}
.p-sc__hero-h { margin: 0; font-weight: var(--fw-bold); font-size: 28px; line-height: 46px; color: var(--text-secondary); }   /* SP: KV見出し28px固定（PCは40px） */
.p-sc__hero-sub { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }

/* ============ イントロ ============ */
.p-sc__intro { padding-block: var(--space-40); display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }   /* SP:40px（PCは1024で64pxに上書き） */
.p-sc__intro-title { margin: 0; font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; letter-spacing: .04em; color: var(--text-secondary); }
/* 見出しの改行はSPのみ（≥600pxでは1行） */
@media (min-width: 600px) { .p-sc__sp-br { display: none; } }
.p-sc__intro-lead { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); max-width: 980px; }
/* SP: リード文のみ左寄せ・見出しは中央のまま20px（PCは24px） */
@media (max-width: 599px) {
  .p-sc__intro { align-items: stretch; text-align: left; }
  .p-sc__intro .p-sc__intro-title { font-size: 20px; text-align: center; }
}

/* ============ 産直セクション（白カード） ============ */
.p-sc__section { background: var(--container-white); margin-top: var(--space-40); padding: var(--space-48) var(--space-24); display: flex; flex-direction: column; gap: var(--space-40); }
.p-sc__hl {
  margin: 0; align-self: center; text-align: center;
  font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; color: var(--text-default);
  text-decoration: underline; text-decoration-color: var(--container-green);
  text-decoration-thickness: 8px; text-underline-offset: -2px; text-decoration-skip-ink: none;
}

.p-sc__group { display: flex; flex-direction: column; gap: var(--space-40); }
/* 左: 画像＋バッジ＋商品名＋説明 */
.p-sc__media { display: flex; flex-direction: column; gap: var(--space-24); }
.p-sc__media-fig { position: relative; }
.p-sc__media-img { width: 100%; aspect-ratio: 504 / 341; border-radius: 20px; overflow: hidden; }
.p-sc__media-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 画像右下のアクセント画像（角からはみ出して重ねる。fig基準で絶対配置） */
.p-sc__media-accent { position: absolute; right: -30px; bottom: -70px; width: 250px; height: auto; pointer-events: none; }
/* 1セクション目（たまご）だけ下方向のはみ出しを控えめに（PC） */
@media (min-width: 600px) { .p-sc__section--egg .p-sc__media-accent { bottom: -40px; } }
/* SP: 右端寄せ＆やや大きめ。1枚目は-30、2・3枚目は-60 */
@media (max-width: 599px) {
  .p-sc__media-accent { right: -40px; bottom: -30px; width: 210px; }
  .p-sc__section--pork .p-sc__media-accent,
  .p-sc__section--scallop .p-sc__media-accent { bottom: -60px; }
}
/* アクセント画像が右にはみ出す分を白カード端でクリップ（SPの横スクロール防止）。
   overflow-x:clip はスクロールコンテナを作らず縦方向(bottomのはみ出し)に影響しない */
.p-sc__section { overflow-x: clip; }
.p-sc__badge { position: absolute; right: 8px; bottom: 8px; width: 100px; height: 100px; border-radius: var(--radius-16); background: var(--container-white); box-shadow: 0 0 16px rgba(0,0,0,.08); overflow: hidden; }
.p-sc__badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.p-sc__media-text { display: flex; flex-direction: column; gap: var(--space-8); }
.p-sc__media-name { margin: 0; font-weight: var(--fw-bold); font-size: 20px; line-height: 34px; letter-spacing: .04em; color: var(--text-default); }
.p-sc__media-desc { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }

/* 右: 情報カード（薄黄） */
.p-sc__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
/* 情報カードの地色はセクションごとに切替（たまご=黄 / 豚=桃 / ほたて=水） */
.p-sc__section--egg     { --sc-card: #fdf7cb; }
/* eggセクション（intro直後）は上マージンなし。PC上書きより詳細度を上げる */
.p-sc__section.p-sc__section--egg { margin-top: 0; }
.p-sc__section--pork    { --sc-card: #ffeeeb; }
.p-sc__section--scallop { --sc-card: #e1efef; }
.p-sc__card { background: var(--sc-card, #fdf7cb); border-radius: var(--radius-24); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); }
.p-sc__card-title { margin: 0; font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }
.p-sc__card-text { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }
/* SP専用: カード見出しを中央寄せ（本文は左のまま） */
@media (max-width: 599px) { .p-sc__card-title { text-align: center; } }

/* ============ Section_Flow（注文の流れ） ============ */
.p-sc__flow { background: var(--container-white); margin-top: var(--space-40); padding: var(--space-48) var(--space-24); display: flex; flex-direction: column; align-items: center; gap: var(--space-40); }
.p-sc__flow-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.p-sc__flow-lead { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }
/* SP: 「商品を注文するには」のリードのみ左寄せ（見出しは中央のまま） */
@media (max-width: 599px) {
  .p-sc__flow-head { align-items: stretch; text-align: left; }
  .p-sc__flow-head .p-sc__hl { text-align: center; }
  /* SP: 写真＋テキストの縦間隔を16pxに */
  .p-sc__media { gap: var(--space-16); }
}
.p-sc__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 52px; }
.p-sc__step { position: relative; display: flex; align-items: center; gap: var(--space-24); }
.p-sc__step-illust { flex: 0 0 75px; width: 75px; height: 75px; display: grid; place-items: center; }
.p-sc__step-illust img { width: 100%; height: 100%; object-fit: contain; }
.p-sc__step-label { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
/* SP: ステップ間の下向き矢印（PCの右矢印を90°回転） */
.p-sc__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(100% + 26px);
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%) rotate(90deg);
  background: url(../img/frozen-step-arrow.webp) center / contain no-repeat;
  pointer-events: none;
}
.p-sc__step-no {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-12);
  border-radius: 4px;
  background: var(--text-secondary);
  color: var(--text-white);
  font-weight: var(--fw-bold);
  font-size: 10px;
  line-height: 18px;
  letter-spacing: .04em;
}
.p-sc__step-no span { font-size: 14px; line-height: 22px; }
.p-sc__step-title { font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }

.p-sc__btn { width: 100%; }
@media (min-width: 600px) { .p-sc__btn { width: 280px; } }

/* ---------------------------------------------------------------------
   タブレット（>=600）: 情報カード2列
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  .p-sc__cards { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   タブレット（>=600）: ステップ横並び・カード化
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  .p-sc__steps { flex-direction: row; justify-content: center; gap: var(--space-40); }
  .p-sc__step { flex: 1 1 0; flex-direction: column; text-align: center; gap: var(--space-24); }
  .p-sc__step-illust { flex-basis: auto; width: 200px; height: 200px; max-width: 100%; }
  .p-sc__step-label { align-items: center; text-align: center; }
  .p-sc__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 100px;
    left: 100%;
    margin-left: calc(var(--space-40) / 2 - 13px);
    transform: translateY(-50%);
    width: 26px;
    height: 64px;
    background: url(../img/frozen-step-arrow.webp) center / contain no-repeat;
  }
  .p-sc__section, .p-sc__flow { border-radius: var(--radius-40); padding: var(--space-64); }
}

/* ---------------------------------------------------------------------
   デスクトップ（>=1024）: 画像左＋カード右の2カラム・PCタイポ
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-sc__hero { padding-top: var(--space-64); }
  .p-sc__hero-img { aspect-ratio: 1200 / 400; border-radius: var(--radius-40); }
  .p-sc__hero-title { width: 600px; padding: var(--space-32) var(--space-40); }
  .p-sc__hero-h { font-size: 40px; line-height: 58px; }

  .p-sc__intro { padding-block: var(--space-64); }
  .p-sc__section, .p-sc__flow { margin-top: var(--space-40); gap: var(--space-64); }
  .p-sc__hl { font-size: 32px; line-height: 52px; }

  .p-sc__group { flex-direction: row; gap: var(--space-64); align-items: flex-start; }
  .p-sc__media { flex: 1 1 0; min-width: 0; }
  .p-sc__media-img { aspect-ratio: 504 / 341; }
  .p-sc__cards-wrap { flex: 1 1 0; min-width: 0; }
  .p-sc__card { min-height: 240px; }
}