@charset "UTF-8";

/*-------------------------
__style（扉ページ）
-------------------------*/

.demo{
    width: 980px;
    margin: 0 auto;}

/*-------------------------
__style（エリア詳細ページ・共通）
-------------------------*/

#contents img{vertical-align:top;}

#contents .area_main{margin:0 0 30px;}
#contents .area_main .area_inner{display:table;}
#contents .area_main .area_img{display:table-cell;width:50%;vertical-align:top;}
#contents .area_main .area_img img{width:100%;height:auto;}
#contents .area_main .area_text{display:table-cell;width:50%;vertical-align:top;padding:0 0 0 30px;box-sizing:border-box;position:relative;}
#contents .area_main .area_text .map{width:150px;height:150px;text-align:center;vertical-align:middle;position:absolute;right:0;bottom:0;z-index:-1;}
#contents .area_main .area_text .map img{width:auto;max-width:100%;height:auto;max-height:100%;}
#contents .area_main .area_title{letter-spacing:0.1em;margin:0 0 20px;}
#contents .area_main .area_title img{width:auto;height:2.5em;vertical-align:middle;margin:0 10px 0 0;padding:0 0 10px;}
#contents .area_main .area_title span{display:inline-block;font-weight:700;vertical-align:middle;}
#contents .area_main .area_title span:nth-child(2){font-size:2em;color:#3194ec;}
#contents .area_main .area_title span:nth-child(3){font-size:1.5em;margin:0 0 0 10px;}
@media screen and (max-width: 767px) {
#contents .area_main{margin:0 0 15px;}
#contents .area_main .area_img{display:block;width:100%;}
#contents .area_main .area_text{display:block;width:100%;padding:0;}
#contents .area_main .area_title{margin:15px 0 5px;padding:0 0 5px;border-bottom:1px dotted #00349f;}
#contents .area_main .area_title img{height:1.5em;margin:0 5px 0 0;padding:0 0 3px;}
#contents .area_main .area_title span{vertical-align:bottom;}
#contents .area_main .area_title span:nth-child(2){font-size:1.6em;}
#contents .area_main .area_title span:nth-child(3){font-size:1.2em;margin:0 0 0 5px;}
}

#contents .box01{margin:0 0 20px;}
#contents .box01 ul{margin:20px 0 0;padding:20px 20px 10px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;background-color:#e6ebf6;}
#contents .box01 ul li{width:24%;float:left;margin:0 1.33% 10px 0;}
#contents .box01 ul li:nth-child(4n){margin:0 0 10px;}
#contents .box01 ul li a{display:block;text-align:left;text-decoration:none;padding:15px;box-sizing:border-box;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border:1px solid #CCC;background-color:#FFF;}
#contents .box01 ul li a .osusume_photo{position: relative; display:block;width:100%;height:170px; overflow: hidden; background-color: #eee; margin-bottom: 10px;}
#contents .box01 ul li a .osusume_photo img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;}
#contents .box01 ul li a span{ font-size:1.4em;line-height:1.4em;font-weight:700;margin:10px 0 0;box-sizing:border-box;color:#000;}
#contents .box01 .box01_inner{margin:20px 0 0;padding:20px;box-sizing:border-box;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;background-color:#e6ebf6;}
#contents .box01 dl{width:32%;float:left;margin:0 2% 0 0;}
#contents .box01 dl:nth-child(3n){margin:0;}
#contents .box01 dl dt{font-size:2em;font-weight:700;color:#00349f;}
#contents .box01 dl dd{font-size:1.4em;line-height:1.8em;margin:10px 0 0;}
#contents .box01 dl dd a{display:block;text-decoration:none;padding:5px 0;box-sizing:border-box;position:relative;color:#000;border-bottom:1px dotted #CCC;}
#contents .box01 dl dd a::before{display:inline-block;content:"▶";width:1em;height:1em;margin:0 10px 0 0;color:#ff952e;}
#contents .box01 dl dd a::after{content:"";display:block;width:0;height:1px;position:absolute;right:0;bottom:-1px;left:0;background-color:#00349f;}
@media screen and (min-width:1025px) {
#contents .box01 ul li a{transition:all 0.3s;}
#contents .box01 ul li a:hover{border:1px solid #00349f;}
#contents .box01 ul li a img{transition:all 0.3s;}
#contents .box01 ul li a:hover img{filter:brightness(1.1);-webkit-filter:brightness(1.1);-moz-filter:brightness(1.1);-o-filter:brightness(1.1);-ms-filter:brightness(1.1);}
#contents .box01 dl dd a::before{transition:all 0.3s;}
#contents .box01 dl dd a:hover::before{transform: translateX(3px);}
#contents .box01 dl dd a::after{transition:all 0.3s;}
#contents .box01 dl dd a:hover::after{width:100%;}
}
@media screen and (max-width: 767px) {
#contents .box01{margin:0 0 10px;}
#contents .box01 ul{margin:10px 0 0;padding:10px 10px 0;}
#contents .box01 ul li{width:49%;margin:0 2% 10px 0;}
#contents .box01 ul li:nth-child(2n){margin:0 0 10px;}
#contents .box01 ul li a .osusume_photo{height:100px;}
#contents .box01 ul li a{ padding: 5px; text-decoration: none;}
#contents .box01 ul li a span{height:auto;font-size:1.3em;}
#contents .box01 .box01_inner{margin:10px 0 0;}
#contents .box01 dl{width:100%;float:none;margin:0;}
#contents .box01 dl:nth-child(3n){margin:20px 0 0;}
#contents .box01 dl + dl{margin:20px 0 0;}
#contents .box01 dl dt{font-size:1.8em;}
#contents .box01 dl dd{font-size:1.3em;margin:5px 0 0;}
}


