@charset "utf-8";
/* CSS Document */

#maincontent {
    border-top: #942344 solid 1px;
    margin-bottom: 0;
}


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

	* main
	
===================================== */


#mainimg-box #main_bg {
	background: url(../img/slide_img.jpg) no-repeat;
	background-size: contain;
}
#mainimg-box {
	/*background-color: #E0D7C5;*/
		background:url(../img/bg_gray.jpg) repeat;
}
#mainimg-box .fade li {
	position:absolute;
}
	#mainimg-box .fade li img {
		width: 100%;
		display: none;
	}
	#mainimg-box #mainimg img{
		width: 100%;
	}
	#mainimg-box #schoolmenu {
		background-color: #E7E7E7;
		height: auto;
	}
		#mainimg-box #schoolmenu ul {
			max-width: 840px;
			/*width: 100%;*/
			margin: 0 auto;
			padding: 0 20px;
			text-align: center;
		}
		#mainimg-box #schoolmenu li {
			float: left;
			margin: 10px 1.2%;
			overflow: hidden;
			width: 17.2%;
		}
			#mainimg-box #schoolmenu li a:hover {
				opacity: .5;
				-webkit-opacity: .5;
				-moz-opacity: .5;
				filter: alpha(opacity=50);	/* IE lt 8 */
				-ms-filter: "alpha(opacity=50)"; /* IE 8 */
				-webkit-transition: opacity 0.8s;
				-moz-transition: opacity 0.8s;
				-ms-transition: opacity 0.8s;
				transition: opacity 0.8s;
			}
			#mainimg-box #schoolmenu li img {
				padding-top: 10px;
			}
			
	#mainimg-box #schoolmenu-sp {
		display: none;
		background-color: #E7E7E7;
		z-index: 500;
	}
		#mainimg-box #schoolmenu-sp ul {
			border-top: #FFF solid 1px;
			border-left: #FFF solid 1px;
		}
		#mainimg-box #schoolmenu-sp li {
			float: left;
			height: 80px;
			width: 50%;
			border-bottom: #FFF solid 1px;
			border-right: #FFF solid 1px;
			margin: -1px;
			background:url(../img/h3_indent.png) no-repeat 10px;
			text-align: center;
		}
		#mainimg-box #schoolmenu-sp li:hover {
			background-color: #FFEEEE;
		}
		#mainimg-box #schoolmenu-sp li img {
			height: 60px;
			padding: 10px;
			float: left;
		}
		#mainimg-box #schoolmenu-sp li a {
			text-decoration: none;
			color: #000;
		}
		#mainimg-box #schoolmenu-sp li p {
			padding: 30px 0;
		}

/*===============================================
画面の横幅が768px以下
===============================================*/
@media screen and (max-width:768px){
	#mainimg-box #schoolmenu {
		display: none;
	}
	#mainimg-box #schoolmenu-sp {
		display: block;
	}
}
/*===============================================
画面の横幅が568px以下
===============================================*/
@media screen and (max-width:568px){
	#mainimg-box #schoolmenu-sp li {
		height: auto;
	}
		#mainimg-box #schoolmenu-sp li img {
			display: none;
		}
		#mainimg-box #schoolmenu-sp li p {
			padding: 7px;
		}
}
/*===============================================
画面の横幅が480px以下
===============================================*/
@media screen and (max-width:480px){
	#mainimg-box #schoolmenu-sp li {
		float: none;
		width: 100%;
		}
}

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

	* news
	
===================================== */

#news-box {
	width: 874px;
	margin: 0 auto;
	overflow: hidden;
}

#news-box #news-ttl {
	margin: 95px 30px;
	float: left;
}
	
