@charset "UTF-8";

/* ========================================
	#bg
======================================== */
#bg .bg-circle-top,
#bg .bg-kiban-top,
#bg .bg-star {
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#bg .bg-circle-top {
    background: url(../images/bg_circle.png) center 1325px no-repeat;
}
#bg .bg-kiban-top {
    background: url(../images/bg_kiban.png) center 2744px no-repeat;
}
#bg .bg-star {
    background: url(../images/bg_star.png) center 1325px no-repeat;
}

/* ========================================
	#header
======================================== */
#index #header-logo {
	height: auto;
}

/* ========================================
	#main-visual
======================================== */
#main-visual {
	height: 709px;
	background: #4AB6D4 url(../images/main_bg.jpg) no-repeat center top;
	overflow: hidden;
}
#main-visual-bg1,
#main-visual-bg2,
#main-visual-bg3 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 699px;
}
#main-visual-bg1 {
	background: url(../images/main_bg2.png) no-repeat center top;
}
#main-visual-bg2 {
	background: url(../images/main_bg3.png) no-repeat center top;
}
#main-visual-bg3 {
	background: url(../images/main_bg4.png) no-repeat center top;
}

#main-visual .inner {
	z-index: 1;
}

#main-visual-star {
	position: absolute;
	top: 442px;
	left: 151px;
}
#main-chara1 {
	position: absolute;
	top: 4px;
	left: -25px;
}
#main-chara2 {
	position: absolute;
	top: 81px;
	left: 808px;
}

#main-img {
	position: absolute;
	top: 6px;
	left: 149px;
}

#logo {
	position: absolute;
	left: -1px;
	top: 378px;
}
#logo-base,
#logo-effect {
	position: absolute;
	left: 0;
	top: 0;
}
#logo-effect {
	opacity: 0;
}
#trial-btn{
	position: absolute;
	top: 320px;
	left: 621px;
	opacity: 0;
}

#movie-area {
	position: absolute;
	left: 50%;
	margin-left: 140px;
	top:-166px;
	opacity: 0;
}
.movie-box {
	position: relative;
	width: 345px;
}
.movie-yt {
	position: absolute;
	top: 9px;
	left: 10px;
	width: 322px;
	height: 184px;
	overflow: hidden;
}
.movie-yt iframe {
	position: absolute;
	top: -5px;
	left: -11px;
	width: 345px;
	height: 194px;
}
.movie-door {
	position: absolute;
	top: 5px;
	left: 8px;
	width: 328px;
	height: 188px;
	overflow: hidden;
}
.movie-door-left,
.movie-door-right {
	position: absolute;
	top: 0;
}
.movie-door-left {
	left: 0;
}
.movie-door-right {
	right: 0;
}
.movie-nojs {
	position: absolute;
	top: 8px;
	left: 10px;
	width: 322px;
	height: 184px;
	overflow: hidden;
}
.movie-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 345px;
	height: 200px;
}
.movie-ttl {
	position: absolute;
	left: 0;
	top: 190px;
}

.movie-btn {
	position: absolute;
	left: 50%;
	margin-left: 140px;
	top:-189px;
	z-index: 10000;
	opacity: 0;
}

.movie-btn :hover{
	animation: skew 0.4s linear 1;
	}
@keyframes skew {
  0%  { transform: translate(0,4px) ; }
  16% { transform: translate(0,-3px);  }
  32% { transform: translate(0,3px);  }
  48% { transform: translate(0,-2px);  }
  64% { transform: translate(0,2px);  }
  80% { transform: translate(0,-1px);  }
  100% { transform: skew(0deg,0deg);    }
}
@-webkit-keyframes skew {
  0%  { -webkit-transform: translate(0,4px) ; }
  16% { -webkit-transform: translate(0,-3px);  }
  32% { -webkit-transform: translate(0,3px);  }
  48% { -webkit-transform: translate(0,-2px);  }
  64% { -webkit-transform: translate(0,2px);  }
  80% { -webkit-transform: translate(0,-1px);  }
  100% { -webkit-transform: skew(0deg,0deg);    }


}



/* ========================================
	#loading
======================================== */
#loading {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 699px;
	text-align: center;
	background: url(../images/loading_bg.gif) repeat center top #141860;
}
body.js #loading {
	display: block;
}
#loading-img {
	margin-bottom: 40px;
	padding-top: 210px;
}
#loading-text {

}

/* ========================================
	#info
======================================== */
#info {
	position: relative;
	z-index: 3;
	height: 364px;
	margin-top: -75px;
	background: url(../images/cloud_bg1.png) repeat-x center top;
}

