@charset "UTF-8";

/*---------------------------------------------

General Page CSS

for quofirm.com
coded by ryo at 2012-11-05
imported to "$order.html"

---------------------------------------------*/


body{
	padding:30px 10px 30px 10px;
}
div#area-page{
	margin:0 auto 0 auto;
	max-width:730px;
	border:#CCCCCC 1px solid;
	border-radius:10px;        /* CSS3草案 */
	-webkit-border-radius:10px;    /* Safari,Google Chrome用 */
	-moz-border-radius:10px;   /* Firefox用 */
	
	-webkit-box-shadow: 0px 0px 6px 4px #ccc;
	-moz-box-shadow: 0px 0px 6px 4px #ccc;
	box-shadow: 0px 0px 6px 4px #ccc;
	
	background:#FFF;
	padding:30px 30px;
	color:#231815;
	
	behavior:url(PIE.htc);
}
@media screen and (max-width:500px){
body{
	padding:10px 0 30px 0;
}
div#area-page{
	margin:0 auto 0 auto;
	border:none;
	border-radius:0;        /* CSS3草案 */
	-webkit-border-radius:0;    /* Safari,Google Chrome用 */
	-moz-border-radius:0;   /* Firefox用 */
	
	-webkit-box-shadow: 0px 0px 0 0 #ccc;
	-moz-box-shadow: 0px 0px 0 0 #ccc;
	box-shadow: 0px 0px 0 0 #ccc;
	
	padding:0 2%;
}
}

/*---------------------------------------------

#side

---------------------------------------------*/




#main section.sample section.choice{
	margin-bottom:15px;
	-webkit-box-shadow: 4px 4px 2px 0px #dedede;
	-moz-box-shadow: 4px 4px 2px 0px #dedede;
	box-shadow: 4px 4px 2px 0px #dedede;

	border:#FFAE43 solid 1px;  
	border-radius: 12px;        /* CSS3草案 */  
	-webkit-border-radius: 12px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 12px;   /* Firefox用 */ 
	
	background:#FFAE43;
	padding:0 4% 0 4%;
	width:89%;

	behavior:url(PIE.htc);
}
#main section.sample section.choice h3{
	margin:15px 0 0 0;
	color:#FFF;
	font-size:120%;
}
#main section.sample section.choice ul.items{
	margin:5px 0 15px 0;
	padding:10px 0 6px 0;
	min-height:2em;
	background:#FFF;
	overflow:hidden;
}
#main section.sample section.choice ul.items li{
	margin-left:32px;
	list-style:disc;
	float:left;
	line-height:22px;
}





/*---------------------------------------------

header

---------------------------------------------*/

div#area-page header{
	padding:75px 0 0 0;
	width:100%;
	position:relative;
}
.sp div#area-page header{
	margin-top:0;
}
div#area-page header h1{
	margin:6px 0 30px 0;
}
div#area-page header p{
	position:absolute;
	top:0;
}
div#area-page header p.logo{
	left:0;
}
div#area-page header p.info{
	right:0;
	text-align:right;
	line-height:1.4em;
}
div#area-page header p.info span{
	margin-left:4px;
	font-size:130%;
}
@media screen and (max-width:500px){
div#area-page header{
	padding:120px 0 0 0;
}
div#area-page header p.info{
	top:36px;
}
}




/*---------------------------------------------

main

---------------------------------------------*/

