@charset "UTF-8";
/* @note カスタム変数 */
/*
@note - - px to vw
*/
:root {
  --rpx-base: 1px ;
  --rpxClamp: clamp(0px, var(--rpx-base), 1.4px);
  --rpx: var(--rpx-base);
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  :root {
    --rpx-base: 1px ;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --rpx-base: 0.2666666667vw ;
  }
}

/*
@note オーバラップ
*/
.overlap.nobg {
  background-color: transparent !important;
  height: auto;
  min-height: 0 !important;
}

.js-scroll-overlap:not(.is-disabled) {
  --sticky-offset: -1px;
  height: auto;
  z-index: 0;
}

/* @note カスタム変数 */
:root {
  --rpx-base: 0.0732064422vw;
  --rpxClamp: clamp(0px, var(--rpx-base), 1.4px);
  --rpx: var(--rpx-base);
}
@media screen and (max-width: 768px) {
  :root {
    --rpx-base: 0.2666666667vw;
  }
}

:root {
  --color-key: #6b1b7e;
  --color-gray: #727171;
  --leading-trim: calc((1em - 1lh) / 2);
  --inner-width: 960px;
  --gutter: 30px;
}
@media screen and (max-width: 768px) {
  :root {
    --gutter: calc(24 * var(--rpx));
  }
}

* {
  box-sizing: border-box;
}

.recruit-top .en {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.recruit-top .footer-info-copy.en {
  font-weight: 400;
}

/*
@note inview アニメーション
*/
.inview-elem {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-in-out;
}
.inview-elem.inview-0 {
  opacity: 1;
  transform: translateY(0);
}

/*  @note page header
--------------------------------------------- */
@media screen and (min-width: 1025px) {
  .header-menu {
    padding-bottom: 0 !important;
  }
}

/*
@note Button
*/
.icon-link-text {
  --this-gap: 13px;
  display: flex;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  line-height: 1;
  font-size: var(--this-fz, 18px);
  gap: var(--this-gap);
  color: #fff;
  font-weight: 400;
  white-space: nowrap;
}
.icon-link-text:hover {
  opacity: 0.6;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .icon-link-text {
    --this-gap: calc(10 * var(--rpx));
    --this-fz: calc(14 * var(--rpx));
    --this-size: calc(27 * var(--rpx));
  }
}
.icon-link-text:before {
  content: "";
  width: var(--this-size, calc(33 * var(--rpx)));
  height: var(--this-size, calc(33 * var(--rpx)));
  background: url(/assets/img/recruit/top/icon-link.svg) no-repeat center center;
}

/*
@note Recruit Top Page
--------------------------------------------- */
/*
@note - - MV
*/
.page-recruit {
  font-family: "DM Sans", "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  --this-bottom-gap: 0px;
}
.page-recruit .mv {
  --overlap-height: 0px;
  padding-bottom: 330px;
}
@media screen and (max-width: 768px) {
  .page-recruit .mv {
    padding-bottom: calc(205 * var(--rpx));
  }
}
@media screen and (max-width: 768px) {
  .page-recruit {
    font-size: calc(14 * var(--rpx));
  }
}
@media screen and (max-width: 768px) {
  .page-recruit {
    --this-bottom-gap: 0px;
  }
}
.page-recruit .top-mv {
  position: sticky !important;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100vh;
}
.page-recruit .top-mv-container {
  padding-bottom: var(--this-bottom-gap) !important;
  background: var(--color-key) !important;
}
.page-recruit .top-mv-item {
  overflow: hidden;
  width: 100%;
}
.page-recruit .top-mv-txt {
  font-size: calc(81 * var(--rpx));
  white-space: nowrap;
  font-weight: 500;
  color: #fff;
  line-height: 1.5em;
  margin: 0;
  left: 16.83%;
  margin-top: 2%;
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .page-recruit .top-mv-txt {
    font-size: calc(40 * var(--rpx));
    transform: translateX(0);
    width: 100%;
    left: 9%;
    bottom: 27%;
  }
}
.page-recruit .top-mv-video {
  height: calc(100vh - var(--this-bottom-gap));
}
.page-recruit .top-mv-video img {
  width: 50%;
  max-width: 761px;
  top: auto;
  left: 95px;
  bottom: 0;
  transform: translateY(1%);
  line-height: 1;
  z-index: 1;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .page-recruit .top-mv-video img {
    left: -1%;
    bottom: -2px !important;
    width: 101%;
  }
}
.page-recruit .top-mv-video img img {
  width: 100%;
  height: auto;
}

.mv-spacer {
  height: 100vh;
  /* デフォルト値、JSで動的に変更される */
}

.mv.row {
  background: var(--color-key);
}

/*
@note - - Lead
*/
section.lead {
  width: 100%;
  max-width: var(--inner-width, 960px);
  padding: 0 var(--gutter, 30px);
  margin: 0 auto;
  color: #fff;
  z-index: 1;
  position: relative;
}
section.lead .lead-inner {
  display: flex;
  flex-direction: column;
  gap: 4.44em;
}
@media screen and (max-width: 768px) {
  section.lead .lead-inner {
    gap: calc(40 * var(--rpx));
  }
}
section.lead p {
  margin: var(--leading-trim) 0 !important;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 2.5;
}
@media screen and (max-width: 768px) {
  section.lead p {
    font-size: 1em;
    white-space: nowrap;
  }
}
section.lead p.start {
  margin-bottom: calc(50px + var(--leading-trim)) !important;
}
section.lead p.large {
  font-size: 3.64em;
  line-height: 1.525em;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  section.lead p.large {
    font-size: calc(40 * var(--rpx));
  }
}

.narrow {
  letter-spacing: -0.05em;
}

/*
@note - - Introduction
*/
section.introduction {
  color: #fff;
  position: relative;
  z-index: 1;
  --this-gap: 225px;
}
section.introduction:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(500 * var(--rpx));
  z-index: 0;
  background: var(--color-key);
}
section.introduction:after {
  content: "";
  position: absolute;
  top: var(--this-gap, 225px);
  left: 0;
  width: 100%;
  height: calc(100% - var(--this-gap));
  z-index: 0;
  background: #000;
}
@media screen and (max-width: 768px) {
  section.introduction:after {
    --this-gap: calc(120 * var(--rpx));
  }
}

