@charset "utf-8";
/* =====================================================================
   あおば内科・小児科クリニック（架空）— HNH Design Works デモ / スタンダード
   静的 HTML/CSS。清潔感・明るさ・安心感。白基調＋ソフトブルーグリーン。
   ===================================================================== */

/* ---------- デザイントークン ---------- */
:root{
  --bg:        #ffffff;
  --bg-soft:   #f3f9fa;   /* やわらかい地 */
  --bg-tint:   #e7f4f5;   /* アクセントの淡色 */
  --ink:       #1e2a2e;   /* 本文・見出し（やわらかい濃色） */
  --ink-sub:   #55646a;   /* 補助テキスト */
  --ink-faint: #7b8890;
  --line:      #e0e9eb;   /* 罫線 */
  --line-soft: #eef4f5;
  --accent:      #2e9ba4; /* ソフトブルーグリーン */
  --accent-dark: #1d7a82; /* 文字・リンクでAA確保 */
  --accent-deep: #155e65;
  --warn-soft: #fff6e9;   /* 休診などの注記地 */
  --on-accent: #ffffff;

  --radius-s: 10px;
  --radius:   16px;
  --radius-l: 22px;
  --shadow:   0 2px 10px rgba(30,42,46,.05), 0 8px 28px rgba(30,42,46,.06);
  --shadow-sm:0 1px 4px rgba(30,42,46,.05), 0 4px 14px rgba(30,42,46,.05);

  --maxw: 1080px;
  --gutter: max(20px, 4.5vw);
  --sect-pad: clamp(56px, 8vw, 104px);

  --font-head: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Zen Kaku Gothic New", system-ui, sans-serif;
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  word-break:auto-phrase;
  line-break:strict;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  padding-bottom:56px; /* 下部固定の導線バー分 */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
  word-break:keep-all;
  margin:0;
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* グリッド項目が中身で広がって横はみ出すのを防ぐ安全策 */
.quick-row > *, .care-grid > *, .reserve-grid > *, .info-grid > *,
.facility-grid > *, .form-grid > *, .steps > *{ min-width:0; }

/* ---------- デモ表示（上部）---------- */
.demo-note{
  background:var(--bg-tint);
  color:var(--accent-deep);
  text-align:center;
  font-size:12.5px;
  letter-spacing:.08em;
  padding:6px 12px;
}
.demo-note b{ font-weight:700; }

/* ---------- HNH 導線バー（下部固定）---------- */
#hnh-demobar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; justify-content:center; align-items:center; gap:10px;
  background:#1C2E4A; color:#fff;
  padding:9px 14px;
  font-size:13px; letter-spacing:.03em;
  box-shadow:0 -2px 14px rgba(0,0,0,.14);
}
#hnh-demobar a{ color:#fff; text-decoration:none; white-space:nowrap; }
#hnh-demobar a:hover{ text-decoration:underline; }
#hnh-demobar a.b{
  background:#fff; color:#1C2E4A; font-weight:700;
  padding:7px 14px; border-radius:999px; text-decoration:none;
}
#hnh-demobar a.b:hover{ background:#eaf1fb; text-decoration:none; }

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:150;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr{ display:flex; align-items:center; justify-content:space-between; min-height:66px; gap:16px; }
.brand{ display:flex; flex-direction:column; line-height:1.25; color:var(--ink); }
.brand b{ font-family:var(--font-head); font-size:19px; font-weight:700; letter-spacing:.03em; }
.brand span{ font-size:10.5px; color:var(--accent-dark); letter-spacing:.14em; }
.nav{ display:flex; align-items:center; gap:7px; }
.nav a{
  color:var(--ink); font-size:14.5px; padding:8px 11px; border-radius:var(--radius-s);
  font-weight:500;
}
.nav a:hover{ background:var(--bg-soft); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--accent-dark); font-weight:700; }
.nav .header-cta{
  background:var(--accent); color:#fff; font-weight:700; padding:9px 16px; border-radius:999px;
}
.nav .header-cta:hover{ background:var(--accent-dark); text-decoration:none; }
.hamburger{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:#fff; cursor:pointer; padding:0; position:relative;
}
.hamburger span{ position:absolute; left:11px; right:11px; height:2px; background:var(--ink); transition:.25s; }
.hamburger span:nth-child(1){ top:15px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:27px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* モバイルメニュー */
.m-menu{ display:none; }

/* ---------- 共通：セクション見出し ---------- */
.sect{ padding-block:var(--sect-pad); }
.sect-soft{ background:var(--bg-soft); }
.sect-head{ margin-bottom:clamp(28px,4vw,48px); }
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-size:12px; font-weight:700;
  letter-spacing:.16em; color:var(--accent-dark); margin-bottom:12px;
}
.sect-title{ font-size:clamp(23px,3.6vw,33px); }
.sect-lead{ margin-top:14px; color:var(--ink-sub); max-width:46em; font-size:15.5px; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:15.5px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:background .2s,color .2s,border-color .2s;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); text-decoration:none; }
.btn-ghost{ background:#fff; color:var(--accent-dark); border-color:var(--accent); }
.btn-ghost:hover{ background:var(--bg-tint); text-decoration:none; }
.btn-lg{ padding:16px 32px; font-size:16.5px; }

/* ---------- ヒーロー ---------- */
.hero{ background:linear-gradient(180deg,var(--bg-tint) 0%, #fff 78%); }
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; padding-block:clamp(40px,6vw,76px); }
.hero-inner > *{ min-width:0; }
.hero-copy h1{ font-size:clamp(27px,4.6vw,46px); line-height:1.45; word-break:auto-phrase; }
.hero-copy h1 .accent{ color:var(--accent-dark); }
.hero-copy .sub{ margin-top:18px; color:var(--ink-sub); font-size:16px; max-width:30em; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.hero-tags li{
  font-family:var(--font-head); font-weight:500; font-size:13.5px; color:var(--accent-deep);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-media{ position:relative; }
.hero-media img{ border-radius:var(--radius-l); box-shadow:var(--shadow); width:100%; object-fit:cover; aspect-ratio:16/10; }
.hero-badge{
  position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.94);
  border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow-sm); font-size:13px; color:var(--ink-sub);
}
.hero-badge b{ display:block; font-family:var(--font-head); color:var(--ink); font-size:15px; }

/* ---------- ヒーロー下：要点3枚 ---------- */
.quick-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(24px,4vw,40px); }
.quick-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-sm);
}
.quick-card .ic{ width:40px; height:40px; color:var(--accent-dark); margin-bottom:12px; }
.quick-card h3{ font-size:17px; }
.quick-card p{ margin-top:8px; color:var(--ink-sub); font-size:14.5px; }
.quick-card a{ display:inline-block; margin-top:10px; font-weight:700; font-size:14px; }

