@charset "utf-8";
/* CSS Document */
@media print, screen and (min-width:768px){
/* index.html */
 .mainvisual{
    position: relative;
    padding-top: 35.56%;
    background: url(../images/top_mainvisual_img.jpg) 0 0 no-repeat;
    background-size: cover;
    background-position: center center;
}
	
#school .mainvisual {
    background: url(../school/images/top_mainvisual_img.jpg) 0 0 no-repeat;
    background-size: cover;
    background-position: center center;
}

.mainvisual p{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 455px;
    height: 310px;
}
.mv_ti {
    width: 100%;
    background: #FFF383;
    text-align: center;
}
#school .mv_ti {	
    background: #FFE1A7;
}
#sec01{
	text-align:center;
}
#school #sec01{
	padding-top: 60px;
}
#sec01 h1{
	margin:25px auto 35px;
}
#sec01 .txt{
    font-size: 20px;
    margin-bottom: 1em;
}	
#school #sec01 .txt{
	text-align: left;
	max-width: 1012px;
	margin: 0 auto;
	padding: 50px 0 0;
}
#school #sec01 .txt + .txt{
	margin-top: 1em;
	padding: 0 0 50px;
}
#sec01 .text{
    font-size: 21px;
  border: 1px solid #ff0000;
  padding: .5em;
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
}	
#sec01 ul{
    margin: 0 100px;
    display: inline-block;
    max-width: 1000px;
}
#school #sec01 ul li{
    float: left;
    width: 44%;
    margin: 0 auto;
    text-align: center;
}
#company #sec01 ul li{
	float: left;
    width: 30.5%;
    margin: 0 auto;
    text-align: center
}
#school #sec01 ul .tie{
    margin: 20% 2% 0;
    width: 7.2%;
}
#company #sec01 ul .tie{
    margin: 12% -1.5% 0;
    width: 7.2%;
}
#sec01 ul li p{
    margin-top: 10px;
    font-size: 21px;
    color: #361800;
    font-weight: 500;
    line-height: 28px;
}
#sec01 h2{
    font-size: 35px;
    margin: 40px 0 60px;
    padding: 0 50px;
    color: #361800;}
#sec01 .solving{
    position: relative;
    padding: 5% 0;
    background: url(../images/top_bg01.jpg) 0 0 no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: 6%;
}
#company #sec01 .resolution li{
    position: relative;
    float: none;
    font-size: 28px;
    font-weight: 600;
    line-height: 55px;
    width: 100%;
    margin: 0 auto 1.5em;
    text-align: left;
    color: #361800;
}
#company #sec01 .resolution li span{
	position: relative;
}
#company #sec01 .resolution li span::before{
    content: '';
    background: url(../images/top_ic02.svg)50% 50% no-repeat;
    width: 63px;
    height: 52px;
    position: absolute;
    left: -70px;
    top: -7px;
    margin: auto;
}

#sec01 .btn{
    position: relative;
    margin: 20px auto 10px;
    border: 1px solid #361800;
    border-radius: 7px;
    font-size: 19px;
    background: #FFF;
    width: 430px;
    height: 70px;
}


#sec01 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 13px;
    height: 24px;
    position: absolute;
    bottom: 0px;
    top: 0;
    margin: auto;
    right: 12.5px;
}
#sec01 .btn a{
    text-decoration: none;
	text-align: center;
    color: #361800;
    display: block;
    line-height: 70px;
    font-weight: 500;
    font-size: 19px;
	box-shadow: 2px 2px 4px #a5a5a5a6;
}
#sec02{
    /*padding: 40px 0;*/
    padding: 140px 0;
}
#sec02 h2{
	text-align: center;
    font-size: 35px;
    margin: 50px 0}
#school #sec02 h2{
    margin: 50px 0 0}
