@charset "UTF-8";

/* ==================================================
   診療ページ共通モジュール (c-service-)
================================================== */

/* 1. 原因や特徴を並べるカード形式 */
.c-service-card-list {
  margin-top: 40px;
}
.c-service-card {
  display: flex;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.c-service-card__num {
  font-family: "Jost", sans-serif;
  font-size: 32px;
  color: var(--color-main);
  margin-right: 30px;
  position: relative;
}
/* 中略（既存のスタイルを c-service-card に書き換え） */

/* 2. 治療法などの定義リスト形式 */
.c-service-dl {
  margin-top: 40px;
  border-top: 1px solid #e0e0e0;
}
.c-service-dl__item {
  display: flex;
  align-items: flex-start;
  padding: 30px 0;
  border-bottom: 1px solid #e0e0e0;
}
.c-service-dl__term {
  flex: 0 0 30%;
  font-weight: bold;
  color: var(--color-accent);
  padding-left: 15px;
  position: relative;
  box-sizing: border-box;
}
.c-service-dl__term::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 4px;
  height: 16px;
  background-color: var(--color-accent);
}

.c-service-dl__desc {
  flex: 0 0 70%;
  margin: 0;
  box-sizing: border-box;
  padding-left: 10px; /* 左の項目との間に少しだけ余白を持たせる */
}

/* 3. 注意喚起・警告用パネル */
.c-service-panel--warning {
  background-color: #f9f9f9;
  border-left: 5px solid var(--color-accent);
  padding: 20px 25px;
  margin-bottom: 15px;
}
.c-service-panel__title {
  font-size: 18px;
  font-weight: bold;
}

/* 4. 医院からのメッセージボックス */
.c-service-message-box {
  background-color: #f4faec;
  padding: 40px 50px;
  border-radius: 8px;
  text-align: center;
}

.service_img {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .c-service-dl__item {
    flex-direction: column; /* スマホでは縦積みにする */
    padding: 20px 0;
  }
  .c-service-dl__term,
  .c-service-dl__desc {
    flex: 0 0 100%; /* スマホでは両方とも100%幅にする */
    padding-left: 0;
  }
  .c-service-dl__term {
    padding-left: 15px; /* 左の線の分の余白 */
    margin-bottom: 10px; /* 下のテキストとの隙間 */
  }
}

/* ==================================================
   診療ページ共通：特徴カード (c-service-feature)
================================================== */
/* ==================================================
   診療ページ共通：特徴カード (c-service-feature)
   ※見出しが枠線の上に乗るラベル風デザイン
================================================== */
.c-service-feature-list {
  display: flex;
  flex-direction: column;
  gap: 45px; /* ラベルがはみ出るため、カード間の隙間を広めに取る */
  margin-top: 30px;
}

.c-service-feature {
  background-color: #fff;
  border: 2px solid var(--color-main); /* メインカラーでしっかりとした枠線 */
  border-radius: 8px;
  padding: 35px 30px 25px; /* 上部にはみ出るラベルを考慮して上の余白を広めに */
  position: relative;
}

/* 枠線の上に飛び出すラベル風見出し */
.c-service-feature__title {
  position: absolute;
  top: -18px; /* 枠線の上に半分はみ出させる */
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent); /* 塗りつぶし */
  color: #fff; /* 白文字 */
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 8px 25px;
  border-radius: 30px; /* 角丸のラベル */
  line-height: 1.2;
  white-space: nowrap;
}

.c-service-feature__catch {
  font-size: 18px;
  font-weight: bold;
  color: #333; /* キャッチコピーは少し大きめの黒文字で強調 */
  margin-bottom: 12px;
  line-height: 1.5;
  text-align: center;
}

.c-service-feature__text {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-service-feature {
    padding: 30px 20px 20px;
  }
  .c-service-feature__title {
    font-size: 4vw;
    top: -15px;
    padding: 6px 15px;
    font-feature-settings: "palt";
  }
  .c-service-feature__catch {
    font-size: 15px;
  }
  .c-service-feature__text {
    font-size: 14px;
  }
}

/* ==================================================
   診療ページ共通：テキストブロック (c-service-text-block)
================================================== */
.c-service-text-block p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1.5em; /* 段落ごとの隙間を適度に空ける */
}

