@charset "utf-8";
/*----------------------------------------------------------
-------------------------------------------- base
-----------------------------------------------------------*/
body{
	color: #f3f2ffaa;
	background-color: #000000;
	font-size: 14px;
	font-weight: 400;
}
body *{
	box-sizing: border-box;
	font-family:"Noto Sans JP","Fira Sans Extra Condensed",sans-serif;
	font-feature-settings: "palt";
	z-index: 10;
}
img{
	width: auto;
	max-width: 100%;
}
.body-wrap{
	overflow: hidden;
}
a{
	transition:opacity 0.4s;
}
a:hover{
	opacity:0.5;
}
a.underline{
	text-decoration:underline;
}
.pc{
	display:block;
}
.sp{
	display:none;
}
@media screen and (max-width:900px){
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
}


/*----------------------------------------------------------
-------------------------------------------- global-nav
-----------------------------------------------------------*/
header{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
}
.header-wrap{
	width: 100%;
	overflow: hidden;
	padding: 30px;
}
.global-logo{
	float: left;
}
.global-logo img{
	height: 45px;
}
.global-nav{
	float: right;
}
.global-nav-list{
	width: 100%;
	height: auto;
	background-color: transparent;

}
.global-nav-item{
	overflow: hidden;
	display: inline-block;
	position: relative;
}
.global-nav-item:before{
	content:'';
	width:14px;
	height:14px;
	display:inline-block;
	background-image:url(../images/icon_plus2.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:12px;
	position:relative;
	top:1px;
	margin-right:2px;
	opacity:0.5;
	transition:0.5s;
	display:none;
}
.global-nav-item:hover::before{
	opacity:0.3;
}
.global-nav-item,
.global-nav-item a{
	font-size: 100%;
	font-weight: 500;
	display: inline-block;
	line-height: 45px;
	transition:0.5s;
}
.global-nav-item:hover a{
	color:#ffffff50;
}
.global-nav-item + .global-nav-item{
	margin-left: 15px;
}
.global-nav-item.is-hidden{
	max-width: 0;
}
.global-nav-item a::after{
	content: "";
	height: 1px;
	width: 100%;
	position: absolute;
	bottom: 0.8em;
	left:-100%;
	background-color:#ffffff20;
	display:none;
}
.global-nav-item:hover a::after{
	left:100%;
	background-color:#ffffff;
	transition:1s;
}
.nav-open.is-hidden{
	display: none;
}
@media screen and (max-width: 900px) {
	.global-nav{
		display:none;
	}
	.header-wrap{
		padding: 4vw;
	}
}


/*----------------------------------------------------------
-------------------------------------------- body-effects
-----------------------------------------------------------*/
.body-effects{
	position: fixed;
	z-index: 10000;
	width: 120vw;
	height: 120vh;
	margin: -10vh -10vw;
}
.body-effects.is-hidden{
	pointer-events: none;
}

.body-effects .loading{
	width:100%;
	height:100%;
	text-align: center;
	display: flex;
	align-items: center;
	background-color:#FFF;
	pointer-events: none;
	opacity:1;
	transition: opacity 1s 0.3s;
}
.body-effects .loading.is-hidden{
	opacity:0;
}
.body-effects .loading-wrap{
	margin:auto;
}
.body-effects .loading-anime{
	max-width: 150px;
}
.body-effects .loading-text{
	color: #000;
	line-height: 2;
}

/*----------------------------------------------------------
-------------------------------------------- body-bg
-----------------------------------------------------------*/
.body-bg{
	position: fixed;
	z-index: 1;
	width: 120vw;
	height: 120vh;
	margin: -10vh -10vw;
	pointer-events: none;
}
/*----------------------------------------------------------
-------------------------------------------- body-button-top
-----------------------------------------------------------*/
.body-button-top{
	display: block;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom:10px;
	right: 10px;
	z-index:100;
	display:none;
}