@charset "UTF-8";

.remodal {
  position: relative;
  padding: 25px;
}
.remodal .set {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: left;
	
	-webkit-flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.remodal ul {
	margin-bottom: 60px;
}
.remodal li {
	background: #f0f3f4;
	width: 33.33333%;
	font-size: 1.2rem;
}
.remodal li a {
	display: block;
	padding: 15px;
}
.remodal li a:hover {
	opacity: 0.5;
}
.remodal li:nth-of-type(odd) {
	background: #fff;
}
.remodal img {
	display: block;
	margin: 0 auto;
  width: 80%;
  height: auto;
  vertical-align: top;
}
.remodal-cancel {
  color: #fff;
  background: #1f2774 !important;
  width: 100%;
  margin-top: 25px;
}
.remodal-cancel:hover {
  background: #333;
}


/* mainimage
--------------------- */
#mainimage{
	position: relative;
}
	#mainimage img {
		width: 100%;
		height: auto;
	}
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	min-height: 900px;
}
#mainimage .read {
	position: absolute;
	top: 200px;
	right: 100px;
	font-family: "Noto Serif JP";
	z-index: 100;
	font-size: 2.4rem;
	line-height: 2.4;
	font-weight: 400;
	color: #1f2774;

	
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}


#mainimage .indent {
	display: block;
	margin-right:30px !important;
}
#mainimage .name {
	font-size: 1.6rem;
}










/* News
--------------------- */
#News {
	position: absolute;
	top: 80vh;
	left: 0;
	background: #FFF;
	background-size: cover;
	margin-bottom: 300px;
	width: calc(100vw - ((100vw - 70%) / 2));
	border-radius: 0 10px 10px 0;
	z-index: 1000;
}
	#News .inner {
		padding: 100px 60px 100px 0;
		position: relative;
	}
	#News .indexTitle {
		text-align: left;
		float: left;
		width: 15%;
	}
	#News .newsArea {
		float: right;
		width: 75%;
	}




#News dl {
	border-bottom: solid 1px #45799c;
	padding-bottom: 25px;
	margin-bottom: 25px;
}
#News dl:nth-child(3n) {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
	* html #News dl {
		zoom: 100%;
	}
	*:first-child+html #News dl {
		display: inline-block;
	}
	#News dl:after {
		content: "."; 
		clear: both; 
		height: 0; 
		display: block; 
		visibility: hidden;
	}


	#News dl dt {
		float: left;
		width: 10em;
	}
	#News dl dd {
		float: left;
	}
		#News dl dd a {
			color: #FFF;
			text-decoration: underline;
		}
		#News dl dd span {
			background: #ff5800;
			border-radius: 3px;
			font-size: 1.4rem;
			font-weight: 700;
			line-height: 1;
			padding: 5px 10px;
			
			margin-right: 10px;
		}


#News .btn {
	position: absolute;
	bottom: 100px;
	left: 0;
}





#Applicants {
	padding-top: 300px;
	padding-bottom: 50px;
	background: #f2f5f6;
}
#Applicants .left {
	float: left;
	width: 45%;
}
#Applicants .indexTitle {
	text-align: left;
}
#Applicants .box {
	border: solid 3px #FFF;
	padding: 15px;
	margin-top: 20px;
	font-size: 12px;
}
#Applicants dl {
	position: relative;
	width: 32%;
	margin-right: 2%;
	background: #FFF;
	text-align: center;
	color: #1f2774;
	border-radius: 10px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
	padding: 20px 20px 90px 20px;
}
#Applicants dl:last-child {
	margin-right: 0%;
}
#Applicants dl dd {
	width: 80%;
	position: absolute;
	bottom: 20px;
	left: 10%;
}
#Applicants dl dd a {
	display: block;
	background: #1f2774;
	border-radius: 6px;
	padding: 10px;
	color: #FFF;
}
#Applicants dl dd a:hover {
	background: #f2f5f6;
	color: #1f2774;
}
#Applicants .right {
	float: right;
	width: 50%;
}
#Applicants .right img {
	border-radius: 10px;
}





