@charset "UTF-8";

/* --------------------------------------------------
 ::Recruit top
-------------------------------------------------- */
.p-recruit-mv {
  position: relative;
}
.p-recruit-mv__bg {
  position: relative;
  overflow: hidden
}
.p-recruit-mv__bg img {
  position: absolute;
}
.js-random {
  opacity: 0;
}
.js-random.is-active {
  opacity: 1;
  transition: opacity 1.5s;
}
.p-recruit-mv__text-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
}
.p-recruit-mv__text {
  font-weight: bold;
  line-height: 1.5;
}
.p-recruit-mv__text > span {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0.3em;
  color: var(--color-main);
  z-index: 1;
  opacity: 0;
  animation: fadeIn 1s forwards;
  animation-delay: 1s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.p-recruit-mv__text > span + span {
  margin-top: 0.4em;
}
.p-recruit-mv__text > span::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #fff;
  z-index: -1;
  animation: marker 1s forwards var(--ease-out-quint);
  animation-delay: 1.5s;
}
@keyframes marker {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  .p-recruit-mv {
    margin-bottom: calc(77 / 375 * 100vw);
  }
  .p-recruit-mv__bg {
    aspect-ratio: 375/440;
    background: url(../../img/recruit/mv_bg_sp.jpg) no-repeat center / cover;
  }
  .p-recruit-mv__tile01,
  .p-recruit-mv__tile02,
  .p-recruit-mv__tile03,
  .p-recruit-mv__tile04,
  .p-recruit-mv__tile05 {
    display: block;
    position: absolute;
    aspect-ratio: 1/1;
    border-radius: 1.464128vw;
  }
  .p-recruit-mv__tile01.is-active {
    top: 21.136363%;
    left: -2.933333%;
    width: 14.133333%;
    background: radial-gradient(at 40% 10%, #A8B8E1 50%, transparent 100%), radial-gradient(at 10% 90%, #fff 50%, transparent 100%), radial-gradient(at 60% 90%, #D9B5EB 50%, transparent 100%);
    mix-blend-mode: multiply;
  }
  .p-recruit-mv__tile02.is-active {
    top: -7.727272%;
    left: 60.533333%;
    width: 24.533333%;
    background: radial-gradient(at 39% 50%, #80E4FF 50%, #FCFDFD 100%);
    opacity: .5;
    mix-blend-mode: multiply;
  }
  .p-recruit-mv__tile03.is-active {
    top: 60.454545%;
    left: 38.4%;
    width: 22.666666%;
    background: radial-gradient(at 25% 100%, #FFDF7F 50%, #fff 100%);
    opacity: .6;
    mix-blend-mode: color;
  }
  .p-recruit-mv__img01 {
    top: 0;
    left: 0;
    width: 33.866666%;
  }
  .p-recruit-mv__img02 {
    top: 5.909090%;
    left: 37.066666%;
    width: 30.4%;
  }
  .p-recruit-mv__img03 {
    top: 5.909090%;
    right: 0;
    width: 29.6%;
  }
  .p-recruit-mv__img04 {
    top: 27.272727%;
    left: 3.737373%;
    width: 50.133333%;
  }
  .p-recruit-mv__img05 {
    top: 41.136363%;
    right: 0;
    width: 42.933333%;
  }
  .p-recruit-mv__img06 {
    top: 74.090909%;
    left: 49.0666666%;
    width: 26.4%;
  }
  .p-recruit-mv__img07 {
    top: 74.090909%;
    right: 0;
    width: 21.866666%;
  }
  .p-recruit-mv__text-wrapper {
    bottom: -1.4em;
  }
  .p-recruit-mv__text {
    font-size: calc(27 / 375 * 100vw);
  }
}

/* PC */
@media screen and (min-width: 768px) {
  .p-recruit-mv {
    margin-bottom: calc(163 / 1366 * 100vw);
  }
  .p-recruit-mv__bg {
    aspect-ratio: 1366/600;
    background: radial-gradient(circle, rgba(235,237,247,1) 0%, rgba(220,240,240,1) 27%, rgba(210,214,236,1) 45%, rgba(180,212,223,1) 100%);
  }
  .p-recruit-mv__tile01,
  .p-recruit-mv__tile02,
  .p-recruit-mv__tile03,
  .p-recruit-mv__tile04,
  .p-recruit-mv__tile05 {
    display: block;
    position: absolute;
    aspect-ratio: 1/1;
    border-radius: 1.464128vw;
  }
  .p-recruit-mv__tile01.is-active {
    top: 24%;
    left: -6.002928%;
    width: 14.0556368960469%;
    background: radial-gradient(at 25% 100%, #FFDF7F 50%, #fff 100%);
    opacity: .6;
  }
  .p-recruit-mv__tile02.is-active {
    top: -15%;
    left: 43.045387%;
    width: 13.9092240%;
    background: radial-gradient(at 39% 50%, #80E4FF 50%, #FCFDFD 100%);
    opacity: .5;
    mix-blend-mode: multiply;
    z-index: 1;
  }
  .p-recruit-mv__tile03.is-active {
    top: 74%;
    left: 26.866764%;
    width: 7.759882%;
    background: radial-gradient(at 40% 10%, #A8B8E1 50%, transparent 100%), radial-gradient(at 10% 90%, #fff 50%, transparent 100%), radial-gradient(at 60% 90%, #D9B5EB 50%, transparent 100%);
    mix-blend-mode: multiply;
  }
  .p-recruit-mv__tile04.is-active {
    top: 29.333333%;
    left: 83.455344%;
    width: 13.543191%;
    background: radial-gradient(at 40% 10%, #A8B8E1 50%, transparent 100%), radial-gradient(at 10% 90%, #fff 50%, transparent 100%), radial-gradient(at 60% 90%, #D9B5EB 50%, transparent 100%);
    mix-blend-mode: multiply;
  }
  .p-recruit-mv__tile05.is-active {
    top: 81.666666%;
    left: 92.972181%;
    width: 13.543191%;
    background: radial-gradient(at 25% 100%, #FFDF7F 50%, #fff 100%);
    opacity: .6;
    z-index: 1;
  }
  .p-recruit-mv__img01 {
    top: 0;
    left: 1.464128%;
    width: 25.988286%;
  }
  .p-recruit-mv__img02 {
    top: 0;
    left: 28.989751%;
    width: 16.9838943%;
  }
  .p-recruit-mv__img03 {
    top: 8.333333%;
    left: 58.491947%;
    width: 16.398243%;
  }
  .p-recruit-mv__img04 {
    top: 26.666666%;
    left: 28.989751%;
    width: 28.038067%;
  }
  .p-recruit-mv__img05 {
    top: 47.833333%;
    left: 58.491947%;
    width: 26.427525%;
  }
  .p-recruit-mv__img06 {
    top: 47.833333%;
    right: 0;
    width: 13.616398%;
  }
  .p-recruit-mv__img07 {
    top: 0;
    left: 75.988286%;
    width: 18.521229%;
  }
  .p-recruit-mv__text-wrapper {
    bottom: -2.5em;
  }
  .p-recruit-mv__text {
    font-size: calc(20px + 2.4890190336757vw);
  }
}