/* ==========================================
   全体・共通設定(PC版)
   ========================================== */
/* --- 全体設定 --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ベース設定 */
body {
  color: #518FBB;                      
  font-family: "Zen Old Mincho", serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

/* --- コンテナ＆共通スタイル --- */
.section {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

/* セクションタイトル */
.section-title {
  text-align: center;
  font-size: 30px;
  color: #518FBB;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 80px;
  margin-bottom: 60px;
  position: relative;
  padding-bottom: 30px;
}


.btn-container {
  text-align: center;
  margin-top: 75px;
}

.btn {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.3s;
}

.btn:hover {
  opacity: 0.8;
}

.btn-outline {
  border: 1px solid #fff;
  color: #fff;
}

/* ==========================================
   ヘッダー設定
   ========================================== */
/* --- ヒーローヘッダー全体の設定 --- */
.hero-header {
  position: relative; /* 子要素の基準位置にする */
  width: 100%;
  overflow: hidden;
}

/* --- 背景画像エリア（一番背面に配置） --- */
.top-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1; /* 背面に配置 */
}

/* --- 画像の上に重ねる要素全体（前面に配置） --- */
.header-overlay-content {
  position: relative;
  z-index: 2; /* 背景画像より上（前面）に表示 */
  padding: 20px 40px;
}

/* --- ナビゲーションやロゴのレイアウト調整 --- */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%; /* 幅を確保 */
}

/* ★ ナビゲーション本体を右寄せにする指定を追加 */
.nav,
.global-nav {
  margin-left: auto; /* 左側に最大余白をとって右寄せにする */
}

/* --- ナビゲーションメニュー（横並び一列・白色化） --- */
.global-nav ul,
.nav ul {
  font-family: 'Noto Sans JP', sans-serif;
  display: flex;          /* 横並びにする */
  flex-direction: row;    /* 一列に並べる */
  list-style: none;       /* ドット（・）を消す */
  gap: 20px;              /* メニュー間の余白 */
  margin: 0;
  padding: 0;
}

.global-nav li,
.nav li {
  white-space: nowrap;    /* 途中で折り返さないようにする */
}

.global-nav a,
.nav a {
  color: #ffffff;         /* 文字色を白色にする */
  text-decoration: none;  /* 下線を消す */
  font-size: 18px;        /* フォントサイズ */
  font-weight: bold;      /* 中程度の太さ */
}

.global-nav a:hover,
.nav a:hover {
  opacity: 0.8;
}

.hero-content {
  position: relative; 
  z-index: 1;
  max-width: 1200px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 住所、電話番号、ボタンの位置調整 */
.contact-box {
  margin-top: 500px;
  margin-left: 60px;
}

/* 
   PC表示では、スマートフォン用のハンバーガーメニュー画像と
   スマホ用ナビゲーションを確実に非表示
*/
#menu-sp {
  display: none;
}

#nav-sp {
  display: none;
}

.btn-web-sp,
.btn-contact-sp { 
  display: none;
}

.hero-content img[alt="診療時間表"] {
  /* 最小 10px、画面幅の 5vw、最大 90px で動的に可変 */
  margin-right: clamp(10px, 5vw, 90px);
  
  /* 画像自体が画面からはみ出るのを防ぐ設定も追加 */
  max-width: 100%;
  height: auto;
}

/* --- 電話番号とアイコンの横並び設定 --- */
.contact-box .tel {
  display: flex;          /* 画像とテキストを横並びにする */
  align-items: center;    /* 上下の中央を揃える */
  gap: 8px;               /* アイコンと電話番号の間の余白 */
  font-size: clamp(16px, 4vw, 35px);
  font-weight: bold;
  margin-bottom: 0;
}

.contact-box .address {
  font-size: clamp(12px, 3vw, 20px);
  line-height: 1.4;
}

/* 電話アイコン画像のサイズ調整 */
.contact-box .tel img {
  width: clamp(18px, 4vw, 24px);
  height: auto;
  vertical-align: middle;
}

/* --- 住所と電話番号を Zen Old Mincho に変更 --- */
.contact-box .tel,
.address {
  font-weight: bold;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  white-space: nowrap; /* 住所の折り返しを防止 */
}

