@charset "UTF-8";

#content {padding: 110px 0 0;}

.contents_title {width: 100%; margin: 0 0 80px;padding: 0;position: relative;}
.contents_title img {width: 100%;height: auto;}
.contents_title_text {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}

.contents_title h1 {
width: 100%;
font-size: 4vh;
line-height: 1.4;
font-weight: 700;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
z-index: 9;}
.school {width: 960px; margin: 0 auto 40px;text-align: left;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}


.area {width: 960px;margin: 0 auto 100px;}
.area p {font-size: 18px;line-height: 1.6;margin: 0 0 50px;}
.area ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.area ul li {width: 30%;margin: 0 5% 5% 0;}
.area ul li:nth-child(3n) {margin: 0 0 5%;}


.link_btn {
text-align: center;
color: #ffffff;
font-size: 16px;
line-height:60px;font-weight: 700;
height: 60px;
background:#eb6f28;
padding:0 20px 0 0;
text-decoration: none;display:block;vertical-align: bottom;border: none;
cursor: pointer;
cursor: hand;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius: 100vh;
transition:0.3s;
position: relative;
}
.link_btn:hover {background:#f9aa25;text-decoration: none;}
.link_btn:before {
content: '';
width: 8px;
height: 8px;
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
position: absolute;
top: 50%;
right: 20px;
margin-top: -4px;
transform: rotate(45deg);
}



@media screen and (max-width: 1060px) {
#content {padding: 90px 0 0;}
}
@media screen and (max-width: 767px) {
#content {padding: 110px 0 0;}

.contents_title {width: 100%; margin: 0 0 10%;padding: 0;position: relative;}
.contents_title img {width: 100%;height: auto;}
.contents_title_text {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}

.contents_title h1 {
font-size: 2vh;
line-height: 1.4;
font-weight: 700;
width: 100%;
color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
z-index: 9;}


.area {width: 90%;margin: 0 auto 10%;}
.area p {font-size: 3vw;line-height: 1.6;margin: 0 0 5%;}
.area ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.area ul li {width: 100%;margin: 0 0 4%;}
.area ul li:nth-child(3n) {margin: 0 0 4%;}



.link_btn {
text-align: center;
color: #ffffff;
font-size: 4vw;
line-height:40px;font-weight: 700;
height: 40px;
background:#eb6f28;
padding:0;
text-decoration: none;display:block;vertical-align: bottom;border: none;
cursor: pointer;
cursor: hand;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius: 100vh;
transition:0.3s;
position: relative;
}
.link_btn:hover {background:#f9aa25;text-decoration: none;}
.link_btn:before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
position: absolute;
top: 50%;
right: 30px;
margin-top: -3px;
transform: rotate(45deg);
}


}