@charset "utf-8";
:root{
    --sun: #e63535;
    --sat: #19438f;
    --text: #333;
    --line: #e2e2e2;
 
    --closed-bg: #fddfdf;
    --closed-text: #ff0000;
 
    --amonly-bg: #fddfdf;
    --amonly-text: #0000ff;
 
    --clo18-bg: #dfdfff;
    --clo18-text: #0000ff;
 
    --novet-bg: #f0f0f0;
    --novet-text: #666;
}
.cal_title h2{
	border-bottom: var(--ac) 2px solid;
	padding-bottom: 0.25em;
	max-width: 90px;
	margin: auto;
}
/* ---- スクロールは cal_wrap（箱全体）が担当 ---- */
.cal_wrap{
    max-width: 640px;
    margin: 0 auto;
    font-family: "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
 
    display: flex;
    flex-direction: column;
    max-height: 420px;      /* この高さの中を1ヶ月分スクロールする */
    overflow-y: auto;
    overflow-x: hidden;     /* 角丸の見た目を保つため横方向だけ隠す */
}
 
/* ---- 1日＝1つのdl＝1行の横長リスト ---- */
.cal_wrap dl{
    margin: 0;
    display: grid;
    grid-template-columns: 72px 1fr;
    flex: 0 0 auto;         /* 各dlが縮まないようにする */
}
 
.cal_wrap dl dt,
.cal_wrap dl dd{
    margin: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
}
 
.cal_wrap dl dt{
    padding: 10px 8px 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    border-right: 1px solid var(--line);
    gap: 4px;
}
.cal_wrap dl dt .num{ font-size: 14px; }
.cal_wrap dl dt .wd{ font-size: 11px; color: #999; font-weight: 500; }
 
.cal_wrap dl dd{
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    min-height: 20px;
}
.cal_wrap dl dd span {
    line-height: 22px!important;
}
 .cal_wrap dl dd span.badge.amopen{ background: var(--amonly-bg); color: var(--amonly-text); }
/* 土曜・日曜（元カレンダーと同じ配色） */
.cal_wrap dl dt.is-sat{ color: var(--sat); }
.cal_wrap dl dt.is-sat .wd{ color: var(--sat); }
.cal_wrap dl dt.is-sun{ color: var(--sun); }
.cal_wrap dl dt.is-sun .wd{ color: var(--sun); }
 
/* 祝日 */
.cal_wrap dl dt.holiday,
.cal_wrap dl dt.holiday .wd{ color: var(--sun); }
 
/* ステータスバッジ */
.cal_wrap dl dd span.badge{
    display: inline-block;
    padding: 3px 10px;
    margin-right: 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.cal_wrap dl dd span.badge.closed{ background: var(--closed-bg); color: var(--closed-text); }
.cal_wrap dl dd span.badge.amonly{ background: var(--amonly-bg); color: var(--amonly-text); }
.cal_wrap dl dd span.badge.clo18{ background: var(--clo18-bg); color: var(--clo18-text); }
.cal_wrap dl dd span.badge.novet{ background: var(--novet-bg); color: var(--novet-text); }
.cal_wrap dl dd span.badge.novet-person{ background: #f5e9d7; color: #8a5a00; }
 .cal_wrap dl dd span.badge.amopen{ background: var(--amonly-bg); color: var(--amonly-text); }
.cal_wrap dl dd .rest-text{
    color: #888;
    font-size: 12px;
}
 
/* 休診の日は元CSSと同じく行全体を背景色でも強調 */
.cal_wrap dl dt.closed-row, .cal_wrap dl dd.closed-row{
    background: var(--closed-bg);
}
 
.cal_wrap::-webkit-scrollbar{ width: 6px; }
.cal_wrap::-webkit-scrollbar-thumb{ background: #ddd; border-radius: 3px; }
 
@media (max-width: 480px){
    .cal_wrap dl{ grid-template-columns: 64px 1fr; }
    .cal_wrap dl dd{ font-size: 12px; padding: 8px 10px; }
}
#c863 {
	clear: both;
	display: none;
	margin:    ;
	padding:    ;
}
#c866 {
	clear: both;
	margin: 30px auto  ;
	padding:    ;
}
#c866 h2,
#c866 div {
	text-align: center;
}
#c862 {
	clear: both;
	background-color: var(--sc);
	margin: 30px auto 0 auto;
	padding:    ;
}
#c862 dl dt {
	width: 20%;
}
#c862 dl dd {
	width: 80%;
}
#c867 {
	clear: both;
	margin: 30px auto  ;
	padding:    ;
}
#c867 h2,
#c867 div {
	text-align: center;
}
#c864 {
	clear: both;
	background-color: var(--sc);
	margin: 30px auto 0 auto;
	padding:    ;
}
#c864 dl dt {
	width: 20%;
}
#c864 dl dd {
	width: 80%;
}
#c865 {
	clear: both;
	display: none;
	background-color: var(--sc);
	margin: 30px auto 0 auto;
	padding:    ;
}
#c865 dl dt {
	width: 20%;
}
#c865 dl dd {
	width: 80%;
}
@media screen and (min-width: 641px) and (max-width: 834px) {
#c863 {
	display: none;
}
#c866 {
}
#c862 {
}
#c867 {
}
#c864 {
}
#c865 {
	display: none;
}
}
@media screen and (max-width: 640px) {
#c863 {
	display: none;
}
#c866 {
}
#c862 {
}
#c867 {
}
#c864 {
}
#c865 {
	display: none;
}
}