/* =========================
   トップページ専用 CSS
   ========================= */

/* -------------------------
   Heroセクション全体
   ------------------------- */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* スライドエリア */
.hero__slides {
  position: relative;
  width: 100%;
  height: 720px; /* PC用高さ */
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------
   キャッチコピー部分
   ------------------------- */
.hero__content {
  position: absolute;
  inset: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 480px 16px 0;
  display: flex;
  align-items: flex-start; /* 上揃えで固定 */
  pointer-events: none;
  z-index: 2; /* スライドより前面 */
}

.hero__catch {
  display: inline-block;
  max-width: 70%;
}

.hero__catch-text {
  display: block;
  font-size: 40px;
  font-weight: 350;
  letter-spacing: 0.08em;
  color: #666666;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  line-height: 1.6;
}

/* JSで生成する各行のラッパー */
.hero__catch-line {
	position: relative;
  display: block;
}

.hero__catch-line-text {
  display: inline-block;
	text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 255, 0.6);
}

/* 各行の下線 */
.hero__catch-line-underline {
  position: absolute;       /* ← これを追加して重ねられるように */
  bottom: 0.3em;            /* ← 文字の下端付近に配置（好みで微調整） */
  left: 0;
  height: 10px;             /* ← 太さ（4px → 10pxなどに） */
  width: 0;
  background-color: #ECB3E0;
  transition: width 0.35s ease;
  z-index: -1;              /* ← テキストの背後に入れる */
  border-radius: 2px;       /* ← 少し角を丸めると綺麗 */
}


.hero__catch-line-underline.is-active {
  width: 100%;
}

/* 元々の単独下線は非表示（JSで制御済み） */
.hero__catch-underline {
  display: none;
}

/* -------------------------
   「医院の売り」エリア
   ------------------------- */
.hero__features {
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: flex;
  gap: 0px;
  z-index: 5;
}

.hero-feature {
  width: 280px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.hero-feature__image img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.hero-feature__label {
  padding: 6px 8px;
  font-size: 24px;
  font-weight: 100;
  color: #ffffff;
  text-align: center;
}

.hero-feature__label--kids {
  background-color: #B04CA3;
}

.hero-feature__label--nursery {
  background-color: #73408D;
}

/* -------------------------
   スマホレイアウト
   ------------------------- */
@media (max-width: 768px) {
  .hero__slides {
    height: 520px; /* 縦長 */
  }
	.hero__slide--1 img { object-position: 80% center; }
  .hero__slide--2 img { object-position: 30% center; }
  .hero__slide--3 img { object-position: 50% center; }
	.hero__slide--4 img { object-position: 20% center; }

  .hero__content {
    padding: 400px 12px 0;
  }

  .hero__catch {
    max-width: 100%;
  }

  .hero__catch-text {
    font-size: 22px;
    letter-spacing: 0.06em;
    line-height: 1.6;
  }

  /* 売り部分は下部に横並び */
  .hero__features {
    position: static;
    margin: 0;
    max-width: 100%;
    display: flex;
    justify-content: center;  /* またはflex-start。左右に寄せたい場合調整 */
    gap: 0;                   /* ← ここが重要：間の余白をゼロに */
  }

  .hero-feature {
    width: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }

  .hero-feature__image img {
    height: 110px;
  }

  .hero-feature__label {
    font-size: 18px;
    padding: 7px 6px;
  }
}

/* =========================
   医院の挨拶セクション
   ========================= */

.greeting {
  background-color: #ffffff;
  padding: 40px 20px 0;
  color: #666666; /* 基本文字色 */
}

.greeting__inner {
  max-width: 800px; /* ご指定の横幅（後で調整可） */
  margin: 0 auto 40px;
  text-align: center;
}

.greeting__title {
  margin: 0 0 24px;
  line-height: 1.6;
}

.greeting__title-line {
  display: inline-block;
  font-size: 24px;
  font-weight: 300;
  color: #666666;
}

.greeting__title-accent {
  display: inline-block;
  font-size: 30px;    /* 少し大きめ */
  font-weight: 300;
  color: #A62498;     /* 指定色 */
  margin-top: 4px;
}

.greeting__text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.9;
  color: #666666;
}

