/* ============================================================
   ばんの小児科  ポップ案（デザイン検討用サンプル）
   ============================================================ */
:root{
  --ink:#3a4744;
  --ink-soft:#6d7d79;
  --teal:#63b9b1;          /* 面や線に使うやわらかい緑 */
  --teal-mid:#3ea49c;
  --teal-deep:#0f6f6a;     /* 文字・ボタンに使う濃いめの緑（白文字6.0:1）*/
  --teal-pale:#e9f6f4;
  --teal-wash:#f5fbfa;
  --pink:#c94a7a;          /* 予約ボタン（白文字4.4:1・大きめ太字で使用）*/
  --pink-deep:#ad3866;
  --pink-soft:#f3c4d6;
  --pink-pale:#fdeef3;
  --yellow:#ffe3a3;        /* 見出しのマーカー */
  --yellow-pale:#fdf6e7;
  --sky:#a3d5ea;
  --sky-pale:#eef7fc;
  --cream:#fffdf9;
  --r:26px;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium",YuGothic,Meiryo,sans-serif;
  font-size:17px; line-height:1.9; letter-spacing:.02em; -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-deep)}
.wrap{width:min(var(--wrap),92%); margin-inline:auto; position:relative; z-index:1}
section{padding:70px 0; position:relative}
h2{font-size:1.7rem; margin:0 0 8px; letter-spacing:.04em; line-height:1.5}
h2 .en{display:block; font-size:.72rem; color:var(--pink); letter-spacing:.22em; font-weight:800; margin-bottom:2px}
.lead{color:var(--ink-soft); margin:0 0 30px; font-size:.95rem}
.center{text-align:center}

