@charset "utf-8";
/*
Theme Name: ブログのホームページ屋さん
Theme URI: http://www.kameleon.jp/
Description: 株式会社カメレオン ブログのホームページ屋さん
Author: 株式会社カメレオン
*/

/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #ECE9D8;
	font: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 12px;
	line-height: 1.2em;
	text-align: center;
}

/****************共通項目****************/

a {
	/*overflow: hidden;*/
}

img {
	vertical-align: top;
}

p {
	line-height: 1.5em;
	font-size: 14px;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.text-right {
	text-align: right;
}

.cboth {
	clear: both;
}

.bold {
	font-weight: bold;
}


/****************レイアウト要素****************/

#wrapper,
#header,
#top-menu-box,
#main,
#footer {
	width: 900px;
}

#wrapper {
	text-align: left;
	margin: 0 auto;
}

/****************ヘッダー部分****************/

#header {
	height: 120px;
}

#header-top {
	width: 864px;
	height: 88px;
	margin: 0 auto;
}

h1#title a {
	width: 529px;
	height: 88px;
	display: block;
	text-indent: -9999px;
	background: url(./images/common/title.gif) no-repeat;
}

p#tel {
	width: 144px;
	height: 48px;
	background: url(./images/common/tel.gif);
	display: block;
	text-indent: -9999px;
	margin-top: 16px;
}

/****************ヘッダーメニュー部分****************/

#top-menu-box {
	height: 31px;
	padding-top:1px;
	background: url(./images/common/top_menu_bg.gif) no-repeat;
}

ul#top-menu {
	margin-left: 382px;
	margin-top: 8px;
	list-style-type: none;
}

ul#top-menu li {
	float: left;
}

ul#top-menu li a {
	text-indent: -9999px;
	display: block;
	height: 12px;
	background-repeat: no-repeat;
}

.top-menu01 {
	background: url(./images/common/menu_home.gif);
	width: 39px;
	margin-right: 25px;
}
.top-menu02 {
	background: url(./images/common/menu_what.gif);
	width: 139px;
	margin-right: 22px;
}
.top-menu03 { 
	background: url(./images/common/menu_price.gif);
	width: 65px;
	margin-right: 16px;
}
.top-menu04 {
	background: url(./images/common/menu_portfolio.gif);
	width: 52px;
	margin-right: 17px;
}
.top-menu05 {
	background: url(./images/common/menu_inquiry.gif);
	width: 52px;
	margin-right: 22px;
}
.top-menu06 {
	background: url(./images/common/menu_application.gif);
	width: 52px;
}

/*#main-image-box {
	width: 900px;
	height: 200px;	
}
*/

/****************コンテンツ部分****************/

#main {
	background: url(./images/common/bg.gif) repeat-y;
}

/****************左メニュー部分****************/

#sidebar {
	float: left;
	width: 190px;
	margin:0 20px 0 15px;
	display: inline;
}

p#favourite a {
	width: 124px;
	height: 15px;
	display: block;
	text-indent: -9999px;
	background: url(./images/common/favourite.gif) no-repeat;
	margin-top: 6px;
	margin-bottom: 8px;
}

ul#left-menu li {
	list-style-type: none;
	margin-bottom: 5px;
}

ul#left-menu li a {
	width: 190px;
	height: 60px;
	display: block;
	text-indent: -9999px;
}

.left-menu01 {
	background: url(./images/common/left_menu_flow.gif) no-repeat;
}
.left-menu02 {
	background: url(./images/common/left_menu_reason.gif) no-repeat;
}
.left-menu03 {
	background: url(./images/common/left_menu_link.gif) no-repeat;
}
.left-menu04 {
	background: url(./images/common/left_menu_demo.gif) no-repeat;
}

#inq-box {
	width: 190px;
	height: 270px;
	background: url(./images/common/left_menu_form.gif) no-repeat;
	margin-bottom: 15px;
}

#inq-position-box {
	padding-left: 25px;
	padding-top: 28px;
}

#inq-position-box input {
	width: 150px;
	margin: 5px 0;
}
#inq-position-box textarea {
	width: 150px;
	height: 50px;
	margin: 5px 0 0;
	font-size: 12px;
	line-height: normal;
}

#inq-position-box .button {
	width: 50px;
}


ul#left-menu-bottom li {
	margin-left: 15px;
	margin-bottom: 5px;
}




/****************コンテンツ右部分****************/

#contents {
	float: left;
	width: 660px;
	line-height: 1.3em;
	font-size: 14px;
}

#contents div.text {
	padding: 5px 1em;
}

h2.page-title {
	background: url(./images/common/page_title.gif) no-repeat;
	width: 624px;
	height: 27px;
	padding: 3px 0 0 15px;
	margin: 10px 0 0 0;
	clear: both;
	font-size: 16px;
}
#contents h3 {
	margin: 20px 0 0 0;
}

#contents img.alignleft {
	float: left;
}

#contents img.alignright {
	float: right;
}

/*#contents div.text p {
	font-size: 14px;
	line-height: 1.5em;
}*/

#contents div.post-date {
	text-align: right;
}

/* ブログのホームページ屋さんとは */
#bloghp {
	margin: 0 0 30px 0;
}

