@charset "UTF-8";

.intro {
    position: relative;
    margin-top: -50px;
    background: var(--c-red);
}

.intro::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 135px;
    background: var(--c-white);
}

.intro_fig {
    grid-column: 1 / 6;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 10;
    max-width: 600px;
    margin-left: var(--margin-offset);
}

.intro_fig > img {
    display: inline-block;
    opacity: 0;
    transform: translateY(10%);
    transition-property: transform, opacity;
    transition-duration: 1s;
}

body.-load .intro_fig > img {
    opacity: 1;
    transform: translateY(0);
}

.intro_main {
    grid-column: 6 / 13;
    align-self: end;
    position: relative;
    z-index: 10;
    padding-top: 230px;
    padding-left: 60px;
}

.intro_cnt {
    color: var(--c-white);
}

.intro_ttl {
    clip-path: inset(0 100% 0 0);
    font-size: 35px;
    line-height: 1.6;
    transition: clip-path 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5s;
    will-change: clip-path;
}

.intro_cnt.-view .intro_ttl {
    clip-path: inset(0 0 0 0);
}

.intro_text {
    clip-path: inset(0 100% 0 0);
    margin-top: 25px;
    transition: clip-path 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s;
    will-change: clip-path;
}

.intro_cnt.-view .intro_text {
    clip-path: inset(0 0 0 0);
}

.intro_write {
    clip-path: inset(0 100% 0 0);
    position: absolute;
    bottom: 90%;
    left: 28.5%;
    z-index: 20;
    transition: clip-path 1s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5s;
    will-change: clip-path;
}

body.-load .intro_write {
    clip-path: inset(0 0 0 0);
}

.about {
    padding-top: 130px;
    background: var(--c-red);
    text-align: center;
}

.about_cnt {
    position: relative;
    padding: 140px min(150px, 6%) 150px;
    background: var(--c-white);
}

.about_cnt::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background: var(--c-red);
    aspect-ratio: 2/1;
}

.about_cnt::after {
    content: "";
    display: block;
    clip-path: circle(calc((var(--inner-width) - 80px) / 2) at bottom);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    background: var(--c-white);
    aspect-ratio: 2/1;
}

.about_ttl {
}

.about_hd {
    position: relative;
    z-index: 10;
}

.about_hd::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -20px;
    left: 56%;
    z-index: 10;
    width: 164px;
    height: 53px;
    background-image: url(/assets/img/recruit/about-text@2x.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}

.about_text {
    position: relative;
    z-index: 10;
    margin-top: 50px;
}

.about_system {
    position: relative;
    z-index: 10;
}

.about_system_ttl {
    margin-top: 56px;
}

.about_system_ttl > span {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-weight: bold;
    font-size: 25px;
}

.about_system_ttl > span::before,
.about_system_ttl > span::after {
    content: "";
    display: block;
    width: 2.5px;
    height: 1.3em;
    background: var(--c-red);
}

.about_system_ttl > span::before {
    transform: rotate(-25deg);
}

.about_system_ttl > span::after {
    transform: rotate(25deg);
}

.about_system_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 24px;
    counter-reset: number;
}

.about_system_list > li {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    position: relative;
    padding: 30px;
    border-radius: 15px;
    background: var(--c-neutral);
    color: var(--c-red);
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    transform: translateY(10%);
    transition-property: transform, opacity;
    transition-duration: 0.8s;
    transition-delay: var(--delay);
}

.about_system_list.-view > li {
    opacity: 1;
    transform: translateY(0%);
}

.about_system_list > li::before {
    content: "0" counter(number);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid;
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-red);
    font-size: 13px;
    font-family: var(--font-en);
    counter-increment: number;
}

.about_system_text {
    margin-top: 50px;
    line-height: 1;
}

.about_system_text > strong {
    display: inline-block;
    padding-bottom: 20px;
    background-image: url(/assets/img/recruit/wave.svg);
    background-position: bottom left;
    background-repeat: repeat-x;
    font-weight: bold;
    font-size: 29px;
    animation: wave-scroll 25s linear infinite;
}

@supports (animation-timeline: scroll()) {
    .about_system_text > strong {
        animation: wave-scroll linear;

        animation-timeline: scroll();
    }
}

@keyframes wave-scroll {
    to {
        background-position-x: 1400px;
    }
}

.about_system_text > strong > em {
    display: inline-block;
    margin: 0 4px;
    color: var(--c-red);
    font-weight: normal;
    font-size: 58px;
    line-height: 1;
    font-family: var(--font-en);
    transform: translateY(0.08em);
}

.border {
    height: 315px;
    background-image: url(/assets/img/recruit/border-text.svg);
    background-position: center;
    background-repeat: repeat-x;
    animation: border-scroll 25s linear infinite;
}