/* --- 休診日テキスト（右揃え・白色） --- */
.closed-days {
  font-size: 15px;
  color: #ffffff;      /* 文字色を白色にする */
  font-family: 'Noto Sans JP', sans-serif;
  text-align: right;   /* 右揃えにする */
  font-weight: medium; /* 中程度の太さ */
  margin-right: 95px;
}

/* PC版ヘッダーのメニュー部分カラー */
/* 下記、後で消す */
#text-blue.global-nav a, .nav a {
    color: #518FBB !important;
    text-decoration: none;
    font-size: 18px;
    font-weight: medium;
}

/* ロゴ画像の伸縮指定 */
.logo img {
  width: 100%;       /* 親要素の幅に合わせて伸縮 */
  max-width: 260px;  /* 大きくなりすぎないための上限値 */
  height: auto;      /* 縦横比を維持 */
  display: block;
}

/* ==========================================
   Secondフレーズ 全体・共通設定（スマホ・標準ベース）
   ========================================== */
/* --- キャッチフレーズ領域（スマホ時は高さ可変） --- */
.concept-visual {
  width: 100%;
  min-height: 30vh;   /* スマホ表示では画面高さの30%程度に縮小 */
  padding: 60px 20px;
  box-sizing: border-box;
  background-image: url('images/second.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* --- 内部要素 --- */
.concept-visual-inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* --- テキスト（clampで可変） --- */
.concept-visual .catchphrase {
  color: #ffffff;
  font-size: clamp(20px, 4.5vw, 35px);
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  margin: 0;
  font-family: "Zen Old Mincho", serif;
  text-align: left;
  line-height: 1.5;
}

.section-desc {
  text-align: center;
  color: #6E6F71;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
  line-height: 2;
  margin-bottom: 40px;
  padding: 0 20px;
}

/* ==========================================
   PC表示用の高さ・スタイル上書き（768px以上）
   ========================================== */
@media screen and (min-width: 768px) {
  .concept-visual {
    min-height: 960px; /* PC表示時のみ高さを960pxにしっかり広げる */
    padding: 0 40px;
  }
}

/* ==========================================
   診療時間 全体・共通設定
   ========================================== */
/* --- 診療時間セクションの横並び設定 --- */
.clinic-time-container {
  display: flex;
  justify-content: center; /* 中央に寄せる */
  align-items: center;     /* 上下の高さを中央揃え */
  gap: 40px;               /* 2つの画像の間の余白（お好みで調整） */
  max-width: 1000px;
  margin: 0 auto;
}

/* 左右の要素の幅調整 */
.clinic-time-container .time-table-img,
.clinic-time-container .chair-img {
  flex: 1;                 /* 幅を均等に分ける場合 */
  max-width: 500px;        /* 広がりすぎないように上限を設定 */
}

/* 画像が親要素からはみ出さないように設定（重要） */
.clinic-time-container img {
  width: 100%;             /* 親要素の幅に合わせて縮小 */
  height: auto;            /* 縦横比を維持 */
  display: block;
}

/* 休診日画像のサイズと位置調整 */
.closed-img {
  width: 60%;         /* 親要素に対して60%の大きさに縮小 */
  max-width: 300px;   /* 大きくなりすぎないように上限サイズを指定 */
  margin: 20px auto 0;/* 上に20pxの余白を作り、中央寄せにする */
  display: block;     /* 中央寄せを効かせるための指定 */
}

/* ==========================================
   診療科目 全体・共通設定
   ========================================== */
/* --- 診療科目（横並び＆ドット消去） --- */
/* リスト部分は横並び */
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0; /* リストの下に40pxの余白 */
  display: flex;
  gap: 20px;
  justify-content: center;
}

.menu-list li {
  flex: 1;
  max-width: 250px;
}

/* ボタン専用コンテナ：クリア指定で下に配置＆中央揃え */
.menu-btn-container {
  clear: both;        /* 横並びの影響を解除 */
  width: 100%;        /* 親要素いっぱいに広げる */
  text-align: center; /* ボタンを中央寄せ */
  margin-top: 40px;   /* 上に30pxの余白 */
}

/* ==========================================
   スタッフ紹介 全体・共通設定
   ========================================== */

/* カード全体の基本設定 */
.staff-card {
  display: flex;
  align-items: center; /* 上下中央揃え（上揃えにしたい場合は flex-start に変更） */
  gap: 80px;           /* 画像エリアとテキストの間隔 */
  margin-bottom: 100px; /* スタッフごとの下余白 */
}

/* 画像エリアの幅を固定 */
.staff-image {
  flex: 0 0 320px;     /* 横幅を320pxに固定（幅をより狭くしたい場合は280pxなどに変更） */
  max-width: 100%;     /* スマホで溢れないように設定 */
  text-align: center;  /* 下の文字（名前等）を中央寄せ */
}

/* テキストエリアは残りの幅をすべて使う */
.staff-info {
  flex: 1;
}

/* 画像自体のスタイル */
.staff-image img {
  width: 100%;         /* 親要素（320px）の幅に合わせる */
  height: auto;        /* 縦横比を維持 */
  border-radius: 12px; /* 角丸 */
  margin-bottom: 15px; /* 画像下の余白 */
}

/* 偶数番目（2人目、4人目...）の並び順を逆転させる */
.staff-card:nth-child(even) {
  flex-direction: row-reverse; /* 右から左へ配置 */
}

/* 名前・役職のスタイル */
.staff-name {
  text-align: center;                  /* 中央揃え */
  color: #518FBB;                      /* 文字色 */
  font-family: "Zen Old Mincho", serif;/* フォント */
  font-size: 22px;                     /* 文字サイズ */
  font-weight: 500;                    /* 太さ（mediumは数値で500と書くのが安全です） */
  margin-top: 10px;                    /* 上の余白 */
  margin-bottom: 15px;                 /* 下の余白 */
}

/* スタッフ紹介の本文（テキスト領域） */
.staff-info p {
  color: #6E6F71;      /* 文字色 */
  font-size: 14px;     /* 文字サイズ */
  font-family: "Zen Old Mincho", serif;/* フォント */
  
}

/* ==========================================
   アクセス 全体・共通設定
   ========================================== */
/* 親枠（MAPとテキストエリアを並べるコンテナ） */
.access-container {
  max-width: 1000px;
  margin: 30px auto;
  padding: 0 20px;
  display: flex;
  align-items: center;    /* 上下中央揃え */
  justify-content: center;
  gap: 40px;               /* MAPと右側テキストの間の余白 */
}

/* 左側：Google Map */
.access-map {
  flex: 1;                 /* 画面幅に合わせて伸縮 */
  min-width: 300px;
}

.access-map iframe {
  width: 100%;
  height: 400px;           /* お好みの高さに調整してください */
  border-radius: 8px;      /* Mapの角を丸くする場合 */
  display: block;
}

/* 右側：電車＆駐車場情報エリア */
.access-info {
  flex: 1;                 /* MAPと50%:50%の幅で並べる */
  display: flex;
  flex-direction: column;  /* 電車と駐車場を縦に並べる */
  gap: 35px;               /* 電車行と駐車場行の間の余白 */
}

/* 1行ごとの枠（アイコン ＋ テキスト） */
.access-item {
  display: flex;
  align-items: center;     /* アイコンと文章を上下中央揃え */
  gap: 12px;               /* アイコンとテキストの間の余白 */
}

/* アイコン設定 */
.access-icon {
  width: 28px;             /* アイコンのサイズ */
  height: auto;
  flex-shrink: 0;          /* 画面が狭くなってもアイコンが潰れないように固定 */
}

/* テキスト設定 */
.access-text {
  font-size: 1rem;
  color: #333;
  font-family: "Zen Old Mincho", serif;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================
   フッター 全体・共通設定
   ========================================== */
footer, .footer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  color: #6E6F71;
  font-size: 15px;
}

/* フッター内部のレイアウト（左右2列の配置） */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 5px;
  box-sizing: border-box;
}

