/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 20 2026 | 07:13:45 */
/* ============================================================
   BABY-J FAMILY BABY MASSAGE
   PAGE CSS — SECTION 01 + SECTION 02

   WordPress：Baby-J BabyMassage CSS

   SECTION 01 — HERO
   SECTION 02 — WHY FAMILY BABY MASSAGE

   共通CSS・OneViewマスターCSS・JSは別管理
   ============================================================ */


/* ============================================================
   BASE — ベビマ共通設定
   ============================================================ */
:root {
  --bj-header-h: 64px;
}

@media (max-width: 767px) {
  :root {
    --bj-header-h: 56px;
  }
}

.bj-babymassage {
  --bm-ink: #4f3b31;
  --bm-paper: #f8f6f2;
  --bm-pad: clamp(24px, 5.9vw, 102px);

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif CJK JP",
    serif;

  color: var(--bm-ink);
}


/* ============================================================
   SECTION 01 — HERO START
   ============================================================ */

.bj-babymassage .ow-panel,
.bj-babymassage .bm-hero,
.bj-babymassage .bm-section02,
.bj-babymassage .bm-section03 {
  min-height: calc(100svh - var(--bj-header-h));
  min-height: calc(100dvh - var(--bj-header-h));
  scroll-margin-top: var(--bj-header-h);
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   SECTION 01 — 基本レイアウト
   ------------------------------------------------------------ */

.bj-babymassage .bm-hero {
  background: var(--bm-paper);

  min-height: 100svh;
  min-height: 100dvh;

  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;

  overflow: hidden;
}


/* ------------------------------------------------------------
   SECTION 01 — 背景画像
   ------------------------------------------------------------ */

.bj-babymassage .bm-hero__photo,
.bj-babymassage .bm-hero__picture {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
}

.bj-babymassage .bm-hero__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

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

/* 既存HEROの背景処理を維持 */

.bj-babymassage .bm-hero__photo::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    var(--bm-paper) 0%,
    rgba(248, 246, 242, .99) 13%,
    rgba(248, 246, 242, .91) 24%,
    rgba(248, 246, 242, .58) 38%,
    transparent 58%
  );
}


/* ------------------------------------------------------------
   SECTION 01 — コピー配置
   ------------------------------------------------------------ */

.bj-babymassage .bm-hero__content {
  position: relative;
  z-index: 1;

  align-self: center;
  justify-self: start;

  width: min(59%, 740px);

  padding:
    clamp(25px, 5vh, 65px)
    0
    clamp(22px, 4vh, 55px)
    var(--bm-pad);
}


/* SECTION 01 — ブランド */

.bj-babymassage .bm-brand {
  font: 600 clamp(24px, 2.5vw, 42px)/1.2 Georgia, serif;

  letter-spacing: .12em;
  margin: 0 0 7px;
}

.bj-babymassage .bm-brand__en {
  font: 600 clamp(11px, 1.1vw, 18px)/1.3 Georgia, serif;

  letter-spacing: .13em;
  margin: 0;
}


/* SECTION 01 — メインコピー */

.bj-babymassage .bm-hero__title {
  font-weight: 400;

  font-size: clamp(32px, 4.3vw, 70px);
  line-height: 1.55;
  letter-spacing: .08em;

  margin: clamp(27px, 5vh, 55px) 0 0;

  white-space: nowrap;
}


/* SECTION 01 — 装飾ライン */

.bj-babymassage .bm-hero__rule {
  display: block;

  width: 40px;
  height: 2px;

  background: #dba291;

  margin:
    clamp(18px, 4vh, 42px)
    0
    clamp(14px, 3vh, 28px);
}


/* SECTION 01 — サブコピー */

.bj-babymassage .bm-hero__description {
  font-size: clamp(10px, .98vw, 16px);

  line-height: 2;
  letter-spacing: .04em;

  margin: 0;
}


/* ------------------------------------------------------------
   SECTION 01 — CTA・SCROLL
   ------------------------------------------------------------ */

.bj-babymassage .bm-hero__bottom {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 12px;

  padding:
    8px
    max(var(--bm-pad), env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(var(--bm-pad), env(safe-area-inset-left));
}


/* SECTION 01 — CTAグループ */

.bj-babymassage .bm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* SECTION 01 — CTAボタン */

.bj-babymassage .bm-hero__cta {
  min-width: 186px;
  min-height: 54px;

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

  gap: 15px;
  padding: 10px 17px;

  color: #604640;
  background: #f3cec7;

  border: 1px solid #eac2ba;
  border-radius: 999px;

  text-decoration: none;

  font: 600 13px/1.3 system-ui, "Noto Sans JP", sans-serif;

  box-shadow: 0 7px 20px rgba(92, 60, 50, .09);
  transition: transform .18s ease;
}

.bj-babymassage .bm-hero__cta--teacher {
  background: rgba(255, 252, 247, .94);
  border-color: #dcc8bf;
}

.bj-babymassage .bm-hero__cta:hover {
  transform: translateY(-2px);
}

.bj-babymassage .bm-hero__cta svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.bj-babymassage .bm-hero__cta:focus-visible,
.bj-babymassage .bm-hero__scroll:focus-visible {
  outline: 3px solid #ae7764;
  outline-offset: 3px;
}


/* SECTION 01 — SCROLL */

.bj-babymassage .bm-hero__scroll {
  display: flex;
  align-items: center;

  gap: 12px;
  min-height: 48px;

  color: #816a60;

  font: 11px/1 Georgia, serif;
  letter-spacing: .18em;

  text-decoration: none;
  white-space: nowrap;
}

.bj-babymassage .bm-hero__scroll::after {
  content: "";

  width: 40px;
  height: 1px;

  background: #c99586;
}


/* ------------------------------------------------------------
   SECTION 01 — PC：1440px以上
   ------------------------------------------------------------ */

@media (min-width: 1440px) {

  .bj-babymassage .bm-hero__image {
    object-position: 100% center;
  }

  .bj-babymassage .bm-hero__cta {
    width: 260px;
  }
}


/* ------------------------------------------------------------
   SECTION 01 — PC：1101〜1439px
   ------------------------------------------------------------ */

@media (min-width: 1101px) and (max-width: 1439px) {

  .bj-babymassage {
    --bm-pad: clamp(48px, 5.2vw, 74px);
  }

  .bj-babymassage .bm-hero__content {
    width: 61%;
  }

  .bj-babymassage .bm-hero__title {
    font-size: clamp(39px, 4.3vw, 60px);
  }

  .bj-babymassage .bm-hero__image {
    object-position: 95% center;
  }

  .bj-babymassage .bm-hero__cta {
    width: 240px;
  }
}


/* ------------------------------------------------------------
   SECTION 01 — TB・中間幅：768〜1100px
   ------------------------------------------------------------ */

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

  .bj-babymassage {
    --bm-pad: clamp(35px, 5vw, 58px);
  }

  .bj-babymassage .bm-hero__image {
    object-position: 91% center;
  }

  .bj-babymassage .bm-hero__photo::after {
    background: linear-gradient(
      90deg,
      var(--bm-paper) 0%,
      rgba(248, 246, 242, .98) 17%,
      rgba(248, 246, 242, .88) 27%,
      rgba(248, 246, 242, .45) 42%,
      transparent 65%
    );
  }

  .bj-babymassage .bm-hero__content {
    width: 61%;
  }

  .bj-babymassage .bm-brand {
    font-size: clamp(24px, 3vw, 32px);
  }

  .bj-babymassage .bm-hero__title {
    font-size: clamp(34px, 4.3vw, 46px);
  }

  .bj-babymassage .bm-hero__description {
    font-size: clamp(10px, 1.15vw, 13px);
  }

  .bj-babymassage .bm-hero__cta {
    min-width: 164px;
  }
}


/* ------------------------------------------------------------
   SECTION 01 — 縦向きTB・大きめSP
   ------------------------------------------------------------ */

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

  .bj-babymassage {
    --bm-pad: clamp(26px, 5vw, 48px);
  }

  .bj-babymassage .bm-hero__image {
    object-position: 53% 56%;
  }

  .bj-babymassage .bm-hero__photo::after {
    background: linear-gradient(
      to bottom,
      var(--bm-paper) 0%,
      rgba(248, 246, 242, .98) 16%,
      rgba(248, 246, 242, .78) 24%,
      rgba(248, 246, 242, .24) 34%,
      transparent 48%
    );
  }

  .bj-babymassage .bm-hero__content {
    align-self: start;

    width: 100%;

    padding:
      clamp(27px, 5vh, 56px)
      var(--bm-pad)
      0;
  }

  .bj-babymassage .bm-brand {
    font-size: clamp(23px, 3.5vw, 32px);
  }

  .bj-babymassage .bm-brand__en {
    font-size: clamp(11px, 1.8vw, 15px);
  }

  .bj-babymassage .bm-hero__title {
    font-size: clamp(34px, 5.4vw, 52px);

    margin-top: clamp(24px, 4vh, 44px);
    line-height: 1.49;
  }

  .bj-babymassage .bm-hero__rule {
    margin: clamp(16px, 2.5vh, 26px) 0;
  }

  .bj-babymassage .bm-hero__description {
    font-size: clamp(10px, 1.5vw, 13px);
  }
}


/* ------------------------------------------------------------
   SECTION 01 — SP：479px以下
   ------------------------------------------------------------ */

@media (max-width: 479px) {

  .bj-babymassage {
    --bm-pad: clamp(19px, 5.4vw, 30px);
  }

  .bj-babymassage .bm-brand {
    font-size: clamp(21px, 6vw, 27px);
  }

  .bj-babymassage .bm-brand__en {
    font-size: 11px;
  }

  .bj-babymassage .bm-hero__title {
    font-size: clamp(30px, 8vw, 39px);

    letter-spacing: .045em;
    margin-top: clamp(22px, 4vh, 40px);
  }

  .bj-babymassage .bm-hero__description {
    font-size: clamp(10px, 2.5vw, 12px);
    line-height: 1.95;
  }

  .bj-babymassage .bm-hero__bottom {
    padding-bottom: max(13px, env(safe-area-inset-bottom));
  }

  .bj-babymassage .bm-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    flex: 1;
    gap: 8px;
  }

  .bj-babymassage .bm-hero__cta {
    min-width: 0;
    min-height: 52px;

    padding: 9px 5px;
    gap: 5px;

    font-size: clamp(10px, 2.8vw, 12px);
  }

  .bj-babymassage .bm-hero__scroll {
    writing-mode: vertical-rl;

    font-size: 9px;
    gap: 7px;
  }

  .bj-babymassage .bm-hero__scroll::after {
    width: 1px;
    height: 22px;
  }
}


/* ------------------------------------------------------------
   SECTION 01 — CTA：851px以上は縦2段
   ------------------------------------------------------------ */

@media (min-width: 851px) {

  .bj-babymassage .bm-hero__bottom {
    padding-bottom: max(38px, env(safe-area-inset-bottom));
  }

  .bj-babymassage .bm-hero__actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;

    gap: 10px;
    flex: 0 0 auto;
  }

  .bj-babymassage .bm-hero__cta {
    width: 220px;
    min-width: 0;
    min-height: 54px;
  }
}


/* ------------------------------------------------------------
   SECTION 01 — CTA：850px以下は横並び
   ------------------------------------------------------------ */

@media (min-width: 480px) and (max-width: 850px) {

  .bj-babymassage .bm-hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .bj-babymassage .bm-hero__cta {
    width: auto;
  }
}


/* ------------------------------------------------------------
   SECTION 01 — 低画面高への対応
   ------------------------------------------------------------ */

@media (max-height: 610px) and (orientation: landscape) {

  .bj-babymassage .bm-hero {
    min-height: 610px;
  }

  .bj-babymassage .bm-hero__content {
    padding-block: 16px;
  }

  .bj-babymassage .bm-hero__title {
    margin-top: 17px;
  }

  .bj-babymassage .bm-hero__rule {
    margin: 12px 0;
  }
}

@media (max-height: 600px) and (orientation: portrait) {

  .bj-babymassage .bm-hero {
    min-height: 600px;
  }
}

