﻿@charset "utf-8";
/* CSS Document */

/* 共通部分 */

body { font-family:"メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:#fff;
	background-position:center;
	margin:0;
	padding:0;
	font-size:13px;
	color:#222;
	}

a { text-decoration:none; color:#222;}

a:hover { text-decoration:underline; color:#00f;}

a img {
	-webkit-transition: 0.2s ease-out;
	   -moz-transition: 0.2s ease-out;
	     -o-transition: 0.2s ease-out;
	        transition: 0.2s ease-out;}

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);}

img { border:none;}

h1 { font-size:100%;
	 margin:0;
	 padding:0;
	 font-weight:normal;}
	 
h2 { color:#00bbff;
	font-size:280%;
	background-image:url(img/h1_back.gif);
	font-weight:bold;
	text-shadow:1px 1px 3px #fff,2px 2px 3px #fff;
	height:51px;
	padding:11px 15px 11px 120px;
	clear:both;}

.h2_op {background-image:url(img/h2_back.gif);
	padding:2px 20px;
	clear:both;}

#content { width:990px;
	margin:0 auto;}

#header { background-color:#ffede4; width:1002px; height:100px; margin:0 0 0 -11px; border:none; position:relative;}

.logo { display:block; background:url(img/logo.gif) no-repeat 0 0; width:800px; height:100px; margin:0 auto; border:0;}

.headline { color:#222;
	text-align:center;
	/*position:fixed;*/
	padding:0;
	margin:0;
	position:absolute;
	top:0;
	left:5px;}

.headline h1 {font-size:100%; float:left;}

.logoinq{ display: block;
	width: 60px;
	height: 60px;
	margin:0;
	background: url(img/logoinq.gif) no-repeat 0 0;
	position:absolute; right:140px; top:5px;}
.logoinq:hover{background-position: 0 bottom;}

.logotel { display: block;
	width: 40px;
	height: 60px;
	background: url(img/logotel.gif) no-repeat 0 0;
	position:absolute; right:95px; top:5px;}

.snsb1 { position:absolute; right:17px; top:3px;}
.snsb2 { position:absolute; right:16px; top:25px;}
.snsb3 { position:absolute; right:-3px; top:47px;}

.inqadv { color:#00bbff;
	text-align:center;
	font-size:120%;
	font-weight:bold;
	/*position:fixed;*/
	padding:0;
	margin:0;
	position:absolute;
	bottom:0;
	right:5px;}

.pankuzu { margin:8px 15px 5px 15px;}

.faq { float:right; color:#00F;}

#main { width:690px; float:left; margin:0 5px 0 0;}

.base { margin-left:50px;
		margin-bottom:40px;}

.base h3 {
	font-size:220%;
	font-weight:normal;
	color:#00bbff;
	margin-bottom:0.2em;}

.base p { font-size:140%;
	margin:0;}

.base ul { font-size:140%;
	margin:0;}

.flt_r { float:right; margin-left:0;}

.clearfix:after { 
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";}


/* サイドバー部分 */

#sideWrap { background-color:#ffede4; width:280px; float:right; margin:0 0 15px 0; padding:0; border-bottom:1px solid #FFF; position:relative;}
#side { background-color:#ffede4; width:275px; height:880px; margin:0 0 0 5px; padding:0; }

.snav1{display: block;
	width: 275px;
	height: 70px;
	margin:0;
	background: url(img/snavtel.gif) no-repeat 0 0;}
.snav2{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavprice.gif) no-repeat 0 0;}
.snav2:hover{background-position: 0 bottom;}
.snav3{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavorder.gif) no-repeat 0 0;}
.snav3:hover{background-position: 0 bottom;}
.snav4{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavmitumori.gif) no-repeat 0 0;}
.snav4:hover{background-position: 0 bottom;}
.snav5{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavflow.gif) no-repeat 0 0;}
.snav5:hover{background-position: 0 bottom;}
.snav6{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavtemp.gif) no-repeat 0 0;}
.snav6:hover{background-position: 0 bottom;}
.snav7{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavgenkou.gif) no-repeat 0 0;}
.snav7:hover{background-position: 0 bottom;}
.snav8{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavfaq.gif) no-repeat 0 0;}
.snav8:hover{background-position: 0 bottom;}
.snav9{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavinq.gif) no-repeat 0 0;}
.snav9:hover{background-position: 0 bottom;}
.snav10{display: block;
	width: 275px;
	height: 78px;
	margin:0;
	background: url(img/snavinfo.gif) no-repeat 0 0;}
.snav10:hover{background-position: 0 bottom;}
.snav11{display: block;
	width: 65px;
	height: 100px;
	background: url(img/snavpriceb.gif) no-repeat 0 0; position:absolute; right:190px; bottom:10px;}
