@charset "utf-8";
/* CSS Document */
/*--inview animation---------------*/
/*ani_text*/
.ani_text{
}
.ani_text{
	display: block;
	opacity: 0;
	transform: translate(10px,10px);
	transition: transform 1s cubic-bezier(.42,0,.58,1), opacity 1s cubic-bezier(.42,0,.58,1);
}
.ani_text.inview{
	opacity: 1;
	transform: translate(0,0);
}
.ani_text:nth-of-type(1){
	transition-delay:.2s;
}
.ani_text:nth-of-type(2){
	transition-delay:.4s;
}
.ani_text:nth-of-type(3){
	transition-delay:.6s;
}
.ani_text:nth-of-type(4){
	transition-delay:.8s;
}
.ani_text:nth-of-type(5){
	transition-delay:1s;
}
.ani_text:nth-of-type(6){
	transition-delay:1.2s;
}
.ani_text:nth-of-type(7){
	transition-delay:1.4s;
}
.ani_text:nth-of-type(8){
	transition-delay:1.6s;
}
.ani_text:nth-of-type(9){
	transition-delay:1.8s;
}
.ani_text:nth-of-type(10){
	transition-delay:2s;
}
.ani_text:nth-of-type(11){
	transition-delay:2.2s;
}
.ani_text:nth-of-type(12){
	transition-delay:2.4s;
}
.ani_text:nth-of-type(13){
	transition-delay:2.6s;
}
.ani_text:nth-of-type(14){
	transition-delay:2.8s;
}
.ani_text:nth-of-type(15){
	transition-delay:3s;
}
@media (max-width: 768px){
	.ani_text{
		transition-delay: 0s !important;
	}
}
/*txtanim*/
.txtanim span {
  display: inline-block;
  opacity: 0;
  transform: scale(1.2) translate(-50%, -50%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.txtanim.inview span {
  animation: textfadein 1.5s ease forwards;
}
.txtanim.inview span:nth-child(1) {
  animation-delay: 0.1s;
}
.txtanim.inview span:nth-child(2) {
  animation-delay: 0.2s;
}
.txtanim.inview span:nth-child(3) {
  animation-delay: 0.3s;
}
.txtanim.inview span:nth-child(4) {
  animation-delay: 0.4s;
}
.txtanim.inview span:nth-child(5) {
  animation-delay: 0.5s;
}
.txtanim.inview span:nth-child(6) {
  animation-delay: 0.6s;
}
.txtanim.inview span:nth-child(7) {
  animation-delay: 0.7s;
}
.txtanim.inview span:nth-child(8) {
  animation-delay: .8s;
}
.txtanim.inview span:nth-child(9) {
  animation-delay: .9s;
}
.txtanim.inview span:nth-child(10) {
  animation-delay: 1s;
}
.txtanim.inview span:nth-child(11) {
  animation-delay: 1.1s;
}
.txtanim.inview span:nth-child(12) {
  animation-delay: 1.2s;
}
.txtanim.inview span:nth-child(13) {
  animation-delay: 1.3s;
}
.txtanim.inview span:nth-child(14) {
  animation-delay: 1.4s;
}
.txtanim.inview span:nth-child(15) {
  animation-delay: 1.5s;
}
@keyframes textfadein {
  0% {
    opacity: 0;
    transform: scale(1.2) translate(-50%, -50%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}
/*swipe*/
.swipe{
   position: relative;
   overflow: hidden;
}
.swipe::after{
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #000;
   pointer-events: none;
   z-index: 1;
   transform: translateX(-100%);
   transition: 1.2s ease-in-out;
}
.swipe.white::after{
   background: #000;
}
.swipe .swipe_in{
   opacity: 0;
   transition: 0.2s ease-in;
   transition-delay: 0.6s;
}
.swipe.inview .swipe_in{
   opacity: 1;
}
.swipe.inview::after{
   transform: translateX(100%);
}

 /* マーカーを引く */
.marker  {
background-image: linear-gradient(120deg, #fff00099,#fff00099 100%);
background-repeat: no-repeat;
background-size: 0 0.4em;
background-position: 0 90%;
transition: background-size 1.25s ease-in;
}
.marker.inview {
  background-size: 100% 0.4em;
}