/*画像表示エフェクト_縦幅等は各relativeのdiv指定で変更*/
.img_anime.white{
	pointer-events: none;
	display:block;
	z-index:10;
	background-color:#fff;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width: 100%;
	height:100%;
}
.white_play{
	animation: onWhite 1s linear 1 forwards;
	}
@keyframes onWhite {
   0% {left:0;}
  50% {left:0;}
 100% {left:-100%;}
}
.img_anime.black{
	pointer-events: none;
	display:block;
	z-index:11;
	position:absolute;
	top:0;
	bottom:0;
	left:120%;
	right:0;
	width: 80%;
	height:100%;
	background-color:#3c582e;
	transform:skewX(15deg);

	}
.black_play{
	animation: onBlack 1.5s ease-in-out 1 forwards;
	}
@keyframes onBlack {
   0% {left:100%;}
 100% {left:-100%;}
}


/*フェードイン基本*/
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 2s;
}
.fadein_y2 {
  opacity : 0;
  transform: translateY(-20px);
  transition: all 2s;
}


/*index_top画像*/
.topimg{
	width:100%;
	overflow:hidden;
    height: 900px;
	position:relative;
	}
.topimg img.index_logo{
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index:50;
	width:250px;
	height:auto;
	}
.topimg div.all{
	overflow:hidden;
	transform-origin: top right;
	display: block;
	}
.topimg div.all div.bgslide{
	z-index:10;
  background-position:center top;
  background-repeat:no-repeat;
  background-size:100% auto;
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 15s infinite;   /* 4画像 × 各5s = 20s */
}
/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.topimg div.all div.bgslide.src1 {
  background-image : url(./img/top-img-01.jpg);   /* PC用 */
}
.topimg div.all div.bgslide.src2 {
  background-image : url(./img/top-img-02.jpg);
  animation-delay  : 5s;
}
.topimg div.all div.bgslide.src3 {
  background-image : url(./img/top-img-03.jpg);
  animation-delay  : 10s;
}
@keyframes bgAnime {
   0% { opacity: 0; transform: scale(1.0); filter: blur(5px);}
  15% { opacity: 1;}
  20% { opacity: 1; filter: blur(0px);filter: blur(0.1px); }
  30% { opacity: 1;}
  40% { opacity: 1;}
  60% { opacity: 0; }
  65% { transform: scale(1.1); }
 100% { opacity: 0; }
}
.topimg div .bgslide{
	width: 100%;
	height:900px;
	}
@media screen and (max-width: 1450px) {
.topimg div.all div.bgslide{
  background-size:auto 950px;
  }
}

@media screen and (max-width: 768px) {
.cont_topimg img.subtitle{
	top: auto;
	right:0;
	left:0;
	bottom:17%;
	display:block;
	width:90%;
	max-width:558px;
	height:auto;
	margin:auto;
	}
/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.topimg div.all div.bgslide.src1 {
  background-image : url(./img/top-img-01sp.jpg);   /* sp用 */
}
.topimg div.all div.bgslide.src2 {
  background-image : url(./img/top-img-02sp.jpg);
  animation-delay  : 5s;
}
.topimg div.all div.bgslide.src3 {
  background-image : url(./img/top-img-03sp.jpg);
  animation-delay  : 10s;
}
}

@media screen and (max-width: 710px) {
.topimg{
	height:600px;
	}
.topimg div.all div.bgslide{
  background-size:auto 850px;
  }
	}
@media screen and (max-width: 540px) {
.topimg{
	height:600px;
	}
.topimg div.all div.bgslide{
  background-size:auto 600px;
  }
	}
@media screen and (max-width: 480px) {
.topimg{
	height:500px;
	}
.topimg div.all div.bgslide{
  background-size:auto 560px;
  }
}
@media screen and (max-width: 360px) {
.topimg{
	height:450px;
	}
.topimg div.all div.bgslide{
  background-size:auto 480px;
  }
}
@media screen and (min-width: 44.375em) {/*710px以上*/
.topimg img.index_logo{
	margin: auto;
	width:500px;
	}
}

/*インスタグラム埋め込み用*/
.slick_g_all.insta{
	overflow:hidden;
	}
.slick_g_all.insta.pc{
	display:block;
	}
.slick_g_all.insta.sp{
	display:none;
	}
.slick_g_all #_fukugan_12783cb2748f85d0e11261ee395fe083,
.slick_g_all #_fukugan_4cf1cc8a6f791465e6d83f654b830012{
	width:100%;
	position:relative;
	}
.slick_g_all #_fukugan_12783cb2748f85d0e11261ee395fe083{
	animation:instaAnime 60s linear infinite;
	}
.slick_g_all #_fukugan_4cf1cc8a6f791465e6d83f654b830012{
	animation:instaAnime2 60s linear infinite;
	}
/*.slick_g_all #_fukugan_12783cb2748f85d0e11261ee395fe083{
	animation-delay  : 30s;
	}*/
/* --- 段差で背景画像のアニメーションを実行 ----------------- */
._fukugan_grid table tr{
	position:absolute;
	top:0;
	bottom:0;
	}
@keyframes instaAnime {
   0% { left:0;}
 100% { left:-1500px; }
}
@keyframes instaAnime2 {
   0% { left:0;}
 100% { left:-1100px; }
}
.topimg div .bgslide{
	width: 100%;
	height:900px;
	}
@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 910px) {
}
@media screen and (max-width: 640px) {
.slick_g_all.insta.pc{
	display:none;
	}
.slick_g_all.insta.sp{
	display:block;
	}
}
@media screen and (max-width: 480px) {
}