@charset "utf-8";

/*----- price -----*/
/* #campaign_limit {
  background: url(../img/price/ribbon.webp) no-repeat center bottom;
  background-size: contain;
  height: 6.5rem;
  padding-top: 1rem;
  display: block;
} */
#price_notes {
  background: #0000004d;
  border: 1px solid #ffffffb3;
  color: #fff;
  padding: 2.5rem;
}


/*----- case_mov -----*/
#case_mov_bg {
  top: -2rem;
}
#case_mov_box {
  width: 48rem;
}
.case_mov_box {
  width: 50rem;
}
#case_mov_slider {
  width: 75rem;
  margin-left: -3rem;
}
#case_mov_slider .slick-slide {
  margin: 0 1.5rem;
}


/*----- case -----*/
.case_slider_wrap {
  min-width: 0; /* Flexbox内でSlickが潰れるのを防ぐ */
  width: 48rem;
}
/* 例：元の .case_slider_box に幅指定があった場合、新しい親要素に引き継がせます */
.data_slider_wrap {
  width: 27rem;
}

/* スライダー時の余白調整（Slickが生成する枠線のチラつき防止など） */
.js_data_slider .white_bg {
  line-height: 1;
  padding: 13rem 2rem 2rem;
  width: 27rem;
  min-height: 60rem;
}
.case_slider_box p {
  font-size: 2.0rem;
  margin-bottom: 1.8rem;
}
#case .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3rem;
  margin: 0 auto;
  width: 75rem;
  z-index: 1;
}

.data_case {
  border-bottom: 1px solid #00000026;
  padding-bottom: 2.4rem;
  margin-bottom: 3rem;
}
.data_case span {
  display: block;
  margin-bottom: 0.6rem;
}

/*----- youtube -----*/
#youtube .js_slider {
  width: 75rem;
  margin-left: -5rem;
}
#youtube .slick-slide  {
  margin: 0 1.5rem;
}
#yt_before_ttl {
  color: #666;
}
#yt_after_ttl {
  color: #af7e75;
}
#yt_after {
  background: url(../img/youtube/bg.webp) no-repeat center bottom;
  background-size: contain;
  height: 122.4rem;
  padding: 12rem 2rem 3rem 2rem;
}

/*----- doctor -----*/
#doctor_li li:last-child {
  margin-right: -3rem;
}
#doctor_icon_li li {
  margin: 1.5rem;
}
#doctor_box {
  margin-top: -3rem;
}
#doctor_dl dt {
  border-right: 1px solid #fff;
  padding-right: 1.5rem;
  margin-right: 1.5rem;
}
#doctor_ttl {
  border-bottom: 1px solid #fff;
}

/*----- clinic -----*/
#clinic_table th {
  width: 18rem;
  padding: 1.5rem;
  background: #222;
  color: #fff;
  border-right: 2px solid #d4d4d6;
  border-bottom: 2px solid #d4d4d6;
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}
#clinic_table td {
  width: 46.8rem;
  padding: 1.5rem;
  background: #fff;
  border-bottom: 2px solid #d4d4d6;
  vertical-align: middle;
}
#map_container {
  max-width: 100%;
}
#map_container iframe {
  vertical-align: bottom;
  aspect-ratio: 16/9;
  max-width: 100%;
}


/*----- voice -----*/
#voice {
  background: url(../img/voice/bg.webp) no-repeat center top;
  background-size: cover;
}
#voice01 {
  width: 47.8rem;
  display: block;
  margin-bottom: 1.5rem;
  /* background: #fff;
  border-radius: 0.9rem;
  padding: 1.5rem;
  position: relative; */
}
#voice02 {
  width: 49.6rem;
  display: block;
  margin-bottom: 1.5rem;
  margin-left: auto;
  /* background: #fff;
  border-radius: 0.9rem;
  padding: 1.5rem;
  position: relative; */
}
#voice03 {
  width: 44.6rem;
  display: block;
  margin-bottom: 3rem;
  margin-left: 3rem;
  /* background: #fff;
  border-radius: 0.9rem;
  padding: 1.5rem;
  position: relative; */
}
/* 
#voice01::after, #voice02::after, #voice03::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 2.1rem;
  position: absolute;
  bottom: 3rem;
  background: url(../img/voice/bln_l.webp) no-repeat center top;
  background-size: cover;
}
#voice01::after, #voice03::after {
  right: -2.6rem;
}
#voice02::after {
  left: -2.6rem;
  background: url(../img/voice/bln_r.webp) no-repeat center top;
  background-size: cover;
} */

/*----- reason -----*/
#reason_list li {
  margin:0 2.2rem 2rem;
}

/*----- modal -----*/
/* モーダル全体（初期状態は非表示） */
#image_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

/* 黒い半透明の背景 */
#modal_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

/* ★新規追加：画像と閉じるボタンを囲む親要素 */
#modal_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;       /* 横幅の最大値 */
  height: 90vh;     /* 縦幅の最大値（画面の高さの90%） */
  display: flex;
  flex-direction: column; /* 縦並びにする */
  justify-content: center;
  align-items: center;
  gap: 1.5rem;      /* 画像と×ボタンの間のスキマ */
  pointer-events: none; /* 背景クリックを邪魔しないようにする魔法のコード */
  z-index: 10000;
}

/* 真ん中に表示する拡大画像 */
#modal_img {
  max-width: 100%;
  /* ボタン(5rem)とスキマ(1.5rem)の分を引いて、画像が画面からはみ出さないように計算 */
  max-height: calc(100% - 6.5rem); 
  object-fit: contain;
  cursor: pointer;
  pointer-events: auto; /* imgのクリック判定を復活させる */
}

/* 閉じるボタン */
#modal_close {
  color: #fff;
  font-size: 5rem;
  font-family: sans-serif;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto; /* ボタンのクリック判定を復活させる */
  transition: opacity 0.3s;
}

#modal_close:hover {
  opacity: 0.7;
}

/* ※今まで書いていたメディアクエリでの #modal_close の top 調整はすべて削除してOKです！ */

/* クリックできることが分かるようにカーソルを指マークに */
#reason_list img {
  cursor: pointer;
  transition: opacity 0.3s;
}
#reason_list img:hover {
  opacity: 0.8;
}

/*----- scar -----*/
#scar video {
  width: 75rem;
}
#scar_ttl01 {
  position: absolute;
  left: 1.5rem;
  top: 4.5rem;
}
#scar02 {
  background: url(../img/scar/img02.webp) no-repeat center top;
  background-size: cover;
}
#scar02_ttl {
  background: #ffffffb3;
  line-height: 1.3;
  letter-spacing: 0.6rem;
  padding: 1rem 0;
}

.scar03_box img {
  border-radius: 1.5rem;
  position: relative;
}
.scar03_box div {
  margin-top: -3rem;
  border-radius: 1.5rem;
}

/*----- footer -----*/
footer {
  background: #222222;
}

#copyright {
  border-top: 1px solid #ffffff3d;
  padding-top: 3rem;
  margin-top: 3rem;
}