@charset "UTF-8";

.program {
    background-color: #fff;
    box-shadow: 6px 3px 3px #002030;
    width: 45vw;
    height: 45vw;
    max-width: 300px;
    max-height: 300px;
    padding-bottom: var(--gutter_base);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--gutter_base)*4);
}


.program_title {
    margin-top: calc(var(--gutter_base)*2);
    margin-bottom: calc(var(--gutter_base)*2);
    color: #003260;
    font-size: calc(var(--size_sm)*2);
    font-family: var(--font_sans);
    font-weight: lighter;
}


.program_text {
    color: #003260;
    font-size: calc(var(--size_es)*4);
    line-height: calc(var(--size_es)*6);
    font-family: var(--font_sans);
    font-weight: lighter;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--gutter_base)*4);
    text-align: left;
}

.program_text li {
    list-style: none;
    margin-bottom: var(--gutter_base);
    display: flex;
    justify-content: center;
    align-items: left;
}

.program_pc {
    display: flex;
}

@media screen and (min-width:960px) {
    .program {
        background-color: #fff;
        width: 35vw;
        height: 35vw;
        max-width: 600px;
        max-height: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-top: calc(var(--gutter_base)*6);
    }

    .program_title {
        margin-top: var(--contents_gutter_pc);
        margin-bottom: calc(var(--gutter_base)*6);
        font-size: calc(var(--size_md)*3);
    }

    .program_text {
        margin-top: var(--contents_gutter_pc);
        font-size: 2rem;
        line-height: calc(var(--size_md)*4);
        width: 85%;
    }

    .program_parent {
        margin-top: var(--contents_gutter_pc);
        margin-bottom: var(--contents_gutter_pc);
    }
}

/*===============
効果
===============*/

.effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #004E97;
    color: white;
    box-shadow: 6px 3px 3px #002030;
    border-radius: 100%;
    width: 30vw;
    height: 30vw;
    max-width: 330px;
    max-height: 330px;
    padding-top: var(--gutter_base);
    padding-bottom: var(--gutter_base);
    background-clip: padding-box;
    border: 15px solid rgba(0, 78, 151, 0.5);
}


.effect_title {
    margin-top: 3vw;
    margin-bottom: 1.5vw;
    font-size: 2.5vw;
    font-family: var(--font_sans);
    font-weight: lighter;
}


.effect p {
    font-size: 1.5vw;
    line-height: calc(var(--size_es)*3);
    font-family: var(--font_sans);
    font-weight: lighter;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--gutter_base)*4);
    text-align: left;
}




.program_parent {
    position: relative;
    margin-bottom: var(--contents_gutter);
}

@media screen and (min-width:960px) {
    .effect {
        max-width: 450px;
        max-height: 450px;
        padding-top: calc(var(--gutter_base)*4);
        border: 30px solid rgba(0, 78, 151, 0.5);
    }

    .effect_title {
        font-size: calc(var(--size_md)*3);
        margin-top: var(--contents_gutter);
        margin-bottom: var(--contents_gutter);
    }

    .effect p {
        font-size: 2rem;
        line-height: 3rem;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
}

/*===============
サポート体制
===============*/
.step {
    color: #fff;
    font-weight: lighter;
    margin-left: auto;
    margin-right: auto;
}

.step h3 {
    font-weight: lighter;
    margin-top: calc(var(--gutter_base)* 2);
    margin-bottom: var(--gutter_base);
    font-size: 4vw;
}


.step h4 {
    font-size: 3.5vw;
    white-space: nowrap;
    font-weight: lighter;
    margin-top: calc(var(--gutter_base)* 2);
    margin-bottom: var(--gutter_base);
}

.step p {
    text-align: center;
    font-size: 3.5vw;
}

.step_img {
    margin-top: var(--gutter_base);
    margin-bottom: var(--contents_gutter);
    width: 85vw;
    height: 85vw;
}

.step .underline {
    border-bottom: 2px solid white;
    margin-left: 7.5vw;
    margin-right: 7.5vw;
}

.step section p {
    font-size: 3vw;
    width: 85vw;
    text-align: start;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width:960px) {
    .step {
        margin-top: var(--contents_gutter_pc);
    }

    .step div {
        display: flex;
        margin-bottom: var(--contents_gutter_pc);
    }

    .step .reverse {
        flex-direction: row-reverse;
    }

    .step_img {
        margin-top: var(--gutter_base);
        margin-bottom: var(--contents_gutter);
        width: 40vw;
        height: 40vw;
    }

    .step section p {
        margin-top: var(--contents_gutter_pc);
        font-size: 2rem;
        line-height: 4rem;
        text-align: start;
        width: 50vw;
    }

    .step h3 {
        margin-top: calc(var(--gutter_base)* 2);
        margin-bottom: var(--gutter_base);
        font-size: calc(var(--size_md)*3);
    }

    .step p {
        font-size: calc(var(--size_sm)*3);
        margin-bottom: var(--contents_gutter);
    }

    .step div section {
        padding: calc(var(--gutter_base)*4);
    }

    .step h4 {
        margin-top: calc(var(--contents_gutter)*3);
        font-size: 2.5rem;
    }
}