/* フッター内の画像全般（レスポンシブ対応） */
footer img {
  max-width: 100%;
  height: auto;
}


/* ==========================================
   フッター 左側エリア（住所・電話・ボタン）
   ========================================== */
.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.footer-left p,
.footer-left .footer-address {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(10px, 3vw, 15px);
  line-height: 1.4;
  color: #6E6F71;
}

/* 電話番号（.footer-left .footer-tel にして優先度を上げてサイズ拡大） */
.footer-left .footer-tel {
  font-size: clamp(16px, 4vw, 28px);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;           /* 太字にして視認性を向上 */
  color: #6E6F71;
  display: flex;
  align-items: center;        /* 電話アイコンと番号の上下位置を中央揃え */
  gap: 8px;                   /* アイコンと数字の間の余白 */
  margin: 5px 0;
}

/* 電話アイコンのサイズ調整（大きくなりすぎるのを防止） */
.footer-left .footer-tel img {
  width: clamp(18px, 4vw, 24px);
  height: auto;
  vertical-align: middle;
}

/* ボタン配置 */
.footer-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}

.footer-buttons a,
.footer-buttons .btn {
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: 0;
}


/* ==========================================
   フッター 右側エリア（ナビゲーション・診療時間表）
   ========================================== */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* ナビゲーションメニュー */