.introduction-movie {
  max-width: 900px;
  margin: -225px auto 190px auto;
  margin-bottom: 190px;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .introduction-movie {
    padding: 0 var(--gutter);
  }
}
@media screen and (max-width: 768px) {
  .introduction-movie {
    margin: calc(-120 * var(--rpx)) auto calc(120 * var(--rpx)) auto;
    max-width: 100vw;
    padding: 0 calc(30 * var(--rpx));
    margin-bottom: calc(95 * var(--rpx));
  }
}
.introduction-movie p {
  font-size: 28px;
  font-weight: 500 !important;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .introduction-movie p {
    font-size: calc(14 * var(--rpx));
    gap: calc(12 * var(--rpx));
    margin-bottom: calc(12 * var(--rpx));
  }
}
.introduction-movie p:before, .introduction-movie p:after {
  content: "";
  width: 1px;
  background: #fff;
  height: 40px;
  transform: rotate(-21.4deg);
}
@media screen and (max-width: 768px) {
  .introduction-movie p:before, .introduction-movie p:after {
    height: calc(20 * var(--rpx));
  }
}
.introduction-movie p:after {
  transform: rotate(21.4deg);
}
.introduction-movie .movie-wrap {
  position: relative;
}
.introduction-movie video {
  width: 100%;
  height: auto;
}
.introduction-movie .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.introduction-movie .img img {
  width: 171px;
  height: 171px;
}
.introduction-movie .img img:hover {
  opacity: 0.6;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .introduction-movie .img img {
    width: calc(90 * var(--rpx));
    height: calc(90 * var(--rpx));
  }
}

.inner-row-wrap {
  overflow: hidden;
  padding-top: 5px;
  z-index: 2;
  position: relative;
}

