.for-client {
    padding-top: 3.6rem;
    padding-bottom: 4.8rem;

    background-image: url(../../images/school/for-client_illust01.png), url(../../images/school/for-client_illust02.png);
    background-position: left 4.6rem bottom 6.4rem, right 4.7rem bottom 6.4rem;
    background-repeat: no-repeat;
    background-size: 8.0rem auto, 7.7rem auto;
}

.for-client__lead {
    text-align: center;
    font-weight: 700;
    font-size: max(18px, 3.2rem);
}

.for-client__txt {
    margin-top: 2rem;
    line-height: 2.2;
    width: 68%;
    margin-inline: auto;
}

@media screen and (max-width: 1024px) {
    .for-client {
        background-position: left 4.6rem top 6.4rem, right 4.7rem top 6.4rem;
    }

    .for-client__txt {
        width: 90%;
    }
}

/* ------------------------------------- */

.reason {
    position: relative;
    /* overflow: hidden; */
}

.reason::before {
    content: '';
    width: 108rem;
    max-width: 100%;
    height: calc(100% + 8rem + 2rem);
    background: var(--light-blue);
    display: block;
    position: absolute;
    left: 0;
    top: -8rem;
    z-index: -1;
}

.reason__content {
    width: 60rem;
    width: 50%;
}

.reason-list {
    counter-reset: number 0;
    position: relative;
}

.reason-list::before {
    content: '';
    width: 0;
    height: 100%;
    border-right: 1px solid var(--black);
    display: block;
    position: absolute;
    top: 0;
    left: max(21px, 3rem);
    z-index: -1;
}

.reason-list__item {
    margin-top: max(30px, 5.3rem);
    padding-left: 9.3rem;
    position: relative;
}

.reason-list__item::before {
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
    position: absolute;
    top: -.3em;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue);
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    color: var(--white);
    font-family: var(--font-en);
    font-weight: 500;
    font-size: max(18px, 2.6rem);
    line-height: 1;
}

.reason-list__item dt {
    font-weight: 700;
    font-size: max(18px, 2.6rem);
    color: var(--blue);
}

.reason-list__item dd {
    margin-top: 0.4em;
}

@media screen and (max-width: 640px) {}

/* ------------------------------------- */

.reason__image-wrap {
    width: 100%;
    position: absolute;
    top: 5rem;
    right: 0;
}

.reason__image {
    position: absolute;
}

.reason__image01 {
    width: calc(662 / 1440 * 100%);
    height: 43.6rem;
    object-fit: cover;
    object-position: center bottom;
    top: 15rem;
    right: 0;
}

.reason__image02 {
    width: 27rem;
    top: 71rem;
    right: calc(225 / 1440 * 100%);
}

.reason__image03 {
    width: 19.7rem;
    top: 85.7rem;
    right: calc(71 / 1440 * 100%);
}

.reason__image04 {
    width: 29rem;
    top: 101.5rem;
    right: calc(311 / 1440 * 100%);
}


@media screen and (max-width: 1024px) {

    .reason__image-wrap {
        top: 20rem;
    }

}

@media screen and (max-width: 640px) {

    .reason__content {
        width: 100%;
    }

    .reason__image-wrap {
        position: relative;
        top: unset;
        height: 140vw;
        margin-top: 10vw;
    }

    .reason__image01 {
        width: calc(264 / 375 * 100vw);
        height: auto;
        max-height: auto;
        top: 0;
        right: -5vw;
    }

    .reason__image02 {
        width: calc(180 / 375 * 100vw);
        top: calc(220 / 375 * 100vw);
        right: unset;
        left: 0;
    }

    .reason__image03 {
        width: calc(120 / 375 * 100vw);
        top: calc(300 / 375 * 100vw);
        right: calc(50 / 375 * 100vw);
    }

    .reason__image04 {
        width: calc(147 / 375 * 100vw);
        top: calc(420 / 375 * 100vw);
        right: calc(120 / 375 * 100vw);
    }
}

/* ------------------------------------- */

.follow__inner {
    padding: 6rem;
    padding-top: 7rem;
    width: min(90vw, 1200px);
    margin-inline: auto;
}

