/*=============================================================
  recruit/index.html
=============================================================*/
.l-section {
  padding: 108px 0;
  position: relative;
  z-index: 1;
  background: #fff;
}
.l-container {
  max-width: 1172px;
  padding: 0 5%;
}

/* p-mv
--------------------------------------------------------------*/
.p-mv {
  position: relative;
  max-height: 900px;
  position: sticky;
  top: 0;
}
.p-mv__bg {
  max-height: 900px;
}
.js .p-mv__bg {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.p-mv__bg.is-show {
  opacity: 1;
}
.p-mv__bg-img {
  width: 100%;
  max-height: 900px;
  object-fit: cover;
  object-position: center center;
}
.p-mv__catch {
  position: absolute;
  bottom: 9%;
  left: 6%;
  z-index: 2;
}
.p-mv__catch span {
  font-size: clamp(40px, 5vw, 60px);
  line-height: 140%;
  color: #fff;
  display: block;
  transform: translateX(-40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.js .p-mv__catch span {
  opacity: 0;
}
.p-mv__catch span.is-show {
  opacity: 1;
  transform: translateX(0);
}

/* p-scroll-button
--------------------------------------------------------------*/
.p-scroll-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: absolute;
  bottom: -20px;
  right: 40px;
  z-index: 1;
}
.p-scroll-button__text {
  font-size: 12px;
  font-family: var(--fontInter);
  color: #fff;
  display: block;
  writing-mode: vertical-lr;
}
.p-scroll-button__arrow {
  width: 2px;
  height: 76px;
  background: #fff;
  position: relative;
}
.p-scroll-button__arrow::before {
  content: "";
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: #fff;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  animation: scrollArrow 2.5s ease-in-out infinite;
}
@keyframes scrollArrow {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(-50%);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateY(60px) translateX(-50%);
  }
}

/* c-heading
--------------------------------------------------------------*/
.c-heading {
  line-height: 125%;
}
.c-heading--lv2 {
  font-size: clamp(23px, 4vw, 36px);
  font-weight: var(--fontMedium);
  line-height: 125%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--keyColor);
  margin-bottom: 64px;
}
.c-heading--lv2 span {
  font-size: clamp(14px, 4vw, 16px);
  font-weight: var(--fontNormal);
  line-height: 100%;
}

