/*======================================
    font
======================================*/
/*======================================
    color
======================================*/
/*======================================
    common
======================================*/
html {
  font-size: 10px;
  font-family: "Noto Sans JP", "sans-serif";
  color: #000;
}

body {
  background-color: #9ce3fb;
}

img {
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  cursor: pointer;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}
.is-nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  br.is-pc {
    display: none;
  }
}

br.is-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  br.is-sp {
    display: block;
  }
}

/*======================================
    layout
======================================*/
.container {
  overflow: hidden;
  font-size: 1.6rem;
  font-size: min(0.8333333333vw, 1.6rem);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@media screen and (max-width: 1024px) {
  .container {
    font-size: clamp(1rem, 1.3333333333vw, 1.6rem);
  }
}
@media screen and (max-width: 767px) {
  .container {
    font-size: min(4.2666666667vw, 1.6rem);
  }
}

.inner {
  max-width: 80em;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .inner {
    width: 90%;
  }
}

/*======================================
    section
======================================*/
.section-ttl {
  font-size: 2.375em;
  font-weight: 700;
  letter-spacing: 0.22em;
}
@media screen and (max-width: 767px) {
  .section-ttl {
    font-size: 1.5em;
  }
}
.section-ttl.-center {
  text-align: center;
}
.section-ttl.-white {
  color: #fff;
}
.section-ttl.-white span.en {
  color: inherit;
}
.section-ttl span.en {
  font-size: 1.97em;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-family: "brothers", sans-serif;
  display: block;
  color: #164bd6;
  margin-bottom: 0.4em;
}
.section-ttl span.en.-mb0 {
  margin-bottom: 0;
}

.section-text {
  font-weight: 500;
  letter-spacing: 0.115em;
  line-height: 2.375;
  font-feature-settings: "palt";
  text-align: justify;
}
@media screen and (max-width: 767px) {
  .section-text {
    font-size: 0.875em;
    line-height: 2;
  }
}

/*======================================
    button
======================================*/
.more {
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0.95em 0%, 100% 0, 100% 0.95em, 100% calc(100% - 0.95em), calc(100% - 0.95em) 100%, 0 100%, 0% calc(100% - 0.95em), 0% 0.95em);
  color: #fff;
  background-color: #164bd6;
  height: 5.0625em;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .more {
    height: 4em;
  }
}
.more span.more__text {
  display: inline-block;
  font-size: 1.3125em;
  font-family: "brothers", sans-serif;
  padding-right: 1.7em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .more span.more__text {
    font-size: 1.25em;
  }
}
.more span.more__text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  width: 1.33em;
  height: 0.67em;
  background: url(../img/button_arrow.svg) no-repeat center/contain;
  transition: transform 0.3s ease;
}

