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

/* ============ Hero ============ */
.p-mk__hero { position: relative; padding-top: var(--space-24); }
@media (max-width: 599px) { .p-mk__hero { padding-top: 0; } }   /* SP: KV上部マージン削除 */
.p-mk__hero-media { position: relative; max-width: 1200px; margin-inline: auto; }
.p-mk__hero-img { width: 100%; aspect-ratio: 375 / 400; overflow: hidden; background: var(--container-level1); }
.p-mk__hero-img img { width: 100%; height: 100%; display: block; }
.p-mk__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-mk__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-mk__hero-sub { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }

/* ============ イントロ（3つの理由・イラスト＋マスコット） ============ */
.p-mk__intro { padding-block: var(--space-48) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-40); }
.p-mk__intro-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.p-mk__intro-title { margin: 0; font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; letter-spacing: .04em; color: var(--text-secondary); }
.p-mk__intro-lead { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: #000; }
/* SP: リード文のみ左寄せ・見出しは中央のまま20px（PCは24px） */
@media (max-width: 599px) {
  .p-mk__intro-head { align-items: stretch; text-align: left; }
  .p-mk__intro-head .p-mk__intro-title { font-size: 20px; text-align: center; }
}
/* Intro 3ポイント: SPデザイン準拠の装飾レイアウト（375基準・全幅ブリード） */
.p-mk__pts { position: relative; width: 375px; max-width: 100vw; align-self: center; aspect-ratio: 375 / 600; }   /* SP: 375基準・中央固定（ワイドSPでも左右に散らない） */
/* ポイント: 白い雲形ブロブ＋テキスト（左上寄せ） */
.p-mk__pt {
  position: absolute; z-index: 1;
  width: 270px;
  aspect-ratio: 274 / 180;
  background: url(../img/mk-point-blob.svg) center / 100% 100% no-repeat;
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: calc(5% + 20px) 10% 5% calc(16% - 10px); /* テキストを20px下へ */
  text-align: left;
}
.p-mk__pt--1 { left: -2.13%; top: 0; }         /* 5,   0   */
.p-mk__pt--2 { left: 30.4%;  top: 23.53%; }     /* 127, 128 */
.p-mk__pt--3 { left: -3.47%; top: 48.16%; }     /* 0,   262 */
.p-mk__pt-title { margin: 0; font-weight: var(--fw-bold); font-size: 14px; line-height: 22px; color: var(--text-default); }
.p-mk__pt-text { margin: 0; font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }

/* 散らし装飾（料理写真・トマト・線・マスコット） */
.p-mk__pt-food, .p-mk__pt-tomato, .p-mk__pt-deco, .p-mk__pt-mascot, .p-mk__pt-mascot-curve { position: absolute; z-index: 2; height: auto; }
.p-mk__pt-food--dish { left: 64.27%; top: 14.52%; width: 30.93%; } /* 254, 79  */
.p-mk__pt-food--bowl { left: 6.4%;   top: 31.99%; width: 26.67%; }                               /* 37,  174 */
.p-mk__pt-food--rice { left: 64.27%; top: 50.88%; width: 100px; }  /* SP/タブレットも米飯写真を使用（りんご装飾と差し替え） */
.p-mk__pt-tomato { display: none; }  /* りんご装飾は非表示（米飯写真に差し替え） */
.p-mk__pt-deco   { left: 78.93%; top: 10.85%; width: 14.67%; }                                    /* 309, 59  */
.p-mk__pt-mascot { left: 21.83%; top: 70.77%; width: 276px; }  /* 曲線＋テキスト＋赤ちゃんの合成画像。幅276px固定 */

/* ============ 共通: 白カードセクション＋緑ハイライト見出し ============ */
.p-mk__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); }
/* イントロ直下のセクションは上マージンを詰める（intro との余白を除去） */
.p-mk__intro + .p-mk__section { margin-top: 0; }
.p-mk__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-mk__lead { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); text-align: center; }

