/* ELON DETAIL — 商品詳細モーダル（共通スタイル）
   car-coating.html / wash.html で使っている実装をそのまま切り出したもの。
   デザイン・数値は一切変えていない。既存2ページはこのファイルを読まず、
   自前のインラインCSSのまま動く（既存ページに影響を出さないため）。 */

    /* ─── MODAL ─── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: #ffffff;
      border: 1px solid rgba(10,10,10,0.1);
      max-width: 720px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
    }
    .modal-header {
      padding: 40px 48px 32px;
      border-bottom: 1px solid rgba(10,10,10,0.08);
    }
    .modal-tag {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.3em;
      color: rgba(10,10,10,0.3);
      margin-bottom: 12px;
    }
    .modal-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.8rem;
      font-weight: 800;
      color: #0a0a0a;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }
    .modal-subtitle { font-size: 0.82rem; color: rgba(10,10,10,0.4); font-weight: 300; }
    .modal-body { padding: 32px 48px 48px; }
    .modal-desc { font-size: 0.85rem; color: rgba(10,10,10,0.55); line-height: 1.85; margin-bottom: 32px; font-weight: 300; }
    .modal-steps-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em;
      color: rgba(10,10,10,0.3); margin-bottom: 16px;
    }
    .modal-steps {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
      background: rgba(10,10,10,0.06); border: 1px solid rgba(10,10,10,0.06);
      margin-bottom: 32px;
    }
    .modal-step-item {
      background: #f7f7f7; padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start;
    }
    .modal-step-num {
      font-family: 'Montserrat', sans-serif; font-size: 0.58rem; font-weight: 700;
      color: rgba(10,10,10,0.2); min-width: 20px; padding-top: 2px;
    }
    .modal-step-name { font-size: 0.82rem; color: rgba(10,10,10,0.7); font-weight: 500; margin-bottom: 2px; }
    .modal-step-desc { font-size: 0.72rem; color: rgba(10,10,10,0.35); font-weight: 300; line-height: 1.5; }
    .modal-price-table {
      width: 100%; table-layout: fixed; border-collapse: collapse;
      border: 1px solid rgba(10,10,10,0.08); margin-bottom: 20px;
    }
    .modal-price-table th {
      background: #f0f0f0; padding: 12px 16px;   /* 金額セルと同じ余白にして見出しを真上に */
      font-family: 'Montserrat', sans-serif; font-size: 0.6rem;
      font-weight: 600; letter-spacing: 0.2em; color: rgba(10,10,10,0.3);
      border-bottom: 1px solid rgba(10,10,10,0.08); text-align: left;
    }
    .modal-price-table td {
      padding: 14px 20px; font-size: 0.82rem; border-bottom: 1px solid rgba(10,10,10,0.05);
    }
    .modal-price-table td:first-child { color: rgba(10,10,10,0.5); }
    /* 金額は右揃え。見出しも合わせて右に寄せる */
    .modal-price-table td:last-child {
      font-family: 'Montserrat', sans-serif; font-weight: 700; color: #0a0a0a;
      text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .modal-price-table th:last-child { text-align: right; }
    .modal-meta {
      display: flex; gap: 24px; margin-bottom: 28px;
      padding: 20px 0; border-top: 1px solid rgba(10,10,10,0.06);
      border-bottom: 1px solid rgba(10,10,10,0.06);
    }
    .modal-meta-item { display: flex; flex-direction: column; gap: 4px; }
    .modal-meta-label { font-family: 'Montserrat', sans-serif; font-size: 0.55rem; letter-spacing: 0.25em; color: rgba(10,10,10,0.25); }
    .modal-meta-val { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; color: #0a0a0a; }
    .modal-close {
      position: absolute; top: 20px; right: 24px;
      background: none; border: none; color: rgba(10,10,10,0.4);
      font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 4px 8px;
      transition: color 0.2s;
    }
    .modal-close:hover { color: #0a0a0a; }
    /* CLOSE をモーダル内スクロールに追従させる（高さ0の sticky に入れるだけ） */
    .pm-closebar { position:sticky; top:0; height:0; z-index:5; }
    .pm-closebar .modal-close { position:absolute; top:20px; right:24px;
                                background:#ffffff; padding:6px 9px; }
    @media (max-width:600px) {
      .pm-closebar .modal-close { top:14px; right:14px; }
    }
  /* ─── モーダル内の料金表：他の料金表と同じ見せ方に揃える ─── */
  /* サイズ記号。「SS〜M」「16〜19」も折り返さず、全メニューで同じ幅に揃える */
  .modal-price-table td.pt-code {
    background: #f0f0f0;
    width: 78px; min-width: 78px;
    text-align: center; white-space: nowrap;
    padding-left: 8px; padding-right: 8px;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    color: rgba(10,10,10,0.7) !important;
    border-right: 1px solid rgba(10,10,10,0.08);
  }
  /* 説明はスマホ幅に収まらない場合があるため折り返しを許可する。
     nowrap のままだと表が画面からはみ出し、金額が切れてしまう。 */
  .modal-price-table td.pt-name {
    font-size: 0.72rem;
    color: rgba(10,10,10,0.5);
    line-height: 1.5;
    padding-left: 12px; padding-right: 12px;
  }
  /* 見出しにも本文と同じ位置で区切り線を入れる。
     1列目はサイズ記号と同じ幅・中央揃えにして、線を縦にまっすぐ通す。
     料金欄の手前には線を入れない。 */
  .modal-price-table th.pt-code-h {
    width: 78px; min-width: 78px;
    text-align: center;
    padding-left: 8px; padding-right: 8px;
    border-right: 1px solid rgba(10,10,10,0.08);
  }
  .modal-price-table td { padding: 12px 16px; }

  /* ─── スマホ：モーダル見出しを大きく1行で ─── */
  /* 左右の余白が48pxあると本文の幅が229pxしか残らず、
     「ウィンドウコーティング」程度でも2行に折り返してしまう。
     余白を詰めて文字が入る幅を広げる（実際の文字サイズはJSで調整）。 */
  @media (max-width: 600px) {
    .modal-overlay { padding: 12px !important; }
    .modal-header { padding: 26px 20px 18px !important; }
    .modal-body { padding: 24px 20px 32px !important; }
    /* タグは字間が広く、バッジ付きだと2〜3行になるため詰めて1行に固定する */
    .modal-tag {
      letter-spacing: 0.16em;
      white-space: nowrap; overflow: hidden;
    }

    /* 施工工程は2列で縦に積むと画面何つぶんにもなるため、
       1工程ずつ横スワイプで見る形にする（カーコーティングと同じ）。 */
    .modal-steps {
      display: flex !important;
      grid-template-columns: none !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 8px;
      background: transparent;
      border: none;
      padding-bottom: 6px;
      margin-bottom: 10px !important;
      scrollbar-width: none;
    }
    .modal-steps::-webkit-scrollbar { display: none; }
    .modal-step-item {
      flex: 0 0 82%;
      min-width: 0;
      scroll-snap-align: start;
      border: 1px solid rgba(10,10,10,0.08);
      border-radius: 10px;
      padding: 14px 16px;
    }
    .modal-steps-dots { display: flex; justify-content: center; gap: 5px; margin-bottom: 26px; flex-wrap: wrap; }
    .modal-steps-dots span {
      width: 5px; height: 5px; border-radius: 50%;
      background: rgba(10,10,10,0.16); transition: background 0.2s;
    }
    .modal-steps-dots span.on { background: rgba(10,10,10,0.55); }
  }
  @media (min-width: 601px) { .modal-steps-dots { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   DETAIL MODAL 新デザイン ─ 検証中（WINDOW / opt_glass のみ）
   すべて .modal-box.pm2 の内側にだけ効く。既存16商品の表示は変わらない。
   枠で見せず、文字サイズ・ウェイト・余白・細い横罫線で階層をつくる。
   ══════════════════════════════════════════════════════════════════════ */
.pm2-wrap { display: none; }
.modal-box.pm2 .modal-header,
.modal-box.pm2 .modal-body { display: none; }
.modal-box.pm2 .pm2-wrap   { display: block; }
/* 本文全体を囲う装飾的な枠は使わない。
   カードの中に情報を入れるのではなく、白い空間の中に情報を置く。 */
.modal-box.pm2 { border: none; }

.pm2-wrap { padding: 46px 56px 56px; }
.pm2-sec  { max-width: 568px; }

/* L3 ── 英字ラベル：小さく・字間を広く */
.pm2-eyebrow, .pm2-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em;
  color: rgba(10,10,10,0.34);
}
.pm2-eyebrow { display: flex; gap: 14px; align-items: baseline; margin-bottom: 15px; }
.pm2-eyebrow span:last-child { color: rgba(10,10,10,0.52); }
.pm2-label   { display: block; margin-bottom: 20px; }

/* L2 ── 日本語商品名 */
.pm2-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.24rem; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(10,10,10,0.6); margin-bottom: 20px;
}

/* L1 ── 重要メッセージ */
.pm2-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.62rem; font-weight: 700; line-height: 1.68; letter-spacing: 0.01em;
  color: #0a0a0a; margin-bottom: 26px;
}

/* L4 ── 本文（DESCRIPTION は見出しを出さず本文として置く） */
.pm2-desc { font-size: 0.85rem; font-weight: 300; line-height: 2.05; color: rgba(10,10,10,0.55); }
/* 複数段落の DESCRIPTION（desc が配列の商品のみ）。
   読み幅 780px・15px・行送り2.0 を基準にし、本文をやや濃くして読みやすくする。
   単一文字列の商品には付かないため、既存の表示は変わらない。 */
.pm2-desc-p { max-width: 780px; font-size: 0.94rem; font-weight: 400;
              line-height: 2.0; color: rgba(10,10,10,0.68); }
.pm2-desc-p + .pm2-desc-p { margin-top: 22px; }
/* 最後の価値訴求。囲みや背景は使わず、ウェイトと濃さだけで一段強くする。 */
.pm2-desc-em { font-weight: 600; color: rgba(10,10,10,0.88); }
.pm2-desc-em + .pm2-desc-p { margin-top: 10px; }
.pm2-text { font-size: 0.9rem;  font-weight: 300; line-height: 2.1;  color: rgba(10,10,10,0.62); }

/* 大項目の境界だけ 1px */
.pm2-rule { height: 1px; background: rgba(10,10,10,0.1); margin: 42px 0; max-width: 568px; }

/* ── PRICE：囲まず、横罫線と数字の大きさで見せる ── */
.pm2-price-head { display: flex; justify-content: space-between; align-items: baseline; }
.pm2-price-head .pm2-label { margin-bottom: 0; }
/* 2026-09：料金見出しは全モーダルで PRICE / TAX IN にそろえる。
   BODY COATING のセクション見出しは他より大きいため、料金見出しだけ
   ホイールなど他モーダルと同じ大きさ・字間・濃さに戻す。
   .pm2-body .pm2-label（0.7rem）より詳細度が高いので SP でもこちらが効く。
   他のセクション見出し（基本情報・COMPARE など）の大きさは変えていない。 */
.pm2-body .pm2-price-head .pm2-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em;
  color: rgba(10,10,10,0.34);
}
.pm2-tax {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem; letter-spacing: 0.16em; color: rgba(10,10,10,0.3);
}
.pm2-prices { margin-top: 18px; }
/* 料金グループの小見出し（新車価格・2工程研磨など） */
.pm2-price-sub {
  font-size: 0.78rem; font-weight: 500; color: rgba(10,10,10,0.5);
  letter-spacing: 0.04em; margin-top: 30px;
}
.pm2-price-sub + .pm2-prices { margin-top: 12px; }
/* 通常価格と新車価格の関係についての補足。警告ではないので既存グレー系のまま、
   本文より少し小さめ・上下に余白をとって自然に読ませる。 */
.pm2-price-note {
  font-size: 0.78rem; font-weight: 300; line-height: 1.9;
  color: rgba(10,10,10,0.45); margin-top: 20px;
  /* 「施工」のような語の途中で折り返さないようにする。
     未対応ブラウザでは従来どおりの折り返しになるだけで表示は壊れない。 */
  word-break: auto-phrase;
}
.pm2-price-head + .pm2-price-sub { margin-top: 20px; }
/* 仕上がりについての注記（DESCRIPTION 直下。料金の注記とは別） */
.pm2-desc-note {
  font-size: 0.76rem; font-weight: 300; line-height: 1.9;
  color: rgba(10,10,10,0.42); margin-top: 16px;
}
.pm2-pr {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid rgba(10,10,10,0.07);
}
.pm2-pr:first-child { border-top: 1px solid rgba(10,10,10,0.07); }
/* 大項目の区切り線とすぐ隣り合って二重線に見えるため、末尾の線は出さない */
.pm2-pr:last-child  { border-bottom: none; }
.pm2-pr-l    { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.pm2-pr-code {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(10,10,10,0.5); flex: 0 0 auto; min-width: 58px;
}
.pm2-pr-name { font-size: 0.8rem; font-weight: 300; line-height: 1.6; color: rgba(10,10,10,0.45); }
.pm2-pr-amt  {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em;
  color: #0a0a0a; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pm2-note { font-size: 0.75rem; font-weight: 300; line-height: 1.85; color: rgba(10,10,10,0.42); margin-top: 14px; }

/* ─── 詳細ページへの導線（detail_url を持つ商品だけ） ───
   カテゴリーページのカードで使っている .cat-detail と同じ見た目にそろえる。
   罫線・矢印・hoverの動きまで既存CTAを踏襲し、新しい配色は足さない。 */
.pm2-detail {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: 'Montserrat', sans-serif; font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; color: rgba(10,10,10,.45); text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid rgba(10,10,10,.18);
  transition: color .25s, border-color .25s;
}
.pm2-detail span { font-size: .72rem; display: inline-block; transition: transform .25s; }
.pm2-detail:hover { color: #0a0a0a; border-bottom-color: rgba(10,10,10,.55); }
.pm2-detail:hover span { transform: translateX(4px); }

/* ─── 状態によって選べる別メニューへの導線（cta_dryice を持つ商品だけ）───
   警告表示にはしない。通常メニューを否定しない落ち着いた見せ方にする。
   ボタンの見た目は既存の .pm2-detail をそのまま流用している。 */
.pm2-alt-h {
  font-size: 0.92rem; font-weight: 700; color: #0a0a0a;
  line-height: 1.7; margin-bottom: 10px;
}
.pm2-alt-d {
  font-size: 0.82rem; font-weight: 300; line-height: 1.95;
  color: rgba(10,10,10,0.5); margin-bottom: 20px;
}
.pm2-alt-cta {
  background: none; border: 0; border-bottom: 1px solid rgba(10,10,10,.18);
  cursor: pointer; text-align: left; flex-wrap: wrap; row-gap: 2px;
  font-family: 'Montserrat', sans-serif;
}
/* 日本語部分は本文と同じ書体・読みやすい大きさにする */
.pm2-alt-cta .pm2-alt-l1,
.pm2-alt-cta .pm2-alt-l2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .pm2-alt-h { font-size: 0.9rem; }
  .pm2-alt-d { font-size: 0.8rem; margin-bottom: 18px; }
  .pm2-alt-cta .pm2-alt-l1,
  .pm2-alt-cta .pm2-alt-l2 { font-size: 0.78rem; }
}

/* ── RECOMMENDED：カード化せず、短い線＋文章 ── */
.pm2-rec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pm2-rec li {
  display: flex; gap: 16px; align-items: baseline;
  font-size: 0.88rem; font-weight: 300; line-height: 1.95; color: rgba(10,10,10,0.6);
}
.pm2-rec li::before {
  content: ''; flex: 0 0 14px; height: 1px;
  background: rgba(10,10,10,0.3); transform: translateY(-6px);
}

/* ── DURATION / DURABILITY：左ラベル・右値の2列 ── */
.pm2-spec-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid rgba(10,10,10,0.07);
}
/* DURATION と DURABILITY の間だけ線を引く。上下の境界は大項目の区切り線が担う */
.pm2-spec-row:first-child { border-top: none; }
.pm2-spec-row:last-child  { border-bottom: none; }
.pm2-spec-row .pm2-label  { margin-bottom: 0; }
.pm2-spec-val {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 0.95rem; font-weight: 700; color: #0a0a0a; white-space: nowrap;
}

/* ── バッジ（新車専用／メンバー専用など。既存文言をそのまま出す） ── */
.pm2-badge {
  display: inline-block; margin-left: 12px; vertical-align: middle;
  padding: 4px 12px; border-radius: 999px;
  background: #0a0a0a; color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
}

/* ── 専用セクション（RECOMMENDED FOR / FEATURES / TECHNOLOGY / COMPARE）── */
.pm2-sub-h {
  font-size: 1.02rem; font-weight: 700; line-height: 1.7;
  color: #0a0a0a; margin-bottom: 14px;
}
.pm2-feat-item { padding: 16px 0; }
.pm2-feat-item + .pm2-feat-item { border-top: 1px solid rgba(10,10,10,0.07); }
.pm2-feat-nm { font-size: 0.88rem; font-weight: 500; color: rgba(10,10,10,0.75); margin-bottom: 6px; line-height: 1.6; }
.pm2-feat-d  { font-size: 0.78rem; font-weight: 300; line-height: 1.95; color: rgba(10,10,10,0.45); }
.pm2-kv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid rgba(10,10,10,0.07);
}
.pm2-kv-row:last-child { border-bottom: none; }
.pm2-kv-k {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
  color: rgba(10,10,10,0.42); flex: 0 0 auto;
}
.pm2-kv-v {
  font-size: 0.86rem; font-weight: 500; color: rgba(10,10,10,0.78);
  text-align: right; line-height: 1.6;
}

/* ── PROCESS：PCは縦・囲みなし・余白で分ける ── */
.pm2-steps { display: flex; flex-direction: column; gap: 26px; }
.pm2-step  { display: flex; gap: 20px; align-items: flex-start; }
.pm2-step-n {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  color: rgba(10,10,10,0.28); flex: 0 0 24px; padding-top: 5px;
}
.pm2-step-nm { font-size: 0.86rem; font-weight: 500; line-height: 1.6; color: rgba(10,10,10,0.72); margin-bottom: 6px; }
.pm2-step-d  { font-size: 0.78rem; font-weight: 300; line-height: 1.95; color: rgba(10,10,10,0.45); }
.pm2-dots { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   BODY COATING（COATING 01〜04 の5商品）専用の統一ルール。
   COMPARE / TECHNOLOGY / PROCESS / DURABILITY を1つのデザイン言語で揃える。
   白・細い1px罫線・タイポグラフィ・余白のみ。カード／背景ブロック／影／
   大きな角丸／星／ゲージ／色付き評価は使わない。
   .pm2-body が付くのは cat が COATING で始まる商品だけなので、
   OPTION / INTERIOR / MAINTENANCE / CAR WASH の表示は一切変わらない。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 情報の優先順位：商品名 ＞ リード ＞ 本文 ── */
.pm2-body .pm2-name {
  font-size: 1.5rem; font-weight: 600; letter-spacing: 0.02em;
  color: #0a0a0a; margin-bottom: 14px;
}
.pm2-body .pm2-lead {
  font-size: 1.22rem; font-weight: 600; line-height: 1.75;
  color: rgba(10,10,10,0.72); margin-bottom: 24px;
}
.pm2-body .pm2-desc {
  max-width: 780px; font-size: 0.94rem; font-weight: 400;
  line-height: 2.0; color: rgba(10,10,10,0.68);
}

/* ── セクション見出し（COMPARE / TECHNOLOGY / PROCESS / DURABILITY …）── */
.pm2-body .pm2-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em;
  color: rgba(10,10,10,0.4);
}

/* ── 左ラベル｜右値の行。3セクションとも同じ行高・同じ罫線・同じ左右位置 ── */
.pm2-body .pm2-kv-row,
.pm2-body .pm2-spec-row {
  padding: 17px 0; gap: 24px;
  border-bottom: 1px solid rgba(10,10,10,0.09);
}
.pm2-body .pm2-kv-row:last-child,
.pm2-body .pm2-spec-row:last-child { border-bottom: none; }
.pm2-body .pm2-kv-k,
.pm2-body .pm2-spec-row .pm2-label {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  color: rgba(10,10,10,0.38);
}
.pm2-body .pm2-kv-v,
.pm2-body .pm2-spec-val {
  font-family: 'Noto Sans JP', 'Montserrat', sans-serif;
  font-size: 1.1rem; font-weight: 500; line-height: 1.5;
  color: rgba(10,10,10,0.84); text-align: right; min-width: 0;
}
/* 値がまだ確定していない項目。確定値を入れたら自動的に通常表示に戻る。 */
.pm2-body .pm2-kv-v.is-tbd { color: rgba(10,10,10,0.3); font-weight: 400; }

/* 「UVマーカーによる塗布確認」のような長い値は無理に大きくしない */
.pm2-body .pm2-kv-v.is-long {
  font-size: 0.92rem; font-weight: 500; line-height: 1.75;
}

/* ── SP 375px：順序は同じ。PRICEは2段、PROCESSは既存の横スワイプ＋ドット ── */
@media (max-width: 600px) {
  .pm2-wrap { padding: 30px 20px 36px; }
  .pm2-sec  { max-width: none; }
  .pm2-eyebrow { gap: 10px; letter-spacing: 0.2em; margin-bottom: 12px; }
  .pm2-name { font-size: 1.04rem; margin-bottom: 16px; }
  .pm2-lead { font-size: 1.2rem; line-height: 1.72; margin-bottom: 20px; }
  .pm2-desc { font-size: 0.82rem; line-height: 1.95; }
  .pm2-desc-p { font-size: 0.88rem; line-height: 1.95; }
  .pm2-desc-p + .pm2-desc-p { margin-top: 18px; }
  .pm2-desc-em + .pm2-desc-p { margin-top: 8px; }
  .pm2-text { font-size: 0.85rem; line-height: 2; }
  .pm2-rule { margin: 32px 0; max-width: none; }
  .pm2-pr { flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px 0; }
  .pm2-price-sub { font-size: 0.76rem; margin-top: 24px; }
  .pm2-price-note { font-size: 0.76rem; line-height: 1.95; margin-top: 18px; }
  .pm2-badge { font-size: 0.58rem; margin-left: 8px; padding: 3px 10px; }
  .pm2-sub-h { font-size: 0.96rem; }
  .pm2-kv-row { gap: 14px; padding: 12px 0; }
  .pm2-kv-k { font-size: 0.62rem; letter-spacing: 0.08em; }
  .pm2-kv-v { font-size: 0.82rem; }
  .pm2-desc-note { font-size: 0.74rem; margin-top: 14px; }
  .pm2-pr-amt { font-size: 1.16rem; }
  .pm2-rec li { font-size: 0.85rem; gap: 12px; }
  .pm2-steps {
    flex-direction: row; gap: 26px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .pm2-steps::-webkit-scrollbar { display: none; }
  /* 工程も囲まない。横スワイプとスナップは維持し、区切りは余白だけで示す。
     囲みが無いぶん、隣の工程が半端に見切れると文字が切れたように見えるため、
     1画面に1工程ずつ収める。何枚あるかは下のドットで示す。 */
  .pm2-step {
    flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
    flex-direction: column; gap: 8px;
    padding: 4px 0;
  }
  .pm2-step-n { flex: none; padding-top: 0; }
  .pm2-dots { display: flex; justify-content: center; gap: 5px; margin-top: 14px; flex-wrap: wrap; }
  .pm2-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(10,10,10,0.16); transition: background 0.2s; }
  .pm2-dots span.on { background: rgba(10,10,10,0.55); }

  /* ── BODY COATING：SPでも左ラベル｜右値の2列を維持し、3セクション同じルール ── */
  .pm2-body .pm2-name { font-size: 1.22rem; margin-bottom: 12px; }
  .pm2-body .pm2-lead { font-size: 1.02rem; line-height: 1.75; margin-bottom: 18px; }
  .pm2-body .pm2-desc { font-size: 0.88rem; line-height: 1.95; }
  .pm2-body .pm2-label { font-size: 0.66rem; letter-spacing: 0.26em; }
  .pm2-body .pm2-kv-row,
  .pm2-body .pm2-spec-row { padding: 14px 0; gap: 14px; }
  .pm2-body .pm2-kv-k,
  .pm2-body .pm2-spec-row .pm2-label { font-size: 0.7rem; letter-spacing: 0.12em; flex: 0 1 auto; }
  .pm2-body .pm2-kv-v,
  .pm2-body .pm2-spec-val { font-size: 1rem; white-space: normal; }
  .pm2-body .pm2-kv-v.is-long { font-size: 0.86rem; line-height: 1.8; }
}

/* ─── BODY COATING モーダル（glass / graphene / ceramic / ceramic3 / cnt）───
   ① 商品名 ② 一言リード ③ こんな方におすすめ ④ 料金 ⑤ 基本情報
   ⑥ この商品の特徴 ⑦ FEATURES ⑧ 施工工程を見る（折りたたみ） ⑨ WEB予約する
   セクションの区切りは .pm2-rule ではなく各ブロックの上罫線で作り、
   意味のない大きな縦余白を出さない。 */
.pm2-bc { padding: 44px 56px 52px; }
.pm2-bc .pm2-bc-head { padding-bottom: 26px; }
.pm2-bc .pm2-bc-head .pm2-name { margin-bottom: 10px; }
.pm2-bc .pm2-bc-head .pm2-lead { margin-bottom: 0; }
.pm2-bc .pm2-bc-block {
  padding-top: 26px; margin-top: 26px;
  border-top: 1px solid rgba(10,10,10,0.09);
}
.pm2-bc .pm2-bc-block .pm2-label { margin-bottom: 14px; }
.pm2-bc .pm2-bc-rec .pm2-sub-h { margin-bottom: 8px; }
.pm2-bc .pm2-bc-rec .pm2-text  { margin: 0; }

/* ⑥ この商品の特徴 */
.pm2-bc-points { display: flex; flex-direction: column; gap: 18px; }
.pm2-bc-point-h {
  font-size: 0.9rem; font-weight: 600; line-height: 1.7;
  color: rgba(10,10,10,0.82); margin: 0 0 6px;
}
.pm2-bc-point-d {
  font-size: 0.82rem; font-weight: 300; line-height: 1.95;
  color: rgba(10,10,10,0.5); margin: 0;
}
.pm2-bc-points + .pm2-kv { margin-top: 18px; }
.pm2-bc-points + .pm2-bc-tags { margin-top: 18px; }
.pm2-bc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pm2-kv + .pm2-bc-tags { margin-top: 16px; }
.pm2-bc-tag {
  font-size: 0.78rem; font-weight: 500; color: rgba(10,10,10,0.68);
  padding: 7px 14px; border: 1px solid rgba(10,10,10,0.14); border-radius: 999px;
}
.pm2-bc-closing { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(10,10,10,0.06); }
.pm2-bc-closing .pm2-desc-p { margin-top: 0; }
.pm2-bc-closing .pm2-desc-em + .pm2-desc-p { margin-top: 6px; }

/* ⑧ 施工工程（折りたたみ・初期状態は閉） */
.pm2-bc .pm2-bc-block .pm2-feat-item:last-child { padding-bottom: 0; }
.pm2-bc .pm2-bc-last { border-top: 0; padding-top: 0; margin-top: 20px; }
.pm2-bc-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(10,10,10,0.72); padding: 15px 0;
  border-top: 1px solid rgba(10,10,10,0.09);
  border-bottom: 1px solid rgba(10,10,10,0.09);
}
.pm2-bc-summary::-webkit-details-marker { display: none; }
.pm2-bc-summary-n {
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em; color: rgba(10,10,10,0.38);
}
.pm2-bc-summary-mark {
  margin-left: auto; width: 9px; height: 9px;
  border-right: 1.5px solid rgba(10,10,10,0.45);
  border-bottom: 1.5px solid rgba(10,10,10,0.45);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s;
}
.pm2-bc-details[open] .pm2-bc-summary-mark { transform: rotate(-135deg) translate(-3px,-3px); }
.pm2-bc-details[open] .pm2-bc-summary { border-bottom-color: transparent; }
.pm2-bc-steps { padding: 24px 0 4px; }

/* ⑨ WEB予約：既存の .btn-reserve と同じ見た目。商品情報より目立たせないため
   全幅にはせず、中央に置く */
.pm2-bc-cta { margin-top: 30px; display: flex; justify-content: center; }
.pm2-bc-btn {
  display: block; width: 100%; max-width: 300px; text-align: center; text-decoration: none;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  padding: 14px; border-radius: 999px; background: #1560d4; color: #ffffff;
  transition: opacity .2s;
}
.pm2-bc-btn:hover { opacity: .85; }

@media (max-width: 600px) {
  .pm2-bc { padding: 28px 22px 40px; }
  .pm2-bc .pm2-bc-head { padding-bottom: 20px; }
  .pm2-bc .pm2-bc-block { padding-top: 20px; margin-top: 20px; }
  .pm2-bc-points { gap: 16px; }
  .pm2-bc-point-h { font-size: 0.86rem; }
  .pm2-bc-steps { max-height: none; overflow: visible; }
  .pm2-bc-cta { margin-top: 24px; }
  .pm2-bc-btn { max-width: none; }
}