@charset "UTF-8";

/*=========================================
	株式会社熊谷　トップページ
	http://www.kumagai-co.com/
=========================================*/

/*-テキスト隠し------------------------------------------*/
#topimage p,#pickup ul li,#news div p,#message h2{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

/*-トップイメージ（スライド）-------------------------------*/
#topimage{
    position:relative;
    width:960px;
    height:300;
    margin:0 auto;
	background:#fff;
}
#frame {
    width: 960px;
    height: 300px;
    position: relative;
    overflow: hidden;
}
#topimage h2{
    position:absolute;
    width:960px;
    height:300px;
    opacity:0;
	animation: imgTrans 32s infinite;
    -moz-animation: imgTrans 32s infinite;
    -webkit-animation: imgTrans 32s ease-in infinite;
}

#topimage #image_1 {
	z-index:1;
	animation-delay: 0s;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
#topimage #image_2 {
    animation-delay: 8s;
   -moz-animation-delay: 8s;
   -webkit-animation-delay: 8s;
}
#topimage #image_3{
	animation-delay: 16s;
   -moz-animation-delay: 16s;
   -webkit-animation-delay: 16s;
}
#topimage #image_4{
	animation-delay: 24s;
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
}
@keyframes imgTrans {
0% { opacity:0; z-index:10; }
20% { opacity:1;}
25% { opacity:1; }
35% { opacity:0; }
100% { opacity:0; }
}
@-webkit-keyframes imgTrans {
0% { opacity:0; z-index:10; }
20% { opacity:1; }
25% { opacity:1; }
35% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; z-index:10; }
20% { opacity:1; }
25% { opacity:1; }
35% { opacity:0; }
100% { opacity:0; }
}
#topimage p{
	position:absolute;
	top:140px;
	left:center;
}

/*------IE9以下用------*/
.ie8 #topimage,.ie8 #topimage h2,.ie9 #topimage,.ie9 #topimage h2{
	position:static;
}
.ie8 #topimage #image_2,.ie8 #topimage #image_3,.ie8 #topimage #image_4,
.ie9 #topimage #image_2,.ie9 #topimage #image_3,.ie9 #topimage #image_4{
	position:absolute;
	top:-300px;
	overflow: hidden;
}

/*-ピックアップ-------------------------------------------*/
#pickup{
	margin:24px 0 0;
	height:197px;
	background-color:#e9e9e9;/*-元の青：#0951a7-*/
	text-align:center;
}
#pickup p{
	margin:0 auto;
	padding-top:13px;
	width:880px;
	height:18px;
	text-align:left;
}
/*-アイコン-*/
#pickup ul{
	margin:10px auto 0;
	padding:0;
	width:880px;
	height:134px;
	list-style:none;
}
#pickup ul li,#pickup ul li a{
	display:block;
	margin:0 0 0 24px;
	width:202px;
	height:134px;
	color:#fff;
}
#pickup ul li{float:left;}
#pickup .margin0{margin:0;}

#pickup ul li a{margin:0;}
#pickup .pakato{background:#fff url(../topimages/pickup_pakat.jpg) no-repeat 0 0;}
#pickup .iwamuro{background:#fff url(../topimages/pickup_iwamuro.jpg) no-repeat 0 0;}
#pickup .development{background:#fff url(../topimages/pickup_renji.jpg) no-repeat 0 0;}
#pickup .recruit{background:#fff url(../topimages/pickup_recruit.jpg) no-repeat 0 0;}

#pickup ul a:hover{margin:0;}
#pickup .pakato a:hover{background:#fff url(../topimages/pickup_pakat.jpg) no-repeat 0 -134px;}
#pickup .iwamuro a:hover{background:#fff url(../topimages/pickup_iwamuro.jpg) no-repeat 0 -134px;}
#pickup .development a:hover{background:#fff url(../topimages/pickup_renji.jpg) no-repeat 0 -134px;}
#pickup .recruit a:hover{background:#fff url(../topimages/pickup_recruit.jpg) no-repeat 0 -134px;}

/*-左コンテナ--------------------------------------------*/
#container_left{
	margin:20px 0 0;
	width:512px;
	float:left;
}
/*-ニュース-*/
#news{
	margin:0;
}
#news div{
	height:35px;
	border-bottom:2px solid #003399;
}
#news h2{
	width:79px;
	height:18px;
	float:left;
}
#news div p,#news div p a{
	width:124px;
	height:28px;
}
#news div p{float:right;}
#news div p a{
	display:block;
	background:#fff url(../topimages/news_btn.png) no-repeat 0 0;
}
#news div p a:hover{background-position:0 -28px;}

#news section{
	padding:12px 0;
	background:#fff url(../topimages/news_arrow.png) no-repeat 486px center;
	border-bottom:1px dashed #bbb;
}
#news section time{
	color:#9f9f9f;
}
#news section p{
	margin:2px 0 0;/*←IE8以下用*/
	margin:0.2rem 0 0;
	width:450px;
}
/*-メッセージ-*/
#message{
	margin:24px 0 0;
	height:152px;/*←IE8以下用*/
	height:15.2rem;
	background:#fff url(../topimages/icon_intro_bg.jpg) no-repeat 0 0;
}
#message h2{
	margin:0 0 0 20px;
	width:189px;
	height:36px;
}
#message p{
	margin:8px 0 0 20px;
	width:340px;
	color:#fff;
}
#message a:hover{color:#fff;}

/*-右コンテナ--------------------------------------------*/
#container_right{
	margin:20px 0 0 28px;
	width:420px;
	float:right;
}
/*-アイコン-*/
#container_right article{
	clear:both;
	margin:0;
	height:110px;/*←IE8以下用*/
	height:11rem;
	background:#fff url(../topimages/icon_bg.jpg) no-repeat 0 bottom;
}
#container_right article div{
	margin:0;
	width:210px;
	height:110px;/*←IE8以下用*/
	height:11rem;
	float:left;
}
#container_right article h2,#container_right article p{margin:0 0 0 20px;}
#container_right article h2{
	margin-top:15px;
}
#container_right article p{
	margin-top:3px;
	width:170px;
}
#container_right article a:hover{color:#666;}
#container_right article figure{
	margin:0;
	background-color:#fff;
	float:right;
}
#container_right figure a:hover{opacity:0.6; }
/*IE8以下用*/.ie8 #container_right figure a:hover{
	filter: alpha(opacity=50);
    zoom: 1;
}
#container_right .technical,#container_right .company{margin-top:24px;}

#container_right .youthyell{
	margin-top:24px;
	width:420px;
	height:60px;/*←IE8以下用*/
	height:6rem;
}