@charset "UTF-8";
/*
　TOP
	共通CSS

*/

/*---------------------------------------------
  Swiper tips Sample04
  ---------------------------------------------*/
.s-three-wrap {
  position: relative;
}

.s-three-wrap > img{
    width: 100%;
    max-width: initial;
}

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

.s-three-text img,
.s-three-sub img,
.s-three-button img{
    position: absolute;
    top: 37%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}

.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 0.7s ease 0s 1 normal;
}
.swiper-slide-active .s-three-sub {
  animation: slideFromRightSub 1.2s ease 0s 1 normal;
}
.swiper-slide-active .s-three-button {
  animation: slideFromRightBtn 1.7s ease 0s 1 normal;
}

@keyframes slideFromRight {
  0%, 65% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideFromRightSub {
  0%, 65% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideFromRightBtn {
  0%, 65% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/*-----------------------*----*----*----*----*----*----*----*----*----* タグ */

.main_txt01 img{
	max-width: 695px;
	width: 50%;
}

.s-three-sub img{
	max-width: 695px;
	width: 50%;
}

@media screen and (max-width: 767px){
.main_txt01 img{
	width: 80%;
}
	
.s-three-sub img{
	width: 80%;
}
	
.s-three-text img,
.s-three-sub img,
.s-three-button img {
    top: 45%;
}	
}








/*-----------------------*----*----*----*----*----*----*----*----*----* ヘッダー */
/*-----------------------*----*----*----*----*----*----* header */
/*-----------------------*----*----*----*----*----*----*----*----*----* メイン */
/*-----------------------*----*----*----*----*----*----* main */


/*-----------------------*----*----*----*----*----*----*----*----*----* フッター */
/*-----------------------*----*----*----*----*----*----* footer */