@charset "euc-jp";

/*▽基本CSS*/
html{scroll-behavior: smooth; font-family: 'Open Sans', sans-serif;}
*{ list-style:none; margin:0; padding:0;}
a{ text-decoration:none; color: #000000;}
a img{ border:none; }

/*税込非表示*/
div.prices span.prdisp-taxin span > span{ display: none !important;}

/*ランキング*/
.rank01{
	background-color: #e1a810;
}
.rank02{
	background-color: #7f9c91;
}
.rank03{
	background-color: #cc7946;
}

/*アイコンカラー*/
.col01{ /*掛ける*/
	background-color: #fff;
	border: 2px solid #5a7b9e;
	color: #5a7b9e;
}
.col02{ /*置ける*/
	background-color: #fff;
	color: #5b9e95;
	border: 2px solid #5b9e95;
}
.col03{ /*S字フック2枚付き*/
	background-color: #fff;
	color: #626262;
	border: 2px solid #626262;
}

/*色玉*/
.circle01{
	background-color: #000;
}
.circle02{
	background-color: #fff;
}


/*smp*/
@media screen and (max-width: 640px){
	
	.smp_none{ display: none !important;}
	
	/*コンテンツ*/
	#wrap{
		width: 100%;
		margin: 0 auto;
		background-color: #284262;
		padding-bottom: 5vw;
	}
	#wrap img{
		max-width: 100%;
	}

	/*見出し*/
	#wrap #title{
		position: relative;
		width: 100%;
		margin: 0 auto 9vw;
		text-align: center;
		/*border-bottom: 1px solid;*/
		padding: 5vw 0 3vw;
		color: #fff;
		background: repeating-linear-gradient(
			125deg,
			#082749,
			#082749 3px,
			#284262 0,
			#284262 7px
		);
	}
	#wrap #title > img{
		position: absolute;
		width: 15vw;
		height: auto;
		top: 50%;
		left: 6.5vw;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
	#wrap #title > p{
		font-weight: bold;
		font-size: 5vw;
		letter-spacing: 3px;
		margin-bottom: 5px;
		padding-left: 13vw;
	}
	#wrap #title > h1{
		font-weight: bold;
		font-size: 7vw;
		letter-spacing: 0;
		padding-left: 13vw;
	}

	/*商品*/
	/**全体調整**/
	#wrap #item_box{
		width: 97%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#wrap #item_box > li{
		position: relative;
		background-color: #fff;
		padding-bottom: 1.5vw;
		/* border: 1px solid #dbdbdb; */
	}
	#wrap #item_box > li:nth-child(1){
		width: 100%;
		margin-bottom: 3vw;
	}
	#wrap #item_box > li:nth-child(n+2){
		width: calc(98%/2);
		margin-top: 7vw;
	}
	#wrap #item_box > li#lastimg{
		position: relative;
		background-color: #284262;
	} 
	#wrap #item_box > li#lastimg img{
			height: 68vw;
			object-fit: cover;
	} 
	#wrap #item_box > li#lastimg::after {
		position: absolute;
		content: '';
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: inset 0 0 10px 15px #284262;
	}

	/**ランキングアイコン**/
	#wrap .rank_icon{
		position: absolute;
		padding: 1.5vw 1vw;
		top: -5vw;
		left: -1vw;
		z-index: 2;
	}
	#wrap .rank_icon p{
		color: #fff;
		text-align: center;
		font-size: 5vw;
		font-weight: bold;
	}

	/**訴求アイコン**/
	#wrap .icon_box{
		margin-top: 2vw;
		padding-left: 2vw;
	}
	#wrap .icon_box li{
		display: inline-block;
		padding: 1vw 1.5vw;
		font-size: 3.5vw;
		margin: 0 1vw 2vw 0;
		font-weight: bold;
	}

	/*商品名*/
	#wrap p.item_name{
		font-size: 4vw;
		padding-left: 2vw;
		margin: 0 0 1vw;
		/* font-weight: bold; */
	}
	#wrap #item_box > li:nth-child(1) p.item_name{
		font-size: 5vw;
	}

	/*色玉*/
	#wrap ul.col_box{
		padding-left: 2vw;
	}
	#wrap .circle{
		width: 6.5vw;	
		display: inline-block;	
		margin: 0 1vw 0 0;
	}
	#wrap .circle-in{
		width: 100%;
		padding-top: 100%;
		border-radius: 50%;
		border: 2px solid #8a8a8a;
	}


	/*価格*/
	#wrap div.prices{
		position: absolute;		
		font-weight: bold;
		color: #a50000;
	}
	#wrap #item_box > li:nth-child(1) div.prices{
		bottom: 2vw;
		right: 1vw;
		font-size: 5.5vw;
	}
	#wrap #item_box > li:nth-child(1) div.prices::after{
		content: "\025b6";
	}
	#wrap #item_box > li:nth-child(n+2) div.prices{
		bottom: 3.5vw;
		right: 0.1vw;
		font-size: 4vw;
	}
	#wrap #item_box > li:nth-child(n+2) div.prices::after{
		content: "\025b6";
	}


