/* ## Tab Switcher Component
 * ------------------------------------------------
 * タブ切り替えの機能（display制御）のみを担当。
 * 見た目のスタイルは各プロジェクト固有のクラスで定義する。
 *
 * 使用方法:
 * - タブボタン: .js-tab-trigger に data-tab-target="対象ID" を付与
 * - タブコンテンツ: .js-tab-content に id を付与
 * - アクティブ状態: is-active クラスで管理
 * ------------------------------------------------ */
.js-tab-content {
  display: none;
  animation: js-tab-fadeIn 0.5s;

  &.is-active {
    display: block;
  }
}

@keyframes js-tab-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}