/* ============ 使いやすい3つのポイント（画像カード） ============ */
.p-mk__points { display: grid; grid-template-columns: 1fr; gap: var(--space-40); }
.p-mk__point { display: flex; flex-direction: column; }
.p-mk__point-img { width: 100%; aspect-ratio: 330 / 208; border-radius: var(--radius-24); overflow: hidden; }
.p-mk__point-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-mk__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-mk__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-mk__stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.p-mk__stat-img { width: 100%; aspect-ratio: 832 / 524; border: 1px solid #D8D2CA; border-radius: var(--radius-24); overflow: hidden; background: var(--container-alfa); }
/* 見出しの改行はSPのみ（≥600pxでは1行） */
@media (min-width: 600px) { .p-mk__sp-br { display: none; } }
.p-mk__stat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-mk__stat-cap { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); text-align: center; }

/* ============ ご利用者の声（ベージュパネル） ============ */
.p-mk__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-mk__voice-title, .p-mk__cut-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-mk__cutlery { width: auto; height: 26px; flex: none; }
.p-mk__voices { display: grid; grid-template-columns: 1fr; gap: var(--space-24); width: 100%; }
/* SP専用: リード/キャプション左寄せ ＋ ご利用者の声セクションを全幅・角丸なし・上下padding32px・吹き出し間16px */
@media (max-width: 599px) {
  /* SP: 白セクションの下paddingを48pxに */
  .p-mk__section { padding-bottom: var(--space-48); }
  /* SP: 装飾（吹き出し/料理写真）はコンテナ(375px)端では切らず、画面端で止める。
     bodyのclipはビューポートに伝播しない環境(iOS Safari等)があり左はみ出しで横スクロールが出るため、
     ビューポート幅のページ根 .p-mk で確実にクリップする */
  .p-mk { overflow-x: clip; }
  .p-mk__lead, .p-mk__stat-cap { text-align: left; }
  .p-mk__section .p-mk__voicewrap { margin-inline: calc(-1 * var(--space-24)); border-radius: 0; padding-block: var(--space-32); }
  .p-mk__voices { gap: var(--space-16); }
}
.p-mk__voice { display: flex; align-items: center; gap: var(--space-8); }
.p-mk__voice-user { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
/* ご利用者アイコンの背景色は削除（画像はそのまま） */
.p-mk__voice-user img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 右側（吹き出しが左）のアバターは内向きに反転 */
.p-mk__voice--right .p-mk__voice-user img { transform: scaleX(-1); }
.p-mk__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-mk__voice-bubble::before { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 7px solid transparent; }
.p-mk__voice--left .p-mk__voice-bubble::before { left: -6px; transform: translateY(-50%); border-right-color: var(--container-white); border-left: 0; }
.p-mk__voice--right .p-mk__voice-bubble::before { right: -6px; transform: translateY(-50%); border-left-color: var(--container-white); border-right: 0; }
.p-mk__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に上書き） */

/* ============ メニュー（アイテム） ============ */
.p-mk__dish { display: flex; flex-direction: column; gap: var(--space-24); }
.p-mk__dish-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); text-align: center; }
.p-mk__dish-note { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }
.p-mk__setlabel { margin: 0; font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); text-align: center; }
.p-mk__set { display: flex; flex-direction: column; gap: var(--space-24); }
.p-mk__set + .p-mk__set { margin-top: var(--space-16); }

