@charset "UTF-8";


.l_contents > div{padding-top: 0;}

.main_image{background: #FFF4E9;position: relative;}
.main_image .wrapper{position: relative;height: 100%;margin-right: auto;margin-left: auto;}
.main_image .wrapper::after{content: "";display: block;width: 120px;height: 83px;background: url(../images/home/img_top_item.png) no-repeat;background-size: cover;position: absolute;right: 20px;bottom: -15px;}
.main_image .img{position: relative;display: block;width: 100%;height: 100%;aspect-ratio: 750 / 480;
    -webkit-mask-image: url("../images/home/msk_topimg_sp.svg");-webkit-mask-repeat: no-repeat;-webkit-mask-position: 0 bottom;-webkit-mask-size: contain;
    mask-image: url("../images/home/msk_topimg_sp.svg");mask-repeat: no-repeat;mask-position: 0 bottom;mask-size: contain;overflow: hidden;margin-top: -60px;
}
.main_image .img img{width: 100%;height: 100%;object-fit: cover;max-width: none;transform-origin: center center;animation: zoomIn 10s ease-in-out forwards;}
.main_image .wrapper .main_title{display: inline-block;position: absolute;bottom: 30%;left: 10px;width: 70%;}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}


.main_image .img::after{content: "";display: block;width: 100%;height: 50%;
  background: radial-gradient(circle at 50% 70%, rgba(255,255,255,0.6), transparent 70%);
  animation: floatUp 6s ease-in-out infinite;
  filter: blur(8px);opacity: 0.8;position: absolute;bottom: 0;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);opacity: 0.2;
  }
  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-40px) scale(1.2);opacity: 0;
  }
}


.h2_ttl a{display: inline-block;position: relative;}

