﻿.slide-img1{
	background-image:url(../images/top/slide1.jpg);
	background-size:cover;
	background-position: center;
	width:100vw; height:100vh;
}
.slide-img2{
	background-image:url(../images/top/slide2.jpg);
	background-size:cover;
	background-position: center;
	width:100vw; height:100vh;
}
.slide-img3{
	background-image:url(../images/top/slide3.jpg);
	background-size:cover;
	background-position: center;
	width:100vw; height:100vh;
}
@keyframes header_logo_anim {
	0% { opacity:0; }
	100% { opacity:1; }
}
.swiper-wrapper{ filter: brightness(0%) invert(1); }
@keyframes blur-anim {
	0% { filter: brightness(0%); }
	50% { filter: brightness(50%); }
	100% { filter: brightness(100%); }
}
@keyframes zoomUp {
	0% { transform: scale(1); }
	100% { transform: scale(1.15); }
}
.l-header_title{ animation: header_logo_anim 2s linear forwards; animation-delay: 5s;  }
.swiper-wrapper{ animation: blur-anim 2s linear forwards; animation-delay: 4s;  }
.swiper-slide-active .slide-img1,
.swiper-slide-active .slide-img2,
.swiper-slide-duplicate-active .slide-img1,
.swiper-slide-duplicate-active .slide-img2,
.swiper-slide-prev .slide-img1,
.swiper-slide-prev .slide-img2 { animation: zoomUp 10s linear 0s 1 normal both;  }
.slide-img img { display: block; }

@media (max-width: 767px) {
    .in-header_title {
      width: 30%;
      height: auto;
    }
}
@media (min-width: 768px) {
    .in-header_title  {
      width: 130px;
      height: auto;
    }
}


@media (max-width: 767px) {
    .l-header_title {
     position: fixed;
      top: 3%;
      left: 3%;
      width: 30%;
      height: auto;
      z-index: 100; opacity:0;
    }
}
@media (min-width: 768px) {
    .l-header_title  {
     position: fixed;
      top: 3%;
      left: 3%;
      width: 130px;
      height: auto;
      z-index: 100; opacity:0;
    }
}
  .p-home_hero {
    position: relative;
    z-index: 30;
  }

  .p-home_hero_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 10;
      height: auto;
      margin-top: 0;
      text-align: center;
  }

  .p-home_hero_title>span:nth-of-type(1) {
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-mask-image: -webkit-linear-gradient(#fff 33.3%, rgba(255, 255, 255, 0) 66.6%);
    -webkit-mask-position: bottom center;
    -webkit-mask-size: 100% 300%;
    -webkit-mask-repeat: no-repeat;
    animation: heroTitle1 6s 0.5s cubic-bezier(0.23, 1, 0.32, 1) both
  }
  .home_hero_title2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 10;
      height: auto;
      margin-top: 0;
      text-align: center; opacity:0;
  }
  @keyframes heroTitle1 {
    0% {
      filter: blur(4px);
      opacity: 0%;
      -webkit-mask-position: bottom center
    }
    1% {
      opacity: 100%;
    }
    100% {
      filter: blur(0px);
      opacity: 0%;
      -webkit-mask-position: top center;
    }
  }


  @media (max-width: 767px) {
    .p-home_hero { height: 100vh }
    .p-home_hero_title img
    .home_hero_title2 img {
      width: 75vw;
      height: auto; margin: 0 auto;
    }
  }

  @media (min-width: 768px) {
    .p-home_hero { height: 100vh }
    .p-home_hero_title img ,
    .home_hero_title2 img {
      width: 75vw; max-width:300px;
      height: auto; margin: 0 auto;
    }
  }

  @media (max-width: 540px) {
	.home_hero_title2 {
		width: 100%;
	    position: absolute;
	    z-index: 10;
	    opacity:0;
	    top: 50%;
	    left: 0%;
	    transform: translateY(-50%);
	    -webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	}
    .home_hero_title img {
      width: 100%; max-width:260px;
      height: auto; margin: 0 auto;
	}

    .home_hero_title2 img {
      width: 75vw; max-width:260px;
      height: auto; margin: 0 auto;
	}

}
