/* 院内掲示「空いている予約」: 縦置きタブレット1画面に全行を収める。ご高齢の方向けに文字は大きく・太く・濃く。 */
:root {
  --vh: 1vh;
  /* 色は受付管理画面の週間表（style.css の simple-week-calendar）と受付画面にそろえる。 */
  --ink: #1d1d1f;
  --action-blue: #0066cc;
  --danger: #a34545;
  --parchment: #f5f5f7;
  --today-soft: #edf5ff;
  --today-border: #73abe3;
  --line: #e0e0e0;
  --line-strong: #7a7a7a;
  --morning-time: #e1eff5;
  --morning-open: #f3f9fc;
  --morning-none: #e8f0f3;
  --afternoon-time: #f9e7d3;
  --afternoon-open: #fff8ef;
  --afternoon-none: #f5eee6;
  --back-h: 0px;
  --top-h: min(calc(9.5 * var(--vh)), 14vw);
  --head-h: min(calc(13 * var(--vh)), 19vw);
  --period-gap: max(8px, calc(.8 * var(--vh)));
  --time-w: 19vw;
  --day-w: 22vw;
  --closed-w: 14vw;
  --rows: 12;
  --safe-y: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  --row-h: calc((100 * var(--vh) - var(--safe-y) - var(--back-h) - var(--top-h) - var(--head-h) - var(--period-gap)) / var(--rows));
}
@supports (height: 1dvh) {
  :root { --vh: 1dvh; }
}
/* ホームページから開いたときだけ、最上段に戻るボタンの分の高さを取る。 */
:root.is-from-home { --back-h: max(48px, min(calc(6 * var(--vh)), 9vw)); }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif; }

.availability-board-page { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: pan-x; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; font-weight: 900; }
html:has(.availability-board-page) { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: pan-x; }

.board { display: flex; flex-direction: column; height: calc(100 * var(--vh)); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.board__nav { flex: none; display: flex; align-items: center; height: var(--back-h); padding: 3px 2vw; background: var(--parchment); }
.board__back { display: flex; align-items: center; height: 100%; min-width: 44px; padding: 0 1em; border-radius: 10px; background: var(--action-blue); color: #fff; font-size: max(22px, min(calc(var(--back-h) * .52), 5.4vw)); font-weight: 900; line-height: 1; text-decoration: none; white-space: nowrap; }
.board__back:active { background: var(--ink); }
.board__back:focus-visible { outline: 4px solid var(--ink); outline-offset: 1px; }
.board__top { flex: none; display: flex; flex-direction: column; justify-content: center; height: var(--top-h); padding: 0 2vw; background: var(--parchment); border-bottom: 3px solid var(--line-strong); overflow: hidden; }
.board__line { display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
.board__title { margin: 0; font-size: min(calc(var(--top-h) * .46), 6.6vw); font-weight: 900; line-height: 1.1; white-space: nowrap; }
.board__legend { display: flex; align-items: center; gap: .3em; margin: 0; font-size: min(calc(var(--top-h) * .36), 4.8vw); line-height: 1.1; white-space: nowrap; }
.board__hint, .board__status { margin: 0; font-size: min(calc(var(--top-h) * .3), 3.9vw); line-height: 1.3; white-space: nowrap; }
.board.is-offline .board__hint { display: none; }
.board.is-offline .board__status { flex: 1; padding: 0 .4em; background: var(--danger); color: #fff; text-align: center; }
.board__ring { display: inline-block; width: 1.05em; height: 1.05em; border: .19em solid var(--action-blue); border-radius: 50%; }

.board__scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: none; touch-action: pan-x; scroll-snap-type: x proximity; scroll-padding-left: var(--time-w); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.board__scroll::-webkit-scrollbar { display: none; }
.board__scroll.is-wheeling { scroll-snap-type: none; }
.board__columns { display: flex; width: max-content; height: 100%; }

.board__times { position: sticky; left: 0; z-index: 2; flex: none; width: var(--time-w); background: #fff; border-right: 3px solid var(--line-strong); }
.board__corner { display: flex; align-items: center; justify-content: center; height: var(--head-h); background: var(--parchment); border-bottom: 3px solid var(--line-strong); font-size: min(calc(var(--head-h) * .26), 5vw); }
.board__time { display: flex; align-items: center; justify-content: center; height: var(--row-h); font-size: min(calc(var(--row-h) * .62), 6.1vw); line-height: 1; font-variant-numeric: tabular-nums; }
.board__time.is-morning { background: var(--morning-time); }
.board__time.is-afternoon { background: var(--afternoon-time); }

.board__day { position: relative; flex: none; width: var(--day-w); border-right: 2px solid var(--line-strong); scroll-snap-align: start; }
.board__day.is-month-start { border-left: 7px solid var(--line-strong); }
.board__day.is-closed { width: var(--closed-w); }
.board__head { display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--head-h); background: var(--parchment); border-bottom: 3px solid var(--line-strong); line-height: 1; white-space: nowrap; overflow: hidden; }
.board__month { font-size: min(calc(var(--head-h) * .24), 4.4vw); }
.board__date { font-size: min(calc(var(--head-h) * .4), 8vw); }
.board__date-unit { display: inline; font-size: .55em; }
.board__weekday { font-size: min(calc(var(--head-h) * .26), 4.6vw); }
.board__day.is-saturday .board__weekday { color: var(--action-blue); }
.board__day.is-sunday .board__weekday { color: var(--danger); }
.board__day.is-today .board__head { background: var(--today-soft); box-shadow: inset 0 6px var(--action-blue); }
.board__day.is-today .board__month { color: var(--action-blue); }
.board__day.is-today::after { content: ""; position: absolute; inset: 0; z-index: 1; border-inline: 4px solid var(--today-border); pointer-events: none; }

.board__cell { position: relative; height: var(--row-h); }
.board__cell.is-morning { background: var(--morning-none); }
.board__cell.is-afternoon { background: var(--afternoon-none); }
.board__cell.is-morning.is-open { background: var(--morning-open); }
.board__cell.is-afternoon.is-open { background: var(--afternoon-open); }
.board__cell.is-open::before { content: ""; position: absolute; top: 50%; left: 50%; width: min(calc(var(--row-h) * .8), 16vw); height: min(calc(var(--row-h) * .8), 16vw); border: min(calc(var(--row-h) * .15), 3vw) solid var(--action-blue); border-radius: 50%; transform: translate(-50%, -50%); }
.board__time, .board__cell { border-bottom: 2px solid var(--line); }
.board__time.is-hour-end, .board__cell.is-hour-end { border-bottom: 2px solid var(--line-strong); }
.board__time.is-period-start, .board__cell.is-period-start, .board__rest.is-period-start { margin-top: var(--period-gap); }
.board__rest { display: flex; align-items: center; justify-content: center; width: 100%; border-bottom: 2px solid var(--line-strong); color: var(--danger); font-size: min(calc(var(--row-h) * .8), 7.4vw); line-height: 1.2; writing-mode: vertical-rl; letter-spacing: .1em; }
.board__rest.is-morning { background: var(--morning-none); }
.board__rest.is-afternoon { background: var(--afternoon-none); }