#sec02 .inner{
    max-width: 1012px;
}
#sec02 .guest{
	padding: 3% 0%;
    width: 47%;
	float: left;
}
#sec02 .cast{
	padding: 3% 0%;
    width: 47%;
	float: right;
}
#sec02 .univ{
	padding: 3% 0%;
    width: 47%;
	float: left;
}
#sec02 .junior{
    padding: 3% 0%;
    width: 47%;
	margin: auto;
}
#sec02 .univ h3{
	margin-bottom:14px;
	}
#sec02 .junior h3{
    margin-bottom: 9px;
}
#sec02 .attention{
    font-size: 21px;
    border: 1px solid #ff0000;
    padding: .5em;
	text-align: center;
}

#sec02 .icon{
	text-align: center;
}
	
#sec02 h4{
	text-align: center;
    font-size: 22px;
    font-weight: 500;
    margin: 15px 0;
}
	
#sec02 .guest h4{
	color:#C5941B;
}
	
#sec02 .guest .box{
    background: #E9D4AD;
    background-size: 2%;
}
	
#sec02 .cast h4{
	color:#88B760;
}
#sec02 .cast .box{
    background: #D2E2C4;
    background-size: 2%;
    padding: 4% 6% 3.7%;}
#sec02 .univ h4{
	color: #EA8D30;
}
#sec02 .univ  .box{
    background: #F7D1B2;
    background-size: 2%;
	padding: 4% 6% 1%;
}	
#sec02 .junior h4{
	color: #7C9BEF;
}
#sec02 .junior .box{
    background: #CBDAF8;
    background-size: 2%;
    padding: 3.2% 6% 1%;
}		
#sec02 .box{
    padding: 4% 6% 2%;
	margin-bottom: 20px;
	}
	
#sec02 .box h3{
	text-align: center;
}
	
#sec02 .guest .box h3 img,#sec02 .cast .box h3 img{
	height:30px;
}
#sec02 .univ .box h3 img{
	height:55px;
}
#sec02 .junior .box h3 img{
	height:64px;	
}

#sec02 .job{
	font-size: 15px;
    margin: 12px auto 8px;
    font-weight: 500;
    width: 80%;
}

#sec02 .job li{
    float: left;
    background-color: #ffffff;
	opacity:0.7;
    border-radius: 3px;
    margin: 0 2% 0%;
    width: 46%;
    text-align: center;
    padding: 7px 0;
}

#sec02 .im{
	text-align: center;
}

#sec02 .caption{
    text-align: right;
    font-size: 12px;
    margin: 8px auto;
    width: 350px;
}

#sec02 .txt{
    line-height: 1.7;
    font-size: 17px;
    margin: 15px 0 20px;
    min-height: 112px;
}
	
#school #sec02 .txt{
    min-height: 202px;
}
	
#sec02 .effect{
    font-weight: 500;
    letter-spacing: -1px;
	margin-bottom: 1.5em;
}
#sec02 .effect{
	margin-bottom: 50px;
    padding: 25px 20px;
    min-height: 187px;}
	
#sec02 .guest .effect{
	border: 1px solid #C5941B;			
}
#sec02 .cast .effect{
	border: 1px solid #88B760;			
}
	
#sec02 .effect p{
    text-align: center;
    font-size: 21px;
    margin-bottom: 1em;
	font-weight: 600;
}
#sec02 .guest .effect p{
	color:#C5941B;			
}
	
#sec02 .cast .effect p{
	color:#88B760;			
}
	
#sec02 .effect li{
    font-size: 16px;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.7;
}

#sec02 .btn{
    position: relative;
    margin: 20px auto 10px;
    border: 1px solid #361800;
    border-radius: 7px;
    font-size: 19px;
    background: #FFF;
    width: 85%;
}


#sec02 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 13px;
    height: 24px;
    position: absolute;
    bottom: 0px;
    top: 0;
    margin: auto;
    right: 12.5px;
}
#sec02 .btn a{
	text-decoration: none;
    text-align: center;
    color: #361800;
    display: block;
    line-height: 70px;
    font-weight: 500;
    font-size: 19px;
	box-shadow: 2px 2px 4px #a5a5a5a6;
}
#sec03{
    margin-bottom: 70px;
}