.more__wrap {
  filter: drop-shadow(0.5em 0.5em 0 #fff);
  margin-top: 3em;
  transition: filter 0.3s ease;
}
@media screen and (max-width: 767px) {
  .more__wrap {
    margin-top: 2em;
    filter: drop-shadow(0.25em 0.25em 0 #fff);
  }
}
.more__wrap:hover {
  filter: drop-shadow(0 0 0 #fff);
}
.more__wrap:hover .more {
  transform: translate(0.5em, 0.5em);
}
@media screen and (max-width: 767px) {
  .more__wrap:hover .more {
    transform: translate(0.25em, 0.25em);
  }
}
.more__wrap:hover .more span.more__text::before {
  transform: translate(0.2em, -50%);
}

.top-link__wrap {
  text-align: center;
}

.top-link {
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #000;
  transition: opacity 0.3s ease;
  display: inline-block;
  font-feature-settings: "palt";
}
@media screen and (max-width: 767px) {
  .top-link {
    font-size: 1em;
  }
}
.top-link:hover {
  opacity: 0.7;
}

/*======================================
    page
======================================*/
.page-fv__title .en {
  letter-spacing: 0.015em !important;
}

.page-fv__text {
  line-height: 2.3571428571;
  margin-top: 2.75em;
  font-size: 0.875em;
}

.page-ttl {
  font-size: 1.625em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  color: #064cd7;
  margin-top: 3.7em;
}
@media screen and (max-width: 767px) {
  .page-ttl {
    font-size: 1.5em;
    margin-top: 2em;
  }
}
.page-ttl span.en {
  display: block;
  font-family: "brothers", sans-serif;
  font-size: 1.96em;
  letter-spacing: 0.01em;
  margin-bottom: 0.35em;
}

/*======================================
    header
======================================*/
.header {
  background-color: #fff;
  position: relative;
  z-index: 300;
}

.h__inner {
  max-width: 111.8em;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding: 2em 0;
  display: flex;
}
@media screen and (max-width: 767px) {
  .h__inner {
    padding: 1em 0;
    width: 90%;
  }
}

.h__logo {
  max-width: 27em;
  width: 100%;
  display: block;
  margin-left: 1em;
  transform: translateY(0.25em);
}
@media screen and (max-width: 1024px) {
  .h__logo {
    max-width: 18em;
  }
}
@media screen and (max-width: 767px) {
  .h__logo {
    max-width: 12.5em;
    margin-left: 0;
  }
}

.h__logo--link {
  display: block;
}

.h__nav {
  margin-left: auto;
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .h__nav {
    display: none;
  }
}

.h__items {
  display: flex;
  padding-bottom: 1em;
}

.h__item {
  position: relative;
}
.h__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 2em;
  background-color: #164bd6;
  transform: translate(-50%, -50%) rotate(34deg);
}
.h__item:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 2em;
  background-color: #164bd6;
  transform: translate(50%, -50%) rotate(34deg);
}

.h__item--link {
  display: block;
  color: #064cd7;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 0 1.8em;
  font-size: 1.125em;
  transition: opacity 0.3s ease;
}
.h__item--link:hover {
  opacity: 0.7;
}

/*======================================
    footer
======================================*/
.footer {
  color: #fff;
  background-color: #164bd6;
  padding-bottom: 11em;
  padding-top: 5em;
  position: relative;
  margin-top: auto;
}
@media screen and (max-width: 767px) {
  .footer {
    padding-bottom: 5em;
  }
}
.footer::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-47.25%, -100%);
  transform: translate(-52.5%, -100%);
  width: 150%;
  height: 30em;
  background: url(../img/building.png) repeat-x center bottom/132.25em 30em;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .footer::before {
    transform: translate(-60%, -100%);
  }
}

.f__inner {
  width: 95%;
  max-width: 54.6875em;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .f__inner {
    width: 90%;
  }
}

.f__contact {
  transition: background-color 0.3s ease;
  display: block;
  text-align: center;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 2em 0;
  max-width: 39.6875em;
  margin-left: auto;
  margin-right: auto;
}
.f__contact:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.f__contact:hover .f__contact--text::before {
  transform: translate(0.25em, -50%);
}

.f__contact--text {
  display: inline-block;
  font-size: 1.4375em;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-right: 2.52em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .f__contact--text {
    font-size: 1.25em;
  }
}
.f__contact--text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.65em;
  height: 0.78em;
  background: url(../img/arrow_white.svg) no-repeat center/contain;
  transition: transform 0.3s ease;
}

.f__wrap {
  display: flex;
  margin-top: 5em;
}
@media screen and (max-width: 767px) {
  .f__wrap {
    flex-direction: column;
    margin-top: 2em;
  }
}

.f__info {
  padding-top: 0.5em;
}

.f__info--company {
  font-size: 1.6875em;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.9em;
}

.f__info--text {
  font-size: 1.0625em;
  line-height: 2.1764705882;
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .f__info--text {
    font-size: 0.875em;
  }
}
.f__info--text a {
  font-weight: inherit;
  letter-spacing: 0.08em;
}

.f__links--wrap {
  margin-left: auto;
  display: flex;
  column-gap: 3.75em;
}
@media screen and (max-width: 767px) {
  .f__links--wrap {
    margin-top: 2em;
    margin-right: auto;
  }
}

.f__link a {
  display: block;
  letter-spacing: 0.12em;
  transition: opacity 0.3s ease;
  line-height: 2.875;
}
.f__link a:hover {
  opacity: 0.7;
}

