@charset 'UTF-8';

.u-mt0 {
  margin-top: 0 !important;
}

.u-mr0 {
  margin-right: 0 !important;
}

.u-mb0 {
  margin-bottom: 0 !important;
}

.u-ml0 {
  margin-left: 0 !important;
}

.u-mt5 {
  margin-top: 5px !important;
}

.u-mr5 {
  margin-right: 5px !important;
}

.u-mb5 {
  margin-bottom: 5px !important;
}

.u-ml5 {
  margin-left: 5px !important;
}

.u-mt10 {
  margin-top: 10px !important;
}

.u-mr10 {
  margin-right: 10px !important;
}

.u-mb10 {
  margin-bottom: 10px !important;
}

.u-ml10 {
  margin-left: 10px !important;
}

.u-mt15 {
  margin-top: 15px !important;
}

.u-mr15 {
  margin-right: 15px !important;
}

.u-mb15 {
  margin-bottom: 15px !important;
}

.u-ml15 {
  margin-left: 15px !important;
}

.u-mt20 {
  margin-top: 20px !important;
}

.u-mr20 {
  margin-right: 20px !important;
}

.u-mb20 {
  margin-bottom: 20px !important;
}

.u-ml20 {
  margin-left: 20px !important;
}

.u-mt25 {
  margin-top: 25px !important;
}

.u-mr25 {
  margin-right: 25px !important;
}

.u-mb25 {
  margin-bottom: 25px !important;
}

.u-ml25 {
  margin-left: 25px !important;
}

.u-mt30 {
  margin-top: 30px !important;
}

.u-mr30 {
  margin-right: 30px !important;
}

.u-mb30 {
  margin-bottom: 30px !important;
}

.u-ml30 {
  margin-left: 30px !important;
}

.u-mt35 {
  margin-top: 35px !important;
}

.u-mr35 {
  margin-right: 35px !important;
}

.u-mb35 {
  margin-bottom: 35px !important;
}

.u-ml35 {
  margin-left: 35px !important;
}

.u-mt40 {
  margin-top: 40px !important;
}

.u-mr40 {
  margin-right: 40px !important;
}

.u-mb40 {
  margin-bottom: 40px !important;
}

.u-ml40 {
  margin-left: 40px !important;
}

.u-mt45 {
  margin-top: 45px !important;
}

.u-mr45 {
  margin-right: 45px !important;
}

.u-mb45 {
  margin-bottom: 45px !important;
}

.u-ml45 {
  margin-left: 45px !important;
}

.u-mt50 {
  margin-top: 50px !important;
}

.u-mr50 {
  margin-right: 50px !important;
}

.u-mb50 {
  margin-bottom: 50px !important;
}

.u-ml50 {
  margin-left: 50px !important;
}

.u-mt55 {
  margin-top: 55px !important;
}

.u-mr55 {
  margin-right: 55px !important;
}

.u-mb55 {
  margin-bottom: 55px !important;
}

.u-ml55 {
  margin-left: 55px !important;
}

.u-mt60 {
  margin-top: 60px !important;
}

.u-mr60 {
  margin-right: 60px !important;
}

.u-mb60 {
  margin-bottom: 60px !important;
}

.u-ml60 {
  margin-left: 60px !important;
}

.u-mt65 {
  margin-top: 65px !important;
}

.u-mr65 {
  margin-right: 65px !important;
}

.u-mb65 {
  margin-bottom: 65px !important;
}

.u-ml65 {
  margin-left: 65px !important;
}

.u-mt70 {
  margin-top: 70px !important;
}

.u-mr70 {
  margin-right: 70px !important;
}

.u-mb70 {
  margin-bottom: 70px !important;
}

.u-ml70 {
  margin-left: 70px !important;
}

.u-mt75 {
  margin-top: 75px !important;
}

.u-mr75 {
  margin-right: 75px !important;
}

.u-mb75 {
  margin-bottom: 75px !important;
}

.u-ml75 {
  margin-left: 75px !important;
}

