/* ===== 石川内科 営業デモ v2（しずく/アクア・リデザイン） ===== */
:root{
  --aqua:#19B5E8;        /* 装飾・水滴・アイコン（明るい水色） */
  --aqua-deep:#0B6FA0;   /* ボタン/リンク/見出しアクセント（白文字AA） */
  --aqua-deeper:#075A82; /* hover */
  --tint:#E9F7FC;        /* 淡い水色面 */
  --tint2:#D4EEFA;
  --accent:#C0303C;      /* 看板の赤（差し色） */
  --accent-deep:#9E2531;
  --ink:#21323B;         /* 本文 */
  --ink-mut:#5C6E78;     /* 補助 */
  --line:#E1EDF2;
  --white:#fff;
  --maxw:1120px;
  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --sh-1:0 2px 8px rgba(11,111,160,.07);
  --sh-2:0 14px 40px rgba(11,111,160,.14);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  font-weight:500;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.tel-num,.hero-note,.access-dl dd,.footer-info,.hours-table td,.feat-num{font-family:'Inter','Zen Kaku Gothic New',sans-serif;}

/* ===== ボタン ===== */
.btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--aqua-deep);color:#fff;font-weight:700;border-radius:50px;padding:14px 28px;box-shadow:var(--sh-1);transition:background .2s,transform .15s,box-shadow .2s;}
.btn-primary:hover{background:var(--aqua-deeper);transform:translateY(-2px);box-shadow:var(--sh-2);}
.btn-white{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--aqua-deep);font-weight:700;border-radius:50px;padding:14px 28px;box-shadow:var(--sh-1);transition:transform .15s,box-shadow .2s;}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
.btn-lg{padding:17px 34px;font-size:17px;}
.btn-tel{display:inline-flex;align-items:center;gap:8px;background:var(--aqua-deep);color:#fff;font-weight:700;border-radius:50px;padding:11px 20px;transition:background .2s,transform .15s;}
.btn-tel:hover{background:var(--aqua-deeper);transform:translateY(-1px);}
.tel-ico{font-size:1.05em;}

/* ===== 装飾しずくブロブ ===== */
.blob{position:absolute;border-radius:42% 58% 60% 40%/45% 45% 55% 55%;filter:blur(2px);z-index:0;pointer-events:none;}
.blob-1{width:420px;height:420px;background:var(--tint2);top:-120px;right:-100px;opacity:.7;}
.blob-2{width:240px;height:240px;background:var(--tint);bottom:-80px;left:-80px;opacity:.8;}
.blob-3{width:360px;height:360px;background:rgba(255,255,255,.12);top:-90px;left:-70px;}
.blob-4{width:300px;height:300px;background:rgba(255,255,255,.12);bottom:-120px;right:-60px;}

/* ===== ヘッダー ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);}
.header-inner{display:flex;align-items:center;gap:18px;height:72px;}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;}
.logo-drop{color:var(--aqua);display:flex;}
.logo-text b{display:block;font-size:20px;font-weight:900;color:var(--aqua-deep);letter-spacing:.04em;line-height:1.2;}
.logo-text small{display:block;font-size:10.5px;color:var(--ink-mut);letter-spacing:.02em;}
.nav{display:flex;gap:26px;}
.nav a{font-size:15px;font-weight:500;color:var(--ink);position:relative;padding:6px 0;transition:color .2s;}
.nav a:hover{color:var(--aqua-deep);}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--aqua);transition:width .2s;border-radius:2px;}
.nav a:hover::after{width:100%;}
.header-tel{font-size:15px;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;background:none;border:0;cursor:pointer;}
.nav-toggle span{display:block;height:2px;width:25px;background:var(--aqua-deep);margin:0 auto;transition:.3s;border-radius:2px;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== 見出し共通 ===== */
.eyebrow,.sec-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-deep);font-size:13px;font-weight:700;letter-spacing:.14em;margin-bottom:14px;}
.sec-eyebrow{justify-content:center;width:100%;}
.sec-eyebrow.left{justify-content:flex-start;}
.sec-eyebrow.light{color:#fff;}
.eb-drop{width:9px;height:11px;background:var(--accent);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;display:inline-block;clip-path:path('M4.5 0C4.5 0 0 5 0 7.5A4.5 4.5 0 009 7.5C9 5 4.5 0 4.5 0z');}
.sec-eyebrow.light .eb-drop{background:#fff;}
.sec-title{font-size:clamp(24px,4.4vw,34px);font-weight:900;text-align:center;color:var(--ink);letter-spacing:.02em;margin-bottom:44px;line-height:1.4;}
.sec-title.left{text-align:left;margin-bottom:20px;}

/* ===== ヒーロー ===== */
.hero{position:relative;background:linear-gradient(165deg,var(--tint) 0%,#fff 70%);padding:70px 0 84px;overflow:hidden;}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;}
.hero-title{font-size:clamp(34px,6.4vw,56px);font-weight:900;line-height:1.32;letter-spacing:.01em;color:var(--ink);}
.hero-lead{margin:24px 0 34px;color:var(--ink-mut);font-size:17px;}
.hero-note{display:block;margin-top:14px;font-size:13px;color:var(--ink-mut);letter-spacing:.02em;}
.hero-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);border:6px solid #fff;aspect-ratio:16/11;}
.hero-frame img{width:100%;height:100%;object-fit:cover;}
.hero-frame-ph{display:none;}
.hero-frame.noimg{background:var(--tint);display:flex;align-items:center;justify-content:center;}
.hero-frame.noimg .hero-frame-ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--aqua-deep);font-weight:700;font-size:17px;}
.hero-frame.noimg .hero-frame-ph small{font-size:12px;font-weight:500;color:var(--aqua);}

/* ===== 症状クイック ===== */
.quick{margin-top:-40px;position:relative;z-index:5;}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.quick-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 12px;font-size:15px;font-weight:700;color:var(--aqua-deep);box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s;}
.quick-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--aqua);}
.qc-ico{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,var(--aqua) 0%,var(--aqua-deep) 100%);color:#fff;box-shadow:0 8px 18px rgba(11,111,160,.25);}
.qc-ico svg{width:28px;height:28px;}