/* 最後の段落は下の余白をなくす */
.c-service-text-block p:last-child {
  margin-bottom: 0;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-service-text-block p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* ==================================================
   診療ページ共通：ドットボーダーリスト (c-service-dotted-list)
   ※キースブライトのデザインを踏襲
================================================== */
.c-service-dotted-list {
  margin-bottom: 30px;
}

.c-service-dotted-list__item {
  margin-bottom: 40px; /* 各項目の間をしっかりと空ける */
}
.c-service-dotted-list__item:last-child {
  margin-bottom: 0;
}

/* 画像を参考にした小見出しデザイン */
.c-service-dotted-list__title {
  font-size: 21px; /* 少し大きめのフォント */
  color: var(--color-accent);
  font-weight: 700; /* 画像は少し細めの印象のため normal に */
  letter-spacing: 0.1em; /* 少し文字間隔を空けて品良く */
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dotted var(--color-accent); /* 1pxのドットボーダー */
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-service-dotted-list__item {
    margin-bottom: 40px;
  }
  .c-service-dotted-list__title {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 15px;
  }
}

/* ==================================================
   汎用ユーティリティクラス（common.css または service.css上部へ）
================================================== */
.u-fw-b {
  font-weight: bold !important;
}
.u-mgb10 {
  margin-bottom: 10px !important;
}
.u-mgt20 {
  margin-top: 20px !important;
}

/* ==================================================
   診療ページ共通：テーブル (c-service-table)
================================================== */
.c-service-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.c-service-table th,
.c-service-table td {
  border: 1px solid #e0e0e0;
  padding: 20px;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
}

.c-service-table th {
  background-color: #f4faec; /* サイト共通の薄い緑背景 */
  font-weight: bold;
  color: var(--color-accent);
  width: 40%;
}

.c-service-table td {
  background-color: #fff;
  color: #333;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-service-table th,
  .c-service-table td {
    display: block; /* スマホでは縦積みにする */
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
  }
  .c-service-table th {
    border-bottom: none; /* 縦積み時の境界線被りを防ぐ */
  }
  .c-service-table td {
    margin-bottom: 15px; /* 行ごとの余白 */
    border-top: none;
  }
  .c-service-table tr:last-child td {
    margin-bottom: 0;
  }
}

/* ==================================================
   診療ページ共通：ブロックリスト (c-service-block-list)
   ※タイトルが色付き背景のバーになるデザイン
================================================== */
.c-service-block-list {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 各項目の間隔 */
}

.c-service-block-list__title {
  background-color: #eaf4f6; /* 画像に近い薄い水色・グレー系 */
  color: #333;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 20px;
  margin-bottom: 20px; /* タイトルバーと本文の隙間 */
  border-radius: 4px; /* 少しだけ角を丸くして柔らかい印象に（不要なら0に） */
}

.c-service-block-list__content {
  padding: 0 15px; /* 本文の左右に少しだけ余白を持たせる */
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-service-block-list__title {
    font-size: 16px;
    padding: 12px 15px;
    margin-bottom: 15px;
  }
  .c-service-block-list__content {
    padding: 0 10px;
  }
}

/* パネルリスト全体の余白 */
.c-service-panel-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* パネル内のテキストスタイル（追加） */
.c-service-panel__text {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-top: 12px;
  margin-bottom: 0;
}

/* 締めくくり・補足用のボックス（虫歯の p-decay-treatment-note を共通化） */
.c-service-note {
  margin-top: 10px;
  padding: 25px;
  background-color: #f1f9fa; /* 薄い水色 */
  border-radius: 8px;
}

.c-service-note p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

.c-service-box-grid {
  display: grid;
  /* PC：4カラム（項目数が多い場合は3でも可） */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.c-service-box-grid__item {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: box-shadow 0.3s ease;
}

.c-service-box-grid__item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.c-service-box-grid__title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-accent);
  margin-bottom: 15px;
  line-height: 1.4;
  /* タイトルの高さを揃える場合は指定 */
  min-height: 2.8em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding-left: 20px;
}

.c-service-box-grid__title::before {
  content: "";
  position: absolute;
  top: 2px; /* 位置の微調整 */
  left: 0;
  width: 20px; /* アイコンの表示サイズ */
  height: 20px;
  /* 画像パスは環境に合わせて調整してください */
  background: url("../img/common/check.png") no-repeat center center / contain;
}

.c-service-box-grid__text {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
  text-align: left;
}

