/* PC */
@media (min-width: 1024px) {
  .wrapper {
    margin-top: 96px;
  }
}
/* Mobile */
@media (max-width: 1024px) {
  .wrapper {
    margin-top: 56px;
  }
}

.tabs {
  width: 100%;
  display: flex;
  justify-content: center;

  margin-bottom: -1px;

  font-family:"IBM Plex Sans","Noto Sans JP",sans-serif;
  font-weight: 700;
  font-size: 20px;
}
.tabs__list {
  display: flex;
  justify-content: center;
  gap: 20px;

  width: 100%;
  max-width: 1062px;
  margin-bottom: -1px;
}
.tabs__item {
  border-radius: 8px 8px 0px 0px;
  /* 50% - (.tab's gap) */
  width: calc(50% - 1em);
  height: 4em;

  /* Centering */
  display: flex;
  justify-content: center;
  align-items: center;

  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}
.tabs__item > h2 {
  margin: 0;
}

.tabs__item_active {
  background-color: #ffffff;
  border: 1px solid #a6a6a6;
  border-bottom: none;
}
.tabs__item_active > h2 {
  color: #333333;
}
.tabs__item_active:hover, .tabs__item_active:active {
  opacity: 1.0;
}

.tabs__item_inactive {
  background-color: #cccccc;
  border-bottom: 1px solid #a6a6a6;
  margin-bottom: 1px;
}
.tabs__item_inactive > h2 {
  color: #ffffff;
}
.tabs__item_inactive:hover {
  background-color: #f2f2f2;
}
.tabs__item_inactive:hover > h2 {
  color: #808080;
}

.page-content-wrapper {
  display: flex;
  justify-content: center;

  border-top: 1px solid #a6a6a6;
  padding-top: 56px;
}
.page-content {
  max-width: 1062px;
  margin-left: 0.8em;
  margin-right: 0.8em;
}


@media screen and (max-width: 480px) {
  /* 480pxまでの幅の場合に適応される */
  .tabs__item {
    border-radius: 8px 8px 0px 0px;
    width: calc(50% - 1em);
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
    font-size: 15px;
  }
}