#sec03 .inner{
	max-width:1012px;
}
#sec03 .contents{
    background-color: #bccde1;
	padding: 40px 34px 30px;
}
#sec03 h2{
	text-align: center;
    font-size: 35px;
    margin: 30px 0;
    color: #361800;
}

#sec03 h3{
    text-align: center;
    background-color: #F7EEA1;
    width: 620px;
    margin: 0 auto 30px;
    padding: 15px 0;
}
	
#sec03 .im{
	text-align: center;
}
	
#sec03 .caption{
	text-align: right;
    font-size: 12px;
    margin: 8px auto;
    width: 460px;
}
	
#sec03 .txt{
    width: 568px;
    margin: 15px auto;
    font-size: 17px;
    line-height: 1.8;
}
    
#sec03 .pro_sch{
    text-align: center;
}

#sec03 .btn{
	position: relative;
    margin: 20px auto 10px;
    border: 1px solid #361800;
    border-radius: 7px;
    font-size: 19px;
    background: #FFF;
    width: 430px;
    height: 70px;
}


#sec03 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 13px;
    height: 24px;
    position: absolute;
    bottom: 0px;
    top: 0;
    margin: auto;
    right: 12.5px;
}
#sec03 .btn a{
	text-decoration: none;
    text-align: center;
    color: #361800;
    display: block;
    line-height: 70px;
    font-weight: 500;
    font-size: 19px;
}

#sec04{
    padding: 5px 0 90px;
}

#sec04 h2{
  	text-align: center;
    font-size: 35px;
    margin: 30px 0;
    color: #361800;
}

#sec04 .inner{
	max-width:1078px;
}
#sec04 ul {
    margin: 0 7%;
}
#sec04 ul li {
    float: left;
    width: 33.3%;
    margin: 0 0%;
    text-align: center;
}
#sec04 .btn{
	position: relative;
    /*margin: 50px auto 70px;*/
    margin: 50px auto 0;
    border: 1px solid #361800;
    border-radius: 7px;
    font-size: 19px;
    background: #FFF;
    width: 430px;
    height: 70px;
}


#sec04 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 13px;
    height: 24px;
    position: absolute;
    bottom: 0px;
    top: 0;
    margin: auto;
    right: 12.5px;
}
#sec04 .btn a{
	text-decoration: none;
    text-align: center;
    color: #361800;
    display: block;
    line-height: 70px;
    font-weight: 500;
    font-size: 19px;
}
	
#sec04 p {
    text-align: center;
    margin-top: 70px;
	font-size: 19px;
}


}
@media screen and  (max-width: 767px) {
	
.main{
    padding-top: 36vmin;
}
	
.mainvisual{
    position: relative;
    padding-top: 93%;
    background: url(../images/top_mainvisual_img_sp.jpg) 0 0 no-repeat;
    background-size: cover;
}
#school .mainvisual{
    position: relative;
    padding-top: 93%;
    background: url(../school/images/top_mainvisual_img_sp.jpg) 0 0 no-repeat;
    background-size: cover;
}
.mainvisual p{
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    margin: 0 22%;
}
.mv_ti{
		background: #FFF383;
}
#school .mv_ti{
		background: #FFE1A7;
}
#sec01{
    text-align: center;
    margin-bottom: 8%;
}
#school #sec01{
	padding-top: 10%;
}
#sec01 h1{
	margin: 4% 7%;
}
#sec01 .txt{
    font-size: 110%;
    margin-bottom: 8%;
}
#school #sec01 .txt{
	text-align: left;
	margin: 10% 5% 0;
}
#school #sec01 .txt + .txt{
	margin: 1em 5% 10%;
}
#sec01 .text{
  border: 1px solid #ff0000;
  padding: .5em;
  margin: 0 4%;
}
#sec01 ul{
    margin: 0 2%;
}
	