/* ===== セクション ===== */
.section{padding:90px 0;}
.section-tint{background:var(--tint);}

/* 特徴 */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.feat{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:46px 30px 38px;text-align:center;box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden;}
.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));opacity:0;transition:opacity .2s;}
.feat:hover{transform:translateY(-8px);box-shadow:var(--sh-2);border-color:var(--accent);}
.feat:hover::before{opacity:1;}
.feat-num{position:absolute;top:16px;right:26px;font-size:34px;font-weight:700;color:var(--accent);opacity:.9;letter-spacing:.02em;font-style:italic;}
.feat-ico{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:linear-gradient(145deg,var(--aqua) 0%,var(--aqua-deep) 100%);color:#fff;box-shadow:0 12px 26px rgba(11,111,160,.3);margin-bottom:22px;}
.feat-ico svg{width:42px;height:42px;}
.feat h3{font-size:22px;font-weight:900;margin-bottom:12px;color:var(--ink);letter-spacing:.01em;}
.feat p{font-size:15.5px;color:var(--ink);font-weight:500;}

/* 診療案内 */
.services .service{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;box-shadow:var(--sh-1);}
.service-ico{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:var(--aqua-deep);color:#fff;font-size:22px;font-weight:900;margin-bottom:16px;}
.service h3{font-size:19px;font-weight:900;margin-bottom:10px;}
.service p{font-size:15px;color:var(--ink-mut);}
.services-note{text-align:center;margin-top:34px;color:var(--ink-mut);font-size:14px;}
.symptom-block{margin-top:54px;padding-top:46px;border-top:1px dashed var(--tint2);}
.symptom-h{text-align:center;font-size:18px;font-weight:900;color:var(--ink);margin-bottom:26px;}

/* 内視鏡バナー */
.endo{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--aqua) 0%,var(--aqua-deep) 100%);color:#fff;padding:80px 0;}
.endo-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:46px;align-items:center;}
.endo-text h2{font-size:clamp(24px,4vw,32px);font-weight:900;margin:6px 0 16px;}
.endo-text p{opacity:.96;margin-bottom:26px;}
.endo-points{list-style:none;display:flex;flex-direction:column;gap:14px;}
.endo-points li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.16);border-radius:14px;padding:16px 20px;font-weight:700;font-size:16px;}
.endo-points li span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--aqua-deep);font-size:14px;flex:0 0 auto;}