/* 「詳しくはこちら」ボタン */
.greeting__button {
  display: inline-flex;
  align-items: center;
  padding: 10px 26px;
  background-color: #984394;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;          /* 左右半円のように */
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.greeting__button-arrow {
  display: inline-block;
  margin-left: 8px;
  width: 0;
  height: 0;
  border-left: 7px solid #ffffff;     /* 三角形（矢印） */
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.greeting__button:hover,
.greeting__button:focus {
  background-color: #7e2f7c;
  transform: translateY(-1px);
}

/* =========================
   流れる画像帯（greeting-gallery）
   ========================= */

.greeting-gallery {
  width: 100%;
  overflow: hidden;
  padding-top: 24px;          /* 挨拶文との余白。必要に応じて調整 */
  background-color: #fff;
}

/* トラック：PC用デフォルトは2セット使った -50% ループ */
.greeting-gallery__track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: greeting-gallery-scroll-pc 35s linear infinite;
}

/* 画像：比率維持で帯の高さにフィット */
.greeting-gallery__track img {
  flex-shrink: 0;
  display: block;
  width: auto;
  height: 130px;              /* PC表示時の帯高さ */
  object-fit: cover;
}

/* PC用：2セット(40枚)のうち半分(=1セット分)だけ動かして無限ループ */
/* HTML側で 20枚 + 同じ20枚 = 40枚 並んでいる前提 */
@keyframes greeting-gallery-scroll-pc {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* スマホ用：1セット分（20枚ぶん ≒ 2400px）をまるっと流してから戻る */
@keyframes greeting-gallery-scroll-sp {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 500x375 を高さ90pxに縮小 → 幅約120px/枚 → 20枚で約2400px */
    transform: translateX(-2400px);
  }
}

/* =========================
   スマホ対応
   ========================= */

@media (max-width: 768px) {
  .greeting-gallery {
    padding-top: 16px;
  }

  .greeting-gallery__track {
    /* ★ スマホでは専用アニメーションを使用（速さはここで調整） */
    animation: greeting-gallery-scroll-sp 75s linear infinite;
  }

  .greeting-gallery__track img {
    height: 90px;             /* スマホ表示時の帯高さ */
  }
}




/* =========================
   スマホ対応
   ========================= */

@media (max-width: 768px) {
  .greeting {
    padding: 20px 16px 0;
  }

  .greeting__inner {
    max-width: 100%;   /* スマホは幅制限なしでOK */
    margin-bottom: 32px;
  }

  .greeting__title-line {
    font-size: 20px;
  }

  .greeting__title-accent {
    font-size: 24px;
  }

  .greeting__text {
    font-size: 15px;
  }

}


/* =========================
   家族みんなが笑顔になれる、3つのフロア
   ========================= */

.floors {
  position: relative;
  width: 100%;
  padding: 40px 20px 40px;
  color: #666666;
  overflow: hidden;
}

/* 背景画像＋白っぽく透過 */
.floors::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/floors-bg.jpg"); /* 背景用画像を設定 */
  background-size: cover;
  background-position: center;
  opacity: 0.25;              /* 透過で白っぽく */
  z-index: 0;
}

.floors::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.floors__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  z-index: 1; /* 前面に表示 */
}

/* 見出し */
.floors__title {
  margin: 0 0 40px;
  font-size: 24px;
	font-weight: 300;
  line-height: 1.8;
  color: #666666;
}

.floors__title-accent {
  font-size: 30px;       /* 少し大きめ */
  font-weight: 300;
  color: #A72498;        /* 指定アクセントカラー */
}

/* カード3つ並び（PC） */
.floors__cards {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

/* カード全体をクリック可能に */
.floor-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #666666;
  background-color: transparent;
}

/* 上部の写真：幅100%、余白なし */
.floor-card__image img {
  display: block;
  width: 100%;
  height: 240px;        /* 高さはお好みで調整可 */
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: none;
}

/* 中段の帯：背景色＋テキスト。上下に隙間なし */
.floor-card__label {
  margin: 0;
  padding: 16px 8px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* 下段：白背景＋大きめの文言＋説明。帯と隙間なし */
.floor-card__body {
  background-color: #ffffff;
  margin: 0;
  padding: 14px 12px 16px;
  text-align: center;
}

/* 大きめ文言（タイトル） */
.floor-card__title {
  margin: 25px 0px;
  font-size: 24px;
  font-weight: 300;
}

/* 説明テキスト */
.floor-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}

/* --- カラーバリエーション指定 --- */

/* 1つ目 */
.floor-card--type1 .floor-card__label {
  background-color: #F0DDEE;
  color: #984393;
}
.floor-card--type1 .floor-card__title {
  color: #984394;
}

/* 2つ目 */
.floor-card--type2 .floor-card__label {
  background-color: #E2BCDE;
  color: #B04CA3;
}
.floor-card--type2 .floor-card__title {
  color: #B04CA3;
}

/* 3つ目 */
.floor-card--type3 .floor-card__label {
  background-color: #DECCE8;
  color: #73408D;
}
.floor-card--type3 .floor-card__title {
  color: #73408D;
}

/* 説明文（3つの要素の下） */
.floors__description {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #666666;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .floors {
    padding: 20px 16px 20px;
  }

  .floors__title {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 32px;
  }

  .floors__title-accent {
    font-size: 22px;
  }

  .floors__cards {
    flex-direction: column;  /* ★ 縦並び */
    gap: 20px;
    margin-bottom: 24px;
  }

  .floor-card__image img {
    height: 200px;           /* スマホは少し低めに */
  }

  .floor-card__body {
    text-align: center;
  }

  .floors__description {
    font-size: 13px;
    text-align: left;
  }
}

/* =========================
   お子様をお持ちのママへ セクション
   ========================= */