footer nav ul,
.footer-nav ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

footer nav a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #6E6F71;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

footer nav a:hover {
  color: #518FBB;
}

/* 診療時間表 */
.footer-table {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: center;
  margin-top: 15px;
}

.footer-table img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-right: 0;
}

/* ▼ ここを追加：2枚目の画像（休診日）の上に余白を作る ▼ */
.footer-table img + img {
  margin-top: 18px;
}

/* ==========================================
   コピーライト & レスポンシブ
   ========================================== */
.copyright-pc {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

/* ==========================================
   スマホ版フッターの非表示設定
   ========================================== */
/* PC表示時（画面幅769px以上）は非表示 */
@media screen and (min-width: 769px) {
  .footer-sp {
    display: none !important;
  }
}

/* ==========================================
   クリニック紹介 全体・共通設定
   ========================================== */
/* タイトル下の青い下線 */
.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 626px;
  max-width: 100%;
  height: 2px;
  background-color: #70C3FD;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* 余白設定 */
.features {
  margin-bottom:30px;
}

/* リスト領域 */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 80px;
}

/* 各カードと画像の行設定 */
.feature-item {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* 偶数番目（02, 04）はカードと画像を左右反転 */
.feature-item.reverse {
  flex-direction: row-reverse;
}

/* テキストカード（枠線つき） */
.feature-card {
  border: 2px solid #518FBB;
  width: 100%;
  max-width: 478px;
  height: 330px;
  box-sizing: border-box;
  background-color: #fff;

  /* ---- Flexboxで上下左右中央揃え ---- */
  display: flex;
  flex-direction: column;   /* 中身を縦並びにする */
  justify-content: center; /* 上下中央揃え */
  align-items: center;     /* 左右中央揃え */
  padding: 20px;           /* 枠線との接触を防ぐ内側余白 */
}

.feature-card .number {
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: #518FBB;
  line-height: 1;
  margin-bottom: 10px;
  text-align: center;
}

.feature-card .title {
  font-size: 20px;
  color: #518FBB;
  margin: 0 0 15px 0;
  font-weight: bold;
  text-align: center;
}

/* 文章部分のみ左揃え */
.feature-card .description {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  width: 100%;           /* 幅いっぱいに広げて左揃えをきれいに見せる */
  text-align: left;      /* ★左揃えに変更 */
  /* ---- 左右に余白を追加 ---- */
  padding: 0 30px; /* 上下0、左右20px */
  box-sizing: border-box; /* 余白を含めて幅100%に収める */
}

/* 画像領域 */
.feature-image {
  flex: 1;
  width: 100%;
}

.feature-image img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  display: block;
}

/* ==========================================
   診療内容 全体・共通設定
   ========================================== */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 2列グリッドレイアウト */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 50px;
  row-gap: 145px;
}

/* 個別カード単位 */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-icon {
  width: 220px;
  height: 230px;
  margin-bottom: 65px;
}

/* 下部の薄青テキストカード */
.service-desc {
  max-width: 100%;
  height: 418px;
  background-color: #e3edf4;
  border: 1px solid #c7dbe8;
  border-radius: 12px;
  padding: 40px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 説明文 */
.service-desc .text {
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  margin: 0 0 25px 0;
  color: #6E6F71;
  width: 100%;
}

/* チェックリスト（ブロック全体をカード内中央へ、テキストは左揃え） */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: fit-content;
}

