@charset "UTF-8";
/* CSS Document */
.top_ttl{
	text-align:center;
	margin:40px auto;
	font-size:36px;
}
/*=================
		main
=================*/
.sp{
	display: none;
	}

#main{
	position:relative;
	margin:0 auto;
}
#main header{
	width:100%;
	position:absolute;
	top:0;
	z-index:22;
}
#main #kv{
	background:url(../images/top/kv.jpg) center no-repeat;
	background-size:cover;
	height:680px;
}

#main #kv section {
	background:rgba(153,52,34,0.8);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height:auto;
}

#main #kv section .message{
	width:auto;
	text-align: center;
	position:relative;
	overflow-x:hidden;
	top:250px;
	left:0;
	z-index:16;
	color:#fff;
}
#main #kv section .message h1{
	font-size:30px;
	letter-spacing:2px;
	font-weight:normal;
	/*overflow:hidden;*/
}

#main #kv section .message h1 br{
	display: none;
}

#main #kv section .message h1 span{
	position: relative;
	display:inline-block;
	transition: .4s;
	/*border-bottom:1px solid #fff;
	padding-bottom:8px;*/
}

#main #kv section .message h1 .l.anime{
	-webkit-animation: moveL 1.8s linear;
	-ms-animation: moveL 1.8s linear;
	animation: moveL 1.8s linear;
}

@-webkit-keyframes moveL{
	0%{
		opacity: 0;
		transform: translateX(-100px);
	}
	22%{
		opacity: 0;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}

@-ms-keyframes moveL{
	0%{
		opacity: 0;
		transform: translateX(-100px);
	}
	22%{
		opacity: 0;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}

@keyframes moveL{
	0%{
		opacity: 0;
		transform: translateX(-100px);
	}
	22%{
		opacity: 0;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}


#main #kv section .message h1 .r.anime{
	-webkit-animation: moveR 1.8s linear;
	-ms-animation: moveR 1.8s linear;
	animation: moveR 1.8s linear;
}

@-webkit-keyframes moveR{
	0%{
		opacity: 0;
		transform:translateX(100px);
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}

@-ms-keyframes moveR{
	0%{
		opacity: 0;
		transform:translateX(100px);
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}

@keyframes moveR{
	0%{
		opacity: 0;
		transform:translateX(100px);
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}

#main #kv section .message h1 .h1_s{
	display: inline-block;
	font-size: 28px;
	position: relative;
	margin-left: 6px;
	margin-right: 6px;
	vertical-align:top;
}

#main #kv section .message h1 .h1_s.anime{
	margin:0 12px; 
	-webkit-animation: moveS 2.4s ease;
	-ms-animation: moveS 2.4s ease;
	animation: moveS 2.4s ease;
}

@-webkit-keyframes moveS{
	0%{
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@-ms-keyframes moveS{
	0%{
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@keyframes moveS{
	0%{
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

#main #kv section .message p{
	font-size:18px;
	padding-top:40px;
	line-height:1.8;
}
#main #kv section .message p.anime{
	-webkit-animation: moveP 2.6s linear;
	-ms-animation: moveP 2.6s linear;
	animation: moveP 2.6s linear;
}

@-webkit-keyframes moveP{
	0%{
		opacity: 0;
		margin-top: 30px;
	}
	60%{
		opacity: 0;
		margin-top: 30px;
	}
	100%{
		opacity: 1;
		margin-top: 0;
	}
}

@-ms-keyframes moveP{
	0%{
		opacity: 0;
		margin-top: 30px;
	}
	60%{
		opacity: 0;
		margin-top: 30px;
	}
	100%{
		opacity: 1;
		margin-top: 0;
	}
}

@keyframes moveP{
	0%{
		opacity: 0;
		margin-top: 30px;
	}
	60%{
		opacity: 0;
		margin-top: 30px;
	}
	100%{
		opacity: 1;
		margin-top: 0;
	}
}
/*#main #kv video{
	max-width:100%;
	height:auto;
}
*/
#main #kv img{
	display:block;
}
/*=================
		main>news
=================*/
#main .news{
	width:100%;
	background:rgba(153,52,34,0.5);
	color:#fff;
	position:absolute;
	bottom:0;
}

#main .news a{
	color: #fff;
	text-decoration: underline;
}
#main .news a:hover{
	text-decoration: none;
}
#main .news .news_inner{
	padding-top:10px;
	padding-bottom:10px;
}

#main .news dl dt{
	float:left;
	padding-right:10px;
}
#main .news dl dd{
	border-left:1px solid #fff;
	padding:0 10px;
	float:left;
}
/*=================
		solution
=================*/
#wrap #solution{
	margin:0 auto 40px;
	text-align:center;
}

