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

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url(../img/prev.png);
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url(../img/next.png)
}
/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}
/*.swiper-pagination-bullet{
	background-color: #CCCCCC;
} */

@media screen and (max-width: 767px) {
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 25px;
  width: 25px;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper .swiper-wrapper .swiper-slide .head-line {
	position: absolute;
	top: 33%;
	left: 10%;
	color: #ffffff;
	font-size: 1.5em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000000;
}
.swiper .swiper-wrapper .swiper-slide-active .head-line {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper .swiper-wrapper .swiper-slide .kinds {
	position: absolute;
	top: 60%;
	left: 10%;
	color: #ffffff;
	font-size: 1em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000000;
}
.swiper .swiper-wrapper .swiper-slide-active .kinds {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

}

@media screen and (min-width: 768px) and (max-width: 959px) {
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 35px;
  width: 35px;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper .swiper-wrapper .swiper-slide .head-line {
	position: absolute;
	top: 40%;
	left: 10%;
	color: #ffffff;
	font-size: 1.9em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000000;
}
.swiper .swiper-wrapper .swiper-slide-active .head-line {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper .swiper-wrapper .swiper-slide .kinds {
	position: absolute;
	top: 60%;
	left: 10%;
	color: #ffffff;
	font-size: 1.2em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000000;
}
.swiper .swiper-wrapper .swiper-slide-active .kinds {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

}

@media screen and (min-width:960px) {
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper .swiper-wrapper .swiper-slide .head-line {
	position: absolute;
	top: 34%;
	left: 10%;
	color: #ffffff;
	font-size: 3em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000000;
}
.swiper .swiper-wrapper .swiper-slide-active .head-line {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper .swiper-wrapper .swiper-slide .kinds {
	position: absolute;
	top: 57%;
	left: 10%;
	color: #ffffff;
	font-size: 2em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000000;
}
.swiper .swiper-wrapper .swiper-slide-active .kinds {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

}