.recruit-page {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}

.recruit-page > main {
width: 100%;
}

.recruit-hero {
place-content: center space-between;
align-items: center;
flex-flow: row;
width: 100%;
z-index: -2;
}

.recruit-hero__image {
place-content: flex-start;
align-items: flex-start;
border-radius: 0px 150px 150px 0px;
flex-flow: column;
height: 500px;
margin: 160px 0px 0px;
position: relative;
transform: translate(0px, 0px);
transition-duration: 800ms;
transition-timing-function: var(--ease-bounce);
max-width: 1060px;
width: 100%;
z-index: 0;
}

.recruit-hero__image::before {
background-repeat: no-repeat;
background-size: 1176px;
}

.recruit-hero__en {
color: var(--color-text);
font-family: var(--font-heading);
font-size: 32px;
font-weight: 400;
line-height: 1.4;
margin: 104px 0px 0px 170px;
text-align: center;
max-width: calc(100% - 170px);
}

.recruit-hero__title {
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-xl);
font-weight: 700;
line-height: 1.4;
margin: 0px 0px 0px 170px;
text-align: center;
max-width: calc(100% - 170px);
}

.recruit-hero__accent {
background: var(--color-accent);
border-radius: 0%;
height: 676px;
left: 0px;
margin: 0px;
position: absolute;
right: 0px;
top: 600px;
z-index: -3;
}

.recruit-tagline {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column;
margin: -330px -640px 0px 0px;
padding: 0px;
max-width: calc(100% + 640px);
}

.recruit-tagline__word {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 500;
height: 90px;
line-height: 1.4;
margin: 0px 0px 10px;
position: relative;
text-align: center;
}

.recruit-tagline__word--1 {
background: var(--color-accent);
color: var(--color-white);
width: 240px;
}

.recruit-tagline__word--2 {
background: var(--color-accent);
color: var(--color-white);
width: 400px;
}

.recruit-tagline__word--3 {
background: var(--color-bg-white);
color: rgb(0, 0, 0);
width: 300px;
}

.recruit-tagline__word--4 {
background: var(--color-bg-white);
color: rgb(0, 0, 0);
width: 440px;
}

/* Banners */

.recruit-banners {
align-items: center;
flex-flow: row;
gap: 24px;
justify-content: center;
margin: 40px 0px;
width: 100%;
}

.recruit-banners__link {
display: flex;
}

.recruit-banners__link img {
max-width: 100%;
height: auto;
}

.recruit-banners__link--engage-sp {
display: none;
}

.recruit-banners__link--rikunabi img {
height: 90px;
width: auto;
}

.recruit-message {
place-content: stretch space-between;
align-items: stretch;
background: var(--color-accent);
border-radius: var(--radius-md);
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px;
flex-flow: row;
margin: 0px;
padding: 48px 48px 200px;
width: 100%;
}

.recruit-message__images {
flex: 1 1 0%;
margin: 0px 48px 0px 0px;
padding: 0px;
max-width: calc(100% - 48px);
}

.recruit-message__images-inner {
place-content: center;
align-items: center;
flex: 1 1 0%;
flex-flow: row;
padding: 0px;
}

.recruit-message__photo {
border-radius: var(--radius-full);
height: 390px;
margin: 0px 0px 0px -60px;
position: relative;
width: 390px;
max-width: calc(100% + 60px);
}

.recruit-message__photo-sub {
border-radius: var(--radius-full);
height: 290px;
margin: -40px -220px 0px 0px;
position: relative;
width: 290px;
max-width: calc(100% + 220px);
}

.recruit-message__photo-sub::before {
background-size: cover;
filter: none;
}

.recruit-message__photo-sub--right {
margin: 110px -160px 0px 0px;
max-width: calc(100% + 160px);
}

.recruit-message__photo-sub--right::before {
background-position: left top;
filter: brightness(1.5) contrast(0.7);
}

.recruit-message__content {
place-content: flex-start center;
align-items: flex-start;
flex: 1 1 0%;
flex-flow: column;
padding: 0px;
}

.recruit-message__label {
color: var(--color-text);
font-family: var(--font-accent);
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.4;
margin: 24px 0px 0px;
text-align: center;
}

.recruit-message__heading {
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-xl);
font-weight: 600;
line-height: 1.8;
margin: 24px 0px;
text-align: left;
}

.recruit-message__body {
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-base);
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1.8;
margin: 0px;
text-align: left;
max-width: 510px;
width: 100%;
}

.recruit-message__author {
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-base);
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.7;
margin: 24px 0px 40px;
text-align: right;
max-width: 520px;
width: 100%;
justify-content: flex-end;
}

.recruit-interview {
place-content: center flex-start;
align-items: center;
background: var(--color-accent);
flex-flow: column;
padding: 80px 60px;
width: 100%;
}

.recruit-interview__inner {
padding: 80px 60px;
width: 100%;
flex-flow: column;
place-content: center flex-start;
align-items: center;
}

.recruit-interview__card {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
border-radius: 120px;
flex-flow: column;
margin: 0px;
padding: 60px 120px 0px;
max-width: 800px;
width: 100%;
}

.recruit-interview__card::before {
filter: brightness(1.6) contrast(0.8);
}

.recruit-interview__card--second {
margin: 80px 0px 0px;
}

.recruit-interview__heading {
place-content: center;
margin: 80px 0px 40px;
width: 100%;
}

.recruit-interview__heading .section-heading {
align-items: center;
}

