:root {
  --primary: #39a935;
  --primary-dark: #2f8f2d;
  --secondary: #8bc34a;
  --yellow: #f5c200;
  --light-green: #f1f8f2;
  --pale-green: #e8f3e6;
  --text-dark: #1f1f1f;
  --text: #374151;
  --muted: #6b7280;
  --border: #e5e7eb;
  --white: #fff;
  --shadow: 0 8px 24px rgba(31, 31, 31, 0.06);
  --shadow-soft: 0 8px 20px rgba(57, 169, 53, 0.14);
  --wrap: 1180px;
  --hero-wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--text);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.wrap, section, article, div, p, h1, h2, h3, b, small, summary, li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.wrap {
  width: calc(100% - 104px);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 0;
}
.pc { display: inline; }
.sp { display: none; }

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 250px;
  gap: 20px;
  align-items: center;
  width: calc(100% - 104px);
  max-width: var(--wrap);
  min-height: 76px;
  margin-inline: auto;
  padding-inline: 0;
  background: rgba(255, 255, 255, 0.96);
}
body::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: 29;
  height: 76px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #edf0ed;
  content: "";
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.logo img {
  flex: 0 0 auto;
  width: 58px;
  height: 52px;
  object-fit: cover;
  object-position: left center;
}
.nav {
  display: flex;
  justify-content: center;
  gap: 18px;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.nav a { position: relative; padding: 30px 0 25px; }
.nav a::after {
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 999px;
  content: "";
  opacity: 0;
}
.nav a:hover::after, .nav .current::after { opacity: 1; }
.tel {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  color: var(--primary-dark);
}
.tel img { width: 28px; height: 28px; margin-top: 1px; object-fit: contain; }
.tel strong { display: block; font-size: 24px; line-height: 1.1; white-space: nowrap; }
.tel small { display: block; margin-top: 4px; color: var(--text); font-size: 11px; font-weight: 700; white-space: nowrap; }
.menu-button { display: none; }

.hero {
  position: relative;
  overflow: hidden;
  width: calc(100% - 104px);
  max-width: var(--hero-wrap);
  margin-inline: auto;
  background: #fff url("./assets/site/hero-exterior-wide.png") center top / 100% auto no-repeat;
}
.hero::before {
  display: none;
  content: none;
}
.hero::after {
  display: none;
  content: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: none;
  min-height: clamp(360px, 42.8vw, 506px);
  margin-inline: 0;
  padding-inline: 0;
}
.hero-text { position: relative; z-index: 4; width: min(560px, 48%); padding: clamp(58px, 7vw, 88px) 0 clamp(56px, 7vw, 88px) clamp(24px, 3vw, 44px); }
.hero h1 {
  margin: 0 0 18px;
  color: var(--text-dark);
  font-size: clamp(34px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.38;
  overflow-wrap: normal;
  word-break: keep-all;
}
.hero h1 em { color: var(--primary); font-style: normal; }
.hero p {
  max-width: 560px;
  margin: 0;
  color: #253039;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
}
.hero-actions { display: flex; flex-wrap: nowrap; gap: 18px; margin-top: 28px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  min-width: 146px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.45);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.button img { width: 20px; height: 20px; object-fit: contain; }
.button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.button.yellow {
  background: #ffde37;
  border-color: #ffde37;
  color: #644c00;
}
.button.outline { background: #fff; color: var(--primary-dark); }
.hero-image {
  display: none;
}
.hero-image::before {
  content: none;
}

.section { position: relative; padding: 30px 0 0; }
.section.wrap { padding: 30px 0 0; }
.section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--primary-dark);
}
.section-heading.center {
  justify-content: center;
  margin-bottom: 24px;
  text-align: center;
}
.section-heading.center::before { display: none; }
.section-heading.center h2::after {
  display: block;
  width: 58px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--primary);
  border-radius: 999px;
  content: "";
}
.section-heading::before {
  display: none;
  content: none;
}
.section-heading.compact::before { display: none; }
.section-heading img { width: 28px; height: 28px; object-fit: contain; }
.section-heading h2 {
  margin: 0;
  color: var(--text-dark);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
}

