@charset "UTF-8";
/* B案 06 症例・実例紹介（PC 3列グリッド / SP は main.js .js-slider の1枚スライダー） */
.sec-bcases {
  line-break: strict;
  --u: min(1px, calc(100vw / 1920));
  --pu: var(--u);
  --bcases-c-bg: #F8F8F8;
  --bcases-c-bg-0: rgba(248, 248, 248, 0);
  --bcases-c-text: #333333;
  --bcases-c-no: #244496;
  --bcases-c-before: #444444;
  --bcases-c-after: #B2995F;
  --bcases-c-white: #FFFFFF;
  --bcases-c-white-85: rgba(255, 255, 255, 0.85);
  --bcases-c-line: #DDDDDD;
  --bcases-c-dot: #E2E1E2;
  --bcases-c-dot-active: #EE8926;
  --bcases-line: calc(1 * var(--u));
  position: relative;
  overflow: hidden;
  background: var(--bcases-c-bg);
  color: var(--bcases-c-text);
  font-feature-settings: normal;
}

/* 背景: 右上の術者写真 + 左/下のフェード（section 右端基準） */
.bcases-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bcases-bg-clip {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(673.59 * var(--u));
  height: calc(1569 * var(--u));
  overflow: hidden;
}
.bcases-bg-photo img {
  position: absolute;
  top: 0;
  left: calc(-167.41 * var(--u));
  width: calc(858.655 * var(--u));
  max-width: none;
  height: calc(1569 * var(--u));
}
.bcases-bg-fade {
  position: absolute;
}
.bcases-bg-fade--left {
  top: 0;
  right: calc(181.59 * var(--u));
  width: calc(492 * var(--u));
  height: calc(1125.906 * var(--u));
  background: linear-gradient(to right, var(--bcases-c-bg), var(--bcases-c-bg-0));
}
.bcases-bg-fade--bottom {
  top: calc(664.25 * var(--u));
  right: calc(-3.59 * var(--u));
  width: calc(868.709 * var(--u));
  height: calc(581.492 * var(--u));
  background: linear-gradient(to bottom, var(--bcases-c-bg-0), var(--bcases-c-bg));
}

.bcases-inner {
  position: relative;
  max-width: calc(1920 * var(--u));
  margin: 0 auto;
  padding: calc(93.55 * var(--u)) 0 calc(111.35 * var(--u));
}
.bcases-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: min(calc(48 * var(--u)), calc(8.3333px + 2.0660vw));
  line-height: 1.6;
  text-align: center;
  font-feature-settings: normal;
}
.bcases-lead {
  margin: calc(33.75 * var(--u)) 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: min(calc(18 * var(--u)), calc(13.3333px + 0.2431vw));
  line-height: 2;
  text-align: center;
}
.bcases-brsp { display: none; }

.bcases-slider { position: relative; }
.bcases-track {
  display: grid;
  grid-template-columns: repeat(3, calc(449.28 * var(--u)));
  column-gap: calc(60.72 * var(--u)); /* Figma PC 06: 列の間隔 510（143.76 / 653.76 / 1163.76） */
  row-gap: calc(73.16 * var(--u));
  margin: calc(100.55 * var(--u)) 0 0 calc(143.42 * var(--u));
  padding: 0;
  list-style: none;
}
.bcases-card { margin: 0; }
.bcases-no,
.bcases-name {
  margin: 0;
  padding-left: calc(11 * var(--u));
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: normal;
}
.bcases-no {
  color: var(--bcases-c-no);
  font-size: min(calc(32 * var(--u)), calc(11.0000px + 1.0938vw));
}
.bcases-name {
  margin-top: calc(19.57 * var(--u));
  font-size: min(calc(24 * var(--u)), calc(12.3333px + 0.6076vw));
}

