/* CSS Document */

/*==================================================

top-contents
=================================================*/

.main-image {
	width: 100%;
	position: relative;
	line-height: 0;
	z-index: 1!important;
	margin: 70px auto 0;
}
.main-image img{
	width: 100%;
	height: auto;
	
}
.main-image .title {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: url("../img/common/title_back.png") left bottom no-repeat;
	padding: 15px 50px 5px 70px;
}
.main-image .title h2{
	color: #097cac;
	font-size: 2.0rem;
}
.main-image h2 .en{
	    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,sans-serif;
	font-style: italic;
	margin-right: 10px;
	font-size:5.0rem;
}

.fCol_red{
	color: #ff6228;
	font-weight: bold;
}


@media only screen and (min-width:1px) and (max-width: 960px) {
	

.main-image .en{
	font-size: 4.0rem;
}
	
}

@media only screen and (min-width:1px) and (max-width: 768px) {

.main-image .title h2{
		font-size: 1.6rem;
	}
.main-image .title h2 .en{
	font-size: 6.0vw;
	z-index: 2;
}
	
.main-image .title {
	position: relative;
	left: inherit;
	top: inherit;
	-webkit-transform: translate(0, 0); /* Safari用 */
	transform: translate(0, 0);
	z-index: 1;
	text-align: center;
	padding: 20px 20px 0;
	font-size: 2.0rem;
}
.pc-imgl{
	display: none;
}
.tb-img{
	display: block;
}
	
}
@media only screen and (min-width:1px) and (max-width: 480px) {


.main-image .title h2 .en{
	font-size: 7.0vw;
	z-index: 2;
}
	
	
.pc-img{
	display: none;
}
.sp-img{
	display: block;
}
	
}


#contents section{
	margin: 5% auto 0;
}
.catch{
	font-size: 2.8rem;
	letter-spacing: 0.05em;
	line-height: 1.8em;
	color:  #097cac;
	text-align: center;
	font-weight: 500;
}

#contents section .tC{
	text-align: center;
}
#contents section .tC h3{
	position: relative;
	text-align: center;
	display: inline-block;
	margin: 3% auto;
	padding: 5px 50px;
	letter-spacing: 0.05em;
	color: #fff;
}


#contents section .tC h3::before {
  content: '';/*ボックス作成*/
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
	border-left: none;
  z-index: -1;
	width: 100%;
	height: 100%;
  transform: skew(-45deg);
	background: rgb(34,86,164);
background: linear-gradient(0, rgba(34,86,164,1) 0%, rgba(34,86,164,1) 20%, rgba(10,153,199,1) 100%);
}

div.boshunasi{
	text-align: center;
	margin: 10% auto 5%;
	background: #f3f3f3;
	border:2px solid #F62024;
	padding: 15px 10px;
	font-size: 130%;
	font-weight: bold;
	color:#F62024;
}
@media only screen and (min-width:1px) and (max-width: 768px) {
.catch{
	font-size: 2.0rem;
}
}
@media only screen and (min-width:1px) and (max-width: 480px) {
.catch{
	font-size: 1.6rem;
	margin: 20px auto;
}
}

@media only screen and (min-width:1px) and (max-width: 480px) {


#contents section{
	margin: 2% auto 0;
}
	
	
}



.page-entry{
	background: url("../img/common/back.png") right top no-repeat;
	background-size: 100% auto;
}


.about{
	background: url("../img/common/message_back.svg") right top no-repeat;
	background-size: cover;
	padding-bottom: 3%;
}

.merit{
	background: url("../img/common/merit_back.svg") right top no-repeat;
	background-size: cover;
	padding-bottom: 3%;
}
.education{
	background: #e9f5f9;
	padding: 3% 0;
}

.merit .photo,
.requirements .photo,
.education .photo{
	margin: 5% auto 3%;
	text-align: center;
}
.merit .txt,
.requirements .txt{
	width: 96%;
	margin: auto;
	margin: 5% auto 3%;
}
.education .txt{
	width: 96%;
	margin: auto;
	margin: 5% auto 0;
}
.merit .txt h4,
.requirements .txt h4,
.education .txt h4{
	text-align: center;
	margin-bottom: 3%;
}
.merit .txt ul li{
	list-style:disc;
	margin-left: 20px;
}

