/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 04 2026 | 03:14:52 */
/* ============================================================
   BABY-J CARE COMMON | 4 LP | INTEGRATED 01-10
   Source: approved Doula layout for 01,02,06.
   Sections 03,04,05,07,08,09,10 unchanged.
   Scope: .bj-care; postpartum overview exceptions belong in page CSS.
   Deploy before stripping approved Doula CSS.
============================================================ */
.bj-care {
  --care-navy: #18374a;
  --care-coral: #e9a094;
  --care-paper: #faf7f2;
  --care-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
.bj-care,
.bj-care * { box-sizing: border-box; }

/* ============================================================
   SECTION 01 | SHARED HERO
============================================================ */
.bj-care .bj-care-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 680px;
  min-height: min(800px, calc(100svh - 64px));
  overflow: hidden;
  background: #f7f2e9;
}


/* ============================================================
   01. HERO PHOTO
============================================================ */

.bj-care .bj-care-hero__visual,
.bj-care .bj-care-hero__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.bj-care .bj-care-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
}


/* ============================================================
   02. HERO CONTENT
============================================================ */

.bj-care .bj-care-hero__content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;
  min-height: inherit;

  padding: 5% clamp(32px, 7vw, 140px);
}

.bj-care .bj-care-hero__panel {
  width: min(100%, 470px);

  padding:
    clamp(27px, 3.4vw, 50px)
    clamp(26px, 3.2vw, 48px);

  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;

  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);

  box-shadow: 0 12px 45px rgba(45,54,55,.055);
}

.bj-care .bj-care-hero__eyebrow {
  margin: 0 0 20px;

  color: var(--care-coral);
  font-size: clamp(10px, .75vw, 12px);
  font-family: Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.5;
}

.bj-care .bj-care-hero__title {
  margin: 0;

  color: var(--care-navy);
  font-family: var(--care-serif);
  font-size: clamp(29px, 2.8vw, 45px);
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: .035em;
}

.bj-care .bj-care-hero__subtitle {
  margin: 24px 0 12px;

  color: var(--care-navy);
  font-family: var(--care-serif);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 600;
  line-height: 1.7;
}

.bj-care .bj-care-hero__description {
  margin: 0;

  color: #52606a;
  font-size: clamp(12px, .88vw, 14px);
  line-height: 2;
  letter-spacing: .025em;
}


/* ============================================================
   03. CTA
============================================================ */

.bj-care .bj-care-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;

  margin-top: 25px;
}

.bj-care .bj-care-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  width: min(100%, 315px);
  min-height: 48px;

  padding: 12px 20px;
  border-radius: 999px;

  background: var(--care-navy);
  color: #fff;
  text-decoration: none;

  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;

  transition:
    background .2s ease,
    transform .2s ease;
}

.bj-care .bj-care-hero__button:hover {
  background: #294f62;
  transform: translateY(-2px);
  color: #fff;
}

.bj-care .bj-care-hero__supporter {
  color: var(--care-navy);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .025em;
  text-underline-offset: 4px;
}

.bj-care .bj-care-hero__supporter:hover {
  color: #527181;
}

.bj-care .bj-care-hero__button:focus-visible,
.bj-care .bj-care-hero__supporter:focus-visible {
  outline: 2px solid var(--care-coral);
  outline-offset: 4px;
}


/* ============================================================
   04. CARE HERO | CONTINUOUS COMPRESSION
   770–1100px LANDSCAPE / MEDIUM WIDTH
   The entire visual shrinks as one composition: photo, panel,
   typography, whitespace and CTA. No contain/letterboxing.
   All four Care LPs share these rules; source photos unchanged.
============================================================ */
@media (min-width: 770px) and (max-width: 1100px) {
  .bj-care .bj-care-hero {
    height: clamp(455px, 58vw, 650px);
    min-height: 0;
    overflow: hidden;
  }
  .bj-care .bj-care-hero__visual,
  .bj-care .bj-care-hero__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .bj-care .bj-care-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--care-hero-image-x, 43%) var(--care-hero-image-y, 50%);
  }
  .bj-care .bj-care-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
    height: 100%;
    padding: clamp(22px, 3vw, 35px) clamp(25px, 4vw, 44px);
  }
  .bj-care .bj-care-hero__panel {
    width: clamp(340px, 43%, 470px);
    max-width: 49%;
    padding: clamp(19px, 2.4vw, 28px) clamp(19px, 2.45vw, 29px);
    border: 1px solid rgba(255,255,255,.46);
    border-radius: clamp(12px, 1.5vw, 17px);
    background: rgba(255,255,255,.64);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(45,54,55,.045);
  }
  .bj-care .bj-care-hero__eyebrow {
    margin-bottom: clamp(9px, 1.1vw, 14px);
    font-size: clamp(10px, 1vw, 12px);
  }
  .bj-care .bj-care-hero__title {
    width: 100%;
    font-size: clamp(28px, 3.15vw, 36px);
    line-height: 1.49;
    letter-spacing: -.025em;
  }
  .bj-care .bj-care-hero__subtitle {
    margin: clamp(12px, 1.7vw, 19px) 0 8px;
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.6;
  }
  .bj-care .bj-care-hero__description {
    font-size: clamp(11.5px, 1.17vw, 13px);
    line-height: 1.8;
    letter-spacing: .012em;
  }
  .bj-care .bj-care-hero__actions {
    gap: clamp(8px, 1.1vw, 13px);
    margin-top: clamp(13px, 1.7vw, 20px);
  }
  .bj-care .bj-care-hero__button {
    width: min(100%, 315px);
    min-height: clamp(43px, 4.4vw, 49px);
    font-size: clamp(11.5px, 1.13vw, 13px);
  }
  .bj-care .bj-care-hero__supporter { font-size: clamp(9px, .95vw, 11px); }
  .bj-care .bj-care-hero__pc-break { display: none; }
}

/* ============================================================
   04-B. 770–900px | COMPACT LANDSCAPE ART DIRECTION
   The image is the composition. Preserve its horizontal field;
   the copy stays in the photo's quiet right-hand area.
   No universal mirroring: individual photo direction is an art
   decision, not a rule for all Care LPs.
============================================================ */
@media (min-width: 770px) and (max-width: 900px) and (orientation: landscape) {
  .bj-care .bj-care-hero {
    /* A shallower canvas prevents the large center crop of cover. */
    height: clamp(394px, 52vw, 468px);
    min-height: 0;
  }
  .bj-care .bj-care-hero__image {
    object-fit: cover;
    object-position: var(--care-hero-compact-x, 50%) var(--care-hero-compact-y, 50%);
    transform: none;
  }
  .bj-care .bj-care-hero__content {
    justify-content: flex-end;
    align-items: center;
    padding: 10px clamp(18px, 2.7vw, 25px);
  }
  .bj-care .bj-care-hero__panel {
    width: clamp(290px, 38vw, 342px);
    max-width: 44%;
    padding: clamp(16px, 1.9vw, 20px) clamp(17px, 2.1vw, 21px);
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 13px;
    background: rgba(255,255,255,.68);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }
  .bj-care .bj-care-hero__eyebrow {
    margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: .2em;
  }
  .bj-care .bj-care-hero__title {
    font-size: clamp(26px, 3.35vw, 30px);
    line-height: 1.4;
    letter-spacing: -.025em;
  }
  .bj-care .bj-care-hero__subtitle {
    margin: 11px 0 7px;
    font-size: clamp(14px, 1.75vw, 16px);
  }
  .bj-care .bj-care-hero__description {
    font-size: clamp(11.5px, 1.42vw, 12.8px);
    line-height: 1.7;
  }
  .bj-care .bj-care-hero__actions { gap: 8px; margin-top: 12px; }
  .bj-care .bj-care-hero__button { min-height: 43px; font-size: 12px; }
  .bj-care .bj-care-hero__supporter { font-size: 10px; }
}

/* Optional per-image direction control; never mirror all four LPs.
   Enable only on an LP whose photograph actually benefits from it:
   --care-hero-image-flip: -1;
   Default 1 keeps the approved original photography. */
@media (min-width: 770px) and (max-width: 1100px) and (orientation: landscape) {
  .bj-care .bj-care-hero__image {
    transform: scaleX(var(--care-hero-image-flip, 1));
  }
}

