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

/*-----------------------------------------------
 guide,question
-----------------------------------------------*/

/*共通ページ内リンク*/
ul.pageLink{
	width: 100%;
	margin: 20px 0 30px;
	text-align: center;
}

ul.pageLink li{
	display: inline-block;
	width: 21%;
	margin: 0;
	vertical-align: middle;
}
ul.pageLink li a{
	display: block;
	background: #9d7755;
	color: #fff;
	padding: 5px 15px 5px 10px;
	font-weight: bold;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
}
ul.pageLink li a:after{
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
}
ul.pageLink li a:hover{
	background: #f7c80c;
}

@media screen and ( max-width: 736px ){
	.textBox{
		margin: 0 10px 15px;
	}

	/*ページ内リンク*/
	ul.pageLink li{
		display: inline-block;
		width: 46%;
		margin: 0 5px 10px;
		vertical-align: middle;
	}
}

/*共通ボックス*/
.guideBox > div{
	margin-bottom: 50px;
}
.guideBox dl.miniCont{
	width: 48%;
	margin: 0 1% 15px;
	padding: 10px 15px;
	border: 5px solid #ede8e6;
	border-radius: 10px;
	box-sizing: border-box;
}
.guideBox dl.miniCont dt{
	color: #ff7417;
	padding: 5px 10px 5px 20px;
	font-size: 16px;
	font-weight: bold;
	position: relative;
}
.guideBox dl.miniCont dt:before{
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border: 3px solid #ff7417;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.guideBox div div dl.miniCont:nth-of-type(1){
	float: left;
}
.guideBox div div dl.miniCont:nth-of-type(2){
	float: right;
}
.guideBox dl.underBox{
	width: 98%;
	margin: 15px 1%;
	float: none;
}

@media screen and ( max-width: 736px ){
	.guideBox div div dl.miniCont:nth-of-type(1){
		width: 96%;
		margin: 15px auto 30px;
		float: none;
	}
	.guideBox div div dl.miniCont:nth-of-type(2){
		width: 96%;
		margin: 15px auto 20px;
		float: none;
	}
	.guideBox dl.underBox{
		width: 96%;
		margin: 15px auto 20px;
	}
}

/*--------カートの使い方--------*/
.cartBox {
	padding-bottom: 10px;
}
.cartBox dl{
	min-height: 260px;
	background-repeat: no-repeat;
	background-position: right top;
	margin-bottom: 50px;
	padding-right: 465px;
	position: relative;
}
.cartBox dl:after{
	content: "";
	display: block;
	box-sizing: border-box;
	width: 0;
	height: 0;
	border: 40px solid transparent;
	border-top: 20px solid #ff7417;
	position:absolute;
	right: 0;
	left: 0;
	bottom: -70px;
	margin: auto;
}
.cartBox dl:last-child:after{
	display: none;
}
.cartBox dl dt{
	background: #ffeeac;
	color: #984428;
	margin-bottom: 10px;
	padding: 5px 10px;
	font-size: 18px;
	font-weight: bold;
	border-radius: 5px;
}
.cartBox dl dd{
	padding-left: 10px;
}

.cartStep01{
	background-image: url(../../_images/guide/guide_cart_img01.jpg);
}
.cartStep02{
	background-image: url(../../_images/guide/guide_cart_img02.jpg);
}
.cartStep03{
	background-image: url(../../_images/guide/guide_cart_img03.jpg);
}
.cartStep04{
	background-image: url(../../_images/guide/guide_cart_img04.jpg);
}

@media screen and ( max-width: 736px ){
	/*カートの使い方*/
	.cartBox dl{
		min-height: auto;
		background-size: 450px auto;
		background-position: center bottom;
		margin: 0 1% 50px;
		padding-right: 0;
		padding-bottom: 280px;
	}
	.cartBox dl dd{
		padding: 0 10px;
	}
}

