@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/
html.Has-modal {
	overflow: hidden !important;
	width: auto;
}
body {
	min-width: 1360px;
	overflow:hidden;
	min-height: 768px;
	background: #000;
	color: #4b4b4b;
	line-height: 1.6;
	word-wrap: break-word;
	background: url(../img/content/content_bg_01.png) top center;
	background-size: 100%;
}

/* - loadging */
body.loading > * {
	
}

#loading {
	position: fixed;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
	opacity: 1;
	z-index: 99999;
}
#loading::before {
  content: "";
  background: #e95e9d;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  z-index: 0;
  transition: all 1.0s ease-in 0.2s;
  -webkit-transition: all 1.0s ease-in 0.2s;
}
#loading::after {
  content: "";
  background: #e95e9d;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  z-index: 0;
  transition: all 1.0s ease-in 0.2s;
  -webkit-transition: all 1.0s ease-in 0.2s;
}
#loading.done::before {
  transform: translateY(-55vh);
}
#loading.done::after {
  transform: translateY(55vh);
}
#loading .loading__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 590px;
  height: 404px;
  text-align: center;
  z-index: 1;
}
#loading .txt__loading {
  animation: loading-text 3.0s ease-in infinite;
}

@keyframes loading-text {
	0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

/*
******************************************************************
* .menu_btn_box
******************************************************************/
.menu_btn_box {
	display: none;
	position: fixed;
	overflow: hidden;
	top: 20px;
	right: 40px;
	z-index: 12;
	box-sizing: border-box;
}
.menu_btn {
	display: block;
	overflow: hidden;
	position: relative;
	float: right;
	width: 153px;
	height: 153px;
	background: url(../img/btn_menu.png) no-repeat top center;
	background-size: 100%;
	text-indent: -200%;
	cursor: pointer;
	border: none;
    outline: none;
}

.nav_open .menu_btn:after {
	opacity: 1;
}
.menu_btn:after {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 153px;
	height: 153px;
	background: url(../img/btn_menu_on.png) no-repeat top center;
	background-size: 100%;
	content: '';
}

.nav_bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.device-sp .nav_bg {
	cursor: pointer;
}

.device-sp .nav_box {
	cursor: pointer;
}
.nav_box {
	display: none;
	overflow: hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 11;
	width: 859px;
	height: 467px;
	background: url(../img/nav_bg.png) no-repeat top center;
	background-size: 100%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-o-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}

.nav_box .nav_list {
	position: relative;
	top: 100px;
	width: 364px;
    margin: 0 auto;
}
.nav_item.performance {
	margin-bottom: 35px;
}
.nav_item.gameflow {
	margin-bottom: 35px;
}
.nav_box li a {
	display: block;
	overflow: hidden;
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100%;
	text-indent: -100%;
}
.nav_item.gameflow a {
	width: 364px;
	height: 69px;
	background-image: url(../img/nav_text01_off.png);
}
.nav_item.performance a {
	width: 175px;
	height: 71px;
	background-image: url(../img/nav_text02_off.png);
}
.nav_item.spec a {
	width: 265px;
	height: 63px;
	background-image: url(../img/nav_text03_off.png);
}

.nav_box li a:after {
	display: block;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100%;
	content: '';
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
}
.nav_box li a:hover:after {
	opacity: 1;
}
.nav_item.gameflow a:after {
	background-image: url(../img/nav_text01_on.png);
}
.nav_item.performance a:after {
	background-image: url(../img/nav_text02_on.png);
}
.nav_item.spec a:after {
	background-image: url(../img/nav_text03_on.png);
}

/*
******************************************************************
* .main_content
******************************************************************/
.main_bg{
    position: absolute;
    bottom: 7px;
    height: 24%;
    left: 26%;
    width: 54% !important;
    min-width: 500px !important;
}

.gameflow{
	position: relative;
	overflow: hidden;
	margin-bottom: 80px;
}
.gameflow .content-ttl{
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 998px;
    margin: 0 auto;
    z-index: 1;
}

.gameflow .content-item.content01{
	margin-top: 114px;
}
.gameflow .content-item.content02,
.gameflow .content-item.content02_1{
	position: absolute;
	left: 0;
    right: 0;
    margin: auto;
    top: 15%;
    width: 1000px;
}
.gameflow .content-item.content03{
	position: absolute;
	left: 0;
    right: 0;
    margin: auto;
    top: 29%;
    width: 1000px;
}
.gameflow .content-item.content04{
	position: absolute;
	left: 0;
    right: 0;
    margin: auto;
    top: 54%;
    width: 1000px;
}
.gameflow .content-item.content05{
	position: absolute;
	left: 0;
    right: 0;
    margin: auto;
    top: 74.5%;
    width: 1000px;
}
.gameflow_2{
	margin-bottom: 80px;
}
.gameflow_2 .content-item.content01{
	margin-bottom: 10px;
}
.gameflow_3{
	margin-bottom: 80px;
}
.gameflow_3 .content-item.content01{
	margin-bottom: 80px;
}

.gameflow_3 .content-item.content02,
.gameflow_3 .content-item.content03,
.gameflow_3 .content-item.content04{
	margin-bottom: 20px;
}


.performance{
	margin-bottom: 80px;
}
.performance .content-ttl{
	position: relative;
    z-index: 2;
}
.performance .content-item.content01{
	position: relative;
    z-index: 1;
    margin-top: -23px;
}
.performance .content-item.content02{
    margin-top: -45px;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.spec .content-item.content02{
	margin-bottom: 30px;
}
.spec .content-item.content03{
	margin-bottom: 50px;
}
.page-top {
    display: none;
    position: fixed;
    bottom: 0;
    right: 16px;
    z-index: 9;
}

.main_content{
	padding-top: 180px;
	text-align: center;
}
*[data-sf] {
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

*[data-sf="slide-top"] {
	-webkit-transform: translate(0, 100px);
	transform: translate(0, 100px);
}
*[data-sf="slide-left"] {
	-webkit-transform: translate(-300px, 0);
	transform: translate(-300px, 0);
}
*[data-sf="slide-right"] {
	-webkit-transform: translate(300px, 0);
	transform: translate(300px, 0);
}

*.animated[data-sf="fade-in"] {
	opacity: 1;
}
*.animated[data-sf="slide-top"],
*.animated[data-sf="slide-left"],
*.animated[data-sf="slide-right"] {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

/*
******************************************************************
* #wrp-all
******************************************************************/
#wrp-all {
  background: url(../img/bg.png) no-repeat center;
  background-size: cover;
  position: relative;
  min-width: 1360px;
  min-height: 805px;
  overflow: visible;
}
.bg__shine_01 {
  position: absolute;
  top: 300px;
  left: 0;
  right: 50px;
  margin: 0 auto;
  width: 1259px;
  height: 555px;
  z-index: 5;
  opacity: 0;
  transition: all 0.5s ease-out 1.2s;
  -webkit-transition: all 0.5s ease-out 1.2s;
}
.bg__shine_02 {
  position: absolute;
  top: 158px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1210px;
  height: 212px;
  z-index: 0;
  opacity: 0;
  transition: all 0.5s ease-out 1.2s;
  -webkit-transition: all 0.5s ease-out 1.2s;
}
#wrp-all.start .bg__shine_01,
#wrp-all.start .bg__shine_02 {
  opacity: 1;
}
.bg__tree_01 {
  position: absolute;
  top: 114px;
  left: 0;
  width: 443px;
  height: 588px;
  transform: translateY(300px) rotateX(90deg) scaleY(0.1);
  z-index: 1;
}
.bg__tree_02 {
  position: absolute;
  top: 89px;
  left: 820px;
  right: 0;
  margin: 0 auto;
  width: 319px;
  height: 382px;
  transform: translateY(250px) rotateX(90deg) scaleY(0.1);
  z-index: 1;
}
.is-sp-v .bg__tree_01 {
  top: 43%;
}
.is-sp-v .bg__tree_02 {
  top: 38%;
}
#wrp-all.start .bg__tree_01 {
  animation: bg-tree_01 1.0s ease-in forwards;
}
#wrp-all.start .bg__tree_02 {
  animation: bg-tree_02 1.0s ease-in forwards;
}
@keyframes bg-tree_01 {
  0% {transform: translateY(300px) rotateX(90deg) scaleY(0.1);}
  50% {transform: scaleY(1.4);}
  80% {transform: scaleY(1.6);}
  100% {transform: translateY(0px) rotateX(0deg) scaleY(1.0);}
}
@keyframes bg-tree_02 {
  0% {transform: translateY(250px) rotateX(90deg) scaleY(0.1);}
  50% {transform: scaleY(1.4);}
  80% {transform: scaleY(1.6);}
  100% {transform: translateY(0px) rotateX(0deg) scaleY(1.0);}
}
.bg__flower_01 {
  position: absolute;
  bottom: -120px;
  left: 0;
  width: 32%;
  min-width: 480px;
  z-index: 2;
  transform: translate(-480px,532px) scale(0.1);
}
.bg__flower_02 {
  position: absolute;
  bottom: -125px;
  right: 0;
  width: 32%;
  min-width: 462px;
  transform: translate(462px,377px) scale(0.1);
  z-index: 4;
}
.bg__flower_01 img,
.bg__flower_02 img {
  width: 100%;
}
#wrp-all.start .bg__flower_01 {
  animation: bg-flower_01 1.0s ease-in forwards;
}
#wrp-all.start .bg__flower_02 {
  animation: bg-flower_02 1.0s ease-in forwards;
}
@keyframes bg-flower_01 {
  0% {transform: translate(-480px,532px) scale(0.1);}
  50% {transform: scale(1.4);}
  80% {transform: scale(1.6);}
  100% {transform: translate(0px,0px) scale(1.0);}
}
@keyframes bg-flower_02 {
  0% {transform: translate(462px,377px) scale(0.1);}
  50% {transform: scale(1.4);}
  80% {transform: scale(1.6);}
  100% {transform: translate(0px,0px) scale(1.0);}
}
.logo__nanashow {
  position: absolute;
  top: 25px;
  left: 580px;
  right: 0;
  margin: 0 auto;
  width: 159px;
  height: 29px;
  z-index: 7;
  opacity: 0;
  transition: all 0.5s ease-out 1.7s;
  -webkit-transition: all 0.5s ease-out 1.7s;
}
.logo__field {
  position: absolute;
  top: 5px;
  left: 910px;
  right: 0;
  margin: 0 auto;
  width: 139px;
  height: 59px;
  z-index: 7;
  opacity: 0;
  transition: all 0.5s ease-out 1.7s;
  -webkit-transition: all 0.5s ease-out 1.7s;
}
.logo__nanashow a,
.logo__field a {
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
}
.logo__nanashow a:hover,
.logo__field a:hover {
  opacity: 0.5;
}
.img__main {
  position: absolute;
  bottom: -12%;
  right: 0;
  width: 87%;
  z-index: 3;
  opacity: 0;
  transition: all 1.0s ease-out 1.0s;
  -webkit-transition: all 1.0s ease-out 1.0s;
}
.img__main img {
  width: 100%;
  min-width: 1276px;
}
.is-sp-s .img__main {
  width: 81%;
}
.is-sp-v .img__main {
  width: 100%;
  bottom: 26%;
}
.img__main .img__main_str {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img__main .img__main_str img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}
.img__main .img__main_str img.show {
  opacity: 1;
}
#wrp-all.start .img__main {
  opacity: 1;
}

