/* ---------------------------------------------------------------------- */
/* タブ切り替え */
/* ---------------------------------------------------------------------- */

.tabs { scroll-margin-top:16px; }

/* タブ切り替え用ラベル */
.tabs__nav { align-items:flex-end; display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.tabs__nav-item { font-size:12px; text-align:center; margin:0; }

.tabs__nav-button {
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px 4px 0 0;
  color: var(--bk);
  cursor: pointer;
  padding:8px 10px;
  transition: background-color 0.2s ease;
}

.tabs__nav-button:hover {
  background-color: #e0e0e0;
}

.tabs__nav-button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
}

.tabs__nav-button[aria-selected="true"] {
  background-color: var(--wh);
  border-bottom: 2px solid #0066cc;
  color: #0066cc;
  font-weight: bold;
}

.tabs__panel[hidden] { display:none; }

@media (min-width: 768px) {
  .tabs__nav-button {
    font-size: 16px;
    padding: 12px 24px;
  }

  .tabs__panel {
    padding: 24px;
  }
}