@charset "utf-8";

/********************
* Layout
********************/

.l-body.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
}

.l-splash {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
}

.l-splash:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}

/********************
* Project
********************/

.p-splash {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	z-index: 2;
}

/*.p-splash__bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 6;
	mix-blend-mode: difference;
	transition-duration: 0.8s;
}*/

.p-splash__bg.is-complete {
	height: 0;
}

.p-splash__logo {
	display: block;
	position: relative;
	top: 20px;
	width: 34px;
	min-width: 34px;
	opacity: 0;
	transform: translate(0,-20px);
}

@media only screen and (min-width: 960px) {
	.p-splash__logo {
		width: 64px;
		min-width: 64px;
		transform: translate(0,-40px);
	}
}

.p-splash__logo img,
.p-splash__logo svg {
	width: 100%;
}

@media only screen and (min-width: 960px) {
	.p-company__icon {
		position: absolute;
		top: 50%;
		right: min(5.3vw,80px); 
		width: min(2.8vw,38px);
		height: min(2.8vw,38px);
		border-radius: min(2.8vw,38px);
		transform: translate(0,-50%);
	}
}

.p-splash__progress {
	position: absolute;
	bottom: 30px;
	right: 30px;
	z-index: 6;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0;
}

@media only screen and (min-width: 960px) {
	.p-splash__progress {
		bottom: 60px;
		right: 60px;
	}
}


.p-splash__progress:after {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: url("../img/index/icon-progross.svg") no-repeat center center;
	background-size: 1.5rem 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.p-splash__progress svg {
	position: absolute;
	left: 0;
	top: 0px;
	z-index: 10;
	width: 100%;
	height: 100%;
	stroke-width: 3px;
	stroke: #fff;
	fill: none;
	stroke-dashoffset: 126;
	stroke-dasharray: 126;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}