@charset "UTF-8";
/* リキッドな余白 */
/**************************************/
/* -------------------------------------------
 * タブ切り替え
 * -------------------------------------------*/
.tab-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: min(8%, 44 * var(--px));
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (max-width: 834px) {
  .tab-buttons {
    gap: 5%;
  }
}

.tab-button {
  background: transparent;
  line-height: 1;
  padding: 0.8rem 2rem 1rem;
  cursor: pointer;
  font-size: var(--f18);
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  color: inherit;
  white-space: nowrap;
}

.tab-button.active {
  background-color: #222;
  color: #fff;
}

.tab-content {
  display: none;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.tab-content.active {
  display: block;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  -webkit-animation: tabFadeIn 0.3s ease-in-out;
          animation: tabFadeIn 0.3s ease-in-out;
}

@-webkit-keyframes tabFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}/*# sourceMappingURL=tab.css.map */