#contents .box02{margin:0 0 30px;overflow:hidden;background-color:#eaf1f9;}
#contents .box02 .basic_p{font-size:1.6em;font-weight:700;text-align:center;padding:15px 20px 10px;}
#contents .box02 ul{max-width:700px;letter-spacing:-1em;text-align:center;margin:10px auto 30px;padding:30px 20px;box-sizing:border-box;position:relative;background-color:#FFF;}
#contents .box02 ul::before,
#contents .box02 ul::after{content:"";display:block;width:80px;height:130px;position:absolute;}
#contents .box02 ul::before{bottom:0;left:30px;background:url(images/school_illust01.png)bottom center no-repeat;background-size:80px auto;}
#contents .box02 ul::after{right:30px;bottom:0;background:url(images/school_illust02.png)bottom center no-repeat;background-size:80px auto;}
#contents .box02 ul li{display:inline-block;letter-spacing:normal;}
#contents .box02 ul li + li{margin: 0 0 0 20px;}
#contents .box02 ul li a{display:block;width:8em;font-size:1.9em;line-height:1.8em;font-weight:700;text-decoration:none;padding:5px 10px;box-sizing:border-box;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;color:#FFF;}
#contents .box02 ul li .e{background-color:#ff952e;}
#contents .box02 ul li .j{background-color:#1d64d2;}
@media screen and (min-width:1025px) {
#contents .box02 ul li a{transition:all 0.3s;}
#contents .box02 ul li a:hover{transform: translateY(1px);opacity:0.7;}
}
@media screen and (max-width: 767px) {
#contents .box02{margin:0 0 15px;}
#contents .box02 .basic_p{font-size:1.5em;line-height:1.5em;padding:0 10px;}
#contents .box02 ul{max-width:auto;margin:10px 10px 15px;padding:15px 10px;}
#contents .box02 ul::before,
#contents .box02 ul::after{width:60px;height:110px;}
#contents .box02 ul::before{left:10px;background-size:60px auto;}
#contents .box02 ul::after{right:10px;background-size:60px auto;}
#contents .box02 ul li{display:block;width:100%;}
#contents .box02 ul li + li{margin:10px 0 0;}
#contents .box02 ul li a{font-size:1.6em;margin:0 auto;}
}