#mainMenu {
	border-top: solid 1px #1f2774;
	border-bottom: solid 1px #1f2774;
}
#mainMenu a {
	width: 33.33333%;
	text-align: center;
	padding: 40px 0 80px 0;
	position: relative;
	
	border-right: solid 1px #1f2774;
}
#mainMenu a:hover {
	opacity: 0.5;
}
#mainMenu a:last-child {
	border-right: none;
}
#mainMenu dl {
}
#mainMenu dl dt {
	width: 227px;
	margin: 0 auto;
}
#mainMenu dl dd {
	font-size: 2rem;
	color: #1f2774;
}
#mainMenu dl dd .icon {
	position: absolute;
	bottom: -24px;
	left: 50%;
	margin-left: -24px;
	width: 48px;
}








/* FEATURE
--------------------- */
#FEATURE {
	margin-top: 150px;
	padding: 100px 0;
	background: #f2f5f6;
}
#FEATURE .indexTitle {
	text-align: left;
}


#FEATURE .right {
	float: right;
	width: 30%;
}
#FEATURE .left {
	float: left;
	width: 65%;
	margin-top: -130px;
}


#FEATURE .btn {
	margin-bottom: 20px;
}
#FEATURE .btn .cap {
	text-align: center;
	display: block;
	margin-top: 10px;
	font-size: 1.2rem;
}
#FEATURE .btn a {
	display: block;
	background: #FFF;
	text-align: center;
	color: #1f2774;
	border-radius: 10px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
	padding: 40px 20px;
}
#FEATURE .btn a:hover {
	background: #1f2774;
	color: #fff;
}
#FEATURE .pht {
	margin-bottom: 30px;
}


	#FEATURE .pht img {
		border-radius: 10px;
	}


#FEATURE .name {
	margin-top: 10px;
	text-align: right;
}

#FEATURE .name span {
	display: block;
	font-size: 1.2rem;
}







/* 1200px */
@media screen and (max-width: 1200px) {



}





/* max 1023px */
@media screen and (max-width: 1023px) {


.remodal {
  padding: 15px !important;
}
.remodal ul {
	margin-bottom: 30px;
}




/* mainimage
--------------------- */
#mainimage{
	position: relative;
}
	#mainimage img {
		width: 100%;
		height: auto;
	}
#slider {
    width: 100%;
	height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
	height: calc(var(--vh, 1vh) * 100) !important;
	

	min-height: auto;
}
#mainimage .read {
	position: absolute;
	top: 10%;
	right: auto;
	left: 5%;
	font-family: "Noto Serif JP";
	z-index: 100;
	font-size: 1.8rem;
	font-weight: 400;
	color: #1f2774;
	line-height: 2;
	

	
	-ms-writing-mode: tb-rl;
	writing-mode: horizontal-tb;
}

#mainimage .indent {
	display: block;
	margin-right:0;
	margin-top:20px !important;
}
#mainimage .name {
	font-size: 1.4rem;
}




/* btnArea
--------------------- */
#btnArea {
	text-align: center;
	border-bottom: none;
	margin-bottom: 10%;
}
	#btnArea .inner {
		position: relative;
		top: -100px;
	}
	#btnArea a {
		position: relative;
		width: 100%;
		border-right: none;
		border-bottom: solid 1px #8f93b9;
		
	}
		#btnArea a:last-child {
			border-right: none;
		}
	#btnArea a:hover dt {
		transform: translate(0px,-10px);
	}
		#btnArea a:last-child {
			margin-right: 0%;
		}

		#btnArea a img {
			width: 100%;
			height: auto;
		}
	#btnArea a dl {
		position: relative;
		color: #1f2774;
		padding-bottom: 50px;
		background: url("../common/img/arrow.svg") no-repeat center 90%;
		background-size: 41px;
	}
		#btnArea a dl dt {
			transition: all .3s;
			padding: 5% 35% 0px 35%;
		}
		#btnArea a dl dd {
			font-size: 2.0rem;
			margin-bottom: 10px;
		}
		#btnArea a dl dd span {
			display: block;
			font-size: 1.2rem;
		}







/* News
--------------------- */
#News {
	position: relative;
	top: 0;
	left: 0;
	background: #FFF;
	background-size: cover;
	margin-bottom: 0;
	width: 100%;
	border-radius: 0;
	z-index: 1000;
	padding: 10% 0;
}
	#News .inner {
		padding: 0;
		position: relative;
	}
	#News .indexTitle {
		text-align: left;
		float: none;
		width: 100%;
	}
	#News .newsArea {
		float: none;
		width: 100%;
	}




