/*
Theme Name: dentist
Theme URI: https://funos-studio.com/
Description: 独自テーマ
Version: 1.0.0
Author: S.F. Studio
Author URI: https://funos-studio.com/
*/


/* ------------------------------
  ベース設定 ＋ 可変サイズ変数
------------------------------ */

/* スクロールを滑らかに */
html {
  scroll-behavior: smooth;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* ページ全体の統一フォントサイズ設計 */
  --fs-body: clamp(0.938rem, 0.912rem + 0.13vw, 1.063rem);      /* 通常本文 */
  --fs-small: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);          /* 少し小さめ本文 */
  --fs-tiny: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem);       /* 補足テキスト */
  --fs-hero-title: clamp(1.625rem, 1.55rem + 0.38vw, 2rem);     /* メインタイトル */
  --fs-hero-label: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);     /* キャッチ（上の小ラベル） */
  --fs-section-title: clamp(1.3rem, 1.24rem + 0.3vw, 1.6rem);   /* セクション見出し */
  --fs-subtitle: clamp(1rem, 0.94rem + 0.3vw, 1.3rem);          /* 小見出し */
  --fs-logo-main: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem); /* ロゴ横の文字（今は不要） */

  /* 余白・角丸など */
  --space-section: clamp(1.25rem, 0.986rem + 1.13vw, 2rem);
  --space-section-bottom: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem);
  --space-card: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
  --radius-card: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
  --radius-chip: clamp(62.375rem, 62.353rem + 0.09vw, 62.438rem);

  /* 横幅関連 */
  --side-nav-width: clamp(13rem, 12.4rem + 3vw, 16rem);
  --content-padding-x: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
  --content-padding-top: clamp(1.25rem, 0.986rem + 1.13vw, 2rem);
  --content-padding-bottom: clamp(2rem, 1.648rem + 1.5vw, 3rem);
  /* --section-max-width: min(80rem, 100%); */
  --section-max-width: clamp(18.75rem, 3.75rem + 75vw, 93.75rem);

  /* カード共通デザイン */
  --card-bg: #ffffff;
  --card-border-color: #dbe4f0;
  --card-shadow-soft: 0 8px 24px rgba(15, 52, 96, 0.06);
  --card-radius: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
  --card-padding-block: clamp(1rem, 0.9rem + 0.6vw, 1.6rem);
  --card-padding-inline: clamp(1.1rem, 1rem + 0.6vw, 1.8rem);

}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
  line-height: 1.7;
  font-size: var(--fs-body);
  color: #333333;
  background: #f5f7fb;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
}

/* スマホ用の<br>クラスは常に表示にしておく（@media使わないため） */
.u-sp-only {
  display: inline;
}

/* ------------------------------
  ヘッダー
------------------------------ */

.site-header {
  border-bottom: 1px solid #e0e6f0;
  background: #ffffff;
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(0.5rem, 0.412rem + 0.38vw, 0.75rem) var(--content-padding-x);
  display: flex;
  justify-content: center; /* 全体中央 */
}

/* ロゴ＋キャッチコピーの縦並び */
.site-header__brand {
  display: flex;
  flex-direction: column;
  align-items: center;    /* 中央揃え */
  text-align: center;
  gap: clamp(0.25rem, 0.162rem + 0.38vw, 0.5rem);   /* ロゴとテキストの間を縮める */
}

/* ヘッダー右上のハンバーガー */
.site-header__toggle {
  display: none;              /* PCでは非表示 */
  margin-left: auto;
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}

.site-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  border-radius: 999px;
  background-color: #34495e;
}

/* ロゴ */
.site-logo-mark {
  overflow: hidden;
  margin-bottom: clamp(0.375rem, 0.287rem + 0.38vw, 0.625rem); /* ロゴ下の余白 */
}

/* キャッチコピー（大きく・視認性アップ） */
.site-logo-text__tagline {
  margin: 0;
  font-size: clamp(0.875rem, 0.787rem + 0.38vw, 1.125rem);   /* ★前より大きくしました */
  font-weight: 500;                    /* 少し太く（視認性UP） */
  color: #5a6e8a;
  line-height: 1.4;                    /* 読みやすい行間 */
}

/* スマホヘッダー調整（ロゴが大きすぎる対策） */
@media (max-width: 960px) {

  /* ヘッダー全体の高さを少し詰める */
  .site-header__inner {
    padding-block: clamp(0.4rem, 0.3rem + 1vw, 0.7rem);
  }

  /* キャッチコピーの文字を少し小さく */
  .site-logo-text__tagline {
    font-size: clamp(0.75rem, 0.74rem + 0.05vw, 0.8rem);
    line-height: 1.4;
  }

  /* ロゴ画像そのものを縮小 */
  .site-logo-mark img,
  .site-logo-mark .custom-logo {
    width: clamp(8.75rem, 8.125rem + 3.13vw, 11.875rem);  /* だいたい今の6〜7割くらいのイメージ */
    height: auto;
  }

  /* キャッチコピーとロゴの間のすき間も少しだけ狭く */
  .site-header__brand {
    gap: clamp(0.15rem, 0.1rem + 0.5vw, 0.35rem);
  }

  /* ロゴ下の余白を小さく（PC設定の上書き） */
  .site-logo-mark {
    margin-bottom: clamp(0.2rem, 0.15rem + 0.3vw, 0.4rem);
  }
}


/* ------------------------------
  レイアウト
------------------------------ */

.layout {
  display: flex;
  align-items: stretch;      /* ここを変更して、左右の高さを揃える */
  min-height: 100vh;         /* 画面よりは短くならないようにしておく */  
}

/* 左サイドメニュー */
.sidebar {
  width: 240px;
  flex-shrink: 0;

  /* 追加：サイドバー全体を同じ色に */
  background: #fafcff;
  border-right: 1px solid #e0e6f0;

}

.side-nav {
  flex: 0 0 var(--side-nav-width);
  width: var(--side-nav-width);
  min-height: 100vh;
  /* border-right: 1px solid #e0e6f0; */
  background: #fafcff;
}

.side-nav__inner {
  /* position: sticky;
  top: 0; */
  /* padding: clamp(14px, 2.5vw, 20px) clamp(10px, 2vw, 16px) clamp(18px, 3vw, 24px); */
  padding: 24px 16px 28px;  /* 上, 左右, 下 */
}

.side-nav__brand {
  margin-bottom: clamp(0.625rem, 0.55rem + 0.38vw, 1rem);
}

.side-nav__logo {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  background: #1f73b7;
  color: #ffffff;
  font-size: var(--fs-tiny);
  margin-right: clamp(0.25rem, 0.225rem + 0.13vw, 0.375rem);
}

.side-nav__name {
  font-weight: 600;
  font-size: var(--fs-small);
  color: #1f3a4d;
}

/* メニューは横幅に応じて折り返し */
.side-nav__menu {
  list-style: none;
  /* margin: clamp(10px, 1.8vw, 16px) 0 clamp(10px, 1.8vw, 16px); */
  margin: 12px 0 20px;   /* 上のロゴ(キャッチ)との距離＋下余白 */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.3rem + 0.15vw, 0.5rem);
}

.side-nav__menu li {
  margin: 0;
}

