@charset "utf-8";
#header_menu_sp {
	display: none;
}
#header_menu_pc {
	display: block;
}
.pointerNone {
	pointer-events: none;
}
header {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	pointer-events: none;
}
#header_menu_pc,
#header_menu_sp {
	width: 100%;
	height: 100%;
}
header .header_menu_bg,
header #header_menu_content {
	/* transition: .4s; */
}
header .header_menu_bg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #1c1d1e;
}
#header_menu_img {
	background: transparent;
	/* background-color: rgba(28,29,30,0); */
	opacity: 0;
	width: 75%;
	left: 25%;
	/* clip-path: polygon(450px 0, 100% 0%, 100% 1080px, 0% 1080px); */
	clip-path: polygon(250px 0, 100% 0%, 100% 1080px, 0% 1080px);
}

#header_menu_img div {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	/* background-position: 200px 0; */
	/* background-position: 175px 0; */
	opacity: 0;
	transition: .2s;
}
/* #header_menu_img_1 {
	background: url("../img/header/top.jpg");
} */
#header_menu_img_2 {
	background: url("../img/header/event.jpg");
}
#header_menu_img_3 {
	background: url("../img/header/staffblog.jpg");
}
#header_menu_img_4 {
	background: url("../img/header/webshop.jpg");
}
#header_menu_img_5 {
	background: url("../img/header/recruit.jpg");
	background-position: top center;
}
#header_menu_img_6 {
	background: url("../img/header/contact.jpg");
}
#header_menu_img_7 {
	background: url("../img/header/keroq.jpg");
	background-position: top center;
}
#header_menu_img_8 {
	background: url("../img/header/makura.jpg");
}



header {
	/* --var1: calc(25% + 450px); */
	--var1: calc(25% + 250px);
	/* --var2: calc(25% + 458px); */
	--var2: calc(25% + 258px);
	--var3: calc(var(--var2) + 10px);
	/* --var4: calc(25% + 192px); */
	--var4: calc(25% + 108px);
	--var5: calc(var(--var4) + 10px);
	/* --var6: calc(100% - 450px); */
	--var6: calc(100% - 250px);
}
#header_menu_img_alt1,
#header_menu_img_alt2 {
	position: absolute;
	/* width: calc(37.5% + 350px); */
	width: calc(37.5% + 200px);
	background-size: cover;
	background-color: #1c1d1e;
}
#header_menu_img_alt1 {
	left: 25%;
	/* clip-path: polygon(449px 0, 100% 0%, var(--var6) 1080px, -1px 1080px); */
	clip-path: polygon(249px 0, 100% 0%, var(--var6) 1080px, -1px 1080px);
	background-image: url("../img/header/top1.jpg");
	/* background-size: auto 100%; */
	/* background-position: top 0 left 30%; */
	background-position: top center;
}
#header_menu_img_alt2 {
	/* left: calc(62.5% - 100px); */
	left: calc(62.5% - 50px);
	/* clip-path: polygon(449px 0, 100% 0%, 100% 1080px, -1px 1080px); */
	clip-path: polygon(249px 0, 100% 0%, 100% 1080px, -1px 1080px);
	background-image: url("../img/header/top2.jpg");
	/* background-size: auto 100%; */
	background-position: top right;
}
/* header #header_menu_img  {
	position: relative;
	width: 75%;
	left: 25%;
	clip-path: polygon(450px 0, 100% 0%, 100% 1080px, 0% 1080px);
	background: url("../img/header/top.jpg") top center;
	background-size: cover;
	background-color: #1c1d1e;
} */

header .header_menu_bg:nth-of-type(4) {
	/* clip-path: polygon(0% 0, 50% 0%, 30% 100%, 0% 100%); */
	clip-path: polygon(0% 0, var(--var1) 0%, 25% 1080px, 0% 1080px);
}
header .header_menu_bg:nth-of-type(5) {
	/* clip-path: polygon(50.5% 0%, 51% 0%, 36.5% 71.5%, 36% 72%); */
	clip-path: polygon(var(--var2) 0%, var(--var3) 0%, var(--var5) 643px, var(--var4) 648px);
}
header .header_menu_bg:nth-of-type(6) {
	/* clip-path: polygon(39.2% 60%, 39.7% 59.5%, 31.5% 100%, 31% 100%); */
	/* --varHeader1: calc(25% + 256px); */
	--varHeader1: calc(25% + 151px);
	--varHeader2: calc(var(--varHeader1) + 10px);
	--varHeader3: calc(25% + 26px);
	--varHeader4: calc(var(--varHeader3) + 10px);
	clip-path: polygon(var(--varHeader1) 540px, var(--varHeader2) 535px, var(--varHeader4) 1080px, var(--varHeader3) 1080px);
	transform: translate(0, 100%);
}
header .menu_box {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 15px;
	left: 2.5%;
	pointer-events: all;
	z-index: 99999;
	cursor: pointer;
}
header .menu {
	position: absolute;
	width: 100%;
	height: 1px;
	background: white;
	transition: .3s;
}
header .menu:first-child {
	top: 5px;
}
header .menu:nth-child(2) {
	opacity: 1;
	top: 15px;
}
header .menu:nth-child(3) {
	top: 25px;
}
header .active .menu:first-child {
	transform: rotate(45deg);
	top: 15px;
}
header .active .menu:nth-child(2) {
	opacity: 0;
}
header .active .menu:nth-child(3) {
	transform: rotate(-45deg);
	top: 15px;
}