#contents {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 6;
}
#contents h1 {
  position: absolute;
  top: 2%;
  left: -20px;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease-out 1.7s;
  -webkit-transition: all 0.5s ease-out 1.7s;
}
#contents .pm__btn {
  position: absolute;
  bottom: 16%;
  left: 43%;
  right: 0;
  margin: 0 auto;
  width: 366px;
  height: 230px;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease-out 1.7s;
  -webkit-transition: all 0.5s ease-out 1.7s;
}
.is-sp-v #contents .pm__btn {
  bottom: 32%;
}
#contents .pm__btn a {
  display: block;
}
#contents .pm__btn a:before {
  content: "";
  background: url(../img/play_pm.png) no-repeat 0 0;
  position: absolute;
  top: 73px;
  bottom: 0;
  left: 40px;
  right: 0;
  width: 76px;
  height: 59px;
  margin: auto;
  z-index: 2;
}
#contents .pm__btn .pm__txt {
  position: absolute;
  top: 40px;
  left: 20px;
  right: 0;
  margin: auto;
  width: 287px;
  height: 81px;
  z-index: 1;
}
#contents .pm__btn .bg__pm {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
}
#contents .pm__btn a:hover .bg__pm {
  transform: scale(1.2);
}

#wrp-all.start .logo__nanashow,
#wrp-all.start .logo__field,
#wrp-all.start #contents h1,
#wrp-all.start #contents .pm__btn,
#wrp-all.start #contents .sns_btn,
#wrp-all.start #footer_1 {
  opacity: 1;
}