#news-box .newslist {
	overflow: hidden;
	border: 100%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 12px;
	width: 700px;
	height: 131px;
	margin-bottom: 10px;
	}
	#news-box .newslist ol {
		margin: 10px;
	}
	#news-box .newslist li {
		overflow: hidden;
		margin: 7px 0;
	}
		#news-box .newslist .category {
			background-color: #B49C70;
			color: #FFF;
			text-align: center;
			width: 8em;
			margin-right: 10px;
			float: left;
		}	
		#news-box .newslist #tab1 .category {
		}	
			#news-box .newslist .ttl_date {
				float: left;
				margin-right: 10px;
				color: #666666;
			}
			#news-box .newslist .ttl_article {
				overflow: hidden;
				white-space: nowrap;  
				text-overflow: ellipsis;
			}
			#news-box .newslist .ttl_article a:hover {
				color: #942344;
			}
	#news-box .tabs {
		padding-top: 20px;
		overflow: hidden;
	}
	#news-box .tabs li {
		font-size: 12px;
		color: #FFF;
		text-align: center;
		text-decoration: none;
		display: table;
		width: 6em;
		background-color: #999999;
		float: left;
		margin: 15px 10px;
		padding: 2px 4px;
		cursor: pointer;
	}
		#news-box .tabs li.select {
			background-color: #942344;
		}
		#news-box .tabs a:hover {
			opacity:0.7;
			filter:alpha(opacity=70);
		}
		#news-box .newslist .hide {
			display: none;
		}
		
	#news-box .pulldown {
		display: none;
	}
	
	#news .content_bnr {
		overflow: hidden;
		max-width: 980px;
		width: 100%;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	#news .content_bnr li {
		float: left;
		width: 18%;
		margin: 1%;
	}
	#news .content_bnr li a:hover {
		opacity: .5;
		-webkit-opacity: .5;
		-moz-opacity: .5;
		filter: alpha(opacity=20);	
		-ms-filter: "alpha(opacity=50)";
		-webkit-transition: opacity 0.5s;
		-moz-transition: opacity 0.5s;
		-ms-transition: opacity 0.5s;
		transition: opacity 0.5s;
	}
@media screen and (max-width:870px){
	#news-box {
		width: 700px;
		margin: 0 auto;
	}
	#news-box #news-ttl {
		margin: 30px 0 10px 0;
		float: none;
	}
	#news-box .tabs {
		padding-top: 0;
	}
}
@media screen and (max-width:768px){
	#news-box {
		width: 100%;
	}
	#news-box #news-ttl {
		margin: 30px 0 0 20px;
		width: 100%;
		height: auto;
	}
	#news-box #news-ttl h2 {
		float: left;
	}
		#news-box .newslist {
			width: auto;
			margin: 20px 10px 10px 10px;
		}
		#news-box .tabs {
			display: none;
		}
		#news-box .newslist .tab {
			float: none;
		}
	#news-box .pulldown {
		display: block;
	}
	#news-box .pulldown #changeSelect{
		float: right;
		margin-right: 40px;
	}
	#news-box .newslist .hide {
		display: block;
	}
}
@media screen and (max-width:568px){
	#news-box .newslist {
		height: auto;
	}
		#news-box .newslist .ttl_date {
			float: none;
		}
		#news-box .newslist .ttl_article {
			margin-top: 3px;
		}
}
@media screen and (max-width:480px){
		#news-box .newslist {
			margin-right: 10px;
			margin-left: 10px;
		}
	#news .content_bnr {
		margin: 0 15px;
		margin-bottom: 20px;
	}
	#news .content_bnr li {
		float: left;
		width: 40%;
		margin:  10px;
	}
		
}

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

	* history
	
===================================== */
#history {
	background: #FFF url(../img/bg_history.jpg) center no-repeat;
	background-attachment: fixed;
	background-size: cover;
	max-height: 590px;
	padding: 30px 0;
}
/*	#history a:hover {
		opacity: .5;
		-webkit-opacity: .5;
		-moz-opacity: .5;
		filter: alpha(opacity=20);	
		-ms-filter: "alpha(opacity=50)";
		-webkit-transition: opacity 1s ease-out;
		-moz-transition: opacity 1s ease-out;
		-ms-transition: opacity 1s ease-out;
		transition: opacity 1s ease-out;
	}
*/
	#history h2 {
			margin: 20px 0;
		}
	#history p.mar30 {
			margin: 30px 0;
		}
	#history #img_history {
		position: relative;
		top: -100px;
	}

#history #history_bg {
	max-width: 732px;
	margin: 0 auto;
	background: url(../img/img_history.png) no-repeat bottom;
	background-size: contain;
	height: 575px;
	}
	
