@charset "UTF-8";

/**
 *
 * コンテンツ
 *
**/

/**
 * キービジュアル
**/

#main_image {
	width: 60%;
	background: #232323;
	text-align: center;
	float: right;
}

#main_image a {
	width: 100%;
	display: block;
}

#main_image img {
	margin: 0 auto;
	width: 100%;
	max-width: 765px;
	height: auto;
	display: block;
}


/**
 * トップ
**/

#top {
	padding: 154px 0 0 0;
	width: 100%;
	font-size: 110%;
}

#top h2 {
	padding: 8px 0 0 10px;
	border: none;
	background: url("../images/icon_04.gif") no-repeat 0 0;
	margin-bottom: 35px;
}

#top .fl {
	width: 40%;
}

#top #news {
	margin-bottom: 50px;
	width: 100%;
}

#top #news dl {
	margin: 0 9px;
	border-left: 2px solid #000000;
}

#top #news dl dt {
	margin-left: 23px;
	padding: 7px 0 0 0;
	width: 105px;
	float: left;
	clear: both;
}

#top #news dl dt:nth-child(1) {
	padding-top: 0;
}

#top #news dl dd {
	padding: 7px 0 0 0;
	overflow: hidden;
}

#top #news dl dd:nth-child(2) {
	padding-top: 0;
}

#top .bnr {
	width: 100%;
}

#top .bnr ul {
	width: 100%;
}

#top .bnr ul li {
	padding: 0 15px 15px 0;
	float: left;
}

#top .bnr ul li img {
/*	display: block;*/
}


/**
 * 01.サービスのご案内
**/

#service {
	padding: 154px 0 0 0;
	width: 100%;
	line-height: 180%;
	font-size: 110%;
}

#service h2 {
	padding: 11px 0 0 80px;
	height: 40px;
	background:url("../images/title_num_01.gif") no-repeat 0 0;
}

#service h3 {
	padding: 8px 0 0 10px;
	line-height: 110%;
	font-size: 167%;
	font-weight: bold;
	background: url("../images/icon_04.gif") no-repeat 0 0;
}

#service h4 {
	padding: 18px 0 0 18px;
	background: url("../images/content_back_01.gif") no-repeat 0 0;
}

#service .concept {
	padding-right: 20px;
	width: 30%;
	border-right: 1px solid #cccccc;
	float: left;
}

#service .concept p {
	margin-left: 5px;
	margin-right: 10px;
}

#service .concept figure {
	width: 100%;
	text-align: center;
}

#service .concept figure img {
	margin: 0 auto;
	width: 100%;
	max-width: 370px;
	height: auto;
	display: block;
}

#service .feature {
	width: 65%;
	float: right;
}

#service .feature .point {
	padding: 0 0 20px 0;
	width: 33.333%;
	float: left;
}

#service .feature .point p {
	margin-right: 15px;
	margin-left: 18px;
}

#service .feature .point ul {
	margin-right: 15px;
	margin-left: 18px;
}

#service .feature .point a {
	padding-left: 13px;
	background: url("../images/icon_02.gif") no-repeat 0 50%;
}

#service .feature .area {
	float: right;
}

#service .feature .area figure {
	width: 100%;
	text-align: center;
}

#service .feature .area figure img {
	margin: 0 auto;
	width: 100%;
	max-width: 271px;
	height: auto;
	display: block;
}

#service .feature .area dl {
	width: 100%;
	overflow: hidden;
}

#service .feature .area dl dt {
	float: left;
}

#service .feature .area dl dd {
	overflow: hidden;
}

#service .feature .wrap {
	width: 66.666%;
	float: left;
}

#service .feature .wrap .point {
	width: 50%;
}


/**
 * 02.コーディングについて
**/

#coding {
	padding: 154px 0 0 0;
	width: 100%;
	line-height: 180%;
	font-size: 110%;
}

#coding h2 {
	padding: 11px 0 0 80px;
	height: 40px;
	background: url("../images/title_num_02.gif") no-repeat 0 0;
}

#coding h3 {
	padding: 8px 0 0 10px;
	background: url("../images/icon_04.gif") no-repeat 0 0;
}

#coding h4 {
	padding: 17px 0 0 18px;
	background: url("../images/content_back_01.gif") no-repeat 0 0;
}

#coding .how {
	width: 62%;
	border-right: 1px solid #cccccc;
	float: left;
}

#coding .how h5 {
	padding: 0 0 0 14px;
	font-size: 100%;
	font-weight: normal;
	background: url("../images/icon_03.gif") no-repeat 0 50%;
}