.u-mt80 {
  margin-top: 80px !important;
}

.u-mr80 {
  margin-right: 80px !important;
}

.u-mb80 {
  margin-bottom: 80px !important;
}

.u-ml80 {
  margin-left: 80px !important;
}

.u-mt85 {
  margin-top: 85px !important;
}

.u-mr85 {
  margin-right: 85px !important;
}

.u-mb85 {
  margin-bottom: 85px !important;
}

.u-ml85 {
  margin-left: 85px !important;
}

.u-mt90 {
  margin-top: 90px !important;
}

.u-mr90 {
  margin-right: 90px !important;
}

.u-mb90 {
  margin-bottom: 90px !important;
}

.u-ml90 {
  margin-left: 90px !important;
}

.u-mt95 {
  margin-top: 95px !important;
}

.u-mr95 {
  margin-right: 95px !important;
}

.u-mb95 {
  margin-bottom: 95px !important;
}

.u-ml95 {
  margin-left: 95px !important;
}

.u-mt100 {
  margin-top: 100px !important;
}

.u-mr100 {
  margin-right: 100px !important;
}

.u-mb100 {
  margin-bottom: 100px !important;
}

.u-ml100 {
  margin-left: 100px !important;
}

.u-pt0 {
  padding-top: 0 !important;
}

.u-pr0 {
  padding-right: 0 !important;
}

.u-pb0 {
  padding-bottom: 0 !important;
}

.u-pl0 {
  padding-left: 0 !important;
}

.u-pt5 {
  padding-top: 5px !important;
}

.u-pr5 {
  padding-right: 5px !important;
}

.u-pb5 {
  padding-bottom: 5px !important;
}

.u-pl5 {
  padding-left: 5px !important;
}

.u-pt10 {
  padding-top: 10px !important;
}

.u-pr10 {
  padding-right: 10px !important;
}

.u-pb10 {
  padding-bottom: 10px !important;
}

.u-pl10 {
  padding-left: 10px !important;
}

.u-pt15 {
  padding-top: 15px !important;
}

.u-pr15 {
  padding-right: 15px !important;
}

.u-pb15 {
  padding-bottom: 15px !important;
}

