@charset "UTF-8";

@media screen and (min-width: 992px) {
	.pro-main,.box-main_visual,.box-main_copy div {height: 680px;}
}
@media screen and (max-width: 991px) {
	.pro-main {margin-top: 40px;}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
	.pro-main,.box-main_visual,.box-main_copy div {height: 480px;}
}
@media screen and (max-width: 767px) and (min-width: 577px) {
	.pro-main,.box-main_visual,.box-main_copy div {height: 320px;}
}
@media screen and (max-width: 576px) {
	.pro-main,.box-main_visual,.box-main_copy div {height: 240px;}
}
.pro-main {
	position: relative;
	overflow: hidden;
}
.box-main_copy {
    z-index:20;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.box-main_copy div {
	position: relative;
}

 .main_copy {
 	display: block;
    z-index:20;
    opacity: 0;
    margin: auto;
    top: 0;
    bottom:0;
    left:0;
    right: 0;
    position: absolute;
    -webkit-animation: anime_copy 36s 0s infinite;
    animation: anime_copy 36s 0s infinite;
}

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

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

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

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

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


.box-main_visual {
	position: relative;
}
 .main-visual {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime_visual 36s 0s infinite;
    animation: anime_visual 36s 0s infinite;
}

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

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

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

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

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

@keyframes anime_copy {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         z-index:9;
    }
    100% { opacity: 0 }
}
@keyframes anime_visual {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1.2) ;
         z-index:9;
    }
    100% { opacity: 0 }
}