#coding .how .browser {
	margin: 0 0 8px 20px;
	width: 70%;
	overflow: hidden;
}

#coding .how .browser .windows {
	width: 50%;
	float: left;
}

#coding .how .browser .mac {
	width: 50%;
	float: left;
}

#coding .how table {
	width: 100%;
	border-top: 1px solid #000000;
}

#coding .how .browser .mac table {
	border-right: 1px solid #000000;
}

#coding .how table th {
	padding: 5px 0;
	text-align: center;
	border-left: 1px solid #000000;
	border-bottom: 2px solid #000000;
}

#coding .how table td {
}

#coding .how table td:nth-child(1) {
	padding: 5px 15px;
	width: 35%;
	text-align: left;
	border-left: 1px solid #000000;
	border-bottom: 1px dashed #000000;
}

#coding .how table td:nth-child(2) {
	padding: 5px 0;
	width: 15%;
	text-align: center;
	border-left: 1px dashed #000000;
	border-bottom: 1px dashed #000000;
}

#coding .how table td:nth-child(3) {
	padding: 5px 15px;
	width: 35%;
	text-align: left;
	border-left: 1px solid #000000;
	border-bottom: 1px dashed #000000;
}

#coding .how table td:nth-child(4) {
	padding: 5px 0;
	width: 15%;
	text-align: center;
	border-left: 1px dashed #000000;
	border-bottom: 1px dashed #000000;
}

#coding .how table tr:last-child td {
	border-bottom: 1px solid #000000;
}

#coding .how dl {
	margin-left: 20px;
	width: 46%;
	float: left;
	display: inline;
}

#coding .how dl dt {
	padding: 0 0 5px 14px;
	line-height: 110%;
	background: url("../images/icon_03.gif") no-repeat 0 5px;
}

#coding .how dl dd {
	padding: 5px 10px;
	min-height: 62px;
	word-break: break-all;
	background: #f2f2f2;
}

#coding .how dl dd a {
	text-decoration: underline;
}

#coding .how dl dd a:hover {
	text-decoration: none;
}

#coding .point {
	padding: 0 0 12px 0;
	width: 35%;
	border-bottom: 1px solid #cccccc;
	float: right;
	display: inline;
}

#coding .point a {
	padding-left: 13px;
	background: url("../images/icon_02.gif") no-repeat 0 50%;
}

#coding .point .fl {
	padding: 0 0 0 5px;
}

#coding .point .fr {
	padding: 0 0 0 5px;
}

#coding .box:nth-child(6) {
	border-bottom: none;
}

/**
 * 03.コーディング料金
**/

#price {
	padding: 154px 0 0 0;
	width: 100%;
	line-height: 180%;
	font-size: 110%;
}

#price h2 {
	padding: 11px 0 0 80px;
	height: 40px;
	background: url("../images/title_num_03.gif") no-repeat 0 0;
}

#price h3 {
	padding: 8px 0 0 10px;
	background: url("../images/icon_04.gif") no-repeat 0 0;
}

#price h4 {
	margin: 0 0 8px 10px;
	padding-left: 13px;
	line-height: 120%;
	font-size: 115%;
	font-weight: normal;
	background: url("../images/icon_03.gif") no-repeat 0 50%;
}

#price table {
	margin-left: 10px;
	width: 90%;
	border-top: 2px solid #000000;
	border-right: 1px solid #000000;
}

#price table th {
	padding: 5px 10px;
	width: 68%;
	text-align: left;
	border-left: 1px solid #000000;
	border-bottom: 1px dashed #000000;
	vertical-align: middle;
}

#price table tr:last-child th {
	border-bottom: 1px solid #000000;
}

#price table td {
	padding: 5px 0;
	text-align: center;
	border-left: 1px solid #000000;
	border-bottom: 1px dashed #000000;
}

#price table tr:last-child td {
	border-bottom: 1px solid #000000;
}

#price .xhtml {
	width: 30%;
	border-right: 1px solid #cccccc;
	float: left;
	display: inline;
}

#price .html5 {
	margin-left: 2.5%;
	width: 30%;
	border-right: 1px solid #cccccc;
	float: left;
	display: inline;
}

#price .option {
	margin-left: 2.5%;
	width: 30%;
	float: left;
	display: inline;
}

#price .campain {
	margin: 0 0 0 10px;
}

#price .campain a {
	font-size: 115%;
	font-weight: bold;
	color: #ff0000;
	text-decoration: underline;
}

#price .campain a:hover {
	text-decoration: none;
}


