@charset "UTF-8";

/* =========================================================
   ひなた内科医院  style.css  (参照モック準拠リデザイン)
   軽やかでエディトリアルな、温かみのあるオフホワイト + 若葉グリーン。
   70代の患者が3秒で「電話・午後診療の有無・駐車場」に到達できる導線を最優先。
   ========================================================= */

:root {
  --bg: #FBF8F1;
  --surface: #FFFFFF;
  --cream: #F6EEE1;
  --green-panel: #E9F1E7;
  --green: #6E9A72;              /* 装飾・下線・ヒーロー見出し */
  --green-dark: #3F6B4A;         /* 文字・見出し（コントラスト確保）*/
  --green-btn: #4F7856;          /* 緑ボタン背景（白文字4.5:1）*/
  --green-btn-dark: #3E6345;
  --orange: #C0521F;             /* 電話CTA・電話番号（4.5:1）*/
  --orange-dark: #A5461A;
  --alert: #B85C38;
  --alert-dark: #8F3A1E;         /* 淡赤背景でも4.5:1 */
  --text: #33352E;
  --text-sub: #5B5D54;
  --border: #E6DDCC;

  --font-heading: "Zen Maru Gothic", "BIZ UDPGothic", sans-serif;
  --font-body: "BIZ UDPGothic", "Zen Maru Gothic", sans-serif;

  --font-xs: 14px;
  --font-sm: 16px;
  --font-md: 17px;
  --font-lg: 19px;
  --font-xl: 24px;
  --font-2xl: 32px;

  --line-body: 1.85;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(63, 107, 74, 0.08);
  --shadow-card: 0 4px 16px rgba(63, 107, 74, 0.08);

  --container: 1120px;
  --header-h: 84px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-md);
  line-height: var(--line-body);
  color: var(--text);
  background: var(--bg);
  padding-bottom: 76px;                 /* SP固定ボタン分 */
}
h1,h2,h3,p,ul,ol,dl,dd,figure { margin: 0; }
ul,ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-dark); }
strong { font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 24px; top: -60px; z-index: 200;
  background: var(--green-dark); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); transition: top .2s;
}
.skip-link:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 3px; }

/* ---------- 共通アイコン（マスク） ---------- */
.ic, .leaf-ico, .home-ico, .check-ico, .news-chev {
  display: inline-block; flex: 0 0 auto;
  background-color: var(--green-dark);
  -webkit-mask: var(--m) center/contain no-repeat;
          mask: var(--m) center/contain no-repeat;
}
.leaf-ico {
  width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px;
  background-color: var(--green);
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 4 4 8 4 13c0 4 3 7 7 7 1 0 2-.2 3-.5V9h1v10.2c3-1.4 5-4.3 5-8 0-5-4-8-8-9z'/%3E%3C/svg%3E");
}
.home-ico {
  width: 30px; height: 30px;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 8h-2.5v9h-13v-9H3zM11 13v6h2v-6z'/%3E%3C/svg%3E");
}
.check-ico {
  width: 22px; height: 22px; margin-right: 10px;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-4.2-4.2-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* =========================================================
   ボタン
   ========================================================= */
.tel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 10px 28px;
  background: var(--orange); color: #fff;
  font-family: var(--font-heading); font-weight: 700;
  text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
  transition: background-color .2s;
}
.tel-btn:hover, .tel-btn:active { background: var(--orange-dark); }
.tel-ico { flex: 0 0 auto; }
.tel-btn-label { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.tel-btn-lead { font-size: var(--font-xs); font-weight: 700; color: #fff; }
.tel-num { font-size: var(--font-lg); letter-spacing: .02em; }

.tel-btn--hero { min-height: 72px; padding-inline: 34px; }
.tel-btn--hero .tel-num { font-size: 26px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 26px;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--font-md);
  text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-pill); transition: background-color .2s;
}
.btn--green { background: var(--green-btn); color: #fff; }
.btn--green:hover { background: var(--green-btn-dark); }

/* =========================================================
   見出し（下線アクセント）
   ========================================================= */
.sec-head {
  font-family: var(--font-heading); font-weight: 700;
  font-size: var(--font-xl); line-height: 1.4; color: var(--green-dark);
  display: flex; align-items: center; flex-wrap: wrap;
  margin-bottom: 20px;
}
.sec-head::after {
  content: ""; flex-basis: 100%;
  width: 46px; height: 3px; margin-top: 12px;
  background: var(--green); border-radius: 2px;
}
.sec-head--center { justify-content: center; text-align: center; margin-bottom: 40px; }
.sec-head--center::after { margin-inline: auto; }
.sec-sub { color: var(--text-sub); margin-top: -8px; margin-bottom: 28px; }

.section { padding-block: 72px; }
.section[id], #top { scroll-margin-top: calc(var(--header-h) + 8px); }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 248, 241, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--header-h); padding-block: 10px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; color: var(--text); }
.brand-mark { line-height: 0; }
.brand-text { display: inline-flex; flex-direction: column; }
.brand-tag { font-size: 12px; color: var(--text-sub); letter-spacing: .02em; }
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--text); letter-spacing: .04em; white-space: nowrap; }