.moms {
  background-color: #F5E9F4;
  padding: 40px 20px;
  color: #666666;
}

.moms__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 見出し */
.moms__title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 24px;       /* 基本は24px */
  font-weight: 300;
	color: #666666;
  line-height: 1.8;
	display: block;
}


.moms__title-accent {
  font-size: 30px;       /* 「お子様」「ママ」は30px */
  font-weight: 300;
  color: #984392;
}

/* カード3つ並び（PC） */
.moms__cards {
  display: flex;
  gap: 24px;
}

/* 各要素全体をクリック可能に */
.moms-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #666666;
}

/* 画像部分 */
.moms-card__image {
  position: relative;
  overflow: hidden;
}

.moms-card__image img {
  display: block;
  width: 100%;
  height: 280px;           /* 画像の高さ（調整可） */
  object-fit: cover;
}

/* 再生アイコン風：丸＋三角（画像下部中央） */
.moms-card__play {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moms-card__play-triangle {
  width: 0;
  height: 0;
  border-left: 10px solid #ffffff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* カラー別指定（丸とタイトル） */
.moms-card--type1 .moms-card__play {
  background-color: #984392;
}
.moms-card--type1 .moms-card__title {
  color: #984392;
}

.moms-card--type2 .moms-card__play {
  background-color: #73408D;
}
.moms-card--type2 .moms-card__title {
  color: #73408D;
}

.moms-card--type3 .moms-card__play {
  background-color: #B04CA3;
}
.moms-card--type3 .moms-card__title {
  color: #B04CA3;
}

/* テキスト部分（画像の下） */
.moms-card__body {
  padding: 14px 10px 0;
  text-align: center;
}

.moms-card__title {
  margin: 0 0 6px;
  font-size: 24px;        /* 大きめの文言 */
  font-weight: 300;
}

.moms-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .moms {
    padding: 20px 16px;
  }

  .moms__title {
    font-size: 20px;
    margin-bottom: 32px;
  }

  .moms__title-accent {
    font-size: 26px;
  }

  .moms__cards {
    flex-direction: column;  /* ★ 縦並びに */
    gap: 20px;
  }

  .moms-card__image img {
    height: 180px;
  }

  .moms-card__body {
    padding-top: 12px;
  }
}

/* =========================
   nico baby&kids 歯みがき教室
   ========================= */

.hbclass {
  background-color: #ffffff;
  padding: 80px 20px;
}

.hbclass__banner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  background-color: #ffffff;
  border: 1px solid #E5D6EC; /* ごく薄い枠。不要なら削除OK */
  box-sizing: border-box;
  overflow: hidden;          /* はみ出し防止 */
}

.hbclass__banner {
  align-items: stretch;
  text-decoration: none; /* リンク下線除去 */
  color: inherit;        /* 文字色はそのまま継承 */
  cursor: pointer;       /* カーソルをポインタに */
}

/* 「無料」ラベル：右上にぴったり */
.hbclass__label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 16px 38px;
  background-color: #984394;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  z-index: 2;
}

/* 左側画像エリア */
.hbclass__image {
  flex: 0 0 40%;
}

.hbclass__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 260px;     /* バナー高さの目安。調整可 */
  object-fit: cover;
}

/* 右側テキストエリア */
.hbclass__content {
  flex: 1;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* 横方向中央 */
  justify-content: center;  /* 縦方向中央 */
  text-align: center;
  box-sizing: border-box;
}

.hbclass__title {
  margin: 20px 0 10px;
  font-size: 32px;
  font-weight: 300;
  color: #984394;
}

.hbclass__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #666666;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .hbclass {
    padding: 60px 16px;
  }

  .hbclass__banner {
    flex-direction: column;
  }

  .hbclass__image {
    flex: none;
  }

  .hbclass__image img {
    max-height: 200px;
  }

  .hbclass__content {
    padding: 20px 16px 24px;
  }

  .hbclass__title {
    font-size: 20px;
	  margin-top: 0px;
  }

  .hbclass__text {
    font-size: 13px;
  }
	.hbclass__label {
    background-color: #B04CA3; /* ← 例：色を変えたい場合 */
    color: #ffffff;            /* 文字色（必要なら変更） */
    font-size: 13px;           /* 文字を少し大きめに */
    padding: 8px 16px;         /* ラベルのサイズ調整 */
    border-bottom-left-radius: 6px; /* 下角に少し丸みを付けてもOK */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 軽い影を追加（任意） */
  }
}

/* =========================
   お子様連れの方も安心して通える歯医者です
   ========================= */

.kidsfriendly {
  background-color: #F5E9F4;
  padding: 40px 20px;
  color: #666666;
}

.kidsfriendly__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* 見出し */
.kidsfriendly__title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 22px;
  line-height: 1.8;
	font-weight: 300;
  color: #666666;
	display: block;
}

.kidsfriendly__accent {
  font-size: 26px;      /* 大きめ */
  font-weight: 300;
  color: #984392;
}