.copyright {
  text-align: center;
  font-size: 0.8125em;
  margin-top: 5.5em;
}
.copyright small {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/*======================================
    TOP
======================================*/
.mv {
  position: relative;
}

.mv__cloud--right {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 39.625em;
  transform: translate(186%, -90%);
}
@media screen and (max-width: 767px) {
  .mv__cloud--right {
    width: 15em;
    transform: translate(110%, -150%);
  }
}

.mv__cloud--left {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 37.625em;
  transform: translate(-216%, -71%);
}
@media screen and (max-width: 767px) {
  .mv__cloud--left {
    width: 13em;
    transform: translate(-108%, 200%);
  }
}

.mv__texts {
  margin-top: 9em;
}
@media screen and (max-width: 767px) {
  .mv__texts {
    margin-top: 2em;
    max-width: 37.5em;
    margin-left: auto;
    margin-right: auto;
  }
}

.mv__lead {
  font-size: 6.25em;
  letter-spacing: -0.01em;
  transform: translateX(-0.05em);
  line-height: 1.12;
  font-family: "brothers", sans-serif;
  color: #164bd6;
}
@media screen and (max-width: 767px) {
  .mv__lead {
    font-size: 3em;
  }
}

.mv__text {
  font-size: 1.25em;
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
  line-height: 2;
  font-weight: 500;
  color: #0049a4;
  margin-top: 1.75em;
}
@media screen and (max-width: 767px) {
  .mv__text {
    font-size: 0.875em;
    margin-top: 1em;
  }
}

.mv__illusts {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: flex-end;
  transform: translate(-20%, -9%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .mv__illusts {
    font-size: 0.3em;
    transform: translate(-32%, 67%);
  }
}

.mv__man {
  width: 35.5em;
}

.mv__lady {
  width: 29.5625em;
  transform: translateX(-12%);
}

.about {
  position: relative;
  margin-top: 25em;
  background-color: #164bd6;
  color: #fff;
  padding-top: 13.5em;
  padding-bottom: 21em;
}
@media screen and (max-width: 767px) {
  .about {
    padding-top: 6em;
    padding-bottom: 8em;
    margin-top: 24em;
  }
}
.about::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-48.5%, -100%);
  width: 134%;
  height: 30em;
  background: url(../img/top/building_about.png) repeat-x center bottom/161em 30em;
}
@media screen and (max-width: 767px) {
  .about::before {
    transform: translate(-43.5%, -100%) scale(-1, 1);
  }
}
.about::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-49.5%, 48.25%);
  width: 181.9375em;
  height: 33em;
  background: url(../img/top/cloud_about.png) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
  .about::after {
    width: 60em;
    height: 10.88em;
  }
}

.about__text {
  max-width: 58.5em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.1em;
  position: relative;
  z-index: 2;
}

.about__building1 {
  position: absolute;
  width: 18.75em;
  top: 0;
  left: 50%;
  transform: translate(-305%, 0%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .about__building1 {
    width: 6em;
    transform: translate(-190%, -50%);
  }
}

.about__building2 {
  position: absolute;
  width: 13.875em;
  top: 0;
  left: 50%;
  transform: translate(-273%, 10%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .about__building2 {
    width: 3em;
    transform: translate(-160%, 10%);
  }
}

.about__building3 {
  position: absolute;
  width: 19.5em;
  top: 0;
  right: 50%;
  transform: translate(331%, -64%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .about__building3 {
    width: 6em;
    transform: translate(220%, -57%);
  }
}

.examples {
  padding-top: 19.75em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .examples {
    padding-top: 16em;
  }
}
.examples .top-section__contents {
  margin-left: auto;
  margin-right: 7em;
}
@media screen and (max-width: 767px) {
  .examples .top-section__contents {
    margin-right: auto;
  }
}

.example__man {
  width: 36.375em;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-111%, -20%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .example__man {
    width: 11em;
    transform: translate(-111%, -30%);
  }
}

.example__cloud {
  width: 95.0625em;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-84%, 100%);
}
@media screen and (max-width: 767px) {
  .example__cloud {
    width: 20em;
    transform: translate(-94%, 133%);
  }
}

.top-section__contents {
  max-width: 40em;
}

.top-section__text {
  margin-top: 2em;
  font-size: 0.875em;
  line-height: 2.3571428571;
}

.company {
  margin-top: 19em;
  position: relative;
  margin-bottom: 27em;
}
@media screen and (max-width: 767px) {
  .company {
    margin-top: 11em;
    margin-bottom: 14em;
  }
}
.company .top-section__contents {
  margin-left: 10em;
}
@media screen and (max-width: 767px) {
  .company .top-section__contents {
    margin-left: auto;
  }
}

.company__lady {
  width: 35.9375em;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(122%, -24%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .company__lady {
    width: 9em;
    transform: translate(118%, -58%);
  }
}

.recruit {
  color: #000;
  padding-top: 23em;
  margin-bottom: 10em;
  margin-bottom: 8.25em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .recruit {
    padding-top: 10em;
    margin-bottom: 5em;
  }
}
.recruit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 27%);
  width: 148.4375em;
  height: 38.25em;
  background: url(../img/top/recruit_cloud.png) no-repeat center/contain;
}
@media screen and (max-width: 767px) {
  .recruit::before {
    width: 60em;
    height: 24.25em;
    transform: translate(-50%, -12%);
  }
}

.recruit__contents {
  background-color: #9be5fa;
  clip-path: polygon(1em 0%, 100% 0, 100% 1em, 100% calc(100% - 1em), calc(100% - 1em) 100%, 0 100%, 0% calc(100% - 1em), 0% 1em);
  width: 95%;
  max-width: 69.25em;
  margin-left: auto;
  margin-right: auto;
  padding: 4.5em 5em;
}
@media screen and (max-width: 767px) {
  .recruit__contents {
    padding: 2.5em 1.75em;
  }
}
.recruit__contents .section-ttl span.en {
  margin-bottom: 0.25em;
}
.recruit__contents .section-ttl span.sm {
  font-size: 0.79em;
  font-weight: inherit;
  letter-spacing: 0.22em;
}

.recruit__text {
  margin-top: 2em;
  font-size: 0.875em;
  line-height: 2.3571428571;
}

.recruit__button {
  max-width: 40.375em;
  margin: 3em auto 0;
}
.recruit__button:hover .more {
  opacity: 0.7;
}
.recruit__button:hover .more span.more__text::before {
  transform: translate(0.2em, -50%);
}
@media screen and (max-width: 767px) {
  .recruit__button {
    margin-top: 2em;
  }
}

.recruit__building1 {
  width: 19.75em;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-322%, -73%);
}
@media screen and (max-width: 767px) {
  .recruit__building1 {
    width: 6em;
    transform: translate(-222%, -73%);
  }
}