.u-pl15 {
  padding-left: 15px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pr20 {
  padding-right: 20px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-pl20 {
  padding-left: 20px !important;
}

.u-pt25 {
  padding-top: 25px !important;
}

.u-pr25 {
  padding-right: 25px !important;
}

.u-pb25 {
  padding-bottom: 25px !important;
}

.u-pl25 {
  padding-left: 25px !important;
}

.u-pt30 {
  padding-top: 30px !important;
}

.u-pr30 {
  padding-right: 30px !important;
}

.u-pb30 {
  padding-bottom: 30px !important;
}

.u-pl30 {
  padding-left: 30px !important;
}

.u-pt35 {
  padding-top: 35px !important;
}

.u-pr35 {
  padding-right: 35px !important;
}

.u-pb35 {
  padding-bottom: 35px !important;
}

.u-pl35 {
  padding-left: 35px !important;
}

.u-pt40 {
  padding-top: 40px !important;
}

.u-pr40 {
  padding-right: 40px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

.u-pl40 {
  padding-left: 40px !important;
}

.u-pt45 {
  padding-top: 45px !important;
}

.u-pr45 {
  padding-right: 45px !important;
}

.u-pb45 {
  padding-bottom: 45px !important;
}

.u-pl45 {
  padding-left: 45px !important;
}

.u-pt50 {
  padding-top: 50px !important;
}

.u-pr50 {
  padding-right: 50px !important;
}

.u-pb50 {
  padding-bottom: 50px !important;
}

.u-pl50 {
  padding-left: 50px !important;
}

.u-pt55 {
  padding-top: 55px !important;
}

.u-pr55 {
  padding-right: 55px !important;
}

.u-pb55 {
  padding-bottom: 55px !important;
}

.u-pl55 {
  padding-left: 55px !important;
}

.u-pt60 {
  padding-top: 60px !important;
}

.u-pr60 {
  padding-right: 60px !important;
}

.u-pb60 {
  padding-bottom: 60px !important;
}

.u-pl60 {
  padding-left: 60px !important;
}

.u-pt65 {
  padding-top: 65px !important;
}

.u-pr65 {
  padding-right: 65px !important;
}

.u-pb65 {
  padding-bottom: 65px !important;
}

.u-pl65 {
  padding-left: 65px !important;
}

.u-pt70 {
  padding-top: 70px !important;
}

.u-pr70 {
  padding-right: 70px !important;
}

.u-pb70 {
  padding-bottom: 70px !important;
}

.u-pl70 {
  padding-left: 70px !important;
}

.u-pt75 {
  padding-top: 75px !important;
}

.u-pr75 {
  padding-right: 75px !important;
}

.u-pb75 {
  padding-bottom: 75px !important;
}

.u-pl75 {
  padding-left: 75px !important;
}

.u-pt80 {
  padding-top: 80px !important;
}

.u-pr80 {
  padding-right: 80px !important;
}

.u-pb80 {
  padding-bottom: 80px !important;
}

.u-pl80 {
  padding-left: 80px !important;
}

.u-pt85 {
  padding-top: 85px !important;
}

.u-pr85 {
  padding-right: 85px !important;
}

.u-pb85 {
  padding-bottom: 85px !important;
}

.u-pl85 {
  padding-left: 85px !important;
}

.u-pt90 {
  padding-top: 90px !important;
}

.u-pr90 {
  padding-right: 90px !important;
}

.u-pb90 {
  padding-bottom: 90px !important;
}

.u-pl90 {
  padding-left: 90px !important;
}

.u-pt95 {
  padding-top: 95px !important;
}

.u-pr95 {
  padding-right: 95px !important;
}

.u-pb95 {
  padding-bottom: 95px !important;
}

.u-pl95 {
  padding-left: 95px !important;
}

.u-pt100 {
  padding-top: 100px !important;
}

.u-pr100 {
  padding-right: 100px !important;
}

.u-pb100 {
  padding-bottom: 100px !important;
}

.u-pl100 {
  padding-left: 100px !important;
}

.u-wAuto {
  width: auto !important;
}

.u-w5 {
  width: 5% !important;
}

.u-w10 {
  width: 10% !important;
}

.u-w15 {
  width: 15% !important;
}

.u-w20 {
  width: 20% !important;
}

.u-w25 {
  width: 25% !important;
}

.u-w30 {
  width: 30% !important;
}

.u-w35 {
  width: 35% !important;
}

.u-w40 {
  width: 40% !important;
}

.u-w45 {
  width: 45% !important;
}

.u-w50 {
  width: 50% !important;
}

.u-w55 {
  width: 55% !important;
}

.u-w60 {
  width: 60% !important;
}

.u-w65 {
  width: 65% !important;
}

.u-w70 {
  width: 70% !important;
}

.u-w75 {
  width: 75% !important;
}

.u-w80 {
  width: 80% !important;
}

.u-w85 {
  width: 85% !important;
}

.u-w90 {
  width: 90% !important;
}

.u-w95 {
  width: 95% !important;
}

.u-w100 {
  width: 100% !important;
}

.u-fs11 {
  font-size: 11px !important;
  font-size: 1.1rem;
}

.u-fs12 {
  font-size: 12px !important;
  font-size: 1.2rem;
}

.u-fs13 {
  font-size: 13px !important;
  font-size: 1.3rem;
}

.u-fs14 {
  font-size: 14px !important;
  font-size: 1.4rem;
}

.u-fs15 {
  font-size: 15px !important;
  font-size: 1.5rem;
}

.u-fs16 {
  font-size: 16px !important;
  font-size: 1.6rem;
}

.u-fs17 {
  font-size: 17px !important;
  font-size: 1.7rem;
}

.u-fs18 {
  font-size: 18px !important;
  font-size: 1.8rem;
}

.u-fs19 {
  font-size: 19px !important;
  font-size: 1.9rem;
}

.u-fs20 {
  font-size: 20px !important;
  font-size: 2rem;
}

.u-fs21 {
  font-size: 21px !important;
  font-size: 2.1rem;
}

.u-fs22 {
  font-size: 22px !important;
  font-size: 2.2rem;
}

.u-fs23 {
  font-size: 23px !important;
  font-size: 2.3rem;
}

.u-fs24 {
  font-size: 24px !important;
  font-size: 2.4rem;
}

.u-fs25 {
  font-size: 25px !important;
  font-size: 2.5rem;
}

.u-fs26 {
  font-size: 26px !important;
  font-size: 2.6rem;
}

.u-fs27 {
  font-size: 27px !important;
  font-size: 2.7rem;
}

.u-fs28 {
  font-size: 28px !important;
  font-size: 2.8rem;
}

.u-fs29 {
  font-size: 29px !important;
  font-size: 2.9rem;
}

.u-fs30 {
  font-size: 30px !important;
  font-size: 3rem;
}

.u-fs31 {
  font-size: 31px !important;
  font-size: 3.1rem;
}

.u-fs32 {
  font-size: 32px !important;
  font-size: 3.2rem;
}

.u-fs33 {
  font-size: 33px !important;
  font-size: 3.3rem;
}

.u-fs34 {
  font-size: 34px !important;
  font-size: 3.4rem;
}

.u-fs35 {
  font-size: 35px !important;
  font-size: 3.5rem;
}

.u-textbold {
  font-weight: 700 !important;
}

.u-emp {
  color: #c00;
}

.u-clear {
  clear: both !important;
}

.u-ac {
  text-align: center !important;
}

.u-ar {
  text-align: right !important;
}

.u-al {
  text-align: left !important;
}

.u-vm {
  vertical-align: middle !important;
}

.u-vt {
  vertical-align: top !important;
}

.u-vb {
  vertical-align: bottom !important;
}

.u-isSP {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .u-isPC {
    display: none !important;
  }

  .u-isSP {
    display: inline-block !important;
  }
}

/*-------------------------------------------*/
/* 画像+テキスト モジュール
/*-------------------------------------------*/
/* l_flex, r_flex は common.css にある前提です */

/* 画像を囲むfigureタグのスタイル */
.text-image-module__figure {
  /* border: 1px solid #e0e0e0; */
  /* 細い枠線 */
  /* padding: 15px; */
  /* 内側の余白 */
  background-color: #fff;
  /* 背景色を白に */
  border-radius: 8px;
  /* 角丸 */
  margin: 0;
  /* 既存のmarginをリセット */
  max-width: 300px;
  /* 画像エリアの最大幅 */
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
  /* 影を追加 */
}

/* 画像自体のスタイル */
.text-image-module__figure img {
  display: block;
  /* 画像下の余分な余白を削除 */
  width: 100%;
  height: auto;
}

/* キャプションのスタイル */
.text-image-module__figure figcaption {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
  text-align: left;
  line-height: 1.6;
}

/* テキスト側のpタグのスタイル */
.l_flex_left p,
.r_flex_left p {
  margin: 0 0 1.5em 0;
  /* 段落間のマージン */
}

.l_flex_left p:last-child,
.r_flex_left p:last-child {
  margin-bottom: 0;
  /* 最後の段落のマージンを削除 */
}

/* スマートフォンでの表示調整 (common.cssに同様の記述があれば不要です) */
@media screen and (max-width: 767px) {
  /* l_flex と r_flex は common.css で縦積みになる想定 */

  /* 画像エリアの下に余白を追加 */
  .l_flex_right,
  .r_flex_right {
    margin-bottom: 20px;
  }
}

/*-------------------------------------------*/
/* 1カラム画像モジュール
/*-------------------------------------------*/

/* 画像モジュールの基本スタイル */
.image-module {
  margin: 40px auto;
  /* 上下の余白と、左右autoで中央揃え */
  padding: 0;
  max-width: 100%;
  /* 親要素からはみ出ないようにする */
  border: 1px solid #e0e0e0;
  /* ご参考のデザインに合わせた枠線 */
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.image-module img {
  display: block;
  /* 画像下の余分な余白を削除 */
  width: 100%;
  /* 親要素(figure)の幅いっぱいに広がる */
  height: auto;
  /* 縦横比を維持 */
}

/* キャプションのスタイル */
.image-module figcaption {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
  text-align: center;
  line-height: 1.6;
}

/* --- 画像幅を指定するクラス --- */
.image-w1000 {
  max-width: 1000px;
}

.image-w900 {
  max-width: 900px;
}

.image-w800 {
  max-width: 800px;
}

.image-w700 {
  max-width: 700px;
}

.image-w600 {
  max-width: 600px;
}

.image-w500 {
  max-width: 500px;
}

.image-w400 {
  max-width: 400px;
}

/* スマートフォンでの表示調整 */
@media screen and (max-width: 767px) {
  .image-module {
    margin: 30px 15px;
    /* 左右に余白を設ける */
  }
}

/*-------------------------------------------*/
/* 画像+テキスト モジュール (サイズ調整対応)
/*-------------------------------------------*/

/* 既存の160px指定を、このモジュールに限りリセット */
.l_flex .text-image-module__figure,
.r_flex .text-image-module__figure {
  width: auto;
  /* 固有の幅指定を解除 */
  max-width: 100%;
  /* 親要素からはみ出ないようにする */
}

/* --- 画像サイズを指定する修飾子クラス --- */
/* 親要素の .l_flex や .r_flex に追加して使用します */

/* 【小サイズ】画像幅 約240px */
.l_flex--image-s .l_flex_right,
.r_flex--image-s .r_flex_right {
  flex-basis: 240px;
  /* 画像エリアの基本幅を指定 */
  flex-shrink: 0;
  /* コンテンツが長くても縮まないようにする */
}

/* 【中サイズ】画像幅 約320px（デフォルト） */
.l_flex--image-m .l_flex_right,
.r_flex--image-m .r_flex_right {
  flex-basis: 320px;
  flex-shrink: 0;
}

/* 【大サイズ】画像幅 約400px */
.l_flex--image-l .l_flex_right,
.r_flex--image-l .r_flex_right {
  flex-basis: 400px;
  flex-shrink: 0;
}

.l_flex_left .l_flex_right {
  margin-left: 0px;
}

/* スマートフォンでの表示調整 */
@media screen and (max-width: 767px) {

  /* スマホではflex-basisを解除し、flexコンテナの幅いっぱいに広がるようにする */
  .l_flex--image-s .l_flex_right,
  .r_flex--image-s .r_flex_right,
  .l_flex--image-m .l_flex_right,
  .r_flex--image-m .r_flex_right,
  .l_flex--image-l .l_flex_right,
  .r_flex--image-l .r_flex_right {
    flex-basis: auto;
  }
}

/* l_flex/r_flex 内に置かれた .image-module 専用の上書きスタイル */
.l_flex .image-module,
.r_flex .image-module {
  width: auto;
  /* common.cssの width: 160px をリセット */
  margin: 20px 0;
  /* 上下の余白を調整 */
}

/*-------------------------------------------*/
/* モジュール修飾子 (Modifier)
/*-------------------------------------------*/

/* .image-moduleの枠線や背景をなくすためのクラス */
.image-module--frameless {
  border: none;
  background-color: transparent;
  padding: 0;
  box-shadow: none;
}

/* l_flex/r_flex の子要素の中身を中央揃えにするクラス */
.l_flex_left--centered,
.l_flex_right--centered,
.r_flex_left--centered,
.r_flex_right--centered {
  text-align: center;
  /* 中の要素を水平中央に配置 */
}

/* --centeredクラス内の.image-moduleを中央揃えにするための指定 */
.l_flex_left--centered .image-module,
.r_flex_left--centered .image-module {
  display: inline-block;
  /* text-align:center を有効にするため */
  /* 既存のmargin: autoをリセット */
  margin-left: 0;
  margin-right: 0;
}

/* r_flex（画像が右）のレイアウトで使用されるテキストブロックの左マージンをリセット */
.r_flex .l_flex_left {
  margin-left: 0;
}

/* l_flex/r_flexを親要素の幅いっぱいに広げるための修飾子クラス */
.full-width {
  width: 100%;
  /* 幅を95%から100%に上書き */
  margin-left: 0;
  /* 左右のautoマージンをリセット */
  margin-right: 0;
  /* 左右のautoマージンをリセット */
}

/*-------------------------------------------*/
/* メインビジュアル テキスト調整
/*-------------------------------------------*/

/* PC表示のスタイル */
.main-visual-text h1 {
  font-size: 38px;
  /* PCでのh1のサイズを明示的に指定 */
  margin-bottom: 20px;
  line-height: 1.5;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  /* 画像上の視認性向上のための影 */
}

.main-visual-text .inner_midasi_sub {
  font-size: 20px;
  /* PCでのサブタイトルのサイズを指定 */
  line-height: 1.8;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* スマートフォン向けの調整 */
@media screen and (max-width: 767px) {
  .main-visual-text h1 {
    font-size: 26px;
    /* スマホでのh1サイズを調整 */
    line-height: 1.4;
    margin-bottom: 15px;
  }

  /* メインビジュアル内のh1サブタイトルのスマホ用スタイル */
  .main-visual-text h1 .sub-h1 {
    font-size: 0.6em;
    /* 親のh1に対して60%のサイズに */
    font-weight: normal;
    /* 太字を解除して少し弱める */
    display: inline-block;
    /* 上の行とのマージンを確保するため */
    margin-top: 0.5em;
    /* 上の行との間に少し余白を追加 */
  }

  .main-visual-text .inner_midasi_sub {
    font-size: 15px;
    /* スマホでのサブタイトルサイズを調整 */
    line-height: 1.7;
    /* font-weight: normal; を追加しても良いかもしれません */
  }
}

/*-------------------------------------------*/
/* 治療前準備セクションのスタイル (修正版)
/*-------------------------------------------*/

/* セクション全体に左右のパディングを設定 */
section.prep-section {
  text-align: left;
  padding: 0 30px;
  /* PC表示時の左右パディング */
}

/* r_flex内の画像とテキストブロックの上端を揃える */
.prep-section .r_flex {
  align-items: flex-start;
}

/* h4見出しのスタイル */
section.prep-section h4 {
  display: flex;
  /* flexboxレイアウトに変更 */
  align-items: center;
  /* 丸数字とテキストを垂直中央に揃える */
  font-size: 17px;
  font-weight: bold;
  color: #333;
  border-bottom: none;
  /* 下線を削除 */
  padding: 8px 15px;
  /* 内側の余白を調整 */
  margin-bottom: 1.5em;
  background-color: #fff4b3;
  /* ★淡い黄色で全体を塗りつぶし */
  border-radius: 4px;
  /* 角を少し丸くする */
}

/* h4内の丸数字のスタイル */
.prep-section h4 .marker-circle {
  display: inline-flex;
  /* flexアイテムとして振る舞う */
  align-items: center;
  justify-content: center;
  background-color: #ffd700;
  /* 丸は元の黄色を維持 */
  color: #333;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
  /* コンテンツが長くても縮まないように */
}

/* 変更後 */
section.prep-section ul.prep-list {
  list-style: disc outside;
  padding-left: 25px;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 20px;
  /* ★追加: 左側に余白を追加してインデント */
  margin-right: 20px;
  /* ★追加: 右側にも余白を追加 */
}

section.prep-section ul.prep-list li {
  margin-bottom: 0.3em;
  /* ★行間を狭く調整 */
  padding-left: 5px;
}

/* 入れ子になったリストのスタイル */
section.prep-section ul.prep-list-nested {
  list-style: circle outside;
  padding-left: 20px;
  margin-top: 0.3em;
  /* ★上下の余白を詰める */
  margin-bottom: 0.3em;
  /* ★上下の余白を詰める */
}

/* 最後の補足文のスタイル */
.prep-section .note-box {
  margin-top: 20px;
}

/* スマートフォン向けの調整 */
@media screen and (max-width: 767px) {
  section.prep-section {
    padding: 0 15px;
    /* ★スマホ表示時の左右パディング */
  }
}

/*-------------------------------------------*/
/* 治療前準備セクション アイコンサイズ調整用
/*-------------------------------------------*/

/* 親要素の上端揃え */
.r_flex--icon-size {
  align-items: flex-start;
}

/* 変更後 */
.r_flex--icon-size .r_flex_right {
  flex-basis: 180px;
  flex-shrink: 0;
  margin-left: 30px;
  margin-right: 100px;
  /* ★追加: PC表示時に右側の余白を100px確保 */
}

/* スマートフォンでの表示調整 */
@media screen and (max-width: 767px) {
  .r_flex--icon-size .r_flex_right {
    flex-basis: auto;
    /* 幅指定を解除 */
    max-width: 150px;
    /* スマホでは最大幅を150pxに制限 */
    margin-left: auto;
    /* 中央揃え */
    margin-right: auto;
    margin-bottom: 20px;
    /* 縦積みになった際のリストとの余白 */
  }

  /* --- ▼ 治療前準備セクション スマホ用調整 --- */

  /* h4見出し下の余白を詰める */
  section.prep-section h4 {
    margin-bottom: 1em;
    /* 既存の1.5emから縮小 */
  }

  /* リスト全体のインデントを浅くし、上下の余白も調整 */
  section.prep-section ul.prep-list {
    margin-top: 1em;
    /* h4との間の余白を調整 */
    margin-left: 0;
    /* PC用のインデント(margin-left: 20px)をリセット */
    margin-right: 0;
    /* PC用のインデント(margin-right: 20px)をリセット */
    padding-left: 20px;
    /* 黒丸自体のインデントを少し浅くする */
  }

  /* 黒丸とテキストの間の余白を詰める */
  section.prep-section ul.prep-list li {
    padding-left: 2px;
    /* 既存の5pxから縮小 */
  }

  /* 入れ子になったリストのインデントも合わせて調整 */
  section.prep-section ul.prep-list-nested {
    padding-left: 18px;
    /* 既存の20pxから縮小 */
  }

  /* --- ▲ 治療前準備セクション スマホ用調整 --- */

}

/* 変更後（より詳細度を上げて、確実に上書きするコード） */
section.prep-section .r_flex_left ul.prep-list {
  margin-top: 0;
}

/* 治療前準備セクション内のstrongタグに太字スタイルを再適用 */
.prep-section strong {
  font-weight: bold;
}

/*-------------------------------------------*/
/* アプリ紹介モジュール (最終調整版)
/*-------------------------------------------*/
.app-showcase {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 10px 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

  /* ★追加: 幅を750pxに設定し、中央寄せにする */
  max-width: 750px;
  /* レスポンシブを考慮しmax-widthを使用 */
  /* width: 100%; */
  /* 親要素の幅に合わせて縮小できるように */
  margin: 1.5em auto;
}

.app-showcase__icon {
  flex-shrink: 0;
}

.app-showcase__icon img {
  width: 138px;
  height: auto;
  border-radius: 12px;
}

.app-showcase__info {
  flex-grow: 1;
  text-align: left;
}

/* ★修正: h4のセレクタを以前と同様に詳細度を上げて強化 */
section.prep-section .app-showcase h4.app-showcase__title {
  /* 親のh4スタイルをリセット */
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 15px;

  /* 本来のスタイル */
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.app-showcase__badges {
  display: flex;
  align-items: center;
  gap: 15px;
}

.app-showcase__badges a {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.3s;
}

.app-showcase__badges a:hover {
  opacity: 0.8;
}

.app-badge--apple {
  height: 78px;
  width: auto;
}

.app-badge--google {
  height: 100px;
  width: auto;
}

/* スマートフォン向けの調整 */
@media screen and (max-width: 767px) {
  .app-showcase {
    flex-direction: column;
    text-align: center;
    max-width: 100%;
    gap: 20px;
    padding: 25px;
  }

  .app-showcase__icon img {
    width: 100px;
  }

  .app-showcase__info {
    text-align: center;
    width: 100%;
  }

  section.prep-section .app-showcase h4.app-showcase__title {
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 0;
  }

  .app-showcase__badges {
    flex-direction: column;
    /* ★横並びを縦積みに変更 */
    gap: 15px;
    /* 縦に並んだボタン間の余白を指定 */
  }

  /* .app-showcase__badges a の flex 指定は削除 */
  .app-badge--apple {
    height: 48px;
  }

  .app-badge--google {
    height: 60px;
  }
}

/* ----------------------------------------------------
   いびき治療（ナイトレーズプレミアム）誘導バナー
   202X.XX.XX 追加
---------------------------------------------------- */
.nightlase-banner-wrapper {
  width: 96%;
  max-width: 1000px;
  margin: 40px auto;
  /* 上下の余白 */
  box-sizing: border-box;
}

.nightlase-banner {
  display: block;
  background-color: #f4fcf2;
  /* 清潔感のある薄い緑 */
  border: 5px solid #5eb93a;
  /* テーマカラーの緑 */
  border-radius: 12px;
  text-decoration: none !important;
  /* common.cssの下線を打ち消し */
  color: #333 !important;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.nightlase-banner:hover {
  background-color: #fff;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  opacity: 1;
  /* common.cssのhover透過を打ち消し */
}

.nightlase-banner__inner {
  display: flex;
  align-items: center;
  padding: 20px;
}

/* 画像エリア */
.nightlase-banner__img {
  width: 35%;
  flex-shrink: 0;
  margin-right: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.nightlase-banner__img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* 画像の高さが足りない場合に備えてアスペクト比固定 */
  aspect-ratio: 4 / 3;
}

/* テキストエリア */
.nightlase-banner__content {
  flex-grow: 1;
  text-align: left;
}

/* NEWラベル */
.nightlase-banner__label {
  display: inline-block;
  background-color: #ff6666;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  vertical-align: middle;
}

/* タイトル */
.nightlase-banner__title {
  font-size: 24px;
  font-weight: bold;
  color: #5eb93a;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.nightlase-banner__title .sub {
  display: block;
  font-size: 16px;
  color: #333;
  font-weight: normal;
  margin-bottom: 5px;
}

/* 説明文 */
.nightlase-banner__desc {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 15px 0 !important;
  /* common.cssのマージン調整 */
  color: #555;
}

/* 詳しくはこちらボタン風 */
.nightlase-banner__btn {
  display: inline-block;
  background-color: #5eb93a;
  color: #fff;
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.nightlase-banner:hover .nightlase-banner__btn {
  background-color: #4ca02b;
}

/* ----------------------------------------------------
   SP用レスポンシブ (767px以下)
---------------------------------------------------- */
@media screen and (max-width: 767px) {
  .nightlase-banner-wrapper {
    width: 94%;
    margin: 30px auto;
  }

  .nightlase-banner__inner {
    flex-direction: column;
    /* 縦並び */
    padding: 20px 15px;
  }

  .nightlase-banner__img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .nightlase-banner__img img {
    aspect-ratio: 16 / 9;
    /* スマホでは少し横長に */
  }

  .nightlase-banner__content {
    width: 100%;
    text-align: center;
    /* スマホでは中央揃え */
  }

  .nightlase-banner__title {
    font-size: 20px;
  }

  .nightlase-banner__title .sub {
    font-size: 14px;
  }

  .nightlase-banner__desc {
    font-size: 13px;
    text-align: left;
    /* 説明文は左揃えの方読みやすい場合が多い */
  }
}