@charset "UTF-8";
/*design shop.jp
basic.css

---------------------------------
-----------------------------------
#wrapper
	└#heaedr
	└#container
		└#content
		└#side
	└#footer
------------------------------------
00.default
01.link
02.font size
03.common style
10.wrapper
11.header
12.topicpath
13.container
14.content
15.side
16.footer
20.top
30.Dr.web
40.ホームページ制作
41.ベーシックプラン
42.ビジネスプラン
43.ホームページ制作の流れ
44.ホームページ制作料金
50.制作実績
60.SEO実績
70.印刷・看板
80.company
90.contact
100.disctionary
110.個人情報
----------------------------------*/

/*00.default
-----------------------------------*/
body,h1, h2, h3, h4, h5, h6,
p, pre, blockquote,form,input,textarea,fieldset,
ul, ol, dl, li,dt,dd,address,caption {
    margin: 0;
    padding: 0;
}

table{
	border-collapse:collapse;
	}
p{
	margin-bottom:1em;
	}
	
body{
	color: #333;
	font-size:75%;
	line-height:1.5;
	text-align:center;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
	background:#fff url(../img/common/bg_body.jpg) repeat-x;
}
table{
	font-size:1em;
	line-height:1.5;
}
address,em,caption,th{	
	font-style:normal;
	font-weight:normal;
	text-align:left;
	}
img{
	vertical-align:bottom;
	border:none;
	}
	
li{	list-style-type:none;	}


/*01.link
-----------------------------------*/
a{	color:#0067cd;	}
a:hover,a:active{	color:#009de6;	}
a:visited{	color:#1f4799;	}


/*02.font size
-----------------------------------*/
.txt-10px{	font-size:84%;	}/*10px*/
.txt-11px{	font-size:92%;	}/*11px*/
.txt-13px{	font-size:108%;	}/*13px*/
.txt-14px{	font-size:117%;	}/*14px*/
.txt-16px{	font-size:133%;	}/*16px*/
.txt-18px{	font-size:150%;	}/*18px*/
.txt-20px{	font-size:167%;	}/*20px*/
.txt-22px{	font-size:183%;	}/*22px*/
.txt-24px{	font-size:200%;	}/*24px*/


/*03.common
-----------------------------------*/
/*clearfixハック*/
.clearfix:after {
	content: ""; 
	display: block; 
	clear: both; 
}
.clearfix {display: inline-block;}
/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.textarea:after {
	content: ""; 
	display: block; 
	clear: both; 
}
.textarea {display: inline-block;}
/* Hides from IE-mac ¥*/
* html .textarea {height: 1%;}
.textarea {display: block;}
/* End hide from IE-mac */

/*color*/
.red{	color:#F00;	}
.blue{	color:#0067cd;	}

/*style*/
.float-right{
	float:right;
	margin:0 0 1em 1em;
}
.float-left{
	float:left;
	margin:0 1em 1em 0;
}
.align-center{
	text-align:center;
}
.align-left{
	text-align:left;
}

ul.basic-list li{
	margin:1px 0;
	padding-left:14px;
	background:url(../img/common/icon_bullet.gif) left 3px no-repeat;
}
.go-top{
	text-align:right;
}
.go-top a{
	padding:2px 0 2px 15px;
	background:url(../img/common/icon_arrow-top.gif) left center no-repeat;
}
.link-arrow{
	padding:2px 0 2px 18px;
	background:url(../img/common/icon_box-arrow.gif) left center no-repeat;
}
ul#category-navi{
	margin-bottom:1em;
}
ul#category-navi li{
	padding:2px 15px 2px 17px;
	display:inline;
	background:url(../img/common/icon_box-arrow.gif) left center no-repeat;
}


/*10.wrapper
-----------------------------------*/
#wrapper{
	margin:0 auto;
	width:900px;
	text-align:left;
	background:#fff;
	}


/*11.headre
-----------------------------------*/
#header{
	position:relative;
	padding-top:10px;
	height:90px;/*100px*/
	background:url(../img/common/bg_header.jpg) no-repeat;
	}
#header h1{
	font-weight:normal;
	font-size:84%;
}
#header h1 a{
	color:#333;
}
#top-contact{
	position:absolute;
	right:0;
	top:10px;
}
	

/*12.topicpath
-----------------------------------*/
ul#topicpath{
	margin:0 0 10px 5px;
	line-height:1;
	}
