/* Main Visual */
.mv {
    position: relative;
}

.mv__inner {
    left: 7.84722%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.mv__title {
    animation: titleFadein 1s forwards;
    animation-delay: 2.2s;
    font-size: 8.889vw;
    font-weight: 600;
    justify-self: center;
    letter-spacing: -0.02rem;
    line-height: 1;
    opacity: 0;
}

@keyframes titleFadein {
    0% {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mv__subtitle {
    animation: subtitleFadein 1s forwards;
    animation-delay: 2.3s;
    font-size: 2.778vw;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-inline: auto;
    margin-top: 2.7vw;
    opacity: 0;
    text-align: left;
    width: 100%;
}

@keyframes subtitleFadein {
    0% {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mv__scroll {
    animation: scrollFade 0.6s forwards;
    animation-delay: 3.4s;
    bottom: 6.2vw;
    display: grid;
    font-size: 1.389vw;
    gap: 1.111vw;
    justify-items: center;
    left: 50%;
    letter-spacing: 0.04em;
    line-height: 1.1;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%);
}

@keyframes scrollFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.mv__scroll svg {
    animation: bounceDown 2s ease-in-out infinite;
    height: 3.68vw;
    width: 3.68vw;
}

@keyframes bounceDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.35rem);
    }
    100% {
        transform: translateY(0);
    }
}

@media (max-width: 48rem) {
    .mv__inner {
        left: 4.2667%;
    }

    .mv__title {
        font-size: 16vw;
    }

    .mv__subtitle {
        font-size: 4.8vw;
    }

    .mv__scroll {
        bottom: 13.2vw;
        font-size: 4.266vw;
    }

    .mv__scroll svg {
        height: 9.33vw;
        width: 9.33vw;
    }
}

/* Main Visual Gallery */
.mv__gallery {
    --delay-1: 0.2s;
    --delay-2: 0.4s;
    --delay-3: 0.6s;
    --delay-4: 0.8s;
    --delay-5: 1s;
    --delay-6: 1.2s;
    --delay-7: 1.4s;
    --delay-8: 1.6s;

    --position-1: 14.82vw 7.76vw;
    --position-2: 7.5vw 33.4vw;
    --position-3: 11vw 51.77vw;
    --position-4: 14.82vw 66.4vw;
    --position-5: 40.53vw 15.13vw;
    --position-6: 36.85vw 40.77vw;
    --position-7: 40.5vw 62.7vw;
    --position-8: 33.2vw 81.07vw;
}

@media (max-width: 48rem) {
    .mv__gallery {
        --position-2: 30.3vw 19.9vw;
        --position-3: 9.6vw 58.5vw;
        --position-4: 20.3vw 60.1vw;
        --position-5: 130.3vw 10vw;
        --position-6: 136.9vw 68.3vw;
        --position-7: 140.4vw 0 auto auto;
        --position-8: 110.2vw 60vw;
    }
}

.mv__gallery img {
    object-fit: cover;
    position: absolute;
}

.mv__image {
    animation: mvImageFadeIn 2s forwards 4s;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.mv__image.--1 {
    animation-delay: var(--delay-3);
    height: 7.3vw;
    inset: var(--position-1);
    width: 7.3vw;
}

.mv__image.--2 {
    animation-delay: var(--delay-1);
    height: 7.3vw;
    inset: var(--position-2);
    width: 7.3vw;
}

.mv__image.--3 {
    animation-delay: var(--delay-6);
    height: 7.4965278vw;
    inset: var(--position-3);
    width: 11vw;
}

.mv__image.--4 {
    animation-delay: var(--delay-7);
    height: 11vw;
    inset: var(--position-4);
    width: 14.8vw;
}

.mv__image.--5 {
    animation-delay: var(--delay-5);
    height: 10.9722vw;
    inset: var(--position-5);
    width: 10.9722vw;
}

.mv__image.--6 {
    animation-delay: var(--delay-5);
    height: 7.3vw;
    inset: var(--position-6);
    width: 7.3vw;
}

.mv__image.--7 {
    animation-delay: var(--delay-2);
    height: 11vw;
    inset: var(--position-7);
    width: 11vw;
}

.mv__image.--8 {
    animation-delay: var(--delay-3);
    height: 7.2917vw;
    inset: var(--position-8);
    width: 10.9722vw;
}

@keyframes mvImageFadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 48rem) {
    .mv__image.--1 {
        display: none;
        height: 20vw;
        width: 19.5vw;
    }

    .mv__image.--2 {
        height: 20.10933vw;
        width: 20.3vw;
    }

    .mv__image.--3 {
        display: none;
        height: 19.8vw;
        width: 29.3vw;
    }

    .mv__image.--4 {
        height: 19.936vw;
        width: 30vw;
    }

    .mv__image.--5 {
        height: 20.1vw;
        width: 20.1vw;
    }

    .mv__image.--6 {
        display: none;
        height: 19.6vw;
        width: 29.2vw;
    }

    .mv__image.--7 {
        height: 20.1vw;
        width: 20.1vw;
    }

    .mv__image.--8 {
        height: 20.267vw;
        width: 30.496vw;
    }
}

/* Main Visual Square */
.new-figure-sp {
    display: none;
    height: 100%;
    width: 100%;
}
@media (max-width: 48rem) {
    .new-figure-pc {
        display: none;
    }
    .new-figure-sp {
        display: block;
    }
}

.new-figure {
    height: 100%;
    width: 100%;
}
.new-figure svg {
    height: auto;
    width: 100%;
    width: 100vw;
}
.new-figure rect {
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.new-figure rect.--1 {
    animation-delay: 0.8s;
    animation-name: squareOpacity06;
    opacity: 0;
}
.new-figure rect.--2 {
    animation-delay: 1.05s;
    animation-name: squareOpacity04;
    opacity: 0;
}
.new-figure rect.--3 {
    animation-delay: 1.05s;
    animation-name: squareOpacity06;
    opacity: 0;
}
.new-figure rect.--4 {
    animation-delay: 0.65s;
    animation-name: squareOpacity06;
    opacity: 0;
}
.new-figure rect.--5 {
    animation-delay: 0.95s;
    animation-name: squareOpacity02;
    opacity: 0;
}
.new-figure rect.--6 {
    animation-delay: 0.2s;
    animation-name: squareOpacity02;
    opacity: 0;
}

@keyframes squareOpacity02 {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 0.2;
        visibility: visible;
    }
}
@keyframes squareOpacity04 {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 0.4;
        visibility: visible;
    }
}
@keyframes squareOpacity06 {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 0.6;
        visibility: visible;
    }
}