#contents .box03{margin:0 0 30px;}
#contents .box03 .route{margin:20px 0 0;padding:20px;box-sizing:border-box;border:1px solid #CCC;}
#contents .box03 .route img{width:100%;height:auto;}
#contents .box03 .box03_inner{letter-spacing:-1em;}
#contents .box03 dl{display:inline-block;width:49%;font-size:1.4em;line-height:1.8em;letter-spacing:0.1em;vertical-align:top;margin:20px 2% 0 0;}
#contents .box03 dl:nth-child(2n){margin:20px 0 0;}
#contents .box03 dl dt{margin:0 0 15px;padding:5px 10px;color:#FFF;background-color:#3194ec;}
#contents .box03 dl dd{}
#contents .box03 dl dd + dd{margin:15px 0 0;}
#contents .box03 dl dd em{font-size:1.4em;font-weight:700;}
#contents .box03 dl dd strong{font-size:1.4em;font-weight:700;margin:0 5px;color:#f00a0a;}
#contents .box03 dl dd span{display:block;padding:0 0 0 2em;position:relative;}
#contents .box03 dl dd span::before{content:"";display:block;width:1em;height:2px;margin:10px auto auto 0;position:absolute;top:0;right:0;bottom:0;left:10px;background-color:#CCC;}
@media screen and (min-width:1025px) {
}
@media screen and (max-width: 767px) {
#contents .box03{margin:0 0 15px;}
#contents .box03 .route{margin:10px 0 0;}
#contents .box03 dl{display:block;width:100%;line-height:1.4em;margin:15px 0 0;}
#contents .box03 dl:nth-child(2n){margin:15px 0 0;}
#contents .box03 dl dd em{font-size:1.3em;}
#contents .box03 dl dd strong{font-size:1.3em;}
#contents .box03 dl dd span{margin:5px 0 0;}
#contents .box03 dl dd span::before{margin:7px auto auto 0;}
}

#contents .box04{margin:0 0 30px;}
#contents .box04 a{display:block;font-size:1.8em;line-height:1.8em;font-weight:700;text-align:center;text-decoration:none;margin:20px 0 0;padding:10px;box-sizing:border-box;color:#3194ec;border:3px solid #3194ec;}
#contents .box04 a img{display:inline-block;width:auto;height:1em;vertical-align:middle;padding:0 10px 2px 0;}
@media screen and (min-width:1025px) {
#contents .box04 a{transition:all 0.3s;}
#contents .box04 a:hover{background-color:#D7E1EF;}
}
@media screen and (max-width: 767px) {
#contents .box04{margin:0 0 15px;}
#contents .box04 a{margin:10px 0 0;padding:5px;}
}

#contents .box05{margin:0 0 30px;}
#contents .box05 ul{margin:30px 0 0;padding:20px;box-sizing:border-box;overflow:hidden;background-color:#EEE;}
#contents .box05 ul li{width:19%;float:left;}
#contents .box05 ul li + li{margin:0 0 0 1.25%;}
#contents .box05 ul li a{display:block;font-size:1.5em;line-height:1.3em;font-weight:700;text-align:center;text-decoration:none;padding:20px;box-sizing:border-box;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border:1px solid #CCC;color:#00349f;background-color:#FFF;}
#contents .box05 ul li a img{width:auto;max-width:80px;height:auto;max-height:80px;}
#contents .box05 ul li a span{display:block;height:2.5em;text-align:center;margin:10px 0 0;}
@media screen and (min-width:1025px) {
#contents .box05 ul li a{transition:all 0.3s;}
#contents .box05 ul li a:hover{border:1px solid #00349f;background-color:#D7E1EF;}
}
@media screen and (max-width: 767px) {
#contents .box05{margin:0 0 15px;}
#contents .box05 ul{margin:15px 0 0;padding:10px;}
#contents .box05 ul li{width:100%;float:none;}
#contents .box05 ul li + li{margin:5px 0 0;}
#contents .box05 ul li a{text-align:left;padding:10px;}
#contents .box05 ul li a img{max-width:40px;max-height:40px;vertical-align:middle;}
#contents .box05 ul li a span{display:inline-block;height:auto;vertical-align:middle;margin:0 0 0 10px;}
}

#contents .banner{margin:0 0 30px;}
#contents .banner a{display:block;box-sizing:border-box;border:1px solid #CCC;}
#contents .banner a img{width:100%;height:auto;}
@media screen and (min-width:1025px) {
#contents .banner a img{transition:all 0.3s;}
#contents .banner a:hover img{opacity:0.7;}
}
@media screen and (max-width: 767px) {
#contents .banner{margin:0 0 15px;}
}