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

	主としてTOPページ

*/



#top-main_image			{ width:100%; height:230px; border-bottom:1px solid #ffffff; background:url(../img/top/main_image_back.jpg) center center no-repeat; background-size:cover;}
#top-main_image	.inner	{ width:100%; height:230px; margin:0 auto; overflow:hidden; }
#top-main_image	.box	{ width:1366px; height:230px; margin:0 auto; position:relative;}
#top-main_image .chatch	{ z-index:20; position:absolute; top:35px; left:165px; width:690px; height:148px; background:url(../img/top/main_image-chatch.png) center center no-repeat;}
#top-main_image .chatch *	{ display:none;}


#top-main_image .box-0	{
	z-index:1;position:absolute; top:25px; left:10.2%; width:2.5%; height:30px;
	background : #EF569F;  background : rgba(239, 86, 159, 1);  opacity : 0.75;  filter: alpha(opacity=75) progid:DXImageTransform.Microsoft.Alpha(opacity=75) ;
}


#top-main_image .box-1	{
	z-index:10;position:absolute; top:100px; left:-3.6%; width:13.6%; height:94px;
	background : #FBB03B;  background : rgba(251, 176, 59, 1);  opacity : 0.5;  filter: alpha(opacity=75) progid:DXImageTransform.Microsoft.Alpha(opacity=50) ;
}

#top-main_image .box-2			{	z-index:3;position:absolute; top:153px; left:-3.1%; width:7.2%; height:70px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-2 .inner	{	width:100%; height:70px; background:url(../img/top/box-2.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:0.75;}/* シグナルアナライザ(MS2691A) */

#top-main_image .box-3			{	z-index:4;position:absolute; top:53px; left:2.7%; width:5.5%; height:114px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-3 .inner	{	width:100%; height:114px; background:url(../img/top/box-3.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:0.75;}

#top-main_image .box-4			{	z-index:5;position:absolute; top:74px; left:-5.8%; width:6.9%; height:70px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-4 .inner	{	width:100%; height:70px; background:url(../img/top/box-4.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:0.75;}

#top-main_image .box-5			{	z-index:6;position:absolute; top:-28px; left:64.7%; width:6.8%; height:81px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-5 .inner	{	width:100%; height:93px; background:url(../img/top/box-5.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:0.75;}

#top-main_image .box-6			{	z-index:7;position:absolute; top:0px; left:82.8%; width:18.1%; height:160px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-6 .inner	{	width:100%; height:160px; background:url(../img/top/box-6.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:0.75;}

#top-main_image .box-7			{	z-index:8;position:absolute; top:-12px; left:72.5%; width:7.3%; height:109px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-7 .inner	{	width:100%; height:109px; background:url(../img/top/box-7.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:0.50;}

#top-main_image .box-8			{	z-index:8;position:absolute; top:81px; left:66%; width:7.3%; height:73px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-8 .inner	{	width:100%; height:73px; background:url(../img/top/box-8.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:0.50;}

#top-main_image .box-9			{	z-index:8;position:absolute; top:131px; left:69.2%; width:11.7%; height:107px; border:1px solid #ffffff; overflow:hidden;}
#top-main_image .box-9 .inner	{	width:100%; height:107px; background:url(../img/top/box-9.jpg) 0 0 no-repeat; background-size:cover; display:block; opacity:1;}

/*	メインイメージの内、手前にはみ出す画像	*/
#top-main_image .image-0	{ width:1366px; height:10px; margin:0 auto; overflow:visible; position:relative;}
#top-main_image .image-0 .inner			{
	z-index:16;position:absolute; top:-180px; left:76.1%; width:274px; height:214px;
	background:url(../img/top/image-0.png) 0 bottom no-repeat; background-size:contain; display:block;
}

