@charset "UTF-8";
/* B案 08 pc_cta（Figma PC 3734:6782 / SP 3734:6857） */
.sec-bpccta {
  line-break: strict;
  --u: min(1px, calc(100vw / 1920));
  --bpccta-orange: #f0831e;
  --bpccta-orange-deep: #ee7800;
  --bpccta-navy: #244496;
  --bpccta-dark: #404448;
  --bpccta-line: #aaaaaa;
  --bpccta-gray: #666666;
  --bpccta-white: #ffffff;
  --bpccta-veil: rgba(255, 255, 255, 0.7);
  --bpccta-shadow: rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: calc(106 * var(--u));
  background: var(--bpccta-white);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-feature-settings: normal;
}
:where(.sec-bpccta) :where(p, ul, h2, h3) { margin: 0; }
:where(.sec-bpccta) :where(ul) { padding: 0; list-style: none; }
.bpccta-sp,
.bpccta-brsp { display: none; }

/* ---------- 装飾（背景写真・ぼかし・斜めの面・人物） ---------- */
.bpccta-deco,
.bpccta-photo-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(1920 * var(--u));
  margin-left: calc(-960 * var(--u));
  pointer-events: none;
}
.bpccta-deco--sp { display: none; }
.bpccta-bg {
  position: absolute;
  left: calc(-333.79 * var(--u));
  top: calc(-13.01 * var(--u));
  width: calc(2533.191 * var(--u));
  height: calc(1252.012 * var(--u));
  overflow: hidden;
}
.bpccta-bg img {
  position: absolute;
  left: -7.77%;
  top: -32.09%;
  width: 97.8%;
  height: 131.89%;
  max-width: none;
}
.bpccta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bpccta-veil);
}
.bpccta-blur {
  position: absolute;
  left: calc(195 * var(--u));
  top: calc(150.68 * var(--u));
  width: calc(571 * var(--u));
  height: calc(476.879 * var(--u));
  background: var(--bpccta-white);
  filter: blur(calc(20 * var(--u)));
  opacity: 0.72;
}
.bpccta-dark {
  position: absolute;
  left: calc(930.79 * var(--u));
  top: calc(-199.26 * var(--u));
  width: calc(1238.24 * var(--u));
  height: calc(1499.895 * var(--u));
  background: var(--bpccta-dark);
  transform: rotate(16deg);
}
.bpccta-photo {
  position: absolute;
  left: calc(734.87 * var(--u));
  top: calc(50.79 * var(--u));
  width: calc(450.262 * var(--u));
  height: calc(692.918 * var(--u));
  overflow: hidden;
}
.bpccta-photo img {
  position: absolute;
  left: -28.07%;
  top: -17.3%;
  width: 155.74%;
  height: 117.38%;
  max-width: none;
}

