@charset "utf-8";
/*=====================================================================================*/
@media screen and (max-width:1500px) {    }
@media screen and (max-width:1300px) {    }
@media screen and (max-width:1200px) {    }
@media screen and (max-width:1024px) {    }
@media screen and (max-width:960px) {    }
@media screen and (max-width:768px) {    }
@media screen and (max-width:550px) {    }
@media screen and (max-width:400px) {    }
@media screen and (max-width:350px) {    }

/*=inner ================================================================================*/
@media screen and (max-width:1400px) {
.inner {max-width:100%; margin: 0 auto; padding: 0 5% 18px;}
.inner:after{content: ""; display: block; clear: both}
}
@media screen and (max-width:1024px) {
.inner {max-width:100%; margin: 0 auto 0; padding: 0 2% 18px;}
.inner:after{content: ""; display: block; clear: both}
}
@media screen and (max-width:768px) {
.inner {width: 100%; margin: 0 auto; padding: 0 18px 18px;}
.inner:after{content: ""; display: block; clear: both}
}

/*= Style_design css ===================================================================*/
@media screen and (max-width:1300px) {
    #g-nav ul{display: block; padding: 0;}
    #g-nav ul li a{padding:6px 15px; color: #ffffff;}
}

@media screen and (max-width:1024px) {
    .eria-cl{text-align:left;}
}