/* ============================================================
   05. CARE HERO | PORTRAIT TABLET RE-EXPANSION
   770–1100px and PORTRAIT: same full-photo grammar as SP,
   larger typography and image-scaled spatial relationships.
   No separate pale strip or standalone frosted card.
============================================================ */
@media (min-width: 770px) and (max-width: 1100px) and (orientation: portrait) {
  .bj-care .bj-care-hero {
    height: clamp(760px, calc(100svh - 64px), 1100px);
    min-height: 760px;
    background: #faf7f2;
  }
  .bj-care .bj-care-hero__visual,
  .bj-care .bj-care-hero__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .bj-care .bj-care-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--care-hero-portrait-x, 48%) var(--care-hero-portrait-y, 50%);
  }
  .bj-care .bj-care-hero::before,
  .bj-care .bj-care-hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    pointer-events: none;
  }
  .bj-care .bj-care-hero::before {
    top: 0;
    height: 33%;
    background: linear-gradient(to bottom, rgba(250,247,242,.84), rgba(250,247,242,.44) 51%, transparent);
  }
  .bj-care .bj-care-hero::after {
    bottom: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent 0%, rgba(250,247,242,.48) 32%, rgba(250,247,242,.94) 78%, #faf7f2);
  }
  .bj-care .bj-care-hero__content {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    pointer-events: none;
  }
  .bj-care .bj-care-hero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0 clamp(35px, 5.5vw, 64px) clamp(22px, 3.3vw, 37px);
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    pointer-events: none;
  }
  .bj-care .bj-care-hero__panel > .bj-care-hero__eyebrow,
  .bj-care .bj-care-hero__panel > .bj-care-hero__title {
    position: absolute;
    left: clamp(35px, 5.5vw, 64px);
    right: clamp(35px, 5.5vw, 64px);
    width: auto;
    margin: 0;
  }
  .bj-care .bj-care-hero__panel > .bj-care-hero__eyebrow {
    top: clamp(37px, 5.4vw, 62px);
    color: #ce8276;
    font-size: clamp(11px, 1.4vw, 13px);
    letter-spacing: .22em;
  }
  .bj-care .bj-care-hero__panel > .bj-care-hero__title {
    top: clamp(75px, 10vw, 117px);
    font-size: clamp(36px, 4.7vw, 49px);
    line-height: 1.48;
    letter-spacing: -.025em;
  }
  .bj-care .bj-care-hero__title-line { display: block; white-space: normal; word-break: keep-all; }
  .bj-care .bj-care-hero__intro {
    position: absolute;
    z-index: 4;
    top: clamp(37px, 5.4vw, 62px);
    left: clamp(35px, 5.5vw, 64px);
    right: clamp(35px, 5.5vw, 64px);
    margin: 0;
    padding: 0;
  }
  .bj-care .bj-care-hero__intro .bj-care-hero__eyebrow { margin: 0 0 clamp(16px, 2vw, 22px); font-size: clamp(11px, 1.4vw, 13px); }
  .bj-care .bj-care-hero__intro .bj-care-hero__title { margin: 0; font-size: clamp(36px, 4.7vw, 49px); line-height: 1.48; }
  .bj-care .bj-care-hero__details { position: relative; z-index: 4; margin: 0; padding: 0; background: transparent; pointer-events: auto; }
  .bj-care .bj-care-hero__subtitle { margin: 0 0 clamp(11px, 1.4vw, 17px); color: #df8584; font-size: clamp(19px, 2.45vw, 25px); line-height: 1.55; }
  .bj-care .bj-care-hero__description { max-width: 750px; margin: 0; color: #334957; font-size: clamp(14px, 1.8vw, 17px); line-height: 1.85; letter-spacing: .01em; }
  .bj-care .bj-care-hero__actions { gap: clamp(10px, 1.4vw, 15px); margin-top: clamp(16px, 2vw, 24px); pointer-events: auto; }
  .bj-care .bj-care-hero__button { width: min(100%, 520px); min-height: 53px; font-size: clamp(13px, 1.5vw, 15px); }
  .bj-care .bj-care-hero__supporter { font-size: clamp(11px, 1.2vw, 13px); }
  .bj-care .bj-care-hero__pc-break { display: none; }
}

/* ============================================================
   01-07 | SMARTPHONE HERO / FULL-PHOTO FIRST VIEW
   Shared 4-LP structure. Headline above the people; details,
   registration CTA and supporter link over the lower image.
   No new HTML or JS needed.
============================================================ */
@media (max-width: 769px) {
  .bj-care .bj-care-hero,
  .bj-care.bj-nanny .nanny-hero.bj-care-hero {
    position: relative;
    display: block;
    height: clamp(570px, calc(100svh - 64px), 900px);
    min-height: 570px;
    margin: 0;
    overflow: hidden;
    background: #faf7f2;
  }

  .bj-care .bj-care-hero__visual,
  .bj-care .bj-care-hero__picture,
  .bj-care.bj-nanny .nanny-hero__visual.bj-care-hero__visual,
  .bj-care.bj-nanny .nanny-hero__picture.bj-care-hero__picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .bj-care .bj-care-hero__image,
  .bj-care.bj-nanny .nanny-hero__image.bj-care-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
  }

  /* Soft local light behind the headline: keeps green leaves visible
     while retaining navy-text contrast, without a visible white card. */
  .bj-care .bj-care-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: clamp(165px, 45vw, 240px);
    background: linear-gradient(to bottom,
      rgba(253, 251, 246, .82) 0%,
      rgba(253, 251, 246, .66) 35%,
      rgba(253, 251, 246, .28) 72%,
      rgba(253, 251, 246, 0) 100%);
    pointer-events: none;
  }

  /* One gentle fade; no detached box, no hard dividing edge. */
  .bj-care .bj-care-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 45% 0 0;
    background: linear-gradient(to bottom,
      rgba(250,247,242,0) 0%,
      rgba(250,247,242,.10) 15%,
      rgba(250,247,242,.75) 48%,
      rgba(250,247,242,.96) 73%,
      #faf7f2 100%);
    pointer-events: none;
  }
  .bj-care .bj-care-hero__content,
  .bj-care.bj-nanny .nanny-hero__content.bj-care-hero__content {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .bj-care .bj-care-hero__panel,
  .bj-care.bj-nanny .nanny-hero__panel.bj-care-hero__panel {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    pointer-events: none;
  }

  /* The approved Doula HTML has direct heading children. */
  .bj-care .bj-care-hero__panel > .bj-care-hero__eyebrow {
    position: absolute;
    z-index: 4;
    top: clamp(24px, 7.4vw, 40px);
    left: 24px;
    right: 18px;
    margin: 0;
    color: #ce8276;
    font-size: 10px;
    letter-spacing: .22em;
    line-height: 1.5;
  }
  .bj-care .bj-care-hero__panel > .bj-care-hero__title {
    position: absolute;
    z-index: 4;
    top: clamp(54px, 14.2vw, 76px);
    left: 24px;
    right: 18px;
    width: auto;
    margin: 0;
    color: #18374a;
    font-size: clamp(23px, 6.35vw, 28px);
    font-weight: 500;
    line-height: 1.48;
    letter-spacing: -.025em;
  }
  .bj-care .bj-care-hero__title-line {
    display: block;
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  /* Nanny's intro is wrapped; align it to the exact same top. */
  .bj-care .bj-care-hero__intro,
  .bj-care.bj-nanny .nanny-hero__intro {
    position: absolute;
    z-index: 4;
    top: clamp(24px, 7.4vw, 40px);
    left: 24px;
    right: 18px;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    pointer-events: none;
  }
  .bj-care .bj-care-hero__intro .bj-care-hero__eyebrow { margin: 0 0 17px; font-size: 10px; color: #ce8276; }
  .bj-care .bj-care-hero__intro .bj-care-hero__title,
  .bj-care.bj-nanny .nanny-hero__title.bj-care-hero__title {
    margin: 0;
    font-size: clamp(22px, 6vw, 27px);
    line-height: 1.48;
    letter-spacing: -.025em;
  }

  /* Copy / CTA at the lower end of the very same photograph. */
  .bj-care .bj-care-hero__panel > .bj-care-hero__subtitle,
  .bj-care .bj-care-hero__panel > .bj-care-hero__description,
  .bj-care .bj-care-hero__panel > .bj-care-hero__actions { position: absolute; left: 24px; right: 24px; }
  .bj-care .bj-care-hero__panel > .bj-care-hero__subtitle {
    bottom: 202px;
    margin: 0;
  }
  .bj-care .bj-care-hero__panel > .bj-care-hero__description {
    bottom: 113px;
    margin: 0;
  }
  .bj-care .bj-care-hero__panel > .bj-care-hero__actions {
    bottom: 14px;
    margin: 0;
  }

  /* Doula direct children: reserve space by grouping bottom copy through
     a grid on the original panel; avoids hard-coded text block heights. */
  .bj-care.bj-doula .bj-care-hero__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 24px 14px;
  }
  .bj-care.bj-doula .bj-care-hero__panel > .bj-care-hero__subtitle,
  .bj-care.bj-doula .bj-care-hero__panel > .bj-care-hero__description,
  .bj-care.bj-doula .bj-care-hero__panel > .bj-care-hero__actions {
    position: static;
    width: 100%;
    margin: 0;
  }
  .bj-care.bj-doula .bj-care-hero__panel > .bj-care-hero__subtitle { margin-bottom: 10px; }
  .bj-care.bj-doula .bj-care-hero__panel > .bj-care-hero__actions { margin-top: 14px; }

  /* Nanny's wrapped details sit at the bottom in one block. */
  .bj-care .bj-care-hero__details,
  .bj-care.bj-nanny .nanny-hero__details {
    position: absolute;
    z-index: 4;
    left: 24px;
    right: 24px;
    bottom: 14px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    pointer-events: auto;
  }
  .bj-care .bj-care-hero__subtitle,
  .bj-care.bj-nanny .nanny-hero__subtitle.bj-care-hero__subtitle {
    margin: 0 0 10px;
    color: #df8584;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.5;
  }
  .bj-care .bj-care-hero__description,
  .bj-care.bj-nanny .nanny-hero__description.bj-care-hero__description {
    margin: 0;
    color: #334957;
    font-size: clamp(10px, 2.75vw, 12px);
    line-height: 1.73;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .bj-care .bj-care-hero__pc-break { display: none; }
  .bj-care .bj-care-hero__actions,
  .bj-care.bj-nanny .nanny-hero__actions.bj-care-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    pointer-events: auto;
  }
  .bj-care .bj-care-hero__button,
  .bj-care.bj-nanny .nanny-hero__button.bj-care-hero__button {
    width: 100%;
    max-width: none;
    min-height: 47px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .bj-care .bj-care-hero__supporter,
  .bj-care.bj-nanny .nanny-hero__supporter.bj-care-hero__supporter {
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
    pointer-events: auto;
  }
}
@media (max-width: 374px) {
  .bj-care .bj-care-hero,
  .bj-care.bj-nanny .nanny-hero.bj-care-hero { min-height: 560px; }
  .bj-care .bj-care-hero__panel > .bj-care-hero__eyebrow,
  .bj-care .bj-care-hero__panel > .bj-care-hero__title,
  .bj-care .bj-care-hero__intro,
  .bj-care.bj-nanny .nanny-hero__intro { left: 18px; right: 18px; }
  .bj-care .bj-care-hero__panel > .bj-care-hero__title { font-size: 22px; }
  .bj-care .bj-care-hero__panel > .bj-care-hero__subtitle,
  .bj-care .bj-care-hero__panel > .bj-care-hero__description,
  .bj-care .bj-care-hero__panel > .bj-care-hero__actions { left: 18px; right: 18px; }
  .bj-care .bj-care-hero__details,
  .bj-care.bj-nanny .nanny-hero__details { left: 18px; right: 18px; }
  .bj-care .bj-care-hero__description { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bj-care .bj-care-hero__button { transition: none; }
  .bj-care .bj-care-hero__button:hover { transform: none; }
}

/* ============================================================
   01-08 | 770–900px LANDSCAPE — VISIBLE COMPOSITION CORRECTION
   PHOTO FIRST: preserve the three people at left / center.
   The right natural light becomes typographic negative space.
   This block is deliberately AFTER the other HERO media rules.
   Does not affect portrait tablets, SP, or desktop.
============================================================ */
@media (min-width: 770px) and (max-width: 900px) and (orientation: landscape) {
  .bj-care .bj-care-hero.bj-care-hero {
    height: clamp(388px, 50.5vw, 455px) !important;
    min-height: 0 !important;
    max-height: 455px;
    background: #faf7f2;
  }
  .bj-care .bj-care-hero .bj-care-hero__visual,
  .bj-care .bj-care-hero .bj-care-hero__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .bj-care .bj-care-hero .bj-care-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: 47% 50% !important;
    transform: scaleX(var(--care-hero-image-flip, 1)) !important;
  }
  /* No white-card boundary: typography melts into the right light. */
  .bj-care .bj-care-hero.bj-care-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(250,247,242,0) 47%,
      rgba(250,247,242,.48) 65%,
      rgba(250,247,242,.90) 82%,
      rgba(250,247,242,.96) 100%);
    pointer-events: none;
  }
  .bj-care .bj-care-hero.bj-care-hero::after { content: none; }
  .bj-care .bj-care-hero .bj-care-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 12px clamp(16px, 2.6vw, 25px);
  }
  .bj-care .bj-care-hero .bj-care-hero__panel {
    position: relative;
    display: block;
    width: clamp(274px, 35vw, 318px);
    max-width: 41%;
    height: auto;
    margin: 0;
    padding: clamp(9px, 1.25vw, 13px);
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .bj-care .bj-care-hero .bj-care-hero__eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: .19em;
  }
  .bj-care .bj-care-hero .bj-care-hero__title {
    font-size: clamp(27px, 3.45vw, 31px);
    line-height: 1.43;
    letter-spacing: -.03em;
  }
  .bj-care .bj-care-hero .bj-care-hero__subtitle {
    margin: 15px 0 8px;
    font-size: clamp(15px, 1.85vw, 17px);
  }
  .bj-care .bj-care-hero .bj-care-hero__description {
    font-size: clamp(12px, 1.42vw, 13px);
    line-height: 1.73;
  }
  .bj-care .bj-care-hero .bj-care-hero__actions {
    margin-top: 14px;
    gap: 9px;
  }
  .bj-care .bj-care-hero .bj-care-hero__button {
    width: 100%;
    min-height: 45px;
    font-size: 12px;
  }
  .bj-care .bj-care-hero .bj-care-hero__supporter { font-size: 10px; }
}

