@charset "UTF-8";

.course .flow {
    background-color: #fee9e4;
    padding: 50px 0 60px;
}

.instructor .flow {
    background-color: #fee9e4;
    padding: 50px 0 30px;

}

.course .flow_box,
.instructor .flow_box {
    width: 100%;
    max-width: 900px;
    background-color: #fff9f8;
    margin: 0px auto 75px;
    padding: 20px 0;
}

.course .content_txt,
.instructor .content_txt {
    font-family: 'kozkagothicpr6';
    text-align: center;
    letter-spacing: 1px;
    padding-bottom: 50px;
}

.course .content_txt {
    font-size: 1.4rem;
    line-height: 1.8;
}

.instructor .content_txt {
    font-size: 1.2rem;
    letter-spacing: 1.7px;
    line-height: 2;
}

.course .content_txt p,
.instructor .content_txt p {
    margin-bottom: 30px;
}

.course .content_txt p:last-child,
.instructor .content_txt p:last-child {
    margin-bottom: 0;
}


.course .flow_box>div:nth-of-type(1),
.instructor .flow_box>div:nth-of-type(1) {
    padding: 15px;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

.course h2,
.instructor h2 {
    font-size: 2rem;
    letter-spacing: 0;
    text-align: center;
    color: #873e3e;
    line-height: .7;
    padding: 5px 0 25px;
}

.course .content_txt>p:nth-of-type(2) span,
.instructor .content_txt p:nth-of-type(3) span{
    background: linear-gradient(transparent 55%, #f0cece 0%);
    display: inline;
}

.course .content_txt p:nth-of-type(2)::after,
.instructor .content_txt p:nth-of-type(3)::after {
    max-width: 690px;
}

.course h2 span {
    color: #59493f;
    font-size: 1.2rem;
}

.course h2::after,
.instructor h2::after {
    background-color: #dabc9e;
    width: 90px;
    margin-top: 1rem;
}

.course .flow_box>.flex-container {
    /* width: 100%; */
    max-width: 495px;
    height: fit-content;
    border: 1px solid #59493f;
    margin: 17px auto;
    padding: 8px 20px;
    justify-content: center;
}

.instructor .flow_box .flow_details {
    max-width: 495px;
    height: fit-content;
    border: 1px solid #59493f;
    margin: 17px auto;
    padding: 8px 20px;
}

.instructor .flow_box .flow_details>div {
    width: fit-content;
    margin: 0 auto;
}

.instructor .flow_box .flow_details>div div:nth-child(3) {
    padding-bottom: 30px;
}


.course .flow_box>.flex-container>div:first-child {
    padding-right: 35px;
}


.course .flow_box:first-child::before,
.instructor .flow_box:first-child::before {
    content: none;
}

.course .flow_box::before,
.instructor .flow_box::before {
    content: "";
    display: block;
    width: 118px;
    height: 50px;
    margin: -77px auto 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%20242%2034%22%20style%3D%22enable-background%3Anew%200%200%20242%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23C1ABA5%3Benable-background%3Anew%20%20%20%20%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C0%20242%2C0%20121%2C34%20%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.course .flex_container.flow_branch {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.8rem;
    letter-spacing: 3px;
}

.course ul.annotation {
    margin: 0 auto;
    padding-left: 1em;
    max-width: 495px;
    list-style-type: '※';
}
.course ul.annotation li {}

.branch_box.box_01,
.branch_box.box_02,
.branch_box.box_03 {
    background-color: #fff9f8;
    width: 30%;
    text-align: center;
}

.branch_box.box_01::before,
.branch_box.box_02::before,
.branch_box.box_03::before {
    content: "";
    display: block;
    width: 118px;
    height: 50px;
    margin: -70px auto 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%20242%2034%22%20style%3D%22enable-background%3Anew%200%200%20242%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23C1ABA5%3Benable-background%3Anew%20%20%20%20%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C0%20242%2C0%20121%2C34%20%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.course .flex_container.flow_branch .branch_box.box_02 {
    margin: 0 35px;
}

.course .flow_branch .box_01 div,
.course .flow_branch .box_02 div,
.course .flow_branch .box_03 div {
    width: 74.2753%;
    margin: 0 auto;
    color: #fff;
}

.course .flow_branch .box_01 h2 {
    color: #91c8a6;
    line-height: 1.2;
}

.course .flow_branch .box_01 div {
    background-color: #91c8a6;
}

.course .flow_branch .box_02 h2 {
    color: #7ababa;
    line-height: 1.2;
    padding: 5px 0 10px;
}

.course .flow_branch .box_02 div:nth-child(2) span {
    line-height: .8;
}

.course .flow_branch .box_02 div {
    background-color: #7ababa;
}

.course .flow_branch .box_02>div:nth-child(2) .transform_scale_ruby {
    font-size: 1rem;
}


.course .flow_branch .box_03 h2 {
    color: #ff9a96;
    line-height: 1.2;
}

.course .flow_branch .box_03 div {
    background-color: #ff9a96;
}

.course .flow_branch .branch_box h2::after {
    width: 100px;
    height: 3px;
    margin-top: 2rem;
}

.course .flow_branch .branch_box div {
    padding: 20px 0;
    margin: 20px auto 90px;
}

.course .flow_branch .branch_box div::before {
    content: "";
    display: block;
    width: 70px;
    height: 20px;
    margin: -75px auto 55px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%20242%2034%22%20style%3D%22enable-background%3Anew%200%200%20242%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23C1ABA5%3Benable-background%3Anew%20%20%20%20%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C0%20242%2C0%20121%2C34%20%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}

.course .flow_branch .branch_box div:nth-child(2)::before {
    content: none;
}

.note {
    margin: 20px auto 0;
}
.note ul {
    font-size: 1.4rem;
}
.note ul li {
    list-style-type: '※';
    padding-left: .5em;
    margin-left: 10px;
}

.course .btn_area {
    margin-top: 70px;
    text-align: center;
    line-height: 1.8;
}

.course .btn_area button {
    background-color: #bfa8a2;
    display: inline-block;
    color: #fff;
    padding: 5px 200px;
    border-radius: 50px;
    font-size: 1.5rem;
    border: none;
    outline: none;
    cursor: pointer;
    letter-spacing: 2px;
}

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

    .course .content_txt,
    .instructor .content_txt {
        text-align: left;
    }
    .course .contents_main,
    .instructor .contents_main {
        padding: 0;
    }

    .course .flex_container.flow_branch {
        display: block;
        max-width: 89.8666%;
        border: 1px solid #873e3e;
    }


    .course .flow_box>.flex-container>div {
        padding-right: 35px 0;
    }

    .course .flow_branch .box_01 h2 {
        padding-top: 30px;
    }

    .course .flow_branch .box_02 h2,
    .course .flow_branch .box_03 h2 {
        padding-top: 15px;
    }

    .course .flow_branch .box_01,
    .course .flow_branch .box_02 {
        height: 390px;
    }

    .course .flow_branch .box_03 {
        height: 710px;
    }

    .branch_box.box_01,
    .course .flex_container.flow_branch .branch_box.box_02,
    .branch_box.box_03 {
        width: 100%;
        max-width: 82.0895%;
        margin: 50px auto;
    }

    .course .flow_box>.flex-container,
    .instructor .flow_box .flow_details {
        max-width: 335px;
        display: block;
        padding: 8px;
    }

    .course .flow_box>div:nth-of-type(1),
    .instructor .flow_box>div:nth-of-type(1) {
        padding: 15px 10px;
        font-size: 1.5rem;
    }

    .instructor .flow_box>div:nth-of-type(1) span {
        font-size: 1.2rem;
    }

    .course .flow_box>.flex-container {
        padding: 8px 20px;
    }

    .instructor .flow_box .flow_details {
        padding: 8px;
    }

    .instructor .flow_box .flow_details>div {
        text-align: center;
        font-size: 1.5rem;
    }

    .course .flow_box,
    .instructor .flow_box {
        width: 100%;
        max-width: 97%;
    }

    .instructor .flow_box:last-child {
        margin: 0px auto 30px;
    }

    .course .btn_area button {
        padding: 5px 20px;
    }

    .branch_box.box_01::before,
    .branch_box.box_02::before,
    .branch_box.box_03::before {
        content: none;
    }

    .course .flex_container.flow_branch::before {
        content: "";
        display: block;
        width: 118px;
        height: 50px;
        margin: -70px auto 60px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%20242%2034%22%20style%3D%22enable-background%3Anew%200%200%20242%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23C1ABA5%3Benable-background%3Anew%20%20%20%20%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C0%20242%2C0%20121%2C34%20%22%2F%3E%0A%3C%2Fsvg%3E%0A);

    }

    .note {
        max-width: 90%;
    }
}