@charset "utf-8";
/* CSS Document */
*{ box-sizing: border-box;}

/*------------------------------------------------------------------
   風呂のれん
------------------------------------------------------------------*/
.useBath .h2Cont{
	background-image: url(../../../_images/needs/bath/main_img.webp);
}
.useBath .h2Cont > div{
	background: linear-gradient(to right, #4c3960 0%,#4c3960 80%,rgba(255,255,255,0) 100%);
}
.useBath .selectPoint .h3Caption p span.purple{
	color: #5100a4;
}

/*----選ばれるポイント----*/
.useBath .selectPoint .mainH3Cont{
	background: url(../../../_images/needs/bath/h_bg_purple.webp) repeat-x bottom;
}
.useBath .selectPoint .mainH3Cont h3:after{
	background: linear-gradient(to right, rgba(81,0,164,0) 0%, rgba(81,0,164,0.7) 20%, rgba(81,0,164,0.7) 80%, rgba(81,0,164,0) 100%);
}

.useBath .selectPoint .settingSample .textBox{
	background-image: url(../../../_images/needs/bath/about_bouen_img.webp);
	min-height: 390px;
}
.useBath .selectPoint .settingSample h4{
	border-bottom: 1px solid #5100a4;
}
.useBath .selectPoint .settingSample h4 span{
	color: #9e0c0c;
}

/**/
.useBath .h3MainTit{
	background: linear-gradient(to right, #fff 0%, #fff 70%,#d6d0ff 100%);
	border-top: 4px solid #c2a8dc;
	border-bottom: 4px solid #c2a8dc;
}
.useBath .h3MainTit h3 span{
	background: url(../../../_images/common/bullet_flower_purple.webp) no-repeat 0.5em 50%;
}


/*----定番サイズ----*/
.useBath .sizeType .typeBath{
	background-image: url(../../../_images/detail/size/sample_bath.gif);
}
.useBath .sizeType .typeBath h4{
	border-left: 5px solid #5100a4;
}
.useBath .sizeType .typeBath .linkBtn a{
	background-color: #5100a4;
}


/*----デザインタイプ----*/
.useBath .designCont .textBox{
	background-image: url(../../../_images/needs/bath/design_sample_img.webp);
	background-repeat: no-repeat;
	background-position: bottom;
	margin-bottom: 30px;
	padding-bottom: 330px;
}

.useBath .designCont dl dt{
	background-color: #c2a8dc;
}
.useBath .designCont dl dd.sampleImg{
	min-height: 180px;
	border: 1px solid #c2a8dc;
}

.useBath .designCont h4{
	margin: 15px 20px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #c2a8dc;
}
.useBath .designCont h4:before{
	content: "◆";
	color: #c2a8dc;
	margin-right: 10px;
}

/*----オススメ生地----*/
.useBath .fabricCont > div div.cottonBox .fabricTitle h4{
	width: 300px;
}
.useBath .fabricCont > div div.cottonBox .fabricTitle .textBox{
	width: 550px;
}

.useBath .fabricCont > div div.polyesterBox .fabricTitle h4{
	width: 300px;
	text-align: center;
}
.useBath .fabricCont > div div.polyesterBox .fabricTitle .textBox{
	width: 550px;
}


@media screen and (max-width: 768px) {
	.useBath .h2Cont{
		background-position: 0 -70px;
	}
	.useBath .h2Cont > div{
		background: linear-gradient(to top, #4c3960 0%,#4c3960 95%,rgba(255,255,255,0) 100%);
	}
	
	/*----選ばれるポイント----*/
	.useBath .selectPoint .settingSample .textBox{
		padding-top: 410px;
	}

	/*----デザインタイプ----*/
	.useBath .designCont .textBox{
		background-size: 90% auto;
		padding-bottom: 38%;
	}
	
	.useBath .designCont dl dd.sampleImg{
		min-height: auto;
	}
	
	.useBath .designCont h4{
		margin: 15px 2%;
		font-size: 20px;
	}
	
	/*----オススメ生地----*/
	.useBath .fabricCont > div .fabricTitle h4 img{
		width: auto;
	}
	.useBath .fabricCont > div div.cottonBox .fabricTitle h4,
	.useBath .fabricCont > div div.polyesterBox .fabricTitle h4{
		width: auto;
	}
	.useBath .fabricCont > div div.cottonBox .fabricTitle .textBox,
	.useBath .fabricCont > div div.polyesterBox .fabricTitle .textBox{
		width: auto;
		padding: 0;
	}
}

@media screen and (max-width: 620px) {
	/*----選ばれるポイント----*/
	.useBath .selectPoint .settingSample .textBox{
		padding-top: 66%;
	}
}