@media screen and (max-width:960px) {
    .heading{font-size:3rem;}
    /* listimg --------------------------------------------*/
    .listimg li:nth-child(2n+1) {float: none; margin:0 auto 2%; padding:0%; width: 95%; border: solid 0.5px #cccccc;}
    .listimg li:nth-child(2n) {float: none; margin:0 auto 2%; padding:0%; width: 95%; border: solid 0.5px #cccccc;}
}

@media screen and (min-width:961px) {/* 961px以上 */}
@media screen and (min-width:769px) {/* 769px以上 */
    .tb_mo-none{display: none; padding:0; margin:0;}
}

@media screen and (max-width:768px) {/* 768px以下 */ /* g-nav 連動 */
    #splash-logo {font-size: 1.5rem;}
    .pc_tbios-none{display: none; padding:0; margin:0;}
    /* img-left-shadow --------------------------------------------*/
    .img-left-shadow img{float: left; margin: 0 22px 0 0; vertical-align: top;/* border-radius:4px;*/}
    .img-left-shadow h4 {font-size: 1.2em; font-weight:normal;}
    .img-left-shadow h5 {font-size: 1.3em; font-weight:normal; line-height:1.5;}
    .img-left-shadow h5 span{font-size: 0.8em; margin:4px; color:#555555;}
}

@media screen and (max-width:550px) {
    #splash-logo {font-size: 1.3rem;}
    /* img-left-shadow --------------------------------------------*/
    .img-left-shadow{width: 88%}
    .img-left-shadow{padding:8px; margin:22px auto; text-align: center;/*border:solid 1px #cccccc;*/}
    .img-left-shadow img{float: none; margin: 0 auto 18px; vertical-align: top;/* border-radius:4px;*/}
    .img-left-shadow h5 span{display: block;}
    .img-left-shadow p{text-align: left;}
}

@media screen and (max-width:400px) {
    .btn-black.bgcenterx{margin:18px auto; padding: 8px 30px; }
}

/*=====================================================================================*/
@media screen and (max-width:768px) {
    #header h1{top:9px; transform: translateX(-70%);}
    #header ul#utility-navi li span{display:none;}
    #header ul#utility-navi li a{width: 70px; height: 70px; padding: 0;}
    #header ul#utility-navi li img {width: 45%; margin: 17px 0 0 0px;}
}

@media screen and (max-width:530px) {
    #header h1{font-size: 1.3rem; top:14px; transform: translateX(-50%);}
    #g-nav ul li:last-child{display: block;}
    #header ul#utility-navi li:first-child{display: none;}
    #header ul#utility-navi li:last-child a{background:#275955;}
    #header ul#utility-navi li:last-child a:hover{background:#aaaaaa;}
}

/*=====================================================================================*/
@media screen and (max-width:1300px) {
    #news{padding: 20px;}
}

@media screen and (max-width:1200px) {
    #lead .lead{font-size:1.8rem; right: 2.5%;}
    #news{width:60%;}
}
@media screen and (max-width:880px) {
/* new */
#news h2{font-size:1.1rem; margin: 0 0 15px 0;}
#news li{font-size:0.88rem; margin:0 0 5px 0;}
#news li time{display: block; font-size:0.8rem;}
}

@media screen and (max-width:768px) {
#lead{padding: 50px 0 0 0; height:110vh;}
    #lead .lead{font-size:1.6rem; right: 3%;}
    #lead h2.heading{top: 160px;}
    #lead h2.heading img {max-width: 88%; height: auto;}
    #lead p.leadup{top:130px; font-size: 1em;
    text-align: center;
    bottom:  0;                 /* 下からの位置指定 */
    left:  0;                   /* 左からの位置指定 */
    right:  0;                  /* 右からの位置指定 */
    margin:  auto;              /* 位置調整と組み合わせて上下中央に */
    }
    #lead p.lead{left:1%; font-size: 1.1em;}
    #slider-area {width: 100%;/*74%;*/    height: 90vh; left: 0;}
    #slider-area #slider{height: 90vh;}
/* new */
#news{width:100%; bottom:0; padding: 10px 20px;}
#news h2{font-size:1.1rem; margin: 0 0 15px 0;}
#news li{font-size:0.88rem; margin:0 0 5px 0;}
}

/*=history-news====================================================================================*/
@media screen and (max-width:1024px) {
    #history-news{position: relative; padding:80px 30px; margin: 100px auto;}
    .history-news-img{width:50%; padding: 0 0.25%;}
    .history-news-content{width:50%; padding: 0 0.25%;}
    .history-news-content .course-list menu{width:48%;}
}

@media screen and (max-width:960px) {
    #history-news{padding:30px 30px; margin: 0 auto;}
    #history-news h2 {position: relative; right: inherit; top: 0; font-size:1.3em; margin: 33px auto 8px;}
    #history-news .history-news-btn{margin: 20px auto 50px;}
    .history-news-img,
    .history-news-content{width:100%;}
    .history-news-content .course-list menu{width:48%;}
    .history-news-img{/*height:40vh;*/}
    .history-news-content{padding:20px 0 0 0;}
    .history-news-content h3{margin: 0 0 18px 0;}
}

@media screen and (max-width:768px) {
    #history-news{padding:30px 10px; margin: 0 auto;}
}
@media screen and (max-width:400px) {
    .history-news-content .course-list menu{width:48%;}
}

/*=====================================================================================*/
@media screen and (max-width:1200px) {
    #service .service-area ul li span.text{font-size: 0.8em;}
}

@media screen and (max-width:1024px) {
    #service{padding: 80px 0 0 0;}
    #service header{padding: 50px 20px 100px;}
    #service header p br{display:block;}
    #service .service-area{padding: 30px; width:83%;}
}

@media screen and (max-width:960px) {
    #service header{width:100%;}
    #service .service-area{width:85%; left:0%; padding: 30px 20px 30px 20px;}
    #service .service-area ul li{width:45%;}
    #service .service-area ul li span.text{font-size: 1em;}
    #service header p br{display:block;}
}

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

@media screen and (max-width:550px) {
    #service .service-area{width:95%; top:-20px; left: 2.5%; padding: 35px 10px; }
    #service .service-area ul li span.text{font-size: 0.8em;}
}

@media screen and (max-width:480px) {
    #service{padding: 80px 0 0 0;}
    #service header{padding: 50px 20px 100px;}
    #service header p br{display:block;}
}

@media screen and (max-width:400px) {
    #service .service-area{width:100%; top:-30px; left:0;font-size: 0.9rem;    }
    #service .service-area ul li span.text{display: none; }
}

/*=catholic-menu ====================================================================================*/
@media screen and (max-width:1024px) {
    #catholic-menu{padding:80px 30px; margin: 0 auto;}
    .catholic-menu-img{width:50%; padding: 0 0.5%;}
    .catholic-menu-content{width:50%; padding: 0 0.5%;}
    .catholic-menu-content .course-list menu{width:100%;}
}

@media screen and (max-width:768px) {
    #catholic-menu{padding:30px 30px; margin: 0 auto;}
    #catholic-menu h2 {position: relative; right: inherit; top: 0; font-size:1.3em; margin: 33px auto 8px;}
    .catholic-menu-img,
    .catholic-menu-content{width:100%;}
    .catholic-menu-img{width:100%; height:40vh;}
    .catholic-menu-content{padding:20px 0 0 0;}
    .catholic-menu-content h3{margin: 0 0 18px 0;}
    .catholic-menu-content p,
    .catholic-menu-content .history-btn{margin: 0 0 50px 0;}
}

@media screen and (max-width:550px) {
    .catholic-menu-img{width:100%; height:20vh;}
}

/*=====================================================================================*/
@media screen and (max-width:1024px) {
    #footer .footer-r,
    #footer .footer-l{width:100%;}
    #footer .footer-l .footer-contact,
    #footer #copyright{height: inherit; padding: 40px 0;}
    #footer .footer-link{text-align: center;}
}

@media screen and (max-width:768px) {
    #footer .footer-r{padding:50px 30px;}
    #footer .footer-r_con{padding: 30px 18px 70px;}
    #footer .footer-link{display: none;}
    #footer .footer-r .companyprofile{display: flex; justify-content: center;}
    #footer #page-top{width:60px; height: 60px;}
}