/* ヘッダーメニューテスト */
header #header_menu_img  {
	/* background: url(""); */
	opacity: 0;
	transform: translate(-250px, 100%);
}
header .header_menu_bg:nth-of-type(5) {
	opacity: 0;
}
header .header_menu_bg:nth-of-type(6) {
	display: none;
}
/* @keyframes test1 {
	0% {
		clip-path: polygon(0% 0, 0% 0%, 0% 0%, 0% 0%);
		opacity: 1;
	}
	40% {
		clip-path: polygon(0% 0, 20% 0%, 0% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0% 0, var(--var1) 0%, 25% 1080px, 0% 1080px);
	}
}
.test1 {
	animation-name: test1;
	animation-duration: .3s;
	animation-timing-function: linear;
} */
@keyframes test2 {
	0% {
		clip-path: polygon(var(--var2) 0%, var(--var3) 0%, var(--var3) 0px, var(--var2) 0px);
	}
	100% {
		clip-path: polygon(var(--var2) 0%, var(--var3) 0%, var(--var5) 643px, var(--var4) 648px);
	}
}
.test2 {
	animation-name: test2;
	animation-duration: .5s;
	animation-timing-function: linear;
}
/* alt */
#header_menu_img_alt1 {
	/* transform: translate(-449px, 100%); */
	transform: translate(-250px, 1080px);
}
#header_menu_img_alt2 {
	/* transform: translate(450px, -200%); */
	transform: translate(250px, -1080px);
}
header .header_hide {
	transform: translate(0, -1080px);
}
#header_menu_content {
	transform: translate(0, -1080px);
}
/* //alt */
/* //ヘッダーメニューテスト */




#header_menu_content {
	position: relative;
	width: 100%;
	height: 100%;
}
#header_menu_content .header_box {
	padding-top: 10%;
	margin-left: 200px;
	color: white;
}
#header_menu_content .header_box a {
	color: white;
	font-family: futura-pt, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 120%;
	letter-spacing: .14rem;
	line-height: 1.9;
}
#header_menu_content ul span {
	display: none;
	position: absolute;
	width: 8px;
	height: 1px;
	background: white;
	top: 50%;
	left: -13px;
}
#header_menu_content ul li a:hover + span {
	display: block;
}
#header_menu_content ul {
	margin-bottom: 60px;
}
#header_menu_content ul li {
	position: relative;
}
#header_menu_content .ex {
	margin-bottom: 35px;
}
/* #header_menu .ex .twitter,
#header_menu .ex .youtube {
	width: auto;
} */
#header_menu_content .ex a {
	position: relative;
	font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
}
#header_menu_content .ex span {
	position: absolute;
	top: 50%;
	right: -15px;
	width: 10px;
	height: 1px;
	background: white;
}
#header_menu_content .ex span:last-child {
	transform: rotate(90deg);
	transition: .5s;
}
#header_menu_content .ex a:hover span:last-child {
	opacity: 0;
}
#header_menu_content .flex_area {
	display: flex;
	transform: translate(-10px);
}
#header_menu_content .flex_area a {
	width: 45px;
}
.header_product {
	position: absolute;
	bottom: 50px;
	right: 50px;
	color: white;
}
.header_product div {
	display: none;
}
#header_product_1,#header_product_3 {
	color: #1c1d1e;
}
.header_product div p {
	font-family: futura-pt, sans-serif;
	font-weight: 500;
	font-style: normal;
}
.header_product p:first-child {
	margin: auto 40px 8px;
}
.header_product p:last-child {
	font-size: 60px;
	letter-spacing: 10px;
	writing-mode: vertical-rl;
}

/* active */
header #header_menu_pc.active .menu {
	background-color: white!important;
}
header #header_menu_pc.active .header_menu_bg:nth-of-type(5) {
	opacity: 1;
	animation-name: header_menu_bg;
	animation-duration: .5s;
	animation-timing-function: linear;
}
@keyframes header_menu_bg {
	0% {
		clip-path: polygon(var(--var2) 0%, var(--var3) 0%, var(--var3) 0px, var(--var2) 0px);
	}
	100% {
		clip-path: polygon(var(--var2) 0%, var(--var3) 0%, var(--var5) 643px, var(--var4) 648px);
	}
}
header #header_menu_pc.active .header_hide {
	transform: translate(0, 0%);
}
header #header_menu_pc.active .header_menu_bg:nth-of-type(6) {
	transform: translate(0, 0%);
}
header #header_menu_pc.active .header_product #header_product_1 {
	display: flex;
}

#header_menu_img_alt1,
#header_menu_img_alt2 {
	opacity: 0;
}
header #header_menu_pc.active #header_menu_img_alt1,
header #header_menu_pc.active #header_menu_img_alt2 {
	opacity: 1;
}


@media screen and (min-height: 1080px) {
	#header_menu_img {
		clip-path: polygon(250px 0, 100% 0%, 100% 100%, 0% 100%);
	}
	#header_menu_img_alt1 {
		clip-path: polygon(249px 0, 100% 0%, var(--var6) 100%, -1px 100%);
		opacity: 0;
	}
	header #header_menu_pc.active #header_menu_img_alt1 {
		opacity: 1;
	}
	#header_menu_img_alt2 {
		clip-path: polygon(249px 0, 100% 0%, 100% 100%, -1px 100%);
	}
	header .header_menu_bg:nth-of-type(4) {
		clip-path: polygon(0% 0, var(--var1) 0%, 25% 100%, 0% 100%);
	}
	header .header_menu_bg:nth-of-type(6) {
		clip-path: polygon(var(--varHeader1) 540px, var(--varHeader2) 535px, var(--varHeader4) 100%, var(--varHeader3) 100%);
	}
	#header_menu_img_alt1 {
		transform: translate(-250px, 100%);
	}
	#header_menu_img_alt2 {
		transform: translate(250px, -100%);
	}
	header .header_hide {
		transform: translate(0, -100%);
	}
	#header_menu_content {
		transform: translate(0, -100%);
	}
}