@charset "utf-8";

.inner{ display: block;}

h3{
	position: relative;
	padding: 30px 0 0 0;
	font-size: 28px;
	font-size: 2.8rem;
	text-align: center;
}

/**************************************************
 mainVisual
**************************************************/
#mainVisual{
	width: 100%;
	height: 35vw;
	margin: 0;
}

#mainVisual ul li{
	position: absolute;
	width: 100%;
	height: 35vw;
	text-align: center;
	background: url(../img/top/visual_bg.jpg) no-repeat center center;
	background-size: cover;
	overflow: hidden;
	display: block;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

#mainVisual ul li img{width: 100%;}

.main_txt{font-size: 1.6rem;width: 80%;margin: 30px auto;text-align: center;}
.main_txt_midashi{font-size: 2.4rem;font-weight: bold;color: #339082;margin-bottom: 20px;}
.main_kaisetsu {text-align: left;display: inline-block;font-size: 1.8rem;font-weight: bold;margin-top: 20px;color: #339082;}
.main_kaisetsu li{margin-left: 7em;text-indent: -7em;}
@media screen and (max-width: 640px) {
	.main_txt{width: 90%;}
	.main_txt_midashi {font-size: 1.8rem;}
	.main_txt_left{text-align: justify;}
	.main_none{display:none;}
	.main_kaisetsu{font-size: 1.6rem;}
}



/**************************************************
 topMenu
**************************************************/
#topMenu{
	width: 100%;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-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;
	-webkit-box-pack: justify;/*--- Android---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between; /* Safari */
	justify-content:         space-between;
}

.hiroba,
.kouen,
.about,
.vicTop{
	position: relative;
	display: block;
	width: 50%;
	min-height: 240px;
	padding: 20px;
	font-size: 16px;
	font-size: 1.6rem;
	list-style: 1.2;
}
.hiroba p strong,
.kouen p strong{
	font-size: 18px;
	font-size: 1.8rem;
}

.hiroba p a,
.kouen p a,
.message p a,
.about p a,
.vicTop p a{
	width: 100%;
	display: block;
	margin: 0;
	padding: 10px 10px;
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
}
.hiroba p:first-child::after,
.kouen p:first-child::after,
.message p:first-child::after,
.about p:first-child::after,
.vicTop p:first-child::after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	_zoom: 1;
}
.hiroba p:last-child,
.kouen p:last-child,
.about p:last-child,
.vicTop p:last-child{
	position: absolute;
	width: calc( 100% - 290px ) ;
	bottom: 20px;
	right:20px;
}
.hiroba p img,
.kouen p img,
.message p img,
.about p img,
.vicTop p img{
	float: left;
	padding: 0 10px 0 0;
	margin: 0;
}
.hiroba{ border: 20px solid #D1E3EF;}
.hiroba p a{
	border: 4px solid #91B7E6;
	color: #91B7E6;
}
.hiroba p a:hover{	background-color: #EBF3F8;}

.kouen{	border: 20px solid #E0D9BF;}
.kouen p a{
	border: 4px solid #C0BDA4;
	color: #C0BDA4;
}
.kouen p a:hover{	background-color: #F3F0E5;}

.message{	border: 20px solid #F8C7CF;}
.message p a{
	border: 4px solid #EE869A;
	color: #EE869A;
}
.message p a:hover{	background-color: #FDECEF;}

.about{	border: 20px solid #EDEDBC;}
.about p a{
	border: 4px solid #CCA509;
	color: #CCA509;
}
.about p a:hover{	background-color: #FEFAEB;}

.vicTop{	border: 20px solid #A0D8DE;}
.vicTop p a{
	border: 4px solid #59BBC6;
	color: #59BBC6;
}
.vicTop p a:hover{	background-color: #EFF9FA;}
@media screen and (max-width: 1280px) {
.hiroba p:last-child,
.kouen p:last-child,
.about p:last-child,
.vicTop p:last-child{
	position: absolute;
	width: calc( 100% - 240px ) ;
	bottom: 20px;
	right:20px;
}
.hiroba p img,
.kouen p img,
.about p img,
.vicTop p img
{width:200px;height:auto;}

.hiroba,
.kouen,
.message,
.about,
.vicTop{padding: 20px 20px 78px 20px;}

.hiroba p,
.kouen p,
.message p,
.about p,
.vicTop p{
	font-size: 16px;
	font-size: 1.6rem;
}
.hiroba p a,
.kouen p a,
.message p a,
.about p a,
.vicTop p a{
	font-size: 16px;
	font-size: 1.6rem;
}
}
/**************************************************
 pickup
**************************************************/
#pickup .inner {
	margin: auto;
	padding: 0px 0 50px
		;
}

/**************************************************
 newsHanger
**************************************************/
.newsInner {
	overflow: hidden;
	width: 100%;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-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;
	-webkit-box-pack: justify;/*--- AndroidA￡A’a?“A￡A’AcA￡a??A|A￡a??A¶A§a??A¨ ---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between; /* Safari */
	justify-content:         space-between;	
}

.topNews{
	width: 65%;
	padding: 0 50px 40px 50px;
	background-color: #F0F0E1;
}

#newsHanger h3{
	padding: 20px 0 10px 0;
	font-family: "新ゴ M",sans-serif;
}

#newsHanger ul{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	letter-spacing: -.40em;
}
#newsHanger ul li{
	display: inline-block;
	width: 24%;
	margin: 0 0.5%;
	padding: 10px 0;
	background-color: #FFFFFF;
	border-radius: 1em;
	cursor: pointer;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1;
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
	letter-spacing: normal;
}
#newsHanger ul li:hover,
#newsHanger ul li.cur{
	position: relative;
	color: #FFFFFF;
	background-color: #F47660;
}
#newsHanger ul li.cur:nth-child(1),#newsHanger ul li:nth-child(1):hover{ background-color: #339082;}
#newsHanger ul li.cur:nth-child(2),#newsHanger ul li:nth-child(2):hover{ background-color: #59BBC6;}
#newsHanger ul li.cur:nth-child(3),#newsHanger ul li:nth-child(3):hover{ background-color: #6697C8;}
#newsHanger ul li.cur:nth-child(4),#newsHanger ul li:nth-child(4):hover{ background-color: #EE869A;}

#newsHanger ul li.cur::after{
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	right: 0;
	width: 20px;
	height: 5px;
	margin: auto;
	border-radius: 1em;
	background-color: #F47660;
}
#newsHanger ul li.cur:nth-child(1)::after{ background-color: #339082;}
#newsHanger ul li.cur:nth-child(2)::after{ background-color: #59BBC6;}
#newsHanger ul li.cur:nth-child(3)::after{ background-color: #6697C8;}
#newsHanger ul li.cur:nth-child(4)::after{ background-color: #EE869A;}

.newsCont{
	margin: 15px 0 0 0;
	display: none;
}

.newsCont dl{
	padding: 15px 0 15px 0;
	border-bottom: 1px dotted #333333;
}

.newsCont dl dt{
	font-size: 12px;
	font-size: 1.2rem;
}

.newsCont dl dt span{
	width: 100px;
	display: inline-block;
	margin: 0 0 0 10px;
	padding: 2px 0;
	color: #FFFFFF;
	text-align: center;
}

.newsCont dl dt span.news_topics{background-color: #00A3D9;}
.newsCont dl dt span.news_exam{background-color: #C30C25;}
.newsCont dl dt span.news_event{background-color: #008C69;}

.newsCont dl dd{
	font-size: 13px;
	font-size: 1.3rem;
	margin: -20px 0 0 200px;
}
#newsHanger .newsCont dl dd.topdd{margin: -20px 0 0 100px;}
.newsCont dl dd a{color: #333333;}
.newsCont dl dd a:hover{color: #C30C25;}

/**************************************************
 fbHanger
**************************************************/
#fbHanger{
	width: 35%;
	height: 100%;
	background-color: #448EBB;
}
#fbHanger .fb-page{
	margin: auto;
	width: 100%;
	max-width: 100%;
	max-height: 500px;
}

/**************************************************
 reHanger
**************************************************/
#reHanger{background: rgba(51,144,130,0.70);}

#reHanger h3{
	padding: 20px 0;
	color: #FFFFFF;
	background-color: rgba(51,144,130,0.70);
	font-family: "新ゴ M",sans-serif;
}

#scrollWrapper{
	position: relative;
	width: calc(100% - 40px);
	padding: 20px 0;
	margin: 0 auto;
	overflow: hidden;
}

.scrollInner{
	width: calc(240px * 11);
	position: relative;
	left: calc((100vw - (240px * 11)) / 2 - 10px);
}

.scrollInner dl{
	width: 200px;
	margin: 0;
	padding: 0;
	position: absolute;
	color: #FFFFFF;
}

.scrollInner dl a{ color: #FFFFFF;}

.scrollInner dl dt{
	padding: 10px;
	background-color: #FFFFFF;
}

.scrollInner dl dt img{
	width: 180px;
	height: 120px;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

.scrollInner dl dd{
	font-size: 13px;
	font-size: 1.3rem;
}

.moreBtn{
	padding: 20px 0;
	text-align: center;
}

.moreBtn a{
	display: inline-block;
	padding: 10px 40px;
	background-color: #FFFFFF;
	color: #339082;
	font-size: 15px;
	font-size: 1.5rem;
}

.moreBtn a:hover{
	background-color: #339082;
	color: #ffffff;
}


/**************************************************
 drHanger
**************************************************/
#drHanger{
	background: url(../img/top/bg_dr.jpg) no-repeat 0 0;
	background-size: cover;
}

#drHanger .inner{
	width: 80%;
	margin: auto;
	padding: 10px 0 50px;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-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;
	-webkit-box-pack: justify;/*--- AndroidA￡A’a?“A￡A’AcA￡a??A|A￡a??A¶A§a??A¨ ---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between; /* Safari */
	justify-content:         space-between;
}

#drHanger dl{
	width: 32%;
	margin: 0;
	padding: 40px;
	color: #FFFFFF;
}
#drHanger dl:nth-child(1){ background-color: rgba(238,188,38,0.90);}
#drHanger dl:nth-child(2){ background-color: rgba(236,149,120,0.90);}
#drHanger dl:nth-child(3){ background-color: rgba(255,147,162,0.90);}

#drHanger dl dt{
	text-align: center;	
}

#drHanger dl dd span{
	display: block;
	margin: 0 0 20px 0;
	padding: 20px 0;
	font-size: 26px;
	font-size: 2.6rem;
	border-bottom:  1px solid #FFFFFF;
	text-align: center;	
}

#drHanger dl dd{
	font-size: 16px;
	font-size: 1.6rem;
}

#drHanger dl dd a{
	display: block;
	margin: 30px 0 0 0;
	padding: 10px;
	background-color: #FFFFFF;
	text-align: center;
	color: #000000;
}
#drHanger dl dd a:hover{
	background-color: #339082;
	color: #FFFFFF;
}