/* Before / After 写真（各 224.64×206 の枠を Figma のマスク位置で切り抜き） */
.bcases-photos {
  display: flex;
  margin-top: calc(23.66 * var(--u));
}
.bcases-ph {
  position: relative;
  flex: 0 0 auto;
  width: calc(224.64 * var(--pu));
  height: calc(206 * var(--pu));
  margin: 0;
  overflow: hidden;
}
.bcases-ph img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.bcases-item--1 .bcases-ph--before img { left: calc(-30.98 * var(--pu)); top: calc(-1.74 * var(--pu)); width: calc(319.1 * var(--pu)); height: calc(212.2 * var(--pu)); }
.bcases-item--1 .bcases-ph--after img { left: calc(-63.58 * var(--pu)); top: calc(-20.49 * var(--pu)); width: calc(333.36 * var(--pu)); height: calc(237.87 * var(--pu)); transform: rotate(1.79deg); }
.bcases-item--2 .bcases-ph--before img { left: calc(-128.94 * var(--pu)); top: calc(-1.74 * var(--pu)); width: calc(347.33 * var(--pu)); height: calc(242.48 * var(--pu)); }
.bcases-item--2 .bcases-ph--after img { left: calc(-129.51 * var(--pu)); top: calc(-8.01 * var(--pu)); width: calc(343.68 * var(--pu)); height: calc(261.42 * var(--pu)); }
.bcases-item--3 .bcases-ph--before img { left: calc(-6.34 * var(--pu)); top: calc(-36.87 * var(--pu)); width: calc(402.82 * var(--pu)); height: calc(267.96 * var(--pu)); }
.bcases-item--3 .bcases-ph--after img { left: calc(-6.23 * var(--pu)); top: calc(-34.36 * var(--pu)); width: calc(364.61 * var(--pu)); height: calc(260.56 * var(--pu)); }
.bcases-item--4 .bcases-ph--before img { left: calc(-140.08 * var(--pu)); top: calc(-13.74 * var(--pu)); width: calc(386.11 * var(--pu)); height: calc(256.77 * var(--pu)); }
.bcases-item--4 .bcases-ph--after img { left: calc(-136.7 * var(--pu)); top: calc(-20.6 * var(--pu)); width: calc(376.32 * var(--pu)); height: calc(268.72 * var(--pu)); transform: rotate(-0.33deg); }
.bcases-item--5 .bcases-ph--before img { left: calc(-76.37 * var(--pu)); top: calc(-25.86 * var(--pu)); width: calc(355.39 * var(--pu)); height: calc(236.29 * var(--pu)); }
.bcases-item--5 .bcases-ph--after img { left: calc(-45.85 * var(--pu)); top: calc(-7.93 * var(--pu)); width: calc(306.36 * var(--pu)); height: calc(218.77 * var(--pu)); transform: rotate(0.83deg); }
.bcases-item--6 .bcases-ph--before img { left: calc(-76.2 * var(--pu)); top: calc(-19.38 * var(--pu)); width: calc(376.51 * var(--pu)); height: calc(250.41 * var(--pu)); }
.bcases-item--6 .bcases-ph--after img { left: calc(-53.87 * var(--pu)); top: calc(-20.61 * var(--pu)); width: calc(325.47 * var(--pu)); height: calc(232.43 * var(--pu)); transform: rotate(1.79deg); }
.bcases-ba {
  position: absolute;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  height: calc(37.59 * var(--pu));
  padding: calc(5.22 * var(--pu)) calc(10 * var(--pu)) 0;
  color: var(--bcases-c-white);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: min(calc(24 * var(--u)), calc(12.3333px + 0.6076vw));
  line-height: 1;
  white-space: nowrap;
}
.bcases-ph--before .bcases-ba { background: var(--bcases-c-before); }
.bcases-ph--after .bcases-ba {
  width: calc(97 * var(--pu));
  background: var(--bcases-c-after);
  text-align: center;
}

.bcases-desc {
  min-height: 3.2em;
  margin: calc(17.07 * var(--u)) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(calc(16 * var(--u)), calc(13.6667px + 0.1215vw));
  line-height: 1.6;
}
.bcases-item:nth-child(n+4) .bcases-desc {
  min-height: 6.4em;
  margin-top: calc(18.17 * var(--u));
}