/*
******************************************************************
* #footer
******************************************************************/
#footer_1 {
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	padding: 15px;
	width: 1000px;
	font-size: 13px;
	margin: auto;
  color: #fff;
  text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-shadow: 2px 2px 2px #cf2874,
    -2px 2px 2px #cf2874,
    2px -2px 2px #cf2874,
    -2px -2px 2px #cf2874;
  z-index: 6;
  opacity: 0;
  transition: all 0.5s ease-out 1.7s;
  -webkit-transition: all 0.5s ease-out 1.7s;
}
#footer_1 .box-copy li {
	display: inline-block;
	margin: 0 10px;
}

#footer_2{
	font-size: 13px;
	color: #fff;
	text-align: center;
	padding: 110px 0 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-shadow: 2px 2px 2px #cf2874,
    -2px 2px 2px #cf2874,
    2px -2px 2px #cf2874,
    -2px -2px 2px #cf2874;
}

/*
******************************************************************
* .modal-video
******************************************************************/
.modal-video {
    background-color: rgba(0,0,0,0.8);
}
.modal-video-movie-wrap {
    margin-top: 56px;
}
.modal-video-close-btn {
  display: block;
  position: absolute;
  top: -56px;
  right: 0;
  z-index: 2;
  width: 179px;
  height: 50px;
  text-indent: -9999px;
  background: url(../img/v_close.png) no-repeat top 0 left 0;
  background-size: 100%;
  cursor: pointer;
}
.modal-video-close-btn:hover {
  background-position: top -50px left 0;
}

.modal-video-close-btn:hover:not(:target) {
  background-position: top -51px left 0\9;/*IE9用*/
}

.modal-video-close-btn:before,
.modal-video-close-btn:after {
  content: none;
}

/*
******************************************************************
* sns_btn
******************************************************************/
.sns_btn {
    overflow: hidden;
    position: absolute;
    top: 75px;
    right: 98px;
    z-index: 5;
    opacity: 0;
    transition: all 0.5s ease-out 1.7s;
    -webkit-transition: all 0.5s ease-out 1.7s;
}
.sns_btn li {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}
.sns_btn li:first-child {
    margin: 0;
}