/* トップページ専用CSS（common.cssと一緒に読み込む） */
main>section{margin-bottom:60px}
.hero{width:100%}
.center{margin-top:10px;text-align:center}

/* 休診日（画面幅に合わせて文字サイズが変わる） */
.rest{margin-block:20px;font-size:clamp(15px,4.8vw,28px);font-weight:bold;letter-spacing:.06em;line-height:1.4}
.rest b{display:inline-block;margin-right:.4em;padding:0 .7em;color:#fff;background:#333;border-radius:2em}

/* 小見出し（一般診療・3つの案内のh3）：h2（.ttl・common.css）より一回り小さい */
p.ttl,h3{font-size:18px;border-bottom:3px solid var(--gray)}
p.ttl span,h3 span{display:inline-block;margin-bottom:-3px;padding-bottom:10px;border-bottom:3px solid var(--main)}
p.ttl{margin-bottom:15px}

/* 新着情報 */
.news li{display:flex;align-items:baseline;gap:12px;padding:6px 5px;border-bottom:3px solid var(--gray)}
.news time{flex:none;width:8.5em;color:#777}
.news a{color:var(--blue)}
.news a:hover{text-decoration:underline}
.new{display:inline-block;margin-right:6px;padding:0 6px;font-size:11px;font-weight:bold;line-height:1.5;color:#fff;background:#ff4500;border-radius:3px}

/* 3つの案内 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.cards a:hover{opacity:.8}
.cards img{width:180px;height:180px;margin:0 auto 20px;border-radius:50%;object-fit:cover}
.cards p{margin-top:12px;color:var(--blue)}

/* ネット予約バナー */

.net{display:block;margin:20px 0}
.net img{width:100%}
.net:hover{opacity:.8}

/* 診療時間表（丸は背景で描き、文字は隠している。休・★は文字で表示） */
.hours{width:100%;border-spacing:0;border:1px solid var(--main);border-radius:3px;overflow:hidden;text-align:center}
.hours th,.hours td{height:64px}
.hours th+th,.hours th+td,.hours td+td{border-left:1px solid var(--main)}
.hours tbody th,.hours tbody td{border-top:1px solid var(--main)}
.hours thead th{background:var(--pale);font-size:22px}
.hours thead th:first-child{width:36%}
.hours .sat{color:#00f}
.hours tbody th{font-size:24px;font-weight:normal;letter-spacing:.05em}
.hours td{font-size:0;background:radial-gradient(circle,var(--pale) 20px,var(--main) 21px 23px,transparent 24px) no-repeat center}
.hours .x{font-size:22px;font-weight:bold;line-height:1.7;color:#fff;background:#ccc}
.hours .star{font-size:34px;line-height:1;color:var(--pale);background:none;-webkit-text-stroke:2px var(--main)}
.hours small{display:block;font-size:12px;font-weight:bold;letter-spacing:0;line-height:1.5;color:#00f;-webkit-text-stroke:0}

/* 注意事項 */
.note{margin:20px 0}
.note ul{padding-left:2em;list-style:circle}
.note li{border-bottom:1px dotted #ddd}
.note em{font-style:normal;color:red}
.note a{color:var(--blue)}

/* 予防接種：ネット予約NG（電話リンク）とOK（ネット予約リンク） */
.ng,.ok{display:block;max-width:770px;margin:30px auto}
.ng:hover,.ok:hover{opacity:.8}

/* 乳児健診のお知らせ帯 */
.bar{margin:20px 0;padding:10px 20px;font-size:20px;font-weight:bold;color:#fff;text-align:center;background:var(--accent);border-radius:16px}

/* MAP */
.map{display:block;width:100%;height:400px;border:0}

/* スマホ */
@media(max-width:768px){
main>section{margin-bottom:40px}
.news li{flex-direction:column;gap:0}
.news time{width:auto}
.cards{grid-template-columns:1fr;gap:20px}
.hours th,.hours td{height:48px}
.hours thead th{font-size:15px}
.hours thead th:first-child{width:30%}
.hours tbody th{font-size:15px;letter-spacing:0}
.hours td{background-image:radial-gradient(circle,var(--pale) 10px,var(--main) 11px 13px,transparent 14px)}
.hours .x{font-size:16px;background:#ccc}
.hours .star{font-size:24px;background:none}
.hours small{font-size:10px}
.bar{font-size:15px}
}