@charset "utf-8";

/*------------------------------------------------------------

site : Coobal Inc.
file : /common/css/home/home.css

------------------------------------------------------------*/
@import url(/common/css/import.css);

/*============================================================
div#main-visual
============================================================*/
#main-visual{
z-index:10;
position:relative;
width:840px;
height:240px;
background: url(/common/img/home/button_visual.gif) no-repeat 600px 0;
}

#main-visual ul{
position:absolute;
top:0;
right:0;
width:240px;
}

#main-visual li{
width:240px;
text-indent:-9999px;
}
#main-visual li strong{
margin:0 10px 0 0;
}

#main-visual li a{
display:block;
width:240px;
height:60px;
background: url(/common/img/home/button_visual.gif) no-repeat 0 0;
}

/* ul usually */
#main-visual li.rep a{
background-position:0 0;
}
#main-visual li.consulting a{
background-position:0 -60px;
}
#main-visual li.sem a{
background-position:0 -120px;
}
#main-visual li.web a{
background-position:0 -180px;
}

/* ul hover */
#main-visual li.rep a:hover{
background-position:-240px 0;
}
#main-visual li.consulting a:hover{
background-position:-240px -60px;
}
#main-visual li.sem a:hover{
background-position:-240px -120px;
}
#main-visual li.web a:hover{
background-position:-240px -180px;
}

/* div#slide
------------------------------------------------------------*/
#slide{
width: 600px;
height: 240px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
#slide div{
height: 240px;
position: absolute;
top:0;
left:0;
}
#slide div img{
display: block;
width: 600px;
height: 240px;
}

/* div#buttons
------------------------------------------------------------*/
#buttons{
position: absolute;
overflow:hidden;
right: 0;
top: 0;
width:240px;
height:240px;
padding:0 0 0 360px;
}
#buttons li{
width:240px;
height: 60px;
}
#buttons li a{
display: block;
width:240px;
height: 60px;
}

#buttons div#b5 a{
display: none;
}

img#loading{
position: absolute;
left: 290px;
top: 170px;
}

/*============================================================
div.casestudyArea
============================================================*/
#main-content .casestudyArea{
width:620px;
}

/* div.ttl
------------------------------------------------------------*/
#main-content .casestudyArea .ttl{
position:relative;
height:26px;
border-bottom:#0d3f7a 3px solid;
}

#main-content .casestudyArea .ttl h2{
height:26px;
background: url(/common/img/home/heading_h2_casestudy.gif) no-repeat;
text-indent:-9999px;
}
#main-content .casestudyArea .ttl img.over{
position:absolute;
top:5px;
right:7px;
}


/* div.casestudyBox
------------------------------------------------------------*/
#main-content .casestudyArea .casestudyBox{
width:620px;
background:url(/common/img/home/texture_casestudy.gif) no-repeat left bottom;
}

#main-content .casestudyArea .casestudyBox .caseBox{
width:310px;
}

#main-content .casestudyArea .casestudyBox .caseBox h3{
width:289px;
height:44px;
margin:7px 0 0 11px;
text-indent:-9999px;
}
#main-content .casestudyArea .casestudyBox .caseBox h3 a{
display:block;
width:289px;
height:44px;
background: url(/common/img/home/heading_h3_casestudy.gif) no-repeat 0 0;
}
#main-content .casestudyArea .casestudyBox .caseBox h3 a:hover{
display:block;
width:289px;
height:44px;
background-position:-290px 0;
}

#main-content .casestudyArea .casestudyBox .caseBox p{
width:219px;
margin:10px 0 0 11px;
padding:0 0 0 70px;
background: url(/common/img/home/texture_casestudy_txt.gif) no-repeat 0 0;
line-height:1.4em;
font-size:85%;
}

#main-content .casestudyArea .casestudyBox .caseBox img.over{
margin:5px 0 11px 220px;
}

/* div.box01 */
#main-content .casestudyArea .casestudyBox .box01{
float:left;
width:310px;
}

/* div.box02 */
#main-content .casestudyArea .casestudyBox .box02{
float:right;
width:310px;
}
#main-content .casestudyArea .casestudyBox .box02 h3 a{
background-position:0 -44px;
}
#main-content .casestudyArea .casestudyBox .box02 h3 a:hover{
background-position:-290px -44px;
}
#main-content .casestudyArea .casestudyBox .box02 p{
background-position:0 -120px;
}

/* div.box03 */
#main-content .casestudyArea .casestudyBox .box03{
float:left;
width:310px;
}
#main-content .casestudyArea .casestudyBox .box03 h3 a{
background-position:0 -88px;
}
#main-content .casestudyArea .casestudyBox .box03 h3 a:hover{
background-position:-290px -88px;
}
#main-content .casestudyArea .casestudyBox .box03 p{
background-position:0 -240px;
}

/* div.box04 */
#main-content .casestudyArea .casestudyBox .box04{
float:right;
width:310px;
}
#main-content .casestudyArea .casestudyBox .box04 h3 a{
background-position:0 -132px;
}
#main-content .casestudyArea .casestudyBox .box04 h3 a:hover{
background-position:-290px -132px;
}
#main-content .casestudyArea .casestudyBox .box04 p{
background-position:0 -360px;
}

