@charset "UTF-8";
@media screen and (min-width: 810px) {
    .footer_frex a:hover{opacity: .6;}
}
@media screen and (min-width: 1450px) {
    .message .wave{bottom: -2px;}
    .illustrator .wave{bottom: -2px;}
    .graphic .wave{bottom: -2px;}
}
@media screen and (max-width: 1200px) {
    .message p{font-size: 1.4vw;}

    .illustrator h2{font-size: 3vw;}
    .illustrator p{font-size: 1.4vw;}

    .event h3{font-size: 5vw;}
    .event p{font-size: 2.2vw;}

    .graphic .ttl {width: 30%;}
    .swiper{padding: 0 20px!important;}
}

@media screen and (max-width: 800px) {
    .message .right {width: 13%; top: 14%;}
    .message .left {width: 16%; top: 10%;}

    .lity-container{width: 400px;}
    .lity-close{top: 10px!important; right: 10px!important;}
}
@media screen and (max-width: 768px) {
    .graphic .swiper-slide.FeadAnm.anm:nth-of-type(2){animation-delay: 0s;}
    .graphic .swiper-slide.FeadAnm.anm:nth-of-type(3){animation-delay: 0s;}
    .swiper-button-next, .swiper-button-prev{display: block;}
    footer{padding-top: 5%;}
    .footer_frex a {width: 30px;}
    .amu {width: 70px;}

    footer .left-bottom{width: 9%; left: 10%;}
}
@media screen and (max-width: 650px) {
    .fv .illust{width: 75%; top: 46%; }
    .fv{height: 110vw; margin-bottom: 20%;}
    .fv .fv-bg-r-t{width: 48%;}
    .fv .fv-bg-l-t{width: 48%;}
    .fv .fv-bg-r{width: 12%;}
    .fv .fv-bg-l{width: 12%;}
    .fv .fv-leaf-left {width: 15%; top: 63%; left: -1%; z-index: 2;}
    .fv .fv-leaf-right{width: 15%; top: 13%; right: 1%;}
    .fv .txt-left.pc{        display: none;}
    .fv .fv-txt.sp{display: block;}
    .fv .fv-txt.sp .txt-left{width: 62%; bottom: 0%; left: 8%;}
    .fv .fv-txt.sp .txt-right{width: 85%; bottom: -3%; left: 7%; z-index: 2;}

    .message p br.sp-block{display: block;}
    .message .right {width: 24%; top: 16%; right: -5%;}
    .message .left {width: 33%; top: 21%; left: -14%;}
    .message .ttl-flower{width: 30%; bottom: -14%; z-index: 2;}
    .message p{font-size: 3vw;}
    .message .ttl{margin-bottom: 8%;}
    .message .left-top {width: 8%; top: 5%; left: 10%;}
    .message .right-bottom{width: 14%; bottom: 20%;}
    .message .left-bottom {width: 13%; left: 6%; bottom: 16%;}
    .message .left-top {width: 8%; top: 36%; left: 5%;}
    .message .right-top{width: 17%; top: 30%; right: 0%;}
    .message .right-bg{width: 18%;}
    
    .sakura li {width: 15px;}

    .illustrator .img{width: 90%;}
    .illustrator h2{font-size: 9vw;}
    .illustrator p{font-size: 3vw;}
    .illustrator{padding-top: 10%; padding-bottom: 10%;}
    .illustrator .sns .flex li{width: 10%;}
    .illustrator .illust-right-top {width: 12%; top: 16%; right: 13%;}
    .illustrator .illust-left.illust-left-top {width: 14%; top: 20%; right: 8%;}
    .illustrator .illust-left.illust-left-bottom{width: 10%; bottom: -1%;}
    .illustrator .illust-right-bottom { width: 33%; bottom: -12%;}
    .illustrator p br.sp-block{display: block;}
    .illustrator .left-bg{width: 16%;}

    .event{width: 90%; padding: 20px;}

    .graphic{padding-top: 20%; padding-bottom: 30%;}
    .graphic .ttl-flower {width: 27%; top: -4%;}
    .graphic .ttl {width: 33%;}
    .graphic .center-bottom { width: 9%; bottom: 3%;}
    .graphic .right-bottom{width: 22%; bottom: 3%; right: 12%;}
    .event .btn a{font-size: 1.6rem;}
    
}
@media screen and (max-width: 550px) {
    .message .ttl{width: 60%;}
    .lity-container{width: 100%;}
    #load_logo{width: 280px;}
}
@media screen and (max-width: 420px) {
    .fv .fv-txt.sp .txt-right{bottom: -5%;}

    .message .right {width: 26%; top: 18%; right: -7%;}
    .message .ttl-flower{bottom: -9%;}
    .message p{font-size: 4.2vw;}

    .illustrator .wave{bottom: -1px;}
    .illustrator p{font-size: 4.2vw;}
    .illustrator .ttl-flower{bottom: -6%;}
    /* .illustrator .illust-right-top {width: 28%; top: 4%; right: 3%;}
    .illustrator .illust-left.illust-left-top {width: 26%; top: 2%; left: 1%;} */

    footer {height: auto; padding: 40px 0 20px 0;}
    .footer_box {height: auto;}
    .footer_frex {
        width: 100%;
        justify-content: center;
        margin-right: 0;
        padding-right: 0;
        border: none;
        padding-bottom: 20px;
    }
    .footer_frex::after {
        content: "";
        width: 50%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #000;
    }
    .amu {padding-top: 20px;}
    .event h3{font-size: 8vw;}
    .event p:first-of-type{font-size: 6.7vw;}
    .event p{font-size: 4.5vw;}

    .illustrator .illust-right-top {top: 14%;}
    .illustrator .illust-left.illust-left-top {top: 18%;}
}