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

/* ==========================================================================
   1. ページMV
      カンプ y142–847。白ボックス・キャッチ・写真・装飾円の位置は
      ペルケアと完全に同じで、白ボックスの幅とリード文の段落数だけが違う。
   ========================================================================== */
.p-maternity-mv {
  padding-top: 89px;
  padding-bottom: 80px;
}

/* 白ボックス（カンプ 600×125 @180,231）。見た目は共通部品 c-page-mv-head。
   共通部品の margin-left は180pxだが、180+600=780px なので画面幅が780px未満だと
   はみ出して横スクロールが出る。min() で「入るところまで」に詰める
   （780px以上では180pxのままなので、PC・タブレットの見た目は変わらない） */
.p-maternity-mv-head {
  width: 600px;
  /* margin-left: min(180px, calc(100% - 600px)); */
}



/* リード文（カンプ 894×112 @273,655。2段落・段落間16px） */
.p-maternity-mv .c-page-mv-body { margin-top: 151px; }

.p-maternity-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-maternity-mv-lead + .p-maternity-mv-lead { margin-top: 16px; }

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

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

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

/* ==========================================================================
   2. POINT（産前＆産後のデリケートな身体に）
      カンプ y847–2612 の白帯（上2隅だけ 120px の角丸）。
      下端 116px 分は次の MENU 帯に隠れる。
   ========================================================================== */
.p-maternity-point {
  position: relative;
  padding: 80px 0 224px;
  background: var(--c-white);
  border-radius: var(--r-band) var(--r-band) 0 0;
}

/* 見出し行はカンプ幅 946px（l-inner よりさらに 64px 内側） */
.p-maternity-point-inner {
  width: calc(100% - 32px);
  max-width: 946px;
  margin-left: auto;
  margin-right: auto;
}

/* 2枚のパネル（カンプ 1072px・角丸16px・padding 40px・間隔64px） */
.p-maternity-point-panel {
  width: calc(100% - 32px);
  max-width: 1072px;
  margin: 64px auto 0;
  padding: 40px;
}

/* 産後ケア側のパネルはピンク50%（--c-pink のベタではない） */
.p-maternity-point-panel--pink { background: rgba(255, 220, 231, 0.5); }

