@charset "UTF-8";

@media screen and (min-width: 1000px){
    .main-menu a:hover {color: #8B0208;}
    .side-menu .hashtag .flex li:hover{background: #05A7C6;}
    .side-menu .hashtag .flex li a:hover{color: #fff;}
    .fv-txt:hover::after{right: 10px;}
    .fv-txt:hover a{color: #8B0208;}
    #news .news-area .list li a:hover{color: #8B0208;}
    #news .news-area .list li a:hover p::after{color: #8B0208;}
    #news .tab ul li:hover{color: #fff; border-left:solid 2px #fff; border-bottom: solid 2px #fff;}
    #guide .list .flex li:hover .img-area img{transform: scale(1.2);}
    #guide .list .flex li:nth-child(n+2):hover a .btn{background: #05A7C6;}
    #guide .list .flex li:nth-child(n+2):hover a .btn::after{background: #fff;}
    #event .new-area ul li:first-of-type:hover .btn span{background: #fff; color: #DB7D8C;}
    #event .new-area ul li:hover .btn span::after{background: #DB7D8C;}
    #event .new-area ul li:last-of-type:hover .btn span{background: #fff; color: #DB7D8C;}
    #event .open-campus ul li:first-of-type:hover .btn span{background: #fff; color: #7DB975;}
    #event .open-campus ul li:first-of-type:hover .btn span::after{background:#7DB975;}
    /* #event .open-campus ul li:nth-of-type(2):hover .btn span {background: #fff; color: #3BA599;}
    #event .open-campus ul li:nth-of-type(2):hover .btn span::after{background:#3BA599;} */
    #event .open-campus ul li:last-of-type:hover .img-area img {transform: scale(1);}
    #event .new-area ul li:hover .img-area img{transform: scale(1.1);}
    #event .open-campus ul li:hover .img-area img{transform: scale(1.1);}
    #news .news-area .list li a:hover p{color: #8B0208;}

    #about .box.two-column .flex li:hover img{transform: skew(12deg) scale(1.25);}
    #about .box.three-column .flex li:hover img{transform: skew(12deg) scale(1.25);}

    .swiper-slide a:hover .thum{transform: scale(1.1);}

    footer .teacher-area .flex p{font-size: 2.8rem;}
    .footer-container .flex .btn-area ul li:hover{opacity: .5;}
    .footer-container .flex .btn-area ul li:last-of-type{opacity: 1;}
    .top .btn a:hover::after{right: 10px;}
    
}
@media screen and (min-width: 1450px){
    .fv-txt{font-size: 1.4rem; padding-left: 15px;}
    .top .ttl-area h2{font-size: 8rem;}

    #about .box.two-column .flex li p{font-size: 2rem;}
    #about .box.two-column .flex li h3{font-size: 3rem;}
    #about .box.three-column .flex li p{font-size: 1.6rem;}
    #about .box.three-column .flex li h4{font-size: 2.5rem;}

    #event .new-area ul{height: 600px;}
    #event .new-area ul li:first-of-type{height: 600px;}
    #event .new-area ul li.main .txt-area{left: 5%; bottom: 24%;}
    #event .new-area ul li:first-of-type .btn{left: 5%;}
    #event .new-area ul li.main .txt-area .day{font-size: 5rem;}
    #event .new-area ul li.main .txt-area h3{font-size: 4rem;}
    #event .new-area ul li.main .txt-area .area{font-size: 3rem;}
    #event .new-area ul li.main .txt-area .area::before{width: 30px; height: 30px;}

    /* #event .new-area ul li:last-of-type{height: 400px;} */
    #event .new-area ul li.next .txt-area{bottom: 32%;}
    #event .new-area ul li.next .txt-area .day{font-size: 6.5rem; margin-top: 20px; margin-bottom: 20px;}
    #event .new-area ul li.next .txt-area h3{font-size: 5rem;}
    #event .new-area ul li.next .txt-area .index{font-size: 4rem;}
    #event .new-area ul li.next .txt-area .area{font-size: 3rem;}
    #event .new-area ul li.next .txt-area .area::before{width: 30px; height: 30px;}
    #event .open-campus ul li h3 {font-size: 4rem;}

    footer .teacher-area .flex h2{font-size: 4rem;}
    footer .teacher-area{height: 20vw;}
}
@media screen and (max-width: 1200px){
    .w1100{padding: 0 40px;}
    .side-menu{top: 2.5vw; width: 33%; height: 38.5vw;}
    .side-menu .hashtag .flex li{font-size: 1.3vw;}
    .side-menu .btn a{width: 26vw;}
    .side-menu .btn:last-of-type a{width: 24.8vw;}
    .fv-txt{left: 22vw; bottom: 5%;}

    .side-menu .hashtag .flex{padding: 6% 14% 4% 4%;}

    #guide .list .flex li:nth-child(n+2) h3{font-size: 1.8rem;}
    #guide .list .flex li{max-height: 350px;}

    #news .btn{left: 3%;}
}

@media screen and (max-width: 1000px){
    .pc-menu{display: none;}
    #news .news-area .list li .day{display: block;}
    #news .news-area .list li .txt{width: 100%; margin-top: 5px; line-height: 1.4; font-size: 1.4rem;}
    .search input{font-size: 16px;}
    .top .pc.change-logo{width: 43vw;}
    .top .pc.change-logo.scrolled{width: 38vw;}

    .footer-container .left .address h3{font-size: 2.6vw;}
    .footer-container .left .address p{font-size: 1.4vw;}
    .footer-container .left .address span{font-size: 1.4vw;}
    .footer-container .flex .btn-area ul li a{font-size: 1.4vw;}
    .footer-container .flex .f-official-btn a{font-size: 1.4vw;}
    .footer-container .flex .btn-area ul li{width: 48%; margin-bottom: 10px;}
    .footer-container .flex .btn-area ul li:last-of-type{margin-bottom: 0;}
    .footer-container .flex .f-official-btn a::after{width: 20px;}
}
@media screen and (max-width: 768px){
    header .fixed{background: #ABCFDE; height: 50px;}
    .menu-toggle span{background-color: #fff;}
    .top .btn a{width: 280px!important; height: 60px;}
    .header-container{top: 5px;}
    .menu-toggle{padding-right: 10px;}

    .top .h-logo{width: 55%!important;}
    .top .h-logo .pc{display: none;}
    .top .h-logo img.sp{display: block;}

    .fv{margin-bottom: 10%;}
    .fv .img{width: 100%; padding-bottom: 8%; padding-top: 0;}
    .fv-txt{position: relative; left: -20px; bottom: inherit; font-size: 1.2rem; height: auto; padding: 10px 20px 10px 30px; line-height: 1.4;}
    .fv-txt br.sp-block{display: block;}
    .side-menu{position: relative; width: 100%; height: auto; background: none; clip-path: inherit; top: inherit;}
    .side-menu .btn a{width: 88vw!important; height: 60px; font-size: 1.6rem;}
    .side-menu .btn:last-of-type a{width: 84vw!important; height: 60px; font-size: 1.6rem; margin-bottom: 5%;}
    .side-menu .serch{display: none;}
    .side-menu .hashtag .flex{padding: 0 10px; margin-bottom: 5%;}
    .side-menu .hashtag .flex li{font-size: 1.6rem; margin-right: 10px; margin-bottom: 10px; padding: 10px 20px;}
    .side-menu .search{padding-top: 0; padding-left: 10px; padding-right: 10px; margin-bottom: 8%;}
    .side-menu .search input{height: 40px;}
    .side-menu .search button{width: 40px; height: 40px;}
    .side-menu .search button::after{width: 15px; height: 15px;}

    #news{padding-bottom: 25%;}
    #news .flex .news-area{width: 100%;}
    #news .btn{position: relative; left: inherit; top: inherit; display: flex; justify-content: center; z-index: 2;}

    #guide .ttl-area{display: flex; align-items: end; padding-top: 10%;}
    #guide .ttl-area div{margin-left: 10px; bottom: 10px;}
    #guide .list .flex{display: block;}
    #guide .list .flex li{margin-left: 0;}
    #guide .list .flex li:first-of-type{width: 100%; justify-content: start; height: auto; margin-bottom: 20px;}
    #guide .list .flex li{width: 100vw; height: 15vh;}
    #guide .list .flex li:nth-child(n+2){margin-bottom: 2%;}
    #guide .list .flex li:last-child{margin-bottom: 0;}
    #guide .list .flex li:nth-child(n+2) h3{writing-mode: inherit; left: inherit; right: 12%; top: 15%;}
    /* #guide .list .flex li:last-of-type h3{writing-mode: inherit; left: inherit; top: 3%; right: 18%;} */
    #guide .list .flex li .number{bottom: -10%; font-size: 15rem; opacity: .1;}
    #guide .list .flex li .img-area img.pc{display: none;}
    #guide .list .flex li .img-area img.sp{display: block;}
    #guide .list .flex li .img-area img{height: 150%;}
    #guide .list .flex li:nth-child(n+2){left: -12%;}
    #guide .list .flex li a::after{width: 180%; right: 0;}
    #guide .list .flex li:nth-of-type(2) a::after{background-image: url(../images/guide_grade_01_sp.png);}
    #guide .list .flex li:nth-of-type(3) a::after{background-image: url(../images/guide_grade_02_sp.png);}
    #guide .list .flex li:nth-of-type(4) a::after{background-image: url(../images/guide_grade_03_sp.png);}
    #guide .list .flex li:nth-of-type(5) a::after{background-image: url(../images/guide_grade_04_sp.png);}
    .top #guide::after{background-image: url(../images/guide_bg_sp.png); top: 0; height: 70%;}
    #guide .ashirai.left img.pc{display: none;}
    #guide .ashirai.left{left: inherit; top: -20px; right: 0; width: 40%;}
    #guide .ashirai.left img.sp{display: block;}
    #guide .ashirai.right img.pc{display: none;}
    #guide .ashirai.right{top: inherit; bottom: -15%; width: 8%;}
    #guide .ashirai.right img.sp{display: block;}
    #guide .ashirai.right-bottom{display: none;}
    #guide .list .flex li .btn{width: 30px; height: 30px;}
    #guide .list .flex li .btn::after {height: calc(tan(30deg) * 35px / 2); width: 8px;}

    #event .ashirai.right{width: 205%;}


    #fukudainow .btn-area.flex {justify-content: space-between;}
    #fukudainow .btn-area.flex .btn{width: 48%;}
    #fukudainow .btn-area .btn a{width: 100%; margin: 0;}
    
    .anker.link-btn ul{justify-content: space-between;}
    .anker.link-btn ul li{width: 49%; margin: 0;}

    /*-- saito ---*/
    #nyugakushikaku .btn{ width: 49%;}
    .common .btn{ width: 49%;}
    .flex-style01 .item{ width: 100%; margin-bottom: 20px;}
    .common .btn.btn_pink{ width: 100%;}
    .flex.fu_kaisetsu{ flex-flow: column;}
    .flex.fu_kaisetsu > div.item img{ width: 100%;}
    .flex.fu_kaisetsu > div.item{ width: 100%;}
    table.table01{ width: 100%; max-width: none;}
    table.table01 td, table.table01 th{ font-size: 2.6vw; padding: 5px;}
    .sp-block01{ display: block;}
    .prev-next-links{ align-items: center;}
    .prev-next-links > div{ width: 30%!important;}
    
}
@media screen and (max-width: 650px){
    .w1100{padding: 0 20px;}
    .loop_text{font-size: 35vw;}
    .top .ttl-area h2{font-size: 13vw;}

    .fv img.pc{display: none;}
    .fv img.sp{display: block;}

    #news .tab ul li{font-size: 1.8rem;}
    #news .flex .txt-area{width: 100%;}
    #news .flex .news-area .list li:first-of-type{left: 0;}
    #news .flex .news-area .list li:nth-of-type(2){left: 0;}
    #news .flex .news-area .list li:nth-of-type(3){left: 0;}
    #news .flex .news-area .list li:last-of-type{left: 0;}
    #news  .news-area .list li a{padding-left: 0; padding-right: 20px;}

    #event .new-area ul{height: auto;}
    /* #event .wrapper{top: 37%;} */
    #event .new-area ul li:first-of-type{position: relative; width: 100%; height: 65vw; margin-bottom: 3%; left: -6.5%;}
    /* #event .new-area ul li:last-of-type{position: relative; width: auto; height: auto;}
    #event .new-area ul li:last-of-type a{position: relative; margin-left: auto; margin-right: 0; width: 75%; right: -6%; min-height: 42vw;} */
    #event .new-area ul li:nth-of-type(2) .btn{left: 10%;}
    #event .new-area ul li.main .txt-area{bottom: 26%;}
    #event .new-area ul li.main .txt-area .day{font-size: 6.5vw;}
    #event .new-area ul li.main .txt-area h3{font-size: 5vw; margin-bottom: 2%;}
    #event .new-area ul li.main .txt-area .area{font-size: 3.2vw;}
    #event .new-area ul li.next .txt-area{bottom: 37%; left: 10%;}
    #event .new-area ul li.next .txt-area .index{font-size: 4.2vw;}
    #event .new-area ul li.next .txt-area .day{font-size: 6.2vw;}
    #event .new-area ul li.next .txt-area h3{font-size: 4.5vw; margin-bottom: 2%;}
    #event .new-area ul li.next .txt-area .area{font-size: 3vw;}

    #event .open-campus ul li h3{font-size: 1.8rem; bottom: 24%;}
    #event .open-campus ul li .txt-area.absolute .area{font-size: 1.2rem;}
    #event .new-area ul li.main .txt-area .area::before {width: 12px!important; height: 14px!important;}
    #event .open-campus ul li:first-of-type{left: -6%;}
    #event .open-campus ul li:last-of-type{right: -6%;}
    #event .open-campus ul li .txt-area .area::before {width: 10px!important; height: 12px!important;}
    #event ul li .btn{bottom: 15px;}
    #event ul li .btn span{width: 180px; height: 40px; font-size: 1.4rem;}
    #event ul li .btn span::after{width: 5px; height: calc(tan(30deg) * 50px / 2);}
    #event .open-campus ul{height: auto;}
    #event .open-campus ul li:first-of-type{position: relative; width: 100%; height: 50vw; margin-bottom: 5%;}
    #event .open-campus ul li:last-of-type{position: relative; width: 100%; height: 50vw;}

    #about .box.two-column .flex{display: block;}
    #about .box.two-column .flex li{width: 98vw; margin-bottom: 8%; left: -15%;}
    #about .box.two-column .flex li:last-of-type{margin-bottom: 0;}
    #about .box.two-column .flex li h3{font-size: 1.8rem; left: 20%;}
    #about .box.two-column .flex li p{font-size: 3vw; text-align: start; height: 20vw;  right: -8%; left: auto; transform: translateX(0);}
    #about .box.two-column .flex li span{top: 45%;}
    #about .box.two-column .flex li .img-area img.pc{display: none;}
    #about .box.two-column .flex li .img-area img.sp{display: block;}
    
    .top #about .ttl-area{margin-bottom: 8%;}
    #about .box.three-column .flex li .img-area img.pc{display: none;}
    #about .box.three-column .flex li .img-area img.sp{display: block;}
    #about .box.three-column h3{margin-bottom: 7%; font-size: 8vw;}
    #about .box .flex{display: block;}
    #about .box.three-column .flex li{width: 98vw; left: -15%; margin-bottom: 8%;}
    #about .box.three-column .flex li p{width: 70%; height: 15vw; font-size: 2.8vw; text-align: start; top: -10%; right: -11%; left: auto; transform: translateX(0);}
    #about .box.three-column .flex li h4 {font-size: 1.8rem; left: 18%; bottom: 10px;}
    #about .box.two-column .flex li a::after {bottom: 8px; height: calc(tan(30deg) * 70px / 2); width: 10px;}
    #about .box.three-column .flex li a::after{bottom: 8px; height: calc(tan(30deg) * 70px / 2); width: 10px;}
    @keyframes a-Fead-up {
        0% {transform: translateX(0) translateY(100px); opacity: 0;}
        100% {transform: translateX(0) translateY(0); opacity: 1;}
    }
    
    #fukudainow .btn-area.flex .btn{width: 100%; display: flex; justify-content: center;}
    #fukudainow .btn-area .btn a:first-of-type{margin-bottom: 20px;}
    #fukudainow .ttl-area p{font-size: 1.4rem;}
    #fukudainow .swiper{margin-bottom: 8%;}

    footer .teacher-area{height: 60vw;}
    footer .teacher-area .flex {justify-content: center;}
    footer .teacher-area .flex .txt-area{margin-bottom: 20px;}
    footer .teacher-area .flex h2{font-size: 3.5rem;}
    footer .teacher-area .flex p{font-size: 1.8rem;}
    footer .teacher-area .txt-area{width: 100%; text-align: center;}
    .footer-container .left {width: 100%;}
    .footer-container .left .address h3{text-align: center; font-size: 2.5rem;}
    .footer-container .left .address p{text-align: center; font-size: 1.2rem;}
    .footer-container .left .address span{display: none;}
    .footer-container .left .sns-area .flex{justify-content: center; margin-bottom: 30px;}
    .footer-container .sns-area ul li{margin-right: 30px; margin-top: 25px;}
    .footer-container .sns-area ul li:nth-of-type(2){margin-right: 0px;}
    .footer-container .sns-area ul li:nth-of-type(4){margin-right: 0px;}
    .footer-container .sns-area ul li a::after{right: -14px;}
    .footer-container .sns-area ul li:nth-of-type(2) a::after{content: none;}
    .footer-container .flex .f-official-btn a{margin-top: 30px!important;}
    .footer-container .f-policy ul{margin-top: 20px;}
    .footer-container .right {width: 100%;}
    .footer-container .flex .btn-area ul{margin-bottom: 0;}
    .footer-container .flex .btn-area ul li{width: 48%; margin-bottom: 20px; padding: 5px; font-size: 1.8rem; margin-inline: auto; padding: 0;}
    .footer-container .flex .f-official-btn{width: 100%;}
    .footer-container .flex .btn-area ul li a{font-size: 1.4rem;}
    .footer-container .flex .f-official-btn a{width: 300px; margin-inline: auto; font-size: 1.4rem; margin-top: 5%;}
    footer .teacher-area .flex .btn a{width: 300px;}
    .footer-container .flex .btn-area ul{ justify-content: space-between;}
    footer .footer-container .flex .btn-area ul li:last-of-type{display: block;}
}

@media screen and (max-width: 450px){
    .header-content{width: 100%; padding: 0 20px 15% 20px;}
    .header-content.active .hm-logo{width: 100%;}
    .other-menu ul li{width: 49%;}
    .other-menu ul li a{font-size: 1.1rem;}
    .hm-sns ul li{width: 49%;}
    .sub-menu li a br.sp-block{display: block;}
    
    .top .h-logo{width: 85%!important;}
    /* .fv-txt{font-size: 4vw;} */
    
    #guide .ashirai.left{width: 60%;}
    #guide .ashirai.right{width: 15%;}
    #guide .list .flex li .number{font-size: 11rem;}

    #event .new-area ul li.main .txt-area .area::before {width: 2vw; height: 3.5vw;}
    #event .new-area ul li.next .txt-area .area::before {width: 3vw; height: 3.2vw;}
    /* #event .new-area ul li:last-of-type a{min-height: 48vw;} */
    #event .new-area ul li.main .txt-area{bottom: 30%;}
    #event .open-campus ul li h3{bottom: 32%;}

    .header-content .search input{width: 88%;}
    .header-content .search  .c-col-xs-12{width: 12%;}
    .header-content .search  button{width:100%;}

    .side-menu .search input{width: 88%;}
    .side-menu .search  .c-col-xs-12{width: 12%;}
    .side-menu .search  button{width:100%;}
    
    footer .teacher-area .flex h2{font-size: 2.2rem;}
    footer .teacher-area .flex p{font-size: 1.6rem;}

    .grade-bg{height: 100%;}
    .prev-next-links > div > a{ font-size: 10px!important;}

}
@media screen and (max-width: 350px){
    #event .open-campus ul li h3{bottom: 40%;}
}