@charset "UTF-8";
/* ==========================================================================
   ペルケアページ専用スタイル（p-pelcare-）
   共通部品（c-）は common.css 側を使い、ここにはこのページ固有のものだけを書く。
   カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 1259-4519（PC 1440px）
   ※ 施術案内（1259-9957）・当院について（1259-10777）・
      はじめての方へ（1259-10583）と同じ改訂版。
   帯の噛み合わせ: 白（POINT）→ 黄（FEATURE）→ 水色（MENU）の順に
   次の帯が上に重なる。重なり量は負の margin-top で作っている。
   ========================================================================== */

/* ==========================================================================
   1. ページMV
      カンプ y135–914。ページMVボックスの上端はパンくずの下（絶対y=142）。
      左の白ボックス（Pick Up Menu ＋ ペルケア）は x180、
      リード文は x273 なので、白ボックス側は c-page-mv-body に入れずに置く。
   ========================================================================== */
.p-pelcare-mv {
  padding-top: 89px;
  padding-bottom: 80px;
}

/* 白ボックス（カンプ 571×125 @180,231）
   見た目は共通部品 c-page-mv-head。ここでは幅だけ指定する */
.p-pelcare-mv-head { width: 321px; }

/* リード文（カンプ 894×179 @273,655。太字部分は c-rich で p を分割） */
.p-pelcare-mv .c-page-mv-body { margin-top: 151px; }