/* DOULA ONLY — 770–900px (portrait AND landscape).
   Photograph is mirrored, text remains normal. Do not mirror the picture
   container or text. The earlier orientation-restricted rule never matched
   portrait tablet viewports. */
@media (min-width: 770px) and (max-width: 900px) {
  .bj-care.bj-doula .bj-care-hero .bj-care-hero__image,
  .bj-doula .doula-hero .doula-hero__image {
    transform: scaleX(-1) !important;
    -webkit-transform: scaleX(-1) !important;
  }
}

/* Landscape only: copy returns to the left-side open space. */
@media (min-width: 770px) and (max-width: 900px) and (orientation: landscape) {
  .bj-care.bj-doula .bj-care-hero.bj-care-hero::before {
    background: linear-gradient(90deg,
      rgba(250,247,242,.96) 0%,
      rgba(250,247,242,.86) 20%,
      rgba(250,247,242,.40) 37%,
      transparent 57%);
  }
  .bj-care.bj-doula .bj-care-hero .bj-care-hero__content {
    justify-content: flex-start;
  }
}

/* ============================================================
   01-09 | PORTRAIT TABLET: MATCH IMAGE TO PORTRAIT COMPOSITION
   The <picture> HTML chooses the PC-wide source above 767px.
   A portrait canvas + wide source + cover was cutting the mother
   and baby out. Reuse the EXISTING SP photo in portrait tablets.
   This affects only the media, never typography/CTA mirroring.
   Specific photo selection stays per LP; layout remains common.
============================================================ */
@media (min-width: 770px) and (max-width: 1100px) and (orientation: portrait) {
  .bj-care.bj-doula .bj-care-hero .bj-care-hero__image {
    /* The portrait image is selected natively by <picture> in Doula HTML. */
    transform: none !important;
    -webkit-transform: none !important;
    object-fit: cover;
    object-position: center 52%;
  }
}

/* ------------------------------------------------------------
   01-10 | DOULA TITLE — DEVTOOLS APPROVED POSITION (770–900px)
   Orientation independent. Important overrides page-specific style.
   Keep image / type sizing / subtitle / description / CTA untouched.
   ------------------------------------------------------------ */
@media screen and (min-width: 770px) and (max-width: 900px) {
  .bj-care.bj-doula .bj-care-hero .bj-care-hero__panel > .bj-care-hero__eyebrow,
  .bj-care.bj-doula .doula-hero .doula-hero__panel > .doula-hero__eyebrow {
    position: absolute !important;
    top: 400px !important;
    bottom: auto !important;
    transform: none !important;
  }

  .bj-care.bj-doula .bj-care-hero .bj-care-hero__panel > .bj-care-hero__title,
  .bj-care.bj-doula .doula-hero .doula-hero__panel > .doula-hero__title {
    position: absolute !important;
    top: 430px !important;
    bottom: auto !important;
    transform: none !important;
  }
}

/* END — CARE COMMON SECTION 01 HERO */


/* =====================================================
   DOULA HERO | TITLE WRAP FIX
   PC / TB / SP
===================================================== */

@media (min-width: 1280px) {
  .bj-care .bj-care-hero__title {
    width: 100%;
    margin: 0;
    font-size: clamp(24px, 2.45vw, 39px);
    line-height: 1.55;
    letter-spacing: -0.025em;
  }
}

.bj-care .bj-care-hero__title-line {
  display: block;
  white-space: normal;
}
@media (min-width: 1101px) {
  .bj-care .bj-care-hero__title-line { white-space: nowrap; }
}




/* ============================================================
   SECTION 02 | SHARED ABOUT
============================================================ */
.bj-care .bj-care-about {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fbf9f6;
}

.bj-care .bj-care-about__inner {
  display: grid;
  grid-template-columns: 24% 49% 27%;
  align-items: stretch;
  width: 100%;
  min-height: clamp(260px, 23vw, 370px);
}


/* ============================================================
   02-2. LEFT | BOTANICAL
============================================================ */

.bj-care .bj-care-about__botanical {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}

.bj-care .bj-care-about__botanical img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}


/* ============================================================
   02-3. CENTER | COPY
============================================================ */

.bj-care .bj-care-about__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
  padding: 32px clamp(12px, 2vw, 36px);

  text-align: center;
}

.bj-care .bj-care-about__eyebrow {
  margin: 0 0 clamp(12px, 1.4vw, 22px);

  color: #e59b90;
  font-family: Arial, sans-serif;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.5;
}

.bj-care .bj-care-about__title {
  margin: 0;

  color: #18374a;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: clamp(23px, 2.05vw, 34px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.07em;
}

.bj-care .bj-care-about__lead {
  margin: clamp(15px, 1.7vw, 26px) 0 0;

  color: #354957;
  font-size: clamp(12px, 0.86vw, 14px);
  line-height: 2;
  letter-spacing: 0.015em;
}

.bj-care .bj-care-about__message {
  margin: clamp(15px, 1.7vw, 27px) 0 0;

  color: #354957;
  font-size: clamp(12px, 0.83vw, 13px);
  line-height: 2;
  letter-spacing: 0.02em;
}


/* ============================================================
   02-4. RIGHT | BABY PHOTO
============================================================ */