.notice-card {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  padding: 34px 0 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.notice-title { text-align: center; }
.notice-title h2 {
  margin: 0;
  color: var(--text-dark);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}
.notice-title h2::after {
  display: block;
  width: 58px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--primary);
  border-radius: 999px;
  content: "";
}
.notice-list {
  overflow: hidden;
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding: 2px 22px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.notice-list article {
  display: grid;
  grid-template-columns: 128px 104px 1fr;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 800;
}
.notice-list article:last-child { border-bottom: 0; }
.notice-list time { color: var(--primary-dark); font-size: 15px; font-weight: 800; }
.notice-list span { justify-self: start; padding: 3px 14px 4px; background: var(--light-green); border: 1px solid #d7ead5; border-radius: 999px; color: var(--primary-dark); font-size: 13px; font-weight: 800; line-height: 1.35; }
.notice-list span.closed { background: #C42C2C; border-color: #A31E1E; color: #fff; }
.notice-list b { min-width: 0; font-size: 15px; font-weight: 800; }
.service-card i {
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  content: "";
  transform: rotate(45deg);
}
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature-card {
  min-height: 184px;
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
  text-align: center;
}
.feature-card img { width: 74px; height: 74px; margin: 0 auto 12px; object-fit: contain; }
.feature-card h3 { margin: 0 0 8px; color: var(--primary-dark); font-size: 15px; font-weight: 800; }
.feature-card p { margin: 0; color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.75; }

.medical-panel {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 24px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.medical-lead {
  min-height: 100%;
  padding: 34px 30px;
  background:
    linear-gradient(90deg, rgba(241, 248, 242, 0.95), rgba(255, 255, 255, 0.7)),
    url("./assets/site/inspection3.jpg") center right / cover no-repeat;
  border-radius: 10px;
}
.medical-lead h3 { margin: 0 0 18px; color: var(--primary-dark); font-size: 24px; line-height: 1.7; }
.medical-lead p { max-width: 320px; margin: 0; color: var(--text); font-size: 14px; font-weight: 700; line-height: 2; }
.panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 26px;
  padding: 9px 22px;
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}
.services-section { padding-top: 36px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  display: grid;
  grid-template-columns: 88px 1fr 16px;
  gap: 20px;
  align-items: center;
  min-height: 112px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.service-card img { width: 76px; height: 76px; object-fit: contain; }
.service-card h3 { margin: 0 0 4px; color: var(--text-dark); font-size: 17px; font-weight: 800; line-height: 1.35; }
.service-card p { margin: 0; color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.55; }
.service-card i { justify-self: end; }

#medical-detail {
  padding-top: 56px;
}
#medical-detail > .section-heading {
  justify-content: center;
  margin-bottom: 28px;
  text-align: center;
}
#medical-detail > .section-heading::before {
  display: none;
}
#medical-detail > .section-heading h2::after {
  display: block;
  width: 58px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--primary);
  border-radius: 999px;
  content: "";
}
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.topic-card {
  min-height: 372px;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.topic-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--primary-dark);
  font-size: 19px;
  font-weight: 800;
}
.topic-heading img { width: 72px; height: 72px; object-fit: contain; }
.topic-photo { width: 100%; height: 154px; object-fit: cover; border-radius: 12px; }
.topic-card p { margin: 18px 0 0; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.9; }
.topic-note { padding-top: 2px; }

.policy-section,
.doctor-profile {
  padding-top: 56px;
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.policy-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 128px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.policy-grid b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--light-green);
  border-radius: 50%;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 800;
}
.policy-grid h3 { margin: 0 0 6px; color: var(--primary-dark); font-size: 16px; font-weight: 800; line-height: 1.5; }
.policy-grid p { grid-column: 2; margin: 0; color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.8; }

.doctor-profile-box {
  position: relative;
  overflow: hidden;
  padding: 30px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(31, 31, 31, 0.05);
}
.doctor-profile-box::before,
.doctor-profile-box::after {
  display: none !important;
  background: none !important;
  content: none !important;
}
.doctor-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  gap: 42px;
  align-items: center;
}
.doctor-portrait {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
}
.doctor-profile > .section-heading.center {
  margin-bottom: 24px;
}
.doctor-name { margin: 0 0 18px !important; color: var(--text-dark) !important; font-size: 31px !important; font-weight: 800 !important; line-height: 1.4 !important; }
.doctor-name span { margin-right: 24px; color: var(--primary-dark); font-size: 18px; font-weight: 800; }
.doctor-copy p { margin: 0 0 14px; color: var(--text-dark); font-size: 16px; font-weight: 700; line-height: 2.05; }
.doctor-history-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 54px 0 28px;
  color: var(--text-dark);
}
.doctor-history-heading span {
  height: 1px;
  border-top: 1px dotted rgba(57, 169, 53, 0.45);
}
.doctor-history-heading h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: 0.06em; }
.doctor-info-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.28fr 1fr 1fr;
  gap: 24px;
}
.doctor-info-card {
  padding: 26px 28px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.12);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(31, 31, 31, 0.04);
}
.doctor-info-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--primary-dark);
  font-size: 22px;
  font-weight: 800;
}
.doctor-info-card h3 img { width: 38px; height: 38px; object-fit: contain; }
.doctor-info-card ul { margin: 0; padding: 0; list-style: none; }
.doctor-info-card li {
  position: relative;
  padding: 11px 0 11px 18px;
  border-bottom: 1px dotted rgba(57, 169, 53, 0.42);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}
