/* tabs.css — ベースライン(自動読込)。最低限の見た目を保証する。
   上書き・拡張はページ側/custom側で行い、このファイルと同名クラスをゼロから書き直さないこと。 */
.tabs-section { padding: 4rem 0; }
.tab-list {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--color-primary-light, rgba(0,0,0,.15));
  overflow-x: auto;
  margin-bottom: 1.6rem;
}
.tab {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: var(--color-text);
  opacity: .7;
  padding: .7rem 1.1rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { opacity: 1; }
.tab.is-active,
.tab[aria-selected="true"] {
  color: var(--color-primary);
  opacity: 1;
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}
.tab:focus-visible { outline: 2px solid var(--color-accent, var(--color-primary)); outline-offset: 2px; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: sm-tab-fade .25s ease; }
@keyframes sm-tab-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tab-panel { animation: none; } }

/* パネルの器。tabs.js は非表示を hidden 属性で行うので、CSS は器の余白だけでよい。
   ★これが sample.css に無かったため、AIが .tab-panels を書いてもCSSを書かず素の状態で出ていた。 */
.tab-panels {
  padding-top: 1.25rem;
}
.tab-panel[hidden] { display: none; }   /* hidden 属性を確実に効かせる(display指定に負けないように) */