body {
	margin: 24px auto;
	text-align: center;
	background: #ddd;
	font-family: 'Noto Sans JP', sans-serif;
	color: #fff;
	letter-spacing: 0.04em;

}

a:link						{ color: #cc0;	text-decoration: none;}
a:visited					{ color: #993;	text-decoration: none; }
a:hover, a:visited:hover	{ color: #cc0;	text-decoration: underline; }
/*---------------------------------------------
  General Settings
  ---------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.swiper-container {
	padding: 30px 0 50px;
	background: #ddd;
}

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

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

.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: 720px;
  margin: 0 auto;
}

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

.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: 720px;
  margin: 0 auto;
}

.s-right2-text0,
.s-right2-text1,
.s-right2-text2 {
	position: absolute;
	width: 100%;
	font-size: 2.0rem;
  /* font-size: 4vw; */
}

.s-right2-text0 {
	left: 0;
	text-align: center;
}

.s-right2-text1,
.s-right2-text2 {
	left: 12px;
	text-align: left;
}

.s-right2-text0,.s-right2-text1 {
	top: 108%;
  /* top: 65%; */
}

.s-right2-text2 {
	top: 136%;
  /* top: 80%; */
}

.swiper-slide-active .s-right2-text0,.swiper-slide-active .s-right2-text1 {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}

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

.s-right2-text0 .txt,
.s-right2-text1 .txt,
.s-right2-text2 .txt,
.s-right2-text0 .atn,
.s-right2-text1 .atn,
.s-right2-text2 .atn {
	padding: 4px 24px;
}

.s-right2-text0 .txt,
.s-right2-text1 .txt,
.s-right2-text2 .txt {
	color: #000;
	background: #fff;
}

.s-right2-text0 .atn,
.s-right2-text1 .atn,
.s-right2-text2 .atn {
	color: #000;
	background: #fc0;
}

@keyframes slideFromRightSub {
  0%, 45% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample04
  ---------------------------------------------*/
.s-three-wrap {
  position: relative;
  max-width: 720px;
  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: 4vw;
}

.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; */
	background: #aaa;
	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: 720px;
  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: 4vw;
}

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

.s-four-box {
  bottom: 0;
  height: 20%;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  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
  ---------------------------------------------*/
.Small {
	font-size: 70%;
	/* letter-spacing: -0.08em; */
}

footer{
	margin: 36px auto 0;
	color: #eee;

}