.mv__square {
    animation: squareFadeIn 1s forwards;
    opacity: 0;
    position: absolute;
    transition: opacity 1s ease-in-out;
    width: 3.75vw;
}

.mv__square.square--orange.square--opacity20 {
    background-color: rgb(225 77 33 / 20%);
}

.mv__square.square--yellow.square--opacity20 {
    background-color: rgb(255 153 64 / 20%);
}

.mv__square.--1 {
    animation-delay: var(--delay-4);
    inset: var(--position-1);
}

.mv__square.--2 {
    animation-delay: var(--delay-6);
    inset: var(--position-2);
}

.mv__square.--3 {
    animation-delay: var(--delay-6);
    inset: var(--position-3);
}

.mv__square.--4 {
    animation-delay: var(--delay-3);
    inset: var(--position-4);
}

.mv__square.--5 {
    animation-delay: var(--delay-5);
    inset: var(--position-5);
}

.mv__square.--6 {
    animation-delay: var(--delay-1);
    inset: var(--position-6);
}

@keyframes squareFadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 48rem) {
    .mv__square {
        width: 9.8vw;
    }

    .mv__square.--2 {
        display: none;
    }

    .mv__square.--6.square--yellow.square--opacity20 {
        background-color: rgb(255 153 64 / 20%);
    }
}