#top-main_image .cube-0	{
	z-index:2;position:absolute; top:125px; left:60%; width:4.2%; height:48px;
	background : #EF569F;  background : rgba(239, 86, 159, 1);  opacity : 0.75;  filter: alpha(opacity=75) progid:DXImageTransform.Microsoft.Alpha(opacity=75) ;
}
#top-main_image .cube-1	{
	z-index:2;position:absolute; top:50px; left:62.7%; width:5.6%; height:56px;
	background : #FBB03B;  background : rgba(251, 176, 59, 1);  opacity : 0.5;  filter: alpha(opacity=75) progid:DXImageTransform.Microsoft.Alpha(opacity=50) ;
}

#top-main_image .cube-2	{
	z-index:2;position:absolute; top:50px; left:62.7%; width:5.6%; height:56px;
	background : #FBB03B;  background : rgba(251, 176, 59, 1);  opacity : 0.5;  filter: alpha(opacity=75) progid:DXImageTransform.Microsoft.Alpha(opacity=50) ;
}

#top-main_image .cube-3	{
	z-index:2;position:absolute; top:136px; left:64%; width:3.9%; height:83px;
	background : #00A99D;  background : rgba(0, 169, 157, 1);  opacity : 0.75;  filter: alpha(opacity=75) progid:DXImageTransform.Microsoft.Alpha(opacity=75) ;
}

#top-main_image .cube-4	{
	z-index:2;position:absolute; top:-9px; left:1025px; width:176px; height:130px;
	background : #FFCE00;  background : rgba(255, 206, 0, 1); opacity : 0.5; filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.Alpha(opacity=50) ;
}

#top-main_image .cube-5	{
	z-index:2;position:absolute; top:147px; left:92.9%; width:12%; height:83px;
	background : #ED1C24;  background : rgba(237, 28, 36, 1);  opacity : 0.5;  filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.Alpha(opacity=50) ;
}




#top-search	{ background:url(../img/top/search-w.jpg) 0 0 no-repeat; background-size:cover; width:100%; height:180px; color:#ffffff;}

#top-search input.date	{ display:none;}
#top-search input.word	{
	 padding:5px 10px; border:solid 3px #FF0000; vertical-align:middle; height:36px; width:53%; font-size:150%;
  background : #FFFFFF;  border-radius : 10px; -moz-border-radius : 10px;  -webkit-border-radius : 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.4); font-size:1.2em;
}

#top-search .top-search-input_area	{ text-align:center; padding-top:38px;}
#top-search .top-search-input_area .name	{background-color: #FF0000; margin-right: 15px; text-align: center; border-radius: 8px; font-size:150%; display:inline-block; vertical-align:middle; font-weight:bold; padding: 10px 15px; /* text-shadow: 2px 2px 0px rgba(255,255,255,0.8); */}


#top-search-btn	{ background:url(../img/base/search-btn.png) center center no-repeat; width:400px; display:block; font-size:150%; line-height:100%;
 border-radius : 10px; -moz-border-radius : 10px;  -webkit-border-radius : 10px; box-shadow: 0 5px 10px rgba(0,0,0,0.4);
 margin:15px auto 0; cursor:pointer;}
#top-search-btn	input	{ display:none;}
#top-search-btn span	{ font-weight:bold; background:url(../img/base/search-icon.png) 10px center no-repeat; display:inline-block; width:100%; padding:15px 0 15px 65px;
}
#top-search-btn span:hover	{ text-shadow:1px 1px 2px #ffff00;}



.top-kw-tag-midashi{
    margin-top:15px;
	margin-bottom:5px;
	margin-left:15px;
    display:block;
}    
ul.top-kw-tag{
	display:flex;
	justify-content:flex-start;
	padding:10px 15px 10px 15px;
	list-style:none;
	flex-wrap: wrap;
}
ul.top-kw-tag li{
	background:#006837;
	border-radius:3px;
	margin-bottom:10px;
	margin-right:10px;
}
ul.top-kw-tag li a:link{
	display:block;
	text-decoration: none;
	padding:3px 12px;
	border-radius:3px;
	color:#ffffff;
	font-size: 14px;
}
ul.top-kw-tag li a:visited{
	color:#ffffff;
}
ul.top-kw-tag li a:hover{
	transition: .3s;
	background: rgba(255,255,255,0.5); 
}



