/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 06 2026 | 08:30:29 */
/* =============================================================
 Baby-J | Nurse / Midwife Prenatal & Postnatal Care
 PAGE ONLY v8 | FULL REPLACEMENT (not an append patch)
 Load AFTER babyJ_care_common.css
 HTML: <main class="bj-prenatal bj-care ow-page">
 Only .bj-prenatal is affected. No Doula/Nanny class dependency.
 ============================================================= */
.bj-care.bj-prenatal {
  --care-navy: #18374a;
  --care-coral: #e9a094;
  --care-paper: #faf7f2;
  color: var(--care-navy);
  background: var(--care-paper);
}

/* Approved PC composition: Common's photo + right panel. */
@media (min-width: 1101px) {
  .bj-care.bj-prenatal .bj-care-hero__image { object-position: center center; }
  .bj-care.bj-prenatal .bj-care-hero__panel { background: rgba(255,255,255,.76); }
}

/* 880–1100 landscape: retain the Common two-column layout. */
@media (min-width: 880px) and (max-width: 1100px) and (orientation: landscape) {
  .bj-care.bj-prenatal .bj-care-hero__image { object-position: 42% center; }
}

/* =============================================================
  PORTRAIT TABLET + ALL WIDTHS <= 879px
  Photo is its own uninterrupted top area. Copy is in document
  flow BELOW the photo: no face overlap, no clipped text/CTA.
  Width-independent: no orientation gap at 879px.
 ============================================================= */
