/* 01. 全体。font-familyはテーマのデフォルトを継承します。 */
.foc {--foc-red:#D8281C;--foc-ink:#2A2A2A;box-sizing:border-box;width:100%;max-width:640px;margin:0 auto 48px;padding:26.4px;color:var(--foc-ink);background:#fffefa;border:1px solid #e9e5de;border-radius:0;box-shadow:0 8px 28px rgba(42,42,42,.045);font-family:inherit;line-height:1.6;}
.foc *, .foc *::before, .foc *::after {box-sizing:border-box;}
.foc button,.foc input,.foc h3,.foc table,.foc th,.foc td {font-family:inherit;}
.foc-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;}
.foc .foc-title {margin:0;padding:0;border:0;background:none;font-size:20px;font-weight:700;line-height:1.5;color:#2A2A2A;}
.foc .foc-title::before,.foc .foc-title::after {display:none;}
.foc-legend {display:flex;flex-wrap:wrap;gap:16px;margin:18px 0;font-size:12px;color:#6B6B6B;}
.foc-legend span {display:flex;align-items:center;gap:5px;}
.foc-mark {width:10px;height:10px;border-radius:50%;display:inline-block;}
.foc-mark--open {background:#335E6D;}
.foc-mark--closed {background:#f9e2de;border:1px solid #D8281C;}
.foc-mark--special {background:#fff0d2;border:1px solid #bd7624;}
/* 02. 月切り替え */
.foc-nav {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;}
.foc-nav p {margin:0;font-size:22px;font-weight:700;}
.foc-nav button {appearance:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #e9e5de;border-radius:50%;background:#fff;color:#D8281C;font-size:28px;line-height:1;cursor:pointer;box-shadow:none;}
.foc-nav button:disabled {opacity:.3;cursor:default;}
.foc > .foc-nav button:disabled {visibility:hidden;pointer-events:none;}
.foc button:focus-visible,.foc-track:focus-visible {outline:2px solid #D8281C;outline-offset:2px;}
.foc-track {display:flex;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;}
.foc-track::-webkit-scrollbar {display:none;}
.foc-month {flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;}
/* 03. 日付。色と文字の両方で区別 */
.foc .foc-table {width:100%;margin:0;border:0;border-collapse:separate;border-spacing:3px;table-layout:fixed;background:transparent;}
.foc .foc-table th {padding:0 0 8px;text-align:center;border:0;background:transparent;color:#6B6B6B;font-size:12px;font-weight:600;}
.foc .foc-table td {height:58px;padding:0;text-align:center;vertical-align:middle;border:0;border-radius:0;background:#f0f5f5;color:#335E6D;}
.foc .foc-table td:empty {background:transparent;}
.foc .foc-table td[data-state="closed"] {background:#fff0ed;color:#ac251c;}
.foc .foc-table td[data-state="special"] {background:#fff0d2;color:#86511b;}
.foc .foc-table td[data-state="unknown"] {background:#efeeeb;color:#6B6B6B;}
/* 過去の日付は開所・閉所の区別を文字で残し、色をグレーに統一。 */
.foc .foc-table td.foc-past {background:#ededed;color:#767676;}
/* 閉所日のみ、右上から左下へ細い斜線を1本。過去日はグレーを継承。 */
.foc .foc-table td[data-state="closed"] {position:relative;}
.foc .foc-table td[data-state="closed"]::before {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - .65px),currentColor calc(50% - .65px),currentColor calc(50% + .65px),transparent calc(50% + .65px));opacity:.28;}
.foc .foc-table td[data-state="closed"] > .foc-date-content,
.foc .foc-table td[data-state="closed"] > .foc-date-button {position:relative;z-index:1;}
.foc .foc-table td[aria-current="date"] {box-shadow:inset 0 0 0 2px #D8281C;}
.foc .foc-date-content,.foc .foc-date-button {display:block;width:100%;margin:0;padding:7px 0;background:transparent;border:0;border-radius:0;color:inherit;text-align:center;line-height:1.3;box-shadow:none;}
.foc .foc-date-button {cursor:pointer;}
.foc .foc-date-button:hover {background:rgba(0,0,0,.06);}
.foc-day {display:block;font-size:17px;font-weight:600;}
.foc-label {display:block;margin-top:4px;font-size:10px;white-space:nowrap;}
.foc .foc-notes {min-height:24px;margin:12px 3px 0;padding:0;list-style:none;color:#6B6B6B;font-size:12px;line-height:1.8;text-align:left;}
.foc .foc-notes li {margin:0;padding:0;list-style:none;overflow-wrap:anywhere;}
.foc-dots {display:flex;justify-content:center;margin-top:8px;}
.foc .foc-dots button {display:grid;place-items:center;width:40px;height:36px;padding:0;border:0;background:transparent;cursor:pointer;box-shadow:none;}
.foc-dots button::after {content:'';width:7px;height:7px;border-radius:50%;background:#d7d2cc;}
.foc-dots button[aria-pressed="true"]::after {width:20px;border-radius:99px;background:#D8281C;}
.foc .foc-footnote {margin:0;padding-top:16px;border-top:2px dotted #ded9d1;color:#6B6B6B;font-size:12px;line-height:1.8;text-align:left;}
.foc .foc-notice {margin:8px 0 0;font-size:12px;color:#9a3b26;}
.foc-notice:empty {display:none;}
/* 04. 管理画面 */
.foc-admin {max-width:1200px;}
.foc-admin-grid {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start;}
.foc-admin-card {background:#fff;padding:22px;margin:20px 0;border:1px solid #dcdcde;border-radius:12px;}
.foc-admin-card h2 {margin-top:0;}
.foc-admin-card details {margin-top:18px;padding-top:12px;border-top:1px solid #ddd;}
.foc-admin-card summary {cursor:pointer;font-weight:600;}
.foc-admin .foc {margin-bottom:0;padding:13.2px;box-shadow:none;}
.foc-admin .regular-text {max-width:100%;}
.foc-check {display:inline-block;margin:0 16px 8px 0;}
.foc-saved-list {max-height:340px;overflow:auto;}
/* 05. スマホ */
@media(max-width:767px){
 .foc {padding:19.8px 11px;border-radius:0;}
 .foc .foc-title {font-size:18px;}
 .foc .foc-table {border-spacing:2px;}
 .foc .foc-table td {height:52px;}
 .foc-day {font-size:16px;}.foc-label {font-size:9px;}
 .foc-admin-grid {grid-template-columns:minmax(0,1fr);gap:0;}
}