@charset "UTF-8";

body#top {
	background-color: #042a26;
}

/* ========================================
	contents
======================================== */
.l-top-logo-switch {
	position: absolute;
	top: 7px;
	right: 33.2%;
	width: 13.33333%;
	padding-right: 7px;
	margin-right: 14px;
	border-right: #000 1px solid;
	z-index: 8000;
}
.l-top-logo-3ds {
	position: absolute;
	top: 15px;
	right: 7px;
	width: 33.2%;
	z-index: 8000;
}

/* -------------------
	visual
------------------- */
.p-top-visual {
  position: relative;
  width: 100%;
	height: 100%;
  overflow: hidden;
  background: url(../images/top/visual_bg.jpg) center top no-repeat;
  background-size: 100%;
}
/*.p-top-visual:before {
  content: "";
  display: block;
  padding-top: 58.07291%;  1268 / 750 * 100
}*/
/*.p-top-visual-inner {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/
.p-top-visual_logo {
	position: relative;
	z-index: 10;
}
.p-top-visual_logo-in {
	opacity: 0;
}
.is-show-c .p-top-visual_logo-in {
	animation: zoomin 180ms linear 1;
	animation-fill-mode: forwards;
}
.p-top-visual_release {
	position: absolute;
	left: 0;
	top: 0;
  width: 32%; /* 240 / 750 * 100*/
}
.p-top-visual_chara {
	position: absolute;
  top: 21.5%;
  left: 0;
  width: 100%; /* 1016 / 750 * 100*/
	opacity: 0;
}
.is-show-a .p-top-visual_chara {
	opacity: 1;
	transition: opacity 300ms;
}
.p-top-visual_lane {
	position: relative;
  width: 100%;
	opacity: 0;
}
.is-show-a .p-top-visual_lane {
	opacity: 1;
	transition: opacity 300ms;
}
.p-top-visual_img02 {
	position: absolute;
  top: 45.58359%; /* 578 / 1268 * 100*/
  left: 0;
  width: 100%;
}
.p-top-visual_img02-in {
	width: 0;
	overflow: hidden;
}
.is-show-a .p-top-visual_img02-in {
	width: 100%;
	transition: width 400ms 700ms;
}
.p-top-visual_img03 {
	position: absolute;
  top: 45.58359%; /* 578 / 1268 * 100*/
  left: 0;
  width: 100%;
	opacity: 0;
}
.is-show-a .p-top-visual_img03 {
	opacity: 1;
	transition: opacity 300ms;
}
.p-top-visual_catch {
	position: absolute;
  top: 49.52681%; /* 628 / 1268 * 100*/
  left: 0;
  width: 74.26666%; /* 557 / 750 * 100*/
  /*width: 72.5333%;  544 / 750 * 100*/
	-webkit-transform: translateX(-12.13235%);
	transform: translateX(-12.13235%); /* 66 / 544 * 100*/
}
.p-top-visual_catch-in {
	opacity: 0;
}
.is-show-b .p-top-visual_catch-in {
	animation: catch 170ms linear 1;
	animation-fill-mode: forwards;
}
.p-top-visual_catch-img {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.is-type01 .p-top-visual_catch-img-a img {
	opacity: 1;
	transform: rotateY(0deg);
	transition: opacity 100ms 200ms, transform 400ms 200ms;
}
.is-type02 .p-top-visual_catch-img-a img {
	opacity: 0;
	transform:rotateY(90deg);
	transition: opacity 100ms 200ms, transform 400ms;
}
.is-type01 .p-top-visual_catch-img-b img {
	opacity: 0;
	transform: rotateY(90deg);
	transition: opacity 100ms 200ms, transform 300ms;
}
.is-type02 .p-top-visual_catch-img-b img {
	opacity: 1;
	transform:rotateY(0deg);
	transition: opacity 100ms 200ms, transform 300ms 200ms;
}

/* -------------------
	gnav
------------------- */
.p-top-gnav {
	position: relative;
  width: 100%;
	height: 100%;
	margin-top: -10%;
  background: url(../images/top/gnav_bg.png) center bottom no-repeat;
  background-size: 100% auto;
  z-index: 10;
}
.p-top-gnav-inner {
	position: relative;
  width: 66.6666%; /* 1280 / 750 * 100*/
	min-width: 960px;
	height: 100%;
	margin: 0 auto;
}

.p-top-gnav_bible {
	position: relative;
	width: 100%;
	transform: translateY(-34.5098%); /* 88 / 255 * 100*/
}
.p-top-gnav_bible_copy-s {
	position: absolute;
  top: 7.05882%; /* 18 / 255 * 100*/
  left: 14.4%; /* 108 / 750 * 100*/
	width: 55.2%; /* 414 / 750 * 100*/
	animation: flash 3000ms linear infinite;
	pointer-events: none;
}
.p-top-gnav_bible_copy-l {
	position: absolute;
  top: 4.31373%; /* 11 / 255 * 100*/
  left: 10.93333%; /* 82 / 750 * 100*/
	width: 62.1333%; /* 466 / 750 * 100*/
	opacity: 0;
	animation: flash2 3000ms linear infinite;
	pointer-events: none;
}
@keyframes flash {
	0% {	transform: scale(1);	}
	12% {	transform: scale(1.03);	}
	18% {	transform: scale(1.03);	}
	30% {	transform: scale(1);	}
	42% {	transform: scale(1.03);	}
	48% {	transform: scale(1.03);	}
	60% {	transform: scale(1);	}
	100% {	transform: scale(1);	}
}
@keyframes flash2 {
	0% {	transform: scale(0.9);	opacity: 0;	}
	12% {	transform: scale(0.92);	opacity: 1;	}
	18% {	transform: scale(0.92);	opacity: 1;	}
	30% {	transform: scale(0.9);	opacity: 0;	}
	42% {	transform: scale(0.92);	opacity: 1;	}
	48% {	transform: scale(0.92);	opacity: 1;	}
	60% {	transform: scale(0.9);	opacity: 0;	}
	100% {	transform: scale(0.9);	opacity: 0;	}
}
.p-top-gnav-list {
	margin: -12% 5.2% 4% 5.2%;
	text-align: center;
	font-size: 0;
}
.p-top-gnav-list li {
	display: inline-block;
	width: 50%;
	padding: 0 1.33928%;
	box-sizing: border-box;
}

/* -------------------
	info
------------------- */
.p-top-info {
  width: 100%;
	height: 100%;
	padding-bottom: 14%;
  background-image: url(../images/top/main_bg_circle.png), url(../images/top/main_bg.png);
  background-repeat: no-repeat, repeat-y;
  background-position: bottom, top;
  background-size: 100% auto;
}

/* movie */
.p-top-movie {
	width: 87.2%;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
}
.p-top-movie_list {
	width: 100%;
	font-size: 0;
}
.p-top-movie_item {
	position: relative;
	display: inline-block;
	margin-top: 10px;
	width: 45.87155%;
}
.p-top-movie_item:nth-child(2n) {
	margin-left: 8%;
}
.p-top-movie_thumb {
	margin-bottom: 10px;
}
.p-top-movie_item .icon-new {
	position: absolute;
	top: 0;
	left: 0;
  width: 56.66666%; /* 170/300*100 */
	height: 73px;
  background: url(../images/top/icon_new.png) left bottom no-repeat;
	background-size: 100% auto;
	-webkit-transform: translate(-27.64705%,-50%);
	transform: translate(-27.64705%,-50%);
	pointer-events: none;
}

/* bnr */
.p-top_kentei {
	position: relative;
	width: 87.2%;
	margin: 0 auto;
}
.p-top-manga_bnr {
	position: relative;
	width: 87.2%;
	margin: 15px auto;
}
.p-top_campaign {
	position: relative;
	width: 87.2%;
	margin: 15px auto;
}
.p-top_mu-mo {
	position: relative;
	width: 87.2%;
	margin: 0 auto;
}
.p-top_hardware {
	width: 93.73333%;
	margin: 0 auto;
}
.is-new {
	position: absolute;
	top: 0;
	left: 0;
	height: 73px;
  width: 26.6055%; /* 170/654*100 */
  background: url(../images/top/icon_new_bnr.png) left top no-repeat;
	background-size: 100% auto;
	-webkit-transform: translate(-28.23529%,-23.97260%);
	transform: translate(-28.23529%,-23.97260%);
}

.p-top-campaign-note{
	width: 87.2%;
	margin: 15px auto;
}
.p-top-campaign-note__body{
	background: #fff;
	border: #000000 4px solid;
	padding: 10px 10px 10px 13px;
	display: inline-block;
}
.p-top-campaign-note__body p{
	font-size: 11px;
	line-height: 1.6;
	font-weight: bold;
	position: relative;
	padding-left: 1.3em;
	text-indent: -0.5em;
}
.p-top-campaign-note__body p::before{
	content: "※";
	display: block;
	position: absolute;
	left: 0.5em;
	top: 0;
}
@media (max-width: 374px){
	.p-top-campaign-note__body p{
		font-size: 10px;
	}
}

/* spec */
.p-top-spec {
	position: relative;
  width: 100%;
	height: 100%;
  background: url(../images/top/spec_bg.png) center top no-repeat;
  background-size: 100% auto;
	margin-top: -3%;
}
.p-top-spec:before {
  content: "";
  display: block;
  padding-top: 113.06666%; /* 848 / 750 * 100*/
}
.p-top-spec_info {
  position: absolute;
  top: 10.61%; /* 90 / 848 * 100*/
	left: 7.733333%; /* 58 / 750 * 100*/
  width: 85.86666%; /* 644/750*100 */
}
.p-top-spec_player {
  position: absolute;
  top: 31.60377%; /* 268 / 848 * 100*/
	left: 7.733333%; /* 58 / 750 * 100*/
  width: 39.6%; /* 297/750*100 */
}
.p-top-spec_cero {
  position: absolute;
  top: 57.969811%;
	right: 6.53333%; /* 49 / 750 * 100*/
  width: 8.66666%; /* 65/750*100 */
}
.p-top-spec_download {
  position: absolute;
  top: 27.12%; /* 230 / 848 * 100*/
	left: 7.733333%; /* 58 / 750 * 100*/
  width: 84.66666%; /* 635/750*100 */
}
.p-top-spec-detail {
  position: absolute;
  top: 57.52358%;
	left: 8.66666%; /* 65/750*100 */
  width: 64.8%; /* 486/750*100 */
	font-size: 0;
}
.p-top-spec-detail dt,
.p-top-spec-detail dd {
	display: inline-block;
}
.p-top-spec-detail_ttl {
	width: 35.18518%; /* 171/486*100*/
}
.p-top-spec-detail_switch {
	width: 40.32921%; /* 196/486*100*/
}
.p-top-spec-detail_3ds {
	width: 24.48559%; /* 119/486*100*/
}
.p-top-spec_support {
  position: absolute;
  top: 63.73207%;
	left: 8.66666%; /* 65/750*100 */
  width: 25.2%; /* 189/750*100 */
}
.p-top-spec_online {
  position: absolute;
  top: 70.62264%;
	left: 50%;
  width: 87.2%; /* 654/750*100 */
	padding-top: 3.53773%; /* 30 / 848 * 100*/
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	border-top: #000 1px solid;
}
/* .p-top-spec_online_bnr {
  width: 48.45024%; /* 297/613*100
	margin: 0 auto 3.53773% auto;
} */
.p-top-spec_online_bnr {
    width: 48.45024%;
    background: #e60012;
		margin: 0 auto 3.53773% auto;
}
.p-top-spec_online_txt {
  width: 93.88379%; /* 614/654*100 */
	margin: 0 auto;
}

.p-top-spec_online_txt_link_area{
	display: block;
	position: absolute;
	top: 63%;
	left: 49%;
	width: 44%;
	height: 11%;
	z-index: 1;
}

/* ========================================
	l-top-footer
======================================== */
.l-top-footer {
	text-align: center;
	width: 100%;
	padding: 0 3.33333%;
  background: url(../images/top/footer_bg.png) center top no-repeat;
	background-size: 100% auto;
	box-sizing: border-box;
}
.l-top-footer_official {
  font-size: 0;
}
.l-top-footer_official li {
  display: inline-block;
}
.l-top-footer_official li:first-child,
.l-top-footer_official li:last-child{
  display: block;
	margin: 0 auto;
}
.l-top-footer-home {
	width: 34.28571%; /* 240 / 700 * 100*/
	margin: 0 auto;
}
.l-top-footer-switch {
	width: 42.85714%; /* 300 / 700 * 100*/
}
.l-top-footer-switchsoft {
	width: 57.14285%; /* 400 / 700 * 100*/
}
.l-top-footer-3ds {
	width: 54.42857%; /* 381 / 700 * 100*/
	margin: 0 auto;
}
.l-top_copyright {
  display: block;
	width: 83.142857%; /* 582 / 700 * 100*/
	margin: 0 auto;
}
.l-top-sns {
	padding-top: 9%;
	padding-bottom: 2.4%;
  font-size: 0;
}
.l-top-sns_twitter {
  display: inline-block;
	width: 23.571428%; /* 165 / 700 * 100*/
	padding: 0 5%;
}
.l-top-sns_facebook {
  display: inline-block;
	width: 19.285714%; /* 135 / 700 * 100*/
	padding: 0 5%;
}

/* ========================================
	l-modal
======================================== */
.l-modal {
	z-index: 10110;
}

/* btn */
.l-modal_close {
	cursor: pointer;
	width: 40%; /* 300/750*100 */
	margin: 0 auto;
	margin-top: 20px;
	z-index: 30;
}

/* manga_modal */
.p-top-manga_modal-body {
	position: relative;
}
.p-top-manga_modal-wrap {
	position: relative;
	width: 100%;
	padding: 5% 0 13% 0;
}
.p-top-manga_title img {
	width: 48.26666%; /* 362/750*100 */
	margin: 0 auto;
}
.p-top-manga_img img {
	width: 68.6666%; /* 515/750*100 */
	margin: 0 auto;
	border: #000 5px solid;
}


/* ========================================
	slick
======================================== */
/* Slider */
.slider {
  display: none;
}
.slider.slick-initialized{
  display: block;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    min-height: 1px;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-arrow.slick-hidden {
    display: none;
}
.slick-arrow {
	font-size: 0;
	line-height: 0;
	position: absolute;
	bottom: -13.5%;
	z-index: 10;
	display: block;
	width: 16%;
	height: 120px;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
}
.slick-prev {
	left: 3.2%;
  background-image: url(../images/top/modal_prev.png);
}
.slick-next {
	right: 3.2%;
  background-image: url(../images/top/modal_next.png);
}
.slick-disabled.slick-prev,
.slick-next.slick-disabled {
    background-image: none;
}

/*------catalog-ticket------*/
.catalog-ticket {
  position: absolute;
  top: 42.45%; /* 360 / 848 * 100*/
  left: 7.733333%;
  width: 84.66666%;
}
.catalog-ticket p a {
  display: block;
  position: relative;
  padding: 2.2vw 0 2.2vw 27vw;
  border-radius: 4px;
  background: #fff;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  text-indent: -0.5em;
  line-height: 1.5;
  text-decoration: none;
  transition: 0.3s;
}
.catalog-ticket p a:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 1.62vw;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url("../../assets/images/top/catalog_ticket.png") no-repeat;
  background-size: contain;
  width: 22vw;
  height: 15.6vw;
  transition: 0.3s;
}
@media (max-width: 374px) {
	.catalog-ticket p a {
		padding: 2.8vw 0 2.8vw 29vw;
		font-size: 10px;
	}
	.catalog-ticket p a:before {
		left: 2vw;
		width: 24vw;
		height: 17vw;
	}
}