@charset "utf-8";


.main_area {
/*
    width: 90%;
    max-width: 1600px;
    margin: auto;
    clip-path: polygon(50% 0, 80% 10%, 93% 31%, 97% 70%, 100% 100%, 50% 100%, 0 100%, 2% 70%, 9% 33%, 23% 11%);
*/
}

.main_area img {
    object-fit: cover;
    aspect-ratio: 1600 / 860;
}

section h2 {
    font-size: clamp(1.625rem, 1.08rem + 2.73vw, 3.125rem);
    margin-bottom: 1.25em;
    position: relative;
}

section h2 .en {
    font-size: clamp(2.25rem, 1.705rem + 2.73vw, 3.75rem);
    position: relative;
}

section h2 .jp {
    display: block;
    font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
    font-weight: 900;
    margin-top: 1.25em;
}

section h2 .en::after {
    content: "";
    display: block;
    background-color: var(--c_red);
    mask-image: url(../images/common/wave_line.svg);
    mask-size: cover;
    width: 130px;
    aspect-ratio: 130 / 8;
    margin: auto;
}


section .bg_pink h2 .en::after,
section .bg_lgren h2 .en::after,
section .bg_lorg h2 .en::after,
section .bg_tur h2 .en::after {
    background-color: #fff;
}

section h3 {
    font-size: clamp(1.25rem, 0.932rem + 1.59vw, 2.125rem);
    margin-bottom: .5em;
}

section h4 {
    font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
    margin-bottom: .75em;
}

.front_subject h3,
.front_practice h3 {
    text-align: left;
}


.fruit_strawberry,
.fruit_lemon,
.fruit_apple {
    position: relative;
}

.fruit_strawberry::before {
    content: "";
    background: url(../../../assets/images/common/fruit_strawberry.png);
    background-size: cover;
    width: 12vw;
    height: 9.5vw;
    max-width: 156px;
    max-height: 114px;
    position: absolute;
    top: 75%;
    right: 5%;
}

.fruit_lemon::before {
    content: "";
    background: url(../../../assets/images/common/fruit_lemon.png);
    background-size: cover;
    width: 12vw;
    height: 9.5vw;
    max-width: 132px;
    max-height: 116px;
    position: absolute;
    top: 10%;
    left: 3.5%;
}

.fruit_apple::before {
    content: "";
    background: url(../../../assets/images/common/fruit_apple.png);
    background-size: cover;
    width: 12vw;
    height: 12.25vw;
    max-width: 155px;
    max-height: 160px;
    position: absolute;
    top: 10%;
    left: 3.5%;
}


.front_subject .box li:not(:last-child),
.front_practice .box li:not(:last-child) {
    margin-bottom: 2em;
}


.front_news {
    clip-path: polygon(0 12.5%, 100% 0, 100% 100%, 0 87.5%);
    margin-top: -4em;
}

.front_news .inner_section {
    padding: 6em 0;
}

.front_news h2 {
    width: 30%;
    text-align: left;
    margin-bottom: 0;
}

.front_news .news_list {
    width: 65%;
}

