.picture {
  position: -webkit-sticky;
  position: sticky;
  position: relative;
  z-index: 1;
  top: min(var(--size-factor) * 104px, 104 / var(--base-width) * var(--inner-width) * 1px);
  margin: 0 auto;
  width: min(var(--size-factor) * 320px, 320 / var(--base-width) * var(--inner-width) * 1px);
  height: min(var(--size-factor) * 480px, 480 / var(--base-width) * var(--inner-width) * 1px);
  transform: translate(0, 0);
  will-change: transform, width, height;
  transition-property: width, height, transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}
@media only screen and (max-width: 47.9375em) {
  .picture {
    position: relative;
    top: auto;
    margin-top: min(var(--size-factor) * 128px, 128 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.picture::before {
  content: "";
  display: block;
  position: absolute;
  width: min(var(--size-factor) * 320px, 320 / var(--base-width) * var(--inner-width) * 1px);
  height: min(var(--size-factor) * 320px, 320 / var(--base-width) * var(--inner-width) * 1px);
  border-radius: min(var(--size-factor) * 320px, 320 / var(--base-width) * var(--inner-width) * 1px);
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  background: linear-gradient(180deg, #3dfe8b 0%, #259853 100%);
  filter: blur(20px);
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  will-change: filter, opacity;
}
.picture.is-fixed {
  position: -webkit-sticky;
  position: sticky;
  animation: picture-fix 0.5s linear 1 forwards;
}
.picture.is-active {
  transform: translate(max(var(--size-factor) * -352px, -352 / var(--base-width) * var(--inner-width) * 1px), 0) scale(1.25);
}
@media only screen and (max-width: 47.9375em) {
  .picture.is-active {
    width: min(var(--size-factor) * 320px, 320 / var(--base-width) * var(--inner-width) * 1px);
    height: min(var(--size-factor) * 480px, 480 / var(--base-width) * var(--inner-width) * 1px);
    transform: translate(0, 0);
  }
}
.picture.is-active::before {
  opacity: 0;
}

@keyframes picture-fix {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.picture__inner {
  position: relative;
  overflow: hidden;
  border-radius: min(var(--size-factor) * 200px, 200 / var(--base-width) * var(--inner-width) * 1px);
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 47.9375em) {
  .picture__inner {
    border-radius: min(var(--size-factor) * 160px, 160 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.picture__image-1,
.picture__image-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transition-property: -webkit-clip-path;
  transition-property: clip-path;
  transition-property: clip-path, -webkit-clip-path;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .picture__image-1,
  .picture__image-2 {
    transition: none;
  }
}

.picture__image-1 {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition-delay: 0.3s;
}
.picture.is-active .picture__image-1 {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

.picture__image-2 {
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  transition-delay: 0.3s;
}
@media only screen and (max-width: 47.9375em) {
  .picture__image-2 {
    -webkit-clip-path: none;
            clip-path: none;
  }
}
.picture.is-active .picture__image-2 {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
@media only screen and (max-width: 47.9375em) {
  .picture.is-active .picture__image-2 {
    -webkit-clip-path: none;
            clip-path: none;
  }
}

@media only screen and (max-width: 47.9375em) {
  .picture--main .picture__image-2 {
    display: none;
  }
}

.picture__image-2::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46.09%, rgba(0, 0, 0, 0.7) 87.2%);
}

.picture__text-1,
.picture__text-2 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(var(--size-factor) * 29px, 29 / var(--base-width) * var(--inner-width) * 1px);
  font-size: min(var(--size-factor) * 16px, 16 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 130%;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  transform-origin: left top;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.picture.is-active .picture__text-1,
.picture.is-active .picture__text-2 {
  opacity: 0;
}

.picture__text-1 {
  writing-mode: sideways-lr;
  right: 100%;
}

.picture__text-2 {
  writing-mode: sideways-rl;
  left: 100%;
}

.picture__caption {
  position: absolute;
  left: min(var(--size-factor) * 16px, 16 / var(--base-width) * var(--inner-width) * 1px);
  bottom: min(var(--size-factor) * 96px, 96 / var(--base-width) * var(--inner-width) * 1px);
  font-size: min(var(--size-factor) * 25.6px, 25.6 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 120%;
  color: #4eec8e;
  white-space: nowrap;
  transform: rotate(10deg);
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 47.9375em) {
  .picture__caption {
    left: min(var(--size-factor) * 31px, 31 / var(--base-width) * var(--inner-width) * 1px);
    bottom: min(var(--size-factor) * 82px, 82 / var(--base-width) * var(--inner-width) * 1px);
    font-size: min(var(--size-factor) * 24px, 24 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.picture.is-active .picture__caption {
  opacity: 1;
}

.mv {
  position: relative;
  width: min(var(--size-factor) * 1280px, 1280 / var(--base-width) * var(--inner-width) * 1px);
  margin: max(var(--size-factor) * -480px, -480 / var(--base-width) * var(--inner-width) * 1px) auto 0;
  height: min(var(--size-factor) * 800px, 800 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .mv {
    margin: min(var(--size-factor) * 48px, 48 / var(--base-width) * var(--inner-width) * 1px) min(var(--size-factor) * 32px, 32 / var(--base-width) * var(--inner-width) * 1px) min(var(--size-factor) * 80px, 80 / var(--base-width) * var(--inner-width) * 1px);
    width: auto;
    height: auto;
  }
}

.mv__bg-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: min(var(--size-factor) * 120px, 120 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: #ebebeb;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media only screen and (max-width: 47.9375em) {
  .mv__bg-text {
    top: max(var(--size-factor) * -640px, -640 / var(--base-width) * var(--inner-width) * 1px);
    font-size: min(var(--size-factor) * 64px, 64 / var(--base-width) * var(--inner-width) * 1px);
    color: #f2f2f2;
  }
}

.mv__body {
  margin-top: min(var(--size-factor) * 112px, 112 / var(--base-width) * var(--inner-width) * 1px);
  margin-left: min(var(--size-factor) * 90px, 90 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .mv__body {
    margin-top: 0;
    margin-left: 0;
  }
}

.mv__title {
  font-size: min(var(--size-factor) * 32px, 32 / var(--base-width) * var(--inner-width) * 1px);
  margin-bottom: min(var(--size-factor) * 40px, 40 / var(--base-width) * var(--inner-width) * 1px);
}

.mv__name {
  font-size: min(var(--size-factor) * 32px, 32 / var(--base-width) * var(--inner-width) * 1px);
  letter-spacing: 0.06em;
  text-transform: capitalize;
  margin-bottom: min(var(--size-factor) * 8px, 8 / var(--base-width) * var(--inner-width) * 1px);
}

.mv__position {
  font-size: min(var(--size-factor) * 20px, 20 / var(--base-width) * var(--inner-width) * 1px);
  margin-bottom: min(var(--size-factor) * 8px, 8 / var(--base-width) * var(--inner-width) * 1px);
}

.mv__join {
  font-size: min(var(--size-factor) * 20px, 20 / var(--base-width) * var(--inner-width) * 1px);
}

.mv__career {
  position: absolute;
  left: min(var(--size-factor) * 840px, 840 / var(--base-width) * var(--inner-width) * 1px);
  bottom: min(var(--size-factor) * 80px, 80 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .mv__career {
    position: static;
    margin-top: min(var(--size-factor) * 48px, 48 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.mv__career > dt {
  padding-left: min(var(--size-factor) * 12px, 12 / var(--base-width) * var(--inner-width) * 1px);
  font-size: min(var(--size-factor) * 16px, 16 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 130%;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  margin-bottom: min(var(--size-factor) * 8px, 8 / var(--base-width) * var(--inner-width) * 1px);
  position: relative;
}
.mv__career > dt::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: #000;
}
.mv__career > dd {
  padding-left: min(var(--size-factor) * 12px, 12 / var(--base-width) * var(--inner-width) * 1px);
  font-size: min(var(--size-factor) * 14px, 14 / var(--base-width) * var(--inner-width) * 1px);
  line-height: 200%;
}
.mv__career > dd + dt {
  margin-top: min(var(--size-factor) * 32px, 32 / var(--base-width) * var(--inner-width) * 1px);
}

.upper {
  padding-bottom: min(var(--size-factor) * 120px, 120 / var(--base-width) * var(--inner-width) * 1px);
}

.section {
  padding: min(var(--size-factor) * 160px, 160 / var(--base-width) * var(--inner-width) * 1px) 0;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 47.9375em) {
  .section {
    padding: min(var(--size-factor) * 80px, 80 / var(--base-width) * var(--inner-width) * 1px) 0;
  }
}

.section__image {
  --section-image-height: 0;
  --section-image-height-sp: 0;
  height: min(var(--size-factor) * var(--section-image-height) * 1px, var(--section-image-height) / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section__image {
    height: min(var(--size-factor) * var(--section-image-height-sp) * 1px, var(--section-image-height-sp) / var(--base-width) * var(--inner-width) * 1px);
  }
}

.section__body {
  --talk-left-size: 60;
}
@media only screen and (max-width: 47.9375em) {
  .section__body {
    margin: min(var(--size-factor) * 32px, 32 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.section__title {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: min(var(--size-factor) * 16px, 16 / var(--base-width) * var(--inner-width) * 1px);
  margin-bottom: min(var(--size-factor) * 40px, 40 / var(--base-width) * var(--inner-width) * 1px);
}
.section__title small {
  font-size: min(var(--size-factor) * 20px, 20 / var(--base-width) * var(--inner-width) * 1px);
  letter-spacing: 0.06em;
  text-transform: capitalize;
}
.section__title span {
  font-size: min(var(--size-factor) * 32px, 32 / var(--base-width) * var(--inner-width) * 1px);
}

.section--1 {
  background: rgba(242, 242, 242, 0.94);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
@media only screen and (max-width: 47.9375em) {
  .section--1 {
    border-bottom: 1px solid #000000;
  }
}
.section--1::after {
  content: "";
  display: block;
  position: absolute;
  left: min(var(--size-factor) * 24px, 24 / var(--base-width) * var(--inner-width) * 1px);
  right: min(var(--size-factor) * 24px, 24 / var(--base-width) * var(--inner-width) * 1px);
  bottom: 0;
  height: 1px;
  background: #000;
}
@media only screen and (max-width: 47.9375em) {
  .section--1::after {
    display: none;
  }
}
.section--1 .section__image {
  width: min(var(--size-factor) * 628px, 628 / var(--base-width) * var(--inner-width) * 1px);
  margin-left: auto;
}
@media only screen and (max-width: 47.9375em) {
  .section--1 .section__image {
    width: min(var(--size-factor) * 314px, 314 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.section--1 .section__body {
  width: min(var(--size-factor) * 776px, 776 / var(--base-width) * var(--inner-width) * 1px);
  margin: 0 auto;
}
@media only screen and (max-width: 47.9375em) {
  .section--1 .section__body {
    width: auto;
    margin: min(var(--size-factor) * 32px, 32 / var(--base-width) * var(--inner-width) * 1px);
  }
}

.section--2 {
  background: rgba(242, 242, 242, 0.94);
  border-bottom: 1px solid #000000;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.section--2 .inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: min(var(--size-factor) * 80px, 80 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section--2 .inner {
    display: block;
  }
}
.section--2 .section__image {
  flex-shrink: 0;
  width: min(var(--size-factor) * 510px, 510 / var(--base-width) * var(--inner-width) * 1px);
  position: -webkit-sticky;
  position: sticky;
  top: min(var(--size-factor) * 64px, 64 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section--2 .section__image {
    position: relative;
    top: auto;
    width: min(var(--size-factor) * 293px, 293 / var(--base-width) * var(--inner-width) * 1px);
  }
}
.section--2 .section__body {
  flex-grow: 1;
  padding-right: min(var(--size-factor) * 88px, 88 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section--2 .section__body {
    padding-right: 0;
  }
}

.section--3 {
  padding-bottom: 0;
}
.section--3 .picture {
  display: none;
}
@media only screen and (max-width: 47.9375em) {
  .section--3 .picture {
    display: block;
    margin-top: 0;
  }
}
.section--3 .section__body {
  padding-left: min(var(--size-factor) * 528px, 528 / var(--base-width) * var(--inner-width) * 1px);
  padding-right: min(var(--size-factor) * 88px, 88 / var(--base-width) * var(--inner-width) * 1px);
}
@media only screen and (max-width: 47.9375em) {
  .section--3 .section__body {
    padding-left: 0;
    padding-right: 0;
  }
}/*# sourceMappingURL=interview.css.map */