@charset "utf-8";


.main_area {
    position: relative;
    padding: 4em 0;
}

.main_area>div {
    position: relative;
}

.main_area::before {
    content: "";
    width: 45vw;
    height: 20vw;
    max-width: 820px;
    max-height: 280px;
    background-color: var(--c_pink);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    position: absolute;
    top: 0;
    left: 0;
}

.main_area::after {
    content: "";
    width: 25vw;
    height: 20vw;
    max-width: 430px;
    max-height: 350px;
    background-color: var(--c_lorg);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    position: absolute;
    bottom: -2vw;
    left: -2vw;
    transform: rotate(10deg);
}


.main_area>div::after {
    content: "";
    width: 20vw;
    height: 80vw;
    max-width: 440px;
    max-height: 950px;
    background-color: var(--c_lgren);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    ;
    position: absolute;
    bottom: -10vw;
    right: 0;
}

.main_area .inner {
    max-width: 1600px;
    position: relative;
}

.main_area h1 {
    font-size: clamp(1.375rem, 0.193rem + 5.91vw, 4.625rem);
    transform: rotate(-6deg);
    letter-spacing: 0;
    margin-bottom: 0;
    position: absolute;
    top: 4em;
    left: 0;
}

.main_area h1 .txt_top,
.main_area h1 .txt_btm {
    position: relative;
}

.main_area h1 .txt_top>span,
.main_area h1 .txt_btm>span {
    position: relative;
    z-index: 1;
}

.main_area h1 .txt_top::after {
    content: "";
    mask-image: url(../images/front/line.svg);
    mask-size: cover;
    background-color: var(--c_lyel);
    width: calc(100% + .5em);
    height: 1.25em;
    position: absolute;
    bottom: -.5em;
    left: -.25em;
    transform: rotate(5deg);
    z-index: 0;
}

.main_area h1 .txt_btm::after {
    content: "";
    mask-image: url(../images/front/line.svg);
    mask-size: cover;
    background-color: var(--c_lyel);
    width: calc(100% + .5em);
    height: 1.125em;
    position: absolute;
    bottom: -.5em;
    left: -.25em;
    transform: rotate(5deg);
    z-index: 0;
}

.main_area h1 .txt_btm {
    margin-left: 6em;
}

.main_area h1 .tit_circle {
    color: var(--c_red);
    font-size: clamp(1.75rem, 0.477rem + 6.36vw, 5.25rem);
}

.main_area h1 .tit_circle::before {
    background: var(--c_red);
    width: .125em;
    top: -.05em;
}

.main_area .list {
    gap: 8em 0;
}

.main_area .list li {
    width: 30%;
    max-width: 500px;
    position: relative;
    z-index: 2;
}

.main_area .list .confectionary { order: 1;}
.main_area .list .cooking { order: 3;}
.main_area .list .nutrition { order: 2;}

.main_area .list li:first-child {
    margin-left: 65%;
}

.main_area .list .img_area img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

.main_area .list .img_area::after {
    content: "";
    width: 100%;
    height: 95%;
    border-radius: 50%;
    position: absolute;
    top: .5em;
    left: .5em;
    z-index: 0;
}

.main_area .list .confectionary .img_area::after {
    background: var(--c_red);
}

.main_area .list .nutrition .img_area::after {
    background: var(--c_gren);
}

.main_area .list .cooking .img_area::after {
    background: var(--c_org);
}

.main_area .list h2 {
    width: fit-content;
    padding: .125em .5em;
    margin: -1em auto 0;
    border-radius: var(--br10);
    color: #fff;
    font-size: clamp(0.875rem, 0.557rem + 1.59vw, 1.75rem);
    position: relative;
    z-index: 2;
}

.main_area .list .confectionary h2 {
    background: var(--c_red);
}

.main_area .list .nutrition h2 {
    background: var(--c_gren);
}

.main_area .list .cooking h2 {
    background: var(--c_org);
}


.main_area .food_list li {
    position: absolute;
    z-index: 1;
}

.main_area .food_list .gpepper {
    width: 18vw;
    max-width: 139px;
    top: 0%;
    left: 40%;
}

.main_area .food_list .strawberry {
    width: 20vw;
    max-width: 155px;
    top: 40%;
    right: 5%;
}

.main_area .food_list .tomato {
    width: 20vw;
    max-width: 150px;
    bottom: -5%;
    left: 3%;
}

.main_area .food_list .lemon {
    width: 18vw;
    max-width: 132px;
    bottom: 00%;
    left: 50%;
}


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


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_intro {
    clip-path: polygon(0 12.5%, 100% 0, 100% 100%, 0 100%);
    margin-top: -4em;
}

.front_intro .inner_section {
    padding: 6em 0 8em;
}



.schl_common {
    position: relative;
}

.schl_common>div {
    position: relative;
    z-index: 1
}

.front_confectionary,
.front_cooking {
    padding-bottom: 6em;
}

.front_nutrition {
    margin-bottom: 4em;
}

