@charset "UTF-8";
/*////////////////////////*/
/*ファーストビュー*/
/*////////////////////////*/

/*トップスライダー*/
.top-slider {
	position: relative;
	width: 100%;
	height: calc(100vh - 80px) ;
}
.top-slider video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;";
}
.top-ph {
  height: 500px;
}


.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

#text, #logo {
  opacity: 0;
}
#text {
  width: 100%;
  filter: drop-shadow(0 0 0.5rem rgb(50, 50, 50));
}
#logo {
  width: 55%;
  filter: drop-shadow(0 0 0.5rem rgb(50, 50, 50));
}


.bg-index {
  background: url(/assets/images/top/index-bg.png) no-repeat top center / cover;
}
.index-bg01 {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 60%;
  background:rgba(33,82,131,0.8);
}

.bnr-rec-text {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background:rgba(33,82,131,0.8);
  padding: 4% 0 4% 4%;
}


.swiper-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.slider1 .swiper-slide {
	height: unset;
}
.swiper-custom-parent {
  position: relative;
}
.slider1 {
  position: unset;
  width: 100%;
  height: 100%;
}
.swiper-pagination-bullet {
	  width: 2%;
    margin: 0 .5%;
    height: 3px;
    border-radius: unset;
    background: #fff;
}


/*////////////////////////*/
/*セカンドビュー*/
/*////////////////////////*/

/*slider2*/
.slider2 .slider-box {
	position: relative;
	height: 260px;
}
.slider2-cap {
	position: absolute;
  top: 0;
	left: 0;
	padding: 5px 15px;
	background: #b82123;
  color: #fff;
}

/*slider3*/
.slider3 .slider-box {
	position: relative;
	height: 220px;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  top: 60px;
  left: 50%;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  top: 60px;
  left: 56%;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.4rem;
    color: #000;
}




/*PCのみ*/
@media (min-width: 768px) {

  .index-ph {
    border-radius: 0px 20px 20px 0;
  }


}

@media (max-width: 768px) {

    #logo {
      width: 90%;
    }

		.top-slider {
			height: 100vh;
			z-index: unset;
		}
    .index-bg01 {
      top: unset;
      bottom:0;
      height: unset;
    }
    .bnr-rec-text {
      position: unset;
      width: 100%;
      padding: 4%;
      background: #1764AA;
    }

}