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


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

Last update:    2019-10-10

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


/*=============================
home_mainimg
=============================*/
#home_mainimg{
}
#home_mainimg{
    background:url(../../img/main.jpg) no-repeat center center;
    background-size:cover;
    height:650px;
    padding:0 1em;
}

#home_mainimg h1{
    max-width:680px;
    margin:0 auto 0;
    padding-top:100px;
}

@media screen and (max-width:1400px){
    #home_mainimg{
    background:url(../../img/main.jpg) no-repeat center center;
    background-size:cover;
    height:560px;
    padding:0 1em;
}
    #home_mainimg h1{
        max-width:680px;
        margin:0 auto 0;
        padding-top:60px;
    }
}


@media screen and (max-width:768px){
    #home_mainimg{
        background:url(../../img/main.jpg) no-repeat center center;
        background-size:auto 100%;
        height:inherit;
    }
    #home_mainimg h1{
        padding:2em;
    }
}


@media screen and (max-width:480px){
    #home_mainimg h1{
        padding:2em 0;
    }
}

/*=============================
att_area
=============================*/
#att_area{
    padding-top:3em;
    padding-bottom:3em;
}
#att_area .waku_grey{
    text-align: center;
}
#att_area .waku_grey span{
    display: inline-block;
}
@media screen and (max-width:480px){
#att_area .waku_grey{
    text-align: left;
}
#att_area .waku_grey span{
    display: inline;
}
}


/*=============================
lead_area
=============================*/
#lead_area{
    padding-top:3em;
    padding-bottom:3em;
}
#lead_area p{
    font-family: "Midashi Go MB31",'Noto Sans Japanese';
    font-size:130%;
    text-align:center;
}
#lead_area h2{
    line-height:1.2;
    text-align:center;
    font-size:240%;
}
#lead_area h2 span{
    display:inline-block;
    font-family: "Midashi Go MB31",'Noto Sans Japanese';
}
#lead_area h2 span.marker_yellow{
    font-family: "Midashi Go MB31",'Noto Sans Japanese';
}


@media screen and (max-width:480px){
    #lead_area{
        padding-top:2em;
        padding-bottom:2em;
    }
    #lead_area h2{
        font-size:180%;
        line-height:1.5;
    }
}



/*=============================
about_area
=============================*/
#about_area{
    padding-top:3em;
    padding-bottom:3em;
    background-image: linear-gradient(90deg,#fffef5 40%, #fffbdf 40%, #fffbdf 80%, #fffef5 80%, #fffef5 80%,#fffbdf 80%, #fffbdf);
    background-size: 20px 20px;
    text-align:center;
}

#about_area p span{
    display:inline-block;
}

@media screen and (max-width:480px){
    #about_area{
        padding-top:3em;
        padding-bottom:3em;
        text-align:left;
    }
    #about_area p span{
        display:inline;
    }
    #about_area p br{
        display:none;
    }
}



/*=============================
point_area
=============================*/
#point_area{
    padding-top:3em;
    padding-bottom:3em;
}

#point_box{
    margin-bottom:3em;
}

#point_box .point_block{
    float:left;
    width:calc( ( 100% - 4.5em ) / 3 );
    margin:0 0.74em;
}

#point_box .ico_point{
    width:40%;
    margin:0 auto;
}

#point_box .point_block dt{
    font-size:120%;
    font-weight:bolder;
    text-align:center;
    border-bottom:1px solid #ccc;
    padding:0.75em 0 0.5em;
}
#point_box .point_block dd{
    padding:0.5em 0.5em 0 0.5em;
}


@media screen and (max-width:480px){
    #point_box .point_block{
        float:none;
        width:100%;
        margin:0 0 3em;
    }
    #point_box .ico_point{
        width:20%;
    }
}




/*=============================
teacher_area
=============================*/
#teacher_area{
    background:#fffbde;
    padding-top:3em;
    padding-bottom:3em;
}

#teacher_area .teacher_box{
    margin-bottom:3em;
}

#teacher_area .photo_jyo{
    float:left;
    width:30%;
}

#teacher_area .photo_jyo img{
    border-radius:50%;
}

#teacher_area dl{
    float:right;
    width:63%;
}

#teacher_area dt{
    font-weight:bolder;
    border-bottom:1px solid #444;
    padding-top:0.5em;
    padding-bottom:0.75em;
}
#teacher_area dt .name01{
    font-size:150%;
}
#teacher_area dt span{
    display:inline-block;
}

#teacher_area dd{
    padding-top:1em;
    line-height:2;
}



@media screen and (max-width:480px){
    #teacher_area .photo_jyo{
        float:none;
        width:40%;
        margin:0 auto 1em;
    }
    #teacher_area dl{
        float:none;
        width:100%;
    }
}


/*=============================
info_area
※info.cssで。
=============================*/
#info_area{
    padding-top:3em;
}





/*=============================
links_area
=============================*/
#links_area{
    padding-top:3em;
}

#links_area ul{
    text-align:center;
    margin-bottom:5em;
}
#links_area ul li{
    display:inline-block;
    width:calc( ( 100% - 10em ) / 4 );
    margin:0 1em;
}


@media screen and (max-width:768px){
#links_area ul{
    margin-bottom:4em;
}
#links_area ul li{
    width:calc( ( 100% - 5em ) / 4 );
    margin:0 0.5em;
}
}


@media screen and (max-width:480px){
#links_area{
    padding-bottom:0em;
}
#links_area ul{
    margin-bottom:3em;
}
#links_area ul li{
    float:left;
    width:calc( ( 100% - 2em ) / 2 );
    margin:0 0.5em 1em;
}
}




/*=============================
bnr_area
=============================*/
#bnr_area{
    clear:both;
    /*padding-top:5em;
    padding-bottom:5em;*/
}

#bnr_area ul{
    text-align:center;
    width:70%;
    margin:0 auto;
}
#bnr_area ul li{
    display:inline-block;
    width:calc( ( 100% - 10em ) / 3 );
    margin:0 1em;
}


@media screen and (max-width:768px){
    #bnr_area ul{
        width:80%;
    }
}

@media screen and (max-width:480px){
    #bnr_area{
        /*padding-top:3em;
        padding-bottom:3em;*/
    }
    #bnr_area ul{
        width:100%;
    }
    #bnr_area ul li{
        width:calc( ( 100% - 4em ) / 3 );
        margin:0 0.5em;
    }
}