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

@media screen and (max-width: 640px) {
/*---------------------
hero-image SP
---------------------*/

.main_imgBox {
      height: 390px;
    overflow: hidden;
    position: relative; }
	.main_imgBox.PC-hero{
		display:none;
	}

  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 390px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }
}
@keyframes anime {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1.1) ;
         z-index:9;
    }
    100% { opacity: 0 }
}
/*---------------------
header scroll
---------------------*/

.scroll{
  padding-top: 70px; /*初期値70px*/
	position: relative;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
}
.scroll-meta{
  position: absolute;
  top: 30px; /*初期値50px*/
	bottom:30px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #75daf2;
  border-bottom: 1px solid #75daf2;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb 2.5s infinite;; /*無限をやめるならinfiniteを数字に*/
  animation: sdb 2.5s  infinite;; /*最後にforwardsでanime終了時の状態維持可能*/
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

@media screen and (min-width:641px){
/*---------------------
hero-image PC
---------------------*/
.main_imgBox.SP-hero{
	display:none;
}
	.main_imgBox {
    height: 610px;
    overflow: hidden;
    position: relative; }

  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 610px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; 
	}
.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

	
	
/*---------------------
header scroll
---------------------*/

.scroll{
  padding-top: 70px; /*初期値70px*/
	position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 15;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
}
.scroll-meta{
  position: absolute;
  top: 20px; /*初期値50px*/
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -12px;
  border-left: 1px solid #75daf2;
  border-bottom: 1px solid #75daf2;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb 2.5s infinite;; /*無限をやめるならinfiniteを数字に*/
  animation: sdb 2.5s infinite;; /*最後にforwardsでanime終了時の状態維持可能*/
  box-sizing: border-box;
}
	
	
}