.p-mk__menu { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-24); row-gap: var(--space-40); }
.p-mk__item { display: flex; flex-direction: column; gap: var(--space-16); }
.p-mk__item-img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-16); overflow: hidden; background: var(--container-level1); }
.p-mk__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-mk__item-body { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.p-mk__item-name { margin: 0; font-weight: var(--fw-bold); font-size: 20px; line-height: 150%; letter-spacing: .04em; color: var(--text-default); }
.p-mk__item-vol { margin: 0; font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
.p-mk__item-prices { display: flex; flex-direction: column; gap: var(--space-4); }
.p-mk__price-row { display: flex; flex-direction: column; }
.p-mk__price-label { font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
.p-mk__price { display: flex; align-items: baseline; gap: var(--space-4); }
.p-mk__price-main { font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }
.p-mk__price-tax { font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
.p-mk__price-time { font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
.p-mk__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-mk__series-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-48); }
.p-mk__series { display: flex; flex-direction: column; gap: var(--space-32); }
.p-mk__series-h { margin: 0; font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; letter-spacing: .04em; color: var(--text-default); text-align: center; }
.p-mk__series-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }
.p-mk__series-logo { width: 111px; height: 111px; border-radius: var(--radius-8); object-fit: cover; }
.p-mk__series-name { margin: 0; font-weight: var(--fw-bold); font-size: 20px; line-height: 34px; letter-spacing: .04em; color: var(--text-secondary); text-align: center; width: 100%; }
.p-mk__series-desc { margin: 0; font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); width: 100%; }
/* シリーズ内サンプル（ベージュパネル） */
.p-mk__sample { background: var(--container-highlight); border-radius: var(--radius-24); padding: var(--space-32) var(--space-24) var(--space-48); display: flex; flex-direction: column; align-items: center; gap: var(--space-40); }
.p-mk__sample-card { width: 100%; display: flex; flex-direction: column; gap: var(--space-24); }
.p-mk__sample-row { display: flex; gap: var(--space-24); align-items: flex-start; }
.p-mk__sample-titles { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.p-mk__sample-name { margin: 0; font-weight: var(--fw-bold); font-size: 20px; line-height: 34px; letter-spacing: .04em; color: var(--text-default); }
.p-mk__sample-vol { margin: 0; font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
/* 商品の一例をご紹介: 見出し20px（副菜付きセットのcut-titleは対象外なのでsample内に限定） */
.p-mk__sample .p-mk__cut-title { font-size: 20px; line-height: 34px; }
/* SP専用: カードをブラウザ幅100% */
@media (max-width: 599px) {
  .p-mk__item-name { font-size: 16px; }   /* SP: 20 → 16 */
  .p-mk__section .p-mk__sample { margin-inline: calc(-1 * var(--space-24)); border-radius: 0; }
  .p-mk__price-main, .p-mk__price-tax { word-break: keep-all; }
}
.p-mk__sample-price { margin: 0; display: flex; align-items: baseline; gap: var(--space-4); }
.p-mk__sample-thumb { flex: 0 0 100px; width: 100px; height: 100px; border-radius: var(--radius-24); overflow: hidden; }
.p-mk__sample-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-mk__sample-line { width: 100%; height: 1px; margin: 0; border: 0; background: var(--divider-dashed); }
.p-mk__sample-desc { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }
/* +1day の図版 */
.p-mk__series-fig { width: 100%; aspect-ratio: 327 / 215; }
.p-mk__series-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ Section_Flow（注文の流れ） ============ */
.p-mk__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-mk__flow-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.p-mk__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-mk__flow-head { align-items: stretch; text-align: left; }
  .p-mk__flow-head .p-mk__hl { text-align: center; }
}
.p-mk__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 52px; }
.p-mk__step { position: relative; display: flex; align-items: center; gap: var(--space-24); }
.p-mk__step-illust { flex: 0 0 75px; width: 75px; height: 75px; display: grid; place-items: center; }
.p-mk__step-illust img { width: 100%; height: 100%; object-fit: contain; }
.p-mk__step-label { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
/* SP: ステップ間の下向き矢印（PCの右矢印を90°回転） */
.p-mk__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-mk__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-mk__step-no span { font-size: 14px; line-height: 22px; }
.p-mk__step-title { font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }

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

/* ---------------------------------------------------------------------
   タブレット（>=600）
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  /* 装飾レイアウトは大画面では中央寄せで固定幅に（子はabsoluteのため幅を明示） */
  .p-mk__pts { width: 420px; max-width: 100%; margin-inline: auto; align-self: center; }
  .p-mk__points { grid-template-columns: repeat(3, 1fr); }

  .p-mk__menu { column-gap: var(--space-64); row-gap: var(--space-64); }
  .p-mk__item { flex-direction: row; gap: var(--space-24); align-items: flex-start; }
  .p-mk__item-img { flex: 0 0 150px; width: 150px; height: 150px; aspect-ratio: auto; }
  .p-mk__item-body { flex: 1 1 0; }
  .p-mk__price-row { flex-direction: row; gap: var(--space-16); align-items: baseline; }

  .p-mk__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-mk__series-grid { grid-template-columns: 1fr 1fr; gap: var(--space-64); }
  .p-mk__sample-thumb { flex-basis: 120px; width: 120px; height: 120px; }
  .p-mk__series-fig { aspect-ratio: 504 / 331; }

  .p-mk__steps { flex-direction: row; justify-content: center; gap: var(--space-40); }
  .p-mk__step { flex: 1 1 0; flex-direction: column; text-align: center; gap: var(--space-24); }
  .p-mk__step-illust { flex-basis: auto; width: 200px; height: 200px; max-width: 100%; }
  .p-mk__step-label { align-items: center; text-align: center; }
  .p-mk__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-mk__section, .p-mk__flow { border-radius: var(--radius-40); padding: var(--space-64); }
  .p-mk__voicewrap, .p-mk__sample { border-radius: var(--radius-40); }
  .p-mk__sample { padding: var(--space-32) var(--space-64) var(--space-64); }
}

/* ---------------------------------------------------------------------
   デスクトップ（>=1024）
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-mk__voice-t { font-size: 14px; }
  .p-mk__stat-img { max-width: 832px; }   /* PC: 累計供給食数バナーを832px幅に */
  .p-mk__hero { padding-top: var(--space-64); }
  .p-mk__hero-img { aspect-ratio: 1200 / 400; border-radius: var(--radius-40); }
  .p-mk__hero-title { width: 600px; padding: var(--space-32) var(--space-40); }
  .p-mk__hero-h { font-size: 40px; line-height: 58px; }

  .p-mk__intro { padding-block: var(--space-64) 0; }
  .p-mk__section, .p-mk__flow { margin-top: var(--space-40); gap: var(--space-64); }
  .p-mk__hl { font-size: 32px; line-height: 52px; }
  .p-mk__series-h { font-size: 24px; line-height: 38px; }

  /* Intro 3ポイント: デザイン準拠の横並び装飾レイアウト（1200基準・比率で流動） */
  .p-mk__pts {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    aspect-ratio: 1200 / 262;
  }
  .p-mk__pt {
    width: 27.5%;      /* 330 / 1200 */
    height: 68.7%;     /* 180 / 262 */
    aspect-ratio: auto;
    max-width: none;
    justify-content: center;   /* テキストを縦中央に（%パディングはコンテナ幅基準なので要素幅の約2割≒コンテナの約5.5%） */
    padding: 0 5.3% 0 5.6%;
  }
  .p-mk__pt--1 { left: 11.08%; top: 0.38%; }    /* 133 / 1   */
  .p-mk__pt--2 { left: 36.08%; top: 14.89%; }   /* 433 / 39  */
  .p-mk__pt--3 { left: 61.42%; top: 0; }        /* 737 / 0   */
  .p-mk__pt-title { font-size: 16px; line-height: 24px; }
  .p-mk__pt-text  { font-size: 16px; line-height: 26px; letter-spacing: 0; }

  /* 料理写真（散らし配置） */
  .p-mk__pt-food--dish { left: 33.14%; top: -6.1%; width: 9.71%; }  /* 約10px左  116.5幅 */
  .p-mk__pt-food--bowl { left: 58.86%; top: 51.95%; width: 8.33%; }  /* 706.3 / 136.1 100幅 */
  .p-mk__pt-food--rice { display: block; left: 82.94%; top: -5.34%; width: 8.33%; }  /* 995.3 / -14 100幅 */
  .p-mk__pt-tomato { display: none; }  /* PC はデザインどおり米飯写真に差し替え */

  /* 装飾線（ポイント2の左上） */
  .p-mk__pt-deco { left: 37.7%; top: -14.89%; width: 4.57%; }  /* 440.4 / -15.4 */

  /* マスコット（右下・右端に寄せる） */
  .p-mk__pt-mascot { left: auto; right: 0.5%; top: 39.36%; width: 276px; }  /* 合成画像。幅276px固定・右寄せで赤ちゃんを右端に維持 */
}