.side-nav__menu a {
  position: relative;
  display: block;
  width: 100%;  /* ボタンのように横幅いっぱい */
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
  font-weight: 500;  
  line-height: 1.8;
  color: #1f3a4d;
  white-space: nowrap;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.side-nav__menu a::before {
  content: "";  /* 左に縦線を出せる */
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 999px;
  background: transparent;
  transform: translateY(-50%);
}

.side-nav__menu a:hover,
.side-nav__menu a.is-active {
  background: #e0f0ff;
  font-weight: 600;  
}

.side-nav__menu a:hover::before,
.side-nav__menu a.is-active::before {
  background: #1f73b7;
}

.side-nav__cta {
  margin-top: 8px;  
  margin-bottom: clamp(0.625rem, 0.55rem + 0.38vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.375rem, 0.35rem + 0.13vw, 0.5rem);
}

/* サイドバー内のボタンは横幅いっぱいに */
.side-nav__cta .btn {
  width: 100%;
  border-radius: 999px;
  padding: clamp(0.55rem, 0.45rem + 0.4vw, 0.8rem)
           clamp(0.8rem, 0.7rem + 0.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.side-nav__info {
  border-top: 1px solid #e0e6f0;
  padding-top: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  font-size: var(--fs-tiny);
  color: #6b7b8c;
}

.side-nav__tel-label {
  margin: 0 0 2px;
}

.side-nav__tel-number {
  margin: 0;
  font-weight: 600;
  font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
  color: #1f3a4d;
}

.side-nav__tel-time {
  margin: 4px 0 0;
}

/* コンテンツ（右側） */

.content {
  flex: 1 1 min(700px, 100%);
  padding: var(--content-padding-top) var(--content-padding-x)
    var(--content-padding-bottom);

}

.section {
  max-width: var(--section-max-width);
  margin: 0 auto var(--space-section-bottom);
  margin-top: clamp(2rem, 1.648rem + 1.5vw, 3rem);
  margin-bottom: clamp(2rem, 1.648rem + 1.5vw, 3rem);

}

.section--card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--card-shadow-soft);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;  
}

.section--accent {
  background: #f2f7ff;
  box-shadow: none;  
}

/* ------------------------------
  見出し・テキスト
------------------------------ */

.section__title {
  margin: 0 0 clamp(1rem, 0.718rem + 1.2vw, 1.8rem);
  font-size: var(--fs-section-title);
  font-weight: 700;
  color: #1c3450;
  letter-spacing: 0.01em;
}

.section__lead {
  margin: 0 0 clamp(1rem, 0.718rem + 1.2vw, 1.8rem);
  font-size: var(--fs-small);
  font-weight: 400;
  color: #4b5a6b;
}

.section__lead-small {
  margin: 0 0 clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  font-size: var(--fs-tiny);
  font-weight: 400;  
  color: #4b5a6b;
}

.section__subtitle {
  margin: 0 0 clamp(0.6rem, 0.459rem + 0.6vw, 1rem);
  font-size: var(--fs-subtitle);
  font-weight: 600;
  color: #1f3a4d;
}

/* ------------------------------
  ボタン
------------------------------ */

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: var(--fs-small);
  padding: clamp(0.7rem, 0.6rem + 0.4vw, 1rem)
           clamp(1rem, 1rem + 0.6vw, 1.6rem);
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 999px;
  letter-spacing: 0.03em;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.btn--tel {
  width: 100%;
  background: #ffffff;
  border-color: #1f73b7;
  color: #1f73b7;
}

.btn--tel:hover {
  background: #e8f2ff;
}

.btn--reserve {
  background: #1f73b7;
  color: #ffffff;
  border: 1px solid #1f73b7;  
}

.btn--outline {
  background: #ffffff;
  border-color: #b4c2d1;
  border: 2px solid #1f73b7;
  color: #1f73b7;
}

.btn--outline:hover {
  background: #f5f7fb;
  background-color: #e9f3ff;
}

.section__btn-full {
  width: 100%;
  margin-top: clamp(1rem, 1.3vw, 1.5rem);  
}


/* ------------------------------
  ヒーローエリア
------------------------------ */

/* サブテキストと右画像の高さ調整 */
.hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
  align-items: center;  /* 縦方向も整う */
  min-height: clamp(16.25rem, 12.729rem + 15.02vw, 26.25rem); /* 画像とテキスト高さ */
}

.hero__text {
  flex: 1 1 clamp(13.75rem, 8.028rem + 24.41vw, 30rem);
}

.hero__image {
  flex: 1 1 clamp(17.5rem, 15.739rem + 7.51vw, 22.5rem);
}


