/*　真ん中の司る部分　*/
@charset "utf-8";
html{color:#000;background:#FFF; scroll-behavior:smooth;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,label{margin:0;padding:0;font-size:12px;line-height:16px;letter-spacing:0px; box-sizing:border-box; line-height:1.5;}

table{border-collapse:collapse;border-spacing:0; box-sizing:border-box; line-height:1.5;}

fieldset,img{border:0; box-sizing:border-box;}

address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}

del,ins{text-decoration:none;}

li{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

q:before,q:after{content:'';}

abbr,acronym{border:0;font-variant:normal;}

sup{vertical-align:baseline;}

sub{vertical-align:baseline;}

legend{color:#000;}

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

input,button,textarea,select{*font-size:100%;}



body{
 text-align:center;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


header{
	width:100%;
	background:rgba(50,50,50,1);
	position:relative;
	text-align:center;
	}

ul.nav{
	width:60vw;
	text-align:left;
	min-width:720px;
	margin:0 auto;
	color:rgba(255,255,200,1);
	padding:0.2em 0;
	 overflow:hidden;
	 text-overflow:ellipsis;
	 white-space: nowrap;
	}

@media screen and (max-width:559px){
	ul.nav{
		width:96%;
		min-width:96%;
		}
	}

	ul.nav a{
		text-decoration:none;
		color:rgba(255,255,200,1);
		}


	ul.nav li.home,ul.nav li.modellist,	ul.nav li.model{
		font-size:calc(12px + 0.2vw);
		display:inline;
		list-style-type: none;
		margin-left:3rem;
	}

	ul.nav li.home{
		margin-left:0;
	}

	ul.nav li.model{
		color:rgba(200,200,200,1);
		margin-left:3rem;
	}

	ul.nav a:hover{
		color:rgba(255,255,200,0.5);
		transit:0.2s;
	}
	
	ul.nav li.home:after,ul.nav li.modellist:after{
	content:">>";
	margin-right: -1rem;
	}


/*カテゴリーのチョイス*/


div#categry_choice_box{
	width:100%;
	background:rgba(255,255,255,1);	
}

@media screen and (max-width:559px){
	div#categry_choice_box{
		display:none;	
	}
}

.fixed{
	position:fixed;
	top:0;
	z-index:9999;
	}

div.categry_choice_inner_box{
	width:100%;
	clear:both;
	float:left;	
}

div.categry_choice_inner_box label{
    display:inline-block;
    background:rgba(255,255,255,1);
    padding:15px;
    box-sizing:border-box;
    cursor: pointer;
	color:rgba(100,100,100,1);
	font-size:calc(8px + 0.5vw);
	position:relative;
}


div.categry_choice_inner_box input:checked+label{
	font-weight:bold;
	background:rgba(255,200,150,1);
	color:rgba(255,0,0,1);
}

div.categry_choice_inner_box input{
	text-decoration:none;
	display:none;
}







h1.title{
 	clear:both;
	float:right;
	 width:100%;
	 text-align:center;
 	border-bottom:0.1em rgba(0,0,0,0.5) solid;
 	font-size:calc(16px + 0.5vw);
	 font-weight:bold;
 	 position:relative;
	 z-index:9999;
	 color:rgba(0,0,0,1.00);
	 margin-top:1%;
}			
/*ここから商品別ページのmainimageの中 */


div.main {
	 width:60vw;
	 min-width:1024px;
	 margin:0 auto;
	 text-align:left;
	 position:relative;
	 clear:none;
	}

	@media screen and (max-width:559px){
		div.main {
			min-width:100%;
			}
	}

	p.category_title{
		font-size:calc(16px + 0.5vw);
		padding:1em;
		float:left;
		font-weight:bold;
		position:relative;
	}

		p.category_title span.idbox1{
			position:absolute;
			top:-6em;
			left:0;
		}

		p.category_title span.idbox2{
			position:absolute;
			top:-6em;
			left:0;
		}

	@media screen and (max-width:559px){
		p.category_title span.idbox1{
			top:-6em;
			}
	}

	@media screen and (max-width:559px){
		p.category_title span.idbox2{
			top:-6em;
			}
	}

	div.category-box-parallel{
		position:relative;
		padding:0;
		margin:0;
		float:left;
		width:100%;
	}


	div.category-box-main{
		width:50%;
		float:left;
		position:relative;
		padding:1em;
	}

	@media screen and (max-width:559px){
		div.category-box-main{
			width:100%;
			float:left;
			position:relative;
			padding:1em;
		}
	}

span.en{
	font-size:0.75em;
	margin:0.5% 0 0.2%;
	padding:0.5%;
	color:rgba(0,0,0,0.5);
	display:block;
	}


label.category-name1A,
label.category-name1B,
label.category-name1C,
label.category-name1D,
label.category-name1E,
label.category-name1F,
label.category-name1G,
label.category-name1H,
label.category-name2,
label.category-name3,
label.category-name4,
label.category-name5,
label.category-name6,
label.category-name7,
label.category-name8,
label.category-name9,
label.category-name10,
label.category-name11,
label.category-name12,
label.category-name13,
label.category-name14,
label.category-name15,
label.category-name16,
label.category-name17,
label.category-name18,
label.category-name19,
label.category-name20,
label.category-name21,
label.category-name22,
label.category-name23,
label.category-name24,
label.category-name25{
	clear:both;
	float:left;
	width:100%;
	position:relative;
	padding:0.5em 0.5em 0 0.5em;
	margin-top:0.5em;
	border-left:0.3em rgba(200,200,200,1) solid;
	border-bottom:0.3em rgba(200,200,200,1) solid;
	border-radius:0.2em;
	cursor:pointer;
	}

@media screen and (max-width:559px){
	label.category-name1A,
	label.category-name1B,
	label.category-name1C,
	label.category-name1D,
	label.category-name1E,
	label.category-name1F,
	label.category-name1G,
	label.category-name1H,
	label.category-name2,
	label.category-name3,
	label.category-name4,
	label.category-name5,
	label.category-name6,
	label.category-name7,
	label.category-name8,
	label.category-name9,
	label.category-name10,
	label.category-name11,
	label.category-name12,
	label.category-name13,
	label.category-name14,
	label.category-name15,
	label.category-name16,
	label.category-name17,
	label.category-name18,
	label.category-name19,
	label.category-name20,
	label.category-name21,
	label.category-name22,
	label.category-name23,
	label.category-name24,
	label.category-name25{
	margin:0.1em 0;
	widTH:100%;
	padding:0;
	}		
}


	label div{
		width:100%;
		display:table;
		float:left;
		position:relative;
	}


		label div p.mark,label div p.title{
			clear:both;
			position:relative;
			width:100%;
			display:block;
			font-size:calc(10px + 0.2vw);
			font-weight:bold;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			
		}

	@media screen and (max-width:559px){
		img.none{

		}
	}


	@media screen and (max-width:559px){
			label div p.mark,label div p.title{	
				font-size:0.9em;
				width:auto;
				max-width:100%;
			}
	}

	@media screen and (max-width:559px){
			label div p.mark{	
				height:4em;
			}
	}


			label div p.mark img{
				height:3.5em;
				width:auto;
				display:inline-block;
			}

@media screen and (max-width:559px){
			label div p.mark img{
				height:3.5em;
			}
}

		label div p.title{
			margin:0.5em 0 0 0.5em;
		}

			label div p.mark:before{
				content:'\25b6';
				transition:0.2s;
				color:rgba(0,125,255,1);
			}

		label div p.space{
			position:relative;
			width:calc(0.5em + 0.2vw);
			}





	p.title span.small{
		font-size:calc(12px + 0.2vw);
	}

@media screen and (max-width:559px){
	p.title span.small{
		font-size:calc(9px + 0.1vw);
		display:block;
	}		
}


	label div p.title span.en{
		display:block;
		padding:1% 0;
	}


@media screen and (max-width:559px){
	label div p.title span.en{
			 overflow:hidden;
			 text-overflow:ellipsis;
			 white-space: nowrap;
		}
}

@media screen and (max-width:559px){
	label div p.title span.en span{
			 display:block;
		}
}



		label img{
			width:calc(60px + 0.2vw);
			vertical-align:middle;
		}

		label p.example{
			width:100%;
			height:4em;
			clear:both;
			display:block;
			margin:0.5%;
			float:left;
			font-size:calc(10px + 0.2vw);
			color:rgba(0,0,200,0.7);
			position:relative;
		}

		@media screen and (max-width:559px){
		label p.example{
			width:100%;
			}
		}



 input{
	display:none;
	}


		input.no1A:checked ~ div.category-box1A,
		input.no1B:checked ~ div.category-box1B,
		input.no1C:checked ~ div.category-box1C,
		input.no1D:checked ~ div.category-box1D,
		input.no1E:checked ~ div.category-box1E,
		input.no1F:checked ~ div.category-box1F,
		input.no1G:checked ~ div.category-box1G,
		input.no1H:checked ~ div.category-box1H,
		input.no2:checked ~ div.category-box2,
		input.no3:checked ~ div.category-box3,
		input.no4:checked ~ div.category-box4,
		input.no5:checked ~ div.category-box5,
		input.no6:checked ~ div.category-box6,
		input.no7:checked ~ div.category-box7,
		input.no8:checked ~ div.category-box8,
		input.no9:checked ~ div.category-box9,
		input.no10:checked ~ div.category-box10,
		input.no11:checked ~ div.category-box11,
		input.no12:checked ~ div.category-box12,
		input.no13:checked ~ div.category-box13,
		input.no14:checked ~ div.category-box14,
		input.no15:checked ~ div.category-box15,
		input.no16:checked ~ div.category-box16,
		input.no17:checked ~ div.category-box17,
		input.no18:checked ~ div.category-box18,
		input.no19:checked ~ div.category-box19,
		input.no20:checked ~ div.category-box20,
		input.no21:checked ~ div.category-box21,
		input.no22:checked ~ div.category-box22,
		input.no23:checked ~ div.category-box23,
		input.no24:checked ~ div.category-box24,
		input.no25:checked ~ div.category-box25{
			opacity:1;
			height:100%;
			margin-top:1%;
			}

		input.no1A:checked ~ label.category-name1A p.mark:before,
		input.no1B:checked ~ label.category-name1B p.mark:before,
		input.no1C:checked ~ label.category-name1C p.mark:before,
		input.no1D:checked ~ label.category-name1D p.mark:before,
		input.no1E:checked ~ label.category-name1E p.mark:before,
		input.no1F:checked ~ label.category-name1F p.mark:before,
		input.no1G:checked ~ label.category-name1G p.mark:before,
		input.no1H:checked ~ label.category-name1H p.mark:before,
		input.no2:checked ~ label.category-name2 p.mark:before,
		input.no3:checked ~ label.category-name3 p.mark:before,
		input.no4:checked ~ label.category-name4 p.mark:before,
		input.no5:checked ~ label.category-name5 p.mark:before,
		input.no6:checked ~ label.category-name6 p.mark:before,
		input.no7:checked ~ label.category-name7 p.mark:before,
		input.no8:checked ~ label.category-name8 p.mark:before,
		input.no9:checked ~ label.category-name9 p.mark:before,
		input.no10:checked ~ label.category-name10 p.mark:before,
		input.no11:checked ~ label.category-name11 p.mark:before,
		input.no12:checked ~ label.category-name12 p.mark:before,
		input.no13:checked ~ label.category-name13 p.mark:before,	
		input.no14:checked ~ label.category-name14 p.mark:before,
		input.no15:checked ~ label.category-name15 p.mark:before,
		input.no16:checked ~ label.category-name16 p.mark:before,
		input.no17:checked ~ label.category-name17 p.mark:before,
		input.no18:checked ~ label.category-name18 p.mark:before,	
		input.no19:checked ~ label.category-name19 p.mark:before,
		input.no20:checked ~ label.category-name20 p.mark:before,
		input.no21:checked ~ label.category-name21 p.mark:before,
		input.no22:checked ~ label.category-name22 p.mark:before,
		input.no23:checked ~ label.category-name23 p.mark:before,
		input.no24:checked ~ label.category-name24 p.mark:before,
		input.no25:checked ~ label.category-name25 p.mark:before{
			content:'\25bc';
			-moz-transform:rotate(360deg);
			-ms-transform:rotate(360deg);
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
			color:rgba(255,0,0,1)
			}

		input.no1A:checked ~ label.category-name1A,
		input.no1B:checked ~ label.category-name1B,
		input.no1C:checked ~ label.category-name1C,
		input.no1D:checked ~ label.category-name1D,
		input.no1E:checked ~ label.category-name1E,
		input.no1F:checked ~ label.category-name1F,
		input.no1G:checked ~ label.category-name1G,
		input.no1H:checked ~ label.category-name1H,
		input.no2:checked ~ label.category-name2,
		input.no3:checked ~ label.category-name3,
		input.no4:checked ~ label.category-name4,
		input.no5:checked ~ label.category-name5,
		input.no6:checked ~ label.category-name6,
		input.no7:checked ~ label.category-name7,
		input.no8:checked ~ label.category-name8,
		input.no9:checked ~ label.category-name9,
		input.no10:checked ~ label.category-name10,
		input.no11:checked ~ label.category-name11,
		input.no12:checked ~ label.category-name12,
		input.no13:checked ~ label.category-name13,	
		input.no14:checked ~ label.category-name14,
		input.no15:checked ~ label.category-name15,
		input.no16:checked ~ label.category-name16,
		input.no17:checked ~ label.category-name17,
		input.no18:checked ~ label.category-name18,	
		input.no19:checked ~ label.category-name19,
		input.no20:checked ~ label.category-name20,
		input.no21:checked ~ label.category-name21,
		input.no22:checked ~ label.category-name22,
		input.no23:checked ~ label.category-name23,
		input.no24:checked ~ label.category-name24,
		input.no25:checked ~ label.category-name25{
			background:rgba(0,0,0,0.3);
			color:rgba(255,255,255,1)
		}

div.category-box1A,
div.category-box1B,
div.category-box1C,
div.category-box1D,
div.category-box1E,
div.category-box1F,
div.category-box1G,
div.category-box1H,
div.category-box2,
div.category-box3,
div.category-box4,
div.category-box5,
div.category-box6,
div.category-box7,
div.category-box8,
div.category-box9,
div.category-box10,
div.category-box11,
div.category-box12,
div.category-box13,
div.category-box14,
div.category-box15,
div.category-box16,
div.category-box17,
div.category-box18,
div.category-box19,
div.category-box20,
div.category-box21,
div.category-box22,
div.category-box23,
div.category-box24,
div.category-box25{
	width:100%;
	position:relative;
	clear:both;
	opacity:0;
	transition:0.5s;
	height:0;
	overflow: hidden;
	}

		label.link_close_base{
			clear:both;
			font-size:calc(11px + 0.2vw);
			background:rgba(0,0,0,0.5);
			padding:0.5% 2%;
			position:relative;
			font-weight:bold;
			border-radius:calc(1px + 0.2vw);
			margin:1%;
			color:rgba(255,255,255,1);
			float:right;
			border-right:0.2em rgba(200,200,200,1) solid;
			border-top:0.2em rgba(200,200,200,1) solid;
			}


			
		label.link_close_base:after{
			  content:'\25b2';
			  display:inline-block;
			  background-size: contain;
			 color:rgba(255,0,0,1);
			 padding-right:0;
			}

	div.parts-box{
		float:left;
		width:calc(50% - 2%);/*元は100% / 3*/
		position:relative;
		color:rgba(50,50,50,1);
		margin:2% 1%;
		border-bottom:0.2em solid rgba(100,100,100,0.3);
		}

		.category-box1A .parts-box,
		.category-box1B .parts-box,
		.category-box1C .parts-box,
		.category-box1D .parts-box,
		.category-box1E .parts-box,
		.category-box1F .parts-box,
		.category-box1G .parts-box,
		.category-box1H .parts-box{
			border-color:#EA5504;
		}

		.category-box2 .parts-box{
			border-color:#E60012;
			}

		.category-box3 .parts-box{
			border-color:#FDD000;
			}

		.category-box4 .parts-box{
			border-color:#F39700;
			}

		.category-box5 .parts-box{
			border-color:#0068B6;
			}

		.category-box6 .parts-box{
			border-color:#6EBA2C;
			}

		.category-box7 .parts-box{
			border-color:#0099D9;
			}

		.category-box8 .parts-box{
			border-color:#1D2088;
			}

		.category-box9 .parts-box{
			border-color:#4B829A;
			}

		.category-box10 .parts-box{
			border-color:#EC6E82;
			}

		.category-box11 .parts-box{
			border-color:#00A0E9;
			}

		.category-box12 .parts-box{
			border-color:#00AC96;
			}

		.category-box13 .parts-box{
			border-color:#008DBD;
			}

		.category-box14 .parts-box{
			border-color:#009944;
			}

		.category-box15 .parts-box{
			border-color:#7B59A3;
			}

		.category-box16 .parts-box{
			border-color:#7B59A3;
			}

		.category-box17 .parts-box{
			border-color:#7B59A3;
			}

		.category-box18 .parts-box{
			border-color:#7B59A3;
			}

		.category-box19 .parts-box{
			border-color:#7B59A3;
			}

		.category-box20 .parts-box{
			border-color:#CA4684;
			}

		.category-box21 .parts-box{
			border-color:#DFD238;
			}

		.category-box22 .parts-box{
			border-color:#DFD238;
			}

		.category-box23 .parts-box{
			border-color:#DFD238;
			}

		.category-box24 .parts-box{
			border-color:#DFD238;
			}

		.category-box25 .parts-box{
			border-color:#DFD238;
			}

		@media screen and (max-width:559px){
			div.parts-box{
				width:100%;
				margin-top:2%;
				}
			}

		img.brand{
			position:relative;
			width:23%;
			float:left;
			padding:1%;
		}

@media screen and (max-width:559px){
		img.brand{
			display:none;
		}
}

		p.main_model{
			position:relative;
			float:left;
			width:calc(70% - 2%);
			font-size:calc(6px + 0.2vw);
			font-weight:bold;
			padding:0.5% 0.5% 0;
			margin:1%;
			border-bottom:0.1em solid rgba(100,100,100,0.3);
			color:rgba(0,0,0,1);
			word-wrap:break-word;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}

@media screen and (max-width:559px){
	p.main_model{
			font-size:calc(14px + 0.2vw);
		}
}



	p.parts-name{
		width:100%;
		clear:both;
		float:left;	
		margin-top:0.5%;
		font-size:calc(9px + 0.2vw);
		display:block;
		position:relative;
		word-wrap:break-word;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		padding:0.5%;
		}

	@media screen and (max-width:559px){
			p.parts-name{
			font-size:calc(13px + 0.2vw);	
			}
	}

	p.parts-name span{
		font-size:0.8em;
		display:block;
		word-wrap:break-word;
		 overflow:hidden;
		 text-overflow:ellipsis;
		 white-space: nowrap;
		}

	div.parts-box img.main_image{
		width:30%;
		position:relative;
		float:left;
		padding:1% 0;
		}

	@media screen and (max-width:559px){
	div.parts-box img.main_image{
		width:30%;
		}
	}

 /*　トップへ戻る　*/

	footer{
		clear:both;
		width:100%;
		position:relative;
		 text-align:center;
		}

		div.link_back_base,	div.link_top_base{
			font-size:calc(11px + 0.2vw);
			background:rgba(50,50,50,1);
			padding:0.5% 2%;
			position:relative;
			font-weight:bold;
			border-radius:calc(1px + 0.2vw);
			margin:1%;
			color:white;
			}

		div.link_back_base{
			float:left;
			}

		div.link_top_base{
			float:right;
			}

		div.link_back_base:before{
			  content: '';
			  display: inline-block;
			  width:calc(20px + 0.2vw);
			  height:calc(20px +  0.2vw);
			  background:url(../universalcss/back_mark.png) no-repeat;
			  background-size: contain;
			  vertical-align: middle;
			}


		div.link_top_base:after{
			  content:'';
			  display: inline-block;
			  width:calc(20px + 0.2vw);
			  height:calc(20px +  0.2vw);
			  background:url(../universalcss/top_mark.png) no-repeat ;
			  background-size: contain;
			  vertical-align: middle;
			}

		.link_back_base a:link,.link_top_base a:link{
		 	text-decoration:none;
			}

			p.copylight{
				clear:both;
				font-size:calc(9px + 0.2vw);
				color:rgba(150,150,150,1);
				padding:0.5%;
			}


			div.tone{
			 position:absolute;
			 top:0;
			 left:0;
			 width:100%;
			 height:100%;
			 z-index:9998;
			 background:rgba(0,30,30,0.5);
			 opacity: 0;
			 transition:0.2s;
			}

				div.tone:hover{
				 opacity:1;
				}