@media (min-width: 851px) and (max-height: 680px) {

  .bj-babymassage .bm-hero__bottom {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}


/* ============================================================
   SECTION 01 — HERO END
   ============================================================ */


/* ============================================================
   SECTION 02 — WHY FAMILY BABY MASSAGE START

   PC：
   赤ちゃんの写真を左側に見せる
   コピーは右側の余白

   SP：
   赤ちゃんの写真を全面に表示
   コピーは左下の布の余白

   白ぼかし・背景帯なし
   ============================================================ */

.bj-babymassage .ow-panel,
.bj-babymassage .bm-hero,
.bj-babymassage .bm-section02,
.bj-babymassage .bm-section03 {
  min-height: calc(100svh - var(--bj-header-h));
  min-height: calc(100dvh - var(--bj-header-h));
  scroll-margin-top: var(--bj-header-h);
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   SECTION 02 — 基本レイアウト
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02 {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;

  overflow: hidden;

  background: #f7f3ee;
  color: #503c32;
}


/* ------------------------------------------------------------
   SECTION 02 — 背景画像
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02__picture {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
}

.bj-babymassage .bm-section02__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

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


/* ------------------------------------------------------------
   SECTION 02 — PC文字ブロック
   以前の良かった右側配置を復旧
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02__content {
  position: relative;
  z-index: 1;

  box-sizing: border-box;

  width: min(48vw, 720px);
  min-height: 100dvh;

  margin-left: auto;

  padding:
    clamp(62px, 10vh, 120px)
    clamp(30px, 5.4vw, 95px)
    90px
    0;

  background: transparent;
  text-shadow: none;
}


/* ------------------------------------------------------------
   SECTION 02 — 英語見出し
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02__eyebrow {
  margin: 0 0 8px;

  font: 600 clamp(12px, 1.1vw, 19px)/1.5 Georgia, serif;
  letter-spacing: .13em;
}


/* ------------------------------------------------------------
   SECTION 02 — 日本語見出し
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02__heading {
  margin: 0;

  font-size: clamp(18px, 1.65vw, 28px);
  font-weight: 600;

  line-height: 1.6;
  letter-spacing: .02em;

  text-wrap: balance;
}


/* ------------------------------------------------------------
   SECTION 02 — メインコピー
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02__message {
  margin: clamp(30px, 5vh, 55px) 0 0;

  font-size: clamp(28px, 2.55vw, 44px);
  font-weight: 400;

  line-height: 1.7;
  letter-spacing: .08em;
}


/* ------------------------------------------------------------
   SECTION 02 — 装飾ライン
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02__line {
  display: block;

  width: 40px;
  height: 2px;

  margin: clamp(18px, 3vh, 30px) 0;

  background: #dba291;
}


/* ------------------------------------------------------------
   SECTION 02 — 説明文
   ------------------------------------------------------------ */

.bj-babymassage .bm-section02__description {
  margin: 0;

  font-size: clamp(12px, 1vw, 17px);
  font-weight: 400;

  line-height: 2;
  letter-spacing: .04em;
}


/* ------------------------------------------------------------
   SECTION 02 — PC：1440px以上
   ------------------------------------------------------------ */

@media (min-width: 1440px) {

  .bj-babymassage .bm-section02__image {
    object-position: center;
  }

}


/* ------------------------------------------------------------
   SECTION 02 — PC：1200〜1439px
   ------------------------------------------------------------ */

@media (min-width: 1200px) and (max-width: 1439px) {

  .bj-babymassage .bm-section02__content {
    width: min(48vw, 720px);

    padding-right: clamp(36px, 4vw, 65px);
  }

  .bj-babymassage .bm-section02__message {
    font-size: clamp(30px, 2.7vw, 38px);
  }

}


/* ------------------------------------------------------------
   SECTION 02 — PC文字位置
   以前の調整値：右20px・下35px
   ------------------------------------------------------------ */

@media (min-width: 1101px) {

  .bj-babymassage .bm-section02__content {
    transform: translate(20px, 35px);
  }

}


/* ------------------------------------------------------------
   SECTION 02 — 中間PC・横向きTB
   768〜1199px
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {

  .bj-babymassage .bm-section02__image {
    object-position: 43% center;
  }

  .bj-babymassage .bm-section02__content {
    width: 48%;
    left: 108px; /* Section 02 only: shift copy farther right; photo unchanged */

    padding-top: clamp(35px, 7vh, 80px);
    padding-right: clamp(20px, 3vw, 45px);
  }

  .bj-babymassage .bm-section02__heading {
    font-size: clamp(17px, 2vw, 23px);
  }

  .bj-babymassage .bm-section02__message {
    font-size: clamp(25px, 3vw, 34px);
  }

  .bj-babymassage .bm-section02__description {
    font-size: clamp(11px, 1.2vw, 14px);
  }

}


/* ------------------------------------------------------------
   SECTION 02 — 縦向きTB・SP

   赤ちゃんの写真を全面に表示。
   文字は下側の余白へ直接配置する。
   背景帯・白ぼかしは使用しない。
   ------------------------------------------------------------ */

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

  .bj-babymassage .bm-section02 {
    display: flex;
    align-items: flex-end;

    min-height: 100svh;
    min-height: 100dvh;
  }

  .bj-babymassage .bm-section02__image {
    object-position: center top;
  }

  .bj-babymassage .bm-section02__content {
    width: 100%;
    min-height: 0;

    margin: 0;

    padding:
      24px
      clamp(25px, 5.4vw, 48px)
      max(30px, env(safe-area-inset-bottom));

    background: transparent;
    text-shadow: none;
    transform: none;
  }

  .bj-babymassage .bm-section02__eyebrow {
    font-size: clamp(12px, 2vw, 16px);
  }

  .bj-babymassage .bm-section02__heading {
    font-size: clamp(18px, 3vw, 25px);
  }

  .bj-babymassage .bm-section02__message {
    margin-top: clamp(22px, 3.5vh, 38px);

    font-size: clamp(25px, 4.5vw, 36px);

    line-height: 1.65;
    letter-spacing: .045em;
  }

  .bj-babymassage .bm-section02__line {
    margin: 18px 0;
  }

  .bj-babymassage .bm-section02__description {
    font-size: clamp(11px, 1.9vw, 15px);
    line-height: 1.95;
  }

}


/* ------------------------------------------------------------
   SECTION 02 — SP：479px以下
   ------------------------------------------------------------ */

@media (max-width: 479px) {

  .bj-babymassage .bm-section02__content {
    padding:
      20px
      clamp(20px, 5.5vw, 30px)
      max(22px, env(safe-area-inset-bottom));
  }

  .bj-babymassage .bm-section02__eyebrow {
    font-size: 11px;
  }

  .bj-babymassage .bm-section02__heading {
    font-size: clamp(17px, 4.2vw, 21px);
  }

  .bj-babymassage .bm-section02__message {
    margin-top: clamp(19px, 3vh, 30px);

    font-size: clamp(25px, 6.4vw, 32px);
    line-height: 1.6;
  }

  .bj-babymassage .bm-section02__description {
    font-size: clamp(11px, 2.8vw, 13px);
    line-height: 1.95;
  }

}


/* ------------------------------------------------------------
   SECTION 02 — 低画面高への対応
   ------------------------------------------------------------ */

@media (max-height: 680px) {

  .bj-babymassage .bm-section02 {
    min-height: 680px;
  }

}


/* ============================================================
   SECTION 02 — WHY FAMILY BABY MASSAGE END
   ============================================================ */



/* ============================================================
   SECTION 03 — TOUCH & VOICE START

   PC：左側コピー／右側に赤ちゃん
   SP：上側コピー／下側に赤ちゃん

   880〜1279px：過剰なトリミングを抑制
   白ぼかし・背景帯なし
   ============================================================ */

.bj-babymassage .ow-panel,
.bj-babymassage .bm-hero,
.bj-babymassage .bm-section02,
.bj-babymassage .bm-section03 {
  min-height: calc(100svh - var(--bj-header-h));
  min-height: calc(100dvh - var(--bj-header-h));
  scroll-margin-top: var(--bj-header-h);
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   SECTION 03 — 基本レイアウト
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03 {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;

  overflow: hidden;

  background: #f8f5f0;
  color: #503c32;
}


/* ------------------------------------------------------------
   SECTION 03 — 背景写真
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03__picture {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
}

.bj-babymassage .bm-section03__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

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


/* ------------------------------------------------------------
   SECTION 03 — コピー配置
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03__content {
  position: relative;
  z-index: 1;

  box-sizing: border-box;

  width: min(49%, 790px);
  min-height: 100dvh;

  padding:
    clamp(65px, 12vh, 120px)
    20px
    60px
    clamp(45px, 6.4vw, 112px);

  background: transparent;
}


/* ------------------------------------------------------------
   SECTION 03 — 英語見出し
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03__eyebrow {
  margin: 0 0 8px;

  font: 600 clamp(12px, 1.15vw, 19px)/1.5 Georgia, serif;

  letter-spacing: .13em;
}


/* ------------------------------------------------------------
   SECTION 03 — 日本語見出し
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03__heading {
  margin: 0;

  font-size: clamp(19px, 1.85vw, 32px);
  font-weight: 600;

  line-height: 1.6;
  letter-spacing: .06em;
}


/* ------------------------------------------------------------
   SECTION 03 — メインコピー
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03__message {
  margin: clamp(30px, 5vh, 55px) 0 0;

  font-size: clamp(29px, 2.55vw, 44px);
  font-weight: 400;

  line-height: 1.65;
  letter-spacing: .08em;
}


/* ------------------------------------------------------------
   SECTION 03 — 装飾ライン
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03__line {
  display: block;

  width: 40px;
  height: 2px;

  margin: clamp(22px, 3.5vh, 36px) 0;

  background: #dba291;
}


/* ------------------------------------------------------------
   SECTION 03 — 説明文
   ------------------------------------------------------------ */

.bj-babymassage .bm-section03__description {
  margin: 0;

  font-size: clamp(12px, 1.05vw, 17px);
  font-weight: 400;

  line-height: 2;
  letter-spacing: .04em;
}


/* ============================================================
   SECTION 03 — RESPONSIVE
   ============================================================ */


/* ------------------------------------------------------------
   SECTION 03 — 大型PC：1440px以上
   ------------------------------------------------------------ */

@media (min-width: 1440px) {

  .bj-babymassage .bm-section03__image {
    object-position: center;
  }

}


/* ------------------------------------------------------------
   SECTION 03 — ノートPC：1280〜1439px
   ------------------------------------------------------------ */

@media (min-width: 1280px) and (max-width: 1439px) {

  .bj-babymassage .bm-section03__content {
    width: 51%;

    padding-top: clamp(55px, 10vh, 100px);
    padding-left: clamp(45px, 5.5vw, 80px);
  }

  .bj-babymassage .bm-section03__message {
    font-size: clamp(30px, 2.75vw, 39px);
  }

}


/* ------------------------------------------------------------
   SECTION 03 — 中間幅：880〜1279px・横向き

   FigmaのPC写真比率に近づける。
   写真の高さを画面幅に合わせて抑え、
   後頭部だけのアップになる現象を防ぐ。

   写真の構図を優先するため、
   画面によっては1ビューより短くなる。
   ------------------------------------------------------------ */

@media (min-width: 880px) and (max-width: 1279px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section03 {
    min-height: 0;
    height: min(100dvh, 58.8vw);
  }

  .bj-babymassage .bm-section03__picture {
    width: 100%;
    height: 100%;
  }

  .bj-babymassage .bm-section03__image {
    width: 100%;
    height: 100%;

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

    transform: none;
  }

  .bj-babymassage .bm-section03__content {
    width: 51%;
    min-height: 0;
    height: 100%;

    padding-top: clamp(35px, 6vh, 75px);
    padding-left: clamp(38px, 5vw, 70px);
    padding-bottom: 20px;
  }

  .bj-babymassage .bm-section03__heading {
    font-size: clamp(18px, 2vw, 25px);
  }

  .bj-babymassage .bm-section03__message {
    margin-top: clamp(20px, 3vh, 35px);

    font-size: clamp(27px, 2.8vw, 36px);
    line-height: 1.6;
  }

  .bj-babymassage .bm-section03__line {
    margin: 18px 0;
  }

  .bj-babymassage .bm-section03__description {
    font-size: clamp(11px, 1.1vw, 14px);
    line-height: 1.9;
  }

}


/* ------------------------------------------------------------
   SECTION 03 — ノート〜TB移行帯：768〜879px
   横向きブラウザ
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 879px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section03__image {
    object-position: 58% center;
  }

  .bj-babymassage .bm-section03__content {
    width: 55%;

    padding-top: clamp(32px, 7vh, 58px);
    padding-left: clamp(28px, 4vw, 42px);
  }

  .bj-babymassage .bm-section03__eyebrow {
    font-size: 12px;
  }

  .bj-babymassage .bm-section03__heading {
    font-size: 18px;
  }

  .bj-babymassage .bm-section03__message {
    margin-top: 25px;

    font-size: clamp(25px, 3.5vw, 30px);
  }

  .bj-babymassage .bm-section03__description {
    font-size: 11px;
  }

}


/* ------------------------------------------------------------
   SECTION 03 — 縦向きTB・大きめSP

   赤ちゃんを下側に見せ、
   上側にコピーを配置。
   白ぼかし・背景帯なし。
   ------------------------------------------------------------ */

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1100px)
       and (orientation: portrait) {

  .bj-babymassage .bm-section03__image {
    object-position: center center;
  }

  .bj-babymassage .bm-section03__content {
    width: 100%;
    min-height: 0;

    padding:
      clamp(30px, 5vh, 55px)
      clamp(26px, 5.4vw, 48px)
      0;

    background: transparent;
  }

  .bj-babymassage .bm-section03__eyebrow {
    font-size: clamp(12px, 2vw, 16px);
  }

  .bj-babymassage .bm-section03__heading {
    font-size: clamp(19px, 3vw, 26px);
  }

  .bj-babymassage .bm-section03__message {
    margin-top: clamp(27px, 4vh, 46px);

    font-size: clamp(28px, 4.8vw, 38px);
    line-height: 1.65;
  }

  .bj-babymassage .bm-section03__line {
    margin: 22px 0;
  }

  .bj-babymassage .bm-section03__description {
    font-size: clamp(11px, 2vw, 15px);
    line-height: 1.95;
  }

}


/* ------------------------------------------------------------
   SECTION 03 — SP：479px以下
   Figmaの上部コピー・下部写真を維持
   ------------------------------------------------------------ */