#main{
	width:100%;
}
#main section.attention{
	margin:15px 0 0 0;
	position:relative;
}
#main h3.application{
	margin:0 0 25px 0;
	border-left:#0080CC solid 20px;
	-webkit-box-shadow: 4px 4px 2px 0px #dedede;
	-moz-box-shadow: 4px 4px 2px 0px #dedede;
	box-shadow: 4px 4px 2px 0px #dedede;
	
	behavior:url(PIE.htc);

	background-color:#FFF;
	padding:0 0 0 10px;
	width:13em;
	height:34px;
	line-height:34px;
	font-size:130%;
}
#main section.attention p.photo{
	width:35%;
	position:absolute;
	top:-4px;
	right:0;
}
#main section.attention ul{
	margin:0 0 60px 0;
}
#main section.attention ul li{
	margin:0 0 12px 0;
	background:url(img/bg-list.png) no-repeat 0 3px;
	padding:0 0 0 20px;
	width:61%;
	font-size:110%;
	line-height:1.2em;
	letter-spacing:0.1em;
}
#main section.attention ul li a:hover{
	text-decoration:underline;
}
#main section.attention ul li.last{
	width:90%;
}
#main section.attention ul li p{
	margin:4px 0 0 0;
	font-size:80%;
}
#main section.attention ul li span{
	color:#E55927;
	font-weight:nomal;
}


#main section.supplement{
	margin:0 0 30px 0;
	background:url(img/il-application.png) top right no-repeat;
	padding:20px 0 0 1%;
	height:169px;
	font-size:120%;
}
#main section.supplement div{
	border:#F8D600 solid 2px;
	border-radius: 12px;        /* CSS3草案 */  
	-webkit-border-radius: 12px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 12px;   /* Firefox用 */
	padding:8px 0 16px 0;
	width:68%;
	text-align:center;
	behavior:url(PIE.htc);
}
#main section.supplement dl dt{
	font-size:110%;
	height:37px;
	line-height:37px;
}
#main section.supplement dl dt span{
	color:#F8D600;
}
#main section.supplement dl dd{
	margin:0 0 15px 0;
	height:16px;
	line-height:16px;
}
#main section.supplement dl dd a{
	padding:0 0 0 14px;
	background:url(img/bg-link.png) 0 0 no-repeat;
	color:#1B499E;
}
#main section.supplement dl dd a:hover{
	text-decoration:underline;
}



#main section.danger{
	margin:50px 0 40px 0;
	background:#FFFDDD;
	padding:30px 6% 20px 6%;
	width:88%;
	overflow:hidden;
}
#main section.danger h3{
	margin:0 0 18px 0;
	border-left:#F8D600 solid 20px;
	-webkit-box-shadow: 4px 4px 2px 0px #dedede;
	-moz-box-shadow: 4px 4px 2px 0px #dedede;
	box-shadow: 4px 4px 2px 0px #dedede;
	
	behavior:url(PIE.htc);

	background-color:#FFF;
	padding:0 0 0 10px;
	width:13em;
	height:34px;
	line-height:34px;
	font-size:130%;
}
#main section.danger ul li{
	margin-bottom:10px;
	padding-left:1.3em;
	text-indent:-1.3em;
	font-size:100%;
	line-height:1.4;
}
#main section.danger ul li span{
	margin-right:5px;
	color:#F8D600;
}

@media screen and (max-width:700px){
#main section.supplement{
	margin-bottom:35px;
	background:none;
	padding-top:0;
	height:auto;
}
#main section.supplement dl{
	margin:10px 0 25px 0;
	width:98%;
}
}
@media screen and (max-width:600px){
#main section.attention p.photo{
	margin:0 auto 8px auto;
	width:60%;
	position:static;
}
#main section.attention ul li{
	margin:0 0 10px 0;
	width:95%;
	font-size:110%;
}
#main section.attention ul li span{
	font-size:100%;
}
#main section.attention ul li p{
	font-size:90%;
}
#main section.supplement{
	padding-left:0;
	font-size:100%;
}
#main section.supplement dl dt{
	padding:4px 0 4px 0;
	width:auto;
	height:auto;
	line-height:1.1em;
	font-size:100%;
}
#main section.danger{
	padding:21px 2% 15px 2%;
	width:96%;
}
#main section.danger h3{
	margin:0 0 10px 0;
}
#main section.danger ul li{
	margin-bottom:6px;
	font-size:100%;
}
}