/* 共通フレーム */
.hero__image-frame {
  margin: 0;
  border-radius: clamp(0.875rem, 0.787rem + 0.38vw, 1.125rem);
  overflow: hidden;
  background: linear-gradient(135deg, #e6f2ff, #ffffff);
  border: 1px solid #d3e2f5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  aspect-ratio: 16 / 9; /* 横長比率をキープ */
}


/* 実際の画像 */
.hero__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* キャッチ（小見出し） */
.hero__label {
  font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
  font-weight: 600;
  color: #6b7b8c;
  letter-spacing: 0.03em;
  margin-bottom: clamp(0.375rem, 0.287rem + 0.38vw, 0.625rem);
  display: block;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

/* メインコピー（H1相当） */
.hero__title {
  background: linear-gradient(90deg, #eef5ff 0%, #ffffff 40%);
  font-size: clamp(1.625rem, 1.449rem + 0.75vw, 2.125rem);   /* 大きく */
  font-weight: 700;                      /* 太め */
  line-height: 1.45;                     /* 行間を少し広めに */
  letter-spacing: 0.02em;                /* ほんの少し字間を空ける */
  margin-bottom: clamp(0.875rem, 0.743rem + 0.56vw, 1.25rem); /* ボタン・本文との余白 */
  color: #1f3a4d;                        /* 見出しの濃紺 */
  border-left: 4px solid #1f73b7;
  padding-left: 12px;
  padding: 8px 12px;
  border-radius: 6px;
}

/* リード文（説明） */
.hero__lead {
  font-size: var(--fs-small);
  line-height: 1.8;                    /* 読みやすく */
  color: #4b5a6b;
  margin-bottom: clamp(0.875rem, 0.743rem + 0.56vw, 1.25rem);
  max-width: clamp(30rem, 28.239rem + 7.51vw, 35rem);  /* 長すぎる行を防ぐ */
}

/* ボタンの間隔 */
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.625rem, 0.493rem + 0.56vw, 1rem);
  margin-top: clamp(0.375rem, 0.243rem + 0.56vw, 0.75rem);
}

.hero__btn-main {
  min-width: clamp(9.375rem, 8.715rem + 2.82vw, 11.25rem);  
  border-radius: 999px;
  padding: clamp(0.7rem, 0.6rem + 0.4vw, 1rem)
           clamp(1rem, 1rem + 0.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  background: #1f73b7;
  color: #ffffff;
  border: 1px solid #1f73b7;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.hero__btn-sub {
  min-width: clamp(8.125rem, 7.465rem + 2.82vw, 10rem);
  border-radius: 999px;
  padding: clamp(0.7rem, 0.6rem + 0.4vw, 1rem)
           clamp(1rem, 1rem + 0.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  background: #ffffff;
  border: 2px solid #1f73b7;
  color: #1f73b7;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.btn:hover,
.hero__btn-main:hover,
.hero__btn-sub:hover {
  transform: translateY(-1px);
  opacity: 0.95;
  box-shadow: 0 6px 18px rgba(15, 52, 96, 0.16);
}

/* メインCTAは少しだけ色を濃く */
.btn--reserve:hover,
.hero__btn-main:hover {
  opacity: 0.9;  
  background-color: #195d93;
  border-color: #195d93;
}

/* 枠だけボタンは背景を少しだけ青寄りに */
.hero__btn-sub:hover {
  background-color: #e9f3ff;
}

/* 未設定のときのプレースホルダー */
.hero__image-frame--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-tiny);
  color: #6b7b8c;
}

/* ------------------------------
  グリッド・リスト
------------------------------ */

.section__grid {
  display: grid;
  gap: clamp(0.75rem, 0.574rem + 0.75vw, 1.25rem);
}

/* 2カラム：画面に合わせて自動的に1カラム・2カラムに変化 */
.section__grid--2col {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* 3カラム：自動で折り返し */
.section__grid--3col {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.section__block {
  font-size: var(--fs-small);
  height: 100%;
  display: flex;
  flex-direction: column;

}

.section__block p {
  background: #f7fbff;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.8;
  font-size: var(--fs-small);
  font-weight: 400;
  color: #4b5a6b;
  flex-grow: 1;
}

.section__block .section__subtitle {
  position: relative;
  font-size: clamp(0.938rem, 0.871rem + 0.28vw, 1.125rem);
  font-weight: 600;
  padding-left: 12px;
  margin-bottom: clamp(0.375rem, 0.287rem + 0.38vw, 0.625rem);
  color: #2b4c63;
}

.section__block .section__subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 4px;
  height: 1.1em;
  border-radius: 999px;
  background: #1f73b7;
}

.list-step {
  padding-left: 1.2em;
  margin: 0;
}

.list-step li {
  margin-bottom: 0.3em;
}

.list-check {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.list-check li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.3em;
}

.list-check li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0.2em;
  font-size: 0.7em;
  color: #1f73b7;
}

/* カード一覧 */

.card-list {
  display: grid;
  gap: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
}

/* 3カラム・2カラムとも auto-fit で自動調整 */
.card-list--3col,
.card-list--2col {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card-list--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
}

.card {
  font-size: var(--fs-small);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--card-shadow-soft);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.card--border {
  box-shadow: none;
  border: 1px solid #dbe4f0;
  background: #fdfefe;
}

.card__title {
  font-size: clamp(0.938rem, 0.871rem + 0.28vw, 1.125rem);
  font-weight: 600;
  margin: 0 0 clamp(0.375rem, 0.331rem + 0.19vw, 0.5rem);
  color: #2b4c63;
}

.card__text {
  margin: 0 0 clamp(0.4rem, 0.32rem + 0.25vw, 0.6rem);
  font-size: var(--fs-small);
  color: #4b5a6b;
  font-weight: 400;
  line-height: 1.8;  
}

.card__link {
  font-size: var(--fs-tiny);
  color: #1f73b7;
  text-decoration: none;
}

.card__link::after {
  content: "＞";
  margin-left: 4px;
  font-size: 0.8em;
}

/* セクション4 下部の「詳しく見る」 */
.section__more-wrap {
  margin-top: clamp(1rem, 1.3vw, 1.5rem);
  text-align: right;
}

.section__more-link {

  font-size: var(--fs-small);
  color: #1f73b7;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid #1f73b7;
  padding-bottom: 2px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;


  display: inline-flex;
  align-items: center;
  gap: 4px;

}

.section__more-link:hover {
  opacity: 0.8;
  transform: translateX(2px);
}


/* 院長あいさつレイアウト：flex＋wrapで自動縦並び */
.section__flex {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 0.574rem + 0.75vw, 1.25rem);
  align-items: flex-start;
}

.section__image {
  flex: 0 1 clamp(8.75rem, 7.43rem + 5.63vw, 12.5rem);
}

/* 院長写真のフレーム */
.section__image-frame {
  aspect-ratio: 1 / 1;  /* 正方形に固定 */
  width: clamp(160px, 22vw, 240px);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #e9f2fb;
  border: 1px solid #d3e2f5;
}

/* セクション5専用*/
#clinic {
  margin-bottom: clamp(2rem, 2vw, 2.5rem);
}
/* 画像と文章を縦方向の中央揃えに */
#clinic .section__flex {
  align-items: center;
}
/* 画像カラムを少し広くする */
#clinic .section__image {
  flex: 0 0 clamp(11rem, 10vw + 4rem, 14rem);
}
/* フレーム自体も少し大きく */
#clinic .section__image-frame {
  width: clamp(190px, 24vw, 260px);
}

/* ボタンだけを右寄せ */
#clinic .section__body .btn {
  display: inline-block;
  margin-left: auto;   /* 右寄せ */
}

#clinic .section__body {
  display: flex;
  flex-direction: column;  /* 上から順に並べる */
  align-items: flex-start; /* テキストなどはそのまま左寄せ */
}

#clinic .section__body .btn {
  align-self: flex-end;    /* ボタンだけ右側へ移動 */
}
/* セクション5専用 */


/* 中の画像をきれいにフィットさせる */
.section__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section__image-placeholder {
  border-radius: clamp(0.625rem, 0.581rem + 0.19vw, 0.75rem);
  background: #e9f2fb;
  border: 1px solid #d3e2f5;
  padding: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem) 10px;
  text-align: center;
  font-size: var(--fs-tiny);
  color: #6b7b8c;
}

.director__name {
  text-align: left;
  font-weight: 600;
  font-size: clamp(1rem, 0.965rem + 0.15vw, 1.1rem);
  margin-top: 12px;
  color: #1a355e;
}

.section__body {
  flex: 1 1 260px;
  font-size: var(--fs-small);
}

.section__body p {
  margin: 0 0 0.7em;
}

/* セクション６ */
/* 診療時間テーブル */
.section__grid--1col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
}

.table-time {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-tiny);
}

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

.table-time th {
  background: #f1f5fb;
}

/* 診療時間テーブル：時間の文字を大きく */
.table-time th:first-child {
  font-size: clamp(1rem, 0.956rem + 0.19vw, 1.125rem);
  font-weight: 600;
  white-space: nowrap;
}

.table-time tbody th {
  text-align: left;
}

.table-note {
  margin: 6px 0 0;
  font-size: var(--fs-tiny);
  color: #6b7b8c;
}

/* アクセス */
#access {
  padding-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

/* 診療時間テーブルのはみ出し対策 */
#access .section__block:first-of-type {
  /* 診療時間ブロックだけ横スクロールを許可 */
  overflow-x: auto;
}

/* アクセス内の住所テキスト → 下にしっかり余白 */
#access .section__block p {
  margin-bottom: clamp(1.5rem, 1.236rem + 1.13vw, 2.25rem);
}

/* 診療時間テーブルがカードからはみ出さないように */
#access table {
  width: 100%;
  table-layout: fixed;     /* 列幅を自動で詰める */
}

/* テーブル自体は枠内におさめる */
#access .table-time {
  width: 100%;
  max-width: 100%;
  min-width: clamp(420px, 80vw, 640px);
  border-collapse: collapse;
}