/* 
	#wrap div.prices .prdisp-taxin{
		position: relative;
	}
	#wrap #item_box > li::after{
		position: absolute;
		font-family: 'Material Icons Two Tone';
		content: '\e315';
		bottom: 1.5vw;
		right: -1.5vw;
		font-size: 7vw;
		font-weight: bold;
		color: #a50000;
	} */
	
	
	
	/*フッター*/
	div#foot{
		width: 100%;
		margin: 8vw auto 0;
		border-top: 1px solid #fff;
		padding-top: 5vw;
		color: #fff;
	}
	div#foot > ul{
		display: flex;
		justify-content: center;
	}
	div#foot > ul li:nth-child(2){
		margin: 0 5vw;
		padding: 0 5vw;
		border-right: 1px dashed #fff;
		border-left: 1px dashed #fff;
	}
	
	
}/*smp-end*/


/*PC*/
@media screen and (min-width: 640px){
	
	a:hover img{ opacity:0.8;}
	.pc_none{ display: none !important;}
	
	/*コンテンツ*/
	#wrap{
		width: 750px;
		margin: 0 auto;
		background-color: #284262;
		padding-bottom: 15px;
	}
	#wrap img{
		max-width: 100%;
	}

	/*見出し*/
	#wrap #title{
		width: 100%;
		margin: 0 auto 30px;
		text-align: center;
		/*border-bottom: 1px solid;*/
		padding: 20px 0 10px;
		color: #fff;
		position: relative;
		background: repeating-linear-gradient(
		125deg,
		#082749,
		#082749 5px,
		#284262 0,
		#284262 10px
		);
	}
	#wrap #title > p{
		font-weight: bold;
		font-size: 28px;
		letter-spacing: 3px;
		margin-bottom: 5px;
		padding-left: 20px;
	}
	#wrap #title > h1{
		font-weight: bold;
		font-size: 40px;
		letter-spacing: 3px;
		padding-left: 25px;
	}
	#wrap #title > img{
		position: absolute;
		width: 75px;
		height: auto;
		top: 50%;
		left: 100px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}

	/*商品*/
	/**全体調整**/
	#wrap #item_box{
		width: 98%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#wrap #item_box > li{
		position: relative;
		background-color: #fff;
		/* border: 1px solid #dbdbdb; */
	}
	#wrap #item_box > li:nth-child(1){
		width: 100%;
	}
	#wrap #item_box > li:nth-child(n+2){
		width: calc(97%/2);
		margin-top: 35px;
	}
	#wrap #item_box > li#lastimg{
		position: relative;
		background-color: #284262;
	} 
	#wrap #item_box > li#lastimg::after {
		position: absolute;
		content: '';
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: inset 0 0 10px 15px #284262;
	}

	/**ランキングアイコン**/
	#wrap .rank_icon{
		position: absolute;
		padding: 10px;
		top: -10px;
		left: -5px;
		z-index: 2;
	}
	#wrap .rank_icon p{
		color: #fff;
		text-align: center;
		font-size: 30px;
	}

	/**訴求アイコン**/
	#wrap .icon_box{
		padding-left: 10px;
	}
	#wrap .icon_box li{
		display: inline-block;
		padding: 5px 10px;
		font-size: 20px;
		font-weight: bold;
		margin: 5px 10px 5px 0;
	}

	/*商品名*/
	#wrap p.item_name{
		font-size: 20px;
		padding-left: 10px;
		margin: 5px 0;
		/* font-weight: bold; */
	}
	#wrap #item_box > li:nth-child(1) p.item_name{
		font-size: 25px;
	}

	/*色玉*/
	#wrap ul.col_box{
		padding-left: 10px;
	}
	#wrap .circle{
		width: 35px;	
		display: inline-block;	
		margin: 0 5px 5px 0;
	}
	#wrap .circle-in{
		width: 100%;
		padding-top: 100%;
		border-radius: 50%;
		border: 2px solid #8a8a8a;
	}


	/*価格*/
	#wrap div.prices{
		position: absolute;
		right: 5px;
		bottom: 10px;
		font-size: 25px;
		font-weight: bold;
		color: #a50000;
	}
	#wrap div.prices::after{
		content: "\025b6";
	}

	/*フッター*/
	div#foot{
		width: 750px;
		margin: 50px auto 5px;
		border-top: 1px solid #fff;
		color: #fff;
		padding-top: 25px;
	}
	div#foot > ul{
		display: flex;
		justify-content: center;
	}
	div#foot > ul li:nth-child(2){
		margin: 0 30px;
		padding: 0 30px;
		border-right: 1px dashed #fff;
		border-left: 1px dashed #fff;
	}
	


}/*pc-end*/