/* ---------- 診療時間表 ---------- */
.hours-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); border:1px solid var(--line); background:#fff; }
table.hours{ width:100%; border-collapse:collapse; min-width:420px; }
table.hours caption{ caption-side:top; text-align:left; padding:16px 18px 0; font-size:13px; color:var(--ink-sub); }
table.hours th, table.hours td{ border:1px solid var(--line); text-align:center; padding:14px 6px; font-size:15px; }
table.hours thead th{ background:var(--bg-tint); color:var(--accent-deep); font-family:var(--font-head); font-weight:700; }
table.hours thead th.sun, table.hours thead th.hol{ color:#b24b4b; }
table.hours tbody th{ background:var(--bg-soft); font-family:var(--font-head); white-space:nowrap; }
table.hours .mark{ font-size:18px; color:var(--accent-dark); font-weight:700; }
table.hours .none{ color:var(--ink-faint); }
.hours-note{ margin-top:14px; color:var(--ink-sub); font-size:14px; }
.hours-note .pill{ display:inline-block; background:var(--warn-soft); color:#9a6a1e; border-radius:999px; padding:3px 12px; font-size:13px; margin-right:6px; }

/* ---------- 情報2カラム（アクセス要点など）---------- */
.info-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,44px); align-items:start; }
.info-list{ display:grid; gap:0; border-top:1px solid var(--line); }
.info-list .row{ display:grid; grid-template-columns:120px 1fr; gap:14px; padding:15px 4px; border-bottom:1px solid var(--line); }
.info-list .row dt{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--accent-deep); }
.info-list .row dd{ margin:0; color:var(--ink-sub); font-size:15px; }