/* タブレット版（1024px以下）：3カラム */
@media screen and (max-width: 1024px) {
  .c-service-box-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* スマホ版（768px以下）：1カラム */
@media screen and (max-width: 768px) {
  .c-service-box-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .c-service-box-grid__item {
    padding: 20px;
    text-align: left; /* SPは左揃えの方が見やすい場合が多い */
  }
  .c-service-box-grid__title {
    justify-content: flex-start;
    min-height: auto;
    margin-bottom: 0;
  }

  .c-service-box-grid__title::before {
    width: 18px;
    height: 18px;
    top: 3px;
  }
}

/* ==================================================
   診療ページ共通：メリット・デメリット比較 (c-service-comparison)
================================================== */
.c-service-comparison {
  display: flex;
  gap: 30px;
  margin-top: 40px;
}

.c-service-comparison__box {
  flex: 1;
  border: 4px solid #f0f0f0; /* 外枠：薄いグレー */
  padding: 30px;
  background-color: #fff;
}

.c-service-comparison__title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  color: #333;
}

/* タイトルの横にある水色のチップ（添付画像を再現） */
.c-service-comparison__title::before {
  content: "";
  width: 8px;
  height: 24px;
  background-color: var(--color-accent);
  margin-right: 12px;
}

.c-service-comparison__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-service-comparison__item {
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  line-height: 1.6;
  font-size: 15px;
}

/* 箇条書きの独自アイコンをCSSで作る（チェックを使わない手法） */
.c-service-comparison__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* メリット：◯アイコン */
.c-service-comparison__item--merit::before {
  content: "◯";
  background-color: #eaf6f7;
  color: var(--color-main);
}

/* デメリット：△アイコン */
.c-service-comparison__item--demerit::before {
  content: "△";
  background-color: #f5f5f5;
  color: #888;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-service-comparison {
    flex-direction: column;
    gap: 20px;
  }
  .c-service-comparison__box {
    padding: 20px;
  }
  .c-service-comparison__title {
    font-size: 18px;
    margin-bottom: 15px;
  }
}

/* ==================================================
   診療ページ共通：画像とテキストの横並び (c-service-media)
================================================== */
.c-service-media {
  display: flex;
  align-items: center; /* 上下中央揃え */
  gap: 60px; /* 画像とテキストの隙間 */
}

.c-service-media__img {
  width: 45%; /* 画像エリアの幅 */
}

.c-service-media__img img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 画像の角を少し丸くして柔らかい印象に */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 軽い影で立体感をプラス */
}

.c-service-media__body {
  width: 55%; /* テキストエリアの幅 */
}

.c-service-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px; /* ★ 縦15pxを25pxに変更（これでmargin-bottomと同じ効果になります） */
}

.c-service-check-list li {
  position: relative;
  padding-left: 28px; /* ★チェックアイコンを置くための左余白 */
  font-size: 15px;
  line-height: 1.6;
  color: #555; /* テキストカラーはお好みで */
}

.c-service-check-list li::before {
  content: "";
  position: absolute;
  top: 5px; /* アイコンの縦位置微調整 */
  left: 0;
  width: 15px; /* アイコンの幅 */
  height: 15px; /* アイコンの高さ */
  background: url("../img/common/check.png") no-repeat center center / contain;
}

/* SP版（スマホ表示） */
@media screen and (max-width: 768px) {
  .c-service-media {
    flex-direction: column; /* 縦積みに変更 */
    gap: 35px;
  }
  .c-service-media__img,
  .c-service-media__body {
    width: 100%;
  }
}

/* ==================================================
   診療ページ共通：よくあるご質問 (c-service-faq)
================================================== */
.c-service-faq {
  border-top: 2px solid var(--color-main);
}

.c-service-faq__item {
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 0;
}

.c-service-faq__q,
.c-service-faq__a {
  position: relative;
  padding-left: 40px;
  line-height: 1.6;
}

.c-service-faq__q {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  cursor: default;
}

.c-service-faq__a {
  font-size: 15px;
  color: #555;
  margin: 0;
}

/* QとAのアイコン */
.c-service-faq__q::before,
.c-service-faq__a::before {
  position: absolute;
  left: 0;
  top: -2px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.c-service-faq__q::before {
  content: "Q.";
  color: var(--color-main); /* クリニックのメインカラー */
}

.c-service-faq__a::before {
  content: "A.";
  color: var(
    --color-accent,
    #ff7f50
  ); /* アクセントカラー（オレンジやピンク系を想定） */
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-service-faq__q {
    font-size: 16px;
    padding-left: 30px;
  }
  .c-service-faq__a {
    font-size: 14px;
    padding-left: 30px;
  }
  .c-service-faq__q::before,
  .c-service-faq__a::before {
    font-size: 18px;
  }
}

/* ==================================================
   虫歯治療 (decay) 専用スタイル
================================================== */

/* 虫歯の主な症状リスト */
.p-page-decay__symptoms {
  margin-bottom: 90px;
}

.p-page-decay__symptom-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC版：4カラム */
  gap: 20px; /* 項目間の隙間 */
  list-style: none;
  padding: 0;
  margin-top: 40px;
}