ul#topicpath li{
	display:inline;
	margin:0;
	padding:0 3px 0 10px;
	line-height:1;
	font-size:92%;
	background:url(../img/common/icon_topicpath.gif) left center no-repeat;
	}
	
	
/*13.container
-----------------------------------*/
#container{
	margin-top:10px;
	}


/*14.content
-----------------------------------*/
#flash{
	margin-bottom:1em;
}

#content{
	float:right;
	width:680px;
}
#content h2{
	margin-bottom:0.5em;
}
#content h3{
	padding-left:5px;
	font-size:117%;	/*14px*/
	letter-spacing:0.1em;
	margin-bottom:0.5em;
	color:#0067cd;
	line-height:1.2;
	border-left:3px #a0cc47 solid;
}
#content h3.none{
	padding:0;
	font-size:117%;	/*14px*/
	letter-spacing:0.1em;
	margin-bottom:0.5em;
	border-left:none;
}
#content h4{
	font-size:108%;	/*13px*/
	letter-spacing:0.1em;
	margin-bottom:0.3em;
}


/*15.side
-----------------------------------*/
#side{
	float:left;
	padding:5px;
	width:190px;/*200px*/
	background:url(../img/common/bg_side.jpg) repeat-x;
	}

/*navi*/
#navi ul li{
	margin:0;
	padding:0;
}
#navi{
	margin-bottom:1.5em;
}

#w3c {
font-size:92%;
margin-top:1.5em;
}
#w3c ul {
margin-bottom:0.2em;
text-align:center;
}
#w3c ul li{
	display:inline;
}


/*16.footer
-----------------------------------*/
#footer{
	clear:both;
	margin-top:5em;
	padding:30px 0;
	background:#02b0e6 url(../img/common/bg_footer.jpg) repeat-x;
	}
#footer ul{
	width:800px;
	margin:0 auto 1em;
	font-size:92%;
}
#footer ul li{
	display:inline;
	padding:0 3px;
	line-height:2;
}
#footer ul li a{
	color:#fff;
	white-space:nowrap;
}

#catch-copy h2{
	margin-bottom:1em;
}


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

/*20.top
-----------------------------------*/
#catch-copy{
	margin-bottom:1em;
	min-height:160px;
	background:url(../img/top/bg_catch-copy.jpg) right bottom no-repeat;
}
#catch-copy ul li{
	margin-bottom:0.5em;
	padding-left:15px;
	background:url(../img/common/icon_arrow-big.gif) left center no-repeat;
}
ul#top-bnr{
	margin-bottom:1em;
}
ul#top-bnr li{
	float:left;
	display:inline;
	margin:0 10px 0 0;
}

#topics{
	margin-bottom:1em;
}
#topics dl{
	padding:0.5em;
	margin-bottom:0.5em;
	border-bottom:1px #ccc dotted;
}

#topics dl dt{
	float:left;
}
#topics dl dd{
	margin:0 0 0 7em;
}

ul#top-side-plan{
	margin-bottom:10px;
}
ul#top-side-plan li{
	margin-bottom:5px;
}

#top-form{
	margin-bottom:5px;
	background-color:#f3fcff;
	border:1px #17b2e6 solid;
}
#top-form th,
#top-form td{
	padding:5px 5px;
	border-bottom:1px #ccc dotted;
}
#top-form em{
	font-size:92%;
	color:#F00;
}
#top-form input,
#top-form textarea{
	padding:2px;
	border:1px #17b2e6 solid;
}

#pr{
	margin-top:1em;
}
#pr ul li{
	display:inline;
	padding:2px 3px;
	font-size:83%;
}
#pr ul li a{
}

/*30.advice
-----------------------------------*/
ul.case-list{
	margin-bottom:1.5em;
}
ul.case-list li{
	margin:2px 0;
	padding-left:17px;
	background:url(../img/advice/icon_comment.gif) left center no-repeat;
}
#advice-outline{
	padding:0 0 1em 0;
	margin:1em 0 2em 0;
	border-bottom:1px #aaa dotted;
}

/*clearfix*/
.dr:after,
.visiter:after{
	content: ""; 
	display: block; 
	clear: both; 
}
.dr,visiter {display: inline-block;}
/* Hides from IE-mac \*/
* html .dr {height: 1%;}
* html .visiter {height: 1%;}
.dr, .visiter {display: block;}
/* End hide from IE-mac */

.dr, .visiter{
	margin-bottom:15px;
}
.dr img.icon{
	float:left;
}
.visiter img.icon{
	float:right;
}