.check-list li {
  font-size: 18px;
  line-height: 1.8;
  color: #6E6F71;
  position: relative;
  padding-left: 26px;
}

/* チェックボックス風アイコン */
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 14px;
  border: 1.5px solid #518FBB;
  border-radius: 2px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 4px;
  height: 7px;
  border: solid #518FBB;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ==========================================
   お知らせ 全体・共通設定
   ========================================== */
/* ヘッダー全体の設定（背景画像を指定） */
.news-hero {
  width: 100%;
  height: 240px; /* デザインに合わせて高さを調整 */
  background-image: url('../images/information.png'); /* 背景画像を指定 */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: center; /* 左右中央揃え */
  margin-top: 40px;
}

/* 中央の半透明な白い帯部分 */
.news-hero-inner {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.75); /* 白色の半透明（不透明度75%） */
  padding: 20px 0; /* 上下の余白 */
  text-align: center;
}

/* 見出しテキスト */
.news-hero-title {
  font-size: 28px;
  font-weight: bold;
  color: #518FBB;
  letter-spacing: 0.5em; /* 文字間隔を少し広げる */
  margin: 0;
  padding-left: 0;
}

.news-section {
  padding-top: 85px;
  background-color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
}

.news-section .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* お知らせカード全体 */
.news-card {
  margin-bottom: 50px;
  border-radius: 4px;
  overflow: hidden;
}

/* ヘッダー部分（青帯） */
.news-header {
  background-color: #8bb3d3;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  gap: 30px;
}

/* Vol.番号バッジ */
.news-vol {
  background-color: #518FBB;
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
  padding: 8px 24px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* タイトルテキスト */
.news-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* 本文エリア（薄青背景） */
.news-body {
  background-color: #eaf1f6;
  padding: 35px 40px;
  color: #6E6F71;
  font-size: 15px;
  line-height: 1.9;
}

.news-body p {
  margin: 0 0 20px 0;
}

.news-body p:last-child {
  margin-bottom: 0;
}

.news-body strong {
  color: #444444;
  display: inline-block;
  margin-bottom: 4px;
}

/* 小見出し */
.news-body .sub-title {
  font-size: 16px;
  color: #518fbb;
  margin: 30px 0 10px 0;
  font-weight: bold;
}

/* ==========================================
   レスポンシブ（スマートフォン表示）
   ========================================== */
@media screen and (max-width: 767px) {
  body {
    min-width: 375px;
    margin: 0;
    padding: 0;
  }

  /* ==========================================
   ヘッダー設定
   ========================================== */
  /* PC用ナビゲーション非表示 */
  .nav {
    display: none;
  }

  .hero-content img[alt="診療時間表"],
  .closed-days,
  .btn-web,
  .btn-contact{
    display: none;
  }

   /* ハンバーガーメニュー */
  #menu-sp {
    float: right;
    padding: 0;
  /* スマホ表示ではハンバーガーメニュー画像を表示する */
    display: block;
    float: right;
    padding: 0;
    display: block !important;
    position: static !important;
    float: none !important;
    width: 32px;
    height: auto;
    cursor: pointer;
  }

  .btn-web-sp,
  .btn-contact-sp {
    display: block;
    float: right;
    padding: 0;
  }

 /* ★ スマホで縦並び＆余白をリセット */
  .hero-header {
    min-height: auto;
    overflow: visible;
  }

  .hero-content {
   display: flex;
   flex-direction: column;
   align-items: flex-start; 
   margin-top: 20px;
   padding-left: 50px; /* 好みの位置まで右へ寄せる */
  }

  .contact-box {
    margin-top: 20px !important; /* スマホ用に上書き */
    margin-left: 0 !important;  /* スマホ用に上書き */
  }

  /* 右側のボタン＋ハンバーガーメニューの領域 */
  .header-right-sp {
    display: flex;
    align-items: center;
    gap: 8px; /* 要素同士の横の隙間 */
  }

  /* ボタン画像の可変サイズ指定 */
  .btn-web-sp img,
  .btn-contact-sp img {
    width: 22vw;
    max-width: 120px;
    min-width: 70px;
    height: auto;
    display: block;
  }

  /* スマホ用ナビゲーション */
  #nav-sp {
    background-color: #ffffff;
    position: fixed;
    left: 0;
    top: 0;
    height: 45vh;
    width: 70vw;
    display: none;
    z-index: 100;
    /* 追加部分：四角く囲む設定 */
    border: 8px solid #518FBB; /* 線の太さ、種類、色 */
    box-sizing: border-box; /* 線の太さを要素の幅・高さに含める */
  }

  #nav-sp ul {
    padding-left: 0;
  }

  #nav-sp li {
    list-style: none;
  }

  /* ロゴと✖ボタンを横並びで同高さに揃える */
  #nav-sp .nav-header-sp {
   display: flex !important;
   justify-content: space-between !important; /* ロゴを左、✖を右に配置 */
   align-items: center !important;            /* ★ 上下中央で高さを揃える */
   width: 100%;
   box-sizing: border-box;

  }

  /* ロゴ画像のサイズ指定 */
  #logo-sp img {
   max-width: 180px;
   height: auto;
   display: block;
   margin: 15px;
  }

  /* ✖ボタンを親要素の右上から一定距離に固定 */
  #close {
   position: absolute;
   top: 15px;
   right: 20px; /* 画面端ではなく親要素の右端から20pxの内側に配置 */
   cursor: pointer;
  }

  /* ナビゲーションメニュー用ロゴ */
  #logo-sp {
    margin: 10px 0px 20px 20px;
  }

  #nav-sp a {
    display: block;
  }

  #nav-sp a:link {
    color: #518FBB;
  }

  #nav-sp a:visited {
    color: #518FBB;
  }

  #nav-sp a:hover {
    color: #518FBB;
    text-decoration: underline;
  }

  #nav-sp a:active {
    color: #518FBB;
  }

  #nav-sp .menu {
    text-decoration: none;
    display: block;
    margin: 0 40px;
    height: 44px;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: right top;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
  }

  /* スマホメニュー内のロゴや住所・電話番号エリアを非表示にする */
   #nav-sp .hero-content,
   #nav-sp .address,      /* 住所を囲んでいるクラス名や要素 */
   #nav-sp .tel img,     /* 電話アイコンのクラス名 */
   #nav-sp .tel {  /* 電話番号のクラス名 */
    display: none !important;
}