/* 治療期間・費用（罫線 #DDD、行ごとに Figma の位置） */
.bcases-spec {
  width: calc(448.71 * var(--u));
  margin: calc(9.53 * var(--u)) 0 0 calc(1.16 * var(--u));
  border-bottom: var(--bcases-line) solid var(--bcases-c-line);
}
.bcases-item:nth-child(n+4) .bcases-spec { margin-top: calc(10.32 * var(--u)); }
.bcases-row {
  display: flex;
  align-items: flex-start;
  border-top: var(--bcases-line) solid var(--bcases-c-line);
}
.bcases-dt,
.bcases-dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: min(calc(18 * var(--u)), calc(13.3333px + 0.2431vw));
  line-height: 2;
}
.bcases-dt {
  flex: 0 0 auto;
  white-space: nowrap;
}
.bcases-dd { min-width: 0; }
.bcases-row--period {
  min-height: calc(41.13 * var(--u));
  padding: calc(1.88 * var(--u)) 0 0;
}
.bcases-row--period .bcases-dt { width: calc(175.29 * var(--u)); }
.bcases-row--cost { min-height: calc(100.68 * var(--u)); }
.bcases-item:nth-child(n+4) .bcases-row--cost { min-height: calc(155.75 * var(--u)); }
.bcases-row--cost .bcases-dt { padding-top: calc(32.04 * var(--u)); }
.bcases-item:nth-child(n+4) .bcases-row--cost .bcases-dt { padding-top: calc(50.93 * var(--u)); }
.bcases-item--1 .bcases-row--cost .bcases-dt { width: calc(59.52 * var(--u)); }
.bcases-item--2 .bcases-row--cost .bcases-dt { width: calc(70.45 * var(--u)); }
.bcases-item--3 .bcases-row--cost .bcases-dt { width: calc(59.51 * var(--u)); }
.bcases-item--4 .bcases-row--cost .bcases-dt { width: calc(77.18 * var(--u)); }
.bcases-item--5 .bcases-row--cost .bcases-dt { width: calc(89.65 * var(--u)); }
.bcases-item--6 .bcases-row--cost .bcases-dt { width: calc(65.46 * var(--u)); }
.bcases-item--1 .bcases-row--cost .bcases-dd { padding-top: calc(7.9 * var(--u)); }
.bcases-item--2 .bcases-row--cost .bcases-dd,
.bcases-item--3 .bcases-row--cost .bcases-dd { padding-top: calc(15.99 * var(--u)); }
.bcases-item--4 .bcases-row--cost .bcases-dd { padding-top: calc(14.44 * var(--u)); }
.bcases-item--5 .bcases-row--cost .bcases-dd { padding-top: calc(39.39 * var(--u)); }
.bcases-item--6 .bcases-row--cost .bcases-dd { padding-top: calc(39.39 * var(--u)); }
.bcases-price {
  margin: 0;
  white-space: nowrap;
}
.bcases-price--sub { margin-top: calc(7.53 * var(--u)); }
.bcases-note {
  margin: calc(-3.07 * var(--u)) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  white-space: nowrap;
}

/* 副作用・リスク（既存 TOP の cases-risk と同文・同体裁。グリッド幅に揃える） */
.bcases-risk {
  width: calc(1469.28 * var(--u));
  margin: calc(56 * var(--u)) 0 0 calc(143.42 * var(--u));
  padding: calc(28 * var(--u)) calc(36 * var(--u));
  border: var(--bcases-line) solid var(--bcases-c-line);
  background: var(--bcases-c-white-85);
}
.bcases-risk-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: min(calc(20 * var(--u)), calc(11.3333px + 0.4514vw));
  line-height: 1.6;
  color: var(--bcases-c-text);
}
.bcases-risk-text {
  margin: calc(10 * var(--u)) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(calc(15 * var(--u)), calc(13.3333px + 0.0868vw));
  line-height: 1.9;
  color: var(--bcases-c-text);
  text-wrap: pretty;
}

/* SP 用の矢印・ドットは PC で非表示 */
.bcases-arrow,
.bcases-dots { display: none; }