#wrap #solution a{
	color: #000;
}

#wrap #solution h1{
	color:#932;
	margin-bottom: 40px;
}
#wrap #solution ul li{
	width:calc(25% - 4px);
	display:inline-block;
	margin-bottom:80px;
	font-size: 14px;
	line-height: 1.6;
}
#wrap #solution ul li p{
	font-size: 12px;
	line-height: 1.6;
}

#wrap #solution ul li img{
	margin-bottom:	10px;
}

#wrap #solution ul li a{
	color: #000;
	display: block;
	position: relative;
	-webkit-transition:all .3s ease;
	transition:all .3s ease;
}

#wrap #solution ul li a:hover{
	color: #932;
}

#wrap #solution .sol_name{
	font-size:16px;
	font-weight:bold;
	margin:5px auto 10px;
}
#wrap #solution .pos_b{
	position:relative;
	top: 22px;
}

/*=================
		works
=================*/
#wrap #works {
	background:#993322;
	padding-bottom:40px;
	color:#fff;
}

#wrap #works h1{
	padding-top: 40px;
}

#wrap #works .img_works p a{
	color: #fff;
	font-size: 12px;
	display: inline-block;
	padding-top: 4px;
}

#wrap #works ul li dt{
	height:120px;
	margin-bottom:20px;
}
#wrap #works ul li .icon_works{
	margin:20px;
}
/*=================
		news
=================*/
#wrap #news{
	margin-bottom:40px;
}
#wrap #news h1{
	color:#993322;
}
#wrap #news dl{
	width:60%;
	margin:20px auto;
	line-height: 1.4;
}

#wrap #news dl a{
	color: #000;
	text-decoration: underline;
}

#wrap #news dl a:hover{
	text-decoration: none;
}

#wrap #news dl dt{
	width: auto;
	float:left;
	font-weight: bold;
	margin-right:20px;
}
#wrap #news dl dd{
  width: 80%;
	float:left;
}

/*=================
		network
=================*/
#wrap #network{
	width:100%;
	padding-top:40px;
	height:580px;
	background:url(../images/top/img_map.jpg) 60% bottom no-repeat;
	background-size:cover;
}

#wrap #network h1{
	color:#993322;
	margin: 0;
}

#wrap #network ul li{
	width:240px;
	float:left;
	margin:60px auto 80px;
	margin-left:12%;
	text-align:center;
	color:#4d4d4d;
}
#wrap #network ul .r{
	float:right;
	margin-left:0;
	margin-right:12%;
}

#wrap #network ul li dl{
	width: 100%;
}

#wrap #network ul li dl dt{
	font-size:14px;
	border-bottom:1px solid #4d4d4d;
	padding-bottom:8px;
}
#wrap #network ul li dl dd{
	padding-top:8px;
	line-height:1.4;
}
/*=================
		access
=================*/
#wrap #access{
	margin-top:40px;
}

