@charset "UTF-8";
/* Break point
---------------------------------------------------------- */
/* ==========================================================================//
//
//　変数
//
// ========================================================================== */
/* Placeholder
---------------------------------------------------------- */
.p-top__interview__arrows .arrow, .p-top__recruit__link .arrow {
  padding: 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  justify-self: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-top__interview__arrows .arrow svg, .p-top__recruit__link .arrow svg {
  width: 0.8em;
  height: 0.8rem;
}

/* ==========================================================================//
//
//　MV
//
// ========================================================================== */
.p-top__mv {
  position: relative;
  /*------ animation -------*/
}
.p-top__mv::before {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(20deg, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media screen and (min-width: 960px) {
  .p-top__mv::before {
    content: "";
  }
}
.p-top__mv__image--pc {
  display: none;
}
@media screen and (min-width: 960px) {
  .p-top__mv__image--pc {
    display: block;
  }
}
.p-top__mv__image--sp01 {
  width: 75%;
  margin-left: auto;
  margin-right: 0;
  border-radius: 0 0 0 var(--radiusM);
}
@media screen and (min-width: 960px) {
  .p-top__mv__image--sp01 {
    display: none;
  }
}
.p-top__mv__image--sp02 {
  width: 75%;
  border-radius: 0 var(--radiusM) 0 0;
}
@media screen and (min-width: 960px) {
  .p-top__mv__image--sp02 {
    display: none;
  }
}
.p-top__mv__catch {
  padding: 10% 5% 12%;
  text-align: right;
  color: var(--color-main);
}
@media screen and (min-width: 960px) {
  .p-top__mv__catch {
    padding: 0;
    position: absolute;
    top: 15%;
    right: 7%;
  }
}
.p-top__mv__catch .catch--sub {
  font-family: var(--font-kulim);
  font-weight: 300;
  font-size: clamp(1rem, 0.625rem + 1.88vw, 1.75rem);
}
@media screen and (min-width: 960px) {
  .p-top__mv__catch .catch--sub {
    font-size: 1.8vw;
  }
}
.p-top__mv__catch .catch--main {
  font-family: var(--font-zen);
  font-weight: bold;
  font-size: clamp(1.563rem, 0.25rem + 5.83vw, 3.75rem);
  word-break: keep-all;
  line-height: 1.6;
}
@media screen and (min-width: 960px) {
  .p-top__mv__catch .catch--main {
    font-size: 4vw;
  }
}
.p-top__mv__drone--01 {
  --droneTransition: 3s;
  position: absolute;
  width: 22%;
  top: 11%;
  left: 8%;
}
@media screen and (min-width: 960px) {
  .p-top__mv__drone--01 {
    width: 10%;
    top: 43%;
    left: 3%;
  }
}
.p-top__mv__drone--02 {
  --droneTransition: 4.5s;
  position: absolute;
  width: 23%;
  top: 5%;
  left: 36%;
}
@media screen and (min-width: 960px) {
  .p-top__mv__drone--02 {
    width: 11%;
    top: 34%;
    left: 40%;
  }
}
.p-top__mv__drone--03 {
  --droneTransition: 4s;
  position: absolute;
  width: 15%;
  top: 70%;
  right: 1%;
}
@media screen and (min-width: 960px) {
  .p-top__mv__drone--03 {
    width: 6%;
    top: 32%;
    left: 57%;
  }
}
.p-top__mv__drone--04 {
  --droneTransition: 2.5s;
  position: absolute;
  width: 17%;
  top: 31.5%;
  left: 2%;
}
@media screen and (min-width: 960px) {
  .p-top__mv__drone--04 {
    width: 6%;
    left: 66%;
    top: 9%;
  }
}
.p-top__mv__drone--05 {
  --droneTransition: 6s;
  position: absolute;
  width: 45%;
  top: 51%;
  right: 4%;
}
@media screen and (min-width: 960px) {
  .p-top__mv__drone--05 {
    width: 17%;
    top: 7%;
    left: 29%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .p-top__mv::before {
    opacity: 0;
  }
  .p-top__mv.is-end::before {
    opacity: 1;
  }
  .p-top__mv.is-end .p-top__mv__drone--01, .p-top__mv.is-end .p-top__mv__drone--02, .p-top__mv.is-end .p-top__mv__drone--03, .p-top__mv.is-end .p-top__mv__drone--04, .p-top__mv.is-end .p-top__mv__drone--05 {
    -webkit-animation: droneBase var(--droneTransition) ease-in-out infinite;
            animation: droneBase var(--droneTransition) ease-in-out infinite;
  }
}

/* ==========================================================================//
//
//　News
//
// ========================================================================== */
.p-top__news {
  padding: 1.5rem 0 2rem;
  background-color: var(--color-main);
  border-top: 10px solid var(--color-sub3);
  color: #fff;
}
@media screen and (min-width: 960px) {
  .p-top__news {
    padding: 3rem 0 4rem;
  }
}
.p-top__news__inner {
  display: grid;
  gap: 1.2rem;
}
@media screen and (min-width: 960px) {
  .p-top__news__inner {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: var(--contentW);
    grid-template-columns: auto 65%;
  }
}
.p-top__news__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.5rem 1rem;
  line-height: 1;
}
@media screen and (min-width: 960px) {
  .p-top__news__title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.p-top__news__title .link_more {
  font-size: var(--font14);
}
@media screen and (min-width: 960px) {
  .p-top__news__title .link_more {
    margin-left: 52px;
    font-size: 1rem;
  }
}
.p-top__news__title .link_more::after {
  background-color: #fff;
}
@media (hover: hover) {
  .p-top__news__title .link_more:hover::after {
    background-color: var(--color-sub3);
  }
  .p-top__news__title .link_more:focus-visible::after {
    background-color: var(--color-sub3);
  }
}
.p-top__news__list {
  width: 88%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--contentW);
}
.p-top__news__item {
  font-size: var(--font14);
}
@media screen and (min-width: 960px) {
  .p-top__news__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3em;
  }
}
.p-top__news__item .date {
  display: block;
}
.p-top__news__item + .p-top__news__item {
  margin-top: 1rem;
}
.p-top__news__item a {
  -webkit-transition: color 0.1s;
  transition: color 0.1s;
}
@media (hover: hover) {
  .p-top__news__item a:hover {
    color: var(--color-sub3);
  }
  .p-top__news__item a:focus-visible {
    color: var(--color-sub3);
  }
}

/* ==========================================================================//
//
//　Movie
//
// ========================================================================== */
.p-top__movie {
  padding: 2rem 0 4rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  .p-top__movie {
    padding: 7rem 0 8rem;
  }
}
.p-top__movie__block {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 var(--radiusM) 0 0;
}
.p-top__movie__button {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 42, 116, 0.4);
  aspect-ratio: 1/0.561;
  height: auto;
  /* ----- Playing ----- */
}
.p-top__movie__button .button_play {
  border: 1px solid var(--color-sub);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20%;
  max-width: 8rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
}
.p-top__movie__button .button_play svg {
  width: 30%;
  margin-left: 8%;
}
.p-top__movie__button.is-playing {
  opacity: 0;
  visibility: hidden;
}
.p-top__movie__line {
  position: absolute;
  right: 0;
  bottom: -20%;
  z-index: -1;
  display: none;
  width: 90%;
  max-width: 64rem;
}
@media screen and (min-width: 960px) {
  .p-top__movie__line {
    display: block;
  }
}

/* ==========================================================================//
//
//　Message
//
// ========================================================================== */
.p-top__message {
  padding-bottom: 4rem;
}
@media screen and (min-width: 960px) {
  .p-top__message {
    padding-bottom: 6rem;
  }
}
.p-top__message__block, .p-top__welfare__block {
  padding: 2.8em 1em 2em 1em;
  background-color: var(--color-sub);
  color: var(--color-main);
  font-size: clamp(1.25rem, 1.077rem + 0.77vw, 2rem);
  font-weight: bold;
  text-align: center;
}
.p-top__message__block_logo {
  margin: 1.5rem 0;
  background: no-repeat center/cover url(/recruit/assets/images/img_message_back.webp);
  border-radius: 0 var(--radiusM) 0 var(--radiusM);
}
@media screen and (min-width: 960px) {
  .p-top__message__block_logo {
    margin: 3rem 0;
  }
}
.p-top__message__block_logo img {
  padding: 10%;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
}
@media screen and (min-width: 960px) {
  .p-top__message__block_logo img {
    width: 65%;
  }
}
.p-top__message__text {
  font-size: var(--font14);
}
@media screen and (min-width: 768px) {
  .p-top__message__text {
    font-size: var(--font20);
  }
}

/* ==========================================================================//
//
//　Usage
//
// ========================================================================== */
.p-top__usage__inner {
  background-color: var(--color-sub);
  padding-bottom: 2rem;
  position: relative;
}
@media screen and (min-width: 960px) {
  .p-top__usage__inner {
    padding-bottom: 8rem;
  }
}
@media screen and (min-width: 768px) {
  .p-top__usage__lead {
    padding-bottom: 7rem;
  }
}
@media screen and (min-width: 960px) {
  .p-top__usage__lead {
    padding: 5rem 0;
    display: grid;
    grid-template-columns: auto auto;
    gap: 3rem;
  }
}
.p-top__usage__lead .title {
  padding: 2em 0 1.5em;
  color: var(--color-main);
  font-size: clamp(1.25rem, 1.135rem + 0.51vw, 1.75rem);
  font-weight: 500;
  text-align: center;
}
@media screen and (min-width: 960px) {
  .p-top__usage__lead .title {
    padding: 0;
  }
}
.p-top__usage__block {
  margin-bottom: 3rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-top__usage__block {
    margin-bottom: 0;
    padding-bottom: 7rem;
  }
}
@media screen and (min-width: 960px) {
  .p-top__usage__block {
    padding-bottom: 3rem;
  }
}
.p-top__usage__button {
  position: absolute;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button {
    cursor: default;
  }
}
.p-top__usage__button .point {
  font-family: var(--font-roboto);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-weight: bold;
  font-size: clamp(0.875rem, 0.696rem + 0.89vw, 1.125rem);
  color: var(--color-main);
}
.p-top__usage__button .point::after {
  content: "";
  display: inline-block;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--color-point);
  position: absolute;
  z-index: -1;
  -webkit-animation: scale 3s var(--bezier) infinite;
          animation: scale 3s var(--bezier) infinite;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button .point::after {
    width: 140%;
    -webkit-animation: none;
            animation: none;
  }
}
@media screen and (min-width: 768px) {
  .p-top__usage__button .point .text {
    opacity: 0;
    visibility: hidden;
  }
}
.p-top__usage__button.item--cv {
  width: 25%;
  top: 36%;
  left: 18%;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button.item--cv {
    width: 8%;
    top: 30%;
    left: 27%;
  }
}
@media screen and (min-width: 960px) {
  .p-top__usage__button.item--cv {
    top: 33%;
  }
}
.p-top__usage__button.item--cv .point {
  top: 20%;
  right: 50%;
}
.p-top__usage__button.item--cv .point::after {
  top: -20%;
  right: 0;
  width: 73%;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button.item--cv .point::after {
    top: -33%;
    left: 45%;
    width: 79%;
  }
}
.p-top__usage__button.item--automotive {
  width: 24%;
  top: 19%;
  left: 50%;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button.item--automotive {
    width: 7%;
    top: 24%;
    left: 59%;
  }
}
@media screen and (min-width: 960px) {
  .p-top__usage__button.item--automotive {
    top: 27%;
  }
}
.p-top__usage__button.item--automotive .point {
  top: 0;
  left: 50%;
}
.p-top__usage__button.item--automotive .point::after {
  top: -20%;
  left: 0;
  width: 76%;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button.item--automotive .point::after {
    top: -37%;
    left: -20%;
    width: 91%;
  }
}
.p-top__usage__button.item--industrial {
  width: 16%;
  top: 76%;
  left: 63%;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button.item--industrial {
    width: 5%;
    top: 62%;
    left: 51%;
  }
}
@media screen and (min-width: 960px) {
  .p-top__usage__button.item--industrial {
    top: 70%;
  }
}
.p-top__usage__button.item--industrial .point {
  top: 20%;
  left: 70%;
}
.p-top__usage__button.item--industrial .point::after {
  top: -42%;
  right: 17%;
  width: 110%;
}
@media screen and (min-width: 768px) {
  .p-top__usage__button.item--industrial .point::after {
    top: -50%;
    left: -59%;
    width: 127%;
  }
}
.p-top__usage__modal {
  padding: 1.5em;
  background-color: #1EB4EA;
  color: #fff;
  width: 100%;
  max-width: 17rem;
  position: relative;
  border-radius: 20px;
}
@media screen and (min-width: 768px) {
  .p-top__usage__modal {
    width: auto;
    font-size: clamp(0.688rem, 0.2rem + 1.02vw, 1rem);
  }
}
.p-top__usage__modal .title {
  margin-bottom: 1em;
  font-size: var(--font20);
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-top__usage__modal .title {
    font-size: clamp(1rem, 0.61rem + 0.81vw, 1.25rem);
  }
}
.p-top__usage__modal .item--cv,
.p-top__usage__modal .item--automotive,
.p-top__usage__modal .item--industrial {
  position: absolute;
}
.p-top__usage__modal .item--cv {
  width: 43%;
  top: -21%;
  left: -15%;
}
.p-top__usage__modal .item--automotive {
  width: 58%;
  top: -26%;
  right: -11%;
}
.p-top__usage__modal .item--industrial {
  width: 45%;
  top: -19%;
  left: -16%;
}
@media screen and (min-width: 768px) {
  .p-top__usage #modal-1,
  .p-top__usage #modal-2,
  .p-top__usage #modal-3 {
    position: absolute;
    z-index: 5;
  }
}
.p-top__usage #modal-1 {
  top: 0;
  right: 72%;
}
.p-top__usage #modal-2 {
  top: 10%;
  left: 70%;
}
.p-top__usage #modal-3 {
  top: 50%;
  left: 60%;
}
.p-top__usage__bottom {
  padding: 2rem 0 3rem;
  background-color: #fff;
  border-radius: 0 var(--radiusM) 0 var(--radiusM);
  position: relative;
  max-width: var(--contentW);
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  .p-top__usage__bottom {
    padding: 3rem 20% 4rem 3rem;
    border-radius: 0 50px 0 50px;
  }
}
.p-top__usage__bottom .title {
  font-size: clamp(1.125rem, 0.862rem + 1.17vw, 1.563rem);
  font-weight: bold;
}
@media screen and (min-width: 960px) {
  .p-top__usage__bottom .title {
    font-size: var(--font25);
  }
}
.p-top__usage__bottom .inner {
  padding: 1.5rem 1.5rem 0;
}
@media screen and (min-width: 960px) {
  .p-top__usage__bottom .inner {
    padding: 2rem 0 0 0;
  }
}
.p-top__usage__bottom .motakun {
  position: relative;
  max-width: 15rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 960px) {
  .p-top__usage__bottom .motakun {
    position: absolute;
    width: 20%;
    bottom: -3em;
    right: 0;
  }
}
.p-top__usage__bottom .motakun figcaption {
  position: absolute;
  right: -2em;
  bottom: -1em;
  text-align: center;
  line-height: 1;
}
@media screen and (min-width: 960px) {
  .p-top__usage__bottom .motakun figcaption {
    right: -3em;
    text-align: left;
  }
}
.p-top__usage__back {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  display: none;
}
@media screen and (min-width: 960px) {
  .p-top__usage__back {
    display: block;
  }
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0.3s ease, opacity 0.3s ease;
  transition: visibility 0.3s ease, opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
  .modal__overlay {
    opacity: 1;
    visibility: visible;
    position: static;
    background: transparent;
  }
}