/* ==========================================
   各パーツのレスポンシブ調整
   ========================================== */
   
  /* 診療時間 */
  .clinic-time-container {
    flex-direction: column; /* スマホでは縦並びに戻す */
    align-items: center;
    gap: 20px;
  }

  /* 診療科目 */
  .menu-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列並び */
    gap: 16px; /* アイテム同士の間隔 */
    padding: 0 20px; /* 画面両端に少し余白を作る */
    margin-bottom: 24px;
  }

  .menu-list li {
    max-width: none !important;
    width: 100%;
    padding: 0; /* li側の内側余白をリセット */
  }

  .menu-list li img {
    width: 100% !important; /* カード幅いっぱいに拡大 */
    max-width: 100% !important;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .menu-btn-container {
    margin-top: 20px;
  }

  /* スタッフ紹介 */
  .staff-card,
  .staff-card:nth-child(even) {
    flex-direction: column; /* スマホでは上から順に縦並び */
  }
  
  .staff-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;       /* スマホ時も画像が大きくなりすぎないように制御 */
  }

  /* アクセス情報 */
  .access-container {
    flex-direction: column; /* スマホではMAPの下に情報を配置 */
    gap: 25px;
  }

  .access-map,
  .access-info {
    width: 100%;
  }

  .access-map iframe {
    height: 250px;         /* スマホ表示時はMapの高さを少しコンパクトに */
  }

  /* コピーライト */
  footer, .footer {
    padding: 5px 10px;
  }
  
  footer .address-text {
    font-size: 14px;
  }

  /* クリニック紹介 */
  .feature-item,
  .feature-item.reverse {
    flex-direction: column;
  }
  
  .feature-image img {
    height: auto;
  }

  /* 診療内容 */
  .services-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .service-desc {
    height: auto;
    padding: 30px 20px;
  }

  