.recruit__building2 {
  width: 16.9375em;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-200%, -50%);
}
@media screen and (max-width: 767px) {
  .recruit__building2 {
    display: none;
  }
}

.recruit__building3 {
  width: 25.625em;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(58%, -11%);
}
@media screen and (max-width: 767px) {
  .recruit__building3 {
    width: 10em;
    transform: translate(30%, -11%);
  }
}

.recruit__building4 {
  width: 20.375em;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(314%, -30%);
}
@media screen and (max-width: 767px) {
  .recruit__building4 {
    width: 6em;
    transform: translate(214%, -120%);
  }
}

/*======================================
    Works
======================================*/
.works-fv__wrap {
  position: relative;
}

.works-fv {
  color: #fff;
  display: grid;
  background-color: #064cd7;
}
@media screen and (max-width: 767px) {
  .works-fv {
    display: flex;
    flex-direction: column;
  }
}

.works-fv__bg {
  grid-column: 1/2;
  grid-row: 1/2;
}
@media screen and (max-width: 767px) {
  .works-fv__bg {
    height: 12.5em;
  }
}

.works-fv__img {
  width: 74.58%;
  height: 100%;
  background: url(../img/page/works_fv.jpg) no-repeat 53% 37%/133.4375em 74.8125em;
}
@media screen and (max-width: 767px) {
  .works-fv__img {
    width: 100%;
    background: url(../img/page/works_fv.jpg) no-repeat 53% 37%/cover;
  }
}

.works-fv__contents {
  grid-column: 1/2;
  grid-row: 1/2;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .works-fv__contents::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    width: calc(100% + 2px);
    height: 5em;
    background-color: #064cd7;
    z-index: -1;
    transform: translate(-50%, calc(-100% + 1px));
  }
}

.works-fv__inner {
  position: relative;
  padding-right: 21.875em;
  padding-top: 27.5em;
  padding-bottom: 5.25em;
}
@media screen and (max-width: 767px) {
  .works-fv__inner {
    padding: 5em 0 2.5em;
    max-width: 31.25em;
    margin-left: auto;
    margin-right: auto;
  }
}
.works-fv__inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 75em;
  height: 100%;
  clip-path: polygon(54.375em 0, 100% 0, 100% 100%, 0% 100%);
  background-color: #064cd7;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .works-fv__inner::before {
    display: none;
  }
}

.works-fv__texts {
  margin-top: auto;
  max-width: 32.375em;
  margin-left: auto;
}
.works-fv__texts .page-fv__title {
  text-align: right;
}