.modal__close {
  background: transparent;
  border: 0;
}

.micromodal-slide.is-open .modal__overlay {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================//
//
//　Welfare
//
// ========================================================================== */
.p-top__welfare {
  margin-top: 2rem;
}
@media screen and (min-width: 960px) {
  .p-top__welfare {
    margin-top: 6rem;
  }
}
.p-top__welfare__content {
  margin-top: 5%;
  display: grid;
  gap: 1.5rem 3rem;
}
@media screen and (min-width: 960px) {
  .p-top__welfare__content {
    grid-template-columns: auto auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.p-top__welfare__content .title {
  margin-bottom: 1em;
  font-size: var(--font18);
  font-weight: bold;
  color: var(--color-main);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-top__welfare__content .title {
    font-size: var(--font22);
  }
}
.p-top__welfare__slider {
  border-radius: 0 var(--radiusM) 0 var(--radiusM);
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  .p-top__welfare__slider {
    border-radius: 0 50px 0 50px;
  }
}
.p-top__welfare__slider .splide__pagination {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (min-width: 768px) {
  .p-top__welfare__slider .splide__pagination {
    bottom: 1em;
  }
}
.p-top__welfare__slider .splide__pagination__page {
  background-color: #94D2FF;
  height: 3px;
  width: 15px;
  opacity: 1;
  border-radius: 0;
}
.p-top__welfare__slider .splide__pagination__page.is-active {
  background-color: #0998FF;
  -webkit-transform: none;
          transform: none;
}
@media screen and (min-width: 768px) {
  .p-top__welfare__slider .splide__pagination__page {
    height: 4px;
    width: 25px;
  }
}

/* ==========================================================================//
//
//　Figures
//
// ========================================================================== */
.p-top__figures {
  margin: 4rem 0;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-top__figures {
    overflow: revert;
  }
}
@media screen and (min-width: 960px) {
  .p-top__figures {
    margin: 10rem 0 8rem;
  }
}
.p-top__figures__inner {
  padding: 2rem 0;
  background-color: var(--color-sub);
}
@media screen and (min-width: 960px) {
  .p-top__figures__inner {
    padding: 6rem 0;
  }
}
.p-top__figures__block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25em 1rem;
  position: relative;
}
@media screen and (width >= 400px) {
  .p-top__figures__block {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .p-top__figures__block {
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-top__figures__item {
  padding: 2rem 1.2rem;
  border-radius: 0 30px 0 30px;
  background-color: #fff;
}
.p-top__figures__item .title {
  margin-bottom: 1.5em;
  font-weight: 500;
  text-align: center;
  font-size: clamp(0.813rem, 0.363rem + 2vw, 1.563rem);
}
.p-top__figures__item .text--small, .p-top__figures__item .text--medium, .p-top__figures__item .text--large {
  font-weight: 500;
  color: var(--color-main);
  text-align: center;
  line-height: 1;
}
.p-top__figures__item .text--small .value, .p-top__figures__item .text--medium .value, .p-top__figures__item .text--large .value {
  margin-right: 0.5rem;
  font-weight: 500;
  font-family: var(--font-roboto);
  line-height: 1;
  word-break: keep-all;
}
.p-top__figures__item .text--large {
  font-size: clamp(1.25rem, 1.034rem + 0.96vw, 2.188rem);
}
.p-top__figures__item .text--large .value {
  font-size: clamp(2.5rem, 0.813rem + 7.5vw, 5.313rem);
}
.p-top__figures__item .text--large .value.smaller {
  font-size: clamp(2.188rem, 0.65rem + 6.83vw, 4.75rem);
}
.p-top__figures__item .text--large .small {
  margin-right: 0.5em;
  font-size: clamp(0.875rem, 0.731rem + 0.64vw, 1.5rem);
  word-break: keep-all;
  display: inline-block;
}
.p-top__figures__item .text--medium {
  font-size: clamp(0.813rem, 0.363rem + 2vw, 1.563rem);
}
.p-top__figures__item .text--medium .value {
  font-size: clamp(1.75rem, 0.625rem + 5vw, 3.625rem);
}
.p-top__figures__item .text--medium .small {
  word-break: keep-all;
  font-size: clamp(0.688rem, 0.587rem + 0.45vw, 1.125rem);
}
.p-top__figures__item .text--small {
  font-size: clamp(0.625rem, 0.063rem + 2.5vw, 1.563rem);
}
.p-top__figures__item .text--small .value {
  font-size: clamp(1.5rem, 0.525rem + 4.33vw, 3.125rem);
}
.p-top__figures__item .text--small .small {
  margin-right: 0.5em;
  word-break: keep-all;
  display: inline-block;
  font-size: clamp(1rem, 0.942rem + 0.26vw, 1.25rem);
}
.p-top__figures__item .icon--employee {
  max-width: 3em;
}
.p-top__figures__item .icon--age {
  max-width: 2em;
}
.p-top__figures__item .icon--holiday {
  max-width: 4.5rem;
}
.p-top__figures__item .icon--overtime {
  max-width: 4.5rem;
}
.p-top__figures__item .icon--dayoff {
  max-width: 4rem;
}
.p-top__figures__item .block_age {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em 1.5em;
}
.p-top__figures__item .graph {
  margin-bottom: 1.5rem;
  height: 2.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0 10px 0 10px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-top__figures__item .graph {
    height: 5rem;
  }
}
.p-top__figures__item .graph > * {
  display: inline-block;
  height: 100%;
}
.p-top__figures__item .graph > *:nth-child(1) {
  background-color: #5791DB;
}
.p-top__figures__item .graph > *:nth-child(2) {
  background-color: #6CBADF;
}
.p-top__figures__item .graph > *:nth-child(3) {
  background-color: #7EDCE3;
}
.p-top__figures__item .graph > *:nth-child(4) {
  background-color: #BDF0F3;
}
.p-top__figures__item .graph > *:nth-child(5) {
  background-color: #C7EDFF;
}
@media screen and (width >= 400px) {
  .p-top__figures__item.span2 {
    grid-column: span 2;
  }
}
.p-top__figures__motakun {
  width: 70%;
  max-width: 16rem;
  -ms-flex-item-align: end;
      align-self: flex-end;
  position: relative;
  left: -18%;
  max-width: 16rem;
}
@media screen and (min-width: 768px) {
  .p-top__figures__motakun {
    position: absolute;
    width: 20%;
    top: -5%;
    left: -7%;
  }
}

/* ==========================================================================//
//
//　Job Categories & Interview
//
// ========================================================================== */
.p-top__job {
  padding-bottom: 4rem;
}
@media screen and (min-width: 960px) {
  .p-top__job {
    padding-bottom: 6rem;
  }
}
.p-top__job__block {
  padding: 5% 2% 15%;
  background-color: var(--color-sub);
}
@media screen and (min-width: 960px) {
  .p-top__job__block {
    padding: 2.5rem 0 10rem;
  }
}
.p-top__job__block img {
  max-width: var(--contentW);
  margin-left: auto;
  margin-right: auto;
}

.p-top__interview__block_title {
  margin: -12% 0 5% 0;
  text-align: center;
  max-width: var(--contentW);
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  .p-top__interview__block_title {
    margin: -7rem 0 -1rem 0;
    text-align: revert;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }
}
.p-top__interview__block_title .title_sub {
  margin-left: 0.5em;
  padding-bottom: 0.3em;
}
.p-top__interview__title {
  font-size: clamp(2.625rem, 1.904rem + 3.21vw, 5.75rem);
  color: var(--color-main);
  font-family: var(--font-kulim);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}
.p-top__interview__list_button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
@media screen and (min-width: 960px) {
  .p-top__interview__list_button {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    border-radius: 30px 30px 0 0;
    overflow: hidden;
  }
}
.p-top__interview__button {
  padding: 1em;
  background: var(--gradient4);
  width: 100%;
  position: relative;
  -webkit-transition: background-image 0.05s, color 0.05s;
  transition: background-image 0.05s, color 0.05s;
}
@media screen and (min-width: 960px) {
  .p-top__interview__button {
    padding: 1em 1em calc(1em + 8px) 1em;
  }
}
@media (hover: hover) {
  .p-top__interview__button:hover {
    background: linear-gradient(120deg, rgb(118, 204, 255) 0%, rgb(255, 189, 189) 50%);
    color: var(--color-main);
  }
  .p-top__interview__button:hover .text {
    color: var(--color-main);
  }
  .p-top__interview__button:focus-visible {
    background: linear-gradient(120deg, rgb(118, 204, 255) 0%, rgb(255, 189, 189) 50%);
    color: var(--color-main);
  }
  .p-top__interview__button:focus-visible .text {
    color: var(--color-main);
  }
}
.p-top__interview__button::after {
  display: block;
  width: 100%;
  height: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-color: #fff;
  position: absolute;
  bottom: -1px;
  left: 0;
}
@media screen and (min-width: 960px) {
  .p-top__interview__button::after {
    content: "";
  }
}
.p-top__interview__button .number {
  font-family: var(--font-kulim);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.125rem, 2.519rem + 2.69vw, 5.75rem);
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-top__interview__button .text {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
  font-weight: 500;
}
.p-top__interview__button .text .job {
  font-size: clamp(0.75rem, 0.663rem + 0.38vw, 1.125rem);
}
@media screen and (min-width: 960px) {
  .p-top__interview__button .text .job {
    padding: 2em 0;
  }
}
.p-top__interview__button .text .name {
  font-size: clamp(1rem, 0.913rem + 0.38vw, 1.375rem);
}
.p-top__interview__button.is-current {
  background: linear-gradient(120deg, rgb(118, 204, 255) 0%, rgb(255, 189, 189) 50%);
  color: var(--color-main);
}
.p-top__interview__button.is-current::after {
  background-image: url(/recruit/assets/images/cover_fukidashi.svg);
  background-color: transparent;
}
.p-top__interview__button.is-current .text {
  color: var(--color-main);
}
.p-top__interview__slider {
  margin-top: 1rem;
}
@media screen and (min-width: 960px) {
  .p-top__interview__slider {
    margin-top: 2rem;
  }
}
.p-top__interview__slider .splide__slide {
  height: 0 !important;
}
.p-top__interview__slider .splide__slide.is-active {
  height: auto !important;
}
@media screen and (min-width: 960px) {
  .p-top__interview__item {
    display: grid;
    grid-template-columns: 40% 1fr;
  }
}
.p-top__interview__info {
  padding-top: 12%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  overflow: hidden;
}
@media screen and (min-width: 960px) {
  .p-top__interview__info {
    padding-top: 5rem;
    overflow: revert;
    height: 80%;
    max-height: 27rem;
  }
}
.p-top__interview__info .text {
  font-family: var(--font-kulim);
  font-style: italic;
  font-weight: 600;
  color: var(--color-sub);
  font-size: clamp(2rem, 1.135rem + 3.85vw, 5.75rem);
  position: absolute;
  top: 0.3em;
  left: 25%;
  line-height: 1;
}
@media screen and (min-width: 960px) {
  .p-top__interview__info .text {
    top: 3px;
    left: auto;
    right: 10%;
  }
}
.p-top__interview__info .number {
  font-family: var(--font-kulim);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  font-size: clamp(3.25rem, 2.673rem + 2.56vw, 5.75rem);
  color: #fff;
}
@media screen and (min-width: 960px) {
  .p-top__interview__info .number {
    position: absolute;
    top: 2%;
    right: 6%;
  }
}
@media screen and (min-width: 960px) {
  .p-top__interview__info .profile {
    display: grid;
    position: absolute;
    right: 6%;
    bottom: 5%;
    text-align: center;
  }
}
.p-top__interview__info .job {
  margin-right: 0.5em;
  color: var(--color-main);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.716rem + 0.71vw, 1.563rem);
}
@media screen and (min-width: 960px) {
  .p-top__interview__info .job {
    margin: 0;
  }
}
.p-top__interview__info .name {
  color: var(--color-main);
  font-weight: 500;
  font-size: clamp(1.375rem, 0.942rem + 1.92vw, 3.25rem);
}
.p-top__interview__info .block_info {
  width: 100%;
  padding-left: 25%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
@media screen and (min-width: 960px) {
  .p-top__interview__info .block_info {
    padding-left: 0;
    display: block;
    height: 100%;
  }
}
.p-top__interview__info .block_info::after {
  content: "";
  display: block;
  width: 95%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-sub);
  z-index: -1;
  border-radius: 0 var(--radiusM) 0 0;
}
@media screen and (min-width: 960px) {
  .p-top__interview__info .block_info::after {
    border-radius: 0 0 50px 0;
    width: 100%;
    top: 0;
    bottom: auto;
  }
}
.p-top__interview__info .image {
  width: 18%;
  position: absolute;
  top: 0;
  left: 5%;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  .p-top__interview__info .image {
    width: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.p-top__interview__content .inner {
  width: 88%;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 960px) {
  .p-top__interview__content .inner {
    width: auto;
    max-width: calc(var(--contentW) / 2 + 10%);
    margin-right: 6%;
    margin-left: 6%;
  }
}
.p-top__interview__content .question {
  margin: 1.5em 0 0.8em 0;
  color: var(--color-main);
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-top__interview__content .question {
    font-size: var(--font18);
  }
}
.p-top__interview__content .question .mark {
  color: var(--color-sub);
  font-family: var(--font-kulim);
  font-style: italic;
  font-weight: 600;
  font-size: 170%;
  display: inline-block;
  line-height: 1;
}
.p-top__interview__arrows {
  padding-bottom: 5px;
  margin-top: 4rem;
  color: var(--color-main);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.p-top__interview__arrows .button_arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-transition: color 0.05s;
  transition: color 0.05s;
}
@media (hover: hover) {
  .p-top__interview__arrows .button_arrow:hover {
    color: var(--color-sub2);
  }
  .p-top__interview__arrows .button_arrow:hover .arrow {
    background-color: var(--color-sub2);
  }
  .p-top__interview__arrows .button_arrow:focus-visible {
    color: var(--color-sub2);
  }
  .p-top__interview__arrows .button_arrow:focus-visible .arrow {
    background-color: var(--color-sub2);
  }
}
.p-top__interview__arrows .button_arrow.arrow--prev .arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.p-top__interview__arrows .job {
  margin-right: 0.5rem;
  font-size: var(--font12);
}
.p-top__interview__arrows .arrow {
  background-color: var(--color-main);
  width: 2rem;
  height: 2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  fill: #fff;
  -webkit-transition: background-color 0.05s;
  transition: background-color 0.05s;
}

/* ==========================================================================//
//
//　Recruit
//
// ========================================================================== */
.p-top__recruit {
  padding-top: 3rem;
  background-color: #001C4D;
  position: relative;
  z-index: 1;
}
.p-top__recruit__title {
  text-align: center;
  position: relative;
  z-index: 1;
}
.p-top__recruit__block {
  background-image: url(/recruit/assets/images/img_recruit_back.webp);
  background-size: cover;
  background-position: center 70%;
}
@media screen and (min-width: 768px) {
  .p-top__recruit__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.p-top__recruit__link {
  padding: 2.5em 0;
  font-size: clamp(1rem, 0.4rem + 2.67vw, 2rem);
  text-align: center;
  color: var(--color-main);
  font-weight: bold;
  display: block;
  width: 100%;
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 768px) {
  .p-top__recruit__link {
    padding: 3.5em 0;
  }
}
@media (hover: hover) {
  .p-top__recruit__link:hover {
    background-color: rgba(0, 28, 77, 0.7019607843);
    color: #fff;
  }
  .p-top__recruit__link:hover .arrow {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .p-top__recruit__link:focus-visible {
    background-color: rgba(0, 28, 77, 0.7019607843);
    color: #fff;
  }
  .p-top__recruit__link:focus-visible .arrow {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
.p-top__recruit__link:first-of-type {
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}
@media screen and (min-width: 768px) {
  .p-top__recruit__link:first-of-type {
    border-bottom: none;
    border-right: 3px solid rgba(255, 255, 255, 0.6);
  }
}
@media screen and (min-width: 768px) {
  .p-top__recruit__link:first-of-type .inner {
    margin: 0 0 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .p-top__recruit__link:nth-of-type(2) .inner {
    margin: 0 auto 0 0;
  }
}
.p-top__recruit__link .inner {
  width: 100%;
  max-width: calc(var(--contentW) / 2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .p-top__recruit__link .inner {
    grid-template-columns: auto;
    gap: 0.6em;
  }
}
.p-top__recruit__link .text {
  justify-self: center;
  font-size: clamp(1rem, 0.769rem + 1.03vw, 2rem);
}
.p-top__recruit__link .arrow {
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.3s var(--bezier);
  transition: -webkit-transform 0.3s var(--bezier);
  transition: transform 0.3s var(--bezier);
  transition: transform 0.3s var(--bezier), -webkit-transform 0.3s var(--bezier);
}

/* ==========================================================================//
//
//　Footer
//
// ========================================================================== */
.p-top__footer {
  background-color: #001C4D;
  position: relative;
  overflow: hidden;
}
.p-top__footer__line {
  position: absolute;
  bottom: 0;
  opacity: 0.4;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
  -o-object-position: bottom;
     object-position: bottom;
}

/* ==========================================================================//
//
//　Animation
//
// ========================================================================== */
@-webkit-keyframes droneBase {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes droneBase {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* ==========================================================================//
//
//　Drones
//
// ========================================================================== */
.p-top__deco__drone--01 {
  display: none;
  -webkit-animation: droneBase 3s ease-in-out infinite;
          animation: droneBase 3s ease-in-out infinite;
}
@media screen and (min-width: 960px) {
  .p-top__deco__drone--01 {
    display: block;
    width: 25%;
    position: absolute;
    top: -16%;
    right: 0;
    z-index: 1;
  }
}
.p-top__deco__drone--02 {
  position: absolute;
  width: 20%;
  right: 27%;
  top: -15%;
  min-width: 5rem;
  -webkit-animation: droneBase 3s ease-in-out infinite;
          animation: droneBase 3s ease-in-out infinite;
}
@media screen and (min-width: 768px) {
  .p-top__deco__drone--02 {
    display: none;
  }
}
.p-top__deco__drone--03 {
  justify-self: flex-end;
  -ms-flex-item-align: start;
      align-self: flex-start;
  position: relative;
  right: -30%;
  z-index: 1;
  -webkit-animation: droneBase 3s ease-in-out infinite;
          animation: droneBase 3s ease-in-out infinite;
}
@media screen and (min-width: 768px) {
  .p-top__deco__drone--03 {
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 26%;
  }
}