@charset "UTF-8";

/*
  サービス紹介ページ リニューアル版 専用スタイル
  OISIX_TASK_REQUEST-4598 / 8-27UP（初回はデリのみ）

  読み込み元 : kounyuu/oic_intro_shinki_service_deli_a.html（?dev=true のときのみ）
  対象マークアップ : kounyuu/include/inc_oic_intro_shinki_service_deli_renewal.jsp

  【方針】
  - shinki.css の .shinki-service-course__* は現行の兄弟5ページ
    （service / kit / chanto / babyandkids / healthcare）と共有のため触らない。
    このファイルは .service-lp__* の新規プレフィックスで完全に分離する。
  - 初回はデリ専用だが、デザイン流用でサービス横展開する想定のため、
    プレフィックスはサービス非依存にし、色だけ modifier で切り替える。
    横展開時は body 側で <article class="service-lp -chanto"> のように付け替え、
    このファイル自体は1本のまま使う。
  - 色は css/design-tokens.css の Semantic トークン
    （--text-* / --surface-* / --object-* / --border-*）、
    余白・角丸は Primitive（--spacing-N / --radius-*）を使う。
    生の値の直書きは、デザインが意図した一点物のときだけ。
  - このページは smart/base/head_info.jsp を通るのでトークンは読み込み済み。

  【重要／共通CSSの要素セレクタに注意】
  common.css のリセットが要素セレクタで直接あててくる。要素セレクタは「継承」より強いため、
  親に font-size を書いても子の p / span / strong / mark には効かない。
      p, span, strong, mark, a ... { color: #333; font-size: 1rem; }  ← html は font-size:12px
      mark { background-color: #ff9; color: #000; font-style: italic; font-weight: 700; }
      a { font-size: 1rem; }   * > a { font-size: 1em; }
  → **新しく使う要素には font-size / color / font-style / font-weight を対象要素に明示的に書く**。
     文脈で変わる値は inherit を明示する（例: .service-lp__em-cold { font-size: inherit })。

  【レスポンシブ】※最終デザインfix後に調整する
  - SPメイン。コンテンツ幅の上限 750px は visitor_shinki.css の
    `@media (min-width:750px) { .visitor { width: 750px !important } }` で既に効いている。
  - ブレイクポイントは 750px の1本だけにする（新規トップ shinki_domo_a.css と同じ）。
      @media screen and (min-width: 750px) { ... }
  - 375〜750px はコンテナが可変。サイズはセクション単位の変数（--fv-* など）に持たせ、
    PCブロックでは変数の上書きだけで済むようにする。
  - 相対値は clamp(min, calc(Xvw + Ypx), max) 形式で書く（新規トップに合わせる）。
*/

/* ---------------------------------------------------------------
   ルート ／ サービス別アクセントカラー
   --lp-accent 経由で参照する。個別の --color-* を直接書かない。
   --------------------------------------------------------------- */
.service-lp {
  --lp-accent: var(--color-primary);
  --lp-marker: var(--color-primary); /* 見出しのマーカー帯 */
  --lp-side: clamp(24px, 6.4vw, 48px); /* 左右余白 SP24 / PC48 */
  /* セクション見出しビジュアルと直下コンテンツの間。全セクション共通 SP40 / PC56 */
  --lp-heading-gap: clamp(40px, calc(4.2667vw + 24px), 56px);
  --lp-text: #1A1A1A; /* デザイン指定の本文色。--text-neutral-primary(#333) とは別 */

  color: var(--text-neutral-primary);
}

/* 左右のヒゲ飾り。
   画像 oic_intro_shinki_ico_accent.jpg は 146x89 の横長。90度回して縦向きで使うため、
   ボックスは縦横を入れ替えて確保し、中の画像は中央基準で回す
   （transform はレイアウトに影響しないので、箱を自分で用意しないと隙間がずれる）。
   --lp-hige-length が回転後の「縦の長さ」になる。 */
.service-lp {
  --lp-hige-angle: -90deg;
  --lp-hige-length: clamp(108px, 28.8vw, 216px);
  --lp-hige-inset: clamp(8px, 2.1333vw, 16px);
}

/* 高さを 0 にして、見出し行の高さを文字だけで決めるようにする。
   画像は絶対配置＋中央基準なので、高さ0でも行の中央に描画される。
   （height を入れるとヒゲの高さぶん行が伸び、下の「とは？」との間が開く） */
.service-lp__hige {
  position: relative;
  display: inline-block;
  width: calc(var(--lp-hige-length) * 89 / 146);
  height: 0;
  line-height: 0;
  flex-shrink: 0;
}

.service-lp__hige img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--lp-hige-length);
  /* .service-lp img の max-width:100% を打ち消す。
     回転前は親より横長になるため、これが無いと親幅で切られる */
  max-width: none;
  height: auto;
}

/* 画像に余白が含まれるぶん、マイナスマージンで文字側に寄せる。
   gap はマイナスを取れないのでこちらで調整する */
.service-lp__hige.-left {
  margin-right: calc(var(--lp-hige-inset) * -1);
}

.service-lp__hige.-right {
  margin-left: calc(var(--lp-hige-inset) * -1);
}

.service-lp__hige.-left img {
  transform: translate(-50%, -50%) rotate(var(--lp-hige-angle));
}

/* 右は反転させたうえで、左と鏡合わせになる向きに回す */
.service-lp__hige.-right img {
  transform: translate(-50%, -50%) scaleX(-1) rotate(var(--lp-hige-angle));
}

/* 注記まわり。common.css の要素リセットに負けないよう font-size を明示する */
.service-lp__note {
  font-size: 10px;
  font-weight: 400;
}

.service-lp__note-mark {
  font-size: 0.65em;
  vertical-align: super;
}

.service-lp.-deli {
  --lp-accent: var(--color-deli);
  --lp-marker: #F2D249; /* FV見出しの帯。トークン・shinki.css に該当なしのデザイン指定値 */
}

.service-lp.-chanto {
  --lp-accent: var(--color-chanto);
}

/* 横展開時に追加する（kit / babyandkids / healthcare は専用カラー未定義のため既定値を使用）
.service-lp.-kit {}
.service-lp.-babyandkids {}
.service-lp.-healthcare {}
*/

.service-lp img {
  max-width: 100%;
}

/* 各セクションの見出しビジュアル。画像1枚だけを h2 で囲っている。
   見出しの文言は img の alt が担う */
.service-lp__visual-heading {
  margin: 0;
  line-height: 0;
}

/* ---------------------------------------------------------------
   共通CTA「おためしセット」
   02 / 05 / 09 の3箇所で使う。JSP 側は c:set var="cta_otameshi" で1度だけ定義。
   デザインは1枚画像だが、サムネイル以外はコーディングで組んでいる。
   --------------------------------------------------------------- */
.service-lp__cta {
  /* PC調整はこの変数の上書きだけで済ませる */
  --cta-catch-size: clamp(14px, calc(2.6667vw + 4px), 24px);
  --cta-label-size: clamp(18px, calc(3.4667vw + 5px), 31px);
  --cta-thumb-width: clamp(78px, calc(14.6667vw + 23px), 133px);
  --cta-label-sub-ratio: 0.75; /* 「の」「を」の縮小率 */
  --cta-arrow-length: clamp(10px, calc(1.6vw + 4px), 16px); /* ▶ の横方向の長さ SP10 / PC16 */
  --cta-arrow-half: clamp(8px, calc(1.8667vw + 1px), 15px);  /* ▶ の縦half SP8 / PC15。length より大きいほど尖って見える */
  --cta-pad-y: clamp(12px, 3.2vw, 24px); /* ボタン本体の上下 padding SP12 / PC24 */
  --cta-ring: clamp(3px, calc(0.5333vw + 1px), 5px); /* 白ボーダー SP3 / PC5 */
  --cta-pad-bottom: 15px; /* ボタン下の padding。下の合計余白から差し引く */
  --cta-gap-bottom: clamp(71px, calc(7.7333vw + 42px), 100px); /* ボタン下端〜次コンテンツの合計 SP71 / PC100 */

  /* デザイン指定はボタン下端からの合計値なので、padding 分を引いた残りを margin にする */
  margin: 0 0 calc(var(--cta-gap-bottom) - var(--cta-pad-bottom));
  padding: clamp(13px, calc(7.2vw - 14px), 40px) clamp(28px, 7.4667vw, 56px) var(--cta-pad-bottom); /* ボタン上 SP13 / PC40 */
  text-align: center;
}

/* メニュー（03）直後の CTA だけ、スライダーとの間隔をデザイン指定に合わせる。
   .service-lp__menu 側に padding-bottom を持たせず CTA の padding だけで作ることで、
   マージン相殺の影響を受けずに「この値＝見た目の余白」になる。
   他の3箇所（02 / 05 / 08 の後）は既定の上 padding のまま */
