/* ===== 初めての方へ・診療時間とアクセス（参考の「院」の段の組み方）：
   中央の名前、左に大きな写真・右に小さな四角、下に罫線で区切った2列の情報 ===== */
.info { position: relative; z-index: 0; overflow: hidden; padding: 12% 0 20%; }
.info--first { padding-bottom: 2rem; }
.info__name { color: var(--navy); font-size: clamp(1.25rem, 0.906rem + 1.47vw, 2.375rem); font-weight: 700; letter-spacing: 0.06em; text-align: center; }
.info__image { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 6%; }
.info__photo { width: 70%; max-width: 46.875rem; aspect-ratio: 750 / 460; }
.info__side { width: 39%; max-width: 26.25rem; margin-left: 1rem; aspect-ratio: 1; }
.info__map svg { display: block; width: 100%; height: 100%; }
.map__t { fill: var(--navy); font-family: var(--ff); font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.map__t--w { fill: #fff; font-size: 16px; }
.map__t--p { fill: var(--accent); font-family: var(--en); font-size: 15px; }
.map__t--s { fill: var(--accent); font-size: 14px; }

.info__content { display: flex; flex-wrap: wrap; justify-content: space-between; width: 95%; }
.info__block { width: 47%; margin-top: 3%; }
.info__part { margin-top: 2rem; }
.info__ttl {
  display: flex;
  align-items: center;
  height: 3.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: clamp(1rem, 0.962rem + 0.163vw, 1.125rem);
  font-weight: 700;
}
.info__ttl--plain { height: auto; border-bottom: 0; }
.info__p { margin-top: 1rem; line-height: 1.75; }
.info__p--s { margin-top: 0.25rem; }

/* 初めての方へ：ご予約からの流れ（番号と罫線） */
.flow li { display: flex; align-items: baseline; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); line-height: 1.7; }
.flow__n { flex: none; color: var(--accent); font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; }

/* 電話と予約 */
.info__tel { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 2.25rem; margin-top: 0.75rem; }
.tel { display: inline-flex; align-items: center; color: var(--accent); font-size: clamp(1.875rem, 1.837rem + 0.16vw, 2rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; }
.tel svg { flex: none; width: 1.75rem; height: 1.75rem; margin-right: 0.6rem; color: var(--accent-2); }

/* 診療時間の表 */
.hours { width: 100%; table-layout: fixed; }
.hours tr { height: 3.5rem; border-bottom: 1px solid var(--line); }
.hours tbody tr:last-child { border-bottom: 0; }
.hours th { font-size: clamp(0.875rem, 0.798rem + 0.33vw, 1.125rem); font-weight: 700; text-align: center; }
.hours thead th { color: var(--ink); }
.hours .hours__ttl { width: 22%; color: var(--navy); text-align: left; }
.hours td { color: var(--navy); font-weight: 700; text-align: center; }
.hours .hours__t { font-size: clamp(0.8125rem, 0.78rem + 0.16vw, 1rem); font-weight: 400; letter-spacing: 0.01em; text-align: left; white-space: nowrap; }
.hours .hours__half { color: var(--ink); font-size: clamp(0.75rem, 0.712rem + 0.16vw, 0.875rem); font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; }
.hours__note { margin-top: 0.75rem; font-size: 0.9375rem; }

.gmap { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.875rem; color: var(--accent); font-size: 1.125rem; }
.gmap::after { content: ""; width: 0.4rem; height: 0.4rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.4s ease; }
.gmap:hover::after { transform: translateX(2px) rotate(45deg); }

@media (max-width: 75rem) {
  .info__tel { flex-direction: column; align-items: flex-start; }
}
/* タブレット：表と文を1列にして、表の時刻が丸の列に詰まらないように */
@media (max-width: 56rem) {
  .info__content { width: 100%; }
  .info__block { width: 100%; margin-top: 2.5rem; }
}
@media (max-width: 40.625rem) {
  .info { padding: 22% 0 28%; }
  .info--first { padding-bottom: 1rem; }
  .info__image { flex-wrap: wrap; }
  .info__photo { width: 100%; }
  .info__side { width: 100%; max-width: none; margin: 1rem 0 0; aspect-ratio: 1 / 0.61; }
  .info__map { aspect-ratio: 1; }
  .info__content { width: 100%; }
  .info__block { width: 100%; margin-top: 2rem; }
  .hours .hours__ttl { width: 19%; }
  .hours .hours__t { white-space: normal; }
}