.recruit {
    --color-black: var(--color-text-black);
    --color-main: var(--color-primary);
    --color-main-light: var(--color-blue);
}

/**
 * RecruitHeader
 */
.recruitHeader {
    padding-top: var(--spacing-3xl);
    text-align: center;
}

.recruitHeader__title {
    font-family: var(--font-serif);
    font-size: calc(var(--text-2xl) + 3px);
    font-weight: 200;
    letter-spacing: 0.1em;
    line-height: 1.78;
    text-wrap: balance;
}

.recruitHeader__text {
    font-size: var(--text-md);
    letter-spacing: 0;
    line-height: 2.59;
    margin-inline: auto;
    margin-top: var(--spacing-2xl);
    max-width: fit-content;
}

.recruitHeader__text br.for-sp {
    display: none;
}

@media (max-width: 830px) {
    .recruitHeader__text {
        text-align: left;
    }

    .recruitHeader__title {
        font-size: 20px;
        letter-spacing: 0.05em;
    }

    .recruitHeader__title span {
        display: inline-block;
    }
}

/**
 * Strength
 */
.strength {
    padding-top: var(--spacing-4xl);
}

.strengthBody {
    display: grid;
    gap: var(--spacing-4xl) var(--spacing-xl);
}

.strengthItem {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing-2xl) var(--spacing-3xl);
}

:where(.strengthItem:nth-of-type(even)) {
    flex-direction: row-reverse;
}

.strengthItem__content {
    flex: 1;
}

