@charset "utf-8";

#body {
	color: #F2F2F2;
}

#base_box {
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	height: 763px;
	width: 810px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
}


/* 基本骨格 ============================================================================== */

/* ヘッダー ======================================== */
#header {
	background-image: url(../img/header_bg.gif);
	background-repeat: no-repeat;
	height: 112px;
	width: 810px;
	background-position: left top;
}

#catch {
	color: #FFF;
	height: 22px;
	width: 170px;
	margin-left: 620px;
	padding-top: 10px;
    text-align: right;
}

#katze {
	height: 45px;
	width: 320px;
	margin-top: -6px;
	margin-left: 65px;
}

.katze {
	height: 45px;
	width: 320px;
	background-image: url(../img/katze_logo.gif);
	background-repeat: no-repeat;
	display: block;
}

#contact_hed {
	height: 10px;
	width: 150px;
	margin-left: 640px;
	margin-top: -14px;
}

#contact_hed a {
	color: #F36;
	text-decoration: none;
	font-weight: bold;
}


/* メインエリア ======================================== */
#main {
	background-image: url(../img/main_bg.gif);
	background-repeat: repeat-y;
	height: 610px;
	width: 810px;
}

/* メニューバー */
#menu_box {
	width: 810px;
	height: 55px;
}

#menu {
	width: 790px;
	height: 55px;
	list-style-type: none;
	margin-top: -11px;
	margin-left: -32px;
}

#menu li{
	list-style:none;
	width: 158px;
	height: 55px;
	float: left;
}

#menu a{
	height: 45px;
	display: block;
	background-image: url(../img/btn_bg.gif);
	overflow: hidden;
	text-decoration: none;
	background-repeat: no-repeat;
	font-size: 11px;
	color: #635B8A;
	padding-top: 10px;
	padding-left: 20px;
}

a.menu_roll{
    background-position:0px 0px;
}
a:hover.menu_roll{
    background-position:0px -55px;
}

#menu h2 {
	color: #666;
	font-size: 14px;
	font-weight: bold;
	margin-top: 6px;
}


/* ========== コンテンツ ========== */
#content {
	height: 568px;
	width: 810px;
}

/*コンテンツ【左】 ==================== */	
#cont_left {
	float: left;
	width: 200px;
	margin-top: 10px;
	height: 520px;
	margin-left: 9px;
}
	
#cont_left h2 {
	font-size: 12px;
	color: #FFF;
	width: 200px;
	height: 34px;
	margin-top: 0px;
	padding-top: 13px;
	background-image: url(../img/navi_title_bg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 58px;
}

/* 左コンテンツボタン */
#co_left {
	width: 200px;
	height: 34px;
	font-size: 12px;
	list-style-type: none;
	margin-top: -23px;
	margin-left: -40px;
}

#co_left li{
	list-style-type: none;
}

#co_left a{
	display: block;
	width: 200px;
	height: 25px;
	padding-top: 9px;
	overflow: hidden;
	text-decoration: none;
	background-repeat: no-repeat;
	text-align: center;
	background-image: url(../img/left_br.jpg);
	color: #666;
}

a.co_shinki{
    background-position:0px 0px;
}
a:hover.co_shinki{
    background-position:0px -34px;
}

a.co_kizon{
    background-position:0px 0px;
}
a:hover.co_kizon{
    background-position:0px -34px;
}

a.co_hosyu{
    background-position:0px 0px;
}
a:hover.co_hosyu{
    background-position:0px -34px;
}

/* お問い合せ */
#contact {
	width: 200px;
	height: 80px;
	text-align: center;
	margin-top: 63px;
	padding-top: 15px;
}

#contact_link{
	width: 200px;
	height: 80px;
}

a.contact_link{
	width: 200px;
	height: 80px;
	background-image: url(../img/contact_bg.gif);
	background-repeat: no-repeat;
	display: block;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
}

a.contact_link{
    background-position:0px 0px;
}
a:hover.contact_link{
    background-position:0px -80px;
}

/*
#contact h3 {
	color: #C30;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 10px;
}
*/

#contact p {
	color: #333;
	line-height: 14px;
	margin-top: 40px;
}

#Twitter {
	height: 250px;
	width: 200px;
	margin-top: 10px;
}