.introduction .inner-row {
  --this-img-size: 682px;
  --this-gap: 45px;
  --this-column-max-width: calc((100% - var(--this-gap)) / 2);
  --this-inner-gutter: 9px;
  max-width: var(--inner-width);
  margin: 0 auto;
  margin-top: var(--this-top-margin, 0px);
  display: grid;
  grid-template-columns: var(--this-column-max-width) var(--this-column-max-width);
  gap: var(--this-gap);
}
.introduction .inner-row._1 {
  --this-text-inner-padding: 0 0 0 36px;
}
@media screen and (max-width: 768px) {
  .introduction .inner-row._1 {
    --this-gap: 0;
    --this-img-trainsform: translateX(calc(44 * var(--rpx)));
  }
}
.introduction .inner-row._2 {
  --this-text-padding: 117px 0 0 53px;
  --this-img-order: 1;
  --this-text-order: 2;
  --this-top-margin: 0px;
  --this-img-justify: flex-end;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .introduction .inner-row._2 {
    --this-top-margin: 66px;
  }
}
@media screen and (max-width: 768px) {
  .introduction .inner-row._2 {
    --this-gap: calc(33 * var(--rpx));
    --this-top-margin: calc(55 * var(--rpx));
    --this-img-trainsform: translateX(calc(-36 * var(--rpx)));
  }
}
.introduction .inner-row._3 {
  --this-text-padding: 85px 0 0 0;
  --this-top-margin: 66px;
}
.introduction .inner-row._3 h3 {
  width: 100vw;
}
@media screen and (max-width: 768px) {
  .introduction .inner-row._3 {
    --this-gap: 0;
    --this-top-margin: calc(55 * var(--rpx));
    --this-img-trainsform: translateX(calc(44 * var(--rpx)));
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .introduction .inner-row {
    padding: 0 var(--gutter);
    --introduction-h3-fz: 60px;
    --introduction-dt-fz: 48px;
    --this-text-padding: 0 !important;
    --this-text-inner-padding: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .introduction .inner-row {
    padding: 0 var(--gutter);
    grid-template-columns: 1fr;
    --this-text-inner-padding: 0 !important;
    --this-img-order: 2 !important;
    --this-text-order: 1 !important;
    --introduction-h3-fz: calc(48 * var(--rpx));
    --introduction-dt-fz: calc(33 * var(--rpx));
    --this-inner-gutter: calc(4 * var(--rpx));
    --this-text-padding: 0 !important;
  }
}
.introduction .inner-row .text {
  order: var(--this-text-order, 1);
  padding: var(--this-text-padding, 0);
}
.introduction .inner-row .text .inner {
  padding: var(--this-text-inner-padding, 0);
}
.introduction .inner-row.inview-0 {
  --this-h3-span-opacity: 1;
  --this-h3-span-transform: translateY(0);
}
.introduction .inner-row h3 {
  font-size: var(--introduction-h3-fz, 108px);
  font-weight: bold;
  line-height: 0.7em;
  color: var(--color-gray);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  white-space: nowrap;
  border-image-source: linear-gradient(0deg, #9fa0a0, 1px, rgba(0, 0, 0, 0) 0);
  border-image-slice: fill 0;
  border-image-outset: 0 100vw;
  overflow: hidden;
  width: max-content;
}
.introduction .inner-row h3 span {
  opacity: var(--this-h3-span-opacity, 0);
  transform: var(--this-h3-span-transform, translateY(100%));
  transition: all 0.8s 0.2s ease-in-out;
  transition-property: transform opacity;
  padding: 24px 0;
  letter-spacing: -0.05em;
}
@media screen and (max-width: 768px) {
  .introduction .inner-row h3 span {
    padding: calc(14 * var(--rpx)) 0;
  }
}
.introduction .inner-row dl {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 50px;
  margin-bottom: 38px;
}
@media screen and (max-width: 768px) {
  .introduction .inner-row dl {
    gap: calc(24 * var(--rpx));
    margin-top: calc(27 * var(--rpx));
    margin-bottom: calc(24 * var(--rpx));
  }
}
.introduction .inner-row dl dt {
  font-size: var(--introduction-dt-fz, 66px);
  line-height: 1;
  width: 100%;
  font-weight: 400;
}
.introduction .inner-row dl dd {
  margin: var(--leading-trim) 0 !important;
  line-height: 2.22;
  width: 100%;
  white-space: nowrap;
  margin-left: var(--this-inner-gutter) !important;
  font-weight: 400;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .introduction .inner-row dl dd {
    white-space: wrap;
  }
}
.introduction .inner-row .img {
  order: var(--this-img-order, 2);
  display: flex;
  align-items: center;
  justify-content: var(--this-img-justify, flex-start);
  position: relative;
  z-index: 1;
  transform: var(--this-img-trainsform, none);
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .introduction .inner-row .img {
    --this-img-size: 400px;
  }
}
@media screen and (max-width: 768px) {
  .introduction .inner-row .img {
    --this-img-size: calc(340 * var(--rpx));
  }
}
.introduction .inner-row .img .inner {
  min-height: var(--this-img-size) !important;
  min-width: var(--this-img-size) !important;
  border-radius: 100%;
  overflow: hidden;
  width: 100%;
  height: 100%;
  height: var(--this-img-size) !important;
  width: var(--this-img-size) !important;
}
.introduction .inner-row .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.introduction .inner-row .icon-link-text {
  margin-left: var(--this-inner-gutter);
}
.introduction .inner-row .icon-link-text + .icon-link-text {
  margin-top: calc(20 * var(--rpx));
}

.section-footer {
  --this-top-margin: 88px;
  padding-bottom: 120px;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .section-footer {
    display: flex !important;
    gap: 140px !important;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .section-footer {
    gap: 50px !important;
    padding-bottom: 80px !important;
  }
}
@media screen and (max-width: 768px) {
  .section-footer {
    --this-top-margin: calc(60 * var(--rpx));
    padding-bottom: calc(80 * var(--rpx)) !important;
  }
}
.section-footer .icon-link-text {
  margin-top: 22px;
  --this-inner-gutter: 0;
  --this-fz: 25px;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .section-footer .icon-link-text {
    --this-fz: 18px;
  }
}
@media screen and (max-width: 768px) {
  .section-footer .icon-link-text {
    font-size: calc(14 * var(--rpx));
  }
}

/*
@note Footer
*/


@media screen and (min-width: 769px) and (max-width: 1024px) {
  .footer-container {
    padding: 60px 0 30px !important;
  }
}
@media screen and (max-width: 768px) {
  .footer-container {
    padding: calc(68 * var(--rpx)) 0 calc(24 * var(--rpx)) 0 !important;
  }
}

.footer-info-sp {
  margin-top: calc(70 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(11 * var(--rpx));
}
@media screen and (min-width: 769px) {
  .footer-info-sp {
    display: none;
  }
}
.footer-info-sp p .footer-logo-2 {
  width: calc(173 * var(--rpx)) !important;
  height: auto;
}
.footer-info-sp p .footer-tel {
  width: calc(263 * var(--rpx)) !important;
  height: auto;
}/*# sourceMappingURL=page-recruit.css.map */