.bj-care .bj-care-about__photo {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

.bj-care .bj-care-about__photo img {
  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  object-fit: cover;
  object-position: center center;
}


/* ============================================================
   02-5. MEDIUM PC / LANDSCAPE TABLET
   768px – 1279px
============================================================ */

@media (min-width: 768px) and (max-width: 1279px) {

  .bj-care .bj-care-about__inner {
    grid-template-columns: 19% 53% 28%;
    min-height: 290px;
  }

  .bj-care .bj-care-about__content {
    padding: 28px 15px;
  }

  .bj-care .bj-care-about__title {
    font-size: clamp(22px, 2.4vw, 29px);
    letter-spacing: 0.025em;
  }

  .bj-care .bj-care-about__lead,
  .bj-care .bj-care-about__message {
    font-size: 12px;
    line-height: 1.9;
  }

}


/* ============================================================
   02-6. PORTRAIT TABLET
   768px – 1023px
============================================================ */

@media (min-width: 768px) and (max-width: 1023px)
       and (orientation: portrait) {

  .bj-care .bj-care-about__inner {
    grid-template-columns: 15% 57% 28%;
    min-height: 340px;
  }

  .bj-care .bj-care-about__content {
    padding: 32px 16px;
  }

  .bj-care .bj-care-about__eyebrow {
    margin-bottom: 14px;
  }

  .bj-care .bj-care-about__title {
    font-size: 25px;
  }

  .bj-care .bj-care-about__lead,
  .bj-care .bj-care-about__message {
    font-size: 12px;
  }

  .bj-care .bj-care-about__lead br {
    display: none;
  }

}


/* ============================================================
   02-7. SMARTPHONE
   0px – 767px
============================================================ */

@media (max-width: 767px) {

  .bj-care .bj-care-about__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Botanical ornament behind copy */

  .bj-care .bj-care-about__botanical {
    position: absolute;
    z-index: 0;
    top: 0;
    left: -35px;

    width: 155px;
    height: 180px;

    opacity: 0.42;
    pointer-events: none;
  }

  .bj-care .bj-care-about__botanical img {
    object-fit: contain;
    object-position: left top;
  }

  /* Main copy */

  .bj-care .bj-care-about__content {
    z-index: 1;
    min-height: 0;

    padding: 69px 25px 55px;

    text-align: center;
  }

  .bj-care .bj-care-about__eyebrow {
    margin-bottom: 18px;
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .bj-care .bj-care-about__title {
    font-size: clamp(23px, 6.1vw, 29px);
    line-height: 1.55;
    letter-spacing: 0.02em;
  }

  .bj-care .bj-care-about__lead {
    margin-top: 24px;

    font-size: 12px;
    line-height: 2;
    letter-spacing: 0.01em;
  }

  .bj-care .bj-care-about__lead br {
    display: none;
  }

  .bj-care .bj-care-about__message {
    margin-top: 19px;

    font-size: 12px;
    line-height: 2;
    letter-spacing: 0.01em;
  }

  /* Baby hand photo */

  .bj-care .bj-care-about__photo {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .bj-care .bj-care-about__photo img {
    object-position: center 52%;
  }

}


/* ============================================================
   02-8. SMALL SMARTPHONE
   0px – 374px
============================================================ */

@media (max-width: 374px) {

  .bj-care .bj-care-about__content {
    padding: 58px 20px 48px;
  }

  .bj-care .bj-care-about__title {
    font-size: 22px;
  }

  .bj-care .bj-care-about__lead,
  .bj-care .bj-care-about__message {
    font-size: 11.5px;
  }

}

/* END — SECTION 02 ABOUT DOULA */



/* ============================================================
   Baby-J CARE COMMON CSS | 4 LP shared
   WordPress: babyJ_care_Common / 2094.css
   Sections: OUR SUPPORT / SUPPORT POINT
   Requires root class: .bj-care
   No global selectors. Do not include in Doula CSS.
   Border spacing 03 -> 04: PC 110px / TB 96px / SP 80px.
============================================================ */

/* ============================================================
   Baby-J CARE | SHARED (4 LP)
   SECTION 03 | OUR SUPPORT
   COMPLETE CSS

   PC : 4 columns
   TB : 2 columns × 2 rows
   SP : 2 columns × 2 rows

   Scope: .bj-care
============================================================ */


/* ============================================================
   Baby-J CARE | SHARED (4 LP)
   SECTION 03 | OUR SUPPORT
   WEBP ICON VERSION
============================================================ */

.bj-care .bj-care-support {
  width: 100%;
  margin: 0;
  padding: clamp(60px, 6vw, 100px) 0 55px;
  background: #fffdfb;
  overflow: hidden;
}

.bj-care .bj-care-support__inner {
  width: min(100% - 40px, 1500px);
  margin-inline: auto;
}

.bj-care .bj-care-support__heading {
  margin: 0 auto clamp(30px, 3.5vw, 52px);
  text-align: center;
}

.bj-care .bj-care-support__eyebrow {
  margin: 0 0 12px;
  color: #e99e91;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .22em;
}

.bj-care .bj-care-support__title {
  margin: 0;
  color: #18374a;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
  font-size: clamp(27px, 2.5vw, 39px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .075em;
}

.bj-care .bj-care-support__intro {
  margin: 16px 0 0;
  color: #40525e;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.9;
  letter-spacing: .025em;
}

.bj-care .bj-care-support__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
}

.bj-care .bj-care-support__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff7f1;
}

.bj-care .bj-care-support__photo {
  width: 100%;
  aspect-ratio: 1.25 / 1;
  overflow: hidden;
  background: #f4eee8;
}

.bj-care .bj-care-support__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bj-care .bj-care-support__body {
  position: relative;
  z-index: 1;
  flex: 1;
  margin-top: -17px;
  padding: clamp(55px, 3.45vw, 67px) clamp(15px, 1.4vw, 24px) 25px;
  border-radius: 17px 17px 0 0;
  background: #fff7f1;
}

/* 1940px viewport: circle 88 x 88 / artwork max 68 x 59 */
.bj-care .bj-care-support__icon {
  --doula-icon-circle: clamp(64px, 4.5361vw, 88px);
  position: absolute;
  top: calc(var(--doula-icon-circle) / -2);
  left: clamp(15px, 1.4vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--doula-icon-circle);
  height: var(--doula-icon-circle);
  border-radius: 50%;
  background: #fff7f1;
  overflow: hidden;
}

.bj-care .bj-care-support__icon img {
  display: block;
  width: min(68px, calc(var(--doula-icon-circle) * .773));
  height: min(59px, calc(var(--doula-icon-circle) * .67));
  object-fit: contain;
}

.bj-care .bj-care-support__card-title {
  min-height: 0;
  margin: 0 0 12px;
  color: #18374a;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .025em;
}

.bj-care .bj-care-support__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bj-care .bj-care-support__list li {
  position: relative;
  padding-left: 23px;
  color: #465660;
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.65;
}

.bj-care .bj-care-support__list li::before {
  content: "✓";
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid #ef9d93;
  border-radius: 50%;
  color: #ef9d93;
  font: 600 9px/1 Arial, sans-serif;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .bj-care .bj-care-support__inner {
    width: calc(100% - 44px);
  }

  .bj-care .bj-care-support__grid {
    gap: 14px;
  }

  .bj-care .bj-care-support__body {
    padding-inline: 16px;
  }

  .bj-care .bj-care-support__card-title {
    font-size: 17px;
  }

  .bj-care .bj-care-support__list li {
    font-size: 11px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bj-care .bj-care-support {
    padding: 68px 0 48px;
  }

  .bj-care .bj-care-support__inner {
    width: min(100% - 48px, 740px);
  }

  .bj-care .bj-care-support__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
  }

  .bj-care .bj-care-support__body {
    padding: 54px 25px 28px;
  }

  .bj-care .bj-care-support__icon {
    --doula-icon-circle: 72px;
  }

  .bj-care .bj-care-support__icon {
    left: 25px;
  }

  .bj-care .bj-care-support__card-title {
    font-size: 21px;
  }

  .bj-care .bj-care-support__list li {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .bj-care .bj-care-support {
    padding: 59px 0 40px;
  }

  .bj-care .bj-care-support__inner {
    width: min(100% - 36px, 460px);
  }

  .bj-care .bj-care-support__heading {
    margin-bottom: 32px;
  }

  .bj-care .bj-care-support__eyebrow {
    margin-bottom: 12px;
    font-size: 10px;
  }

  .bj-care .bj-care-support__title {
    font-size: clamp(25px, 6.6vw, 31px);
    letter-spacing: .035em;
  }

  .bj-care .bj-care-support__intro {
    max-width: 340px;
    margin: 16px auto 0;
    font-size: 12px;
    line-height: 1.9;
  }

  .bj-care .bj-care-support__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .bj-care .bj-care-support__card {
    border-radius: 16px;
  }

  .bj-care .bj-care-support__photo {
    aspect-ratio: 1.18 / 1;
  }

  .bj-care .bj-care-support__body {
    margin-top: -17px;
    padding: 34px 12px 20px;
  }

  .bj-care .bj-care-support__icon {
    --doula-icon-circle: 48px;
    left: 12px;
  }

  .bj-care .bj-care-support__card-title {
    min-height: 0;
    margin-bottom: 11px;
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.5;
    letter-spacing: 0;
  }

  .bj-care .bj-care-support__list {
    gap: 8px;
  }

  .bj-care .bj-care-support__list li {
    padding-left: 18px;
    font-size: clamp(10px, 2.7vw, 12px);
    line-height: 1.6;
  }

  .bj-care .bj-care-support__list li::before {
    top: 2px;
    width: 13px;
    height: 13px;
    font-size: 8px;
  }
}

@media (max-width: 374px) {
  .bj-care .bj-care-support__inner {
    width: calc(100% - 28px);
  }

  .bj-care .bj-care-support__grid {
    gap: 10px;
  }

  .bj-care .bj-care-support__title {
    font-size: 24px;
  }

  .bj-care .bj-care-support__body {
    padding: 37px 10px 18px;
  }

  .bj-care .bj-care-support__icon {
    --doula-icon-circle: 44px;
    left: 10px;
  }

  .bj-care .bj-care-support__card-title {
    font-size: 13px;
  }

  .bj-care .bj-care-support__list li {
    padding-left: 17px;
    font-size: 10px;
  }
}

/* ============================================================
   Baby-J CARE | SHARED (4 LP)
   SECTION 04 | SUPPORT POINT
   Complete CSS / PC・TB・SP

   PC : 4 columns
   TB : 2 columns × 2 rows
   SP : 2 columns × 2 rows

   Scope: .bj-care .bj-care-points
   Shared WEBP icons: bj-support-point-ico01–04
============================================================ */


/* ============================================================
   04-01. SECTION / CONTAINER
============================================================ */

.bj-care .bj-care-points {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 55px 0 clamp(76px, 6vw, 116px);
  background: #fffdfb;
}

.bj-care .bj-care-points__inner {
  width: min(calc(100% - 64px), 1440px);
  margin-inline: auto;
}


/* ============================================================
   04-02. SECTION HEADING
============================================================ */

.bj-care .bj-care-points__heading {
  max-width: 900px;
  margin: 0 auto clamp(36px, 3.3vw, 58px);
  text-align: center;
}

.bj-care .bj-care-points__eyebrow {
  margin: 0 0 14px;
  color: #e99e91;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .22em;
}

.bj-care .bj-care-points__title {
  margin: 0;
  color: #18374a;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
  font-size: clamp(27px, 2.4vw, 39px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .045em;
}

.bj-care .bj-care-points__accent {
  color: #e49b90;
}

.bj-care .bj-care-points__intro {
  margin: 17px 0 0;
  color: #465660;
  font-size: clamp(12px, .92vw, 14px);
  line-height: 1.95;
  letter-spacing: .02em;
}


/* ============================================================
   04-03. FOUR CARD GRID
============================================================ */

.bj-care .bj-care-points__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(15px, 1.6vw, 25px);
}

.bj-care .bj-care-points__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: clamp(30px, 2.6vw, 44px) clamp(15px, 1.65vw, 28px) 35px;
  border: 1px solid #f2e9e2;
  border-radius: 18px;
  background: #fbf7f3;
  text-align: center;
}


/* ============================================================
   04-04. COMMON WEBP ICONS
============================================================ */

.bj-care .bj-care-points__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
}

.bj-care .bj-care-points__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ============================================================
   04-05. CARD NUMBER
============================================================ */

.bj-care .bj-care-points__number {
  display: block;
  margin: 0 0 11px;
  color: #e6a092;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .07em;
}


/* ============================================================
   04-06. CARD TITLE / DESCRIPTION
============================================================ */

.bj-care .bj-care-points__card-title {
  margin: 0 0 15px;
  color: #18374a;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .015em;
}

.bj-care .bj-care-points__description {
  margin: 0;
  color: #53616b;
  font-size: clamp(11px, .83vw, 13px);
  line-height: 1.9;
  letter-spacing: .005em;
}


/* ============================================================
   04-07. MEDIUM PC
   1024px – 1279px
============================================================ */

@media (min-width: 1024px) and (max-width: 1279px) {

  .bj-care .bj-care-points__inner {
    width: calc(100% - 44px);
  }

  .bj-care .bj-care-points__grid {
    gap: 14px;
  }

  .bj-care .bj-care-points__card {
    padding: 30px 13px 30px;
  }

  .bj-care .bj-care-points__icon {
    width: 78px;
    height: 78px;
    margin-bottom: 15px;
  }

  .bj-care .bj-care-points__card-title {
    font-size: 17px;
  }

  .bj-care .bj-care-points__description {
    font-size: 11px;
  }

}


/* ============================================================
   04-08. TABLET
   768px – 1023px
============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  .bj-care .bj-care-points {
    padding: 48px 0 84px;
  }

  .bj-care .bj-care-points__inner {
    width: min(calc(100% - 54px), 760px);
  }

  .bj-care .bj-care-points__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .bj-care .bj-care-points__card {
    padding: 34px 24px 36px;
  }

  .bj-care .bj-care-points__icon {
    width: 88px;
    height: 88px;
  }

  .bj-care .bj-care-points__card-title {
    font-size: 20px;
  }

  .bj-care .bj-care-points__description {
    font-size: 13px;
  }

}


/* ============================================================
   04-09. SMARTPHONE
   375px – 767px
   2 columns × 2 rows
============================================================ */

@media (max-width: 767px) {

  .bj-care .bj-care-points {
    padding: 40px 0 72px;
  }

  .bj-care .bj-care-points__inner {
    width: min(calc(100% - 32px), 480px);
  }

  .bj-care .bj-care-points__heading {
    margin-bottom: 31px;
  }

  .bj-care .bj-care-points__eyebrow {
    margin-bottom: 12px;
    font-size: 10px;
  }

  .bj-care .bj-care-points__title {
    font-size: clamp(24px, 6.2vw, 30px);
    line-height: 1.5;
    letter-spacing: .015em;
  }

  .bj-care .bj-care-points__intro {
    margin-top: 15px;
    padding-inline: 9px;
    font-size: 12px;
    line-height: 1.9;
  }

  .bj-care .bj-care-points__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .bj-care .bj-care-points__card {
    padding: 23px 10px 26px;
    border-radius: 15px;
  }

  .bj-care .bj-care-points__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
  }

  .bj-care .bj-care-points__number {
    margin-bottom: 9px;
    font-size: 13px;
  }

  .bj-care .bj-care-points__card-title {
    margin-bottom: 12px;
    font-size: clamp(13px, 3.35vw, 16px);
    line-height: 1.6;
    letter-spacing: 0;
  }

  .bj-care .bj-care-points__description {
    font-size: clamp(10px, 2.65vw, 12px);
    line-height: 1.8;
    overflow-wrap: anywhere;
  }

  /* PC用の任意改行はSPでは自然に折り返す */
  .bj-care .bj-care-points__description br {
    display: none;
  }

}