/* ---- ゆらゆら動く丸 ---- */
.blob{position:absolute; border-radius:50%; filter:blur(6px); opacity:.32; z-index:0; pointer-events:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---- ヘッダー ---- */
header{position:sticky; top:0; z-index:60; background:rgba(255,250,242,.92); backdrop-filter:blur(10px)}
.hd{display:flex; align-items:center; gap:14px; height:76px}
.logo{display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none}
.logo .mark{width:40px; height:40px; animation:pop 4s ease-in-out infinite}
.logo .word{width:210px}
nav.pc{display:flex; gap:6px}
nav.pc a{
  text-decoration:none; color:var(--ink); font-size:.9rem; font-weight:700;
  padding:9px 15px; border-radius:999px; white-space:nowrap; transition:.2s;
}
nav.pc a:hover{background:var(--teal-pale); color:var(--teal-deep)}
.burger{display:none; width:48px;height:48px;border:0;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(60,70,66,.1);cursor:pointer}
.burger span{display:block;height:3px;width:22px;background:var(--teal-deep);margin:5px auto;border-radius:9px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#drawer{display:none}

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; border-radius:999px; text-decoration:none; font-weight:800;
  font-size:1.1rem; line-height:1.25; transition:.15s; text-align:center; border:0;
}
.btn-pink{background:var(--pink); color:#fff; box-shadow:0 4px 0 rgba(122,40,74,.22)}
.btn-teal{background:var(--teal-mid); color:#fff; box-shadow:0 4px 0 rgba(15,111,106,.22)}
.btn-white{background:#fff; color:var(--teal-deep); box-shadow:0 4px 0 rgba(120,110,95,.16)}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.15)}
.btn small{display:block; font-weight:500; font-size:.7rem; opacity:.9; margin-top:2px}

/* ---- ヒーロー ---- */
.hero{padding:40px 0 10px; background:linear-gradient(180deg,var(--teal-wash),var(--cream)); position:relative; overflow:hidden}
.hero .inner{display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center}
.hero h1{font-size:2.3rem; line-height:1.55; margin:0 0 18px; letter-spacing:.03em}
.hero h1 .hl{
  background:linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
  padding:0 .1em;
}
.hero p{margin:0 0 26px; color:var(--ink-soft); font-size:1rem}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap}
.photo-frame{position:relative; animation:float 6s ease-in-out infinite}
.photo-frame img{border-radius:40px; box-shadow:0 12px 0 rgba(99,185,177,.18)}
.sticker{
  position:absolute; background:#fff; border-radius:999px; padding:10px 20px;
  font-weight:800; font-size:.86rem; box-shadow:0 3px 10px rgba(60,70,66,.12); white-space:nowrap;
}
.sticker.s1{top:-16px; left:-14px; color:var(--pink-deep); transform:rotate(-7deg)}
.sticker.s2{bottom:-16px; right:-10px; color:var(--teal-deep); transform:rotate(5deg)}

/* ---- クイックタイル ---- */
.quick{padding:34px 0 60px}
.quick .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tile{
  border-radius:var(--r); padding:26px 22px; text-decoration:none; color:var(--ink);
  display:block; transition:.18s; text-align:center;
}
.tile:hover{transform:translateY(-4px)}
.tile .ic{font-size:2rem; line-height:1; margin-bottom:8px}
.tile b{display:block; font-size:1.12rem; margin-bottom:2px}
.tile span{font-size:.82rem; color:var(--ink-soft)}
.t1{background:var(--pink-pale); box-shadow:0 4px 0 rgba(200,150,170,.22)}
.t2{background:var(--teal-pale); box-shadow:0 4px 0 rgba(130,180,175,.22)}
.t3{background:var(--yellow-pale); box-shadow:0 4px 0 rgba(200,180,140,.22)}

/* ---- 波の区切り ---- */
.wave{display:block; width:100%; height:60px}

/* ---- お知らせ ---- */
.news{background:#fff}
.news .item{
  border-radius:var(--r); padding:26px 28px; margin-bottom:16px;
  border:2px solid var(--teal-pale); background:#fff;
}
.news .item.imp{border-color:var(--pink-pale); background:#fffafc}
.news .tag{
  display:inline-block; font-size:.76rem; font-weight:800; padding:5px 15px;
  border-radius:999px; background:var(--teal-pale); color:var(--teal-deep); margin-bottom:0;
}
.news .item.imp .tag{background:var(--pink-pale); color:var(--pink-deep)}
.news h3{margin:0 0 8px; font-size:1.14rem}
.news p{margin:0 0 8px; font-size:.93rem; color:var(--ink-soft)}
.news p:last-child{margin-bottom:0}

/* ---- 診療内容 ---- */
.svc{background:linear-gradient(180deg,var(--cream),#eafaf7)}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{
  background:#fff; border-radius:var(--r); padding:28px 20px; text-align:center;
  box-shadow:0 3px 12px rgba(60,70,66,.07); transition:.18s;
}
.card:hover{transform:translateY(-5px) rotate(-1deg)}
.card .circle{
  width:76px;height:76px;border-radius:50%; margin:0 auto 14px;
  display:grid;place-items:center; font-size:2.1rem;
}
.c1{background:var(--pink-pale)} .c2{background:var(--sky-pale)}
.c3{background:var(--teal-pale)} .c4{background:var(--yellow-pale)}
.card h3{margin:0 0 6px; font-size:1.05rem}
.card p{margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.75}

/* ---- 診療時間 ---- */
.hours{background:var(--teal-wash)}
.hours .box{background:#fff; border-radius:32px; padding:14px; box-shadow:0 4px 16px rgba(60,90,86,.08)}
table{width:100%; border-collapse:separate; border-spacing:6px; font-size:.95rem}
th,td{padding:14px 4px; text-align:center; border-radius:14px}
thead th{background:var(--teal-pale); color:var(--teal-deep); font-size:.9rem}
thead th:first-child{background:#fff; color:var(--ink)}
thead th.sat{background:var(--sky-pale); color:#2c6f8c} thead th.sun{background:var(--pink-pale); color:var(--pink-deep)}
tbody th{background:var(--cream); font-size:.88rem; white-space:nowrap}
tbody td{background:#fbfdfc; font-size:1.15rem}
.o{color:var(--teal-deep); font-weight:800}
.s{color:var(--pink-deep); font-weight:800}
.x{color:#b9c4c1; font-size:.9rem}
.note{font-size:.87rem; color:var(--ink-soft); margin:16px 4px 0}

/* ---- 院長 ---- */
.doctor{background:var(--cream)}
.doctor .inner{display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:center}
.doctor img{border-radius:50%; aspect-ratio:1/1; object-fit:cover; object-position:50% 22%; box-shadow:0 8px 0 rgba(243,196,214,.55)}
.balloon{
  position:relative; background:#fff; border-radius:28px; padding:28px 32px;
  box-shadow:0 3px 12px rgba(60,70,66,.07); font-size:1.14rem; font-weight:700; color:var(--teal-deep);
}
.balloon::after{
  content:""; position:absolute; left:-16px; top:44px; border:12px solid transparent;
  border-right-color:#fff; border-left:0;
}
.doctor .who{margin:18px 4px 12px; font-weight:800}
.doctor .who small{display:block; font-weight:500; font-size:.78rem; color:var(--ink-soft)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px}
.chip{font-size:.8rem; background:#fff; border-radius:999px; padding:7px 16px; box-shadow:0 2px 6px rgba(60,70,66,.07)}

/* ---- ユーカリ ---- */
.yukari{background:var(--sky-pale)}
.yukari .box{background:#fff; border-radius:32px; padding:36px; box-shadow:0 4px 16px rgba(80,130,155,.1)}
.yukari ul{display:flex; gap:10px; flex-wrap:wrap; list-style:none; padding:0; margin:18px 0 0}
.yukari li{background:var(--sky-pale); border-radius:999px; padding:8px 18px; font-size:.88rem; font-weight:700; color:#2c6f8c}

/* ---- スタッフ ---- */
.staff{background:#fff}
.staff img{border-radius:32px; box-shadow:0 4px 16px rgba(60,70,66,.1)}

/* ---- アクセス ---- */
.access{background:var(--cream)}
.access .inner{display:grid; grid-template-columns:1fr 1.1fr; gap:34px; align-items:start}
dl.meta{margin:0; background:#fff; border-radius:var(--r); padding:8px 22px; box-shadow:0 3px 12px rgba(60,70,66,.07)}
dl.meta div{display:grid; grid-template-columns:92px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid #eef2f0}
dl.meta div:last-child{border-bottom:0}
dl.meta dt{color:var(--ink-soft); font-size:.85rem}
dl.meta dd{margin:0; font-size:.95rem; font-weight:700}
.map{border-radius:var(--r); overflow:hidden; box-shadow:0 4px 16px rgba(60,70,66,.1); aspect-ratio:4/3; border:0; width:100%; background:#eef2f1}

/* ---- フッター ---- */
footer{background:var(--teal-pale); color:var(--ink-soft); padding:50px 0 110px; font-size:.9rem; text-align:center}
footer img{width:220px; margin:0 auto 16px}
footer a{color:var(--teal-deep)}
footer nav{margin:20px 0 0}
footer nav a{display:inline-block; margin:0 12px 10px; color:var(--teal-deep); text-decoration:none; font-weight:700}
.copy{margin-top:22px; font-size:.75rem; color:#95a5a1}

/* ---- スマホ下部バー ---- */
.bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,253,249,.97); backdrop-filter:blur(8px); border-top:1px solid #eef2f0;
}
.bottombar .btn{flex:1; padding:14px 4px; font-size:.98rem}

/* ============ スマホ ============ */
@media (max-width:900px){
  body{font-size:16px}
  section{padding:46px 0}
  .hd{height:66px}
  .logo .mark{width:34px;height:34px} .logo .word{width:172px}
  nav.pc,.hd>.btn-pink{display:none}
  .burger{display:block}
  #drawer{
    display:block; position:fixed; inset:66px 0 auto 0; background:#fff;
    border-radius:0 0 30px 30px; box-shadow:0 10px 24px rgba(0,0,0,.12);
    transform:translateY(-130%); transition:transform .3s; z-index:50; padding:10px 0 20px;
  }
  #drawer.open{transform:translateY(0)}
  #drawer a{display:block; padding:15px 8%; text-decoration:none; color:var(--ink); font-weight:700}
  #drawer .btn{display:flex; margin:12px 8% 0}
  .hero{padding:24px 0 0}
  .hero .inner{grid-template-columns:1fr; gap:26px}
  .hero h1{font-size:1.6rem}
  .sticker{font-size:.78rem; padding:8px 15px}
  .sticker.s1{left:0; top:-12px}
  .sticker.s2{right:0; bottom:-12px}
  .quick{padding:26px 0 44px}
  .quick .grid{grid-template-columns:1fr; gap:12px}
  .tile{display:flex; align-items:center; gap:16px; text-align:left; padding:18px 22px}
  .tile .ic{margin:0; font-size:1.7rem}
  .cards{grid-template-columns:1fr 1fr; gap:12px}
  .card{padding:22px 14px}
  .card .circle{width:62px;height:62px;font-size:1.7rem}
  .doctor .inner,.access .inner{grid-template-columns:1fr; gap:24px}
  .doctor img{max-width:210px; margin-inline:auto}
  .balloon::after{left:50%; top:-16px; margin-left:-12px; border:12px solid transparent; border-bottom-color:#fff; border-top:0}
  .yukari .box{padding:24px 20px}
  th,td{padding:12px 2px; font-size:.9rem}
  tbody td{font-size:1rem}
  table{border-spacing:4px}
  h2{font-size:1.35rem}
  .bottombar{display:flex}
  footer{padding-bottom:104px}
}
@media (max-width:420px){ .cards{grid-template-columns:1fr} .hero .cta .btn{width:100%} }

/* ============================================================
   ここから下は本番用の追加ぶん
   ============================================================ */

/* お知らせの日付 */
.news .head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.news .head time{font-size:.82rem; font-weight:800; color:var(--ink-soft); letter-spacing:.05em}
.news .empty{
  text-align:center; color:var(--ink-soft); font-size:.95rem;
  border:2px dashed #dfeeeb; border-radius:var(--r); padding:40px 20px;
}

/* 下層ページの見出し */
.pagehead{background:linear-gradient(180deg,var(--teal-wash),var(--cream)); padding:36px 0 44px; position:relative; overflow:hidden}
.pagehead h1{margin:0; font-size:1.8rem; letter-spacing:.04em}
.pagehead .en{display:block; font-size:.72rem; color:var(--pink); letter-spacing:.22em; font-weight:800; margin-bottom:4px}
.crumb{font-size:.82rem; color:var(--ink-soft); margin:0 0 12px}
.crumb a{text-decoration:none; font-weight:700}

/* 読みもの用 */
.prose{max-width:760px}
.prose p{margin:0 0 18px}
.panel{background:#fff; border-radius:var(--r); padding:34px; box-shadow:0 3px 12px rgba(60,70,66,.07)}
.backlink{display:block; width:fit-content; margin:44px auto 0}

/* 院長ページ */
.dr-cols{display:grid; grid-template-columns:250px 1fr; gap:44px; align-items:start}
.dr-cols img{border-radius:50%; aspect-ratio:1/1; object-fit:cover; object-position:50% 22%; box-shadow:0 8px 0 rgba(243,196,214,.55)}
.dr-name{margin:16px 0 0; text-align:center; font-weight:800}
.dr-name small{display:block; font-weight:500; font-size:.78rem; color:var(--ink-soft)}

/* 情報テーブル */
.info-list{margin:0; background:#fff; border-radius:var(--r); padding:6px 26px; box-shadow:0 3px 12px rgba(60,70,66,.07)}
.info-list div{display:grid; grid-template-columns:104px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid #eef2f0}
.info-list div:last-child{border-bottom:0}
.info-list dt{color:var(--ink-soft); font-size:.85rem}
.info-list dd{margin:0; font-weight:700}

@media (max-width:900px){
  .pagehead{padding:26px 0 32px}
  .pagehead h1{font-size:1.35rem}
  .panel{padding:24px 20px}
  .dr-cols{grid-template-columns:1fr; gap:24px}
  .dr-cols>div:first-child{max-width:210px; margin-inline:auto}
  .info-list{padding:4px 18px}
  .info-list div{grid-template-columns:88px 1fr; gap:10px}
}