.cloud-star1,
.cloud-star2 {
	position: absolute;
}
.cloud-star1 {
	left: -260px;
	top: 105px;
}
.cloud-star2 {
	right: -301px;
	top: 32px;
}

/*-------------------------
	#update
---------------------------*/
#update {
	position: absolute;
	width: 405px;
	height: 171px;
	left: 0;
	top: 75px;
	background: url(../images/update_bg.png) no-repeat left top;
}

#update-ttl {
	padding: 10px 0 0 20px;
}

#update ul {
	width: 360px;
	height: 82px;
	margin: 30px 0 0 25px;
	font-size: 13px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.4;
	overflow: auto;
}
#update span {
	display: block;
}
#update .date {
	letter-spacing: 1.3px;
}
#update .update-txt {
	display: block;
	margin-bottom: 8px;
	padding-top: 5px;
	background: url(../images/update_arw.png) no-repeat 100px 1px;
}

#update li:last-child .update-txt {
	background: none;
}

#update li a:link, #update li a:visited {
	text-decoration: underline;
}
#update li a:hover, #update li a:active {
	text-decoration: none;
}

/*-------------------------
	#spec
---------------------------*/
#spec,
.spec-pack,
.spec-ico,
.spec-cero,
.spec-amiibo,
.spec-img01,
.spec-img02,
.spec-img03,
.spec-detail,
.spec-guide,
.spec-sound,
.spec-theme {
	position: absolute;
}

#spec {
	width: 547px;
	height: 171px;
	left: 418px;
	top: 75px;
	background: url(../images/spec_bg.png) no-repeat left top;
}
.spec-pack {
	left: 32px;
	top: 17px;
}
.spec-ico {
	left: 167px;
	top: 17px;
}
.spec-cero {
	left: 165px;
	top: 96px;
}
.spec-amiibo {
	left: 200px;
	top: 96px;
}
.spec-img01 {
	left: 258px;
	top: 18px;
}
.spec-img02 {
	left: 258px;
	top: 47px;
}
.spec-img03 {
	left: 258px;
	top: 79px;
}
.spec-detail {
	left: 258px;
	top: 104px;
}
.spec-guide {
	left: 33px;
	top: 140px;
}
.spec-sound {
	left: 172px;
	top: 140px;
}
.spec-theme {
	left: 305px;
	top: 140px;
}

/*-------------------------
	#bnr-area
---------------------------*/
#bnr-area,
.bnr-ttl,
.bnr1,
.bnr2,
.bnr3,
.bnr4,
.new {
	position: absolute;
}

#bnr-area {
	width: 960px;
	height: 102px;
	left: 0;
	top: 260px;
}
.bnr-ttl {
	left: 0;
	top: -1px;
}
.bnr1 {
	left: 0;
	top: 24px;
}
.bnr2 {
	left: 242px;
	top: 24px;
}
.bnr3 {
	left: 484px;
	top: 24px;
}
.bnr4 {
	left: 736px;
	top: 24px;
}

.new {
	display: block;
	width: 76px;
	height: 17px;
	left: 80px;
	bottom: -8px;
	background: url(../images/icon_new.png) no-repeat center top;
}

/* ========================================
	#lead
======================================== */
#lead {
	height: 530px;
	background: #151665 url(../images/lead_bg_line.gif) repeat center top;
}

#cloud {
	height: 75px;
	background: url(../images/cloud_bg2.png) repeat-x center bottom;
}


#lead-bg {
	position: relative;
	height: 530px;
	background: url(../images/main2_bg.png) repeat-x center top;
}

#lead-bg1 {
	position: absolute;
	left: 0;
	top: 80px;
}
#lead-bg2 {
	position: absolute;
	right: 0;
	top: 80px;
}

#lead-ttl,
#lead-txt,
#lead-img,
#movie,
#movie-img,
#movie-mask,
.movie-img-wrapper {
	position: absolute;
}
#lead-ttl {
	left: 0;
	top: 83px;
}
#lead-txt {
	left: 0;
	top: 283px;
}
#lead-img {
	left: -155px;
	top: 112px;
}

#movie {
	left: 236px;
	top: 0;
	width: 913px;
	height: 530px;
}
.movie-img-wrapper {
	position: absolute;
	top: 13px;
	left: 0px;
	width: 913px;
	height: 514px;
	overflow: hidden;
}
div#movie-img {
	left: 0;
	top: 13px;
	width: 913px;
	height: 514px;
}
iframe#movie-img {
	top: -30px;
	left: -59px;
	width: 1031px;
	height: 580px;
}
#movie-mask {
	left: 0;
	top: 0;
}
#movie-loading {
	display: none;
	position: absolute;
	left: 0;
	top: 13px;
	width: 913px;
	height: 514px;
}
body.js #movie-loading {
	display: block;
}