@media screen and ( max-width: 480px ){
	/*カートの使い方*/
	.cartBox dl{
		background-size: 340px auto;
		padding-bottom: 220px;
	}
}

/*--------送料--------*/
.costBox {
	padding-bottom: 10px;
}
.costBox .costList{
	background: url(../../_images/guide/guide_map.gif) no-repeat right;
	min-height: 250px;
	margin: 0 50px 20px;
}
.costBox .costList dl{
	width: 350px;
	background: #ebebeb;
	margin: 10px 0;
	font-weight: bold;
	border-radius: 10px;
}
.costBox .costList dl dt{
	background: #ccc;
	width: 50%;
	padding: 15px 15px;
	font-size: 16px;
	border-radius: 10px 0 0 10px;
	box-sizing: border-box;
	float: left;
	position: relative;
}
.costBox .costList dl dt:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 15px solid #ccc;
	position: absolute;
	right: -14px;
	top: 0;
	bottom: 0;
	margin: auto;
	box-sizing: border-box;
}
.costBox .costList dl dd{
	color: #d31a1a;
	width: 50%;
	padding: 15px 30px;
	font-size: 18px;
	text-align: center;
	box-sizing: border-box;
	float: right;
}
.costBox .costList dl.list01 dt{
	background: #e49d9d;
}
.costBox .costList dl.list01 dt:after{
	border-left: 15px solid #e49d9d;
}
.costBox .costList dl.list02 dt{
	background: #f0d245;
}
.costBox .costList dl.list02 dt:after{
	border-left: 15px solid #f0d245;
}
.costBox .costList dl.list03 dt{
	background: #7bc9e2;
}
.costBox .costList dl.list03 dt:after{
	border-left: 15px solid #7bc9e2;
}


.costBox .deliveryBox{
	margin: 20px 0;
}
.costBox .deliveryBox dl.deli01 dd{
	background: url(../../_images/guide/guide_delivery01.gif) no-repeat top;
	padding-top: 150px;
}
.costBox .deliveryBox dl.deli02 dd{
	background: url(../../_images/guide/guide_delivery02.gif) no-repeat top;
	padding-top: 150px;
}
@media screen and ( max-width: 736px ){
	/*送料*/
	.costBox {
		padding-bottom: 0;
	}
	.costBox .costList{
		background: url(../../_images/guide/guide_map.gif) no-repeat top;
		background-size: 70%;
		padding-top: 50%;
		min-height: auto;
		margin: 0 2% 20px;
	}
	.costBox .costList dl{
		width: 100%;
		background: #ebebeb;
		margin: 10px 0;
		font-weight: bold;
		border-radius: 10px;
	}

	.costBox .deliveryBox dl.deli01 dd{
		background-size: 90%;
		padding-top: 42%;
	}
	.costBox .deliveryBox dl.deli02 dd{
		background-size: 90%;
		padding-top: 42%;
	}

}

/*--------入金方法--------*/
.paymentBox{
	padding-bottom: 20px;
}
.paymentBox dl.underBox dl{
	display: table;
	width: 100%;
	margin: 0;
	border-spacing: 5px;
}
.paymentBox dl.underBox dl dt{
	display: table-cell;
	width: 12%;
	background: #f7c80c;
	color: #333;
	padding: 3px;
	text-align: center;
	font-size: 14px;
	border-radius: 5px;
}
.paymentBox dl.underBox dl dt:before{
	display: none;
}
.paymentBox dl.underBox dl dd{
	display: table-cell;
}

.paymentBox dl.underBox div dl{
	width: 48%;
	float: left;
}
.paymentBox dl.underBox div dl dt{
	width: 26%;
}

@media screen and ( max-width: 736px ){
	/*入金方法*/
	.paymentBox dl.underBox dl dt{
		width: 28%;
	}
	.paymentBox dl.underBox dl dd{
		padding: 3px;
	}
	
	.paymentBox dl.underBox div dl{
		width: 100%;
		float: none;
	}
	.paymentBox dl.underBox div dl dt{
		width: 28%;
	}
	
}