/* 4カード：2列×2行（PC） */
.kidsfriendly__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* カード全体をクリック可能に */
.kidsfriendly-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: #666666;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
}

/* 透過背景画像（カードごとに差し替え） */
.kidsfriendly-card__overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;              /* うっすら見える程度 */
  pointer-events: none;
}

/* テキストエリア（前面） */
.kidsfriendly-card__content {
  padding: 24px 18px 40px;
  text-align: center;
  box-sizing: border-box;
}

/* 表題（大きめ） */
.kidsfriendly-card__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

/* 説明文 */
.kidsfriendly-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #666666;
}

/* 下の三角（クリック誘導） */
.kidsfriendly-card__arrow {
  position: absolute;  /* ← ★追加！ */
  left: 50%;           /* 中央寄せ */
  bottom: 16px;        /* 下からの距離（調整可） */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid;
}

/* --- カード別：背景画像＆色指定（例のパスは差し替えてください） --- */

/* 痛みの少ない治療 */
.kidsfriendly-card--type1 .kidsfriendly-card__overlay {
  background-image: url("../images/feature_painless.jpg");
}
.kidsfriendly-card--type1 .kidsfriendly-card__title,
.kidsfriendly-card--type1 .kidsfriendly-card__arrow {
  color: #984394;
  border-top-color: #984394;
}

/* キッズ専用診療室 */
.kidsfriendly-card--type2 .kidsfriendly-card__overlay {
  background-image: url("../images/feature_kidsroom.jpg");
}
.kidsfriendly-card--type2 .kidsfriendly-card__title,
.kidsfriendly-card--type2 .kidsfriendly-card__arrow {
  color: #73408D;
  border-top-color: #73408D;
}

/* キッズスペース完備 */
.kidsfriendly-card--type3 .kidsfriendly-card__overlay {
  background-image: url("../images/feature_kidsspace.jpg");
}
.kidsfriendly-card--type3 .kidsfriendly-card__title,
.kidsfriendly-card--type3 .kidsfriendly-card__arrow {
  color: #B04CA3;
  border-top-color: #B04CA3;
}

/* 予防専門歯科衛生士 */
.kidsfriendly-card--type4 .kidsfriendly-card__overlay {
  background-image: url("../images/feature_hygienist.jpg");
}
.kidsfriendly-card--type4 .kidsfriendly-card__title,
.kidsfriendly-card--type4 .kidsfriendly-card__arrow {
  color: #984394;
  border-top-color: #984394;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .kidsfriendly {
    padding: 30px 16px;
  }

  .kidsfriendly__title {
    font-size: 18px;
    margin-bottom: 32px;
  }

  .kidsfriendly__accent {
    font-size: 22px;
  }

  .kidsfriendly__cards {
    grid-template-columns: 1fr;  /* ★ 縦並びに */
    gap: 20px;
  }

  .kidsfriendly-card__content {
    padding: 20px 14px 40px;
  }

  .kidsfriendly-card__title {
    font-size: 17px;
  }

  .kidsfriendly-card__text {
    font-size: 13px;
  }
}

/* =========================
   診療メニューセクション
   ========================= */

.treatments {
  position: relative;
  width: 100%;
  padding: 60px 20px 70px;
  color: #666666;
  overflow: hidden;
}

/* 背景画像＋透過 */
.treatments::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/treatments-bg.jpg"); /* 差し替え用 */
  background-size: cover;
  background-position: center;
  opacity: 0.60; /* お好みで調整 */
  z-index: 0;
}

/* 薄い白フィルターで文字を見やすく */
.treatments__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  z-index: 0;
}

.treatments__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}

/* ロゴ */
.treatments__logo img {
  display: block;
  margin: 0 auto 10px;
  max-width: 60px;
  height: auto;
}

/* 見出し */
.treatments__title {
  margin: 0 0 32px;
  font-size: 26px;
  font-weight: 300;
  color: #984393;
  letter-spacing: 0.12em;
}

/* おすすめ3メニュー */

.treatments-recommend {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.treatments-recommend__item {
  position: relative;
  flex: 1 1 0;
  display: block;
  height: 180px;
  text-decoration: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* 下部帯 */
.treatments-recommend__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 8px;
  background-color: #984393;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

/* 各メニュー用背景（お好みで差し替え） */
.treatments-recommend__item--whitening {
  background-image: url("../images/menu_recommend_whitening.jpg");
}

.treatments-recommend__item--cleaning {
  background-image: url("../images/menu_recommend_cleaning.jpg");
}

.treatments-recommend__item--gum {
  background-image: url("../images/menu_recommend_gum.jpg");
}

/* hover */
.treatments-recommend__item:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  transition: all 0.25s ease;
}

/* 通常診療メニュー：丸型ボタン */

.treatments-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 18px;
  justify-items: center;
}

.treatments-item {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  text-decoration: none;
  overflow: hidden;
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 下部帯 */
.treatments-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background-color: #984393;
  opacity: 0.96;
}

/* --- 個別帯調整 ------------------- */

