@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700;900&display=swap');

:root {
    --brown: #764800;
    --light-brown: #faf3e9;
    --yellow: #ebca00;
    --light-yellow: #fffcdb;
    --gray: #eee;
    --white: #FFFFFF;
    --white-rgb: 255, 255, 255;
    --black: #272422;
    --black-rgb: 0, 0, 0;
    --spacer: 10px;
    --font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-size-base: 1.15rem;
}

/* --- margin ---*/
#private_lessons_online {
    .mt-0 {
        margin-top: calc(var(--spacer)*0) !important;
    }

    .mt-1 {
        margin-top: calc(var(--spacer)*1) !important;
    }

    .mt-2 {
        margin-top: calc(var(--spacer)*2) !important;
    }

    .mt-3 {
        margin-top: calc(var(--spacer)*3) !important;
    }

    .mt-4 {
        margin-top: calc(var(--spacer)*4) !important;
    }

    .mt-5 {
        margin-top: calc(var(--spacer)*5) !important;
    }

    .mt-8 {
        margin-top: calc(var(--spacer)*8) !important;
    }

    .mt-10 {
        margin-top: calc(var(--spacer)*10) !important;
    }

    .mb-0 {
        margin-bottom: calc(var(--spacer)*0) !important;
    }

    .mb-1 {
        margin-bottom: calc(var(--spacer)*1) !important;
    }

    .mb-2 {
        margin-bottom: calc(var(--spacer)*2) !important;
    }

    .mb-3 {
        margin-bottom: calc(var(--spacer)*3) !important;
    }

    .mb-4 {
        margin-bottom: calc(var(--spacer)*4) !important;
    }

    .mb-5 {
        margin-bottom: calc(var(--spacer)*5) !important;
    }

    .mb-8 {
        margin-bottom: calc(var(--spacer)*8) !important;
    }

    .mb-10 {
        margin-bottom: calc(var(--spacer)*10) !important;
    }

    /* --- padding ---*/
    .pt-0 {
        padding-top: calc(var(--spacer)*0) !important;
    }

    .pt-1 {
        padding-top: calc(var(--spacer)*1) !important;
    }

    .pt-2 {
        padding-top: calc(var(--spacer)*2) !important;
    }

    .pt-3 {
        padding-top: calc(var(--spacer)*3) !important;
    }

    .pt-4 {
        padding-top: calc(var(--spacer)*4) !important;
    }

    .pt-5 {
        padding-top: calc(var(--spacer)*5) !important;
    }

    .pt-8 {
        padding-top: calc(var(--spacer)*8) !important;
    }

    .pt-10 {
        padding-top: calc(var(--spacer)*810) !important;
    }

    .pb-0 {
        padding-bottom: calc(var(--spacer)*0) !important;
    }

    .pb-1 {
        padding-bottom: calc(var(--spacer)*1) !important;
    }

    .pb-2 {
        padding-bottom: calc(var(--spacer)*2) !important;
    }

    .pb-3 {
        padding-bottom: calc(var(--spacer)*3) !important;
    }

    .pb-4 {
        padding-bottom: calc(var(--spacer)*4) !important;
    }

    .pb-5 {
        padding-bottom: calc(var(--spacer)*5) !important;
    }

    .pb-8 {
        padding-bottom: calc(var(--spacer)*8) !important;
    }

    .pb-10 {
        padding-bottom: calc(var(--spacer)*10) !important;
    }

    .px-0 {
        padding-right: calc(var(--spacer)*0) !important;
        padding-left: calc(var(--spacer)*0) !important;
    }

    .px-1 {
        padding-right: calc(var(--spacer)*1) !important;
        padding-left: calc(var(--spacer)*1) !important;
    }

    .px-2 {
        padding-right: calc(var(--spacer)*2) !important;
        padding-left: calc(var(--spacer)*2) !important;
    }

    .px-3 {
        padding-right: calc(var(--spacer)*3) !important;
        padding-left: calc(var(--spacer)*3) !important;
    }

    .px-4 {
        padding-right: calc(var(--spacer)*4) !important;
        padding-left: calc(var(--spacer)*4) !important;
    }

    .px-5 {
        padding-right: calc(var(--spacer)*5) !important;
        padding-left: calc(var(--spacer)*5) !important;
    }

    .px-8 {
        padding-right: calc(var(--spacer)*8) !important;
        padding-left: calc(var(--spacer)*8) !important;
    }

    .px-10 {
        padding-right: calc(var(--spacer)*10) !important;
        padding-left: calc(var(--spacer)*10) !important;
    }

    .py-0 {
        padding-top: calc(var(--spacer)*0) !important;
        padding-bottom: calc(var(--spacer)*0) !important;
    }

    .py-1 {
        padding-top: calc(var(--spacer)*1) !important;
        padding-bottom: calc(var(--spacer)*1) !important;
    }

    .py-2 {
        padding-top: calc(var(--spacer)*2) !important;
        padding-bottom: calc(var(--spacer)*2) !important;
    }

    .py-3 {
        padding-top: calc(var(--spacer)*3) !important;
        padding-bottom: calc(var(--spacer)*3) !important;
    }

    .py-4 {
        padding-top: calc(var(--spacer)*4) !important;
        padding-bottom: calc(var(--spacer)*4) !important;
    }

    .py-5 {
        padding-top: calc(var(--spacer)*5) !important;
        padding-bottom: calc(var(--spacer)*5) !important;
    }

    .py-8 {
        padding-top: calc(var(--spacer)*8) !important;
        padding-bottom: calc(var(--spacer)*8) !important;
    }

    .py-10 {
        padding-top: calc(var(--spacer)*10) !important;
        padding-bottom: calc(var(--spacer)*10) !important;
    }

    .d-sp {
        display: none;
    }

    .d-pc {
        display: block;
    }

}