/*--------返品交換--------*/
.returnBox dl.return01 dd{
	background: url(../../_images/guide/guide_return01.gif) no-repeat top;
	padding-top: 130px;
}
.returnBox dl.return02 dd{
	background: url(../../_images/guide/guide_return02.gif) no-repeat top;
	padding-top: 130px;
}
.returnBox dl.return03{
	width: 98%;
	margin: 0 1% 20px;
}


/*--------お見積りから納品まで--------*/
.flowBox{
	padding-bottom: 40px;
	position: relative;
}
.flowBox:before,
.flowBox:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	border: 20px solid transparent;
	border-top: 20px solid #ffdf4a;
}
.flowBox:before{
	bottom: -25px;
}
.flowBox:after{
	bottom: -45px;
}
.flowBox:last-child:before,
.flowBox:last-child:after{
	display: none;
}
.flowBox p{
	margin: 0 1%;
}

.flowBox .hBox{
	background: url(../../_images/common/bg_shaded_yellow.gif) repeat;
	margin: 0 0 30px 60px;
	padding-left: 10px;
}
.flowBox .hBox h3{
	color: #2c2c2c;
	padding: 15px;
	font-size: 22px;
	font-weight: bold;
	position: relative;
}

.flowBox .hBox h3:before{
	content: "";
	color: #fff;
	background: url(../../_images/guide/step_bg.png) no-repeat;
	width: 74px;
	height: 74px;
	position: absolute;
	left: -70px;
	top: -10px;
	padding: 15px 0;
	font-size: 33px;
	font-weight: bold;
	text-align: center;
}

.flowBox div.imgBox{
	background-size: 450px;
	min-height: 225px;
	padding: 15px 0 15px 470px;
	box-sizing: border-box;
}
.step01 div.imgBox{
	background: url(../../_images/guide/flow_img01.jpg) no-repeat;
	background-size: 100%;
	padding: 670px 0 0 0;
}
.step02 div.imgBox{
	background: url(../../_images/guide/flow_img02.jpg) no-repeat left top;
}
.step03 div.imgBox{
	background: url(../../_images/guide/flow_img03.jpg) no-repeat left top;
}
.step04 div.imgBox{
	background: url(../../_images/guide/flow_img04.jpg) no-repeat left top;
}
.step05 div.imgBox{
	background: url(../../_images/guide/flow_img05.jpg) no-repeat left top;
}
.step06 div.imgBox{
	background: url(../../_images/guide/flow_img06.jpg) no-repeat left top;
}


.flowBox ul.linkBtnBox{
	margin: 20px 20px 0;
	padding: 10px;
}
.flowBox ul.linkBtnBox li{
	margin: auto;
	font-size: 18px;
	text-align: center;
	box-sizing: border-box;
}
.flowBox ul.linkBtnBox li{
	width: 50%;
	float: left;
}
.flowBox ul.linkBtnBox li a{
	display: block;
	background: #ccc;
	color: #fff;
	width: 92%;
	margin: auto;
	padding: 20px 0;
	font-weight: bold;
	border-radius: 5px;
}

/*--------FAXでお見積り依頼する場合--------*/
.faxBox{
	padding-bottom: 0px;
}
.faxBox p{
	margin: 0 1%;
}

.faxBox .hBox{
	background: url(../../_images/common/bg_shaded_yellow.gif) repeat;
	margin: 0 0 30px 60px;
	padding-left: 10px;
}
.faxBox .hBox h3{
	color: #2c2c2c;
	padding: 15px;
	font-size: 22px;
	font-weight: bold;
	position: relative;
}