.doctor-info-card li:last-child { border-bottom: 0; }
.doctor-info-card li::before {
  position: absolute;
  left: 0;
  top: 20px;
  width: 5px;
  height: 5px;
  background: var(--primary);
  border-radius: 50%;
  content: "";
}

.facility-section {
  padding-top: 56px;
}
.facility-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 0;
  padding: 34px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.facility-intro {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.facility-intro p { margin: 0; color: var(--text-dark); font-size: 15px; font-weight: 700; line-height: 2.2; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-grid article {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(31, 31, 31, 0.06);
  text-align: center;
}
.gallery-grid img { width: 100%; height: 142px; object-fit: cover; }
.gallery-grid h3 { margin: 0; padding: 12px 10px 14px; color: var(--primary-dark); font-size: 14px; font-weight: 800; line-height: 1.45; }

.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 56px 0 34px;
}
.info-card {
  padding: 30px;
  background: #fff;
  border: 1px solid rgba(57, 169, 53, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.info-card table { width: 100%; margin-top: 14px; border-collapse: collapse; color: var(--text-dark); font-size: 12px; text-align: center; }
.info-card th, .info-card td { padding: 8px 7px; border: 1px solid #cfe3ce; background: #fff; }
.info-card thead th { background: #f8fbf6; font-weight: 800; }
.info-card tbody td { color: var(--primary); font-size: 18px; font-weight: 800; line-height: 1; }
.info-card tbody td:last-child { color: var(--text-dark); font-size: 12px; }
.hours-mobile-list { display: none; }
.note { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; font-size: 12px; }
.note strong { color: #f05252; }
.access-info p, .parking-info p { margin: 0 0 12px; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.8; }
.access-info a { display: block; margin: 10px 0 14px; color: var(--primary-dark); font-size: 24px; font-weight: 800; line-height: 1.2; }
.access-main strong { color: var(--primary); font-size: 24px; }
.info-card > img { width: 100%; height: 154px; object-fit: contain; background: #f7faf7; border-radius: 8px; }

.footer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f3faf4, #fff),
    url("./assets/logo/koshiya-logo-original.png") right 10% center / 110px auto no-repeat;
}
.footer-inner { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr; gap: 44px; align-items: center; padding: 40px 0 34px; }
.footer-brand p { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--primary-dark); font-size: 20px; font-weight: 800; }
.footer-brand a { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--primary-dark); font-size: 28px; font-weight: 800; line-height: 1.2; }
.footer-brand a img { width: 30px; height: 30px; object-fit: contain; }
.footer-brand small { display: block; margin-top: 5px; color: var(--text); font-size: 11px; }
.footer nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 42px; color: var(--text-dark); font-size: 12px; font-weight: 700; }
.footer-copy { margin: 0; color: var(--primary-dark); font-size: 20px; font-weight: 700; line-height: 1.9; }
.footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0 max(48px, calc((100vw - var(--wrap)) / 2 + 48px));
  background: linear-gradient(90deg, #309344, #45a965);
  color: #fff;
  font-size: 11px;
}
.footer-bottom a { position: absolute; right: max(28px, calc((100vw - var(--wrap)) / 2 + 28px)); bottom: 9px; width: 27px; height: 27px; }
.footer-bottom img { width: 27px; height: 27px; object-fit: contain; }
.mobile-nav { display: none; }

@media (max-width: 1160px) {
  .header { grid-template-columns: 250px 1fr 170px; gap: 12px; }
  .logo { font-size: 14px; }
  .logo img { width: 52px; height: 48px; }
  .nav { gap: 10px; font-size: 10px; }
  .tel strong { font-size: 18px; }
  .tel small { font-size: 9px; }
  .hero-inner {
    grid-template-columns: 1fr;
    width: calc(100% - 72px);
  }
  .hero h1 { font-size: 34px; }
  .hero p { max-width: 510px; }
  .hero-actions { gap: 12px; }
  .button { min-height: 42px; padding-inline: 19px; }
}

@media (min-width: 901px) {
  :root {
    --wrap: 1475px;
    --hero-wrap: 1475px;
  }

  body {
    font-size: 20px;
  }

  .wrap,
  .header,
  .hero {
    width: calc(100% - 80px);
  }

  .header {
    grid-template-columns: 412px minmax(0, 1fr) 312px;
    gap: 25px;
    min-height: 95px;
  }

  body::before {
    height: 95px;
  }

  .logo {
    gap: 13px;
    font-size: 21px;
  }

  .logo img {
    width: 73px;
    height: 65px;
  }

  .nav {
    gap: 23px;
    font-size: 16px;
  }

  .nav a {
    padding: 38px 0 31px;
  }

  .nav a::after {
    bottom: 21px;
    height: 3px;
  }

  .tel {
    gap: 10px;
  }

  .tel img {
    width: 35px;
    height: 35px;
  }

  .tel strong {
    font-size: 30px;
  }

  .tel small {
    font-size: 14px;
  }

  .hero-inner {
    min-height: clamp(450px, 42.8vw, 633px);
  }

  .hero-text {
    width: min(700px, 48%);
    padding: clamp(73px, 7vw, 110px) 0 clamp(70px, 7vw, 110px) clamp(30px, 3vw, 55px);
  }

  .hero h1 {
    margin-bottom: 23px;
    font-size: clamp(43px, 3.2vw, 53px);
  }

  .hero p {
    max-width: 700px;
    font-size: 18px;
  }

  .hero-actions {
    gap: 23px;
    margin-top: 35px;
  }

  .button {
    min-height: 53px;
    min-width: 183px;
    padding: 11px 25px;
    font-size: 15px;
  }

  .button img {
    width: 25px;
    height: 25px;
  }

  .section {
    padding-top: 38px;
  }

  .section.wrap {
    padding-top: 38px;
  }

  .section-heading.center {
    margin-bottom: 30px;
  }

  .section-heading h2,
  .notice-title h2 {
    font-size: 33px;
  }

  .section-heading.center h2::after,
  .notice-title h2::after,
  #medical-detail > .section-heading h2::after {
    width: 73px;
    height: 4px;
    margin-top: 13px;
  }

  .notice-card {
    gap: 23px;
    padding-top: 43px;
  }

  .notice-list {
    padding: 3px 28px;
    border-radius: 18px;
  }

  .notice-list article {
    grid-template-columns: 160px 130px 1fr;
    min-height: 53px;
    font-size: 19px;
  }

  .notice-list time,
  .notice-list b {
    font-size: 19px;
  }

  .notice-list span {
    padding: 4px 18px 5px;
    font-size: 16px;
  }

  .feature-grid,
  .topic-grid,
  .policy-grid,
  .doctor-info-grid,
  .info-cards {
    gap: 30px;
  }

  .feature-card {
    min-height: 230px;
    padding: 30px 30px 28px;
    border-radius: 23px;
  }

  .feature-card img {
    width: 93px;
    height: 93px;
    margin-bottom: 15px;
  }

  .feature-card h3 {
    margin-bottom: 10px;
    font-size: 19px;
  }

  .feature-card p {
    font-size: 15px;
  }

  .services-section {
    padding-top: 45px;
  }

  .service-grid {
    gap: 28px;
  }

  .service-card {
    grid-template-columns: 110px 1fr 20px;
    gap: 25px;
    min-height: 140px;
    padding: 23px 28px;
    border-radius: 20px;
  }

  .service-card img {
    width: 95px;
    height: 95px;
  }

  .service-card h3 {
    font-size: 21px;
  }

  .service-card p {
    font-size: 16px;
  }

  .service-card i {
    width: 10px;
    height: 10px;
  }

  #medical-detail,
  .policy-section,
  .doctor-profile,
  .facility-section {
    padding-top: 70px;
  }

  #medical-detail > .section-heading {
    margin-bottom: 35px;
  }

  .topic-card {
    min-height: 465px;
    padding: 33px 33px 35px;
    border-radius: 23px;
  }

  .topic-heading {
    gap: 18px;
    margin-bottom: 23px;
    font-size: 24px;
  }

  .topic-heading img {
    width: 90px;
    height: 90px;
  }

  .topic-photo {
    height: 193px;
    border-radius: 15px;
  }

  .topic-card p {
    margin-top: 23px;
    font-size: 18px;
  }

  .policy-grid article {
    grid-template-columns: 58px 1fr;
    gap: 18px;
    min-height: 160px;
    padding: 30px 33px;
    border-radius: 23px;
  }

  .policy-grid b {
    width: 45px;
    height: 45px;
    font-size: 23px;
  }

  .policy-grid h3 {
    font-size: 20px;
  }

  .policy-grid p {
    font-size: 16px;
  }

  .doctor-profile-box {
    padding: 38px;
    border-radius: 30px;
  }

  .doctor-intro {
    gap: 53px;
  }

  .doctor-portrait {
    height: 450px;
    border-radius: 20px;
  }

  .doctor-name {
    font-size: 39px !important;
  }

  .doctor-name span {
    margin-right: 30px;
    font-size: 23px;
  }

  .doctor-copy p {
    font-size: 20px;
  }

  .doctor-history-heading {
    gap: 18px;
    margin: 68px 0 35px;
  }

  .doctor-history-heading h3 {
    font-size: 30px;
  }

  .doctor-info-card {
    padding: 33px 35px;
    border-radius: 23px;
  }

  .doctor-info-card h3 {
    gap: 15px;
    margin-bottom: 23px;
    font-size: 28px;
  }

  .doctor-info-card h3 img {
    width: 48px;
    height: 48px;
  }

  .doctor-info-card li {
    padding: 14px 0 14px 23px;
    font-size: 18px;
  }

  .doctor-info-card li::before {
    top: 25px;
    width: 6px;
    height: 6px;
  }

  .facility-panel {
    gap: 30px;
    padding: 43px;
    border-radius: 23px;
  }

  .facility-intro {
    max-width: 850px;
  }

  .facility-intro p {
    font-size: 19px;
  }

  .gallery-grid {
    gap: 23px;
  }

  .gallery-grid article {
    border-radius: 18px;
  }

  .gallery-grid img {
    height: 178px;
  }

  .gallery-grid h3 {
    padding: 15px 13px 18px;
    font-size: 18px;
  }

  .info-cards {
    padding: 70px 0 43px;
  }

  .info-card {
    padding: 38px;
    border-radius: 23px;
  }

  .section-heading img {
    width: 35px;
    height: 35px;
  }

  .info-card table {
    margin-top: 18px;
    font-size: 15px;
  }

  .info-card th,
  .info-card td {
    padding: 10px 9px;
  }

  .info-card tbody td {
    font-size: 23px;
  }

  .info-card tbody td:last-child {
    font-size: 15px;
  }

  .note {
    gap: 15px;
    margin-top: 15px;
    font-size: 15px;
  }

  .access-info p,
  .parking-info p {
    margin-bottom: 15px;
    font-size: 18px;
  }

  .access-info a,
  .access-main strong {
    font-size: 30px;
  }

  .info-card > img {
    height: 193px;
  }

  .footer-inner {
    gap: 55px;
    padding: 50px 0 43px;
  }

  .footer-brand p,
  .footer-copy {
    font-size: 25px;
  }

  .footer-brand a {
    gap: 13px;
    font-size: 35px;
  }

  .footer-brand a img {
    width: 38px;
    height: 38px;
  }

  .footer-brand small {
    font-size: 14px;
  }

  .footer nav {
    gap: 13px 53px;
    font-size: 15px;
  }
}

@media (max-width: 900px) {
  body { padding-bottom: 66px; font-size: 15px; }
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .wrap {
    width: 100%;
    max-width: var(--wrap);
    padding-inline: 20px;
  }
  .pc { display: none; }
  .sp { display: block; }
  .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 70px;
    padding: 8px 20px;
  }
  body::before { height: 70px; }
  .logo { flex: 1 1 auto; max-width: calc(100vw - 88px); font-size: 15px; white-space: normal; }
  .logo img { width: 48px; height: 44px; }
  .menu-button {
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 50%;
  }
  .menu-button span { width: 20px; height: 2px; background: var(--primary-dark); border-radius: 999px; }
  .menu-button b { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  .nav {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    left: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 8px 0; font-size: 12px; }
  .nav a::after { bottom: 3px; }
  .tel { display: none; }
  .hero { width: 100%; max-width: none; }
  .hero-inner { grid-template-columns: 1fr; width: 100%; max-width: none; min-height: 0; }
  .hero::before { width: 520px; bottom: 220px; }
  .hero::after { display: none; }
  .hero-text {
    width: 100%;
    max-width: 100%;
    padding: 42px 22px 34px;
  }
  .hero h1 {
    max-width: 100%;
    font-size: 30px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .hero p {
    max-width: 100%;
    font-size: 14px;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .hero-actions { display: grid; width: 100%; gap: 10px; }
  .button { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 9px 14px; font-size: 13px; }
  .hero-image {
    height: 260px;
    margin-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .notice-card,
  .policy-grid,
  .doctor-intro,
  .doctor-info-grid,
  .facility-panel,
  .info-cards,
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .section,
  .section.wrap,
  #medical-detail,
  .policy-section,
  .doctor-profile,
  .facility-section {
    padding-top: 42px;
  }
  .section-heading.center { margin-bottom: 20px; }
  .notice-card { gap: 16px; margin-top: 0; padding: 30px 0 0; }
  .notice-list { overflow: visible; padding: 10px 16px; }
  .notice-list article {
    display: block;
    min-height: 0;
    padding: 12px 0;
  }
  .notice-list time,
  .notice-list span,
  .notice-list b {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .notice-list span { display: inline-block; width: auto; margin: 6px 0 4px; }
  .notice-list b {
    line-height: 1.65;
    word-break: break-all;
  }
  .feature-grid, .service-grid, .topic-grid, .gallery-grid { grid-template-columns: 1fr; }
  .feature-card {
    min-height: 0;
    overflow: visible;
  }
  .feature-card p,
  .topic-card p,
  .medical-lead p,
  .medical-lead h3,
  .policy-grid p,
  .doctor-copy p {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    line-break: strict;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
  .feature-card h3,
  .feature-card p,
  .service-card h3,
  .service-card p,
  .topic-heading,
  .topic-card p,
  .policy-grid h3,
  .policy-grid p,
  .doctor-copy p,
  .doctor-info-card li,
  .facility-intro p,
  .gallery-grid h3,
  .access-info p,
  .parking-info p,
  .mobile-nav a {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .feature-card p,
  .topic-card p {
    font-size: 13px;
    text-align: left;
  }
  .facility-panel { padding: 16px; }
  .doctor-profile-box { padding: 18px; border-radius: 18px; }
  .doctor-portrait { height: auto; max-height: 420px; }
  .doctor-name { font-size: 25px !important; }
  .doctor-history-heading { grid-template-columns: 1fr auto 1fr; gap: 10px; margin: 36px 0 22px; }
  .doctor-history-heading h3 { font-size: 20px; letter-spacing: 0; text-align: center; }
  .doctor-info-card { padding: 22px 20px; }
  .policy-grid article { min-height: 0; }
  .service-card {
    grid-template-columns: 74px 1fr 14px;
    gap: 14px;
    min-height: 106px;
    padding: 18px 16px;
  }
  .service-card img { width: 72px; height: 72px; }
  .service-card h3 { font-size: 17px; }
  .service-card p { font-size: 13px; }
  .topic-card { min-height: 0; }
  .facility-intro p { margin-top: 0; }
  .gallery-grid img { height: 190px; }
  .info-cards { padding-top: 42px; padding-bottom: 22px; }
  .info-card table { display: none; }
  .hours-mobile-list { display: grid; gap: 10px; margin-top: 14px; }
  .hours-mobile-list article {
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    background: var(--light-green);
    border: 1px solid #dbeada;
    border-radius: 8px;
  }
  .hours-mobile-list b { color: var(--text-dark); font-size: 15px; }
  .hours-mobile-list span { color: var(--primary-dark); font-size: 14px; font-weight: 800; }
  .note { display: block; }
  .note strong { display: block; margin-top: 5px; }
  .info-card > img { height: auto; }
  .footer nav { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
  .footer-bottom { display: grid; gap: 3px; justify-content: start; padding: 10px 58px 10px 20px; }
  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 24px rgba(31, 31, 31, 0.08);
  }
  .mobile-nav a {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 64px;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
  }
  .mobile-nav img { width: 23px; height: 23px; object-fit: contain; }
}

/* =====================================
   2026-05-27 改装 v1: メリハリ強化＋セクション間隔拡大
   水谷さん指示: 「色が単調でのっぺり / 特長と診療内容の間隔が狭い」
   - カラー2階層化（濃緑追加）
   - カードに強影 + hover float
   - 特長カードに上部グラデバー、診療カードに左色帯
   - 見出しに二重線リング
   - section 余白を 96px に拡大
   ===================================== */
:root {
  --primary-deep: #1c5f29;
  --accent: #f0a500;
  --shadow-card: 0 14px 36px rgba(15, 80, 30, 0.10);
  --shadow-card-hover: 0 22px 50px rgba(15, 80, 30, 0.18);
}

/* セクション間隔拡大 */
.section,
.section.wrap { padding-top: 64px; }
.services-section { padding-top: 64px; }
@media (min-width: 901px) {
  .section,
  .section.wrap { padding-top: 96px; }
  .services-section { padding-top: 96px; }
  #medical-detail,
  .policy-section,
  .doctor-profile,
  .facility-section { padding-top: 112px; }
}
@media (max-width: 900px) {
  .section,
  .section.wrap,
  .services-section,
  #medical-detail,
  .policy-section,
  .doctor-profile,
  .facility-section { padding-top: 64px; }
}

/* 特長セクション全体に薄グラデ背景（白との交互で抑揚） */
#features {
  position: relative;
  margin-top: 24px;
  padding-bottom: 64px;
  background: linear-gradient(180deg, #ffffff 0%, #effaee 50%, #ffffff 100%);
}
@media (min-width: 901px) {
  #features { padding-bottom: 96px; }
}

/* 特長カード: 上部グラデバー + 強影 + hover float */
.feature-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(57, 169, 53, 0.18);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card::before {
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary-deep), var(--primary) 55%, var(--secondary));
  content: "";
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.feature-card img {
  filter: drop-shadow(0 6px 12px rgba(57, 169, 53, 0.28));
}

/* 診療内容カード: 左濃緑バー + 強影 + hover float */
.service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(57, 169, 53, 0.18);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--primary-deep), var(--primary));
  content: "";
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.service-card img {
  filter: drop-shadow(0 5px 10px rgba(57, 169, 53, 0.22));
}

/* 見出しを二重線リング化 */
.section-heading.center h2::after,
.notice-title h2::after,
#medical-detail > .section-heading h2::after {
  width: 84px;
  height: 4px;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(57, 169, 53, 0.12);
}
@media (min-width: 901px) {
  .section-heading.center h2::after,
  .notice-title h2::after,
  #medical-detail > .section-heading h2::after {
    width: 96px;
    height: 5px;
    box-shadow: 0 0 0 8px rgba(57, 169, 53, 0.12);
  }
}

/* notice-list 自体にも軽い濃緑シャドウで主張 */
.notice-list {
  box-shadow: 0 12px 32px rgba(15, 80, 30, 0.08);
}

/* =====================================
   2026-05-27 改装 v2: ナビ間隔拡大 + アンカーリンク位置補正
   水谷さん指示: 「もう少し間隔あけて、写メとちゃんとタグリンクさせて」
   - nav の gap を広げる
   - sticky header (PC 95px / SP 70px) でジャンプ先が隠れる問題を scroll-margin-top で解消
   ===================================== */

/* アンカーリンクのジャンプ位置補正（headerの裏に隠れない） */
section[id],
article[id],
div[id],
[id="top"],
[id="doctor"],
[id="medical-detail"],
[id="facilities"],
[id="diabetes"],
[id="diabetes-care"],
[id="features"],
[id="services"],
[id="hours"],
[id="access"],
[id="news"],
[id="policy"],
[id="thyroid"],
[id="general"],
[id="same-day-test"],
[id="understanding"] {
  scroll-margin-top: 110px;
}
@media (max-width: 900px) {
  section[id],
  article[id],
  div[id],
  [id] {
    scroll-margin-top: 80px;
  }
}

/* ナビの間隔拡大 */
.nav { gap: 28px; }
@media (min-width: 901px) {
  .nav { gap: 40px; }
}
@media (max-width: 1160px) and (min-width: 901px) {
  .nav { gap: 28px; }
}
@media (max-width: 1160px) {
  .header .nav { gap: 18px; }
}

/* =====================================
   2026-05-27 改装 v3: 全体 8% 縮小
   水谷さん指示: 「全体8％縮小」
   ===================================== */
html {
  zoom: 0.92;
}

/* =====================================
   2026-05-27 改装 v4: ナビ並び替え (9項目) → gap 調整
   水谷さん指示「上から順番の配置にして、まずはおしらせ・当院の特長・診療内容・診療について・診療方針」
   - nav リンクを本文の section 順に並び替え (HTML 側で対応済)
   - 9項目に増えたので gap 40→22 / font-size 微縮小で詰めずに収める
   ===================================== */
@media (min-width: 901px) {
  .nav {
    gap: 22px;
    font-size: 15px;
  }
  .nav a {
    padding-inline: 0;
  }
}
@media (max-width: 1160px) and (min-width: 901px) {
  .nav {
    gap: 14px;
    font-size: 13px;
  }
}

/* =====================================
   2026-05-27 改装 v5: ヘッダー2段化（PC のみ）
   水谷さん指示「ここ文字被っちゃったり、ぐちゃぐちゃ。2段にする方がいい」
   - 1段目: ロゴ＋電話
   - 2段目: ナビ全幅（センター揃え・余裕のあるgap）
   - body::before（sticky背景）と scroll-margin-top を新ヘッダー高さに合わせ更新
   ===================================== */
@media (min-width: 901px) {
  .header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo tel"
      "nav  nav";
    row-gap: 6px;
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 4px;
  }
  .logo  { grid-area: logo; }
  .tel   { grid-area: tel; }
  .nav   {
    grid-area: nav;
    justify-content: center;
    gap: 36px;
    font-size: 16px;
    padding-top: 4px;
    border-top: 1px solid #edf0ed;
  }
  .nav a {
    padding: 12px 0 14px;
  }
  .nav a::after {
    bottom: 6px;
    height: 3px;
  }

  /* sticky 背景の高さを 2 段分に */
  body::before { height: 150px; }

  /* アンカージャンプ位置補正を新ヘッダーに合わせ更新 */
  section[id],
  article[id],
  div[id],
  [id] {
    scroll-margin-top: 170px;
  }
}

/* 中間サイズ (901-1160px) でも 2 段にして詰まり回避 */
@media (max-width: 1160px) and (min-width: 901px) {
  .header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo tel"
      "nav  nav";
  }
  .nav {
    justify-content: center;
    gap: 22px;
    font-size: 14px;
  }
}

