@charset "UTF-8";
/* ============================================================
   menu-lp — 施術LP（CPT: menu の新デザイン個別ページ）
   ------------------------------------------------------------
   Figma: 作業用3 / 施術LPテンプレート（2037:520）
          【ライト版】施術LPテンプレート（2037:831）
   ライト版はフル版のサブセット（セクションが減るだけ）なので
   CSSは1本。セクションの出し分けはテンプレート側（SCF空欄＝非表示）。

   共通部品：
   ・ヒーロー           … lower.css の .p-hero（合成・ティントも共通）
   ・見出し             … top.css の .section-title（帯上は白、白背景は #727576/15%）
   ・ボタン             … top.css の .btn--more（金グラデpill）
   ・CV・アクセス       … footer.php が全ページ共通で出力
============================================================ */

.p-menu-lp {
  /* --- トークン（price.css と同系） --- */
  --lp-main:   #51b8c8;
  --lp-teal:   #3fa6b6;
  --lp-text:   #727576;
  --lp-text2:  #927957;
  --lp-accent: #d4bc8c;
  --lp-bg:     #e6eef1;
  --lp-sale:   #e54346;
  --lp-dark:   #3a4041;

  color: var(--lp-text);
  font-family: var(--ff-serif);
  font-size: 16px;
  line-height: 2;
}

/* --- 共通レイアウト --- */
.p-menu-lp__inner {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 20px;
}
.p-menu-lp__inner--narrow { max-width: 840px; }

/* セクション見出し：中央寄せ＋下に羽アイコン */
.p-menu-lp section .section-title { text-align: center; }
.p-menu-lp section .p-band__icon { margin: 16px auto 0; }

/* 白背景・淡背景セクションの見出しはテキスト色に落とす（/price/ と同一） */
.p-menu-lp__case .section-title__en,
.p-menu-lp__risk .section-title__en,
.p-menu-lp__faq .section-title__en {
  color: var(--lp-text);
  opacity: .15;
}
.p-menu-lp__case .section-title__ja,
.p-menu-lp__risk .section-title__ja,
.p-menu-lp__faq .section-title__ja {
  color: var(--lp-text);
}
/* 料金の見出しはティール（透かし英字も薄い水色） */
.p-menu-lp__price .section-title__en {
  color: var(--lp-main);
  opacity: .15; /* 青見出しの透かしは #51B8C8 / 15%（他下層と統一） */
}
.p-menu-lp__price .section-title__ja {
  color: var(--lp-main);
}

/* 料金表のグループ（製剤・カテゴリ別。/price/ の __sep と同用途） */
.p-menu-lp__price-group {
  max-width: 800px;
  margin: 48px auto 0;
}
.p-menu-lp__price-group-title {
  margin: 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--lp-main);
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--lp-text);
}
.p-menu-lp__price-group .p-menu-lp__price-table {
  margin-top: 16px;
}

/* CTAボタン（金グラデpillの寸法だけ上書き） */
.p-menu-lp__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 441px;
  max-width: 100%;
  min-height: 60px;
  margin: 48px auto 0;
}

/* ============================================================
   ヒーロー（lower.css .p-hero がベース）
   ------------------------------------------------------------
   LPはサブコピーの行数が施術ごとに違うため、absolute固定配置のままだと
   長文ページでCVバーに食い込む。h1の開始位置（上から377px）は全ページ
   固定のまま、ブロックを通常フローに戻してヒーロー自体を下に伸ばす。
============================================================ */
.p-menu-lp .p-hero {
  height: auto;
  min-height: 669px; /* 短いページは従来の高さを維持 */
}
/* 共通のつなぎ画像（hero/plain.jpg）は明るい1枚絵で文字背面のコントラストが
   足りないため、/price/ 等の通常ヒーローと同系の「左が暗いグラデ」を重ねる。
   セレクタを plain.jpg に限定しているので、施術ごとの加工済み画像
   （{slug}_plain.jpg）に差し替わったページには影響しない */