/* マタニティ予防歯科 */
.treatments-item--maternity::after {
  height: 48px; /* ← 改行を考慮して帯を高く */
}

.treatments-item--maternity .treatments-item__label {
  bottom: 10px; /* ← 文字をやや上に */
  line-height: 1.3;
}

/* ボツリヌストキシン製剤 */
.treatments-item--botox::after {
  height: 46px; /* ← 同様にやや高めに */
}

.treatments-item--botox .treatments-item__label {
  bottom: 8px; /* ← 微調整 */
  line-height: 1.3;
}


.treatments-item__label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  z-index: 2;
  font-size: 13px;
  line-height: 1.4;
  color: #ffffff;
  font-weight: 400;
}

/* 代表的な背景画像（自由に差し替え） */
.treatments-item--first      { background-image: url("../images/menu_first.jpg"); }
.treatments-item--caries     { background-image: url("../images/menu_caries.jpg"); }
.treatments-item--perio      { background-image: url("../images/menu_perio.jpg"); }
.treatments-item--kids       { background-image: url("../images/menu_kids.jpg"); }
.treatments-item--prevention { background-image: url("../images/menu_prevention.jpg"); }
.treatments-item--oralsurgery{ background-image: url("../images/menu_oralsurgery.jpg"); }
.treatments-item--denture    { background-image: url("../images/menu_denture.jpg"); }
.treatments-item--implant    { background-image: url("../images/menu_implant.jpg"); }
.treatments-item--ortho      { background-image: url("../images/menu_ortho.jpg"); }
.treatments-item--esthetic   { background-image: url("../images/menu_esthetic.jpg"); }
.treatments-item--whitening  { background-image: url("../images/menu_whitening.jpg"); }
.treatments-item--maternity  { background-image: url("../images/menu_maternity.jpg"); }
.treatments-item--botox      { background-image: url("../images/menu_botox.jpg"); }
.treatments-item--mouthguard { background-image: url("../images/menu_mouthguard.jpg"); }
.treatments-item--invisalign { background-image: url("../images/menu_invisalign.jpg"); }

/* hover */
.treatments-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  transition: all 0.25s ease;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .treatments {
    padding: 40px 16px 50px;
  }

  .treatments__title {
    font-size: 22px;
    margin-bottom: 24px;
  }

  /* おすすめ3メニュー：スマホでは縦並び（シンプル版） */
  .treatments-recommend {
    display: block;
    margin-bottom: 24px;
    position: relative;
    z-index: 3; /* 念のため前面に */
  }

  .treatments-recommend__item {
    display: block;
    width: 100%;
    height: 150px;
    margin: 0 0 12px;
  }

  /* 通常診療は2列 */
  .treatments-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }

  .treatments-item {
    width: 120px;
    height: 120px;
  }

  .treatments-item__label {
    font-size: 11px;
  }
}

/* =========================
   矯正無料相談実施中セクション
   ========================= */

.ortho-consult {
  background-color: #F5E9F4;
  padding: 60px 20px;
}

.ortho-consult__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  /* PCでは画像を左、テキストを右にするために反転 */
  flex-direction: row-reverse;
}

/* 画像エリア（PC左寄せ・大きめ） */
.ortho-consult__image {
  flex: 0 0 46%;
}

.ortho-consult__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* テキストエリア（PC右側） */
.ortho-consult__content {
  flex: 1;
}

/* 見出し */
.ortho-consult__title {
  margin: 0 0 16px;
  line-height: 1.4;
	text-align: center;
}

.ortho-consult__title-main {
  display: inline-block;
  font-size: 28px;
  font-weight: 600;
  color: #984393; /* 「矯正無料相談」を大きめ＆カラー */
  margin-right: 6px;
}

.ortho-consult__title-sub {
  display: inline-block;
  font-size: 22px;
  font-weight: 400;
  color: #666666;
}

/* 説明文 */
.ortho-consult__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: #666666;
}

/* 電話番号（大きめ） */
.ortho-consult__tel {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
	text-align: center;
  color: #984393;
}

/* 「無料相談会開催日」 */
.ortho-consult__subtitle {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 300;
	text-align: center;
  color: #984392;
}

/* 日付ボックス3つ */
.ortho-consult__dates {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ortho-consult__date {
  flex: 1 1 0;
  padding: 10px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  box-sizing: border-box;
}

.ortho-consult__date--c1 {
  background-color: #984393;
}

.ortho-consult__date--c2 {
  background-color: #73408D;
}

.ortho-consult__date--c3 {
  background-color: #B04CA3;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .ortho-consult {
    padding: 40px 16px 40px;
  }

  .ortho-consult__inner {
    flex-direction: column; /* 並び順：テキスト → 画像 */
    gap: 24px;
  }

  .ortho-consult__title-main {
    font-size: 24px;
  }

  .ortho-consult__title-sub {
    font-size: 18px;
  }

  .ortho-consult__text {
    font-size: 14px;
  }

  .ortho-consult__tel {
    font-size: 28px;
  }

  .ortho-consult__subtitle {
    font-size: 28px;
  }

  .ortho-consult__dates {
    flex-direction: row;
  }

  .ortho-consult__date {
    flex: 1 1 100%;
    font-size: 13px;
  }

  .ortho-consult__image {
    width: 100%;
  }
}