#News dl {
	border-bottom: solid 1px #45799c;
	padding-bottom: 25px;
	margin-bottom: 25px;
}
#News dl:nth-child(3n) {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
	* html #News dl {
		zoom: 100%;
	}
	*:first-child+html #News dl {
		display: inline-block;
	}
	#News dl:after {
		content: "."; 
		clear: both; 
		height: 0; 
		display: block; 
		visibility: hidden;
	}


	#News dl dt {
		float: left;
		width: 10em;
	}
	#News dl dd {
		float: left;
	}
		#News dl dd a {
			color: #FFF;
			text-decoration: underline;
		}
		#News dl dd span {
			background: #ff5800;
			border-radius: 3px;
			font-size: 1.4rem;
			font-weight: 700;
			line-height: 1;
			padding: 5px 10px;
			
			margin-right: 10px;
		}


#News .btn {
	position: absolute;
	bottom: 100px;
	left: 0;
}



#Applicants {
	padding-top: 10%;
	padding-bottom: 10%;
	background: #f2f5f6;
}
#Applicants .left {
	float: none;
	width: 100%;
}
#Applicants .indexTitle {
	text-align: left;
}
#Applicants .box {
	border: solid 3px #FFF;
	padding: 15px;
	margin-top: 20px;
	font-size: 12px;
}
#Applicants dl {
	position: relative;
	width: 100%;
	margin-right: 0%;
	margin-bottom: 2%;
	background: #FFF;
	text-align: center;
	color: #1f2774;
	border-radius: 10px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
	padding: 5%;
}
#Applicants dl:last-child {
	margin-right: 0%;
}
#Applicants dl dd {
	width: 100%;
	position: relative;
	bottom: 0;
	left: 0;
	margin-top: 5%;
}
#Applicants dl dd a {
	display: block;
	background: #1f2774;
	border-radius: 6px;
	padding: 10px;
	color: #FFF;
}
#Applicants dl dd a:hover {
	background: #f2f5f6;
	color: #1f2774;
}
#Applicants .right {
	float: none;
	width: 100%;
	margin-bottom: 5%;
}
#Applicants .right img {
	border-radius: 10px;
}
	
	
	
	
	
	
#mainMenu {
	border-top: solid 1px #1f2774;
	border-bottom: none;
}
#mainMenu a {
	width: 50%;
	text-align: center;
	padding: 40px 0 80px 0;
	position: relative;
	
	border-right: solid 1px #1f2774;
	border-bottom: solid 1px #1f2774;
}
#mainMenu a:last-child {
	width: 100%;
	text-align: center;
	padding: 40px 0 80px 0;
	position: relative;
	
	border-right: solid 1px #1f2774;
	border-bottom: solid 1px #1f2774;
}
#mainMenu a:nth-child(2n) {
	border-right: none;
}
#mainMenu a:last-child {
	border-right: none;
}
#mainMenu dl {
}
#mainMenu dl dt {
	width: 120px;
	margin: 0 auto;
}
#mainMenu dl dd {
	font-size: 1.6rem;
	color: #1f2774;
}
#mainMenu dl dd .icon {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -15px;
	width: 30px;
}
	
	
	

/* FEATURE
--------------------- */
#FEATURE {
	margin-top: 100px;
	padding: 10% 0;
	background: #f2f5f6;
}
#FEATURE .indexTitle {
	text-align: left;
}


#FEATURE .right {
	float: none;
	width: 100%;
}
#FEATURE .left {
	float: none;
	width: 100%;
	margin-top: 0;
}


#FEATURE .btn {
	margin-bottom: 10px;
}
#FEATURE .btn .cap {
	text-align: left;
	display: block;
	margin-top: 10px;
	font-size: 1.2rem;
}
#FEATURE .btn a {
	display: block;
	background: #FFF;
	text-align: center;
	color: #1f2774;
	border-radius: 10px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
	padding: 20px;
}
#FEATURE .btn a:hover {
	background: #1f2774;
	color: #fff;
}
#FEATURE .pht {
	margin-top: 5%;
	margin-bottom: 5%;
}


	#FEATURE .pht img {
		border-radius: 10px;
	}

	
	
	
	
}