#sec01 ul li{
    float: left;
    width: 32%;
}
#school #sec01 ul li {
    float: left;
    width: 42%;
}
#sec01 ul .tie{
    margin: 12% -3% 0;
    width: 7%;
    position: relative;
}
#school #sec01 ul .tie {
    margin: 17% 2% 0;
    width: 11%;
    position: relative;
}
#sec01 ul li p{
    margin-top: 5%;
    font-size: 106%;
    color: #361800;
    font-weight: 500;
    line-height: 20px;
}
#sec01 .solving {
position: relative;
    padding: 6% 0;
    background: url(../images/top_bg01_sp.jpg) 0 0 no-repeat;
    background-size: cover;
    background-position: center center;
    margin-top: 11%;
}

#sec01 h2{
    font-size: 170%;
    line-height: 35px;
    margin: 6% 0 4%;
    color: #361800;
    }

#sec01 .resolution{
    margin: 0 5%;
}

#sec01 .resolution li{
    position: relative;
    float: none;
    font-weight: 600;
    line-height: 25px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    color: #361800;
    font-size: 16.56px;
}
#sec01 .resolution li + li{
	margin-top: 10px;
}
#sec01 .resolution li span{
	position: relative;
	padding: 0 0 0 40px;
	display: inline-block;
}
#sec01 .resolution li span::before{
    content: '';
    background: url(../images/top_ic02.svg)50% 50% no-repeat;
    width: 40px;
    height: 32px;
    position: absolute;
    background-size: 75%;
    left: 0%;
    top: -5px;
    margin: auto;
}

#sec01 .resolution li:nth-child(2) span::before,#sec01 .resolution li:nth-child(3) span::before{
    /* left: -14%; */
}


#sec01 .btn::after{
	content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 12px;
    height: 14px;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    right: 3%;
    background-size: 70%;
}
#sec01 .btn{
	position: relative;
	margin: 5% 8%;
	}
	
#sec01 .btn a{
    color: #361800;
    display: block;
    line-height: 4;
    border: 1px solid #361800;
    border-radius: 7px;
    background: #FFF;
    font-weight: 500;
    box-shadow: 2px 2px 4px #a5a5a5a6;
}
#sec02{
    padding: 10% 0 0;
}
#sec02 h2{
    font-size: 135%;
    line-height: 30px;
    margin: 4% 0;
    text-align: center;
    color: #361800;}
#sec02 .icon{
	margin: 0 38% 4%;
}
#sec02 .guest{
	margin-bottom: 10%
}
#sec02 .guest .box {
    background: #E9D4AD;
    background-size: 2%;
    padding: 5% 3% 1%;
}
#sec02 h3{
	margin: 0 15%;
}
#sec02 .cast{
	margin-bottom: 15%
}
#sec02 .cast .box {
    background: #D2E2C4;
    background-size: 2%;
    padding: 5% 3% 3%;
}	
#sec02 .univ{
	margin-bottom: 10%
}
#sec02 .univ .box {
    background: #F7D1B2;
    background-size: 2%;
    padding: 5% 3% 1%;
}
	
#sec02 .junior{
	margin-bottom: 10%
}
#sec02 .junior .box {
    background: #CBDAF8;
    background-size: 2%;
    padding: 5% 3% 1%;
}
#sec02 .attention{
  border: 1px solid #ff0000;
  padding: .5em;
  margin: 0 4% 5%;
}
#school #sec02 h3{
	margin-bottom:5%;
}
	
#sec02 h4{
    margin-bottom: 2%;
    font-size: 135%;
    line-height: 30px;
    margin: 4% 0;
    text-align: center;
    font-weight: 600;
}    

#sec02 .guest h4{
	color: #C5941B;}
	
#sec02 .cast h4{
	color: #88B760;}
	
#sec02 .univ h4{
	color: #EA8D30;}
	
