/* =====================================================================
   lineup-ready.css — 商品ラインナップ 詳細「調理済みおかず」(C05)
   prefix: p-rm（他ページのマーカーと衝突しない接頭辞）
   2段階レスポンシブ: モバイル(375基準) / デスクトップ(>=1024, 1440基準)
   カルーセルなし（静的グリッド）。ボタンは共通 .c-btn を使用。
   ===================================================================== */
.p-rm { background: var(--bg-default); }
.p-rm__wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-24); }

/* ============ Hero ============ */
.p-rm__hero { position: relative; padding-top: var(--space-24); }
.p-rm__hero-media { position: relative; max-width: 1200px; margin-inline: auto; }
.p-rm__hero-img { width: 100%; aspect-ratio: 375 / 400; overflow: hidden; background: var(--container-level1); }
.p-rm__hero-img img { width: 100%; height: 100%; display: block; }
.p-rm__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-rm__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-rm__hero-sub { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }

/* ============ イントロ（帰宅後5分で…） ============ */
.p-rm__intro { padding-top: var(--space-48); padding-bottom: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }   /* 下paddingなし。テキスト→サービスセクション間はsection margin-topのみ(SP40/PC64) */
.p-rm__intro-title { margin: 0; font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; letter-spacing: .04em; color: var(--text-secondary); }
.p-rm__intro-lead { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); max-width: 880px; }
/* SP: リード文のみ左寄せ・見出しは中央のまま20px（PCは24px） */
@media (max-width: 599px) {
  .p-rm__intro { align-items: stretch; text-align: left; }
  .p-rm__intro .p-rm__intro-title { font-size: 20px; text-align: center; }
  /* KV上部の余白を削除 */
  .p-rm__hero { padding-top: 0; }
  /* ご利用者の声セクションをブラウザ幅100%に（白セクションの左右padding24pxを相殺・角丸オフ）。
     base定義が後方にあるため詳細度を上げて上書き */
  .p-rm__section .p-rm__voicewrap { margin-inline: calc(-1 * var(--space-24)); border-radius: 0; }
}

/* ============ 共通: 白カードセクション ============ */
.p-rm__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-48);
}
/* 緑ハイライト見出し */
.p-rm__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;
}
/* SP専用改行（PC・タブレットでは非表示） */
@media (min-width: 600px) { .p-rm__sp-br { display: none; } }

/* ============ サービス3ポイント ============ */
.p-rm__points { display: grid; grid-template-columns: 1fr; gap: var(--space-40); }
.p-rm__point { display: flex; flex-direction: column; }
.p-rm__point-img { width: 100%; aspect-ratio: 330 / 208; border-radius: var(--radius-24); overflow: hidden; background: var(--container-level2); }
.p-rm__point-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-rm__point-title { margin: var(--space-24) 0 0; font-weight: var(--fw-bold); font-size: 20px; line-height: 34px; letter-spacing: .04em; color: var(--text-default); }   /* 写真→見出し24px */
.p-rm__point-text { margin: var(--space-8) 0 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }   /* 見出し→テキスト8px */

/* ============ メニュー（メイン/サイド） ============ */
.p-rm__dish { display: flex; flex-direction: column; gap: var(--space-24); }
.p-rm__dish-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); text-align: center; }
.p-rm__dish-title {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; letter-spacing: .04em; color: var(--text-secondary);
}
.p-rm__cutlery { width: auto; height: 26px; flex: none; }
.p-rm__dish-note { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }

.p-rm__menu { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-24); row-gap: var(--space-40); }
.p-rm__item { display: flex; flex-direction: column; gap: var(--space-16); }
.p-rm__item-img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-16); overflow: hidden; }
.p-rm__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-rm__item-body { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.p-rm__item-name { margin: 0; font-weight: var(--fw-bold); font-size: 20px; line-height: 34px; letter-spacing: .04em; color: var(--text-default); }
.p-rm__item-vol { margin: 0; font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: .04em; color: var(--text-default); }
.p-rm__item-prices { display: flex; flex-direction: column; gap: var(--space-4); }
.p-rm__price-row { display: flex; flex-direction: column; }
.p-rm__price-label { font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
.p-rm__price-val { display: flex; align-items: baseline; gap: var(--space-4); }
.p-rm__price-main { font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }
.p-rm__price-tax { font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
.p-rm__menu-note { margin: 0; font-weight: var(--fw-light); font-size: 12px; line-height: 18px; letter-spacing: .04em; color: var(--text-default); text-align: center; }

/* ============ ご利用者の声（ベージュパネル） ============ */
.p-rm__voicewrap {
  background: var(--container-highlight);
  border-radius: var(--radius-24);
  padding: var(--space-40) var(--space-24);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-40);
}
.p-rm__voice-title {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; letter-spacing: .04em; color: var(--text-secondary);
}
.p-rm__voices { display: grid; grid-template-columns: 1fr; gap: var(--space-24); width: 100%; }
.p-rm__voice { display: flex; align-items: center; gap: var(--space-8); }
.p-rm__voice-user { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.p-rm__voice-user img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 右側のアイコンは吹き出しに向くよう左右反転 */
.p-rm__voice--right .p-rm__voice-user img { transform: scaleX(-1); }
.p-rm__voice-bubble {
  position: relative; flex: 1 1 0; min-width: 0; margin: 0;
  background: var(--container-white); border-radius: var(--radius-16);
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.p-rm__voice-bubble::before { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 7px solid transparent; }
.p-rm__voice--left .p-rm__voice-bubble::before { left: -6px; transform: translateY(-50%); border-right-color: var(--container-white); border-left: 0; }
.p-rm__voice--right .p-rm__voice-bubble::before { right: -6px; transform: translateY(-50%); border-left-color: var(--container-white); border-right: 0; }
.p-rm__voice-t { font-weight: var(--fw-light); font-size: 12px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }   /* SP: 吹き出しテキスト12px（PCは1024で14pxに上書き） */

/* ============ Section_Flow（注文の流れ） ============ */
.p-rm__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-rm__flow-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.p-rm__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-rm__flow-head { align-items: stretch; text-align: left; }
  .p-rm__flow-head .p-rm__hl { text-align: center; }
  /* SP: フォントサイズ調整（ベース定義より後方＝上書き） */
  .p-rm__dish-title { font-size: 20px; }
  .p-rm__item-name { font-size: 16px; line-height: 1.5; }
  /* SP: 白セクションの下paddingを0に */
  .p-rm__section { padding-bottom: var(--space-48); }
}
.p-rm__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 52px; }
.p-rm__step { position: relative; display: flex; align-items: center; gap: var(--space-24); }
.p-rm__step-illust { flex: 0 0 75px; width: 75px; height: 75px; display: grid; place-items: center; }
.p-rm__step-illust img { width: 100%; height: 100%; object-fit: contain; }
.p-rm__step-label { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
/* SP: ステップ間の下向き矢印（PCの右矢印を90°回転） */
.p-rm__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-rm__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-rm__step-no span { font-size: 14px; line-height: 22px; }
.p-rm__step-title { font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }

/* ============ ボタン幅 ============ */
.p-rm__btn { width: 100%; }
@media (min-width: 600px) { .p-rm__btn { width: 280px; } }

/* ---------------------------------------------------------------------
   タブレット（>=600）: 3カラム・メニュー横並び
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  .p-rm__points { grid-template-columns: repeat(3, 1fr); }
  .p-rm__menu { column-gap: var(--space-64); row-gap: var(--space-64); }
  /* メニューアイテム: 画像左＋本文右 */
  .p-rm__item { flex-direction: row; gap: var(--space-24); align-items: flex-start; }
  .p-rm__item-img { flex: 0 0 150px; width: 150px; height: 150px; aspect-ratio: auto; }
  .p-rm__item-body { flex: 1 1 0; }

  /* 声: 2列（列方向に流す） */
  .p-rm__voices { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-auto-flow: column; column-gap: var(--space-64); row-gap: var(--space-24); }

  /* ステップ横並び */
  .p-rm__steps { flex-direction: row; justify-content: center; gap: var(--space-40); }
  .p-rm__step { flex: 1 1 0; flex-direction: column; text-align: center; gap: var(--space-24); }
  .p-rm__step-illust { flex-basis: auto; width: 200px; height: 200px; max-width: 100%; }
  .p-rm__step-label { align-items: center; text-align: center; }
  .p-rm__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-rm__section, .p-rm__flow { border-radius: var(--radius-40); padding: var(--space-64); }
  .p-rm__voicewrap { border-radius: var(--radius-40); padding: var(--space-64); }
}

/* ---------------------------------------------------------------------
   デスクトップ（>=1024）: PCタイポスケール
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-rm__voice-t { font-size: 14px; }
  .p-rm__hero { padding-top: var(--space-64); }
  .p-rm__hero-img { aspect-ratio: 1200 / 400; border-radius: var(--radius-40); }
  .p-rm__hero-title { width: 600px; padding: var(--space-32) var(--space-40); }
  .p-rm__hero-h { font-size: 40px; line-height: 58px; }

  .p-rm__intro { padding-top: var(--space-64); padding-bottom: 0; }   /* 下paddingを外し、テキスト→サービスセクション間はsection margin-top(64px)のみに */
  .p-rm__section { margin-top: var(--space-40); gap: var(--space-64); }
  .p-rm__flow { margin-top: var(--space-40); }
  .p-rm__hl { font-size: 32px; line-height: 52px; }
}