/**************************************************
 Responsive
**************************************************/
@media screen and (max-width: 640px){
	
	/***** h3 ********************/
	#pickup h3,
	#newsHanger h3,
	#reHanger h3,
	#drHanger h3{
		padding: 10px 0;
		font-size: 20px;
		font-size: 2.0rem;
	}
	
	/***** mainVisual ********************/
	#mainVisual{
		min-width: 100%;
		margin: 0 auto;
	}

	/***** about ********************/
	#topMenu{ padding: 0;}

	.hiroba,
	.kouen,
	.message,
	.about,
	.vicTop{
		position: inherit;
		width: 100%;
		min-height: inherit;
		padding: 10px;
	}

	.hiroba p:last-child, .kouen p:last-child, .message p:last-child, .about p:last-child, .vicTop p:last-child{
		position: inherit;
		width: 100%;
		margin: 20px 0 0 0;
	}
	
	.message p br{ display: none;}

	.hiroba p img,
	.kouen p img,
	.message p img,
	.about p img,
	.vicTop p img{
		width: 100%;
		height: 120px;
		object-fit: cover;
		font-family: 'object-fit: cover;';
		float: none;
		padding: 0 0 10px 0;
		margin: 0 auto;
	}


	/***** news ********************/
	.topNews{
		width: 100%;
		margin: 0;
		padding: 20px;
	}
	
	#newsHanger ul li{
		width: 49%;
		margin: 0.5%;
	}

	#newsHanger ul li.cur::after{ display: none;}
	
	#newsHanger dl dd{ margin: 0;}
	
	/***** fbHanger ********************/
	#fbHanger{width: 100%;}
	
	/***** drHanger ********************/
	#drHanger .inner{
		width: 100%;
		padding: 10px;
	}
	#drHanger dl{
		width: 100%;
		margin: 0 0 10px 0;
		padding: 10px;
	}
	#drHanger dl{
		width: 100%;
	}

}