#sec02 .junior h4{
	color: #7C9BEF;}

#sec02 .job{
	font-size: 114%;
    margin: 4% auto;
    font-weight: 500;
}

#sec02 .job li{
	font-size: 76%;
    float: left;
    background-color: #ffffff;
	opacity: 0.7;
    border-radius: 3px;
    margin: 0 2% 0%;
    width: 46%;
    text-align: center;
    padding: 2% 0;
}

#sec02 .im{
    text-align: center;
    margin: 5% 5% 0;
}

#sec02 .caption{
text-align: right;
    font-size: 12px;
    margin: 3% 4% 3%;
    letter-spacing: -1px;
}

#sec02 .txt{
    line-height: 1.5;
    margin: 2% 5%;
    font-weight: 500;
}

#sec02 .effect{
	font-weight: 500;
    margin: 5%;
    padding: 3% 4%;
}
#sec02 .guest .effect {
    border: 1px solid #C5941B;
}
	
#sec02 .guest .effect p{
    color: #C5941B;
    text-align: center;
    font-size: 120%;
    margin: 1% 0 4%;
	font-weight: 600;
}
	
#sec02 .cast .effect {
    border: 1px solid #88B760;
}
	
#sec02 .cast .effect p{
    color: #88B760;
    text-align: center;
    font-size: 120%;
    margin: 1% 0 4%;
	font-weight: 600;
}

#sec02 .effect li{
    padding-left: 1em;
	text-indent: -1em;
}

#sec02 .btn{
    position: relative;
    margin: 5% 8%;
}

#sec02 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 12px;
    height: 14px;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    right: 3%;
    background-size: 70%;
}
#sec02 .btn a{
	color: #361800;
    display: block;
    line-height: 4;
    border: 1px solid #361800;
    border-radius: 7px;
    background: #FFF;
    font-weight: 500;
    text-align: center;
	box-shadow: 2px 2px 4px #a5a5a5a6;
}
#sec03{
	margin-bottom:12%;
}



#sec03 h2{
    font-size: 5vmin;
    line-height: 30px;
    margin: 4% 0;
    text-align: center;
    color: #361800;
}
	
#sec03 h3{
	text-align: center;
    background-color: #F7EEA1;
    padding: 5% 27%;
}
#sec03 .im{
    text-align: center;
    margin: 5% 5% 0;
}

#sec03 .caption{
text-align: right;
    font-size: 12px;
    margin: 3% 4% 3%;
    letter-spacing: -1px;
}

#sec03 .txt{
    line-height: 1.5;
    margin: 2% 5%;
    font-weight: 500;
}
    
#sec03 .pro_sch{
    text-align: center;
}

#sec03 .btn{
    position: relative;
    margin: 5% 8%;
}

#sec03 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 12px;
    height: 14px;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    right: 3%;
    background-size: 70%;
}
#sec03 .btn a{
	color: #361800;
    display: block;
    line-height: 4;
    border: 1px solid #361800;
    border-radius: 7px;
    background: #FFF;
    font-weight: 500;
    text-align: center;
	box-shadow: 2px 2px 4px #a5a5a5a6;
}


#sec04{
	margin-bottom:20%;
}

#sec04 h2{
	font-size: 135%;
    line-height: 30px;
    margin: 4% 0;
    text-align: center;
    color: #361800;
}

#sec04 .inner{
    margin: 0 2%;
}
	
#sec04 p{
    font-size: 3.5vmin;
    text-align: center;
    margin-top: 6%;	}