/* =========================
   目立たないマウスピース矯正
   ========================= */

.mouthpiece {
  background-color: #ffffff; /* 白背景 */
  padding: 60px 20px;
}

.mouthpiece__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  /* 左：テキスト／右：画像 */
  flex-direction: row;
}

/* 左ブロック */
.mouthpiece__content {
  flex: 1;
}

/* 見出し：センター揃え＋カラー */
.mouthpiece__title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 600;
  color: #984393;
  text-align: center;
}

/* 説明文：読みやすくややコンパクト、左寄せ */
.mouthpiece__text {
  margin: 0 auto 16px;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.8;
  color: #666666;
  text-align: left;
}

/* インビザラインロゴ：センターに */
.mouthpiece__logo {
  margin: 0 0 18px;
  text-align: center;
}

.mouthpiece__logo img {
  max-width: 240px;
  width: 100%;
  height: auto;
}

/* 詳しくはこちらボタン */
.mouthpiece__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  margin: 0 auto;
  background-color: #984394;
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  gap: 6px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 右側の三角形アイコン */
.mouthpiece__btn::after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
}

/* hover */
.mouthpiece__btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  opacity: 0.95;
  transition: all 0.25s ease;
}

/* 右ブロック：画像（大きめ） */
.mouthpiece__image {
  flex: 0 0 46%;
}

.mouthpiece__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .mouthpiece {
    padding: 40px 16px 40px;
  }

  .mouthpiece__inner {
    flex-direction: column; /* 表題→文言→ロゴ→ボタン→写真の順 */
    gap: 20px;
  }

  .mouthpiece__title {
    font-size: 22px;
  }

  .mouthpiece__text {
    font-size: 14px;
    max-width: none;
  }

  .mouthpiece__logo img {
    max-width: 220px;
  }

  .mouthpiece__btn {
    font-size: 14px;
    padding: 11px 24px;
  }

  .mouthpiece__image {
    width: 100%;
  }
}

/* =========================
   メディア掲載情報セクション
   ========================= */

.media {
  background-color: #F5E9F4;
  padding: 70px 20px;
  text-align: center;
}

.media__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* 見出し */
.media__title {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 600;
  color: #984393;
  letter-spacing: 0.05em;
}

/* 本文 */
.media__text {
  font-size: 15px;
  line-height: 2;
  color: #666666;
  margin: 0 auto 30px;
  max-width: 720px;
}

/* 「詳しくはこちら」ボタン（インビザラインと同デザイン） */
.media__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background-color: #984394;
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
}

/* 右側の三角形 */
.media__btn::after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
}

/* hover時 */
.media__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  opacity: 0.95;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .media {
    padding: 50px 16px;
  }

  .media__title {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .media__text {
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 24px;
  }

  .media__btn {
    font-size: 14px;
    padding: 11px 24px;
  }
}

/* =========================
   分院紹介セクション
   ========================= */

.branch {
  background-color: #ffffff;
  padding: 60px 20px;
}

.branch__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.branch__image-wrap {
  position: relative;
}

.branch__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 右側中央の白背景パネル */
.branch__panel {
  position: absolute;
  top: 50%;
  right: 14%;
  transform: translateY(-50%);
  width: 10%;
  min-width: 270px;
  padding: 20px 22px 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
	text-align: center;
}

/* 表題 */
.branch__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 300;
	text-align: center;
  color: #984393;
}

/* 説明文 */
.branch__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: #666666;
}

/* 「詳細を見る」ボタン：左右半円＋#984394 */
.branch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 26px;
  background-color: #984394;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px; /* 左右半円 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition: all 0.25s ease;
}

.branch__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  opacity: 0.96;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .branch {
    padding: 40px 16px 40px;
  }

  .branch__panel {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    margin-top: 16px;
    padding: 18px 16px 18px;
    box-shadow: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
  }

  .branch__title {
    font-size: 20px;
    text-align: center;
  }

  .branch__text {
    font-size: 13px;
    line-height: 1.7;
  }

  .branch__btn {
    font-size: 13px;
    padding: 8px 22px;
  }
}

/* =========================
   求人情報セクション
   ========================= */

.recruit {
  background-color: #F5E9F4;
  padding: 80px 20px;
}

.recruit__inner {
  max-width: 900px;
  margin: 0 auto;
}

.recruit__banner {
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: #ffffff;
  border: 1px solid #E5D6EC;
  box-sizing: border-box;
  overflow: hidden;
}

/* 左側画像エリア */
.recruit__image {
  flex: 0 0 60%;
}

.recruit__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
}

/* 右側テキストエリア */
.recruit__content {
  flex: 1;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* 横方向センター */
  justify-content: center;  /* 縦方向センター */
  text-align: center;
  box-sizing: border-box;
}