.schl_common::before {
    content: "";
    display: block;
    width: 100%;
    height: 10vw;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 100'%3E%3Cpath d='M -486.4 60 Q -326.4 60 -166.4 30 Q 153.6 -30 473.6 30 Q 633.6 60 793.6 60 Q 953.6 60 1113.6 30 Q 1433.6 -30 1753.6 30 Q 1913.6 60 2073.6 60 L 1280 100 L 0 100 Z' /%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    position: absolute;
    top: -7vw;
    left: 0;
}

.schl_common::after {
    content: "";
    display: block;
    width: 100%;
    height: 10vw;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 100'%3E%3Cpath d='M -486.4 40 Q -326.4 40 -166.4 70 Q 153.6 130 473.6 70 Q 633.6 40 793.6 40 Q 953.6 40 1113.6 70 Q 1433.6 130 1753.6 70 Q 1913.6 40 2073.6 40 L 1280 0 L 0 0 Z' /%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    position: absolute;
    bottom: -7vw;
    left: 0;
}

.front_confectionary::before,
.front_confectionary::after {
    background-color: var(--c_pink);
}

.front_nutrition::before,
.front_nutrition::after {
    background-color: var(--c_lgren);
}

.front_cooking::before,
.front_cooking::after {
    background-color: var(--c_lorg);
}

.schl_common .box_btm {
    position: relative;
}

.schl_common .img_area {
    position: absolute;
    bottom: -3em;
    right: 10%;
    width: 30%;
}

.front_confectionary .img_area {
    max-width: 350px;
}

.front_cooking .img_area {
    right: unset;
    left: 10%;
    max-width: 350px;
}

.front_nutrition .img_area {
    max-width: 350px;
}


.schl_common .box_top,
.schl_common .txt_area {
    width: 55%;
}


.front_cooking .box_top,
.front_cooking .txt_area {
    margin-left: 45%;
}

.schl_common h2,
.schl_common h3 {
    text-align: left;
}

.schl_common h3:first-letter {
    font-size: 120%;
    margin-right: .1em;
}

.front_confectionary h3:first-letter {
    color: var(--c_red);
}

.front_nutrition h3:first-letter {
    color: var(--c_gren);
}

.front_cooking h3:first-letter {
    color: var(--c_org);
}


.schl_common .txt_area li {
    background: #fff;
    display: inline-block;
    padding: .125em .75em;
    margin: .25em .125em;
}

.front_confectionary .txt_area li {
    color: var(--c_pink);
}

.front_nutrition .txt_area li {
    color: var(--c_lgren);
}

.front_cooking .txt_area li {
    color: var(--c_lorg);
}

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

.schl_common .more_area .more_opcampus a {
    background: var(--c_yel);
}


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



.front_practice h2 {
    margin-bottom: 1.5em;
}

.front_practice h2 .sub {
    color: var(--c_red);
    font-size: clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);
    margin-bottom: .5em;
}

.front_practice h2 .circle_txt {
    margin-right: .25em;
}

.front_practice h2 .circle {
    position: relative;
    margin: 0 .125em;
    color: #fff;
}

.front_practice h2 .circle::after {
    content: "";
    background: var(--c_tur);
    border-radius: 50%;
    width: 1.75em;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
}

.front_practice h2 .circle span {
    position: relative;
    z-index: 1;
}

.front_practice .img_area {
    width: 35%;
}

.front_practice .img_area img {
    border-radius: 50%;
}

.front_practice .txt_area {
    width: 55%;
}



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

.front_news .news_list {
    width: 70%;
}

.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);
}

.news_list .cate {
    display: block;
    width: fit-content;
    color: #fff;
    border-radius: .25em;
    padding: .125em .5em;
    font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

.news_list .cate.confectionary {
    background: var(--c_red);
}

.news_list .cate.nutrition {
    background: var(--c_gren);
}

.news_list .cate.cooking {
    background: var(--c_org);
}



.front_news .thumb {
    display: none;
}







.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;
}

@media (max-width: 1499px) {
    .main_area h1 {
        top: 3em;
        left: -1.5em;
        font-size: 5vw;
    }
}

@media (max-width: 1299px) {
    .schl_common::before {
        top: -6vw;
    }

    .schl_common::after {
        bottom: -6vw;
    }
}


@media (max-width: 1099px) {


    .main_area .list {
        gap: 20vw 0;
    }

    .main_area h1 {
        top: 25vw;
        font-size: 6vw;
    }

    .schl_common .img_area {
        bottom: 0;
    }

    .main_area .list h2 {
        font-size: 2.25vw;
    }

}