@media (max-width: 479px) {

  .bj-babymassage .bm-section03__content {
    padding:
      clamp(28px, 4.5vh, 45px)
      clamp(19px, 5.4vw, 30px)
      0;
  }

  .bj-babymassage .bm-section03__eyebrow {
    font-size: 11px;
  }

  .bj-babymassage .bm-section03__heading {
    font-size: clamp(18px, 4.7vw, 23px);
  }

  .bj-babymassage .bm-section03__message {
    margin-top: clamp(23px, 3.5vh, 35px);

    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.55;
    letter-spacing: .045em;
  }

  .bj-babymassage .bm-section03__line {
    margin: 17px 0;
  }

  .bj-babymassage .bm-section03__description {
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1.9;
  }

}


/* ------------------------------------------------------------
   SECTION 03 — 低画面高への対応

   880〜1279pxの写真比率補正と競合させない。
   ------------------------------------------------------------ */

@media (max-height: 680px) {

  .bj-babymassage .bm-section03 {
    min-height: 680px;
  }

}

@media (min-width: 880px) and (max-width: 1279px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section03 {
    min-height: 0;
  }

}


/* ============================================================
   SECTION 03 — TOUCH & VOICE END
   ============================================================ */




/* ============================================================
   SECTION 04 — FEEL THE MOMENT START
   Baby-J Family Baby Massage

   5段階レスポンシブ
   01 Large PC
   02 Notebook PC
   03 Landscape Tablet
   04 Square / Portrait Tablet
   05 Smartphone

   HTML source切替と同期
   Sections 01–03 / JS v3 は変更しない
   ============================================================ */


/* ============================================================
   04-1. BASE
   ============================================================ */

.bj-babymassage .bm-section04 {
  position: relative;
  isolation: isolate;

  display: block;

  width: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;
  box-sizing: border-box;

  background: #f8f0e4;
  color: #4b352b;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif CJK JP",
    serif;
}


/* ============================================================
   04-2. VISUAL
   ============================================================ */