@media screen and (max-width: 750px) {
    #private_lessons_online .d-sp {
        display: block;
    }

    #private_lessons_online .d-pc {
        display: none;
    }

    :root {
        --font-size-base: 3vw;
        --spacer: 1vw;
    }
}

@media screen and (max-width: 430px) {
    :root {
        --font-size-base: 4vw;
    }
}

/* --- cmn ---*/


#private_lessons_online {
    p {
        line-height: 2em;
        font-size: var(--font-size-base);
    }

    li {
        font-size: var(--font-size-base);
    }

    img,
    a img {
        border: 0;
        vertical-align: top;
    }

    img {
        max-width: 100%;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: auto;
    }

    img[height] {
        height: auto;
    }

    .d-flex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        width: 100%;
    }

    .d-flex.align-items-start {
        align-items: flex-start !important;
    }

    .d-flex figure {
        width: 40%
    }

    .d-flex>div {
        width: 55%
    }

    .d-flex>* {
        padding: calc(var(--spacer)*3) 0 !important;
    }

    .justify-content-center {
        justify-content: center
    }

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

    .h2 {
        font-size: calc(var(--font-size-base)*1.8) !important;
    }

    .h3 {
        font-size: calc(var(--font-size-base)*1.4) !important;
    }

    .h4 {
        font-size: calc(var(--font-size-base)*1.3) !important;
    }

    .h5 {
        font-size: calc(var(--font-size-base)*1.2) !important;
        ;
    }

    .h1,
    .h2,
    .h3,
    .h4 {
        font-weight: 800 !important;
        font-family: var(--font-family);
        line-height: 1.3;
    }


    .h5 {
        font-weight: 700 !important;
        font-family: var(--font-family);
        line-height: 1.3;
    }

    .h4 span {
        /* border-top: double 3px var(--brown);
        border-bottom: double 3px var(--brown); */
        font-weight: 700 !important;
        padding: 3px;
        background: linear-gradient(transparent 65%, var(--yellow) 65%);
    }

    .h5 span {
        font-weight: 700 !important;
        position: relative;
        margin-left: 15px;
        color: var(--brown);
        display: block;
    }

    .h5 span:before {
        width: 4px;
        height: 1.2rem;
        background: var(--brown);
        position: absolute;
        top: .3rem;
        left: -15px;
        content: "";
    }

    small,
    .small {
        font-size: calc(var(--font-size-base)*.8);
        line-height: 1.5;
    }

    .bg-brown {
        background: var(--brown);
    }

    .bg-light-brown {
        background: var(--light-brown);
        width: 100vw;
        margin: 0 calc(50% - 50vw);
        padding-top: calc(var(--spacer)*5) !important;
        padding-bottom: calc(var(--spacer)*5) !important;
    }

    .bg-light-yellow {
        background: var(--light-yellow);

    }

    .color-brown {
        color: var(--brown);
    }

    .color-white {
        color: var(--white);
    }

    .max-600 {
        max-width: 600px;
        margin-right: auto;
        margin-left: auto;
    }

    .max-800 {
        max-width: 800px;
        margin-right: auto;
        margin-left: auto;
    }

    section {
        margin-top: calc(var(--spacer)*8) !important;
        margin-bottom: calc(var(--spacer)*8) !important;
    }
}

