/* ---------------------------------
		contents
--------------------------------- */
.l-wrapper {
  background: #facd00;
}
.is-tablet .l-wrapper {
	overflow: hidden;
}

@media screen and (min-width: 1921px) {
  .l-wrapper {
    background-size: 35px;
  }
}

.l-main-bg {
	width: 100%;
	overflow: hidden;
	padding-bottom: 102px;
	padding-top: 2.8125%;
  background: url(../images/top/bg.png) 0 0 repeat;
  background-size: 1.82291% auto;
}
@media screen and (min-width: 961px) {
	.l-main-bg {
		padding-bottom: -webkit-calc( 50px + calc( 1% * calc( 100 * calc(105 / 1920))));
		padding-bottom: calc( 50px + calc( 1% * calc( 100 * calc(105 / 1920))));
	}
}
@media screen and (min-width: 1921px) {
	.l-main-bg {
		padding-bottom: 147px;
	}
}
.l-main {
	padding-bottom: 0 !important;
}

.l-inner {
  position: relative;
  min-width: 960px;
  max-width: 2000px;
  margin: 0 auto;
}

.l-content {
  position: relative;
  width: 94.27083%;
	max-width: 1810px;
  margin: 0 auto;
}

.l-content:after {
  content: '';
  display: block;
  clear: both;
}

/* -------------------------------------
	header
------------------------------------- */
.c-hardware__logo {
	width: 100px;
}

/* -------------------------------------
	main
------------------------------------- */
/* visual */
.p-top-visual__img {
	padding-top: 44.19889%;
  background: url(../images/top/visual_img.jpg) top center no-repeat;
  background-size: cover;
}

.p-top-visual-inner {
	position: relative;
	width: 100%;
	padding: 3.03867% 0;
}

.p-top-logo {
	width: 60.33149%;
}

.p-top-set_btn {
	position: absolute;
	top: 0;
	right: 0;
  width: 36.62983%;
	/* -webkit-transform: translateY(27.5%);
  transform: translateY(27.5%); */
  -webkit-transform: translateY(17%);
  transform: translateY(17%);
}

.p-top-set_btn .new:after {
	position: absolute;
	top: -10%;
	right: -12%;
	width: 19.9395770393%; /* 66 / 331 * 100 */
	height: 30%;  /* 63 / 210 * 100 */
	content: " ";
	background: url("../images/top/icon_new.png") no-repeat 0 0;
	background-size: contain;
	pointer-events: none;
	animation: newicon 2600ms infinite;
}
.p-top-set_btn .new:hover:after {
	content: " ";
	top: -5px;
}

.p-top-movie {
	position: absolute;
	top: 0;
	right: 0;
  width: 36.62983%;
	border-radius: 8px;
	-webkit-box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.15);
	-webkit-transform: translateY(27.5%);
	transform: translateY(27.5%);
}
.p-top-movie:hover {
	margin-top: -1.57977%;
	padding-top: 10px;
  -webkit-box-shadow: none;
  box-shadow: none;
	transform: translateY(calc(27.5% + 10px));
}

.p-top-movie-inner {
	position: relative;
}

.p-top-movie__slide {
  position: absolute;
  top: 10%;
  left: 3.15955%;
  width: 43.74057%;
	overflow: hidden;
}

.p-top-movie__slide img {
	display: block;
}
.p-top-visual-inner .icon-new {
	position: absolute;
	top: 0;
	right: 0;
	width: 15.00789%;
	-webkit-transform: translate(36%,-50%);
	transform: translate(36%,-50%);
	/*-webkit-transform: translate(37.89473%,-27.63157%);
	transform: translate(37.89473%,-27.63157%);*/
	z-index: 10;
}
.p-top-visual-inner .icon-set {
	position: absolute;
	top: 0;
	left: 0;
	width: 13.72549%;
	-webkit-transform: translate(-18.68131%,-17.44186%);
	transform: translate(-18.68131%,-17.44186%);
	z-index: 10;
}