.strengthItem__heading {
    color: var(--color-main);
    display: inline-grid;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.strengthItem__heading::after {
    background: var(--color-main);
    content: "";
    display: block;
    height: 4px;
    margin-top: 12px;
    transform: translateX(-16px);
    width: 80px;
}

.strengthItem__title {
    font-size: var(--text-2xl);
    font-weight: 200;
    justify-content: center;
    letter-spacing: 0.1em;
    line-height: 1.64;
    margin-top: var(--spacing-2xl);
}

.strengthItem__text {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 2.59;
    margin-top: var(--spacing-xl);
}

.strengthItem__img {
    align-content: center;
    flex: 1;
    margin-right: calc(50% - 50vw);
}

:where(.strengthItem:nth-of-type(even)) .strengthItem__img {
    margin-left: calc(50% - 50vw);
    margin-right: auto;
}

@media (max-width: 1024px) {
    .strengthItem {
        column-gap: var(--spacing-lg);
    }

    .strengthItem + .strengthItem {
        margin-top: var(--spacing-4xl);
    }
}

@media (max-width: 992px) {
    .strengthItem {
        flex-direction: column;
    }

    .strengthItem__title br {
        display: none;
    }

    .strengthItem__img {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .strengthItem__title br {
        display: block;
    }
}

/**
 * Thoughts
 */
.thoughts.first {
    margin-top: clamp(140px, 23.7037vw, 256px);
}

.thoughtsHeader {
    text-align: center;
}

.thoughtsHeader__title {
    font-size: calc(var(--text-2xl) + 3px);
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-inline: auto;
    padding-bottom: var(--spacing-xl);
    position: relative;
}

.thoughtsHeader__title::after {
    background: var(--color-main);
    bottom: 6%;
    content: "";
    display: block;
    height: 4px;
    left: 50%;
    max-width: 450px;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
}

.thoughtsHeader__text {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    margin-top: var(--spacing-xl);
}

.thoughtsBody {
    margin-top: 72px;
}

.thoughtsItem__header {
    position: relative;
}

.thoughtsItem__title {
    color: var(--bgc-base);
    font-size: calc(var(--text-2xl) + 3px);
    font-weight: 200;
    left: 50%;
    letter-spacing: 0.1em;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.thoughtsItem__img {
    display: grid;
    gap: 40px var(--spacing-3xl);
    grid-template-columns: 1fr 1fr;
    margin-top: var(--spacing-3xl);
}

.thoughtsInterview {
    margin-top: var(--spacing-3xl);
}

.thoughtsContent {
    display: grid;
    gap: 0 10px;
    grid-template-columns: 30% 70%;
}

.thoughtsContent__question {
    align-items: center;
    border-top: 1px solid var(--color-main-light);
    display: flex;
    font-size: var(--text-xl);
    font-weight: 200;
    line-height: 1.78;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.thoughtsContent .thoughtsContent__question:nth-last-child(2) {
    border-bottom: 1px solid var(--color-main-light);
}

.thoughtsContent__answer {
    border-top: 1px solid var(--color-black);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.94;
    padding: var(--spacing-xl) 0;
}

.thoughtsContent .thoughtsContent__answer:nth-last-child(1) {
    border-bottom: 1px solid var(--color-black);
}

@media (max-width: 992px) {
    .thoughtsItem__img,
    .thoughtsContent {
        grid-template-columns: 1fr;
    }

    .thoughtsContent__question {
        border-bottom: 1px solid;
        border-color: var(--color-black);
        border-top: none;
        padding-block: var(--spacing-md);
        padding-inline: 0;
    }

    .thoughtsContent .thoughtsContent__question:nth-last-child(2) {
        border-color: var(--color-black);
    }

    .thoughtsContent__answer {
        border-bottom: 1px solid var(--color-black);
        border-top: none;
        padding-block: var(--spacing-md);
    }

    .thoughtsContent {
        border-top: 1px solid var(--color-black);
    }
}

@media (max-width: 992px) {
    .thoughtsItem__header {
        height: 160px;
    }

    .thoughtsItem__header img {
        height: 100%;
    }

    .recruitHeader__text br.for-sp {
        display: block;
    }
}

@media (max-width: 640px) {
    .strengthItem__heading::after {
        transform: translateX(-8px);
    }
}

.number {
    background: var(--linear-gradient-primary);
    margin-top: calc(var(--spacing-4xl) + 20px);
    padding: 100px 0 80px;
}

.number__container {
    margin-inline: auto;
}

.number__title {
    color: var(--color-text-white);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 300;
    text-align: center;
}

.numberCard__area {
    display: grid;
    gap: var(--spacing-xl) 2.325%;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    margin-top: var(--spacing-3xl);
}

.numberCard {
    background-color: var(--color-text-white);
    border-radius: 20px;
    font-family: var(--font-sans);
    padding: 40px 24px;
    text-align: center;
}

.numberCard__title {
    align-items: baseline;
    align-items: center;
    color: var(--color-primary);
    display: flex;
    font-size: 22px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.2em;
    line-height: 1.4166;
    min-height: 74px;
    vertical-align: baseline;
}

.numberCard__subtitle {
    color: var(--color-primary);
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4166;
}

.numberCard__contents {
    margin: 0 auto;
    position: relative;
    width: fit-content;
}

.munberCard__number-left {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 700;
    left: -29px;
    position: absolute;
    top: 16px;
    writing-mode: vertical-rl;
}

.munberCard__number-l {
    color: #333;
    font-family: var(--font-ozwald);
    font-size: 88px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

.munberCard__number-s {
    color: #333;
    font-size: 44px;
    line-height: 1.2;
}

.numberCard__year {
    color: var(--color-primary);
    letter-spacing: 0.1em;
    margin-top: 16px;
}

.spacing--7 {
    letter-spacing: -0.07em;
}

.spacing-5 {
    letter-spacing: 0.05em;
}

.fz-18 {
    font-size: 18px;
}

@media (max-width: 1299px) {
    .numberCard {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}

@media (max-width: 768px) {
    .number {
        padding: 64px 0;
    }

    .numberCard__area {
        gap: 24px;
    }

    .numberCard {
        padding: 20px;
    }

    .numberCard__title {
        min-height: 64px;
    }
}

/**
 * System
 */
.system {
    background-color: #eff1ea;
    padding-block: calc(var(--spacing-4xl) + 20px) 10px;
}

.system__container {
    background-color: rgb(255 255 255 / 63%);
    border-radius: 40px;
    box-shadow: 2px 2px 2px rgb(0 0 0 / 8%);
    margin-inline: auto;
    padding: 44px 0 64px;
    width: min(90%, 1094px);
}

.system__title {
    padding-bottom: 32px;
    text-align: center;
}

.system hr {
    border-color: var(--color-primary);
}

.system__contents {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 52px auto 0;
    max-width: fit-content;
}

.system__lists {
    display: flex;
    gap: 28px;
    justify-content: center;
}

.systemTag {
    align-items: flex-end;
    background-color: var(--color-text-white);
    border: 1px solid #00458d;
    border-radius: 8px;
    display: flex;
    font-family: var(--font-sans);
    font-size: 18px;
    justify-content: center;
    line-height: 1;
    min-width: 206px;
    padding: 13px 8px 15px;
}

.systemTag--wide {
    padding-inline: 20px;
}

.systemTag--tight {
    min-width: 120px;
}

.systemTag span {
    font-size: 11px;
}

.education__container {
    margin-top: 48px;
}

.education__contents {
    align-items: center;
    display: flex;
    gap: 4.2%;
    margin: 52px auto 0;
    max-width: 947px;
    padding: 0 16px;
}

.hierarchy__img {
    flex: 0 1 46.25%;
}

.education__lists {
    flex: 0 1 50%;
}

.education__list {
    font-family: var(--font-sans);
    font-size: 24px;
    padding-left: 28px;
    position: relative;
}

.education__list + .education__list {
    margin-top: 24px;
}

.education__list::before {
    background-color: var(--color-primary);
    border-radius: var(--rounded-full);
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
}

@media (max-width: 960px) {
    .system__contents {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 500px;
        width: 92%;
    }

    .system__lists {
        display: contents;
    }

    .systemTag,
    .systemTag--tight {
        min-width: auto;
    }

    .systemTag {
        padding-block: 12px 14px;
    }
}

@media (max-width: 768px) {
    .system {
        padding: 64px 0;
    }

    .education__contents {
        flex-direction: column;
    }

    .education__lists {
        margin-top: 40px;
    }
}

@media (max-width: 640px) {
    .system__contents {
        flex-direction: column;
    }
}

/**
 * FAQ
 */
.faq {
    background-color: #eff1ea;
    padding: 100px 0 80px;
}

.faq__container {
    margin-top: 40px;
}

.faq__title {
    color: var(--color-primary);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-align: center;
}

summary {
    display: block;
    list-style-type: none;
}

summary::marker {
    content: "";
}

summary::-webkit-details-marker {
    display: none;
}

.faq__details {
    background-color: var(--color-text-white);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
}

.faq__details summary {
    align-items: center;
    border-radius: 10px;
    display: flex;
    font-family: var(--font-sans);
    gap: var(--spacing-md);
    justify-content: space-between;
    padding: 1em;
    padding-left: 48px;
    position: relative;
    transition: background-color var(--transition-duration);
    vertical-align: baseline;
}

.faq__details summary:focus-visible {
    outline: 4px solid var(--color-primary);
}

@media (any-hover: hover) {
    .faq__details summary:hover {
        background-color: color-mix(in srgb, var(--color-primary), var(--color-text-white) 96%);
        cursor: pointer;
    }
}

.faq__details[open] summary:hover {
    background-color: transparent;
}

.faq__details summary::before {
    color: var(--color-primary-dark);
    content: "Q";
    font-size: 24px;
    left: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.faq__details summary::after {
    background: url("../../../images/number/icon-arrow_down.svg") no-repeat center center / contain;
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
}

.faq__details[open] summary::after {
    transform: rotate(180deg);
}

.faq__details + .faq__details {
    margin-top: 16px;
}

.faq__answer {
    font-family: var(--font-sans);
    margin-left: 2em;
    padding-bottom: 1em;
}

.q {
    color: var(--color-primary);
    font-family: Jost, "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-right: 0.5em;
}

.guidelines {
    margin: 94px 0 32px;
}

.guidelines__title {
    font-size: calc(var(--text-2xl) + 3px);
    font-weight: 100;
    letter-spacing: 0.1em;
    line-height: 1.7778;
    margin: 0 auto;
    max-width: 447px;
    padding-bottom: 24px;
    position: relative;
    text-align: center;
}

.guidelines__title::after {
    background: var(--linear-gradient-primary);
    bottom: 0%;
    content: "";
    height: 5.1679px;
    left: 0%;
    position: absolute;
    width: 100%;
}

.guidelines__contents {
    margin: 80px 0;
}

.guidelines__h3 {
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
    font-size: calc(var(--text-lg) + 2px);
    font-weight: 300;
    letter-spacing: 0.1em;
    padding-block: 14px;
    text-align: center;
}

.guidelines__table {
    margin: var(--spacing-4xl) auto 0;
    max-width: 932px;
}

.guidelines__list {
    align-items: start;
    border-bottom: 1.2px solid #c7c7c7;
    display: grid;
    grid-template-columns: 180px 1fr;
    padding-block: var(--spacing-lg);
    row-gap: 8px;
}

.guidelines__list dt {
    align-items: center;
    color: var(--color-primary);
    display: flex;
    flex: 0 0 180px;
    justify-content: flex-start;
    letter-spacing: 0.2em;
    line-height: 2.1;
    margin-inline: auto;
    text-align: left;
    width: 80px;
}

.guidelines__list dd {
    flex: 1;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.9375;
}

@media (max-width: 640px) {
    .guidelines__list {
        grid-template-columns: 1fr;
    }

    .guidelines__list dt {
        justify-content: flex-start;
        width: 100%;
    }

    .guidelines__list dt br {
        display: none;
    }
}

/**
 * Recruit Flow
 */
.lineTitle {
    color: var(--color-primary-dark);
    line-height: 2.4;
    padding: 0 24px;
    position: relative;
    text-align: center;
    width: fit-content;
    width: 100%;
}

.lineTitle span {
    background-color: var(--color-text-white);
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 0.1em;
    padding: 0 24px;
    position: relative;
    width: fit-content;
    z-index: 2;
}

.lineTitle::before {
    background-color: var(--color-primary-dark);
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.flowCard__wrapper {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(5, 1fr);
    justify-content: center;
    margin-top: var(--spacing-3xl);
    position: relative;
}

.newGradientFlow .flowCard__wrapper {
    grid-template-columns: repeat(6, 1fr);
}

.flowCard__wrapper::after {
    background-color: #2ca6df;
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.flowCard {
    align-items: center;
    background-color: var(--color-text-white);
    border: 2px solid var(--color-primary-dark);
    border-radius: 8px;
    color: var(--color-primary-dark);
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 18px;
    height: 106px;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.flowCard span {
    color: #333;
    display: block;
    font-size: 14px;
}

.flow__button {
    margin: 56px auto 0;
}

.flow__button a {
    align-items: center;
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
    display: flex;
    font-family: var(--font-sans);
    height: 78px;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 1em 2em;
    width: 497px;
}

.flow__texts {
    font-family: var(--font-sans);
    line-height: 1.93;
    margin-top: 24px;
    text-align: center;
}

@media (max-width: 1024px) {
    .flowCard__wrapper {
        gap: 24px 16px;
    }
}

@media (max-width: 960px) {
    .flowCard__wrapper,
    .newGradientFlow .flowCard__wrapper {
        grid-template-columns: 1fr;
    }

    .flowCard__wrapper::after {
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 6px;
    }
}

@media (max-width: 768px) {
    .flow__texts {
        text-align: left;
    }
}

.apply {
    margin-top: calc(var(--spacing-4xl) + 20px);
}

.applyCta {
    background-color: #eff1ea;
    display: flex;
    font-family: var(--font-sans);
    margin: 24px auto;
    padding: 40px;
    position: relative;
}

.applyCta__block {
    align-items: center;
    display: grid;
    flex: 0 1 50%;
}

.applyCta__block:first-of-type {
    border-right: 3px solid var(--color-primary-dark);
}

.applyCta__texts {
    height: fit-content;
    margin: 0 auto;
    width: fit-content;
}

.applyCta__title {
    color: var(--color-primary-dark);
    font-family: var(--font-sans);
    font-size: 24px;
    line-height: 2.134;
}

.applyCta__text {
    font-size: 18px;
    line-height: 1.722;
}

.applyCta__tel {
    color: var(--color-primary-dark);
    display: inline-block;
    font-family: var(--font-jost);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.applyCta__tel span {
    display: inline-block;
    font-size: 22px;
}

.applyCta__flex {
    align-items: baseline;
    display: flex;
    gap: 16px;
}

.apply__button {
    margin: 40px 0 80px;
}

.apply__button a {
    background: var(--linear-gradient-primary);
    display: grid;
    font-family: Jost, "Noto Serif JP", serif;
}

.apply__button span {
    display: block;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 932px) {
    .applyCta {
        flex-direction: column;
        padding: 16px;
    }

    .applyCta__block:first-of-type {
        border-bottom: 2px solid var(--color-primary-dark);
        border-right: none;
        padding-bottom: 24px;
    }

    .applyCta__block:nth-of-type(2) {
        padding-top: 24px;
    }
}