@charset "utf-8";
/* ===================================================================
CSS information

 file name  :top.css
 style info :トップページのスタイル
=================================================================== */

/* ==========================================================
	ヘッダー
========================================================== */

#header {
	width:966px;
	height:347px;
	padding:40px 0 0 0;
}

#header .logoSet{
	height:254px;
}

#header h1 {
	float:left;
	display:block;
	width:262px;
	height:254px;
	text-indent:-9999px;
	line-height:0;
	font-size:0.1em;
	overflow:hidden;
	background:url(../images/top/logo.png) no-repeat 0 0;
}

#header .copy {
	float:right;
	display:block;
	margin:77px 0 73px 0;
	width:658px;
	height:104px;
	text-indent:-9999px;
	line-height:0;
	font-size:0.1em;
	overflow:hidden;
	background:url(../images/top/copy.png) no-repeat 0 0;
}

#header .topicSet{
	height:93px;
}


#header .hashigo {
	float:left;
	width:262px;
	height:93px;
	background:url(../images/top/left_hashigo.png) no-repeat 0 0;
}

#header .topic {
	float:right;
	width:632px;
	height:29px;
	margin:30px 0 0 0 ;
	padding:17px 13px;
	color:#fff;
	background:url(../images/top/topic_bg.png) no-repeat 0 0;
}



/* ==========================================================
	メイン
========================================================== */

#main {
	clear:both;
	position:relative;
	background:url(../images/top/left_hashigo_bg.png) repeat-y;
}


/* ==========================================================
	サイド
========================================================== */

#side {
	float:left;
	width:290px;
	left:0px; top:0px;
	padding:15px 0 0 0;
}



/* ==========================================================
	コンテンツ
========================================================== */

#contents {
	float:right;
	width:658px;
	text-align:left;
	font-size:108%;
	line-height:2;
}


#contents #about h2, #contents #service h2, #contents #works h2, #contents #dprofile h2 {
	display:block;
	height:44px;
	margin:0 0 15px 0;
	text-indent:-9999px;
	line-height:0;
	font-size:0.1em;
	overflow:hidden;
}

#contents h3 {
	font-size:138.5%;
	font-weight:bold;
	margin:0 0 5px 0;
}

#contents p {
	margin:0 0 25px 0;
}

#contents div.attention {
	margin:0 0 25px 0;
}

#contents table {
	border-collapse:separate!important;
	border-spacing: 2px!important;
}
#contents tr {}
#contents th {
	font-weight:bold;
	vertical-align:top;
	padding:5px 8px;
	background:url(../images/top/table_bg_th.gif);
}
#contents td {
	vertical-align:top;
	padding:5px;
	background:url(../images/top/table_bg_td.gif);
}

#contents .attention {
	padding:7px 15px;
	background:url(../images/top/attention_bg.png);
}

#contents .nonMargin {
	margin:0;
}



/* About
========================================================== */

#contents #about {
	padding:70px 0 0 0;
}

#contents #about h2 {
	width:142px;
	background:url(../images/top/h2_about.png) no-repeat 0 0;
}

#contents #about table{}
#contents #about tr{}
#contents #about th {width:200px;}
#contents #about td {}

#contents #about table .exp {
	font-size:93%;
}


/* Service
========================================================== */

#contents #service {
	padding:90px 0 0 0;
}

#contents #service h2 {
	width:160px;
	background:url(../images/top/h2_service.png) no-repeat 0 0;
}

#contents #service h4 {
	font-size:123.1%;
	font-weight:bold;
}

#contents #service .attention .column {
	float:left;
	width:200px;
	padding: 0 9px 0 0;
}


#contents #service p.img {
	width:542px;
	margin:0 auto 25px auto;
}




/* Works
========================================================== */

#contents #works {
	padding:90px 0 0 0;
}

#contents #works h2 {
	width:142px;
	background:url(../images/top/h2_works.png) no-repeat 0 0;
}

#contents #works h4 {
	font-size:123.1%;
	font-weight:bold;
}

#contents #works .attention { clear:both; }

#contents #works .attention .column {
	float:left;
	width:200px;
	padding: 0 9px 0 0;
}

#contents #works .thumbs {
    width:636px;
    height:228px;
    margin: 0 auto 20px auto;
}

#contents #works .thumbs p {
    float:left;
    width:148px;
    height:148px;
    padding: 0 6px 0 5px;
}
#contents #works .thumbs p.shibataj { background:url(../images/top/thumb_shibaj_on.png) no-repeat 5px 0;}
#contents #works .thumbs p.jiu { padding-top:80px; background:url(../images/top/thumb_jiu_on.png) no-repeat 5px 80px;}
#contents #works .thumbs p.eduzukan { background:url(../images/top/thumb_eduzukan_on.png) no-repeat 5px 0;}
#contents #works .thumbs p.sns { padding-top:80px; background:url(../images/top/thumb_sns_on.png) no-repeat 5px 80px;}

#contents #works .thumbs p a img {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
#contents #works .thumbs p a:hover img {
	opacity: 0;
	filter: alpha(opacity=0);
}


/* DesignerProfile
========================================================== */

#contents #dprofile {
	padding:90px 0 110px 0;
}

#contents #dprofile h2 {
	width:384px;
	background:url(../images/top/h2_dprofile.png) no-repeat 0 0;
}






/* xxx
========================================================== */


/* xxx
---------------------------------------------------------- */


/*------xxxxxx*/