@media (max-width: 767px) {
  .sec-bcases {
    --u: calc(100vw / 390);
    --pu: calc(var(--u) * 0.71216);
    --bcases-line: calc(0.712 * var(--u));
  }
  .bcases-bg-clip {
    width: calc(163.58 * var(--u));
    height: calc(569.7 * var(--u));
  }
  .bcases-bg-photo img {
    top: calc(-0.38 * var(--u));
    left: calc(-9.21 * var(--u));
    width: calc(188.793 * var(--u));
    height: calc(564.375 * var(--u));
  }
  .bcases-bg-fade--left {
    top: calc(-2.5 * var(--u)); /* Figma SP 08: 3587:6330 top -2.5 / h 572.5 */
    right: calc(26 * var(--u));
    width: calc(139 * var(--u));
    height: calc(572.5 * var(--u));
  }
  .bcases-bg-fade--bottom {
    top: calc(430.44 * var(--u));
    right: calc(-1.38 * var(--u));
    width: calc(376.742 * var(--u));
    height: calc(139 * var(--u));
  }
  .bcases-inner { padding: calc(45.03 * var(--u)) 0 calc(50.5 * var(--u)); }
  .bcases-title { font-size: calc(32 * var(--u)); }
  .bcases-lead {
    margin-top: calc(1.05 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .bcases-brsp { display: inline; }

  .bcases-slider { margin-top: calc(40.42 * var(--u)); }
  .bcases-viewport {
    width: calc(321 * var(--u));
    margin-left: calc(36.08 * var(--u));
    overflow: hidden;
  }
  .bcases-track {
    display: flex;
    align-items: flex-start; /* 各スライドは自分の高さ（トラックの高さは 06_cases.html 末尾の script が表示中スライドに合わせる） */
    margin: 0;
    column-gap: 0;
    row-gap: 0;
  }
  .bcases-item {
    flex: 0 0 100%;
    min-width: 0;
  }
  .bcases-no,
  .bcases-name { padding-left: calc(7.5 * var(--u)); }
  .bcases-no { font-size: calc(24 * var(--u)); }
  .bcases-name {
    margin-top: calc(12.42 * var(--u));
    font-size: calc(20 * var(--u));
    white-space: normal;
  }
  /* 長い名前は「・」の後でだけ折り返す（単語の途中で切らない） */
  .bcases-name-seg { display: inline-block; }
  .bcases-photos { margin-top: calc(14.5 * var(--u)); }
  .bcases-ba { font-size: calc(17.096 * var(--u)); }

  .bcases-desc,
  .bcases-item:nth-child(n+4) .bcases-desc {
    min-height: 0;
    margin-top: calc(10.55 * var(--u));
    font-size: calc(13 * var(--u));
  }
  .bcases-spec,
  .bcases-item:nth-child(n+4) .bcases-spec {
    width: calc(320.04 * var(--u));
    margin: calc(15.35 * var(--u)) 0 0 calc(0.85 * var(--u));
  }
  .bcases-dt,
  .bcases-dd { font-size: calc(14 * var(--u)); }
  .bcases-row--period {
    min-height: calc(41.65 * var(--u));
    padding-top: calc(6.05 * var(--u));
  }
  .bcases-row--period .bcases-dt { width: calc(140.27 * var(--u)); }
  .bcases-row--cost,
  .bcases-item:nth-child(n+4) .bcases-row--cost { min-height: calc(88.79 * var(--u)); }
  .bcases-row--cost .bcases-dt,
  .bcases-item:nth-child(n+4) .bcases-row--cost .bcases-dt,
  .bcases-item--1 .bcases-row--cost .bcases-dt,
  .bcases-item--2 .bcases-row--cost .bcases-dt,
  .bcases-item--3 .bcases-row--cost .bcases-dt {
    width: calc(51.29 * var(--u)); /* PC の症例別の幅を SP に持ち込まない（Figma SP 08: 費用欄は 88.2 から） */
    padding-top: calc(25.97 * var(--u));
  }
  .bcases-row--cost .bcases-dd,
  .bcases-item--1 .bcases-row--cost .bcases-dd,
  .bcases-item--2 .bcases-row--cost .bcases-dd,
  .bcases-item--3 .bcases-row--cost .bcases-dd,
  .bcases-item--4 .bcases-row--cost .bcases-dd,
  .bcases-item--5 .bcases-row--cost .bcases-dd,
  .bcases-item--6 .bcases-row--cost .bcases-dd { padding: calc(8.87 * var(--u)) 0 calc(12 * var(--u)); }
  .bcases-price { white-space: normal; }
  .bcases-note {
    margin-top: calc(-4.87 * var(--u));
    font-size: calc(13 * var(--u));
    white-space: normal;
  }

  .bcases-arrow {
    position: absolute;
    top: calc(214.98 * var(--u));
    display: block;
    width: calc(14.508 * var(--u));
    height: calc(50.261 * var(--u));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .bcases-arrow img {
    display: block;
    width: calc(17.508 * var(--u));
    max-width: none;
    height: calc(53.262 * var(--u));
    margin: calc(-1.5 * var(--u));
  }
  .bcases-arrow--prev { left: calc(9.75 * var(--u)); }
  .bcases-arrow--next { right: calc(6.74 * var(--u)); }
  .bcases-arrow--next img { transform: rotate(180deg); }
  .bcases-arrow[disabled] {
    opacity: .35;
    cursor: default;
  }
  .bcases-dots {
    display: flex;
    justify-content: center;
    gap: calc(9 * var(--u));
    margin: calc(33.51 * var(--u)) 0 0;
    padding: 0;
    list-style: none;
  }
  .bcases-dots-item { display: flex; }
  .bcases-dot {
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bcases-c-dot);
    cursor: pointer;
  }
  .bcases-dot.bcases-dot--active { background: var(--bcases-c-dot-active); }
  .bcases-risk {
    width: calc(342 * var(--u));
    margin: calc(36 * var(--u)) auto 0;
    padding: calc(20 * var(--u)) calc(18 * var(--u));
  }
  .bcases-risk-title { font-size: calc(17 * var(--u)); }
  .bcases-risk-text {
    font-size: calc(15 * var(--u));
    line-height: 1.85;
  }
}