.service-lp__menu + .service-lp__cta {
  padding-top: clamp(13px, calc(20vw - 62px), 88px); /* SP13 / PC88 */
}

.service-lp__cta-catch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(4px, calc(2.1333vw - 4px), 12px); /* SP4 / PC12 */
  color: #D33A20; /* デザイン指定値 */
  font-size: var(--cta-catch-size);
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0.56px;
}

/* ＼ ／ の飾り。画像に依存させず CSS で描く */
.service-lp__cta-catch::before,
.service-lp__cta-catch::after {
  content: '';
  width: 2px;
  height: 20px;
  background: currentColor;
}

.service-lp__cta-catch::before {
  transform: rotate(-30deg);
}

.service-lp__cta-catch::after {
  transform: rotate(30deg);
}

/* common.css が a に color/font-size を直接あてるため、ここで明示的に上書きする */
.service-lp__cta-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* max-width を付けるので中央寄せは margin auto で行う */
  max-width: 560px;
  min-height: 78px;
  margin: 0 auto;
  padding: var(--cta-pad-y) 44px var(--cta-pad-y) 40px;
  border-radius: var(--radius-medium); /* 16px */
  background: #D33A20; /* デザイン指定値 */
  color: #FFF;
  font-size: var(--cta-label-size);
  text-decoration: none;
  box-shadow: 0 0 0 var(--cta-ring) #FFF, 0 0 8px 2px rgba(0, 0, 0, 0.22);
}

/* 箱はボタンの左端から 17px はみ出す（デザイン実測） */
.service-lp__cta-thumb {
  position: absolute;
  top: 50%;
  left: clamp(-50px, calc(-6.9333vw + 2px), -24px); /* SP-24 / PC-50 */
  width: var(--cta-thumb-width);
  height: auto;
  transform: translateY(-50%);
}

.service-lp__cta-label {
  color: #FFF;
  font-size: var(--cta-label-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.72px;
}

/* 「の」「を」だけ一段小さく。em 指定なので親のサイズに追従する */
.service-lp__cta-label-sub {
  color: inherit;
  font-size: calc(1em * var(--cta-label-sub-ratio));
  font-weight: inherit;
}

/* 右端の ▶。縦に長い二等辺三角形にする（正三角形に見えないよう縦を長く） */
.service-lp__cta-link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 0;
  height: 0;
  border-width: var(--cta-arrow-half) 0 var(--cta-arrow-half) var(--cta-arrow-length);
  border-style: solid;
  border-color: transparent transparent transparent #FFF;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------
   追従CTA
   Kit ページと同じ位置づけだが、デリ版は1行・価格表記なし。
   --------------------------------------------------------------- */
.service-lp__fixed-cta {
  /* PC調整はこの変数の上書きだけで済ませる */
  --fixed-cta-height: 66px; /* SP / PC 共通 */
  --fixed-cta-thumb: 56px;  /* SP / PC 共通 */
  --fixed-cta-label-size: clamp(14px, calc(0.5333vw + 12px), 16px);
  --fixed-cta-catch-size: clamp(12px, calc(0.5333vw + 10px), 14px);
  --fixed-cta-catch-pad: clamp(4px, calc(0.5333vw + 2px), 6px);
  --fixed-cta-catch-overlap: 8px; /* 吹き出しをボタンに被せる量。domo21・Kitページと同じ見せ方 */
  --fixed-cta-color: #D2371D; /* デザイン指定値 */

  position: fixed;
  bottom: 16px;
  left: 50%;
  z-index: 900;
  box-sizing: border-box;
  width: calc(100% - 16px * 2);
  max-width: 480px;
  transform: translateX(-50%);
  text-align: center;
}

.service-lp__fixed-cta-catch {
  position: relative;
  /* ボタンより前面に置く。link が position:relative かつ DOM 順で後なので z-index が必要 */
  z-index: 1;
  display: inline-block;
  margin: 0 0 calc(var(--fixed-cta-catch-overlap) * -1);
  padding: var(--fixed-cta-catch-pad) 20px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--fixed-cta-color);
  font-size: var(--fixed-cta-catch-size);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.56px;
}

/* 吹き出しの下向き三角 */
.service-lp__fixed-cta-catch::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
}

/* common.css が a に color/font-size を直接あてるため明示的に上書きする */
.service-lp__fixed-cta-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: var(--fixed-cta-height);
  padding: 0 24px;
  border-radius: var(--radius-full);
  background: var(--fixed-cta-color);
  color: #FFF;
  font-size: var(--fixed-cta-label-size);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.service-lp__fixed-cta-thumb {
  flex-shrink: 0;
  width: var(--fixed-cta-thumb);
  height: var(--fixed-cta-thumb);
}

