@charset "UTF-8";

/*-------------------------------
  ホーム用のスタイル
-------------------------------*/
/* メインビジュアル */
.o-home_header__video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
@media (max-width: 64em) {
  .o-home_header__video {
    width: 100%;
    height: auto;
  }
}
/* ----------------------------------News------------------------------------- */
.o-home__info {
  padding: 14vw 0;
  position: relative;
}
.o-home__info::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%;
  height: 1px;
  background-color: var(--color-gray);
}
.o-home__info .o-info-items {
  margin: 8vw 0;
}
@media (min-width: 40em) {
  .o-home__info {
    padding: 110px 0 100px;
  }
  .o-home__info::after {
    width: 40%;
  }
  .o-home__info .o-info-items {
    margin: 0;
  }
}
.o-info-head p {
  margin: 7vw 0 0 0;
  font-size: var(--px-to-vw_14);
}
.o-home__info .c-btn {
  font-size: var(--px-to-vw_16);
  margin: 10px 0 0 0;
  gap: 2em;
  padding: 0 1.5em 0 3.5em !important;
}
@media (min-width: 40em) {
  .o-info-head {
    margin: 10px 0 0 0;
  }
  .o-info-head p {
    margin: 20px 0 0 0;
    font-size: var(--px-to-rem_16);
  }
  .o-home__info .c-btn {
    font-size: var(--px-to-rem_16);
    margin: 50px 0 0 0;
  }
}
/* ----------------------------------About------------------------------------- */
:root {
  --about-pt--md: 100px;
}
.o-home__about {
  padding: 18vw 0 15vw;
  position: relative;
  overflow: hidden;
}
.o-home__about::after {
  content: "";
  position: absolute;
  top: 43%;
  left: 34%;
  width: 100%;
  height: 100%;
  background-image: url(../img/logo_gray.svg);
  background-repeat: no-repeat;
  background-position: 42% 12%;
  background-size: 75vw auto;
  z-index: 0;
}
.o-about-content {
  position: relative;
  z-index: 1;
}
.o-about-content::before {
  content: "";
  position: absolute;
  top: 25vw;
  right: 0;
  width: 90%;
  height: 44%;
  background: var(--color-main);
  clip-path: polygon(
    21vw 0,
    100% 0,
    100% 100%,
    0 100%,
    0 100%
  );
  z-index: 0;
}
.o-about-content::after {
  content: "";
  position: absolute;
  top: -35vw;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
@media (min-width: 40em) {
  .o-home__about {
    padding: var(--about-pt--md) 0;
  }
  .o-home__about::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 42% 12%;
    background-size: 500px auto;
  }
  .o-about-content::after {
    top: 0;
    left: 52%;
    width: clamp(0px, 48%, 915px);
    height: 110%;
    background-size: cover;
  }
  .o-about-content::before {
    top: calc(-1 * var(--about-pt--md));
    right: 0;
    width: 40%;
    height: 160%;
    clip-path: polygon(
      120px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 100%
    );
  }
}
.o-about-catch {
  font-size: var(--px-to-vw_34);
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  margin: 120vw 6vw 0;
}
.o-about-catch__sub {
  font-size: var(--px-to-vw_20);
  font-weight: bold;
  line-height: 1.5em;
  text-align: center;
  margin-top: 5vw;
}
.o-about-content p {
  font-size: var(--px-to-vw_14);
  margin-top: 5vw;
}
.o-about-content p br {
  display: none;
}
@media (min-width: 40em) {
  .o-about-catch {
    font-size: var(--px-to-rem_50);
    margin: 20px 0 0;
    text-align: left;
    line-height: 2;
  }
  .o-about-catch__sub {
    font-size: var(--px-to-rem_30);
    text-align: left;
    margin-top: 0;
  }
  .o-about-content p {
    font-size: var(--px-to-rem_16);
    margin-top: 15px;
  }
  .o-about-content p br {
    display: block;
  }
}
.o-about-btn {
  text-align: center;
  position: relative;
  z-index: 5;
}
.o-about-btn .c-btn {
  font-size: var(--px-to-vw_16);
  margin: 8vw 0 0 0;
  gap: 2em;
  padding: 0 1.5em 0 3.5em !important;
}
@media (min-width: 40em) {
  .o-about-btn {
    width: 50%;
  }
  .o-about-btn .c-btn {
    margin: 30px auto 0;
    font-size: var(--px-to-rem_16);
  }
}
/* ----------------------------------Recruit------------------------------------- */
.o-home__recruit {
  padding: 19vw 0 20vw;
}
.o-home__recruit h1 {
  position: relative;
}
.o-home__recruit h1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateY(-50%);
  width: -webkit-fill-available;
  height: 1px;
  background-color: var(--color-gray);
}
@media (min-width: 40em) {
  .o-home__recruit {
    padding: 100px 0 80px;
  }
  .o-home__recruit h1,
  .o-home__recruit span {
    text-align: right;
  }
  .o-home__recruit h1::before {
    right: 4em;
    left: auto;
    top: 45%;
    width: 5em;
  }
}
:root {
  --home-rec-line-l--md: 100px;
  --home-rec-line-l--sm: 50px;
  --home-rec-line-w: 1px;
}
.o-home__recruit-border {
  padding: var(--px-to-vw_25) var(--px-to-vw_25) var(--px-to-vw_20);
  margin-top: 12vw;
  position: relative;
  background:
    /* 左上 */
    linear-gradient(var(--color-gray), var(--color-gray))
      left top / var(--home-rec-line-l--sm) var(--home-rec-line-w) no-repeat,
    linear-gradient(var(--color-gray), var(--color-gray))
      left top / var(--home-rec-line-w) var(--home-rec-line-l--sm) no-repeat,

    /* 右上 */
    linear-gradient(var(--color-gray), var(--color-gray))
      right top / var(--home-rec-line-l--sm) var(--home-rec-line-w) no-repeat,
    linear-gradient(var(--color-gray), var(--color-gray))
      right top / var(--home-rec-line-w) var(--home-rec-line-l--sm) no-repeat,

    /* 左下 */
    linear-gradient(var(--color-gray), var(--color-gray))
      left bottom / var(--home-rec-line-l--sm) var(--home-rec-line-w) no-repeat,
    linear-gradient(var(--color-gray), var(--color-gray))
      left bottom / var(--home-rec-line-w) var(--home-rec-line-l--sm) no-repeat,

    /* 右下 */
    linear-gradient(var(--color-gray), var(--color-gray))
      right bottom / var(--home-rec-line-l--sm) var(--home-rec-line-w) no-repeat,
    linear-gradient(var(--color-gray), var(--color-gray))
      right bottom / var(--home-rec-line-w) var(--home-rec-line-l--sm) no-repeat;
}

