@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* CSS Document */

/*---------------------character----------------------*/

/*.txt_anime {
    width: 100%;
    height: 64px;
    line-height:100px;
    overflow: hidden;
    background:#000;
	color:#fff;
	font-size: 3.5rem;
	letter-spacing:2rem;
    font-weight: 600;
    font-style: Italic;
}

.txt_anime p {
  animation: animetxt 20s linear infinite;
  transform: translateX(100%);
}

@keyframes animetxt {
100% {
  transform: translateX(-100%);
 }
}*/



/*--------------キャラクターページのループ---------------------*/


@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
    height: 64px;
    margin: auto 0;
    margin: auto auto;
    background-color: #000;
}

.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 5);
    margin-top: 20px;
	margin-left: 20px;
}
.scroll-infinity__item>img {
  width: 100%;
}


/*--------------キャラクターページのループ---------------------*/



/*--------------キャラクターページのループアイパッド---------------------*/


@media screen and (min-width:481px) and (max-width:959px) {
	
	.scroll-infinity__item {
    width: calc(100vw / 3);
    margin-top: 23px;
    margin-left: 20px;
}

	
}

@media screen and (min-width:960px) and (max-width:1300px) {
	
	.scroll-infinity__item {
    width: calc(100vw / 4);
    margin-top: 23px;
    margin-left: 20px;
}

	
}

@media screen and (min-width:1301px) and (max-width:2000px) {
	
	.scroll-infinity__item {
    width: calc(100vw / 6);
    margin-top: 23px;
    margin-left: 20px;
}

}
	
	
@media screen and (min-width:0px) and (max-width:480px) {
	
	.scroll-infinity__item {
    width: calc(100vw / 2);
    margin-top: 20px;
    margin-left: 20px;
	}
	
	
	}

	




/*--------------キャラクターページのループアイパッド---------------------*/




/*-----------コンセプトページのMoreボタン--------------*/

.BtnAnime {
    position: relative;
    display: inline-block;
    padding: 18px 40px;
    color: #fff;
    border: 1px solid #ffffff;
    border-radius: 15px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

.BtnAnime:hover {
	color:#0023A0;
	transition: .8s;
	background-color: aliceblue;
}


/*-----------コンセプトページのMoreボタン--------------*/

/*-----------上へTOPボタン--------------*/

/*.anime-fade-up {
    animation-name: fade-up;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fade-up {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}*/

/*-----------上へTOPボタン--------------*/


/*--------------お試し打ち込み文字コンセプト---------------------*/

.anime-to-left {
    animation-name: to-left;
    animation-duration: 2s;
}

@keyframes to-left {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.anime-to-left2 {
    animation-name: to-left;
    animation-duration: 3s;
}

@keyframes to-left {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.delay01 {
    animation-delay: 1s;
}

.delay02 {
    animation-delay: 1.5s;
}

.delay03 {
    animation-delay: 2s;
}

.delay04 {
    animation-delay: 2.5s;
}


.anime-fade-up {
    animation-name: fade-up;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fade-up {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.abaout-left {
    animation-name: to-left;
    animation-duration: 3s;
}

@keyframes to-left {
	0% {
		opacity: 0;
		transform: translateX(100px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}



.anim-box.poyoyon2.is-animated {
  animation: poyoyon2 1s ease-in-out forwards;
}
 
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}


.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 70px;
  height: 70px;
  margin-top: 15px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}



/*--------------お試し打ち込み文字コンセプト---------------------*/