.faxBox .hBox h3:before{
	content: "";
	color: #fff;
	background: url(../../_images/guide/step_bg.png) no-repeat;
	width: 74px;
	height: 74px;
	position: absolute;
	left: -70px;
	top: -10px;
	padding: 15px 0;
	font-size: 33px;
	font-weight: bold;
	text-align: center;
}

.faxBox ul.linkBtnBox{
	margin: 20px 20px 0;
	padding: 10px;
}
.faxBox ul.linkBtnBox li{
	margin: auto;
	font-size: 18px;
	text-align: center;
	box-sizing: border-box;
}
.faxBox ul.linkBtnBox li{
	width: 100%;
}
.faxBox ul.linkBtnBox li a{
	display: block;
	background: #ccc;
	color: #fff;
	width: 92%;
	margin: auto;
	padding: 20px 0;
	font-weight: bold;
	border-radius: 5px;
}
.faxBox ul.linkBtnBox li.faxBtn a{
	width: 70%;
}

/*FAX用紙*/
.faxBox .faxSample{
	background: url(../../_images/guide/fax_sample.gif) no-repeat left top;
	min-height: 600px;
	padding-left: 440px;
}
.faxBox .faxSample dl{
	margin-bottom: 15px;
	padding: 10px 0;
}
.faxBox .faxSample dl dt{
	margin-bottom: 20px;
	padding-left: 55px;
	position: relative;
}
.faxBox .faxSample dl dt:before{
	content: "";
	display: block;
	width: 43px;
	height: 43px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.faxBox .faxSample dl.point01 dt:before{
	background: url(../../_images/guide/fax_sample_point01.gif) no-repeat;
}
.faxBox .faxSample dl.point02 dt:before{
	background: url(../../_images/guide/fax_sample_point02.gif) no-repeat;
}
.faxBox .faxSample dl.point03 dt:before{
	background: url(../../_images/guide/fax_sample_point03.gif) no-repeat;
}
.faxBox .faxSample dl.point04 dt:before{
	background: url(../../_images/guide/fax_sample_point04.gif) no-repeat;
}
.faxBox .faxSample dl.point05 dt:before{
	background: url(../../_images/guide/fax_sample_point05.gif) no-repeat;
}


/*-------お見積りから納品まで/FAXでお見積り依頼する場合　共有--------*/
.step01 .hBox h3:before{ content: "1";}
.step02 .hBox h3:before{ content: "2";}
.step03 .hBox h3:before{ content: "3";}
.step04 .hBox h3:before{ content: "4";}
.step05 .hBox h3:before{ content: "5";}
.step06 .hBox h3:before{ content: "6";}


ul.linkBtnBox li.faxBtn a{
	background: #33bb3a;
}
ul.linkBtnBox li.cartBtn a{
	background: #ffa800;
}
ul.linkBtnBox li a:hover{
	opacity: 0.6;
}

ul.linkBtnBox li.faxBtn2{
	width: 70%;
	background: #fff;
	padding: 15px 30px;
	color: #33bb3a;
	font-size: 20px;
	font-weight: bold;
	border-radius: 10px;
	border: 2px solid #33bb3a;
}
ul.linkBtnBox li.faxBtn2 span{
	font-size: 29px;
}
ul.linkBtnBox li.faxBtn2 br{
	display: none;
}




@media screen and ( max-width: 736px ){
	/*--------お見積りから納品まで--------*/
	div.flowBox{
		  margin: 0 1% 50px;
	}
	.flowBox .hBox h3{
		font-size: 18px;
		font-weight: bold;
	}

	.flowBox div.hBox{
		margin-bottom: 20px;
	}
	.flowBox div.imgBox{
		background-position: left top;
		padding: 0 0 0 0;
		padding-top: 45%;
	}
	.step01 div.imgBox{
		background: url(../../_images/guide/flow_img01.jpg) no-repeat center top;
		background-size: 80%;
		padding-top: 65%;
	}
	.step02 div.imgBox{
		background: url(../../_images/guide/flow_img02.jpg) no-repeat center top;
		background-size: 80%;
	}
	.step03 div.imgBox{
		background: url(../../_images/guide/flow_img03.jpg) no-repeat center top;
		background-size: 80%;
	}
	.step04 div.imgBox{
		background: url(../../_images/guide/flow_img04.jpg) no-repeat center top;
		background-size: 80%;
	}
	.step05 div.imgBox{
		background: url(../../_images/guide/flow_img05.jpg) no-repeat center top;
		background-size: 80%;
	}
	.step06 div.imgBox{
		background: url(../../_images/guide/flow_img06.jpg) no-repeat center top;
		background-size: 80%;
	}

	div.faxBox{
		  margin: 0 1% 30px;
	}
	/*FAX用紙*/
	.faxBox .faxSample{
		background: url(../../_images/guide/fax_sample.gif) no-repeat top center;
		background-size: 60%;
		padding-left: 0;
		padding-top: 90%;
	}
	.faxBox .faxSample dl{
		margin-bottom: 15px;
		padding: 10px 0;
	}
	.faxBox .faxSample dl dt{
		margin-bottom: 20px;
		padding-left: 55px;
		position: relative;
	}
	.faxBox .faxSample dl dt:before{
		content: "";
		display: block;
		width: 43px;
		height: 43px;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.faxBox .faxSample dl.point01 dt:before{
		background: url(../../_images/guide/fax_sample_point01.gif) no-repeat;
	}
	.faxBox .faxSample dl.point02 dt:before{
		background: url(../../_images/guide/fax_sample_point02.gif) no-repeat;
	}
	.faxBox .faxSample dl.point03 dt:before{
		background: url(../../_images/guide/fax_sample_point03.gif) no-repeat;
	}
	.faxBox .faxSample dl.point04 dt:before{
		background: url(../../_images/guide/fax_sample_point04.gif) no-repeat;
	}

	.flowBox ul.linkBtnBox{
		margin: 20px 0 0;
		padding: 10px;
	}
	.flowBox ul.linkBtnBox li{
		width: 100%;
		margin: 10px 0;
		float: none;
	}
	.flowBox ul.linkBtnBox li a{
		width: 100%;
	}

	.faxBox ul.linkBtnBox li.faxBtn a,
	ul.linkBtnBox li.faxBtn2{
		width: 90%;
	}

	ul.linkBtnBox li.faxBtn2 br{
		display: inline-block;
	}
}


/*--------よくある質問--------*/
/*FAQ部分*/
.questionBox > div.faqBox{
	margin-bottom: 50px;
}
.questionBox dl{
	margin: 10px 0;
}
.questionBox dl dt{
	background: #d8c79f url(../../_images/common/icon_question_brown.png) no-repeat 0.8em 50%;
	margin-bottom: 10px;
	padding: 5px 80px 5px 40px;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
}
.questionBox dl label dt{
	display: block;
	position: relative;
}

.questionBox dl label dt:before,
.questionBox dl label dt:after{
	content: "";
	display: block;
	width: 15px;
	height: 2px;
	background: #73594c;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
	box-sizing: border-box;
    transition: 0.3s;
}
.questionBox dl label dt:before{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.questionBox dl label dt:after{
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.questionBox dl dd{
	background: url(../../_images/common/faq_answer.gif) no-repeat left top;
	margin: 0 15px;
    padding-left: 50px;
}
.questionBox dl dd p{
	margin-bottom: 10px;
}

/*開閉*/
.questionBox dl input{
	display: none;
}
.questionBox dl dd{
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
}
.questionBox input:checked + label + dd{
	max-height: 200px;
}
.questionBox input:checked + label dt:before{
/*	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);*/
	opacity: 0;
}
.questionBox input:checked + label dt:after{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}


@media screen and ( max-width: 736px ){
	/*--------よくある質問--------*/
	div.faqBox{
		  margin: 0 1% 50px;
	}
}


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