@charset "utf-8";
/* CSS Document */


/*-----------------------------------------

Last update:    2020-11-16

---------------------------------------*/



/*=============================
common
=============================*/
#mainarea .sc_block01{
    margin-bottom:0;
}

#mainarea .ttl_home{
    max-width:700px;
    margin:0 auto 1.5em;
}




/*=============================
header
=============================*/
#header{
    background:url(../../img/bg_main.jpg) #effcff no-repeat center bottom;
    padding-top:2em;
}

@media screen and (max-width:980px){
    #header{
        background:url(../../img/bg_main.jpg) #effcff no-repeat center bottom;
        background-size:160% auto;
        padding-top:1em;
    }
}

@media screen and (max-width:768px){
    #header{
        background:url(../../img/bg_main.jpg) #effcff no-repeat center bottom;
        background-size:150% auto;
        padding-top:1em;
    }
}

@media screen and (max-width:480px){
    #header{
        background:url(../../img/bg_main.jpg) #effcff no-repeat 37% bottom;
        background-size:200% auto;
    }
}



/*=============================
dir_title
slide_box
=============================*/
#dir_title{
    clear:both;
    padding:1.5em 0 4.5em;
}
#slide_box{
    width:94%;
    margin:0 auto;
}

@media screen and (max-width:768px){
    #dir_title{
        clear:both;
        padding:1.5em 0 6%;
    }
}



/*=============================
announce_area
=============================*/
#announce_area{
    background:#6cc59d repeat 0 0;
    padding:0;
}
#announce_area .inner01{
    padding-top:3em;
    padding-bottom:3em;
}
#announce_box{
    background:#f7e440;
    border-radius:20px;
    padding:2em 3em;
}
#announce_box h1{
    font-size:180%;
    font-weight:700;
    line-height:1.4;
    margin-bottom:1em;
    text-align:center;
}
#announce_box h1 span{
    display:inline-block;
    margin:0 0.25em;
}
#announce_box .txt{
    text-align:center;
}
#announce_box .txt span{
    display:inline-block;
}
#announce_box .btn_announce{
    max-width:480px;
    margin:1.5em auto 0;
}
#announce_box .btn_announce a{
    display:block;
    width:100%;
    height:0;
    padding-top:19.1666%;
    background:url(../../announcement/img/bnr_announce.png) no-repeat 0 0;
    background-size: 100% auto;
    text-indent:-9999px;
}
#announce_box .btn_announce a:hover{
    background:url(../../announcement/img/bnr_announce_on.png) no-repeat 0 0;
    background-size: 100% auto;
}

@media screen and (max-width:480px){
    #announce_box{
        padding:2em 2em;
    }
    #announce_box h1{
        font-size:160%;
        margin-bottom:0.75em;
    }
}


/*=============================
info_area
=============================*/
#info_area{
    background:url(../../img/bg_info.jpg) repeat 0 0;
    padding:0;
}
#info_area .inner01{
    padding-top:3em;
    padding-bottom:3em;
}

#info_box{
    background:rgba(255,255,255,0.7);
    border-radius:20px;
    padding:2em 3em;
}

#info_box h1{
    float:left;
    width:160px;
}
#info_box h1 .ttl_info_sp{
    display:none;
}

#info_box #info_main{
    float:right;
    width:calc( 100% - 200px );
    margin-bottom:1.5em;
}


@media screen and (max-width:768px){
    #info_area .inner01{
        padding-top:1.5em;
        padding-bottom:2em;
    }
    #info_box{
        padding:2em 2em;
    }
    #info_box h1 .ttl_info_pc{
        display:none;
    }
    #info_box h1 .ttl_info_sp{
        display:block;
    }
    #info_box h1{
        float:none;
        width:70%;
        margin:0 auto 2em;
    }
    #info_box #info_main{
        float:none;
        width:100%;
    }
}


@media screen and (max-width:480px){
    #info_box{
        padding:2em 1em;
    }
    #info_box h1{
        width:90%;
        margin:0 auto 1.5em;
    }
}






/*=============================
lead_area
=============================*/
#lead_area{
    background:#fdf1e8;
}
#lead_area .inner01{
    padding-top:3em;
    padding-bottom:3em;
}

