@charset "UTF-8";
/* CSS Document */

	.slide {
  position: relative;
  width: 750px;
  height: 550px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
	 	.slide {
width: 100vw;
    height: 100vw;
			margin-bottom: 10%;
}
}
.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
animation: slider-1 24s linear infinite;
}
		.slide-image:nth-child(1) {
  background-image: url( "../images/cor_kv_1.png");
  animation-delay: 0s; /* サイトアクセスと同時に開始 */
}

.slide-image:nth-child(2) {
  background-image: url( "../images/cor_kv_2.png");
  animation-delay: 8s; /* 8秒後に開始 */
}

.slide-image:nth-child(3) {
  background-image: url( "../images/cor_kv_3.png");
  animation-delay: 16s; /* 16秒後に開始 */
}
		@keyframes slider-1 {
  /* 非表示状態からフェードインを開始する */
  0% {
    opacity: 0;
    transform: scale(1); /* ズームのための指定 */
  }
  /* フェードインを完了し完全表示する */
  4.16% {
    opacity: 1;
  }
  /* ここまで完全表示を維持したらフェードアウトを開始する */
  33.33% {
    opacity: 1;
  }
  /* フェードアウトを完了し非表示にする */
  41.66% {
    opacity: 0;
    transform: scale(1.2); /* ズームのための指定 */
  }
  100% {
    opacity: 0;
  }
}
		

/*//ここまでスライド*/


/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
		
		

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

		

/* Loading アイコンの大きさ設定　*/
#splash-logo img {
  width:260px;
}
#splash-logo {
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

		
		
		

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/

body{
    background:#000;/*遷移アニメーションと同じ色を指定*/
}

body.appear{
    background:#fff;/*画面を開いた後の背景色を指定*/
}

.splashbg{
	position: fixed;
	top: 0;
	right:0;
	bottom:0;
	left: 0;
	border-width: 0px;/*開始はボーダーの太さは0*/
	border-style:solid;
    border-color: #000;/*拡大する四角の色*/
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes backBoxAnime{
	99.9% {/*アニメーション終了ぎりぎりまで*/
        z-index: 2;/*最前面に*/
		border-width: 0px;/*開始はボーダーの太さは0*/
	}
    100%{
       z-index: -1; /*最背面に*/
        border-width: 0px;/*終了はボーダーの太さは0*/
    }
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
    position: relative;
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}



/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/* 上下のアニメーション*/
.upAnime{
    opacity: 0;/* 事前に透過0 にして消しておく*/
}

.slideAnimeDownUp {
    animation-name:slideTextY100;
    animation-duration:2.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(100%);/* 要素を上の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}
.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:2.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY-100 {
    from {
    transform: translateY(-100%);/* 要素を下の枠外に移動*/
    opacity: 0;
    }
    to {
    transform: translateY(0);/* 要素を元の位置に移動*/
    opacity: 1;
    }
}


/*---*/

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay:0.4s;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動き自体の指定：今回は「ふわっ」
===================================*/


.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* 左上へ */
/*
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}
*/



/*順番*/
/*
			.image01{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  padding:0;
  li{
    width: 48%;
    font-size:0;
    img{
      width:100%;
    }
  }
}
*/
/*
.image01{
  margin:100vh auto;
  
}
*/
@media screen and (min-width: 768px){
  .image01{
		li{
      width:33%;
      &:nth-of-type(3n+1){
        transition-delay: 0.2s;
      }
      &:nth-of-type(3n+2){
        transition-delay: 0.4s;
      }
      &:nth-of-type(3n){
        transition-delay: 0.6s;
      }
      &:nth-of-type(n+4){
/*        margin-top:2%;*/
      }
    }
  }
}
@media screen and (max-width: 767px){
  .image01{
    li{
      &:nth-of-type(2n+1){
        transition-delay: 0.2s;
      }
      &:nth-of-type(2n){
        transition-delay: 0.4s;
      }
      &:nth-of-type(n+3){
/*        margin-top:4%;*/
      }
    }
  }
}

/*=== アニメーション ===*/
.inview_fi{
  opacity: 0;
  transition: 1.5s;
  &.show {
      opacity: 1;
  }
}
.inview_fiU{
  transform: translate(0, 20%);
  opacity: 0;
  transition: 1s;
  &.show {
      transform: translate(0, 0);
      opacity: 1;
  }
}

/*======================*/
.txt-scroll{
  text-align:center;
  font-size:30px;
  font-weight:bold;
  letter-spacing:0.1em;
}