/* CSS Document */
/*---------------------------------------------
  General Settings
  ---------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.swiper-container {
  /*padding: 30px 0 50px;*/
  /*background: #eeeeee;*/
	background-image: url(../../images/top/img_top_image_bg.jpg);
    background-repeat: repeat-x;
    padding: 50px 0 75px;
}

/*---------------------------------------------
  Swiper tips Sample01
  ---------------------------------------------*/
.s-fade-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-fade-text {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 5vw;
}

.swiper-slide-active .s-fade-text {
  animation: slideTextFade 1.75s ease 0s 1 normal;
}

@keyframes slideTextFade {
  0%, 25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample02
  ---------------------------------------------*/
.s-right-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-right-text {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 5vw;
}

.swiper-slide-active .s-right-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}

@keyframes slideFromRight {
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample03
  ---------------------------------------------*/
.s-right2-wrap {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  box-shadow: 5px 5px 10px 2px #ccc;
}
.s-right2-wrap img {
	position: relative;
	
}
.s-right2-text, .s-right2-text01, .s-right2-text02, .s-right2-text03, .s-right2-text04 {
	position: absolute;
	width: 100%;
	left: 0;
	text-align: left;
	line-height: 1.8;
	padding-left: 50px;
	color: #5a5750;
	text-shadow: 
    white 1px 1px 10px, white -1px 1px 10px,
    white 1px -1px 10px, white -1px -1px 10px;
}
.s-right2-sub, .s-right2-sub04 {
	position: absolute;
	width: 100%;
	left: 0;
	text-align: left;
	line-height: 1.8;
	padding-left: 50px;
	color: #5a5750;
}

.s-right2-text {
  top: 20%;
  font-size: 5vw;
}
.s-right2-sub {
  top: 55%;
  font-size: 2vw;
}

.s-right2-text01 {
  top: 38%;
  font-size: 3rem;
}
.s-right2-text02 {
  top: 30%;
  font-size: 3rem;
}
.s-right2-text03 {
  top: 28%;
  font-size: 3rem;
}
.s-right2-text04 {
  top: 10%;
  font-size: 3rem;
}
.s-right2-sub04 {
  top: 60%;
}

.swiper-slide-active .s-right2-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-right2-text01 {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-right2-text02 {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-right2-text03 {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-right2-text04 {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}


.swiper-slide-active .s-right2-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}
.swiper-slide-active .s-right2-sub04 {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}


@keyframes slideFromRightSub {
  0%, 45% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}


/* Sサイズ、タブレット : Small Devices, */
@media only screen and (max-width : 767px) {
.swiper-container {
  /*padding: 30px 0 50px;*/
  /*background: #eeeeee;*/
	background-image: url(../../images/top/img_top_image_bg.jpg);
    background-repeat: repeat-x;
    padding: 0 0 30px;
	background-size: 100% 100%;
}
	
.s-right2-text, .s-right2-text01, .s-right2-text02, .s-right2-text03, .s-right2-text04 {
	padding-left: 5%;
	line-height: 1.2;
}
.s-right2-sub, .s-right2-sub04 {
	padding-left: 5%;
}
.s-right2-text01 {
  top: 38%;
  font-size: 2rem;
}
.s-right2-text02 {
  top: 28%;
  font-size: 2rem;
}
.s-right2-text03 {
  top: 28%;
  font-size: 2rem;
}
.s-right2-text04 {
  top: 15%;
  font-size: 2rem;
}
.s-right2-sub04 {
  top: 65%;
}
.s-right2-sub04 img {
  max-width: 60%;
}
	
	
}



/* 481px - 767px用（タブレット／スマートフォン用）の記述 */
@media screen and (min-width: 481px) and (max-width: 767px)  {	
.swiper-container {
    background-image: url(../../images/top/img_top_image_bg.jpg);
    background-repeat: repeat-x;
    padding: 15px 0 75px;
    background-size: 100% 100%;
}
.s-right2-text01 {
  top: 45%;
  font-size: 2.8rem;
}
.s-right2-text02 {
  top: 38%;
  font-size: 2.8rem;
}
.s-right2-text03 {
  top: 38%;
  font-size: 2.8rem;
}
.s-right2-text04 {
  top: 20%;
  font-size: 2.8rem;
}
.s-right2-sub04 {
  top: 65%;
}
.s-right2-sub04 img {
  max-width: 60%;
}
	
	
	
	
}


/*---------------------------------------------
  Swiper tips Sample04
  ---------------------------------------------*/
.s-three-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.s-three-text,
.s-three-sub,
.s-three-button {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
}

.s-three-text {
  top: 20%;
  font-size: 5vw;
}

.s-three-sub {
  top: 55%;
  font-size: 2vw;
}

.s-three-button {
  top: 75%;
  left: calc( 50% - 75px );
  display: block;
  width: 150px;
  padding: 5px 10px;
  box-sizing: border-box;
  background: #535353;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: all .25s ease;
}
.s-three-button:hover {
  background: white;
  color: #1b1b1b;
}

.swiper-slide-active .s-three-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-three-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}
.swiper-slide-active .s-three-button {
  animation: slideFromRightBtn 2.5s ease 0s 1 normal;
}

@keyframes slideFromRightBtn {
  0%, 65% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample05
  ---------------------------------------------*/
.s-four-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

.s-four-text,
.s-four-sub,
.s-four-box {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
}

.s-four-text {
  top: 20%;
  font-size: 5vw;
}

.s-four-sub {
  top: 55%;
  font-size: 2vw;
}

.s-four-box {
  bottom: 0;
  height: 20%;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.75);
  text-align: left;
}

.swiper-slide-active .s-four-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-four-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}
.swiper-slide-active .s-four-box {
  animation: slideFromRightBox 2.5s ease 0s 1 normal;
}

@keyframes slideFromRightBox {
  0%, 65% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0px);
  }
}
/*---------------------------------------------
  Style End
  ---------------------------------------------*/