/* 全体の基本設定 */
body {
  font-family: 'Yu Gothic UI', 'Hiragino Sans', 'Roboto', 'Open Sans', 'Helvetica', 'Arial', 'Noto Sans JP', sans-serif;
  background-color: #ffffff; /* 白色 */
  color: #000000;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}


/* ナビゲーション（ヘッダーの上） */
.nav-wrapper {
  background-color: #db7093; /* 淡い赤紫色 */
  padding: 10px 0;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-menu {
  display: flex;
  justify-content: center;
  list-style: none; /* 黒い「・」を消す */
  padding: 0;
  margin: 0;
}

.nav-menu li {
  position: relative;
  padding-left: 12px; /* 縦棒のスペース */
}

.nav-menu li::before {
  content: "|";
  color: #ffffff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
}

.nav-menu li:first-child::before {
  content: ""; /* 最初の項目には縦棒を表示しない */
}

.nav-menu a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.1em;
  padding: 6px 12px;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.nav-menu a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ヘッダー全体 */
header {
  text-align: center;
}

/* ロゴ・医院名・電話番号 */
.clinic-header {
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.logo {
  height: 80px;
  margin-left: 20px;
}

.clinic-info h1 {
  font-size: 2.4em;
  margin: 0;
  color: #000000;
  margin-left: 20px;
}

.phone-box {
  margin-left: auto;
  margin-right: 20px;
  text-align: right;
}

.department {
  font-size: 1em;
  color: #000000;
  margin: 0;
  margin-bottom: 4px;
}

.phone {
  font-size: 1.4em;
  color: #000000;
  margin: 0;
}

/* スライドショー */
.slideshow {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

/* スライド画像 */
.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 0;
}

.slide-image.active {
  opacity: 1;
  z-index: 1;
}

/* 左側に常に表示される紹介文 */
.slide-caption {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  max-width: 400px;
  z-index: 2;
  text-align: left;
}

.slide-caption p {
  font-size: 1.1em;
  color: #000000;
  line-height: 1.6;
  margin: 0;
}

/* 診療時間 */
.slide-caption .hours-table {
  margin-top: 20px;
  font-size: 0.95em;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #ffffff;
}

.hours-table th,
.hours-table td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  font-size: 1em;
}

.hours-table th {
  background-color:  #8e354a; /* あずき色 */
  color: #ffffff;
}

.hours-table td {
  color: #000000;
}

.hours-table tr:nth-child(even) {
  background-color: #f9f2f4;
}

/* メインコンテンツ */
main {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
}

.section-title h3 {
  font-size: 16px;
  color: #000000;
  margin: 0 0 10px 0;
}

.highlight-o {
  font-size: 1.6em;       /* 通常より少し大きめに */
  color: #008000;         /* 緑色（標準のグリーン） */
  font-weight: bold;      /* 太字で強調 */
}

.news ul li h3 {
  font-weight: normal; 
  font-size: 1rem;
}

.news ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  color: #000000;
  font-size: 12px; /
}

li h3 {
  border-bottom: 1px dotted #800000; /* えんじ色の点線 */
  padding-bottom: 4px; /* 下線との間隔を調整 */
}

.news {
  background-color: #f5f5f5; /* 明るめのグレー */
}

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

.sakura-icon {
  width: 32px;         /* アイコンサイズ（調整可能） */
  height: auto;
  vertical-align: middle;
  margin-right: 8px;   /* 「お知らせ」との間隔 */
}

.sakura-line {
  text-align: center;
  margin: 20px 0;
}

.sakura-divider {
  text-align: center;
  margin: 30px 0; /* 上下の余白（調整可能） */
}

.sakura-divider img {
  width: 300px;   /* ラインの長さ（調整可能） */
  height: auto;
}


/* その他のセクション */
.services ul,
.doctor p,
.access p {
  color: #000000;
}

/* 医師紹介の写真 */
.doctor-profile {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  flex-wrap: wrap;
}

.doctor-photo {
  width: 300px;
  border-radius: 12px;
  flex-shrink: 0;
}

.doctor-text {
  flex: 1;
  min-width: 250px;
  background-color: #fff0f5; /* 薄いピンク（ラベンダーブラッシュ） */
  padding: 20px;
  border-radius: 12px;       /* 角丸でやさしい印象に */
}

.doctor-text p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #000000;
  margin: 0;
}

/* PC表示（デフォルト：2列） */
.button-grid {
  display: grid;
  grid-template-columns: repeat(2, auto); /* 2列 */
  gap: 12px;                              /* 適度な余白 */
  justify-content: center;
  margin: 20px 0;
}

.button-grid a {
  display: block;
}

.button-grid a img {
  width: 300px;   /* 幅を統一 */
  height: auto;   /* 高さは自動調整 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button-grid a img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.button-grid a img:hover,
.button-grid a img:active {
  transform: scale(1.05); /* 少し拡大 */
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.9); /* 桜色の光（ライトピンク） */
}

/* スマホ表示（幅600px以下：1列に切り替え） */
@media screen and (max-width: 600px) {
  .button-grid {
    grid-template-columns: 1fr; /* 1列に切り替え */
    gap: 16px;                  /* タップしやすい余白を確保 */
  }

  .button-grid a img {
    width: 90%;   /* 画面幅に合わせる */
    height: auto; /* 高さは自動 */
  }
}