/* フッター ============================= */
.footer {
	height: 40px;
	width: 810px;
	background-image: url(../img/footer_bg.gif);
	background-repeat: no-repeat;
	margin-top: 0px;
}

.footer h3 {
	color: #FFF;
	margin-top: 0px;
	padding-top: 8px;
	padding-right: 20px;
	text-align: right;
	font-weight: normal;
}

/* 基本骨格終わり ====================================================================== */



/* コンテンツ【右】 ==================== */
#cont_right {
	float: right;
	margin-right: 34px;
	width: 530px;
	margin-top: 10px;
	height: 520px;
}

/* キャッチコピー */
#campaign_ttl {
	width: 530px;
	height: 39px;
	background-image: url(../img/title_01_bg.gif);
	background-repeat: no-repeat;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	padding-top: 21px;
	color: #666;
}

/* 組織理念 */
#company_information {
	width: 530px;
	height: 160px;
	margin-top: 6px;
}

#company_info_photo {
	background-image: url(../img/img_01.gif);
	background-repeat: no-repeat;
	border: 1px solid #333;
	float: left;
	height: 140px;
	width: 190px;
	margin-top: 10px;
}

.company_info_text {
	width: 335px;
	height: 140px;
	text-align: center;
	float: right;
	line-height: 14px;
	margin-top: 10px;
}

.company_info_text h3 {
	color: #635B8A;
	font-size: 14px;
	margin-top: 22px;
	margin-bottom: -8px;
}


/* お知らせエリア */
#information {
	width: 530px;
	height: 50px;
	margin-top: 10px;
	margin-left: 0px;
	overflow: auto;
}

#information ul {
	list-style-type: none;
	padding-top: 0px;
	margin-top: 0px;
	line-height: 16px;
	padding-left: 20px;
}


/* 製作料金ページ ======================================== */
#price_box {
	height: 325px;
	width: 530px;
	margin-top: 10px;
	overflow: auto;
}

/* 注意 */
#attention {
	line-height: 14px;
	text-align: left;
	height: 85px;
	width: 510px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-left: 20px;
}

/* タイトルバー【青色】ショート */
.title_blue2 {
	width: 510px;
	height: 30px;
	margin-top: 10px;
	background-image: url(../img/h_bg_04.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.title_blue2 h3 {
	font-size: 13px;
	color: #FFF;
	margin-top: 8px;
	margin-left: 20px;
	float: left;
}

.title_blue2 h4 {
	font-size: 10px;
	color: #FFF;
	margin-top: 10px;
	margin-right: 15px;
	font-weight: normal;
	float: right;
}

/* エンドバー【青色】ショート */
.title_blue2_end {
	width: 510px;
	height: 5px;
	background-image: url(../img/h_bg_05.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

/* 料金項目 */
#price {
height: 60px;
width: 490px;
margin-left: 0px;
padding-top: 0px;
padding-left: 20px;
margin-bottom: 10px;
}

#price dl {
margin-top: 0px;
margin-left: 0px;
line-height: 18px;
}

#price dt {
width: 90px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #669;
color: #F36;
float: left;
}

#price dd {
width: 350px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #669;
margin-left: 84px;
} 

/* 特徴解説 */


#feature {
    height: 45px;
    width: 530px;
}

#feature_pic {
	width: 46px;
	height: 20px;
	background-image: url(../img/point_bg.gif);
	background-repeat: no-repeat;
	float: left;
	font-size: 14px;
	font-weight: bold;
	padding-left: 34px;
	padding-top: 10px;
	color: #669;
}

#feature_text {
	float: right;
	height: 35px;
	width: 440px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
    line-height: 14px;
}

/* 製作実績ページ ======================================== */
#results_box {
	height: 470px;
	width: 530px;
	margin-top: 10px;
	overflow: auto;
}

table.results_sample {
	border-collapse:collapse;
	empty-cells:show;
	height: 200px;
	width: 500px;
	margin-top: 10px;
}

.results_sample p {
	font-weight: bold;
	font-size: 14px;
	color: #669;
	text-decoration: none;
}

.results_sample a {
	font-weight: normal;
	font-size: 12px;
	color: #F36;
	text-decoration: none;
}

.results_sample th {
	width: 200px;
	height: 200px;
	font-weight: normal;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #669;
}

.results_sample td {
	width: 280px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #669;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #669;
	text-align: center;
	line-height: 16px;
}


