@charset "UTF-8";

/* ========================================
	common
======================================== */
body{
	overflow-x: hidden;
}
body.is-hidden {
	overflow: hidden;
}
.l-wrapper {
	position: relative;
	width: 100%;
	min-width: 960px;
	overflow: hidden;
	background: url(../images/common/bg.png);
	background-size: 92px 90px;
}
.l-contents {
  min-width: 960px;
	width: 100%;
	padding-bottom: 0;
}
.l-contents img {
	width: 100%;
	height: auto;
}

/* ========================================
	contents
======================================== */
.l-logo-3ds {
	position: absolute;
	width: 10.9375%; /* 210 / 1920 * 100 */
	min-width: 105px;
	max-width: 210px;
	top: 10px;
	right: 10px;
	z-index: 8000;
}
.c-yt-atuoplay_wrapper {
	position: relative;
}
.c-yt-atuoplay_wrapper:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ========================================
	groval navi
======================================== */
.l-gnv{
	position: fixed;
	width: 51.45833%; /* 988 / 1920 * 100 */
	min-width: 494px;
	max-width: 988px;
	top: 55px;
	left: 0;
	background: url(../images/common/gnv_bg.png) no-repeat top left;
	background-size: 100% auto;
	box-sizing: border-box;
	z-index: 1000;
}
.l-gnv.fixed{
	top: 10px;
}
.p-petit_tl{
	position: relative;
	width: 21.65991%; /* 214 / 988 * 100 */
	float: left;
}
.p-petit_tl .l-gnv_logo{
	position: relative;
	display: block;
	z-index: 10;
}
.l-gnv_wario{
	position: absolute;
	-webkit-transform: translateX(-110%) rotate(-90deg);
	transform: translateX(-110%) rotate(-90deg);
	transition: transform 300ms;
	bottom: -210%;
	width: 107%; /* 229 / 214 * 100 */
	pointer-events: none;
	z-index: 1;
}
.p-petit_tl:hover .l-gnv_wario{
	-webkit-transform: translateX(0%) rotate(0deg);
	transform: translateX(0%) rotate(0deg);
}
.l-gnv_nv{
	width: 75.30364%; /* 744 / 988 * 100 */
	float: left;
}
.l-gnv_nv li {
	float: left;
	background: url(../images/common/gnv_line.png) no-repeat top left;
	background-size: auto 100%;
}
.l-gnv_nv .l-gnv_nv-petitgame {
	width: 35.08064%; /* 261 / 744 * 100 */
}
.l-gnv_nv .l-gnv_nv-mode {
	position: relative;
	width: 35.75268%; /* 266 / 744 * 100 */
}
.l-gnv_nv .l-gnv_nv-movie {
	position: relative;
	width: 29.16666%; /* 217 / 744 * 100 */
}
.l-gnv_nv li a:hover {
	transition: 150ms;
	opacity: 0.7;
}
.ico-new {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-41%,-31.81818%);
	transform: translate(-41%,-31.81818%);
}
.l-gnv_nv-mode .ico-new {
	width: 37.59398%; /* 100 / 266 * 100 */
}
.l-gnv_nv-movie .ico-new {
	width: 46.08294%; /* 100 / 217 * 100 */
}
.l-gnv_nv-movie .ico-newmk {
    width: 21%;
    position: absolute;
    top: -8%;
    right: 71%;
}


/* ========================================
	footer
======================================== */
.l-footer {
	width: 100%;
	height: 40px;
	background-color: #000;
}
.l-footer-inner {
	width: 100%;
	min-width: 960px;
	max-width: 2000px;
	margin: 0 auto;
}
.l-footer_official {
	margin-left: 10px;
	padding-top: 14px;
	letter-spacing: -1em;
}
.l-footer_official li {
	display: inline-block;
	margin-right: 30px;
}
.l-footer_official li .arw {
	display: block;
	float: left;
	width: 25px;
	height: 13px;
	margin-right: 5px;
	background: url(../images/common/footer_arrow_off.png) 0 0 no-repeat;
	-webkit-transition: all 0.1s ease 0s;
	transition: all 0.1s ease 0s;
}
.l-footer_official li a:hover .arw {
	background: url(../images/common/footer_arrow_on.png) 0 0 no-repeat;
	-webkit-transform: translateX(-3px);
	transform: translateX(-3px);
}
.l-pagetop{
	position: absolute;
	width: 7.5%; /* 144 / 1920 * 100 */
	right: 3%;
	bottom: 0;
	-webkit-transform: translateY(-25.21739%);
	transform: translateY(-25.21739%);
	z-index: 25;
}
/* ========================================
	modal
======================================== */
[data-modallink],
[data-modalchange] {
	cursor: pointer;
}
[data-modalbody] {
	visibility: hidden;
	opacity: 0;
	transition: 200ms;
}
[data-modalbody].is-show {
	visibility: visible;
	opacity: 1;
}
.l-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9500;
	width: 100%;
	height: 100%;
}
.l-modal_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.l-modal_contents {
	position: relative;
	z-index: 20;
	width: 100%;
	height: 100%;
	min-width: 960px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
.l-modal_movie {
	position: relative;
	width: 648px;
	margin: 0 auto;
}

.l-modal_close {
  position: absolute;
  top: -100px;
  right: 0px;
	cursor: pointer;
}

/* ========================================
	animation
======================================== */
.js-arrowpop {
	animation: arrowpop 1300ms infinite;
}

@keyframes arrowpop {
	0% {transform: scale(1) translateY(0px);}
	18% {transform: scale(1.04) translateY(-2px);}
	36% {transform: scale(1) translateY(0px);}
	54% {transform: scale(1.04) translateY(-2px);}
	72% {transform: scale(1) translateY(0px);}
	100% {transform: scale(1) translateY(0px);}
}