/* ============================================================
   04-10. SMALL SMARTPHONE
   up to 374px
============================================================ */

@media (max-width: 374px) {

  .bj-care .bj-care-points__inner {
    width: calc(100% - 24px);
  }

  .bj-care .bj-care-points__grid {
    gap: 10px;
  }

  .bj-care .bj-care-points__card {
    padding: 20px 8px 24px;
  }

  .bj-care .bj-care-points__icon {
    width: 52px;
    height: 52px;
  }

  .bj-care .bj-care-points__card-title {
    font-size: 12px;
  }

  .bj-care .bj-care-points__description {
    font-size: 10px;
  }

}

/* END — DOULA SECTION 04 SUPPORT POINT */


/* ============================================================
   Baby-J CARE COMMON | SECTION 05 SCENE
   Shared layout for Care 4 LPs; copy/images belong to each HTML.
   PC 4 cards / TB 2 cards / SP 2 cards
============================================================ */
.bj-care .bj-care-scene {
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(58px, 5.2vw, 88px) 0 clamp(68px, 5.8vw, 104px);
  background: #fff;
}
.bj-care .bj-care-scene__inner {
  width: min(calc(100% - 64px), 1440px);
  margin-inline: auto;
}
.bj-care .bj-care-scene__heading {
  margin: 0 auto clamp(24px, 2vw, 38px);
  text-align: center;
}
.bj-care .bj-care-scene__eyebrow {
  margin: 0 0 12px;
  color: #e99e91;
  font: 600 11px/1.5 Arial, sans-serif;
  letter-spacing: .22em;
}
.bj-care .bj-care-scene__title {
  margin: 0;
  color: #18374a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .035em;
}
.bj-care .bj-care-scene__intro {
  margin: 12px 0 0;
  color: #364d5b;
  font-size: clamp(11px, .87vw, 13px);
  line-height: 1.85;
  letter-spacing: .02em;
}
.bj-care .bj-care-scene__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 24px);
  align-items: stretch;
}
.bj-care .bj-care-scene__card {
  min-width: 0;
  overflow: hidden;
  border-radius: 17px;
  background: #fbf5f0;
}
.bj-care .bj-care-scene__photo {
  width: 100%;
  aspect-ratio: 1.88 / 1;
  overflow: hidden;
  background: #f3ede7;
}
.bj-care .bj-care-scene__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.bj-care .bj-care-scene__body {
  position: relative;
  margin-top: -13px;
  min-height: 146px;
  padding: 18px clamp(12px, 1.2vw, 24px) 22px;
  border-radius: 16px 16px 0 0;
  background: #fbf5f0;
}
.bj-care .bj-care-scene__card-title {
  margin: 0 0 10px;
  color: #18374a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(16px, 1.25vw, 21px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .015em;
}
.bj-care .bj-care-scene__description {
  margin: 0;
  color: #465660;
  font-size: clamp(11px, .78vw, 13px);
  line-height: 1.75;
  letter-spacing: .005em;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bj-care .bj-care-scene__inner { width: min(calc(100% - 54px), 750px); }
  .bj-care .bj-care-scene__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bj-care .bj-care-scene__card-title { font-size: 20px; }
  .bj-care .bj-care-scene__description { font-size: 13px; }
}
@media (max-width: 767px) {
  .bj-care .bj-care-scene { padding: 56px 0 70px; }
  .bj-care .bj-care-scene__inner { width: min(calc(100% - 32px), 490px); }
  .bj-care .bj-care-scene__heading { margin-bottom: 27px; }
  .bj-care .bj-care-scene__eyebrow { font-size: 10px; }
  .bj-care .bj-care-scene__title { font-size: clamp(23px, 6vw, 29px); }
  .bj-care .bj-care-scene__intro { font-size: 12px; }
  .bj-care .bj-care-scene__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bj-care .bj-care-scene__card { border-radius: 14px; }
  .bj-care .bj-care-scene__photo { aspect-ratio: 1.26 / 1; }
  .bj-care .bj-care-scene__body { min-height: 0; margin-top: -10px; padding: 14px 11px 20px; border-radius: 12px 12px 0 0; }
  .bj-care .bj-care-scene__card-title { margin-bottom: 10px; font-size: clamp(13px, 3.55vw, 17px); line-height: 1.55; }
  .bj-care .bj-care-scene__description { font-size: clamp(10px, 2.68vw, 12px); line-height: 1.7; overflow-wrap: anywhere; }
}
@media (max-width: 374px) {
  .bj-care .bj-care-scene__inner { width: calc(100% - 24px); }
  .bj-care .bj-care-scene__grid { gap: 10px; }
  .bj-care .bj-care-scene__body { padding-inline: 9px; }
  .bj-care .bj-care-scene__card-title { font-size: 12px; }
  .bj-care .bj-care-scene__description { font-size: 10px; }
}


/* ============================================================
   SECTION 06 | SHARED OUR PROMISE
============================================================ */
.bj-care .bj-care-promise {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff7f1;
  color: #18374a;
}

.bj-care .bj-care-promise *,
.bj-care .bj-care-promise *::before,
.bj-care .bj-care-promise *::after {
  box-sizing: border-box;
}

.bj-care .bj-care-promise__inner {
  position: relative;
  display: grid;
  grid-template-columns: 40% minmax(0, 60%);
  align-items: stretch;
  width: 100%;
  min-height: clamp(270px, 23vw, 380px);
}

.bj-care .bj-care-promise__photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.bj-care .bj-care-promise__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 47%;
}

.bj-care .bj-care-promise__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 35px clamp(46px, 5.5vw, 100px) 35px clamp(32px, 4vw, 76px);
}

.bj-care .bj-care-promise__eyebrow {
  margin: 0 0 15px;
  color: #e99e91;
  font: 600 11px/1.5 Arial, sans-serif;
  letter-spacing: .22em;
}

.bj-care .bj-care-promise__title {
  margin: 0;
  color: #18374a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(23px, 2.15vw, 38px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .035em;
}

.bj-care .bj-care-promise__description {
  margin: 16px 0 0;
  color: #354957;
  font-size: clamp(11px, .83vw, 14px);
  line-height: 1.95;
  letter-spacing: .01em;
  overflow-wrap: break-word;
}

.bj-care .bj-care-promise__description > span {
  display: inline;
}

@media (min-width: 1600px) {
  .bj-care .bj-care-promise__description > span {
    display: block;
  }
}

.bj-care .bj-care-promise__botanical {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -28px;
  width: clamp(140px, 13vw, 240px);
  transform: translateY(-50%);
  opacity: .72;
  pointer-events: none;
}

