/* =========================================================
   こしや糖尿病・内科クリニック  デザイン見直し見本 B「十勝の朝」
   2026-10-28 / styles.css の後に読み込み、上書きだけで構成
   方針: 白地＋看板の緑＋麦わら色。カードの影・浮き・グラデ・アイコンをやめ、
         細い罫線と余白で整える。見出しは Zen Maru Gothic。
   ========================================================= */

:root {
  /* 看板の緑（styles.css の --primary をそのまま使う） */
  --green: var(--primary);            /* #39a935 罫線・点・アクセント */
  --green-ink: #2b7a2a;               /* 緑の文字（白地で 5.3:1） */
  --green-btn: #2e842c;               /* ボタン地（白文字で 4.7:1） */
  --green-tint: #f2f6ef;              /* 薄い緑の帯 */

  /* 麦わら */
  --straw: #c9a65a;                   /* 罫線・小さな印 */
  --straw-ink: #8a6d2c;               /* 麦わらの文字（4.9:1） */

  /* 地と文字 */
  --paper: #ffffff;
  --paper-warm: #f8f6f1;              /* ごく薄い生成り */
  --ink: #2a2c2a;
  --ink-soft: #5b5f5a;
  --line: #e4e2dc;
  --alert: #b0413e;

  --w: 1240px;                        /* 10/28 水谷さん「電話番号の場所がおかしい」→ 写真も中身の幅で止め、右端を1本に揃えた（1120→1240） */
  --gutter: 40px;
  --font-head: "Zen Maru Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;
}

/* ---------- 全体 ---------- */
html { zoom: 1; }                     /* styles.css の zoom:0.92 を打ち消し、寸法はここで決める */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}
body::before { display: none; }
/* Zen Maru Gothic（Google Fonts 版）は palt が効かず仮名が等幅になるため、見出しは字間を足さない */
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; text-wrap: balance; }

/* フォーカス（キーボード操作）を見えるように */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--green-btn);
  outline-offset: 3px;
  border-radius: 2px;
}
p, li { text-wrap: pretty; }
/* 短い文は文節で折り返す（Chromium 系の auto-phrase。非対応ブラウザは通常の折り返し） */
h1, h2, h3, .hero p, .service-card p, .facility-intro p, .gallery-grid h3, .notice-list b { word-break: auto-phrase; }
.wrap {
  width: min(var(--w), calc(100% - var(--gutter) * 2));
  max-width: none;
  padding-inline: 0;
}

/* 影・浮き・グラデ・色帯を全部やめる */
.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, .button {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
}
.feature-card:hover, .service-card:hover { transform: none; box-shadow: none; }
.feature-card::before, .service-card::before { display: none; content: none; }

/* カード内・見出し内の線画アイコンは使わない */
.feature-card > img, .service-card > img, .service-card i,
.topic-heading img, .doctor-info-card h3 img, .section-heading img {
  display: none;
}

/* ---------- 見出し（センター＋リング線をやめ、左揃え） ---------- */
.section-heading,
.section-heading.center,
#medical-detail > .section-heading,
.notice-title {
  display: block;
  margin: 0 0 40px;
  text-align: left;
  color: var(--ink);
}
.section-heading h2,
.notice-title h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.section-heading.center h2::after,
.notice-title h2::after,
#medical-detail > .section-heading h2::after { display: none; content: none; }

/* 見出しの印は「上に麦わらの短い線」1種類に統一（麦わらは短い線と小さなラベルだけに使う） */
.section-heading::before,
.section-heading.center::before,
#medical-detail > .section-heading::before,
.section-heading.compact::before,
.notice-title::before {
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 0 18px;
  background: var(--straw);
  content: "";
}
/* ---------- 節の間隔 ---------- */
.section,
.section.wrap,
.services-section,
#medical-detail,
.policy-section,
.doctor-profile,
.facility-section { padding: 112px 0 0; }

/* 全幅の帯（中身は .wrap 幅のまま） */
#features,
.section.policy-section,
.section.facility-section {
  margin-top: 112px;
  padding: 96px 0 104px;
  box-shadow: 0 0 0 100vmax var(--paper-warm);
  clip-path: inset(0 -100vmax);
  background: var(--paper-warm);
}
.section.policy-section { box-shadow: 0 0 0 100vmax var(--green-tint); background: var(--green-tint); }
#features + .services-section,
.policy-section + .doctor-profile,
.facility-section + .info-cards { padding-top: 104px; }