/* 診療時間テーブル：時間の列を強調 */
#access .table-time tbody tr > :first-child {
  font-weight: 700;                /* 太字（しっかり強調） */
  color: #1e2f48;                  /* 濃い紺色：コントラストを明確に */
  font-size: clamp(0.95rem, 0.85rem + 0.2vw, 1.05rem); /* 少し大きく */
  letter-spacing: 0.02em;

  background-color: transparent;
  text-align: center;
}

/* Googleマップなどの埋め込みも横幅いっぱいに */
#access iframe {
  width: 100%;
  max-width: 100%;
}


.map-placeholder {
  position: relative !important;
  margin-top: 0 !important;
}

/* iframe が上に食い込まないようにする */
.map-placeholder iframe {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  display: block;
  width: 100%;
  height: 360px;
  border-radius: 12px;
  border: 0;
}

.section__tel-box {
  margin-top: clamp(0.5rem, 0.456rem + 0.19vw, 0.625rem);
  padding: clamp(0.5rem, 0.456rem + 0.19vw, 0.625rem) clamp(0.625rem, 0.581rem + 0.19vw, 0.75rem);
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #dbe4f0;
}

.section__tel-label {
  margin: 0 0 4px;
  font-size: var(--fs-tiny);
}

.section__tel-number {
  margin: 0;
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 18px);
  color: #1f3a4d;
}

.section__tel-time {
  margin: 4px 0 0;
  font-size: var(--fs-tiny);
  color: #6b7b8c;
}


/* ------------------------------
  診療案内ページ
------------------------------ */
/* 診察案内：ページ上部メイン画像 */
.treatment-visual {
  margin: 1.5rem 0 2rem;
  border-radius: 16px;
  overflow: hidden;
}

.treatment-visual img {
  width: 100%;
  display: block;
  max-height: 320px;        /* 高さの上限 */
  object-fit: cover;        /* 中央を残してトリミング */
}

/* カラム数の設定は下で@media指定 */
.treatment-list {
  display: grid;
  gap: clamp(1rem, 0.824rem + 0.75vw, 1.5rem);
}

/* 診療ブロック全体 */
.treatment-block {
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);  /* カード間の縦の余白 */  
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--card-shadow-soft);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;  
}
/* 最後のブロックだけ余白を詰める */
.treatment-block:last-of-type {
  margin-bottom: clamp(1rem, 0.8rem + 0.4vw, 1.4rem);
}

/* 内側レイアウト：PCは横並び、スマホは縦並び */
/* サブタイトルのすぐ下にテキスト＋画像行を出す */
.treatment-block__inner {
  display: flex;
  flex-wrap: wrap;         /* 折り返して、1行目に見出し、2行目に本文＋画像になるようにする */
  gap: 1.25rem;
  align-items: flex-start;
  margin-top: 0.5rem;      /* 見出しとの間の余白 */
}

/* 診察案内：見出し（一般歯科・小児歯科など）を常に左上にそろえる (>: 子孫セレクタ)*/
.treatment-block__inner > .section__subtitle {
  position: relative;

  flex: 0 0 100%;          /* 横幅いっぱい → 1行を占有 */
  order: -1;               /* 常に一番最初の行に配置 */
  text-align: left;        /* 念のため左寄せ指定 */

  margin: 0 0 clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  padding:
    clamp(0.45rem, 0.4rem + 0.2vw, 0.65rem)
    clamp(1.25rem, 1.188rem + 0.31vw, 1.563rem);
  margin-bottom: 0;        /* 下の余白は調整したければここで */
  font-weight: 700;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.5;        /* 見出しの行間を少し広げる */
  
  color: #1f3a4d;
  background: linear-gradient(90deg, #f2f7ff 0%, #ffffff 70%);
  border-radius: 999px;
}

/* 左にカラーラインを入れて“見出し感”アップ */
.treatment-block__inner > .section__subtitle::before {
  content: "";
  position: absolute;
  left: clamp(0.8rem, 0.79rem + 0.05vw, 0.85rem);
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 999px;
  background: #1f73b7;
  transform: translateY(-50%);
}


.treatment-block__text {
  flex: 1;
  font-weight: 400;
}

/* 診療案内：本文内の箇条書き */
.treatment-block__text ul {
  margin: clamp(0.5rem, 0.4rem + 0.3vw, 0.8rem) 0 0;
  padding-left: 1.3em;
  list-style: none;   /* デフォルトの黒丸を消す */
}

.treatment-block__text li {
  position: relative;
  padding-left: 1em;   /* 先頭アイコン分の余白 */
  margin-bottom: 0.25rem;
  line-height: 1.8;
  font-size: var(--fs-small);
}

.treatment-block__text li::before {
  position: absolute;
  left: 0;
  top: 1em;
  font-size: 0.5rem;
  color: #1f73b7;
}

/* 本文 → 箇条書きの間の余白 */
.treatment-block__text p + ul {
  margin-top: clamp(0.35rem, 0.3rem + 0.2vw, 0.6rem);
}


/* 画像側 */
.treatment-block__image {
  border: 1px solid #e3e7f0;  
  border-radius: 12px;
  overflow: hidden;
  /* 横長カードでも同じ比率でそろえる */
  flex: 0 0 clamp(10rem, 9.4rem + 3vw, 13rem);
  max-width: clamp(10rem, 9.4rem + 3vw, 13rem);

  /* align-self: flex-start; */
  aspect-ratio: 4 / 3;  /* 枠の比率を4:3で固定 */
}

/* PCサイズでは高さを固定してトリミング(横並び前提設定) */
.treatment-block__image img {
  width: 100%;
  height: 100%;          /* サムネイルの高さ */
  object-fit: cover;      /* 中央部分をトリミング */
  display: block;
}

/* 交互レイアウト：reverse が付いたものだけ左右入れ替え */
.treatment-block--reverse .treatment-block__inner {
  flex-direction: row-reverse;
}

/* 1440px以上だけ2カラム */
@media (min-width: 1440px) {
  .treatment-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .treatment-list .treatment-block {
    margin-bottom: 0;
    padding: 1.2rem 1.4rem;  /* ほんの少しだけ圧縮 */    
    height: 100%;
  }

  .treatment-block__image {
    flex: 0 0 clamp(11rem, 9rem + 4vw, 15rem);
    max-width: clamp(11rem, 9rem + 4vw, 15rem);
  }

}

/* 診療案内：タブレットでは少し高めでもOKにする */
@media (max-width: 960px) {
  /* ページ上部メイン画像 */  
  .treatment-visual img {
    max-height: 260px;
  }  
  .treatment-block__inner,
  .treatment-block--reverse .treatment-block__inner  {
    flex-direction: column;
    }

  /* 2カラムにした設定の見出しのflex指定をリセット */
  .treatment-block__inner > .section__subtitle {
    flex: 0 0 auto;     /* 高さを内容ぶんだけに戻す */
    width: 100%;        /* 横幅いっぱいに表示 */
    margin-bottom: clamp(0.6rem, 0.5rem + 0.3vw, 0.9rem);
  }

  .treatment-block {
    margin-bottom: 1.25rem;
  }

  .treatment-block__image {
    max-width: clamp(13.75rem, 12.5rem + 6.25vw, 20rem);
    margin-inline: auto;
  }
  .treatment-block__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;    /* 比率を固定 */
    object-fit: cover;      /* 中央トリミング */
  }

  .treatment-block__text {
    width: 100%; /* 横幅を統一 */
  }

  /* 背景の水色ボックスの横幅が揃うように display:block を明示 */
  .treatment-block__text p {
    display: block;
    width: 100%;
  }

}

