@charset "UTF-8";

/*
reset & base style sheet
last update 2010-08-24
*/

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

css for sunny coding department - for structure
http://sunny-coding-department.com/
copyright (c) 2010 sunny coding department all rights reserved.

author - sunny coding department
http://sunny-coding-department.com/

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

/*========== main ==========*/
div#main {
margin-bottom: 50px;
position: relative; 
clear: both;
width: 900px;
overflow: auto;
}

/* ----- side ----- */
div#catch {
margin-bottom: 20px;
float: left;
width: 300px;
}

/* for navigation */
div#catch li {
margin-bottom: 0px;
padding: 10px 0 10px 0;
border-top: 1px solid #dddddd;
width: 230px;
color: #dddddd;
list-style-type: none;
}

div#catch li.indexLink {
border-top: 1px solid #dddddd;
}

div#catch li.paddingL {
margin-left: 20px;
border: 0;
}

div#catch li.underline {
border-bottom: 1px solid #dddddd;
}

div#catch li:before {
content:" ►";
padding: 0 10px 0 0px;
}


/* ----- contents ----- */
div#contentsWrap {
width: 600px;
float: right;
}

div.contents {
margin-bottom: 50px;
padding: 0px 20px 20px 20px;
clear: both;
width: 560px;
text-align: left;
}

div.contentsBottom {
margin-bottom: 0px;
padding: 0px 20px 20px 20px;
clear: both;
width: 560px;
text-align: left;
}

/* IE6 */
html*div#contentsWrap {
width: 600px;
float: right;
}

html*div.contents {
margin-bottom: 0px;
padding: 0px 20px 20px 20px;
clear: both;
width: 600px;
text-align: left;
}

html*div.contentsBottom {
margin-bottom: 0px;
padding: 0px 20px 20px 20px;
clear: both;
width: 600px;
text-align: left;
}

/* contents image*/
div.contentsImgWrap {
float: left;
width: 100px;
}

.contentsImg {
padding: 0;
width: 80px;
height: 80px;
}

div.contentsTxt {
float: right;
width: 460px;
height: 150px;
}

html*div.contentsTxt {
float: right;
width: 460px;
height: 100px;
}

div.contents ol {
margin-bottom: 20px;
}

ol.floatL {
margin-bottom: 20px;
float: left;
width: 185px;
}

div.contents li {
list-style-type: none;
}

div.contents li.paddingL {
border: 0;
}

/* --- table ---*/
table {
margin-top: 20px;
border-collapse: collapse;
border-spacing: 0;
width: 560px;
}

th.colorth {
border: 1px solid #ddd;
background-color: #ECF5F5;
}

td.itemize {
padding: 10px;
width: 498px;
text-align: left;
font-size: 12px;
font-wight: nomal;
}



td.totalTd {
padding-right: 10px;
text-align: right;
}

td {
padding: 10px;
padding-right: 10px;
width: 80px;
text-align: right;
font-size: 15px;
font-wight: bold;
}

html*td {
border-bottom: 1px solid #cccccc;
}

tr {
border-bottom: 1px solid #cccccc;
}

tr.bottomTr {
border-bottom: 0;
}


/* --- for Price --- */
table.priceTable {
margin: 20px 0 50px 0;
border: 1px solid #cccccc;
border-collapse: collapse;
border-spacing: 0;
width: 560px;
}

table.priceTable td.note {
padding: 10px;
width: 170px;
border-right: 1px solid #cccccc;
background-color: #ECF5F5;
text-align: left;
font-size: 11px;
font-wight: nomal;
}

td.tdContents {
padding: 10px;
padding-right: 10px;
width: 408px;
text-align: left;
font-size: 12px;
font-wight: nomal;
}

table.priceTable span {
font-size: 13px;
font-weight: bold;
}

/* --- for About --- */
table.aboutTable {
margin-top: 20px;
border: 1px solid #cccccc;
border-collapse: collapse;
border-spacing: 0;
width: 560px;
}

td.note {
padding: 10px;
width: 170px;
border-right: 1px solid #cccccc;
background-color: #ECF5F5;
text-align: left;
font-size: 12px;
font-wight: nomal;
}

td.tdContents {
padding: 10px;
padding-right: 10px;
width: 408px;
text-align: left;
font-size: 12px;
font-wight: nomal;
}

ol.policy  {
margin: 50px 0 50px 0;
list-style-type: disc;
}

ol.policy li {
margin: 0  20px 20px;
list-style-type: disc;
}

/* --- for Portfolio --- */
div.portfolioWrap {
margin-bottom: 20px;
clear: both;
height: 180px;
}

div.portfolioWrap h4 {
font-size: 12px;
font-weight: bold;
}

div.portfolioImg {
float: left;
}

div.portfolioImg img {
border: 1px solid #dddddd;
}

div.portfolioTxt {
padding-left: 50px;
float: left;
}

div.portfolioWrap dl {
margin-top: 10px;
}

div.portfolioWrap dt {
float:left;
clear:both;
width:5.5em; /* =dt txt. dd=margin-left. */
}

div.portfolioWrap dd {
margin-left:5.5em; /* =dt width */
}
/* for IE6 
div.portfolioWrap dd {
height:1px;
}*/


/* FAQ */
div.contentsFaq {
margin-bottom: 25px;
padding: 0px 20px 20px 20px;
clear: both;
width: 560px;
text-align: left;
}


#accordion h2 {
margin: 50px 0 20px 0;
/*border-bottom: 1px solid #999999;*/
}
.contentsFaq ul {

}

.contentsFaq h3 {
padding: 10px;
border-bottom: 1px solid #dddddd;
line-height:20px;
	list-style:none;
	background-image: url("../image/background/question.png");
	background-repeat: no-repeat;
	background-position: 0% 50%; 
	padding-left:40px;
	cursor: pointer;
	color: #777777;
	}

.contentsFaq li {
margin-bottom: 50px;

padding: 20px;
border-bottom: 0;
line-height:20px;
	list-style:none;
	background-image: url("../image/background/answer.png");
	background-repeat: no-repeat;
	background-position: 10px 20px; 
	padding-left:40px;
	background-color: #ECF5F5;
	}

/*	
	.contentsFaq li.answer {
padding: 10px;
border-bottom: 0px;
line-height:20px;
	list-style:none;
	background-image: url("../image/background/answer.png");
	background-repeat: no-repeat;
	background-position: 0% 20%; 
	padding-left:40px;
	
	}*/

/*.contentsFaq li:before {
content: "Q: ";
list-style-position: inherit;
}*/


/* About */
.contentsNomal ol {
margin-top: 40px;
margin-bottom: 40px;
}

.contentsNomal li {
margin-left: 20px;
margin-bottom: 20px;
}

/*========== form ==========*/
form {
margin-top: 40px;
}

select {
width: 200px;
font-size: 12px;
font-family: Helvetica;
}

#textarea {
width: 280px;
height: 170px;
font-size: 12px;
font-family: Helvetica;
}

div.formSub {
}

td.tdtext {
width: 70%;
}

div.formSub td {
padding-left: 10px;
height: 40px;
}

input#companyName, input#name, input#mail, input#subject {
margin-bottom: 15px;
border: 1px solid#cccccc;
width: 560px;
height: 30px;
font-size: 20px;
}

textarea {
border: 1px solid#cccccc;
width: 560px;
font-size: 20px;
}

/*========== end ==========*/