@charset "utf-8";


#main_area {
	float:left;
	width:310px;
}
#banner{
	float:right;
	width:615px;
	margin-bottom:40px;
}
@media screen and (max-width: 732px) {
	#main_area {
		float:none;
		width:100%;
		padding:10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#banner{
		clear:both;
		float:none;
		width:100%;
		padding:10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}
}



#banner ul li{
	float:left;
}
#banner ul li:nth-child(even){
	float:right;
}

#main_area #info {
	border:1px solid #CCC;
}

@media screen and (max-width: 374px) {
	#main_area #info {
		width:100%;
		float:none;
		margin-bottom:20px;
	}
}

/*お知らせ*/
.title_info {
	border-top:5px solid #2B68A5;
	border-bottom:1px solid #CCC;
	background:#F5F5F5 url(../images/nav_btn.png) no-repeat 10px 15px;
	background-size:14px;
	padding:5px 10px 5px 30px;
	font-size:20px;
	font-weight:normal;
	}
.title_news {
	border-top:5px solid #F39902;
	border-bottom:1px solid #CCC;
	background:#F5F5F5 url(../images/icon01.png) no-repeat 10px 15px;
	background-size:14px;
	padding:5px 10px 5px 30px;
	font-size:20px;
	font-weight:normal;
	}
@media screen and (max-width: 735px) {
	.title_info {
		font-size:16px;
	}
	.title_news {
		font-size:16px;
	}
}
#main_area ul li div { padding:15px; }
@media screen and (max-width: 735px) {
	#main_area ul li div { padding:10px; }
}

#main_area #info ul li:nth-child(even) {
	background:#E6F3FF;
}
#main_area #news ul li:nth-child(even) {
	background:#FFF8EE;
}
#banner ul li a img{
	border:1px solid #CCC;
	margin-bottom:15px;
}
#banner ul li a img:hover{
	border:1px solid #2B68A5;
	transition: border-color 0.3s, color 0.3s;
	}


@media screen and (max-width: 732px) {
	#banner ul li {
		display: inline-block;
		width:49%;
		text-align:center;
	}
}
@media screen and (max-width: 374px) {
	#banner ul li {
		display:block;
		width:100%;
		text-align:center;
	}
}


/* ========================================================
	top.css => トップページ用CSS
======================================================== */
#wrap{
	width:100%;
	height:350px;
	margin:0px auto 40px auto;
	}
@media screen and (max-width: 732px) {
	#wrap{
		margin:0px auto 20px auto;
		}
}

#cloud{
	width:100%;
	height:350px;
	border-bottom:1px solid #F39902;
	background: url(../images/top/main1.jpg);
	animation: cloudmove 20s linear infinite;
	-webkit-animation: cloudmove 20s linear infinite;
	-moz-animation: cloudmove 20s linear infinite;
	position:relative;
	}
	@keyframes cloudmove {
	    0% {background-position: 0 0;}
		25% {background-position: 100px 0px;}
	    50% {background-position: 150px 0;}
		75% {background-position: 200px 0px;}
	    100% {background-position: 250px 0;}
	}
	@-webkit-keyframes cloudmove {
	    0% {background-position: 0 0;}
		25% {background-position: 100px 0px;}
	    50% {background-position: 150px 0;}
		75% {background-position: 200px 0px;}
	    100% {background-position: 250px 0;}
	}
	@-moz-keyframes cloudmove {
	    0% {background-position: 0 0;}
		25% {background-position: 100px 0px;}
	    50% {background-position: 150px 0;}
		75% {background-position: 200px 0px;}
	    100% {background-position: 250px 0;}
	}

#sleft {
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	}
#sright {
	position:absolute;
	bottom:0;
	right:0;
	z-index:1;
	}
#stxt {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
		z-index:1;
}


@media screen and (max-width: 732px) {
	#sleft {
		width:75%;
		}
	#sright {
		width:50%;
		text-align:right;
		}
	#sleft img,
	#sright img {
		width:50%;
		}
}



#top_saitemap { background:#F5F5F5; }
#top_saitemap ul {}
#top_saitemap ul li {}
#top_saitemap ul li a {
	display:inline-block;
	text-decoration:none;
	background:#F5F5F5 url(../images/icon02.png) no-repeat 10px 10px ;
	background-size:7px;
	border-bottom:1px solid #CCC;
	border-right:1px solid #CCC;
	padding:5px 30px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#top_saitemap ul li ul {  }
#top_saitemap ul li ul li a {
	background:#f1f1f1 url(../images/icon02.png) no-repeat 20px 12px ;
	background-size:5px;
	display:inline-block; float:left;
	width:50%;
	border-right:none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}