@media (max-width: 879px),
       (min-width: 880px) and (max-width: 1100px) and (orientation: portrait) {
  .bj-care.bj-prenatal .bj-care-hero.bj-care-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    background: var(--care-paper);
    isolation: isolate;
  }

  /* Top photo, independently sized from text content. */
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__visual,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__picture {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__visual {
    flex: 0 0 auto;
    height: clamp(390px, 83vw, 760px);
    overflow: hidden;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__picture { height: 100%; }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: 1;
    visibility: visible;
    object-fit: cover;
    object-position: center top;
    transform: none;
    -webkit-transform: none;
  }

  /* The soft transition belongs to the photo, not over the copy. */
  .bj-care.bj-prenatal .bj-care-hero.bj-care-hero::before,
  .bj-care.bj-prenatal .bj-care-hero.bj-care-hero::after {
    content: none;
    display: none;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__visual::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 24%;
    background: linear-gradient(to bottom, transparent 0%, rgba(250,247,242,.32) 43%, #faf7f2 100%);
    pointer-events: none;
  }

  /* All text remains in normal flow: no top/bottom magic offsets. */
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__content {
    position: relative;
    z-index: 2;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(100%, 780px);
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 0 clamp(22px, 5.4vw, 56px) clamp(34px, 5vw, 56px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: auto;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__eyebrow,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__title,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__subtitle,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__description,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__actions {
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    margin-left: 0;
    margin-right: 0;
    pointer-events: auto;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__eyebrow {
    margin: 0 0 14px;
    color: #ce8276;
    font-size: clamp(10px, 1.5vw, 12px);
    letter-spacing: .2em;
    line-height: 1.5;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__title {
    margin: 0;
    color: var(--care-navy);
    font-size: clamp(26px, 4.8vw, 45px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.025em;
  }
  .bj-care.bj-prenatal .bj-care-hero__title-line {
    display: block;
    white-space: normal;
    word-break: keep-all;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__subtitle {
    margin: clamp(18px, 3vw, 28px) 0 10px;
    color: #d98280;
    font-size: clamp(17px, 2.5vw, 24px);
    font-weight: 600;
    line-height: 1.6;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__description {
    margin: 0;
    color: #334957;
    font-size: clamp(13px, 1.75vw, 16px);
    line-height: 1.85;
    overflow-wrap: anywhere;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 23px;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__button {
    width: min(100%, 520px);
    min-height: 51px;
    font-size: clamp(12px, 1.6vw, 14px);
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__supporter {
    font-size: clamp(11px, 1.3vw, 12px);
  }
}

/* =============================================================
   770–1100px PORTRAIT | Figma-approved one-piece composition
   Reference: Group 427322683(3).png (1365 x 2048).
   Photo -> overlapping white fade -> eyebrow/title -> copy -> CTA.
   This overrides the generic stacked v5 layout only in this band.
   No Doula selectors or Common modifications.
   ============================================================= */
@media (min-width: 770px) and (max-width: 1100px) and (orientation: portrait) {
  .bj-care.bj-prenatal .bj-care-hero.bj-care-hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    background: #fff;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__visual {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 94vw;
    min-height: 0;
    overflow: hidden;
    z-index: 0;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff url('https://service.baby-j.site/wp-content/uploads/2026/11/babyj-prenatal-postnatal-care-SP.webp') center top / cover no-repeat;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__picture > .bj-care-hero__image {
    display: none;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__visual::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 27%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.64) 58%, #fff 100%);
    pointer-events: none;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__content {
    position: relative;
    z-index: 2;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: -12.5vw 0 0; /* v9: move the complete copy + CTA block upward by 3vw */
    padding: 0;
    background: transparent;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 9.6% clamp(28px,4vw,48px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__eyebrow,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__title,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__subtitle,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__description,
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__actions {
    position: static;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    margin-left: 0;
    margin-right: 0;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__eyebrow {
    margin: 0 0 clamp(24px,3vw,36px);
    color: #eea399;
    font-size: clamp(15px,1.95vw,23px);
    font-weight: 600;
    letter-spacing: .23em;
    line-height: 1.5;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__title {
    margin: 0;
    color: #18374a;
    font-size: clamp(41px,5.2vw,61px);
    font-weight: 500;
    line-height: 1.48;
    letter-spacing: -.03em;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__subtitle {
    margin: clamp(27px,3.2vw,38px) 0 clamp(20px,2.6vw,31px);
    color: #18374a;
    font-size: clamp(20px,2.55vw,30px);
    font-weight: 600;
    line-height: 1.65;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__description {
    margin: 0;
    color: #59636a;
    font-size: clamp(15px,1.85vw,22px);
    line-height: 1.9;
    letter-spacing: .01em;
    overflow-wrap: normal;
  }
  /* CTA: stable two-column layout matching the approved artboard. */
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: 0;
    margin-top: clamp(42px,5.8vw,72px);
    min-width: 0;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__actions > .bj-care-hero__button {
    display: inline-flex;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: clamp(54px,6vw,70px);
    padding: 12px 14px;
    font-size: clamp(11px,1.3vw,15px);
    white-space: nowrap;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__actions > .bj-care-hero__supporter {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    text-align: center;
    font-size: clamp(11px,1.15vw,14px);
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  /* Pink bottom wave: separate from the content; no overlap with CTA. */
  .bj-care.bj-prenatal .bj-care-hero.bj-care-hero::after {
    content: '';
    display: block;
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: clamp(32px,5vw,57px);
    background: #fce2eb;
    clip-path: polygon(0 60%, 12% 43%, 26% 65%, 38% 88%, 50% 62%, 62% 72%, 74% 95%, 87% 65%, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }
}

/* 768–879 landscape: prefer the SP art as the stacked layout
   is intentionally used at these widths regardless of orientation. */
@media (min-width: 768px) and (max-width: 879px) and (orientation: landscape) {
  .bj-care.bj-prenatal .bj-care-hero__picture {
    background: var(--care-paper) url('https://service.baby-j.site/wp-content/uploads/2026/11/babyj-prenatal-postnatal-care-SP.webp') center top / cover no-repeat;
  }
  .bj-care.bj-prenatal .bj-care-hero__picture > .bj-care-hero__image { display: none; }
}

/* Phone: portrait image stays prominent without stealing CTA space. */
@media (max-width: 479px) {
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__visual {
    height: clamp(365px, 104vw, 490px);
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel {
    padding: 0 clamp(20px, 5.6vw, 26px) 34px;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__title {
    font-size: clamp(23px, 6.25vw, 29px);
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__subtitle {
    font-size: clamp(15px, 4vw, 18px);
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__description {
    font-size: clamp(12px, 3.15vw, 13px);
    line-height: 1.8;
  }
}

/* =============================================================
   v9 | CTA containment (v8 layout preserved): prenatal only, no Common modifications.
   770–1100 portrait: 2 columns; <=769: vertical CTA.
   Explicitly neutralize inherited positional offsets and sizing.
 ============================================================= */
@media (min-width: 770px) and (max-width: 1100px) and (orientation: portrait) {
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__actions {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 3.2vw, 36px);
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__actions > .bj-care-hero__button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__actions > .bj-care-hero__supporter {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    box-sizing: border-box;
  }
}
@media (max-width: 769px) {
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__panel > .bj-care-hero__actions {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__actions > .bj-care-hero__button {
    display: flex;
    width: 100%;
    max-width: 520px;
    min-width: 0;
    box-sizing: border-box;
  }
  .bj-care.bj-prenatal .bj-care-hero .bj-care-hero__actions > .bj-care-hero__supporter {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    box-sizing: border-box;
  }
}

/* =============================================================
   SECTION 04 | PRENATAL ONLY | SP heading containment
   Common CSS and other LPs remain unchanged.
   ============================================================= */
@media (max-width: 767px) {
  .bj-care.bj-prenatal .bj-care-points {
    padding: 46px 20px 72px;
  }
  .bj-care.bj-prenatal .bj-care-points__inner {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }
  .bj-care.bj-prenatal .bj-care-points__title {
    font-size: clamp(19px, 5.25vw, 26px);
    line-height: 1.55;
    letter-spacing: 0;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

/* Section 07 | SP限定の改行 */
.bj-care.bj-prenatal .prenatal-flow-sp-break {
  display: none;
}

@media (max-width: 767px) {
  .bj-care.bj-prenatal .prenatal-flow-sp-break {
    display: block;
  }
}