.gnav { display: none; }

.header-contact {
  display: none; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); text-decoration: none; flex: 0 0 auto;
}
.header-contact-lead { font-size: 10.5px; color: var(--text-sub); }
.header-contact-tel {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 700; font-size: 21px;
  color: var(--orange); letter-spacing: .01em;
}
.header-contact-tel .tel-ico { color: var(--orange); }
.header-contact-note { font-size: 11px; color: var(--text-sub); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero {
  display: grid; grid-template-columns: 1fr; background: var(--bg); overflow: hidden;
}
.hero-text { padding: 40px 24px 8px; }
.hero-title { font-family: var(--font-heading); font-weight: 700; line-height: 1.35; margin-bottom: 20px; }
.hero-title-1 { display: block; font-size: 26px; color: var(--text); }
.hero-title-2 { display: block; font-size: 34px; color: var(--green-dark); margin-top: 6px; }
.hero-desc { color: var(--text-sub); margin-bottom: 28px; }
.hero-note { margin-top: 20px; font-size: var(--font-sm); color: var(--text-sub); }
.hero-media { min-height: 300px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   お知らせ
   ========================================================= */
.news { background: var(--surface); }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 16px 20px; background: var(--bg); border-radius: var(--radius-md);
  transition: background-color .15s;
}
.news-item:hover { background: var(--cream); }
.news-date { font-size: var(--font-sm); color: var(--text-sub); font-variant-numeric: tabular-nums; }
.news-cat {
  font-size: var(--font-xs); font-weight: 700; color: #fff; background: var(--green-dark);
  border-radius: var(--radius-sm); padding: 3px 12px; white-space: nowrap; min-width: 4.5em; text-align: center;
}
.news-cat--rest { background: var(--alert-dark); }
.news-cat--vac  { background: #3E6E86; }
.news-body { flex: 1 1 60%; font-size: var(--font-md); color: var(--text); }
.news-chev {
  width: 18px; height: 18px; margin-left: auto; background-color: var(--green);
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   当院について
   ========================================================= */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.about-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); aspect-ratio: 4/3; object-fit: cover; }
.about-text p + p { margin-top: 14px; }
.about-director { display: flex; align-items: center; gap: 20px; }
.director-photo { flex: 0 0 auto; width: 132px; height: 176px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.director-role { font-size: var(--font-sm); color: var(--text-sub); }
.director-name { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--text); margin-block: 2px 8px; }
.director-cred { font-size: var(--font-xs); color: var(--text-sub); line-height: 1.6; }

/* =========================================================
   診療案内
   ========================================================= */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.services-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-group-title {
  font-family: var(--font-heading); font-weight: 700; font-size: var(--font-lg);
  color: var(--green-dark); margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.service-list li { font-size: var(--font-md); padding: 5px 0; }
.services-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); aspect-ratio: 3/2; object-fit: cover; }