/* news */
.p-top-news {
	margin-bottom: 2.8125%;
	padding: 0.5% 0;
	font-size: 0;
	background-color: #692800;
	border-radius: 12px;
	-webkit-box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.p-top-news-inner {
  width: 94.27083%;
  margin: 0 auto;
}
.p-top-news__ttl {
	position: relative;
	display: inline-block;
	width: 4.1666%;
	padding: 0.5% 1.87845% 0.5% 2.59668%;
	margin-right: 1.65745%;
	border-right: rgba(255,255,255,0.2) 3px solid;
	vertical-align: middle;
}
.p-top-news__text {
	display: inline-block;
	height: 2.5em;
	color: #fff;
	font-size: 0.9vw;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 2.5;
	vertical-align: middle;
	transform: translateY(0);
}
.p-top-news__text.is-next {
  transform: translateY(-2.5em);
  transition: 500ms;
}
.p-top-news__text span {
	padding-right: 1em;
}
.p-top-news__text a {
	color: #fff;
	text-decoration: underline;
}
.p-top-news__text a:hover {
	color: #fff;
	text-decoration: none;
}

/* lead */
.p-top__lead {
  width: 94.27083%;
  margin: 0 auto;
	padding-bottom: 2.7%;
}

.p-top-content {
  margin-bottom: 30px;
}

/* make */
.p-top-make {
  position: relative;
  float: left;
  width: 49.17127%;
  background-color: #00a73c;
}

.p-top-make-inner {
  position: relative;
  margin-top: 25.2809%;
  margin-bottom: 2.24719%;
}

.p-top-make__title {
  position: absolute;
  top: 1.5625%;
  left: 50%;
  width: 93.25843%;
	max-width: 830px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

/*.p-top-make__title.is-fix {
  position: fixed;
  left: auto;
  width: 43.22917%;
  -webkit-transform: translateX(3.61445%);
  -ms-transform: translateX(3.61445%);
  transform: translateX(3.61445%);
  z-index: 1;
}

.js-fixtitle.is-hide {
  transition: top 400ms;
  top: -300px;
}*/

.p-top-make__img01 {
  width: 60.67416%;
  margin-left: 3.37079%;
}

.p-top-make__img02 {
  position: absolute;
  top: 0;
  left: 66.06742%;
  width: 37.52809%;
}

.p-top-make__img03 {
	position: relative;
  width: 100%;
}

.p-top-make__img04{
  width: 100%;
}

.p-top-make__btn {
  width: 93.25843%;
  margin-top: -10.78652%;
  margin-left: auto;
  margin-right: auto;
}

.p-top-make__txt01 {
  position: absolute;
  top: 8.62385%;
  left: 12.69663%;
  width: 7.75281%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.js-move-order {
  -webkit-transform: translateY(0px);
	transform: translateY(0px);
  transition: 120ms;
}
.js-move-order.is-active {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

.p-top-make__txt02 {
  position: absolute;
  top: 8.62385%;
  left: 20.44944%;
  width: 7.07865%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt03 {
  position: absolute;
  top: 8.62385%;
  left: 27.52809%;
  width: 7.41573%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt04 {
  position: absolute;
  top: 8.62385%;
  left: 35.2809%;
  width: 7.41573%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt05 {
  position: absolute;
  top: 8.62385%;
  left: 42.69663%;
  width: 7.30337%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt06 {
  position: absolute;
  top: 8.62385%;
  left: 50.22472%;
  width: 6.96629%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt07 {
  position: absolute;
  top: 62.38532%;
  left: 54.60674%;
  width: 7.30337%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt08 {
  position: absolute;
  top: 62.38532%;
  left: 62.47191%;
  width: 7.07865%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt09 {
  position: absolute;
  top: 62.38532%;
  left: 69.32584%;
  width: 6.85393%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt10 {
  position: absolute;
  top: 62.38532%;
  left: 75.61798%;
  width: 7.41573%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt11 {
  position: absolute;
  top: 62.38532%;
  left: 82.69663%;
  width: 7.41573%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make__txt12 {
  position: absolute;
  top: 62.38532%;
  left: 89.88764%;
  width: 6.74157%;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-top-make-panel__list {
  width: 93.25843%;
  margin: 0 auto;
  font-size: 0;
}

.p-top-make-panel__item {
  display: inline-block;
  width: 11.44578%;
  margin-top: 0.60241%;
  margin-right: 1.20482%;
}

.p-top-make-panel__item:nth-child(8n) {
  margin-right: 0;
}


.js-rotatebnr {
	position: relative;
}
.js-rotatebnr2,.js-rotatebnr3,.js-rotatebnr4,.js-rotatebnr5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.is-bnr1 .js-rotatebnr1,
.is-bnr2 .js-rotatebnr2,
.is-bnr3 .js-rotatebnr3,
.is-bnr4 .js-rotatebnr4,
.is-bnr5 .js-rotatebnr5 {
  opacity: 1;
  transform: rotateY(0deg);
  transition:
    opacity 100ms 200ms,
    transform 300ms 200ms;
}
.is-bnr1 .js-rotatebnr2, .is-bnr1 .js-rotatebnr3, .is-bnr1 .js-rotatebnr4, .is-bnr1 .js-rotatebnr5,
.is-bnr2 .js-rotatebnr1, .is-bnr2 .js-rotatebnr3, .is-bnr2 .js-rotatebnr4, .is-bnr2 .js-rotatebnr5,
.is-bnr3 .js-rotatebnr1, .is-bnr3 .js-rotatebnr2, .is-bnr3 .js-rotatebnr4, .is-bnr3 .js-rotatebnr5,
.is-bnr4 .js-rotatebnr1, .is-bnr4 .js-rotatebnr2, .is-bnr4 .js-rotatebnr3, .is-bnr4 .js-rotatebnr5,
.is-bnr5 .js-rotatebnr1, .is-bnr5 .js-rotatebnr2, .is-bnr5 .js-rotatebnr3, .is-bnr5 .js-rotatebnr4 {
  opacity: 0;
  transform: rotateY(90deg);
  transition:
    opacity 100ms 200ms,
    transform 400ms;
}

/* play */
.p-top-play {
  position: relative;
  float: right;
  width: 49.17127%;
  background-color: #e60012;
}

.p-top-play-inner {
  position: relative;
  margin-top: 25.2809%;
  margin-bottom: 2.24719%;
}

.p-top-play__title {
  position: absolute;
  top: 1.5625%;
  left: 50%;
  width: 93.25843%;
	max-width: 830px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
}

.p-top-play__title.is-fix {
  position: fixed;
  left: auto;
  width: 43.22917%;
  -webkit-transform: translateX(3.61445%);
  -ms-transform: translateX(3.61445%);
  transform: translateX(3.61445%);
  z-index: 4;
}

.p-top-play__img01 {
  position: relative;
  width: 100%;
  z-index: 2;
}

.p-top-play__img02 {
  position: absolute;
  top: 81.2766%;
  right: 0;
  width: 49.4382%;
}

.p-top-play__img03 {
  width: 100%;
}

.p-top-play__img04 {
  width: 93.25843%;
  margin: 0 auto;
}

.p-top-play__chara01 {
  position: absolute;
  top: 54.89362%;
  left: 2.92135%;
  width: 16.74157%;
}

.p-top-play__chara02 {
  position: absolute;
  top: 55.31915%;
  left: 17.30337%;
  width: 13.93258%;
}

.p-top-play__chara03 {
  position: absolute;
  top: 52.34043%;
  left: 29.77528%;
  width: 20.33708%;
}

.p-top-play__chara04 {
  position: absolute;
  top: -35.10638%;
  left: 53.48315%;
  width: 49.32584%;
	z-index: 1;
}
.animation-jumping {
	opacity: 0;
	-webkit-transform: translate(-20px, 20px);
	transform: translate(-20px, 20px);
}
.animation-jumping.is-animation {
	transition:
		opacity 100ms,
		-webkit-transform 200ms,
		transform 200ms;
}
.animation-jumping.is-animation,
.no-js .animation-jumping {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

.p-top-play__btn {
  width: 93.25843%;
  margin: 0 auto;
}

.p-top-play--slide {
  width: 100%;
  overflow: hidden;
}

.slide_pic {
  width: 10000px;
  padding-top: 31.348314%;
  background: #000 url(../images/top/play_slide.jpg) repeat-x 0 0;
  background-size: auto 100%;
  -webkit-animation: playslideX 320s linear infinite;
  animation: playslideX 320s linear infinite;
}

@-webkit-keyframes playslideX {
  from {
	transform: translate(0px, 0px);
  }
  to {
    transform: translate(-9000px, 0px);
  }
}

@keyframes playslideX {
  from {
	transform: translate(0px, 0px);
  }
  to {
    transform: translate(-9000px, 0px);
  }
}

.p-top-make__btn,
.p-top-play__btn {
	position: relative;
}
.p-top__btn-arw {
	position: absolute;
	top: 22%;
	left: 15.36747%;
	width: 8.43373%;
	padding-top: 7.22892%;
	background: url(../images/top/arw_yellow.png) center bottom no-repeat;
	background-size: contain;
  -webkit-animation: arrow 1000ms infinite;
  animation: arrow 1000ms infinite;
	pointer-events: none;
}
.p-top-make__btn a,
.p-top-play__btn a {
	display: block;
}
.p-top-make__btn a:hover .p-top__btn-arw,
.p-top-play__btn a:hover .p-top__btn-arw {
	padding-top: 8.6%;
}
@-webkit-keyframes arrow {
  0% {  -webkit-transform: translateX(0%);  }
  40% { -webkit-transform: translateX(15%);  }
  80% { -webkit-transform: translateX(0%);  }
  100% {  -webkit-transform: translateX(0%);  }
}
@keyframes arrow {
  0% {  -webkit-transform: translateX(0%);  }
  40% { -webkit-transform: translateX(15%);  }
  80% { -webkit-transform: translateX(0%);  }
  100% {  -webkit-transform: translateX(0%);  }
}

/* spec */
.spec {
  margin-bottom: 9.375%;
}

.p-top-info {
  width: 72.92817%;
	margin: 0 auto;
  padding: 3.03867%;
  background-color: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.p-top-spec {
  position: relative;
}

.p-top-spec-info {
	margin-bottom: 3%;
  font-size: 0;
}

.p-top-spec-info p {
  font-size: 1.56vw;
  font-weight: bold;
	letter-spacing: 0.05em;
  margin-bottom: 2.5%;
}

.p-top-spec-info span {
  display: inline-block;
  width: 6.5em;
}

.p-top-spec-info span.small {
  width: auto;
  font-size: 0.9vw;
}

.p-top-spec__info-btn {
  font-size: 0;
  margin-bottom: 5%;
}

.p-top-spec__info-btn li {
  display: inline-block;
  font-size: 1.45vw;
  font-weight: bold;
  margin-right: 30px;
}

.p-top-spec__info-btn li a {
  position: relative;
  padding-left: 30px;
}

.p-top-spec__info-btn li a:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 30px;
  height: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: url(../images/top/arw_yellow.png) left center no-repeat;
  background-size: auto 100%;
}

.p-top-spec__cero {
  position: absolute;
  top: 0;
  left: 55.78512%;
  width: 7.10743%;
  -webkit-transform: translateY(-4.67289%);
  transform: translateY(-4.67289%);
}

.p-top-spec__btn {
  position: absolute;
  top: 0;
  left: 67.43801%;
  width: 32.56198%;
}

.p-top-spec__btn li:not(:last-child) {
  margin-bottom: 3%;
}

.p-top-spec__special {
  position: absolute;
  top: 4%;
  right: 0;
  width: 20.88235%;
  -webkit-transform: translateY(-7.11743%);
  -ms-transform: translateY(-7.11743%);
  transform: translateY(-7.11743%);
}

.p-top-spec-online {
	position: relative;
	width: 62.80991%;
	padding-left: 9.5%;
	font-size: 0.7vw;
	font-weight: bold;
	line-height: 1.5;
	box-sizing: border-box;
}
.p-top-spec-online:before {
	position: absolute;
	content: "";
	display: block;
	top: 50%;
	left: 0;
	width: 13%;
	padding-top: 3.67%;
  background: url(../images/top/online.png) left center no-repeat;
  background-size: contain;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.p-top-spec-ticket {
	margin-top: 6%;
	padding: 2% 0;
	background-color: #f2f2f2;
}
 .p-top-spec-ticket__txt {
	position: relative;
	padding-left: 20%;
	padding-right: 1%;
	font-size: 0.5vw;
	font-weight: bold;
	line-height: 1.5;
	box-sizing: border-box;
 }
.p-top-spec-ticket__txt:before {
	position: absolute;
	content: "";
	display: block;
	top: 50%;
	left: 2%;
	width: 16.7512%;
	padding-top: 11.42131%;
	background: url(../images/top/online_ticket.png) left center no-repeat;
	background-size: contain;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.p-top-spec-ticket__txt:hover {
	opacity: 0.7;
}


.p-top-spec:after {
  content: '';
  display: block;
  clear: both;
}

@media screen and (max-width: 960px) {
  .p-top-spec-info p {
    font-size: 14px;
  }
  .p-top-spec-info span.small {
    font-size: 10px;
  }
  .p-top-spec__info-btn li {
    font-size: 12px;
  }
}

@media screen and (min-width: 1921px) {
  .p-top-spec-info p {
    font-size: 30px;
  }
  .p-top-spec-info span.small {
    font-size: 20px;
  }
  .p-top-spec__info-btn li {
    font-size: 28px;
  }
}

/* -------------------------------------
	animation
------------------------------------- */
.p-top-spec__info-btn li:hover a:before {
  -webkit-animation: arw 400ms linear;
  animation: arw 400ms linear;
}

@-webkit-keyframes arw {
  0% {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  50% {
    -webkit-transform: translate(-3px, -50%);
    transform: translate(-3px, -50%);
  }
  100% {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
}

@keyframes arw {
  0% {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  50% {
    -webkit-transform: translate(-3px, -50%);
    transform: translate(-3px, -50%);
  }
  100% {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
}

/* -------------------------------------
	footer
------------------------------------- */
/*
.l-footer {
	position: static;
}
*/

.c-footer__img {
  position: absolute;
  bottom: 0;
  left: -18.35938%;
  width: 29.6875%;
}

.c-footer-bottom {
  position: relative;
}

.c-footer-bottom-right {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  font-size: 0;
}

.c-footer-bottom__copyright {
  display: inline-block;
  vertical-align: middle;
}

.c-sns {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}

.c-sns li {
  display: inline-block;
}

.c-sns__twitter {
  margin-right: 12px;
}

/* ========================================
	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-initialized .slick-slide {
    display: block;
}