#lead_area h1{
    color:#43c58b;
    font-size:180%;
    font-weight:700;
    line-height:1.4;
    margin-bottom:1em;
}
#lead_area h1 span{
    font-size:120%
}

#lead_area p span{
    display:inline;
    font-size:110%;
    line-height:2;
    border-bottom:2px dotted #ccbaae;
}


@media screen and (max-width:480px){
    #lead_area h1{
        text-align:center;
    }
}


/*=============================
pre_area
=============================*/
#pre_area{
    background:#c2ead8;
}

#pre_area h1{
    padding-top:1em;
}

#pre_area .inner01{
    padding-bottom:3em;
}


#mainarea .link_btn01{
    clear:both;
}

#mainarea .link_btn01 li{
    position:relative;
    float:left;
    border-radius:20px;
    background:#fff;
    overflow:hidden;
    margin-bottom:2em;
}

#mainarea .link_btn01.w02 li{
    width:47.5%;
}
#mainarea .link_btn01.w02 li:first-of-type{
    margin-right:5%;
}
#mainarea .link_btn01.w03 li{
    width:31%;
    margin-right:3.5%;
}
#mainarea .link_btn01.w03 li:nth-of-type(3n){
    margin-right:0;
}


@media screen and (max-width:480px){
    #mainarea .link_btn01 li{
        float:none;
    }
    #mainarea .link_btn01.w02 li{
        width:90%;
        margin:0 auto 2em;
    }
    #mainarea .link_btn01.w03 li{
        width:90%;
        margin:0 auto 2em;
    }
    #mainarea .link_btn01.w03 li:nth-of-type(3n){
        margin:0 auto 2em;
    }
}



#mainarea .link_btn01 li a{
    display:block;
    width:100%;
    color:#fff;
}
#mainarea .link_btn01 a img{
    width:100%;
    transition: transform 0.5s linear;
}
#mainarea .link_btn01 a:hover img{
    opacity:1;
    transform: scale(1.05);
}

#mainarea .link_btn01 li span{
    position:absolute;
    bottom:0;
    left:0;
    display:block;
    width:100%;
    box-sizing:border-box;
    font-size:110%;
    line-height:1.2;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    text-align:center;
    padding:0.5em;

    background-image: linear-gradient(
        -45deg,
        rgba(143,120,102,0.9) 25%,
        rgba(152,131,114,0.9) 25%,
        rgba(152,131,114,0.9) 50%,
        rgba(143,120,102,0.9) 50%,
        rgba(143,120,102,0.9) 75%,
        rgba(152,131,114,0.9) 75%,
        rgba(152,131,114,0.9)
        );
    background-size: 10px 10px;
    background-attachment: fixed;
}






/*=============================
about_area
=============================*/
#about_area{
    background-image: linear-gradient(
        -90deg,
        #fdf1e8 30%,
        #fefbf8 30%,
        #fefbf8 70%,
        #fdf1e8 70%,
        #fdf1e8 
        );
    background-size: 70px 70px;
    background-attachment: fixed;
}
#about_area h1{
    padding-top:1em;
}
#about_area .inner01{
    padding-bottom:3em;
}





/*=============================
facility_area
=============================*/
#facility_area{
    background:#caefe9;
}
#facility_area h1{
    padding-top:1em;
}
#facility_area .inner01{
    padding-bottom:3em;
}



/*=============================
event_area
=============================*/
#event_area h1{
    padding-top:1em;
}
#event_area{
    background:url(../../img/bg_event.png) repeat 0 0;
}
#event_area .inner01{
    padding-bottom:3em;
}




/*=============================
bnr_area
=============================*/
#bnr_area{
}
#bnr_area .inner01{
    padding-top:3em;
    padding-bottom:3em;
}

#bnr_area .left_box li{
    width:95%;
    margin-bottom:1.5em
}

@media screen and (max-width:768px){
    #bnr_area .left_box li{
        margin-bottom:1.5em
    }
}


@media screen and (max-width:480px){
    #bnr_area .left_box li{
        margin:0 auto 1.5em;
    }
}



/*=============================
tw_area
=============================*/
#bnr_area .right_box .tw_box{
	border:1px solid #ddd;
}


@media screen and (max-width:480px){
#bnr_area .right_box .tw_box{
	width:95%;
	margin:0 auto;
}
}