/* =====================================
   2026-05-27 改装 v6: 背景×カード コントラスト強化
   水谷さん指示「もうちょっと背景とカードとのコントラストつけたい」
   - ボディ床を白 → 薄緑 #eef6ed に変更
   - カード border / shadow を濃く
   - ヘッダー・ヒーローは白維持（コントラスト保つため）
   ===================================== */
body {
  background: #eef6ed;
}

/* features の薄グラデ背景を一旦無効化（床と被るので） */
#features {
  background: transparent;
}

/* カード全般を白＋強化 border/shadow に統一 */
.feature-card,
.service-card,
.topic-card,
.info-card,
.policy-grid article,
.doctor-info-card,
.gallery-grid article,
.facility-panel,
.doctor-profile-box,
.notice-list,
.medical-panel {
  background: #fff;
  border-color: rgba(57, 169, 53, 0.26);
  box-shadow: 0 20px 44px rgba(15, 80, 30, 0.14);
}

/* hover時はさらに強く */
.feature-card:hover,
.service-card:hover {
  box-shadow: 0 28px 56px rgba(15, 80, 30, 0.20);
}

/* ヘッダー周りは白を維持してロゴ・電話の視認性確保 */
.header,
body::before {
  background: rgba(255, 255, 255, 0.98);
}

