.fix-pic {
	width: 100%;
	height: 100vh;
	/*background-image:url("../images/bg_concept_c.png");*/
	position: fixed;
	background-color: #fff;
	z-index: -100!important;
}

#header {
	z-index: 1000!important;
	text-align: center;
	overflow: hidden;
    top: 0;
    left: 0;
	margin: auto;
	width: 100%;
	height: 102vh;
	padding: 0;
	position: relative;
	z-index: 0!important;
}

.logo-box{
	position: absolute;
	right: 0;
	top: 0;
	width: 100%!important;
	height: 100vh!important;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	line-height: 0;
	z-index: 5!important;
}

.top-bg {
	position: relative;
	width: 100%;
	height: 100vh;
	background-image:url("../images/bg_concept_c.png");
	background-position: left -270px top 80%;
	background-repeat: no-repeat;
	background-size: 400px;
	opacity: 0.6;
	z-index: 0;
}

.top-bg::before{
	content: '';
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	width:100%;
	height: 100vh;
	background-image:url("../images/bg_concept_c.png");
	background-position: right -270px top 100%;
	background-repeat: no-repeat;
	background-size: 400px;
	pointer-events: none;
}

.top-box {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%!important;
	height: 100vh!important;
	margin: 0;
	line-height: 0;
	background-image:url("../images/keyvisual.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	border-width: 0 0 20px 0;
	border-radius: 0 0 50% 0;
    -webkit-border-radius: 0 0 50% 0;
    -moz-border-radius: 0 0 50% 0;
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3));
}

.top-line {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%!important;
	height: 100vh!important;
	margin: 0;
	line-height: 0;
	border: solid #262626;
	border-width: 0 0 20px 0;
	border-radius: 0 0 50% 0;
    -webkit-border-radius: 0 0 50% 0;
    -moz-border-radius: 0 0 50% 0;
	z-index: 3!important;
	pointer-events: none;
}

.top-dots {
	width: 100%;
	height:99vh;
	display: inline-block;
	top: 0;
	right: 0;
	position:absolute;
	z-index: 0!important;
	background-image:url("../images/dots.png");
	border-radius: 0 0 55% 0;
    -webkit-border-radius: 0 0 55% 0;
    -moz-border-radius: 0 0 55% 0;
	border: solid #8ea14c;
	border-width: 0 0 20px 0;
}

.screen-box {
	width:100%;
	height:99.5vh;
	right: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.2)!important;
	color: #fff;
	border-radius: 0 0 52.5% 0;
    -webkit-border-radius: 0 0 52.5% 0;
    -moz-border-radius: 0 0 52.5% 0;
	border: solid #c2cb85;
	border-width: 0 0 20px 0;
	z-index: 2;
}

.top-sign{
	width: 160px;
	right: 10px;
	bottom: 10px;
	position: absolute;
	filter: brightness(20%);
}

@media (max-width:900px){
	
	.top-box,.top-line,.top-dots,.screen-box {
		width: 150%!important;
	}
	
	.top-box {
		background-position: right 90% top!important;
	}
			
}

@media (max-width:768px){
	
	.top-box,.top-line,.top-dots,.screen-box {
		width: 175%!important;
	}
	
	.top-box {
		background-position: right 160% top!important;
	}
			
}

@media (max-width:600px){
	
	.top-box {
		background-position: left -13%  top!important;
	}
			
}

@media (max-width:480px){
	
	.top-box,.top-line,.top-dots,.screen-box {
		width: 180%!important;
	}		
}




