@charset "UTF-8";

/*--------------------------------
HEADER
--------------------------------*/

header{
	background: #FFF;
	position: fixed;
 	top: 0;
    left:0;
    z-index: 4;
    width: 100%;
    height: 80px;
    margin: 0;
    padding:0;
    border-bottom: 1px solid #d9d9d9;
    text-align: center;
   	}
   	header img{vertical-align: middle;}
	/*--SP版--*/
	@media only screen and (max-width: 800px) {
		header{
			height: 50px;
			border-bottom:none;
 		   }
	}
    .kankocho{
    	display: block;
    	width: 100%;
    	text-align: center;
    }
    .kankocho img{
    	width: 540px;
    }
	@media only screen and (max-width: 800px) {
	.kankocho{
    	width: 100%;
    	text-align: center;
    	height: 35px;
    }
	.kankocho img{ 
		max-width: 95%;
		width: auto;
		max-height: 35px;
	  }
	}

	/*--logo--*/
	h1#headLogo{
		width: 100%;
		padding: 0;
		text-align: center;
		height: 80px;
	}
	#headLogo img{width: 320px; margin-top: 15px;}
		@media only screen and (max-width: 1000px) {
			h1#headLogo{
				padding: 0;
				margin-left: 50px;
			}
			#headLogo img{width:320px;}
		}
		@media only screen and (max-width: 800px) {
			h1#headLogo{height: 50px; padding: 8px 30%; margin-left: 0;}
			#headLogo img{width:100%; max-width:160px; margin-left: 0; margin-top: 8px;}
		}
		@media only screen and (max-width: 374px) {
			h1#headLogo{padding: 9px 35% 9px 30% ;}
		}

	#headColumn{
		width: 100%;
		margin-top: -80px;
	}
		#headNav{
			float: left;
		}
		#subNav{
			float: right;
		}
		@media only screen and (max-width: 800px) {
			#headColumn{margin-top: -50px;
				background-color:#FFF; }
		}

	/*--glovalNavigation--*/
	#headNav ul{
		margin-left: 20px;
	}
	#headNav ul li{
		display: block;
		float: left;
		margin: 0 25px 0 0;
		padding:  0;
		font-weight: bold;
		font-size: 14px;
		line-height: 79px;
	   }

		#headNav ul li a{
	  		  display: block;
	  		  padding: 0;
			  line-height: 77px;
			  color: #000;
			  text-align: center;
			  text-decoration: none;
		}
		#headNav ul li.current, #headNav ul li:hover{
			border-bottom: 3px solid #000;
		}
		@media only screen and (max-width: 800px) {
			#headNav ul li a{line-height: 50px;}
			/*--ハンバーガー以外はスマホ非表示--*/
			#headNav ul li:nth-child(n+2){display: none;}
		}

		/*--ドロワー用ボタン--*/
		#headNav ul li#headMenu:hover{border-bottom: none;}
	 	#headNav li#headMenu{
	 		margin-right: 28px;
			width: 28px;
	 	   	background: url(../images/menu_open.gif) center 30px no-repeat ;
	 	   	background-size: 26px;
	 	   	white-space: nowrap;
	 	 }
	 	#headNav li#headMenu.open{
	 		   background: url(../images/spmenu_close.gif) center 30px no-repeat;
	 		   background-size: 20px;
	 		 }
		@media only screen and (max-width: 800px) {
			#headNav ul{
				margin-left: 15px;
			}
		 	#headNav li#headMenu{
	 			margin-right: 0px;
				width: 20px;
	 		   	background: url(../images/spmenu_open.gif) center 16px no-repeat ;
	 		   	background-size: 20px;
	 		   	white-space: nowrap;
	 		 }
	 		 .sb-active #headNav li#headMenu{
	 			background: url(../images/spmenu_close.gif) center 16px no-repeat;
	 			background-size: 20px;
	 		}
		}




	/*--subNav--*/
	#subNav{
		text-align: right;
		height: 30px;
		margin-top: 25px;
		margin-right: 15px;
	}
	#subNav li{
		display: inline-block;
		text-align: center;
		position: relative;
		margin-left: 2px;
		font-size: 12px;
	}
	/*--商品数--*/
	#subNav li span{
		position: absolute;
			top: 2px;
			right: 8px;
			color: #fff;
			background: #f00;
			font-size: 10px;
			width: 16px;
			height: 16px;
			line-height: 16px;
			z-index: 2;
			font-weight: bold;
			text-align: center;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic" , sans-serif;

	}
	#subNav li:nth-child(n+2){border-left: 1px solid #ccc;}
		#subNav li a{width: 56px; line-height: 30px; display: block;}
		#subNav li a img{width: 24px;}
		/*--★検索バー表示★--*/
		/*--btn--*/
		li#searchToggle{
		   width: 56px; line-height: 30px; display: inline-block;
	 	   background: url(../images/head_search_o.gif) center 6px no-repeat ;
	 	   background-size: 24px;
	 	 }
	 	li#searchToggle.open{
	 	   background:url(../images/head_search_cl.gif) center 6px no-repeat;
	 	   background-size: 24px;
	 	}
	 	/*--content--*/

		#headSearchBox{
			background: #000;
			width: 100%;
			display: none;
			padding: 5px 15px;
			height: 50px;
			position: relative;
		}
	 	#headSearchBox:before{
	 		position: absolute;
	 		top: -10px;
	 		right: 32px;
	 		content: url("../images/search_arrow.gif") ;
	 	}
	 		#headSearchBox div{display: block; float: left;}
			#headSearchBox div:first-child{

			}
			#headSearchBox div:nth-child(2){
				float: right;

			}
		/*--form--*/
		#headSearchBox form, input {
		 margin: 0;
		}
		#headSearchBox form {
		  position: relative;
		}
		#headSearchBox input[type="text"] {
		  background: #000;
		  color: #fff;
		  border: 0;
		  height: 40px;
		  width: 100%;
		  padding: 0 30px;
		  position: absolute;
		  left: 0;
		  top: 0;
		  font-size: 14px;
		}
		#headSearchBox input[type="text"]:focus{background: #333;}
		#headSearchBox input[type="image"] {
		  border: 0;
		  padding: 0;
		  width: 25px;
		  height: 25px;
		  position: absolute;
		  right: 12px;
		  top: 8px;
		}
		#headSearchBox input[type="text"]:placeholder-shown {color: #878787; }
		#headSearchBox input[type="text"]::-webkit-input-placeholder {color: #878787; }
		#headSearchBox input[type="text"]:-moz-placeholder {color: #878787; opacity: 1; }
		#headSearchBox input[type="text"]::-moz-placeholder {color: #878787; opacity: 1; }
		#headSearchBox input[type="text"]:-ms-input-placeholder {color: #878787; }


		/*--subNavと検索窓--*/
		@media only screen and (max-width: 800px) {
			#subNav{
				margin-top: 15px;
				margin-right: 7px;
				height: 28px;
			}
				#subNav li span{
					top: 2px;
					right: 0px;
					font-size: 6px;
					width: 10px;
					height: 10px;
					line-height: 10px;
				}
				#subNav li a img{width: 18px; }
				#subNav li a{width: 26px; padding: 0; margin: 0 2%; line-height: 18px; display: block;}
				#subNav li:nth-child(n+2){border-left: none;}
				li#searchToggle{
				   width: 26px; line-height: 20px; display: inline-block;
	 			   background: url(../images/head_search_o.gif) center 84% no-repeat ;
	 	   			background-size: 17px;
	 	 		}
	 			li#searchToggle.open{
	 			   background:url(../images/head_search_cl.gif) center 2px no-repeat;
	 			   background-size: 21px;
	 			}
				#headSearchBox{padding: 5px; height: 40px;}
				#headSearchBox input[type="text"] {
					padding: 5px 9px;
					height: 30px;
					font-size:17px;
				}
		 		#headSearchBox:before{content: "";}
		 		#headSearchBox input[type="image"] {
		 			width: 16px;
		 			height: 16px;
					position: absolute;
					right: 6px;
		  			top: 7px;
				}
	 	}

	/*--20171130 selectLanguageHEAD--*/
	#headLanguage{
		float: right;
		margin-top: 25px;
		position: relative;
	}
	@media only screen and (max-width: 1000px) {#headLanguage{display: none;}}
	#headLanguage select{
    	cursor: pointer;
    	position: relative;
		-webkit-appearance: none;
 		 -moz-appearance: none;
  		appearance: none;  		
		width:120px;
		padding-left: 10px;
		font-weight: bold;
		height: 33px;
		background:#000;
		color: #fff;	
		border:none;	
		font-family: opensans, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic" , sans-serif;		
	}
	#headLanguage select::-ms-expand {
  		display: none;
	}
	#headLanguage .carat{
	cursor: pointer;
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -4px;
	border: 4px solid transparent;
	border-top: 7px solid #fff;
	}




