@charset "Shift_JIS";

/* MEADER
---------------------------------------------------*/
#header {
	margin:0 auto;
	width:100%;
	max-width:1280px;
}
#header img {
	width:100%;
}
#header .logo {
	float:left;
	width:11.484%;
}
#header .header_menu {
	float:left;
	margin:0;
	padding:0 0 0 13.666%;
	width:59.140%;/*width:47.890%;*/
}
@media all and (min-width: 751px) {
		#header .header_menu {
				height:90px;
		}
}
#header .header_menu li {
	float:left;
	list-style:none;
}
#header .header_menu li.menu01 {
	width:25.759%;
}
#header .header_menu li.menu02 {
	width:13.870%;
}
#header .header_menu li.menu03 {
	width:20.475%;
}
#header .header_menu li.menu04 {
	width:20.871%;
}
#header .header_menu li.menu05 {
	width:19.022%;
}
#header .header_sns {
	float:right;
	margin:0;
	padding:2.3% 0 0 0;
	width:8.125%;
}
#header .header_sns li {
	float:left;
	margin-right:21.153%;
	width:27.884%;
	list-style:none;
}
@media all and (max-width: 767px) {
	#header .header_menu {
		display:none;
	}
	#header .header_sns {
		display:none;
	}
}


.navToggle {
    display: none;
}
#header #sp_hum ul.header_menu li a span {
	display:none;
}
@media screen and (max-width: 750px) {

	#products_navi3,
	#products_navi3.act,
	#products_navi3.act.navdsp { height:39.4vw !important; }
	#header .header_menu {
		display:block;
	}
	#header .header_sns {
		display:block;
		width:30%;
	}
	#header .header_sns li {
		float:left;
		margin-right:0;
		width:27.884%;
		list-style:none;
	}
	#header .header_sns li:last-child {
		float:right;
	}

	/* SP HUMBERGER */
	#sp_hum {
		display:block;
	    position: fixed;
	    z-index: 6;
	    top: -100%;
	    left: 0;
	    background: #ff0000;
	    color: #000;
	    text-align: center;
	    /* transform: translateY(-100%); */
	    transition: all 0.7s;
	    -webkit-transition: all 0.7s;
	    -o-transition: all 0.7s;
	    -ms-transition: all 0.7s;
	    width: 100%;
		padding-top:62px;
	}
	#sp_hum.active {
	    /* transform: translateY(0%); */
		top:0;
	}
	#sp_hum + .area_r {
		opacity:0;
		position:fixed;
		width:0;
		height:0;
		opacity:1;
	}
	#sp_hum.active + .area_r {
		z-index: 5;
		opacity:0.5;
		width:100%;
		height:100vh;
		background:#000000;
	}
	#sp_hum ul.header_menu {
	    margin: 0 auto 20px;
	    padding: 0;
	    width: 100%;
	}

	#header #sp_hum ul.header_menu li {
		width:100%;
	}
	#header #sp_hum ul.header_menu li a img {
		display:none;
	}
	#header #sp_hum ul.header_menu li a {
		text-decoration:none;
		color:#ffffff;

	}
	#header #sp_hum ul.header_menu li a span {
		display:block;
		width:65.3333vw;
		margin:0 auto;
		text-decoration:none;
		border-bottom:#ffffff 1px solid;
		padding:10px 0;
	}
	#sp_hum ul.header_sns {
		float:none;
		margin:0 auto 20px;
	}


	/* HEADER LOGO */
	#header .logo {
		height:46px;
		position:relative;
	}
	#header .logo span {
		height:46px;
		position:fixed;
		z-index:10;
		width:100vw;
		background:#ffffff;
	}
	#header .logo span img {
		width:75px;
	}




	/* HUMBERGER MENU */
	.navToggle {
	    display: block;
	    position: fixed;
	    right: 4px;
	    top: 4px;
	    width: 42px;
	    height: 39px;
	    cursor: pointer;
	    z-index: 11;
	    /* background: #f00; */
	    text-align: center;
	}
	.navToggle span {
	    display: block;
	    position: absolute;
	    width: 30px;
	    border-bottom: solid 3px #401115;
	    -webkit-transition: .35s ease-in-out;
	    -moz-transition: .35s ease-in-out;
	    transition: .35s ease-in-out;
	    left: 6px;
	}
	.navToggle span:nth-child(1) { top: 9px; }
	.navToggle span:nth-child(2) { top: 18px; }
	.navToggle span:nth-child(3) { top: 27px; }
	.navToggle.active span:nth-child(1) {
	    top: 18px;
	    left: 6px;
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
	    top: 18px;
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    transform: rotate(45deg);
	}

}