/* 見出し */
.recruit__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 300;
  color: #984394;
}

/* 文言 */
.recruit__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: #666666;
}

/* 採用情報を見るボタン：左右半円＋#984394 */
.recruit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  background-color: #984394;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px; /* 左右半円 */
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition: all 0.25s ease;
}

/* 右側に三角形アイコン */
.recruit__btn::after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
}

/* hover */
.recruit__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  opacity: 0.96;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .recruit {
    padding: 60px 16px;
  }

  .recruit__banner {
    flex-direction: column;
  }

  .recruit__image img {
    max-height: 200px;
  }

  .recruit__content {
    padding: 20px 16px 24px;
  }

  .recruit__title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .recruit__text {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .recruit__btn {
    font-size: 13px;
    padding: 9px 22px;
  }
}

/* =========================
   スタッフブログセクション
   ========================= */

.staffblog {
  position: relative;
  width: 100%;
  padding: 70px 20px;
  background-image: url("../images/staffblog-bg.jpg"); /* 背景画像差し替え用 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.staffblog__inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* 左側の白い四角パネル */
.staffblog__panel {
  position: relative;
  max-width: 460px;
  padding: 26px 26px 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

/* パネルを背景左側に寄せる（PC） */
.staffblog__panel {
  margin-left: 0;
}

/* 見出し */
.staffblog__title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 300;
  color: #984393;
	text-align: center;
}

/* リード文 */
.staffblog__lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #666666;
}

/* ブログリスト全体 */
.staffblog__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 各記事 */
.staffblog__item {
  text-align: left;
}

/* 日付＋タイトル行 */
.staffblog__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  margin-bottom: 4px;
}

/* 日付 */
.staffblog__date {
  font-size: 13px;
  font-weight: 600;
  color: #984392;
  white-space: nowrap;
}

/* タイトル（右側） */
.staffblog__item-title {
  font-size: 14px;
  font-weight: 600;
  color: #555555;
}
/* タイトル（右側） */
.staffblog__item-title a{
  color: #984392;
	text-decoration: none;
}

/* 抜粋 */
.staffblog__excerpt {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.7;
  color: #777777;
}

/* 区切りライン */
.staffblog__divider {
  width: 100%;
  height: 0;
  border-top: 1px solid #984393;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .staffblog {
    padding: 50px 16px;
    background-position: center top;
  }

  .staffblog__panel {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 18px 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }

  .staffblog__title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .staffblog__lead {
    font-size: 13px;
    margin-bottom: 14px;
  }

  .staffblog__date {
    font-size: 12px;
  }

  .staffblog__item-title {
    font-size: 13px;
  }

  .staffblog__excerpt {
    font-size: 12px;
  }

  .staffblog__divider {
    height: 1.5px;
  }
}

/* =========================
   お知らせセクション
   ========================= */

.news {
  position: relative;
  width: 100%;
  padding: 70px 20px;
  background-image: url("../images/news-bg.jpg"); /* 背景画像を差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.news__inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* 右側の白い四角パネル */
.news__panel {
  position: relative;
  max-width: 460px;
  padding: 26px 26px 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
  margin-left: auto; /* 右寄せ */
  border-radius: 0; /* スタッフブログに合わせて角丸なし */
}

/* 見出し */
.news__title {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 300;
  color: #984393;
  text-align: center;
}

/* 各お知らせ */
.news__item {
  text-align: left;
  margin-bottom: 16px;
}

/* 題名（#984392） */
.news__item-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #984392;
}

/* 本文 */
.news__excerpt {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.8;
  color: #555555;
}

/* 区切り線 */
.news__divider {
  width: 100%;
  height: 1px; /* スタッフブログと統一 */
  background-color: #984393;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .news {
    padding: 50px 16px;
    background-position: center top;
  }

  .news__panel {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 18px 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }

  .news__title {
    font-size: 22px;
    margin-bottom: 14px;
  }

  .news__item-title {
    font-size: 14px;
  }

  .news__excerpt {
    font-size: 12.5px;
  }

  .news__divider {
    height: 1px;
  }
}

/* =========================
   医院の基本情報
   ========================= */

.clinicinfo {
  background-color: #F5E9F4;
  padding: 70px 20px 80px;
}

.clinicinfo__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* 左カラム：やや狭め */
.clinicinfo__left {
  flex: 0 0 34%;
}

/* 右カラム：広め */
.clinicinfo__right {
  flex: 1;
}

.clinicinfo__logo {
  text-align: center;
}
/* ロゴ */
.clinicinfo__logo img {
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}

/* 住所等 */
.clinicinfo__post,
.clinicinfo__address {
  margin: 0 0 4px;
  font-size: 14px;
  color: #666666;
}

.clinicinfo__tel {
  margin: 15px 0 23px;
  font-size: 42px;
  font-weight: 700;
  color: #984393;
	text-align: center;
}