.access-container {
  display: flex;              /* 横並び */
  gap: 20px;                  /* 説明文と地図の間に余白 */
  align-items: flex-start;    /* 上揃え */
  margin-top: 20px;
}

.access-text,
.access-map {
  flex: 2;                    /* 両方を同じ幅にする */
}

.access-text {
  font-size: 1.1em;
  line-height: 1.6;
}

.access-map iframe {
  width: 100%;                /* 親要素に合わせて伸縮 */
  height: 400px;
  border: none;
}

/* スマホ対応：縦並びに切り替え */
@media screen and (max-width: 768px) {
  .access-container {
    flex-direction: column;   /* 縦並び */
  }

  .access-map iframe {
    height: 300px;            /* スマホでは高さを少し低めに */
  }
}

/* フッター */
.clinic-footer {
  background-color: #f8f8f8;   /* 淡いグレーで落ち着いた雰囲気 */
  padding: 20px;
  text-align: center;          /* 中央揃えで整然と */
  font-size: 0.95em;
  color: #333;                 /* 落ち着いた文字色 */
  border-top: 1px solid #ddd;  /* 上に細いラインで区切り */
}

.clinic-footer a {
  color: #333;                 /* リンクも同じ色で統一 */
  text-decoration: none;
}

.clinic-footer a:hover {
  text-decoration: underline;  /* ホバー時だけ下線で分かりやすく */
}

.section-title {
  margin-top: 50px;     /* タイトルの上に余白を追加 */
  margin-bottom: 10px;  /* タイトルの下の余白 */
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #008b8b; 
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;              /* 文字が「戻る」なので少し広め */
  height: 60px;
  background-color: #ff69b4; /* 濃いピンク（ホットピンク） */
  color: white;              /* 文字色は白で見やすく */
  border-radius: 50%;
  text-align: center;
  line-height: 60px;         /* 文字を中央に配置 */
  font-size: 16px;           /* 「戻る」に合わせて文字サイズ調整 */
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
  font-weight: bold;         /* 文字を少し太くして視認性アップ */
}

/* ホバー時の演出 */
.back-to-top:hover {
  background-color: #ff1493; /* ディープピンクで少し濃く */
}

/* PC用：横並び */
.nav-menu ul {
  display: flex;
  gap: 20px;
}

/* ハンバーガーアイコン */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* スマホ用：右からスライド */
@media (max-width: 600px) {
  .hamburger {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -220px; /* 初期は画面外 */
    width: 200px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 6px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
  }

  .nav-menu ul {
    flex-direction: column;
    padding: 20px;
    gap: 15px;
  }

  .nav-menu.show {
    right: 0; /* 表示時に右からスライドイン */
  }
}
/* PC用：横並びナビゲーション */
.nav-menu ul {
  display: flex;
  gap: 20px;
  list-style: none;   /* ●を消す */
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  text-decoration: none;
  color: #fff;        /* 文字色を白に */
  font-size: 18px;
  padding: 8px 12px;
}

/* ホバー時の演出（少し淡いピンクに） */
.nav-menu li a:hover {
  color: #ffb6c1;     /* ライトピンク */
}

.hamburger {
  background-color: #ff69b4; /* 濃いピンク */
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
}
/* PC用：白文字 */
.nav-menu li a {
  text-decoration: none;
  color: #fff;        /* PCでは白 */
  font-size: 18px;
  padding: 8px 12px;
}

/* スマホ用：黒文字 */
@media (max-width: 600px) {
  .nav-menu li a {
    color: #000;      /* スマホでは黒 */
    font-size: 15px;
    padding: 5px;
  }
}
@media (max-width: 600px) {
  .nav-menu li a::before {
    content: "🌸";        /* 桜マーク */
    margin-right: 4px;    /* 文字との間隔を小さめに */
    font-size: 12px;      /* 小さめにして控えめに */
    vertical-align: middle;
    opacity: 0.8;         /* 少し薄めにして柔らかく */
  }
}
.slide-caption {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 50px;
}

.header-hours {
  margin-top: 15px;       /* キャッチコピーとの間隔 */
  display: inline-block;  /* 中央寄せにする */
  text-align: left;       /* 表は左寄せ */
}

.hours-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.hours-table th,
.hours-table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
}

@media (max-width: 600px) {
  .slideshow {
    height: auto;   /* スマホでは高さを画像に合わせる */
  }

  .slide-caption {
    position: static;     /* 画像の下に配置 */
    transform: none;
    background-color: transparent;
    margin-top: 3px;      /* ← 画像との間にほんの少し余白 */
    padding-top: 0;
    max-width: 95%;
    text-align: center;
    font-size: 16px;
  }

  .header-hours {
    margin-top: 3px;      /* ← キャッチコピーとの間隔も自然に */
    text-align: center;
  }

  .hours-table {
    width: 100%;
    font-size: 13px;
  }

  .hours-table th,
  .hours-table td {
    padding: 6px;
  }

  .slideshow img {
    display: block;
    margin: 3px 0;        /* ← 画像の下に3pxだけ余白を残す */
    padding: 0;
  }
}

/* PC・共通設定 */
.hours-table th {
  background-color: #8e354a; /* あずき色 */
  color: #fff;
}

.slideshow img {
  display: block;
  margin: 0;
  padding: 0;
}