/* 地図プレースホルダ */
.map-ph{
  border:1px dashed var(--accent); background:
    repeating-linear-gradient(45deg,#eef6f7 0 14px,#f6fbfb 14px 28px);
  border-radius:var(--radius); aspect-ratio:4/3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:var(--accent-deep); padding:20px;
}
.map-ph svg{ width:40px; height:40px; margin-bottom:10px; }
.map-ph b{ font-family:var(--font-head); font-size:15px; }
.map-ph span{ font-size:13px; color:var(--ink-sub); margin-top:6px; }

/* ---------- 診療案内カード ---------- */
.care-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.care-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-sm);
}
.care-card .ic{ width:44px; height:44px; color:var(--accent-dark); margin-bottom:14px; }
.care-card h3{ font-size:19px; }
.care-card p{ margin-top:10px; color:var(--ink-sub); font-size:15px; }
.care-card ul.pts{ margin-top:14px; display:grid; gap:7px; }
.care-card ul.pts li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--ink-sub); }
.care-card ul.pts li::before{ content:""; position:absolute; left:2px; top:10px; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* ---------- ステップ（受診の流れ）---------- */
.steps{ display:grid; gap:16px; counter-reset:step; }
.step{
  display:grid; grid-template-columns:48px 1fr; gap:18px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm);
}
.step .num{
  counter-increment:step; width:48px; height:48px; border-radius:50%;
  background:var(--bg-tint); color:var(--accent-deep); font-family:var(--font-head); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.step .num::before{ content:counter(step); }
.step h3{ font-size:17px; }
.step p{ margin-top:7px; color:var(--ink-sub); font-size:14.5px; }

/* ---------- 予約手段3枚 ---------- */
.reserve-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.reserve-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center; box-shadow:var(--shadow-sm);
}
.reserve-card .ic{ width:46px; height:46px; color:var(--accent-dark); margin:0 auto 12px; }
.reserve-card h3{ font-size:18px; }
.reserve-card p{ margin-top:9px; color:var(--ink-sub); font-size:14.5px; }
.reserve-card .btn{ margin-top:16px; width:100%; }

/* デモ注記ボックス */
.demo-box{
  margin-top:18px; background:var(--warn-soft); border:1px solid #f0dcba; color:#8a6316;
  border-radius:var(--radius); padding:14px 18px; font-size:14px;
}

/* ---------- 予約フォーム（デモ・送信不可）---------- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,4vw,34px); box-shadow:var(--shadow-sm); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-head); font-weight:700; font-size:14px; }
.field label .req{ color:#b24b4b; font-size:12px; margin-left:6px; }
.field input, .field select, .field textarea{
  font:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--bg-soft); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ background:#fff; outline:2px solid var(--accent); }
.form-actions{ margin-top:22px; display:flex; flex-direction:column; gap:10px; align-items:center; }

/* ---------- あいさつ / 設備 ---------- */
.feature{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(26px,4vw,52px); align-items:center; }
.feature > *{ min-width:0; }
.feature.rev{ grid-template-columns:1.05fr .95fr; }
.feature img{ border-radius:var(--radius-l); box-shadow:var(--shadow); width:100%; aspect-ratio:3/2; object-fit:cover; }
.feature h3{ font-size:clamp(20px,2.6vw,26px); }
.feature p{ margin-top:14px; color:var(--ink-sub); }
.feature p + p{ margin-top:12px; }