#top-news .headline span	{ border-color:#662d91;}

#top-news .box	{ padding:30px 15px 20px 15px; border-bottom:1px solid #cccccc;}
#top-news .date		{ color:#006837; margin-bottom:5px;}
#top-news .title	{ font-size:110%; color:#006837; margin-bottom:5px;}
#top-news .inner	{/*  height:50vw; max-height:350px; */ overflow-y:scroll;}

#top-suggest_product .headline span	{ border-color:#f15a24;}
#top-suggest_product ul	{ margin-top:10px;}
#top-suggest_product li	{ width:calc(32% - 7px); width:-webkit-calc(32% - 7px); float:left; padding:5px 0 5px 5px; border:1px solid #cccccc; background-color:#f6f6f6; margin:0 0.5% 4px;}
#top-suggest_product li .box	{ position:relative;}
#top-suggest_product li .image	{ float:left; width:100px; height:80px; background-position:center center; background-repeat:no-repeat; background-size:contain;}
#top-suggest_product li .image img	{ width:100%;}
#top-suggest_product li .data	{ padding-left:105px; padding-bottom:5px;}

#top-suggest_product a	{ text-decoration:none; color:inherit;}


#top-suggest_product .product-model_number	{ font-size:80%; display:block; margin-bottom:3px;}
#top-suggest_product .product-maker	{ font-size:80%; display:block; margin-bottom:3px;}
#top-suggest_product .product-name	{ font-weight:bold; display:block; margin-bottom:3px;}
#top-suggest_product .product-category	{ font-size:80%; display:block; margin-bottom:3px;}
#top-suggest_product .product-price	{ font-weight:bold; font-size:110%; line-height:110%; display:block; vertical-align:middle; color:#ed1c24;}
#top-suggest_product .product-retail	{ font-size:80%; display:block; vertical-align:middle;}
#top-suggest_product .product-retail span:first-of-type	{ font-size:80%;}

#top-suggest_product .tag	{ position:absolute; background-position:right center; background-repeat:no-repeat; color:#ffffff; font-size:68%; padding:1px 20px 0 5px; top:-8px; left:-8px;}
#top-suggest_product .genuine .tag	{ background-image:url(../img/top/tag-genuine.png);}
#top-suggest_product .wakeari .tag	{ background-image:url(../img/top/tag-wakeari.png);}

#top-suggest_product li.genuine		{ border-color:#ea6c75;}
#top-suggest_product li.wakeari		{ border-color:#603813;}

#top-suggest_product:after	{ content:""; display:block; clear:both;}













#top-trade span	{ border-color:#fbb03b}
#top-trade .box	{ display:block; width:1008px; height:190px; margin:10px auto 0; overflow:hidden; background:url(../img/top/top-trade-back.jpg?2018) center center no-repeat;}
#top-trade .box img	{ display:block;}
#top-trade-btn	{ display:block; width:1008px; margin:0 auto; background-color:#fbb03b; text-align:center; padding:14px 0 10px;}
#top-trade-btn a	{ color:#8d1600; font-size:130%; text-decoration:none; font-weight:bold;}
#top-trade-btn a:hover	{ text-shadow:2px 2px 2px rgba(255,0,0,0.3)}







#top-category span	{ border-color:#0071bc}
#top-category ul	{ margin-top:10px; position:relative; left:8px;}
#top-category li	{ margin:0 3px 3px 0; float:left;}
#top-category li a	{ text-decoration:none; color:#000000; width:100%; height:40px; display:block; word-break:break-strict;}
#top-category li a:hover	{ opacity:0.7;}
#top-category li	{ width:calc(24.9% - 7px); width:-webkit-calc(24.9% - 7px); height:40px; border:1px solid #666666; vertical-align:middle; overflow:hidden; word-break:keep-all;}