.home_mainnavi{background-color: #FFF4E9;}
.home_mainnavi .area_school{background-color: #FFF;}

.area_products{padding-top: 30px;}
.area_products h2{text-align: center;font-weight: 900;line-height: 1;font-size: 2.0625rem;margin-bottom: 30px;}
.area_products ul{display: grid;}

p.bn_shop{box-shadow: 0px 0px 18.33px 0px rgb(0 0 0 /.2);max-width: 1100px;margin-right: auto;margin-left: auto;}
.area_link ul li a{box-shadow: 0px 4px 20px 0px rgb(0 0 0 /.1);}
.area_link ul li a{display: flex;background: #FFF;}
.area_link ul li p{line-height: 1.5;letter-spacing: 0;font-size: 0.8125rem;}


.contents_home section > div{padding-right: 20px;padding-left: 20px;}


    ul.product_list,.area_secret .wrapper{max-width: 1130px;margin-right: auto;margin-left: auto;}

    .h2_ttl{font-weight: 800;}
    .area_school h2,.home_news h2{font-size: 1.5rem;}
    .area_school h2 a::after,.home_news h2 a::after{content: "";display: block;width: 28px;height: 28px;background: url(../images/home/icon_menu.svg);background-size: cover;position: absolute;right: -40px;top: 0;}


    /**/
    ul.product_list{grid-template-columns: 1fr 1fr;gap: 15px 10px;margin-bottom: 50px;}
    ul.product_list li a{display: block;background: #FFF;border-radius: 30px;width: 100%;box-shadow: 0px 2px 30px 0px rgb(0 0 0 /.15);}
    ul.product_list li .image{background: #FFF4E9;border-radius: 30px 30px 0 0;width: 100%;height: 130px;display: grid;place-content: center;}
    ul.product_list li .image img{max-height: 110px;max-width: 110px;margin: 0 auto;}
    ul.product_list li .category{height: 70px;font-size: 0.9375rem;text-align: center;font-weight: bold;display: flex;justify-content: center;align-items: center;}
    ul.product_list li .category span{display: inline-block;position: relative;min-height: 20px;background: url(../images/icon_products.svg) no-repeat right;background-size: 20px;padding-right: 26px;}
    ul.product_list li .category small{font-size: 0.8125rem;margin-top: -6px;display: block;}

 
    /**/
    .area_secret{position: relative;}
    .area_secret::after{content: "";display: block;background: #FFF;width: 100%;height: 107px;position: absolute;bottom: -107px;left: 0;transform: scale(1.2);background: url(../images/bg_semicircle_o.svg) no-repeat bottom;background-size: 100%;z-index: 1;}
    .area_secret .wrapper{position: relative;z-index: 2;padding-bottom: 20px;}
        .area_secret .wrapper::before,.area_secret .wrapper::after{content: "";display: block;border-radius: 100vh;transform: scale(0);position: absolute;}
            .area_secret .wrapper::before{width: 40vw;height: 40vw;background: url(../images/home/img_history.jpg) no-repeat;background-size: cover;right: -10px;top: 100%;box-shadow: 0px 0px 20px 0px rgb(0 0 0 /.3);}
            .area_secret .wrapper::after{width: 12vw;height: 12vw;background: url(../images/home/img_mitsuwa.png) no-repeat center #FFF;background-size: 40% auto;right: 0;bottom: -39vw;box-shadow: 0px 0px 20px 0px rgb(0 0 0 /.1);}
        .area_secret.ScrollIn .wrapper::before,.area_secret.ScrollIn .wrapper::after{animation: OpenImg 1.5s ease-out forwards;}
        
        @keyframes OpenImg {
            to {
            transform: scale(1);
            }
        }
        
    .area_secret .h2_ttl{position: relative;max-width: 284px;margin-bottom: 30px;}
    .area_secret .h2_ttl::after{content: "";display: block;width: 80px;height: 90px;background: url(../images/home/parts_secret.png) no-repeat;background-size: cover;position: absolute;top: 30px;right: -70px;}
    .area_secret h2 span{position: relative;display: inline-block;width: 100%;font-weight: 900;font-size: 2.1875rem;overflow: hidden;padding-bottom: 2px;}
        .area_secret.ScrollIn h2 span::before{content: "";width: 100%;height: 2px;display: block;background: url(../images/home/line_dash.svg) no-repeat left bottom;
            background-size: contain;position: absolute;left: 0;bottom: 0;clip-path: inset(0 100% 0 0);animation: underlineImg 1.5s ease-out forwards;}
        @keyframes underlineImg {
            to {
            clip-path: inset(0 0 0 0);
            }
        }
        .area_secret.ScrollIn .h2_ttl span:nth-child(1)::before{animation-delay: 0s;}
        .area_secret.ScrollIn .h2_ttl span:nth-child(2)::before {animation-delay: 2s;}

    .area_secret .text{position: relative;width: 100%;line-height: 1.875;letter-spacing: 0;}
    .area_secret .wrapper .text::before{content: "";width: 210px;height: 181px;display: block;background: url(../images/home/bg_map.png) no-repeat;background-size: cover;position: absolute;left: -10px;bottom: -220px;z-index: -1;}
    .area_secret .come_btn{display: flex;justify-content: end;margin-top: 22px;}
    .area_secret .come_btn a{background: #FFF;border: 2px solid #722C1B;position: relative;width: 200px;height: 51px;border-radius: 5px;display: flex;justify-content: center;align-items: center;color: #722C1B;font-size: 0.9375rem;font-weight: bold;}
    .area_secret .come_btn a::after{content: "";display: block;width: 7px;height: 9px;background: url(../images/home/arrow_btn.svg) no-repeat;background-size: cover;position: absolute;right: 15px;top: 50%;transform: translateY(-50%);}
    .area_secret .come_btn a:hover{background: #722C1B;color: #FFF;}
    .area_secret .come_btn a:hover::after{background: url(../images/home/arrow_btn_w.svg) no-repeat;}


    /**/
    .area_school{position: relative;padding-bottom: 80px;padding-top: 196px;}
    .area_school::after{content: "";display: block;background: #FFF;width: 100%;height: 107px;position: absolute;bottom: -64px;left: 0;transform: scale(1.2);background: url(../images/bg_semicircle_w.svg) no-repeat bottom;background-size: 100%;}
    .area_school ul{position: relative;display: flex;flex-direction: column;margin-right: auto;margin-left: auto;}
        .area_school ul::after{content: "";display: block;width: 85px;height: 76px;background: url(../images/home/parts_school.png) no-repeat;background-size: cover;position: absolute;bottom: -65px;left: -12px;z-index: 1;}
    .area_school ul li{max-width: 479px;width: 100%;margin-right: auto;margin-left: auto;opacity: 0;transform: translateY(100%);}
    .area_school.ScrollIn ul li{animation: SlideUp .5s ease-out forwards;}
        @keyframes SlideUp {
            to {
                opacity: 1;transform: translateY(0);
            }
        }
        .area_school.ScrollIn ul li:nth-of-type(1){animation-delay: 0s;}
        .area_school.ScrollIn ul li:nth-of-type(2){animation-delay: 1s;}

    .area_school ul li.support{padding-top: 40px;}
    .area_school ul li h2{margin-bottom: 12px;line-height: 26px;}
    .area_school ul li .image{max-width: 477px;width: 100%;overflow: hidden;border-radius: 19.5px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);}
    .area_school ul li .image a{display: block;overflow: hidden;}
    .area_school ul li img{border-radius: 19.5px;}
    .area_school ul li .text{line-height: 1.813;margin-bottom: 20px;}


    /**/
    .area_link{position: relative;}
    .area_link::after{content: "";display: block;background: #FFF;width: 100%;height: 107px;position: absolute;bottom: -64px;left: 0;transform: scale(1.2);background: url(../images/bg_semicircle_o.svg) no-repeat bottom;background-size: 100%;}
    .area_link .wrapper{position: relative;z-index: 1;}
    .area_link ul{max-width: 300px;margin-top: 50px;margin-right: auto;margin-left: auto;}
    .area_link ul li:first-of-type{margin-bottom: 28px;}
    .area_link ul li a{position: relative;max-width: 550px;height: 330px;border-radius: 15.3px;align-items: end;margin-right: auto;margin-left: auto;flex-direction: column;}
    .area_link ul li a::before{content: "";display: block;width: 100%;height: 100%;max-height: 194px;max-width: 550px;background-position: top;border-radius: 15.3px 15.3px 0 0;}
        .area_link ul li.okonomimura a::before{background-image: url(../images/home/img_okonomimura.jpg);background-repeat: no-repeat;background-size: 100% auto;}
        .area_link ul li.service a::before{background-image: url(../images/home/img_gyomu.jpg);background-repeat: no-repeat;background-size: 100% auto;}
    .area_link ul li div.box{position: relative;width: 100%;background-color: #FFF;padding-left: 15px;padding-top: 10px;padding-right: 70px;}
        .area_link ul li.okonomimura div.box::after{content: "";display: block;width: 27px;height: 49px;background: url(../images/icon_01.png) no-repeat;background-size: cover;position: absolute;bottom: 0;right: 25px;}
        .area_link ul li.service div.box::after{content: "";display: block;width: 50px;height: 45px;background: url(../images/home/parts_service.png) no-repeat;background-size: cover;position: absolute;bottom: 14px;right: 12px;}
    .area_link ul li h2{font-size: 1.25rem;position: relative;display: inline-block;margin-bottom: 5px;}
    .area_link ul li h2::after{content: "";display: block;width: 22px;height: 22px;background: url(../images/home/icon_menu.svg);background-size: cover;position: absolute;top: 5px;}
        .area_link ul li.okonomimura h2::after{right: -37px;}
        .area_link ul li.service h2::after{right: -30px;} 
    .area_link ul li.okonomimura p span{margin-left: -10px;margin-right: -5px;}


    /**/
    .home_news .wrapper{padding-top: 130px;padding-bottom: 40px;max-width: 720px;}
    .home_news ul{width: 100%;}
    .home_news ul li{border-bottom: 1px solid #3B0600;}
    .home_news ul li .box{display: flex;flex-direction: column;padding: 24px 20px 24px 0;position: relative;font-size: 0.9375rem;}
    .home_news ul li .box::after{content: "";display: block;width: 6px;height: 8px;background: url(../images/home/arrow_news.svg);background-size: cover;position: absolute;right: 0;top: 58%;}
    .home_news ul li .box time{font-weight: bold;font-family: "Noto Sans", sans-serif;font-weight: bold;}
    .home_news ul li .box .cont{line-height: 1.8;}

/*footer*/
.footer_top .wrapper::before{content: "";display: block;width: 43px;height: 79px;background: url(../images/icon_01.png) no-repeat;background-size: cover;position: absolute;top: -60px;left: 16px;z-index: 1;}
.footer_top .wrapper::after{content: "";display: block;width: 32px;height: 50px;background: url(../images/icon_02.png) no-repeat;background-size: cover;position: absolute;top: -20px;left: 60px;z-index: 1;}


@media screen and (min-width:500px) {

    .main_image .wrapper::after{width: 175px;height: 122px;}

    /**/
    .area_secret .wrapper{padding-bottom: 0;}
    .area_secret .wrapper::before{width: 43vw;height: 43vw;right: 0;top: 42%;min-width: 270px;min-height: 270px;}
    .area_secret .wrapper::after{bottom: -5vw;}
    .area_secret .text{width: 50%;max-width: 582px;}
    .area_secret .wrapper .text::before{width: 345px;height: 297px;left: 0;bottom: -238px;}
    .area_secret .come_btn{width: 50%;margin-top: 44px;}
    .area_secret .come_btn a{max-width: 246px;width: 100%;}

    /**/
    .area_link ul{max-width: none;}
    .area_link ul li a::before{position: absolute;max-width: 263px;max-height: none;}
    .area_link ul li div{max-width: calc(100% - 223px);}
        .area_link ul li.okonomimura div{padding-right: 50px;padding-left: 10px;}
            .area_link ul li.okonomimura div.box::after{bottom: -9px;}
        .area_link ul li.service div{padding-top: 30px;}
    .area_link ul li a{max-width: none;height: 170px;align-items: flex-start;overflow-x: hidden;}
        .area_link ul li.okonomimura a{background-position: left;align-items: flex-end;justify-content: center;}
            .area_link ul li.okonomimura a::before{left: -50px;border-radius: 15.3px 0 0 15.3px;}
        .area_link ul li.service a{background-size: 50% auto;background-position: center right -15px;flex-direction: row;}
            .area_link ul li.service a::before{right: -50px;border-radius: 0  15.3px 15.3px 0;}
    
}

@media screen and (min-width:768px) {

    .main_image .img{margin-top: -90px;}


    
    .area_school ul li h2{line-height: 62px;}
    .area_school h2 a::after,.home_news h2 a::after{width: 39px;height: 39px;right: -54px;top: 15px;}
    .area_school ul::after{width: 119px;height: 106px;bottom: -40px;left: -10px;}

    .home_news ul li .box::after{top: 50%;transform: translateY(-50%);}

    /**/
    .area_products h2{font-size: 3rem;font-weight: 900;margin: 20px auto 40px;}
    ul.product_list{grid-template-columns: 1fr 1fr 1fr;gap: 34px 25px;margin-bottom: 92px;max-width: 950px;}
    ul.product_list li .category span small{margin-top: auto;display: inline-block;}
    ul.product_list li:nth-of-type(3) .category span small,ul.product_list li:nth-of-type(5) .category span small{margin-top: -6px;display: block;}
    ul.product_list li .image{height: 197px;}
    ul.product_list li .image img{max-width: none;max-height: none;height: 100%;width: 100%;transition: all .3s linear;}
    ul.product_list li .category{height: 96px;font-size: 1.25rem;letter-spacing: 0;}
    ul.product_list li .category span{min-height: 39px;background-size: 39px;padding-right: 47px;}
    ul.product_list li .category small{font-size: 1.125rem;}
    ul.product_list li a:hover{color: #E60012;}
    ul.product_list li a:hover img{transform: scale(1.05);}
    
    /**/
    .area_secret .wrapper{padding-bottom: 0;}
    .area_secret .wrapper::before{top: 36%;}
    .area_secret .wrapper::after{bottom: -10vw;}
    .area_secret .h2_ttl{max-width: 406px;margin-bottom: 38px;}
        .area_secret .h2_ttl::after{width: 110px;height: 124px;top: 30px;right: -136px;}
    .area_secret .wrapper .text::before{left: 41px;bottom: -234px;}
    .area_secret h2 span{font-size: 3.125rem;min-width: 370px;}


    /**/
    .area_school{padding-bottom: 80px;padding-top: 196px;}
    .area_school ul{flex-direction: row;gap: 0 40px;}
    .area_school ul li.support{padding-top: 75px;}
    .area_school ul li .text{margin-bottom: 30px;}
    .area_school ul li .image a:hover img{transform: scale(1.05);transition: all 1s ease;}

    /**/
    .bn_shop a{display: block;}
    .bn_shop a:hover{background: rgb(225 135 0 /.8);}
    .bn_shop a:hover img{opacity: .8;}

    .area_link ul{margin-top: 70px;}
    .area_link ul li a{height: 29vw;}
        .area_link ul li a:hover{transform: translateY(-10px);}
    .area_link ul li p{line-height: 1.813;letter-spacing: 0;font-size: 1rem;}
    .area_link ul li h2{line-height: 58px;font-size: 2rem;min-width: 315px;}
    .area_link ul li h2::after{width: 35px;height: 35px;top: 15px;}

    .area_link ul li.okonomimura h2::after{right: 0;}
    .area_link ul li.service h2::after{right: -20px;} 
    .area_link ul li a::before{width: 53%;max-width: 550px;top: 50%;transform: translateY(-50%);}
    .area_link ul li div.box{width: 50%;padding-left: 15px;padding-top: 10px;padding-right: 4px;}
        .area_link ul li.okonomimura div{padding-left: 0;padding-right: 50px;}
            .area_link ul li.okonomimura div.box::after{width: 43px;height: 81px;bottom: -20px;right: 29px;}
        .area_link ul li.service div{padding-left: 30px;padding-top: 20px;}
            .area_link ul li.service div.box::after{width: 81px;height: 70px;bottom: -48px;right: 10px;}
       
    /**/
    .home_news .wrapper{padding-top: 150px;}
    .home_news ul li .box{flex-direction: row;align-items: center;gap: 0 32px;}
    .home_news ul li a:hover{background: rgb(230 0 18 / .1);}

    .area_school::after,.area_link::after{bottom: -107px;}

    /*title*/
    .area_school h2,.home_news h2{font-size: 2.625rem;}

    /*footer*/
    .footer_top .wrapper::before{width: 54px;height: 99px;top: -110px;left: 16px;}
    .footer_top .wrapper::after{width: 41px;height: 63px;top: -42px;left: 75px;}

    .main_image .wrapper::after{width: 261px;height: 180px;}
    
}        

@media screen and (min-width:960px) {
   
    .area_link ul li.okonomimura div.box::after{bottom: -55px;right: 35px;}
    .area_link ul li.service div{padding-top: 50px;}
    .area_link ul li.service div.box::after{bottom: -88px;}
}

@media screen and (min-width:1080px) {

    .main_image .wrapper::after{width: 286px;height: 208px;bottom: 33px;}


    ul.product_list{max-width: 1130px;}
    ul.product_list li .image{height: 227px;}
    ul.product_list li .category{font-size: 1.5rem;}

    .area_school ul{max-width: 1020px;gap: 0 62px;}
    .area_school ul::after{left: -3vw;}

}

@media screen and (min-width:1130px) {


    .main_image .img{display: block;width: 100%;height: 100%;aspect-ratio: 1440 / 748;
    -webkit-mask-image: url("../images/home/msk_topimg.svg");-webkit-mask-repeat: no-repeat;-webkit-mask-position: 0 bottom;-webkit-mask-size: contain;
    mask-image: url("../images/home/msk_topimg.svg");mask-repeat: no-repeat;mask-position: 0 bottom;mask-size: contain;overflow: hidden;
    }
    .main_image .wrapper .main_title{left: 11.685vw;bottom: 143px;}

    .area_secret .wrapper::before{top: 20%;}

    /**/
    .area_link ul li a{height: 356px;}
        .area_link ul li.okonomimura a{padding-right: 65px;}
        .area_link ul li.service a{padding-left: 57px;}
        .area_link ul li.okonomimura a::before{width: 100%;left: 0;}
        .area_link ul li.service a::before{width: 100%;right: 0;}
    .area_link ul li div.box{padding-left: 15px;padding-top: 10px;padding-right: 4px;}
    .area_link ul li.okonomimura div{max-width: 425px;}
        .area_link ul li.okonomimura div.box::after{width: 54px;height: 99px;bottom: -72px;right: -1px;}
    .area_link ul li.service div{max-width: 455px;padding-top: 97px;}
        .area_link ul li.service div.box::after{bottom: -87px;right: 7px;}    
    .area_link ul li h2{font-size: 2.46rem;}
        .area_link ul li.okonomimura h2{width: 371px;}
        .area_link ul li.service h2{width: 411px;}
    .area_link ul li.service h2::after{right: 0;}
}


@media screen and (min-width:1200px) {

    .area_secret .text{width: 60%;}
    .area_secret .wrapper::before{width: 550px;height: 550px;right: -40px;top: 42px;}
    .area_secret .wrapper::after{width: 146px;height: 146px;background-size: 66px auto;right: -33px;bottom: -139px;}

    .area_link ul li.okonomimura div.box::after{width: 54px;height: 99px;bottom: -72px;right: -1px;}
    .area_link ul li.service div.box::after{width: 87px;height: 76px;bottom: -87px;right: 7px;}

    .footer_top .wrapper::before{top: 0;left: -33px;}
    .area_link .wrapper{max-width: 1100px;}
    .area_school ul::after{left: -70px;}
    .home_news .wrapper{max-width: 1020px;display: flex;justify-content: space-between;gap: 0 63px;}
    .home_news ul{max-width: 720px;}

        /*footer*/
    .footer_top .wrapper::before{top: -110px;left: -54px;}
    .footer_top .wrapper::after{left: 33px;}
}

@media screen and (min-width:1390px) {
    .main_image .wrapper .main_title{left: 170px;}
    .main_image .wrapper::after{right: 140px;}
    .contents_home section > div{padding-right: 0;padding-left: 0;}


    .area_school ul::after{bottom: -29px;left: -110px;}


}