@charset "UTF-8";

/* ======== あそびかた ======== */

#howtoplayPage {}

#howtoplayPage h2 {
	margin-top: 20px; 
	text-align: center;
}

#howtoplayPage h2 img {
	height: 37px;
	width: auto;
}

@media screen and (min-width: 768px) {
	#howtoplayPage {
		padding-top: 80px; 
	}
	#howtoplayPage h2 {
		margin-top: 0;
	}
	#howtoplayPage h2 img {
		height: 40px;
	}
}

#copyArea {
	margin-top: 20px;
}

#copyArea h3 {
	text-align: center;
}

#copyArea h3.sp {
	display: block;
}

#copyArea h3.pc {
	display: none;
}

#copyArea h3.sp img {
	width: 82%;
}

.ruleSp {
	display: block;
	position: relative;
}

.rulePc {
	display: none;
}

.ruleSp p,
.rulePc p {
	text-align: center;
	line-height: 0;
}

.ruleSp p.txt {
	margin-top: -6em;
	position: relative;
	z-index: 5;
}

.ruleSp p.chara01 {
	position: relative;
	z-index: 10;
}

.ruleSp p.chara01 img {
	width: 89%;
}

.ruleSp p.thumb {
	margin-top: -2em;
	position: relative;
	z-index: 10;
}

.ruleSp p.chara02 {
	margin-top: -2em;
	position: relative;
	z-index: 15;
}

.ruleSp p.chara02 img {
	width: 70%;
}

.rulePc .all {
	position: relative;
}

.rulePc .left {
	width: 708px;
}

.rulePc p.chara {
	position: absolute;
	right: 0;
	top: 0;
}

.rulePc p.chara img {
	width: 417px;
}

.rulePc p.thumb {
	margin-top: -60px;
	margin-left: 140px;
	width: 400px;
}

.ruleSp p.thumb img,
.rulePc p.thumb img {
	margin: -4px;
	border: 4px solid #eee; 
	border-radius: 10px;
}

.pointBox {
	margin-top: 40px;
}

.pointBox .movieBox p.sp {
	display: block;
	text-align: center;
	line-height: 0;
}

.pointBox .movieBox p.pc {
	display: none;
}

.pointBox .movieBox p.sp img {
	height: 30px;
	width: auto;
}

.pointBox .movieBox dt {
	display: block;
}

.pointBox .info dt {
	display: none;
}

.pointBox .info dd.stit {
	margin-top: 20px;
}

.pointBox .info dd.stit img.sp {
	display: block;
}

.pointBox .info dd.stit img.pc {
	display: none;
}

#point01 .info dd.stit img { height: 47px; width: auto;}
#point02 .info dd.stit img,
#point03 .info dd.stit img { height: 50px; width: auto;}


.pointBox .info dd.txt {
	margin-top: 1em;
	font-size: 1.4em;
}

@media screen and (min-width: 768px) {
	#copyArea {
		margin-top: 80px;
	}
	#copyArea h3.sp {
		display: none;
	}
	#copyArea h3.pc {
		display: block;
	}
	#copyArea h3.pc img {
		width: 780px;
	}
	.ruleSp {
		display: none;
	}
	.rulePc {
		display: block;
	}
	.pointBox {
		margin: 80px auto 0;
		width: 880px;
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	.pointBox.left {
		flex-direction: row;
	}
	.pointBox .movieBox {
		width: 400px;
	}
	.pointBox .movieBox p.sp {
		display: none;
	}
	.pointBox .movieBox p.pc {
		display: block;
		text-align: center;
		line-height: 0;
	}
	.pointBox .movieBox p.pc img {
		height: 48px;
		width: auto;
	}
	.pointBox .movieBox dt {
		display: none;
	}
	.pointBox .info {
		width: 430px;
	}
	.pointBox .info dt {
		display: block;
	}
	.pointBox .info dd.stit,
	.pointBox .info dd.txt {
		margin-left: 20px; 
	}
	.pointBox .info dd.stit img.sp {
		display: none;
	}
	.pointBox .info dd.stit img.pc {
		display: block;
	}
}

.video {
	width: 100%;
	padding-bottom: 56.25%;
	height: 0px;
	position: relative;
}

.video iframe {
	margin: -4px;
	border: 4px solid #eee;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#download {
	margin-top: 40px;
}

@media screen and (min-width: 768px) {
	#download {
		margin-top: 80px;
	}
}