.p-page-decay__symptom-list li {
  background-color: #f7f7f7; /* 項目を分かりやすくするための薄いグレー（任意） */
  padding: 20px 15px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  text-align: center;
  border-radius: 5px; /* 少し角を丸く */
}

/* SP版の切り替え（768px以下） */
@media screen and (max-width: 768px) {
  .p-page-decay__symptom-list {
    grid-template-columns: 1fr; /* SP版：1カラム */
    gap: 10px; /* スマホでは隙間を狭く */
  }

  .p-page-decay__symptom-list li {
    padding: 15px;
    text-align: left; /* スマホでは左詰めの方が読みやすい場合が多い */
    justify-content: flex-start;
  }
}

/* 虫歯の原因セクション（画像なし版） */
.p-decay-causes-list {
  margin-top: 40px;
}

.p-decay-causes-item {
  display: flex;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  align-items: flex-start;
  transition: transform 0.3s ease;
}

.p-decay-causes-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.p-decay-causes-item__num {
  font-family: "Jost", sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--color-main); /* 医院のメインカラー */
  line-height: 1;
  margin-right: 30px;
  padding-top: 5px;
  position: relative;
}

/* 数字の下に装飾の線を引く場合 */
.p-decay-causes-item__num::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-main);
  opacity: 0.3;
}

.p-decay-causes-item__title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.p-decay-causes-item__text {
  font-size: 15px;
  line-height: 1.8;
  color: #666;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .p-decay-causes-item {
    flex-direction: column;
    padding: 20px;
  }
  .p-decay-causes-item__num {
    margin-right: 0;
    margin-bottom: 15px;
    font-size: 28px;
  }
  .p-decay-causes-item__title {
    font-size: 16px;
  }
  .p-decay-causes-item__text {
    font-size: 14px;
  }
}

/* 虫歯の主な治療法セクション */
.p-decay-treatment-list {
  margin-top: 40px;
  border-top: 1px solid #e0e0e0;
}

.p-decay-treatment-list__item {
  display: flex;
  padding: 30px 0;
  border-bottom: 1px solid #e0e0e0;
}

.p-decay-treatment-list__term {
  width: 30%; /* 左側の見出しの幅 */
  padding-right: 30px;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-accent);
  position: relative;
  /* 左に小さなアクセントをつける */
  padding-left: 15px;
}

.p-decay-treatment-list__term::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 4px;
  height: 16px;
  background-color: var(--color-accent);
  border-radius: 2px;
}

.p-decay-treatment-list__desc {
  width: 70%; /* 右側の説明文の幅 */
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* 締めくくりのテキスト */
.p-decay-treatment-note {
  margin-top: 40px;
  padding: 25px;
  background-color: #f1f9fa; /* 薄い水色で目立たせる */
  border-radius: 8px;
}

.p-decay-treatment-note p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .p-decay-treatment-list__item {
    flex-direction: column;
    padding: 20px 0;
  }
  .p-decay-treatment-list__term {
    width: 100%;
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 16px;
  }
  .p-decay-treatment-list__desc {
    width: 100%;
    font-size: 14px;
  }
  .p-decay-treatment-note {
    padding: 20px;
  }
}

/* 虫歯を放置すると...（警告リスト） */
.decay_img_01 {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.p-page-decay__warning .txt_sub {
  text-align: center;
  margin-bottom: 30px;
}

.p-decay-warning-list {
  display: flex;
  flex-direction: column;
  gap: 15px; /* パネル同士の隙間 */
}

.p-decay-warning-item {
  background-color: #f9f9f9; /* 注意を促すための薄いグレー背景 */
  border-left: 5px solid var(--color-accent); /* 左側にアクセントカラーのライン */
  padding: 20px 25px;
  border-radius: 0 5px 5px 0; /* 右側だけ少し角丸に */
}

.p-decay-warning-item__title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
}