/* 診療案内：スマホ */
@media (max-width: 400px) {
  .treatment-block {
    padding-inline: 1rem;  /* 少しだけ縮める */
  }
}

/* ------------------------------
  スタッフ紹介ページ
------------------------------ */
#staff-page .section__title {
  margin-bottom: clamp(0.9rem, 0.7rem + 0.5vw, 1.3rem);
}

/* スタッフ紹介ページの横幅・位置をTOPと統一 */
#staff-page {
  max-width: var(--section-max-width);  /* 80rem */
  margin: 2rem auto;                   /* 上下2rem・左右は自動で中央寄せ */
  padding: 0 1rem;
}


/* カード全体 */
.staff-card {
  display: flex;
  max-width: 80rem;      /* 親（80rem）の中で全幅を使う */
  margin: 0 auto clamp(2rem, 1.5rem + 1vw, 3rem);  /* 中央寄せのまま下に余白 */
  margin-inline: auto  ;         /* 中央寄せ */
  flex-direction: row;  /* 横方向に並べる */
  gap: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  align-items: flex-start;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--card-shadow-soft);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.staff-card__image {
  margin: 0;
  align-self: center;  /* 画像だけ中央寄せ */
  width: clamp(13.5rem, 12rem + 4vw, 17rem);; /* 画像枠のサイズ（可変） */
  flex: 0 0 clamp(13.5rem, 12rem + 4vw, 17rem); /* 幅を固定気味に */
  aspect-ratio: 1 / 1;             /* 正方形にする */
  overflow: hidden;                /* トリミング */
  border-radius: 10px;  /* 角丸 */  
}

/* 画像 */
.staff-card__image img {
    max-width: clamp(12.5rem, 10.5rem + 10vw, 22.5rem);  /* 画面が広いほど少しだけ大きく */
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;  /* 画像中央揃え */
    border-radius: 8px;   /* 優しい角丸 */
    object-fit: cover;  /* 中央を残して正方形にトリミング */
}

  /* テキスト部分の横幅調整 */
  #staff-page .staff-card__info {
  flex: 1 1 0;
  max-width: clamp(32rem, 45vw, 40rem); /* 行が長くなりすぎない範囲に */
  margin: 0;
  }

/* 情報欄 */
/* 氏名 */
.staff-card__name {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.6rem);
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #1f3a4d;
}

.staff-card__position {
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  margin-bottom: clamp(0.7rem, 0.5rem + 0.4vw, 1rem);
  font-weight: 600;
  color: #1f73b7;
}

  /* コメント・得意な治療・趣味のブロック調整 */
.staff-card__item {
  margin-bottom: clamp(0.9rem, 0.6rem + 0.4vw, 1.4rem);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.7;
  font-weight: 400;
}

.staff-card__item-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

@media (min-width: 1440px) {
  #staff-page .staff-card {
    max-width: clamp(60rem, 70vw, 68rem);  /* だいたい 960〜1088px くらいを目安 */
  }
}

/* タブ・スマホ対応 */
@media (max-width: 940px) {
  .staff-card {
    flex-direction: column;
  }

  .staff-card__image img {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 640px) {
  .staff-card {
    gap: 0.75rem;
    padding-block: clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
  }

  .staff-card__image {
    margin-bottom: 0.5rem;
  }
}

/* ------------------------------
  お知らせセクション（TOP）
------------------------------ */
.section-news {
  /* セクション間の余白は全体設計に合わせてお任せ */
  width: 100%;
}

/* リスト全体 */
.news-list {
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 0.662rem + 0.38vw, 1rem);
}

/* 1件分のカード */
.news-item {
  height: 100%;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border: 1px solid var(--card-border-color);
  box-shadow: var(--card-shadow-soft);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

/* 日付 ＋ カテゴリー */
.news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-tiny);
  color: #6b7b8c;
  margin-bottom: 0.5rem
}

.news-item__date {
  font-weight: 500;  
  letter-spacing: 0.03em;
}

.news-item__link {
  text-decoration: none;
  display: block;
}

.news-item__cat {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #e8f2ff;
  color: #1f73b7;
  font-size: var(--fs-tiny);
  font-weight: 500;  
}

/* タイトル ＋ 本文（抜粋） */
.news-item__text {
  margin-left: 1rem;
}

/* タイトル */
.news-item__title {
  margin: 0 0 0.5rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  font-weight: 600;
  color: #1f3a4d;
}

/* 本文（抜粋） */
.news-item__excerpt {
  margin: 0;
  font-size: var(--fs-tiny);
  font-weight: 400;  
  color: #4b5a6b;
  line-height: 1.8;
}

/* ホバー時のちょっとした動き（PCメイン） */
.news-item:hover {
  background: #f7fbff;
  box-shadow: 0 4px 18px rgba(18, 57, 104, 0.08);
  transform: translateY(-1px);
}

/* レイアウト：PCでは2列、スマホは1列 */
@media (min-width: 941px) {
  .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ------------------------------
  お知らせ個別ページ
------------------------------ */

.news-single__header {
  margin-bottom: clamp(0.75rem, 0.6rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid #dbe4f0;
  padding-bottom: clamp(0.5rem, 0.4rem + 0.6vw, 1rem);
}

.news-single__meta {
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--fs-tiny);
  color: #6b7b8c;
}

.news-single__date {
  letter-spacing: 0.03em;
}

.news-single__cat {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #e8f2ff;
  color: #1f73b7;
  font-size: var(--fs-tiny);
}

.news-single__title {
  margin: 0;
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.4rem);
  font-weight: 600;
  color: #1f3a4d;
}

/* お知らせ個別ページ用のアイキャッチ調整 */
.news-single__thumb {
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.6rem) auto;
  max-width: clamp(360px, 70%, 560px);
}

.news-single__body {
  margin-top: clamp(0.9rem, 0.7rem + 0.6vw, 1.4rem);
  font-size: var(--fs-small);
  font-weight: 400;  
  color: #4b5a6b;
  line-height: 1.9;
}

.news-single__body p {
  margin: 0 0 0.9em;
  line-height: 1.95;  
}

.news-single__footer {
  margin-top: clamp(1.25rem, 1rem + 0.9vw, 1.9rem);
  text-align: right;
}

.news-single__nav {
  margin-top: clamp(1.25rem, 1rem + 0.9vw, 1.9rem);
  padding-top: 0.75rem;
  border-top: 1px solid #e3e7f0;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--fs-tiny);
}

.news-single__nav a {
  font-weight: 500;  
  text-decoration: none;
  color: #1f73b7;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.news-single__nav a:hover {
  text-decoration: underline;
}

/* news 専用ラベル強調(個別ページ) */
/* 大見出し */
.news-heading {
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  margin: 2rem 0 1rem;
  margin-top: clamp(2.6rem, 2.4rem + 1vw, 3.6rem);
  margin-bottom: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem);
  padding-left: 0.75rem;
  border-left: 4px solid #1f73b7;
  color: #1f3a4d;
}

/* 小見出し */
.news-sub {
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  margin: 1.6rem 0 0.5rem;
  padding-left: 0.55rem;
  border-left: 3px solid #7baed2;
  color: #2b4c63;
}

