@charset "UTF-8";/* CSS Document */

/* 共通部分 */

body { font-family:"メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-image:url(img/body_back.gif);
	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:#ff5500;
	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:980px;
	margin:0 auto;}

#header { background-color:#f3e7d1; 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; border:0;}

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

.headline h1 {font-size:100%; font-weight:bold; 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:90px; top:5px;}

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

.inqadv { color:#ff5500;
	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;}
.voice { float:right; color:#00F; margin-right:20px;}

#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:#FF6600;
	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:".";}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 959px){
	#content {width:95%;overflow: auto;}
	#header {width:100%;margin:0;}
	.logo {width:100%;height:0;padding-bottom:calc(100% * 100 / 800);background-size: contain;}
	.logoinq{ display: none;}
	.logotel{ display: none;}
	#main{width: 100%;float: none;}
	h2{height: auto;background-size: cover;background-image:url(img/h2_back.gif);padding:2px 20px;}
	.base{margin-left: 0;}
}


/* サイドバー部分 */

#sideWrap { background-color:#FFF; width:280px; float:right; margin:0 0 15px 0; padding:0; border-bottom:1px solid #FFF; position:relative;}
#side { background-color:#f3e7d1; 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;}
@media only screen and (max-width: 959px){
	#sideWrap { float: none;
    width: 100%;
    height: auto !important;
    clear: both;
	margin: 0 auto 1% auto;}
	#side {position: static !important;
    width: 100%;
	height: auto;}
	.snav1{display: none;}
	.snav2,.snav3,.snav4,.snav5,.snav6,.snav7,.snav8,.snav9,.snav10{width: 32%;
	height: 0;
	padding-bottom: calc(32% * 78 / 275);
	background-size: cover;
	display: inline-block;}
	.snav2:hover,.snav3:hover,.snav4:hover,.snav5:hover,.snav6:hover,.snav7:hover,.snav8:hover,.snav9:hover,.snav10:hover{background-position: 0 top;}
	.snav11,.snav12,.snav13{display: none;}
}


/* フッター部分 */

#footer { background-color:#E9E9DE; 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;}
#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:#f3e7d1;
	padding:0 5px 0 40px; float:left; height:400px; width:170px; border:0;}
.ftul2 {background-color:#f3e7d1;
	padding:0 0 0 30px; float:left; height:400px; width:250px; position: relative; border:0;}
.ftul3 {background-color:#f3e7d1;
	padding:0 0 0 30px; float:left; height:400px; width:220px; position: relative; border:0;}
.ftul4 {background-color:#f3e7d1;
	padding:0; float:left; height:400px; 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:0px; bottom:110px;}
.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:175px; bottom:60px;}
.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:107px; bottom:60px;}
.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:50px; bottom:60px;}
.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:0px; bottom:60px;}
.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:0px; bottom:10px;}
.ftimg6:hover{background-position: 0 bottom;}

.copylight { margin-left:10px;}
@media only screen and (max-width: 959px){
	#footer{width: 100%;}
	.ftul{width: calc(50% - 45px);}
	.ftul2{width: calc(50% - 30px);}
	.ftul3{width: calc(50% - 30px);}
	.ftul4{width: 50%;}
	.ftimg{left: auto;right: 0;}
}


/* ボタン部分 */

.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;}

.cmpnbtn2_o{display: block;
	width: 300px;
	height: 80px;
	background: url(img/btn/cmpnbtn2_o.gif) no-repeat 0 0; margin-right:10px;}
.cmpnbtn2_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;}

.top_smpl { margin-left:20px;}

.top_design { margin-left:90px;}

.calender { margin-left:-25px;}
.calender iframe{width:640px; height:480px;}
@media only screen and (max-width: 959px){
	.topbn { width:32%; height:auto; float:none; margin:0 auto;display: inline-block;}
	.top_smpl{width: 100%;margin: 0;}
	.cmpn_btn_g2, .indx_btn_g2,.smpl_btn_g2,.flow_btn_g2, .pirc_btn_g2,.gen_btn_g2, .thx_btn_g2 {width: 50%;height: auto;margin: 0 auto;}
	.smplbtn_o,.designbtn_o,.omitumoribtn_b{width: 100%;height: 0;margin: 0;padding-bottom: calc(100% * 80 / 300);background-size: cover;}
	.smplbtn_o:hover,.designbtn_o:hover,.omitumoribtn_b:hover{background-position: 0 bottom;}
	.top_design{margin: 0;width: 100%;}
	.calender{width: 100%;margin: 0;}
	.calender iframe{width:100%;}
}


/* 価格表 */

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

.price h3 {
	font-size:220%;
	font-weight:normal;
	color:#FF6600;
	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: 660px;
	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 2px;
	vertical-align: middle;
	text-align: left;
	font-weight: bold;}

.price table td {
	color: #222;
	padding: 6px 2px;
	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.r9, .price table th.r9,
.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: 100px;
	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;}

.prc_3d { margin-left:90px;}
@media only screen and (max-width: 959px){
	.prc_3d{margin: 0 auto;width: 100%;}
}

/* お見積り部分 */

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

.thx h3 {
	font-size:220%;
	font-weight:normal;
	color:#FF6600;
	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:#FF6600;
	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;
	-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-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:#f3e7d1;
	padding:1em;
	margin:12px 0 12px -20px;}

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

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

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

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

.box2 .img2 { margin:0 10px 10px 0;}

.box2 .img3 { margin:0 8px 10px 0;}

.box2 .flt_lft { float:left;}

.voicem {
	float:left;
	color:#00F;
	margin:-15px 0 10px 40px;
	font-size:140%;
	font-weight:600;}
@media only screen and (max-width: 959px){
	.box2{width: 100%;margin: 0;box-sizing: border-box;}
}