@media screen and (max-width: 750px) {
    #private_lessons_online {
        p {
            font-size: var(--font-size-base);
            line-height: 1.8em;
        }

        li {
            font-size: var(--font-size-base);
        }

        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h1>*,
        .h2>*,
        .h3>*,
        .h4>*,
        .h5>* {
            line-height: 1.5;
        }

        .h3 {
            font-size: calc(var(--font-size-base)*1.1) !important;
        }

        .h2 {
            font-size: calc(var(--font-size-base)*1.2) !important;
        }

        .h4 {
            font-size: calc(var(--font-size-base)*1.0) !important;
        }

        .h5 {
            font-size: calc(var(--font-size-base)*1.0) !important;
        }

        .d-flex {
            flex-direction: column;
        }

        .d-flex>* {
            width: 100% !important;
        }

        .justify-content-center {
            justify-content: center
        }

        .sp-max {
            max-width: 75%;
            margin-right: auto;
            margin-left: auto;
        }
    }
}

main.l-main:has(#private_lessons_online) {
    margin-top: 0px;
}


#private_lessons_online {
    .title-num {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        width: 100%;
        justify-content: space-between;
        margin-top: 2em;
    }

    .title-num h4 {
        margin-block-start: 0;
    }

    .title-num figure {
        width: 50px;
    }

    .title-num div {
        width: calc(100% - 70px);
    }

    ul.list {
        padding: calc(var(--spacer)*3) !important;
    }


}

/* 流れ*/
.flow_container .disp-flex {
    display: flex !important;
}

.flow_container .gap-3 {
    gap: 3rem;
}

.flow_container .align-items-start {
    align-items: flex-start !important;
}

.flow_container .step {
    padding-bottom: 1.5rem;
    position: relative;
}

.flow_container .step6 {
    padding-bottom: 0;
}

.flow_container .step:not(.step6)::before {
    display: block;
    content: "";
    width: 5px;
    height: 100%;
    background: var(--brown);
    position: absolute;
    top: 1px;
    left: 25px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    height: calc(100% + 1rem);
}


.flow_container::after {
    display: none;
    content: "";
    width: 5px;
    height: 100%;
    background: var(--brown);
    position: absolute;
    top: 0px;
    left: 50px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

.flow_container .step .heading {
    background: var(--brown);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    aspect-ratio: 1 / 1;
    z-index: 1;
}

.flow_container .step .heading img {
    width: 45%;
}

.flow_container .step .inner {
    width: calc(100% - 50px);
}

.flow_container .step .inner h4 {
    color: var(--brown);
}

.flow_container .step .inner figure {
    margin-bottom: 1rem;
}

.button-row {
    display: flex;
    justify-content: center;
}

.button-row>div {
    flex: 1;
}


@media screen and (min-width: 768px) {
    .flow_container .step {
        padding-bottom: 6rem;
    }

    .flow_container .step6 {
        padding-bottom: 0;
    }

    .flow_container .step .heading {
        width: 100px;
    }

    .flow_container .step:not(.step6)::before {
        width: 10px;
        height: 100%;
        left: 50px;
        height: calc(100% + 3rem);
    }


    .flow_container::after {
        width: 5px;
        left: 50px;
    }

    .flow_container .step .inner {
        width: calc(100% - 100px);
    }

    .flow_container .step .heading img {
        width: 45%;
    }

}

@media screen and (max-width: 750px) {
    #private_lessons_online {
        .title-num figure {
            width: 40px;
        }

        .title-num div {
            width: calc(100% - 50px);
        }

        ul.list li {
            font-size: 0.8em;
        }
    }

    .flow_container .gap-3 {
        gap: 1.5rem;
    }

    .button-row {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .button-row>div {
        width: 100%;
    }

}