.snav11:hover{background-position: 0 bottom;}
.snav12{display: block;
	width: 65px;
	height: 100px;
	background: url(img/snavorderb.gif) no-repeat 0 0; position:absolute; right:108px; bottom:10px;}
.snav12:hover{background-position: 0 bottom;}
.snav13{display: block;
	width: 100px;
	height: 100px;
	background: url(img/snavtopb.gif) no-repeat 0 0; position:absolute; right:10px; bottom:10px;}
.snav13:hover{background-position: 0 bottom;}


/* フッター部分 */

#footer { background-color:#777; width:980px; clear:both;}
#footer h4 { color:#00AAFF; font-size:135%; font-weight:bold; text-shadow:0px 1px 3px #fff,0px 2px 3px #fff,0px 3px 3px #fff; margin-top:23px; margin-bottom:20px;}
#footer ul { padding:0px 10px; margin-top:-8px; margin-bottom:8px;}
#footer li { list-style:none;  display: block; color:#00AAFF; margin:8px; font-size:100%; font-weight:bold; text-shadow:0px 1px 3px #fff,0px 2px 3px #fff,0px 3px 3px #fff;}
#footer li a { color:#00AAFF;}
#footer .ftulother { padding:0px 10px; margin-top:-9px; margin-bottom:8px;}
#footer .ftulother li { margin:6px 8px;}

.ftul { background-color:#ffede4;
	padding:0 5px 0 40px; float:left; height:415px; width:140px; border:0;}
.ftul2 {background-color:#ffede4;
	padding:0 0 0 30px; float:left; height:415px; width:270px; position: relative; border:0;}
.ftul3 {background-color:#ffede4;
	padding:0 0 0 30px; float:left; height:415px; width:230px; position: relative; border:0;}
.ftul4 {background-color:#ffede4;
	padding:0; float:left; height:415px; width:235px; position: relative; border:0;}

.ftimg{display: block;
	width: 220px;
	height: 50px;
	background: url(img/ftcartb.gif) no-repeat 0 0; position:absolute; left:-10px; bottom:120px;}
.ftimg:hover{background-position: 0 bottom;}

.ftimg2{display: block;
	width: 50px;
	height: 50px;
	background: url(img/ftpriceb.gif) no-repeat 0 0; position:absolute; right:185px; bottom:65px;}
.ftimg2:hover{background-position: 0 bottom;}

.ftimg3{display: block;
	width: 66px;
	height: 50px;
	background: url(img/fttemplateb.gif) no-repeat 0 0; position:absolute; right:117px; bottom:65px;}
.ftimg3:hover{background-position: 0 bottom;}

.ftimg4{display: block;
	width: 50px;
	height: 50px;
	background: url(img/ftinqb.gif) no-repeat 0 0; position:absolute; right:60px; bottom:65px;}
.ftimg4:hover{background-position: 0 bottom;}

.ftimg5{display: block;
	width: 50px;
	height: 50px;
	background: url(img/fttelb.gif) no-repeat 0 0; position:absolute; right:10px; bottom:65px;}
.ftimg5:hover{background-position: 0 bottom;}

.ftimg6{display: block;
	width: 100px;
	height: 30px;
	background: url(img/fttopb.gif) no-repeat 0 0; position:absolute; right:10px; bottom:15px;}
.ftimg6:hover{background-position: 0 bottom;}

.copylight { margin-left:10px; color:#fff;}



/* ボタン部分 */

.inq_btn_g, .gen_btn_g {
	width: 620px; height: 100px; margin:0 auto 0 auto;}

.cmpn_btn_g2, .indx_btn_g2,
.smpl_btn_g2,
.flow_btn_g2, .pirc_btn_g2,
.gen_btn_g2, .thx_btn_g2 {
	width: 620px; height: 100px; margin-left:180px;}

.btn_flt_lft { float:left}

.cmpnbtn_o{display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/cmpnbtn_o.gif) no-repeat 0 0; margin-right:10px;}
.cmpnbtn_o:hover{background-position: 0 bottom;}

.smplbtn_o{display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/smplbtn_o.gif) no-repeat 0 0; margin-right:10px;}
.smplbtn_o:hover{background-position: 0 bottom;}

.designbtn_o{display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/designbtn_o.gif) no-repeat 0 0; margin-right:10px;}
.designbtn_o:hover{background-position: 0 bottom;}

.flowbtn_b{
	display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/flowbtn_b.gif) no-repeat 0 0; margin-right:10px;}
.flowbtn_b:hover{
	background-position: 0 bottom;}

.indxbtn_b{
	display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/indxbtn_b.gif) no-repeat 0 0; margin-right:10px;}
.indxbtn_b:hover{
	background-position: 0 bottom;}

.inqbtn_o{
	display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/inqbtn_o.gif) no-repeat 0 0; margin-right:10px;}