/* 組織概要ページ ======================================== */

#company_box {
	height: 230px;
	width: 400px;
	margin-top: 30px;
	margin-left: 65px;
}

#company_img {
	background-image: url(../img/katze_logo02.gif);
	background-repeat: no-repeat;
	height: 63px;
	width: 180px;
	margin-top: 10px;
	margin-left: 105px;
	margin-bottom: 30px;
}

table.company_info {
	text-align: left;
	height: 20px;
	width: 320px;
	margin-top: 2px;
	margin-left: 45px;
}

.company_info th {
	width: 100px;
	font-weight: normal;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #669;
	text-align: left;
}

.company_info td {
	width: 220px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #669;
}



/* 汎用ソース ================================================================================ */

/* 項目バー */
.content_title {
	width: 530px;
	background-image: url(../img/title_02_bg.gif);
	background-repeat: no-repeat;
	height: 40px;
}

.content_title h3 {
	font-size: 13px;
	margin-top: 14px;
	margin-left: 20px;
	float: left;
	color: #666;
}

.content_title h4 {
	font-size: 10px;
	margin-top: 16px;
	margin-right: 15px;
	font-weight: normal;
	float: right;
	color: #666;
}


/* タイトルバー【青色】 */
.title_blue {
	width: 530px;
	height: 30px;
	margin-top: 10px;
	background-image: url(../img/h_bg_01.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.title_blue h3 {
	font-size: 13px;
	color: #FFF;
	margin-top: 8px;
	margin-left: 20px;
	float: left;
}

.title_blue h4 {
	font-size: 10px;
	color: #FFF;
	margin-top: 10px;
	margin-right: 15px;
	font-weight: normal;
	float: right;
}

/* エンドバー【青色】 */
.title_blue_end {
	width: 530px;
	height: 5px;
	background-image: url(../img/h_bg_02.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

/* タイトルバー【黄色】 */
.title_yellow {
	width: 530px;
	height: 30px;
	margin-top: 10px;
	background-image: url(../img/h_bg_03.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

.title_yellow h3 {
	font-size: 13px;
	color: #666;
	margin-top: 8px;
	margin-left: 20px;
	float: left;
}

.title_yellow h4 {
	font-size: 10px;
	color: #666;
	margin-top: 10px;
	margin-right: 15px;
	font-weight: normal;
	float: right;
}

#space {
    height: 10px;
    width: 530px;
    margin-bottom: 2px;
}

#space2 {
height: 10px;
width: 510px;
margin-bottom: 2px;
} 

/* 汎用ソース終わり ========================================================================== */



/* ベース共通ページ用パーツ ======================================== */

/* コンセプトページ用 */
#concept_img {
	background-image: url(../img/img_02.gif);
	background-repeat: no-repeat;
	height: 290px;
	width: 530px;
	margin-top: 10px;
}

/* 新規作成ページ用 */
#concept_img_shinki {
	background-image: url(../img/img_03.jpg);
	background-repeat: no-repeat;
	height: 290px;
	width: 530px;
	margin-top: 10px;
}

/* リニューアルページ用 */
#concept_img_kizon {
	background-image: url(../img/img_04.jpg);
	background-repeat: no-repeat;
	height: 290px;
	width: 530px;
	margin-top: 10px;
}

/* 保守管理ページ用 */
#concept_img_hosyu {
	background-image: url(../img/img_05.jpg);
	background-repeat: no-repeat;
	height: 290px;
	width: 530px;
	margin-top: 10px;
}


/*【高さ30】*/
.concept_title {
	width: 510px;
	height: 30px;
	margin-top: 10px;
	padding-left: 20px;
	padding-top: 20px;
}

.concept_title h2 {
	font-size: 14px;
	color: #669;
	line-height: 16px;
	margin-top: 0px;
	margin-left: 0px;
}

/*【高さ40】*/
.concept_title2 {
	width: 510px;
	height: 40px;
	margin-top: 10px;
	padding-left: 20px;
	padding-top: 10px;
}

.concept_title2 h2 {
	font-size: 14px;
	color: #669;
	line-height: 16px;
	margin-top: 0px;
	margin-left: 0px;
}


#concept_text {
	width: 510px;
	height: 100px;
	margin-top: 10px;
	line-height: 16px;
	padding-left: 20px;
}