/*----SLIDE MENU----*/
#slide_menu{
		width: 320px;
		padding-top: 15px;
}
.sb-slidebar {
	background: #000;

}

	/*--links--*/
	#slide_menu ul{margin-left: 18px;}
	#slide_menu li {
		border-top: 1px solid #333;
		line-height: 50px;
		font-size: 15px;
		font-weight: bold;
	}
	#slide_menu li:first-child{border: none;}
	/*--linksMain--*/
	#slide_menu ul:first-child{
		margin-left: 0;
		padding-left: 18px;
		border-bottom: 1px solid #333;
	}
	#slide_menu ul:first-child li{
		border: none;
	}
	#slide_menu a{color: #fff; text-decoration: none; width: 100%;}
	#slide_menu a:hover, #slide_menu a:active{color: #ccc;}
	/*--links*accordion--*/
	#slide_menu .pulldown{
		background: url(../images/spmenu_arrowb.gif)  right 10px  center no-repeat;
		background-size: 16px;
	}
	/*--links*arrow--*/
	#slide_menu .arrowMenu{
		background: url(../images/spmenu_arrowr.gif)  right 14px  center no-repeat;
		background-size: 9px;
	}
	/*--links*subMenu--*/
	#slide_menu .subMenu {display: none; padding: 0 0 10px 0; margin: 0;}
		#slide_menu .subMenu li:first-child{
			padding:5px 0 0 0;
		}
		#slide_menu .subMenu li{
			line-height: 1em;
			font-size: 8px;
			font-weight: normal;
			border: none;
		}
		#slide_menu .subMenu li a{padding-bottom: 19px;}
		#slide_menu .subMenu li {
			border-bottom: none;
		}
		#slide_menu .subMenu li:first-child {border-top: none;}

@media only screen and (max-width: 800px) {
	#slide_menu{width: 80%;}
}


	/*--20171130 selectLanguageSIDE--*/
	#sideLanguage{
		padding: 25px 18px;
		width:100%;
		position: relative;
	}
	#sideLanguage select{
    	cursor: pointer;
    	position: relative;
		-webkit-appearance: none;
 		 -moz-appearance: none;
  		appearance: none;
		font-family: opensans, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic" , sans-serif;
		font-weight: bold;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background:#fff;
		color: #000;	
		padding-left: 10px;
		font-size: 15px;
		border:none;	
		border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	#sideLanguage select::-ms-expand {
  		display: none;
	}
	#sideLanguage .carat{
	cursor: pointer;
	position: absolute;
	right: 28px;
	top: 50%;
	margin-top: -4px;
	border: 5px solid transparent;
	border-top: 8px solid #000;
	}