@charset "UTF-8";
/*---------------------------------------------------
 Common
 ----------------------------------------------------*/

.bg-link-information {
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 352 / 252;
}

.--about.bg-link-information {
  background-image: url("../image/common/img_more_information_link01.png");
}

.--data.bg-link-information {
  background-image: url("../image/common/img_more_information_link02.png");
}

.--benefits.bg-link-information {
  background-image: url("../image/common/img_more_information_link03.png");
}

.--hr_development.bg-link-information {
  background-image: url("../image/common/img_more_information_link04.png");
}

/*---------------------------------------------------
 TOP
----------------------------------------------------*/

.interview-icon {
  width: 120px;
  height: 120px;
}

.swiper-slide {
  opacity: 0.5;
  transition: 0.5s;
}

.swiper-slide.swiper-slide-active {
  opacity: 1;
  transition: 0.5s;
}

.top-interview-swiper .interview-button {
  position: relative;
  border: none;
  background-color: transparent;
}

.top-interview-swiper .interview-button::after {
  position: absolute;
  content: "";
  background-image: url("../image/top/icon_link_arrow_plus.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 26 / 30;
  width: 26px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

#topInterviewSwiper .swiper-top-interview-button-prev,
#topInterviewSwiper .swiper-top-interview-button-prev::after,
#topInterviewSwiper .swiper-top-interview-button-next,
#topInterviewSwiper .swiper-top-interview-button-next::after {
  width: 37px;
  height: 43px;
}

#topInterviewSwiper .swiper-top-interview-button-prev::after,
#topInterviewSwiper .swiper-top-interview-button-next::after {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

#topInterviewSwiper .swiper-top-interview-button-prev::after {
  background-image: url("../image/top/icon_slider_interview_arrow_prev.svg");
}

#topInterviewSwiper .swiper-top-interview-button-next::after {
  background-image: url("../image/top/icon_slider_interview_arrow_next.svg");
}

.modal-float-close-button {
  position: relative;
  aspect-ratio: 30 / 30;
  width: 30px !important;
  height: 30px !important;
  border-width: 2px !important;
}

.modal-float-close-button::before,
.modal-float-close-button::after {
  position: absolute;
  content: "";
  background-color: #004ea4;
  width: 16px;
  height: 2px;
  top: 50%;
  left: 20%;
}

.modal-float-close-button::before {
  transform: translateY(-50%) rotate(45deg);
}

.modal-float-close-button::after {
  transform: translateY(-50%) rotate(-45deg);
}

.modal-content .schedule-box {
  min-height: 145px;
}

@media screen and (min-width: 992px) {
  #topInterviewSwiper .swiper-top-interview-button-prev,
  #topInterviewSwiper .swiper-top-interview-button-prev::after,
  #topInterviewSwiper .swiper-top-interview-button-next,
  #topInterviewSwiper .swiper-top-interview-button-next::after {
    width: 58px;
    height: 68px;
  }

  #topInterviewSwiper .swiper-top-interview-button-prev {
    left: 30% !important;
  }

  #topInterviewSwiper .swiper-top-interview-button-next {
    right: 30% !important;
  }

  .modal-dialog {
    max-width: 904px;
    width: 100%;
  }

  .modal-float-close-button {
    width: 48px !important;
    height: 48px !important;
    border-width: 3px !important;
  }

  .modal-float-close-button::before,
  .modal-float-close-button::after {
    width: 28px;
    height: 2px;
    top: 50%;
    left: 17%;
  }

  .modal-float-close-button::before {
    transform: translateY(-50%) rotate(45deg);
  }

  .modal-float-close-button::after {
    transform: translateY(-50%) rotate(-45deg);
  }
}

/*---------------------------------------------------
 About
----------------------------------------------------*/


/*---------------------------------------------------
 Requirements
----------------------------------------------------*/
#requirements .nav-link {
  background-color: #fff;
  border: 1px solid #8d8d8d;
  transition: 0.3s;
}

#requirements .nav-link .tab-text {
  color: #8d8d8d;
  transition: 0.3s;
}

#requirements .nav-link.active {
  background-color: #004ea3;
  border-color: #004ea3;
  pointer-events: none;
}

#requirements .nav-link.active .tab-text {
  color: #fff !important;
}

@media screen and (min-width: 992px) {
  #requirements .nav-link:hover {
    background-color: var(--color-blue);
  }

  #requirements .nav-link:hover .tab-text {
    color: #fff !important;
  }
}

/*---------------------------------------------------
 Development
----------------------------------------------------*/
.bg-development {
  background: linear-gradient(180deg,rgba(1, 160, 222, 1) 0%, rgba(0, 78, 162, 1) 100%);
}

.bg-development::after {
  position: absolute;
  content: "";
  width: 200px;
  height: 50px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 78, 162, 1);
}

.arrow-triangle-triple {
  width: 56px;
  height: auto;
  transform: rotate(90deg);
}

@media screen and (min-width: 992px) {
  .arrow-triangle-triple {
    transform: rotate(0);
  }
  .col-lg-training {
    max-width: calc((100% - 56px - 48px) / 2);
    width: 100% !important;
  }
}

/*---------------------------------------------------
 Data
----------------------------------------------------*/
.bg-data {
  clip-path: inset(0);
}

.bg-data::before {
  position: fixed;
  content: "";
  background: linear-gradient(180deg,rgba(1, 160, 222, 1) 0%, rgba(0, 78, 162, 1) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/*---------------------------------------------------
Benefits
----------------------------------------------------*/
.bg-benefits {
  clip-path: inset(0);
}

.bg-benefits::before {
  position: fixed;
  content: "";
  background: linear-gradient(180deg,rgba(1, 160, 222, 1) 0%, rgba(0, 78, 162, 1) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}