/* ヒーローも白維持 */
.hero {
  background-color: #fff;
}

/* フッターは既存のグラデを少し床色寄せ */
.footer {
  background:
    linear-gradient(180deg, #e9f3e8, #f3faf2),
    url("./assets/logo/koshiya-logo-original.png") right 10% center / 110px auto no-repeat;
}

/* =====================================
   2026-05-27 改装 v9: ナビ周りの余分な区切り線を削除
   水谷さん指示「下のバーが2個ついちゃってる」
   - body::before の border-bottom（ナビ下に出てた灰線）削除
   - v5 で追加した nav の border-top（1段目と2段目の境界線）も削除
   - current/hover バー（リンク直下の緑線）はそのまま維持
   ===================================== */
body::before {
  border-bottom: none;
}
.nav {
  border-top: none;
}

/* =====================================
   2026-05-27 改装 v7→v8: ロゴ文字を 元の30%増し
   v7 で +20% → v8 で「もう1割アップ」指示で +10% 追加（合計+30%）
   - 画像サイズは維持
   ===================================== */
.logo {
  font-size: 22px;
}
@media (min-width: 901px) {
  .logo {
    font-size: 28px;
  }
}
@media (max-width: 1160px) and (min-width: 901px) {
  .logo {
    font-size: 19px;
  }
}
@media (max-width: 900px) {
  .logo {
    font-size: 20px;
  }
}