/* data page: about section (scoped to .page-data) */

/* ---- 座標系: --x/--y は Figma のカード内座標、--hy は見出し帯の高さ（本文の上端） ---- */
.page-data .about .ab {
  position: absolute;
  left: calc(var(--x, 0) * var(--px));
  top: calc((var(--y, 0) - var(--hy, 0)) * var(--px));
  margin: 0;
}

.page-data .about .ab[style*="--w"] { width: calc(var(--w) * var(--px)); }
.page-data .about .ab[style*="--h"] { height: calc(var(--h) * var(--px)); }

/* 中心 x 基準 / 中心 x・y 基準 */
.page-data .about .ab--c {
  left: calc(var(--c) * var(--px));
  transform: translateX(-50%);
  white-space: nowrap;
}

.page-data .about .ab--cc {
  left: calc(var(--c) * var(--px));
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.page-data .about .data-card__body {
  overflow: hidden;
}

.page-data .about p { font-family: var(--data-mincho); font-weight: 700; color: var(--data-text); }
.page-data .about .data-card__body img { max-width: none; }

/* 出現アニメ（アイコン類）。transform を位置決めに使わない要素だけに付ける */
.js-data-anim .page-data .about .js-inview .ab-pop {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.5s ease, transform 0.6s var(--data-ease);
  transition-delay: calc(250ms + var(--i, 0) * 60ms);
}

.js-data-anim .page-data .about .js-inview.is-inview .ab-pop {
  opacity: 1;
  transform: none;
}

/* ===== about1 ===== */
.page-data .about .a1 .data-card__frame {
  --hy: 49.086;
}

.page-data .about .a1 .data-card__head {
  height: calc(49.086 * var(--px));
  font-size: calc(26.044 * var(--px));
  letter-spacing: calc(1.3022 * var(--px));
}

/* Figma デモグラpc_261020 5074:8575: 本文 330.91、アイコン 107.59、吹き出しの文字 20 / 26 */
.page-data .about .a1 .data-card__body {
  --body-h: 330.91;
  --fs-n: 53.246;
  --fs-u: 25.791;
  --ic: 107.59;
  --mc: 83.197;
  --bf: 20;
  --bf-big: 26;
}

.page-data .about .a1-star {
  width: calc(22.5771 * var(--px));
  height: calc(22.5784 * var(--px));
  margin: calc(-0.69 * var(--px)) 0 0 calc(-0.69 * var(--px));
  overflow: visible;
}

.page-data .about .a1-t1,
.page-data .about .a1-t2 {
  font-weight: 800;
  color: var(--data-coral);
  line-height: 1.11;
}

.page-data .about .a1-n { font-size: calc(var(--fs-n) * var(--px)); letter-spacing: 0.05em; }
/* Figma: 1文字目は親の tracking（0.0977em）、2文字目は 0.05em */
.page-data .about .a1-t1 .a1-n .js-count { display: inline-block; }
.page-data .about .a1-t1 .a1-n .js-count::first-letter { letter-spacing: 0.0977em; }
.page-data .about .a1-u1 { font-size: calc(var(--fs-u) * var(--px)); letter-spacing: 0.05em; }
.page-data .about .a1-u2 { font-size: calc(var(--fs-u) * var(--px)); letter-spacing: 0.1em; }

.page-data .about .a1-ic { width: calc(var(--ic) * var(--px)); height: calc(var(--ic) * var(--px)); }
.page-data .about .a1-mc { width: calc(var(--mc) * var(--px)); height: calc(var(--mc) * var(--px)); }

.page-data .about .a1-bubble {
  width: calc(270 * var(--px));
  height: calc(180 * var(--px));
  border-radius: calc(24.959 * var(--px));
  background: #caf2ec;
}

/* PC は左揃え 4 行（Figma 5074:8595）、SP は中央揃え 3 行 */
.page-data .about .a1-bt {
  width: calc(228 * var(--px));
  font-size: calc(var(--bf) * var(--px));
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
}

.page-data .about .a1-bt__big { font-size: calc(var(--bf-big) * var(--px)); font-weight: 800; color: var(--data-coral); }
.page-data .about .a1-bt__big2 { font-weight: 800; color: var(--data-coral); }

.page-data .about .a1-doctor {
  width: calc(151 * var(--px));
  height: calc(162 * var(--px));
}

.page-data .about .a1-doctor--sp { display: none; }

/* 2610 版の PC は星の飾りなし（SP だけ） */
.page-data .about .a1-star { display: none; }

.page-data .about .a1-note {
  font-family: var(--data-sans);
  font-weight: 400;
  font-size: calc(13.022 * var(--px));
  line-height: 1;
  letter-spacing: 0.05em;
}

/* about1 の文言の PC/SP 切り替え（SP の Figma は「治療メニュー」） */
.page-data .about .a1-sp { display: none; }

/* 機器は PC・SP とも about1m（機械数）に並べる。about1 の中の機器は出さない */
.page-data .about .a1 .a1-mach { display: none; }

.page-data .about .a1m .data-card__frame { --hy: 50; }
.page-data .about .a1m .data-card__body { --body-h: 333.333; --fs-n: 53.246; --fs-u: 25.791; --mc: 112.2; }
.page-data .about .a1m .a1-t2 { line-height: 1.11; }

/* カードの並び（Figma PC・SP 共通）: 施術メニュー → 機械数 → フロア面積・個室数 → 在籍数 → カウンセリング */
.page-data .about .a1 { order: 0; }
.page-data .about .a1m { order: 1; }
.page-data .about .a3 { order: 2; }
.page-data .about .a2 { order: 3; }
.page-data .about .a4 { order: 4; }

/* ===== about2 ===== */
.page-data .about .a2-staff { object-fit: cover; }

.page-data .about .a2-num {
  font-weight: 700;
  color: var(--data-coral);
  line-height: 2.12;
  letter-spacing: calc(3.3333 * var(--px));
}

.page-data .about .a2-num__s { font-size: calc(26.407 * var(--px)); letter-spacing: calc(2.6407 * var(--px)); }
.page-data .about .a2-num__s:last-child { letter-spacing: inherit; }
/* Figma: 「3」だけ 7.4537px、「5」は親の 3.3333px */
.page-data .about .a2-num__n { font-size: calc(106.481 * var(--px)); letter-spacing: inherit; }
.page-data .about .a2-num__n .js-count { display: inline-block; }
.page-data .about .a2-num__n .js-count::first-letter { letter-spacing: calc(7.4537 * var(--px)); }

.page-data .about .a2-note {
  font-size: calc(11.926 * var(--px));
  line-height: 1;
  letter-spacing: calc(1.2 * var(--px));
}

/* ===== about3（Figma 4812:7300: 3 院並び） ===== */
.page-data .about .a3-band { background: #caf2ec; }

.page-data .about .a3-box {
  box-sizing: border-box;
  border: calc(1.704 * var(--px)) solid #3095a3;
  border-radius: calc(3.407 * var(--px));
}

.page-data .about .a3-tab {
  background: #298491;
  border-radius: calc(4.259 * var(--px));
}

.page-data .about .a3-tabt {
  font-weight: 800;
  font-size: calc(19.593 * var(--px));
  line-height: 1;
  letter-spacing: calc(0.9796 * var(--px));
  color: #fff;
}

.page-data .about .a3-label {
  font-weight: 700;
  font-size: calc(18 * var(--px));
  line-height: 1;
  letter-spacing: calc(0.54 * var(--px));
  color: var(--data-text);
}

.page-data .about .a3-label--floor {
  line-height: 1.25;
  letter-spacing: calc(-1.8 * var(--px));
}

.page-data .about .a3-rooms {
  font-weight: 700;
  font-size: calc(20 * var(--px));
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--data-coral);
}

.page-data .about .a3-rooms__n { font-size: calc(35.778 * var(--px)); }

.page-data .about .a3-floor {
  font-weight: 700;
  font-size: calc(20 * var(--px));
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--data-coral);
}