.clinicinfo__tel a{
	text-decoration: none;
	color: #AD207E;
}

/* アクセス・診療時間ボックス共通 */
.clinicinfo__badge {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 10px;
  background-color: #AD207E;
  color: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
}

/* ピクトグラム（差し替え用の簡易アイコン） */
.clinicinfo__badge-icon {
  width: 48px;
  height: 48px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  flex-shrink: 0;
}

.clinicinfo__badge-icon--walk {
  background-color: transparent; /* ← 背景白を消したい場合はここで調整 */
  background-image: url("../images/icon_walk.png"); /* ← 差し替え画像のパス */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.clinicinfo__badge-icon--time {
  background-color: transparent;
  background-image: url("../images/icon_clock.png"); /* ← 差し替え画像のパス */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.clinicinfo__badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.clinicinfo__badge-main {
  font-size: 20px;
  font-weight: 700;
}

.clinicinfo__badge-sub {
  font-size: 13px;
}

/* 右カラム：画像群 */

.clinicinfo__calendars {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.clinicinfo__calendar-img {
  display: block;
  max-width: calc(50% - 6px);
  width: 100%;
  height: auto;
}

.clinicinfo__note {
  margin-bottom: 12px;
}

.clinicinfo__note-img {
  display: block;
  max-width: 50%;
  height: auto;
}

.clinicinfo__hours-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .clinicinfo {
    padding: 50px 16px 60px;
  }

  .clinicinfo__inner {
    flex-direction: column;
    gap: 24px;
  }

  .clinicinfo__left,
  .clinicinfo__right {
    flex: none;
    width: 100%;
  }
	.clinicinfo__logo {
  text-align: center;
}

  .clinicinfo__logo img {
    max-width: 320px;
    margin: 0 auto 10px;
  }

  .clinicinfo__post,
  .clinicinfo__address {
    font-size: 13px;
  }

  .clinicinfo__tel {
    font-size: 32px;
    margin-bottom: 14px;
	  text-align: center;
  }

  .clinicinfo__badge {
    padding: 9px 12px;
    margin-bottom: 8px;
  }

  .clinicinfo__badge-main {
    font-size: 18px;
  }

  .clinicinfo__badge-sub {
    font-size: 12px;
  }

  .clinicinfo__calendars {
    gap: 8px;
    margin-bottom: 10px;
	  flex-direction: column;
	  align-items: center;
  }

  .clinicinfo__calendar-img {
    max-width: 100%;
  }

  .clinicinfo__note {
    margin-bottom: 8px;
  }
	.clinicinfo__note-img {
  max-width: 70%;
}
}

.clinicinfo__hours-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 診療時間テーブル：デフォルトは非表示（SP専用） */
.clinicinfo__hours-table {
  display: none;
}

@media (max-width: 768px) {
  /* 診療時間画像はSPでは非表示 */
  .clinicinfo__hours-img {
    display: none;
  }

  /* 診療時間テーブルを表示 */
  .clinicinfo__hours-table {
    display: table;
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 12px;
    color: #555555;
  }

  .clinicinfo__hours-table th,
  .clinicinfo__hours-table td {
    border: 1px solid #E0D4E6;
    padding: 6px 4px;
    text-align: center;
  }

  .clinicinfo__hours-table thead th {
    background-color: #F5E9F4;
    color: #984393;
    font-weight: 600;
  }

  .clinicinfo__hours-table tbody th {
    background-color: #F9F4FB;
    font-weight: 600;
    color: #984393;
    width: 28%;
  }
}
/* =========================
   アクセスマップ
   ========================= */

.accessmap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
}

/* 内枠コンテナ */
.accessmap__inner {
  width: 100%;
  max-width: none; /* 横幅いっぱい */
}

/* Googleマップをレスポンシブに */
.accessmap__iframe {
  display: block;
  width: 100%;
  height: 500px; /* PC用高さ */
  border: 0;
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .accessmap__iframe {
    height: 360px; /* スマホでは少し低め */
  }
}

/* =========================
   バナー群セクション
   ========================= */

.banners {
  background-color: #ffffff;
  padding: 60px 20px;
}

.banners__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.banners__list {
  display: flex;
  flex-wrap: wrap; /* 自動折り返し */
  justify-content: center;
  gap: 20px; /* バナー間の余白 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.banners__item {
  flex: 0 0 auto;        /* コンテンツサイズに合わせる */
  text-align: center;
}

.banners__img {
  display: inline-block;
  width: auto;           /* 原寸キープ */
  max-width: 100%;       /* はみ出す場合だけ縮小 */
  height: auto;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.banners__img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* =========================
   スマホレイアウト
   ========================= */

@media (max-width: 768px) {
  .banners {
    padding: 40px 16px;
  }

  .banners__list {
    flex-direction: column; /* 縦並び */
    gap: 16px;
  }

  .banners__item {
    max-width: 100%;
  }

}

/* キャッチコピーの自動アンダーラインを非表示にする */
.hero__catch-line-underline {
  display: none !important;
}