.requirements .txt ul{
	margin-left: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 3% auto 8%;
}

.requirements .txt ul li{
	width: 50%;
	list-style:disc;
	padding-right: 20px;
}
.education .txt ul li{
	list-style:disc;
	margin-bottom: 5px;
	margin-left: 20px;
}


@media only screen and (min-width:1px) and (max-width: 480px) {


.requirements .txt ul li{
	width: 90%;
	list-style:disc;
	padding:0;
	margin-left: 5%;
}	
	
}


.about-left{
	background: url("../img/common/about_right.svg") right bottom no-repeat;
	padding: 10px 0 30px;
	margin: 2% auto 5%;
	position: relative;
	background-size: 90% auto;
}
.about-left .num{
	position: absolute;
	left: 0;
	top: 10px;
	font-size: 8rem;
	color: #1f4e91;
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,sans-serif;
	font-style: italic;
	font-weight: bold;
}

.about-left .photo{
	width: 60%;
	padding: 20px 20px 20px 0;
}
.about-left .txt{
	width: 40%;
	padding: 20px 0 20px 10px;
}
.about-left .txt h4{
	color: #fff;
	margin-bottom: 5%;
}
.about-left .txt p{
	color: #fff;
}



.about-right{
	background: url("../img/common/about_left.svg") left bottom no-repeat;
	padding: 20px 0 30px;
	margin: 2% auto 5%;
	position: relative;
	background-size: 90% auto;
}
.about-right .num{
	position: absolute;
	left: 0;
	top: 10px;
	font-size: 8rem;
	color: #ffffff;
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,sans-serif;
	font-style: italic;
	font-weight: bold;
}

.about-right .photo{
	width: 60%;
	padding: 20px 0 20px 10px;
	order: 2;
}
.about-right .txt{
	width: 40%;
	padding:80px 20px 20px 0;
	order: 1;
}
.about-right .txt h4{
	color: #fff;
	margin-bottom: 5%;
}
.about-right .txt p{
	color: #fff;
}


.facilitie{
	background: #fff;
	padding: 3% 0;
}
.facilitie.backb{
	background: #e9f5f9;
	padding: 3% 0;
}

.facilitie .photo{
	width: 40%;
	text-align: center;
	padding:20px 20px 20px 0;
}
.facilitie .txt{
	width: 60%;
	padding:20px 0 20px 20px;
}

.vision .photo{
	margin: 3% auto;
	text-align: center;
}
.vision .txt{
	width: 96%;
	margin: 3% auto;
	text-align: center;
}




@media only screen and (min-width:1px) and (max-width: 1280px) {
.about-left{
	background: url("../img/common/about_right.svg") left bottom no-repeat;
	padding: 10px 0 30px;
	margin: 2% auto 5%;
	position: relative;
	background-size: auto;
}
.about-right{
	background: url("../img/common/about_left.svg") right bottom no-repeat;
	padding: 20px 0 30px;
	margin: 2% auto 5%;
	position: relative;
	background-size: auto;
}
}

@media only screen and (min-width:1px) and (max-width: 876px) {
	
	

.about-left{
	background: url("../img/common/about_right.svg") right bottom no-repeat;
	padding: 10px 0 30px;
	margin: 50px auto 5%;
	position: relative;
	background-size: cover;
}
.about-left .num{
	position: absolute;
	left: inherit;
	right: 0;
	top: 20px;
	font-size: 8rem;
	color: #ffffff;
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,sans-serif;
	font-style: italic;
	font-weight: bold;
}

.about-left .photo{
	width: 80%;
	margin: -50px auto 0 0;
	padding: 20px 20px 20px 0;
}
.about-left .txt{
	width: 100%;
	padding: 0px 20px 20px 10%;
}



.about-right{
	background: url("../img/common/about_left.svg") left bottom no-repeat;
	padding: 20px 0 30px;
	margin: 2% auto 5%;
	position: relative;
	background-size: cover;
}
.about-right .num{
	position: absolute;
	left: 0;
	top: 20px;
	font-size: 8rem;
	color: #ffffff;
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,sans-serif;
	font-style: italic;
	font-weight: bold;
}

.about-right .photo{
	width: 80%;
	margin: -50px 0 0 auto;
	padding: 20px 0 20px 20px;
	order: 1;
}
.about-right .txt{
	width: 100%;
	padding: 0px 10% 20px 20px;
	order: 2;
}

.facilitie{
	background: #fff;
	padding: 3% 0;
}
.facilitie.backb{
	background: #e9f5f9;
	padding: 3% 0;
}

.facilitie .photo{
	width: 60%;
	text-align: center;
	padding:20px;
}
.facilitie .txt{
	width: 100%;
	padding:10px;
}

.vision .photo{
	margin: 3% auto;
	text-align: center;
}
.vision .txt{
	width: 96%;
	margin: 3% auto;
	text-align: center;
}
	
}


