/* top_fixed main_selector */
.top_fixed {
   position: fixed;
   width: 100%;
   background-color: rgba(255, 255, 255, .7);
   border-bottom: 2px solid #F3F3F3;
   top: 60px;
   z-index: 1;
   transform: translateY(-100%);
   transition: transform 0.3s ease;
}

.top_fixed.show {
   transform: translateY(0);
}

.top_fixed #main_selector {
   margin: 10px 0;
   text-align: center;
}

.top_fixed #main_selector .inner {
   display: inline-block;
   width: 90%;
}

.top_fixed #main_selector .inner ul {
   display: flex;
   gap: 15px;
   justify-content: center;
   align-items: center;
}

.top_fixed #main_selector .inner ul li {
   flex-basis: calc((100% - 15px) / 2);
   flex-grow: 1;
   text-align: center;
}

.top_fixed #main_selector .inner ul li.active {
   font-weight: bold;
}

.top_fixed #main_selector .inner ul li h1 {
   margin: 0;
   padding: 0;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   display: contents;
}

.top_fixed #main_selector .inner ul li a {
   font-size: 18px;
   display: block;
   color: #333;
   background-color: #fff;
   padding: 5px 0;
   border-radius: 8px;
   border: 1px solid #ccc;
}

.top_fixed #main_selector .inner ul li.active a {
   background: transparent linear-gradient(90deg, #F359C0 0%, #F179B5 11%, #F2A3CB 61%, #F6E888 100%) 0% 0% no-repeat padding-box;
   color: #fff;
   border: none;
}

/* selector_section sub_selector & middle_selector */
#sub_selector {
   background-color: #F3F3F3;
   text-align: center;
   padding: 5px 0;
}

#middle_selector {
   margin: 30px 0;
}

.selector_section .inner ul {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin: 0 auto;
}

.selector_section .inner ul.no-swiper,
#middle_selector .inner ul {
   width: 90%;
   justify-content: center;
   gap: 15px;
}

.selector_section .inner ul li {
   display: inline-block;
   width: fit-content;
   will-change: transform;
   transform: translateZ(0);
}

#sub_selector .inner ul li:first-of-type {
   margin-left: 8px;
}

#sub_selector .inner ul li:last-of-type {
   margin-right: 8px;
}

#sub_selector .inner ul.no-swiper li,
#middle_selector .inner ul li {
   margin: 0 !important;
   width: calc((100% - 15px) / 2);
}

.selector_section .inner ul li.active {
   border: none;
}

.selector_section .inner ul li h1 {
   margin: 0;
   padding: 0;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   display: inline;
}

.selector_section .inner ul li a {
   display: block;
   padding: 3px 15px;
   font-size: 14px;
   white-space: nowrap;
   color: #333;
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 5px;
   text-align: center;
   margin-bottom: 1px;
}

.selector_section .inner ul li.active a {
   color: #fff;
   background-color: var(--theme-color);
   border: none;
}

.selector_section .inner ul.staff_rec li.active a {
   background-color: #74BDFF;
}

.bounce-anim {
   animation: bounce-in 1.2s ease-out;
}

@keyframes bounce-in {
   0% {
      transform: scale(1);
   }

   30% {
      transform: scale(1.02);
   }

   60% {
      transform: scale(0.98);
   }

   100% {
      transform: scale(1);
   }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1072px) {
   .top_fixed {
      width: 513px;
   }

   .top_fixed #main_selector {
      width: 513px;
   }
}

/* PC */
@media only screen and (min-width: 1073px) {

   /* top_fixed */
   .top_fixed {
      width: 513px;
      top: 0;
   }

   .top_fixed #main_selector {
      width: 513px;
   }
}