@charset "shift_jis";
/* tab */
.tabs {
  width: 100%;
  position: relative;
}

.tabs input {
  display: none;
}

.tab-area label {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: no-repeat;
  width: 33%;
  height: 60px;
  padding-top: 1.4em;
  font-size: 95%;
  text-align: center;
  cursor: pointer;
  background-color: #000;
  background-size: contain;
  background-position: center top;
}

.tab-area label span {
  display: block;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}

@media screen and (min-width: 1000px) {
  .tab-area label {
    height: 80px;
    padding-top: 2.2em;
  }
}
.tab-area label:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 0;
  border-width: 0 14px 14px 0;
  border-style: solid;
  border-color: #fff #fff #000 #000;
  background-color: #000;
}

.tab-area label:hover,
#tab1:checked ~ .tab-area .tab1-label,
#tab2:checked ~ .tab-area .tab2-label,
#tab3:checked ~ .tab-area .tab3-label {
  background-color: var(--color-primary);
}

.tab-area label:hover::before,
#tab1:checked ~ .tab-area .tab1-label:before,
#tab2:checked ~ .tab-area .tab2-label:before,
#tab3:checked ~ .tab-area .tab3-label:before {
  background-color: var(--color-primary);
  border-color: #fff #fff var(--color-primary) var(--color-primary);
}

/* ----- play */
.tab-area .tab-play {
  padding-top: 2em;
  font-weight: 700;
}

.tab-area .tab-play span {
  font-size: inherit;
  color: var(--color-primary);
}

@media screen and (min-width: 1000px) {
  .tab-area .tab-play {
    font-size: 150%;
    padding-top: 1.6em;
  }
}
@keyframes tabAnim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tab-panel {
  display: none;
}

.panel-area {
  border-top: solid 2px var(--color-primary);
  padding-top: 3vh;
}

#tab1:checked ~ .panel-area #panel1 {
  display: block;
  animation: tabAnim ease 0.6s forwards;
}

#tab2:checked ~ .panel-area #panel2 {
  display: block;
  animation: tabAnim ease 0.6s forwards;
}

#tab3:checked ~ .panel-area #panel3 {
  display: block;
  animation: tabAnim ease 0.6s forwards;
}