/* =========================================================
   健診・予防接種 ／ 訪問診療 パネル
   ========================================================= */
.panels-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.panel { border-radius: var(--radius-lg); padding: 32px; }
.panel--checkup { background: var(--cream); }
.panel--homecare { background: var(--green-panel); }
.panel-desc { color: var(--text-sub); margin-bottom: 20px; }
.vac-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.vac-list li {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  text-align: center; padding: 9px 8px; font-size: var(--font-sm); font-weight: 700;
}
.vac-note { font-size: var(--font-xs); color: var(--text-sub); }
.homecare-badge {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  font-size: var(--font-md);
}
.homecare-badge strong { font-family: var(--font-heading); font-size: var(--font-xl); color: var(--green-dark); }

/* =========================================================
   初めての方へ
   ========================================================= */
.firstvisit { background: var(--bg); }
.firstvisit-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.flow {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card);
}
.flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; flex: 1; }
.flow-num {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--green-btn); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: var(--font-xl);
}
.flow-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--font-lg); color: var(--green-dark); }
.flow-step p { font-size: var(--font-sm); color: var(--text-sub); }
.flow-arrow {
  align-self: center; width: 22px; height: 18px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20l-8-9h5V4h6v7h5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20l-8-9h5V4h6v7h5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bring {
  background: var(--green-panel); border-radius: var(--radius-lg); padding: 28px;
}
.bring-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--font-md); color: var(--green-dark); margin-bottom: 14px; }
.bring-list li { display: flex; align-items: center; font-size: var(--font-md); font-weight: 700; padding: 6px 0; }

/* =========================================================
   アクセス ／ 診療時間
   ========================================================= */