.recruit-interview__heading .section-heading__en,
.recruit-interview__heading .section-heading__ja {
text-align: center;
justify-content: center;
}

.recruit-interview__heading .section-heading__line {
background: var(--color-bg-white);
}

.recruit-jobs__heading {
place-content: center;
margin: 80px 0px 0px;
width: 100%;
}

.recruit-jobs__heading .section-heading {
align-items: center;
}

.recruit-jobs__heading .section-heading__en,
.recruit-jobs__heading .section-heading__ja {
text-align: center;
justify-content: center;
}

.recruit-jobs {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
margin: 0px;
overflow: hidden;
padding: 40px 0px;
width: 100%;
}

.recruit-jobs__item {
margin: 0px;
max-width: 920px;
overflow: hidden;
width: 100%;
z-index: 0;
}

.recruit-jobs__item-wrap {
place-content: flex-start;
align-items: flex-start;
flex-flow: row;
overflow: hidden;
padding: 0px;
width: 100%;
}

.recruit-jobs__item--spaced {
margin: 40px 0px 0px;
}

.recruit-jobs__item--part {
place-content: flex-start;
align-items: flex-start;
margin: 40px 0px 0px;
}

.recruit-jobs__item-wrap--wide {
width: 100%;
}

/* Instagram */

.recruit-instagram {
align-items: center;
margin: 64px 0px 0px;
width: 100%;
}

.recruit-instagram__link {
align-items: center;
color: var(--color-text);
flex-flow: row;
gap: 12px;
text-decoration: none;
transition: opacity 0.3s var(--ease-default);
}

.recruit-instagram__link:hover {
opacity: 0.7;
}

.recruit-instagram__icon {
height: 40px;
width: 40px;
}

.recruit-instagram__text {
font-family: var(--font-sans);
font-size: var(--fs-base);
font-weight: 600;
line-height: 1.4;
}

.image[data-img="company-interior"]::before {
background-image: url(/images/company-interior.webp);
}

.image[data-img="recruit-message-01"]::before {
background-image: url(/images/recruit-message-01.webp);
}

.image[data-img="recruit-message-02"]::before {
background-image: url(/images/recruit-message-02.webp);
}

.image[data-img="recruit-hero"]::before {
background-image: url(/images/recruit-hero.webp);
top: 60px;
}

/* Scroll animation visible state */

@media screen and (max-width: 840px) {
.recruit-interview {
  padding: 80px;
  }

.recruit-interview__inner {
  padding: 80px;
  flex-direction: column;
  }

.recruit-interview__card {
  padding: 0px 60px;
  }

.recruit-jobs {
  padding: 40px 48px;
  }
}

@media screen and (max-width: 540px) {
.recruit-banners {
  flex-flow: column;
  gap: 16px;
  }

.recruit-banners__link--engage-pc {
  display: none;
  }

.recruit-banners__link--engage-sp {
  display: flex;
  }

.recruit-banners__link--rikunabi img {
  height: auto;
  width: 300px;
  }

.recruit-hero__image {
  height: 440px;
  width: 460px;
  }

.recruit-hero__en {
  margin: 104px 0px 0px 40px;
  max-width: calc(100% - 40px);
  }

.recruit-hero__title {
  margin: 0px 0px 0px 40px;
  max-width: calc(100% - 40px);
  }

.js-enabled .recruit-hero__accent[data-appear] {
  opacity: 1;
  transform: none;
  transition: none;
  }

.recruit-tagline {
  inset: 0px;
  margin: -330px -260px 0px 0px;
  z-index: 2;
  max-width: calc(100% + 260px);
  }

.recruit-tagline__word {
  inset: 0px;
  font-size: var(--fs-lg);
  height: 40px;
  }

.recruit-tagline__word--1 {
  width: 90px;
  }

.recruit-tagline__word--2 {
  margin: 0px;
  width: 160px;
  }

.recruit-tagline__word--3 {
  margin: 24px 0px 10px;
  width: 110px;
  }

.recruit-tagline__word--4 {
  width: 170px;
  }

.recruit-message {
  place-content: center;
  align-items: center;
  flex-flow: column-reverse;
  margin: 24px 0px 0px;
  padding: 48px 40px;
  }

.recruit-message__images {
  display: none;
  }

.recruit-message__images-inner {
  place-content: center flex-start;
  width: 100%;
  }

.recruit-message__photo {
  inset: 0px;
  height: 320px;
  margin: 0px 0px 0px 50px;
  width: 320px;
  max-width: calc(100% - 50px);
  }

.recruit-message__photo-sub {
  inset: 0px;
  height: 240px;
  margin: 20px 0px 0px -430px;
  width: 240px;
  max-width: calc(100% + 430px);
  }

.recruit-message__photo-sub--right {
  inset: 0px;
  margin: -130px -330px 0px 0px;
  max-width: calc(100% + 330px);
  }

.recruit-message__content {
  place-content: flex-start;
  }

.recruit-interview {
  padding: 120px 40px 80px;
  width: 1060px;
  }

.recruit-interview__inner {
  padding: 80px 40px;
  width: 1060px;
  flex-direction: column;
  }

.recruit-interview__card {
  border-radius: 20px;
  padding: 0px 24px 40px;
  max-width: 100%;
  width: 470px;
  }

.recruit-interview__card--second {
  max-width: 100%;
  width: 480px;
  }

.recruit-jobs {
  padding: 40px 32px 120px;
  }

.recruit-instagram {
  margin: 24px 0px 64px;
  }
}