#top-category li .num	{ font-size:90%;  padding:0 5px;width:30px; height:40px; display:table-cell; vertical-align:middle; background-color:#666666; color:#ffffff;}
#top-category li .tag	{ vertical-align:middle; display:table-cell;}
#top-category li .num span	{ font-size:60%;}
#top-category li .name	{ font-size:90%; display:table-cell; vertical-align:middle; height:40px; width:calc(100% - 35px); width:-webkit-calc(100% - 35px); padding-left:5px;}
#top-category li .name .sml	{ font-size:90%;}

#top-category ul:after	{ display:block; clear:both; content:"";}


#top-category li:nth-of-type(1) .tag,
#top-category li:nth-of-type(2) .tag,
#top-category li:nth-of-type(3) .tag	{ display:block; width:80%; height:110px; position:relative;}

#top-category li:nth-of-type(1)	{ background:url(../img/top/category-0.jpg) right bottom no-repeat; background-size:cover;}
#top-category li:nth-of-type(2)	{ background:url(../img/top/category-1.jpg) right bottom no-repeat; background-size:cover;}
#top-category li:nth-of-type(3)	{ background:url(../img/top/category-2.jpg) right bottom no-repeat; background-size:cover;}

#top-category li:nth-of-type(1) .tag	{ background:url(../img/top/category-0.png) right center no-repeat;}
#top-category li:nth-of-type(2) .tag	{ background:url(../img/top/category-1.png) right center no-repeat;}
#top-category li:nth-of-type(3) .tag	{ background:url(../img/top/category-2.png) right center no-repeat;}

#top-category li:nth-of-type(1) a,
#top-category li:nth-of-type(2) a,
#top-category li:nth-of-type(3) a	{ color:#ffffff; display:block; width:100%; height:110px; background:url(../img/top/category_mask.png) 0 bottom repeat-x;}


#top-category li:nth-of-type(1) a:hover,
#top-category li:nth-of-type(2) a:hover,
#top-category li:nth-of-type(3) a:hover	{ opacity:1;}

#top-category li:nth-of-type(1):hover,
#top-category li:nth-of-type(2):hover,
#top-category li:nth-of-type(3):hover	{ opacity:0.7;}

#top-category li:nth-of-type(1),
#top-category li:nth-of-type(2),
#top-category li:nth-of-type(3)	{ width:calc(24.9% - 5px); width:-webkit-calc(24.9% - 5px); height:110px; background-color:#f6f6f6; border:none;}

#top-category li:nth-of-type(1) .num,
#top-category li:nth-of-type(2) .num,
#top-category li:nth-of-type(3) .num	{ display:block; font-size:175%; position:absolute; left:0; top:50px; text-align:center; width:76%; background-color:transparent;}

#top-category li:nth-of-type(1) .num span,
#top-category li:nth-of-type(2) .num span,
#top-category li:nth-of-type(3) .num span	{ font-size:50%;}

#top-category li:nth-of-type(1) .name,
#top-category li:nth-of-type(2) .name,
#top-category li:nth-of-type(3) .name	{ display:block; position:absolute; left:5px; top:10px; text-align:left; width:100%;}




#top-maker .headline span	{ border-color:#006837;}
#top-maker ul	{ margin-top:20px; position:relative; left:3px;}
#top-maker li	{ margin:0 2px 3px 0; float:left; width:200px; text-align:center; margin-bottom:20px;}
#top-maker li a	{ color:#000000; text-decoration:none;}

#top-maker ul:after	{ display:block; clear:both; content:"";}



#top-other_content ul	{ display:table; margin:0 auto;}
#top-other_content li	{ display:inline-block; text-align:left;}
#top-other_content li	{ width:calc(33% - 5px); width:-webkit-calc(33% - 5px);}
#top-other_content li img	{ display:block; margin-bottom:0.5em; width:100%;}
#top-other_content li:nth-of-type(2)	{ margin:0 5px ;}
#top-other_content li a	{ text-decoration:none; font-size:120%;}
#top-other_content li a:hover	{ text-shadow:2px 2px 4px #93F5BA;}