.access { background: var(--surface); }
.access-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.access-body { display: grid; grid-template-columns: 1fr; gap: 20px; }
.access-map img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-card); aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--border); }
.access-dl { display: flex; flex-direction: column; }
.access-row { display: flex; gap: 16px; padding-block: 14px; border-top: 1px solid var(--border); }
.access-row:last-child { border-bottom: 1px solid var(--border); }
.access-row dt { flex: 0 0 5.6em; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-dark); }
.access-row dd { flex: 1; }
.access-tel { font-family: var(--font-heading); font-weight: 700; font-size: var(--font-xl); color: var(--orange); text-decoration: none; }
.ic { width: 18px; height: 18px; }
.ic-pin  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); }
.ic-tel  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.3 1.1l-2.2 2z'/%3E%3C/svg%3E"); }
.ic-park { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 11l1.4-4.2A2 2 0 0 1 9.3 5h5.4a2 2 0 0 1 1.9 1.8L18 11h1v6h-2v-2H7v2H5v-6zm2.5 3a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4zm7 0a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E"); }
.ic-bus  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a2 2 0 0 1 2 2v10a2 2 0 0 1-1 1.7V19h-2.5v-2h-9v2H5v-2.3A2 2 0 0 1 4 15V5a2 2 0 0 1 2-2zm0 4v4h12V7zm2 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E"); }

.hours-summary { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; font-size: var(--font-md); font-weight: 700; }
.hours-summary-key {
  display: inline-block; min-width: 5.2em; text-align: center; margin-right: 12px; padding: 3px 10px;
  border-radius: var(--radius-sm); background: var(--green-panel); color: var(--green-dark); font-size: var(--font-sm);
}
.hours-summary-key--pm { background: var(--green-dark); color: #fff; }
.hours-table-wrap { overflow-x: auto; }
.hours-table { width: 100%; border-collapse: collapse; text-align: center; font-size: var(--font-md); table-layout: fixed; }
.hours-table th, .hours-table td { border: 1px solid var(--border); padding: 12px 3px; }
.hours-table thead th:first-child, .hours-table tbody th { width: 84px; }
.hours-table thead th { background: var(--green-panel); color: var(--green-dark); font-weight: 700; }
.hours-table tbody th { background: var(--green-panel); color: var(--green-dark); font-weight: 700; font-size: var(--font-xs); line-height: 1.35; }
.hours-table .is-holiday { background: #FBEEE9; color: var(--alert-dark); }
.hours-table td.is-pm { background: var(--green-panel); }
.mark-o { font-weight: 700; color: var(--green-dark); font-size: var(--font-lg); }
.mark-x { color: var(--text-sub); font-size: var(--font-sm); }
.hours-caption { margin-top: 14px; font-size: var(--font-sm); font-weight: 700; color: var(--green-dark); }

/* =========================================================
   フッター
   ========================================================= */
.site-footer { background: var(--green-dark); color: #fff; padding-block: 36px; text-align: center; }
.footer-disclaimer { font-size: var(--font-sm); color: rgba(255,255,255,.85); }
.footer-copy { margin-top: 10px; font-size: var(--font-xs); color: rgba(255,255,255,.9); }

/* =========================================================
   スマホ固定電話ボタン
   ========================================================= */
.fixed-tel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  background: rgba(251,248,241,.94); backdrop-filter: blur(6px); border-top: 1px solid var(--border);
}
.tel-btn--fixed { width: 100%; min-height: 56px; }
.tel-btn--fixed .tel-num { font-size: var(--font-lg); }

/* =========================================================
   レスポンシブ ( >= 768px )
   ========================================================= */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .fixed-tel { display: none; }
  .header-contact { display: flex; }

  .section { padding-block: 88px; }
  .sec-head { font-size: 28px; }

  /* ヒーロー 2カラム（写真は右端までブリード） */
  .hero { grid-template-columns: 46% 54%; align-items: stretch; }
  .hero-text {
    align-self: center;
    padding: 64px 48px 64px max(24px, calc((100vw - var(--container)) / 2 + 24px));
  }
  .hero-title-1 { font-size: 29px; }
  .hero-title-2 { font-size: 38px; letter-spacing: -0.01em; }
  .hero-media { min-height: 520px; }

  /* お知らせ 2カラム */
  .news-grid { grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }

  /* 当院について 3カラム */
  .about-grid { grid-template-columns: 0.92fr 1.05fr 0.95fr; gap: 40px; }
  .about-photo img { aspect-ratio: 3/4; }
  .about-director { flex-direction: column; align-items: flex-start; }

  /* 診療案内 テキスト+写真 */
  .services-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  /* パネル横並び */
  .panels-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .panel { padding: 40px; }
  .vac-list { grid-template-columns: repeat(3, 1fr); }

  /* 初めての方へ */
  .firstvisit-grid { grid-template-columns: 1fr 300px; gap: 28px; align-items: stretch; }
  .flow { flex-direction: row; align-items: center; }
  .flow-arrow {
    width: 24px; height: 22px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l9-8v5h7v6h-7v5z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l9-8v5h7v6h-7v5z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .bring { display: flex; flex-direction: column; justify-content: center; }

  /* アクセス 2カラム */
  .access-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .access-body { grid-template-columns: 190px 1fr; }
}

@media (min-width: 1024px) {
  .gnav { display: block; min-width: 0; }
  .gnav ul { display: flex; gap: 15px; }
  .gnav a {
    display: inline-block; padding: 6px 2px; font-family: var(--font-heading); font-weight: 700;
    font-size: 14.5px; white-space: nowrap; color: var(--text); text-decoration: none;
    border-bottom: 2px solid transparent;
  }
  .gnav a:hover { color: var(--green-dark); border-bottom-color: var(--green); }
  .gnav a[aria-current="page"] { color: var(--green-dark); border-bottom-color: var(--green); }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}