/* ========================================
	#contents
======================================== */
#contents {
	height: 1638px;
}

/*-------------------------
	#copy
---------------------------*/
#copy {
	position: absolute;
	width: 485px;
	height: 740px;
	left: 0;
	top: 75px;
	background: url(../images/line.png) no-repeat right top;
}

#copy-copy,
#copy-txt,
#copy-btn,
#copy-img1,
#copy-img2 {
	position: absolute;
}
#copy-copy {
	left: -9px;
	top: 421px;
}
#copy-txt {
	left: 0;
	top: 573px;
}
#copy-btn {
	left: -3px;
	top: 681px;
}
#copy-img2 {
	left: -47px;
	top: 82px;
}
#copy-img1 {
	left: 153px;
	top: 25px;
}

/*-------------------------
	#robobo
---------------------------*/
#robobo {
	position: absolute;
	width: 475px;
	height: 859px;
	left: 485px;
	top: 75px;
}

#robobo-copy,
#robobo-txt,
#robobo-btn,
#robobo-img {
	position: absolute;
}
#robobo-copy {
	left: 42px;
	top: -11px;
}
#robobo-txt {
	left: 54px;
	top: 151px;
}
#robobo-btn {
	left: 51px;
	top: 261px;
}
#robobo-img {
	left: -38px;
	top: 320px;
}

/*-------------------------
	#amiibo / #subgame
---------------------------*/
#amiibo {
	position: absolute;
	width: 960px;
	height: 670px;
	left: 0;
	top: 856px;
	background: url(../images/amiibo_bg.png) no-repeat right top;
}

/* #amiibo */
#amiibo-catch,
#amiibo-copy,
#amiibo-txt,
#amiibo-btn,
#amiibo-img1,
#amiibo-img2 {
	position: absolute;
}
#amiibo-catch {
	left: 73px;
	top: 38px;
}
#amiibo-copy {
	left: 44px;
	top: 95px;
}
#amiibo-txt {
	left: 72px;
	top: 211px;
}
#amiibo-btn {
	left: 69px;
	top: 302px;
}
#amiibo-img1 {
	left: 450px;
	top: 192px;
}
#amiibo-img2 {
	left: 648px;
	top: 174px;
}

#amiibo {
	position: absolute;
	width: 960px;
	height: 670px;
	left: 0;
	top: 856px;
	background: url(../images/amiibo_bg.png) no-repeat right top;
}

/* #subgame */
#subgame-copy,
#subgame-txt,
#subgame-btn,
#subgame-img,
#subgame-chara1,
#subgame-chara2 {
	position: absolute;
}
#subgame-copy {
	left: 42px;
	top: 417px;
}
#subgame-txt {
	left: 481px;
	top: 509px;
}
#subgame-btn {
	left: 480px;
	top: 576px;
}
#subgame-chara1 {
	left: 747px;
	top: 393px;
}
#subgame-chara2 {
	left: 841px;
	top: 422px;
}
#subgame-img {
	left: 49px;
	top: 511px;
}

/* ========================================
	#footer
======================================== */
#footer .topicpath {
	float: left;
}

#footer #footer-r {
	float: right;
	width: 340px;
}

#index #footer .foot-copyright {
	float: left;
}

#footer #sns {
	float: right;
	padding-top: 13px;
}
#footer #sns li {
	display: inline;
	margin-left: 10px;
}

#container .pagetop {
	position: absolute;
	bottom: 0;
}

/* ----------------------------
   eshop バナー
---------------------------- */
.bnr-eshop-sale{
 width: 100%;
 background: url(../images/bnr_eshop_bg.png);
 position: relative;
 z-index: 10;
}
.bnr-eshop-sale::before{
 content: "";
 display: block;
 width: 100%;
 height: 2px;
 background: #FFF;
 left: 0;
 bottom: 0;
 position: absolute;
}
.bnr-eshop-sale a{
 display: block;
 max-width: 960px;
 margin: 0 auto;
 width: 70%;
}
.bnr-eshop-sale a img{
 max-width: 960px;
 width: 100%;
 height: auto;
}
.no-touchevents .bnr-eshop-sale a{
 -webkit-transition: opacity 0.15s linear;
 transition: opacity 0.15s linear;
}
.no-touchevents .bnr-eshop-sale a:hover{
 opacity: 0.85;
}