.works-fv__man {
  width: 23.75em;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(26%, -30%);
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .works-fv__man {
    width: 8em;
    right: unset;
    left: 0;
    top: 0;
    transform: translate(-28%, -10%);
  }
}

.works-fv__cloud--right {
  width: 81.75em;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(123.5%, -25%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .works-fv__cloud--right {
    width: 20em;
    transform: translate(88%, -53%);
  }
}

.works-fv__cloud--left {
  width: 57.4375em;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-136%, 50%);
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .works-fv__cloud--left {
    width: 15em;
    transform: translate(-120%, 70%);
  }
}

.works-archive {
  position: relative;
  z-index: 3;
  margin: 9.375em 0 23.75em;
}
@media screen and (max-width: 767px) {
  .works-archive {
    margin: 6.5em 0 15em;
  }
}

.works-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6em;
  row-gap: 6em;
}
@media screen and (max-width: 767px) {
  .works-items {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    column-gap: 2.5em;
    row-gap: 3.125em;
  }
}

.works-item {
  position: relative;
  counter-increment: mycounter;
}
@media screen and (max-width: 767px) {
  .works-item {
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
  }
}
.works-item::before {
  content: counter(mycounter, decimal-leading-zero);
  position: absolute;
  top: 0;
  right: 0;
  font-family: "brothers", sans-serif;
  font-size: 5.5625em;
  font-feature-settings: "palt";
  letter-spacing: -0.01em;
  color: #fff;
  z-index: 2;
  transform: translate(9%, -55%);
}
@media screen and (max-width: 767px) {
  .works-item::before {
    font-size: 3.75em;
  }
}

.works-item__link {
  display: block;
  transition: opacity 0.3s ease;
}
.works-item__link:hover {
  opacity: 0.7;
}
.works-item__link:hover .works-item__img img {
  transform: scale(1.05);
}

.works-item__img {
  position: relative;
  overflow: hidden;
}
.works-item__img::before {
  content: "";
  display: block;
  padding-top: 75%;
}
.works-item__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.works-item__title {
  font-size: 1.5625em;
  font-weight: 700;
  color: #164bd6;
  font-feature-settings: "palt";
  line-height: 1.75;
  text-align: justify;
  margin-top: 1em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 767px) {
  .works-item__title {
    font-size: 1.25em;
  }
}

.works-item__text {
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  text-align: justify;
  line-height: 2.2857142857;
  margin-top: 0.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*======================================
    Recruit
======================================*/
.recruit-fv {
  color: #fff;
  background-color: #064cd7;
  position: relative;
}

.recruit-fv__clout--right {
  width: 61em;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(136.5%, 41%);
}
@media screen and (max-width: 767px) {
  .recruit-fv__clout--right {
    width: 20em;
    transform: translate(100%, 67%);
  }
}

.recruit-fv__clout--left {
  width: 41.375em;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-171%, 54%);
}
@media screen and (max-width: 767px) {
  .recruit-fv__clout--left {
    width: 20em;
    transform: translate(-100%, 10%);
    bottom: unset;
    top: 0;
  }
}

.recruit-fv__inner {
  display: flex;
  padding-top: 4.2em;
  column-gap: 0.5em;
}
@media screen and (max-width: 767px) {
  .recruit-fv__inner {
    flex-direction: column;
    padding-top: 1.25em;
    padding-bottom: 2.5em;
  }
}

.recruit-fv__content {
  flex: 1;
  padding-top: 6.5em;
}
@media screen and (max-width: 767px) {
  .recruit-fv__content {
    padding-top: 1.5em;
    max-width: 31.25em;
    margin-left: auto;
    margin-right: auto;
  }
  .recruit-fv__content .page-fv__title {
    text-align: center;
  }
}

