.scroll-mb{
	display: none;
}
@media(max-width: 768px){
	#header {
	  padding: 4.17vw 2.6vw 8.72vw;
	}
	.logo {
	  left: 2.6vw;
	  top: 2.6vw;
	}
	.logo img {
	  height: 17.19vw;
	}
	.menu-main li {
	  padding: 0 2.99vw;
	  font-size: 4.3vw;
	}
	.menu-main li:before {
	  display: none;
	}
	.fv {
	  padding: 67.19vw 0 20vw;
	  background: url(../images/fv/sp-fv-bg.png) no-repeat top center / cover;
	  justify-content: flex-end !important;
	}
	.fv .box {
	  max-width: 100%;
	}
	.btn-list {
	  gap: 1.56vw;
	  margin-top: -4.69vw;
	  margin-left: 0;
	}
	.btn-list .singin,
	.btn-list .nap {
	  width: 20.83vw;
	}
	.btn-list .right {
	  width: 49.48vw;
	  gap: 0.91vw;
	}
	.btn-list .right .play,
	.btn-list .right .app {
	  width: calc(50% - 0.456vw);
	}
	.characters {
	  padding: 10vw 0 8vw;
	}
	.section-title img {
	  height: 23.05vw;
	}
	.characters {
	  background: url(../images/figure/sp-section2-bg.png) no-repeat top
	    center/cover;
	}
	.characters-slider {
	  padding: 0;
	  position: relative;
	  width: 100%;
	}
	.characters-right {
	  max-width: 100%;
	  top: 0;
	}
	.characters-left {
	  position: relative;
	  bottom: auto;
	  left: 0;
	  width: 100%;
	  top: 0;
	  max-height: 81vw;
	  overflow-y: hidden;
	  margin-bottom: -19.53vw;
	  text-align: center;
	}
	.system {
	  padding: 25vw 0 12.76vw;
	  background: url(../images/system/sp-bg.png) no-repeat top center / cover;
	}
	.system-slider {
	  max-width: 100%;
	  margin: 6.77vw auto 0;
	  left: 0;
	}
	.system-featured {
	  height: 53.78vw;
	  width: 114%;
	  left: -6%;
	}
	.system-featured img {
	  top: 2vw;
	  left: 8.5%;
	  width: calc(100% - 19%);
	}
	.system-featured:before {
	  display: none;
	}
	.system-description {
	  bottom: -10.42vw;
	  width: 100%;
	  min-height: 20.83vw;
	  padding-top: 0.5vw;
	}
	.system-description img {
	  max-width: 90%;
	}
	.system-description:before {
	  width: 120%;
	  height: 20.83vw;
	  left: -10%;
	  top: -1vw;
	}
	.system-characters {
	  display: none;
	}
	.event {
	  background: url(../images/event/sp-bg.png) no-repeat top center/cover;
	  padding: 20vw 0 12.25vw;
	}
	.event-scroll-wrapper {
	  width: 100%;
	  overflow-x: auto;
	  overflow-y: hidden;
	  -webkit-overflow-scrolling: touch; 
	  scroll-behavior: smooth;
	  scrollbar-height: auto;
		scrollbar-color: #590d1b #5d5d5d;
		padding-bottom: 3.646vw;
	}
	.event-scroll-wrapper::-webkit-scrollbar {
	    height:1.563vw;
	    width: 1.563vw;
	  }
	  .event-scroll-wrapper::-webkit-scrollbar-track {
	    background: #5d5d5d;
	  }
	  .event-scroll-wrapper::-webkit-scrollbar-thumb {
	    background-color: #590d1b;
	    border: 0.26vw solid black;
	    border-radius: 0.651vw;
	  }
	.event-content {
	   width: 142%;
	   margin: 3.13vw 0 0;
	   left: 0;
	   max-width: max-content;
	}
	.character1 {
	  display: none;
	}
	.character2 {
	  display: none;
	}
	#footer {
	  padding: 5.47vw 0;
	  text-align: center;
	}
	#footer .container {
	  max-width: 100%;
	  padding: 0 2.6vw;
	}
	.ft-logo {
	  display: none;
	}
	.ft-information p {
	  font-size: 3.52vw;
	  margin-bottom: 0;
	  line-height: 1.67;
	}
	.characters-for {
	  right: 0;
	  left: 0;
	  bottom: 0;
	  position: relative;
	  margin-top: 0;
	  text-align: center;
	}
	.characters-for .characters-avata {
	  width: 18.62vw;
	  padding: 1.43vw;
	  height: 18.62vw;
	}
	.characters2,
	.characters4,
	.characters3 {
	  width: 100%;
	  left: 0;
	  top: 0;
	  position: relative;
	  margin: -0.13vw auto -23.44vw;
	}
	.characters-right {
	  max-width: 100%;
	  padding: 0 4.17vw;
	  margin: 0 auto;
	}
	.slick-arrow {
	  width: 21.63vw;
	  height: 39.06vw;
	  margin-top: -14.6vw;
	}
	.slick-prev,
	.slick-prev:hover {
	  left: -3.5vw;
	}
	.slick-next,
	.slick-next:hover {
	  right: -3.5vw;
	}
	.slick-dots {
	  margin-top: 4.95vw;
	  gap: 5.86vw;
	}
	.slick-dots li {
	  width: 2.47vw;
	  height: 2.34vw;
	  background-size: 1.82vw auto;
	}
	.slick-dots li.slick-active {
	  background-size: 2.47vw auto;
	}
	.characters-avata-box {
	  padding: 1.82vw;
	  margin: 0;
	  box-sizing: border-box;
	  margin: 0 -1.3vw;
	}
	.characters-for .characters-avata-box.slick-current:before {
	  height: 100%;
	  margin: 0 auto;
	  display: inline-block;
	  text-align: center;
	  width: 100%;
	  background-position: bottom center;
	  bottom: 0;
	  background-size: contain;
	}
	.characters-for .characters-avata-box.slick-current .characters-avata {
	  box-shadow: 0 0 1.3vw rgba(217, 23, 29, 1), 0 0 1.3vw rgba(217, 23, 29, 0.7);
	}
	.avata-box {
	  padding: 0.78vw;
	}
	.on-pc {
	  display: none !important;
	}
	.on-sp {
	  display: block !important;
	}
	.toogle-menu {
	  margin-left: 2.6vw;
	  cursor: pointer;
	  width: 8.46vw;
	  height: 5.08vw;
	}
	.toogle-menu .menu-close {
	  display: none;
	}
	.toogle-menu img {
	  height: 5.08vw;
	  display: block;
	}
	.hd-right {
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
	}
	.menu-mobile {
	  display: none;
	  position: absolute;
	  top: 17.71vw;
	  left: 0;
	  right: 0;
	  padding: 3.91vw 2.6vw 39.06vw;
	  background: linear-gradient(
	    to bottom,
	    rgba(93, 14, 30, 0.95) 60%,
	    rgba(93, 14, 30, 0)
	  );
	  text-align: center;
	  z-index: 10;
	}
	.menu-mobile li {
	  display: block;
	  font-size: 5.34vw;
	  margin-bottom: 7.16vw;
	}
	#header.menu-active .toogle-menu .menu-close {
	  display: block;
	}
	#header.menu-active .toogle-menu .menu-open {
	  display: none;
	}
	.event-content img {
	  width: 100%;
	  max-width: none;
	  display: block;
	}
	.system-it {
	  padding-bottom: 10.42vw;
	}
	.characters-for .slick-track {
	  width: 90% !important;
	  margin: 0 auto;
	}
	.fp-section:after{
		height: 4.8vw;
	}
	.section{
		height: auto;
	}
	.animated {
		opacity: 1;
		transform: none;
	}
	.scroll{
		display: none;
	}
	.scroll-mb{
		display: block;
		position: absolute;
		bottom: 2vw;
		left: 0;
		right: 0;
		text-align: center;
		margin: 0 auto;
		height: 18vw;
		animation: bounce 1.5s ease-in infinite;
	}
	.scroll-mb img{
		height: 100%;
	}
	@keyframes bounce {
	  0%,
	  100% {
	    transform: translateY(0);
	  }
	  50% {
	    transform: translateY(1vw);
	  }
	}
}