/*
 *  Tab Box
 * ----------------------------------------------------------------------------
 *
 */
.tabs {
  margin-top: var(--space-size-20);
}

.tabs-button {
  display: table;
  float: left;
  min-height: 55px;
  text-align: center;
  border-bottom: 2px solid var(--ion-tab-border-color);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.tabs-button span {
  display: table-cell;
  width: 100%;
  color: var(--ion-form-supplement-text-color);
  font-size: var(--font-size-14);
  font-family: var(--hiragino-font-3);
  line-height: 16px;
  white-space: pre-line;
  vertical-align: middle;
}

.tab-2column {
  width: calc(100% / 2);
}

input[name='tabs-button'] {
  display: none;
}

.tabs-body {
  display: none;
  clear: both;
  padding-top: var(--space-size-20);
  overflow: hidden;
}

.tabs-body > :first-child {
  margin-top: 0;
}

#first:checked ~ #first_body,
#second:checked ~ #second_body {
  display: block;
}

.tabs input:checked + .tabs-button {
  border-bottom: 4.5px solid var(--ion-tab-box-text-color);
}

.tabs input:checked + .tabs-button span {
  color: var(--ion-tab-box-text-color);
  font-weight: bold;
  font-size: var(--font-size-14);
  font-family: var(--hiragino-font-6);
  white-space: pre-line;
}

/* tabsのmargin-top制御（デフォルトPC20,SP20） */
/* margin-top:PC30,SP20（下記に直前の部品を追加していく） */
.title-heading + .tabs {
  margin-top: var(--space-size-20);
}