.dr .speak{
	margin:0 80px 0 70px;
	padding-left:10px;
	background:url(../img/advice/bg_speak-dr.gif) left top no-repeat;
}
.dr .speak-ctt{
	padding:5px;
	border-bottom:1px #73020c solid;
	border-right:1px #73020c solid;
	border-top:1px #73020c solid;
	background-color:#fff;
}
.visiter .speak{
	margin:0 70px 0 80px;
	padding-right:10px;
	background:url(../img/advice/bg_speak-vister.gif) right top no-repeat;
}
.visiter .speak-ctt{
	padding:5px;
	border-bottom:1px #ccc solid;
	border-left:1px #ccc solid;
	border-top:1px #ccc solid;
	background-color:#fff;
}

ul#relative-list{
	margin:0 0 2em;
}
ul#relative-list li{
	margin:1px 0;
	padding-left:17px;
	background:url(../img/common/icon_box-arrow.gif) left 4px no-repeat;
}

#case-navi{
	margin-bottom:2em;
	padding:4px;
	clear:both;
	border:1px #ccc solid;
}
#navi-next{
	float:right;
}
#navi-prev{
	float:left;
}
	

/*40.ホームページ制作
---------------------------------------*/
#catch{
	margin:1em 0;
	padding:3px 0;
	font-size:117%;
	font-weight:bold;
	color:#0067cd;
	text-align:center;
	letter-spacing:0.1em;
	background:url(../img/common/bg_catch.gif);
}
#catch p{
	margin-bottom:0;
	padding:0.5em;
	background-color:#fff;
}

#sub-catch{
	font-weight:bold;
	font-size:108%;
	letter-spacing:0.1em;
}

/*比較表*/
#compare{	margin-bottom:2em;	}
#compare caption{
	font-weight:bold;
	margin:0 0 1em;
	padding-top:2em;
	font-size:117%;
	letter-spacing:0.2em;
	border-bottom:1px #ccc dotted;
}
#compare td.topic{
	padding:5px 5px;
	width:150px;
	text-align:left;
	color:#000;
	background:url(../img/web/bg_compare-td-topic.jpg) bottom repeat-x;
	}
#compare th{
	padding:0 5px 5px 5px;
	height:40px;
	text-align:center;
	vertical-align:bottom;
	font-weight:bold;
	letter-spacing:0.1em;
	border-right:1px #fff solid;
	background:url(../img/web/bg_compare-th.jpg) bottom repeat-x;
	}
#compare th.topic{
	text-align:left;
	background:url(../img/web/bg_compare-th-topic.jpg) bottom repeat-x;
	}
#compare td{
	height:40px;
	padding-top:5px;
	padding-bottom:5px;
	width:220px;
	text-align:center;
	line-height:1.2;
	border-right:1px #fff solid;
	background:url(../img/web/bg_compare-td.jpg) bottom repeat-x;
	}
#compare td.mainplan{
	color:#1a3366;
	width:200px;
	font-weight:bold;
	text-align:center;
	background:url(../img/web/bg_compare-td-plan.jpg) bottom repeat-x;
	}
#compare th.mainplan{
	padding:0;
	padding-bottom:10px;
	width:210px;
	font-size:12px;
	color:#1a3366;
	font-weight:bold;
	background:url(../img/web/bg_compare-th-plan.jpg) bottom repeat-x;
	}
#compare td div.align-left{
	padding:0 0 0 4px;
}
	
#plan-case dl{
	float:left;
	margin:0 5px;
	text-align:center;
	font-size:92%;
}
#plan-case dl dt{
	margin-bottom:3px;
	padding:4px;
	border:1px #ccc solid;
}


/*43.ホームページ制作の流れ
---------------------------------------*/
.step{
	padding:15px 0 30px 60px;
}
#step1{	background:url(../img/web/bg_step1.jpg) left top no-repeat;	}
#step2{	background:url(../img/web/bg_step2.jpg) left top no-repeat;	}
#step3{	background:url(../img/web/bg_step3.jpg) left top no-repeat;	}
#step4{	background:url(../img/web/bg_step4.jpg) left top no-repeat;	}
#step5{	background:url(../img/web/bg_step5.jpg) left top no-repeat;	}
#step6{	background:url(../img/web/bg_step6.jpg) left top no-repeat;	}
#step7{	background:url(../img/web/bg_step7.jpg) left top no-repeat;	}
#step8{	background:url(../img/web/bg_step8.jpg) left top no-repeat;	}


