@charset "UTF-8";
/*
..........................................................
..........................................................

Header.css

..........................................................
..........................................................
*/
header {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
	text-align: center;
	font-size: 80%;
	position: relative;
	z-index: 100;
}
header #logo {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 10vw;
	max-height: 100px;
	background: url(../media/2656/bg_header.png) bottom center repeat-x;
	background-size: auto 100%;
}
	@media screen and (max-width:940px) {
		header #logo {
			height: 100px;
			background: url(../media/2664/bg_menu_sp.png) bottom center repeat-x;
			background-size: 120px auto;
		}
	}
header #logo h1 {
	line-height: 100%;
}
header #logo h1 a {
	width: 300px;
	height: 10vw;
	min-height: 90px;
	max-height: 100px;
	display: block;
	background: url(../bwec/run/assets/img/hekiru/fc/logo_official.svg) center center no-repeat;
	background-size: auto 128%;
	text-indent: -9999px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	top: -6px;
}
	@media screen and (max-width:940px) {
		header #logo h1 a {
			background-size: auto 100%;
		}
	}
header #gmenu {
	position: fixed;
	z-index: 1;
	top: -80px;
	left: 0;
	width: 100%;
	height: 17vw;
	max-height: 200px;
	background: url(../media/2663/bg_menu_pc.png) bottom center repeat-x;
	background-size: auto 100%;

    -webkit-transition: 0.5s ease-in-out;
    -ms-transition:  0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
	@media screen and (max-width:940px) {
		header #gmenu {
			height: 100vh;
			max-height: 100vh;
			background: url(../media/2664/bg_menu_sp.png) bottom center repeat-x;
			background-size: 120px auto;
			top: -100%;
		}
	}
header #gmenu ul:before {
	display: block;
	content: "";
	height: 9.5vw;
	max-height: 108px;
	width: 100%;
}
header #gmenu ul {
	width: 100%;
	text-align: center;
	position: relative;
	top: -2px;
}
	@media screen and (max-width:940px) {
		header #gmenu ul {
			top: 40%;
			-webkit-transform: translateY(-40%);
			-ms-transform: translateY(-40%);
			-moz-transform: translateY(-40%);
			transform: translateY(-40%);
		}
	}
header #gmenu li {
	width: 13vw;
	max-width: 154px;
	height: 60px;
	max-height: 60px;
	display: inline-block;
	vertical-align: top;
}
	@media screen and (max-width:940px) {
		header #gmenu li {
			width: 50vw;
			max-width: 220px;
			height: 12vh;
			max-height: 12vh;
			display: block;
			margin: 0 auto;
		}
	}
header #gmenu a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
	transform: scale(0.85);
}
	@media screen and (min-width:941px) and (max-width:987px) {
		header #gmenu a {
			transform: scale(0.7);
		}
	}
	@media screen and (min-width:988px) and (max-width:1100px) {
		header #gmenu a {
			transform: scale(0.8);
		}
	}
header #gmenu li a p {
	width: 100%;
	height: 90%;
}



header #gmenu li:first-child a p {
	background: url(../bwec/run/assets/img/hekiru/fc/h2_information.svg) center center no-repeat;
	background-size: 140% auto;
}
header #gmenu li:nth-child(2) a p {
	background: url(../bwec/run/assets/img/hekiru/fc/h2_profile.svg) center center no-repeat;
	background-size: 140% auto;
}
header #gmenu li:nth-child(3) a p {
	background: url(../bwec/run/assets/img/hekiru/fc/h2_discography.svg) center center no-repeat;
	background-size: 140% auto;
}
header #gmenu li:nth-child(4) a p {
	background: url(../bwec/run/assets/img/hekiru/fc/h2_schedule.svg) center center no-repeat;
	background-size: 140% auto;
}
header #gmenu li:nth-child(5) a p {
	background: url(../bwec/run/assets/img/hekiru/fc/h2_diary.svg) center center no-repeat;
	background-size: 140% auto;
}
header #gmenu li:nth-child(6) a p {
	background: url(../bwec/run/assets/img/hekiru/fc/h2_fanclub.svg) center center no-repeat;
	background-size: 140% auto;
}
header #gmenu a span {
	display: inline;
	width: 100%;
	color: #fff;
	font-size: 70%;
	position: relative;
	top: -17px;
	line-height: 100%;
}
header #toggle-menu {
    position: fixed;
    top: 16px;
    right: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    z-index: 102;
}
	@media screen and (min-width:941px) {
		header #toggle-menu {
			display: none;
		}
	}
header #toggle-menu span {
	text-indent: -9999px;
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
    top: 18px;
    left: 10px;
    -webkit-transition: 0.1s ease-in-out;
    -ms-transition:  0.1s ease-in-out;
    -moz-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
}
header #toggle-menu span:before {
	content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
    top: -9px;
    -webkit-transition: 0.5s ease-in-out;
    -ms-transition:  0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
header #toggle-menu span:after {
	content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
    top: 7px;
    -webkit-transition: 0.5s ease-in-out;
    -ms-transition:  0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.is-spmenu header #toggle-menu span {background: none!important;}
.is-spmenu header #toggle-menu span:before {
	content: "";
    background: #fff!important;
	transform: rotate(30deg);
    position: relative;
    top: 1px;
}
.is-spmenu header #toggle-menu span:after {
	content: "";
    display: block;
    background: #fff!important;
	transform: rotate(-30deg);
    position: relative;
    top: -1px;
}


	@media screen and (max-width:940px) {
		.is-spmenu header #gmenu {
			top: 0px;
		}
	}
	@media screen and (min-width:941px) {
		header #gmenu.hide{
			top: -60px;
		}
		@media screen and (min-width:978px) and (max-width:1087px) {
			header #gmenu.hide{
				top: -65px;
			}
		}
		@media screen and (min-width:1088px) and (max-width:1100px) {
			header #gmenu.hide{
				top: -70px;
			}
		}
		@media screen and (min-width:1101px) {
			header #gmenu.hide{
				top: -80px;
			}
		}
		header #gmenu.appear{
			top: 0;
		}
	}