@media screen and (min-width: 1281px)  {


#top-category li:nth-of-type(4) .tag	{ display:block; width:80%; height:110px; position:relative;}
#top-category li:nth-of-type(4)	{ background:url(../img/top/category-3.jpg) right bottom no-repeat; background-size:cover;}
#top-category li:nth-of-type(4) .tag	{ background:url(../img/top/category-3.png) right center no-repeat;}
#top-category li:nth-of-type(4) a 	{ color:#ffffff; display:block; width:100%; height:110px; background:url(../img/top/category_mask.png) 0 bottom repeat-x;}
#top-category li:nth-of-type(4) a:hover 	{ opacity:1;}
#top-category li:nth-of-type(4):hover 	{ opacity:0.7;}
#top-category li:nth-of-type(4) 	{ width:calc(24.9% - 5px); width:-webkit-calc(24.9% - 5px); height:110px; background-color:#f6f6f6; border:none;}
#top-category li:nth-of-type(4) .num	{ display:block; font-size:175%; position:absolute; left:0; top:50px; text-align:center; width:76%; background-color:transparent;}
#top-category li:nth-of-type(4) .num span	{ font-size:50%;}
#top-category li:nth-of-type(4) .name	{ display:block; position:absolute; text-align:left; left:5px; top:10px; width:100%;}


}




@media screen and (min-width: 0) and (max-width: 1366px) {

	#top-main_image	.box	{ width:100%;}
	#top-main_image .chatch	{ left:9%; width:55.5%; background-size:contain;}
	#top-main_image .image-0	{ width:100%;}
	#top-main_image .image-0 .inner			{	left:76.1%; width:274px; height:214px; background-size:contain;	}

#top-trade span	{ border-color:#fbb03b}
#top-trade .box	{ display:block; width:98%; height:auto; margin:10px auto 0; overflow:hidden; background:url(../img/top/top-trade-back.jpg) center center no-repeat;}
#top-trade .box img	{ width:100%;}
#top-trade-btn	{ display:block; width:98%; margin:0 auto; background-color:#fbb03b; text-align:center; padding:14px 0 10px;}
#top-trade-btn a	{ color:#8d1600; font-size:130%; text-decoration:none; font-weight:bold;}
#top-trade-btn a:hover	{ text-shadow:2px 2px 2px rgba(255,0,0,0.3)}


#top-suggest_product .product-retail	{ font-size:80%; }

#top-maker li	{ width:calc(19.9% - 4px); width:-webkit-calc(19.9% - 4px); }
#top-maker li img	{ width:100%;}


	#top-main_image .image-0 .inner	{ width:21%;}
	
	

	
}


@media screen and (min-width: 1166px) and (max-width: 1450px) {
	#top-main_image .image-0	{ width:100%;}
}



@media screen and (min-width: 0) and (max-width: 1280px) {
/*
	商品リスト用
*/
#top-suggest_product .product-maker	,
#top-suggest_product .product-model_number { width:100%;}
#top-suggest_product .product-price	{ width:100%;}
#top-suggest_product .product-retail	{ width:100%; text-align:left;}
#top-suggest_product .product-retail span:first-of-type	{ font-size:80%; margin-right:0.5em;}


#top-category li	{ width:calc(33% - 7px); width:-webkit-calc(33% - 7px);}
#top-category li:nth-of-type(1),
#top-category li:nth-of-type(2),
#top-category li:nth-of-type(3)	{ width:calc(33% - 5px); width:-webkit-calc(33% - 5px);}


#top-category li:nth-of-type(1) .tag,
#top-category li:nth-of-type(2) .tag,
#top-category li:nth-of-type(3) .tag,
#top-category li:nth-of-type(4) .tag	{ width:80%; }

#top-category li .name	{ font-size:90%;}
#top-category li:nth-of-type(1) .name,
#top-category li:nth-of-type(2) .name,
#top-category li:nth-of-type(3) .name,
#top-category li:nth-of-type(4) .name	{ font-size:90%;}
}