/*article#main section.block h2.application{
	width:96%;
	padding-left:4%;
	background:url(img/bg-application.jpg) 0 0 repeat-x;
}
*/
#main section.block p.list{
	margin:15px 0 2px 0;
	font-size:130%;
}
#main section.block p.list span{
	color:#F1AB40;
	font-size:120%;
}
#main section.block ul.at{
	margin: 0 0 32px 70px;
}
#main section.block ul.at li{
	margin: 0 0 5px 0;
	list-style:disc;
}
#main section.block section.sample,
#main section.block section.question,
#main section.block section.customer{
	margin:15px 0 0 0;
	background:#FFF9E2;
	padding:10px 0 10px 10px;
}
#main section.block section.sample,
#main section.block section.question{
	margin-bottom:55px;
}
#main section.block section.sample section.list{
	width:100%;
	overflow:hidden;
    margin-top: 30px¥9; /* IE8 and below */
    *margin-top: 30px; /* IE7 and below */
    _margin-top: 30px; /* IE6 */
}
#main section.block section.sample section.house p{
	margin-top:20px;
}
.pc #main section.block section.sample section.wax{
	clear:both;
}
#main section.sample section.list h3{
	position:relative;
	border-left:#83DB37 solid 20px;
	-webkit-box-shadow: 4px 4px 2px 0px #dedede;
	-moz-box-shadow: 4px 4px 2px 0px #dedede;
	box-shadow: 4px 4px 2px 0px #dedede;
	
	behavior:url(PIE.htc);

	background-color:#FFF;
	padding:0 0 0 2%;
	width:136px;
	height:34px;
	line-height:34px;
	color:#000;
	font-weight:normal;
	font-size:110%;
}
:root *> #main section.sample section.list h3{
    position: relative; /* IE6～8 */
}
#main section.sample section.list h3:not(:target) {
    position: relative¥9; /* IE9 */
}
.sp #main section.sample section.list h3{
	margin-bottom:15px;
	border-left:#83DB37 solid 35px;
	padding:0 0 0 2%;
	width:80%;
	height:60px;
	line-height:60px;
	font-size:180%;
}
#main section.block section.sample section.wash h3{
	border-left-color:#FF318F;
}
#main section.block section.sample section.wall h3{
	border-left-color:#863ECC;
}
#main section.block section.sample section.wax h3{
	border-left-color:#3BCCFF;
}
#main section.block section.sample section.house h3{
	border-left-color:#FF5F2E;
}
#main section.block section.sample section.color h3{
	border-left-color:#FC0;
}
#main section.block section.sample section.item{
	position:relative;
	margin:8px 2% 25px 0;
	border-top:#83DB37 solid 4px;
	-webkit-box-shadow: 4px 4px 2px 0px #dedede;
	-moz-box-shadow: 4px 4px 2px 0px #dedede;
	box-shadow: 4px 4px 2px 0px #dedede;
	
	behavior:url(PIE.htc);

	padding:8px 1%;
	width:29%;
	float:left;
	background:#FFF;
}
#main section.block section.sample section.wash section.item{
	border-top-color:#FF318F;
}
#main section.block section.sample section.wall section.item{
	border-top-color:#863ECC;
}
#main section.block section.sample section.wax section.item{
	border-top-color:#3BCCFF;
}
#main section.block section.sample section.house section.item{
	border-top-color:#FF5F2E;
}
#main section.block section.sample section.color section.item{
	border-top-color:#FC0;
}
#main section.block section.sample section.no130{
	width:63%;
}
#main section.block section.sample section.no150,
#main section.block section.sample section.no330{
	width:42%;
}
#main section.block section.sample section.item dl{
	position:relative;
}
#main section.block section.sample section.paint dl dt,
#main section.block section.sample section.color dl dt{
	font-weight:bold;
	font-size:110%;
}
#main section.block section.sample section.paint dl dd,
#main .sample section.item dl dd{
	margin:10px 0 15px 0;
	width:61%;
	font-size:90%;
}
#main .sample section.item dl dd{
	margin-bottom:10px;
}
#main section.block section.sample section.paint dl dd img,
#main section.block section.sample section.color dl dd img,
#main .sample section.item dl dt img{
	position:absolute;
	top:52px;
	right:0;
}
#main .sample section.item dl dt img,
#main .sample section.list section.no452 dl dt img{
	top:18px;
}
#main .sample section.house dl dt img{
	top:0px;
}
#main section.sample section.no328 dl dt img{
	top:45px;
}
#main .sample section.item p input,
#main .sample section.item p label{
	display:inline;
	vertical-align:middle;
	font-size:110%;
	font-weight:bold;
	line-height:20px;
}
#main section.block section.sample section.paint section.no130 dl dd img{
	top:10px;
	right:12%;
}
#main section.block section.sample section.paint section.no130 ul{
	margin:0 0 0 -3%;
	overflow:hidden;
	width:100%;
}
#main section.block section.sample section.paint section.no130 ul span.block,
#main section.block section.sample section.paint section.no130 ul span.block2{
	margin:0 0 0 3%;
	display:block;
	float:left;
}
#main section.block section.sample section.paint section.no130 ul span.block2{
	margin:0 0 0 15%;
}
#main section.block section.sample section.paint section.no130 ul li.first{
	margin-left:3%;
}
#main section.block section.sample section.paint section.no130 ul li{
    margin-left: 3%¥9; /* IE8 and below */
    *margin-left: 3%; /* IE7 and below */
    _margin-left: 3%; /* IE6 */
}
#main section.block section.sample section.paint section.no130 p{
	margin:6px 0 0 3px;
}
#main section.block section.sample section.paint ul{
}
#main section.block section.sample section.paint ul li,
#main section.block section.sample section.color ul li{
	margin:0 0 6px 0;
	height:18px;
	line-height:18px;
}
#main section.block section.sample section.paint ul li img,
#main section.block section.sample section.color ul li img,
#main section.block section.sample section.paint ul li input{
	vertical-align:middle;
}
#main .sample section.item p.mark{
	text-align:right;
	color:#727171;
}
html body #main section.sample section.list section.item p.catalog{
	margin:10px 0 10px 0;
	font-size:110%;
}
html body #main section.sample section.list section.item dt p.catalog{
	margin:8px 0 16px 0;
	font-size:100%;
}
html body #main section.sample section.list section.item p.catalog a{
	background-color:#FF0;
}
#main section.block section.sample section.item p.catalog img{
	vertical-align:top;
	position:static;
}
@media screen and (max-width:670px){
#main section.block section.sample section.paint section.no130 ul span.block2{
	margin:0 0 0 3%;
}
}
@media screen and (max-width:500px){
#main section.block p.list{
	font-size:120%;
	font-weight:bold;
}
#main section.block p.list span{
	font-size:100%;
}
#main section.block ul.at{
	margin:6px 0 10px 15px;
}
.pc #main section.block section.sample section.wash,
.pc #main section.block section.sample section.wall{
	width:100%;
	float:none;
}
#main section.block section.sample section.item,
#main section.block section.sample section.wall section.item,
#main section.block section.sample section.wash section.item{
	margin:8px 4% 25px 0;
	padding:20px 3%;
	width:90%;
	float:none;
}
#main section.block section.sample section.paint section.no130 dl dd img{
	top:16px;
	right:5%;
}
#main section.block section.sample section.paint dl dd img,
#main .sample section.item dl dt img{
	top:0px;
	right:4%;
}
#main .sample section.item dl dt img{
	top:20px;
	right:8%;
}
#main section.sample section.no328 dl dt img{
	top:25px;
}
}
@media screen and (max-width:420px){
#main .sample section.item dl dt img,
#main section.block section.sample section.paint section.no130 dl dd img{
	top:24px;
}
#main section.block section.sample section.item{
	margin:8px 2% 8px 0;
}
}




