/* ---------- 上段：見出し・リード／相談導線 ---------- */
.bpccta-inner {
  position: relative;
  width: calc(1920 * var(--u));
  margin: 0 auto;
}
.bpccta-top {
  display: grid;
  grid-template-columns: calc(448.869 * var(--u)) calc(479.098 * var(--u));
  column-gap: calc(429.131 * var(--u));
  align-items: start;
  min-height: calc(613 * var(--u));
  padding: calc(124.16 * var(--u)) 0 0 calc(286 * var(--u));
}
.bpccta-title {
  font-family: var(--font-heading);
  font-size: min(calc(40 * var(--u)), calc(9.6667px + 1.5799vw));
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  font-feature-settings: normal;
}
.bpccta-title-sm { font-size: 1em; }
.bpccta-rule {
  display: block;
  height: 1px;
  margin-top: calc(24.13 * var(--u));
  background: var(--bpccta-line);
}
.bpccta-lead {
  margin-top: calc(37.27 * var(--u));
  font-size: min(calc(18 * var(--u)), calc(13.3333px + 0.2431vw));
  font-weight: 300;
  line-height: 2;
  white-space: nowrap;
}
.bpccta-actions {
  margin-top: calc(34.88 * var(--u));
  color: var(--bpccta-white);
}
.bpccta-act-title {
  width: calc(446.228 * var(--u));
  font-size: min(calc(24 * var(--u)), calc(12.3333px + 0.6076vw));
  font-weight: 500;
  line-height: 1.6;
}
.bpccta-act-title--orange {
  width: auto;
  margin-top: calc(23 * var(--u));
  color: var(--bpccta-orange);
}
.bpccta-act-text {
  width: calc(446.228 * var(--u));
  margin-top: calc(7.95 * var(--u));
  font-size: min(calc(16 * var(--u)), calc(13.6667px + 0.1215vw));
  line-height: 1.6;
}
.bpccta-act-text--access {
  width: calc(447.098 * var(--u));
  margin-top: calc(8.455 * var(--u));
  font-size: min(calc(15 * var(--u)), calc(13.8333px + 0.0608vw));
}
.bpccta-act-rule {
  display: block;
  height: 1px;
  margin-top: calc(22 * var(--u));
  background: var(--bpccta-white);
}
.bpccta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(56 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--bpccta-orange);
  color: var(--bpccta-white);
  font-size: min(calc(20 * var(--u)), calc(13.0000px + 0.3646vw));
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
}
.bpccta-btn--consult { margin-top: calc(20.05 * var(--u)); }
.bpccta-btn--access {
  margin-top: calc(30.258 * var(--u));
  background: var(--bpccta-white);
  color: var(--bpccta-navy);
}
.bpccta-arrow {
  position: absolute;
  left: calc(429.35 * var(--u));
  top: calc(17.161 * var(--u));
  width: calc(38.3406 * var(--u));
  height: calc(12.839 * var(--u));
  max-width: none;
}
.bpccta-btn--access .bpccta-arrow {
  left: calc(431.35 * var(--u));
  top: calc(20.19 * var(--u));
}
.bpccta-btn--pamphlet .bpccta-arrow {
  left: calc(430.85 * var(--u));
  top: calc(20.19 * var(--u));
}