/*============================================================
div.newsArea
============================================================*/
#main-content .newsArea{
width:620px;
margin:25px 0 25px 0;
}

#main-content .newsArea a:link{color:#00488a;text-decoration:none;}
#main-content .newsArea a:visited{color:#00488a;text-decoration:none;}
#main-content .newsArea a:hover{color:#00488a;text-decoration:underline;}
#main-content .newsArea a:active{color:#003574;text-decoration:underline;}


#main-content .newsArea p.allView{
margin:8px 0 0 0;
text-align:right;
}

/* div.tabBox
------------------------------------------------------------*/
#main-content .newsArea .tabBox{
position:relative;
width:620px;
height:24px;
border-bottom:#004684 3px solid;
}

#main-content .newsArea .tabBox ul#tab{
position:absolute;
top:0;
left:14px;
}

#main-content .newsArea .tabBox ul#tab li{
float:left;
width:98px;
height:24px;
margin:0 7px 0 0;
text-align:center;
font-size:93%;
}

#main-content .newsArea .tabBox ul#tab li a{
display:block;
width:98px;
height:24px;
background: url(/common/img/home/button_newsTab.gif) no-repeat 0 0;
line-height:24px;
text-decoration:none;
color:#fff;
}

#main-content .newsArea .tabBox ul#tab li a:hover{
background-position:0 -24px;
}
#main-content .newsArea .tabBox ul#tab li.selected a{
background-position:0 -24px;
}
#main-content .newsArea .tabBox ul#tab li.selected a:hover{
background-position:0 -24px;
}

/* img.rssBtn */
#main-content .newsArea .tabBox img.rssBtn{
position:absolute;
top:5px;
right:10px;
}

/* dl.newsAreaLst
------------------------------------------------------------*/
#main-content .newsArea dl.newsAreaLst{
margin:5px 0 0 0;
}

#main-content .newsArea dl.newsAreaLst dt{
clear:both;
float:left;
width:6em;
padding:8px 0 8px 8px;
line-height:1.4em;
font-size:93%;
}

#main-content .newsArea dl.newsAreaLst dd{
padding:8px 5px 8px 7.5em;
background: url(/common/img/line_dot.gif) repeat-x left bottom;
line-height:1.4em;
font-size:93%;
}

#main-content .newsArea dl.newsAreaLst dd a.pdf{
padding:0 22px 0 0;
background:url(/common/img/icon_pdf.gif) no-repeat right;
}

* html #main-content .newsArea dl.newsAreaLst{
margin:-1px 0 0 0;
padding:0 0 0 0;
background: url(/common/img/line_dot.gif) repeat-x left bottom;
}
* html #main-content .newsArea dl.newsAreaLst dt{
background: url(/common/img/line_dot.gif) repeat-x left top;
}
* html #main-content .newsArea dl.newsAreaLst dd{
padding:8px 0 8px 0;
background: url(/common/img/line_dot.gif) repeat-x left top;
}


/*============================================================
div#sub-content
============================================================*/

/* div.homeBannerArea
-------------------------------------------------------------*/
#sub-content .homeBannerArea{
margin:16px 0 0 0;
}

#sub-content .homeBannerArea p.sml{
margin:5px 0 0 0;
line-height:1.3em;
font-size:77%;
}

#sub-content .homeBannerArea ul{
margin:12px 0 0 0;
}
#sub-content .homeBannerArea li.xhtml{
width:88px;
float:left;
margin-right:10px;
}
#sub-content .homeBannerArea li.img-down img{
/* バナー見た目調整用（横並び時の高さ調整） */
margin-top:5px;
}
#sub-content .homeBannerArea li.img-down-thin {
text-align:center;
}
#sub-content .homeBannerArea li.css{
width:88px;
float:right;
}

/*============================================================
div#facebook
============================================================*/

#facebook{
	margin: 0 0 20px;
}




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

2011.06.16 sara
総合住販様のリンク導入

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

/* div.customBoxArea
-------------------------------------------------------------*/
.customBoxArea {
	width:620px;
	background:url(../../img/home/repsitecheck_bg.gif) repeat-x;
	border:1px solid #c8c8c8;
}

.customBoxArea h3 {
	margin:5px 0 20px 5px;
}
/* div.customBox
-------------------------------------------------------------*/
.customBox {
	width:600px;
	margin:0 auto;
	padding:0 0 10px 0;
}

.customBox img.cap {
	width:180px;
	float:left;
	margin:0 0 0 5px;
}

.customBoxtext {
	width:390px;
	float:right;
	margin:0 5px 0 0;
}

.customBoxtext h4 {
	margin:0 0 15px 0;
}

.customBoxtext dl{

}

.customBoxtext dt {
	display:block;
	float:left;
	margin:3px 0 0 0;
}

.customBoxtext dd {
	display:block;
	float:right;
	margin:0 73px 0 0;
	line-height:1.66em;
}

.mb10 {
	margin-bottom:10px;
}