section.question{
    position:relative;
}
section.question section.block,
section.customer section.block{
    position:relative;
	-webkit-box-shadow: 4px 4px 2px 0px #dedede;
	-moz-box-shadow: 4px 4px 2px 0px #dedede;
	box-shadow: 4px 4px 2px 0px #dedede;
	
	behavior:url(PIE.htc);

	margin:0 12px 8px 0;
	padding:10px 0 10px 3%;
	background:#FFF;
}
:root *> section.question section.block{
    position: relative; /* IE6～8 */
}
section.question section.block:not(:target){
    position: relative¥9; /* IE9 */
}
section.question section.block input,
section.customer section.block input{
	margin:0 0 5px 0;
}
section.question section.block ul{
	margin:5px 0 22px 0;
}
section.question section.block ul li{
	margin:0 0 0 17px;
}
section.question section.block ul li p.url{
	margin:4px 0 4px 35px;
}
section.question section.block ul li p{
	margin:0 0 15px 35px;
	display:none;
}
section.question p.girl{
	position:absolute;
	bottom:90px;
	right:80px;
}
@media screen and (max-width:570px){
section.question section.block input,
section.customer section.block input{
	margin:0 0 1px 0;
}
section.question section.block ul li p,
section.question section.block ul li p.url,
section.question section.block ul li{
	margin-left:10px;
}
section.question section.block ul li{
	margin-left:0px;
}
section.question p.girl{
	display:none;
}
}