@supports (animation-timeline: scroll()) {
    .border {
        animation: border-scroll linear;

        animation-timeline: scroll();
    }
}

@keyframes border-scroll {
    to {
        background-position-x: -2480px;
    }
}

.philo {
    line-height: 1.6;
}

.philo_cnt {
    padding: 120px 8.6% 120px;
    border-radius: 50px;
    background: var(--c-neutral);
}

.philo_ttl {
    text-align: center;
}

.philo_wrap {
    display: grid;
    gap: 50px;
    margin-top: 60px;
    counter-reset: number;
}

.philo_sec {
    position: relative;
    padding: 70px min(100px, 8%) 60px;
    border-radius: 50px;
    background: var(--c-white);
}

.philo_sec::before {
    content: "0" counter(number);
    position: absolute;
    right: 40px;
    bottom: 0;
    z-index: 0;
    color: var(--c-neutral);
    font-size: 318px;
    line-height: 0.58;
    font-family: var(--font-en);
    counter-increment: number;
    pointer-events: none;
}

.philo_sec.-item2::before {
    top: 240px;
    right: auto;
    bottom: auto;
    left: 20px;
}

.philo_subttl {
    position: relative;
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    padding-bottom: 25px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    word-break: auto-phrase;
}

.philo_subttl::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 46px;
    height: 3px;
    margin-left: -23px;
    background: var(--c-red);
}

.philo_list {
    position: relative;
    z-index: 10;
    display: grid;
    gap: 1em;
}

.philo_list > li {
    padding-left: 1em;
    text-indent: -1em;
}

.philo_text {
    position: relative;
    z-index: 10;
}

.philo_three {
    position: relative;
    z-index: 10;
    margin-top: 45px;
    padding: 35px 55px 35px;
    border-radius: 50px;
    background: var(--c-red);
    color: var(--c-white);
}

.philo_three_ttl {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.philo_three_list {
    margin-top: 20px;
    counter-reset: number;
}

.philo_three_list > li {
    position: relative;
    padding: 24px 0 24px 50px;
    border-top: 1px dashed;
}

.philo_three_list > li::before {
    content: "0" counter(number);
    position: absolute;
    left: 0;
    margin-top: 0.3em;
    font-size: 20px;
    line-height: 1;
    font-family: var(--font-en);
    counter-increment: number;
}

.philo_three_list > li::after {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    left: 36px;
    width: 1px;
    height: 20px;
    background: var(--c-white);
    transform: rotate(30deg);
}

.philo_three_subttl {
    font-weight: bold;
    font-size: 18px;
}

.philo_three_subttl::before {
}

.philo_three_text {
    margin-top: 15px;
}

.philo_imp {
    margin-top: 100px;
    line-height: 1.6;
}

.philo_imp_ttl {
    position: relative;
    z-index: 10;
    text-align: center;
}

.philo_imp_ttl > span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 520px;
    min-height: 80px;
    padding: 12px 24px;
    border: 5px solid var(--c-red);
    border-radius: 40px;
    background: var(--c-white);
    color: var(--c-red);
    font-weight: bold;
    font-size: 25px;
}

.philo_imp_list {
    position: relative;
    z-index: 1;
    margin-top: -40px;
    padding: 50px 50px 30px;
    border: 5px solid var(--c-red);
    border-radius: 25px;
    background: var(--c-white);
    counter-reset: number;
}

.philo_imp_item {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: 40px;
    padding: 50px 0;
}

.philo_imp_item:not(:first-child) {
    border-top: 1px dashed var(--c-border);
}

.philo_imp_subttl {
    display: flex;
    color: var(--c-red);
    font-weight: bold;
    font-size: 25px;
    line-height: 1.5;
}

.philo_imp_subttl::before {
    content: "0" counter(number);
    display: inline-block;
    width: 2.2em;
    padding-top: 0.55em;
    font-weight: normal;
    font-size: 20px;
    line-height: 1;
    font-family: var(--font-en);
    counter-increment: number;
}

.philo_imp_text {
}

.message {
    margin-top: min(290px, calc(290 / 1440 * 100vw));
    padding-bottom: min(160px, calc(160 / 1440 * 100vw));
    border-top-right-radius: 70px;
    background: var(--c-neutral);
}

.message_img {
    grid-column: 1 / 6;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 10;
    max-width: 600px;
    margin-top: max(-140px, calc(-140 / 1440 * 100vw));
    margin-left: var(--margin-offset);
    overflow: hidden;
    border-bottom-right-radius: 50px;
}

