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


/*------------------------------------------------------------------
   日除けのれん
------------------------------------------------------------------*/
.useHiyoke .h2Cont{
	background-image: url(../../../_images/needs/hiyoke/main_img.webp);
}
.useHiyoke .h2Cont > div{
	background: linear-gradient(to right, #4d2600 0%,#4d2600 80%,rgba(255,255,255,0) 100%);
}
.useHiyoke .selectPoint .h3Caption p span.orange{
	color: #ff7e00;
}

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

.useHiyoke .selectPoint .settingSample .textBox{
	background-image: url(../../../_images/needs/hiyoke/about_use_img.webp);
	min-height: 350px;
}
.useHiyoke .selectPoint .settingSample h4{
	border-bottom: 1px solid #ff7e00;
}
.useHiyoke .selectPoint .settingSample h4 span{
	color: #9e0c0c;
}

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


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


/*----オススメサイズ----*/
.useHiyoke .sizeCont .textBox{
	background-image: url(../../../_images/needs/hiyoke/size_img.webp);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-bottom: 630px;
}
.useHiyoke .sizeCont h4{
	margin: 15px 20px;
	font-size: 20px;
	font-weight: bold;
}
.useHiyoke .sizeCont h4:before{
	content: "◆";
	color: #ffcd9d;
	margin-right: 10px;
}
.useHiyoke .sizeCont ul{
	display: flex;
	justify-content: space-around;
	margin: 20px;
}
.useHiyoke .sizeCont ul li{
	width: 45%;
	background-color: #ffe7cf;
	padding: 10px;
	font-size: 18px;
	text-align: center;
}

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

.useHiyoke .fabricCont > div div.polyesterBox,
.useHiyoke .fabricCont > div div.vinylBox{
	width: 420px;
}

/*----仕立てについて----*/
.useHiyoke .shitateCont dl{
	width: 278px;
}

/*----デザインタイプ----*/
.useHiyoke .designCont dl dt{
	background-color: #ffcd9d;
}
.useHiyoke .designCont dl dd.sampleImg{
	border: 1px solid #ffcd9d;
}

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

	/*----オススメサイズ----*/
	.useHiyoke .sizeCont .textBox{
		background-size: 80%;
		padding-bottom: 60%;
	}
	.useHiyoke .sizeCont h4{
		width: 95%;
		margin: 15px auto;
		font-size: 18px;
	}
	.useHiyoke .sizeCont ul{
		width: 95%;
		margin: 10px auto;
	}
	.useHiyoke .sizeCont ul li{
		font-size: 16px;
	}
	
	/*----オススメ生地----*/
	.useHiyoke .fabricCont > div div.cottonBox .fabricTitle h4,
	.useHiyoke .fabricCont > div div.cottonBox .fabricTitle .textBox{
		width: 100%;
	}
	
	.useHiyoke .fabricCont > div .fabricTitle h4 img{
		width: auto;
	}
	
	.useHiyoke .fabricCont div.fabricBox div.polyesterBox,
	.useHiyoke .fabricCont div.fabricBox div.vinylBox{
		width: 48%;
	}
	.useHiyoke .fabricCont div.fabricBox > div.polyesterBox div.list2type dl,
	.useHiyoke .fabricCont div.fabricBox > div.vinylBox div.list2type dl{
		width: 100%;
	}
	
	/*----仕立てについて----*/
	.useHiyoke .shitateCont{
		gap: 20px 10px;
	}
	.useHiyoke .shitateCont dl{
		width: calc((100% - 20px) / 3);
	}
	.useHiyoke .shitateCont dl dt img{
		max-width: 278px;
	}
}
@media screen and (max-width: 620px) {
	/*----選ばれるポイント----*/
	.useHiyoke .selectPoint .settingSample .textBox{
		padding-top: 60%;
	}
}
@media screen and (max-width: 480px) {
	
	/*----オススメ生地----*/
	.useHiyoke .fabricCont div.fabricBox div.polyesterBox,
	.useHiyoke .fabricCont div.fabricBox div.vinylBox{
		width: 100%;
	}
	
	/*----仕立てについて----*/
	.useHiyoke .shitateCont{
		flex-wrap: wrap;
	}
	.useHiyoke .shitateCont dl{
		width: calc((100% - 10px) / 2);
	}
}