@charset "utf-8";

html,body {
	margin:0;
	padding:0;
	font-size:14px;
}

#line {width:100%}
#line hr{
	width:100%;
	border-width:3px 0 0 0;
	border-style:solid;
	border-color:#0068B6;
	margin:0;
}
#line hr:nth-child(2){border-color:#F39700}
#line hr:nth-child(3){border-color:#6ABC6E}
#line hr:nth-child(4){border-color:#EB6D81}
#line hr:nth-child(5){border-color:#906FAF}
#line hr:nth-child(6){border-color:#00A0E8}

/* header */
header {
	width:950px;
	margin:50px auto 20px auto;
	border-left:5px #00A0E8 solid;
	padding-left:25px;
	position:relative;
}
header h1 {
	color:#00A0E8;
	font-size:32px;
	margin:0;
	line-height:40px;
}
header span {
	color:#000;
	font-size:40px;
}
header span:nth-child(3) {color:#0068B6}
header span:nth-child(4) {color:#F39700}
header span:nth-child(5) {color:#6ABC6E}
header span:nth-child(6) {color:#EB6D81}
header span:nth-child(7) {color:#906FAF}
header span:nth-child(8) {color:#00A0E8}
header span:nth-child(9) {color:#717071}

header div {
	position:absolute;
	top:0;
	right:0;
	font-size:22px;
	font-weight:bold;
	text-align:right;
}
header div p {
	display:inline-block;
	width:auto;
	margin:0;
	padding-left:27px;
	font-size:18px;
	background:url(../images/clock.png) left center no-repeat;
}
header div p span {
	font-weight:normal;
	font-size:12px;
}
header div a {
	display:inline-block;
	padding-left:45px;
	height:30px;
	background:url(../images/free.png) left center no-repeat;
	font-size:24px;
	color:#00A63B;
	text-decoration:none;
}

/* commmon */
#contents {
	width:978px;
	margin:0 auto;
	border:1px #9F9FA0 solid;
	box-shadow:3px 3px 10px #999;
	background:url(../images/header.png) center top no-repeat;
	background-size:contain;
	min-height:800px;
	padding-top:290px;
}
#contents img {
	width:100%;
	display:block;
}

#a01 {
	display:block;
	width:100%;
	margin:0 0 50px 0;
	background:#FFF000;
	color:#00A0E8;
	text-align:center;
	font-weight:bold;
	padding:5px 0;
	font-size:22px;
}
#a01 h3 {
	margin:0;
	padding:0;
	font-size:26px;
}

#a02 {
	color:#0B68AC;
	background:#EAF6FD;
	padding-bottom:80px;
}

h2 {
	border-left:50px #349DD0 solid;
	padding-left:20px;
	font-size:24px;
	color:#0B68AC;
	height:35px;
	line-height:40px;
	margin:0 0 30px 0
}
h2#flow {background:url(../images/h2flow.png) 260px center no-repeat}
h2#products {background:url(../images/h2products.png) 260px center no-repeat}
h2#price {background:url(../images/h2price.png) 260px center no-repeat}
h2#material {background:url(../images/h2material.png) 260px center no-repeat}
h2#delivery {background:url(../images/h2delivery.png) 260px center no-repeat}
h2#option {background:url(../images/h2option.png) 260px center no-repeat}
h2#dataup {background:url(../images/h2dataup.png) 260px center no-repeat}
h2#faq {background:url(../images/h2faq.png) 260px center no-repeat}

.inner {padding:0 50px}

/* ご注文の流れ */
#a012 {padding:10px 0 20px 0}
#a012 ul {
	list-style:none;
	margin:0;
	padding:0;
}
#a012 ul.nodata {margin-top:10px}
#a012 ul:after {
	display:block;
	content:"";
	clear:both;
}
#a012 ul li {
	float:left;
	width:calc((100% - 256px) / 4);
	height:270px;
	margin:40px 0 0 0;
	padding:0;
	text-align:center;
	position:relative;
}
#a012 ul.yesdata li {background-color:#00a0e9}
#a012 ul.nodata li {background-color:#fabe00}
#a012 ul li.title {
	color:#fff;
	font-size:18px;
	font-weight:bold;
	padding-top:60px;
	width:120px;
	height:210px;
}
#a012 ul li.title div {
	margin-top:40px;
	color:rgba(255,255,255,.5);
}
#a012 ul li span {
	position:absolute;
	left:50%;
	top:-30px;
	margin-left:-30px;
	display:block;
	width:60px;
	height:60px;
	color:#fff;
	font-size:30px;
	font-weight:bold;
	line-height:60px;
	border-radius:30px;
}
#a012 ul.yesdata li span {
	background: -moz-linear-gradient(top,  rgba(0,160,233,1) 0%, rgba(0,160,233,1) 65%, rgba(0,160,233,0) 66%, rgba(0,160,233,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,160,233,1)), color-stop(65%,rgba(0,160,233,1)), color-stop(66%,rgba(0,160,233,0)), color-stop(100%,rgba(0,160,233,0)));
	background: linear-gradient(to bottom,  rgba(0,160,233,1) 0%,rgba(0,160,233,1) 65%,rgba(0,160,233,0) 66%,rgba(0,160,233,0) 100%);
}
#a012 ul.nodata li span {
	background: -moz-linear-gradient(top,  rgba(250,190,0,1) 0%, rgba(250,190,0,1) 65%, rgba(250,190,0,0) 66%, rgba(250,190,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,190,0,1)), color-stop(65%,rgba(250,190,0,1)), color-stop(66%,rgba(250,190,0,0)), color-stop(100%,rgba(250,190,0,0)));
	background: linear-gradient(to bottom,  rgba(250,190,0,1) 0%,rgba(250,190,0,1) 65%,rgba(250,190,0,0) 66%,rgba(250,190,0,0) 100%);
}
#a012 ul li h3 {
	color:#fff;
	margin:0;
	height:50px;
	line-height:65px;
}
#a012 ul li p {
	text-align:left;
	background:#fff;
	font-weight:bold;
	margin:10px;
	padding:5px;
	height:190px;
}
#a012 ul li.allow {
	width:34px;
	background:url(../images/allow.png) center center no-repeat;
	background-color:transparent;
}

