@charset "utf-8";
/* CSS Document */
body{
	background-color: #fff;
}
video{
	display: inline-block;
}
.probootstrap-header{
	transition: background-color .3s;
}
.no-scroll .probootstrap-header{
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.no-scroll .probootstrap-main-nav li a,
.no-scroll .probootstrap-main-nav li.active a{
	color: #fff;
}
.no-scroll .probootstrap-main-nav li a:hover,
.no-scroll .probootstrap-main-nav li.active a:hover{
	color: #b2d430;
}
.no-scroll .probootstrap-burger-menu i{
	color: #fff;
	background-color: #fff;
}
.no-scroll .probootstrap-burger-menu i::before,
.no-scroll .probootstrap-burger-menu i::after{
	background-color: #fff;
}
.probootstrap-footer{
	z-index: 3;
}
.probootstrap-logo.active{
	animation: SlideInRight 1.6s forwards;
}
.probootstrap-nav.ready{
	opacity: 0;
}
.probootstrap-nav.active{
	animation: SlideInDown 1.6s forwards;
}
.keyvisual{
	width: 100%;
	position: relative;
}
.kv-container{
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.kv-container.is-sp{
	min-height: 420px;
}
.kv-content{
	width: 100%;
	height: 100%;
	position: fixed;
	background-image: url("../img/top.jpg");
	background-repeat: no-repeat;
	background-position: center right 10% ;
	background-size: cover;
	
}
.kv-img{
	width: 100%;
	height: 100%;
	z-index: -1;
}
.kv-video-wrap{
	z-index: -1;
}
.kv-cover{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.2);
	z-index: 2;
}
.kv-video-wrap{
	width: 100%;
	height: 100%;
}
.kv-video-wrap video{
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	z-index: 1;
}
.kv-txt-wrap{
	position: absolute;
	top: 50%;
	left: 0;
	padding: 10%;
	color: #fff;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 5;
}
.kv-txt.en{
	margin: 0;
	font-size: 2.4em;
	font-weight: bold;
}
.kv-txt.jp{
	margin: 10px 0 0;
}
.kv-txt.active{
	animation: SlideIn 1.6s forwards;
}
.kv-scroll{
	padding: 10px;
	position: absolute;
	bottom: 50px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	display: inline-block;
	cursor: pointer;
	border: none;
	background-color: transparent;
	appearance: none;
	outline: none;
	color: #fff;
	opacity: 0;
	z-index: 3;
}
.kv-scroll::after{
	font-family: icomoon;
	font-size: 1.6em;
	content: '\e928';
	position: absolute;
	bottom: -20px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	transition: all .3s;
}
.kv-scroll:hover::after{
	bottom: -30px;
}
.kv-scroll.active{
	animation: SlideInDownArrow .6s forwards;
}
@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes SlideInDown {
  0% {
    opacity: 0;
    transform: translateY(-32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes SlideInDownArrow {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-32px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes SlideInRight {
  0% {
    opacity: 0;
    transform: translateX(-32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (max-width:768px){
	.probootstrap-nav.ready{
		opacity: 1;
	}
	.probootstrap-nav.active{
		animation: none;
	}
}