/* 文中の強調 */
.news-label {
  font-weight: 700;
  padding-left: 0.45rem;
  color: #1f3a4d;
}

/* まとめ部分のチェックリスト用 */
.news-single__body.news-list {
  margin: 0.75rem 0 1.25rem;
  padding-left: 1rem;
  line-height: 1.85;
  font-size: var(--fs-small);
}

/* ------------------------------
  お知らせ一覧ページのみ設定
------------------------------ */
#news-archive .section--card {
  max-width: var(--section-max-width);
  margin-inline: auto;
}

/* 縦1列にする */
#news-archive .news-list.news-list--vertical {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.2vw, 1.5rem);
}

#news-archive .news-item__meta {
  margin-bottom: 0.35rem;
}

/* ul の中のカードを2カラム化 */
#news-archive .news-item {
  display: grid;  
  max-width: clamp(60rem, 64vw, 70rem);  /* 少しだけワイドにする */
  margin-inline: auto;   /* 中央寄せ */
  margin-bottom: clamp(1.25rem, 1rem + 0.8vw, 2rem);  
  gap: clamp(1rem, 0.8rem + 0.4vw, 1.3rem);  /* すき間を少しだけ詰める */  
  align-items: start;
}

#news-archive .news-item__title {
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.2rem);
}

#news-archive .news-item__text {
  margin-left: clamp(0.75rem, 0.5vw, 1.25rem);
}

#news-archive .news-item__excerpt {
  max-width: 38rem;   /* 行の長さを一定に */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

}

#news-archive .news-item__link  {
  display: flex;
}

/* PC用サムネイル設定（左側画像） */
#news-archive .news-item__thumb {
  margin: 0;
  max-width: clamp(10.5rem, 11vw, 13.5rem);  /* ほんの少し拡大 */
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

#news-archive .news-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タブレット専用：カードを少しコンパクトに */
@media (min-width: 960px) and (max-width: 1023px) {

  /* カード自体の上下余白を少し詰める */
  #news-archive .news-item {
    padding-block: clamp(0.9rem, 0.7rem + 0.5vw, 1.2rem);
    gap: clamp(0.9rem, 0.7rem + 0.5vw, 1.2rem);
  }

  /* サムネイルはやや小さめ＋高さも抑える */
  #news-archive .news-item__thumb {
    max-width: clamp(8.5rem, 7.5rem + 3vw, 11rem);
    aspect-ratio: 4 / 3;
  }

  /* テキストとのすき間は少しだけ */
  #news-archive .news-item__text {
    margin-left: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
  }
}


/* スマホ版：画像 → テキスト の縦並びに切り替え */
@media (max-width: 960px) {
  /* 横並びしている a を縦並びにする */
  #news-archive .news-item__link {
    display: flex;
    flex-direction: column;      /* 縦並び */
    align-items: flex-start;     /* 左寄せ */
  }

  /* li 側の display:grid はそのままでOK */

  #news-archive .news-item__thumb {
    margin: 0 auto clamp(0.6rem, 1vw, 1rem);
    max-width: clamp(12rem, 55vw, 18rem);
  }

  #news-archive .news-item__text {
    width: 100%;
    margin-left: 0;             /* 左の余白をリセット */
    margin-top: 0.3rem;         /* 画像とのすき間 */
  }

  #news-archive .news-item {
    padding-block: clamp(0.8rem, 0.7rem + 1vw, 1.1rem);
  }  
}


/* ------------------------------
  お知らせ一覧・個別共通
------------------------------ */
/* アイキャッチ画像：カード上部に横長で表示 */
/* お知らせ：テキスト上に少しワイドな画像（左寄せ） */
.news-item__thumb {
  margin: 0 auto 0.75rem;  /* 中央寄せ＋下に少し余白 */
  max-width: clamp(220px, 70%, 320px); /* カード幅の7割くらいまで */
  border-radius: 12px;
  overflow: hidden;
}

.news-item__thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;   /* うすめの横長 */
}

.news-item__cat {
  background: #d8eaff;
}

.news-list--vertical .news-item {
  width: 100%;
  max-width: none;
}

/* ------------------------------
   WEB予約ページ
------------------------------ */
/* WEB予約ページ用 */
.booking-section {
  margin-top: clamp(16px, 3vw, 24px);
}

/* 予約時間一覧：予約不可の枠（土曜午後の×表示） */
.booking-slot-close {
  text-align: center;
  color: #d22;           /* 赤系の色 */
  font-weight: 600;
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.9rem);
}

/* 予約フォーム：土曜午後エラー表示 */
.booking-error.booking-error--sat {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background-color: #ffe8e8;
  color: #d22;
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.6;
}

/* 無効化された送信ボタン */
.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WEB予約ページ 戻るボタン */
.booking-back {
  margin-bottom: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem);
}

.booking-back__btn {
  max-width: clamp(10rem, 8rem + 4vw, 14rem);
}


/* ------------------------------
  お問い合わせフォーム 共通
------------------------------ */

.cf-wrap {
  margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
}

.cf-wrap .wpcf7-form {
  font-size: var(--fs-body);
}

/* 1項目ごとのブロック */
.cf__row {
  margin-bottom: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);
}

/* ラベル */
.cf__row label {
  position: relative;
  padding-left: 0.8rem;
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: #1f3a4d;
}

.cf__row label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 3px;
  height: 1.1em;
  border-radius: 999px;
  background: linear-gradient(180deg, #1f73b7, #49a6e9);
}

/* ラベル内の改行はCSSで余白にするので非表示 */
.cf__row label br {
  display: none;
}

/* テキスト・セレクト・テキストエリア共通 */
.cf__row .cf-input,
.cf__row .cf-select,
.cf__row .cf-textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding:
    clamp(0.45rem, 0.4rem + 0.2vw, 0.6rem)
    clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
  border-radius: 6px;
  border: 1px solid #d1d9e6;
  background-color: #ffffff;
  font-size: var(--fs-body);
  line-height: 1.6;
  box-sizing: border-box;
}

.cf__row .cf-textarea {
  min-height: 8rem;
  resize: vertical;
}

/* プレースホルダー */
.cf__row .cf-input::placeholder,
.cf__row .cf-textarea::placeholder {
  color: #a0adba;
}

/* フォーカス時の枠色 */
.cf__row .cf-input:focus,
.cf__row .cf-select:focus,
.cf__row .cf-textarea:focus {
  outline: none;
  border-color: #1f73b7;
  box-shadow: 0 0 0 1px rgba(31, 115, 183, 0.12);
}

/* 同意チェック部分 */
.cf__row.cf__agree {
  margin-top: clamp(0.75rem, 0.6rem + 0.8vw, 1.25rem);
  padding:
    clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem)
    clamp(0.7rem, 0.6rem + 0.4vw, 1rem);
  border-radius: 8px;
  background: #f7fbff;
  font-size: var(--fs-tiny);
  color: #4b5a6b;
}

.cf__row.cf__agree a {
  font-weight: 500;  
  color: #1f73b7;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

/* 送信ボタンまわり */
.cf__actions {
  margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
}

/* Contact Form 7 の [submit class:cf-btn "送信する"] 用 */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(0.6rem, 0.55rem + 0.3vw, 0.85rem);
  border-radius: 999px;
  border: none;
  background: #1f73b7;
  color: #ffffff;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
}