.recruit-fv__img {
  width: 58.875em;
  margin-left: -7.5em;
}
@media screen and (max-width: 767px) {
  .recruit-fv__img {
    width: 20.625em;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
}

.recruit-details {
  margin-bottom: 25em;
  position: relative;
}

.recruit-details__man {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(172%, -43%);
  width: 31.625em;
}
@media screen and (max-width: 767px) {
  .recruit-details__man {
    width: 8em;
    top: unset;
    bottom: 0;
    transform: translate(150%, 80%);
  }
}

.recruit-details__cloud {
  width: 45.875em;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-151%, 53%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .recruit-details__cloud {
    width: 15em;
    transform: translate(-120%, 153%);
  }
}

.recruit-details__ttl {
  text-align: center;
  font-size: 1.4375em;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #064cd7;
  margin-top: 6em;
  font-feature-settings: "palt";
}
@media screen and (max-width: 767px) {
  .recruit-details__ttl {
    margin-top: 4em;
  }
}

.recruit__items {
  max-width: 54.5625em;
  margin: 3.6em auto 0;
}
@media screen and (max-width: 767px) {
  .recruit__items {
    margin-top: 2.5em;
  }
}

.recruit__item {
  border-top: 1px solid rgba(35, 24, 21, 0.5);
}
.recruit__item:last-child {
  border-bottom: 1px solid rgba(35, 24, 21, 0.5);
}

.recruit__item--dl {
  display: grid;
  grid-template-columns: 10em auto;
  padding: 1.4em 0 1.25em;
  column-gap: 5.5em;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .recruit__item--dl {
    display: block;
  }
}
.recruit__item--dl dt, .recruit__item--dl dd {
  font-size: 1.1875em;
  font-weight: 700;
  line-height: 1.6842105263;
  font-feature-settings: "palt";
}
.recruit__item--dl dt {
  color: #064cd7;
  letter-spacing: 0.22em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .recruit__item--dl dt {
    text-align: left;
    padding-left: 0;
    font-size: 1.125em;
  }
}
.recruit__item--dl dt.no-pd {
  padding: 0;
}
.recruit__item--dl dd {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .recruit__item--dl dd {
    font-size: 0.875em;
    margin-top: 0.5em;
  }
}

.recruit-details__top {
  margin-top: 5.5em;
}
@media screen and (max-width: 767px) {
  .recruit-details__top {
    margin-top: 2.5em;
  }
}

/*======================================
    Contact
======================================*/
.contact__text {
  font-size: 0.875em;
  letter-spacing: 0.175em;
  line-height: 2.5714285714;
  font-feature-settings: "palt";
  font-weight: 500;
  text-align: center;
  margin-top: 2.5em;
}

.contact {
  margin-bottom: 20.5em;
}
@media screen and (max-width: 767px) {
  .contact {
    margin-bottom: 14em;
  }
}

.contact__form {
  margin-top: 4.25em;
}
@media screen and (max-width: 767px) {
  .contact__form {
    max-width: 31.25em;
    margin: 2.5em auto 0;
  }
}

.contact__list {
  display: grid;
  grid-template-columns: 1fr 50.75em 1fr;
  column-gap: 2.5em;
}
@media screen and (max-width: 767px) {
  .contact__list {
    grid-template-columns: 1fr;
    row-gap: 0.625em;
  }
}
.contact__list:nth-child(n+2) {
  margin-top: 1.05em;
}
@media screen and (max-width: 767px) {
  .contact__list:nth-child(n+2) {
    margin-top: 1.25em;
  }
}

.contact__list--head {
  font-weight: 500;
  text-align: right;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
}
@media screen and (max-width: 767px) {
  .contact__list--head {
    text-align: left;
    font-size: 0.875em;
  }
}
.contact__list--head .required {
  font-weight: inherit;
  color: #e60012;
  font-size: 1.0625em;
  letter-spacing: 0.125em;
}

.contact__input input, .contact__input textarea {
  width: 100%;
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  font-size: 16px;
  font-family: inherit;
  font-feature-settings: "palt";
  padding: 1.25em 1.25em;
  border-radius: 0.375em;
  line-height: 1.75;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .contact__input input, .contact__input textarea {
    padding: 1em 1.25em;
  }
}
.contact__input input::placeholder, .contact__input textarea::placeholder {
  text-align: center;
  color: #99cbe7;
  letter-spacing: 0.175em;
}

.contact__textarea textarea {
  height: 23.625em;
  resize: vertical;
}
@media screen and (max-width: 767px) {
  .contact__textarea textarea {
    height: 15em;
  }
}

.contact__privacy {
  margin-top: 3em;
  text-align: center;
}
.contact__privacy input:checked + span.wpcf7-list-item-label::after {
  opacity: 1;
  transform: rotate(-45deg);
}
.contact__privacy label:hover {
  cursor: pointer;
}
.contact__privacy input {
  display: none;
}

.contact__privacy .wpcf7-list-item-label {
  color: #fff;
  font-feature-settings: "palt";
  font-weight: 700;
  display: inline-block;
  padding-left: 1.5em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .contact__privacy .wpcf7-list-item-label {
    font-size: 0.875em;
  }
}
.contact__privacy .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.9375em;
  height: 0.9375em;
  background-color: #fff;
}
.contact__privacy .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: -0.1em;
  left: 0;
  width: 1em;
  height: 0.4em;
  border-bottom: 4px solid #164bd6;
  border-left: 4px solid #164bd6;
  transform: rotate(-30deg);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.privacy__link {
  display: inline;
  color: #2d5dc2;
  font-weight: inherit;
}

