@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1000px) {
	.pc{
		display: none;
	}
	
	.sp{
		display: block;
	}
	/* ==========================================================================
   TOPアニメ
========================================================================== */
	.special-site-container {
	 height: 111.7vw;
	}
	
	.naname-chara {
  animation: slideDiagonal 1s linear infinite;
}
	.naname-chara img{
		width: 19.7vw;
	}
	
	.delay-1 {
	  top: 0;
	  left: 34vw;
		animation-delay: 0.5s;
	}
	.delay-2 {
	  top: 20vw;
	  right: 0;
		animation-delay: 0.7s;
	}

	.delay-3 {
	  top: 0;
	  right: 2vw;
		animation-delay: 0.3s;
	}

	.delay-4 {
	  top: 10vw;
	  right: 99vw;
		animation-delay: 0.1s;
	}

	.delay-5 {
	  top: 0;
	  left: 2vw;
		animation-delay: 0.9s;
	}

	.delay-6 {
	  top: 70vw;
	  right: 0;
		animation-delay: 0.4s;
	}

	/* ==========================================================================
   ファストビュー
========================================================================== */
	
	header {
    background: url("../images/sp/top-bg.jpg") no-repeat top center;
    background-size: 100vw auto;
	top: 0;
	height: 111.7vw;
	  
	}
	
	header h2{
	position: absolute;
	top: 1.4vw;
	left: 22.9vw;
	}
	
	header h2 img{
		width: 54.4vw;
	}
	
	header .notice{
	top: 31.5vw;
	left: 2.2vw;
}
	header .notice img{
		width: 33.8vw
	}
	
	header .txt{
	top: 18.8vw;
	left: 4.4vw;
	}
	
	header .txt img{
	width: 91.5vw;
	}
	
	header .button{
	right: 1.2vw;
	top: 37.3vw;
	}

	header .button li{
		margin-bottom: 1.9vw;
	}
	
	header .button li:nth-of-type(1) img{
		width: 12vw
	}
	
	header .button li:nth-of-type(2) img{
		width: 25.4vw
	}
	
	header .button li:nth-of-type(3) img{
		width: 35.3vw
	}
	
	.chara-container {
	  top: 30.8vw;
	}

	.chara-loop {
	  width: 47.6vw;
	  height: 54.4vw;
	}
	
	@keyframes changeChara {
	  0%, 45% {
		background-image: url('../images/sp/zushi_pose1.png');
	  }
	  50%, 95% {
		background-image: url('../images/sp/zushi_pose2.png');
	  }
	  100% {
		background-image: url('../images/sp/zushi_pose1.png');
	  }
	}
	
	header .game-start{
	top: 82.6vw;
	}
	
	header .game-start img{
		width: 52.6vw;
		}
	
	header .zushicopy{
		top: 91.4vw;
		left: 1.7vw;
	}
	header .zushicopy img{
		width: 20.4vw
	}
	
	
	/* ==========================================================================
   about
========================================================================== */
	#about {
	 background: url("../images/sp/about-bg.jpg") no-repeat top center;
	background-size: 100vw auto;
	top: 0;
	 height: 78.1vw;
	}
	
	#about h2{
	top: -4.9vw;
	left: 12vw;
	}
	
	#about h2 img{
		width: 76vw
	}
	
	#about .video-wrap{
		background: url("../images/sp/about-video.png") no-repeat top center;
		background-size: 93vw auto;
		width: 93vw;
		height: 44.2vw;
		top: 25vw;
		left: 2vw;
	}

	#about .video-wrap iframe {
	  top: 1vw;
	  left: 1vw;
	  width: 90.6vw;
		height: 41.4vw;
	}
	
	/* ==========================================================================
	   hokutoshi
	========================================================================== */
	#hokutoshi {
	   background: url("../images/hokutoshi-bg.jpg") repeat top center;
		top: 0;
		 height: 149.7vw;
	}

	#hokutoshi h2{
		top: 11.6vw;
		left: 0;
	}
	
	#hokutoshi h2 img{
		width: 100vw;
	}
	
	#hokutoshi .alternate{
		top: 28.4vw;
		left: 4.1vw;
		width: 92vw;
		height: 17.8vw;
	}

	#hokutoshi .alternate .anime{
		padding-top: 0.8vw;
	}
	#hokutoshi .alternate img{
		width: 24.3vw;
		margin-right: 0.8vw;
	}

	#hokutoshi .alternate p{
		font-size: 4.2vw;
	}
	
	#hokutoshi .sp-chara{
		position: absolute;
		top: 113.5vw;
		left: 11.5vw;
	}
	
	#hokutoshi .sp-chara img{
		width: 41.7vw;
	}
	#hokutoshi .hokutoshi-intro{
		top: 52.3vw;
		left: 4.1vw;
		width: 92vw;
		height: 40vw;
		padding: 2vw;
	}

	#hokutoshi .hokutoshi-intro p{
		font-size: 2.4vw;
		padding-top: 0;
	}

	#hokutoshi .btn{
		top:94.8vw;
		left: 2.5vw;
		gap: 1vw;
	}
	#hokutoshi .btn img{
		width: 46.6vw;
	}
	
	#hokutoshi .balloon{
	top: 110.4vw;
	right: 1vw;
	}
	
	#hokutoshi .balloon img{
		width: 47.2vw;
	}
	
	/* ==========================================================================
   gift
	========================================================================== */
	#gift {
	   background: url("../images/sp/gift-bg.jpg") no-repeat top center;
		background-size: 100vw auto;
		top: 0;
		 height: 100.4vw;
	}

	#gift h2{
		top: 5.4vw;
	}
	
	#gift h2 img{
		width: 100vw;
	}
	
	#gift p.modal-img1{
		top: 20.6vw;
		left: 25.6vw;
	}
	
	#gift p.modal-img1 img,
	#gift p.modal-img2 img,
	#gift p.modal-img3 img{
		width: 47.9vw;
	}
	
	#gift h3.subhead{
		top: 52.7vw;
		left: 3vw;
	}
	
	#gift h3.subhead img{
		width: 43.4vw;
	}
	
	#gift p.modal-img2{
		top: 64.7vw;
		left: 0.5vw;
	}

	#gift h3.subhead2{
		top: 52.7vw;
		right: 0.5vw;
	}
	
	#gift h3.subhead2 img{
		width: 47.8vw;
	}
	
	#gift p.modal-img3{
		top: 64.7vw;
		right: 0.5vw;
	}
	
	/* ==========================================================================
	   zushi-hokky
	========================================================================== */
	#zushi-hokky {
	   background: url("../images/sp/zushi-hokki-bg.jpg") no-repeat top center;
	  background-size: 100vw auto;
		top: 0;
		 height: 70.5vw;
	}

	#zushi-hokky .waku{
		 background: url("../images/sp/zushi-hokki-waku.png") no-repeat top center;
		background-size: 94vw auto;
		width: 94vw;
		height: 58.2vw;
		top: 5.9vw;
		left: 2vw;
	}

	#zushi-hokky .waku h2{
		top: 3vw;
		left: 5.2vw;
	}
	
	#zushi-hokky .waku h2 img{
		width: 35.7vw;
	}
	
	#zushi-hokky .waku .zushi-hokky-txt{
		top: 20.1vw;
		left: 6.3vw;
		font-size: 2.4vw;
	}

	#zushi-hokky .waku .zushi-hokky-btn{
		top: 42.9vw;
		left: 3.4vw;
	}
	
	#zushi-hokky .waku .zushi-hokky-btn img{
		width: 46.1vw;
	}
	
	/* ==========================================================================
	   footer-btn
	========================================================================== */
	.footer-btn{
		 background: url("../images/sp/footer-bg.jpg") no-repeat top center;
		 background-size: 100vw auto;
		top: 0;
		 height: 23vw;
	}
	
	.footer-btn ul{
		padding-top: 4vw;
	  gap: 8vw;
	}
	
	.footer-btn ul li img{
		width: 39.1vw;
	}
	
	/* ==========================================================================
	   footer
	========================================================================== */

	footer{
		padding: 4vw 0;
	}

	footer .footer-logos{
	  gap: 4vw;
		padding-bottom: 4.5vw;
	}
	
	footer .footer-logos li:nth-of-type(1) img{
	   width: 20.6vw;
	}
	
	footer .footer-logos li:nth-of-type(2) img{
	   width: 23.5vw;
	}
	
	footer .footer-copyright{
		font-size: 1.5vw;
	}

}