/* 院長 */
.doctor-inner{display:grid;grid-template-columns:330px 1fr;gap:54px;align-items:center;}
.doctor-photo{border-radius:var(--r-lg);aspect-ratio:4/5;overflow:hidden;}
.placeholder{background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--aqua);}
.placeholder small{font-size:12px;color:var(--aqua-deep);font-weight:700;}
.doctor-name{font-size:20px;font-weight:900;color:var(--aqua-deep);margin:6px 0 16px;}
.doctor-text>p:last-child{color:var(--ink-mut);}

/* 診療時間 */
.table-wrap{overflow-x:auto;}
.hours-table{width:100%;border-collapse:separate;border-spacing:0;min-width:580px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);}
.hours-table th,.hours-table td{padding:16px 10px;text-align:center;font-size:15px;border-bottom:1px solid var(--line);}
.hours-table thead th{background:var(--aqua-deep);color:#fff;font-weight:700;border-bottom:0;}
.hours-table tbody th{background:var(--tint);color:var(--aqua-deep);font-weight:700;text-align:left;white-space:nowrap;}
.hours-table td{color:var(--aqua-deep);font-weight:700;font-size:17px;}
.hours-table td.off{color:#b9c7ce;font-weight:500;}
.hours-table tbody tr:last-child th,.hours-table tbody tr:last-child td{border-bottom:0;}
.hours-note{list-style:none;margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;}
.hours-note li{font-size:14px;color:var(--ink-mut);padding-left:20px;position:relative;}
.hours-note li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:10px;background:var(--aqua);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;}

/* アクセス */
.access-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center;}
.access-dl{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;}
.access-dl dt{color:#fff;background:var(--aqua-deep);font-size:13px;font-weight:700;padding:5px 12px;border-radius:50px;align-self:start;text-align:center;}
.access-dl dd{color:var(--ink);font-size:16px;}
.text-link{color:var(--aqua-deep);font-weight:700;}
.text-link:hover{text-decoration:underline;}
.access-map{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);}
.access-map iframe{width:100%;height:360px;border:0;display:block;}

/* CTA帯 */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--aqua-deep) 0%,var(--aqua-deeper) 100%);color:#fff;text-align:center;padding:80px 0;}
.cta-inner{position:relative;z-index:1;}
.cta-inner h2{font-size:clamp(24px,4vw,32px);font-weight:900;margin-bottom:14px;}
.cta-inner p{opacity:.95;margin-bottom:30px;}

/* フッター */
.site-footer{background:#0E3346;color:#bcd6e2;padding:42px 0;text-align:center;}
.footer-name{font-size:20px;font-weight:900;color:#fff;margin-bottom:8px;}
.footer-info{font-size:13px;margin-bottom:14px;}
.footer-copy{font-size:12px;color:#7fa0b1;}

/* 追従電話（モバイル） */
.floating-tel{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--aqua-deep);color:#fff;text-align:center;padding:16px;border-radius:50px;font-weight:700;font-size:16px;box-shadow:0 10px 26px rgba(7,90,130,.4);}

/* ===== レスポンシブ ===== */
@media(max-width:900px){
  .endo-inner{grid-template-columns:1fr;gap:30px;}
  .doctor-inner{grid-template-columns:1fr;gap:28px;}
  .doctor-photo{max-width:300px;}
  .access-inner{grid-template-columns:1fr;gap:26px;}
}
@media(max-width:768px){
  .nav,.header-tel{display:none;}
  .nav-toggle{display:flex;}
  .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:6px 0;box-shadow:var(--sh-2);}
  .nav.open a{padding:15px 24px;border-bottom:1px solid var(--tint);}
  .nav.open a::after{display:none;}
  .hero{padding:42px 0 60px;}
  .hero-inner{grid-template-columns:1fr;gap:30px;}
  .hero-visual{order:-1;}
  .hero-frame{max-width:340px;margin:0 auto;}
  .quick{margin-top:-30px;}
  .quick-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .section{padding:62px 0;}
  .cards-3{grid-template-columns:1fr;gap:18px;}
  .endo{padding:60px 0;}
  .cta-band{padding:62px 0;}
  .floating-tel{display:block;}
  body{padding-bottom:80px;}
}
@media(max-width:400px){
  .container{padding:0 16px;}
}