@charset "utf-8";
@media screen and (max-width:767px) {


.splash_wrapper {
	height: 90vh;
	/*top: 10vh;*/
}

.brand_copy_wrapper {
	position: absolute;
	width: 90%;
	height: 27%;
}

.the_man_wrapper {
	position: absolute;
	width: 100vw;
	height: 40%;
	top: 0;
	bottom: auto;
	right: auto;
	left: 0;
	background: #fff;
}

.the_man {
	background-image: url('../../images/splash/the_man_sp.png');
}

.splash_wrapper.animate .logo_box_wrapper {
	bottom: 0;
	top: auto;
	animation: logo_crush2 0.5s linear 2.5s forwards;
}

.splash_wrapper.animate .logo_box_wrapper p.concept.show_concept {
	bottom: auto;
	/* top: 80%; */
	top: 50%;
	font-size: 14px;
	width: 100%;
	padding-bottom: 35%;
	z-index: 9999;
}

.logo_box_wrapper .logo{
	top: -30%;
}


button.more {
	/*bottom: 1%;*/
	bottom: 0%;
}
button.more:hover {
	filter: none;
	/*bottom: 1%;*/
	/*bottom: 0%;*/
}
button.next {
	bottom: 8%;
}
button.next.show_concept {
	/*bottom: -5%;*/
	bottom: -20%;
}
button.next:hover {
	filter: none;
	/*bottom: -20%;*/
}


/*.splash_wrapper.animate .s_button.show_concept {*/
.splash_wrapper.animate .s_button.show_concept {
	margin-bottom: 40%;
}

.sp {
	display: block;
}



/*******************************************************
 ANIMATION
 *******************************************************/

@keyframes logo_crush2 {
	0%{
		height: 100%;
	}
	100%{
		height: 60%;
	}
}
@keyframes ani_textin {
	0%{
		opacity: 0%;
		visibility: visible;
	}
	100%{
		opacity: 100%;
		visibility: visible;
	}
}
@keyframes move_up {
	0%{
		opacity: 100%;
	}
	100%{
		opacity: 100%;
	}
}






}