/* マタニティ側だけカンプの中身が 960px（パネル内寸 992px より狭い） */
.p-maternity-point-row {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* 写真＋ラベルの列（カンプ 518px） */
.p-maternity-point-photo { width: 100%; }

/* 白ベタのpillラベル（カンプ Zen Maru Bold 32px・字送り0.2em・角丸30px） */
.p-maternity-point-pill {
  margin-top: 32px;
  padding: 8px;
  background: var(--c-white);
  border-radius: 30px;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
  /* 字送りが最後の1文字の後ろにも入るぶんを字下げで相殺して光学的に中央へ */
  text-indent: 0.2em;
}

/* 小見出し＋本文の列（項目間 32px・見出しと本文の間 8px） */
.p-maternity-point-item + .p-maternity-point-item { margin-top: 32px; }

.p-maternity-point-item-title { line-height: 1.6; }

.p-maternity-point-item p {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* 手書き風の吹き出し（カンプの絶対座標 － 帯の上端 847px。左右は画面中央基準） */
.p-maternity-balloon {
  position: absolute;
  z-index: 2;
}

.p-maternity-balloon--line { top: 270px;  left: calc(50% - 344px); width: 280px; }
.p-maternity-balloon--baby { top: 918px;  left: calc(50% + 310px); width: 359px; }

/* キラキラの装飾（文言を持たないので background-image で置き、要素を増やさない） */
.p-maternity-point::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 921px;
  left: calc(50% + 197px);
  width: 62px;
  height: 69px;
  background: url("/system_panel/uploads/images/maternity_deco-sparkle.svg") no-repeat center / contain;
}

/* ==========================================================================
   3. MENU（マタニティ・産後ケアメニュー）
      カンプ y2496–3791 の水色帯（4隅すべて 120px の角丸）。
      上端 116px 分が POINT 帯に重なる。
   ========================================================================== */
.p-maternity-menu {
  position: relative;
  z-index: 1;
  margin-top: -116px;
  padding: 181px 0 159px;
  background: var(--c-blue02);
  border-radius: var(--r-band);
}

/* 改訂版カンプは欧文と和文サブの間に余白も点線も無い */
.p-maternity-menu .c-sec-title-en { line-height: 1.05; }
.p-maternity-menu .c-sec-title-ja { margin-top: 0; margin-left: 20px; margin-right: 20px;}

/* 白パネル（カンプ 1080px・角丸16px・padding 64px） */
.p-maternity-menu-panel {
  width: calc(100% - 32px);
  max-width: var(--inner);
  margin: 40px auto 0;
  padding: 64px;
  background: var(--c-white);
  border-radius: var(--r-card);
}

/* メニュー行（カンプ 32px → 1px罫 → 32px） */
.p-maternity-menu-row + .p-maternity-menu-row {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #8b9ec0; /* カンプ実測。他ページの rgba(24,61,129,.25) とは別の色 */
}

/* 写真（カンプは 300×190 と 284×180 が混在。180pxの方に揃えている） */
.p-maternity-menu-photo img {
  width: 100%;
  border-radius: var(--r-card);
}

/* 行の中身（項目間 16px） */
.p-maternity-menu-body { gap: 16px; }

.p-maternity-menu-head { gap: 6px 8px; }

.p-maternity-menu-name {
  font-family: var(--font-ja);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* 1行に収まらない長いメニュー名は幅いっぱいにしてタグを次の行へ送る */
.p-maternity-menu-name--full { width: 100%; }

/* 金額（数値と単位を c-rich で1段落に組む。カンプの行高46px = 32px×1.4） */
.p-maternity-menu-price { line-height: 1.4; }

.p-maternity-menu-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

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

.p-maternity-menu-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.p-maternity-menu-link { align-self: flex-end; }

/* ==========================================================================
   4. CTA
   ========================================================================== */
.p-maternity-cta { margin-top: 24px; }

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

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

/* ==========================================================================
   レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
   ※ SP・タブレットのカンプが無いため、こちら側で設計した値
   ========================================================================== */
@media (min-width: 992px) {
  /* 写真の列はカンプどおり固定幅。テキスト列が残りを伸縮する */
  .p-maternity-point-media { flex: none; width: 518px; }
  .p-maternity-point-list { flex: 1 1 0; min-width: 0; margin-left: 32px; }
  .p-maternity-point-list--l { margin-left: 0; margin-right: 32px; }

  .p-maternity-menu-photo { flex: none; width: 284px; }
  .p-maternity-menu-body { flex: 1 1 0; min-width: 0; margin-left: 32px; }
}

@media (max-width: 991.98px) {

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

  .p-maternity-point-panel { margin-top: 40px; padding: 24px; }
  .p-maternity-point-row { max-width: none; }
  .p-maternity-point-pill { font-size: 1.5rem; }

  /* 吹き出しは絶対配置をやめて中身の流れに戻す */
  .p-maternity-balloon {
    position: static;
    display: block;
    width: 240px;
    margin: 32px auto 0;
  }
  .p-maternity-point::after { display: none; }

  .p-maternity-menu-panel { padding: 32px 24px; }
  .p-maternity-cta { margin-top: 0; }
}

/* タブレット（768〜991px）: POINT・MENU は2カラムを維持する（1カラムにするのは SP のみ）。
   写真列の幅は HTML の col-md-5 / col-md-4 で決め、テキスト列（素の col）は
   flex-grow で残りを埋めるので、間隔の margin を足しても横に溢れない。 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .p-maternity-point-list { min-width: 0; margin-left: 24px; }
  .p-maternity-point-list--l { margin-left: 0; margin-right: 24px; }

  .p-maternity-menu-body { min-width: 0; margin-left: 24px; }
}

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

  .c-page-mv.c-page-mv--pickup .c-page-mv-head .c-page-mv-title{ font-size: 1.85rem;}

  /* 1カラムに積むのは SP のみ（タブレットは2カラムのまま） */
  .p-maternity-point-list { margin-top: 24px; }
  .p-maternity-point-list--l { margin-top: 24px; margin-bottom: 24px; }
  .p-maternity-menu-body { margin-top: 20px; }

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

  .c-page-mv-head {
    margin-left: 0;
  }
  .p-maternity-mv-head{
    width: auto;
    padding-left: 30px;
    padding-right: 0;
  }
  .c-page-mv--pickup.p-maternity-mv .c-page-mv-head { 
    padding-left: 0px; 
    padding-right: 40px; 
  }
  

  .p-maternity-point { padding: 48px 0 120px; border-radius: 40px 40px 0 0; }
  .p-maternity-menu { padding: 80px 0 64px; border-radius: 40px; }

  .p-maternity-point-item-title { letter-spacing: 0.1em; }
  .p-maternity-point-item p { letter-spacing: 0.06em; }
  .p-maternity-point-pill { font-size: 1.25rem; }

  .p-maternity-menu-name { font-size: 1.125rem; }
  .p-maternity-menu-num { font-size: 1.625rem; }
  .p-maternity-menu-unit { font-size: 1rem; }
  .p-maternity-menu-text { font-size: 0.9375rem; }
}