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

/*--------------------------------------------------------
　PC
--------------------------------------------------------*/
@media print, screen and (min-width: 769px){
	
	h2.page_title.use {
		background: url("../images/search/byuse/page_title_pc.jpg") no-repeat;
		background-size: cover;
		color: #FFF;
		text-shadow: black 1px 1px 8px, black -1px 1px 8px, white 1px -1px 8px, black -1px -1px 8px;
	}
	
	h2.page_title.brand {
		background: url("../images/search/bybrand/page_title_pc.jpg") no-repeat;
		background-size: cover;
		color: #000;
	}
	
	section {
		width: 980px;
		margin: 0 auto;
	}
	
	section div.block{
		width: 100%;
		margin: 0 auto;
		line-height: 0;
		background: url(../images/products/products_textile/bg_line.png) repeat;
		background-size: 70px;
	}
	
	section div.block ul.product {
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		line-height: 1;
	}
	
	section div.block ul.product li.left{
		width: 190px;
		margin-left: 20px;
	}
	
	section div.block ul.product li.left h4{
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1;
		font-weight: 700;
		color: #0068b6;
		padding: 10px 0 9px 0;
	}
	
	section div.block ul.product li.right{
		width: -webkit-calc(100% - 210px);
		width: -moz-calc(100% - 210px);
		width: calc(100% - 210px);
	}
	
	section div.block ul.product li.right ul{
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
	}
	
	section div.block ul.product li.right ul li{
		display: inline-block;
		height: 35px;
		margin-right: 1em;
		padding: 7px 0.5em 5px 0;
	}
	
	section div.block ul.product li.right ul li a{
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1;
		color: #006AB1;
		position: relative;
		display: inline-block;
		padding: 0 0.8em 0 0;
	}
	
	section div.block ul.product li.right ul li a::after{
		font-family:FontAwesome;
		content:"\f105";
		top: 1px;
		right: 0;
		position: absolute;
	}
	
	/* 20200402追加凡例 */
	.textile_hanrei{
		font-family: "Noto Sans JP";
		width: 980px;
		margin: 0px auto 50px auto;
		font-size: 13.8px;
	}
	.textile_hanrei div{
		display: block;
		margin-left: auto;
		width: 63%;
		text-align: right;
	}
	.textile_hanrei ul {
		display: flex;
		margin-top: 5px;
	}
	.textile_hanrei ul li{
		font-size: 13.8px;
		line-height: 24.5px;
		margin-left: 3px;
	}
	.textile_hanrei a{
		font-size: 13.8px;
		font-weight: 700;
		line-height: 24.5px;
		padding: 4px 5px 5px 5px;
		color: #6C6966;
		border: 0.27px solid #6295A0;
	}
	.textile_hanrei span{
		font-size: 13.8px;
		font-weight: 700;
		line-height: 24.5px;
		padding: 4px 5px 5px 5px;
		margin: 0px 5px 0px 3px;
		background: #6295A0;
		color: #ffffff;
		border: 0.27px solid #6295A0;
	}
	.textile_hanrei_nav_none{
		margin: 40px 0px 50px 0px!important;
	}
	/* 20200402追加凡例-end */
	
}

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 768px){
	
	h2.page_title.use {
		background: url("../images/search/byuse/page_title_sp.jpg") no-repeat;
		background-size: cover;
		color: #FFF;
		text-shadow: black 1px 1px 8px, black -1px 1px 8px, white 1px -1px 8px, black -1px -1px 8px;
	}
	
	h2.page_title.brand {
		background: url("../images/search/bybrand/page_title_pc.jpg") no-repeat;
		background-size: cover;
		color: #000;
	}
	
	section {
		width: 94%;
		margin: 0 auto;
	}
	
	section ul.product {
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
	}
	
	section ul.product li.left{
		width: 100%;
		position: relative;
	}
	
	section ul.product li.left a{
		font-size: 12px;
		font-size: 1.2rem;
		color: #006AB1;
		padding: 0 0.8em 0 0;
		position: absolute;
		top: 6px;
		right: 8px;
	}
	
	section ul.product li.left a::after{
		font-family:FontAwesome;
		content:"\f105";
		top: 1px;
		right: 0;
		position: absolute;
	}
	
	section ul.product li.left h4{
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 1;
		color: #006AB1;
		padding: 8px 0 8px 18px;
		background: #E0F0FA;
		margin-bottom: 8px;
		
	}
	
	section ul.product li.left h4 a{
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: 700;
		color: #006AB1;
		position: relative;
		top: 0;
		right: 0;
		padding: 0;
	}
	
	section ul.product li.left h4 a::after{
		content: "";
	}
	
	section ul.product li.right{
		width: 100%;
		padding: 0 0 0 18px;
	}
	
	section ul.product li.right ul{
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
	}
	
	section ul.product li.right ul li{
		display: inline-block;
		margin-right: 1em;
		padding: 6px 0.5em 4px 0;
	}
	
	section ul.product li.right ul li a{
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1;
		color: #006AB1;
		position: relative;
		display: inline-block;
		padding: 0 0.8em 0 0;
	}
	
	section ul.product li.right ul li a::after{
		font-family:FontAwesome;
		content:"\f105";
		top: 1px;
		right: 0;
		position: absolute;
	}
	
	section ul.product li.right ul li:last-child{
		margin-bottom: 10px;
	}
				/* 20200402追加凡例 */
				.textile_hanrei{
					font-family: "Noto Sans JP";
					width: 94%;
					margin: 0px auto 50px auto;
					font-size: 13.8px;
				}
				.textile_hanrei div{
					display: block;
					margin-left: auto;
					text-align: right;
					
				}
				.textile_hanrei ul {
					display: flex;
					justify-content: flex-end;
					flex-wrap: wrap;
					margin-top: 5px;
					margin-left: auto;
					text-align: right;
				}
				.textile_hanrei ul li{
					font-size: 13.8px;
					line-height: 20.7px;
					margin-left: 3px;
				}
				.textile_hanrei a{
					font-size: 13.8px;
					font-weight: 700;
					line-height: 24.5px;
					padding: 4px 5px 5px 5px;
					color: #6C6966;
					border: 0.27px solid #6295A0;
				}
				.textile_hanrei span{
					font-size: 13.8px;
					font-weight: 700;
					line-height: 24.5px;
					padding: 4px 5px 5px 5px;
					margin: 0px 5px 0px 3px;
					background: #6295A0;
					color: #ffffff;
					border: 0.27px solid #6295A0;
				}
				.textile_hanrei_nav_none{
					margin: 40px 0px 50px 0px!important;
				}
				/* 20200402追加凡例-end */
}