.page-data .about .a3-floor__row,
.page-data .about .a3-floor__sub { display: block; }

.page-data .about .a3-floor__n { font-size: calc(30 * var(--px)); letter-spacing: 0.03em; }
.page-data .about .a3-floor__sub { font-size: calc(10 * var(--px)); }
.page-data .about .a3-sub-n { font-size: calc(18 * var(--px)); letter-spacing: 0.1em; }

.page-data .about .a3-mark {
  font-family: var(--data-sans);
  font-weight: 700;
  font-size: calc(10 * var(--px));
  line-height: 1.25;
  letter-spacing: calc(0.4 * var(--px));
  color: var(--data-text);
}

.page-data .about .a3-fn {
  font-family: var(--data-sans);
  font-weight: 400;
  font-size: calc(11 * var(--px));
  line-height: 1.25;
  letter-spacing: calc(0.44 * var(--px));
  white-space: nowrap;
}

.page-data .about .a3-top {
  font-weight: 800;
  font-size: calc(25 * var(--px));
  line-height: 1.3;
  letter-spacing: calc(0.25 * var(--px));
  text-align: center;
  color: #3095a3;
  width: calc(189.111 * var(--px));
}

.page-data .about .a3-note {
  font-family: var(--data-sans);
  font-weight: 400;
  font-size: calc(13.333 * var(--px));
  line-height: 1;
  letter-spacing: calc(0.6667 * var(--px));
}