.message_main {
    grid-column: 6 / 13;
    align-self: end;
    position: relative;
    z-index: 10;
    padding-top: min(130px, calc(130 / 1440 * 100vw));
    padding-left: min(60px, calc(60 / 1440 * 100vw));
}

.message_hd {
    position: relative;
}

.message_hd_ttl {
    position: relative;
    z-index: 10;
}

.message_hd_text {
    position: absolute;
    bottom: -5px;
    left: 28%;
    z-index: 1;
    height: auto;
}

.message_text {
    margin-top: 20px;
}

@media screen and (max-width: 1239.98px) {
    .philo_imp_item {
        grid-template-columns: 18em 1fr;
    }
}

@media screen and (max-width: 767.98px) {
    .intro {
        margin-top: 0;
    }

    .intro::before {
    }

    .intro_fig {
        grid-column: 1/5;
    }

    .intro_main {
        grid-column: 1/5;
        margin-top: 40px;
        padding: 0;
    }

    .intro_cnt {
    }

    .intro_ttl {
        font-size: 30px;
        line-height: 1.5;
    }

    .intro_text {
    }

    .intro_write {
        right: 10px;
        bottom: 96%;
        left: auto;
        max-width: 80%;
        transform: rotate(-5deg);
    }

    .about {
        padding-top: 50px;
    }

    .about_cnt {
        padding-top: 110px;
    }

    .about_cnt::before {
    }

    .about_cnt::after {
        clip-path: circle(calc((var(--inner-width) - 48px) / 2) at bottom);
    }

    .about_ttl {
    }

    .about_ttl > span::before {
        right: -60px;
        bottom: -24px;
        left: auto;
    }

    .about_text {
        margin-top: 40px;
        text-align: left;
    }

    .about_system {
    }

    .about_system_ttl {
    }

    .about_system_ttl > span {
        gap: 12px;
        font-size: 17px;
    }

    .about_system_ttl > span::before,
    .about_system_ttl > span::after {
        width: 2px;
    }

    .about_system_ttl > span::before {
    }

    .about_system_ttl > span::after {
    }

    .about_system_list {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .about_system_list > li {
        padding: 20px 30px;
        font-size: 18px;
    }

    .about_system_list > li::before {
    }

    .about_system_text {
        margin-top: 40px;
        line-height: 1.5;
    }

    .about_system_text > strong {
        font-size: 22px;
    }

    .about_system_text > strong > em {
        font-size: 45px;
    }

    .border {
        height: 150px;
        background-size: 310px auto;
    }

    .philo {
    }

    .philo_cnt {
        padding: 50px 14px;
        border-radius: 35px;
    }

    .philo_ttl {
    }

    .philo_wrap {
        gap: 30px;
        margin-top: 40px;
    }

    .philo_sec {
        padding: 40px 20px;
        border-radius: 35px;
    }

    .philo_sec::before {
        right: 10px;
        font-size: 50vw;
    }

    .philo_sec.-item2::before {
        top: 380px;
        left: 10px;
    }

    .philo_subttl {
        font-size: 18px;
    }

    .philo_subttl::after {
    }

    .philo_list {
    }

    .philo_list > li {
    }

    .philo_text {
    }

    .philo_three {
        padding: 40px 20px;
        border-radius: 40px;
    }

    .philo_three_ttl {
    }

    .philo_three_list {
    }

    .philo_three_list > li {
        padding: 20px 0;
    }

    .philo_three_list > li::before {
    }

    .philo_three_list > li::after {
        top: 25px;
    }

    .philo_three_subttl {
        padding-left: 2.8em;
    }

    .philo_three_subttl::before {
    }

    .philo_three_text {
        font-size: 15px;
    }

    .philo_imp {
        margin-top: 50px;
    }

    .philo_imp_ttl {
    }

    .philo_imp_ttl > span {
        width: auto;
        min-height: 60px;
        padding: 16px;
        border-width: 3px;
        font-size: 16px;
    }

    .philo_imp_list {
        padding: 50px 20px 10px;
        border-width: 3px;
    }

    .philo_imp_item {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 30px 0;
    }

    .philo_imp_item:not(:first-child) {
    }

    .philo_imp_subttl {
        font-size: 20px;
    }

    .philo_imp_subttl::before {
        width: 2em;
        padding-top: 0.3em;
    }

    .philo_imp_text {
    }

    .message {
        padding-bottom: 60px;
        border-top-right-radius: 0;
    }

    .message_img {
        grid-column: 1/5;
    }

    .message_main {
        grid-column: 1/5;
        padding-top: 40px;
        padding-left: 0;
    }

    .message_hd {
    }

    .message_hd_ttl {
    }

    .message_hd_text {
    }

    .message_text {
    }
}