#sec04 ul li{
    float: left;
    width: 32.3%;
    margin: 0 0.5%;
}
/*#sec04 .btn{
    position: relative;
    margin: 5% 8%;
}

#sec04 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 12px;
    height: 14px;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    right: 3%;
    background-size: 70%;
}
#sec04 .btn a{
	color: #361800;
    display: block;
    line-height: 4;
    border: 1px solid #361800;
    border-radius: 7px;
    background: #FFF;
    font-weight: 500;
    text-align: center;
}*/
#sec04 .btn{
    position: relative;
    margin: 5% 8%;
    font-size: 100%;
}
#sec04 .btn::after{
    content: '';
    background: url(../common/images/btn_ic02.svg)50% 50% no-repeat;
    width: 12px;
    height: 14px;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    right: 3%;
    background-size: 70%;
}
#sec04 .btn a{
	color: #361800;
    display: block;
    line-height: 4;
    border: 1px solid #361800;
    border-radius: 7px;
    background: #FFF;
    font-weight: 500;
    text-align: center;
	box-shadow: 2px 2px 4px #a5a5a5a6;
}

}

#top-voice{
    background: #F5F4EA;
    padding: 130px 0;
}
#top-voice h2{
    text-align: center;
    font-size: 35px;
    margin-bottom: 1em;
	color: #361800;
}
#top-voice .voice-list{
    max-width: 1012px;
    margin: 0 auto;
    padding-top: 37.5px;
}
#top-voice .voice-list ul{
    display: flex;
    justify-content: space-between;
}
#top-voice .voice-list ul li{
    width: 30%;
    padding: 75px 2.5%;
    border: #FFE1A7 2px solid;
    background: #fff;
    box-sizing: border-box;
    position: relative;
}
#top-voice .voice-list ul li .ico{
    display: block;
    width: 100px;
    margin: 0 auto;
    transform: translateY(-50%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#top-voice .voice-list ul li .ico img{
    width: 100%;
}
#top-voice .voice-list ul li p{
    font-size: 24px;
}
@media screen and (max-width: 767px) {
    #top-voice{
        padding: 10% 0;
    }
    #top-voice h2{
        font-size: 170%;
    }
    #top-voice .voice-list ul{
        display: block;
        padding: 0 5%;
    }
    #top-voice .voice-list ul li{
        width: 100%;
        padding: 50px 5% 25px;
    }
    #top-voice .voice-list ul li + li{
        margin-top: 75px;
    }
    #top-voice .voice-list ul li .ico{
        width: 75px;
        transform: translateY(-60%);
    }
    #top-voice .voice-list ul li p{
        font-size: 110%;
    }
}

#container .top-bnr-area{
    text-align: center;
    /*margin-bottom: 60px;*/
}
#container .top-bnr-area .bnr a{
    display: block;
}
#container .top-btn-area{
    display: flex;
    justify-content: space-between;
    margin-bottom: 85px;
}
#container .top-btn-area .btn{
    width: 45%;
    margin: 0;
    border: none;
    box-shadow: 2px 2px 4px #a5a5a5a6;
}
#container .top-btn-area .btn.btn-junior{
    background: #F9DDC0;
}
#container .top-btn-area .btn.btn-high{
    background: #CFDBF5;
}
#container .top-btn-area .btn a{
    box-shadow: none;
    position: relative;
    display: block;
}
#container .top-btn-area .btn .ic-new{
    display: block;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 25px;
    background: #C52C2D;
    color: #ffffff;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 767px) {
    #container .top-bnr-area{
        margin-bottom: 7.5%;
        padding: 0 5%;
    }
    #container .top-btn-area{
        display: block;
        padding: 0 5%;
        margin-bottom: 7.5%;
    }
    #container .top-btn-area .btn{
        width: 95%;
        margin: 0 auto;
        border-radius: 7px;
    }
    #container .top-btn-area .btn + .btn{
        margin-top: 5%;
    }
    #container .top-btn-area .btn.btn-junior{
        background: #F9DDC0;
    }
    #container .top-btn-area .btn.btn-high{
        background: #CFDBF5;
    }
    #container .top-btn-area .btn a{
        background: none;
        border: none;
    }
    #container .top-btn-area .btn .ic-new{
        left: 20px;
        border-radius: 25px;
        width: 45px;
        height: 45px;
        font-size: 12px;
    }
}