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

/* ============ Hero ============ */
.p-al__hero { position: relative; padding-top: var(--space-24); }
@media (max-width: 599px) { .p-al__hero { padding-top: 0; } }   /* SP: KV上部マージン削除 */
.p-al__hero-media { position: relative; max-width: 1200px; margin-inline: auto; }
.p-al__hero-img { width: 100%; aspect-ratio: 375 / 400; overflow: hidden; background: var(--container-level1); }
.p-al__hero-img img { width: 100%; height: 100%; display: block; }
.p-al__hero-title {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: min(82%, 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;
}
.p-al__hero-eyebrow { font-weight: var(--fw-bold); font-size: 14px; line-height: 22px; letter-spacing: .08em; color: var(--text-secondary); }
.p-al__hero-htext { display: flex; flex-direction: column; gap: var(--space-16); }
.p-al__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-al__hero-sub { margin: 0; font-weight: var(--fw-light); font-size: 16px; line-height: 26px; color: var(--text-default); }

/* ============ イントロ（3つのポイント＋マスコット） ============ */
.p-al__intro { padding-block: var(--space-48); display: flex; flex-direction: column; align-items: center; gap: var(--space-40); }
.p-al__intro-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.p-al__intro-title { margin: 0; font-weight: var(--fw-bold); font-size: 24px; line-height: 38px; letter-spacing: .04em; color: var(--text-secondary); }
.p-al__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-al__intro-head { align-items: stretch; text-align: left; }
  .p-al__intro-head .p-al__intro-title { font-size: 20px; text-align: center; }
}
/* Intro 3ポイント: 冷凍食品と同じ装飾レイアウト（SP=375基準・全幅ブリード） */
.p-al__pts { position: relative; margin: 0; padding: 0; width: 375px; max-width: 100vw; align-self: center; aspect-ratio: 375 / 560; }   /* SP: 375基準・中央固定（ワイドSPでも左右に散らない） */
/* ポイント: 白い雲形（ブロブ）＋テキスト（左寄せ） */
.p-al__pt { position: absolute; z-index: 1; width: 270px; max-width: none; aspect-ratio: 330 / 230; background: url(../img/frozen-point-blob.svg) center / 100% 100% no-repeat; display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); padding: 5% 10% 5% calc(16% - 10px); text-align: left; }
.p-al__pt--1 { left: -2%; top: 0; }
.p-al__pt--2 { right: 0; top: 27%; }
.p-al__pt--3 { left: -3%; top: 52%; }
/* 料理写真（散らし配置・トリミングなし） */
.p-al__pt-food { display: block; position: absolute; z-index: 2; width: 26%; height: auto; }
.p-al__pt-food--pasta { left: 64%; top: 13%; }         /* 一番上 */
.p-al__pt-food--bread { left: 8%;  top: 33%; }        /* 中段 */
.p-al__pt-food--soup  { left: 66%; top: 57%; }
/* キラキラ装飾（パンの左下） */
.p-al__pt-sparkle { display: block; position: absolute; z-index: 2; left: 2%; top: 46%; width: 8%; height: auto; }
/* マスコット（下部・吹き出し付き） */
.p-al__mascot { position: absolute; z-index: 2; right: 4%; top: 74%; width: 73%; height: auto; }
.p-al__pt-title { margin: 0; font-weight: var(--fw-bold); font-size: 14px; line-height: 22px; color: var(--text-default); }
.p-al__pt-text { margin: 0; font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }

/* ============ Section01: 取り扱い商品（白カード・緑ハイライト） ============ */
.p-al__section { background: var(--container-white); margin-top: 0; padding: var(--space-48) var(--space-24); display: flex; flex-direction: column; gap: var(--space-40); }
.p-al__section-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.p-al__note { margin: 0; font-weight: var(--fw-light); font-size: 12px; line-height: 18px; letter-spacing: .04em; color: var(--text-default); }
.p-al__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-al__menu { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-24); row-gap: var(--space-40); }
.p-al__item { display: flex; flex-direction: column; gap: var(--space-16); }
.p-al__item-img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-24); overflow: hidden; }
.p-al__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-al__item-body { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.p-al__item-head { display: flex; flex-direction: column; gap: var(--space-4); }
.p-al__item-name { margin: 0; font-weight: var(--fw-bold); font-size: 20px; line-height: 150%; letter-spacing: .04em; color: var(--text-default); }
/* 容量（商品名末尾から切り出し・PC/SP共通14px） */
.p-al__item-vol { margin: 0; font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: .04em; color: var(--text-default); }

/* 価格ブロック: 容量＋単価 */
.p-al__price { display: flex; flex-direction: column; gap: var(--space-4); }
.p-al__price-label { font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }
.p-al__price-val { display: flex; align-items: baseline; gap: var(--space-4); }
.p-al__price-main { font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }
.p-al__price-tax { font-weight: var(--fw-light); font-size: 14px; line-height: 22px; letter-spacing: .04em; color: var(--text-default); }

/* ============ Section_Flow（注文の流れ） ============ */
.p-al__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-al__flow-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.p-al__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-al__flow-head { align-items: stretch; text-align: left; }
  .p-al__flow-head .p-al__hl { text-align: center; }
  /* SP: 3つ目の吹き出しだけ高さ220px固定（テキスト量に合わせる。width/height両指定でaspect-ratioは無効） */
  .p-al__pt--3 { height: 220px; }
  /* SP: 商品名は16px */
  .p-al__item-name { font-size: 16px; }
}
.p-al__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 52px; }
.p-al__step { position: relative; display: flex; align-items: center; gap: var(--space-24); }
.p-al__step-illust { flex: 0 0 75px; width: 75px; height: 75px; display: grid; place-items: center; }
.p-al__step-illust img { width: 100%; height: 100%; object-fit: contain; }
.p-al__step-label { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
/* SP: ステップ間の下向き矢印（PCの右矢印を90°回転） */
.p-al__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-al__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-al__step-no span { font-size: 14px; line-height: 22px; }
.p-al__step-title { font-weight: var(--fw-bold); font-size: 16px; line-height: 24px; color: var(--text-default); }

.p-al__btn { width: 100%; align-self: center; }
@media (min-width: 600px) { .p-al__btn { width: 280px; } }

/* ---------------------------------------------------------------------
   タブレット（>=600）: 3カラム理由・ステップ横並び
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  /* SP装飾レイアウトはタブレットでは中央寄せの固定幅に */
  .p-al__pts { width: 420px; max-width: 100%; margin-inline: auto; align-self: center; }
  .p-al__steps { flex-direction: row; justify-content: center; gap: var(--space-40); }
  .p-al__step { flex: 1 1 0; flex-direction: column; text-align: center; gap: var(--space-24); }
  .p-al__step-illust { flex-basis: auto; width: 200px; height: 200px; max-width: 100%; }
  .p-al__step-label { align-items: center; text-align: center; }
  .p-al__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-al__section, .p-al__flow { border-radius: var(--radius-40); padding: var(--space-64); }
}

/* ---------------------------------------------------------------------
   デスクトップ（>=1024）: 商品は画像左＋本文右・2段価格＋調理時間
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-al__hero { padding-top: var(--space-64); }
  .p-al__hero-img { aspect-ratio: 1200 / 400; border-radius: var(--radius-40); }
  .p-al__hero-title { width: 600px; padding: var(--space-32) var(--space-40); }
  .p-al__hero-htext { gap: 20px; }
  .p-al__hero-h { font-size: 40px; line-height: 58px; }

  .p-al__intro { padding-block: var(--space-64) 0; }
  /* Intro 3ポイント: デザイン準拠の装飾レイアウト（1200基準・比率で流動） */
  .p-al__pts { display: block; position: relative; width: 100%; max-width: 1200px; margin-inline: auto; aspect-ratio: 1200 / 350; }
  .p-al__pt { position: absolute; width: 27.5%; height: 65.71%; aspect-ratio: auto; max-width: none; align-items: center; text-align: center; padding: 0 3.4%; gap: var(--space-8); }
  .p-al__pt-title { font-size: 16px; line-height: 24px; }
  .p-al__pt-text { font-size: 16px; line-height: 26px; letter-spacing: 0; }
  .p-al__pt--1 { left: 11.08%; top: 1.71%; }
  .p-al__pt--2 { left: 36.08%; right: auto; top: 9.14%; }
  .p-al__pt--3 { left: 61.42%; top: 0; }
  .p-al__pt-food { display: block; position: absolute; width: 8.33%; height: auto; }   /* 100 / 1200 */
  .p-al__pt-food--bread { left: 14.25%; top: 54.3%; }   /* 左下（ポイント1の下） */
  .p-al__pt-food--pasta { left: 34%; top: 0; }          /* 上中央（ポイント2の左上） */
  .p-al__pt-food--soup  { left: 58%; top: 54.3%; }      /* 右下（ポイント2〜3の下） */
  .p-al__pt-sparkle { left: 11.4%; top: 60%; width: 2.67%; }   /* 32 / 1200・パンの左 */
  .p-al__mascot { position: absolute; left: 73.17%; right: auto; top: 38.86%; width: 23.08%; height: auto; }   /* 758,192,277 基準 */
  .p-al__section, .p-al__flow { gap: var(--space-64); }
  .p-al__flow { margin-top: var(--space-40); }
  .p-al__hl { font-size: 32px; line-height: 52px; }

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