/* ===== about4 ===== */
.page-data .about .a4-lead {
  font-size: calc(19.593 * var(--px));
  line-height: 1;
  letter-spacing: calc(0.9796 * var(--px));
}

.page-data .about .a4-main { letter-spacing: calc(2.7259 * var(--px)); font-weight: 800; color: var(--data-coral); }
.page-data .about .a4-main p { font-weight: 800; color: var(--data-coral); line-height: 47px; line-height: calc(47 * var(--px)); white-space: nowrap; }
.page-data .about .a4-l1 { font-size: calc(26 * var(--px)); letter-spacing: 0.05em; }
.page-data .about .a4-l2 { font-size: calc(40 * var(--px)); letter-spacing: 0.05em; position: relative; top: calc(-5 * var(--px)); }
.page-data .about .a4-l4 { margin-top: calc(21.5 * var(--px)); position: relative; top: calc(-6.5 * var(--px)); }
.page-data .about .a4-n { font-size: calc(100 * var(--px)); letter-spacing: 0.0545em; }
.page-data .about .a4-u { font-size: calc(42 * var(--px)); }

.page-data .about .a4-voice { background: #caf2ec; border-radius: calc(10 * var(--px)); }

.page-data .about .a4-vt {
  font-family: var(--data-sans);
  font-weight: 500;
  font-size: calc(10 * var(--px));
  line-height: 1.2;
  letter-spacing: calc(0.5 * var(--px));
  white-space: nowrap;
}

/* ===== about5（見出しなし・透過） ===== */
.page-data .about .a5 .data-card__frame {
  --dw: 500;
  background: transparent;
}

.page-data .about .a5 .data-card__body { overflow: visible; }
.page-data .about .a5-bubble--flip { transform: scaleX(-1); }

.page-data .about .a5-q {
  font-size: calc(16 * var(--px));
  line-height: 1.6;
  letter-spacing: calc(0.8 * var(--px));
  text-align: center;
}

.page-data .about .a5-q em {
  font-style: normal;
  font-size: calc(20 * var(--px));
  color: var(--data-coral);
}

.page-data .about .a5-av-bg { background: #fff; border-radius: 50%; }

/* about4 の注釈の改行位置（PC: サポート／SP: 看護師） */
.page-data .about .a4-sp-only { display: none; }

/* ===== SP: about1 だけ Figma の SP 専用レイアウト（幅 390） ===== */
@media (max-width: 767px) {
  .page-data .about .a1 .data-card__frame {
    --dw: 390;
    --hy: 39;
  }

  .page-data .about .a1 .data-card__head {
    height: calc(39 * var(--px));
    font-size: calc(20.8 * var(--px));
    letter-spacing: calc(1.04 * var(--px));
  }

  .page-data .about .a1 .data-card__body {
    --body-h: 503;
    --fs-n: 42.524;
    --fs-u: 20.598;
    --ic: 64.331;
    --mc: 66.444;
    --bf: 15.459;
    --bf-big: 18;
  }

  .page-data .about .a1 .ab {
    left: calc(var(--sx, var(--x)) * var(--px));
    top: calc((var(--sy, var(--y)) - var(--hy)) * var(--px));
  }

  .page-data .about .a1 .ab--c,
  .page-data .about .a1 .ab--cc {
    left: calc(var(--sc, var(--c)) * var(--px));
  }

  .page-data .about .a1-star {
    width: calc(18 * var(--px));
    height: calc(18 * var(--px));
    margin: calc(-0.55 * var(--px)) 0 0 calc(-0.55 * var(--px));
  }

  .page-data .about .a1-bubble {
    width: calc(305.67 * var(--px));
    height: calc(115.243 * var(--px));
    border-radius: calc(21.081 * var(--px));
  }

  .page-data .about .a1-bt { width: calc(243.834 * var(--px)); letter-spacing: 0; text-align: center; }
  .page-data .about .a1-br-pc { display: none; }
  .page-data .about .a1-star { display: block; }

  .page-data .about .a1-doctor {
    width: calc(122.168 * var(--px));
    height: calc(146.985 * var(--px));
  }
  .page-data .about .a1-doctor--sp { display: block; }
  .page-data .about .a1-doctor--pc { display: none; }

  .page-data .about .a1-note { font-size: calc(10.4 * var(--px)); }

  /* Figma デモグラsp_261020: about1 は治療メニューだけ、機器は about1m へ */
  .page-data .about .a1 .data-card__body { --body-h: 377; }
  .page-data .about .a1-pc { display: none; }
  .page-data .about .a1-sp { display: inline; }

  /* ===== about1m（Figma 5074:9040、幅 392） ===== */
  .page-data .about .a1m .ab {
    left: calc(var(--sx, var(--x)) * var(--px));
    top: calc((var(--sy, var(--y)) - var(--hy)) * var(--px));
  }

  .page-data .about .a1m .ab--c { left: calc(var(--sc, var(--c)) * var(--px)); }

  .page-data .about .a1m .data-card__frame {
    --dw: 392;
    --hy: 39.2;
  }

  .page-data .about .a1m .data-card__head {
    height: calc(39.2 * var(--px));
    font-size: calc(20.91 * var(--px));
    letter-spacing: calc(1.0455 * var(--px));
  }

  .page-data .about .a1m .data-card__body {
    --body-h: 261.33;
    --fs-n: 41.75;
    --fs-u: 20.22;
    --mc: 87.96;
  }

  .page-data .about .a1m .a1-note { font-size: calc(10.21 * var(--px)); }
}

/* ===== SP: about3〜5 の Figma SP 値（about3 は PC×0.78 の縮小、細かい文字は据え置き） ===== */
@media (max-width: 767px) {
  .page-data .about .a3-fn {
    left: calc(212 * 100cqw / 390);
    font-size: calc(10 * 100cqw / 390);
  }

  .page-data .about .a4-pc-only { display: none; }
  .page-data .about .a4-sp-only { display: inline; }

  .page-data .about .a4 .data-card__frame,
  .page-data .about .a5 .data-card__frame { --dw: 390; }

  .page-data .about .a4 .ab,
  .page-data .about .a5 .ab {
    left: calc(var(--sx, var(--x)) * var(--px));
    top: calc((var(--sy, var(--y)) - var(--sh0, 0)) * var(--px));
  }
  .page-data .about .a4 .ab { --sh0: 39; }

  .page-data .about .a4 .ab--c,
  .page-data .about .a5 .ab--c { left: calc(var(--sc, var(--c)) * var(--px)); }

  .page-data .about .a4 .ab[style*="--sw"],
  .page-data .about .a5 .ab[style*="--sw"] { width: calc(var(--sw) * var(--px)); }
  .page-data .about .a4 .ab[style*="--sh"],
  .page-data .about .a5 .ab[style*="--sh"] { height: calc(var(--sh) * var(--px)); }

  .page-data .about .a4 .data-card__head {
    height: calc(39 * var(--px));
    font-size: calc(20.8 * var(--px));
  }
  .page-data .about .a4 .data-card__body { height: calc(260 * var(--px)); }

  .page-data .about .a4-lead { font-size: calc(15.282 * var(--px)); letter-spacing: calc(0.7641 * var(--px)); }
  .page-data .about .a4-main p { line-height: calc(40 * var(--px)); }
  .page-data .about .a4-l1 { font-size: calc(20.28 * var(--px)); }
  .page-data .about .a4-l2 { font-size: calc(31.2 * var(--px)); }
  .page-data .about .a4-l2 { top: calc(-3.5 * var(--px)); }
  .page-data .about .a4-l4 { margin-top: calc(18.3 * var(--px)); top: calc(-2.5 * var(--px)); }
  .page-data .about .a4-n { font-size: calc(78 * var(--px)); }
  .page-data .about .a4-u { font-size: calc(32.76 * var(--px)); }
  .page-data .about .a4-voice { border-radius: calc(7.8 * var(--px)); }
  .page-data .about .a4-vt {
    font-size: calc(10.5 * var(--px));
    letter-spacing: calc(0.525 * var(--px));
  }

  .page-data .about .a5 .data-card__body { height: calc(323.038 * var(--px)); }
  .page-data .about .a5-q1 { font-size: calc(12.333 * var(--px)); letter-spacing: calc(0.6166 * var(--px)); }
  .page-data .about .a5-q1 em { font-size: calc(15.416 * var(--px)); }
  .page-data .about .a5-q2 { font-size: calc(12.58 * var(--px)); letter-spacing: calc(0.629 * var(--px)); }
  .page-data .about .a5-q2 em { font-size: calc(15.725 * var(--px)); }
}