@charset "utf-8";
/* ベース */

body{
	margin:0 auto;
	padding:0;
	text-align:center;
}

img{
	border:0;
}




/* ヘッダー（エリア） */

#head_area{
	width:860px;
	height:50px;
	margin:0 auto;
	padding:0;
}

#head_left{
	width:540px;
	height:50px;
	margin:0;
	padding:0;
	float:left;
}

#head_right{
	width:320px;
	height:50px;
	margin:0;
	padding:0;
	float:right;
}


#head_area:after{
	content:"."; 
	display: block;
	height:0px;
	clear:both;
	line-height:
	visibility:hidden;
	color:#FFF;
}

#head_area{
	overflow: hidden;
}   
    
* html #head_area{
    height: 1%;   
}


/* ヘッダー（タイトル） */

h1{
	margin:0;
	padding:10px 0 0 0;
	text-align:left;
	float:left;
}

h1 a{
	margin:0;
	padding:0;
	width:251px;
	height:34px;
	display:block;
	text-indent:-9999px;
	text-decoration:none;
	background:#FFF url(../image/title/main_title.png) no-repeat;
	border:0;
}


h2{
	margin:0;
	padding:18px 0 0 10px;
	float:left;
	font-weight:normal;
	text-align:left;
	font-size:70%;
	color:#565656;
}


/* ヘッダー（メニュー） */


#head_right ul{
	margin:0;
	padding:15px 0 0 0;
	list-style:none;
}

#head_right li{
	margin:0;
	padding:0;
	float:right;
}

#head_right li a{
	height:30px;
	margin:0;
	padding:0;
	display:block;
	text-indent:-9999px;
	text-decoration:none;
	overflow:hidden;
}


/* ヘッダー（メニュー　ホーム） */
#h_menu1 a{
	background:#FFF url(../image/menu/hd_menu_01.png);
	width:65px;
}

#h_menu1 a:hover{
	background-position:0 -30px;
}

/* ヘッダー（メニュー　お問い合わせ） */
#h_menu2 a{
	background:#FFF url(../image/menu/hd_menu_02.png);
	width:100px;
}

#h_menu2 a:hover{
	background-position:0 -30px;
}

/* ヘッダー（メニュー　サイトマップ） */
#h_menu3 a{
	background:#FFF url(../image/menu/hd_menu_03.png);
	width:95px;
}

#h_menu3 a:hover{
	background-position:0 -30px;
}


#head_right:after{
	content:"."; 
	display: block;
	height:0px;
	clear:both;
	line-height:
	visibility:hidden;
	color:#FFF;
}

#head_right{
	overflow: hidden;
}   
    
* html #head_right{
    height: 1%;   
}




/* メインメニュー */

#menu_area{
	width:100%;
	height:60px;
	background:#CCC url(../image/back/menu_bk.png) repeat-x top left;
	margin:10px auto 0 auto;
	padding:0;
}


#menu_area:after{
	content:"."; 
	display: block;
	height:0px;
	clear:both;
	line-height:
	visibility:hidden;
	color:#FFF;
}

#menu_area{
	overflow: hidden;
}   
    
* html #menu_area{
    height: 1%;   
}


#menu_area ul{
	width:860px;
	margin:0 auto;
	padding:5px 0 0 0;
	list-style:none;
}



#menu_area li{
	float:left;
}

#menu_area li a{
	width:110px;
	height:50px;
	padding:0;
	display:block;
	text-indent:-9999px;
	text-decoration:none;
	overflow:hidden;
}


/* メニュー（初めての方） */
#menu1 a{
	background:#333 url(../image/menu/menu_01.png);
	margin:0 15px 0 0;
}

#menu1 a:hover{
	background-position:0 -50px;
}

#menu1-off a{
	background:#333 url(../image/menu/menu_01.png);
	margin:0 15px 0 0;
	background-position:0 -50px;
}

/* メニュー（リニューアルの方） */
#menu2 a{
	background:#333 url(../image/menu/menu_02.png);
	margin:0 15px 0 0;
}

#menu2 a:hover{
	background-position:0 -50px;
}

#menu2-off a{
	background:#333 url(../image/menu/menu_02.png);
	margin:0 15px 0 0;
	background-position:0 -50px;
}

/* メニュー（サービス一覧） */
#menu3 a{
	background:#333 url(../image/menu/menu_03.png);
	margin:0 15px 0 0;
}

#menu3 a:hover{
	background-position:0 -50px;
}

#menu3-off a{
	background:#333 url(../image/menu/menu_03.png);
	margin:0 15px 0 0;
	background-position:0 -50px;
}

/* メニュー（ワークフロー） */
#menu4 a{
	background:#333 url(../image/menu/menu_04.png);
	margin:0 15px 0 0;
}

#menu4 a:hover{
	background-position:0 -50px;
}

#menu4-off a{
	background:#333 url(../image/menu/menu_04.png);
	margin:0 15px 0 0;
	background-position:0 -50px;
}

/* メニュー（制作実績） */
#menu5 a{
	background:#333 url(../image/menu/menu_05.png);
	margin:0 15px 0 0;
}

#menu5 a:hover{
	background-position:0 -50px;
}

#menu5-off a{
	background:#333 url(../image/menu/menu_05.png);
	margin:0 15px 0 0;
	background-position:0 -50px;
}

/* メニュー（よくある質問） */
#menu6 a{
	background:#333 url(../image/menu/menu_06.png);
	margin:0 15px 0 0;
}

#menu6 a:hover{
	background-position:0 -50px;
}

#menu6-off a{
	background:#333 url(../image/menu/menu_06.png);
	margin:0 15px 0 0;
	background-position:0 -50px;
}