.facility-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.facility{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.facility img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.facility .body{ padding:16px 18px 20px; }
.facility h3{ font-size:16.5px; }
.facility p{ margin-top:7px; color:var(--ink-sub); font-size:14px; }

/* ---------- CTA 帯 ---------- */
.cta-band{ background:linear-gradient(135deg,var(--accent) 0%, var(--accent-dark) 100%); color:#fff; border-radius:var(--radius-l); padding:clamp(30px,5vw,52px); text-align:center; }
.cta-band h2{ color:#fff; font-size:clamp(22px,3.2vw,30px); }
.cta-band p{ margin-top:12px; color:rgba(255,255,255,.92); }
.cta-band .btn-row{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cta-band .btn-primary{ background:#fff; color:var(--accent-dark); }
.cta-band .btn-primary:hover{ background:#eafafb; }
.cta-band .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- ページヘッダー（下層）---------- */
.page-hero{ background:linear-gradient(180deg,var(--bg-tint),#fff); padding-block:clamp(40px,6vw,66px); }
.page-hero .eyebrow{ margin-bottom:10px; }
.page-hero h1{ font-size:clamp(26px,4vw,40px); }
.page-hero p{ margin-top:14px; color:var(--ink-sub); max-width:44em; }
.crumbs{ font-size:13px; color:var(--ink-faint); margin-bottom:14px; }
.crumbs a{ color:var(--ink-sub); }

/* ---------- 注意・持ち物リスト ---------- */
.checklist{ display:grid; gap:12px; }
.checklist li{ position:relative; padding-left:34px; color:var(--ink-sub); font-size:15px; }
.checklist li::before{
  content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:6px;
  background:var(--bg-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231d7a82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- 注記（来院前に）---------- */
.notes{ display:grid; gap:0; border-top:1px solid var(--line); }
.notes .n{ padding:20px 4px; border-bottom:1px solid var(--line); }
.notes .n h3{ font-size:16.5px; }
.notes .n p{ margin-top:8px; color:var(--ink-sub); font-size:15px; }

/* ---------- フッター ---------- */
.site-footer{ background:var(--ink); color:#cfd8db; padding-block:clamp(40px,5vw,60px); font-size:14px; }
.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.site-footer h4{ color:#fff; font-size:15px; margin-bottom:12px; }
.site-footer a{ color:#cfd8db; }
.site-footer a:hover{ color:#fff; }
.site-footer .f-brand b{ font-family:var(--font-head); font-size:18px; color:#fff; display:block; }
.site-footer .f-brand span{ font-size:11px; letter-spacing:.14em; color:#8fa6ab; }
.site-footer ul.f-links{ display:grid; gap:9px; }
.site-footer .f-note{ grid-column:1 / -1; border-top:1px solid #33454a; margin-top:10px; padding-top:20px; color:#9fb0b4; font-size:12.5px; line-height:1.85; }
.site-footer .f-note b{ color:#dfe8ea; }

/* ---------- スクロール表示（控えめ）---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===================== レスポンシブ ===================== */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
  .info-grid{ grid-template-columns:1fr; }
  .feature, .feature.rev{ grid-template-columns:1fr; }
  .feature img{ order:-1; }
  .facility-grid{ grid-template-columns:repeat(2,1fr); }
  .site-footer .wrap{ grid-template-columns:1fr 1fr; }
  .site-footer .f-brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .nav{ display:none; }
  .hamburger{ display:block; }
  .m-menu{
    display:block; position:fixed; inset:0; z-index:140; background:rgba(255,255,255,.98);
    padding:84px var(--gutter) 40px; transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto;
  }
  .m-menu.open{ transform:none; }
  .m-menu a{ display:block; padding:16px 4px; border-bottom:1px solid var(--line); font-family:var(--font-head); font-weight:700; font-size:18px; color:var(--ink); }
  .m-menu .header-cta{ margin-top:22px; text-align:center; background:var(--accent); color:#fff; border-radius:999px; border:none; }
  .quick-row{ grid-template-columns:1fr; }
  .reserve-grid{ grid-template-columns:1fr; }
  .care-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .facility-grid{ grid-template-columns:1fr; }
  .site-footer .wrap{ grid-template-columns:1fr; }
  #hnh-demobar{ font-size:12px; gap:8px; padding:8px 12px; }
  #hnh-demobar a.b{ padding:7px 12px; }
  table.hours th, table.hours td{ padding:11px 3px; font-size:13.5px; }
  .info-list .row{ grid-template-columns:96px 1fr; gap:10px; }
}
@media (max-width:360px){
  :root{ --gutter:16px; }
  .hero-copy h1{ font-size:25px; }
  table.hours{ min-width:360px; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}