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

/**/
.textBox p{
	line-height: 2.0em;
}

/*よくある質問*/
.qaCont{
	margin-bottom: 40px;
}

.qaCont ul.selectList{
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 30px auto;
}
.qaCont ul.selectList li{
	width: 245px;
	min-height: 90px;
	background-repeat: no-repeat;
	margin: 0;
	font-size: 18px;
	font-weight: bold;
}
.qaCont ul.selectList li a{
	display: block;
	height: 100%;
	color: #fff;
	padding: 30px 10px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	transition: all 0.3s ease-out;
}

.qaCont ul.selectList li.orderBtn{
	background-image: url(../../../_images/detail/qa/btn_order_off.gif);
}
.qaCont ul.selectList li.orderBtn a:hover{
	background-image: url(../../../_images/detail/qa/btn_order_on.gif);
}
.qaCont ul.selectList li.nouhinBtn{
	background-image: url(../../../_images/detail/qa/btn_nouhin_off.gif);
}
.qaCont ul.selectList li.nouhinBtn a:hover{
	background-image: url(../../../_images/detail/qa/btn_nouhin_on.gif);
}
.qaCont ul.selectList li.designBtn{
	background-image: url(../../../_images/detail/qa/btn_design_off.gif);
}
.qaCont ul.selectList li.designBtn a:hover{
	background-image: url(../../../_images/detail/qa/btn_design_on.gif);
}

@media screen and (max-width: 768px) {
	.qaCont ul.selectList{
		gap: 20px;
		width: 90%;
	}
	.qaCont ul.selectList li{
		width: calc((100% - 40px) / 3);
		min-height: auto;
		border-radius: 10px;
		font-size: 16px;
	}
	.qaCont ul.selectList li a{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 15px 10px;
	}
	.qaCont ul.selectList li.orderBtn{
		background: #de3838;
	}
	.qaCont ul.selectList li.orderBtn a:hover{
		background: #ee8585;
	}
	.qaCont ul.selectList li.nouhinBtn{
		background: #194eb6;
	}
	.qaCont ul.selectList li.nouhinBtn a:hover{
		background: #6fa1de;
	}
	.qaCont ul.selectList li.designBtn{
		background: #cf3c01;
	}
	.qaCont ul.selectList li.designBtn a:hover{
		background: #e37f1d;
	}
}
@media screen and (max-width: 480px) {
	.qaCont ul.selectList{
		gap: 15px;
		width: 95%;
	}
	.qaCont ul.selectList li{
		width: calc((100% - 30px) / 3);
		font-size: 16px;
	}
	.qaCont ul.selectList li a{
		padding: 12px 10px;
	}
}

/**/
.qaCont > section{
	margin: 30px auto 50px;
}
.qaCont .qaH3box{
	margin-bottom: 20px;
	padding: 5px 0;
	border-radius: 5px;
	position: relative;
}
.qaCont .qaH3box:before{
	content: "";
	display: block;
	background: #fff;
	width: 12px;
	height: 12px;
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 150;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.qaCont .qaH3box h3{
	color: #fff;
	padding: 10px 40px;
	font-size: 21px;
	font-weight: bold;
}

/**/
.qaCont .qaBox{
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.qaCont .qaBox dl dt{
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
}
.qaCont .qaBox dl dt span{
	display: block;
	background: #f7efdc;
	padding: 10px 30px 10px 50px;
	position: relative;
}
.qaCont .qaBox dl dt span:before{
	content: "";
	display: block;
	background-image: url(../../../_images/detail/icon_question.gif);
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
	transition: all 0.1s ease-out;
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.qaCont .qaBox dl dt span:after{
	content: "▼";
	display: block;
	color: #9a4812;
	width: 24px;
	height: 24px;
	font-size: 24px;
	transition: all 0.1s ease-out;
	position: absolute;
	right: 15px;
	top: 0;
	bottom: 0;
	margin: auto;
}
.qaCont .qaBox dl dd{
    max-height: 0;
	background-image: url(../../../_images/detail/icon_answer.gif);
	background-repeat: no-repeat;
	background-position: left 15px;
	margin-left: 30px;
	padding-left: 55px;
    overflow: hidden;
    transition: 0.5s;
}

/*色味*/
#order .qaH3box{ background: linear-gradient(to right, #c03232 0%,#f3a9a9 100%);}
#order .qaH3box h3{ background: linear-gradient(to right, #dc3e3e 0%,#ed7d7d 100%);}
#order .qaBox dl dt{ background: linear-gradient(to right, #f3c4b8 0%,#faf5e9 100%);}
#order .qaBox dl dt span:after{ color: #dc3e3e;}

#shitate .qaH3box{ background: linear-gradient(to right, #1c50b5 0%,#8db4e4 100%);}
#shitate .qaH3box h3{ background: linear-gradient(to right, #1c50b5 0%,#538ed7 100%);}
#shitate .qaBox dl dt{ background: linear-gradient(to right, #b9cada 0%,#faf5e9 100%);}
#shitate .qaBox dl dt span:after{ color: #1c50b5;}

#design .qaH3box{ background: linear-gradient(to right, #c85914 0%,#edab69 100%);}
#design .qaH3box h3{ background: linear-gradient(to right, #ca4004 0%,#e37f1d 100%);}
#design .qaBox dl dt{ background: linear-gradient(to right, #efc594 0%,#faf5e9 100%);}
#design .qaBox dl dt span:after{ color: #ca4004;}


/*開閉*/
.qaCont .qaBox dl input{
	display: none;
}
.qaCont .qaBox input:checked + label + dd{
	max-height: 400px;
	padding-top: 15px;
}
.qaCont .qaBox input:checked + label dt span:after{
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}


@media screen and (max-width: 768px) {
	/**/
	.qaCont .qaBox{
		width: 95%;
		margin: auto;
	}
}