@media (min-width: 40em) {
  .o-home__recruit-border {
    padding: 15px;
    margin-top: 50px;
    background:
      /* 左上 */
      linear-gradient(var(--color-gray), var(--color-gray))
        left top / var(--home-rec-line-l--md) var(--home-rec-line-w) no-repeat,
      linear-gradient(var(--color-gray), var(--color-gray))
        left top / var(--home-rec-line-w) var(--home-rec-line-l--md) no-repeat,

      /* 右上 */
      linear-gradient(var(--color-gray), var(--color-gray))
        right top / var(--home-rec-line-l--md) var(--home-rec-line-w) no-repeat,
      linear-gradient(var(--color-gray), var(--color-gray))
        right top / var(--home-rec-line-w) var(--home-rec-line-l--md) no-repeat,

      /* 左下 */
      linear-gradient(var(--color-gray), var(--color-gray))
        left bottom / var(--home-rec-line-l--md) var(--home-rec-line-w) no-repeat,
      linear-gradient(var(--color-gray), var(--color-gray))
        left bottom / var(--home-rec-line-w) var(--home-rec-line-l--md) no-repeat,

      /* 右下 */
      linear-gradient(var(--color-gray), var(--color-gray))
        right bottom / var(--home-rec-line-l--md) var(--home-rec-line-w) no-repeat,
      linear-gradient(var(--color-gray), var(--color-gray))
        right bottom / var(--home-rec-line-w) var(--home-rec-line-l--md) no-repeat;
  }
}
.o-home__recruit-content {
  padding-top: 12vw;
}
.o-home__recruit-catch {
  text-align: center;
  line-height: 1.3;
  font-weight: bold;
  font-size: var(--px-to-vw_38);
}
.o-home__recruit-catch__sub {
  text-align: center;
  font-weight: bold;
  font-size: var(--px-to-vw_15);
}
.o-home__recruit-ex {
  line-height: 1.6;
  margin-top: 7vw;
  font-size: var(--px-to-vw_16);
}
.o-home__recruit-btn {
  padding: 8.5vw 0;
  margin: 9vw 0 0 0;
  background: #F2F2F2;
  flex-direction: column;
  gap: 5vw;
}
.o-home__recruit-btn .c-btn {
  gap: 2.5em;
  padding: 0 1.5em 0 4.5em !important;
  font-size: var(--px-to-vw_16);
}
@media (min-width: 40em) {
  .o-home__recruit-content {
    padding: 25px 35px 30px 35px;
  }
  .o-home__recruit-catch {
    font-size: var(--px-to-rem_58);
  }
  .o-home__recruit-catch__sub {
    font-size: var(--px-to-rem_23);
  }
  .o-home__recruit-ex {
    margin-top: 20px;
    font-size: var(--px-to-rem_15);
  }
  .o-home__recruit-btn {
    width: 80%;
    padding: 25px;
    margin: 25px auto 0;
    gap: 15px;
  }
  .o-home__recruit-btn .c-btn {
    font-size: var(--px-to-rem_16);
  }
}