/* =============================================================
   XERF（ザーフ）ページ 追加CSS
   ※ index.htmlの既存スタイル（base.css / cmn.css / local.css）を
     ベースに、既存クラスでカバーできない箇所のみを追加しています。
============================================================= */

/* --- お悩みリスト（このようなお悩みの方におすすめ！） --- */
.xerf_merit_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.xerf_merit_list li {
  width: calc(50% - 6px);
  box-sizing: border-box;
  background: #f7f5f1;
  border-radius: 8px;
  padding: 14px 16px 14px 40px;
  position: relative;
  font-size: 15px;
  line-height: 1.6;
}
.xerf_merit_list li:before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 14px;
  color: #9e8673;
  font-weight: bold;
  font-size: 16px;
}
@media (max-width: 640px) {
  .xerf_merit_list li {
    width: 100%;
  }
}

/* --- マルチ周波数カード（6.78MHz／2MHz） --- */
.xerf_freq_row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}
.xerf_freq_box {
  flex: 1 1 calc(50% - 8px);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e6e0d8;
  border-radius: 8px;
  overflow: hidden;
}
.xerf_freq_box h4 {
  margin: 0;
  background-color: #9e8673;
  color: #fff;
  font-weight: bold;
  padding: 12px 16px;
  font-size: 15px;
}
.xerf_freq_box p {
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .xerf_freq_box {
    flex: 1 1 100%;
  }
}

/* --- 効果タイムライン（施術直後／1〜3ヵ月／持続期間） --- */
.xerf_timeline {
  margin-top: 16px;
}
.xerf_timeline_item {
  border-left: 3px solid #9e8673;
  padding: 4px 0 4px 16px;
  margin-bottom: 18px;
}
.xerf_timeline_item:last-child {
  margin-bottom: 0;
}
.xerf_timeline_item h4 {
  margin: 0 0 8px 0;
  background: none;
  color: #9e8673;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
}
.xerf_timeline_item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* --- 未承認医療機器の表示 --- */
.xerf_notice_box {
  background: #f7f5f1;
  border: 1px solid #e0dbd2;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 30px 0;
  font-size: 13px;
  line-height: 1.8;
  color: #555;
}
.xerf_notice_box p {
  margin: 0;
}

/* --- 症例（写真なし）カード --- */
.xerf_case_simple {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

/* --- PC表示時に画像を70%サイズ・中央寄せ（左右マージンあり）にする --- */
.xerf_img_70 {
  display: block;
  width: 70%;
  max-width: 70%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .xerf_img_70 {
    width: 100%;
    max-width: 100%;
  }
}

/* --- 右寄せ画像の回り込みを解除し、後続の要素（比較テーブルなど）を
   画像の下に全幅で配置するためのクリア用要素 --- */
.xerf_clear {
  clear: both;
  margin-bottom: 16px;
}

/* --- 比較セクション：画像の高さに対してテキストを上下中央に配置（PC） --- */
.xerf_intro_flex {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 10px;
}
.xerf_intro_img {
  flex: 0 0 250px;
  order: 2;
}
.xerf_intro_img img {
  width: 100%;
  height: auto;
  display: block;
}
.xerf_intro_text {
  flex: 1;
  order: 1;
}
.xerf_intro_text p {
  margin: 0;
}
@media (max-width: 640px) {
  .xerf_intro_flex {
    display: block;
  }
  .xerf_intro_img {
    margin-bottom: 10px;
    order: initial;
  }
  .xerf_intro_text {
    order: initial;
  }
}


.hy_table td.hikaku_gr,
.hy_table td.hikaku_bl,
.hy_table td.hikaku_or {
  background: #fff;
}

/* --- 目次（PC表示）：文字数によって列がずれないよう3列グリッドで固定 --- */
@media (min-width: 641px) {
  .index_list_hyalulift ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
  }
  .index_list_hyalulift ul li {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
  }
}

/* お顔に合わせたパーソナル照射：スタッフ紹介ブロックは
   index.html内で既に定義されている .case_block_2412 / .dr_container /
   .dr_text / .dr_image をそのまま再利用しています。 */

/* --- 症例写真スライダー --- */
.xerf_case_slider {
  margin-top: 10px;
}
.xerf_case_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}
.xerf_case_prev,
.xerf_case_next {
  background: none;
  border: none;
  color: #9e8673;
  font-size: 30px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
}
.xerf_case_prev:hover,
.xerf_case_next:hover {
  color: #7a6656;
}
.xerf_case_dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.xerf_case_dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background-color 0.2s;
}
.xerf_case_dots span.active {
  background: #9e8673;
}
.xerf_case_slider {
  overflow: hidden;
}
.xerf_case_slider_track {
  display: flex;
  transition: transform 0.4s ease;
}
.xerf_case_slider_track > .case_block {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}