/* プレート看板加工例 */
#a02 p {margin:20px 0 5px 0}
#a02 p span {
	font-size:18px;
	color:#D71618;
}
#a02 ul {
	list-style:none;
	margin:0;
	padding:0;
}
#a02 ul:after {
	display:block;
	content:"";
	clear:both;
}
#a02 ul li {
	float:left;
	width:calc((100% - 30px) / 4);
	height:160px;
	margin:0;
	padding:0;
}
#a02 ul li+li {margin-left:10px}

/* リンク */
#a022 .inner {
	padding:50px 140px;
	text-align:center;
}
#a022 h3 {
	font-size:16px;
	color:#38A1DB;
}
#a022 p {position:relative}
#a022 a.mail22 {
	display:block;
	width:176px;
	height:25px;
	position:absolute;
	bottom:5px;
	left:18px;
}
/* プレート看板の価格 */
#a03 {
	font-size:14px;
	padding-bottom:50px;
	background:#EAF6FD;
}
#a03 table {
	width:100%;
	border-collapse:collapse;
	margin-top:10px;
}
#a03 table th,
#a03 table td {
	width:50%;
	border:1px #0B68AC solid;
	padding:5px 0;
	text-align:center;
	font-weight:bold;
}
#a03 table th {
	background:#349DD0;
	color:#FFF;
}
#a03 table tr:nth-child(odd) {background:#C4E6F6}
#a03 .inner div {
	background:#D5EAD7;
	padding:5px 10px;
}

/* プレート看板の構造 */
#a04 {
	color:#0B68AC;
	padding-bottom:50px;
}
#a04 .inner div {margin-bottom:30px}
#a04 .inner div:after {
	display:block;
	content:"";
	clear:both;
}
#a04 .inner div img {
	float:left;
	width:235px;
	height:235px;
}
#a04 .inner div h3 {
	border-left:5px #0068B6 solid;
	padding-left:10px;
	color:#0068B6;
	float:right;
	width:585px;
	margin:0 0 10px 0;
}
#a04 .inner div p {
	float:right;
	width:590px;
	margin:0;
	color:#000;
	font-size:14px;
}

/* 納期と送料 */
#a05 {
	background:#EAF6FD;
	padding-bottom:10px;
}
#a05 h3{
	margin:10px 0;
	color:#0068B6;
	font-size:20px;
}
#a05 h4 {
	margin:0 0 3px 0;
	color:#0068B6;
	font-size:16px;
}
#a05 .inner div {margin-top:5px}
#a05 img {
	float:left;
	width:340px;
}
#a05 table {
	float:left;
	border-collapse:collapse;
	margin-left:5px;
	margin-bottom:5px;
}
#a05 table th,
#a05 table td {
	width:125px;
	border:2px #0B68AC solid;
	text-align:center;
	font-size:12px;
	font-weight:normal;
}
#a05 table td {padding:7px 0}
#a05 table td.size {
	width:140px;
	font-size:20px;
	color:#0B68AC;
	text-align:center;
	vertical-align:middle;
}
#a05 table th {
	color:#0B68AC;
	line-height:20px;
}
#a05 table th p {
	margin:0 0 3px 0;
	padding:0;
	color:#fff;
	line-height:24px;
}
#a05 table th p#a {background:#7DCADC}
#a05 table th p#b {background:#76BD4A}
#a05 table th p#c {background:#E0BE42}
#a05 table th p#d {
	background: #f08b2a;
	background: -moz-linear-gradient(top,  #f08b2a 0%, #f08b2a 50%, #b48ebf 51%, #b48ebf 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f08b2a), color-stop(50%,#f08b2a), color-stop(51%,#b48ebf), color-stop(100%,#b48ebf));
	background: linear-gradient(to bottom,  #f08b2a 0%,#f08b2a 50%,#b48ebf 51%,#b48ebf 100%);
}
#a05 table th p#e {background:#51BA99}
#a05 table th p span {
	display:inline-block;
	font-size:20px;
	font-weight:bold;
	vertical-align:middle;
	margin-right:3px;
}
#a05 table tr:nth-child(even) {background:#C4E6F6}
#a05 .inner div:after {
	display:block;
	content:"";
	clear:both;
}
#a05 p {font-size:12px}