/*
@media (max-width:480px){
	
	.top-line {
		border-width: 0 0 20px 0;
		border-radius: 0 0 40% 0;
		-webkit-border-radius: 0 0 40% 0;
		-moz-border-radius: 0 0 40% 0;
	}
	
	.screen-box {
		border-width: 0 0 20px 0;
		border-radius: 0 0 42.5% 0;
		-webkit-border-radius: 0 0 42.5% 0;
		-moz-border-radius: 0 0 42.5% 0;
	}

	.top-dots {
		border-width: 0 0 20px 0;
		border-radius: 0 0 45% 0;
		-webkit-border-radius: 0 0 45% 0;
		-moz-border-radius: 0 0 45% 0;
	}
	
	.top-box {
		border-width: 0 0 20px 0;
		border-radius: 0 0 40% 0;
		-webkit-border-radius: 0 0 40% 0;
		-moz-border-radius: 0 0 40% 0;
	}
	
	.top-sign {
		width: 130px;
		right: auto;
		left: 10px!important;
		bottom: 10px;
		filter: brightness(300%);
	}
		
}
*/

@media (max-width:480px){
	
	.top-bg{
		background-position: left -270px top 200px!important;
		background-size: 350px;
		opacity: 0.3;
	}
	
	.top-bg::before{
		background-image:url("../images/bg_concept_c.png");
		background-position: right -270px top 100%!important;
		background-size: 350px;
	}
	
	.top-sign{
		width: 130px;
		right: 7px;
		bottom: 5px;
	}
	
}







.screen-box img{
/*-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0,.4));
        filter: drop-shadow(0px 3px 5px rgba(0,0,0,.4));*/
}
.logo-case {
	line-height: 1em;
	width: 70%;
	max-width: 400px;
	display: block;
	margin-bottom: 10%;
	filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.4));
}

.logo-case img{
	margin: 0!important;
}

.abt-mes {
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 0.4em;
	letter-spacing: 0.2em;
	margin-top: 5px;
	margin-bottom: -10px;
}

.entry-text {
	font-family: 'Poppins', sans-serif;
	line-height: 1.6em;
	font-weight: 500;
	font-size: 0.4em;
	margin: 10px 0 -6px 0;
	letter-spacing: 0.1em;
}

.top-date{
	display: inline-block;
	width: 60%;
	margin: 0;
	padding-top: 5%;
}


.logo-boost{
	text-align: left;
	display: flex;
	top: 15px;
	left: 15px;
	position: absolute;
	pointer-events:all;
}


.logo-boost img{
	height: 20px;
	margin-right: 8px;
}

.logo-sps{
	text-align: right;
	top: 15px;
	right: 10px;
	position: absolute;
	pointer-events:all;
}

.logo-sps img{
	width: 160px;
}

@media (max-width:600px){
	

}

@media (max-width:480px){
	
	.logo-box,
	.top-box,
	.top-dots,
	.screen-box,
	.top-line {
		height:-webkit-calc(100vh - 115px)!important;
	}
	
	#header {
		height:-webkit-calc(100vh - 50px)!important;
	}
	
	
	
	.logo-boost{
		top: 11px;
		left: 12px;
	}
	
	.logo-boost img{
		height: 17px;
		margin-right: 8px;
	}
	
	.logo-sps{
		top: 10px;
		right: 8px;
	}
	
	.logo-sps img{
		width: 130px;
	}
	
}


.entry-arrow{
	width: 25px;
	height: 25px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    margin: 0 auto;
}

.arrow-anime{
	opacity: 0;
	animation-name: fade-0ut;
	animation-duration: 2s;
	animation-delay: 0;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}

@keyframes fade-0ut {
	 0% {opacity: 1; transform: scaleX(0) scaley(1);}
   50% {opacity: 1; transform: scaleX(1) scaley(1);}
   100% {opacity: 1; transform: scaleX(0) scaley(1);}
}

@media (max-width:480px){
	
	.entry-arrow{
		width: 20px;
		height: 20px;
		margin-bottom: 3%;
	}
	
}

@media (max-width:360px){
	
	.entry-arrow{
		width: 18px;
		height: 18px;
		margin-bottom: 2%;
	}
	
}

.ebimaro {
	text-align: right;
	top: 0;
	right: 5px;
	position: absolute;
	pointer-events:all;
}

.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  background: url(../images/ebimaro.png) no-repeat center center / 45px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 60px;
  height: 60px;
  margin-top: 10px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


===========================================