.service-lp__fixed-cta-label {
  position: absolute;
  left: 50%;
  color: #FFF;
  font-size: var(--fixed-cta-label-size);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14px;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ▶。絶対配置ではなく flex アイテムにして、右端に張り付かないようにする */
.service-lp__fixed-cta-link::after {
  content: '';
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-width: 6px 0 6px 9px;
  border-style: solid;
  border-color: transparent transparent transparent #FFF;
}

/* 480px 以上は「サムネ＋テキスト＋▶」を中央にまとめる。テキストは1行。
   ここだけ 750px ではなく 480px。1行に戻しても収まる幅がこのあたりのため */
@media screen and (min-width: 480px) {
  .service-lp__fixed-cta-link {
    justify-content: center;
    gap: 8px;
    padding: 0 8px 0 0;
  }

  .service-lp__fixed-cta-label {
    position: static;
    line-height: 1.8;
    letter-spacing: 0.64px;
    transform: none;
  }

  .service-lp__fixed-cta-br {
    display: none;
  }

  .service-lp__fixed-cta-link::after {
    margin-left: 12px; /* gap 8px と合わせてデザインの 20px にする */
  }
}

/* ---------------------------------------------------------------
   01. FV
   見出しは画像の下部に重なる。画像の高さが変わっても崩れないよう
   FV の下端を基準に配置する。
   --------------------------------------------------------------- */
.service-lp__fv {
  /* 値は SP375 / PC750 の Figma 実測。clamp でその間を補間する */
  --fv-title-width: clamp(313px, 83.4667vw, 626px);
  --fv-title-bottom: clamp(37px, calc(6.6667vw + 12px), 62px);
  --fv-title-font-size: clamp(28px, 7.4667vw, 56px);
  --fv-title-line-height: clamp(40px, 10.6667vw, 80px);
  --fv-title-gap: clamp(4px, 1.0667vw, 8px);
  --fv-title-padding: clamp(12px, 3.2vw, 24px);
  --fv-title-tracking: clamp(1.12px, 0.2987vw, 2.24px);
  --fv-title-radius: clamp(4px, 1.0667vw, 8px);

  position: relative;
  padding-bottom: clamp(64px, calc(14.9333vw + 8px), 120px);
}

/* FV は video。img と同じ扱いでよいのでまとめて指定する */
.service-lp__fv-media {
  display: block;
  width: 100%;
  height: auto;
  /* ブラウザの拡大縮小で高さが小数になると、動画フレームと要素の箱に端数のズレが生じ、
     letterbox 部分（動画レイヤーの下地＝黒）が細い線として覗くことがある。
       aspect-ratio : 箱の高さをCSS側で確定させる（メタデータ読込前のCLSも防げる）
       object-fit   : video の既定は contain＝letterbox が出るので cover にして必ず埋める
       background   : それでも端が覗いた場合に黒ではなく地色になるようにする保険
     実寸 750x870（ポスター画像と同一比） */
  aspect-ratio: 750 / 870;
  background: #FFF;
  object-fit: cover;
}

.service-lp__fv-title {
  position: absolute;
  bottom: var(--fv-title-bottom);
  left: 50%;
  width: var(--fv-title-width);
  max-width: calc(100% - var(--lp-side) * 2);
  margin: 0 0 0 3px;
  transform: translateX(-50%);
}

.service-lp__fv-title-line {
  display: block;
  width: fit-content;
  margin-top: var(--fv-title-gap);
  padding: 0 var(--fv-title-padding);
  /* letter-spacing は最終文字の後ろにも入るので、その分だけ右を詰める */
  padding-right: calc(var(--fv-title-padding) - var(--fv-title-tracking));
  border-radius: var(--fv-title-radius);
  /* 下地の黄色 ＋ QA見出しと同じ紙目テクスチャ。
     白いノイズが一様に乗った PNG（750x200）なので、等倍のまま repeat で敷く */
  background-color: var(--lp-marker);
  background-image: url(../../shared/img/2636/oic_intro_shinki_service_bg_pattern.png);
  color: #4F4E4E; /* デザイン指定値 */
  font-size: var(--fv-title-font-size);
  font-weight: 500;
  line-height: var(--fv-title-line-height);
  letter-spacing: var(--fv-title-tracking);
  /* 「、」「！」の全角アキを半角に詰める。これが無いと行末に約0.5em の空きが残る */
  font-feature-settings: 'halt' 1;
}

.service-lp__fv-title-line:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   02. リード
   --------------------------------------------------------------- */
.service-lp__lead {
  /* PC調整はこの変数の上書きだけで済ませる */
  --lead-title-sub-gap: 0px; /* 「とは？」の上余白。詰めたいときはマイナス値 */
  --lead-title-main-size: clamp(38px, 10.1333vw, 76px);
  --lead-title-sub-size: clamp(18px, 4.8vw, 36px);
  --lead-text-size: clamp(16px, calc(2.1333vw + 8px), 24px);
  --lead-text-tracking: clamp(0.64px, calc(0.0853vw + 0.32px), 0.96px);

  padding-bottom: 24px; /* SP/PC共通 */
  text-align: center;
}

/* common.css の body は verdana 先頭なので、放っておくと
   「Oisix」だけ Verdana、「デリ」だけヒラギノ になりデザインの一書体感が出ない。
   ラテンも和文ゴシックで描かせ、太さもデザインに寄せる。 */
.service-lp__lead-title {
  margin: 0;
  padding: 0 var(--lp-side);
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  line-height: 1.4;
}


.service-lp__lead-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.service-lp__lead-title-main {
  font-size: var(--lead-title-main-size);
  font-weight: 600; /* ヒラギノ角ゴシック W8 相当。デザインの太ゴシックに寄せる */
}

.service-lp__lead-title-sub {
  display: block;
  margin-top: var(--lead-title-sub-gap);
  font-size: var(--lead-title-sub-size);
  font-weight: 800;
}

.service-lp__lead-text {
  margin: 0;
  padding: 8px var(--lp-side);
  color: var(--lp-text);
  font-size: var(--lead-text-size);
  font-weight: 500;
  line-height: 2;
  letter-spacing: var(--lead-text-tracking);
  font-feature-settings: 'halt' 1;
}

/* マーカー線。text-decoration の太さ指定より描画が安定するので背景グラデーションで引く。
   common.css の `mark { background-color:#ff9; color:#000; font-style:italic; font-weight:700 }`
   を全部打ち消す必要がある */
.service-lp__marker {
  background: linear-gradient(to top, var(--lp-marker) 0.5em, transparent 0.5em);
  color: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
}

/* 冷凍との差別化キーワード。デザイン上は色替えのみなので太字にはしない。
   font-size を書かないと common.css の `strong { font-size:1rem }`(=12px) に落ちる */
.service-lp__em-cold {
  color: #3DADFF; /* デザイン指定値 */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ---- お届けの流れ（週1で届く → すぐ食卓へ）。1枚画像 ---- */
.service-lp__lead-figure {
  margin: var(--spacing-16) 0 0;
}

.service-lp__lead-figure-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   03. メニュー紹介（全400種類以上 / 主菜例・副菜例）
   商品スライドは画面右端まではみ出して横スクロールする。
   --------------------------------------------------------------- */
.service-lp__menu {
  /* PC調整はこの変数の上書きだけで済ませる */
  --menu-title-size: clamp(20px, calc(4vw + 5px), 35px);
  --menu-title-tracking: clamp(0.8px, calc(0.16vw + 0.2px), 1.4px);
  --menu-text-size: clamp(14px, calc(1.6vw + 8px), 20px);
  --menu-text-tracking: clamp(0.56px, calc(0.064vw + 0.32px), 0.8px);
  --menu-label-size: clamp(10px, calc(1.0667vw + 6px), 14px);
  --menu-category-title-size: clamp(16px, 4.2667vw, 32px);
  --menu-category-text-size: clamp(12px, calc(1.6vw + 6px), 18px);
  --menu-tag-label-size: 10px; /* PC も同値 */
  --menu-item-width: clamp(150px, calc(13.3333vw + 100px), 200px);
  --menu-item-name-size: clamp(12px, calc(1.0667vw + 8px), 16px);
  --menu-item-name-pad-y: clamp(8px, calc(1.0667vw + 4px), 12px);
  --menu-item-name-pad-x: clamp(12px, calc(1.0667vw + 8px), 16px);
  --menu-category-head-gap: clamp(4px, 1.0667vw, 8px);

  color: var(--lp-text);
}

.service-lp__menu-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__menu-intro {
  padding: 0 var(--lp-side);
  /* このセクションだけ見出しビジュアルとの間を詰める（デザイン指定 最大24px） */
  margin-top: clamp(16px, calc(2.1333vw + 8px), 24px);
}

.service-lp__menu-title {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--menu-title-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--menu-title-tracking);
  font-feature-settings: 'halt' 1;
}

.service-lp__menu-text {
  margin: var(--spacing-16) 0 0;
  color: var(--lp-text);
  font-size: var(--menu-text-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: var(--menu-text-tracking);
  font-feature-settings: 'halt' 1;
}

/* 段落間はデザインどおり1行ぶん空ける */
.service-lp__menu-text + .service-lp__menu-text {
  margin-top: 1.4em; /* SP/PC共通 */
}

/* ---- 商品カテゴリー ---- */
.service-lp__menu-categories {
  margin: clamp(16px, calc(12.8vw - 32px), 64px) 0 0; /* リード文との間 SP16 / PC64 */
  padding: 0;
  list-style: none;
}

.service-lp__menu-category + .service-lp__menu-category {
  margin-top: clamp(40px, calc(6.4vw + 16px), 64px); /* スライダーセクション間 SP40 / PC64 */
}

.service-lp__menu-category-head {
  padding: 0 var(--lp-side);
  text-align: center;
}

.service-lp__menu-category-label {
  display: inline-block;
  margin: 0;
  padding: 2px 12px;
  border-radius: var(--radius-full);
  background: #1A8952; /* デザイン指定値 */
  color: #FFF;
  font-size: var(--menu-label-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.4px;
  font-feature-settings: 'halt' 1;
}

/* 副菜は黄色ベース */
.service-lp__menu-category-label.-side {
  background: #F2D249; /* デザイン指定値 */
  color: #1A1A1A; /* デザイン指定値 */
}

.service-lp__menu-category-title {
  margin: var(--menu-category-head-gap) 0 0;
  color: var(--lp-text);
  font-size: var(--menu-category-title-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.64px;
  font-feature-settings: 'halt' 1;
}

/* カテゴリ2・3 の見出しはデザイン上 字間が狭い */
.service-lp__menu-category-title.-narrow {
  letter-spacing: 0.16px;
}

.service-lp__menu-category-text {
  margin: var(--menu-category-head-gap) 0 0;
  color: var(--lp-text);
  font-size: var(--menu-category-text-size);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.48px;
  font-feature-settings: 'halt' 1;
}

/* ---- 特徴タグ ---- */
.service-lp__menu-tags {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: clamp(12px, calc(2.1333vw + 4px), 20px) 0 0; /* 上の本文との間 SP12 / PC20 */
  list-style: none;
}

.service-lp__menu-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
}

.service-lp__menu-tag + .service-lp__menu-tag {
  border-left: 1px solid #000; /* デザイン指定値 */
}

/* Figma のアノテーションで指定された専用アイコン */
.service-lp__menu-tag-icon {
  display: block;
  width: 64px;
  height: 32px;
  object-fit: contain;
}

.service-lp__menu-tag-label {
  color: #333;
  font-size: var(--menu-tag-label-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.4px;
  font-feature-settings: 'palt' 1;
  text-align: center;
}

/* ---- 商品スライド（横スクロール）---- */
.service-lp__menu-items {
  display: flex;
  gap: var(--spacing-16); /* 16px */
  /* 左のインセットは padding ではなく margin で取る。
     スクロールバーの軌道はスクロールコンテナの幅いっぱいに引かれるため、
     padding-left だとバーがページ端から始まり1枚目のカードと揃わない */
  margin: 32px 0 0 var(--lp-side); /* 上=見出しブロックとの間。SP/PC共通 */
  /* 下 padding はカード下端とスクロールバーの間の余白 SP12 / PC16 */
  padding: 0 var(--spacing-16) clamp(12px, calc(1.0667vw + 8px), 16px) 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* タグアイコンが無いカテゴリ（副菜）は見出しとスライダーの間を詰める。
   :has が効かない環境では既定の 32px のまま＝見た目が崩れないフォールバックになる */
.service-lp__menu-category-head:not(:has(.service-lp__menu-tags)) + .service-lp__menu-items {
  margin-top: 16px;
}

.service-lp__menu-item {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--menu-item-width);
}

.service-lp__menu-item-img {
  display: block;
  width: 100%;
  /* height 属性がプレゼンテーションヒントとして効くと縦横が両方確定して
     aspect-ratio が無視されるため、明示的に auto に戻す */
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  object-fit: cover;
}

.service-lp__menu-item-name {
  flex: 1;
  margin: 0;
  padding: var(--menu-item-name-pad-y) var(--menu-item-name-pad-x);
  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  background: #FFFADC; /* デザイン指定値 */
  color: var(--lp-text);
  font-size: var(--menu-item-name-size);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.48px;
  font-feature-settings: 'halt' 1;
}

/* ---------------------------------------------------------------
   04. REASON 01-03（冷蔵ならでは）
   写真はカードの左右パディングを打ち消してカード幅いっぱいに敷く。
   --------------------------------------------------------------- */
.service-lp__reason {
  /* PC調整はこの変数の上書きだけで済ませる */
  --reason-side: clamp(24px, calc(13.3333vw - 26px), 74px); /* カード外側の余白 SP24 / PC74 */
  --reason-pad-x: clamp(24px, calc(4.2667vw + 8px), 40px);
  --reason-pad-top: clamp(20px, 5.3333vw, 40px);
  --reason-pad-bottom: clamp(32px, calc(6.4vw + 8px), 56px);
  --reason-inner-gap: clamp(16px, 2.1333vw, 24px);
  --reason-label-size: clamp(10px, calc(1.0667vw + 6px), 14px);
  --reason-title-size: clamp(20px, calc(3.2vw + 8px), 32px);
  --reason-title-tracking: clamp(0.8px, calc(0.128vw + 0.32px), 1.28px);
  --reason-text-size: clamp(14px, calc(1.6vw + 8px), 20px);
  --reason-text-tracking: clamp(0.56px, calc(0.064vw + 0.32px), 0.8px);
  --reason-figure-height: clamp(150px, calc(23.7333vw + 61px), 239px);

  padding-bottom: clamp(56px, calc(11.7333vw + 12px), 100px); /* SP56 / PC100 */
}

.service-lp__reason-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__reason-list {
  margin: var(--lp-heading-gap) 0 0;
  padding: 0 var(--reason-side);
  list-style: none;
}

.service-lp__reason-item {
  padding: var(--reason-pad-top) var(--reason-pad-x) var(--reason-pad-bottom);
  border-radius: var(--radius-medium);
  background: #FFFADC; /* デザイン指定値 */
  overflow: hidden;
  text-align: center;
}

.service-lp__reason-item + .service-lp__reason-item {
  margin-top: var(--spacing-24); /* 24px */
}

.service-lp__reason-label {
  display: inline-block;
  margin: 0;
  padding: 2px 12px;
  border-radius: var(--radius-full);
  background: #1A8952; /* デザイン指定値 */
  color: #FFF;
  font-size: var(--reason-label-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.4px;
  font-feature-settings: 'halt' 1;
}

.service-lp__reason-title {
  margin: var(--reason-inner-gap) 0 0;
  color: #1A8952; /* デザイン指定値 */
  font-size: var(--reason-title-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--reason-title-tracking);
}

.service-lp__reason-figure {
  display: flex;
  margin: var(--reason-inner-gap) calc(var(--reason-pad-x) * -1) 0;
}

.service-lp__reason-img {
  display: block;
  width: 100%;
  height: var(--reason-figure-height);
  object-fit: cover;
}

.service-lp__reason-text {
  margin: var(--reason-inner-gap) 0 0;
  color: var(--lp-text);
  font-size: var(--reason-text-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: var(--reason-text-tracking);
  text-align: left;
}

/* ---------------------------------------------------------------
   05. 野菜へのこだわり
   写真の右上に番号バッジ。バッジは写真の枠でクリップされて欠ける
   （デザインどおり）ため、写真側を overflow: hidden にしている。
   --------------------------------------------------------------- */
.service-lp__vegetable {
  /* PC調整はこの変数の上書きだけで済ませる */
  --vegetable-title-size: clamp(16px, 4.2667vw, 32px);
  --vegetable-title-tracking: clamp(0.64px, 0.1707vw, 1.28px);
  --vegetable-text-size: clamp(12px, calc(2.1333vw + 4px), 20px);
  --vegetable-text-tracking: clamp(0.48px, calc(0.0853vw + 0.16px), 0.8px);
  --vegetable-closing-size: clamp(14px, calc(1.6vw + 8px), 20px);
  --vegetable-figure-width: clamp(110px, calc(18.6667vw + 40px), 180px);
  --vegetable-figure-height: clamp(140px, calc(23.7333vw + 51px), 229px);
  --vegetable-item-gap: clamp(20px, calc(3.2vw + 8px), 32px);
  --vegetable-item-space: clamp(24px, calc(2.1333vw + 16px), 32px);

  padding-bottom: clamp(24px, calc(4.2667vw + 8px), 40px); /* SP24 / PC40 */
}

.service-lp__vegetable-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__vegetable-list {
  margin: var(--lp-heading-gap) 0 0;
  padding: 0 var(--lp-side);
  list-style: none;
}

.service-lp__vegetable-item {
  display: flex;
  align-items: center;
  gap: var(--vegetable-item-gap);
  padding-bottom: var(--vegetable-item-space);
  border-bottom: 1px dashed #1A8952; /* デザイン指定値 */
}

.service-lp__vegetable-item + .service-lp__vegetable-item {
  margin-top: var(--vegetable-item-space);
}

.service-lp__vegetable-body {
  flex: 1;
  min-width: 0;
}

.service-lp__vegetable-title {
  margin: 0;
  color: #1A8952; /* デザイン指定値 */
  font-size: var(--vegetable-title-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--vegetable-title-tracking);
  font-feature-settings: 'palt' 1;
}

.service-lp__vegetable-text {
  margin: clamp(12px, calc(2.1333vw + 4px), 20px) 0 0; /* 見出しとの間 SP12 / PC20 */
  color: var(--lp-text);
  font-size: var(--vegetable-text-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: var(--vegetable-text-tracking);
  font-feature-settings: 'halt' 1;
}

.service-lp__vegetable-figure {
  position: relative;
  flex-shrink: 0;
  width: var(--vegetable-figure-width);
  height: var(--vegetable-figure-height);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.service-lp__vegetable-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 番号バッジ。padding で数字の位置をデザインの座標に合わせている
   （縦: 写真上端から 3px / 横: 中心 95.5px） */
.service-lp__vegetable-badge {
  position: absolute;
  top: -11px;
  right: -8px; /* 画像幅が可変なので右基準で置く（left:77px だと PC でずれる） */
  box-sizing: border-box;
  width: 41px;
  height: 41px;
  padding: 14px 4px 0 0;
  border-radius: var(--radius-full);
  background: #1A8952; /* デザイン指定値 */
  color: #FFFADC; /* デザイン指定値 */
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 0.56px;
  text-align: center;
  font-feature-settings: 'palt' 1;
}

.service-lp__vegetable-closing {
  margin: clamp(16px, calc(6.4vw - 8px), 40px) 0 0; /* こだわりリストとの間 SP16 / PC40 */
  padding: 0 var(--lp-side);
  color: var(--lp-text);
  font-size: var(--vegetable-closing-size);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.56px;
  text-align: center;
  font-feature-settings: 'halt' 1;
}

/* ---------------------------------------------------------------
   06. 人数別の1人あたり単価
   人数（条件）＝dt、1人あたり単価＝dd。カード1枚が1組。
   --------------------------------------------------------------- */
.service-lp__price {
  /* PC調整はこの変数の上書きだけで済ませる */
  --price-title-size: clamp(20px, calc(4vw + 5px), 35px);
  --price-title-tracking: clamp(0.8px, calc(0.16vw + 0.2px), 1.4px);
  --price-num-size: clamp(18px, 4.8vw, 36px);
  --price-term-size: clamp(14px, 3.7333vw, 28px);
  --price-term-tracking: clamp(0.56px, 0.1493vw, 1.12px);
  --price-sub-size: clamp(12px, 3.2vw, 24px);
  --price-label-size: clamp(14px, 3.7333vw, 28px);
  --price-amount-size: clamp(36px, calc(6.4vw + 12px), 60px); /* 金額の数字 SP36 / PC60 */
  --price-unit-size: clamp(14px, 3.7333vw, 28px);
  --price-icon-size: clamp(50px, 13.3333vw, 100px);
  --price-item-pad: clamp(12px, calc(5.3333vw - 8px), 32px); /* カード内側の余白 SP12 / PC32 */
  --price-item-radius: clamp(4px, calc(2.1333vw - 4px), 12px);
  --price-item-gap: clamp(12px, calc(5.3333vw - 8px), 32px);
  --price-term-gap: clamp(12px, 3.2vw, 24px);
  --price-value-pad: clamp(16px, calc(2.1333vw + 8px), 24px); /* 区切り線と金額ブロックの間 SP16 / PC24 */
  --price-value-border: clamp(1px, 0.2667vw, 2px);
  --price-value-gap: clamp(4px, 1.0667vw, 8px);

  padding-bottom: clamp(56px, calc(11.7333vw + 12px), 100px); /* 次コンテンツとの間 SP56 / PC100 */
}

.service-lp__price-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__price-title {
  margin: var(--lp-heading-gap) 0 0;
  padding: 0 var(--lp-side);
  color: var(--lp-text);
  font-size: var(--price-title-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--price-title-tracking);
  font-feature-settings: 'halt' 1;
}

.service-lp__price-list {
  margin: var(--spacing-16) 0 0;
  padding: 0 var(--lp-side);
}

.service-lp__price-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--price-item-pad);
  border-radius: var(--price-item-radius);
  background: #FFFADC; /* デザイン指定値 */
}

.service-lp__price-item + .service-lp__price-item {
  margin-top: var(--price-item-gap);
}

/* ---- 左：人数と世帯像 ---- */
.service-lp__price-term {
  display: flex;
  align-items: center;
  gap: var(--price-term-gap);
  margin: 0;
}

.service-lp__price-icon {
  flex-shrink: 0;
  width: var(--price-icon-size);
  height: var(--price-icon-size);
}

.service-lp__price-term-main {
  display: block;
  color: #1A8952; /* デザイン指定値 */
  font-size: var(--price-term-size);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: var(--price-term-tracking);
}

.service-lp__price-term-num {
  color: inherit;
  font-size: var(--price-num-size);
  font-weight: inherit;
}

.service-lp__price-term-suffix {
  color: var(--lp-text);
  font-size: var(--price-term-size);
  font-weight: inherit;
}

.service-lp__price-term-sub {
  display: block;
  color: var(--lp-text);
  font-size: var(--price-sub-size);
  font-weight: 400;
  line-height: 1.7;
}

/* 2.5人のみ文字数が多く、デザインで字間を詰めている */
.service-lp__price-term-sub.-tight {
  letter-spacing: -0.6px;
}

/* ---- 右：1人あたり単価 ---- */
.service-lp__price-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--price-value-gap);
  margin: 0;
  padding-left: var(--price-value-pad);
  border-left: var(--price-value-border) dashed #1A8952; /* デリ緑 */
  color: #1A8952;
}

.service-lp__price-label {
  color: inherit;
  font-size: var(--price-label-size);
  font-weight: 500;
  line-height: 1;
}

.service-lp__price-amount {
  color: inherit;
  font-size: var(--price-amount-size);
  font-weight: 700;
  line-height: 1;
}

.service-lp__price-unit {
  color: inherit;
  font-size: var(--price-unit-size);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   07. サービス比較
   開閉は JS ではなくチェックボックス（:checked の兄弟セレクタ）で行う。
   閉じていても表は DOM にあり max-height でクリップされるだけなので、
   クローラ・AI からは常に全内容が読める。
   --------------------------------------------------------------- */
.service-lp__compare {
  /* PC調整はこの変数の上書きだけで済ませる */
  --compare-peek: clamp(137px, calc(12vw + 92px), 182px);
  --compare-toggle-size: 16px; /* PC も同値（デザイン実測） */
  --compare-head-size: clamp(12px, calc(2.4vw + 3px), 21px);
  --compare-main-size: clamp(14px, calc(2.6667vw + 4px), 24px);
  --compare-sub-size: clamp(10px, calc(1.8667vw + 3px), 17px);
  --compare-cell-pad-y: clamp(12px, 3.2vw, 24px); /* セル内上下 SP12 / PC24 */
  --compare-cell-pad-x: clamp(2px, calc(1.3333vw - 3px), 7px);
  --compare-head-pad-y: clamp(8px, calc(1.6vw + 2px), 14px);
  --compare-deli-border: clamp(4px, calc(0.8vw + 1px), 7px);
  --compare-unit-size: clamp(12px, calc(2.4vw + 3px), 21px); /* 行内で小さくする文字 */
  --compare-main-size-narrow: clamp(12px, calc(1.0667vw + 8px), 16px); /* Kit / 一般的な の本文 SP12 / PC16 */
  --compare-sub-size-narrow: clamp(10px, calc(1.0667vw + 6px), 14px);  /* 同 補足行 SP10 / PC14 */
  --compare-unit-size-narrow: clamp(12px, calc(0.5333vw + 10px), 14px); /* 同 行内の小さい文字 SP12 / PC14 */
  --compare-line: #CFE4D8; /* 表の細い罫線 */
  --compare-rule-inset: clamp(8px, calc(1.6vw + 2px), 14px); /* 行区切り線の左右余白 */
  --compare-rowhead-line: #CDCDCD; /* 行見出し列の枠と区切り線 */
  --compare-toggle-space: 64px; /* トグルの居場所。表との余白はこの値で調整する */
  --compare-open-gap: 24px; /* 開いている時だけ表とトグルの間に足す余白 */
  --compare-head-sub-size: clamp(9px, calc(1.8667vw + 2px), 16px); /* （ミールキット） */
  --compare-head-alt-height: clamp(50px, calc(10.1333vw + 12px), 88px); /* Kit / 一般的な の見出し高さ。2列を揃える */
  --compare-head-deli-pad: clamp(20px, calc(4vw + 5px), 35px); /* デリ見出しの上下余白 */
  --compare-logo-height: clamp(20px, calc(4vw + 5px), 35px); /* Kit ロゴの高さ */
  --compare-logo-deli-height: clamp(32px, calc(6.1333vw + 9px), 55px); /* デリロゴの高さ */
  --compare-kit: #4EAB76; /* Kit列の見出し背景・枠・本文カラー */
  --compare-rule: #CDCDCD; /* データ列の行区切り線（グレー） */
  --compare-other: #666; /* 一般的な宅配総菜列の文字 */
  --compare-other-line: #CDCDCD; /* 同 枠 */
  --compare-deli-overhang: clamp(4px, calc(0.8vw + 1px), 7px); /* デリ列が下にはみ出す量 */
  /* 行見出しは4文字が1行に収まる必要があるので、列見出しとは別サイズで持つ */
  --compare-rowhead-size: clamp(10px, 2.6667vw, 20px);
  /* 列幅。デリ列を広げて他列との差を強調する（SP/PC共通） */
  --compare-col-head: 16%;
  --compare-col-deli: 32%;
  --compare-col-sub: 26%; /* 残り 67% から行見出し 16% を引いた分を2列で分ける */

  padding-bottom: 56px; /* デザイン指定値 */
}

.service-lp__compare-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__compare-body {
  position: relative;
  margin-top: var(--lp-heading-gap);
  /* トグルの居場所。閉／開どちらでもここに置く */
  padding: 0 var(--lp-side) var(--compare-toggle-space);
}

/* 見た目上は隠すがフォーカスは受けられるようにしておく */
.service-lp__compare-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.service-lp__compare-content {
  max-height: var(--compare-peek);
  overflow: hidden;
}

.service-lp__compare-switch:checked ~ .service-lp__compare-content {
  max-height: none;
  /* デリ列が下にはみ出す分 ＋ 開いている時のトグルとの余白。閉じている時は付けない（マスクの位置がずれるため） */
  padding-bottom: calc(var(--compare-deli-overhang) + var(--compare-open-gap));
}

/* 高さのアニメーション。
   max-height: none は数値でないため補間できず、固定値にすると内容が伸びたときに切れる。
   interpolate-size に対応したブラウザでだけ max-content への補間を許可し、
   非対応ブラウザは今までどおり即座に開く（表が切れることはない）。 */
@supports (interpolate-size: allow-keywords) {
  .service-lp {
    interpolate-size: allow-keywords;
  }

  .service-lp__compare-content {
    transition: max-height 0.45s ease;
  }

  .service-lp__compare-switch:checked ~ .service-lp__compare-content {
    max-height: max-content;
  }
}

/* 動きを減らす設定の環境では止める */
@media (prefers-reduced-motion: reduce) {
  .service-lp__compare-content,
  .service-lp__compare-mask,
  .service-lp__compare-switch:checked ~ .service-lp__compare-mask,
  .service-lp__compare-toggle-icon::after {
    transition: none;
  }
}

/* 表の見えている範囲だけを覆うグラデーション。
   親の ::after にすると :checked から消せないので独立要素にしている */
.service-lp__compare-mask {
  position: absolute;
  top: 0;
  right: var(--lp-side);
  left: var(--lp-side);
  height: var(--compare-peek);
  /* 全体にグラデーションを掛け、完全に白く覆うのは下から10%だけ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFF 90%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 開いたらマスクを消す。visibility は遅延させて opacity のフェードを見せる */
.service-lp__compare-switch:checked ~ .service-lp__compare-mask {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* ---- トグル ---- */
.service-lp__compare-toggle {
  position: absolute;
  bottom: 6px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 28px;
  border: 1px solid #1A1A1A; /* デザイン指定値 */
  border-radius: var(--radius-full);
  background: #FFF;
  transform: translateX(-50%);
  cursor: pointer;
}

.service-lp__compare-switch:focus-visible ~ .service-lp__compare-toggle {
  outline: 2px solid #1A8952;
  outline-offset: 2px;
}

.service-lp__compare-toggle-label {
  color: #1A1A1A;
  font-size: var(--compare-toggle-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.64px;
  white-space: nowrap;
}

/* ＋ / − アイコン。画像に依存させず CSS で描く */
.service-lp__compare-toggle-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.service-lp__compare-toggle-icon::before,
.service-lp__compare-toggle-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #1A1A1A;
  transform: translate(-50%, -50%);
}

.service-lp__compare-toggle-icon::before {
  width: 12px;
  height: 1.5px;
}

.service-lp__compare-toggle-icon::after {
  width: 1.5px;
  height: 12px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* content:none だとアニメーションできないので、回して消す */
.service-lp__compare-switch:checked ~ .service-lp__compare-toggle .service-lp__compare-toggle-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ---- 表本体 ---- */
/* 角丸を効かせるため collapse ではなく separate にする */
.service-lp__compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
}

/* 列幅は table-layout:fixed なので先頭行の指定で決まる */
.service-lp__compare-corner {
  width: var(--compare-col-head);
  padding: 0;
  border: 0;
  background: transparent;
}

.service-lp__compare-colhead.-deli {
  width: var(--compare-col-deli);
}

.service-lp__compare-colhead.-kit,
.service-lp__compare-colhead.-other {
  width: var(--compare-col-sub);
}

/* セル自体は素通し。背景と枠は中のブロックが持つ。
   下揃えにすることで、デリの見出しだけを上に伸ばせる */
.service-lp__compare-colhead {
  padding: 0;
  background: transparent;
  vertical-align: bottom;
}

.service-lp__compare-colhead-inner {
  display: block;
  padding: var(--compare-head-pad-y) var(--compare-cell-pad-x);
  border-right: 1px solid var(--compare-line);
  border-top: 1px solid var(--compare-line);
  background: #E7E7E7; /* グレー塗 */
  color: #4F4E4E; /* 黒文字 */
  font-size: var(--compare-head-size);
  font-weight: 700;
  line-height: 1.4;
}

/* Kit列の見出しは緑ベタ */
.service-lp__compare-colhead.-kit .service-lp__compare-colhead-inner {
  border-color: var(--compare-kit);
  background: var(--compare-kit);
  color: #FFF;
}

/* 一般的な宅配総菜列の見出し。グレー地のまま文字と枠だけ調整し、右上を角丸にする */
.service-lp__compare-colhead.-other .service-lp__compare-colhead-inner {
  border-color: var(--compare-other-line);
  border-radius: 0 var(--radius-medium) 0 0;
  color: var(--compare-other);
}

/* デリの見出しだけ上下に厚みを持たせて他より高くする */
.service-lp__compare-colhead.-deli .service-lp__compare-colhead-inner {
  padding: var(--compare-head-deli-pad) clamp(4px, calc(2.1333vw - 4px), 12px); /* 横 SP4 / PC12 */
  border: 0;
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  background: #1A8952; /* デザイン指定値 */
  color: #FFF;
  font-size: 16px;
}

/* height を直接指定すると max-width で幅だけ詰められて潰れるため、
   幅・高さとも auto にして max-* で上限を掛け、比率をブラウザに保たせる */
/* .service-lp img (0,1,1) に max-width を奪われるので、詳細度を上げる */
.service-lp .service-lp__compare-logo {
  display: block;
  width: auto;
  max-width: calc(100% - 8px); /* 左右に4pxずつ余白を残す */
  height: auto;
  max-height: var(--compare-logo-height);
  margin: 0 auto;
}

.service-lp__compare-colhead.-deli .service-lp__compare-logo {
  max-height: var(--compare-logo-deli-height);
}

.service-lp__compare-colhead-sub {
  display: block;
  color: inherit;
  font-size: var(--compare-head-sub-size);
  font-weight: 400;
  line-height: 1.5;
}

/* Kit と 一般的な は中身の構成が違い自然高が揃わないので、高さを固定して縦中央に置く */
.service-lp__compare-colhead.-kit .service-lp__compare-colhead-inner,
.service-lp__compare-colhead.-other .service-lp__compare-colhead-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--compare-head-alt-height);
}

.service-lp__compare-rowhead {
  position: relative;
  padding: var(--compare-cell-pad-y) var(--compare-cell-pad-x);
  /* 行見出し列も独立したブロックとして枠を持つ。
     行間の線は擬似要素で引くので、上下の枠は最初と最後の行だけに付ける */
  border-right: 1px solid var(--compare-rowhead-line);
  border-left: 1px solid var(--compare-rowhead-line);
  background: #E7E7E7; /* グレー塗 */
  color: #4F4E4E; /* 黒文字 */
  font-size: var(--compare-rowhead-size);
  font-weight: 500;
  line-height: 1.4;
  vertical-align: middle;
}

.service-lp__compare-cell {
  position: relative;
  padding: var(--compare-cell-pad-y) var(--compare-cell-pad-x);
  border-right: 1px solid var(--compare-rule);
  color: #1A8952; /* デザイン指定値 */
  vertical-align: middle;
}

/* Kit列。枠と文字を専用カラーに */
.service-lp__compare-cell.-kit {
  border-right: 1px solid var(--compare-kit);
  border-left: 1px solid var(--compare-kit);
  color: var(--compare-kit);
}

/* 一般的な宅配総菜列。文字と枠はグレー系 */
.service-lp__compare-cell.-other {
  border-right: 1px solid var(--compare-other-line);
  color: var(--compare-other);
}

/* デリ列は強調。左右に太い緑の枠、背景はクリーム */
.service-lp__compare-cell.-deli {
  border-right: var(--compare-deli-border) solid #1A8952;
  border-left: var(--compare-deli-border) solid #1A8952;
  background: #FFFADC; /* デザイン指定値 */
}

/* 行の区切り線。セル幅いっぱいに引かず、左右に余白を持たせる */
.service-lp__compare-rowhead::after,
.service-lp__compare-cell::after {
  content: '';
  position: absolute;
  right: var(--compare-rule-inset);
  bottom: 0;
  left: var(--compare-rule-inset);
  height: 1px;
  background: var(--compare-rule);
}

.service-lp__compare-rowhead::after {
  background: var(--compare-rowhead-line);
}

/* 行見出し列の上端 */
.service-lp__compare-table tbody tr:first-child .service-lp__compare-rowhead {
  border-top: 1px solid var(--compare-rowhead-line);
  border-radius: var(--radius-medium) 0 0 0;
}

.service-lp__compare-cell.-deli::after {
  height: 2px;
  background: #1A8952; /* デザイン指定値 */
}

/* 最終行は区切り線を出さず、下側を閉じて角丸にする */
.service-lp__compare-table tbody tr:last-child .service-lp__compare-rowhead::after,
.service-lp__compare-table tbody tr:last-child .service-lp__compare-cell::after {
  content: none;
}

/* データ列の下端は角丸にしない（角丸が付くのは行見出し列の左下だけ） */
.service-lp__compare-table tbody tr:last-child .service-lp__compare-cell {
  border-bottom: 1px solid var(--compare-rule);
}

/* 一般列は右下も角丸 */
.service-lp__compare-table tbody tr:last-child .service-lp__compare-cell.-other {
  border-bottom: 1px solid var(--compare-other-line);
  border-radius: 0 0 var(--radius-medium) 0;
}

.service-lp__compare-table tbody tr:last-child .service-lp__compare-cell.-kit {
  border-bottom: 1px solid var(--compare-kit);
}

/* デリ列は上と同じように下も少しはみ出させる。
   行の高さを変えずに見せたいので、はみ出す部分は擬似要素で描く */
.service-lp__compare-table tbody tr:last-child .service-lp__compare-cell.-deli {
  border-bottom: 0;
}

.service-lp__compare-table tbody tr:last-child .service-lp__compare-cell.-deli::before {
  content: '';
  position: absolute;
  top: 100%;
  right: calc(var(--compare-deli-border) * -1);
  left: calc(var(--compare-deli-border) * -1);
  box-sizing: border-box;
  height: var(--compare-deli-overhang);
  border: var(--compare-deli-border) solid #1A8952;
  border-top: 0;
  background: #FFFADC; /* デザイン指定値 */
}

.service-lp__compare-table tbody tr:last-child .service-lp__compare-rowhead {
  border-bottom: 1px solid var(--compare-rowhead-line);
  border-radius: 0 0 0 var(--radius-medium);
}

.service-lp__compare-icon {
  display: block;
  width: auto;
  height: 32px;
  margin: 0 auto 4px;
}

.service-lp__compare-main {
  display: block;
  color: inherit;
  font-size: var(--compare-main-size);
  font-weight: 700;
  line-height: 1.4;
}

/* 数値のうしろに続く単位・助詞。行内で一段小さくする */
.service-lp__compare-unit {
  color: inherit;
  font-size: var(--compare-unit-size);
  font-weight: inherit;
}

/* Kit / 一般的な の2列は文字サイズの上限を下げる。デリ列は強調列なので据え置き */
.service-lp__compare-cell.-kit .service-lp__compare-main,
.service-lp__compare-cell.-other .service-lp__compare-main {
  font-size: var(--compare-main-size-narrow);
}

.service-lp__compare-cell.-kit .service-lp__compare-sub,
.service-lp__compare-cell.-other .service-lp__compare-sub {
  font-size: var(--compare-sub-size-narrow);
}

.service-lp__compare-cell.-kit .service-lp__compare-unit,
.service-lp__compare-cell.-other .service-lp__compare-unit {
  font-size: var(--compare-unit-size-narrow);
}

.service-lp__compare-sub {
  display: block;
  color: inherit;
  font-size: var(--compare-sub-size);
  font-weight: 400;
  line-height: 1.4;
}

/* ---------------------------------------------------------------
   08. スケジュールに合わせて（ご利用例）
   --------------------------------------------------------------- */
.service-lp__schedule {
  /* PC調整はこの変数の上書きだけで済ませる */
  --schedule-title-size: clamp(20px, calc(4vw + 5px), 35px);
  --schedule-title-tracking: clamp(0.8px, calc(0.16vw + 0.2px), 1.4px);
  --schedule-example-size: clamp(20px, calc(3.2vw + 8px), 32px);
  --schedule-text-size: clamp(14px, calc(1.6vw + 8px), 20px);
  --schedule-text-tracking: clamp(0.56px, calc(0.064vw + 0.32px), 0.8px);
  --schedule-case-label-size: clamp(14px, calc(1.6vw + 8px), 20px);
  --schedule-case-label-pad: clamp(16px, 4.2667vw, 32px);
  --schedule-case-text-size: clamp(12px, calc(2.1333vw + 4px), 20px);
  --schedule-case-icon: clamp(64px, calc(17.6vw - 2px), 130px);
  --schedule-case-gap: clamp(12px, 3.2vw, 24px);
  --schedule-plan-size: clamp(12px, 3.2vw, 24px);
  --schedule-note-size: clamp(10px, 2.6667vw, 20px);
  --schedule-closing-size: clamp(16px, 4.2667vw, 32px);
  --schedule-closing-icon: clamp(60px, 16vw, 120px);
  --schedule-dow-size: clamp(18px, 4.8vw, 36px);
  --schedule-dow-font: clamp(11px, 2.9333vw, 22px);
  --schedule-cell-pad: clamp(8px, 2.1333vw, 16px);
  --schedule-img-height: clamp(40px, 10.6667vw, 80px);
  --schedule-border: clamp(1px, 0.2667vw, 2px);
  --schedule-radius: clamp(4px, 1.0667vw, 8px);
  --schedule-line: #9E9E9F; /* 週テーブルの枠 */

  padding-bottom: clamp(28px, 7.4667vw, 56px); /* SP28 / PC56 */
}

.service-lp__schedule-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__schedule-intro {
  margin-top: var(--lp-heading-gap);
  padding: 0 var(--lp-side);
}

.service-lp__schedule-title {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--schedule-title-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--schedule-title-tracking);
  font-feature-settings: 'halt' 1;
}

.service-lp__schedule-text {
  margin: var(--spacing-16) 0 0;
  color: var(--lp-text);
  font-size: var(--schedule-text-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: var(--schedule-text-tracking);
  font-feature-settings: 'halt' 1;
}

.service-lp__schedule-text + .service-lp__schedule-text {
  margin-top: 1.4em; /* SP/PC共通。メニューの本文と同じ扱い */
}

.service-lp__schedule-example-title {
  margin: var(--spacing-40) 0 0; /* 40px */
  padding: 0 var(--lp-side);
  color: var(--lp-text);
  font-size: var(--schedule-example-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--schedule-title-tracking);
}

/* ---- ご利用例 ---- */
.service-lp__schedule-cases {
  margin: var(--spacing-16) 0 0;
  padding: 0 var(--lp-side);
  list-style: none;
}

.service-lp__schedule-case + .service-lp__schedule-case {
  margin-top: 40px; /* ご利用例どうしの間隔。SP/PC共通 */
}

.service-lp__schedule-case-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 var(--schedule-case-label-pad);
  border: var(--schedule-border) solid #1A8952; /* デリ緑 */
  border-radius: var(--radius-full);
  color: #1A8952;
  font-size: var(--schedule-case-label-size);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.56px;
}

.service-lp__schedule-case-lead {
  display: flex;
  align-items: center;
  gap: var(--schedule-case-gap);
  margin-top: 4px;
  padding-top: 4px;
}

.service-lp__schedule-case-icon {
  flex-shrink: 0;
  width: var(--schedule-case-icon);
  height: auto;
}

.service-lp__schedule-case-text {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--schedule-case-text-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.48px;
}

/* ---- 週の並び ---- */
.service-lp__schedule-week {
  display: flex;
  margin: 0;  /* 上のリード文にそのまま接する */
  padding: 0;
  border: var(--schedule-border) solid var(--schedule-line);
  border-radius: var(--schedule-radius);
  overflow: hidden;
  list-style: none;
}

.service-lp__schedule-day {
  flex: 1;
  min-width: 0;
  padding: var(--schedule-cell-pad);
}

.service-lp__schedule-day + .service-lp__schedule-day {
  border-left: var(--schedule-border) solid var(--schedule-line);
}

/* デリの日だけ背景を敷く */
.service-lp__schedule-day.-deli {
  background: #FFFADC; /* デザイン指定値 */
}

/* 曜日バッジとプラン名は縦積み・中央揃え（Figma 25719:30231） */
.service-lp__schedule-dow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.service-lp__schedule-dow-badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--schedule-dow-size);
  height: var(--schedule-dow-size);
  border-radius: var(--radius-full);
  background: #1A8952; /* デリ緑 */
  color: #FFF;
  font-size: var(--schedule-dow-font);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.44px;
}

.service-lp__schedule-plan {
  /* 「デリOisix」が2行に割れないようにする */
  white-space: nowrap;
  border-bottom: var(--schedule-border) solid var(--schedule-line);
  color: var(--schedule-line);
  font-size: var(--schedule-plan-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.48px;
}

/* デリの日はプラン名も緑 */
.service-lp__schedule-day.-deli .service-lp__schedule-plan {
  border-bottom-color: #1A8952;
  color: #1A8952;
}

.service-lp__schedule-img {
  display: block;
  width: 100%;
  height: var(--schedule-img-height);
  margin-top: var(--schedule-cell-pad);
  object-fit: contain;
}

.service-lp__schedule-note {
  margin: 4px 0 0;
  color: var(--schedule-line);
  font-size: var(--schedule-note-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.4px;
  text-align: center;
}

/* ---- 締め ---- */
.service-lp__schedule-closing {
  margin-top: var(--spacing-40);
  padding: 0 var(--lp-side);
  text-align: center;
}

.service-lp__schedule-closing-icon {
  display: block;
  width: var(--schedule-closing-icon);
  height: auto;
  margin: 0 auto;
}

.service-lp__schedule-closing-text {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--schedule-closing-size);
  font-weight: 700;
  line-height: 2.29;
  letter-spacing: 0.64px;
  font-feature-settings: 'halt' 1;
  text-decoration: underline wavy #1A8952;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------
   09. お客様の声
   アイコンはカードの上端からはみ出して重なる。
   --------------------------------------------------------------- */
.service-lp__voice-section {
  /* PC調整はこの変数の上書きだけで済ませる */
  --voice-who-size: clamp(14px, 3.2vw + 2px, 26px);
  --voice-who-tracking: clamp(0.56px, calc(0.128vw + 0.08px), 1.04px);
  --voice-text-size: clamp(12px, calc(1.6vw + 6px), 18px);
  --voice-text-tracking: clamp(0.48px, calc(0.064vw + 0.24px), 0.72px);
  --voice-avatar-size: clamp(75px, 20vw, 150px);
  --voice-pad-x: clamp(16px, 4.2667vw, 32px);
  --voice-avatar-gap: 16px; /* アイコン下端からタイトルまでの間隔 */
  --voice-list-gap: 80px; /* 見出しビジュアルとアイコン上端の間隔。デバイス共通 */
  /* アイコンがカードに重なっている分を足して、上の間隔を一定に保つ */
  --voice-pad-top: calc(var(--voice-avatar-size) - var(--voice-avatar-offset) + var(--voice-avatar-gap));
  --voice-pad-bottom: clamp(20px, 5.3333vw, 40px);
  --voice-avatar-offset: clamp(60px, 16vw, 150px); /* アイコンがカードより上に出る量 */
  --voice-arc-size: clamp(138px, 36.8vw, 276px); /* アイコン背後の円の直径 */
  /* 円がカードより上に出る量＝半月の高さ。
     アイコンのはみ出し量より小さくすることで、頭が半月から出る。
     PC(750px) は 120px のまま、SP(375px) だけ 44px まで下げている */
  --voice-arc-offset: clamp(44px, calc(20.2667vw - 32px), 120px);

  padding-bottom: 56px; /* デザイン指定値 */
}

.service-lp__voice-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__voice-list {
  margin: var(--voice-list-gap) 0 0;
  padding: 0 var(--lp-side);
  list-style: none;
}

/* 背景は奇数＝緑／偶数＝クリームで交互。半月も同じ色を使うので変数で持つ */
.service-lp__voice {
  --voice-bg: #C2DDBB; /* デザイン指定値 */

  position: relative;
  margin-top: var(--voice-avatar-offset);
  padding: var(--voice-pad-top) var(--voice-pad-x) var(--voice-pad-bottom);
  border-radius: var(--radius-medium);
  /* 下地の色 ＋ FV見出しと同じ紙目テクスチャ */
  background-color: var(--voice-bg);
  background-image: url(../../shared/img/2636/oic_intro_shinki_service_bg_pattern.png);
}

.service-lp__voice:nth-child(even) {
  --voice-bg: #FFFADC; /* デザイン指定値 */
}

/* アイコンの背後に敷く円。z-index:-1 でカードの背景より後ろに置き、
   カードからはみ出した上部だけが半月として見える。
   角丸の矩形ではなく真円なので、Figma と同じ弧になる */
.service-lp__voice::before {
  content: '';
  position: absolute;
  top: calc(var(--voice-arc-offset) * -1);
  left: 50%;
  z-index: -1;
  width: var(--voice-arc-size);
  height: var(--voice-arc-size);
  border-radius: var(--radius-full);
  /* 下地の色 ＋ FV見出しと同じ紙目テクスチャ */
  background-color: var(--voice-bg);
  background-image: url(../../shared/img/2636/oic_intro_shinki_service_bg_pattern.png);
  transform: translateX(-50%);
}

.service-lp__voice + .service-lp__voice {
  margin-top: calc(var(--voice-avatar-offset) + var(--spacing-16));
}

.service-lp__voice-avatar {
  position: absolute;
  top: calc(var(--voice-avatar-offset) * -1);
  left: 50%;
  width: var(--voice-avatar-size);
  height: auto;
  transform: translateX(-50%);
}

.service-lp__voice-body {
  margin: 0;
}

.service-lp__voice-who {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--voice-who-size);
  font-weight: 700;
  line-height: 2;
  letter-spacing: var(--voice-who-tracking);
  text-align: center;
  font-feature-settings: 'halt' 1;
}

.service-lp__voice-text {
  margin: 10px 0 0;
  padding: 0;
  color: var(--lp-text);
  font-size: var(--voice-text-size);
  font-weight: 400;
  line-height: 2;
  letter-spacing: var(--voice-text-tracking);
  text-align: justify;
  font-feature-settings: 'halt' 1;
}

/* ---------------------------------------------------------------
   10. FAQ
   details / summary のネイティブアコーディオン。JS なし。
   1つ目だけ open 属性で開いた状態にしている。
   --------------------------------------------------------------- */
.service-lp__faq {
  /* PC調整はこの変数の上書きだけで済ませる */
  --faq-group-size: clamp(16px, calc(2.1333vw + 8px), 24px);
  --faq-group-tracking: clamp(0.64px, calc(0.0853vw + 0.32px), 0.96px);
  --faq-q-size: clamp(12px, calc(1.6vw + 6px), 18px);
  --faq-a-size: clamp(12px, calc(1.6vw + 6px), 18px);
  --faq-tracking: clamp(0.48px, calc(0.064vw + 0.24px), 0.72px);
  --faq-mark-size: 36px; /* PC も同値（デザイン実測） */
  --faq-item-pad: clamp(16px, calc(2.1333vw + 8px), 24px);

  padding-bottom: 56px; /* デザイン指定値 */
}

.service-lp__faq-visual {
  display: block;
  width: 100%;
  height: auto;
}

.service-lp__faq-list {
  margin-top: var(--lp-heading-gap);
  padding: 0 var(--lp-side);
}

.service-lp__faq-group-title {
  margin: clamp(40px, calc(4.2667vw + 24px), 56px) 0 16px; /* 上=前のカテゴリとの間 SP40 / PC56、下=デバイス共通16px */
  color: var(--lp-text);
  font-size: var(--faq-group-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--faq-group-tracking);
  font-feature-settings: 'halt' 1;
}

.service-lp__faq-group-title:first-child {
  margin-top: 0;
}

/* 区切り線は全項目の下に引き、カテゴリ見出しの直後だけ上にも引く。
   これで各カテゴリが上下とも線で閉じ、項目間の線も重ならない。
   :last-child だと次に <h3> が来るためカテゴリ末尾に効かず、ページ末尾の1件だけになる */
.service-lp__faq-item {
  padding: var(--faq-item-pad) 0;
  border-bottom: 1px dashed #1A8952; /* デザイン指定値 */
}

.service-lp__faq-group-title + .service-lp__faq-item {
  border-top: 1px dashed #1A8952;
}

/* ---- 質問（label）---- */
/* 見た目上は隠すがフォーカスは受けられるようにしておく */
.service-lp__faq-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.service-lp__faq-q-heading {
  margin: 0;
}

.service-lp__faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.service-lp__faq-switch:focus-visible ~ .service-lp__faq-q-heading .service-lp__faq-q {
  outline: 2px solid #1A8952;
  outline-offset: 2px;
}

.service-lp__faq-mark {
  flex-shrink: 0;
  width: var(--faq-mark-size);
  height: var(--faq-mark-size);
}

.service-lp__faq-q-text {
  flex: 1;
  min-width: 0;
  color: #1A8952; /* デザイン指定値 */
  font-size: var(--faq-q-size);
  font-weight: 700;
  line-height: 2;
  letter-spacing: var(--faq-tracking);
  font-feature-settings: 'halt' 1;
}

/* ＋ / − アイコン。画像に依存させず CSS で描く */
.service-lp__faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.service-lp__faq-icon::before,
.service-lp__faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #1A8952;
  transform: translate(-50%, -50%);
}

.service-lp__faq-icon::before {
  width: 15px;
  height: 1px;
}

.service-lp__faq-icon::after {
  width: 1px;
  height: 15px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 開いたら縦棒を回して消す＝マイナスになる */
.service-lp__faq-switch:checked ~ .service-lp__faq-q-heading .service-lp__faq-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ---- 回答 ---- */
/* grid-template-rows を 0fr → 1fr にすると、内容の実高さまで補間できる。
   max-height の固定値と違い中身が切れず、全ブラウザで動く */
.service-lp__faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.service-lp__faq-switch:checked ~ .service-lp__faq-a-wrap {
  grid-template-rows: 1fr;
}

.service-lp__faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 0; /* grid の子を潰せるようにする */
  padding-top: 8px;
  overflow: hidden;
}

.service-lp__faq-a-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--lp-text);
  font-size: var(--faq-a-size);
  font-weight: 400;
  line-height: 2;
  letter-spacing: var(--faq-tracking);
  font-feature-settings: 'halt' 1;
}

@media (prefers-reduced-motion: reduce) {
  .service-lp__faq-icon::after,
  .service-lp__faq-a-wrap {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   11. 実績バナー ／ フードロスへの取り組み
   フードロス本体は共通パーツ inc_otameshi_sustainable.jsp が
   自前の style を持っているので、ここでは何も指定しない。
   --------------------------------------------------------------- */
.service-lp__authority-img {
  display: block;
  width: 100%;
  height: auto;
}