.inqbtn_o:hover{
	background-position: 0 bottom;}

.omitumoribtn_b{display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/omitumoribtn_b.gif) no-repeat 0 0; margin-right:10px;}
.omitumoribtn_b:hover{background-position: 0 bottom;}

.orderbtn_o{
	display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/orderbtn_o.gif) no-repeat 0 0; margin-right:10px;}
.orderbtn_o:hover{
	background-position: 0 bottom;}

.telbtn_b{
	display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/telbtn_b.gif) no-repeat 0 0; margin-right:10px;}
.telbtn_b:hover{
	background-position: 0 bottom;}

.telbtn_o{
	display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/telbtn_o.gif) no-repeat 0 0; margin-right:10px;}
.telbtn_o:hover{
	background-position: 0 bottom;}

.tempbtn_b{
	display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/tempbtn_b.gif) no-repeat 0 0; margin-right:10px;}
.tempbtn_b:hover{
	background-position: 0 bottom;}


/* トップ */

.topbn { width:230px; height:200px; float:left; margin:0 auto;}

.top_smpl { margin-left:20px;}

.top_design { margin-left:90px;}

.calender { margin-left:-25px;}


/* 価格表 */

.price {width: 650px;
	margin-left:40px;
	margin-bottom:40px;}

.price h3 {
	font-size:220%;
	font-weight:normal;
	color:#00bbff;
	margin-bottom:0.2em;}

.price p {font-size:140%;
	margin:0;}