.bj-care .bj-care-promise__botanical img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .bj-care .bj-care-promise__inner {
    grid-template-columns: 39% minmax(0, 61%);
    min-height: 285px;
  }

  .bj-care .bj-care-promise__content {
    padding: 32px 55px 32px 32px;
  }

  .bj-care .bj-care-promise__title {
    font-size: clamp(22px, 2.5vw, 30px);
    letter-spacing: .015em;
  }

  .bj-care .bj-care-promise__description {
    font-size: 11px;
  }

  .bj-care .bj-care-promise__botanical {
    right: -20px;
    width: 145px;
    opacity: .48;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bj-care .bj-care-promise__inner {
    grid-template-columns: 40% minmax(0, 60%);
    min-height: 360px;
  }

  .bj-care .bj-care-promise__content {
    padding: 35px 38px;
  }

  .bj-care .bj-care-promise__title {
    font-size: 23px;
    letter-spacing: .015em;
  }

  .bj-care .bj-care-promise__description {
    font-size: 12px;
  }

  .bj-care .bj-care-promise__botanical {
    right: -24px;
    width: 125px;
    opacity: .4;
  }
}

@media (max-width: 767px) {
  .bj-care .bj-care-promise__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .bj-care .bj-care-promise__photo {
    width: 100%;
    aspect-ratio: 1.55 / 1;
  }

  .bj-care .bj-care-promise__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center 46%;
  }

  .bj-care .bj-care-promise__content {
    z-index: 2;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 34px 26px 52px;
  }

  .bj-care .bj-care-promise__eyebrow {
    margin-bottom: 12px;
    font-size: 10px;
  }

  .bj-care .bj-care-promise__title {
    font-size: clamp(21px, 5.4vw, 27px);
    line-height: 1.65;
    letter-spacing: .01em;
  }

  .bj-care .bj-care-promise__description {
    max-width: 100%;
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.95;
    letter-spacing: 0;
  }

  .bj-care .bj-care-promise__description > span {
    display: inline;
  }

  .bj-care .bj-care-promise__botanical {
    top: auto;
    right: -12px;
    bottom: -8px;
    width: 96px;
    transform: none;
    opacity: .26;
  }
}

@media (max-width: 374px) {
  .bj-care .bj-care-promise__content {
    padding: 30px 22px 45px;
  }

  .bj-care .bj-care-promise__title {
    font-size: 20px;
  }

  .bj-care .bj-care-promise__description {
    font-size: 11.5px;
  }

  .bj-care .bj-care-promise__botanical {
    right: -12px;
    bottom: -5px;
    width: 82px;
  }
}

/* END — DOULA SECTION 06 */

/* ============================================================
   BABY-J CARE COMMON CSS
   SECTION 07 | SUPPORT FLOW
   COMPLETE REPLACEMENT

   4LP SHARED
   PC : 4 columns
   TB : 2 columns
   SP : 2 columns × 2 rows

   Scope: .bj-care .bj-care-flow
============================================================ */

/* 07-01 | BASE */

.bj-care .bj-care-flow {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #18374a;
}

.bj-care .bj-care-flow *,
.bj-care .bj-care-flow *::before,
.bj-care .bj-care-flow *::after {
  box-sizing: border-box;
}

/* 07-02 | HEADING */

.bj-care .bj-care-flow__heading {
  width: min(calc(100% - 48px), 960px);
  margin: 0 auto;
  padding: clamp(49px, 4.3vw, 76px) 0 31px;
  text-align: center;
}

.bj-care .bj-care-flow__eyebrow {
  margin: 0 0 15px;
  color: #e99e91;
  font: 600 11px/1.5 Arial, sans-serif;
  letter-spacing: .22em;
}

.bj-care .bj-care-flow__title {
  margin: 0;
  color: #18374a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN",
    "Noto Serif JP", serif;
  font-size: clamp(25px, 2.2vw, 37px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .035em;
}

.bj-care .bj-care-flow__title span {
  display: block;
  margin-bottom: 4px;
  font-size: .65em;
  line-height: 1.5;
}

.bj-care .bj-care-flow__intro {
  margin: 13px 0 0;
  color: #354957;
  font-size: clamp(11px, .87vw, 13px);
  line-height: 1.8;
}

/* 07-03 | FOUR STEPS */

.bj-care .bj-care-flow__steps {
  width: 100%;
  background: #fff7f1;
}

.bj-care .bj-care-flow__steps-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.1vw, 35px);
  align-items: start;
  width: min(calc(100% - 64px), 1500px);
  margin: 0 auto;
  padding: 33px 0;
}

.bj-care .bj-care-flow__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin: 0;
}

/* 07-04 | ICON */

.bj-care .bj-care-flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(47px, 3.25vw, 62px);
  width: clamp(47px, 3.25vw, 62px);
  height: clamp(47px, 3.25vw, 62px);
}

.bj-care .bj-care-flow__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 07-05 | TEXT */

.bj-care .bj-care-flow__step-content {
  min-width: 0;
}

.bj-care .bj-care-flow__step-title {
  margin: 3px 0 8px;
  color: #18374a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN",
    "Noto Serif JP", serif;
  font-size: clamp(13px, .96vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
}

.bj-care .bj-care-flow__step-text {
  margin: 0;
  color: #465660;
  font-size: clamp(10px, .74vw, 12px);
  line-height: 1.75;
}

/* 07-06 | FOOTER */

.bj-care .bj-care-flow__footer {
  width: min(calc(100% - 40px), 900px);
  margin: 0 auto;
  padding: clamp(29px, 2.7vw, 45px) 0
    clamp(43px, 3.8vw, 65px);
  text-align: center;
}

.bj-care .bj-care-flow__footer-title {
  margin: 0;
  color: #18374a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN",
    "Noto Serif JP", serif;
  font-size: clamp(18px, 1.42vw, 24px);
  font-weight: 500;
  line-height: 1.65;
}

.bj-care .bj-care-flow__footer-text {
  margin: 10px 0 0;
  color: #465660;
  font-size: clamp(11px, .85vw, 13px);
  line-height: 1.85;
}

.bj-care .bj-care-flow__actions {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
  margin-top: 23px;
}

.bj-care .bj-care-flow__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: min(100%, 310px);
  min-height: 49px;
  padding: 12px 22px;
  border: 1px solid #18374a;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.bj-care .bj-care-flow__button--primary {
  color: #fff;
  background: #18374a;
}

.bj-care .bj-care-flow__button--primary:hover {
  color: #fff;
  background: #294f62;
}

.bj-care .bj-care-flow__button--secondary {
  color: #18374a;
  background: #fff;
}

.bj-care .bj-care-flow__button--secondary:hover {
  color: #fff;
  background: #18374a;
}

.bj-care .bj-care-flow__button:focus-visible {
  outline: 2px solid #e99e91;
  outline-offset: 4px;
}

/* 07-07 | MEDIUM PC */

@media (min-width: 1024px) and (max-width: 1279px) {
  .bj-care .bj-care-flow__steps-inner {
    width: calc(100% - 44px);
    gap: 12px;
  }

  .bj-care .bj-care-flow__step {
    gap: 9px;
  }

  .bj-care .bj-care-flow__icon {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
  }

  .bj-care .bj-care-flow__step-title {
    font-size: 13px;
  }

  .bj-care .bj-care-flow__step-text {
    font-size: 10px;
  }
}

/* 07-08 | TABLET */

@media (min-width: 768px) and (max-width: 1023px) {
  .bj-care .bj-care-flow__steps-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(calc(100% - 60px), 730px);
    gap: 28px 35px;
    padding: 36px 0;
  }

  .bj-care .bj-care-flow__icon {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .bj-care .bj-care-flow__step-title {
    font-size: 16px;
  }

  .bj-care .bj-care-flow__step-text {
    font-size: 12px;
  }
}

/* 07-09 | SMARTPHONE */

@media (max-width: 767px) {
  .bj-care .bj-care-flow__heading {
    width: calc(100% - 32px);
    padding: 58px 0 28px;
  }

  .bj-care .bj-care-flow__eyebrow {
    font-size: 10px;
  }

  .bj-care .bj-care-flow__title {
    font-size: clamp(24px, 6.3vw, 29px);
  }

  .bj-care .bj-care-flow__intro {
    max-width: 340px;
    margin: 13px auto 0;
    font-size: 12px;
  }

  /* Two consistent columns */

  .bj-care .bj-care-flow__steps-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: calc(100% - 32px);
    gap: 26px 18px;
    padding: 32px 0 36px;
  }

  .bj-care .bj-care-flow__step {
    display: grid;
    grid-template-rows: 52px auto 1fr;
    align-content: start;
    justify-items: start;
    gap: 0;
    min-width: 0;
  }

  /* Icons align at the top */

  .bj-care .bj-care-flow__icon {
    flex-basis: auto;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  /* Grid area reserved for title and description */

  .bj-care .bj-care-flow__step-content {
    width: 100%;
  }

  .bj-care .bj-care-flow__step-title {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 4px 0 5px;
    font-size: clamp(12px, 3.1vw, 14px);
    line-height: 1.5;
  }

  .bj-care .bj-care-flow__step-text {
    margin: 0;
    font-size: clamp(10px, 2.65vw, 12px);
    line-height: 1.7;
  }

  .bj-care .bj-care-flow__footer {
    width: calc(100% - 36px);
    padding: 34px 0 55px;
  }

  .bj-care .bj-care-flow__footer-title {
    font-size: clamp(18px, 4.5vw, 22px);
  }

  .bj-care .bj-care-flow__footer-text {
    font-size: 11px;
    line-height: 1.9;
  }

  .bj-care .bj-care-flow__actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 23px;
  }

  .bj-care .bj-care-flow__button {
    width: min(100%, 340px);
    min-height: 50px;
  }
}

/* 07-10 | SMALL SMARTPHONE */

@media (max-width: 374px) {
  .bj-care .bj-care-flow__steps-inner {
    width: calc(100% - 26px);
    gap: 24px 12px;
  }

  .bj-care .bj-care-flow__step-title {
    font-size: 12px;
  }

  .bj-care .bj-care-flow__step-text {
    font-size: 10px;
  }
}

/* 07-11 | REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .bj-care .bj-care-flow__button {
    transition: none;
  }
}

/* END — CARE COMMON SECTION 07 SUPPORT FLOW */


/* ============================================================
   CARE COMMON | SECTION 08 FAQ
============================================================ */
.bj-care .bj-care-faq {
  width:100%;
  margin:0;
  padding:clamp(65px,5.3vw,95px) 0 clamp(72px,5.8vw,105px);
  background:#fff;
  color:#18374a
}