/* オプション */
#a07 {
	padding-bottom:30px;
}
#a07 h3{
	color:#0B68AC;
	font-size:18px;
	margin:10px 0 5px 0;
}
#a07 ul {
	list-style:none;
	padding:0;
	margin:20px 0:
}
#a07 ul li {
	padding:20px 500px 0 0;
	height:170px;
}
#a07 ul li:nth-child(1) {background:url(../images/a071.png) right top no-repeat}
#a07 ul li:nth-child(2) {background:url(../images/a072.png) right top no-repeat}
#a07 ul li:nth-child(3) {background:url(../images/a073.png) right top no-repeat}
#a07 ul li h4 {
	color:#0B68AC;
	font-size:20px;
	font-weight:bold;
	margin:10px 0;
}
#a07 ul li h4 span {
	display:inline-block;
	color:#fff;
	background:#0B68AC;
	border-radius:15px;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	margin:0 5px 0 0;
}
#a07 ul li p {padding-left:38px}

/* 入稿方法 */
#a08 {
	background:#EAF6FD;
}
#a08 h3 {
	color:#0B68AC;
	font-size:18px;
	margin:10px 0 5px 0;
}
#a08 .inner p {
	background:url(../images/a08.png) right bottom no-repeat;
	font-size:14px;
	padding-bottom:80px;
}
#a08 h4{
	color:#0B68AC;
	font-size:19px;
	margin:0;
}
#a08 a.mail1 {
	display:inline-block;
	margin:40px 111px;
}
#a08 img {width:667px}

/* よくある質問 */
#a081 {padding-bottom:50px}
#a081 ul,
#a081 ul li {
	list-style:none;
	margin:0;
	padding:0;
}
#a081 ul li.q {
	background:url(../images/q.png) left center no-repeat;
	padding-left:70px;
	color:#0075c2;
	min-height:60px;
	line-height:60px;
	font-weight:bold;
}
#a081 ul li.a {
	margin-left:70px;
	margin-bottom:30px;
	padding-left:75px;
	background:url(../images/a.png) left 8px no-repeat;
}
#a081 ul li.a span {
	display:block;
	color:#898989;
	background:#fdd118;
	min-height:60px;
	padding:10px 20px;
	position:relative;
}
#a081 ul li.a span:before {
	content:"";
	display:block;
	width:26px;
	height:16px;
	background:url(../images/af.png) left top no-repeat;
	position:absolute;
	top:30px;
	left:-24px;
	z-index:-1;
}

/* 制作事例 */
#a09 {
	text-align:center;
	color:#0B68AC;
	font-size:16px;
	font-weight:bold;
}
#a09 .inner {padding-top:38px}
#a09 .inner:after {
	display:block;
	content:"";
	clear:both;
}
#a09 .inner img{
	float:left;
	display:block;
	width:145px;
	height:145px;
	margin-bottom:38px;
}
#a09 .inner img+img {margin-left:38px}
#a09 .inner img:nth-child(6n) {margin-left:0}
#a09 h4 {
	background:#FFF000;
	color:#00A0E8;
	text-align:center;
	margin:0 0 20px 0;
	padding:20px 0;
	font-size:20px;
}
#a09 a.mail2 {
	display:inline-block;
	margin:40px 106px;
}
#a09 a.mail2 img {width:667px}

/* footer */
footer {
	width:820px;
	margin:0 auto;
	padding:30px 80px 10px 80px;
	background:#0B68AC;
	color:#fff;
	font-size:12px;
}
footer img {
	display:block;
	margin-bottom:20px;
}
footer #left {
	float:left;
	margin-top:15px;
}
footer #right {
	float:right;
	margin-top:50px;
}
footer #right a {color:#fff}
footer address {
	clear:both;
	padding-top:30px;
	text-align:center;
	font-style:normal;
}