/*44.ホームページ制作料金
---------------------------------------*/
#price{
	margin-bottom:2em;
}
#price-left{
	float:left;
	width:325px;
	}
#price-right{
	float:right;
	width:325px;
	}
#price table{
	width:100%;
	margin-bottom:3px;
	}
#price table caption{
	padding:3px;
	font-weight:bold;
	color:#fff;
	background-color:#17b2e6;
	}

#price table{
	border-bottom:1px #ccc solid;
	}
#price table th,
#price table td{
	padding:5px 0;
	border-bottom:1px #aaa dotted;
	}
#price table th{
	padding-left:4px;
	}
#price table td{
	width:6em;
	padding-right:4px;
	text-align:right;
	}
#price p.txt11px{
	margin-bottom:3em;
	}	
#price table.mente td{
	padding-left:4px;
	width:15em;
	text-align:left;
	border:1px #ccc solid;
	}
#price table.mente th{
	border-left:1px #ccc solid;
	}


/*50.制作実績
---------------------------------------*/
dl#seo-explain{
	margin:10px 0;
	padding-bottom:10px;
	font-size:11px;
	border-bottom:1px #008AE6 dotted;
	}
dl#seo-explain dt{
	float:left;
	}
dl#seo-explain dd{
	margin:0 0 5px 95px;
	}
	
.case-table{
	margin-bottom:2em;
	}
.case-table dl dd a{
	font-weight:bold;
	letter-spacing:0.1em;
	}
.case-table dl dd.work{
	margin-bottom:10px;
	font-size:11px;
	}
.case-table dl dd.yahoo,
.case-table dl dd.google{
	padding:1px 0 1px 40px;
	font-size:92%;
	}
.case-table dl dd.yahoo{
	background:url(../img/case/icon_yahoo.gif) left center no-repeat;
	}
.case-table dl dd.google{
	background:url(../img/case/icon_google.gif) left center no-repeat;
	}
.case-table dl dd .time{
	font-size:83%;
	}
.case-table th, .case-table td{
	padding:20px 0 20px 5px;
	vertical-align:middle;
	border-bottom:1px #aaa dotted;
	}
.case-table th{
	padding-right:10px;
	width:90px;
	color:#000;
	font-weight:normal;
	vertical-align:top;
	}
.case-table td img{
	vertical-align:text-bottom;
	}	
.case-table dl dt img{
	margin:0 5px 5px 0;
	float:left;
	border:1px #ccc solid;
	}
.case-table dl dd{
	margin-left:170px;
	}


/*60.SEO対策実績
---------------------------------------*/
#seo-case-list{
	margin-bottom:1.5em;
	}
#seo-case-list thead td{
	padding:2px 7px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	background-color:#009ccb;
	}
#seo-case-list td,
#seo-case-list th{
	padding:3px 6px;
	font-size:12px;
	text-align:left;
	vertical-align:middle;
	border:1px #99d7ff solid;
	}	
#seo-case-list th{
	width:11em;
	background-color:#e5f5ff;
	}
#seo-case-list td.site-total{
	text-align:right;
	}	
	
#seo-case-list td.dot{
	border-bottom:1px #ccc solid;
	}


/*70.print
---------------------------------------*/
/*index list*/
.index-list{
	margin-top:1em;
	margin-bottom:3em;
	padding-top:1em;
	border-top:1px #16446D dotted;
	}
.index-list dl{
	margin-bottom:15px;
	}
.index-list dl dt{
	float:left;
	padding:3px;
	border:1px #ccc solid;
	}
.index-list dl dd{
	margin-left:110px;
	}
.index-list dl dd.category{
	margin-bottom:3px;
	font-weight:bold;
	font-size:108%;
	color:#0067cd;
	}

.contact-box{
	margin-bottom:3em;
}
.contact-box-head{
	padding:3px;
	text-align:center;
	font-weight:bold;
	letter-spacing:0.1em;
	background-color:#e6e6e6;
}
.contact-box ul{
	padding:0 0 5px 7px;
	border:1px #ccc solid;
}
.contact-box ul li{
	margin-right:5px;
	display:inline;
	float:left;
}


/*80.company index
---------------------------------------*/
#company-table{
	margin-bottom:30px;
	border-collapse:separate;
	border-spacing:1px 3px;
	}
#company-table td,
#company-table th{
	padding:5px;
	border-bottom:1px #aaa dotted;
	}
#company-table th{
	background-color:#f3fcff;
	}
	
#access-map{
	margin-bottom:15px;
	padding:4px;
	border:1px #ccc solid;
	}