#wrap #access h1{
	color:#993322;
	margin-bottom:0;
}
#wrap #access p{
	text-align:center;
	margin:20px auto;
	line-height:1.4;
	width: 90%;
}
#wrap #access #map_canvas{
	 width:100%;
	 height:380px;
 }
 #wrap #access .g_map a{
	 display: inline-block;
	 padding: 5px 10px;
	 font-size: 14px;
	 color: #932;
	 border: 1px solid #932;
	 -webkit-transition:all .3s ease;
 	transition:all .3s ease;
	margin-bottom: 30px;
 }
 #wrap #access .g_map a:hover{
	 background: #932;
	 color: #fff;
 }
@media screen and (max-width: 736px){
	.top_ttl{
		font-size:28px;
	}
	/*=================
			main
	=================*/
	#main{
		position:relative;
		margin:0 auto;
	}
	#main header{
		width:100%;
		position:absolute;
		top:0;
		z-index:18;
	}
	#main #kv{
		width: 100%;
		height:460px;
	}
	#main #kv section .message{
		top: 100px;
	}

	#main #kv section .message h1{
		font-size:40px;
		line-height: 1.2;

	}

		#main #kv section .message h1 br{
			display: block;
		}

	#main #kv section .message h1 .h1_s{
		font-size: 24px;
	    margin-left: 6px;
	    margin-right: 6px; 
	    margin-bottom: 4px;
	    vertical-align: middle;
	}

	#main #kv section .message p{
		font-size:12px;
		padding-top: 20px;
	}
	/*#main #kv video{
		max-width:100%;
		height:auto;
	}
	*/
	#main #kv img{
		display:block;
	}

    /*追加20130323　*/
	#main #kv section .message h1{
	font-size:22px;
	letter-spacing:4px;
	font-weight:normal;
	/*overflow:hidden;*/
    }

	/*=================
			main>news
	=================*/
	#main .news .news_inner{
		width:auto;
		margin:0 10px;
		padding:10px 4px;
		font-size: 10px;
	}

	#main .news dl dt{
		float:left;
		padding-right:4px;
	}
	#main .news dl dd{
		border-left:1px solid #fff;
		padding:0 4px;
		float:left;
		line-height: 1.4;
	}
	/*=================
			solution
	=================*/
	#wrap #solution ul li{
		width:100%;
		margin: 0 auto 20px;
		padding-bottom: 30px;
		border-bottom:1px solid rgba(153,52,34,0.2);
		display:block;
	}
	#wrap #solution ul li img{
		width:45px;
		height:45px;
	}
	#wrap #solution .pos_b {
    top: 0;
}

	/*=================
			works
	=================*/
	#wrap #works ul li{
		width:calc(30% - 2px);
		padding-right:12px;
		background:url(../images/top/icon_works_arrow.gif) 98% 50% no-repeat;
	}

	#wrap #works .icon_works img{
		width: 37px;
		height: 42px;
	}

	#wrap #works ul li:last-child{
		background:none;
	}
	#wrap #works ul li dt{
		height:70px;
		margin-bottom:20px;
	}
	#wrap #works ul li .icon_works{
		margin:20px;
	}

	/*=================
			news
	=================*/
#wrap #news dl{
	width: 80%;
}

	#wrap #news dl dt{
		float:none;
	}
	#wrap #news dl dd{
		width: 100%;
		float:none;
	}

	/*=================
			network
	=================*/
	#wrap #network{
		height:480px;
		background:url(../images/top/img_map_sp.jpg) 60% bottom no-repeat;
		padding-top: 0;
	}

	#wrap #network .top_ttl{
		margin: 0;
	}

	#wrap #network ul li{
		width:50%;
		margin:30px auto 40px;
		margin-left:0;
	}
	#wrap #network ul .r{
		margin-right:0;
	}

	#wrap #network ul li dl{
		width: 95%;
	}

	#wrap #network ul li dl dt{
		font-size:12px;
	}
	/*=================
			access
	=================*/
	#wrap #access #map_canvas{
		height: 280px;
	}

}