<!-- 下はアップしたら消してね -->
ul.an{
	margin:5px 0 22px 0;
}
ul.an li{
	margin:0 0 0 17px;
}
ul.an li p.url{
	margin:8px 0 4px 35px;
}
ul.an li p{
	margin-left:35px;
	display:none;
}
<!-- 上はアップしたら消してね -->



section.customer dl.info{
	width: 100%;
	overflow:hidden;
	margin-bottom:20px;
}
section.customer dl.info dt{
	width:120px;
	float:left;
	margin:3px 0 0 0;
}
section.customer dl.info dd{
	margin:0 0 10px 0;
}
@media screen and (max-width:570px){
section.customer dl.info dt{
	margin:0;
	float:none;
}
section.customer dl.info dd{
	margin:0 0 14px 0;
}
section.customer dl.info dt.postcode{
	width:1.3em;
	float:left;
}
section.customer dl.info dd.postcode{
	margin-left:0;
	float:left;
}
section.customer dl.info dt.ken{
	clear:both;
}
}




/* -----------------詳細記入欄---------------- */

input.book_name,
input.search_name,
input.link_name,
input.others_name,
input.contents_q2,
input.contents_q3,
input.url_q4,
input.q5{
	width:45%;
}
@media screen and (max-width:570px){
input.book_name,
input.search_name,
input.link_name,
input.others_name,
input.contents_q2,
input.contents_q3,
input.url_q4,
input.q5{
	width:65%;
}
input#strt21{
	width:80%;
}
input#addr21,
input#tel,
input#mail{
	width:65%;
}
}




p.at{
	color:#F00;
}
li.one{
	margin:0 0 0 15px;
}
p.dasu{
	text-align:center;
	margin-top:12px;
	cursor:pointer;
}
p.answer{
	color:#F00;
	margin:35px 0 0 20px;
}
p.botton,
p.b_after{
	text-align:center;
	margin:17px auto 0 auto;
}
p.b_after{
	display:none;
}




/* -----------------アラート---------------- */


p.warning,em{
	color:#F00;
	margin-top:4px;
}
section.question em.warning{
	display:block;
	margin-top:-12px;
	margin-bottom:25px;
}
input{
}
input.NG{
	background-color:#ff9999;
}

p.recess{
	margin:30px 0 40px 0;
	color:#F00;
	font-weight:bold;
	font-size:130%;
}
p.recess span{
	background-color:#FF0;
}
.sp p.recess{
	margin:10px 0;
	font-size:100%;
	line-height:14px;
}












/* -----------------送信後画面---------------- */



p.send,
p.kakunin{
	margin:10px 0;
}