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

	
/*	
		text		: #434343;
		background1	: #e9e5de;
		
		
	
	
*/	
		html,body{
			position: relative;
			display: block;
			width:100%;
			height:auto;
			min-height:100%;
			font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
			/*font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";*/
			background: #e9e5de;
			font-feature-settings: 'palt';
			font-size: clamp(12.5px,1.5vw,19px);			
			line-height:1.7em;
			text-align: justify;
			text-align-last: left;
			color:#434343;
			z-index:0;
		}
					
				
		.head_box{
			z-index:9999;
			position: relative;
			display: block;
			background:#434343;
			width:100%;
			height:63px;
			padding:16px 0;
		}
		
		.logo{position: relative;
				display: block;
				width:200px;
				height:63px;
				margin:0 auto;
				filter: invert(100%);
				transition: 0.3s;
			}

		.logo:hover{
			filter: invert(50%);

		}	

		.logo img{position: relative;display: block;width:100%;}

		header{
			position: relative;
			display: block;
			width:100%;
		

		}
	
		menu{
			display: block;
			position: sticky;
			top:0;
			width:100%;
			height:48px;
			background: #434343;
			z-index:100000;
		}
	
	.inmenu{
		position: relative;
		width: 100%;
		max-width: 1200px;
		min-width: 768px;
		margin:0 auto;
	}
	
	.inmenu a{
		position: relative;
		display: block;
		width:calc( 100% / 8 );
		color:#fff;
		float: left;
		text-align: center;
		text-align-last: center;
		transition: 0.3s;
		line-height: 48px;
		text-decoration: none;
	}
	
	.inmenu a:hover{
		background:#eee;
		color:#000;
		
		
	}
	
	
	.submenu{
		position: absolute;
		width:34px;
		top:48px;
		right:0px;
		background: rgba(0,0,0,0.6);
		padding:0px 4px 8px 6px;
		border-radius: 0 0  0 12px;
	
	}
		
	.linkicon{
		display: block;
		position: relative;
		float: none;
		width:32px;
		height:32px;
		padding: 0;
		margin:16px 1px 16px 0;
		transition: 0.3s;

	}
		
	.linkicon:hover{
			background: #000;
	}
	
	
	
	h2{font-size:36px;
	text-align: center;
	text-align-last: center;
	display: block;
	margin: 48px auto;
	font-weight: bold;
	}
	
	h3{font-size:22px;
	text-align: center;
	text-align-last: center;
	display: block;
	margin: 8px auto;
	font-weight: bold;
	}
	
	h4{font-size:18px;
	text-align: center;
	text-align-last: center;
	display: block;
	margin: 8px auto;
	font-weight: bold;
	}
	
	
	
	
	.item_container{
		width:320px;
		position: relative;
		margin: 32px auto;
		padding:32px 0;
		background: #fff;
		
		
	}
	
		.mainbox{
			position: relative;
			display: block;
			width:318px;
			height:478px;
			background: #fff;
			border:1px solid #eee;
			float: left;
			transition: 0.3s;
			margin:8px 0;
	}

		.mainbox a{
			text-decoration: none;
			color:#434343;
		}
	
		.mainbox:hover{
			border:1px solid #33f;
	}
	
		
	
	
		.mainbox .boximg{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			aspect-ratio:4/3;
			margin:8px;
			overflow:hidden;
			background: #eee;
		}
	
		.mainbox .boximg .img_w{
			position: absolute;
			display: block;
			width:100%;
			height:auto;
			margin:auto;
			top:0;
			left:-50%;
			right:-50%;
			bottom: 0;
		}
	
		.mainbox .boximg .img_h{
			position: absolute;
			display: block;
			width:auto;
			height:100%;
			margin: auto;
			top:0;
			left:0;
			right:0;
			bottom: 0;
		}
	
		.mainbox .boximg .img_h{
			position: absolute;
			display: block;
			width:auto;
			height:100%;
			margin: auto;
			top:0;
			left:0;
			right:0;
			bottom: 0;
		}
		
		.mainbox .brandimg{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:52px;
			background: #fff;
			font-size:22px;
			line-height: 53px;
			margin:8px;
			
			
		}
	
			
		.mainbox .brandimg img{
			position: relative;
			display: block;
			width:52px;
			height: 52px;
			margin-right:16px;
			float: left;
			
		}
	
					
		.mainbox .mode_0,.mainbox .mode_1,.mainbox .mode_2,.mainbox .mode_3,.mainbox .mode_4{
			width:142px;
			color:#fff;
			font-size:15px;
			background: #00f;
			font-weight: bold;
			position: absolute;
			text-align: center;
			text-align-last: center;
			margin:8px;
			top:0;
			
			
		}
	
		.itemname{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:72px;
			background: #fff;
			font-size:22px;
			line-height: 36px;
			margin:8px;
			text-align: left;

		}
			
		.itemcat{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:24px;
			background: #fff;
			font-size:18px;
			line-height: 24px;
			font-weight: bold;
			margin:8px;
			text-align: left;

		}
		
		.price{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:24px;
			background: #fff;
			font-size:20px;
			line-height: 24px;
			margin:8px;
			text-align: right;
			text-align-last: right;

		}
	.category_select{
		z-index:80000;
		display: block;
		position: relative;
		width:960px;
		height:auto;
		padding:0 0;
		margin:0 auto 0 auto;
		transition: 0.3s;
		background: #434343;
	}
	
	.sellist{
		width:calc( 33% - 13px );
		position: relative;
		display: block;
		font-size:18px;
		line-height: 36px;
		padding:4px;
		float: left;
		height:64px;
		overflow: hidden;
		background: #eee;
		margin:4px;
		
	}
	
	.selopen{
		height: auto;
		overflow: visible;	
		padding:48px 0;
		width:calc( 33% - 5px );			
	}
	
	.sellist .seltop{
		background:#434343;
		color:#fff;
		text-align: center;
		text-align-last: center;
	}
		
	.sellist .seltop span{
		color:#fff;
		background:#888;
		font-weight: bold;
		display: block;
	}
	
	.sellist a{
		text-decoration: none;
		color:#000;
		margin:0;
		padding: 4px 0;
		text-align: center;
		text-align-last: center;
		display: block;
		transition: 0.3s;
	}
	
	.sellist a:hover{
		background:#333;
		color:#fff;
	}
	
	
	.selectmenu{
		position: relative;
		line-height: 32px;	
		margin: 32px auto;
		text-align: center;
		text-align-last: center;
		display: block;
		background:#555;
		color:#fff;
		height:32px;
		width:200px;
		padding:8px;
		text-decoration: none;
		transition: 0.3s;
		
	}
	
	.selectmenu:hover{
		background: #00f;
		font-weight: bold;
		
	}
					
	@media(max-width:959px){
		
	
		.mainbox{
			text-align: left;
			position: relative;
			display: block;
			width:calc(33% - 2px);
			height: auto;
			aspect-ratio:16/9;
			border:1px solid #eee;
			float: left;
			transition: 0.3s;
	}

		
		.mainbox .brandimg{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:10vh;
			font-size:18px;
			line-height: 15px;
			margin:8px;
			
			
		}
	
			
		.mainbox .brandimg img{
			position: relative;
			display: block;
			width:52px;
			height: 52px;
			margin-bottom:16px;
			float: none;
			
		}
	
				
	
		.itemname{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:84px;
			font-size:20px;
			line-height: 1.5em;
			margin:8px;
			text-align: left;
			word-wrap: normal;
		}
	
	
			
		.itemcat{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:36px;

			font-size:16px;
			line-height: 20px;
			font-weight: bold;
			margin:8px;
			text-align: left;

		}
		
	.category_select{
		z-index:80000;
		display: block;
		position: relative;
		width:768px;
		height:auto;
		padding:0 0;
		margin:0 auto 0 auto;
		transition: 0.3s;
		background: #434343;
	}
	
	
	.sellist{
		width:calc( 33% - 14px );
		position: relative;
		display: block;
		font-size:18px;
		line-height: 36px;
		padding:4px;
		float: left;
		height:64px;
		overflow: hidden;
		background: #eee;
		margin:4px;
		
	}
	
	.selopen{
		height: auto;
		overflow: visible;	
		padding:48px 0;
		width:calc( 33% - 6px );			
	}								
	}
		

	
					
	@media(max-width:767px){
					
				
	.head_box{
			z-index:9999;
			position: relative;
			display: block;
			background:#434343;
			width:100%;
			height:48px;
			padding:8px 0;
		}
		
		.logo{position: relative;
				display: block;
				width:140px;
				margin:0 auto;
				filter: invert(100%);
				transition: 0.3s;
			}

			
	.menu_btn{
				display: block;
				position: fixed;
				width:32px;
				height: 32px;
				right:0;
				top:0;
				padding:8px;
				background:rgba(0,0,0,0.8);
				margin:8px;
				z-index:999999;

			}

				
			.menu_btn span{
				position: absolute;
				display: block;
				width:32px;
				height:2px;
				background: #fff;
				top:31px;
				transition: 0.3s;
			}


			
			.menu_btn span:nth-child(2){
				position: absolute;
				display: block;
				width:32px;
				height:2px;
				background: #fff;
				top:15px;
			}
		
			.menu_btn span:nth-child(3){
				position: absolute;
				display: block;
				width:32px;
				height:2px;
				background: #fff;
				top:23px;
			}


			
			.menu_btn_on span:first-child{
				position: absolute;
				transform: rotate(45deg);
				margin:auto;
				top:23px;
			}

			
			.menu_btn_on span:nth-child(2){
				position: absolute;
				transform: rotate(-45deg);
				margin:auto;
				top:23px;

			}

			
			.menu_btn_on span:nth-child(3){

					opacity: 0;
			}

			.menu_on{right:0;}


			.submenu{
				position: relative;
				width:200px;
				height:46px;
				background: #434343;
				padding:8px;
				border-radius: 0 0  0 12px;

			}

			.linkicon{
				display: block;
				position: relative;
				float: left;
				width:38px;
				height:38px;
				padding:4px;
				margin:0px 8px;
			}

			
		.mainbox{
			text-align: left;
			position: relative;
			display: block;
			width:calc(50% - 2px);
			height: auto;
			aspect-ratio:16/9;
			border:1px solid #eee;
			float: left;
			transition: 0.3s;
	}

		
		.mainbox .brandimg{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:78px;

			font-size:18px;
			line-height: 15px;
			margin:8px;
			
			
		}
	
			
		.mainbox .brandimg img{
			position: relative;
			display: block;
			width:48px;
			height: 48px;
			margin-bottom:12px;
			float: none;
			
		}
	
				
	
		.itemname{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:84px;
			font-size:20px;
			line-height: 1.5em;
			margin:8px;
			text-align: left;
			word-wrap: normal;
		}
	

			
		.itemcat{
			position: relative;
			display: block;
			width:calc( 100% - 16px );
			height:36px;
			font-size:16px;
			line-height: 20px;
			font-weight: bold;
			margin:8px;
			text-align: left;

		}
	
	.category_select{
		display: block;
		position: relative;
		width:320px;
		height:auto;
		margin:64px auto 0 auto;
	}
		
	.sellist{
		width:304px;
		position: relative;
		display: block;
		font-size:18px;
		padding:4px;
		float: none;
		height:64px;
		overflow: hidden;
		background: #eee;
		margin:4px auto;
		transition: 0.7s;
		z-index:100000;
		
	}
		
	.selopen{
		height: auto;
		overflow: visible;
	}
		
		
		
	menu{
		position: fixed;
		width:280px;
		height: calc( 100% - 64px);
		right:-300px;
		top:0px;
		padding-top: 64px;
		transition: 0.3s;
		z-index:999998;
	}
	
	.inmenu{
		position: relative;
		width:100%;
		height:auto;
	}
	
	.inmenu a{
		display: block;
		width:272px;
		padding-left:16px;
		float: none;
		font-size:18px;
		line-height: 2em;
		text-align-last: left;
		border-bottom:1px solid #fff;
	}

	
	.selectmenu{
		position: relative;
		top:0px;
		margin: 32px auto;
		text-align: center;
		text-align-last: center;
		display: block;
		background:#555;
		color:#fff;
		height:32px;
		width:200px;
		z-index:100001;
		
		
	}		
		
	}
	
	
	
	.itemlist,.itemdate{
		clear:both;
		position: relative;
		display: block;
		width:calc( 100% - 16px );
		max-width: 944px;
		min-width: 304px;
		min-height:48px;
		margin:8px auto;
		border-bottom:1px solid #aaa;
		line-height: 48px;
		font-size:16px;
		text-align: left;
		word-break: break-all;
		color:#434343;
		transition: 0.3s;
	
	}

	.itemlink{
		text-decoration: none;
		
	}
	
	.itemdate{
		font-size:20px;font-weight: bold;
	}
	
	.itemlist:hover{
		background: #ddd;
		
	}
	
	.itemlist_img{
		width:48px;
		height:48px;
		display: block;
		float: left;
		margin-right:16px;
	}
	
footer{
	width:93%;
	margin:64px 0 0 0;
	padding:32px 3%;
	background:#555;

}