.bj-care .bj-care-faq *,.bj-care .bj-care-faq *::before,.bj-care .bj-care-faq *::after {
  box-sizing:border-box
}

.bj-care .bj-care-faq__inner {
  width:min(calc(100% - 80px),1440px);
  margin:auto
}

.bj-care .bj-care-faq__heading {
  margin:0 auto 42px;
  text-align:center
}

.bj-care .bj-care-faq__eyebrow {
  margin:0 0 14px;
  color:#e99e91;
  font:600 11px/1.5 Arial,sans-serif;
  letter-spacing:.22em
}

.bj-care .bj-care-faq__title {
  margin:0;
  color:#18374a;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(27px,2.4vw,39px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:.045em
}

.bj-care .bj-care-faq__intro {
  margin:15px 0 0;
  color:#53616b;
  font-size:clamp(11px,.85vw,13px);
  line-height:1.9
}

.bj-care .bj-care-faq__grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,3vw,56px);
  align-items:start
}

.bj-care .bj-care-faq__column {
  min-width:0
}

.bj-care .bj-care-faq__item {
  margin:0;
  padding:0;
  border-top:1px solid #e8e8e6;
  background:transparent
}

.bj-care .bj-care-faq__item:last-child {
  border-bottom:1px solid #e8e8e6
}

.bj-care .bj-care-faq__question {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:66px;
  margin:0;
  padding:17px 12px;
  color:#18374a;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(13px,1vw,17px);
  font-weight:600;
  line-height:1.65;
  letter-spacing:.01em;
  list-style:none;
  cursor:pointer
}

.bj-care .bj-care-faq__question::-webkit-details-marker {
  display:none
}

.bj-care .bj-care-faq__question::marker {
  content:""
}

.bj-care .bj-care-faq__question:hover {
  color:#385d71
}

.bj-care .bj-care-faq__question:focus-visible {
  outline:2px solid #e99e91;
  outline-offset:-2px
}

.bj-care .bj-care-faq__toggle {
  position:relative;
  display:block;
  flex:0 0 18px;
  width:18px;
  height:18px
}

.bj-care .bj-care-faq__toggle::before,.bj-care .bj-care-faq__toggle::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:13px;
  height:1.5px;
  background:#18374a;
  border-radius:2px;
  transform-origin:center;
  transition:transform .2s ease
}

.bj-care .bj-care-faq__toggle::before {
  transform:translate(-50%,-50%)
}

.bj-care .bj-care-faq__toggle::after {
  transform:translate(-50%,-50%) rotate(90deg)
}

.bj-care .bj-care-faq__item[open] .bj-care-faq__toggle::before {
  transform:translate(-50%,-50%) rotate(45deg)
}

.bj-care .bj-care-faq__item[open] .bj-care-faq__toggle::after {
  transform:translate(-50%,-50%) rotate(135deg)
}

.bj-care .bj-care-faq__answer {
  padding:0 44px 24px 12px
}

.bj-care .bj-care-faq__answer p {
  margin:0;
  color:#465660;
  font-size:clamp(11px,.85vw,13px);
  line-height:2;
  letter-spacing:.015em;
  overflow-wrap:anywhere
}

@media (min-width:1024px) and (max-width:1279px) {
  .bj-care .bj-care-faq__inner {
    width:calc(100% - 60px)
  }
  .bj-care .bj-care-faq__grid {
    gap:30px
  }
  .bj-care .bj-care-faq__question {
    font-size:14px
  }
}

@media (min-width:768px) and (max-width:1023px) {
  .bj-care .bj-care-faq {
    padding:72px 0 80px
  }
  .bj-care .bj-care-faq__inner {
    width:calc(100% - 52px)
  }
  .bj-care .bj-care-faq__grid {
    gap:25px
  }
  .bj-care .bj-care-faq__question {
    min-height:72px;
    padding:15px 8px;
    gap:10px;
    font-size:13px
  }
  .bj-care .bj-care-faq__answer {
    padding:0 25px 22px 8px
  }
  .bj-care .bj-care-faq__answer p {
    font-size:12px
  }
}

@media (max-width:767px) {
  .bj-care .bj-care-faq {
    padding:62px 0 75px
  }
  .bj-care .bj-care-faq__inner {
    width:calc(100% - 36px)
  }
  .bj-care .bj-care-faq__heading {
    margin-bottom:31px
  }
  .bj-care .bj-care-faq__eyebrow {
    margin-bottom:11px;
    font-size:10px
  }
  .bj-care .bj-care-faq__title {
    font-size:clamp(26px,6.8vw,32px)
  }
  .bj-care .bj-care-faq__intro {
    margin-top:13px;
    font-size:11px;
    line-height:1.85
  }
  .bj-care .bj-care-faq__grid {
    grid-template-columns:minmax(0,1fr);
    gap:0
  }
  .bj-care .bj-care-faq__column:first-child .bj-care-faq__item:last-child {
    border-bottom:0
  }
  .bj-care .bj-care-faq__question {
    min-height:64px;
    padding:15px 5px;
    gap:13px;
    font-size:clamp(13px,3.55vw,16px)
  }
  .bj-care .bj-care-faq__answer {
    padding:0 25px 23px 5px
  }
  .bj-care .bj-care-faq__answer p {
    font-size:12px;
    line-height:1.95
  }
}

@media (max-width:374px) {
  .bj-care .bj-care-faq__inner {
    width:calc(100% - 28px)
  }
  .bj-care .bj-care-faq__question {
    font-size:12.5px
  }
  .bj-care .bj-care-faq__answer p {
    font-size:11.5px
  }
}

@media (prefers-reduced-motion:reduce) {
  .bj-care .bj-care-faq__toggle::before,.bj-care .bj-care-faq__toggle::after {
    transition:none
  }
}

/* ============================================================
   CARE COMMON | SECTION 09 MEET OUR DOULAS
   FULL DESIGN | PHOTO + CAPSULE + HORIZONTAL SCROLL
============================================================ */
.bj-care .bj-care-meet {
  --care-meet-navy:#18374a;
  --care-meet-coral:#f07f79;
  --care-meet-card-width:228px;
  --care-meet-gap:16px;
  position:relative;
  width:100%;
  margin:0;
  padding:clamp(57px,5.2vw,88px) 0 52px;
  overflow:hidden;
  background:#faf7f2;
  color:var(--care-meet-navy)
}

.bj-care .bj-care-meet *,.bj-care .bj-care-meet *::before,.bj-care .bj-care-meet *::after {
  box-sizing:border-box
}

.bj-care .bj-care-meet__heading {
  width:min(calc(100% - 36px),920px);
  margin:0 auto 26px;
  text-align:center
}

.bj-care .bj-care-meet__eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 13px;
  color:#e99e91;
  font:500 11px/1.5 Georgia,serif;
  letter-spacing:.07em
}

.bj-care .bj-care-meet__eyebrow::before,.bj-care .bj-care-meet__eyebrow::after {
  content:"";
  width:34px;
  height:1px;
  background:#f0c2b8
}

.bj-care .bj-care-meet__title {
  margin:0;
  color:var(--care-meet-navy);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(25px,2.15vw,36px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:.055em
}

.bj-care .bj-care-meet__intro {
  margin:8px 0 0;
  color:#485762;
  font-size:clamp(11px,.82vw,13px);
  line-height:1.85
}

.bj-care .bj-care-meet__slider {
  position:relative;
  width:min(100%,1600px);
  margin:0 auto
}

.bj-care .bj-care-meet__viewport {
  display:block;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}

.bj-care .bj-care-meet__viewport::-webkit-scrollbar {
  display:none
}

.bj-care .bj-care-meet__viewport:focus-visible {
  outline:2px solid #e99e91;
  outline-offset:-2px
}

.bj-care .bj-care-meet__track {
  display:flex;
  flex-flow:row nowrap;
  align-items:stretch;
  gap:var(--care-meet-gap);
  width:max-content;
  min-width:100%;
  padding:4px clamp(40px,4vw,78px) 17px
}

.bj-care .bj-care-meet__card {
  display:block;
  flex:0 0 var(--care-meet-card-width);
  width:var(--care-meet-card-width);
  min-width:0;
  margin:0;
  padding:0 9px 7px;
  border-right:1px solid #eadfd9;
  background:transparent;
  text-align:center;
  scroll-snap-align:start
}

.bj-care .bj-care-meet__portrait {
  display:block;
  width:100%;
  aspect-ratio:1 / 1.12;
  overflow:hidden;
  border-radius:999px 999px 10px 10px;
  background:#f0e9e2
}

.bj-care .bj-care-meet__portrait img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 27%;
  border-radius:0
}

.bj-care .bj-care-meet__specialty {
  display:block;
  width:100%;
  margin:10px auto 7px;
  padding:6px 5px;
  border:0;
  border-radius:999px;
  background:#ff9a93;
  color:#fff;
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  white-space:normal
}

.bj-care .bj-care-meet__name {
  display:none
}

.bj-care .bj-care-meet__area {
  margin:8px 0 0;
  color:#465660;
  font-size:11px;
  line-height:1.6
}

.bj-care .bj-care-meet__description {
  min-height:48px;
  margin:9px 0 0;
  color:#304656;
  font-size:11px;
  line-height:1.6
}

.bj-care .bj-care-meet__price {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  margin:9px 0 0;
  color:#18374a
}

.bj-care .bj-care-meet__price-number {
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:-.03em
}

.bj-care .bj-care-meet__price-unit {
  font-size:10px;
  white-space:nowrap
}

.bj-care .bj-care-meet__empty {
  padding:40px;
  color:#53616b;
  font-size:13px
}

.bj-care .bj-care-meet__arrow {
  position:absolute;
  z-index:3;
  top:36%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin:0;
  padding:0;
  border:1px solid #e9e2dc;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  color:#18374a;
  box-shadow:0 3px 11px rgba(20,42,58,.06);
  cursor:pointer
}

.bj-care .bj-care-meet__arrow span {
  display:block;
  font:28px/1 Arial,sans-serif;
  transform:translateY(-2px)
}

.bj-care .bj-care-meet__arrow--prev {
  left:17px
}

.bj-care .bj-care-meet__arrow--next {
  right:17px
}