.p-menu-lp .p-hero[style*="/hero/plain.jpg"]::after {
  background-image:
    linear-gradient(90deg, rgba(33, 95, 104, .5) 0%, rgba(33, 95, 104, .3) 45%, rgba(33, 95, 104, 0) 80%),
    var(--hero-img, none);
  background-position: center, center;
  background-size: cover, cover;
}
.p-menu-lp .p-hero__title {
  position: relative; /* ::before/::after より手前は維持しつつ通常フローへ */
  left: auto;
  top: auto;
  max-width: none;
  padding: 377px 16px 120px 86px; /* 上=h1固定位置／下=CVバー（下に59pxはみ出す）+余白 */
}
.p-menu-lp__hero-title .p-hero__ja {
  margin: 0;
  letter-spacing: .1em; /* 大きさ・太さはフル版の施術名と同じ（lower.css .c-mhero__name） */
  line-height: 1.4;
}
/* PCは文字のブロックを上下中央・やや左に寄せる（2026-11-04 先方依頼：左下に寄りすぎ） */
@media (min-width: 769px) {
  .p-menu-lp .p-hero {
    display: flex;
    align-items: center;
  }
  .p-menu-lp .p-hero__title {
    padding: 200px 16px 150px clamp(86px, 14vw, 280px); /* 上=ヘッダー分／下=CVバー分 */
  }
}
.p-menu-lp__hero-sub {
  margin: 20px 0 0;
  max-width: 900px; /* 長文サブコピーの行長を読みやすく抑える */
  font-size: 16px;
  line-height: 2;
  letter-spacing: .1em;
}

/* ============================================================
   こんなお悩みの方へ（Troubles）
   写真背景＋半透明白カード
============================================================ */
.p-menu-lp__troubles {
  position: relative;
  isolation: isolate; /* 背景写真・オーバーレイの z-index:-1/-2 をセクション内に閉じ込める */
  padding: 120px 20px 80px;
  background: linear-gradient(180deg, #51b8c8, #7aced2); /* 写真がない場合の地 */
}
/* 背景写真（テンプレの <img>。旧 background-size: cover / center と同じ見え方） */
.p-menu-lp__troubles-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 暗めのオーバーレイ #10262D 70% */
.p-menu-lp__troubles::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(16, 38, 45, .7);
}
.p-menu-lp__troubles-card {
  max-width: 620px;
  margin-inline: auto;
  padding: 48px 56px 56px;
  background: rgba(114, 117, 118, .6); /* Figma: #727576 60% */
  text-align: center;
}
.p-menu-lp__troubles-card .section-title__en {
  color: var(--c-white, #fff);
  opacity: .22;
  font-size: clamp(48px, 5vw, 72px);
}
.p-menu-lp__troubles-card .section-title__ja {
  color: var(--c-white, #fff);
  font-size: clamp(18px, 2vw, 22px);
}
.p-menu-lp__troubles-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: inline-block;
}
.p-menu-lp__troubles-list li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 15px;
  line-height: 2;
  color: var(--c-white, #fff);
}
/* チェックボックス（Figma: ☑） */
.p-menu-lp__troubles-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--c-white, #fff);
}
.p-menu-lp__troubles-list li::after {
  content: "";
  position: absolute;
  left: 3.8px;
  top: 16px;
  width: 7px;
  height: 4px;
  border-left: 1px solid var(--c-white, #fff);
  border-bottom: 1px solid var(--c-white, #fff);
  transform: rotate(-45deg);
}

/* ============================================================
   お悩み→解決ブリッジ（solution）
   ティール帯＋下向き三角で次セクションへ
============================================================ */
.p-menu-lp__solution {
  position: relative;
  padding: 84px 20px 0;
  background: var(--c-white, #fff);
  color: var(--lp-main);
  text-align: center;
}
.p-menu-lp__solution-title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 2;
  letter-spacing: .12em;
}
.p-menu-lp__solution-text {
  margin: 14px 0 0;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--lp-text);
}
/* 縦ライン（見出し上の演出。Figma: line 2本） */
.p-menu-lp__solution::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 48px;
  background: var(--lp-main);
  opacity: .6;
}
/* 写真セクション側の縦棒（白・同じ長さ）：Figmaの上下連続ライン */
.p-menu-lp__troubles::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 48px;
  background: var(--c-white, #fff);
}
/* 次セクションに食い込む下向き三角
   高さぴったりで接すると、画面の拡大率（Windowsの125%・150%表示やブラウザのズーム）によっては
   小数ピクセルの丸めで帯との境目に細い線が出るため、1px上に重ねる（同じ白なので重なりは見えない） */