#access-map iframe{
	width:670px;
	height:670px;
	}
	
/*82.経営理念*/
dl#ideology dt{
	float:left;
	font-size:117%;
	font-weight:bold;
	color:#0067cd;
}
dl#ideology dd{
	margin:0 0 2em 2em;
}

/*83.代表者紹介*/
.person{
	margin-top:1em;
	padding-bottom:1em;
	border-bottom:1px #ccc solid;
	}
.person:after {
	content: ""; 
	display: block; 
	clear: both; 
}
.person {display: inline-block;}
/* Hides from IE-mac ¥*/
* html .person {height: 1%;}
.person {display: block;}
/* End hide from IE-mac */

.person img{
	float:left;
	}
.person .p-content{
	margin:0 0 0 125px;
	}
.person .position{
	}
.comment{
	margin-top:5px;
	padding:2px;
	font-size:91%;
	background-color:#EFEFEF;
	}

/*90.contact
---------------------------------------*/
.mail-form{
	margin:15px 0 20px 0;
	padding:10px 3px;
	border:1px #ccc solid;
	}
.mail-form legend{
	font-weight:bold;
	font-size:14px;
	color:#0067cd;
	}
.mail-form em{
	color:#f33;
	}
.mail-form th, .mail-form td{
	padding:5px 0;
	font-size:12px;
	text-align:left;
	vertical-align:middle;
	border-bottom:1px #ccc solid;
	}
.mail-form th.none, .mail-form td.none{
	border-bottom:none;
	}
.mail-form th{
	padding-right:10px;
	}
.mail-form td input, .mail-form td textarea{
	padding:2px;
	border-left:1px #1b90c7 solid;
	border-top:1px #1b90c7 solid;
	border-bottom:1px #009de6 solid;
	border-right:1px #009de6 solid;
	}

.mail-form input.none{	border:none;	}
#form-bottom{
	margin:10px 0;
	text-align:center;
	}	
#form-bottom input{
	width:100px;
	margin:0 20px;
	padding:5px;
	font-weight:bold;
	color:#fff;
	letter-spacing:0.3em;
	border:#009de6 1px solid;
	background:url(../img/contact/bg_form-btn.jpg) center;
	}
#form-bottom input.gray{
	border:#aaa 1px solid;
	background:url(../img/contact/bg_form-btn-g.jpg) center;
	}
	
#contact-privacy{
	margin:10px 0;
	padding:8px;
	height:200px;
	overflow:auto;
	line-height:1.3;
	border:2px #ccc solid;
}
#contact-privacy h3{
	font-size:16px;
	color:#000;
	text-align:center;
	border:none;
}

#contact-privacy h4{
	margin-bottom:0.2em;
}

#contact-privacy p{
	margin-left:10px;
	margin-bottom:0.7em;
}


/*100.dictionary
----------------------------------*/
#dictionary ul{
	margin-bottom:1.5em;
}
#dictionary ul li{
	display:block;
	margin:0 0.5em 0.5em 0;
	padding-left:12px;
	width:200px;
	float:left;
	background:url(../img/common/icon_bullet.gif) left center no-repeat;
}
#dictionary h4{
	margin-top:3em;
	color:#0067cd;
}
#dictionary h4 .yomi{
	padding-left:5px;
	font-size:12px;
	color:#333;
	letter-spacing:0;
}
#go-index{
	margin:3em 0;
	padding:5px 0 0 14px;
	background:url(../img/common/icon_arrow-big.gif) left 8px no-repeat;
	border-top:2px #ccc solid;
}


/*110.privacy index
---------------------------------------*/	
#privacy{
}
#privacy h3{
	color:#000;
}
#privacy h4{
	margin-bottom:0.2em;
	font-size:117%;
}
#privacy h5{
	margin-bottom:0.2em;
	font-size:100%;
}
#privacy p{
	margin-left:10px;
	margin-bottom:0.7em;
}

#privacy table{
	margin-bottom:15px;
}
#privacy table td,
#privacy table th{
	padding:3px;
	font-size:11px;
	border:1px #333 solid;
}
#privacy table th{
	text-align:center;
	background-color:#E6E6E6;
}
#privacy-contact{
	margin:15px auto 30px auto;
	padding:4px;
	width:360px;
	border:1px #ccc solid;
}

/*111.privacy handle
---------------------------------------*/	
dl#handle dt{
	font-weight:bold;
	letter-spacing:0.1em;
	}
dl#handle dd{
	margin:2px 0 20px 20px;
	}