/* テキストがある場合のみ適用される上余白 */
.p-decay-warning-item__text {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-top: 12px;
  margin-bottom: 0;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .p-decay-warning-item {
    padding: 15px 20px;
  }
  .p-decay-warning-item__title {
    font-size: 16px;
  }
  .p-decay-warning-item__text {
    font-size: 14px;
  }
}

/* 当院での虫歯の治療について（メッセージボックス） */
.p-decay-about-box {
  background-color: #fff;
  padding: 40px 50px 0;
  border-radius: 8px;
}

.p-decay-about-box__title {
  font-size: 20px;
  color: var(--color-accent);
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

.p-decay-about-box__text {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1.5em; /* 段落ごとの隙間 */
  text-align: left;
}

/* 最後の段落は下の余白をなくす */
.p-decay-about-box__text:last-child {
  margin-bottom: 0;
}

/* SP版 */
@media screen and (max-width: 768px) {
  .p-decay-about-box {
    padding: 30px 20px;
  }
  .p-decay-about-box__title {
    font-size: 18px;
  }
  .p-decay-about-box__text {
    font-size: 14px;
  }
}

/* ==================================================
   治療の流れ (ステップデザイン)
================================================== */
.p-guide-flow__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-guide-flow__item {
  position: relative;
  padding: 40px 20px 30px;
  margin-bottom: 0;
}

/* 背景色の交互切り替え（HTMLのクラス付与不要） */
.p-guide-flow__item:nth-child(odd) {
  background-color: var(--color-accent);
}
.p-guide-flow__item:nth-child(even) {
  background-color: #f2f2f2; /* 薄いグレー */
}

/* 2番目以降のアイテムの上部に下向き三角形を作る */
.p-guide-flow__item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  z-index: 2;
}

/* 偶数番目（背景グレー）の上の三角形は、上の要素（薄緑）の色に合わせる */
.p-guide-flow__item:nth-child(even)::before {
  border-top: 20px solid var(--color-accent);
}

/* 奇数番目（背景薄緑）の上の三角形は、上の要素（グレー）の色に合わせる */
.p-guide-flow__item:nth-child(odd):not(:first-child)::before {
  border-top: 20px solid #f2f2f2;
}

/* ヘッダー部分 */
.p-guide-flow__head {
  text-align: center;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-guide-flow__step-num {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 24px;
  color: var(--color-accent);
  font-weight: 500;
  line-height: 1;
  margin-right: 20px;
  letter-spacing: 0.05em;
}

.p-guide-flow__item:nth-child(odd) .p-guide-flow__step-num {
  color: #fff;
}

.p-guide-flow__step-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.5;
}

/* ボディ部分（テキストエリア） */
.p-guide-flow__body {
  max-width: 700px;
  margin: 0 auto;
}

.p-guide-flow__text {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin: 0;
  text-align: center; /* 画像なしのため中央揃えが綺麗にまとまります */
}

/* SP用スタイル */
@media screen and (max-width: 768px) {
  .p-guide-flow__item {
    padding: 30px 20px;
  }
  .p-guide-flow__step-num {
    font-size: 18px;
  }
  .p-guide-flow__step-title {
    font-size: 16px;
  }
  .p-guide-flow__text {
    font-size: 14px;
    text-align: left; /* SPでは左揃えで可読性確保 */
  }
  /* 三角形のサイズをスマホ用に少し小さく */
  .p-guide-flow__item:not(:first-child)::before {
    border-left-width: 15px;
    border-right-width: 15px;
    border-top-width: 15px;
  }
}

/* ==================================================
   インプラント治療 (implant) 専用スタイル
================================================== */

#implant .implant_intro {
  margin-top: 40px;
}

#implant .c-service-message-box__title {
  margin-bottom: 30px;
}

#implant .c-service-message-box__text {
  text-align: left;
}

@media screen and (max-width: 768px) {
  #implant .c-service-message-box {
    padding: 20px 20px;
  }

  #implant .c-service-message-box__title {
    text-align: left;
  }
}

#implant .service_img3 {
  margin-bottom: 30px;
}

#implant .p-guide-flow {
  padding-bottom: 10px;
}

.p-page-implant__final .c-service-message-box {
  background-color: #fff;
}

#implant .c-btn--reserve-large {
  max-width: 240px;
  margin: 0 auto;
}

/* ==================================================
   マウスピース矯正 (mouthpiece) 専用スタイル
================================================== */

#mouthpiece .p-guide-flow {
  padding-bottom: 10px;
}

#mouthpiece .c-service-message-box {
  background-color: #fff;
  padding: 40px 0;
  border-radius: 8px;
  text-align: left;
}

