@charset "UTF-8";

/* ======== トップページ ======== */

#loadBody:before {
	content:"";
  	display:block;
  	position:fixed;
  	top:0;
  	left:0;
  	z-index:-200;
  	width:100%;
  	height:100vh;
	background: url(../images/bg_sp.jpg) center top no-repeat;
	background-size:cover;
}

@media screen and (min-width: 768px) {
	#loadBody:before {
		background: url(../images/bg_pc.jpg) center top no-repeat;
		background-size:cover;
	}
}

#youtube-wrap {
	width: 100%;
    height: 100vh;
	position: fixed;
	top: 0;
    left: 0;
    background: cover;
    overflow: hidden;
    z-index: -100;
    animation-delay: 5s;
}

#youtube-wrap video{
	min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 768px) {
	#youtube-wrap {
		display: none;
	}
	#youtube-wrap video {
		display: none;
	}
}

main h1 {
	margin-top: 45px;
	display: block;
	visibility: visible;
}

#mainVisual {
	height: 70vh;
	position: relative;
}

#mainVisual h1 {
	padding-top: 20px;
	text-align: center;
	/*animation-delay: 1.6s;*/
}

#mainVisual h1 img {
	width: 100%;
	height: auto;
}

@media screen and (min-width: 768px) {
	#mainVisual {
		height: 80vh
	}
	#mainVisual h1 {
		margin-left: -40px; 
		padding-top: 30px; 
		text-align: left;
	}
	#mainVisual h1 img {
		width: 624px;
		height: auto;
	}
}

#moviePC {
	display: none;
}

@media screen and (min-width: 768px) {
	#moviePC {
		display: block;
		visibility: visible;
		position: absolute;
		right: 15px;
		bottom: 40px;
		/*animation-delay: 2s;*/
	}
	#moviePC p img {
		width: 345px;
		height: auto;
	}
}

#movieSP {
	margin-top: 30px;
}

#movieSP p {
	text-align: center;
	line-height: 0;
}

@media screen and (min-width: 768px) {
	#movieSP {
		display: none;
	}	
}

#btnArea {
	margin-top: 30px;
}

#btnArea .btnAll li {
	margin-top: 10px;
}

#btnArea .btnAll ul.bt {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
}

#btnArea .btnAll ul.bt li {
	margin: 0 10px;
}

#btnArea .btnAll ul.bt li img {
	opacity: 0.5;
}

@media screen and (min-width: 768px) {
	#btnArea {
		margin-top: 80px;
	}
	#btnArea .btnAll {
		display: flex;
		justify-content: space-between;
	}
	#btnArea .btnAll p {
		width: 46%;
	}
	#btnArea .btnAll .right {
		width: 46%;
	}
	#btnArea .btnAll li:first-child {
		margin-top: 0;
	}
	#btnArea .btnAll ul.bt {
		margin-top: 30px;
	}
}

@media screen and (min-width: 768px) {
	#btnArea .btnAll p img:hover {
		animation-name: scaleBtn;
    	animation-duration: 0.1s;
    	animation-fill-mode: forwards;
	}
	@keyframes scaleBtn {
		0% { transform: scale(1.0, 1.0); }
    	100% { transform: scale(1.1, 1.1) rotate(-5deg); }
	}
	#btnArea .btnAll li img:hover {
		animation-name: scaleBtn2;
    	animation-duration: 0.1s;
    	animation-fill-mode: forwards;
	}
	@keyframes scaleBtn2 {
		0% { transform: scale(1.0, 1.0); }
    	100% { transform: scale(1.1, 1.1); }
	}
}

#twArea {
	margin-top: 20px;
}

#twArea .twBox {
	margin: 0 auto;
	width: 86%;
}

#twArea .twBox .inner {
	padding: 10px;
	border-left: 5px solid rgba(188,0,0,0.8);
	border-right: 5px solid rgba(188,0,0,0.8);
	border-bottom: 5px solid rgba(188,0,0,0.8);
	border-radius: 0 0 20px 20px;
	background: rgba(255,255,255,0.8);
}

@media screen and (min-width: 768px) {
	#twArea {
		margin-top: 40px;
	}
	#twArea .twBox {
		width: 780px;
	}
}

#twArea h3 {
	line-height: 0;
}

#twArea h3.pc {
	display: none;
}

@media screen and (min-width: 768px) {
	#twArea h3.pc {
		display: block;
	}
	#twArea h3.sp {
		display: none;
	}
}

#twArea .share p {
	margin-top: 20px;
	text-align: center;
}

#twArea .share p img {
	height: 40px;
	width: auto;
}

#twArea .share ul {
	display: none;
}

#twArea .share li {
	margin: 0 10px;
}

