a, *[onclick] { cursor:pointer; }



#mv-contents {height:100%; position:relative; }
@media screen and (min-width: 641px){#mv-contents { min-height:768px; }}
@media screen and (max-width: 640px){#mv-contents { min-height:inherit; }}
@media screen and (max-height:479px){#mv-contents { min-height:400px !important}}

#mv-main { position:relative; width:100%; height:100%; overflow:hidden; }
.mv-link-banner { border:2px solid #fff; z-index:10; background:#fff; max-width:500px; margin:5px auto; }

/* 背景画像 */
	.mv-bg { width:100%; height:100%;top:0; position:fixed; z-index:-1; background-position:0 18%;}
	@media screen and (min-width: 641px)	{ .mv-bg {background:url(img/mv-img_pc.jpg) top/cover no-repeat; }}
	@media screen and (max-width: 640px)	{ .mv-bg {background:url(img/mv-img_sp.jpg) 25% top/cover no-repeat!important;}}
	@media screen and (max-height: 479px)	{ .mv-bg {background:url(img/mv-img_sp.jpg) top/cover no-repeat!important;}}

/* ロゴ、バナー、サンプル動画 */
	.mv-logo { width:40%; height:100%; position:absolute; z-index:5; left:1%; top:6% ;}
	.mv-logo		{ top:6%; left:1%; right:auto;}
	.mv-logo.right	{ top:6%; left:auto; right:1%;}

	.mv-logo-img01,.mv-logo-img02,.mv-logo-img03,.mv-logo-img04,.mv-logo-img05 { width:100%; height:100%; position:absolute;}
	.mv-logo-img01 { background-size:contain; z-index:6; background:url(img/logo/logo_01.png) no-repeat; }
	.mv-logo-img02 { background-size:contain; z-index:5; background:url(img/logo/logo_02.png) no-repeat; }
	.mv-logo-img03 { background-size:contain; z-index:6; background:url(img/logo/logo_release01.png) no-repeat; }
	.mv-logo-img04 { background-size:contain; z-index:6; background:url(img/logo/logo_release02.png) no-repeat; }
	.mv-logo-img05 { background-size:contain; z-index:6; background:url(img/logo/logo_release03a.png) no-repeat; }

	/* 画面単位のサイズ設定 */
		@media screen and ( min-width:1367px ){ .mv-logo { max-width:640px; max-height:520px;}}
		@media screen and ( max-width:1366px ){ .mv-logo { max-width:500px; max-height:440px;}}
		@media screen and ( max-width:1024px ){ .mv-logo { max-width:450px; max-height:395px;}}
		@media screen and ( max-width: 640px ){ .mv-logo { max-width:364px; max-height:320px; bottom:10%} }
		@media screen and ( max-width: 480px ){ .mv-logo { max-width:300px; max-height:264px; bottom:5%;} }
		@media screen and ( max-height:479px ){ .mv-logo { max-width:186px; max-height:210px; bottom:auto;}}

	@media screen and ( max-width:1024px ){
		.mv-logo {
			-ms-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0);
			left:50%; bottom:5%; right:inherit; top:inherit;
			width:100%;
			text-align:center;}
	}
	@media screen and ( max-height: 479px ){
		.mv-logo {
			top:50%!important; left:inherit!important; right:10px!important;
			transform:translate(0,-50%)!important;
			-webkit-transform:translate(0,-50%)!important; transform:translate(0,-50%)!important;}
	}

/* 注意 */
.mv-tyui { position:absolute; bottom:0; width:100%; z-index:6;}
.mv-tyui a { text-align:center; background:#174f69; color:#fff; display:block; width:100%; padding:10px; border:2px solid #fff; position:relative; }
.mv-tyui a:hover { background:#ef5088}
.mv-tyui a:after {
	position:absolute; top:0; bottom:0; right:10px; margin:auto; width:8px; height:8px;
	border-top:2px solid #fff; border-right:2px solid #fff; -webkit-transform:rotate(45deg); transform:rotate(45deg); content: "";}

/* サンプル動画 */
	@media screen and ( min-width:1025px ){ #mv-demo { display:none; } .mv-logo iframe { display:inherit; }}
	@media screen and ( max-width:1024px ){ #mv-demo { display:inherit; } .mv-logo iframe { display:none; }}

	#mv-demo{ bottom:3%; left:2%; position:absolute; max-width:420px; width:30%; z-index:10}
	@media screen and ( max-width:1024px ){
		#mv-demo { bottom:auto; left:auto; position:static; width:100%; max-width:inherit; background:rgba(255,255,255,.95); padding:20px 0}
	}
	@media screen and ( max-height:479px ){
		#mv-demo { bottom:auto;right:auto; position:relative; width:100%; max-width:inherit; background:rgba(255,255,255,.75); padding:20px 0}
	}

	.demo {
		position:relative; width:100%; padding:56% 0 0 0;
		max-width:420px; margin:0 auto;
		box-shadow:0px 0px 10px 2px rgba(238,80,162,.25);
		border: 3px solid #fff; background:#fff;}
	.demo iframe{ position:absolute; top:0; left:0; width:100%; height:100%;}
	@media screen and ( max-height:479px ){
		.demo { padding:55% 0 0!important; margin: 0 auto; box-shadow:none; width:94%;}
	}


.logo-system {
	max-height: 100%;
	.a1 {
		display:flex; flex-direction:column; gap:0; flex-wrap:nowrap;
		img {
			max-width:100%;
			max-height: 100%;
		}
	}
}

@media screen and ( min-width:1025px ){
		section.sp { display:none }

		.logo-system {
				padding: 40px;
				display:-moz-grid; display: grid;
				grid-template-rows: 1fr auto;
				justify-items: right;
				align-items: center;
				> .a1 {
					max-width:40%;
				}
			}
		.logo-system > .a1 > img {
				display:block;
				margin-left:auto;
				width: 8;
			}
		div.iframe > * {
				width:384px;
				height:216px;
			}

		.logo-system > *:nth-of-type(1) { padding:3rem 0; }
		.a2 {
			display:flex;
			justify-content: flex-end;
			align-items: end;
		}
		.a2 > *{
			margin-left: 1rem;
		}

		.a2 img.strip { max-height:108px; }
		.a2 img.round { max-height:300px; }
		.banners { display:flex; flex-direction:column; }
	}

@media screen and ( max-width:1024px ){
	.a2 { display:none;}

	.logo-system { display:flex; align-items: flex-end; justify-content: center;}
	.logo-system .a1 {
		padding:4rem;
		max-width: 100%;
		text-align: center;
	}
	.logo-system .a1 > img {
		max-width:100%;
		height:auto;
	}
	img.strip { width:100%; }

		div.iframe {
			position: relative;
			width: 100%;
			height: 315px;
			max-width:560px;
			max-height:315px;
		}
		div.iframe > * {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			max-width:560px;
			max-height:315px;
		}
		section.mv {
			padding:20px;
			height: 355px; }
		section.campaign {
			text-align: center;
		}

		div.iframe { margin:0 auto;}
	}

.baikaku-dash::after {
	content: "──";
	letter-spacing: -1px;
}

.test::before { content: "”";}
.test::after { content: "”";}

#track {
	div.link-btn {
		a[href=""] { display:none; }
	}
}

#freegift {
	.grid { display:-moz-grid; display:grid; }
}
@media screen and (max-width:640px) {
	#freegift {
		.grid.shop { grid-template-rows: repeat(3, 1fr); gap:10px}
		.grid.version { grid-template-columns: repeat(2, 1fr); gap:10px}
		.grid img { width:128px; }
		span.nw { white-space:nowrap; }

		ul.grid > li {
			display:grid;
			grid-template-rows: auto 1fr;
			gap:10px;
			height:100%;
		}
		ul.version > li {
			display:grid;
			gap:10px;
			grid-template-rows: 1fr auto ;
			height:100%;
		}
	}
}
@media screen and (min-width:641px) {
	#freegift {
		.grid.shop { grid-template-columns: 2fr repeat(2, 1fr); gap:10px}
		.grid.version { grid-template-columns: repeat(2, 1fr); gap:10px}
		.grid img { width:128px; }
		span.nw { white-space:nowrap; }

		ul.grid > li {
			display:grid;
			grid-template-rows: auto 1fr;
			gap:10px;
			height:100%;
		}
		ul.version > li {
			display:grid;
			gap:10px;
			grid-template-rows: 1fr auto ;
			height:100%;
		}
	}
}

#freegift {
	p.title {
		background-color: #174f69;
		color:white;
	}

	a.button {
		display: inline-block;
		border-radius: 3px;
		background-color: #ef5088;
		border-bottom: 3px solid #b52a54;
		color:white;
		padding:0.5rem 1rem 0.6rem;
	}
	a.button::before {
		content: "";
		background-color: #ffffff;
		display: inline-block;
		height: 18px;
		width: 18px;
		margin-right:4px;
		-webkit-mask: url("/icon/store_circle.svg");
		mask: url("/icon/store_circle.svg");
		-webkit-mask-size: cover;
		mask-size: cover;
		vertical-align: middle;
	}
	a.button:hover {
		background-color: #ffa200;
		border-bottom: 3px solid #e17502;
	}
	span.small {
		font-size: 0.8em;
	}
}



#mv-versions {
	min-height:100%;
}

#mv-main { height:100vh; }
.logo-system {
	height:100%;
}