/* お知らせ */
  .news-hero-inner {
    display: flex;
    flex-direction: row;          /* 横並びにする */
    justify-content: center;     /* 横方向の中央寄せ */
    align-items: center;         /* 縦方向の中央寄せ */
    width: 100%;                  /* 幅を画面一杯に広げる */
    padding: 0;                   /* PC版のpaddingをリセット */
    margin: 0 auto;               /* 中央配置 */
  }

  .news-hero-title {
    writing-mode: horizontal-tb; /* 横書きに指定 */
    font-size: 30px !important;              /* 文字サイズ */
    letter-spacing: 0.1em;        /* 文字間隔 */
    text-align: center;           /* 中央揃え */
    padding: 0;                   /* 左側の余白などをリセット */
    margin: 0;                    /* 位置ズレの原因になるマージンをリセット */
    position: static;             /* PC版で absolute 等を使っている場合のリセット */
    width: auto;                  /* 幅の固定を解除 */
  }

  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 20px;
  }

  .news-vol {
    font-size: 18px;
    padding: 5px 16px;
  }

  .news-title {
    font-size: 17px;
  }

  .news-body {
    padding: 25px 20px;
    font-size: 14px;
  }
  
  /* ==========================================
   フッター設定
   ========================================== */
  /* PC用のフッター全体を非表示 */
  .footer-container,
  .copyright-pc {
    display: none !important;
  }

 .site-footer {
   width: 100%;
   max-width: 450px; /* スマホサイズ固定幅（レスポンシブの場合は100%に調整） */
   margin: 0 auto;
   padding: 20px 16px 0px;
   background-color: #fff;
   font-family: 'Noto Sans JP', sans-serif;
   color: #6E6F71;
   box-sizing: border-box;
 }

  /* 上段レイアウト */
  .footer-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
  }

  .footer-logo img {
   width: 140px;
  height: auto;
 }

  .footer-btns {
   height: 44px; /* ボタン画像の高さを太く大きく調整 */
   width: auto;
  }

  /* 中段レイアウト */
  .footer-middle {
  display: flex;
  justify-content: center; /* 中身の要素を中央寄せ */
  align-items: center;     /* 上下方向も中央揃えにする場合（状況に合わせて flex-end や center ） */
  gap: 60px;               /* 住所エリアとPage Topボタンの間の余白 */
  margin-bottom: 20px;
  text-align: center;      /* テキスト類も中央揃え */
}

  .footer-info .zip,
  .footer-info .address {
   font-size: 15px;
   font-family: 'Noto Sans JP', sans-serif;
   font-weight:500;
   color: #6E6F71;
   line-height: 1.6;
   letter-spacing: 0.05em;
   text-align: left;
  }

  .footer-info .tel {
   display: flex;
   align-items: center;
   justify-content: flex-start; /* 左寄せ */  
   margin-top: 6px;
  }

  /* 電話アイコン（簡易SVG背景表示） */
  .tel-icon {
   display: inline-block;
   width: 28px;
   height: 28px;
  }

  .footer-info .tel a {
   font-size: 22px;
   font-weight: bold;
   color: #6E6F71;
   text-decoration: none;
   letter-spacing: 0.02em;
  }

  /* Page Top ボタン */
  .page-top {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 80px;
   background-color: #518FBB;
   font-family: 'Noto Sans JP', sans-serif;
   color: #fff;
   border-radius: 50%;
   text-decoration: none;
   font-size: 12px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }

  .page-top .arrow {
   display: block;
   width: 14px;
   height: 14px;
   border-top: 3px solid #fff;
   border-left: 3px solid #fff;
   transform: rotate(45deg);
   margin-bottom: 2px;
   margin-top: 6px;
  }

  /* 下段レイアウト */
  .footer-bottom {
   text-align: center;
  }

  .footer-bottom small {
   font-size: 10px;
  color: #6E6F71;
  }

  /* 親要素の余白指定 */
  .copyright-sp {
   text-align: center;
   margin-top: 20px;
   margin-bottom: 10px; /* uppercaseのPXを小pxへ修正 */
  }

  /* smallタグ自体にスタイルを適用（ブロック化して中央揃えとフォントを確実に適用） */
  .copyright-sp small {
   display: block; /* ブロック要素化して親のtext-alignを確実に効かせる */
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 700;
   font-size: 12px; /* 必要に応じてサイズを指定 */
   color: #6E6F71;  /* 必要に応じて文字色を指定 */
  }
}