@media screen and (min-width: 768px) {
	#twArea .share {
		margin-top: 20px;
		display: block;
		display: flex;
		justify-content: center;
	}
	#twArea .share ul {
		display: flex;
		justify-content: center;
	}
	#twArea .share p {
		margin: 0 10px;
	}
}

#contSP {
	margin-top: 40px;
	display: block;
}

#contPC {
	display: none;
}

@media screen and (min-width: 768px) {
	#contSP {
		display: none;
	}
	#contPC {
		margin: 20px auto 0;
		width: 980px;
		display: block;
	}
}

#contSP .contSPBox {
	padding: 60px 0 30px;
	background: url(../images/bg_cont_sp.png) center top no-repeat;
	background-size: auto 96%;
}

#contSP .contSPBox h3 {
	text-align: center;
}

#contSP .contSPBox h3 img {
	height: 62px;
	width: auto;
}

#contSP .contSPBox p.thumb01 {
	margin: 20px 20px 0;
	text-align: center;
}

#contSP .contSPBox p.thumb01 img {
	margin: -4px;
	border: #eee solid 4px;
	border-radius: 10px;
}

#contSP .contSPBox p.thumb02 {
	text-align: center;
}

#contHowtoplaySP p.thumb02 { margin-top: -40px;}
#contStorySP p.thumb02 { margin-top: -46px;}
#contCharaSP p.thumb02 { margin-top: -10px;}
#contMatchSP p.thumb02 { margin-top: -16px;}

#contHowtoplaySP p.thumb02 img { width: 90%;}
#contStorySP p.thumb02 img { width: 84%;}
#contCharaSP p.thumb02 img { width: 82%;}
#contMatchSP p.thumb02 img { width: 84%;}

#contSP .contSPBox p.txt {
	margin-top: 0.2em;
	font-size: 1.4em;
	text-align: center;
}

#contSP .contSPBox p.btn {
	margin: 10px 24px 0;
}

#contPC .contPCBox {
	padding-top: 110px;
	width: 600px;
	min-height: 404px;
	background: url(../images/bg_cont_pc.png) center top no-repeat;
	background-size: 100% auto;
}

#contPC .contPCBox h3 {
	margin: 0 40px;
}

#contPC .contPCBox h3 img {
	height: 74px;
	width: auto;
}

#contPC .contPCBox .contAll {
	margin-left: 40px;
	display: flex;
	justify-content: space-between;	
}

#contPC .contPCBox p.thumb01 {
	margin-top: 20px;
	width: 320px;	
}

#contPC .contPCBox p.thumb01 img {
	margin: -4px;
	border: #eee solid 4px;
	border-radius: 10px;
}

#contPC .contPCBox p.thumb02 {
	text-align: right;
}

#contHowtoplayPC p.thumb02 { margin-top: 20px; margin-left: -32px;}
#contStoryPC p.thumb02 { margin-top: 20px;}
#contCharaPC p.thumb02 { margin-top: 40px; margin-right: 40px;}
#contMatchPC p.thumb02 { margin-top: 20px; margin-left: -80px;}

#contHowtoplayPC p.thumb02 img { width: 326px;}
#contStoryPC p.thumb02 img { width: 225px;}
#contCharaPC p.thumb02 img { width: 178px;}
#contMatchPC p.thumb02 img { width: 278px;}

#contPC .contPCBox p.txt {
	margin-top: 0.2em;
	font-size: 1.4em;
	text-align: center;
}

#contPC .contPCBox p.btn {
	margin-top: 10px;
	width: 325px;
}

#contPC .contPCBox p.btn img:hover {
	animation-name: scaleBtn;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    opacity: 0.7;
}

@keyframes scaleBtn {
	0% { transform: scale(1.0, 1.0); }
    100% { transform: scale(1.1, 1.1); }
}

#contStoryPC { margin-top: -80px; margin-left: 380px;}
#contMatchPC { margin-top: -120px; margin-left: 380px;}

#twobtnArea {
	margin-top: 40px;
}

#twobtnArea ul {
	display: flex;
	justify-content: space-between;
}

#twobtnArea li {
	margin: 0 5px; 
}

@media screen and (min-width: 768px) {
	#twobtnArea ul {
		justify-content: center;
	}
	#twobtnArea li {
		margin: 0 20px; 
	}
	#twobtnArea li img {
		height: 50px;
		width: auto;
	}
	#twobtnArea li img:hover {
		animation-name: scaletwoBtn;
    	animation-duration: 0.1s;
    	animation-fill-mode: forwards;
    	opacity: 0.7;
	}
	@keyframes scaletwoBtn {
		0% { transform: scale(1.0, 1.0); }
    	100% { transform: scale(1.1, 1.1); }
	}
}