.follow__title {
    text-align: center;
    font-weight: 500;
    font-size: max(18px, 2.6rem);
    line-height: 1.5;
}

.follow__title-num {
    color: var(--blue);
    font-family: var(--font-en);
    font-weight: 700;
    font-size: max(36px, 7.2rem);
}

.follow-list {
    counter-reset: number 0;
    display: flex;
    gap: 6rem;
    flex-wrap: wrap;
    margin-top: 6rem;
}

.follow-list__item {
    position: relative;
    flex: 0 0 calc((510/ 1080) * 100%);
}

.follow-list__item::before {
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
    position: absolute;
    top: -.55rem;
    left: -.83em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: var(--yellow);
    width: 2.22em;
    height: 2.22em;
    border-radius: 50%;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 3.6rem;
}

.follow-list__item::after {
    position: absolute;
    top: 1em;
    left: -1.33em;
    content: 'follow';
    text-transform: uppercase;
    font-family: var(--font-en);
    font-weight: 500;
    font-size: .9rem;
    display: block;
}

.follow-list__image img {
    object-fit: cover;
    aspect-ratio: 510 / 255;
}

.follow-list__title {
    margin-top: .8em;
    color: var(--blue);
    font-weight: 700;
    font-size: max(18px, 2.4rem);
}

.follow-list__txt {
    margin-top: .8em;
}

@media (width >=640px) {

    /* 最後の3項目のみ3列 */
    .follow-list__item:nth-child(n+5) {
        flex: 0 0 calc((320/ 1080) * 100%);
    }

    .follow-list__item:nth-child(n+5) .follow-list__image img {
        aspect-ratio: 320 / 220;
    }
}

@media screen and (max-width: 640px) {
    .follow__inner {
        padding: 5vw;
        padding-top: 40px;
    }

    .follow-list__item {
        flex: 0 0 100%;
    }

    .follow-list__item::before {
        top: -.5em;
        left: -.5em;
        font-size: 28px;
    }

    .follow-list__item::after {
        top: -.5em;
        left: -.2em;
        font-size: 8px;
    }
}

/* ------------------------------------- */

.flow .section-title {
    justify-content: center;
}

.flow-list {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 7.2rem;
}

.flow-list__item {
    position: relative;
    display: flex;
    gap: 2.8rem;
}

.flow-list__item-content {
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
}

.flow-list__item:nth-child(n+2)::before {
    content: '';
    display: block;
    width: 100%;
    border-top: 1px dashed #868686;
    position: absolute;
    top: -3.6rem;
}

.flow-list__item:nth-child(n+2)::after {
    content: '';
    display: block;
    width: 8.4rem;
    height: 2.2rem;
    background: var(--light-blue) url(../../images/icon-trg-blue.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: -4.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.flow-title-lg {
    grid-column: 1/2;
    grid-row: 1/3;
    /* 上から下までみたいなんできる？ */
    writing-mode: vertical-rl;
    font-weight: 700;
    font-size: max(16px, 2.4rem);
    color: var(--white);
    text-align: center;
    padding: 1em;
    letter-spacing: .2em;
}

.flow-content-list {
    display: flex;
    padding-block: 2rem;
}

.flow-content-list dt {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: max(18px, 2.4rem);
    flex: 0 0 25%;
}

.flow-content-list dd {
    border-left: 1px dashed #868686;
    flex: 0 0 75%;
    padding-left: 3.2rem;
    padding-right: 4rem;
}

.flow-content-list h4 {
    color: var(--blue);
    font-weight: 700;
    font-size: max(16px, 1.8rem);
}

.flow-content-list p {
    margin-top: 0.33em;
}

.flow-content-list p em {
    font-weight: 700;
    font-style: normal;
}

@media screen and (max-width: 640px) {

    .flow-title-lg {
        padding: 1em .6em;
        text-align: left;
    }

    .flow-content-list {
        padding: 5vw;
        display: block;
    }

    .flow-content-list dt {
        padding-bottom: 1em;
    }

    .flow-content-list dd {
        border: none;
        border-top: 1px dashed #868686;
        padding: 0;
        padding-top: 1em;
    }
}

/* ------------------------------------- */