.bj-babymassage .bm-section04__visual,
.bj-babymassage .bm-section04__picture {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

.bj-babymassage .bm-section04__visual {
  z-index: 0;
  overflow: hidden;
}

.bj-babymassage .bm-section04__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

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


/* ============================================================
   04-3. COPY — BASE PC
   ============================================================ */

.bj-babymassage .bm-section04__content {
  position: absolute;
  z-index: 2;

  top: 27%;
  left: 64.8%;

  width: 32%;
  max-width: 560px;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

.bj-babymassage .bm-section04__heading {
  margin: 0;
  padding: 0;
}

.bj-babymassage .bm-section04__eyebrow {
  margin: 0 0 4px;

  font-size: clamp(12px, 1.14vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
}

.bj-babymassage .bm-section04__lead {
  margin: 0;

  font-size: clamp(19px, 1.72vw, 30px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .11em;
}

.bj-babymassage .bm-section04__title {
  margin: clamp(30px, 4.1vh, 48px) 0 0;
  padding: 0;

  font-size: clamp(26px, 2.18vw, 40px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .085em;
}

.bj-babymassage .bm-section04__rule {
  display: block;

  width: 40px;
  height: 2px;

  margin:
    clamp(22px, 3.7vh, 40px) 0
    clamp(26px, 4.4vh, 46px);

  background: #d99a8d;
}

.bj-babymassage .bm-section04__description {
  margin: 0;
  padding: 0;

  font-size: clamp(12px, 1.12vw, 17px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: .065em;
}


/* ============================================================
   04-4. CTA — BASE PC
   ============================================================ */

.bj-babymassage .bm-section04__bottom {
  position: absolute;
  z-index: 3;

  left: 64.8%;
  bottom: 11%;

  width: auto;
  max-width: 34%;
}

.bj-babymassage .bm-section04__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  min-height: 44px;
  gap: 12px;

  color: #4b352b;

  font-size: clamp(12px, 1.05vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .035em;

  text-decoration: none;

  transition:
    color .25s ease,
    opacity .25s ease;
}

.bj-babymassage .bm-section04__cta span {
  display: inline-block;

  font-family: sans-serif;
  font-weight: 400;

  transition: transform .25s ease;
}

@media (hover: hover) {

  .bj-babymassage .bm-section04__cta:hover {
    color: #bd796c;
  }

  .bj-babymassage .bm-section04__cta:hover span {
    transform: translateX(5px);
  }

}

.bj-babymassage .bm-section04__cta:focus-visible {
  outline: 2px solid #bd796c;
  outline-offset: 5px;
}


/* ============================================================
   04-5. LARGE PC
   1440px以上

   採用済みPC構図を維持
   ============================================================ */

@media (min-width: 1440px) {

  .bj-babymassage .bm-section04__image {
    object-position: center center;
  }

  .bj-babymassage .bm-section04__content {
    top: 27%;
    left: 64.8%;
    width: 32%;
  }

  .bj-babymassage .bm-section04__bottom {
    left: 64.8%;
    bottom: 11%;
  }

}


/* ============================================================
   04-6. NOTEBOOK PC
   1280px – 1439px

   PCの左右構図を維持
   ============================================================ */

@media (min-width: 1280px) and (max-width: 1439px) {

  .bj-babymassage .bm-section04__image {
    object-position: center center;
  }

  .bj-babymassage .bm-section04__content {
    top: 23%;
    left: 63%;
    width: 35%;
    max-width: none;
  }

  .bj-babymassage .bm-section04__eyebrow {
    font-size: clamp(12px, 1vw, 15px);
  }

  .bj-babymassage .bm-section04__lead {
    font-size: clamp(19px, 1.65vw, 24px);
  }

  .bj-babymassage .bm-section04__title {
    margin-top: clamp(22px, 3.5vh, 36px);
    font-size: clamp(27px, 2.15vw, 33px);
    line-height: 1.6;
  }

  .bj-babymassage .bm-section04__description {
    font-size: clamp(12px, 1vw, 15px);
  }

  .bj-babymassage .bm-section04__bottom {
    left: 63%;
    bottom: 9%;
    max-width: 36%;
  }

}


/* ============================================================
   04-7. LANDSCAPE TABLET
   768px – 1279px
   画面比率 4:3以上

   PC画像全面表示
   左の赤ちゃん＋右のコピー
   ============================================================ */

@media (min-width: 768px) and (max-width: 1279px)
       and (min-aspect-ratio: 4/3) {

  .bj-babymassage .bm-section04__image {
    width: 100%;
    height: 100%;

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

  .bj-babymassage .bm-section04__content {
    top: 19%;
    left: 63%;
    width: 35%;
    max-width: none;
  }

  .bj-babymassage .bm-section04__eyebrow {
    font-size: clamp(11px, 1.1vw, 14px);
  }

  .bj-babymassage .bm-section04__lead {
    font-size: clamp(16px, 1.8vw, 23px);
    letter-spacing: .07em;
  }

  .bj-babymassage .bm-section04__title {
    margin-top: clamp(16px, 3vh, 30px);

    font-size: clamp(21px, 2.35vw, 30px);
    line-height: 1.55;
    letter-spacing: .035em;
  }

  .bj-babymassage .bm-section04__rule {
    margin: clamp(15px, 3vh, 27px) 0;
  }

  .bj-babymassage .bm-section04__description {
    font-size: clamp(11px, 1.1vw, 14px);
    line-height: 1.9;
    letter-spacing: .025em;
  }

  .bj-babymassage .bm-section04__bottom {
    left: 63%;
    bottom: 7%;
    max-width: 36%;
  }

  .bj-babymassage .bm-section04__cta {
    font-size: clamp(11px, 1.2vw, 14px);
    white-space: nowrap;
  }

}


/* ============================================================
   04-8. SQUARE / PORTRAIT TABLET
   768px – 1100px
   画面比率 4:3以下

   SP画像へ切り替え
   コピー上／赤ちゃん下／CTA右下
   写真は全面表示
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px)
       and (max-aspect-ratio: 4/3) {

  .bj-babymassage .bm-section04__image {
    width: 100%;
    height: 100%;
    max-width: none;

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

  .bj-babymassage .bm-section04__content {
    top: clamp(30px, 4.5vh, 56px);
    left: 5.4%;

    width: 89%;
    max-width: none;
  }

  .bj-babymassage .bm-section04__eyebrow {
    margin-bottom: 5px;

    font-size: clamp(11px, 1.8vw, 15px);
    line-height: 1.45;
    letter-spacing: .11em;
  }

  .bj-babymassage .bm-section04__lead {
    font-size: clamp(17px, 2.7vw, 25px);
    line-height: 1.6;
    letter-spacing: .09em;
  }

  .bj-babymassage .bm-section04__title {
    margin-top: clamp(20px, 3vh, 36px);

    font-size: clamp(27px, 4.1vw, 39px);
    line-height: 1.48;
    letter-spacing: .065em;
  }

  .bj-babymassage .bm-section04__rule {
    width: 32px;
    height: 2px;

    margin: clamp(17px, 2.6vh, 29px) 0;
  }

  .bj-babymassage .bm-section04__description {
    font-size: clamp(11px, 1.6vw, 15px);
    line-height: 1.95;
    letter-spacing: .04em;
  }

  .bj-babymassage .bm-section04__bottom {
    left: auto;
    right: 5.4%;

    bottom: max(4.8%, env(safe-area-inset-bottom));

    width: auto;
    max-width: 90%;
  }

  .bj-babymassage .bm-section04__cta {
    min-height: 44px;
    gap: 8px;

    font-size: clamp(12px, 1.7vw, 15px);
    white-space: nowrap;
  }

}


/* ============================================================
   04-9. SMARTPHONE
   767px以下

   既存SP構図を維持
   ============================================================ */

@media (max-width: 767px) {

  .bj-babymassage .bm-section04__image {
    width: 100%;
    height: 100%;
    max-width: none;

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

  .bj-babymassage .bm-section04__content {
    top: clamp(34px, 5.1vh, 60px);
    left: 5.4%;

    width: 89%;
    max-width: none;
  }

  .bj-babymassage .bm-section04__eyebrow {
    margin-bottom: 5px;

    font-size: clamp(11px, 2.7vw, 15px);
    line-height: 1.45;
    letter-spacing: .11em;
  }

  .bj-babymassage .bm-section04__lead {
    font-size: clamp(17px, 4.2vw, 25px);
    line-height: 1.6;
    letter-spacing: .09em;
  }

  .bj-babymassage .bm-section04__title {
    margin-top: clamp(23px, 3.3vh, 40px);

    font-size: clamp(27px, 6.3vw, 39px);
    line-height: 1.48;
    letter-spacing: .075em;
  }

  .bj-babymassage .bm-section04__rule {
    width: 32px;
    height: 2px;

    margin:
      clamp(20px, 3vh, 32px) 0
      clamp(19px, 2.6vh, 30px);
  }

  .bj-babymassage .bm-section04__description {
    font-size: clamp(11px, 2.65vw, 15px);
    line-height: 2;
    letter-spacing: .055em;
  }

  .bj-babymassage .bm-section04__bottom {
    left: auto;
    right: 5.4%;

    bottom: max(4.8%, env(safe-area-inset-bottom));

    width: auto;
    max-width: 90%;
  }

  .bj-babymassage .bm-section04__cta {
    min-height: 44px;
    gap: 8px;

    font-size: clamp(12px, 3.15vw, 15px);
    white-space: nowrap;
  }

}


/* ============================================================
   04-10. SMALL SMARTPHONE
   390px以下
   ============================================================ */

@media (max-width: 390px) {

  .bj-babymassage .bm-section04__content {
    top: clamp(28px, 4.5vh, 42px);
    left: 5.4%;
    width: 90%;
  }

  .bj-babymassage .bm-section04__eyebrow {
    font-size: 10px;
  }

  .bj-babymassage .bm-section04__lead {
    font-size: clamp(16px, 4.3vw, 19px);
  }

  .bj-babymassage .bm-section04__title {
    margin-top: 20px;

    font-size: clamp(24px, 6.45vw, 28px);
    line-height: 1.5;
  }

  .bj-babymassage .bm-section04__rule {
    margin: 16px 0 18px;
  }

  .bj-babymassage .bm-section04__description {
    font-size: clamp(10px, 2.7vw, 12px);
  }

  .bj-babymassage .bm-section04__cta {
    font-size: clamp(11px, 3vw, 13px);
  }

}


/* ============================================================
   04-11. SHORT LANDSCAPE SCREEN
   ============================================================ */

@media (min-width: 768px) and (max-height: 650px)
       and (min-aspect-ratio: 4/3) {

  .bj-babymassage .bm-section04__content {
    top: 10%;
  }

  .bj-babymassage .bm-section04__title {
    margin-top: 12px;
    line-height: 1.45;
  }

  .bj-babymassage .bm-section04__rule {
    margin: 13px 0;
  }

  .bj-babymassage .bm-section04__description {
    line-height: 1.75;
  }

  .bj-babymassage .bm-section04__bottom {
    bottom: 4%;
  }

}


/* ============================================================
   04-12. ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .bj-babymassage .bm-section04__cta,
  .bj-babymassage .bm-section04__cta span {
    transition: none;
  }

}



/* ------------------------------------------------------------
   04-13 | 文字のみの最小調整（写真・写真レイヤーは触らない）
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1100px) and (max-aspect-ratio: 4/3) {
  .bj-babymassage .bm-section04__content {
    top: 4.5%; left: 5.4%; width: 46%; max-width: 410px;
  }
  .bj-babymassage .bm-section04__eyebrow { font-size: 12px; margin-bottom: 3px; }
  .bj-babymassage .bm-section04__lead { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.45; }
  .bj-babymassage .bm-section04__title {
    margin-top: clamp(12px, 1.8vh, 20px);
    font-size: clamp(23px, 2.9vw, 29px); line-height: 1.4;
  }
  .bj-babymassage .bm-section04__rule { margin: clamp(10px, 1.5vh, 16px) 0; }
  .bj-babymassage .bm-section04__description { font-size: clamp(11px, 1.35vw, 13px); line-height: 1.72; }
  .bj-babymassage .bm-section04__bottom {
    position: absolute; top: auto; bottom: 11%; left: 5.4%; right: auto;
    width: auto; max-width: 46%; margin: 0;
  }
  .bj-babymassage .bm-section04__cta { font-size: 12px; white-space: normal; }
}
@media (max-width: 767px) {
  .bj-babymassage .bm-section04__content { top: clamp(27px, 4vh, 43px); width: 69%; }
  .bj-babymassage .bm-section04__title { font-size: clamp(23px, 5.65vw, 30px); margin-top: 15px; line-height: 1.4; }
  .bj-babymassage .bm-section04__lead { font-size: clamp(16px, 3.75vw, 20px); }
  .bj-babymassage .bm-section04__rule { margin: 12px 0; }
  .bj-babymassage .bm-section04__description { font-size: clamp(10px, 2.55vw, 13px); line-height: 1.65; }
}

/* ============================================================
   SECTION 04 — FEEL THE MOMENT END
   ============================================================ */


/* ============================================================
   SECTION 05 — GROWING TOGETHER START
   Baby-J Family Baby Massage

   PC / NOTEBOOK / TB LANDSCAPE / TB PORTRAIT / SP
   Section 05 Only
   ============================================================ */


/* ============================================================
   05-1. BASE
   ============================================================ */

.bj-babymassage .bm-section05 {
  position: relative;
  isolation: isolate;

  display: block;
  width: 100%;

  height: 100svh;
  height: 100dvh;
  min-height: 0;

  margin: 0;
  padding: 0;
  overflow: hidden;

  box-sizing: border-box;

  background: #f8f0e4;
  color: #4b352b;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif CJK JP",
    serif;
}


/* ============================================================
   05-2. VISUAL — FULL BLEED
   ============================================================ */

.bj-babymassage .bm-section05__visual,
.bj-babymassage .bm-section05__picture {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

.bj-babymassage .bm-section05__visual {
  z-index: 0;
  overflow: hidden;
}

.bj-babymassage .bm-section05__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

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


/* ============================================================
   05-3. COPY — PC BASE
   ============================================================ */

.bj-babymassage .bm-section05__content {
  position: absolute;
  z-index: 2;

  top: 16%;
  left: 9.8%;

  width: 48%;
  max-width: 760px;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

.bj-babymassage .bm-section05__eyebrow {
  margin: 0 0 clamp(27px, 4.5vh, 50px);

  font-family: Georgia, serif;
  font-size: clamp(12px, 1.2vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .15em;
}

.bj-babymassage .bm-section05__title {
  margin: 0;

  font-size: clamp(30px, 2.8vw, 48px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .07em;
}

.bj-babymassage .bm-section05__lead {
  margin: clamp(28px, 4.2vh, 50px) 0 0;

  color: #d79a8b;

  font-size: clamp(20px, 1.9vw, 32px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .08em;
}

.bj-babymassage .bm-section05__rule {
  display: block;

  width: 40px;
  height: 2px;

  margin:
    clamp(22px, 3.3vh, 36px) 0
    clamp(22px, 3.6vh, 38px);

  background: #d99a8d;
}

.bj-babymassage .bm-section05__description {
  margin: 0;

  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: .055em;
}


/* ============================================================
   05-4. LARGE PC
   1440px+
   ============================================================ */

@media (min-width: 1440px) {

  .bj-babymassage .bm-section05__image {
    object-position: center center;
  }

  .bj-babymassage .bm-section05__content {
    top: 16%;
    left: 9.8%;
    width: 48%;
  }

}


/* ============================================================
   05-5. NOTEBOOK PC
   1280–1439px
   ============================================================ */

@media (min-width: 1280px) and (max-width: 1439px) {

  .bj-babymassage .bm-section05__image {
    object-position: 53% center;
  }

  .bj-babymassage .bm-section05__content {
    top: 14%;
    left: 8%;
    width: 49%;
  }

  .bj-babymassage .bm-section05__eyebrow {
    margin-bottom: clamp(22px, 3.5vh, 38px);
  }

  .bj-babymassage .bm-section05__title {
    font-size: clamp(30px, 2.8vw, 39px);
  }

  .bj-babymassage .bm-section05__lead {
    font-size: clamp(20px, 1.95vw, 27px);
  }

  .bj-babymassage .bm-section05__description {
    font-size: clamp(12px, 1.1vw, 15px);
  }

}


/* ============================================================
   05-6. TABLET LANDSCAPE
   768–1279px / 4:3以上

   PC画像・左コピー・右赤ちゃん
   ============================================================ */

@media (min-width: 768px) and (max-width: 1279px)
       and (min-aspect-ratio: 4/3) {

  .bj-babymassage .bm-section05__image {
    object-fit: cover;
    object-position: 53% center;
  }

  .bj-babymassage .bm-section05__content {
    top: 12%;
    left: 5.5%;
    width: 52%;
    max-width: none;
  }

  .bj-babymassage .bm-section05__eyebrow {
    margin-bottom: clamp(16px, 3vh, 27px);
    font-size: clamp(11px, 1.3vw, 15px);
  }

  .bj-babymassage .bm-section05__title {
    font-size: clamp(25px, 3.05vw, 37px);
    line-height: 1.5;
    letter-spacing: .035em;
  }

  .bj-babymassage .bm-section05__lead {
    margin-top: clamp(17px, 3vh, 29px);

    font-size: clamp(17px, 2.25vw, 27px);
    letter-spacing: .035em;
  }

  .bj-babymassage .bm-section05__rule {
    margin: clamp(12px, 2.5vh, 24px) 0;
  }

  .bj-babymassage .bm-section05__description {
    font-size: clamp(11px, 1.28vw, 15px);
    line-height: 1.85;
    letter-spacing: .02em;
  }

}


/* ============================================================
   05-7. SQUARE / PORTRAIT TABLET
   768–1100px / 4:3以下

   SP画像
   上部コピー・下部赤ちゃん
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px)
       and (max-aspect-ratio: 4/3) {

  .bj-babymassage .bm-section05__image {
    width: 100%;
    height: 100%;

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

  .bj-babymassage .bm-section05__content {
    top: clamp(26px, 4vh, 48px);
    left: 5.4%;

    width: 89%;
    max-width: none;
  }

  .bj-babymassage .bm-section05__eyebrow {
    margin-bottom: clamp(15px, 2.5vh, 28px);
    font-size: clamp(12px, 1.65vw, 16px);
  }

  .bj-babymassage .bm-section05__title {
    font-size: clamp(28px, 3.6vw, 39px);
    line-height: 1.5;
    letter-spacing: .055em;
  }

  .bj-babymassage .bm-section05__lead {
    margin-top: clamp(18px, 3vh, 30px);

    font-size: clamp(19px, 2.5vw, 27px);
    line-height: 1.6;
  }

  .bj-babymassage .bm-section05__rule {
    margin: clamp(15px, 2.5vh, 26px) 0;
  }

  .bj-babymassage .bm-section05__description {
    font-size: clamp(12px, 1.55vw, 16px);
    line-height: 1.9;
  }

}


/* ============================================================
   05-8. SMARTPHONE
   767px以下

   SP画像全面・コピー上側
   ============================================================ */

@media (max-width: 767px) {

  .bj-babymassage .bm-section05__image {
    width: 100%;
    height: 100%;

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

  .bj-babymassage .bm-section05__content {
    top: clamp(29px, 4.6vh, 52px);
    left: 5.4%;

    width: 89%;
    max-width: none;
  }

  .bj-babymassage .bm-section05__eyebrow {
    margin-bottom: clamp(19px, 3.2vh, 35px);

    font-size: clamp(11px, 2.8vw, 14px);
    line-height: 1.45;
  }

  .bj-babymassage .bm-section05__title {
    font-size: clamp(27px, 6.5vw, 37px);
    line-height: 1.48;
    letter-spacing: .055em;
  }

  .bj-babymassage .bm-section05__lead {
    margin-top: clamp(24px, 3.5vh, 39px);

    font-size: clamp(17px, 4.2vw, 24px);
    line-height: 1.6;
    letter-spacing: .045em;
  }

  .bj-babymassage .bm-section05__rule {
    width: 32px;

    margin:
      clamp(18px, 2.6vh, 29px) 0
      clamp(18px, 2.8vh, 31px);
  }

  .bj-babymassage .bm-section05__description {
    font-size: clamp(11px, 2.8vw, 14px);
    line-height: 1.9;
    letter-spacing: .035em;
  }

}


/* ============================================================
   05-9. SMALL SP
   390px以下
   ============================================================ */

@media (max-width: 390px) {

  .bj-babymassage .bm-section05__content {
    top: clamp(23px, 3.8vh, 39px);
    left: 5.2%;
    width: 90%;
  }

  .bj-babymassage .bm-section05__eyebrow {
    margin-bottom: 17px;
    font-size: 10px;
  }

  .bj-babymassage .bm-section05__title {
    font-size: clamp(24px, 6.6vw, 28px);
    line-height: 1.5;
  }

  .bj-babymassage .bm-section05__lead {
    margin-top: 19px;
    font-size: clamp(16px, 4.2vw, 19px);
  }

  .bj-babymassage .bm-section05__rule {
    margin: 15px 0 17px;
  }

  .bj-babymassage .bm-section05__description {
    font-size: clamp(10px, 2.7vw, 12px);
  }

}


/* ============================================================
   05-10. SHORT LANDSCAPE SCREEN
   ============================================================ */

@media (min-width: 768px) and (max-height: 650px)
       and (min-aspect-ratio: 4/3) {

  .bj-babymassage .bm-section05__content {
    top: 6%;
  }

  .bj-babymassage .bm-section05__eyebrow {
    margin-bottom: 12px;
  }

  .bj-babymassage .bm-section05__lead {
    margin-top: 13px;
  }

  .bj-babymassage .bm-section05__rule {
    margin: 11px 0;
  }

  .bj-babymassage .bm-section05__description {
    line-height: 1.7;
  }

}



/* ------------------------------------------------------------
   05-11 | 文字のみの最小調整（写真・写真レイヤーは触らない）
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1100px) and (max-aspect-ratio: 4/3) {
  .bj-babymassage .bm-section05__content { top: 5.2%; left: auto; right: 2.0%; width: 34%; max-width: 320px; }
  .bj-babymassage .bm-section05__eyebrow { margin-bottom: 13px; font-size: 12px; }
  .bj-babymassage .bm-section05__title { font-size: clamp(21px, 2.65vw, 27px); line-height: 1.42; }
  .bj-babymassage .bm-section05__lead { margin-top: 15px; font-size: clamp(15px, 1.95vw, 19px); line-height: 1.5; }
  .bj-babymassage .bm-section05__rule { margin: 13px 0; }
  .bj-babymassage .bm-section05__description { font-size: clamp(11px, 1.3vw, 13px); line-height: 1.7; }
}
@media (max-width: 767px) {
  .bj-babymassage .bm-section05__content { top: clamp(25px, 4vh, 43px); width: 69%; }
  .bj-babymassage .bm-section05__eyebrow { margin-bottom: 13px; }
  .bj-babymassage .bm-section05__title { font-size: clamp(22px, 5.5vw, 30px); line-height: 1.4; }
  .bj-babymassage .bm-section05__lead { margin-top: 14px; font-size: clamp(15px, 3.8vw, 20px); }
  .bj-babymassage .bm-section05__rule { margin: 12px 0; }
  .bj-babymassage .bm-section05__description { font-size: clamp(10px, 2.55vw, 13px); line-height: 1.7; }
}

/* ============================================================
   SECTION 05 — GROWING TOGETHER END
   ============================================================ */


/* ============================================================
   SECTION 06 — FAMILY BABY MASSAGE
   TOUCH / OBSERVE / TALK

   PC / NOTEBOOK / TB / SP
   HTML・JS変更なし
   ============================================================ */


/* ============================================================
   06-01 BASE
   ============================================================ */

.bj-babymassage .bm-section06 {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-rows:
    minmax(0, 26fr)
    minmax(0, 62fr)
    minmax(0, 12fr);

  width: 100%;
  height: calc(100svh - var(--bj-header-h, 64px));
  height: calc(100dvh - var(--bj-header-h, 64px));
  min-height: 0;

  margin: 0;
  padding: 0;
  overflow: hidden;

  box-sizing: border-box;

  background: #f5f1ec;
  color: #503d33;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif CJK JP",
    serif;
}


/* ============================================================
   06-02 HEADER
   ============================================================ */

.bj-babymassage .bm-section06__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 12px 18px;

  text-align: center;
}

.bj-babymassage .bm-section06__eyebrow {
  margin: 0 0 clamp(12px, 1.8vh, 24px);

  color: #c9796b;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(14px, 1.65vw, 29px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .12em;
}

.bj-babymassage .bm-section06__title {
  margin: 0;

  color: #49342a;

  font-size: clamp(28px, 3.15vw, 52px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .10em;

  white-space: nowrap;
}

.bj-babymassage .bm-section06__subtitle {
  margin: clamp(13px, 2.2vh, 29px) 0 0;

  color: #594438;

  font-size: clamp(16px, 1.7vw, 27px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .075em;

  white-space: nowrap;
}


/* ============================================================
   06-03 PHOTO GALLERY
   THREE COLUMNS — ALL DEVICES
   ============================================================ */

.bj-babymassage .bm-section06__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

.bj-babymassage .bm-section06__item {
  position: relative;
  isolation: isolate;

  display: block;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;
  background: #e9dfd3;
}

.bj-babymassage .bm-section06__picture {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

.bj-babymassage .bm-section06__image {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;
  min-width: 0;

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

/* Individual photo composition */

.bj-babymassage
.bm-section06__item--touch
.bm-section06__image {
  object-position: center 45%;
}

.bj-babymassage
.bm-section06__item--observe
.bm-section06__image {
  object-position: center 47%;
}

.bj-babymassage
.bm-section06__item--talk
.bm-section06__image {
  object-position: center 48%;
}


/* ============================================================
   06-04 TEXT ON PHOTOS
   ============================================================ */

.bj-babymassage .bm-section06__label {
  position: absolute;
  z-index: 2;

  right: 0;
  bottom: clamp(20px, 4vh, 45px);
  left: 0;

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

  gap: clamp(5px, .9vh, 12px);

  margin: 0;
  padding: 0 6px;

  color: #ffffff;
  text-align: center;

  pointer-events: none;
}

.bj-babymassage .bm-section06__label-en {
  display: block;

  font-family:
    "Snell Roundhand",
    "Brush Script MT",
    "Segoe Script",
    cursive;

  font-size: clamp(26px, 3.25vw, 50px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: .09em;

  white-space: nowrap;

  text-shadow:
    0 1px 4px rgba(75, 46, 32, .18);
}

.bj-babymassage .bm-section06__label-ja {
  display: block;

  font-size: clamp(18px, 1.95vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .085em;

  white-space: nowrap;

  text-shadow:
    0 1px 4px rgba(75, 46, 32, .18);
}


/* ============================================================
   06-05 FOOTER
   ============================================================ */

.bj-babymassage .bm-section06__footer {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 6px 18px;

  text-align: center;
}

.bj-babymassage .bm-section06__description {
  margin: 0;

  color: #594438;

  font-size: clamp(14px, 1.45vw, 25px);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .075em;
}


/* ============================================================
   06-06 NOTEBOOK PC
   1101–1439px
   ============================================================ */

@media (min-width: 1101px) and (max-width: 1439px) {

  .bj-babymassage .bm-section06 {
    grid-template-rows:
      minmax(0, 27fr)
      minmax(0, 60fr)
      minmax(0, 13fr);
  }

  .bj-babymassage .bm-section06__title {
    font-size: clamp(30px, 3.1vw, 43px);
  }

  .bj-babymassage .bm-section06__subtitle {
    font-size: clamp(17px, 1.7vw, 23px);
  }

  .bj-babymassage .bm-section06__description {
    font-size: clamp(14px, 1.45vw, 20px);
  }
}


/* ============================================================
   06-07 TABLET LANDSCAPE
   768–1100px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section06 {
    grid-template-rows:
      minmax(0, 27fr)
      minmax(0, 59fr)
      minmax(0, 14fr);
  }

  .bj-babymassage .bm-section06__eyebrow {
    margin-bottom: 10px;
    font-size: clamp(13px, 1.6vw, 17px);
  }

  .bj-babymassage .bm-section06__title {
    font-size: clamp(25px, 3.15vw, 35px);
  }

  .bj-babymassage .bm-section06__subtitle {
    margin-top: 12px;
    font-size: clamp(15px, 1.9vw, 20px);
  }

  .bj-babymassage .bm-section06__label {
    bottom: 18px;
  }

  .bj-babymassage .bm-section06__label-en {
    font-size: clamp(26px, 3.4vw, 36px);
  }

  .bj-babymassage .bm-section06__label-ja {
    font-size: clamp(17px, 2vw, 23px);
  }

  .bj-babymassage .bm-section06__description {
    font-size: clamp(13px, 1.45vw, 17px);
  }
}


/* ============================================================
   06-08 TABLET PORTRAIT
   768–1100px
   ============================================================ */

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

  .bj-babymassage .bm-section06 {
    grid-template-rows:
      minmax(0, 31fr)
      minmax(0, 46fr)
      minmax(0, 23fr);
  }

  .bj-babymassage .bm-section06__eyebrow {
    margin-bottom: clamp(13px, 2vh, 22px);
    font-size: clamp(15px, 2vw, 21px);
  }

  .bj-babymassage .bm-section06__title {
    font-size: clamp(30px, 3.7vw, 40px);
    letter-spacing: .07em;
  }

  .bj-babymassage .bm-section06__subtitle {
    margin-top: clamp(16px, 2.5vh, 25px);
    font-size: clamp(17px, 2.2vw, 23px);
  }

  .bj-babymassage .bm-section06__gallery {
    gap: 4px;
  }

  .bj-babymassage .bm-section06__label {
    bottom: clamp(18px, 3vh, 31px);
  }

  .bj-babymassage .bm-section06__label-en {
    font-size: clamp(25px, 3.5vw, 38px);
  }

  .bj-babymassage .bm-section06__label-ja {
    font-size: clamp(18px, 2.5vw, 25px);
  }

  .bj-babymassage .bm-section06__description {
    font-size: clamp(15px, 1.9vw, 20px);
    line-height: 2;
  }
}


/* ============================================================
   06-09 SMARTPHONE
   0–767px

   3枚横並び固定
   完成画像の縦構成に合わせる
   ============================================================ */

@media (max-width: 767px) {

  .bj-babymassage .bm-section06 {
    grid-template-rows:
      minmax(0, 33.5fr)
      minmax(0, 40fr)
      minmax(0, 26.5fr);
  }

  /* Header */

  .bj-babymassage .bm-section06__header {
    padding: 12px 4px 8px;
  }

  .bj-babymassage .bm-section06__eyebrow {
    margin-bottom: clamp(12px, 2vh, 20px);

    font-size: clamp(12px, 3.35vw, 20px);
    letter-spacing: .095em;
  }

  .bj-babymassage .bm-section06__title {
    font-size: clamp(19px, 5.25vw, 34px);
    line-height: 1.45;
    letter-spacing: .035em;

    white-space: nowrap;
  }

  .bj-babymassage .bm-section06__subtitle {
    margin-top: clamp(14px, 2.5vh, 24px);

    font-size: clamp(11px, 2.7vw, 18px);
    line-height: 1.6;
    letter-spacing: .015em;

    white-space: nowrap;
  }

  /* Photos */

  .bj-babymassage .bm-section06__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }

  .bj-babymassage .bm-section06__item {
    min-width: 0;
  }

  .bj-babymassage .bm-section06__image {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  .bj-babymassage
  .bm-section06__item--touch
  .bm-section06__image {
    object-position: center 45%;
  }

  .bj-babymassage
  .bm-section06__item--observe
  .bm-section06__image {
    object-position: center 48%;
  }

  .bj-babymassage
  .bm-section06__item--talk
  .bm-section06__image {
    object-position: center 48%;
  }

  /* Photo labels */

  .bj-babymassage .bm-section06__label {
    bottom: clamp(12px, 2vh, 22px);
    gap: 5px;
    padding: 0 2px;
  }

  .bj-babymassage .bm-section06__label-en {
    font-size: clamp(15px, 4.1vw, 25px);
    line-height: 1.15;
    letter-spacing: .025em;
  }

  .bj-babymassage .bm-section06__label-ja {
    font-size: clamp(10px, 2.75vw, 17px);
    line-height: 1.35;
    letter-spacing: 0;
  }

  /* Footer */

  .bj-babymassage .bm-section06__footer {
    padding: 12px 6px;
  }

  .bj-babymassage .bm-section06__description {
    font-size: clamp(10px, 2.65vw, 16px);
    line-height: 2;
    letter-spacing: .025em;
  }
}


/* ============================================================
   06-10 SMALL SP
   390px以下
   ============================================================ */

@media (max-width: 390px) {

  .bj-babymassage .bm-section06__eyebrow {
    font-size: 3.3vw;
    margin-bottom: 11px;
  }

  .bj-babymassage .bm-section06__title {
    font-size: 5.1vw;
    letter-spacing: .025em;
  }

  .bj-babymassage .bm-section06__subtitle {
    margin-top: 13px;
    font-size: 2.65vw;
  }

  .bj-babymassage .bm-section06__label-en {
    font-size: 4vw;
  }

  .bj-babymassage .bm-section06__label-ja {
    font-size: 2.7vw;
  }

  .bj-babymassage .bm-section06__description {
    font-size: 2.6vw;
  }
}


/* ============================================================
   06-11 SHORT LANDSCAPE
   ============================================================ */

@media (min-width: 768px) and (max-height: 650px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section06 {
    grid-template-rows:
      minmax(0, 27fr)
      minmax(0, 59fr)
      minmax(0, 14fr);
  }

  .bj-babymassage .bm-section06__header {
    padding: 5px 12px;
  }

  .bj-babymassage .bm-section06__eyebrow {
    margin-bottom: 6px;
  }

  .bj-babymassage .bm-section06__subtitle {
    margin-top: 7px;
  }

  .bj-babymassage .bm-section06__footer {
    padding: 3px 12px;
  }

  .bj-babymassage .bm-section06__description {
    line-height: 1.65;
  }
}


/* ============================================================
   SECTION 06 — END
   ============================================================ */


/* ============================================================
   SECTION 07 — FAQ
   Baby-J Family Baby Massage

   PC / NOTEBOOK / TB / SP
   CSS ONLY
   ============================================================ */


/* ============================================================
   07-01 BASE
   ============================================================ */

.bj-babymassage .bm-section07 {
  position: relative;
  isolation: isolate;

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

  width: 100%;
  height: 100%;
  min-height: 0;

  margin: 0;
  padding: clamp(28px, 5vh, 64px)
           clamp(20px, 5.5vw, 100px);

  overflow: hidden;
  box-sizing: border-box;

  background: #ffffff;
  color: #102f59;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;
}


/* ============================================================
   07-02 HEADER
   ============================================================ */

.bj-babymassage .bm-section07__header {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 0 clamp(23px, 4vh, 48px);
  text-align: center;
}

.bj-babymassage .bm-section07__eyebrow {
  display: inline-block;
  position: relative;

  margin: 0 0 clamp(16px, 2.5vh, 27px);
  padding-bottom: 12px;

  color: #bd9567;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .32em;
}

.bj-babymassage .bm-section07__eyebrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 34px;
  height: 1px;
  background: #c6a478;
  transform: translateX(-50%);
}

.bj-babymassage .bm-section07__title {
  margin: 0;

  color: #102f59;

  font-size: clamp(25px, 2.5vw, 42px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
}

.bj-babymassage .bm-section07__intro {
  margin: clamp(9px, 1.8vh, 19px) 0 0;

  color: #605f60;

  font-size: clamp(11px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .04em;
}


/* ============================================================
   07-03 FAQ GRID
   ============================================================ */

.bj-babymassage .bm-section07__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 55px);
  row-gap: 0;
  align-content: start;

  width: 100%;
  max-width: 1380px;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;
}


/* ============================================================
   07-04 FAQ ITEM
   ============================================================ */

.bj-babymassage .bm-section07__item {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;

  border: 0;
  border-bottom: 1px solid #e9e7e4;
  background: #ffffff;
}

.bj-babymassage .bm-section07__item[open] {
  border-bottom-color: transparent;
  background: #f5f3ef;
}


/* ============================================================
   07-05 QUESTION
   ============================================================ */

.bj-babymassage .bm-section07__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: 100%;
  min-height: clamp(54px, 6.5vh, 74px);

  margin: 0;
  padding: 14px clamp(13px, 1.4vw, 24px);

  box-sizing: border-box;

  color: #102f59;
  background: transparent;

  cursor: pointer;
  list-style: none;
}

.bj-babymassage .bm-section07__question::-webkit-details-marker {
  display: none;
}

.bj-babymassage .bm-section07__question::marker {
  content: "";
}

.bj-babymassage .bm-section07__question-text {
  min-width: 0;

  font-size: clamp(13px, 1.15vw, 18px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .025em;
}

.bj-babymassage .bm-section07__question:focus-visible {
  outline: 2px solid #b88a56;
  outline-offset: -2px;
}


/* ============================================================
   07-06 PLUS / CLOSE
   ============================================================ */

.bj-babymassage .bm-section07__toggle {
  position: relative;
  display: block;
  flex: 0 0 14px;

  width: 14px;
  height: 14px;
}

.bj-babymassage .bm-section07__toggle::before,
.bj-babymassage .bm-section07__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  background: #102f59;

  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}

.bj-babymassage .bm-section07__toggle::before {
  width: 12px;
  height: 1px;
}

.bj-babymassage .bm-section07__toggle::after {
  width: 1px;
  height: 12px;
}

.bj-babymassage
.bm-section07__item[open]
.bm-section07__toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bj-babymassage
.bm-section07__item[open]
.bm-section07__toggle::after {
  transform: translate(-50%, -50%) rotate(45deg);
}


/* ============================================================
   07-07 ANSWER
   ============================================================ */

.bj-babymassage .bm-section07__answer {
  padding:
    0 clamp(13px, 1.4vw, 24px)
    clamp(20px, 3vh, 32px);
}

.bj-babymassage .bm-section07__answer p {
  margin: 0;

  color: #484340;

  font-size: clamp(12px, .95vw, 15px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}


/* ============================================================
   07-08 NOTEBOOK PC
   1101–1439px
   ============================================================ */

@media (min-width: 1101px) and (max-width: 1439px) {

  .bj-babymassage .bm-section07 {
    padding:
      clamp(24px, 4vh, 46px)
      clamp(30px, 5vw, 70px);
  }

  .bj-babymassage .bm-section07__header {
    margin-bottom: clamp(18px, 3vh, 33px);
  }

  .bj-babymassage .bm-section07__grid {
    column-gap: 24px;
  }

  .bj-babymassage .bm-section07__question {
    min-height: 57px;
  }
}


/* ============================================================
   07-09 TABLET LANDSCAPE
   768–1100px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section07 {
    padding: 23px 32px;
  }

  .bj-babymassage .bm-section07__header {
    margin-bottom: 17px;
  }

  .bj-babymassage .bm-section07__eyebrow {
    margin-bottom: 9px;
    padding-bottom: 9px;
  }

  .bj-babymassage .bm-section07__title {
    font-size: 28px;
  }

  .bj-babymassage .bm-section07__intro {
    margin-top: 6px;
    font-size: 11px;
  }

  .bj-babymassage .bm-section07__grid {
    column-gap: 18px;
  }

  .bj-babymassage .bm-section07__question {
    min-height: 51px;
    padding: 10px 12px;
  }

  .bj-babymassage .bm-section07__question-text {
    font-size: 12px;
  }

  .bj-babymassage .bm-section07__answer {
    padding: 0 12px 18px;
  }

  .bj-babymassage .bm-section07__answer p {
    font-size: 11px;
    line-height: 1.8;
  }
}


/* ============================================================
   07-10 TABLET PORTRAIT
   ============================================================ */

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

  .bj-babymassage .bm-section07 {
    padding: 35px 32px;
  }

  .bj-babymassage .bm-section07__header {
    margin-bottom: 28px;
  }

  .bj-babymassage .bm-section07__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  .bj-babymassage .bm-section07__question {
    min-height: 61px;
    padding: 13px 12px;
  }

  .bj-babymassage .bm-section07__question-text {
    font-size: 12px;
  }

  .bj-babymassage .bm-section07__answer {
    padding: 0 12px 20px;
  }

  .bj-babymassage .bm-section07__answer p {
    font-size: 11px;
    line-height: 1.85;
  }
}


/* ============================================================
   07-11 SMARTPHONE
   ============================================================ */

@media (max-width: 767px) {

  .bj-babymassage .bm-section07 {
    padding:
      clamp(28px, 5vh, 50px)
      20px;

    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .bj-babymassage .bm-section07::-webkit-scrollbar {
    display: none;
  }

  .bj-babymassage .bm-section07__header {
    margin-bottom: 24px;
  }

  .bj-babymassage .bm-section07__eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
  }

  .bj-babymassage .bm-section07__title {
    font-size: clamp(26px, 6.5vw, 34px);
  }

  .bj-babymassage .bm-section07__intro {
    max-width: 330px;
    margin: 12px auto 0;
    font-size: 11px;
    line-height: 1.8;
  }

  .bj-babymassage .bm-section07__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .bj-babymassage .bm-section07__question {
    min-height: 57px;
    padding: 15px 12px;
  }

  .bj-babymassage .bm-section07__question-text {
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .bj-babymassage .bm-section07__answer {
    padding: 0 12px 22px;
  }

  .bj-babymassage .bm-section07__answer p {
    font-size: clamp(11px, 2.9vw, 13px);
    line-height: 1.95;
  }
}


/* ============================================================
   07-12 REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .bj-babymassage .bm-section07__toggle::before,
  .bj-babymassage .bm-section07__toggle::after {
    transition: none;
  }

}



/* ------------------------------------------------------------
   07-13 | 中間幅：二列のFAQを画面中央にバランスよく展開
   ------------------------------------------------------------ */
@media (min-width: 801px) and (max-width: 1100px) {
  .bj-babymassage .bm-section07 {
    justify-content: center;
    padding: clamp(24px,4vh,44px) clamp(28px,4vw,55px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .bj-babymassage .bm-section07__header {
    margin-bottom: clamp(22px,3vh,36px);
  }
  .bj-babymassage .bm-section07__grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 clamp(18px,3vw,32px);
    flex:0 0 auto;
  }
  .bj-babymassage .bm-section07__question {
    min-height:clamp(75px,9.4vh,92px);
    padding:14px 12px;
  }
  .bj-babymassage .bm-section07__question-text {
    font-size:clamp(13px,1.5vw,16px);
  }
}
/* 800px以下：縦1列、開いた回答も読めるように内部スクロール */
@media (max-width: 800px) {
  .bj-babymassage .bm-section07 {
    justify-content:flex-start;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
  }
  .bj-babymassage .bm-section07__grid {
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
  .bj-babymassage .bm-section07__question {min-height:62px;}
}

/* ============================================================
   SECTION 07 — FAQ END
   ============================================================ */


/* ============================================================
   SECTION 08 — FAMILY BABY MASSAGE
   FINAL MESSAGE / CTA

   PC / NOTEBOOK / TB LANDSCAPE / TB PORTRAIT / SP
   SECTION 08 CSS — COMPLETE REPLACEMENT
   ============================================================ */


/* ============================================================
   08-01 BASE
   PC：PHOTO LEFT / CONTENT RIGHT
   ============================================================ */

.bj-babymassage .bm-section08 {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: minmax(0, 60.5fr) minmax(0, 39.5fr);

  width: 100%;
  height: calc(100svh - var(--bj-header-h, 64px));
  height: calc(100dvh - var(--bj-header-h, 64px));
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;
  box-sizing: border-box;

  background: #f5f1ec;
  color: #503b30;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif CJK JP",
    serif;
}


/* ============================================================
   08-02 PHOTO
   ============================================================ */

.bj-babymassage .bm-section08__visual {
  position: relative;

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;
  background: #eee7dc;
}

.bj-babymassage .bm-section08__image {
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

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


/* ============================================================
   08-03 CONTENT
   ============================================================ */

.bj-babymassage .bm-section08__content {
  position: relative;

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

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding:
    clamp(38px, 7vh, 90px)
    clamp(30px, 3.65vw, 64px)
    clamp(35px, 6vh, 75px);

  box-sizing: border-box;
  background: #f5f1ec;
}


/* ============================================================
   08-04 HEADING
   ============================================================ */

.bj-babymassage .bm-section08__heading {
  flex: 0 0 auto;
  min-width: 0;
  margin-bottom: clamp(22px, 4vh, 46px);
}

.bj-babymassage .bm-section08__eyebrow {
  margin: 0 0 clamp(18px, 3vh, 34px);

  color: #503b30;
  font-family: Arial, Helvetica, sans-serif;

  font-size: clamp(14px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
}

.bj-babymassage .bm-section08__title {
  margin: 0;

  color: #503b30;

  font-size: clamp(29px, 3.15vw, 53px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .025em;
}


/* ============================================================
   08-05 DESCRIPTION
   ============================================================ */

.bj-babymassage .bm-section08__bottom {
  flex: 0 0 auto;
  min-width: 0;
}

.bj-babymassage .bm-section08__description {
  margin: 0 0 clamp(17px, 2.5vh, 30px);

  color: #59463a;

  font-size: clamp(12px, 1.17vw, 19px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: .055em;
}


/* ============================================================
   08-06 CTA
   ============================================================ */

.bj-babymassage .bm-section08__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
  width: 100%;
  min-height: clamp(56px, 7.6vh, 74px);

  margin: 0;
  padding: 14px clamp(17px, 1.6vw, 28px);

  box-sizing: border-box;

  border: 1px solid #152b50;
  border-radius: 8px;

  background: #152b50;
  color: #ffffff;

  text-decoration: none;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.bj-babymassage .bm-section08__cta-text {
  min-width: 0;
  color: #ffffff;

  font-size: clamp(12px, 1.2vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}

.bj-babymassage .bm-section08__cta-arrow {
  display: block;
  flex: 0 0 auto;

  color: #ffffff;
  font-family: Arial, sans-serif;

  font-size: clamp(23px, 2vw, 34px);
  font-weight: 300;
  line-height: 1;
}

@media (hover: hover) {
  .bj-babymassage .bm-section08__cta:hover {
    background: #213e6b;
    border-color: #213e6b;
    transform: translateY(-2px);
  }
}

.bj-babymassage .bm-section08__cta:focus-visible {
  outline: 3px solid #b98d62;
  outline-offset: 4px;
}


/* ============================================================
   08-07 LARGE PC
   1440px+
   ============================================================ */

@media (min-width: 1440px) {

  .bj-babymassage .bm-section08__image {
    object-position: center center;
  }

  .bj-babymassage .bm-section08__content {
    padding-top: clamp(40px, 7vh, 90px);
    padding-bottom: clamp(35px, 6vh, 75px);
  }
}


/* ============================================================
   08-08 NOTEBOOK PC
   1101–1439px
   ============================================================ */

@media (min-width: 1101px) and (max-width: 1439px) {

  .bj-babymassage .bm-section08 {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }

  .bj-babymassage .bm-section08__content {
    padding:
      clamp(45px, 14vh, 130px)
      clamp(25px, 3vw, 44px)
      clamp(28px, 6vh, 65px);
  }

  .bj-babymassage .bm-section08__eyebrow {
    margin-bottom: clamp(17px, 2.8vh, 30px);
    font-size: clamp(13px, 1.45vw, 20px);
  }

  .bj-babymassage .bm-section08__title {
    font-size: clamp(29px, 3vw, 42px);
  }

  .bj-babymassage .bm-section08__description {
    font-size: clamp(12px, 1.15vw, 16px);
  }
}


/* ============================================================
   08-09 TABLET LANDSCAPE
   768–1100px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section08 {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  }

  .bj-babymassage .bm-section08__image {
    object-position: 52% center;
  }

  .bj-babymassage .bm-section08__content {
    padding:
      clamp(30px, 8vh, 68px)
      clamp(20px, 2.7vw, 32px)
      clamp(22px, 4vh, 40px);
  }

  .bj-babymassage .bm-section08__eyebrow {
    margin-bottom: clamp(15px, 2.5vh, 25px);
    font-size: clamp(11px, 1.35vw, 16px);
  }

  .bj-babymassage .bm-section08__title {
    font-size: clamp(23px, 2.7vw, 32px);
    line-height: 1.48;
    letter-spacing: 0;
  }

  .bj-babymassage .bm-section08__description {
    margin-bottom: 14px;
    font-size: clamp(11px, 1.15vw, 14px);
    line-height: 1.8;
  }

  .bj-babymassage .bm-section08__cta {
    min-height: 50px;
    padding: 12px 15px;
  }

  .bj-babymassage .bm-section08__cta-text {
    font-size: clamp(11px, 1.3vw, 14px);
  }
}


/* ============================================================
   08-10 TABLET PORTRAIT
   768–1100px
   PHOTO TOP / CONTENT BOTTOM
   ============================================================ */

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

  .bj-babymassage .bm-section08 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 44fr) minmax(0, 56fr);
  }

  .bj-babymassage .bm-section08__image {
    object-position: center 43%;
  }

  .bj-babymassage .bm-section08__content {
    padding:
      clamp(35px, 5vh, 62px)
      8%
      clamp(35px, 5vh, 62px);
  }

  .bj-babymassage .bm-section08__eyebrow {
    margin-bottom: clamp(17px, 2.7vh, 30px);
    font-size: clamp(16px, 2vw, 21px);
  }

  .bj-babymassage .bm-section08__title {
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.5;
    letter-spacing: 0;
  }

  .bj-babymassage .bm-section08__description {
    font-size: clamp(13px, 1.8vw, 18px);
    line-height: 1.9;
  }

  .bj-babymassage .bm-section08__cta {
    min-height: 62px;
  }

  .bj-babymassage .bm-section08__cta-text {
    font-size: clamp(14px, 1.9vw, 19px);
  }
}


/* ============================================================
   08-11 SMARTPHONE
   0–767px
   ============================================================ */

@media (max-width: 767px) {

  .bj-babymassage .bm-section08 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 44fr) minmax(0, 56fr);
  }

  /* Photo */

  .bj-babymassage .bm-section08__visual {
    width: 100%;
    height: 100%;
  }

  .bj-babymassage .bm-section08__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  /* Content */

  .bj-babymassage .bm-section08__content {
    width: 100%;
    height: 100%;

    padding:
      clamp(24px, 4.2vh, 48px)
      8%
      clamp(25px, 4vh, 45px);

    justify-content: center;
  }

  .bj-babymassage .bm-section08__eyebrow {
    margin-bottom: clamp(16px, 2.7vh, 27px);

    font-size: clamp(12px, 3.3vw, 19px);
    letter-spacing: .12em;
  }

  /*
   * 完成デザインの2行を維持。
   * タイトルの「が、」だけが3行目に落ちないよう、
   * SPでは文字サイズを領域幅に合わせる。
   */

  .bj-babymassage .bm-section08__title {
    font-size: clamp(20px, 5.7vw, 34px);
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .bj-babymassage .bm-section08__description {
    margin-bottom: clamp(14px, 2vh, 23px);

    font-size: clamp(10px, 2.75vw, 16px);
    line-height: 1.9;
    letter-spacing: .025em;
  }

  .bj-babymassage .bm-section08__cta {
    min-height: clamp(52px, 6vh, 64px);
    padding: 12px clamp(13px, 3vw, 20px);
    border-radius: 7px;
  }

  .bj-babymassage .bm-section08__cta-text {
    font-size: clamp(11px, 2.9vw, 17px);
    letter-spacing: .025em;
  }

  .bj-babymassage .bm-section08__cta-arrow {
    font-size: clamp(24px, 5.7vw, 32px);
  }
}


/* ============================================================
   08-12 SMALL SMARTPHONE
   390px以下
   ============================================================ */

@media (max-width: 390px) {

  .bj-babymassage .bm-section08__content {
    padding:
      clamp(21px, 3.4vh, 35px)
      8%
      clamp(22px, 3.5vh, 39px);
  }

  .bj-babymassage .bm-section08__eyebrow {
    margin-bottom: clamp(14px, 2.3vh, 24px);
    font-size: clamp(11px, 3.2vw, 14px);
  }

  .bj-babymassage .bm-section08__title {
    font-size: clamp(20px, 5.5vw, 23px);
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .bj-babymassage .bm-section08__description {
    font-size: clamp(10px, 2.65vw, 12px);
    line-height: 1.85;
  }

  .bj-babymassage .bm-section08__cta-text {
    font-size: clamp(10px, 2.85vw, 13px);
  }
}


/* ============================================================
   08-13 SHORT LANDSCAPE
   ============================================================ */

@media (min-width: 768px) and (max-height: 650px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section08__content {
    padding-top: 6%;
    padding-bottom: 5%;
  }

  .bj-babymassage .bm-section08__eyebrow {
    margin-bottom: clamp(12px, 2vh, 22px);
  }

  .bj-babymassage .bm-section08__title {
    font-size: clamp(22px, 2.7vw, 34px);
    line-height: 1.4;
  }

  .bj-babymassage .bm-section08__description {
    margin-bottom: 10px;
    line-height: 1.6;
  }

  .bj-babymassage .bm-section08__cta {
    min-height: 46px;
  }
}


/* ============================================================
   08-14 REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .bj-babymassage .bm-section08__cta {
    transition: none;
  }
}


/* ============================================================
   SECTION 08 — END
   ============================================================ */


/* ============================================================
   SECTION 09 — OUR INSTRUCTORS
   FAMILY BABY MASSAGE

   10 INSTRUCTORS / HORIZONTAL GALLERY
   HTML DATA / NO NEW JS

   PC / NOTEBOOK / TABLET / SP
   ============================================================ */


/* ============================================================
   09-01 BASE
   ============================================================ */

.bj-babymassage .bm-section09 {
  position: relative;
  isolation: isolate;

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

  width: 100%;
  height: calc(100svh - var(--bj-header-h, 64px));
  height: calc(100dvh - var(--bj-header-h, 64px));
  min-height: 0;

  margin: 0;
  padding: clamp(32px, 6vh, 72px) 0;

  box-sizing: border-box;
  overflow: hidden;

  background: #f7f5f1;
  color: #4f3b31;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;
}


/* ============================================================
   09-02 SECTION HEADER
   ============================================================ */

.bj-babymassage .bm-section09__header {
  flex: 0 0 auto;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto clamp(42px, 7vh, 84px);
  padding: 0 clamp(24px, 6vw, 100px);

  box-sizing: border-box;
  text-align: center;
}

.bj-babymassage .bm-section09__eyebrow {
  margin: 0 0 clamp(12px, 2vh, 22px);

  color: #c37c70;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .19em;
}

.bj-babymassage .bm-section09__title {
  margin: 0;

  color: #503b30;

  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .1em;
}

.bj-babymassage .bm-section09__intro {
  margin: clamp(14px, 2.5vh, 27px) 0 0;

  color: #665348;

  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .065em;
}


/* ============================================================
   09-03 HORIZONTAL GALLERY
   ONE ROW / SCROLL SNAP
   ============================================================ */

.bj-babymassage .bm-section09__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(185px, 17vw, 280px);
  grid-template-rows: minmax(0, 1fr);

  align-items: start;
  justify-content: start;
  gap: clamp(15px, 1.8vw, 34px);

  flex: 0 0 auto;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding:
    8px
    clamp(28px, 6.5vw, 112px)
    23px;

  box-sizing: border-box;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x proximity;
  scroll-padding-inline: clamp(28px, 6.5vw, 112px);
  scroll-behavior: smooth;

  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: #cfc4ba transparent;
}

.bj-babymassage .bm-section09__grid::-webkit-scrollbar {
  height: 5px;
}

.bj-babymassage .bm-section09__grid::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #cfc4ba;
}

.bj-babymassage .bm-section09__grid::-webkit-scrollbar-track {
  background: transparent;
}


/* ============================================================
   09-04 INSTRUCTOR CARD
   ============================================================ */

.bj-babymassage .bm-section09__card {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
  text-align: center;

  scroll-snap-align: start;
  scroll-snap-stop: normal;
}


/* ============================================================
   09-05 CIRCULAR PORTRAIT
   ============================================================ */

.bj-babymassage .bm-section09__image {
  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: none;

  margin: 0;

  border: 0;
  border-radius: 50%;

  object-fit: cover;
  object-position: center 35%;

  background: #eae3db;
}


/* ============================================================
   09-06 INSTRUCTOR DETAILS
   ============================================================ */

.bj-babymassage .bm-section09__info {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: clamp(15px, 2.4vh, 27px) 5px 0;

  box-sizing: border-box;
}

.bj-babymassage .bm-section09__name {
  margin: 0;

  color: #4b382e;

  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .08em;
}

.bj-babymassage .bm-section09__qualification {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 3.3em;

  width: 100%;
  margin: 8px 0 0;

  color: #75685f;

  font-size: clamp(11px, .88vw, 14px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .015em;

  overflow-wrap: anywhere;
}

.bj-babymassage .bm-section09__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;

  width: 100%;

  margin: clamp(10px, 1.8vh, 20px) 0 0;
  padding: 0;
}

.bj-babymassage .bm-section09__price-value {
  color: #142e52;

  font-family:
    Georgia,
    "Yu Mincho",
    serif;

  font-size: clamp(23px, 2vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .015em;

  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.bj-babymassage .bm-section09__price-unit {
  color: #746961;

  font-size: clamp(10px, .8vw, 13px);
  font-weight: 400;
  line-height: 1.4;

  white-space: nowrap;
}


/* ============================================================
   09-07 LARGE PC
   1440px+
   ============================================================ */

@media (min-width: 1440px) {

  .bj-babymassage .bm-section09__grid {
    grid-auto-columns: clamp(225px, 17vw, 280px);
  }

}


/* ============================================================
   09-08 NOTEBOOK PC
   1101–1439px
   ============================================================ */

@media (min-width: 1101px) and (max-width: 1439px) {

  .bj-babymassage .bm-section09 {
    padding-top: clamp(25px, 4vh, 48px);
    padding-bottom: clamp(25px, 4vh, 48px);
  }

  .bj-babymassage .bm-section09__header {
    margin-bottom: clamp(28px, 5vh, 54px);
  }

  .bj-babymassage .bm-section09__grid {
    grid-auto-columns: clamp(190px, 18vw, 245px);
    gap: 22px;
  }

  .bj-babymassage .bm-section09__info {
    padding-top: 17px;
  }

}


/* ============================================================
   09-09 TABLET LANDSCAPE
   768–1100px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px)
       and (orientation: landscape) {

  .bj-babymassage .bm-section09 {
    padding: 18px 0;
  }

  .bj-babymassage .bm-section09__header {
    margin-bottom: clamp(17px, 3vh, 33px);
  }

  .bj-babymassage .bm-section09__eyebrow {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .bj-babymassage .bm-section09__title {
    font-size: clamp(25px, 3vw, 34px);
  }

  .bj-babymassage .bm-section09__intro {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.7;
  }

  .bj-babymassage .bm-section09__grid {
    grid-auto-columns: clamp(145px, 19vw, 205px);
    gap: 17px;

    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 14px;

    scroll-padding-inline: 35px;
  }

  .bj-babymassage .bm-section09__info {
    padding-top: 12px;
  }

  .bj-babymassage .bm-section09__name {
    font-size: 16px;
  }
/* Section 09｜講師名を一時非表示 */
.bj-babymassage .bm-section09__card .bm-section09__name {
  display: none !important;
}

/* 名前を消した後の資格位置 */
.bj-babymassage .bm-section09__qualification {
  margin-top: 0;
}

/* 写真の下から資格までの余白を統一 */
.bj-babymassage .bm-section09__info {
  padding-top: 12px;
}
		   
  .bj-babymassage .bm-section09__qualification {
    font-size: 10px;
    margin-top: 5px;
  }

  .bj-babymassage .bm-section09__price {
    margin-top: 8px;
  }

  .bj-babymassage .bm-section09__price-value {
    font-size: 23px;
  }

}


/* ============================================================
   09-10 TABLET PORTRAIT
   768–1100px
   ============================================================ */

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

  .bj-babymassage .bm-section09__header {
    margin-bottom: clamp(35px, 6vh, 65px);
  }

  .bj-babymassage .bm-section09__grid {
    grid-auto-columns: clamp(190px, 27vw, 255px);
    gap: 23px;

    padding-left: 40px;
    padding-right: 40px;

    scroll-padding-inline: 40px;
  }

  .bj-babymassage .bm-section09__name {
    font-size: 18px;
  }

  .bj-babymassage .bm-section09__qualification {
    font-size: 12px;
  }

  .bj-babymassage .bm-section09__price-value {
    font-size: 27px;
  }

}


/* ============================================================
   09-11 SMARTPHONE
   0–767px
   ============================================================ */

@media (max-width: 767px) {

  .bj-babymassage .bm-section09 {
    justify-content: center;
    padding: 26px 0;
  }

  .bj-babymassage .bm-section09__header {
    margin-bottom: clamp(30px, 5vh, 55px);
    padding: 0 18px;
  }

  .bj-babymassage .bm-section09__eyebrow {
    margin-bottom: 11px;
    font-size: 11px;
    letter-spacing: .15em;
  }

  .bj-babymassage .bm-section09__title {
    font-size: clamp(26px, 7vw, 35px);
  }

  .bj-babymassage .bm-section09__intro {
    margin-top: 14px;
    font-size: clamp(11px, 2.9vw, 13px);
    line-height: 1.85;
    letter-spacing: .025em;
  }

  .bj-babymassage .bm-section09__grid {
    grid-auto-columns: clamp(195px, 65vw, 265px);
    gap: 18px;

    padding:
      4px
      8%
      19px;

    scroll-padding-inline: 8%;
    scroll-snap-type: x mandatory;
  }

  .bj-babymassage .bm-section09__info {
    padding-top: 17px;
  }

  .bj-babymassage .bm-section09__name {
    font-size: 18px;
  }

  .bj-babymassage .bm-section09__qualification {
    min-height: 3.3em;
    margin-top: 7px;
    font-size: 11px;
  }

  .bj-babymassage .bm-section09__price {
    margin-top: 10px;
  }

  .bj-babymassage .bm-section09__price-value {
    font-size: 27px;
  }

  .bj-babymassage .bm-section09__price-unit {
    font-size: 11px;
  }

}


/* ============================================================
   09-12 SMALL / SHORT SMARTPHONE
   ============================================================ */

@media (max-width: 390px) {

  .bj-babymassage .bm-section09__grid {
    grid-auto-columns: 64vw;
  }

  .bj-babymassage .bm-section09__header {
    margin-bottom: 27px;
  }

}

@media (max-width: 767px) and (max-height: 700px) {

  .bj-babymassage .bm-section09 {
    padding: 15px 0;
  }

  .bj-babymassage .bm-section09__header {
    margin-bottom: 17px;
  }

  .bj-babymassage .bm-section09__intro {
    margin-top: 8px;
  }

  .bj-babymassage .bm-section09__grid {
    grid-auto-columns: min(53vw, 190px);
    gap: 15px;
  }

  .bj-babymassage .bm-section09__info {
    padding-top: 10px;
  }

  .bj-babymassage .bm-section09__qualification {
    margin-top: 4px;
  }

  .bj-babymassage .bm-section09__price {
    margin-top: 5px;
  }

  .bj-babymassage .bm-section09__price-value {
    font-size: 23px;
  }

}


/* ============================================================
   09-13 REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .bj-babymassage .bm-section09__grid {
    scroll-behavior: auto;
  }

}


/* ============================================================
   SECTION 09 — END
   ============================================================ */
/* 非公開の講師名を確実に非表示 */
.bj-babymassage .bm-section09__name[hidden] {
  display: none !important;
}


/* ============================================================
   Baby-J Family Baby Massage | SECTION 10 FINAL CTA
   SINGLE SOURCE CSS / consolidated 2026-10-20
   Replace the entire OLD Section 10 CSS + FINAL REFINEMENT.
   No HTML, image URL, JS or other section changes.
   ============================================================ */

/* 10-01 | Two equal panels at every viewport */
.bj-babymassage .bm-section10 {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  height: calc(100svh - var(--bj-header-h, 64px));
  height: calc(100dvh - var(--bj-header-h, 64px));
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: #f6f0ec;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

/* 10-02 | Panel & photo */
.bj-babymassage .bm-section10__panel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.bj-babymassage .bm-section10__panel--families {
  background: #f7e6e1;
  color: #4f392f;
}
.bj-babymassage .bm-section10__panel--instructors {
  background: #e8f1f5;
  color: #152e52;
}
.bj-babymassage .bm-section10__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bj-babymassage .bm-section10__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.bj-babymassage .bm-section10__panel--families .bm-section10__image {
  object-position: 29% center;
}
.bj-babymassage .bm-section10__panel--instructors .bm-section10__image {
  object-position: 74% center;
}

/* 10-03 | Final adopted gradients, not a full-photo haze */
.bj-babymassage .bm-section10__panel--families::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, transparent 38%,
    rgba(247,230,225,.22) 48%, rgba(247,230,225,.76) 60%,
    rgba(247,230,225,.95) 74%, #f7e6e1 100%);
}
.bj-babymassage .bm-section10__panel--instructors::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #e8f1f5 0%, rgba(232,241,245,.96) 27%,
    rgba(232,241,245,.70) 44%, rgba(232,241,245,.18) 58%,
    transparent 72%);
}

/* 10-04 | Default content & typography (below 1101px overridden as needed) */
.bj-babymassage .bm-section10__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 53%;
  min-width: 0;
  max-width: 490px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bj-babymassage .bm-section10__panel--families .bm-section10__content {
  margin-left: auto;
  margin-right: 3%;
}
.bj-babymassage .bm-section10__panel--instructors .bm-section10__content {
  margin-left: 5%;
  margin-right: auto;
}
.bj-babymassage .bm-section10__eyebrow {
  margin: 0 0 clamp(18px, 3.3vh, 36px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.16vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .15em;
}
.bj-babymassage .bm-section10__panel--families .bm-section10__eyebrow {
  color: #c97774;
}
.bj-babymassage .bm-section10__panel--instructors .bm-section10__eyebrow {
  color: #3484a5;
}
.bj-babymassage .bm-section10__title {
  margin: 0;
  font-size: clamp(27px, 2.24vw, 46px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .015em;
}
.bj-babymassage .bm-section10__panel--families .bm-section10__title {
  color: #4f392f;
}
.bj-babymassage .bm-section10__panel--instructors .bm-section10__title {
  color: #142e52;
}
.bj-babymassage .bm-section10__description {
  margin: clamp(23px, 3.6vh, 41px) 0 clamp(25px, 4vh, 45px);
  font-size: clamp(12px, 1.03vw, 18px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .025em;
}
.bj-babymassage .bm-section10__panel--families .bm-section10__description {
  color: #514037;
}
.bj-babymassage .bm-section10__panel--instructors .bm-section10__description {
  color: #263c5a;
}

/* 10-05 | CTA, remains live HTML */
.bj-babymassage .bm-section10__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: clamp(58px, 7vh, 74px);
  margin: 0;
  padding: 14px clamp(18px, 1.8vw, 28px);
  box-sizing: border-box;
  border: 1.5px solid #152e52;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.bj-babymassage .bm-section10__cta--families {
  background: #152e52;
  color: #fff;
}
.bj-babymassage .bm-section10__cta--instructors {
  background: rgba(255,255,255,.96);
  color: #152e52;
}
.bj-babymassage .bm-section10__cta-text {
  min-width: 0;
  font-size: clamp(12px, 1.04vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .015em;
}
.bj-babymassage .bm-section10__cta-arrow {
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
  font-size: clamp(23px, 2vw, 32px);
  font-weight: 300;
  line-height: 1;
}
.bj-babymassage .bm-section10__cta--families .bm-section10__cta-text,
.bj-babymassage .bm-section10__cta--families .bm-section10__cta-arrow {
  color: #fff;
}
.bj-babymassage .bm-section10__cta--instructors .bm-section10__cta-text,
.bj-babymassage .bm-section10__cta--instructors .bm-section10__cta-arrow {
  color: #152e52;
}
@media (hover: hover) {
  .bj-babymassage .bm-section10__cta:hover { transform: translateY(-2px); }
}
.bj-babymassage .bm-section10__cta:focus-visible {
  outline: 3px solid #ba8e65;
  outline-offset: 4px;
}

/* 10-06 | All PC 1101px+; last adopted FINAL REFINEMENT values */
@media (min-width: 1101px) {
  .bj-babymassage .bm-section10__content {
    width: 46%;
    max-width: 390px;
  }
  .bj-babymassage .bm-section10__eyebrow {
    margin-bottom: clamp(18px, 2.8vh, 30px);
  }
  .bj-babymassage .bm-section10__title {
    font-size: clamp(26px, 2vw, 39px);
    line-height: 1.5;
    letter-spacing: 0;
  }
  .bj-babymassage .bm-section10__description {
    max-width: none;
    margin: clamp(20px, 2.8vh, 30px) 0;
    font-size: clamp(11px, .95vw, 15px);
    line-height: 1.85;
    letter-spacing: 0;
  }
  .bj-babymassage .bm-section10__cta {
    width: 100%;
    min-width: 0;
    max-width: 330px;
    min-height: 50px;
    padding: 10px 18px;
  }
  .bj-babymassage .bm-section10__cta-text {
    font-size: clamp(11px, .9vw, 14px);
  }
  .bj-babymassage .bm-section10__cta-arrow { font-size: 21px; }
  .bj-babymassage .bm-section10__panel--families .bm-section10__content {
    width: 41%;
    max-width: 355px;
    margin-left: auto;
    margin-right: 7.2%;
  }
  .bj-babymassage .bm-section10__panel--families .bm-section10__description {
    max-width: 320px;
  }
  .bj-babymassage .bm-section10__panel--families .bm-section10__cta {
    max-width: 350px;
  }
  .bj-babymassage .bm-section10__panel--instructors .bm-section10__content {
    width: 47%;
    max-width: 395px;
    margin-left: 4.8%;
    margin-right: auto;
  }
}

/* 10-07 | Notebook 1101–1439px */
@media (min-width: 1101px) and (max-width: 1439px) {
  .bj-babymassage .bm-section10__title {
    font-size: clamp(23px, 1.95vw, 31px);
  }
  .bj-babymassage .bm-section10__description {
    font-size: clamp(10px, .94vw, 13px);
  }
  .bj-babymassage .bm-section10__panel--families .bm-section10__content {
    width: 39%;
    max-width: 330px;
    margin-right: 8.2%;
  }
  .bj-babymassage .bm-section10__panel--families .bm-section10__cta {
    max-width: 320px;
  }
  .bj-babymassage .bm-section10__panel--instructors .bm-section10__content {
    width: 48%;
    max-width: 360px;
    margin-left: 4.2%;
  }
}

/* 10-08 | Tablet landscape 768–1100px */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
  .bj-babymassage .bm-section10__content {
    width: 49%;
    max-width: 285px;
  }
  .bj-babymassage .bm-section10__panel--families::after {
    background: linear-gradient(90deg,
      transparent 0%, transparent 34%, rgba(247,230,225,.30) 47%,
      rgba(247,230,225,.84) 61%, #f7e6e1 100%);
  }
  .bj-babymassage .bm-section10__panel--instructors::after {
    background: linear-gradient(90deg,
      #e8f1f5 0%, rgba(232,241,245,.94) 24%,
      rgba(232,241,245,.78) 40%, rgba(232,241,245,.20) 56%, transparent 72%);
  }
  .bj-babymassage .bm-section10__panel--families .bm-section10__content {
    margin-left: auto;
    margin-right: 4.2%;
  }
  .bj-babymassage .bm-section10__panel--instructors .bm-section10__content {
    margin-left: 4.2%;
    margin-right: auto;
  }
  .bj-babymassage .bm-section10__eyebrow {
    margin-bottom: 15px;
    font-size: 11px;
  }
  .bj-babymassage .bm-section10__title {
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.46;
    letter-spacing: 0;
  }
  .bj-babymassage .bm-section10__description {
    margin: 16px 0;
    font-size: clamp(10px, 1.08vw, 12px);
    line-height: 1.8;
  }
  .bj-babymassage .bm-section10__cta {
    max-width: 258px;
    min-height: 45px;
    padding: 9px 14px;
  }
  .bj-babymassage .bm-section10__cta-text { font-size: 10px; }
  .bj-babymassage .bm-section10__cta-arrow { font-size: 21px; }
}

/* 10-09 | Tablet portrait 768–1100px; photo above copy in EACH panel */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .bj-babymassage .bm-section10__panel {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .bj-babymassage .bm-section10__visual {
    position: relative;
    inset: auto;
    flex: 0 0 44%;
    width: 100%;
    height: 44%;
  }
  .bj-babymassage .bm-section10__image { object-position: center 40%; }
  .bj-babymassage .bm-section10__panel::after { display: none; }
  .bj-babymassage .bm-section10__content,
  .bj-babymassage .bm-section10__panel--families .bm-section10__content,
  .bj-babymassage .bm-section10__panel--instructors .bm-section10__content {
    flex: 1 1 auto;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(20px, 3.5vw, 38px);
  }
  .bj-babymassage .bm-section10__eyebrow {
    margin-bottom: 22px;
    font-size: clamp(13px, 1.7vw, 18px);
  }
  .bj-babymassage .bm-section10__title { font-size: clamp(23px, 2.8vw, 31px); }
  .bj-babymassage .bm-section10__description {
    max-width: none;
    margin: 22px 0;
    font-size: clamp(11px, 1.4vw, 15px);
  }
  .bj-babymassage .bm-section10__cta {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .bj-babymassage .bm-section10__cta-text { font-size: clamp(11px, 1.35vw, 15px); }
}

/* 10-10 | Smartphone; still 50/50, photo above copy in EACH panel */
@media (max-width: 767px) {
  .bj-babymassage .bm-section10__panel {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .bj-babymassage .bm-section10__panel::after { display: none; }
  .bj-babymassage .bm-section10__visual {
    position: relative;
    inset: auto;
    flex: 0 0 38%;
    width: 100%;
    height: 38%;
  }
  .bj-babymassage .bm-section10__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .bj-babymassage .bm-section10__panel--families .bm-section10__image {
    object-position: 29% center;
  }
  .bj-babymassage .bm-section10__panel--instructors .bm-section10__image {
    object-position: 75% center;
  }
  .bj-babymassage .bm-section10__content,
  .bj-babymassage .bm-section10__panel--families .bm-section10__content,
  .bj-babymassage .bm-section10__panel--instructors .bm-section10__content {
    flex: 1 1 auto;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(14px, 2.3vh, 25px) clamp(9px, 2.8vw, 19px) clamp(18px, 3vh, 31px);
  }
  .bj-babymassage .bm-section10__eyebrow {
    margin-bottom: clamp(13px, 2vh, 22px);
    font-size: clamp(9px, 2.4vw, 13px);
    letter-spacing: .07em;
    line-height: 1.4;
  }
  .bj-babymassage .bm-section10__title {
    font-size: clamp(15px, 3.95vw, 24px);
    line-height: 1.52;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .bj-babymassage .bm-section10__description {
    max-width: none;
    margin: clamp(14px, 2.4vh, 22px) 0;
    font-size: clamp(10px, 2.45vw, 13px);
    line-height: 1.78;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .bj-babymassage .bm-section10__cta {
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 6px;
    min-height: 50px;
    padding: 9px 10px;
    border-radius: 10px;
  }
  .bj-babymassage .bm-section10__cta-text {
    font-size: clamp(10px, 2.45vw, 13px);
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .bj-babymassage .bm-section10__cta-arrow { font-size: 18px; }
}

/* 10-11 | Narrow SP */
@media (max-width: 390px) {
  .bj-babymassage .bm-section10__visual {
    flex-basis: 35%;
    height: 35%;
  }
  .bj-babymassage .bm-section10__title { font-size: clamp(14px, 3.8vw, 17px); }
  .bj-babymassage .bm-section10__description { font-size: 10px; }
  .bj-babymassage .bm-section10__cta-text { font-size: 10px; }
}

/* 10-12 | Short SP */
@media (max-width: 767px) and (max-height: 700px) {
  .bj-babymassage .bm-section10__visual {
    flex-basis: 31%;
    height: 31%;
  }
  .bj-babymassage .bm-section10__content {
    padding-top: 10px;
    padding-bottom: 12px;
  }
  .bj-babymassage .bm-section10__eyebrow { margin-bottom: 9px; }
  .bj-babymassage .bm-section10__description {
    margin: 10px 0;
    line-height: 1.6;
  }
  .bj-babymassage .bm-section10__cta { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .bj-babymassage .bm-section10__cta { transition: none; }
}
/* END | SECTION 10 ONLY */

/* ============================================================
   END — BABY-J BABY MASSAGE PAGE CSS
   ============================================================ */


/* ============================================================
   SECTION 10 | image pullback refinement (both panels)
   Keep 50:50 layout and current copy/CTA structure.
   ============================================================ */
@media (min-width: 768px) {
  .bj-babymassage .bm-section10__visual {
    background: inherit;
  }

  .bj-babymassage .bm-section10__image {
    transform: scale(0.92);
    transform-origin: center center;
  }

  .bj-babymassage .bm-section10__panel--families .bm-section10__image {
    object-position: 30% 42%;
    transform-origin: 38% 42%;
  }

  .bj-babymassage .bm-section10__panel--instructors .bm-section10__image {
    object-position: 70% 40%;
    transform-origin: 62% 40%;
  }
}

/* Section 05｜375px前後のみ文字を下げる */
@media (min-width: 360px) and (max-width: 390px) {
  .bj-babymassage .bm-section05__content {
    top: 55%;
  }
}