/* ---------- ヘッダー ---------- */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px max(var(--gutter), calc((100% - var(--w)) / 2)) 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  row-gap: 0;
}
.logo {
  gap: 12px;
  color: var(--green-ink);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.logo img { width: 56px; height: 50px; }
.nav {
  justify-content: flex-start;
  gap: 34px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.nav a { padding: 14px 0 15px; }
.nav a::after {
  bottom: -1px;
  height: 2px;
  border-radius: 0;
  background: var(--green);
}
.nav a:hover, .nav .current { color: var(--green-ink); }
.tel {
  align-items: center;
  justify-self: end;
  gap: 12px;
  color: var(--green-ink);
  text-align: right;
}
.tel-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.tel strong {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
}
.tel small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------- ファーストビュー ---------- */
.hero {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--paper);
  overflow: hidden;
}
.hero::before, .hero::after { display: none; content: none; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 48px max(var(--gutter), calc((100% - var(--w)) / 2)) 0;
}
.hero-text {
  align-self: center;
  width: auto;
  padding: 8px 48px 8px 0;
}
.hero-text::before {
  display: block;
  width: 36px;
  height: 2px;
  margin-bottom: 30px;
  background: var(--straw);
  content: "";
}
.hero h1 {
  margin: 0 0 26px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(30px, 2.9vw, 42px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hero h1 em { color: var(--green-ink); }
.hero p {
  max-width: 27em;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.hero-image {
  display: block;
  align-self: start;
  margin: 0;
}
.hero + .notice-card { padding-top: 96px; }

/* ファーストビュー下の案内帯（ページ内にある事実だけ） */
.hero-info {
  display: flex;
  width: min(var(--w), calc(100% - var(--gutter) * 2));
  margin: 40px auto 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-info > div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 32px;
  border-left: 1px solid var(--line);
}
.hero-info > div:first-child { padding-left: 0; border-left: 0; }
.hero-info > div:last-child { margin-left: auto; padding-right: 0; }
.hero-info dt {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.hero-info dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero-info dd span { white-space: nowrap; }
.hero-info small { margin-left: 14px; color: var(--ink-soft); font-size: 13px; font-weight: 400; }
.hero-info a {
  color: var(--green-ink);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1296 / 821;
  object-fit: cover;
}

/* ボタン: 塗り／線／電話（影なし・アイコンなし） */
.button {
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  padding: 12px 24px;
  border: 1px solid var(--green-btn);
  border-radius: 6px;
  color: var(--green-ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.button img { display: none; }
.button.primary { background: var(--green-btn); border-color: var(--green-btn); color: #fff; }
.button.primary:hover { background: var(--green-ink); }
.button.outline { background: var(--paper); }
.button.yellow {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  padding-inline: 4px 0;
  text-decoration: underline;
  text-decoration-color: var(--green-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* ---------- お知らせ（見出し左・一覧右） ---------- */
.notice-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
  padding: 88px 0 0;
}
.notice-title { margin: 0; }
.notice-title h2 { font-size: 26px; }
.notice-list {
  width: 100%;
  padding: 0;
  border-top: 1px solid var(--line);
  overflow: visible;
}
.notice-list article {
  grid-template-columns: 110px 76px minmax(0, 1fr);
  min-height: 0;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 400;
}
.notice-list article:last-child { border-bottom: 1px solid var(--line); }
.notice-list time {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.notice-list span {
  padding: 1px 10px 2px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.notice-list span.closed { background: transparent; border-color: rgba(176, 65, 62, 0.45); color: var(--alert); }
.notice-list b { font-size: 15.5px; font-weight: 500; }

/* ---------- 当院の特長（4列・縦罫） ---------- */
.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.feature-card {
  min-height: 0;
  padding: 4px 32px 8px;
  border-left: 1px solid var(--line);
  text-align: left;
  overflow: visible;
}
.feature-card:first-child { padding-left: 0; border-left: 0; }
.feature-card:last-child { padding-right: 0; }
.feature-card h3 {
  margin: 0 0 14px;
  color: var(--green-ink);
  font-size: 19px;
  line-height: 1.55;
}
.feature-card p { color: var(--ink-soft); font-size: 15px; font-weight: 400; line-height: 1.95; }

/* ---------- 診療内容（見出し左・2列の一覧） ---------- */
.services-section {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
.services-section .section-heading { margin: 0; }
.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}
.service-card {
  display: block;
  min-height: 0;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
}
.service-card:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
.service-card h3 {
  position: relative;
  margin: 0 0 4px;
  padding-left: 18px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.5;
}
.service-card h3::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  content: "";
}
.service-card p { padding-left: 18px; color: var(--ink-soft); font-size: 15px; font-weight: 400; line-height: 1.8; }

/* ---------- 診療について（2列・写真＋文の組み、罫線で区切る） ---------- */
.topic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
}
.topic-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 32px;
  align-content: start;
  min-height: 0;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.topic-card:nth-child(-n + 2) { border-top: 1px solid var(--line); }
.topic-photo {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
}
#understanding .topic-photo { object-position: 64% 50%; }
.topic-heading {
  grid-column: 2;
  display: block;
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.topic-card > p, .topic-note { grid-column: 2; }
.topic-card p { margin: 0; color: var(--ink); font-size: 15px; font-weight: 400; line-height: 1.95; }
.topic-note {
  margin-top: 14px;
  padding: 14px 0 0;
  border-top: 1px dashed #d6d3cb;
}
.topic-note p { color: var(--ink-soft); font-size: 14px; line-height: 1.9; }

/* ---------- 診療方針（薄緑の帯・見出し列＋3行の一覧） ---------- */
.section.policy-section {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
.policy-section .section-heading { margin: 0; }
.policy-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(43, 122, 42, 0.22);
}
.policy-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 48px;
  align-items: baseline;
  min-height: 0;
  padding: 30px 0 31px;
  border-bottom: 1px solid rgba(43, 122, 42, 0.22);
}
.policy-grid b { display: none; }
.policy-grid h3 {
  margin: 0;
  color: var(--green-ink);
  font-size: 21px;
  line-height: 1.6;
}
.policy-grid p { grid-column: 2; margin: 0; color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.95; }

/* ---------- 院長紹介（写真と挨拶を並べ、経歴は写真の列と本文の列に振り分け） ---------- */
.doctor-profile-box {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0 72px;
  padding: 0;
  overflow: visible;
}
.doctor-intro, .doctor-info-grid { display: contents; }
.doctor-portrait {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 455;
  border-radius: 4px;
}
.doctor-copy { grid-column: 2; grid-row: 1; align-self: center; max-width: 38em; }
.doctor-name {
  margin: 0 0 26px !important;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
}
.doctor-name span {
  margin-right: 16px;
  color: var(--straw-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  vertical-align: 0.35em;
}
.doctor-copy p { color: var(--ink); font-size: 17.5px; font-weight: 400; line-height: 2.15; }
.doctor-history-heading {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  margin: 80px 0 4px;
}
.doctor-history-heading span:first-child { display: none; }
.doctor-history-heading span { border-top: 1px solid var(--line); }
.doctor-history-heading h3 { color: var(--ink); font-size: 19px; letter-spacing: 0.04em; }
.doctor-info-card { padding: 24px 0 0; align-self: start; }
.doctor-info-card:nth-child(1) { grid-column: 2; grid-row: 3 / span 2; }
.doctor-info-card:nth-child(2) { grid-column: 1; grid-row: 3; }
.doctor-info-card:nth-child(3) { grid-column: 1; grid-row: 4; padding-top: 36px; }
.doctor-info-card h3 {
  display: block;
  margin: 0 0 6px;
  color: var(--green-ink);
  font-size: 15px;
  letter-spacing: 0.1em;
}
.doctor-info-card li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}
.doctor-info-card li:last-child { border-bottom: 1px solid var(--line); }
.doctor-info-card li::before { display: none; }

/* ---------- 院内・設備紹介 ---------- */
.facility-section > .section-heading { margin-bottom: 20px; }
.facility-panel {
  display: block;
  padding: 0;
}
.facility-intro { max-width: none; margin: 0 0 56px; text-align: left; }
.facility-intro p { color: var(--ink-soft); font-size: 16px; font-weight: 400; line-height: 2; }
.gallery-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  color: var(--straw-ink);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.gallery-label::after { flex: 1; height: 1px; background: var(--line); content: ""; }
.gallery-grid { gap: 32px 24px; }
.gallery-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 64px; }
.gallery-equipment { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; }
.gallery-grid article { overflow: visible; text-align: left; }
.gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}
.gallery-equipment img { aspect-ratio: 3 / 4; background: #fff; }
.gallery-grid h3 {
  margin: 0;
  padding: 12px 0 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.gallery-equipment h3 { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- フッター ---------- */
.footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
}
.footer-inner {
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding: 64px 0 56px;
  align-items: start;
}
.footer-brand p { color: var(--green-ink); font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; }
.footer-brand a { margin: 14px 0 6px; color: var(--green-ink); font-family: var(--font-head); font-size: 26px; font-weight: 700; }
.footer-brand a img { display: none; }
.footer-brand small { margin-top: 4px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.footer nav { gap: 10px 40px; color: var(--ink); font-size: 14px; font-weight: 400; }
.footer nav a:hover { color: var(--green-ink); }
.footer-copy { color: var(--green-ink); font-family: var(--font-head); font-size: 18px; font-weight: 500; line-height: 2; }
.footer-bottom {
  min-height: 56px;
  padding: 0 max(var(--gutter), calc((100% - var(--w)) / 2));
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
}
.footer-bottom a {
  position: static;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.footer-bottom a::before {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-top: 1.5px solid var(--green-ink);
  border-left: 1.5px solid var(--green-ink);
  transform: rotate(45deg);
  content: "";
}
.footer-bottom img { display: none; }

/* =========================================================
   タブレット
   ========================================================= */
@media (max-width: 1160px) and (min-width: 901px) {
  .nav { gap: 22px; font-size: 13.5px; }
  .logo { font-size: 21px; }
  .feature-card { padding-inline: 22px; }
  .gallery-equipment { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notice-card, .services-section, .hours-info { grid-template-columns: 200px minmax(0, 1fr); gap: 0 32px; }
  .doctor-profile-box { grid-template-columns: 260px minmax(0, 1fr); gap: 0 48px; }
  .topic-grid { gap: 0 40px; }
  .topic-card { grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; }
  .section.policy-section { grid-template-columns: 200px minmax(0, 1fr); gap: 0 32px; }
  .hero-info > div { padding-inline: 18px; }
  .hero-info small { display: none; }
}

/* =========================================================
   スマホ（〜900px）  左右 16px の余白で統一
   ========================================================= */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; padding-bottom: 60px; }
  .wrap { width: auto; margin-inline: 16px; padding-inline: 0; }

  .section,
  .section.wrap,
  .services-section,
  #medical-detail,
  .policy-section,
  .doctor-profile,
  .facility-section { padding-top: 72px; }
  #features, .section.policy-section, .section.facility-section { margin-top: 72px; padding: 64px 0 72px; }
  #features + .services-section,
  .policy-section + .doctor-profile,
  .facility-section + .info-cards { padding-top: 72px; }

  .section-heading, .section-heading.center, #medical-detail > .section-heading, .notice-title { margin-bottom: 28px; }
  .section-heading h2, .notice-title h2 { font-size: 24px; }
  .section-heading::before, .notice-title::before { margin-bottom: 14px; }

  /* styles.css の break-all（!important）を通常の改行に戻す */
  .topic-card p, .doctor-copy p, .doctor-info-card li, .access-info p, .parking-info p, .feature-card p, .policy-grid p {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict;
  }
  .feature-card h3, .service-card h3, .service-card p,
  .topic-heading, .policy-grid h3, .facility-intro p, .gallery-grid h3, .hero p, .hero h1, .notice-list b {
    word-break: auto-phrase !important;
    overflow-wrap: anywhere !important;
    line-break: strict;
  }

  /* ヘッダー */
  .header {
    min-height: 64px;
    padding: 8px 16px;
  }
  .logo { gap: 8px; max-width: calc(100% - 56px); font-size: 17px; letter-spacing: 0.02em; white-space: nowrap; }
  .logo img { width: 42px; height: 38px; }
  .menu-button {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .menu-button span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 0; }
  .menu-button[aria-expanded="true"] { border-color: var(--green-btn); }
  .nav {
    top: 64px;
    right: 16px;
    left: 16px;
    gap: 0 24px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: none;
  }
  .nav a { padding: 10px 0; font-size: 14px; }
  .nav a::after { display: none; }

  /* ファーストビュー: 写真が上、文字が下 */
  .hero-inner { grid-template-columns: 1fr; padding: 0; }
  .hero-image { order: -1; min-height: 0; height: auto; }
  .hero-image img { aspect-ratio: 3 / 2; object-position: 0% 50%; }

  .hero-text { padding: 28px 16px 0; }
  .hero + .notice-card { padding-top: 64px; }
  .hero-text::before { margin-bottom: 18px; }
  .hero h1 { margin-bottom: 16px; font-size: 26px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
  .hero p { font-size: 14.5px; line-height: 1.95; word-break: normal; overflow-wrap: anywhere; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hero-info { display: block; width: auto; margin: 28px 16px 0; border-bottom: 0; }
  .hero-info > div,
  .hero-info > div:first-child,
  .hero-info > div:last-child {
    display: grid;
    grid-template-columns: 5.2em minmax(0, 1fr);
    gap: 0 8px;
    margin: 0;
    padding: 12px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .hero-info dd { font-size: 14px; white-space: normal; }
  .hero-info small { display: block; margin: 2px 0 0; font-size: 12.5px; }
  .hero-info a { font-size: 18px; }
  .button { width: 100%; min-height: 50px; padding: 10px 12px; font-size: 14.5px; }
  .button.yellow { grid-column: 1 / -1; justify-self: start; width: auto; min-height: 44px; padding-inline: 0; }

  /* お知らせ */
  .notice-card { grid-template-columns: 1fr; padding-top: 64px; }
  .notice-title { margin-bottom: 24px; }
  .notice-list { padding: 0; }
  .notice-list article {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 4px 12px;
    align-items: center;
    padding: 16px 0;
  }
  .notice-list time, .notice-list span { display: inline-block; width: auto; margin: 0; }
  .notice-list span { justify-self: start; }
  .notice-list b { grid-column: 1 / -1; font-size: 15px; line-height: 1.75; word-break: normal; }

  /* 特長 */
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card,
  .feature-card:first-child {
    padding: 20px 0 22px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .feature-card:last-child { border-bottom: 1px solid var(--line); }
  .feature-card h3 { margin-bottom: 6px; font-size: 18px; }
  .feature-card p { font-size: 14.5px; word-break: normal; }

  /* 診療内容 */
  .services-section { grid-template-columns: 1fr; }
  .services-section .section-heading { margin-bottom: 28px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { padding: 18px 0 19px; }
  .service-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .service-card:last-child { border-bottom: 1px solid var(--line); }
  .service-card h3 { font-size: 17.5px; }
  .service-card p { font-size: 14.5px; word-break: normal; }

  /* 診療について */
  .topic-grid { grid-template-columns: 1fr; gap: 0; }
  .topic-card { grid-template-columns: 1fr; grid-template-rows: none; padding: 32px 0; }
  .topic-card:nth-child(-n + 2) { border-top: 0; }
  .topic-card:first-child { border-top: 1px solid var(--line); }
  .topic-photo { grid-row: auto; aspect-ratio: 3 / 2; margin-bottom: 18px; }
  .topic-heading, .topic-card > p, .topic-note { grid-column: 1; }
  .topic-heading { margin-top: 18px; font-size: 19px; }
  .topic-card p { font-size: 15px; word-break: normal; }
  .topic-note p { font-size: 14px; }

  /* 診療方針 */
  .section.policy-section { grid-template-columns: 1fr; }
  .policy-section .section-heading { margin-bottom: 28px; }
  .policy-grid article { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .policy-grid p { grid-column: 1; }
  .policy-grid h3 { font-size: 19px; }
  .policy-grid p { font-size: 15px; word-break: normal; }

  /* 院長 */
  .doctor-profile-box { grid-template-columns: 1fr; }
  .doctor-portrait, .doctor-copy, .doctor-history-heading,
  .doctor-info-card:nth-child(n) { grid-column: 1; grid-row: auto; }
  .doctor-info-card:nth-child(3) { padding-top: 24px; }
  .doctor-portrait { width: 64%; max-width: 280px; max-height: none; margin-bottom: 28px; }
  .doctor-name { font-size: 27px !important; padding-bottom: 16px; margin-bottom: 20px !important; }
  .doctor-copy p { font-size: 15.5px; line-height: 2.05; }
  .doctor-history-heading { grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 52px 0 4px; }
  .doctor-history-heading h3 { font-size: 17px; text-align: left; }
  .doctor-info-grid { grid-template-columns: 1fr; }
  .doctor-info-card { padding: 20px 0 0; }
  .doctor-info-card li { font-size: 14px; }

  /* 院内・設備 */
  .facility-intro { margin-bottom: 36px; }
  .facility-intro p { font-size: 15px; word-break: normal; }
  .gallery-rooms, .gallery-equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .gallery-rooms { margin-bottom: 48px; }
  .gallery-grid img { height: auto; }
  .gallery-grid h3 { padding-top: 8px; font-size: 13.5px; word-break: normal; }
  .gallery-equipment h3 { font-size: 12.5px; }

  /* フッター */
  .footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 40px; }
  .footer nav { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
  .footer-copy { font-size: 16px; }
  .footer-bottom { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 14px 16px; }
  .footer-bottom span { grid-column: 1; }
  .footer-bottom a { grid-column: 2; grid-row: 1 / span 2; }

  /* 下部固定ナビ: 文字だけ、電話は緑 */
  .mobile-nav {
    border-top: 1px solid var(--line);
    box-shadow: none;
    background: #fff;
  }
  .mobile-nav img { display: none; }
  .mobile-nav a {
    min-height: 56px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    border-left: 1px solid var(--line);
  }
  .mobile-nav a:first-child { border-left: 0; background: var(--green-btn); color: #fff; }
}

/* 10/28 法人化で医院名が変わった（医療法人 こしや内科クリニック）。看板と同じく「医療法人」は小さく上の段 */
.logo-name { display: inline-flex; flex-direction: column; line-height: 1.2; }
.logo-name small { font-size: 0.5em; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 500; margin-bottom: 2px; }

/* =========================================================
   10/28 水谷さん「古いホームページと比べて、小さくて薄い感じがする」
   → 文字を一回り大きく、色を濃く、要所を太く（800の極太には戻さない）
   ========================================================= */
:root {
  --ink: #1d201d;
  --ink-soft: #3a3e39;                /* 本文の灰色を濃く（旧 #5b5f5a） */
  --green-ink: #23801f;               /* 緑の文字を少し明るく強く（白地で 4.8:1） */
}
body { font-weight: 500; }
.hero p, .notice-list b, .feature-card p, .service-card p, .topic-grid p, .policy-grid p, .doctor-message p { color: var(--ink); }
@media (min-width: 901px) {
  body { font-size: 17px; }
  .logo { font-size: 28px; }
  .nav { font-size: 16px; font-weight: 700; gap: 36px; }
  .tel strong { font-size: 32px; }
  .tel small { font-size: 14px; color: var(--ink); font-weight: 500; }
  .tel-icon { width: 30px; height: 30px; }
  .hero h1 { font-size: clamp(32px, 2.85vw, 44px); }   /* 1行目「糖尿病・生活習慣病を、」が割れない上限 */
  .hero p { font-size: 18px; line-height: 1.9; }
  .hero-actions .button { font-size: 16.5px; font-weight: 700; }
  .hero-info dt { font-size: 14px; color: var(--ink); }
  .hero-info dd { font-size: 17.5px; font-weight: 700; }
  .hero-info small { font-size: 14px; color: var(--ink); }
  .hero-info a { font-size: 24px; }
  .notice-list time { font-size: 15.5px; color: var(--ink); }
  .notice-list b { font-size: 17px; }
  .feature-card p, .service-card p { font-size: 16px; }
}

/* 10/28 ヘッダーの電話は「マーク＋番号」だけ。マークと数字の高さ・中心を揃える */
.header .tel { display: inline-flex; align-items: center; gap: 10px; align-self: center; }
.header .tel span { display: block; line-height: 1; }
.header .tel strong { display: block; line-height: 1; }
.header .tel-icon { width: 28px; height: 28px; stroke-width: 1.8; transform: translateY(1px); }

/* 10/28 水谷さん「見出しの上の短い線、いらない」→ 全見出しとトップの見出しの上の麦わらの線を外す */
.section-heading::before,
.section-heading.center::before,
#medical-detail > .section-heading::before,
.section-heading.compact::before,
.notice-title::before,
.hero-text::before { display: none; content: none; }

/* =========================================================
   10/28 水谷さん 5点（お知らせのタグ／縦の揃え／節の間隔／アクセスの組み直し）
   ========================================================= */

/* ---- 節の間隔を約3割詰める（PC 112→80、帯 96/104→68/76） ---- */
.section,
.section.wrap,
.services-section,
#medical-detail,
.policy-section,
.doctor-profile,
.facility-section { padding-top: 80px; }
#features,
.section.policy-section,
.section.facility-section { margin-top: 80px; padding: 68px 0 76px; }
#features + .services-section,
.policy-section + .doctor-profile,
.facility-section + .info-cards { padding-top: 76px; }
.hero + .notice-card { padding-top: 72px; }
.info-cards { padding: 76px 0 88px; }
.hours-info { margin-bottom: 72px; }
.section-heading,
.section-heading.center,
#medical-detail > .section-heading { margin-bottom: 32px; }
.facility-intro { margin-bottom: 40px; }
.gallery-rooms { margin-bottom: 48px; }
.doctor-history-heading { margin-top: 56px; }

/* ---- 横並びの見出しは、右の一覧と同じ高さの罫線に乗せて頭を揃える ---- */
.notice-title,
.services-section .section-heading,
.policy-section .section-heading,
.info-cards .section-heading.compact {
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.notice-title h2,
.services-section .section-heading h2,
.policy-section .section-heading h2,
.info-cards .section-heading h2 { line-height: 1.35; }
.info-card thead th { border-top: 1px solid var(--line); }

/* ---- お知らせ: 日付・タグ・本文を3列で揃え、タグは塗りの同じ幅に ---- */
.notice-list article {
  grid-template-columns: 7.4em 6.2em minmax(0, 1fr);
  column-gap: 22px;
  align-items: baseline;
}
.notice-list span {
  display: inline-block;
  justify-self: start;
  width: 6.2em;
  padding: 3px 0 4px;
  border: 0;
  border-radius: 4px;
  background: #e6f1e3;
  color: #1d6a1a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
}
.notice-list span.closed { background: #f8e3e1; border: 0; color: #9b2c28; }
.notice-list b { line-height: 1.75; }

@media (max-width: 900px) {
  .section,
  .section.wrap,
  .services-section,
  #medical-detail,
  .policy-section,
  .doctor-profile,
  .facility-section { padding-top: 52px; }
  #features, .section.policy-section, .section.facility-section { margin-top: 52px; padding: 46px 0 52px; }
  #features + .services-section,
  .policy-section + .doctor-profile,
  .facility-section + .info-cards { padding-top: 52px; }
  .hero + .notice-card { padding-top: 48px; }
  .info-cards { padding: 52px 0 60px; }
  .hours-info { margin-bottom: 52px; }
  .section-heading, .section-heading.center, #medical-detail > .section-heading, .notice-title { margin-bottom: 24px; }
  .notice-title,
  .services-section .section-heading,
  .policy-section .section-heading,
  .info-cards .section-heading.compact { padding-top: 14px; }
  .doctor-history-heading { margin-top: 40px; }

  .notice-list article { grid-template-columns: auto auto 1fr; column-gap: 14px; row-gap: 6px; align-items: center; }
  .notice-list span { width: 5.8em; font-size: 12.5px; }

}
@media (max-width: 900px) {
  /* スマホのヘッダーの電話は番号を出すと画面からはみ出すため、マークだけの四角いボタンにする */
  .header .tel {
    display: inline-flex;
    flex: 0 0 44px;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .header .tel span { display: none; }
  .header .tel-icon { width: 22px; height: 22px; transform: none; }
  .logo { max-width: calc(100% - 104px); }
}

/* 10/28 水谷さん「休診は赤で目立たせて」: 案内帯の休診と、時間表の「休」を同じ赤・太字に（#b0413e は白地で 5.7:1） */
.hero-info small { color: var(--alert) !important; font-weight: 700; }

/* =========================================================
   10/28 水谷さん「診療時間の上の黒い線だけ段々に見える／表が横に伸びてバランスが悪い」
   ========================================================= */
/* 見出しの上の黒い罫線をやめる（お知らせ・診療内容・方針・診療時間・アクセス共通） */
.notice-title,
.services-section .section-heading,
.policy-section .section-heading,
.info-cards .section-heading.compact { padding-top: 0; border-top: 0; }

/* =========================================================
   10/28 診療時間＋アクセス（#hours / #access）
   水谷さん「下だけ昔のホームページに戻った感じ」→ 上の節と同じ言葉づかいに戻す:
   白地・細い罫線・文字中心。白いカード／角丸の面／濃い緑の塗りはやめる。
   要点3つはファーストビュー下の案内帯（.hero-info）と同じ作り。
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.visit { padding: 80px 0 96px; background: var(--paper); }
.visit .section-heading { margin: 0; }

/* ---- 診療時間: 見出しは左の列（お知らせ・診療内容と同じ柱）、右に時間割 ---- */
.visit-hours {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
.timetable-note { margin: 14px 0 0; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.7; }
.timetable-legend { display: flex; gap: 16px; margin: 12px 0 0; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; }
.timetable-legend span::before {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 2px;
  background: #e6f1e3;
  color: var(--green-ink);
  font-size: 9px;
  vertical-align: 1px;
  content: "●";
}
.timetable-legend .lg-off::before { background: #f4f3ef; color: #8b8b84; font-size: 10px; content: "休"; }

.timetable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
  table-layout: fixed;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.timetable th, .timetable td { padding: 0; border: 0; background: none; }
.timetable thead th {
  padding: 12px 0 9px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.timetable thead th:first-child { width: 10.6em; }
.timetable thead th.tt-hol-head { width: 5.2em; color: var(--alert); }
.timetable tbody th { padding: 0 8px 0 0; text-align: left; vertical-align: middle; }
.timetable tbody th b { display: inline-block; min-width: 2.8em; color: var(--ink); font-size: 15px; font-weight: 700; }
.timetable tbody th span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timetable td {
  height: 50px;
  border-left: 3px solid var(--paper);      /* 細いすき間（border-spacing の代わり） */
  text-align: center;
  vertical-align: middle;
}
.timetable .tt-open { background: #e6f1e3; color: var(--green-ink); font-size: 12px; }
.timetable .tt-off { background: #f6f5f1; color: #8b8b84; font-size: 14px; font-weight: 500; }
.timetable .tt-holiday { background: #fbf0ef; color: var(--alert); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.timetable tbody tr:last-child td, .timetable tbody tr:last-child th { padding-bottom: 0; }
.timetable tbody tr:first-child td:not(.tt-holiday) { border-bottom: 0; }

/* ---- アクセス ---- */
.visit-access { margin-top: 80px; }
.visit-access .section-heading { margin-bottom: 28px; }
.access-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.access-visuals figure { margin: 0; }
.access-visuals img,
.access-visuals .parking-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 553;      /* 外観写真（1170×830）と駐車場図（738×523）は同じ比率 */
  object-fit: cover;
  border-radius: 4px;
  background: #fff;
}
.access-visuals .parking-map { outline: 1px solid var(--line); outline-offset: -1px; }

/* 要点3つ: .hero-info と同じ（上下の細い罫線・縦の区切り・小さなラベル＋太字の値） */
.access-facts {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.access-facts > div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 28px;
  border-left: 1px solid var(--line);
}
.access-facts > div:first-child { padding-left: 0; border-left: 0; }
.access-facts > div:last-child { padding-right: 0; }
.access-facts dt {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.access-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.access-facts small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; }
.access-facts .nw { white-space: nowrap; }
.access-facts .addr-l2 { display: block; }

@media (max-width: 1160px) and (min-width: 901px) {
  .visit-hours { grid-template-columns: 200px minmax(0, 1fr); gap: 0 32px; }
  .access-facts { grid-template-columns: 1fr; }
  .access-facts > div, .access-facts > div:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .access-facts > div:first-child { border-top: 0; }
}
@media (max-width: 900px) {
  .visit { padding: 52px 0 64px; }
  .visit-hours { grid-template-columns: 1fr; gap: 20px; }
  .visit .section-heading { margin-bottom: 0; }
  .timetable-note { margin-top: 8px; font-size: 14.5px; }
  .timetable-legend { margin-top: 8px; font-size: 12.5px; }
  .timetable thead th { padding: 10px 0 8px; font-size: 13px; }
  .timetable thead th:first-child { width: 70px; }
  .timetable thead th.tt-hol-head { width: 44px; font-size: 12px; letter-spacing: -0.02em; }
  .timetable tbody th { padding-right: 4px; }
  .timetable tbody th b { display: block; font-size: 14px; }
  .timetable tbody th span { display: block; font-size: 10.5px; letter-spacing: -0.02em; }
  .timetable td { height: 46px; border-left-width: 2px; }
  .timetable .tt-open { font-size: 10px; }
  .timetable .tt-off { font-size: 12.5px; }
  .timetable .tt-holiday { font-size: 13px; letter-spacing: 0; writing-mode: vertical-rl; }
  .visit-access { margin-top: 52px; }
  .visit-access .section-heading { margin-bottom: 20px; }
  .access-visuals { grid-template-columns: 1fr; gap: 12px; }
  /* 案内帯のスマホ表示と同じ: 縦積み・下罫線・ラベル列＋値 */
  .access-facts { display: block; margin-top: 20px; border-bottom: 0; }
  .access-facts > div,
  .access-facts > div:first-child,
  .access-facts > div:last-child {
    display: grid;
    grid-template-columns: 5.2em minmax(0, 1fr);
    gap: 0 8px;
    padding: 12px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .access-facts dt { font-size: 13px; letter-spacing: 0.06em; }
  .access-facts dd { font-size: 14.5px; line-height: 1.7; }
  .access-facts small { font-size: 12.5px; }
  .access-facts .nw:not(.addr-l2) { white-space: normal; }
}

/* 10/28 水谷さん「時間割、もう少し縦の幅を伸ばしていい」 */
.timetable td { height: 76px; }
.timetable .tt-open { font-size: 14px; }
.timetable tbody th b { font-size: 16px; }
@media (max-width: 900px) { .timetable td { height: 58px; } }

/* 10/28 水谷さん「新患受付と、診療・休みの見方が小さくて見づらい」 */
.timetable-note { margin-top: 16px; font-size: 17px; font-weight: 700; color: var(--ink); }
.timetable-legend { gap: 22px; margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.timetable-legend span { display: inline-flex; align-items: center; gap: 8px; }
.timetable-legend span::before { width: 26px; height: 26px; line-height: 26px; border-radius: 3px; }
.timetable-legend .lg-off::before { font-size: 13px; }
@media (max-width: 900px) {
  .timetable-note { font-size: 16px; }
  .timetable-legend { font-size: 15px; }
}
.timetable-note small { display: block; margin-bottom: 2px; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; }
.timetable-note { white-space: nowrap; }

/* 10/28 水谷さん「金・土午後の休みも、休診と同じ赤に」 */
.timetable .tt-off { background: #fbf0ef; color: var(--alert); font-size: 15px; font-weight: 700; }
.timetable-legend .lg-off::before { background: #fbf0ef; color: var(--alert); font-weight: 700; }

/* =========================================================
   10/28 水谷さん「背景の帯の基準がわからない」→ 白と薄緑を交互にきっちり並べる
   ヒーロー(白) → お知らせ(緑) → 特長(白) → 診療内容(緑) → 診療について(白)
   → 診療方針(緑) → 院長(白) → 院内・設備(緑) → 診療時間・アクセス(白) → フッター(生成り＝終わりの印)
   どの節も上下の余白を同じにして、帯の切れ目＝節の切れ目にする
   ========================================================= */
#news, #features, #services, #medical-detail, #policy, #doctor, #facilities, #hours {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 80px !important;
  padding-bottom: 84px !important;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
#news, #services, #policy, #facilities {
  background: var(--green-tint);
  box-shadow: 0 0 0 100vmax var(--green-tint);
  clip-path: inset(0 -100vmax);
}
/* 薄緑の帯の上では、お知らせの札を白地にして沈まないように */
#news .notice-list span:not(.closed) { background: #fff; box-shadow: inset 0 0 0 1px #cfe3ca; }
#news .notice-list span.closed { background: #fff; box-shadow: inset 0 0 0 1px #efc9c6; }
.hero { padding-bottom: 72px; }
@media (max-width: 900px) {
  #news, #features, #services, #medical-detail, #policy, #doctor, #facilities, #hours {
    padding-top: 52px !important;
    padding-bottom: 56px !important;
  }
  .hero { padding-bottom: 48px; }
}

/* 10/28 水谷さん「色の帯が画面の端から端まで来ている。上の横幅に合わせて」
   → 薄緑の帯は中身の幅（ロゴの左端〜写真の右端）で止め、中は内側に余白を取る */
#news, #services, #policy, #facilities {
  box-shadow: none;
  clip-path: none;
  background: var(--green-tint);
  padding-left: 48px !important;
  padding-right: 48px !important;
}
@media (max-width: 900px) {
  #news, #services, #policy, #facilities {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 10/28 スマホ確認: 住所・駐車場名が言葉の途中で折れないよう、言葉の単位で折り返す */
.access-facts .nw2 { white-space: nowrap; }