/* Company */
.company {
    background: linear-gradient(0deg, #e14a21 0%, #ff9940 100%);
    overflow: hidden;
}

.company__container {
    display: grid;
    gap: 2.25rem 3rem;
    grid-template-columns: auto auto;
    padding-block: 9.375rem 16.5rem;
    position: relative;
}

.company__head {
    display: grid;
    gap: 2.625rem;
}

.company__content {
    color: var(--color-text-white);
    display: grid;
    gap: 4rem;
}

.company__lead {
    font-size: var(--text-4xl);
    font-weight: 600;
    line-height: 1.4;
}

.company__body {
    display: grid;
    font-size: var(--text-lg);
    gap: 1.825rem;
    line-height: 2;
    width: 100%;
}

.company__loop {
    bottom: 9.375rem;
    display: flex;
    gap: 8rem;
    position: absolute;
    white-space: nowrap;
    width: 100%;
    z-index: -1;
}

.company__loop p {
    animation: loop 40s linear infinite;
    backface-visibility: hidden;
    color: var(--color-text-white);
    font-family: var(--font-inter);
    font-size: 10.25rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    opacity: 0.14;
    transform: translate3d(0, 0, 0);
    white-space: nowrap;
    will-change: transform;
}

@keyframes loop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@-moz-document url-prefix() {
    .company__loop {
        transform: translateZ(0);
    }
}

@media (max-width: 75.75rem) {
    .company__body .tab-none {
        display: none;
    }
}

@media (max-width: 62rem) {
    .company__container {
        gap: 2.25rem;
        grid-template-columns: auto;
        padding-block: 4rem 8.875rem;
    }

    .company__img {
        max-width: 30rem;
        width: 100%;
    }

    .company__content {
        gap: 1.5rem;
    }

    .company__body {
        gap: 1.5rem;
    }

    .company__loop {
        bottom: 3.5rem;
    }

    .company__loop p {
        font-size: 7.5rem;
    }
}

/* Service */
.service {
    position: relative;
}

.service__bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.service__container {
    display: grid;
    gap: 2.25rem 1.875rem;
    grid-template-columns: 26.375rem auto;
    padding-block: 9.375rem;
}

.service__lead {
    font-size: var(--text-4xl);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-top: 8.75rem;
}

.service__lead span {
    display: block;
}

.service__button {
    margin-top: 3rem;
}

.service__button--sp {
    display: none;
}

.service__content {
    aspect-ratio: 1;
    position: relative;
    width: 43rem;
}

.serviceCircle__effect {
    height: 44.125rem;
    left: 50%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 77.125rem;
}

.serviceCircle__base {
    aspect-ratio: 1;
    left: 50%;
    max-width: 43rem;
    object-fit: cover;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.serviceList {
    height: 100%;
    position: relative;
    width: 100%;

    --circle-width: 15rem;
}

.serviceList__item {
    align-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--color-orange);
    display: grid;
    grid-template-columns: auto;
    place-items: center;
    position: absolute;
    text-align: center;
    transform-origin: center;
    transition:
        color 0.3s,
        transform 0.4s;
    width: var(--circle-width);
}

.serviceList__item:hover,
.serviceList__item:focus-visible {
    color: var(--color-text-white);
}

.serviceList__item:hover .serviceList__bg.hover,
.serviceList__item:focus-visible .serviceList__bg.hover {
    opacity: 1;
    visibility: visible;
}

.serviceList__bg {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    width: var(--circle-width);
    z-index: -1;
}

.serviceList__bg.hover {
    opacity: 0;
    transition:
        opacity 0.4s,
        visibility 0.4s;
    visibility: hidden;
}

.serviceList__item.--1 {
    left: 50%;
    top: 0.625rem;
    transform: translateX(-50%);
}

.serviceList__item.--1:hover,
.serviceList__item.--1:focus-visible {
    transform: translateX(-50%) scale(1.1);
}

.serviceList__item.--2 {
    right: -0.625rem;
    top: 50%;
    transform: translateY(-50%);
}

.serviceList__item.--2:hover,
.serviceList__item.--2:focus-visible {
    transform: translateY(-50%) scale(1.1);
}

.serviceList__item.--3 {
    bottom: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
}

.serviceList__item.--3:hover,
.serviceList__item.--3:focus-visible {
    transform: translateX(-50%) scale(1.1);
}

.serviceList__item.--4 {
    left: -0.625rem;
    top: 50%;
    transform: translateY(-50%);
}

.serviceList__item.--4:hover,
.serviceList__item.--4:focus-visible {
    transform: translateY(-50%) scale(1.1);
}

.serviceList__item span {
    font-family: var(--font-inter);
    font-size: 1rem;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.serviceList__item p {
    font-family: var(--font-ibm);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-top: 0.375rem;
}

.serviceList__icon {
    margin-top: 0.625rem;
}

@media (max-width: 75.75rem) {
    .service__container {
        gap: 2.25rem 1.083vw;
        justify-content: center;
        padding-block: 4rem;
    }

    .service__lead {
        font-size: 4.29043vw;
        margin: 9.722vw auto 0 auto;
        max-width: fit-content;
    }

    .service__content {
        width: 47.78vw;
    }

    .serviceCircle__effect {
        height: 56.805vw;
        width: 56.805vw;
    }

    .serviceCircle__base {
        height: 36.805vw;
        width: 36.805vw;
    }

    .serviceList {
        --circle-width: 16.67vw;
    }

    .serviceList__item p {
        font-size: 1.389vw;
    }
}

@media (max-width: 62rem) {
    .service__container {
        grid-template-columns: 1fr;
        justify-content: center;
        padding-block: 4rem;
        padding-inline: 1.25rem;
    }

    .service__lead {
        font-size: var(--text-4xl);
        margin-top: 2.25rem;
    }

    .service__lead span {
        display: inline-block;
    }

    .service__button--pc {
        display: none;
    }

    .service__button--sp {
        display: inline-flex;
    }

    .service__content {
        height: 87.2vw;
        justify-self: center;
        width: 87.2vw;
    }

    .serviceCircle__base {
        height: 67.2vw;
        width: 67.2vw;
    }

    .serviceCircle__effect {
        height: 100vw;
        width: 100vw;
    }

    .serviceList {
        --circle-width: 30.4vw;
    }

    .serviceList__item {
        height: 30.4vw;
        width: 30.4vw;
    }

    .serviceList__item span {
        font-size: 3.2vw;
    }

    .serviceList__item p {
        font-size: 3.467vw;
    }

    .serviceList__icon {
        height: 4.267vw;
        width: 4.267vw;
    }

    .service__button {
        margin-top: 0.75rem;
    }

    .tab-none {
        display: none;
    }

    .tab-open {
        display: block;
    }
}
@media (max-width: 30rem) {
    .service__lead {
        margin: 9.722vw auto 0 0;
    }
}

/* Case Study */
.case {
    background-color: var(--bgc-black);
    color: var(--color-text-white);
    padding-bottom: 6.25rem;
}

.case__head-container {
    padding-bottom: 3rem;
    padding-top: 9.375rem;
}
.case__head {
    align-items: start;
    display: grid;
    gap: 2.25rem 3rem;
    grid-template-columns: auto auto auto;
}

.case__body-container {
    padding-bottom: 4rem;
    padding-top: 6.25rem;
}

.case__body {
    font-size: var(--text-lg);
    line-height: 2;
}

.case .divider__icon-left {
    left: 58%;
    position: absolute;
}

.case__content {
    align-items: center;
    display: flex;
    gap: 3.51%;
    position: relative;
}

.case__number {
    font-size: clamp(3.625rem, 1.48rem + 9.15vw, 8rem);
    left: 0.5625rem;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    transition: opacity 0.3s;
    z-index: 2;
}

.js-case__number.is-active {
    opacity: 1;
}

.case__image {
    flex: 0 1 57.369%;
    overflow: hidden;
    width: 100%;
}

.case__image img {
    width: 100%;
}

.caseList {
    flex: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.caseList__item {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    opacity: 0.5;
}

.caseList__item:hover {
    opacity: 1;
}
.js-case-image {
    opacity: 1;
    transition: opacity 0.3s;
}
.js-case-image.fade-out {
    opacity: 0;
}
.caseList__item a {
    display: flex;
    width: 100%;
}

.caseList__item img {
    transform: rotate(-90deg);
}

.caseList__texts {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.caseList__item + .caseList__item {
    margin-top: 1.5rem;
}

@media (max-width: 62rem) {
    .case {
        padding-bottom: 4rem;
    }

    .case__head-container {
        padding: 4rem 2.25rem 3rem;
    }

    .case__body-container {
        padding: 4.83875rem 2.25rem 3rem;
    }

    .case__button {
        grid-column: span 2;
    }

    .caseList {
        max-width: 100%;
        width: 480px;
    }

    .caseList__texts,
    .caseList__item a {
        opacity: 1;
    }
}

@media (max-width: 48rem) {
    .case__container {
        padding-block: 4rem 7.75rem;
    }

    .case__head {
        grid-template-columns: 1fr;
    }

    .case__button {
        grid-column: auto;
    }

    .case__content {
        flex-direction: column;
    }

    .caseList {
        margin-top: 2rem;
    }

    .caseList__image {
        margin-inline: auto;
        max-width: 88.544%;
    }

    .case .divider__icon-left {
        left: auto;
    }
}

@media (max-width: 36rem) {
    .case__button {
        max-width: 100%;
    }
}

/* News */
.news {
    position: relative;

    --square-position-1: 1rem auto auto 35.8772%;
    --square-position-2: 5.3125rem 5% auto auto;
    --square-position-3: 19.6875rem auto auto 4.91228%;
    --square-position-4: auto 19.772% 17.8rem auto;
    --square-position-5: auto auto 3.5625rem 18.15789%;
}

.news__square {
    position: absolute;
    z-index: -1;
}

.news__square.--1 {
    inset: var(--square-position-1);
}

.news__square.--2 {
    inset: var(--square-position-2);
}

.news__square.--3 {
    inset: var(--square-position-3);
}

.news__square.--4 {
    inset: var(--square-position-4);
}

.news__square.--5 {
    inset: var(--square-position-5);
}

.news__square.--6 {
    display: none;
}

.news__container {
    margin-bottom: 9.375rem;
    margin-top: 9.375rem;
    overflow: hidden;
    position: relative;
}

.newsList {
    display: grid;
    margin-block: 3rem 0;
}

.newsList__item {
    align-items: center;
    border-top: 0.0625rem dashed var(--color-orange);
    display: grid;
    gap: 1rem 2.25rem;
    grid-template-columns: auto 1fr;
    padding-block: 2.5rem;
    transition:
        background-color 0.2s,
        color 0.2s;
}

.newsList__item:last-child {
    border-bottom: 0.0625rem dashed var(--color-orange);
}

.newsList__item:hover,
.newsList__item:focus-visible {
    background-color: color-mix(in srgb, var(--color-orange) 0%, var(--color-orange-light) 5%);
    color: var(--color-orange);
}

.newsList__item:focus-visible {
    outline-offset: 0;
}

.newsList__item:not([href]),
.newsList__item[href=""],
.newsList__item[href="#"] {
    cursor: default !important;
}

.newsList__meta {
    align-items: center;
    display: inline-grid;
    gap: 0.875rem;
    grid-template-columns: auto auto;
    width: fit-content;
}

.newsList__date {
    font-family: var(--font-inter);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 0.9;
}

.newsList__category {
    border: 0.0625rem solid var(--color-orange);
    border-radius: var(--rounded-full);
    color: var(--color-orange);
    display: inline-grid;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    min-width: 6.4375rem;
    padding: 0.375rem 0.5rem 0.325rem;
    place-items: center;
}

.newsList__title {
    align-items: center;
    display: grid;
    font-size: 1.25rem;
    font-weight: 500;
    gap: 0.5rem;
    grid-template-columns: auto 1fr;
    /* height: 64px; */
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-wrap: auto;
    width: 100%;
    word-break: break-all;
}

.newsList__title span {
    display: inline-block;
    margin-top: 0.25rem;
    vertical-align: middle;
}

@media (max-width: 62rem) {
    .newsList__item {
        grid-template-columns: 1fr;
        padding-block: 2rem;
    }
}

.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin: 4rem auto 0 auto;
    width: 303px;
}

.pagination__button {
    color: var(--color-text-base);
    display: inline-grid;
    font-size: 0.875rem;
    height: 2rem;
    letter-spacing: 0em;
    line-height: 1.42;
    place-items: center;
    transition:
        background-color 0.2s,
        color 0.15s;
    width: 2rem;
}

.pagination__button:hover {
    background-color: color-mix(in srgb, var(--color-orange) 100%, transparent 0%);
    color: var(--color-text-white);
}

.pagination__arrow {
    color: var(--color-orange);
    display: inline-grid;
    place-items: center;
}

.pagination__arrow[disabled] svg path {
    fill: #0003;
}

.pagination__button.active {
    background-color: var(--color-orange);
    color: var(--color-text-white);
    pointer-events: none;
}

@media (max-width: 48rem) {
    .news {
        --square-position-1: auto auto 5.5rem 2.8rem;
        --square-position-2: 4.818125rem 8.250825% auto auto;
        --square-position-3: 19.818125rem auto auto 4.8rem;
        --square-position-4: auto 18.772% auto 15.625rem;
        --square-position-5: 29.6rem 3.5625rem auto auto;
        --square-position-6: auto 3.8125rem 16.7rem auto;
    }

    .news__container {
        margin: 4.03125rem 0;
    }

    .news__square {
        width: 10.133vw;
    }

    .news__square.--1 {
        inset: var(--square-position-1);
    }
    .news__square.--2 {
        inset: var(--square-position-2);
    }
    .news__square.--3 {
        inset: var(--square-position-3);
    }
    .news__square.--4 {
        inset: var(--square-position-4);
    }
    .news__square.--5 {
        inset: var(--square-position-5);
    }
    .news__square.--6 {
        display: inline-block;
        inset: var(--square-position-6);
    }

    .newsList__title {
        font-size: 1.125rem;
    }

    .newsList__date {
        font-size: 1rem;
    }
}

/* Recruit */
.recruit {
    position: relative;
}

.recruit__container {
    padding-block: 7.5rem 13.625rem;
    position: relative;
}

.recruit__bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.recruit__head {
    justify-self: end;
}

.recruit__title {
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.recruit__title .sectionTitle__en {
    font-size: 8rem;
}

.recruit__title .sectionTitle__ja {
    justify-self: end;
}

.recruit__content {
    align-items: center;
    display: grid;
    grid-template-columns: 33.125rem 1fr;
    margin-top: 13.125rem;
}

.recruit__text {
    color: var(--color-text-white);
}

.recruit__lead {
    font-size: var(--text-4xl);
    line-height: 1.4;
}

.recruit__body {
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
    line-height: 2;
    margin-top: 1.75rem;
}

.recruit__button {
    display: grid;
    gap: 1.25rem;
    justify-self: end;
    max-width: 22.5rem;
    width: 100%;
}

.recruit__button .recruit__wantedly {
    grid-template-columns: auto 1fr auto;
}

.recruit__wantedly:hover path {
    stroke: var(--color-text-white);
}

.recruit__button .button--transparent::before {
    background-color: rgba(0, 0, 0, 0.3);
}

.recruit__arrowIcon {
    display: inline-grid;
}

@media (max-width: 53.75rem) {
    .recruit__container {
        display: grid;
        gap: 3rem;
        padding-block: 4rem 5.375rem;
    }

    .recruit__content {
        gap: 2.25rem;
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    .recruit__title .sectionTitle__en {
        font-size: 4rem;
    }

    .recruit__title .sectionTitle__ja {
        font-size: 0.875rem;
    }

    .recruit__body {
        margin-top: 8.25rem;
    }

    .recruit__button {
        justify-self: start;
    }
}

@media (max-width: 36rem) {
    .recruit__gradient {
        height: 18rem;
    }
}