/*===============================================
画面の横幅が768px以下
===============================================*/
@media screen and (max-width:768px){

#history #history_bg {
	height: 520px;
	}
}
/*===============================================
画面の横幅が568px以下
===============================================*/
@media screen and (max-width:568px){
#history {
	background-attachment: scroll;
}
#history #history_bg {
	height: 420px;
	}
}
/*===============================================
画面の横幅が480px以下
===============================================*/
@media screen and (max-width:480px){
#history #history_bg {
	height: 400px;
	}
}
/*===============================================
画面の横幅が320px以下
===============================================*/
@media screen and (max-width:320px){
#history #history_bg {
	height: 230px;
	background: none;
	}
}

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

	* message
	
===================================== */

#message {
	/*background: #FFF url(../img/img_message.png) no-repeat left 50px bottom;
	background-size: 270px;*/
	width: 90%;
	/*height: 400px;*/
	margin: 0 auto;
}
	#message h2 {
			margin: 10px 0;
		}
	#message p {
			margin: 30px 0;
		}
	#message #txt_message {
		position: relative;
		/*left: 370px;*/
		margin: 50px auto;
		/*max-width: 543px;*/
		width: 45em;
	}
@media screen and (max-width:992px){
	/*#message {
		background-size: 270px;
		height: 416px;
	}
		#message #txt_message {
			position: relative;
			left: 40%;
	}*/
}
@media screen and (max-width:768px){
	/*#message {
		background: #FFF url(../img/img_message.png) no-repeat right bottom;
		background-size: 220px;
		height: 500px;
	}*/
		#message #txt_message {
			width: 100%;
			/*position: relative;
			left: 0;
			margin: 50px 0;*/
	}

}
@media screen and (max-width:569px){
	/*#message {
		background-size: 170px;
		height: 500px;
	}
		#message #txt_message {
			width: 100%;
			position: relative;
			left: 0;
			margin: 50px 0;
	}*/
}
@media screen and (max-width:480px){
	/*#message {
		height: 585px;
	}*/
}
@media screen and (max-width:320px){
	/*#message {
		height: 450px;
		background: none;
	}*/
}

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

	* origin
	
===================================== */

#origin {
	background: #FFF url(../img/bg_origin.jpg) repeat 0 0;
	height: 320px;
	padding: 50px;
}

	#origin h2 {
			margin: 10px 0;
		}
	#origin p {
			margin-top: 30px;
		}
		#origin #origin_bg1 {
			background: url(../img/img_flag.png) no-repeat left top;
			height: 360px;
		}
		#origin #origin_bg2 {
			background: url(../img/img_badge.png) no-repeat right;
			height: 320px;
		}

/*===============================================
画面の横幅が992px以下
===============================================*/
@media screen and (max-width:992px){
	#origin {
		height: 300px;
	}
		#origin #origin_bg1 {
			background-size: 200px;
			}
		#origin #origin_bg2 {
			background-size: 160px;
			}
}
@media screen and (max-width:768px){
	#origin {
		height: auto;
		padding: 50px 10px;
	}
		#origin #origin_bg1 {
			background: none;
			height: auto;
			}
		#origin #origin_bg2 {
			background: none;
			height: auto;
			}
}
@media screen and (max-width:320px){
	#origin {
		height: auto;
	}
}

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

	* footer_menu
	
===================================== */
#footer_menu {
}

	#footer_menu ul {
		overflow: hidden;
		max-width: 650px;
		margin: 10px auto;
	}
	#footer_menu li {
		width: 15.38%;
		float: left;
		margin: 2.3%;
	}
	
	#footer_menu a {
		width: 100px;
		height: 100px;
		display: table;
		border: 2px solid #942344;
		border-radius: 50%;
	}
	
	#footer_menu a:hover {
		background-color: #FFEEEE;
	}
		
	#footer_menu a p {
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		color: #942344; !important
	}
	
@media screen and (max-width:568px){
	#footer_menu a {
		width: 80px;
		height: 80px;
	}
	#footer_menu a p {
		font-size: 12px;
	}
}

@media screen and (max-width:480px){
	#footer_menu a {
		width: 54px;
		height: 54px;
	}
	#footer_menu a p {
		font-size: 10px;
		line-height: 13px;
	}
}