<div class="dh-wrap">
<div class="dh-tablist" role="tablist" aria-label="診療科ごとの診療時間">
<button class="dh-tab" type="button" role="tab" aria-selected="true">内科</button>
<button class="dh-tab" type="button" role="tab" aria-selected="false" tabindex="-1">小児科</button>
<button class="dh-tab" type="button" role="tab" aria-selected="false" tabindex="-1">皮膚科</button>
</div>
<div class="dh-panel" role="tabpanel">
<table class="dh-table">
<thead>
<tr><th>時間帯</th><th>月〜金</th><th>土</th><th>日祝</th></tr>
</thead>
<tbody>
<tr><th>9:00〜12:30</th><td>●</td><td>●</td><td class="dh-off">－</td></tr>
<tr><th>14:30〜18:00</th><td>●</td><td class="dh-off">－</td><td class="dh-off">－</td></tr>
</tbody>
</table>
<p class="dh-note">担当医：みなと 太郎</p>
</div>
<div class="dh-panel" role="tabpanel" hidden>
<table class="dh-table">
<thead>
<tr><th>時間帯</th><th>月〜金</th><th>土</th><th>日祝</th></tr>
</thead>
<tbody>
<tr><th>9:30〜12:00</th><td>●</td><td>●</td><td class="dh-off">－</td></tr>
<tr><th>15:00〜17:30</th><td>●</td><td class="dh-off">－</td><td class="dh-off">－</td></tr>
</tbody>
</table>
<p class="dh-note">担当医：みなと 花子</p>
</div>
<div class="dh-panel" role="tabpanel" hidden>
<table class="dh-table">
<thead>
<tr><th>時間帯</th><th>月〜金</th><th>土</th><th>日祝</th></tr>
</thead>
<tbody>
<tr><th>10:00〜13:00</th><td>●</td><td class="dh-off">－</td><td class="dh-off">－</td></tr>
<tr><th>15:00〜18:30</th><td>●</td><td>▲</td><td class="dh-off">－</td></tr>
</tbody>
</table>
<p class="dh-note">▲ 土曜は 15:00〜17:00 のみ／担当医：港見 誠</p>
</div>
</div>
.dh-wrap {
--dh-accent: #2f8f9d; /* タブ選択中の色（医院のテーマ色に変更してください） */
--dh-off-bg: #f3f4f6; /* 休診マスの背景色 */
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
max-width: 560px;
margin: 0 auto;
box-sizing: border-box;
}
.dh-wrap * { box-sizing: border-box; }
.dh-tablist {
display: flex;
gap: .4em;
margin-bottom: 0;
border-bottom: 2px solid #e5e7eb;
}
.dh-tab {
flex: 1;
appearance: none;
border: none;
background: transparent;
font: inherit;
font-size: .88rem;
font-weight: 700;
color: #8a919a;
padding: .75em .5em;
cursor: pointer;
position: relative;
border-radius: 8px 8px 0 0;
transition: color .2s ease, background-color .2s ease;
}
.dh-tab:hover { background: #f8fafb; }
.dh-tab:focus-visible {
outline: 2px solid var(--dh-accent);
outline-offset: -2px;
}
.dh-tab[aria-selected="true"] {
color: var(--dh-accent);
}
.dh-tab[aria-selected="true"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: var(--dh-accent);
}
.dh-panel {
background: #fff;
padding: 1.1em 0 0;
}
.dh-table {
width: 100%;
border-collapse: collapse;
}
.dh-table th, .dh-table td {
border: 1px solid #e5e7eb;
padding: .6em .4em;
text-align: center;
font-size: .88rem;
}
.dh-table thead th {
background: #fafafa;
color: #2d3339;
font-weight: 700;
}
.dh-table tbody th {
background: #fafafa;
font-weight: 600;
white-space: nowrap;
}
.dh-table td { color: var(--dh-accent); font-weight: 700; }
.dh-table td.dh-off { background: var(--dh-off-bg); color: #b0b6bd; font-weight: 400; }
.dh-note {
margin: .7em 0 0;
font-size: .78rem;
color: #6b7280;
text-align: center;
}
@media (max-width: 375px) {
.dh-tab { font-size: .8rem; padding: .65em .3em; }
.dh-table th, .dh-table td { padding: .5em .25em; font-size: .78rem; }
}
(function () {
function DeptHoursTabs(root) {
this.root = root;
this.tabs = Array.prototype.slice.call(root.querySelectorAll('.dh-tab'));
this.panels = Array.prototype.slice.call(root.querySelectorAll('.dh-panel'));
if (this.tabs.length === 0 || this.tabs.length !== this.panels.length) return;
this.bindEvents();
}
DeptHoursTabs.prototype.select = function (index, focusTab) {
var count = this.tabs.length;
var next = (index + count) % count;
this.tabs.forEach(function (tab, i) {
var active = i === next;
tab.setAttribute('aria-selected', String(active));
tab.tabIndex = active ? 0 : -1;
});
this.panels.forEach(function (panel, i) {
if (i === next) {
panel.removeAttribute('hidden');
} else {
panel.setAttribute('hidden', '');
}
});
if (focusTab) this.tabs[next].focus();
};
DeptHoursTabs.prototype.bindEvents = function () {
var self = this;
this.tabs.forEach(function (tab, i) {
tab.addEventListener('click', function () {
self.select(i, false);
});
tab.addEventListener('keydown', function (e) {
var currentIndex = self.tabs.indexOf(tab);
if (e.key === 'ArrowRight') {
e.preventDefault();
self.select(currentIndex + 1, true);
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
self.select(currentIndex - 1, true);
} else if (e.key === 'Home') {
e.preventDefault();
self.select(0, true);
} else if (e.key === 'End') {
e.preventDefault();
self.select(self.tabs.length - 1, true);
}
});
});
};
document.querySelectorAll('.dh-wrap').forEach(function (root) {
new DeptHoursTabs(root);
});
})();