.front_news .news_list li:not(:last-child) {
    border-bottom: 1px solid #77614E;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}

.front_news .news_list .news_text {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.front_news .news_list .day {
    width: 9em;
}

.front_news .news_list dl {
    width: calc(100% - 9em - 1em);
}

.front_news .thumb {
    display: none;
}



.front_study .box_type01 {
    width: 95%;
    margin: auto;
}

.front_study .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
}

.front_study .img_area {
    margin-bottom: 1em;
}

.front_study .img_area img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.front_study .more a {
    background: var(--c_red);
}

.front_opcampus .calendar th,
.front_opcampus .calendar td {
    width: calc(100% / 7);
    border: 1px solid #CCCCCC;
    text-align: center;
    padding: .5em;
    font-weight: bold;
}

.front_opcampus .calendar thead th {
    background: var(--c_tblue);
}

.front_opcampus .calendar .sun {
    color: #e17f7e;
    background-color: #f8e4e2;
}

.front_opcampus .calendar .sat {
    color: #7ab6f3;
    background-color: #e7f6fd;
}

.front_opcampus .calendar .mute {
    color: #aaa;
}

.front_opcampus .box01 .list li {
    position: relative;
    margin-left: 2em;
    width: calc(100% - 2em);
    padding-left: 3.5em;
    text-indent: -3.5em;
    font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

.front_opcampus .box01 .list li:not(:last-child) {
    margin-bottom: 1em;
}

.front_opcampus .list li.opcampus_am {
    color: #DCB001;
}

.front_opcampus .list li.opcampus_pm {
    color: #4AC48C;
}

.front_opcampus .list li.online {
    color: #F67171;
}

.front_opcampus .list li.trial {
    color: #34CDEC;
}

.front_opcampus .list li.opcampus_hs {
    color: #468CD8;
}

.front_opcampus .box01 .list li::before {
    content: "";
    width: 1.75em;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: .125em;
    left: -2em;
}

.front_opcampus .box01 .list li.opcampus_am::before,
.front_opcampus .calendar .opcampus_am {
    background: #FFED74;
}

.front_opcampus .box01 .list li.opcampus_pm::before,
.front_opcampus .calendar .opcampus_pm {
    background: #8BF0C2;
}

.front_opcampus .box01 .list li.online::before,
.front_opcampus .box01 .calendar .online {
    background: #FCA9A9;
}

.front_opcampus .list li.trial::before,
.front_opcampus .calendar .trial {
    background: #98EAFB;
}

.front_opcampus .box01 .list li.opcampus_hs::before,
.front_opcampus .calendar .opcampus_hs {
    background: #ADD4FE;
}

.front_opcampus .box02 .opcampus_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em 1.25em;
}

.front_opcampus .box02 .opcampus_list li {
    width: calc( ( 100% - 2.5em ) / 3 );
}

.front_opcampus .box02 .opcampus_list li a {
    display: block;
    background: var(--c_lbln);
    padding: 1.25em 1.5em;
    border-radius: var(--br10);
}

.sec_other .box {
    width: 95%;
    margin: auto;
}

.sec_other .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
}

.sec_other .list li {
    background: #fff;
    border-radius: var(--br20);
    padding: 2em 2.5em;
}

.sec_other .list li p {
    text-align: center;
    margin-bottom: 0;
}




.bnr_area { gap: 1em clamp( 1em, 3vw, 3em ); margin-top: clamp( 1em, 3vw, 3em );}
.bnr_area > div { flex: 1}
.bnr_area > div img { border-radius: 1em;}




@media (max-width: 799px) {



    .fruit_strawberry::before,
    .fruit_lemon::before,
    .fruit_apple::before {
        display: none;
    }



    .front_departments h3,
    .front_practice h3 {
        text-align: center;
    }

    .front_news h2,
    .front_news .news_list {
        width: 100%;
    }

    .front_news h2 {
        text-align: center;
        margin-bottom: .5em;
    }


    .front_study .list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }

    .sec_other .list {
        gap: 1.25em;
    }

    .sec_other .list li {
        padding: 1.5em 1.75em;
    }


    .calendar th,
    .calendar td {
        padding: 6px;
        font-size: 12px;
    }

    .calendar th {
        padding: 3px 6px;
    }


    .front_opcampus .box02 .opcampus_list li {
        width: calc( ( 100% - 1.25em ) / 2 );
    }



}



@media (max-width: 599px) {

    .main_area {
        width: 98%;
    }

    .front_news {
        clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
        margin-top: -2em;
    }

    .front_news .inner_section {
        padding: 3em 0;
    }

    .front_news .news_list .day,
    .front_news .news_list dl {
        width: 100%;
    }

    .front_news .news_list li:not(:last-child) {
        padding-bottom: 1em;
        margin-bottom: 1em;
    }


    .sec_other .list {
        grid-template-columns: repeat(1, 1fr);
    }

    .front_opcampus .box02 .opcampus_list li {
        width: 100%;
    }

    .front_opcampus .box02 .opcampus_list li a {
        display: flex;
        gap: 1em;
    }

    .front_opcampus .box02 .opcampus_list li a .thumb {
        flex: 1;
    }

    .front_opcampus .box02 .opcampus_list li a .opcampus_text {
        flex: 2;
    }


}



@media (max-width: 399px) {

    .front_news {
        margin-top: -1.5em;
    }

    .front_news .inner_section {
        padding: 2em 0 2.5em;
    }


    .front_study .list {
        grid-template-columns: repeat(1, 1fr);
        gap: 2em 1.25em;
    }

    .front_study .img_area {
        width: 70%;
        margin: 0 auto 1em;
    }

    .front_opcampus .box02 .opcampus_list li a .opcampus_text {
        flex: 3;
        line-height: 1.4;
        letter-spacing: 0;
    }

}