@charset "utf-8";

/* ------------------------------
 lead
------------------------------ */

.lead-item-note {
    font-size: 1.4rem;
}

.lead-note {
    margin-top: 4rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8;
    text-align: right;
}

/* ------------------------------
 reason
------------------------------ */

.reason .section-title {
    margin-bottom: 8rem;
}

.reason-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4rem;
    padding: 4rem;
    background-color: var(--c-white);
    border-radius: 3rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.reason-item {
    width: calc((100% - 8rem) / 3); /* 1000px のとき 280px。1025px まで3列を維持 */
}

.reason-item-icon {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    line-height: 140px; /* アイコンを円の上下中央に置く */
    background-color: var(--c-main-pale);
    border-radius: var(--radius-pill);
}

.reason-item-icon img {
    vertical-align: middle;
}

.reason-item-title {
    margin-top: 1.6rem;
    font-size: 1.8rem;
}

.reason-item-text {
    margin-top: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
}

/* ------------------------------
 flow
------------------------------ */

.flow {
    background-color: var(--c-main-pale);
}

.flow-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem 3.6rem; /* 縦 20px。横はカード間 10px ＋ 矢印 16px ＋ 10px */
}

.flow-item {
    width: calc((100% - 7.2rem) / 3); /* 1000px のとき 309px。1025px まで3列を維持 */
    padding: 2rem 0;
    background-color: var(--c-white);
    border-radius: 1.2rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.flow-item:last-child {
    background-color: var(--c-pink-pale);
}

.flow-item:not(:last-child):after {
    right: -2.6rem;
}

.flow-item:nth-child(3n):after {
    display: none; /* 行の最後のカードには矢印を出さない */
}

.flow-item-number {
    display: block;
    padding-top: 1.7rem;
    color: var(--c-main);
    font-family: var(--ff-en);
    font-size: 2rem;
    font-weight: 700;
    background: url(../images/eiken/eiken_icon01.svg) no-repeat center top;
}

.flow-item-text {
    margin-top: .8rem;
    font-family: var(--ff-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.flow-note {
    margin-top: 4rem;
    font-weight: 400;
    line-height: 1.8;
}

/* ------------------------------
 curriculum
------------------------------ */

.curriculum-button {
    margin-top: 4rem;
}

/* ------------------------------
 result
------------------------------ */

.result {
    background-color: var(--c-cream);
}

.result .section-title {
    margin-bottom: 8rem;
}

.result-graph {
    padding: 4rem 0;
    background-color: var(--c-white);
    border-radius: 3rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.result-count {
    position: relative;
    display: inline-block;
    padding: 0 2.6rem;
    color: var(--c-main);
    font-family: var(--ff-heading);
    font-size: 3.2rem;
    font-weight: 700;
}

.result-count:before,
.result-count:after {
    position: absolute;
    top: 50%;
    width: 4px;
    height: 32px;
    content: "";
    background-color: currentColor;
    border-radius: var(--radius-pill);
}

.result-count:before {
    left: .6rem;
    -webkit-transform: translateY(-50%) rotate(-30deg);
        -ms-transform: translateY(-50%) rotate(-30deg);
            transform: translateY(-50%) rotate(-30deg);
}

.result-count:after {
    right: .6rem;
    -webkit-transform: translateY(-50%) rotate(30deg);
        -ms-transform: translateY(-50%) rotate(30deg);
            transform: translateY(-50%) rotate(30deg);
}

.result-count-num {
    font-family: var(--ff-num);
}

.result-graph-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8rem;
    margin-top: 2rem;
}

.result-graph-item {
    width: 278px;
}

.result-graph-item img {
    display: block;
    width: 100%;
    height: auto;
}

.result-graph-note {
    margin-top: 2rem;
    font-weight: 400;
}

.result-list {
    padding: 4rem 6rem;
    margin-top: 2rem;
    text-align: left;
    background-color: var(--c-white);
    border-radius: 3rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.result-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2rem;
}

.result-item + .result-item {
    padding-top: 4rem;
    margin-top: 4rem;
    border-top: 1px dashed var(--c-main);
}

.result-item .eiken-item-head {
    flex-shrink: 0;
    text-align: center;
}

.result-item .eiken-item-body {
    flex: 1;
    min-width: 0;
}

.result-item .eiken-item-name {
    margin-top: 0;
}

.eiken-item-text {
    margin-top: 1rem;
    font-weight: 400;
    line-height: 1.8;
}

/* ------ max-width:767px ------ */
@media (max-width:767px) {
    /* lead */
    .lead-list {
        gap: .6rem 2rem;
    }

    .lead-item {
        width: 132px;
        height: 132px;
    }

    .lead-item-num {
        font-size: 2.4rem;
    }

    .lead-note {
        margin-top: 2rem;
    }

    /* reason */
    .reason .section-title {
        margin-bottom: 4rem;
    }

    .reason-list {
        display: block;
        padding: 4rem 2rem;
    }

    .reason-item {
        width: 280px;
        max-width: 100%;
        margin: 0 auto;
    }

    .reason-item + .reason-item {
        margin-top: 4rem;
    }

    .reason-item-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 1rem;
    }

    .reason-item-icon {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        margin: 0;
        line-height: 80px;
    }

    .reason-item:nth-child(1) .reason-item-icon img {
        width: 57px;
        height: auto;
    }

    .reason-item:nth-child(2) .reason-item-icon img {
        width: 47px;
        height: auto;
    }

    .reason-item:nth-child(3) .reason-item-icon img {
        width: 45px;
        height: auto;
    }

    .reason-item-title {
        margin-top: 0;
        text-align: left;
    }

    .reason-item-title .marker + .sp-br + .marker {
        margin-top: 1rem;
    }

    /* flow */
    .flow-list {
        gap: 1rem;
    }

    .flow-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: calc(50% - .5rem);
        min-height: 126px;
    }

    .flow-item:not(:last-child):after {
        display: none;
    }

    .flow-item-number {
        font-size: 1.8rem;
    }

    .flow-item-text {
        font-size: 1.4rem;
    }

    .flow-note {
        margin-top: 2rem;
        font-size: 1.4rem;
        text-align: left;
    }

    /* result */
    .result .section-title {
        margin-bottom: 4rem;
    }

    .result-graph {
        padding: 2rem 0;
    }

    .result-count {
        padding: 0 2rem;
        font-size: 2rem;
    }

    .result-count:before,
    .result-count:after {
        width: 3px;
        height: 24px;
    }

    .result-count:before {
        left: .4rem;
    }

    .result-count:after {
        right: .4rem;
    }

    .result-graph-list {
        gap: 2rem;
    }

    .result-graph-item {
        width: 135px;
    }

    .result-graph-note {
        font-size: 1.2rem;
    }

    .result-list {
        padding: 2rem 1rem;
        margin-top: 1rem;
    }

    .result-item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .result-item + .result-item {
        padding-top: 2rem;
        margin-top: 2rem;
    }

    .result-item .eiken-item-body {
        flex: none;
        width: 100%;
    }

    .eiken-item-text {
        text-align: left;
    }
}