/* メニュー（コクア・デザイン・オフィスとは） */
#menu7 a{
	background:#333 url(../image/menu/menu_07.png);
}

#menu7 a:hover{
	background-position:0 -50px;
}

#menu7-off a{
	background:#333 url(../image/menu/menu_07.png);
	background-position:0 -50px;
}




/* ページナビゲーション */

#page_navi_area{
	width:100%;
	height:22px;
	margin:0;
	padding:0;
	border-bottom:1px solid #CCCCCC;
	background-color:#DFDFDF;
}

#page_navi{
	width:860px;
	height:22px;
	margin:0 auto;
	padding:0;
}

#page_navi ul{
	margin:0;
	padding:5px 0 0 0;
	list-style:none;
}

#page_navi li{
	margin:0 12px 0 0;
	font-size:75%;
	color:#333;
	text-align:left;
	float:left;
}

#navi_off{
	background:#DFDFDF url(../image/icon/navi_mk.png) no-repeat right top;
	padding:0 35px 0 0;
}

#navi_on{
	background:#DFDFDF url(../image/icon/navi_mk_on.png) no-repeat right top;
	padding:0 12px 0 0;
}


#page_navi:after{
	content:"."; 
	display: block;
	height:0px;
	clear:both;
	line-height:
	visibility:hidden;
	color:#FFF;
}

#page_navi{
	overflow: hidden;
}   
    
* html #page_navi{
    height: 1%;   
}



/* エリアコントロール */

#main{
	width:860px;
	margin:10px auto 0 auto;
	padding:0;
}

#left{
	width:640px;
	margin:0;
	padding:0;
	float:left;
}

#right{
	width:210px;
	margin:0;
	padding:0;
	float:right;
}

#main:after{
	content:"."; 
	display: block;
	height:0px;
	clear:both;
	line-height:
	visibility:hidden;
	color:#FFF;
}

#main{
	overflow: hidden;
}   
    
* html #main{
    height: 1%;   
}


/* 右側バナー */


ul#r_bnr{
	margin:0;
	padding:10px 0 0 10px;
	list-style:none;
}

#r_bnr li{
	margin:0 0 10px 0;
	padding:0;
	text-align:left;
}

#r_bnr li a{
	width:200px;
	padding:0;
	display:block;
	text-indent:-9999px;
	text-decoration:none;
	overflow:hidden;
}


/* 右側バナー（お見積） */
#r_menu1 a{
	background:#FFF url(../image/menu/r_menu_01.png);
	height:80px;
}

#r_menu1 a:hover{
	background-position:0 -80px;
}

/* 右側バナー（コスト一覧） */
#r_menu2 a{
	background:#FFF url(../image/menu/r_menu_02.png);
	height:80px;
}

#r_menu2 a:hover{
	background-position:0 -80px;
}



/* 右側バナー（代表ブログ） */
#r_menu3 a{
	background:#FFF url(../image/menu/r_menu_03.jpg);
	height:90px;
}

#r_menu3 a:hover{
	background-position:0 -90px;
}

/* 右側バナー（無料相談窓口） */
#r_menu4 a{
	background:#FFF url(../image/menu/r_menu_04.png);
	height:80px;
}

#r_menu4 a:hover{
	background-position:0 -80px;
}


/* 右側バナー（ツイッター） */
#r_menu5 a{
	background:#FFF url(../image/menu/r_menu_05.png);
	height:34px;
}

#r_menu5 a:hover{
	background-position:0 -34px;
}











/* ページトップ */

#pageup_area{
	width:100%;
	height:30px;
	margin:15px auto 0 auto;
	padding:0;
	border-bottom:1px solid #666666;
}

#pageup{
	width:860px;
	margin:0 auto;
	padding:0;
}

#pageup p{
	margin:0;
	padding:8px 0 0 0;
	text-align:right;
}





/* フッター */

#footer{
	width:860px;
	margin:10px auto 0 auto;
	padding:0;
}

#foot_left{
	width:550px;
	margin:0;
	padding:0;
	float:left;
}

#foot_right{
	width:300px;
	margin:0;
	padding:0;
	float:right;
}

#foot_left ul{
	margin:0;
	padding:25px 0 0 0;
	list-style:none;
}

#foot_left li{
	margin:0 12px 0 0;
	padding:0 0 0 16px;
	font-size:78%;
	background:#FFFFFF url(../image/icon/foot_mk.png) no-repeat left top;
	float:left;
}

#foot_left p{
	margin:0;
	padding:45px 0 15px 0;
	text-align:left;
}


#foot_right p{
	margin:0;
	padding:5px 0 15px 0;
	text-align:right;
}



#footer:after{
	content:"."; 
	display: block;
	height:0px;
	clear:both;
	line-height:
	visibility:hidden;
	color:#FFF;
}

#footer{
	overflow: hidden;
}   
    
* html #footer{
    height: 1%;   
}








/* リンクコントロール */

a{
	color:#006699;
	text-decoration:underline;
}

a:visited{
	color:#006699;
	text-decoration:underline;
}

a:active{
	color:#006699;
	text-decoration:underline;
}	

a:hover{
	color:#FF6600;
	text-decoration:underline;
}





/* 画像フロートコントロール */

.photo_l{
	margin:0;
	padding:0 15px 0 0;
	float:left;
}

.photo_r{
	margin:0;
	padding:0 0 0 15px;
	float:right;
}



.clear{
	clear:both;
	margin:0;
	padding:0;
	text-indent:-9999px;
	font-size:0;
	height:0;
}



.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
} /*IE7以外のモダンブラウザ向け*/

.clearfix{display:inline-block;} /*IE7およびMacIE5向け*/

/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/ /*IE6以前向け*/