/* p-recruit
--------------------------------------------------------------*/
.l-section.p-recruit {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 170px 0;
}
.p-recruit .l-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 10%;
}
.p-recruit .c-heading--lv2 {
  margin-bottom: 36px;
}
.p-recruit__catch {
  background: linear-gradient(180deg, #00a0e9 0%, #0d74d4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
  font-weight: var(--fontBold);
  line-height: 150%;
  margin-bottom: 24px;
}
.p-recruit__lead {
  font-size: 18px;
  font-weight: var(--fontMedium);
  color: var(--textColor);
  margin-top: 0 !important;
}

/* p-people
--------------------------------------------------------------*/
.p-people {
  background: linear-gradient(
    238.67deg,
    #e9f6fd 7.26%,
    #e4f2fe 50.37%,
    #caf2ff 93.48%
  );
  overflow: hidden;
}
.p-people .c-heading--lv3 {
  font-size: clamp(20px, 4vw, 24px);
  font-weight: var(--fontBold);
  line-height: 100%;
  padding-top: 32px;
  margin: 64px 0 48px;
  position: relative;
}
.p-people .c-heading--lv3::before {
  content: "";
  width: 68px;
  height: 4px;
  background: linear-gradient(96.51deg, #004ede -2.85%, #43e9ff 103.05%);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.p-people__lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 74px 32px;
  margin-top: 100px;
}
.p-people__lists li {
  position: relative;
}
.p-people__lists a {
  display: block;
}
.p-people__lists-department {
  position: absolute;
  top: -50px;
  left: -15px;
  width: clamp(100px, 9vw, 121px);
  height: clamp(90px, 8vw, 104px);
  background: linear-gradient(180deg, #00a0e9 0%, #0d74d4 100%);
  color: #fff;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: var(--fontBold);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  padding: 10px;
  line-height: 120%;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}
.p-people__lists-pic img {
  height: clamp(195px, 40vw, 343px);
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
.p-people__lists-text {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: var(--fontMedium);
  margin: 12px 0;
  line-height: 150%;
  transition: color var(--transition);
}
.p-people__lists-text span {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: var(--fontNormal);
  margin-top: 8px;
  display: block;
  line-height: 100%;
}
.p-people__lists-label {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.p-people__lists-label li {
  display: inline-block;
  border: 1px solid var(--keyColor);
  background: #fff;
  color: var(--keyColor);
  font-size: clamp(10px, 2vw, 14px);
  text-align: center;
  padding: 2px 10px;
  border-radius: 4px;
}
.p-people__lists a:hover img {
  transform: scale(1.1);
}
.p-people__lists a:hover .p-people__lists-text {
  color: var(--keyColor);
}
.p-people__block a {
  display: grid;
  grid-template-columns: 56% 1fr;
  gap: 32px;
  align-items: center;
}
.p-people__block:nth-of-type(even) a {
  grid-template-columns: 1fr 56%;
}
.p-people__block:nth-of-type(even) .p-people__block-img {
  order: 2;
}
.p-people__block + .p-people__block {
  margin-top: 48px;
}
.p-people__block .c-heading--lv4 {
  font-size: 36px;
  font-weight: var(--fontNormal);
  line-height: 140%;
  margin-bottom: 8px;
  color: var(--textColor);
}
.p-people__block .c-link {
  margin-top: 12px;
}
.p-people__block a:hover .c-link {
  color: var(--keyColor);
}
.p-people__block:has(a:hover) .p-people__block-img img {
  transform: scale(1.1);
}

/* p-environment
--------------------------------------------------------------*/
.p-environment__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 32px;
}
.p-environment .c-link {
  margin-top: 12px;
}
.p-environment a:hover .c-link span {
  color: var(--keyColor);
}
.l-section a:not(:hover) .c-link span {
  transition: none;
}

/* p-about
--------------------------------------------------------------*/
.p-about {
  background: linear-gradient(
    238.67deg,
    #e9f6fd 7.26%,
    #e4f2fe 50.37%,
    #caf2ff 93.48%
  );
}
.p-about .l-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 10%;
}
.p-about .c-link-banner {
  display: grid;
  gap: 10px;
}
.p-about .c-link-banner[data-animation] {
  transition-delay: 0.3s;
}
.p-about .c-link-banner[target="_blank"]::after {
  content: none;
}
.p-about .c-link-banner[target="_blank"] .c-link::before {
  top: 5px;
}
.p-about .c-link-banner[target="_blank"]:hover .c-link::before {
  background: url(/recruit/assets/img/icon-link--light-blue.svg) no-repeat;
  background-size: cover;
}
.p-about .c-link-banner[target="_blank"] .c-link::after {
  content: "";
  background: url(/recruit/assets/img/icon-blank--light-blue.svg) no-repeat;
  background-size: cover;
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  top: 7px;
  right: -5px;
}
.p-about .c-link-banner[target="_blank"] span span,
.p-about .c-link-banner[target="_blank"] span span {
  padding-left: 0;
}
.p-about .c-link-banner[target="_blank"] span span::before,
.p-about .c-link-banner[target="_blank"] span span::after {
  content: none;
}
.p-about .c-link-banner[target="_blank"] small {
  display: block;
  margin-top: 5px;
  color: var(--textColor) !important;
}
.p-about .c-link-banner[target="_blank"]:hover span {
  color: var(--keyColor);
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Tablet
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media (max-width: 1023px) {
  .l-section {
    padding: 64px 0;
  }

  /* c-heading
  --------------------------------------------------------------*/
  .c-heading--lv2 {
    margin-bottom: 30px;
  }

  /* p-mv
  --------------------------------------------------------------*/
  .p-mv {
    height: 654px;
  }
  .p-mv__bg-img {
    object-fit: cover;
    height: 654px;
  }
  .p-mv__bg-img--01 {
    object-position: 48% 50%;
  }
  .p-mv__bg-img--02 {
    object-position: 44% 50%;
  }
  .p-mv__bg-img--03 {
    object-position: 35% 50%;
  }
  .p-mv__catch {
    font-size: clamp(40px, 7vw, 45px);
    bottom: 97px;
  }

  /* p-scroll-button
  --------------------------------------------------------------*/
  .p-scroll-button {
    bottom: 110px;
    right: 20px;
  }

  /* p-recruit
  --------------------------------------------------------------*/
  .p-recruit .l-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .p-recruit__catch {
    font-size: clamp(24px, 5vw, 32px);
  }
  .p-recruit__lead {
    font-size: clamp(16px, 4vw, 18px);
  }

  /* p-people
  --------------------------------------------------------------*/
  .p-people .c-heading--lv2 {
    margin-bottom: 48px;
  }
  .p-people .c-heading--lv3 {
    padding-top: 24px;
    margin: 48px 0 32px;
  }
  .p-people__block .c-heading--lv4 {
    font-size: 28px;
  }
  .p-people__lists-department {
    top: -30px;
    width: clamp(61px, 14vw, 120px);
    height: clamp(52px, 12vw, 100px);
    font-size: clamp(12px, 2vw, 18px);
  }
  .p-people__lists {
    /*grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));*/
    grid-template-columns: repeat(2, 1fr);
    margin-top: 58px;
    gap: 70px 5%;
  }
  .p-people__block a,
  .p-people__block:nth-of-type(even) a {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-people__block-img {
    margin-left: -6%;
    order: 1;
  }
  .p-people__block-content {
    order: 2;
  }
  .p-people__block:nth-of-type(even) .p-people__block-img {
    margin-right: -6%;
    margin-left: auto;
  }

  /* p-about
  --------------------------------------------------------------*/
  .p-about .l-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .p-about .c-link-banner[target="_blank"] small {
    top: 30px;
    left: 0;
    margin: 0;
  }
}