@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* 基本設定 */
:root { --ink:#334342; --deep:#2f665d; --accent:#76a99a; --pale:#f2f7f4; --cream:#fffaf2; --line:#d9e5df; --alert:#a5544a; --content:1040px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:15px; line-height:1.9; }
a { color:inherit; }
img { display:block; max-width:100%; }
.container { width:min(var(--content),calc(100% - 40px)); margin:0 auto; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* 共通部品 */
main section { padding:70px 0; }
main section[id] { scroll-margin-top:96px; }
.section-title { margin:0 0 28px; color:var(--deep); font-size:clamp(1.45rem,2.4vw,2rem); font-weight:500; line-height:1.5; letter-spacing:.04em; }
.section-title::after { display:block; width:34px; height:2px; margin-top:12px; background:var(--accent); content:""; }
.section-heading-mascot { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:28px; }
.section-heading-mascot .section-title { margin:0; }
.section-heading-mascot img { flex:none; width:112px; }
.icon-box { display:grid; place-items:center; flex:none; background:#e4f1eb; }
.bullet-list { display:grid; margin:0; padding:0; list-style:none; }

/* ヘッダー・メインビジュアル */
.site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); box-shadow:0 3px 12px rgba(40,73,65,.05); }
.header-inner { display:flex; align-items:center; justify-content:space-between; width:min(var(--content),calc(100% - 40px)); height:78px; margin:0 auto; gap:32px; }
.site-name { margin:0; line-height:0; }
.header-inner img { width:255px; }
.site-nav ul { display:flex; justify-content:flex-end; margin:0; padding:0; list-style:none; }
.site-nav a { display:block; padding:10px 17px; color:var(--deep); font-size:.84rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.site-nav a:hover { background:var(--pale); }
.fever { padding:14px 0; border-bottom:1px solid #f0e1c7; background:var(--cream); }
.fever .container { display:flex; align-items:center; min-height:42px; gap:15px; }
.fever-label { flex:none; padding:2px 11px; border-radius:999px; background:var(--alert); color:#fff; font-size:.75rem; font-weight:700; }
.fever p { margin:0; font-size:.83rem; line-height:1.6; }
.fever strong,.fever a { color:var(--alert); }
.fever a { font-weight:700; }
.hero { position:relative; height:280px; overflow:hidden; border-radius:0 0 28px 28px; background:#e7f0ed; }
.hero-slide { position:absolute; inset:0; opacity:0; animation:hero-fade 10s infinite; }
.hero-slide:nth-child(2) { animation-delay:5s; }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.9) contrast(.98); }
@keyframes hero-fade { 0%,28%,100% { opacity:1; } 34%,94% { opacity:0; } }

/* 診療日時 */
.schedule { padding:46px 0 42px!important; background:#fff; }
.hours-table-wrap { max-width:100%; overflow-x:auto; }
.hours-table { width:min(100%,780px); margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:12px; border-collapse:separate; border-spacing:0; table-layout:fixed; background:#fff; font-size:.84rem; }
.hours-table col:first-child { width:26%; }
.hours-table th,.hours-table td { padding:8px 7px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap; }
.hours-table th { background:var(--deep); color:#fff; font-weight:700; }
.hours-table tbody th { background:#fff; color:var(--ink); font-weight:400; }
.hours-table th.wed,.hours-table th.holiday { background:#a95f56; }
.hours-table th:first-child,.hours-table td:first-child { padding-left:18px; text-align:left; }
.time-range { color:var(--deep); font-weight:700; }
.reception,.service-detail-summary-note,.service-detail-note { display:inline-block; padding:3px 9px; border-radius:999px; background:var(--cream); color:#715f4d; }
.reception { margin-left:7px; padding:1px 7px; background:#f1f6f3; color:#58756d; font-size:.71rem; }
.hours-table td.open { background:#e9f4ef; color:var(--deep); font-weight:700; }
.hours-table td.closed { background:#fff6f2; color:#b36257; }
.hours-scroll-hint { display:none; }

/* 診療案内 */
.services { background:var(--pale); }
.medical-panel > .section-title { margin-bottom:12px; }
.service-lead { margin:0 0 28px; color:#58756d; font-size:.88rem; }
.service-menu { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.service-menu button { display:flex; align-items:center; width:100%; min-height:92px; padding:16px 18px; border:1px solid #dce9e3; border-radius:13px; background:#fff; box-shadow:0 4px 14px rgba(37,80,68,.05); color:var(--deep); font:inherit; text-align:left; cursor:pointer; transition:transform .18s,background .18s; gap:13px; }
.service-menu button:hover { transform:translateY(-2px); }
.service-menu button:focus-visible { outline:3px solid rgba(118,169,154,.55); outline-offset:2px; }
.material-symbols-rounded { font-family:"Material Symbols Rounded"; font-size:25px; font-style:normal; font-weight:normal; line-height:1; letter-spacing:normal; white-space:nowrap; direction:ltr; -webkit-font-smoothing:antialiased; font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24; }
.service-menu-icon,.service-detail-icon { display:grid; flex:none; place-items:center; border-radius:9px; background:#e4f1eb; }
.service-menu-icon { width:42px; height:42px; border-radius:12px; background:#fff; box-shadow:0 3px 10px rgba(37,80,68,.08); }
.service-menu-label { font-size:1rem; font-weight:700; line-height:1.45; letter-spacing:.03em; }
.service-detail-heading { display:flex; align-items:center; margin:52px 0 16px; color:var(--deep); font-size:1.15rem; font-weight:700; letter-spacing:.04em; gap:10px; }
.service-detail-heading::before,.secondary-section .section-title::before { width:8px; height:8px; border-radius:50%; background:var(--accent); content:""; }
.service-detail-heading small { color:#58756d; font-size:.72rem; font-weight:500; letter-spacing:0; }
.service-details { display:grid; gap:9px; }
.service-details details { overflow:hidden; scroll-margin-top:95px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.service-details summary { display:flex; align-items:center; min-height:65px; padding:13px 17px; color:var(--deep); font-size:1rem; font-weight:700; list-style:none; cursor:pointer; gap:12px; }
.service-details summary::-webkit-details-marker { display:none; }
.service-details summary::after { margin-left:auto; color:var(--accent); font-size:1.25rem; font-weight:400; content:"＋"; }
.service-details details[open] summary { background:var(--pale); }
.service-details details[open] summary::after { content:"−"; }
.service-details details.service-detail--reservation summary { flex-wrap:wrap; }
.service-details details.service-detail--reservation summary::after { margin-left:10px; }
.service-details details.service-detail--reservation[open] summary::after { margin-left:auto; }
.service-detail-icon { width:31px; height:31px; }
.service-detail-icon .material-symbols-rounded { font-size:20px; }
.service-detail-summary-note { margin-left:auto; padding:2px 8px; font-size:.68rem; font-weight:500; white-space:nowrap; }
.service-details details[open] .service-detail-summary-note { display:none; }
.service-detail-body { padding:17px 60px 21px; font-size:.88rem; }
.service-detail-body p { margin:0; }
.service-detail-body ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:13px 0 0; padding:0; list-style:none; gap:7px 24px; }
.service-detail-body li,.first-visit li,.referral-list li { position:relative; }
.service-detail-body li { padding-left:13px; }
.service-detail-body li::before,.first-visit li::before,.referral-list li::before { position:absolute; border-radius:50%; background:var(--accent); content:""; }
.service-detail-body li::before { top:.7em; left:0; width:5px; height:5px; }
.service-detail-note { margin-top:14px; font-size:.76rem; }

/* 初診・当院紹介・医療連携 */
.first-visit-section { background:var(--cream); }
.first-visit-section .first-visit { margin:0; padding:0; }
.first-visit-content,.referrals p,.referral-list { max-width:780px; }
.first-visit p { margin:0 0 7px; font-size:.82rem; }
.first-visit ul,.referral-list { display:grid; margin:0; padding:0; list-style:none; }
.first-visit ul { gap:6px; font-size:.8rem; }
.first-visit li { padding:8px 13px 8px 29px; border-radius:8px; background:#fff; }
.first-visit li::before { top:17px; left:13px; width:7px; height:7px; }
.about,.referrals { background:#fff; }
.about-copy p,.greeting p { margin:0 0 15px; font-size:.9rem; }
.secondary-section { padding:54px 0; }
.secondary-section .section-title { display:flex; align-items:center; margin:0 0 20px; font-size:.98rem; font-weight:700; gap:9px; }
.secondary-section .section-title::after { display:none; }
.greeting { background:var(--pale); }
.greeting-grid { display:grid; grid-template-columns:minmax(290px,.92fr) 1fr; align-items:start; gap:65px; }
.about-photo { height:365px; overflow:hidden; border-radius:14px; }
.about-photo img { width:100%; height:100%; object-fit:cover; object-position:48% center; }
.director { margin-top:24px!important; color:var(--deep); font-weight:700; }
.career-title { margin:28px 0 10px; color:var(--deep); font-size:1rem; }
.career-list { margin:0; padding:0; border-top:1px solid var(--line); list-style:none; }
.career-list li { display:grid; grid-template-columns:1fr 3fr; padding:13px 0; border-bottom:1px solid var(--line); font-size:.82rem; line-height:1.75; gap:18px; }
.career-list strong,.access-details dt { color:var(--deep); font-weight:700; }
.referrals p { margin:0 0 20px; font-size:.88rem; }
.referral-list { gap:2px; }
.referral-list li { padding:8px 16px 8px 30px; border-radius:8px; background:#fff; font-size:.84rem; }
.referral-list li::before { top:18px; left:12px; width:7px; height:7px; }
.referral-list li:last-child { margin-top:7px; padding:0; background:transparent; color:#58756d; font-size:.78rem; }
.referral-list li:last-child::before { display:none; }

/* アクセス・フッター */
.access { background:#e5f0ea; }
.access > .container > .section-title { margin-bottom:28px; }
.access-grid { display:grid; grid-template-columns:1fr .95fr; align-items:stretch; gap:46px; }
.access-address { display:flex; align-items:flex-start; margin:0; padding:18px; border-radius:12px; background:#fff; font-size:.9rem; line-height:1.7; gap:12px; }
.access-address .material-symbols-rounded { flex:none; margin-top:2px; color:var(--accent); }
.access-details { display:grid; margin:12px 0 0; gap:9px; }
.access-details div { display:grid; grid-template-columns:94px 1fr; padding:14px 16px; border-radius:10px; background:rgba(255,255,255,.82); font-size:.83rem; line-height:1.7; gap:13px; }
.access-details dd { margin:0; }
.map-link { display:flex; align-items:center; justify-content:center; margin-top:15px; padding:12px 16px; border-radius:9px; background:var(--deep); color:#fff; font-size:.84rem; font-weight:700; text-decoration:none; gap:8px; }
.map-link:hover { background:#24584f; }
.map-link .material-symbols-rounded { font-size:19px; }
.access-photo { min-height:310px; height:100%; overflow:hidden; border-radius:14px; }
.access-photo img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.5); }
.site-footer { padding:25px 0; background:var(--deep); color:#fff; text-align:center; }
.footer-brand { display:inline-block; width:min(430px,calc(100% - 40px)); }
.footer-brand img { width:100%; filter:grayscale(1) brightness(0) invert(1); opacity:.94; }
.site-footer small { display:block; margin-top:11px; color:#dcece6; font-size:.7rem; }

/* モバイル */
@media (max-width:720px) {
  body { font-size:14px; }
  .container,.header-inner { width:min(100% - 30px,560px); }
  .header-inner { display:block; height:auto; padding:9px 0 8px; }
  .header-inner img { width:158px; margin:0 auto 5px; }
  .site-nav ul,.service-menu { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
  .site-nav ul { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .site-nav a { padding:4px 2px; font-size:.72rem; text-align:center; }
  .hero { height:195px; }
  main section { padding:48px 0; }
  .section-title { margin-bottom:22px; }
  .section-heading-mascot { gap:14px; margin-bottom:22px; }
  .section-heading-mascot img { width:82px; }
  .fever .container { gap:9px; }
  .fever p { font-size:.73rem; line-height:1.65; }
  .hours-table-wrap { overflow-x:visible; }
  .hours-table { width:100%; min-width:0; font-size:.78rem; }
  .hours-table col:first-child { width:23%; }
  .hours-table th,.hours-table td { padding:9px 5px; }
  .hours-table th:first-child,.hours-table td:first-child { padding-left:8px; white-space:normal; }
  .time-range { display:block; }
  .reception { margin:3px 0 0; font-size:.7rem; }
  .service-lead { margin-bottom:22px; font-size:.84rem; }
  .service-menu button { min-height:75px; padding:11px 10px; border-radius:11px; gap:9px; }
  .service-menu-icon { width:34px; height:34px; border-radius:10px; }
  .service-menu-icon .material-symbols-rounded { font-size:21px; }
  .service-menu-label { font-size:.84rem; }
  .service-detail-heading { margin-top:39px; font-size:1.06rem; }
  .service-detail-heading small { display:none; }
  .service-details summary { min-height:58px; padding:11px 13px; font-size:.92rem; }
  .service-detail-summary-note { padding:2px 6px; font-size:.61rem; }
  .service-detail-body { padding:14px 16px 18px; font-size:.83rem; }
  .service-detail-body ul,.greeting-grid,.access-grid,.career-list li { grid-template-columns:1fr; }
  .service-detail-body ul { gap:5px; }
  .greeting-grid,.access-grid { gap:24px; }
  .career-list li { padding:13px 0; gap:2px; }
  .about-photo { height:280px; }
  .access-address { padding:15px; font-size:.83rem; }
  .access-details div { grid-template-columns:78px 1fr; padding:12px 13px; font-size:.77rem; gap:9px; }
  .map-link { padding:11px 14px; font-size:.8rem; }
  .access-photo { min-height:0; height:220px; }
}
@media (min-width:721px) and (max-width:920px) { .section-heading-mascot img { width:96px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hero-slide { animation:none; } .hero-slide:first-child { opacity:1; } }