#mouthpiece .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

/* ==================================================
   ワイヤー矯正 (wire_orthodontics) 専用スタイル
================================================== */

#wire .p-guide-flow {
  padding-bottom: 30px;
}

#wire .c-service-message-box {
  background-color: #fff;
  padding: 40px 0;
  border-radius: 8px;
  text-align: left;
}

#wire .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

/* ==================================================
   予防歯科 (prevention) 専用スタイル
================================================== */

#prevention .c-service-message-box {
  background-color: #fff;
  padding: 40px 0;
  border-radius: 8px;
  text-align: left;
}

#prevention .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

#prevention .c-service-dotted-list__item {
  margin-bottom: 10px;
}

#prevention .p-guide-flow {
  padding-bottom: 40px;
}

#prevention .list_wrap {
  margin-left: 30px;
}

@media screen and (max-width: 840px) {
  #prevention .l-container--small.box_wrap {
    padding: 0 0;
  }

  #prevention .list_wrap li {
    margin-bottom: 0;
  }
}

/* ==================================================
   歯周病治療 (perio) 専用スタイル
================================================== */

#perio .p-guide-flow {
  padding-bottom: 60px;
}

#perio .p-guide-flow__text {
  text-align: left;
}

#perio .bottom_txt p {
  font-size: 16px;
  padding: 25px 30px;
}

#perio .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

@media screen and (max-width: 840px) {
  #perio .c-service-message-box {
    padding: 40px 20px;
  }

  #perio .bottom_txt p {
    font-size: 16px;
    padding: 15px 0;
  }
}

/* ==================================================
   小児歯科 (child) 専用スタイル
================================================== */

#child .c-service-message-box {
  background-color: #fff;
  padding: 40px 0;
  border-radius: 8px;
  text-align: left;
}

#child .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

#child .p-guide-flow {
  padding-bottom: 30px;
}

/* ==================================================
   審美治療 (estetic) 専用スタイル
================================================== */

/* ==================================================
   診療ページ共通：インラインステップ (c-simple-flow)
================================================== */
/* ==================================================
   診療ページ共通：カードグリッドレイアウト (c-service-card-grid)
================================================== */
.c-service-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC版では横に2列 */
  gap: 30px; /* カード同士の隙間 */
}

.c-service-card {
  border: 4px solid #f0f0f0; /* 薄いグレーの枠線 */
  padding: 30px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.c-service-card__title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0; /* タイトル下に区切り線 */
}

/* SP版（スマホ表示） */
@media screen and (max-width: 768px) {
  .c-service-card-grid {
    grid-template-columns: 1fr; /* スマホでは縦1列 */
    gap: 20px;
  }
  .c-service-card {
    padding: 20px;
  }
  .c-service-card__title {
    font-size: 18px;
  }
}

/* ==================================================
   診療ページ共通：縦並びのフローリスト (c-vertical-flow)
================================================== */
.c-vertical-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 各ステップの縦の隙間 */
}

.c-vertical-flow li {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
}

/* 番号の部分をアクセントカラーで強調 */
.c-vertical-flow li span {
  color: var(--color-accent);
  font-weight: bold;
  font-family: Arial, sans-serif;
  margin-right: 8px;
  font-size: 15px;
  min-width: 24px; /* 番号の幅を固定してテキストの頭を揃える */
}

/* SP版 */
@media screen and (max-width: 768px) {
  .c-vertical-flow li {
    font-size: 13px;
  }
}

#estetic .c-service-message-box {
  background-color: #fff;
  padding: 40px 0;
  border-radius: 8px;
  text-align: left;
}

#estetic .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

#estetic .p-guide-flow {
  padding-bottom: 30px;
}

/* ==================================================
   義歯・入れ歯 (denture) 専用スタイル
================================================== */
#denture .c-service-message-box {
  background-color: #fff;
  padding: 40px 0;
  border-radius: 8px;
  text-align: left;
}

#denture .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

#denture .p-guide-flow {
  padding-bottom: 30px;
}

/* ==================================================
   根幹治療 (rootcanal) 専用スタイル
================================================== */

#rootcanal .c-service-message-box {
  background-color: #fff;
  padding: 40px 0;
  border-radius: 8px;
  text-align: left;
}

#rootcanal .c-btn--reserve-large {
  max-width: 340px;
  margin: 0 auto;
}

#rootcanal .p-guide-flow {
  padding-bottom: 30px;
}