/* ---------- 下段：パンフレット枠 ---------- */
.bpccta-pamphlet {
  position: relative;
  display: flex;
  align-items: flex-start;
  column-gap: calc(65.04 * var(--u));
  width: calc(1440 * var(--u));
  height: calc(338 * var(--u));
  margin-left: calc(240 * var(--u));
  padding-left: calc(441.96 * var(--u));
  border: 1px solid var(--bpccta-line);
  background: var(--bpccta-white);
}
/* 扇形に重ねた冊子（Figma の回転枠：内寸の要素を外枠中心に置いて回転） */
.bpccta-fan {
  position: absolute;
  left: 0;
  top: 0;
}
.bpccta-fan-img {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}
.bpccta-fan-img--steps {
  left: calc(311.874 * var(--u));
  top: calc(160.723 * var(--u));
  width: calc(98.939 * var(--u));
  height: calc(139.776 * var(--u));
  transform: rotate(11.86deg);
}
.bpccta-fan-img--bone {
  left: calc(215.005 * var(--u));
  top: calc(140.3745 * var(--u));
  width: calc(98.856 * var(--u));
  height: calc(139.776 * var(--u));
  transform: rotate(11.86deg);
}
.bpccta-fan-img--qa {
  left: calc(146.127 * var(--u));
  top: calc(86.803 * var(--u));
  width: calc(98.939 * var(--u));
  height: calc(139.776 * var(--u));
  transform: rotate(-11.39deg);
}
.bpccta-fan-img--features {
  left: calc(243.248 * var(--u));
  top: calc(67.2445 * var(--u));
  width: calc(98.856 * var(--u));
  height: calc(139.776 * var(--u));
  transform: rotate(-11.39deg);
}
.bpccta-fan-img--cover {
  left: calc(77.5505 * var(--u));
  top: calc(38.826 * var(--u));
  width: calc(166.706 * var(--u));
  height: calc(235.712 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) var(--bpccta-shadow);
  transform: rotate(-7.54deg);
}
.bpccta-pam-body {
  position: relative;
  flex: none;
  width: calc(354 * var(--u));
  margin-top: calc(30.63 * var(--u));
}
.bpccta-pam-title {
  font-family: var(--font-heading);
  font-weight: 500;
  white-space: nowrap;
  font-feature-settings: normal;
}
.bpccta-pam-l1 {
  display: block;
  font-size: min(calc(36 * var(--u)), calc(10.3333px + 1.3368vw));
  line-height: 1.2;
}
.bpccta-pam-l2 {
  display: block;
  margin-top: calc(0.33 * var(--u));
  font-size: min(calc(36 * var(--u)), calc(10.3333px + 1.3368vw));
  line-height: 1.2;
}
.bpccta-pam-free {
  color: var(--bpccta-orange-deep);
  font-size: min(calc(40 * var(--u)), calc(9.6667px + 1.5799vw));
}
.bpccta-pam-de { font-size: min(calc(24 * var(--u)), calc(12.3333px + 0.6076vw)); }
/* Figma PC 08 / SP 10: 見出しは文字ごとの詰め（3745:8562 / 8564、SP 3745:8653 / 3757:5491。PC・SP とも同じ em 比） */
.bpccta-kn10 { letter-spacing: -.1em; }
.bpccta-kn12 { letter-spacing: -.12em; }
.bpccta-kn16 { letter-spacing: -.16em; }
.bpccta-kn19 { letter-spacing: -.19em; }
.bpccta-kn27 { letter-spacing: -.27em; }
.bpccta-kn30 { letter-spacing: -.3em; }
.bpccta-pam-sub {
  margin-top: calc(15.43 * var(--u));
  font-size: min(calc(18 * var(--u)), calc(13.3333px + 0.2431vw));
  font-weight: 300;
  line-height: 1.8;
  white-space: nowrap;
}
.bpccta-pam-note {
  margin-top: calc(28.22 * var(--u));
  padding: calc(7.2 * var(--u)) calc(8 * var(--u));
  border: 1px dashed var(--bpccta-gray);
  font-size: min(calc(16 * var(--u)), calc(13.6667px + 0.1215vw));
  line-height: 1.8;
  white-space: nowrap;
}
.bpccta-pam-side {
  position: relative;
  flex: none;
  width: calc(554.5 * var(--u));
  margin-top: calc(19.11 * var(--u));
}
.bpccta-thumbs {
  display: flex;
  align-items: flex-start;
  column-gap: calc(15 * var(--u));
}
/* 画像枠とキャプションを同じセルに重ね、Figma の余白で位置を合わせる */
.bpccta-thumb {
  display: inline-grid;
  grid-template: max-content / max-content;
  place-items: start;
  flex: none;
}
.bpccta-thumb > * { grid-area: 1 / 1; }
.bpccta-thumb-img {
  display: block;
  position: relative;
  border: 1px solid var(--bpccta-line);
}
.bpccta-thumb-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.bpccta-thumb-cap {
  display: block;
  font-family: var(--font-heading);
  font-size: min(calc(16 * var(--u)), calc(13.6667px + 0.1215vw));
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.bpccta-thumb--a .bpccta-thumb-img { width: calc(117.034 * var(--u)); height: calc(165.479 * var(--u)); margin-left: calc(11.31 * var(--u)); }
.bpccta-thumb--a .bpccta-thumb-cap { margin-top: calc(169.76 * var(--u)); }
.bpccta-thumb--b .bpccta-thumb-img { width: calc(117.531 * var(--u)); height: calc(166.045 * var(--u)); }
.bpccta-thumb--b .bpccta-thumb-cap { margin-top: calc(170.33 * var(--u)); margin-left: calc(17.17 * var(--u)); }
.bpccta-thumb--c .bpccta-thumb-img { width: calc(120.006 * var(--u)); height: calc(168.303 * var(--u)); }
.bpccta-thumb--c .bpccta-thumb-cap { margin-top: calc(174.28 * var(--u)); margin-left: calc(10.3 * var(--u)); }
.bpccta-thumb--d .bpccta-thumb-img { width: calc(117.532 * var(--u)); height: calc(166.045 * var(--u)); margin-left: calc(7.83 * var(--u)); }
.bpccta-thumb--d .bpccta-thumb-cap { margin-top: calc(169.2 * var(--u)); }
.bpccta-btn--pamphlet {
  width: calc(479.098 * var(--u));
  margin: calc(20.07 * var(--u)) 0 0 calc(30 * var(--u));
}

/* ==================== SP ==================== */
@media (max-width: 767px) {
  .sec-bpccta {
    --u: calc(100vw / 390);
    --bpccta-veil: rgba(255, 255, 255, 0.88);
    padding-bottom: calc(81 * var(--u));
  }
  .bpccta-pc,
  .bpccta-brpc { display: none; }
  .bpccta-sp,
  .bpccta-brsp { display: revert; }

  .bpccta-deco,
  .bpccta-photo-wrap {
    width: calc(390 * var(--u));
    margin-left: calc(-195 * var(--u));
  }
  .bpccta-deco--sp { display: block; }
  .bpccta-bg {
    left: calc(-258.44 * var(--u));
    top: calc(-47 * var(--u));
    width: calc(1310.484 * var(--u));
    height: calc(647.697 * var(--u));
  }
  .bpccta-blur,
  .bpccta-dark { display: none; }
  .bpccta-photo {
    left: calc(172 * var(--u));
    top: calc(195.69 * var(--u));
    width: calc(249.801 * var(--u));
    height: calc(404.259 * var(--u));
  }
  .bpccta-photo img {
    left: -34.68%;
    width: 163.78%;
  }
  .bpccta-poly {
    position: absolute;
    left: calc(-26.19 * var(--u));
    top: calc(471 * var(--u));
    width: calc(470 * var(--u));
    height: calc(577.914 * var(--u));
    background: var(--bpccta-dark);
    clip-path: polygon(0 calc(64 * var(--u)), 100% 0, 100% 100%, 0 100%);
  }
  .bpccta-band {
    position: absolute;
    left: calc(-8.9 * var(--u));
    top: calc(1023 * var(--u));
    width: calc(405.703 * var(--u));
    height: calc(807 * var(--u));
    background: var(--bpccta-dark);
  }

  .bpccta-inner { width: calc(390 * var(--u)); }
  .bpccta-top {
    display: block;
    min-height: 0;
    padding: calc(57.9 * var(--u)) 0 0;
  }
  .bpccta-intro {
    width: calc(342 * var(--u));
    margin-left: calc(23.81 * var(--u));
  }
  .bpccta-title {
    font-size: calc(32 * var(--u));
    text-align: center;
  }
  .bpccta-title-sm { font-size: calc(24 * var(--u)); }
  .bpccta-lead {
    font-size: calc(16 * var(--u));
    white-space: normal;
  }
  .bpccta-lead--1 { margin-top: calc(17.11 * var(--u)); }
  .bpccta-lead--2 {
    width: calc(198.5 * var(--u));
    margin-top: 0;
  }
  .bpccta-actions {
    width: calc(342 * var(--u));
    margin: calc(104.25 * var(--u)) 0 0 calc(24 * var(--u));
  }
  .bpccta-act-title,
  .bpccta-act-text,
  .bpccta-act-text--access { width: auto; }
  .bpccta-act-title { font-size: calc(20 * var(--u)); }
  .bpccta-act-title--orange { margin-top: calc(24 * var(--u)); }
  .bpccta-act-text {
    margin-top: calc(8.455 * var(--u));
    font-size: calc(15 * var(--u));
  }
  .bpccta-act-rule { margin-top: calc(23 * var(--u)); }
  .bpccta-btn { font-size: calc(18 * var(--u)); }
  .bpccta-btn--consult { margin-top: calc(22.745 * var(--u)); }
  .bpccta-btn--access { margin-top: calc(30.258 * var(--u)); }
  .bpccta-arrow,
  .bpccta-btn--access .bpccta-arrow {
    left: calc(306.5 * var(--u));
    top: calc(22.031 * var(--u));
    width: calc(25.3797 * var(--u));
    height: calc(8.76101 * var(--u));
  }
  .bpccta-btn--access .bpccta-arrow { top: calc(22.311 * var(--u)); }

  /* パンフレット枠：縦 1 列に並べ替え */
  .bpccta-pamphlet {
    flex-direction: column;
    width: calc(342 * var(--u));
    height: auto;
    margin: calc(34.59 * var(--u)) 0 0 calc(24 * var(--u));
    padding: 0 0 calc(25 * var(--u));
    border-color: var(--bpccta-dark);
  }
  .bpccta-pam-body,
  .bpccta-pam-side { display: contents; }
  .bpccta-pam-title {
    order: 1;
    align-self: stretch;
    margin-top: calc(28.12 * var(--u));
    text-align: center;
  }
  .bpccta-pam-l1 { font-size: calc(26 * var(--u)); }
  .bpccta-pam-l2 {
    margin-top: calc(2.12 * var(--u));
    font-size: calc(27 * var(--u));
  }
  .bpccta-pam-free { font-size: calc(35 * var(--u)); }
  .bpccta-pam-de { font-size: calc(19 * var(--u)); }
  .bpccta-pam-sub {
    order: 2;
    align-self: stretch;
    margin-top: calc(10.77 * var(--u));
    font-size: calc(14 * var(--u));
    letter-spacing: -.03em; /* Figma SP 10: tracking -0.42px（3761:5496） */
    text-align: center;
    transform: translateX(calc(4.7 * var(--u))); /* Figma SP 10: 文の中心は 199.7（枠中心より右・3761:5496） */
  }
  .bpccta-fan {
    position: static;
    order: 3;
    margin: calc(17.97 * var(--u)) 0 0 calc(88.05 * var(--u));
  }
  .bpccta-fan-img { display: none; }
  .bpccta-fan-img--cover {
    position: static;
    display: block;
    width: calc(149.453 * var(--u));
    height: calc(211.317 * var(--u));
    transform: none;
  }
  .bpccta-thumbs {
    order: 4;
    justify-content: space-between;
    width: calc(285.02 * var(--u));
    margin: calc(30.47 * var(--u)) 0 0 calc(25.5 * var(--u));
  }
  .bpccta-thumb {
    display: block;
    place-items: normal;
    width: calc(80 * var(--u));
  }
  .bpccta-thumb--d { display: none; }
  .bpccta-thumb .bpccta-thumb-img {
    width: calc(80 * var(--u));
    margin-left: 0;
  }
  .bpccta-thumb--a .bpccta-thumb-img { height: calc(113.115 * var(--u)); }
  .bpccta-thumb--b .bpccta-thumb-img { height: calc(113.02 * var(--u)); }
  .bpccta-thumb--c .bpccta-thumb-img { height: calc(112.196 * var(--u)); }
  .bpccta-thumb .bpccta-thumb-cap {
    margin: calc(4.72 * var(--u)) calc(-40 * var(--u)) 0;
    font-size: calc(13 * var(--u));
  }
  .bpccta-thumb--b .bpccta-thumb-cap { transform: translateX(calc(5.4 * var(--u))); } /* Figma SP 10: 「治療の流れ」の中心は 198.4（3757:5486） */
  .bpccta-btn--pamphlet {
    order: 5;
    width: calc(289 * var(--u));
    margin: calc(41.3 * var(--u)) 0 0 calc(25.5 * var(--u));
    font-size: calc(15 * var(--u));
  }
  .bpccta-btn--pamphlet .bpccta-arrow {
    left: calc(252 * var(--u));
    top: calc(22.231 * var(--u));
  }
  .bpccta-pam-note {
    order: 6;
    width: calc(289 * var(--u));
    margin: calc(38 * var(--u)) 0 0 calc(25.5 * var(--u));
    padding: calc(8.4 * var(--u)) 0;
    font-size: calc(14 * var(--u));
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
  }
}