#bloghp h3 {
	display: block;
	text-indent: -9999px;
	height: 21px;
}

#bloghp h3.subTitle01 {	background: url(images/bloghp/subTitle01.gif) no-repeat; width: 561px;}
#bloghp h3.subTitle02 {	background: url(images/bloghp/subTitle02.gif) no-repeat; width: 277px;}
#bloghp h3.subTitle03 {	background: url(images/bloghp/subTitle03.gif) no-repeat; width: 404px;}
#bloghp h3.subTitle04 {	background: url(images/bloghp/subTitle04.gif) no-repeat; width: 133px;}
#bloghp h3.subTitle05 {	background: url(images/bloghp/subTitle05.gif) no-repeat; width: 131px;}
#bloghp h3.subTitle06 {	background: url(images/bloghp/subTitle06.gif) no-repeat; width: 154px;}
#bloghp h3.subTitle07 {	background: url(images/bloghp/subTitle07.gif) no-repeat; width: 322px;}
#bloghp h3.subTitle08 {	background: url(images/bloghp/subTitle08.gif) no-repeat; width: 199px;}
#bloghp h3.subTitle09 {	background: url(images/bloghp/subTitle09.gif) no-repeat; width: 153px;}
#bloghp h3.subTitle10 {	background: url(images/bloghp/subTitle10.gif) no-repeat; width: 159px;}


#bloghp p.featureText {
	margin: 5px 0 0 20px;
}

/* 料金 */
#charge {
}
#charge h3 {
	display: block;
	text-indent: -9999px;	
	width: 506px;
	margin: 15px auto;
}
#charge h3.chargeAplan { background: url(images/charge/charge_A.jpg) no-repeat; height: 108px;	}
#charge h3.chargeBplan { background: url(images/charge/charge_B.jpg) no-repeat; height: 83px;	}
#charge h3.chargeCplan { background: url(images/charge/charge_C.jpg) no-repeat; height: 83px;	}


/* お問い合わせ */
table#inquiry-form {
	margin: 15px 0 20px 0;
}

table#inquiry-form th {
	padding: 10px 10px 10px 5px;
	text-align: right;
	border-right: 5px solid #EF2436;
	width: 150px;
	background-color: #9EC60E;
	color: #000000;
}

table#inquiry-form td {
	padding: 10px 5px;
	border-bottom: 1px dotted #EF2436;
}

p.button {
	width: 150px;
	margin: 0 auto;
}
/* 申し込み */
table#subscription-table {
	margin: 15px 0 20px 0;
}

table#subscription-table th {
	padding: 10px 10px 10px 5px;
	text-align: right;
	border-right: 5px solid #25A5BA;
	width: 150px;
	background-color: #FCB7E3;
}

table#subscription-table td {
	padding: 10px 5px;
	border-bottom: 1px dotted #25A5BA;
}

/****************フッター部分****************/

#footer {
	background: url(./images/common/footer_bg.gif) no-repeat;
	padding-top: 12px;
}

#footer img {
	margin-right: 8px;
	float: left;
}

#footer-text-box {
	margin-top: 8px;
	width: 780px;
	float: left;
	font-size: 10px;
}

#footer-text-box p {
	margin-bottom: 5px;
	font-size: 10px;
}

.footer-text {
	color: #EF2436;
}


/****************フッター部分****************/


/****************コメント****************/
div.com {
	padding-left: 3em;
	margin: 1em 0;
}
/****************コメント****************/


/****************導入の流れ****************/

.flow-box-row {
	width: 632px;
	height: 210px;
}

.flow-box-right {
	width: 180px;
	height: 161px;
	padding-right: 46px;
	background: url(images/flow/arrow-right.gif) right center no-repeat;
}

.flow-box-left {
	width: 180px;
	height: 161px;
	padding-left: 46px;
	background: url(images/flow/arrow-left.gif) left center no-repeat;
}

.flow-box-down {
	width: 180px;
	height: 161px;
	padding-bottom: 49px;
	background: url(images/flow/arrow-down.gif) left bottom no-repeat;
}

.flow-box-end {
	width: 180px;
	height: 161px;
}

.flow-box-row p {
	text-indent: -9999px;
	background-repeat: no-repeat;
	width: 180px;
	height: 161px;
}


p.flow-text1 {
	background-image: url(images/flow/step1.gif);
}


p.flow-text2 {
	background-image: url(images/flow/step2.gif);
}


p.flow-text3 {
	background-image: url(images/flow/step3.gif);
}


p.flow-text4 {
	background-image: url(images/flow/step4.gif);
}


p.flow-text5 {
	background-image: url(images/flow/step5.gif);
}


p.flow-text6 {
	background-image: url(images/flow/step6.gif);
}


p.flow-text7 {
	background-image: url(images/flow/step7.gif);
}


p.flow-text8 {
	background-image: url(images/flow/step8.gif);
}


p.flow-text9 {
	background-image: url(images/flow/step9.gif);
}

/****************制作実績****************/

.work-box {
	width: 630px;
}

.work-box .inner {
	width: 205px;
	float: left;
	margin: 20px 5px 0 0;
}

.work-box .inner img  {
	border: none;
}

.work-box .inner p {
	font-size: 12px;
	height: auto;
}