@charset "utf-8";

.push {
  width: 261px;
  height: 66px;
  position: relative;
}

.push::before {
  content: '';
  display: block;
  width: 261px;
  height: 66px;
  border-radius: 5px;
  background-color: white;
  border: 2px solid var(--dark_orange);
  position: absolute;
  top: 8px;
  left: 9px;
  z-index: 1;
}

.push a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: var(--dark_orange);
  position: relative;
  z-index: 10;
}

.push a:hover {
  transform: translate(9px, 8px);
  opacity: 1;
  transition: all 0.3s;
}

.push span {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding-left: 38px;
  font-weight: 500;
  line-height: 66px;
  color: white;
  position: relative;
}

.push span::before {
  content: '';
  display: block;
  width: 15px;
  aspect-ratio: 15/16;
  background: url(/recruit/assets/img/polygon.svg) no-repeat center center/cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* ---------------------mv-------------------- */
/* ==========================
  Swiperのスタイルを調整
========================== */
.mv {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.circlePaginationSlider .swiper-slide {
  height: 800px;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.circlePaginationSlider .swiper-slide-active .swiper-img,
.circlePaginationSlider .swiper-slide-duplicate-active .swiper-img,
.circlePaginationSlider .swiper-slide-prev .swiper-img {
  animation: zoomUp 7s linear 0s normal both;
}
.circlePaginationSlider .swiper-slide img {
  height: auto;
  width: 100%;
}

/* =====================
  円
===================== */

.btns_wrap {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}

/* ==== 円 ==== */
.mv svg {
  /* 円の半径 */
  --radius: 49;
  /* 円周 */
  --circumference: calc(var(--radius) * 2 * pi * 1px);
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 2;
  display: block;
  width: 115px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  rotate: 0 0 1 -90deg;
}

/* ==== 円自体 ==== */
.mv circle {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

/* 回転する円 */
.mv circle:not(.dummy) {
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: var(--circumference);
  will-change: stroke-dashoffset;
}

/* ==== ダミー（半透明の円） ==== */
.mv circle.dummy {
  stroke-opacity: 0.3;
}

/* ==== アニメーション実行時 ==== */
.mv svg.animation circle {
  animation-name: circle;
  /* Swiper delay 2000 + speed 2000 なので 4000ms で設定 */
  animation-duration: 5000ms;
  animation-delay: 0ms;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* 終了アニメーション */
.mv svg.animation-end circle {
  animation-name: circle-end;
  animation-duration: 1000ms;
  /* slideChange setTimeoutの秒数と一致 */
}

/* アニメーション */
@keyframes circle {
  0% {
    stroke-dashoffset: var(--circumference);
  }

  1% {
    stroke-dashoffset: var(--circumference);
  }

  79% {
    stroke-dashoffset: 0;
  }

  80% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: var(--circumference);
  }
}

@keyframes circle-end {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: var(--circumference);
  }
}

.circlePaginationSlider .swiper-pagination {
  width: 115px;
  height: 115px;
  aspect-ratio: 1/1;
  line-height: 115px;
  font-family: 'Changa', sans-serif;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  bottom: 40px;
  right: 60px;
  left: auto;
}

.circlePaginationSlider .swiper-pagination-current {
  margin-right: 9px;
  color: white;
}

.circlePaginationSlider .swiper-pagination-total {
  margin-left: 9px;
}

/* =====================
  < > ボタン
===================== */
.swiper-buttons {
  display: flex;
  width: 115px;
  aspect-ratio: 1/1;
  justify-content: center;
  align-items: center;
  column-gap: 27px;
  position: absolute;
  bottom: 40px;
  right: 60px;
}

.circlePaginationSlider .swiper-button-prev,
.circlePaginationSlider .swiper-button-next {
  width: calc((100% - 25px) / 2);
  inset: unset;
  margin: unset;
  position: relative;
  z-index: 10;
}

.circlePaginationSlider .swiper-button-prev::after,
.circlePaginationSlider .swiper-button-next::after {
  color: transparent;
}

/* -----scrolldown----- */
.scroll_wrap {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.scroll_down {
  width: 29px;
  height: auto;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
}

.scroll_down a {
  display: block;
  width: 100%;
  height: 144px;
  position: absolute;
  left: 0;
  bottom: 0;
  color: white;
  letter-spacing: 0.05em;
  writing-mode: vertical-lr;
}

.scroll_down:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: -1px;
  z-index: 10;
  width: 2px;
  height: 27px;
  background: white;
  animation: circlemove 3s ease-in-out infinite, cirlemovehide 3s ease-out infinite;
}

@keyframes circlemove {
  0% {
    bottom: 70px;
  }
  100% {
    bottom: 0px;
  }
}

@keyframes cirlemovehide {
  0% {
    scale: 1;
  }
  99% {
    scale: 0.8;
  }
  100% {
    scale: 0.5;
  }
}

.mv .lead_wrap {
  height: 800px;
  margin-top: -800px;
  position: relative;
}

.mv .lead {
  width: 100%;
  padding: 80px 0 0 30px;
  position: absolute;
  top: 185px;
  z-index: 100;
}

.mv .lead::before {
  content: '';
  display: block;
  width: 522px;
  aspect-ratio: 522/451;
  background: url(/recruit/assets/img/index/mv_deco.svg) no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.mv .lead .en {
  display: block;
  margin-bottom: 30px;
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: white;
  text-shadow: 2px 2px 8px rgba(47, 47, 47, 0.3);
}

.mv .lead .ja {
  display: block;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.8;
  color: white;
  text-shadow: 2px 2px 8px rgba(9, 9, 9, 0.3);
  text-indent: 20px;
}

.mv .btns_flex {
  display: flex;
  column-gap: 24px;
  position: absolute;
  top: 532px;
  left: 20px;
  z-index: 100;
}

.mv .btn {
  width: 230px;
  height: 60px;
  position: relative;
}

.mv .btn::before {
  content: '';
  display: block;
  width: 230px;
  height: 60px;
  border: 2px solid white;
  background-color: var(--dark_green);
  border-radius: 5px;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: -10;
}

.mv .btn a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: white;
  position: relative;
}

.mv .btn a:hover {
  transform: translate(8px, 8px);
  opacity: 1;
}

.mv .btn span {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding-left: 31px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 60px;
  color: var(--point);
  position: relative;
}

.mv .btn span::before {
  content: '';
  display: block;
  width: 14px;
  aspect-ratio: 14/16;
  background: url(/recruit/assets/img/polygon_g.svg) no-repeat center center/cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.line_wrap {
  width: 100%;
  background-color: var(--buck);
}

.line {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.line img {
  width: 100%;
  aspect-ratio: 1300/110;
  object-fit: cover;
}

/* ---------------------about-------------------- */
.about {
  padding: 104px 0;
  background-color: var(--buck);
  position: relative;
}

.about::before {
  content: '';
  display: block;
  width: 269px;
  aspect-ratio: 269/226;
  background: url(/recruit/assets/img/index/about_bg.png) no-repeat center center/cover;
  position: absolute;
  right: 60px;
  bottom: 53px;
}

.about::after {
  content: '';
  display: block;
  width: 232px;
  aspect-ratio: 269/226;
  background: url(/recruit/assets/img/index/about_bg.png) no-repeat center center/cover;
  position: absolute;
  left: 30px;
  top: 23px;
}

.about .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 80px;
}

.about .photo {
  width: 480px;
  aspect-ratio: 480/388;
}

.about .texts {
  width: 507px;
}

.about h2 {
  margin-bottom: 40px;
}

.about h2 .en {
  display: block;
  color: var(--orange);
}

.about h2 .en::before {
  background: url(/recruit/assets/img/orange_rec.svg) no-repeat center center/cover;
}

.about h2 .ja {
  display: block;
  color: var(--dark_orange);
}

.about h2 .ja::before {
  background-color: var(--orange);
}

.about .lead {
  display: block;
  margin-bottom: 27px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
}

.about .text {
  display: block;
  margin-bottom: 38px;
  line-height: 1.8;
}

/* ---------------------workstyle-------------------- */

.workstyle {
  padding-bottom: 110px;
  background-color: var(--buck);
}

.workstyle h2 .en {
  display: block;
  color: var(--blue);
}

.workstyle h2 .en::before {
  background: url(/recruit/assets/img/blue_rec.svg) no-repeat center center/cover;
}

.workstyle h2 .ja {
  display: block;
  color: var(--dark_blue);
}

.workstyle h2 .ja::before {
  background-color: var(--blue);
}

.workstyle .photo {
  width: 100%;
  max-width: 1300px;
  margin: -88px auto 0;
  padding-left: 427px;
}

.workstyle .photo img {
  width: 873px;
  aspect-ratio: 873/493;
  object-fit: cover;
}

.workstyle li {
  border-radius: 20px;
  background-color: white;
}

.workstyle .benefits {
  width: 929px;
  margin: -176px 0 74px;
  padding: 60px 54px 54px 45px;
  position: relative;
  z-index: 10;
}

.workstyle .flex {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.workstyle .texts {
  width: 505px;
}

.workstyle h3 {
  margin-bottom: 32px;
}

.workstyle h3 .en {
  display: block;
  height: 30px;
  margin-bottom: 16px;
  line-height: 30px;
  color: var(--blue);
}

.workstyle h3 .num {
  margin-right: 11px;
}

.workstyle h3 .big {
  font-size: 48px;
  text-transform: uppercase;
}

.workstyle h3 .ja {
  display: block;
  line-height: 1.8;
}

.workstyle .text {
  line-height: 1.8;
}

.workstyle .benefits .push {
  margin-bottom: 10px;
}

.workstyle .benefits .push::before {
  border-color: var(--blue);
}

.workstyle .benefits .push a {
  background-color: var(--dark_blue);
}

.workstyle .number {
  width: 100%;
  padding: 66px 45px 54px;
}

.workstyle .number .texts {
  display: flex;
  width: 100%;
  margin-bottom: 60px;
  column-gap: 40px;
  align-items: center;
}

.workstyle .number h3 {
  width: fit-content;
  margin-bottom: 0;
}

.workstyle .number h3 .en {
  color: var(--main);
}

.workstyle .number .text {
  width: 479px;
}

.number dl {
  display: flex;
  margin-bottom: 40px;
  justify-content: space-between;
}

.number .li {
  width: 330px;
  height: 380px;
  padding: 35px 36px 48px;
  border-radius: 20px;
}

.number .li:nth-child(1) {
  background-color: var(--orange);
}

.number .li:nth-child(2) {
  background-color: var(--blue);
}

.number .li:nth-child(3) {
  background-color: var(--pink);
}

.number dt {
  display: block;
  padding-bottom: 166px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  position: relative;
}

.number .li:nth-child(1) dt {
  color: var(--dark_orange);
}

.number .li:nth-child(2) dt {
  color: var(--dark_blue);
}

.number .li:nth-child(3) dt {
  color: var(--dark_pink);
}

.number dt::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.number .li:nth-child(1) dt::before {
  width: 144px;
  aspect-ratio: 144/106;
  background: url(/recruit/assets/img/workstyle/off.png) no-repeat center center/cover;
  top: 67px;
}

.number .li:nth-child(2) dt::before {
  width: 117px;
  aspect-ratio: 117/119;
  background: url(/recruit/assets/img/workstyle/hours.png) no-repeat center center/cover;
  top: 63px;
}

.number .li:nth-child(3) dt::before {
  width: 104px;
  aspect-ratio: 104/100;
  background: url(/recruit/assets/img/workstyle/years.png) no-repeat center center/cover;
  top: 63px;
}

.number .li .num {
  height: 80px;
  line-height: 80px;
  color: white;
  font-weight: 800;
  text-align: center;
  text-wrap: nowrap;
}

.number .num .big {
  font-size: 128px;
}

.number .num .medium {
  font-size: 96px;
}

.number .num .mini {
  font-size: 75px;
}

.number .num .unit {
  font-size: 48px;
}

.workstyle .push {
  margin: 0 auto;
}

.workstyle .push::before {
  border-color: var(--dark_green);
}

.workstyle .push a {
  background-color: var(--dark_green);
}

/* ---------------------other-------------------- */
.other {
  padding: 104px 0;
}

.other h2 {
  margin-bottom: 40px;
  position: relative;
}

.other h2::before {
  content: '';
  display: block;
  width: 414px;
  aspect-ratio: 414/324;
  background: url(/recruit/assets/img/interview/other_deco.svg) no-repeat center center/cover;
  position: absolute;
  top: 0;
  right: -60px;
}

.other h2 .en {
  color: var(--pink);
}

.other h2 .en::before {
  background: url(/recruit/assets/img/pink_rec.svg) no-repeat center center/cover;
}

.other h2 .ja {
  color: var(--dark_pink);
}

.other h2 .ja::before {
  background-color: var(--pink);
}

.other a:hover {
  opacity: 1;
}

.other .lead {
  margin-bottom: 36px;
  line-height: 1.8;
}

.swiper_pc {
  width: 100%;
  max-width: 1393px;
  height: 671px;
  margin: 0 auto;
  position: relative;
}

.swiper_pc .swiper-slide {
  width: 316px;
  aspect-ratio: 341/450;
  margin-right: 36px;
  transition: 0.7s;
}

.swiper_pc .swiper-slide .big_photo {
  display: none;
}

.swiper_pc .swiper-slide .text {
  display: none;
}

.swiper_pc .swiper-slide img {
  width: 100%;
  aspect-ratio: 341/450;
  object-fit: contain;
  object-position: left bottom;
}

.swiper_pc .swiper-slide-next {
  width: 339px;
}

.swiper_pc .swiper-slide-next .text {
  display: flex;
  width: 800px;
  height: 76px;
  margin: 59px 0 0 -41px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: var(--dark_green);
  justify-content: center;
  align-items: center;
  position: relative;
}

.swiper_pc .swiper-slide-next .text::before {
  content: '';
  display: block;
  width: 800px;
  aspect-ratio: 800/95;
  background: url(/recruit/assets/img/interview/other_comment.svg) no-repeat center center/cover;
  position: absolute;
  top: calc(50% - 9.5px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
}

.swiper_pc .swiper-slide-next .big_photo {
  display: block;
}

.swiper_pc .swiper-slide-next .small_photo {
  display: none;
}

.swiper_pc .swiper-button-prev,
.swiper_pc .swiper-button-next {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 9px;
  left: 0;
  top: auto;
}

.swiper_pc .swiper-button-prev {
  left: 482px;
}

.swiper_pc .swiper-button-prev::after {
  content: '';
  display: block;
  width: 50px;
  aspect-ratio: 1/1;
  background: url(/recruit/assets/img/interview/pre.svg) no-repeat center center/cover;
}

.swiper_pc .swiper-button-next {
  left: 554px;
}

.swiper_pc .swiper-button-next::after {
  content: '';
  display: block;
  width: 50px;
  aspect-ratio: 1/1;
  background: url(/recruit/assets/img/interview/nex.svg) no-repeat center center/cover;
}

@media screen and (max-width: 1393px) {
  .swiper_pc .swiper-slide {
    margin-left: -50px;
    margin-right: 86px;
  }

  .swiper_pc .swiper-button-prev {
    left: 432px;
  }

  .swiper_pc .swiper-button-next {
    left: 504px;
  }
}

.other .btn {
  width: 261px;
  height: 66px;
  margin: -68px 0 0 537px;
  position: relative;
  z-index: 100;
}

.other .btn::before {
  content: '';
  display: block;
  width: 261px;
  height: 66px;
  border-radius: 5px;
  border: 2px solid var(--dark_pink);
  position: absolute;
  top: 9px;
  left: 8px;
  z-index: -10;
}

.other .btn a {
  display: block;
  width: 261px;
  height: 66px;
  border-radius: 5px;
  background-color: var(--dark_pink);
  position: relative;
  z-index: 10;
}

.other .btn a:hover {
  transform: translate(9px, 8px);
  transition: all 0.3s;
}

.other .btn span {
  display: block;
  width: fit-content;
  height: 100%;
  margin: 0 auto;
  padding-left: 32px;
  font-weight: 500;
  color: white;
  line-height: 66px;
  position: relative;
}

.other .btn span::before {
  content: '';
  display: block;
  width: 15px;
  aspect-ratio: 15/16;
  background: url(/recruit/assets/img/polygon.svg) no-repeat center center/cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 750px) {
  .push {
    width: calc((100 / 750) * 370 * 1vw);
    height: calc((100 / 750) * 112 * 1vw);
  }

  .push::before {
    width: calc((100 / 750) * 370 * 1vw);
    height: calc((100 / 750) * 112 * 1vw);
    border-radius: calc((100 / 750) * 10 * 1vw);
    border: calc((100 / 750) * 4 * 1vw) solid var(--dark_orange);
    top: calc((100 / 750) * 11 * 1vw);
    left: calc((100 / 750) * 11 * 1vw);
  }

  .push a {
    border-radius: calc((100 / 750) * 10 * 1vw);
  }

  .push a:hover {
    transform: translate(calc((100 / 750) * 11 * 1vw), calc((100 / 750) * 11 * 1vw));
  }

  .push span {
    padding-left: calc((100 / 750) * 42 * 1vw);
    line-height: calc((100 / 750) * 112 * 1vw);
  }

  .push span::before {
    width: calc((100 / 750) * 19 * 1vw);
  }

  /* ---------------------mv-------------------- */
  /* ==========================
    Swiperのスタイルを調整
    ========================== */

  .circlePaginationSlider .swiper-slide {
    height: calc((100 / 750) * 1280 * 1vw);
  }

  /* =====================
    円
    ===================== */

  .btns_wrap {
    max-width: calc((100 / 750) * 670 * 1vw);
  }

  /* ==== 円 ==== */
  .mv svg {
    bottom: calc((100 / 750) * 396 * 1vw);
    right: 0;
    width: calc((100 / 750) * 164 * 1vw);
  }

  /* ==== 円自体 ==== */
  .mv circle {
    stroke-width: calc((100 / 750) * 2 * 1vw);
  }

  .circlePaginationSlider .swiper-pagination {
    width: calc((100 / 750) * 164 * 1vw);
    height: calc((100 / 750) * 164 * 1vw);
    line-height: calc((100 / 750) * 164 * 1vw);
    bottom: calc((100 / 750) * 396 * 1vw);
    right: 0;
  }

  .circlePaginationSlider .swiper-pagination-current {
    margin-right: calc((100 / 750) * 9 * 1vw);
  }

  .circlePaginationSlider .swiper-pagination-total {
    margin-left: calc((100 / 750) * 9 * 1vw);
  }

  /* =====================
    < > ボタン
    ===================== */
  .swiper-buttons {
    width: calc((100 / 750) * 164 * 1vw);
    column-gap: calc((100 / 750) * 30 * 1vw);
    bottom: calc((100 / 750) * 396 * 1vw);
    right: 0;
  }

  .circlePaginationSlider .swiper-button-prev,
  .circlePaginationSlider .swiper-button-next {
    width: calc((100% - ((100 / 750) * 30 * 1vw)) / 2);
  }

  /* -----scrolldown----- */
  .scroll_wrap {
    max-width: calc((100 / 750) * 750 * 1vw);
  }

  .scroll_down {
    width: calc((100 / 750) * 47 * 1vw);
    bottom: calc((100 / 750) * 20 * 1vw);
    left: calc((100 / 750) * 40 * 1vw);
  }

  .scroll_down a {
    height: calc((100 / 750) * 234 * 1vw);
  }

  .scroll_down:before {
    left: calc((100 / 750) * -2.5 * 1vw);
    width: calc((100 / 750) * 4 * 1vw);
    height: calc((100 / 750) * 45 * 1vw);
  }

  @keyframes circlemove {
    0% {
      bottom: calc((100 / 750) * 112 * 1vw);
    }
  }

  .mv .lead_wrap {
    height: calc((100 / 750) * 1280 * 1vw);
    margin-top: calc((100 / 750) * -1280 * 1vw);
  }

  .mv .lead {
    padding: calc((100 / 750) * 100 * 1vw) 0 0 0;
    top: calc((100 / 750) * 254 * 1vw);
  }

  .mv .lead::before {
    width: calc((100 / 750) * 464 * 1vw);
    aspect-ratio: 464/498;
    background: url(/recruit/assets/img/index/mv_deco_sp.svg) no-repeat center center/cover;
    left: calc((100 / 750) * -40 * 1vw);
  }

  .mv .lead .en {
    margin-bottom: calc((100 / 750) * 40 * 1vw);
    font-size: calc((100 / 750) * 54 * 1vw);
    line-height: 1.3;
    text-shadow: 0 calc((100 / 750) * 4 * 1vw) calc((100 / 750) * 8 * 1vw) rgba(0, 0, 0, 0.3);
  }

  .mv .lead .ja {
    font-size: calc((100 / 750) * 30 * 1vw);
    text-shadow: 0 calc((100 / 750) * 4 * 1vw) calc((100 / 750) * 8 * 1vw) rgba(0, 0, 0, 0.3);
    text-indent: 0;
  }

  .mv .btns_flex {
    display: block;
    top: auto;
    bottom: calc((100 / 750) * 93 * 1vw);
    left: auto;
    right: calc((100 / 750) * 12 * 1vw);
  }

  .mv .btn {
    width: calc((100 / 750) * 358 * 1vw);
    height: calc((100 / 750) * 99 * 1vw);
    margin-bottom: calc((100 / 750) * 45 * 1vw);
  }

  .mv .btn:last-child {
    margin-bottom: 0;
  }

  .mv .btn::before {
    width: calc((100 / 750) * 358 * 1vw);
    height: calc((100 / 750) * 99 * 1vw);
    border: calc((100 / 750) * 4 * 1vw) solid white;
    border-radius: calc((100 / 750) * 10 * 1vw);
    top: calc((100 / 750) * 13 * 1vw);
    left: calc((100 / 750) * 13 * 1vw);
  }

  .mv .btn a {
    border-radius: calc((100 / 750) * 10 * 1vw);
  }

  .mv .btn a:hover {
    transform: translate(calc((100 / 750) * 13 * 1vw), calc((100 / 750) * 13 * 1vw));
  }

  .mv .btn span {
    padding-left: calc((100 / 750) * 43 * 1vw);
    line-height: calc((100 / 750) * 99 * 1vw);
  }

  .mv .btn span::before {
    width: calc((100 / 750) * 19 * 1vw);
    aspect-ratio: 14/16;
  }

  .line {
    max-width: calc((100 / 750) * 750 * 1vw);
  }

  .line img {
    aspect-ratio: 750/155;
  }

  /* ---------------------about-------------------- */
  .about {
    padding: calc((100 / 750) * 128 * 1vw) 0 calc((100 / 750) * 40 * 1vw);
    background: var(--buck);
  }

  .about::before {
    display: none;
  }

  .about::after {
    display: none;
  }

  .about .flex {
    display: block;
  }

  .about .photo {
    width: 100%;
    aspect-ratio: 670/579;
    margin-bottom: calc((100 / 750) * 80 * 1vw);
  }

  .about .texts {
    width: 100%;
  }

  .about h2 {
    margin-bottom: calc((100 / 750) * 46 * 1vw);
  }

  .about .lead {
    margin-bottom: calc((100 / 750) * 22 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
  }

  .about .text {
    display: block;
    margin-bottom: calc((100 / 750) * 68 * 1vw);
  }

  .about .push {
    margin: 0 0 0 auto;
  }

  /* ---------------------workstyle-------------------- */

  .workstyle {
    padding: calc((100 / 750) * 96 * 1vw) 0 calc((100 / 750) * 88 * 1vw);
  }

  .workstyle h2 {
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .workstyle .photo {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
  }

  .workstyle .photo img {
    width: 100%;
    aspect-ratio: 750/620;
  }

  .workstyle li {
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .workstyle .benefits {
    width: 100%;
    margin: calc((100 / 750) * -167 * 1vw) 0 calc((100 / 750) * 72 * 1vw);
    padding: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 40 * 1vw);
  }

  .workstyle .flex {
    display: block;
  }

  .workstyle .texts {
    width: 100%;
  }

  .workstyle h3 {
    margin-bottom: calc((100 / 750) * 56 * 1vw);
  }

  .workstyle h3 .en {
    height: calc((100 / 750) * 40 * 1vw);
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    line-height: calc((100 / 750) * 40 * 1vw);
  }

  .workstyle h3 .num {
    margin-right: calc((100 / 750) * 15 * 1vw);
    font-size: calc((100 / 750) * 30 * 1vw);
  }

  .workstyle h3 .big {
    font-size: calc((100 / 750) * 64 * 1vw);
  }

  .workstyle .text {
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .workstyle .benefits .push {
    margin-bottom: 0;
    margin: 0 auto;
  }

  .workstyle .number {
    padding: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 40 * 1vw);
  }

  .workstyle .number .texts {
    display: block;
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .workstyle .number h3 {
    width: 100%;
    margin-bottom: calc((100 / 750) * 56 * 1vw);
  }

  .workstyle .number .text {
    width: 100%;
    line-height: 1.8;
  }

  .number dl {
    display: block;
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .number .li {
    width: 100%;
    height: calc((100 / 750) * 347 * 1vw);
    margin-bottom: calc((100 / 750) * 32 * 1vw);
    padding: calc((100 / 750) * 59 * 1vw) 0;
    border-radius: calc((100 / 750) * 40 * 1vw);
  }

  .number .li:last-child {
    margin-bottom: 0;
  }

  .number dt {
    height: calc((100 / 750) * 23 * 1vw);
    margin-bottom: calc((100 / 750) * 40 * 1vw);
    padding-bottom: 0;
    font-size: calc((100 / 750) * 32 * 1vw);
    line-height: calc((100 / 750) * 23 * 1vw);
    text-align: center;
  }

  .number dt::before {
    display: none;
  }

  .number .li .num {
    width: fit-content;
    height: calc((100 / 750) * 166 * 1vw);
    margin: 0 auto;
    line-height: calc((100 / 750) * 166 * 1vw);
    text-align: start;
    position: relative;
  }

  .number .li .num::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .number .li:nth-child(1) .num {
    padding-left: calc((100 / 750) * 236 * 1vw);
  }

  .number .li:nth-child(1) .num::before {
    width: calc((100 / 750) * 210 * 1vw);
    aspect-ratio: 210/155;
    background: url(/recruit/assets/img/workstyle/off_sp.png) no-repeat center center/cover;
    left: 0;
  }

  .number .li:nth-child(2) .num {
    padding-right: calc((100 / 750) * 189 * 1vw);
  }

  .number .li:nth-child(2) .num::before {
    width: calc((100 / 750) * 160 * 1vw);
    aspect-ratio: 160/163;
    background: url(/recruit/assets/img/workstyle/hours_sp.png) no-repeat center center/cover;
    right: 0;
  }

  .number .li:nth-child(3) .num {
    padding-left: calc((100 / 750) * 164 * 1vw);
  }

  .number .li:nth-child(3) .num::before {
    width: calc((100 / 750) * 138 * 1vw);
    aspect-ratio: 138/133;
    background: url(/recruit/assets/img/workstyle/years_sp.png) no-repeat center center/cover;
    left: 0;
  }

  .number .num .big {
    font-size: calc((100 / 750) * 132 * 1vw);
  }

  .number .num .medium {
    font-size: calc((100 / 750) * 120 * 1vw);
  }

  .number .num .mini {
    font-size: calc((100 / 750) * 104 * 1vw);
  }

  .number .num .unit {
    font-size: calc((100 / 750) * 48 * 1vw);
  }

  /* ---------------------other-------------------- */
  .other {
    padding: calc((100 / 750) * 128 * 1vw) 0;
  }

  .other h2 {
    margin-bottom: calc((100 / 750) * 64 * 1vw);
  }

  .other h2::before {
    width: calc((100 / 750) * 181 * 1vw);
    aspect-ratio: 181/149;
    background: url(/recruit/assets/img/interview/deco_1.svg) no-repeat center center/cover;
    top: calc((100 / 750) * -15 * 1vw);
    right: calc((100 / 750) * 45 * 1vw);
  }

  .other .lead {
    margin-bottom: calc((100 / 750) * 69 * 1vw);
  }

  .swiper_sp {
    width: 100%;
    height: calc((100 / 750) * 978 * 1vw);
    padding-top: calc((100 / 750) * 110 * 1vw);
  }

  .swiper_sp .swiper-slide {
    width: calc((100 / 750) * 396 * 1vw);
  }

  .swiper_sp .swiper-slide .small_photo img {
    width: 100%;
    height: calc((100 / 750) * 385 * 1vw);
    object-fit: contain;
    object-position: center bottom;
  }

  .swiper_sp .swiper-slide .big_photo {
    display: none;
  }

  .swiper_sp .swiper-slide .text {
    display: none;
  }

  .swiper_sp .swiper-slide-active {
    margin-top: calc((100 / 750) * -120 * 1vw);
  }

  .swiper_sp .swiper-slide.swiper-slide-active .big_photo {
    display: block;
  }

  .swiper_sp .swiper-slide.swiper-slide-active .big_photo img {
    width: 100%;
    height: calc((100 / 750) * 540 * 1vw);
    object-fit: contain;
    object-position: center bottom;
  }

  .swiper_sp .swiper-slide-active .small_photo {
    display: none;
  }

  .swiper_sp .swiper-slide-active .text {
    display: flex;
    width: calc((100 / 750) * 670 * 1vw);
    height: calc((100 / 750) * 180 * 1vw);
    margin: calc((100 / 750) * 70 * 1vw) 0 0 calc((100 / 750) * -139 * 1vw);
    font-size: calc((100 / 750) * 26 * 1vw);
    color: var(--dark_green);
    letter-spacing: 0.05em;
    line-height: 1.8;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .swiper_sp .swiper-slide-active .text::before {
    content: '';
    display: block;
    width: calc((100 / 750) * 670 * 1vw);
    aspect-ratio: 670/209;
    background: url(/recruit/assets/img/interview/other_comment_sp.svg) no-repeat center center/cover;
    position: absolute;
    top: calc(50% - ((100 / 750) * 14.5 * 1vw));
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -10;
  }

  .swiper_sp .swiper-button-prev,
  .swiper_sp .swiper-button-next {
    width: calc((100 / 750) * 100 * 1vw);
    height: calc((100 / 750) * 100 * 1vw);
    position: absolute;
    bottom: calc((100 / 750) * 7 * 1vw);
    left: 0;
    top: auto;
  }

  .swiper_sp .swiper-button-prev {
    left: calc((100 / 750) * 40 * 1vw);
  }

  .swiper_sp .swiper-button-prev::after {
    content: '';
    display: block;
    width: calc((100 / 750) * 100 * 1vw);
    aspect-ratio: 1/1;
    background: url(/recruit/assets/img/interview/pre.svg) no-repeat center center/cover;
  }

  .swiper_sp .swiper-button-next {
    left: calc((100 / 750) * 170 * 1vw);
  }

  .swiper_sp .swiper-button-next::after {
    content: '';
    display: block;
    width: calc((100 / 750) * 100 * 1vw);
    aspect-ratio: 1/1;
    background: url(/recruit/assets/img/interview/nex.svg) no-repeat center center/cover;
  }

  .other .btn {
    width: calc((100 / 750) * 370 * 1vw);
    height: calc((100 / 750) * 112 * 1vw);
    margin: calc((100 / 750) * -112 * 1vw) 0 0 calc((100 / 750) * 302 * 1vw);
  }

  .other .btn::before {
    width: calc((100 / 750) * 370 * 1vw);
    height: calc((100 / 750) * 112 * 1vw);
    border-radius: calc((100 / 750) * 10 * 1vw);
    border: calc((100 / 750) * 4 * 1vw) solid var(--dark_pink);
    top: calc((100 / 750) * 11 * 1vw);
    left: calc((100 / 750) * 11 * 1vw);
  }

  .other .btn a {
    width: calc((100 / 750) * 370 * 1vw);
    height: calc((100 / 750) * 112 * 1vw);
    border-radius: calc((100 / 750) * 10 * 1vw);
  }

  .other .btn a:hover {
    transform: translate(calc((100 / 750) * 11 * 1vw), calc((100 / 750) * 11 * 1vw));
  }

  .other .btn span {
    padding-left: calc((100 / 750) * 37 * 1vw);
    line-height: calc((100 / 750) * 112 * 1vw);
  }

  .other .btn span::before {
    width: calc((100 / 750) * 20 * 1vw);
  }
}