.p-pelcare-mv-lead {
  max-width: 894px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.p-pelcare-mv-lead + .p-pelcare-mv-lead { margin-top: 16px; }

/* 写真（カンプ 982×408 @457,167。右端で見切れるので右側の角丸は付けない） */
.p-pelcare-mv-photo {
  left: 31.81%;
  top: 34px;
  width: 68.19%;
  border-radius: var(--r-card) 0 0 var(--r-card);
}

/* 装飾円（カンプの絶対y － 142px）
   このページはカンプ上で装飾円が写真より前面にあり、乗算で重なっている */
.p-pelcare-mv .c-deco-circle {
  z-index: 1;
  mix-blend-mode: multiply;
}

/* 右上の円は画面右端からの距離で置く。left: 1141px だと 1263px 未満の画面で
   画面外にはみ出し、横スクロールが発生してしまう（1440px時の位置は同じ） */
.p-pelcare-mv .c-deco-circle--cream { left: auto; right: 177px; top: -19px; width: 122px; height: 122px; }
.p-pelcare-mv .c-deco-circle--pink  { left: 400px;  top: 374px; width: 108px; height: 108px; }
.p-pelcare-mv .c-deco-circle--blue  { left: 349px;  top: 404px; width: 78px;  height: 78px; }

/* ==========================================================================
   2. POINT（骨盤底筋とは全員が鍛えるべき筋肉なんです！）
      カンプ y914–2154 の白帯（上2隅だけ 120px の角丸）。
      下端 160px 分は次の FEATURE 帯に隠れる。
   ========================================================================== */
.p-pelcare-point {
  position: relative;
  padding: 80px 0 325px;
  background: var(--c-white);
  border-radius: var(--r-band) var(--r-band) 0 0;
}

/* この帯の中身はカンプ幅 946px（l-inner よりさらに 64px 内側） */
.p-pelcare-point-inner {
  width: calc(100% - 32px);
  max-width: 946px;
  margin-left: auto;
  margin-right: auto;
}

/* 見出し行（グースケ ＋ POINT ＋ 和文見出し）は共通部品 c-point-head を使う */

/* 本文＋骨盤底筋の図（カンプ 608px ＋ 32px ＋ 308px） */
.p-pelcare-point-row { margin-top: 64px; }

.p-pelcare-point-text > * {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* 1段落目のあとだけ 16px 空ける（2・3段落目はカンプでは続けて組まれている） */
.p-pelcare-point-text > p + .c-rich { margin-top: 16px; }

.p-pelcare-point-figure img { width: 100%; }

/* 「骨盤底筋を鍛えると」＋左右の点線（点線は擬似要素で描き要素を増やさない） */
.p-pelcare-effect-title {
  margin-top: 64px;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.p-pelcare-effect-title::before,
.p-pelcare-effect-title::after {
  content: "";
  flex: none;
  width: 320px;
  border-top: 4px dotted var(--c-navy);
}

.p-pelcare-effect-title::before { margin-right: 24px; }
.p-pelcare-effect-title::after  { margin-left: 24px; }

/* 期待できる効果のpill（カンプ 811px の2カラム・間隔16px） */
.p-pelcare-effect-grid {
  width: calc(100% - 32px);
  max-width: 827px;
  margin: 40px auto -16px;
}

.p-pelcare-effect-grid > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}

.p-pelcare-effect-pill,
.p-pelcare-effect-more {
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
}

.p-pelcare-effect-pill {
  /* 字送りは最後の1文字の後ろにも入るので左 padding で相殺して中央に見せる */
  padding: 16px 16px 16px calc(16px + 0.2em);
  background: rgba(255, 220, 231, 0.5);
  border: 2px solid var(--c-navy);
  border-radius: 30px;
  box-shadow: 4px 4px 0 rgba(24, 61, 129, 0.25);
}

.p-pelcare-effect-more { padding: 16px 16px 16px calc(16px + 0.2em); }

/* ==========================================================================
   3. FEATURE（ペルケアの4つの特徴）
      カンプ y1994–3895 の黄色帯（上2隅だけ 120px の角丸）。
      直前の白帯に 160px 重ねる。
   ========================================================================== */
.p-pelcare-feature {
  position: relative;
  z-index: 1;
  margin-top: -160px;
  padding: 181px 0 256px;
  background: var(--c-pink);
  border-radius: var(--r-band) var(--r-band) 0 0;
}

/* 改訂版カンプは欧文と和文サブの間に余白・点線が無い */
.p-pelcare-feature .c-sec-title-en,
.p-pelcare-menu .c-sec-title-en { line-height: 1.05; }

.p-pelcare-feature .c-sec-title-ja,
.p-pelcare-menu .c-sec-title-ja { margin-top: 0; }


/* カード2×2（カンプ 522px×2・間隔32px・行間40px） */
.p-pelcare-cards {
  width: calc(100% - 32px);
  max-width: 1080px;
  margin: 40px auto 0;
}

.p-pelcare-cards > [class*="col-"] {
  display: flex;
  padding-left: 16px;
  padding-right: 16px;
}

.p-pelcare-cards > [class*="col-"]:nth-child(n + 3) { margin-top: 40px; }

.p-pelcare-card {
  width: 100%;
  padding: 40px;
  background: var(--c-white);
  border-radius: var(--r-card);
}

.p-pelcare-card > * + * { margin-top: 32px; }

.p-pelcare-card .c-numlabel-num { margin-top: 8px; }

.p-pelcare-card-photo {
  display: block;
  width: 100%;
  border-radius: var(--r-card);
}

.p-pelcare-card .c-card-title + .p-pelcare-card-text { margin-top: 16px; }

.p-pelcare-card .c-numlabel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.p-pelcare-card-text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* FEATURE 01 の「4種類のモード」表（カンプは4色の帯。画像にせずCSSで再現） */
.p-pelcare-mode {
  overflow: hidden;
  border: 1px solid var(--c-navy);
  border-radius: var(--r-card);
}

.p-pelcare-mode-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65.75px;
  padding-left: 0.2em;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
}

.p-pelcare-mode-row--pink   { background: var(--c-pink); }
.p-pelcare-mode-row--blue   { background: var(--c-blue02); }
.p-pelcare-mode-row--white  { background: var(--c-white); }
.p-pelcare-mode-row--yellow { background: var(--c-yellow); }

/* ==========================================================================
   4. MENU（ペルケアメニュー）
      カンプ y3778–5098 の水色帯（4隅すべて 120px の角丸）。
      直前の黄色帯に 117px 重ねる。
   ========================================================================== */
.p-pelcare-menu {
  position: relative;
  z-index: 2;
  margin-top: -117px;
  padding: 181px 0 142px;
  background: var(--c-blue02);
  border-radius: var(--r-band);
}

/* 料金の白パネル（カンプ 1076px・角丸32px・padding 32/64・2カラム間隔48px） */
.p-pelcare-menu-panel {
  width: calc(100% - 32px);
  max-width: 1076px;
  margin: 40px auto 0;
  padding: 32px 64px;
  background: var(--c-white);
  border-radius: var(--r-panel);
}

.p-pelcare-menu-col {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  padding-right: 24px;
}

.p-pelcare-menu-name {
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-pelcare-menu-price {
  margin-top: 4px;
  line-height: 1.4;
}

.p-pelcare-menu-num {
  font-size: 2rem;
  font-weight: 700;
}

.p-pelcare-menu-unit {
  font-size: 1.25rem;
  font-weight: 700;
}

.p-pelcare-menu-reco-title {
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-pelcare-menu-reco {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 回数券ボックス（黄・角丸16px・padding 32/40）。
   左右のカラムで高さが揃うよう下に寄せる。 */
.p-pelcare-ticket {
  margin-top: 16px;
  padding: 32px 40px;
  background: var(--c-yellow);
  border-radius: var(--r-card);
}

.p-pelcare-menu-col .p-pelcare-ticket { margin-top: auto; }

.p-pelcare-ticket-title {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-pelcare-ticket-row {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

.p-pelcare-ticket-row--strong { font-weight: 700; }

.p-pelcare-ticket-note {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.8;
}

/* ペルケアオプション */
.p-pelcare-option-title {
  margin-top: 40px;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-pelcare-option {
  width: calc(100% - 32px);
  max-width: 1078px;
  margin: 40px auto 0;
  padding: 32px 64px;
  background: var(--c-white);
  border-radius: var(--r-panel);
}

.p-pelcare-option-row { line-height: 1.6; }

.p-pelcare-option-row + .p-pelcare-option-row {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(24, 61, 129, 0.25);
}

/* 2行の「＋金額」の位置を揃えるため、項目名だけ幅を固定する
   （c-rich の `> p { display: inline }` より詳細度を上げる必要がある） */
.p-pelcare-option-row > .p-pelcare-option-name {
  display: inline-block;
  width: 400px;
  font-size: 1.5rem;
  font-weight: 700;
}

.p-pelcare-option-plus {
  margin-right: 8px;
  font-size: 2rem;
  font-weight: 700;
}

.p-pelcare-option-num {
  font-size: 2.25rem;
  font-weight: 700;
}

.p-pelcare-option-unit {
  font-size: 1.25rem;
  font-weight: 700;
}

/* ==========================================================================
   5. CTA（このページはカンプに CTA がある）
   ========================================================================== */
.p-pelcare-cta { margin-top: 25px; }

.p-pelcare-cta .c-btn { min-height: 52px; padding: 10px 48px; }

.p-pelcare-cta .c-cta-mascot {
  right: 131px;
  bottom: 55px;
  width: 118px;
}

/* ==========================================================================
   レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
   ※ SP・タブレットのカンプが無いため、こちら側で設計した値
   ========================================================================== */
@media (min-width: 992px) {
  /* カンプ 608px ＋ 32px ＋ 308px。合計が帯の内寸に収まるよう本文側を伸縮させる */
  .p-pelcare-point-text { flex: 1 1 0; min-width: 0; max-width: 608px; }
  .p-pelcare-point-figure { flex: none; width: 308px; margin-left: 32px; }
}

@media (max-width: 991.98px) {

  /* 帯の角丸と噛み合わせを縮める */
  .p-pelcare-point { padding: 56px 0 176px; border-radius: 60px 60px 0 0; }
  .p-pelcare-feature { margin-top: -120px; padding: 96px 0 120px; border-radius: 60px 60px 0 0; }
  .p-pelcare-menu { margin-top: -60px; padding: 96px 0 80px; border-radius: 60px; }

  .p-pelcare-point-figure { margin-top: 32px; text-align: center; }
  .p-pelcare-point-figure img { max-width: 308px; }

  .p-pelcare-effect-title { font-size: 1.5rem; }
  .p-pelcare-effect-title::before,
  .p-pelcare-effect-title::after { width: 80px; }
  .p-pelcare-effect-pill,
  .p-pelcare-effect-more { font-size: 1.125rem; }

  .p-pelcare-card { padding: 24px; }
  .p-pelcare-mode-row { height: 56px; font-size: 0.8125rem; }

  .p-pelcare-menu-panel { padding: 32px 24px;}
  .p-pelcare-menu-col { padding-left: 12px; padding-right: 12px; margin-bottom: 40px; }
  .p-pelcare-ticket { padding: 24px; margin-top: 20px !important;}
  .p-pelcare-option-title { font-size: 1.5rem; }
  .p-pelcare-option { padding: 24px; }
  .p-pelcare-option-row > .p-pelcare-option-name { width: auto; font-size: 1.25rem; }
  .p-pelcare-option-num { font-size: 1.75rem; }
  .p-pelcare-option-plus { font-size: 1.5rem; }
  .p-pelcare-cta { margin-top: 0; }
}

@media (max-width: 767.98px) {
  /* MV: 767px以下はカンプ 1396-21433 のSPレイアウト（common.css の c-page-mv--pickup）。
     768〜991px はPCと同じ表示にするため、タブレット向けの指定は置かない */
  .p-pelcare-mv { padding-bottom: 56px; }

  .p-pelcare-mv-lead { font-size: 0.9375rem; }

  .p-pelcare-point { padding: 48px 0 152px; border-radius: 40px 40px 0 0; }
  .p-pelcare-feature { padding: 80px 0 96px; border-radius: 40px 40px 0 0; }
  .p-pelcare-menu { padding: 80px 0 64px; border-radius: 40px; }

  /* 見出し行の縦積みは common.css の c-point-head 側で処理する */
  .p-pelcare-point-text > * { letter-spacing: 0.06em; }

  .p-pelcare-effect-title { font-size: 1.25rem; letter-spacing: 0.1em; }
  .p-pelcare-effect-title::before,
  .p-pelcare-effect-title::after { width: 24px; }
  .p-pelcare-effect-grid > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .p-pelcare-effect-pill,
  .p-pelcare-effect-more { font-size: 1rem; padding: 12px; letter-spacing: 0.1em; }

  .p-pelcare-card-text { letter-spacing: 0.06em; }
  .p-pelcare-menu-num { font-size: 1.625rem; }
  .p-pelcare-menu-unit { font-size: 1rem; }
  .p-pelcare-ticket-row { font-size: 0.9375rem; }
  .p-pelcare-option-row > .p-pelcare-option-name { font-size: 1rem; }
  .p-pelcare-option-num { font-size: 1.5rem; }
  .p-pelcare-option-unit { font-size: 1rem; }
}