.price table th a,
.price table td a {color:#222;}

.price table tbody td:last-child {border-right: #ccc 1px solid;}

.price table {
	font-size:115%;
	width: 650px;
	text-align: center;
	border-top: #ccc 1px solid;
	border-collapse: separate;
	border-spacing: 0px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;}

.price table th {
	color: #222;
	padding: 6px 9px;
	vertical-align: middle;
	text-align: left;
	font-weight: bold;}

.price table td {
	color: #222;
	padding: 6px 7px;
	vertical-align: middle;
	text-align: left;
	font-weight: bold;}

.price table td.r1, .price table th.r1,
.price table td.r2, .price table th.r2,
.price table td.r3, .price table th.r3,
.price table td.r4, .price table th.r4,
.price table td.r5, .price table th.r5,
.price table td.r6, .price table th.r6,
.price table td.r7, .price table th.r7,
.price table td.r8, .price table th.r8 {
	text-align: center;
	height: 44px;
	border-left: #ccc 1px solid;
	border-bottom: #ccc 1px solid;}

.price table th.r1,
.price table td.r1 {
	width: 100px;
	background: #F9931A;
	-webkit-border-radius:5px 0 0 0;
	-moz-border-radius:5px 0 0 0;
	border-radius:5px 0 0 0;}

.price table th.r2,
.price table td.r2 {
	width: 100px;
	background: #F9931A;
	-webkit-border-radius:0 5px 0 0;
	-moz-border-radius:0 5px 0 0;
	border-radius:0 5px 0 0;}

.price table th.r3,
.price table td.r3 {
	width: 180px;
	background: #fff;
	-webkit-border-radius:0 0 5px 0;
	-moz-border-radius:0 0 5px 0;
	border-radius:0 0 5px 0;}

.price table th.r4,
.price table td.r4 {
	width: 100px;
	background: #fff;
	-webkit-border-radius:0 0 0 5px;
	-moz-border-radius:0 0 0 5px;
	border-radius:0 0 0 5px;}

.price table th.r5,
.price table td.r5 {
	width: 100px;
	background: #F9931A;}

.price table th.r6,
.price table td.r6 {
	width: 100px;
	background: #fff;}

.price table th.r7,
.price table td.r7 {
	width: 107px;
	background: #F9931A;}

.price table th.r8,
.price table td.r8 {
	width: 100px;
	background: #F9931A;
	-webkit-border-radius:0 5px 0 0;
	-moz-border-radius:0 5px 0 0;
	border-radius:0 5px 0 0;}

.prcbn { width:230px; height:200px; float:left; margin:0 auto;}

.prc_3d { margin-left:90px;}

/* お見積り部分 */

.thx { margin-left:40px;
		margin-bottom:40px;}

.thx h3 {
	font-size:220%;
	font-weight:normal;
	color:#00bbff;
	margin-bottom:0.2em;}

.thx p { font-size:140%;
	margin:0;}

.thx img { margin-left:-40px;}


/* キャンペーン */

.cmpn { margin-left:40px;
		margin-bottom:40px;}

.cmpn h3 {
	font-size:220%;
	font-weight:normal;
	color:#00bbff;
	margin-bottom:0.2em;}

.cmpn p { font-size:140%;
	margin:0;}

.cmpn img { margin-left:-40px;}


/* フロー部分 */

.flow1{display: block;
	width: 600px;
	height: 60px;
	background: url(img/flow1.gif) no-repeat 0 0; margin:10px;}
.flow1:hover{background-position: 0 bottom;}

.flow2{display: block;
	width: 600px;
	height: 60px;
	background: url(img/flow2.gif) no-repeat 0 0; margin:10px 10px 0 10px;}
.flow2:hover{background-position: 0 bottom;}

.flow3-1{width: 300px;
	height: 60px;
	margin:0 0 0 10px; float:left;}

.flow3-2{width: 300px;
	height: 60px;
	margin:0; float:left;}

.flow3-3{display: block;
	width: 300px;
	height: 60px;
	background: url(img/flow3-3.gif) no-repeat 0 0; margin:0 0 0 10px; float:left;}
.flow3-3:hover{background-position: 0 bottom;}

.flow3-4{display: block;
	width: 300px;
	height: 60px;
	background: url(img/flow3-4.gif) no-repeat 0 0; margin:0; float:left;}
.flow3-4:hover{background-position: 0 bottom;}

.flow3-5{width: 300px;
	height: 60px;
	margin:0 0 0 10px; float:left;}

.flow3-6{display: block;
	width: 300px;
	height: 60px;
	background: url(img/flow3-6.gif) no-repeat 0 0; margin:0; float:left;}
.flow3-6:hover{background-position: 0 bottom;}

.flow4{display: block;
	width: 600px;
	height: 60px;
	background: url(img/flow4.gif) no-repeat 0 0; margin:0 10px 0 10px;}
.flow4:hover{background-position: 0 bottom;}

.flow5-1{width: 200px;
	height: 60px;
	margin:0 0 0 10px; float:left;}

.flow5-2{width: 200px;
	height: 60px;
	margin:0; float:left;}

.flow5-3{width: 200px;
	height: 60px;
	margin:0; float:left;}

.flow5-4{display: block;
	width: 200px;
	height: 60px;
	background: url(img/flow5-4.gif) no-repeat 0 0; margin:0 0 0 10px; float:left;}
.flow5-4:hover{background-position: 0 bottom;}

.flow5-5{display: block;
	width: 200px;
	height: 60px;
	background: url(img/flow5-5.gif) no-repeat 0 0; margin:0; float:left;}
.flow5-5:hover{background-position: 0 bottom;}

.flow5-6{display: block;
	width: 200px;
	height: 60px;
	background: url(img/flow5-6.gif) no-repeat 0 0; margin:0; float:left;}
.flow5-6:hover{background-position: 0 bottom;}

.flow6{display: block;
	width: 600px;
	height: 60px;
	background: url(img/flow6.gif) no-repeat 0 0; margin:10px; clear: both;}
.flow6:hover{background-position: 0 bottom;}

.flow7{display: block;
	width: 600px;
	height: 60px;
	background: url(img/flow7.gif) no-repeat 0 0; margin:10px;}
.flow7:hover{background-position: 0 bottom;}

.nouki { margin-left:-50px;}


/* 原稿部分 */

.genkou{text-align:center;}

.genkou img{height:312px; width:423px; border:none;}


/* 特商法部分 */

.tokutei table{
	margin:20px;
	border:1px solid #ddd;
	border-collapse:collapse;}

.tokutei th, .tokutei td{
	border:1px solid #ddd;
	padding:15px 10px;}

.tokutei th{width:138px;}

.tokutei td{width:490px;}


/* よくある質問部分 */

#box { 
	margin:0 4% 30px 4%;
	background-color:#FFFFF8;
	border-radius:8px;
	padding:1em 2em;
	border:#BDAC8C solid 3px;
	box-shadow:rgba(153, 102, 0, 0.227451) 3px 3px 6px 3px;
-webkit-box-shadow:rgba(153, 102, 0, 0.227451) 3px 3px 6px 3px;
-moz-box-shadow:rgba(153, 102, 0, 0.227451) 3px 3px 6px 3px;}

#box h3 {font-size:220%;
	margin:5px 10px 0 10px;
	font-weight:normal;
	color:#F00;}

div.ulfaq {font-size:120%;}

div.ulfaq li{margin:2px 2px 3px 2px;}

.fq_img { margin-left:-60px;}


/* レビュー部分 */

#box2 { background-color:#ffede4;
	padding:1em;
	margin:12px 0 12px -20px;}

#box2 h3 {font-size:180%;
	color:#00bbff;
	margin:5px 10px 0 10px;
	font-weight:normal;}

#box2 p { font-size:100%;
	margin:5px 0;}

#box2 p .name { font-size:120%;
	margin:0;}

#box2 img { margin:0 10px 40px 0;}

#box2 .flt_lft { float:left;}

@media only screen and (max-width: 959px){
	content{width: 95%;}
}