/* ＊＊＊＊＊　初期読み込み　＊＊＊＊＊ */



@media all and (min-width: 896px) {

.splash-screen {
    opacity: 1;
  font-size: 1rem;
  position: absolute;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  top: 100px;
  left: 0;
  z-index: 11000;
	background: #000;
  animation-name: splash;
  animation-duration: 5s;
  animation-fill-mode: both;
}

@keyframes splash {
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    visibility: hidden;
    pointer-events: none;
  }
}

.splash-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:10000;
}

.splash-title img {
    opacity: 0;
  display: block;
  animation-name: bounceInDown;
  animation-duration: 5s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    display: none;
    visibility: hidden;
    pointer-events: none;
  }
  10% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}




/* ＊＊＊＊＊　トップページ　＊＊＊＊＊ */



#visu{
	position:relative;
	width:100%;
	height:100vh;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	overflow: hidden;
	text-align:center;
	font-size:0;
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

#visu div{
	width:calc(100% / 3);
	animation-duration: 8s;
	animation-fill-mode: both;
}

#visu div img{
	width:100%;
	height:50vh;
	object-fit: cover;　←この一行を追加
	font-family: 'object-fit: cover;'; /*IE対策*/
}



@keyframes phflash01 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:-30px;
  }

  50% {
	opacity: 0;
	filter:grayscale(100%);
	top:-30px;
  }

  80% {
	opacity: 1;
	top:0;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:0;
	filter:grayscale(0%);
  }

}

#visu div.visu01{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:-30px;
	animation-name: phflash01;
}







@keyframes phflash02 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:0;
	left:36%;
  }

  70% {
	opacity: 0;
	filter:grayscale(100%);
	top:0;
	left:36%;
  }

  80% {
	opacity: 1;
	top:0;
	left:33.3333333333%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:0;
	left:33.3333333333%;
	filter:grayscale(0%);
  }

}

#visu div.visu02{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:-30px;
	left:36%;
	animation-name: phflash02;
}







@keyframes phflash03 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:30px;
	left:66.6666666666%;
  }

  60% {
	opacity: 0;
	filter:grayscale(100%);
	top:30px;
	left:66.6666666666%;
  }

  80% {
	opacity: 1;
	top:0;
	left:66.6666666666%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:0;
	left:66.6666666666%;
	filter:grayscale(0%);
  }

}

#visu div.visu03{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:30px;
	left:66.6666666666%;
	animation-name: phflash03;
}





@keyframes phflash04 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:50vh;
	left:-4%;
  }

  73% {
	opacity: 0;
	filter:grayscale(100%);
	top:50vh;
	left:-4%;
  }

  80% {
	opacity: 1;
	top:50vh;
	left:0;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:50vh;
	left:0;
	filter:grayscale(0%);
  }

}

#visu div.visu04{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:50vh;
	left:-4%;
	animation-name: phflash04;
}







@keyframes phflash05 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:47vh;
	left:33.3333333333%;
  }

  65% {
	opacity: 0;
	filter:grayscale(100%);
	top:47vh;
	left:33.3333333333%;
  }

  80% {
	opacity: 1;
	top:50vh;
	left:33.3333333333%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:50vh;
	left:33.3333333333%;
	filter:grayscale(0%);
  }

}

#visu div.visu05{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:47vh;
	left:33.3333333333%;
	animation-name: phflash05;
}







@keyframes phflash06 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:50vh;
	left:63%;
  }

  55% {
	opacity: 0;
	filter:grayscale(100%);
	top:50vh;
	left:63%;
  }

  80% {
	opacity: 1;
	top:50vh;
	left:66.6666666666%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:50vh;
	left:66.6666666666%;
	filter:grayscale(0%);
  }

}

#visu div.visu06{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:50vh;
	left:63%;
	animation-name: phflash06;
}






#visu h2{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:10000;
}


#visu h3{
	position: absolute;
	top: calc(50% - 70px);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:100000;
	animation-name: logo1;
	animation-duration: 11s;
	animation-fill-mode: both;
}



@keyframes logo1 {

  0% {
	opacity: 0;
  }

  70% {
	opacity: 0;
  }

  80% {
	opacity: 1;
  }

  100% {
	opacity: 1;
  }

}



}












