/* 診療案内ページ専用CSS（common.css・hours.cssと一緒に読み込む） */

.subject{display:flex;align-items:center;gap:14px;margin-bottom:15px;font-size:18px;font-weight:bold;color:var(--blue)}
.subject span{width:7.5em;padding:2px 0;font-size:12px;line-height:1.4;text-align:center;color:#fff;background:var(--main);border-radius:2px}
.text p.note{font-size:12px;text-align:right;color:var(--blue)}
.vpd{text-align:center}
.vpd img{margin:0 auto}

/* 写真＋文章（院内検査機器は写真が右、院長ご挨拶は写真が左） */
.media{display:flex;align-items:center;gap:30px;margin-bottom:1em}
.media img{flex:none;width:22%}
.media p:last-child{margin-bottom:0}
.doctor img{width:145px}

/* 院長略歴・所属学会の2列レイアウト */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}

/* 当院について：各項目の小見出し */
.sub{margin:28px 0 8px;padding-left:10px;font-size:16px;border-left:4px solid var(--main);border-bottom:1px solid var(--gray)}

/* 院内のご案内：写真が3列。最後に1枚余ったら横いっぱいに広げる */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery figure{position:relative;margin:0}
.gallery img{width:100%;aspect-ratio:6/5;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 6px 6px;font-size:12px;line-height:1.5;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.gallery figure:last-child:nth-child(3n+1){grid-column:1/-1}

/* スマホ */
@media(max-width:768px){
.subject{gap:10px;font-size:16px}
.subject span{width:6.5em}
.media{flex-direction:column-reverse;align-items:stretch;gap:15px}
.media img{width:100%}
.doctor{flex-direction:column}
.doctor img{width:145px}
.cols{grid-template-columns:1fr;gap:15px}
.gallery{grid-template-columns:repeat(2,1fr)}
}