.cf-btn:hover {
  opacity: 0.92;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.cf-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

/* バリデーションメッセージ */
.cf-wrap .wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  font-size: var(--fs-tiny);
  color: #c0392b;
}

.cf-wrap .wpcf7-response-output {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: var(--fs-small);
}

/* Turnstile の表示エリアをフォーム幅にフィットさせる */
.cf__captcha {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.cf__captcha iframe {
  max-width: 100% !important;
}


/* ------------------------------
  各ページ調整
------------------------------ */
/* TOPページ */
/* カードの外側（上下）余白統一 */
.section--card,
.staff-card,
.news-item,
.treatment-block {
  margin-bottom: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem);
}

/* 診療案内ページ */
/* 少しフッターとの距離をとる */
#treatment-page {
  padding-bottom: clamp(2rem, 1.5rem + 1vw, 3rem);
}

/* ------------------------------
  フッター
------------------------------ */

.site-footer {
  border-top: 1px solid #e0e6f0;
  background: #ffffff;
  padding: clamp(8px, 1.5vw, 12px) var(--content-padding-x);
  text-align: center;
  font-size: var(--fs-tiny);
  color: #7a8a9c;
}

.site-footer__cta {
  max-width: var(--section-max-width);
  margin: 0 auto clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  padding:
    clamp(0.9rem, 0.8rem + 0.4vw, 1.2rem)
    clamp(1rem, 0.9rem + 0.6vw, 1.6rem);
  border-radius: clamp(0.9rem, 0.8rem + 0.6vw, 1.4rem);
background: linear-gradient(
  to right,
  rgba(255,255,255,1) 0%,
  rgba(220,235,255,0.45) 20%,
  rgba(200,220,255,0.55) 50%,
  rgba(220,235,255,0.45) 80%,
  rgba(255,255,255,1) 100%
);
  text-align: center;
  box-shadow: 0 10px 30px rgba(31, 115, 183, 0.08);
}

.site-footer__cta-lead {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #1f3a4d;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
}

.site-footer__cta-sub {
  margin: 0 0 clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem);
  font-size: var(--fs-small);
  color: #4b5a6b;
}

.site-footer__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem);
}

.site-footer__cta-buttons .btn {
  flex: 1 1 clamp(9rem, 7rem + 6vw, 14rem);
  max-width: 16rem;
  width: auto;
  margin-left: 0;        /* 他のレイアウトの右寄せ指定を打ち消し */
  text-align: center;
}

/* CTA内のボタンは下端を揃える */
.site-footer__cta .btn {
  align-self: stretch;
}


/* フッター レイアウト */
.site-footer__inner {
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding-block: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  column-gap: clamp(3rem, 2rem + 4vw, 6rem);
  row-gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
}

.site-footer__col {
  min-width: clamp(13rem, 10rem + 5vw, 18rem);
  font-size: var(--fs-tiny);
  margin-bottom: clamp(0.5rem, 0.4rem + 0.4vw, 1rem);
}

/* 医院情報 */
.site-footer__name {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.2rem);
  color: #1f3a4d;
}

.site-footer__address,
.site-footer__tel,
.site-footer__time {
  margin: 0 0 0.3rem;
  line-height: 1.7;
}

/* フッターメニュー */
.site-footer__nav {
  margin-left: 0;              /* 左に寄せる指定があれば打ち消し */
  text-align: center;
  margin-left: clamp(1.5rem, 1rem + 2vw, 3rem);
}


.site-footer__nav-title {
  margin: 0 0 0.3rem;
  font-weight: 600;
  font-size: var(--fs-small);
  color: #1f3a4d;
  text-align: center;  /* PCでは左寄せのままでもOK。中央が良ければ center に */
  width: 100%;
}

.site-footer__nav-list {
  list-style: none;
  max-width: 18rem;  /* 2列ぶんの幅を制限 */  
  margin: 0 auto;
  padding: 0;
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(2, minmax(7rem, 1fr));
  gap: 0.35rem 1.5rem;
  justify-content: center;
}

.site-footer__nav-list a {
  text-decoration: none;
  font-size: var(--fs-tiny);
  color: #4b5a6b;
}

.site-footer__nav-list a:hover {
  text-decoration: underline;
}

/* コピーライトまわり */
.site-footer__copy-wrap {
  flex-basis: 100%;  /* 次段に落とす */
  text-align: center;  /* 中央揃え */
  margin-top: clamp(0.5rem, 0.4rem + 0.4vw, 0.9rem);
}

/* コピーライト */
.site-footer__copy {
  color: #7a8a9c;
  margin: 0;
  font-size: var(--fs-tiny);
}

.site-footer__policy {
  margin: 0;
  font-size: var(--fs-tiny);
}

.site-footer__policy a {
  text-decoration: none;
  color: #4b5a6b;
}

.site-footer__policy a:hover {
  text-decoration: underline;
}

.site-footer__credit {
  margin-left: 0.4rem;
}
/* コピーライト ここまで */

/* 右下固定の「先頭へ戻る」ボタン */
.to-top-button {
  position: fixed;
  right: clamp(1.2rem, 3vw, 2.4rem);
  bottom: clamp(1.5rem, 3vw, 2.7rem);
  z-index: 999;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: clamp(0.45rem, 0.4rem + 0.2vw, 0.6rem)
            clamp(0.9rem, 0.9rem + 0.4vw, 1.4rem);

  font-size: clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem);

  background: #1f73b7;
  color: #ffffff;
  opacity: 0.92;

  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(15, 52, 96, 0.18);

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.to-top-button:hover {
  background: #15548a;  /* 濃いめの青に */
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 52, 96, 0.22);
  opacity: 1;
}

/* スマホでは少し小さく */
@media (max-width: 960px) {
  .to-top-button {
    padding: 0.55rem 1.1rem;
    font-size: 0.8rem;
    right: 0.9rem;
    bottom: 1.2rem;
  }
}
/* 右下固定の「先頭へ戻る」ボタン ここまで */


/* ------------------------------
  タブレット・スマホ設定
------------------------------ */
/* 診療時間 */
@media (min-width: 1280px) {
  .time-cell {
    white-space: nowrap;      /* 1行に強制 */
  }

  .time-cell span {
    display: inline;          /* 通常の横並び */
  }
}

/* 2カラムのときだけ（941〜1060px）調整 */
/* 941〜1060px 専用：ヒーローの2カラム調整 */
@media (max-width: 1060px) and (min-width: 961px) {

  .hero__inner {
    flex-wrap: nowrap;  /* 折り返さない → 常に2カラム */
    gap: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
    align-items: flex-start;
  }

  /* テキストをやや広めにして右の空白を減らす */
  .hero__text {
    flex: 0 0 60%;
    max-width: 60%;
  }

  /* 説明文はカード幅いっぱいまで伸ばす */
  .hero__lead {
    max-width: 100%;
  }

  /* 画像カラム */
  .hero__image {
    flex: 0 0 40%;
    max-width: 40%;
    margin: auto 0;
  }

  /* 画像を少し縦長にして存在感アップ */
  .hero__image-frame {
    aspect-ratio: 4 / 3;
    max-height: 320px;
  }
}


@media (min-width: 961px) {
  .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;   /* 念のため：flex内でも上に揃える */
  }
}