.bj-care .bj-care-meet__arrow:disabled {
  opacity:.25;
  cursor:default
}

.bj-care .bj-care-meet__arrow:focus-visible {
  outline:2px solid #e99e91;
  outline-offset:3px
}

.bj-care .bj-care-meet__footer {
  width:min(calc(100% - 32px),850px);
  margin:18px auto 0;
  text-align:center
}

.bj-care .bj-care-meet__actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px
}

.bj-care .bj-care-meet__button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(100%,325px);
  min-height:48px;
  padding:11px 18px;
  border:1px solid #f07c78;
  border-radius:999px;
  font-size:12px;
  line-height:1.5;
  text-decoration:none;
  transition:background .2s ease,color .2s ease
}

.bj-care .bj-care-meet__button--primary {
  background:#f07c78;
  color:#fff
}

.bj-care .bj-care-meet__button--primary:hover {
  background:#dd6b68;
  color:#fff
}

.bj-care .bj-care-meet__button--secondary {
  background:#fff;
  color:#ed7773
}

.bj-care .bj-care-meet__button--secondary:hover {
  background:#fff1ed;
  color:#d8635f
}

.bj-care .bj-care-meet__note {
  margin:11px 0 0;
  color:#9d9491;
  font-size:10px;
  line-height:1.6
}

@media (min-width:1600px) {
  .bj-care .bj-care-meet {
    --care-meet-card-width:252px;
    --care-meet-gap:18px
  }
}

@media (min-width:768px) and (max-width:1279px) {
  .bj-care .bj-care-meet {
    --care-meet-card-width:214px;
    --care-meet-gap:14px
  }
}

@media (max-width:767px) {
  .bj-care .bj-care-meet {
    --care-meet-card-width:196px;
    --care-meet-gap:12px;
    padding:59px 0 65px
  }
  .bj-care .bj-care-meet__heading {
    margin-bottom:23px
  }
  .bj-care .bj-care-meet__eyebrow {
    font-size:10px
  }
  .bj-care .bj-care-meet__title {
    font-size:clamp(23px,6vw,29px)
  }
  .bj-care .bj-care-meet__intro {
    font-size:12px
  }
  .bj-care .bj-care-meet__track {
    padding-inline:22px
  }
  .bj-care .bj-care-meet__arrow {
    top:34%;
    width:31px;
    height:31px
  }
  .bj-care .bj-care-meet__arrow--prev {
    left:5px
  }
  .bj-care .bj-care-meet__arrow--next {
    right:5px
  }
  .bj-care .bj-care-meet__actions {
    flex-direction:column;
    gap:12px
  }
  .bj-care .bj-care-meet__button {
    width:min(100%,340px)
  }
}

@media (max-width:374px) {
  .bj-care .bj-care-meet {
    --care-meet-card-width:176px
  }
}

@media (prefers-reduced-motion:reduce) {
  .bj-care .bj-care-meet__viewport {
    scroll-behavior:auto
  }
  .bj-care .bj-care-meet__button {
    transition:none
  }
}

/* END — CARE COMMON / SECTION 03,04,05,07,08,09 */

/* ============================================================
   Baby-J CARE COMMON CSS | SECTION 10 FINAL CTA
   REPLACEMENT / PC · TB · SP
   Compatible with Section 10 HTML where benefits are
   outside .bj-care-final__visual, inside .bj-care-final.

   PC/TB: original photo composition, copy at left
   SP: original portrait image, two-line heading at top,
       supporting copy above mother's face, benefits below
============================================================ */

.bj-care .bj-care-final {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #faf7f2;
  color: #18374a;
}

.bj-care .bj-care-final *,
.bj-care .bj-care-final *::before,
.bj-care .bj-care-final *::after {
  box-sizing: border-box;
}

.bj-care .bj-care-final__visual {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 24vw, 480px);
  overflow: hidden;
}

.bj-care .bj-care-final__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.bj-care .bj-care-final__picture::after {
  content: none;
}

.bj-care .bj-care-final__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.bj-care .bj-care-final__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: min(100%, 1600px);
  min-height: inherit;
  margin-inline: auto;
  padding: clamp(48px, 4.5vw, 80px) clamp(35px, 7vw, 140px);
}

.bj-care .bj-care-final__title {
  margin: 0;
  color: #18374a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(29px, 2.65vw, 46px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .035em;
}

.bj-care .bj-care-final__description {
  margin: clamp(13px, 1.35vw, 22px) 0 0;
  color: #18374a;
  font-size: clamp(12px, .98vw, 16px);
  line-height: 1.9;
  letter-spacing: .025em;
}

/* Benefits are placed after .bj-care-final__visual in HTML. */
.bj-care .bj-care-final__benefits {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(15px, 2.5vw, 43px);
  width: min(100%, 1600px);
  margin: -90px auto 0;
  padding: 0 clamp(35px, 7vw, 140px) 40px;
  list-style: none;
}

.bj-care .bj-care-final__benefit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #af795c;
  font-size: clamp(11px, .9vw, 14px);
  line-height: 1.7;
  letter-spacing: .035em;
  white-space: nowrap;
}

.bj-care .bj-care-final__benefit-icon {
  display: none;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .bj-care .bj-care-final__visual { min-height: 360px; }
  .bj-care .bj-care-final__image { object-position: 54% center; }
  .bj-care .bj-care-final__content { padding: 48px 5%; }
  .bj-care .bj-care-final__title { font-size: clamp(28px, 3vw, 36px); }
  .bj-care .bj-care-final__description { font-size: 13px; }
  .bj-care .bj-care-final__benefits {
    gap: 17px;
    padding-inline: 5%;
  }
  .bj-care .bj-care-final__benefit { font-size: 11px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bj-care .bj-care-final__visual { min-height: 380px; }
  .bj-care .bj-care-final__image { object-position: 58% center; }
  .bj-care .bj-care-final__content { padding: 46px 5%; }
  .bj-care .bj-care-final__title {
    font-size: clamp(27px, 3.6vw, 34px);
    line-height: 1.55;
  }
  .bj-care .bj-care-final__description { max-width: 350px; font-size: 12px; }
  .bj-care .bj-care-final__pc-break { display: none; }
  .bj-care .bj-care-final__benefits {
    max-width: 100%;
    gap: 10px 20px;
    margin-top: -83px;
    padding: 0 5% 26px;
  }
  .bj-care .bj-care-final__benefit { font-size: 11px; }
}

/* SP: preserve the actual portrait image composition.
   A fixed photo block is used; only copy is overlaid.
   Benefits live outside the photo and cannot cover the baby. */
@media (max-width: 767px) {
  .bj-care .bj-care-final__visual {
    position: relative;
    min-height: 0;
    overflow: hidden;
  }

  .bj-care .bj-care-final__picture {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(500px, 128vw, 620px);
    overflow: hidden;
  }

  .bj-care .bj-care-final__picture::after {
    content: none;
  }

  .bj-care .bj-care-final__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .bj-care .bj-care-final__content {
    position: absolute;
    z-index: 2;
    inset: 0 auto auto 0;
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 25px 20px 0;
    background: transparent;
  }

  .bj-care .bj-care-final__title {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: clamp(19px, 5.45vw, 25px);
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: -.035em;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .bj-care .bj-care-final__description {
    width: 100%;
    max-width: 360px;
    margin: 9px 0 0;
    font-size: clamp(10px, 2.82vw, 12px);
    line-height: 1.67;
    letter-spacing: -.01em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .bj-care .bj-care-final__pc-break { display: none; }

  .bj-care .bj-care-final__benefits {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 25px 24px;
    gap: 0;
    background: #faf7f2;
  }

  .bj-care .bj-care-final__benefit {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    color: #af795c;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .045em;
    text-align: center;
    white-space: normal;
  }

  .bj-care .bj-care-final__benefit:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 34px;
    height: 1px;
    background: #e7b0a3;
    transform: translateX(-50%);
  }
}

@media (max-width: 374px) {
  .bj-care .bj-care-final__content { padding: 22px 16px 0; }
  .bj-care .bj-care-final__title {
    font-size: clamp(18px, 5.6vw, 21px);
    letter-spacing: -.045em;
  }
  .bj-care .bj-care-final__description {
    font-size: 10px;
    line-height: 1.65;
    margin-top: 8px;
  }
  .bj-care .bj-care-final__benefits { padding: 18px 21px 23px; }
  .bj-care .bj-care-final__benefit { padding: 12px 0; font-size: 11.5px; }
}

/* END — CARE COMMON SECTION 10 FINAL CTA */

/* SECTION 07｜SP アイコン中央配置 */
@media (max-width: 767px) {
  .bj-care .bj-care-flow__icon {
    margin-inline: auto;
  }
}

/* ============================================================
   Baby-J CARE COMMON | Opt-in HERO light engine ADD-ON
   Append to END of existing babyJ_care_Common.css.
   No default effect on Doula or any other LP.
   Nanny is the first opted-in LP; future LPs may add their
   own scope to :is() and set the custom properties below.
   ============================================================ */
@media (max-width: 769px) {
  .bj-care:is(.bj-nanny, .bj-care-light-on) .bj-care-hero {
    isolation: isolate;
  }
  .bj-care:is(.bj-nanny, .bj-care-light-on) .bj-care-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      radial-gradient(
        ellipse var(--care-light-top-width, 75%) var(--care-light-top-height, 20%)
        at var(--care-light-top-x, 18%) var(--care-light-top-y, 8%),
        rgba(250,247,242,var(--care-light-top-opacity, .2)) 0%,
        transparent 100%
      ),
      radial-gradient(
        ellipse var(--care-light-bottom-width, 100%) var(--care-light-bottom-height, 28%)
        at var(--care-light-bottom-x, 20%) var(--care-light-bottom-y, 82%),
        rgba(250,247,242,var(--care-light-bottom-opacity, .6)) 0%,
        transparent 100%
      ) !important;
  }
  .bj-care:is(.bj-nanny, .bj-care-light-on) .bj-care-hero__visual {
    z-index: 0;
  }
  .bj-care:is(.bj-nanny, .bj-care-light-on) .bj-care-hero__intro,
  .bj-care:is(.bj-nanny, .bj-care-light-on) .bj-care-hero__details {
    z-index: 3;
  }
}