.p-menu-lp__solution::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -99px;
  transform: translateX(-50%);
  width: min(880px, 100%);
  height: 100px;
  background: var(--c-white, #fff);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
  pointer-events: none;
}
/* 白背景上のCTAは金グラデ塗り（共通の強CTA仕様） */
.p-menu-lp__solution .p-menu-lp__solution-btn {
  background: linear-gradient(90deg, #e6d5b0 0%, #b19c71 100%);
  border: 0;
  color: var(--c-white, #fff);
  margin-top: 36px;
}

/* ============================================================
   施術説明（About）ティール背景
============================================================ */
.p-menu-lp__about {
  padding: 160px 0 80px;
  background: var(--lp-main);
  color: var(--c-white, #fff);
}
.p-menu-lp__about .section-title__ja { font-size: clamp(20px, 2.2vw, 26px); }
.p-menu-lp__about-body {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .06em;
}
.p-menu-lp__about-body p { margin: 0 0 1.6em; }
.p-menu-lp__about-body p:last-child { margin-bottom: 0; }
/* 説明文の小見出し付きブロック（【埋没法】【切開法】など）は dl/dt/dd で入れる（<br>2連続の段落区切りは使わない） */
.p-menu-lp__about-body dl { margin: 0 0 1.6em; }
.p-menu-lp__about-body dl:last-child { margin-bottom: 0; }
.p-menu-lp__about-body dt { margin: 0; }
.p-menu-lp__about-body dd { margin: 0 0 1.6em; }
.p-menu-lp__about-body dd:last-child { margin-bottom: 0; }

/* 基本情報テーブル */
.p-menu-lp__specs {
  width: 100%;
  max-width: 680px;
  margin: 44px auto 0;
  border-collapse: collapse;
  background: var(--c-white, #fff);
  font-size: 14px;
  line-height: 2;
}
.p-menu-lp__specs th {
  width: 160px;
  padding: 10px 16px;
  background: var(--c-gold-light);
  color: var(--c-white, #fff);
  font-weight: 400;
  letter-spacing: .08em;
  text-align: center;
  vertical-align: middle;
  border-bottom: 2px solid var(--c-white, #fff);
}
.p-menu-lp__specs td {
  padding: 10px 20px;
  color: var(--lp-text);
  border-bottom: 1px solid #e8edee;
}
.p-menu-lp__specs tr:last-child th,
.p-menu-lp__specs tr:last-child td { border-bottom: 0; }

.p-menu-lp__about-image {
  max-width: 580px;
  margin: 48px auto 0;
}
.p-menu-lp__about-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   Wing Clinicの強み（Our Strengths）
============================================================ */
.p-menu-lp__strengths {
  padding: 72px 0;
  background: linear-gradient(180deg, #5fc0cd 0%, #7aced2 100%);
  color: var(--c-white, #fff);
}
.p-menu-lp__strength-list {
  max-width: 800px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  counter-reset: strength;
}
.p-menu-lp__strength {
  display: flex;
  background: var(--c-white, #fff);
  color: var(--lp-text);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(16, 62, 71, .12);
  overflow: hidden;
}
.p-menu-lp__strength-image {
  flex: 0 0 180px;
  background: #e5e5e5;
}
.p-menu-lp__strength-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-menu-lp__strength-text {
  flex: 1;
  padding: 24px 32px 26px;
}
.p-menu-lp__strength-text h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: var(--lp-teal);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.6;
}
.p-menu-lp__strength-no {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: var(--ff-en);
  font-size: 28px;
  color: var(--lp-teal);
  border-right: 1px solid var(--lp-accent);
  padding-right: 16px;
}
.p-menu-lp__strength-no small {
  font-size: 11px;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.p-menu-lp__strength-text p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 2;
}

/* 見出し「施術名の特徴」が2行になったときの行間保険（1行時は影響なし） */
.p-menu-lp__strengths .section-title__ja { line-height: 1.4; }

/* ============================================================
   症例（Case）
============================================================ */
.p-menu-lp__case {
  /* デザイン準拠：セクション背景は白、カード側を薄ブルーにする */
  padding: 72px 0;
  background: var(--c-white, #fff);
}
.p-menu-lp__case-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* トグル開閉時に隣のカードの枠が連動して伸びないように */
  gap: 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.p-menu-lp__case-card {
  /* 構造は症例紹介（/case/）のカードと同じ（写真5:6枠・横型は黒帯contain・
     黒タイトル・名詞トグル）。配色はフル版LPデザイン準拠で薄ブルーカード */
  padding: 24px 16px 16px;
  background: var(--lp-bg);
  color: #727576;
}
.p-menu-lp__case-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
/* 連結1枚（case_image）：正方形・余白なしでそのまま敷く */
.p-menu-lp__case-photos--single {
  display: block;
}
.p-menu-lp__case-photos--single img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e6e6e6;
}
.p-menu-lp__case-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.p-menu-lp__case-photo figcaption {
  order: -1;
  padding: 2px 10px;
  background: var(--lp-main);
  color: var(--c-white, #fff);
  font-size: 15px;
  line-height: 2;
  text-align: center;
}
.p-menu-lp__case-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  background: #e6e6e6;
}
/* 横型写真：枠の高さは縦型と同じまま、上下黒帯（レターボックス）で原寸比率表示 */
.p-menu-lp__case-card--landscape .p-menu-lp__case-photo img {
  object-fit: contain;
  background: #000;
}
.p-menu-lp__case-title {
  margin: 20px 0 0;
  color: #4b4b4b;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.6;
}
.p-menu-lp__case-detail {
  margin-top: 14px;
  border-top: 1px solid #d2dfe3; /* 薄ブルーカード上でも見える区切り線 */
  padding-top: 12px;
}
.p-menu-lp__case-detail summary {
  cursor: pointer;
  color: var(--lp-main);
  font-size: 13px;
  letter-spacing: .05em;
}
.p-menu-lp__case-detail summary::marker {
  color: var(--lp-main);
}
.p-menu-lp__case-detail dl {
  margin: 10px 0 0;
}
.p-menu-lp__case-detail dl div {
  margin-top: 8px;
}
.p-menu-lp__case-detail dt {
  color: #927957;
  font-size: 12px;
  font-weight: 600;
}
.p-menu-lp__case-detail dd {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 2;
}
.p-menu-lp__case-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #8a8f90;
}
/* セクション共通注記（もっと見るボタンの直上に1回だけ表示） */
.p-menu-lp__case-note--common {
  margin: 28px 0 0;
  text-align: center;
  font-size: 12px;
}

/* ============================================================
   料金（Price）
============================================================ */
.p-menu-lp__price {
  padding: 72px 0;
  background: var(--lp-bg);
}
.p-menu-lp__case + .p-menu-lp__price { padding-top: 0; }

.p-menu-lp__price-table {
  width: 100%;
  max-width: 800px;
  margin: 48px auto 0;
  border-collapse: collapse;
  background: var(--c-white, #fff);
  font-size: 15px;
}
.p-menu-lp__price-table thead th {
  padding: 10px 24px;
  background: var(--lp-main);
  color: var(--c-white, #fff);
  font-weight: 400;
  letter-spacing: .06em;
  text-align: left;
  white-space: nowrap; /* 「モニター料金（税込）」が2行に折れないように */
}
.p-menu-lp__price-table thead th:first-child {
  width: 55%;
  text-align: center;
}
.p-menu-lp__price-table thead th.p-menu-lp__price-col { text-align: right; }
.p-menu-lp__price-table tbody th,
.p-menu-lp__price-table tbody td {
  padding: 16px 24px 12px;
  font-weight: 400;
  text-align: left;
  /* 金の罫線はセル全幅ではなく文字位置から始まるインセット線（デザイン準拠） */
  background-color: var(--c-white, #fff);
  background-image: linear-gradient(var(--lp-accent), var(--lp-accent));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left bottom;
}
.p-menu-lp__price-table tbody tr > *:first-child {
  background-size: calc(100% - 24px) 1px;
  background-position: right bottom;
}
.p-menu-lp__price-table tbody tr > *:last-child {
  background-size: calc(100% - 24px) 1px;
  background-position: left bottom;
}
.p-menu-lp__price-table tbody tr:last-child > * { background-image: none; } /* 最終行は罫線なし */
.p-menu-lp__price-table tbody td.p-menu-lp__price-col {
  text-align: right;
  white-space: nowrap;
  width: 170px;
}
.p-menu-lp__price-table td.is-sale { color: var(--lp-sale); }

/* 含まれるもの／別途費用 */
.p-menu-lp__price-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 800px;
  margin: 40px auto 0;
  padding: 40px 48px;
  background: var(--c-white, #fff);
  border: 1px solid var(--lp-accent);
}
/* 中央の金の仕切り線 */
.p-menu-lp__price-box--included {
  padding-right: 44px;
  border-right: 1px solid var(--lp-accent);
}
.p-menu-lp__price-box--extra { padding-left: 44px; }
/* 片方しかないとき（別途費用なし等）は枠の中央に置く */
.p-menu-lp__price-boxes > .p-menu-lp__price-box:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  border-right: 0;
  padding-right: 0;
  padding-left: 0;
}
.p-menu-lp__price-box h3 {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .1em;
  color: #4b4b4b;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lp-accent);
}
.p-menu-lp__price-box--extra h3 {
  border-bottom: 0;
  padding: 6px 12px;
  background: #eae2cd;
}
.p-menu-lp__price-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 2;
}
.p-menu-lp__price-box li {
  position: relative;
  padding-left: 22px;
}
.p-menu-lp__price-box li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--lp-accent);
  border-bottom: 2px solid var(--lp-accent);
  transform: rotate(-45deg);
}

/* 分割払い・モニター募集の帯 */
.p-menu-lp__price-band {
  max-width: 800px;
  margin: 40px auto 0;
}
.p-menu-lp__price-band h3 {
  margin: 0;
  padding: 8px 16px;
  background: var(--lp-main);
  color: var(--c-white, #fff);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .1em;
  text-align: center;
}
.p-menu-lp__price-band p {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 2;
}
.p-menu-lp__price-note {
  max-width: 800px;
  margin: 16px auto 0;
  font-size: 12px;
  line-height: 2;
  color: #8a8f90;
}

/* ============================================================
   リスク・副作用・禁忌（Caution）白背景
============================================================ */
.p-menu-lp__risk {
  padding: 72px 0;
  background: var(--c-white, #fff);
}
.p-menu-lp__risk-card {
  margin-top: 48px;
  padding: 40px 48px 44px;
  background: #eef3f5;
}
.p-menu-lp__risk-card h3 {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #b9c4c8;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-text-dark, #333);
}
.p-menu-lp__risk-card h3 + h3,
.p-menu-lp__risk-list + h3,
.p-menu-lp__contra-list + h3 { margin-top: 40px; }
.p-menu-lp__risk-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* デザイン準拠：行間の隙間・ボーダーなし */
}
.p-menu-lp__risk-list > div {
  display: flex;
  align-items: stretch;
  gap: 0; /* dtとddの間も隙間なし */
  font-size: 14px;
  line-height: 2;
}
.p-menu-lp__risk-list dt {
  flex: 0 0 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: var(--lp-main);
  color: var(--c-white, #fff);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
.p-menu-lp__risk-list dd {
  flex: 1;
  margin: 0;
  padding: 5px 14px;
  background: var(--c-white, #fff);
  border-bottom: 1px solid #dfe4e6;
}
.p-menu-lp__risk-list > div:last-child dt,
.p-menu-lp__risk-list > div:last-child dd { border-bottom: 0; }
.p-menu-lp__risk-card h3:nth-of-type(2) { margin-top: 40px; }
.p-menu-lp__contra-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 2;
}
.p-menu-lp__contra-list li {
  position: relative;
  padding-left: 16px;
}
.p-menu-lp__contra-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  background: var(--lp-main);
  transform: rotate(45deg);
}

/* 注意事項（ダーク箱） */
.p-menu-lp__caution-box {
  max-width: 640px;
  margin: 48px auto 0;
  padding: 32px 40px 36px;
  background: #4b4b4b;
  color: var(--c-white, #fff);
  border: 1px solid var(--lp-main);
  border-radius: 4px;
}
.p-menu-lp__caution-box h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--lp-main);
  color: var(--lp-main);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .12em;
}
.p-menu-lp__caution-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.p-menu-lp__caution-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 2;
}
.p-menu-lp__caution-box li {
  position: relative;
  padding-left: 14px;
}
.p-menu-lp__caution-box li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ============================================================
   施術当日の流れ（Flow）ティール背景・ジグザグカード
============================================================ */
.p-menu-lp__flow {
  padding: 72px 0;
  background: linear-gradient(180deg, #4bb3c2 0%, #7aced2 100%);
  color: var(--c-white, #fff);
}
.p-menu-lp__flow-list {
  max-width: 800px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}
.p-menu-lp__flow-step {
  position: relative;
  display: flex;
  gap: 32px;
  padding: 28px 32px;
  background: var(--c-white, #fff);
  color: var(--lp-text);
  box-shadow: 0 6px 20px rgba(16, 62, 71, .12);
}
.p-menu-lp__flow-step--reverse { flex-direction: row-reverse; }
/* ステップ間の金の三角コネクタ */
.p-menu-lp__flow-step + .p-menu-lp__flow-step { margin-top: 40px; }
.p-menu-lp__flow-step + .p-menu-lp__flow-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  width: 28px;
  height: 16px;
  background: var(--lp-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-menu-lp__flow-image {
  flex: 0 0 220px;
  align-self: center;
}
.p-menu-lp__flow-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.p-menu-lp__flow-text { flex: 1; align-self: center; }
.p-menu-lp__flow-text h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  color: var(--lp-teal);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .1em;
}
.p-menu-lp__flow-no {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: var(--ff-en);
  font-size: 26px;
  border-right: 1px solid var(--lp-accent);
  padding-right: 14px;
}
.p-menu-lp__flow-no small {
  font-size: 11px;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.p-menu-lp__flow-duration {
  padding: 1px 10px;
  border: 1px solid var(--lp-teal);
  font-size: 12px;
  letter-spacing: .04em;
}
.p-menu-lp__flow-text p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 2;
}

/* ============================================================
   よくある質問（FAQ）白背景
============================================================ */
.p-menu-lp__faq {
  padding: 72px 0 84px;
  background: var(--c-white, #fff);
}
.p-menu-lp__faq-list { margin: 40px 0 0; }
.p-menu-lp__faq-item + .p-menu-lp__faq-item { margin-top: 8px; }
.p-menu-lp__faq-item dt button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid #cfe4e8;
  color: var(--c-text-dark, #333);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: .06em;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  transition: opacity .2s var(--ease-out, ease);
}
.p-menu-lp__faq-item dt button:hover { opacity: .7; }
.p-menu-lp__faq-q,
.p-menu-lp__faq-a {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--c-white, #fff);
  font-family: var(--ff-en);
  font-size: 15px;
}
.p-menu-lp__faq-q { background: var(--lp-main); }
.p-menu-lp__faq-a { background: var(--lp-accent); }
.p-menu-lp__faq-question { flex: 1; }
.p-menu-lp__faq-icon {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--lp-main);
  border-bottom: 2px solid var(--lp-main);
  transform: rotate(225deg) translateY(2px);
  transition: transform .3s var(--ease-out, ease);
}
.p-menu-lp__faq-item dt button[aria-expanded="false"] .p-menu-lp__faq-icon {
  transform: rotate(45deg) translateY(-2px);
}
.p-menu-lp__faq-item dd {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 16px 8px 8px;
}
.p-menu-lp__faq-item dd p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 2;
}

/* ============================================================
   担当医師紹介（Our Doctors）
============================================================ */
.p-menu-lp__doctor { background: var(--lp-main); }
.p-menu-lp__doctor-head { padding: 72px 20px 48px; }
.p-menu-lp__doctor-body {
  background: var(--lp-dark);
  color: var(--c-white, #fff);
  padding: 56px 0;
}
.p-menu-lp__doctor-grid {
  display: flex;
  gap: 56px;
  max-width: 900px;
}
.p-menu-lp__doctor-photo {
  flex: 0 0 280px;
  margin: 0;
}
.p-menu-lp__doctor-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.p-menu-lp__doctor-photo figcaption {
  margin-top: 16px;
  font-size: 20px;
  letter-spacing: .2em;
}
.p-menu-lp__doctor-photo figcaption small {
  font-size: 13px;
  margin-right: 14px;
  letter-spacing: .1em;
}
.p-menu-lp__doctor-info { flex: 1; }
.p-menu-lp__doctor-quals {
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  list-style: none;
  color: var(--lp-accent);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .06em;
}
.p-menu-lp__doctor-info h3 {
  margin: 0 0 12px;
  color: #8fd4dc;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .12em;
}
.p-menu-lp__doctor-info p {
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(122, 206, 210, .5);
  font-size: 14px;
  line-height: 2;
}
.p-menu-lp__doctor-info p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.p-menu-lp__doctor-info small {
  font-size: 11px;
  opacity: .7;
}
.p-menu-lp__doctor-foot { padding: 8px 20px 72px; }
.p-menu-lp__doctor-foot .p-menu-lp__cta-btn { margin-top: 0; }

/* ============================================================
   SP
============================================================ */
@media (max-width: 768px) {
  .p-menu-lp__inner { padding-inline: 12px; }
  .p-menu-lp__cta-btn { width: 100%; min-height: 52px; margin-top: 36px; }
  .p-menu-lp .p-hero { min-height: 360px; }
  /* SPは文字が全幅に回るので、左寄せグラデではなく全面を均一に落とす */
  .p-menu-lp .p-hero[style*="/hero/plain.jpg"]::after {
    background-image:
      linear-gradient(rgba(33, 95, 104, .38), rgba(33, 95, 104, .38)),
      var(--hero-img, none);
  }
  .p-menu-lp .p-hero__title { padding: 190px 12px 44px; } /* SPはCV非表示なので下余白は小さく */
  .p-menu-lp__hero-sub { margin-top: 14px; font-size: 13px; line-height: 2; }

  .p-menu-lp__troubles { padding: 48px 12px; }
  .p-menu-lp__troubles-card { padding: 32px 24px 36px; }
  .p-menu-lp__troubles-list { margin: 16px 0 0; }
  .p-menu-lp__troubles::after { height: 32px; }
  .p-menu-lp__solution::before { height: 32px; }

  .p-menu-lp__solution { padding: 64px 12px 32px; }
  .p-menu-lp__solution::after { width: 86%; height: 36px; bottom: -35px; }

  .p-menu-lp__about,
  .p-menu-lp__strengths,
  .p-menu-lp__case,
  .p-menu-lp__price,
  .p-menu-lp__risk,
  .p-menu-lp__flow,
  .p-menu-lp__faq { padding-top: 56px; padding-bottom: 56px; }
  .p-menu-lp__about { padding-top: 72px; }
  .p-menu-lp__about-body { text-align: left; }
  .p-menu-lp__specs th { width: 110px; padding: 6px 8px; font-size: 12px; }
  .p-menu-lp__specs td { padding: 6px 12px; font-size: 13px; }

  /* 「施術名の特徴」が長い施術でも1行に収まるようSPは少し縮める */
  .p-menu-lp__strengths .section-title__ja { font-size: 17px; }
  .p-menu-lp__strength { flex-direction: column; }
  .p-menu-lp__strength-image { flex: none; }
  .p-menu-lp__strength-image img { aspect-ratio: 16 / 7; height: auto; }
  .p-menu-lp__strength-text { padding: 16px 16px 20px; }

  .p-menu-lp__case-list { grid-template-columns: 1fr; }
  .p-menu-lp__case-title { font-size: 15px; } /* 症例紹介（/case/）のSPと同サイズ */

  .p-menu-lp__price-table { font-size: 13px; }
  /* SPはヘッダーの折返しを許可して3列を画面幅に収める（nowrapのままだとモニター列が見切れる） */
  .p-menu-lp__price-table thead th {
    white-space: normal;
    font-size: 11px;
    line-height: 1.6;
    padding: 6px;
    vertical-align: middle;
  }
  .p-menu-lp__price-table thead th:first-child { width: auto; }
  .p-menu-lp__price-table tbody th { padding: 10px 6px 8px; }
  .p-menu-lp__price-table tbody td.p-menu-lp__price-col {
    width: auto;
    font-size: 12px;
    padding: 10px 6px 8px;
  }
  .p-menu-lp__price-table tbody tr > *:first-child,
  .p-menu-lp__price-table tbody tr > *:last-child { background-size: calc(100% - 6px) 1px; }
  .p-menu-lp__price-boxes { grid-template-columns: 1fr; padding: 24px 20px; }
  .p-menu-lp__price-box--included {
    border-right: 0;
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--lp-accent);
  }
  .p-menu-lp__price-box--extra { padding-left: 0; }

  .p-menu-lp__risk-card { padding: 28px 20px 32px; }
  .p-menu-lp__risk-list > div { flex-direction: column; }
  .p-menu-lp__risk-list dt { flex: none; }
  .p-menu-lp__caution-box { padding: 24px 20px 28px; }

  .p-menu-lp__flow-step,
  .p-menu-lp__flow-step--reverse { flex-direction: column; gap: 16px; padding: 20px 20px 24px; }
  .p-menu-lp__flow-image { flex: none; }

  .p-menu-lp__faq-item dt button { font-size: 15px; gap: 12px; }
  .p-menu-lp__faq-q, .p-menu-lp__faq-a { width: 28px; height: 28px; font-size: 13px; }

  .p-menu-lp__doctor-grid { flex-direction: column; gap: 32px; }
  .p-menu-lp__doctor-photo { flex: none; max-width: 280px; }
}

/* 症例カード：モニター価格の注記（case_price_monitor ONのとき費用の下に表示） */
.p-menu-lp__case-price-note {
  display: block;
  margin-top: 4px;
  color: #c25f5f; /* 落ち着いたくすみレッド */
  font-size: 11px;
}

/* ヒーローのサブコピー：空行区切りを <p> に分けたときの段落間（旧 <br><br> の空行1行分） */
.p-menu-lp__hero-sub p { margin: 0; }
.p-menu-lp__hero-sub p + p { margin-top: 32px; }
@media (max-width: 768px) {
  .p-menu-lp__hero-sub p + p { margin-top: 24px; }
}