/**
 * 04.納品までの流れ
**/

#flow {
	padding: 154px 0 0 0;
	width: 100%;
	line-height: 160%;
	font-size: 110%;
}

#flow h2 {
	padding: 11px 0 0 80px;
	height: 40px;
	background: url("../images/title_num_04.gif") no-repeat 0 0;
}

#flow dl {
	margin: 0 0 0 65px;
	border-left: 1px solid #cbcbcb;
}


#flow dt {
	margin-left: -64px;
	padding: 3px 0 8px 79px;
}

#flow dt:nth-child(1) {
	background: url("../images/num_01.gif") no-repeat 20px 0;
}

#flow dt:nth-child(3) {
	background: url("../images/num_02.gif") no-repeat 20px 0;
}

#flow dt:nth-child(5) {
	background: url("../images/num_03.gif") no-repeat 20px 0;
}

#flow dt:nth-child(7) {
	background: url("../images/num_04.gif") no-repeat 20px 0;
}

#flow dt:nth-child(9) {
	background: url("../images/num_05.gif") no-repeat 20px 0;
}

#flow dt:nth-child(11) {
	background: url("../images/num_06.gif") no-repeat 20px 0;
}

#flow dd {
	padding: 0 0 25px 15px;
}

#flow dd:last-child {
	padding: 0 0 0 15px;
}


/**
 * 05.よくあるご質問
**/

#faq {
	padding: 154px 0 0 0;
	width: 100%;
	line-height: 160%;
	font-size: 110%;
}

#faq h2 {
	padding: 11px 0 0 80px;
	height: 40px;
	background: url("../images/title_num_05.gif") no-repeat 0 0;
}

#faq dl {
	padding: 18px 0 15px 18px;
	width: 31%;
	background: url("../images/content_back_01.gif") no-repeat 0 0;
	box-sizing: border-box;
	float: left;
}

#faq dl:nth-child(5n) {
	clear: both;
}

#faq dt {
	padding: 0 15px 10px 40px;
	line-height: 28px;
	font-size: 125%;
	font-weight: bold;
	background: url("../images/icon_q.gif") no-repeat 0 0;
}

#faq dd {
	padding: 0 15px 25px 40px;
	background: url("../images/icon_a.gif") no-repeat 0 0;
}


/**
 * 特定商取引法の表示
**/

.law_data {
	margin: 0 0 60px 20px;
	width: 90%;
	border-top: 2px solid #000000;
	border-right: 1px solid #000000;
}

.law_data th {
	padding: 10px;
	width: 20%;
	text-align: left;
	border-left: 1px solid #000000;
	border-bottom: 1px dashed #000000;
	vertical-align: middle;
}

.law_data tr:last-child th {
	border-bottom: 1px solid #000000;
}

.law_data td {
	padding: 10px;
	text-align: left;
	border-left: 1px solid #000000;
	border-bottom: 1px dashed #000000;
}

.law_data tr:last-child td {
	border-bottom: 1px solid #000000;
}


/**
 * お問い合わせ／お見積り
**/

.form {
	margin: 0 0 60px 20px;
	width: 90%;
}

.form dt {
	margin: 0 0 5px 0;
	font-size: 110%;
	font-weight: bold;
}

.form dt .note {
	padding: 0 0 0 10px;
	font-weight: normal;
	font-size: 85%;
	color: #666666;
}

.form label {
	padding: 0 8px 0 0;
}

.form dd {
	margin: 0 0 25px 15px;
}

.form .page_num {
	margin: 0 0 10px 0;
}

.form .page_num dt {
	margin: 0;
	padding: 0 5px 0 0;
	line-height: 24px;
	font-weight: normal;
	font-size: 100%;
	float: left;
}

.form .page_num dd {
	margin: 0;
	padding: 0;
	line-height: 24px;
	overflow: hidden;
}

.form .term {
	margin: 0 0 10px 0;
}

.form .term dt {
	margin: 0;
	padding: 0 5px 0 0;
	line-height: 24px;
	font-weight: normal;
	font-size: 100%;
	float: left;
}

.form .term dd {
	margin: 0;
	padding: 0;
	line-height: 24px;
	overflow: hidden;
}

.form .option {
	margin: 0 0 10px 0;
}

.form .option dt {
	margin: 0;
	padding: 0 5px 0 0;
	line-height: 24px;
	font-weight: normal;
	font-size: 100%;
	float: left;
}

.form .option dd {
	margin: 0;
	padding: 0;
	line-height: 24px;
	overflow: hidden;
}