@media only screen and (min-width:1px) and (max-width: 480px) {
.facilitie .photo{
	width: 80%;
	text-align: center;
	padding:20px;
}
}


.message,
.message_main{
	position: relative;
}
#messageb,
#messagec{
	padding-top: 100px;
	margin-top: -100px;
}

.message.grd{
	padding-top: 50px;
}
.message.grd::before{
	content: "";
	height: 5px;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background: rgb(34,86,164);
background: linear-gradient(45deg, rgba(34,86,164,1) 0%, rgba(34,86,164,1) 20%, rgba(10,153,199,1) 100%);
}
.message_main{
	max-width: 1800px;
	margin: auto;
	position: relative;
}
.message .message_catch{
	font-size: 2.8rem;
	letter-spacing: 0.05em;
	line-height: 1.8em;
	font-weight: 500;
	color: #004b9b;
	margin: 30px 5%;
}

.message .message_profile{
	background: rgb(34,86,164);
background: linear-gradient(45deg, rgba(10,153,199,1) 0%,  rgba(34,86,164,1) 100%);
	color: #fff;
	padding: 80px 5%;
}

.message .message_profile .name{
	font-size: 2.5rem;
	font-weight: 500;
	display: inline-block;
	margin-bottom: 20px;
	letter-spacing: 0.1em;
}
.message .message_profile .year{
	font-size: 1.8rem;
	font-weight: 500;
	display: inline-block;
}


.message_main .photo{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 65%;
}

.message .message_txt{
	width: 96%;
	margin: 5% auto;
}
.message .photol{
	margin: 3% auto 10%;
}

@media only screen and (min-width:1px) and (max-width:1200px) {

.message .message_profile{
	background: rgb(34,86,164);
background: linear-gradient(45deg, rgba(10,153,199,1) 0%,  rgba(34,86,164,1) 100%);
	color: #fff;
	padding: 50px 3%;
}
}
@media only screen and (min-width:1px) and (max-width: 960px) {

.message .message_profile{
	background: rgb(34,86,164);
background: linear-gradient(45deg, rgba(10,153,199,1) 0%,  rgba(34,86,164,1) 100%);
	color: #fff;
	padding: 60px 3%;
}
.message_main .photo{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 70%;
}
}

@media only screen and (min-width:1px) and (max-width: 768px) {
.message .message_catch{
	font-size: 2.0rem;
}
	
.message_main .photo{
	position: relative;
	right: inherit;
	bottom: inherit;
	width: 90%;
	margin: -20px 0 0 auto;
	z-index: -1;
}
.message .message_profile{
	background: rgb(34,86,164);
background: linear-gradient(45deg, rgba(10,153,199,1) 0%,  rgba(34,86,164,1) 100%);
	color: #fff;
	padding: 50px 3% 30px;
	width: 80%;
	margin: -30px 0 0 0;
	z-index: -2;
	position: relative;
}

.message .message_profile .name{
	font-size: 2.2rem;
	margin-bottom: 10px;
}
.message .message_profile .year{
	font-size: 1.6rem;
}

}
@media only screen and (min-width:1px) and (max-width: 480px) {
.message .message_catch{
	font-size: 1.8rem;
	margin: 20px auto 30px;
	text-align: center;
}
.message .message_profile .name{
	font-size: 1.8rem;
	margin-bottom: 10px;
}
.message .message_profile .year{
	font-size: 1.5rem;
}
}