@media (max-width: 799px) {


    .main_area::before {
        width: 90vw;
        height: 25vw;
    }

    .main_area::after {
        width: 40vw;
        height: 30vw;
        bottom: -5vw;
        left: -2vw;
        transform: rotate(10deg);
    }

    .main_area>div::after {
        width: 20vw;
        height: 80vw;
        bottom: -10vw;
        right: -5vw;
    }

    .main_area h1 {
        top: 45vw;
        left: -1.25em;
    }

    .main_area .list {
        gap: 0;
    }

    .main_area .list li {
        width: 50%;
    }

    .main_area .list li.confectionary,
    .main_area .list li.cooking {
        margin-left: 50%;
    }

    .main_area .list li.confectionary {
        margin-bottom: 30vw;
    }

    .main_area .list .cooking {
        margin-top: -20vw;
    }

    .main_area .list h2 {
        font-size: 3vw;
    }


    .main_area .food_list .gpepper {
        top: 20%;
        left: 5%;
    }


    .main_area .food_list .strawberry {
        top: 60%;
        right: 5%;
    }

    .main_area .food_list .tomato,
    .main_area .food_list .lemon {
        display: none;
    }


    .front_intro .inner_section {
        padding: 6em 0 4em;
    }

    .front_confectionary, .front_cooking {
        padding-bottom: 0;
    }

    .front_cooking,
    .front_nutrition {
        padding-bottom: 0;
    }

    .front_nutrition {
        margin-bottom: 2em;
    }

    .schl_common .box_top {
        width: 100%;
    }

    .front_cooking .box_top,
    .front_cooking .txt_area {
        margin: 0;
    }

    .schl_common.front_cooking .box_btm {
        flex-direction: row-reverse;
    }

    .schl_common .img_area {
        position: static;
        width: 30%;
        margin: 0;
    }

    .schl_common .txt_area {
        width: 60%;
        padding-top: 2em;
    }

    .schl_common .box_top,
    .front_nutrition .txt_area {
        margin-left: 0;
    }

    .schl_common .more_area {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }




    .front_practice h2 {
        margin-bottom: 2em;
    }

    .front_practice .img_area {
        width: 70%;
        margin-top: -6em;
    }

    .front_practice .txt_area {
        width: 100%;
    }




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

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






    .sec_other .list {
        gap: 1.25em;
    }

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



}



@media (max-width: 599px) {


    .main_area>div::after {
        display: none;
    }

    .main_area .list li {
        width: 60%;
    }

    .main_area .list li.confectionary,
    .main_area .list li.cooking {
        margin-left: 40%;
    }

    .main_area .list li.nutrition {
    }


    .main_area .list li.nutrition {
    }

    .main_area .list .cooking {
        margin-top: 0;
    }

    .main_area .list li.confectionary {
        margin-bottom: 35vw;
    }

    .main_area h1 {
        top: 55vw;
        left: -1em
    }


    .front_practice h2 {
        margin-bottom: 2.5em;
    }

    .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);
    }




}



@media (max-width: 399px) {

    .main_area {
        padding: 4em 0 1em;
    }

    .main_area .list li:first-child {
        margin-bottom: 10em;
    }



}




.front_oc {
    background: #fff;
    position: relative;
    padding-bottom: 3vw;
}

.opcampus_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em 1.25em;
}

.opcampus_list li {
    padding: 1.25em;
    border-radius: var(--br20);
}

.opcampus_list li .oc_hdr h3 {
    font-size: clamp(1.25rem, 2.25vw, 2.125rem);
}

.opcampus_list li .oc_hdr {
    text-align: center;
}

.opcampus_list li.bg_lorg .oc_hdr h3 {
    letter-spacing: 0;
}

.opcampus_list li a{
    display: block;
    background: #fff;
    padding: 1.25em;
    border-radius: var(--br10);
}

.opcampus_list li .thumb {
    margin-bottom: .8em;
}

.opcampus_list li a .day {
    font-size: clamp( 16px, 2.25vw, 30px );
    line-height: 1.2;
}

.opcampus_list li.bg_lorg .day { color: var(--c_org);}
.opcampus_list li.bg_lgren .day { color: var(--c_gren);}
.opcampus_list li.bg_pink .day { color: var(--c_red);}

.opcampus_list li a .time {
    font-weight: normal;
    font-size: 90%;
}

@media (max-width: 799px) {
    .opcampus_list { display: block;}
    .opcampus_list li .oc_hdr h3 { font-size: clamp(1.25rem, 0.932rem + 1.59vw, 2.125rem);margin-bottom: 0;}
    .opcampus_list li.bg_lorg .oc_hdr h3 { letter-spacing: .1em;}
    .opcampus_list li .oc_hdr p { text-align: center;}
    .opcampus_list li { margin-bottom: 1em;}
    .opcampus_list li a { display: flex; gap: 1em;}
    .opcampus_list li a .thumb { flex: 1; margin: 0;}
    .opcampus_list li a .thumb img {height: 100%;width: 100%;object-fit: cover;}
    .opcampus_list li a .opcampus_text { flex: 2;}
    .opcampus_list li a .day { font-size: clamp( 16px, 5.75vw, 30px );}
}
@media (max-width: 599px) {
	.opcampus_list li a{padding: 0.5em;gap: 0.5em;}
	.opcampus_list li{padding:0.5em;}
	.opcampus_list li dt{font-size: 13px;}
	.opcampus_list li .oc_hdr p{margin-bottom:0.75em;}
}