@media (max-width: 960px) {
/* 960px以下のときヘッダーを追従させる */  
  .site-header {
    position: fixed;            /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;              /* 最前面に */
    background-color: #ffffff;  /* 透け防止・任意で色調整 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 影を付けて浮かせる */
  }

  /* ヘッダー高さぶんの余白を main に足す */
  body {
    padding-top: var(--header-height, 68px);
  }
/* 960px以下のときヘッダーを追従させる ここまで */  

  /* ハンバーガーを表示 */
  .site-header__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* レイアウト：コンテンツは1カラム */
  .layout {
    display: block;
    align-items: stretch;
  }

  /* サイドバーは画面左からスライドするパネルにする */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;        /* 左に固定 */
    width: 260px;
    max-width: 80vw;
    background: #f7fbff;
    border-right: 1px solid #e0e6f0;
    transform: translateX(-100%);  /* 初期状態は画面外 */
    transition: transform 0.3s ease;
    z-index: 900;
  }

  /* ボタンで .is-open が付いたら表示 */
  .sidebar.is-open {
    transform: translateX(0);
  }

  /* サイドメニュー内のスクロール調整 */
  .side-nav {
    min-height: 100%;
    padding-top: clamp(3.75rem, 3.527rem + 1.12vw, 5.313rem);
    border-right: none;
  }

  .side-nav__inner {
    position: relative;
    top: 0;
  }

  /* メインコンテンツは全幅 */
  .content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-inline: clamp(16px, 4vw, 24px);
    padding-left: clamp(2rem, 2vw, 3rem);    
  }

  /* セクション1 */
  /* 960px以下：1カラム（縦に並べる） */
  .hero__inner {
    flex-direction: column;
    align-items: stretch; /* 幅いっぱいに */
    gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.8rem);
    min-height: auto;  /* 画像のためのムダな高さをやめる */
  }

  .hero__text{
    flex: 1 1 100%;
    max-width: 100%;
  }

  .hero__image {
    flex: 0 0 auto;          /* 中身の高さだけにする */
  }

  /* 画像の比率をやや縦長にして面積アップ */
  .hero__image-frame {
    aspect-ratio: 16 / 9;
    max-height: 300px;
  }

  /* ヒーローだけ上下の内側余白を少し小さくする */
  .section.section--card.hero {
    padding-block: clamp(0.8rem, 0.6rem + 0.6vw, 1.2rem);
  }

  /* ヒーローの下だけ、次セクションとの間隔を少し狭く */
  .section.section--card.hero {
    margin-bottom: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  }

  .hero__title {
    margin-bottom: clamp(0.6rem, 0.5rem + 0.3vw, 0.9rem);
  }

  .hero__lead {
    margin-bottom: clamp(0.6rem, 0.5rem + 0.3vw, 0.9rem);
  }

  .hero__buttons {
    margin-top: clamp(0.3rem, 0.25rem + 0.2vw, 0.5rem);
  }


  /* セクション5専用 */
  /* スマホでは中央寄せ＆縦並び感を強める */  
  #clinic .section__flex {
    justify-content: center;
  }

  #clinic .section__image {
    flex: 0 0 auto;
  }

  #clinic .section__body {
    flex: 1 1 100%;
    line-height: 1.8;    
  }

  /* 画像を少し大きめ＆中央寄せ */
  #clinic .section__image-frame {
    width: clamp(200px, 55vw, 260px);
    margin-inline: auto;
  }

  #clinic .section__body .director__name {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
    margin-bottom: 8px;
  }
  /* セクション5専用 */

  /* フッター */
  /* スマホでは縦並び・中央寄せ気味に */
  .site-footer__inner {
    max-width: 100%;
    margin: 0 auto;
    padding-block: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);

    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(0.75rem, 0.6rem + 0.4vw, 1.1rem);
  }

  /* 医院情報ブロック */
  .site-footer__clinic {
    text-align: center;
    margin: 0;
  }

  .site-footer__nav {
    margin-left: 0;
    text-align: center;
  }

  /* メニュー2カラムはそのまま、中央寄せだけ強調 */
  .site-footer__nav-list {
    justify-content: center;
    justify-items: center;
  }

  /* コピーライトは一番下のセンター */
  .site-footer__copy-wrap {
    flex-basis: auto;
    width: 100%;
    text-align: center;
    margin-top: clamp(0.5rem, 0.4rem + 0.4vw, 0.9rem);
  }

}

@media (min-width: 621px) and (max-width: 1279px) {
  /* 診療時間 */
  .time-cell {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  /* 1行目：開始 + 〜 を横並びにまとめる */
  .time-cell .time-start,
  .time-cell .time-sep {
    display: inline;          /* 横並び */
  }

  /* 2行目：終了時間だけ改行 */
  .time-cell .time-end {
    display: block;           /* 改行して下段へ */
  }
}



/* スマホ（縦）〜小さめタブレット：ヒーロー下の余白を小さく */
@media (max-width: 620px) {
  /* ヒーロー(TOPページ) */
  .hero__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__btn-main,
  .hero__btn-sub {
    width: 100%;
    justify-content: center;
  }


  /* 診療時間 */
  /* テーブル全体の縦の余白をコンパクトに */
  .table-time th,
  .table-time td {
    padding-block: 0.2rem;
  }

  /* 時間セル：3行間を寄せる */
  .time-cell {
    white-space: normal;
    text-align: center;
    line-height: 1.1;
  }

  .time-cell span {
    display: block;         /* 3行に完全固定 */
    margin: 0;
    padding: 0;
  }

  /* フッター */
  .site-footer__cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .site-footer__cta-buttons .btn {
    flex: 0 0 auto;                        /* 伸びて巨大化するのを止める */
    max-width: clamp(11rem, 70vw, 15rem);  /* 画面の7〜8割くらいに幅調整 */
    margin: 0 auto;
    width: 100%;
    padding-block: 0.75rem;                /* 高さも少しだけ下げる */
  }

  .site-footer__nav-list {
    grid-template-columns: 1fr;
    justify-items: center;
  }

}

@media (max-width: 360px) {
  /* 当院が大切にしていること／当院の特徴 がはみ出さないようにする */
  /* セクション枠そのものを画面幅いっぱいに */
  #first,
  #features {
    max-width: 100%;
    margin-inline: 0;
  }

  /* カード内のグリッドは1カラム固定にする（念のため） */
  #first .section__grid.section__grid--2col,
  #features .section__grid.section__grid--2col {
    grid-template-columns: 1fr;
  }

  /* カードの左右パディングも少しだけ削って、余裕を作る */
  #first.section--card,
  #features.section--card {
    padding-inline: clamp(0.75rem, 0.6rem + 1vw, 1rem);
  }
  /* 当院が大切にしていること／当院の特徴 がはみ出さないようにする ここまで*/


  /* 診療時間・アクセスのカードの左右余白を少し削る */
  #access .section__card,
  #access .access-card,
  #access .timetable-wrapper {
    padding-inline: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  }

  /* 診療時間テーブルの文字サイズと余白を小さめに */
  #access table th,
  #access table td {
    font-size: clamp(0.65rem, 0.6rem + 0.3vw, 0.8rem);
    padding: 0.2rem 0.3rem;
  }

  /* Cloudflare Turnstile 専用
   ここ幅飛び出し防止 */
  .cf-turnstile,
  .cf-turnstile > div {
    width: 100%;
    max-width: 100%;
    transform: scale(0.90);
    transform-origin: left top;
  }

}