.contact__submit {
  max-width: 40.375em;
  margin: 4em auto 0;
}
@media screen and (max-width: 767px) {
  .contact__submit {
    max-width: 25em;
  }
}
.contact__submit input {
  width: 100%;
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  font-size: 1.625em;
  font-family: inherit;
  font-feature-settings: "palt";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.1em;
  border-radius: 0;
  font-weight: 700;
  background-color: #064cd7;
  letter-spacing: 0.1em;
  color: #fff;
  clip-path: polygon(0.78em 0%, 100% 0, 100% 0.78em, 100% calc(100% - 0.78em), calc(100% - 0.78em) 100%, 0 100%, 0% calc(100% - 0.78em), 0% 0.78em);
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .contact__submit input {
    font-size: 1.25em;
  }
}
.contact__submit input:hover {
  cursor: pointer;
  opacity: 0.7;
}

.contact__top {
  margin-top: 6em;
}
@media screen and (max-width: 767px) {
  .contact__top {
    margin-top: 4em;
  }
}
.contact__top.-thanks {
  margin-bottom: 30em;
}
@media screen and (max-width: 767px) {
  .contact__top.-thanks {
    margin-top: 2em;
    margin-bottom: 13em;
  }
}

/*======================================
    company
======================================*/
.company-fv {
  position: relative;
  background-color: #064cd7;
}

.company-fv__inner {
  padding: 5.9em 0 35.8em;
}
@media screen and (max-width: 767px) {
  .company-fv__inner {
    padding: 2em 0 23em;
  }
}
.company-fv__inner .page-fv__title .en {
  text-align: right;
  padding-right: 0.15em;
}
@media screen and (min-width: 768px) {
  .company-fv__inner .page-fv__title .en {
    font-size: 2.16em !important;
  }
}

.company-fv__img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-44%, 4%);
  width: 92.5em;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .company-fv__img {
    width: 35em;
    transform: translate(-44%, 28%);
  }
}

.company-fv__cloud--right {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(151%, 59%);
  width: 50.1875em;
}
@media screen and (max-width: 767px) {
  .company-fv__cloud--right {
    width: 22em;
    transform: translate(121%, 114%);
  }
}

.company-fv__cloud--left {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-175%, 94%);
  width: 41.375em;
}
@media screen and (max-width: 767px) {
  .company-fv__cloud--left {
    width: 18em;
    transform: translate(-128%, 73%);
  }
}

.company-details {
  margin-bottom: 26em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .company-details {
    margin-bottom: 18em;
  }
}

@media screen and (min-width: 768px) {
  .company-details__ttl {
    font-size: 1.625em;
    margin-top: 6.5em;
  }
}

.company__items {
  max-width: 50.875em;
}
@media screen and (min-width: 768px) {
  .company__items {
    transform: translateX(-1em);
  }
}

@media screen and (min-width: 768px) {
  .company__item--dl {
    grid-template-columns: 18em auto;
    column-gap: 1.25em;
  }
}
.company__item--dl dt {
  padding: 0;
  text-align: left;
  color: #000;
}
.company-details__cloud--right {
  position: absolute;
  right: 50%;
  bottom: 0;
  width: 69.5em;
  transform: translate(135%, -9%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .company-details__cloud--right {
    width: 20em;
    transform: translate(110%, 100%);
  }
}

.company-details__cloud--left {
  position: absolute;
  top: 0;
  left: 50%;
  width: 41.375em;
  transform: translate(-179%, -14%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .company-details__cloud--left {
    width: 20em;
    transform: translate(-99%, -98%);
    z-index: 2;
  }
}

.company-details__lady {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-200%, 66%);
  width: 27.125em;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .company-details__lady {
    width: 10em;
    transform: translate(-140%, 100%);
  }
}

/*# sourceMappingURL=style.css.map */