@media screen and (min-width: 0) and (max-width: 1133px) {
/*
	商品リスト用
*/


#top-suggest_product ul	{ width:96%; margin:10px auto 0;}
#top-suggest_product .product-price	{ width:50%; font-size:120%;}
#top-suggest_product .product-retail	{ font-size:80%; }
#top-suggest_product .product-retail span:first-of-type	{ font-size:70%;}

#top-suggest_product li	{ width:calc(49% - 7px); width:-webkit-calc(49% - 7px); }

}



@media screen and (min-width: 0) and (max-width: 1024px) {

	#top-main_image	.box	{ width:940px;}
	#top-main_image .image-0	{ width:940px;}



}





@media screen and (min-width: 0) and (max-width: 640px) {
	#top-main_image	{ display:none;}
#top-suggest_product li	{ width:calc(100% - 5px); -webkit-width:calc(100% - 5px); margin-bottom:1em; position:relative; left:-2px;}
#top-suggest_product li .image	{ width:30%;}
#top-suggest_product li .data	{ width:68%; float:right; padding-left:0;}

#top-search .top-search-input_area .name	{ display:none;}
#top-search input.word	{ width:calc(90% - 20px); -webkit-width:calc(90% - 20px);}
#top-search-btn	{ width:80%; max-width:400px; overflow:hidden; font-size:120%; text-align:center;}
#top-search-btn span	{ width:calc(100% - 65px); -webkit-width:calc(100% - 65px); text-indent:-30px;}


#top-category ul	{ left:5px;}


input::-webkit-input-placeholder	{ font-size:80%;}
input:-moz-placeholder	{ font-size:80%;}
input::-moz-placeholder	{ font-size:80%;}
input:-ms-input-placeholder	{ font-size:80%;}


#top-trade-btn a	{ font-size:100%;}




#top-category li	{ width:calc(49% - 7px); width:-webkit-calc(49% - 7px);}
#top-category li:nth-of-type(1),
#top-category li:nth-of-type(2),
#top-category li:nth-of-type(3),
#top-category li:nth-of-type(4)	{ width:calc(49% - 5px); width:-webkit-calc(49% - 5px);}

#top-category li:nth-of-type(1) .tag,
#top-category li:nth-of-type(2) .tag,
#top-category li:nth-of-type(3) .tag,
#top-category li:nth-of-type(4) .tag	{ width:90%; }

#top-category li .name	{ font-size:80%; line-height:110%;}
#top-category li:nth-of-type(1) .name,
#top-category li:nth-of-type(2) .name,
#top-category li:nth-of-type(3) .name,
#top-category li:nth-of-type(4) .name	{ font-size:90%;}

#top-category li:nth-of-type(4) .tag	{ display:block; width:90%; height:110px; position:relative;}
#top-category li:nth-of-type(4)	{ background:url(../img/top/category-3.jpg) right bottom no-repeat; background-size:cover;}
#top-category li:nth-of-type(4) .tag	{ background:url(../img/top/category-3.png) right center no-repeat;}
#top-category li:nth-of-type(4) a 	{ color:#ffffff; display:block; width:100%; height:110px; background:url(../img/top/category_mask.png) 0 bottom repeat-x;}
#top-category li:nth-of-type(4) a:hover 	{ opacity:1;}
#top-category li:nth-of-type(4):hover 	{ opacity:0.7;}
#top-category li:nth-of-type(4) 	{ width:calc(49% - 5px); width:-webkit-calc(49% - 5px); height:110px; background-color:#f6f6f6; border:none;}
#top-category li:nth-of-type(4) .num	{ display:block; font-size:175%; position:absolute; left:0; top:50px; text-align:center; width:76%; background-color:transparent;}
#top-category li:nth-of-type(4) .num span	{ font-size:50%;}
#top-category li:nth-of-type(4) .name	{ display:block; position:absolute; text-align:left; left:5px; top:10px; width:100%;}

#top-maker li	{ width:49%; margin:0.5em 0 1em 0; padding:0; text-align:left; text-indent:1em;}
#top-other_content li	{ font-size:90%; text-align:center;}
}