@media all and (max-width: 896px) {

.splash-screen {
    opacity: 1;
  font-size: 1rem;
  position: absolute;
  width: 100%;
  height: 90vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  top: 60px;
  left: 0;
  z-index: 11000;
	background: #000;
  animation-name: splash;
  animation-duration: 5s;
  animation-fill-mode: both;
}

@keyframes splash {
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    visibility: hidden;
    pointer-events: none;
  }
}

.splash-title {
	width: 60%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:10000;
}

.splash-title img {
    opacity: 0;
  display: block;
  animation-name: bounceInDown;
  animation-duration: 5s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    display: none;
    visibility: hidden;
    pointer-events: none;
  }
  10% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}




/* ＊＊＊＊＊　トップページ　＊＊＊＊＊ */



#visu{
	position:relative;
	width:100%;
	height:90vw;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	overflow: hidden;
	text-align:center;
	font-size:0;
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

#visu div{
	width:calc(100% / 2);
	animation-duration: 8s;
	animation-fill-mode: both;
}

#visu div img{
	width:100%;
	height:30vw;
	object-fit: cover;　←この一行を追加
	font-family: 'object-fit: cover;'; /*IE対策*/
}



@keyframes phflash01 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:0;
  }

  50% {
	opacity: 0;
	filter:grayscale(100%);
	top:0;
  }

  80% {
	opacity: 1;
	top:auto;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:0;
	filter:grayscale(0%);
  }

}

#visu div.visu01{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:-30px;
	animation-name: phflash01;
}







@keyframes phflash02 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:0;
	left:50%;
  }

  59% {
	opacity: 0;
	filter:grayscale(100%);
	top:0;
	left:50%;
  }

  80% {
	opacity: 1;
	top:0;
	left:50%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:0;
	left:50%;
	filter:grayscale(0%);
  }

}

#visu div.visu02{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:0;
	left:50%;
	animation-name: phflash02;
}







@keyframes phflash03 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:30vw;
	left:0%;
  }

  62% {
	opacity: 0;
	filter:grayscale(100%);
	top:30vw;
	left:0%;
  }

  80% {
	opacity: 1;
	top:30vw;
	left:0%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:30vw;
	left:0%;
	filter:grayscale(0%);
  }

}

#visu div.visu03{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:30vw;
	left:0%;
	animation-name: phflash03;
}





@keyframes phflash04 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:30vw;
	left:50%;
  }

  53% {
	opacity: 0;
	filter:grayscale(100%);
	top:30vw;
	left:50%;
  }

  80% {
	opacity: 1;
	top:30vw;
	left:50%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:30vw;
	left:50%;
	filter:grayscale(0%);
  }

}

#visu div.visu04{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:30vw;
	left:50%;
	animation-name: phflash04;
}







@keyframes phflash05 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:60vw;
	left:0%;
  }

  56% {
	opacity: 0;
	filter:grayscale(100%);
	top:60vw;
	left:0%;
  }

  80% {
	opacity: 1;
	top:60vw;
	left:0%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:60vw;
	left:0%;
	filter:grayscale(0%);
  }

}

#visu div.visu05{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:60vw;
	left:0%;
	animation-name: phflash05;
}







@keyframes phflash06 {

  0% {
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:60vw;
	left:50%;
  }

  65% {
	opacity: 0;
	filter:grayscale(100%);
	top:60vw;
	left:50%;
  }

  80% {
	opacity: 1;
	top:60vw;
	left:50%;
	filter:grayscale(100%);
  }

  100% {
	opacity: 1;
	top:60vw;
	left:50%;
	filter:grayscale(0%);
  }

}

#visu div.visu06{
	position:absolute;
	opacity: 0;
	filter:grayscale(100%);
	top:60vw;
	left:50%;
	animation-name: phflash06;
}






#visu h2{
	width: 60%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:10000;
}


#visu h3{
	width: 60%;
	position: absolute;
	top: calc(50% - 10vw);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:100000;
	animation-name: logo1;
	animation-duration: 11s;
	animation-fill-mode: both;
}



@keyframes logo1 {

  0% {
	opacity: 0;
  }

  70% {
	opacity: 0;
  }

  80% {
	opacity: 1;
  }

  100% {
	opacity: 1;
  }

}



}