@charset "UTF-8";



/*-------------------------------------------------------------------
	header
---------------------------------------------------------------------*/
#bgmbtn{
	top: 66px;
	right: 28px;
	width: 106px;
	height: 67px;
}



/*-------------------------------------------------------------------
	loading
---------------------------------------------------------------------*/
#loading{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	min-width: 960px;
	height: 880px;
	overflow: hidden;
	margin: 0 auto;
	background: #020a1f;
	display: none;
}
#loading .loadingcontentanime{
	top: 233px;
	width: 114px;
	position: absolute;
	right: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;
}
#loading .loadingcontentanime .loadingicon01{
	position: absolute;
	top: 0;
	left: 13px;
}
#loading .loadingcontentanime .loadingicon02{
	position: absolute;
	top: 0;
	left: 13px;
	height: 0;
	overflow: hidden;
}
#loading .loadingcontentanime .loadingtext {
	position: absolute;
	top: 88px;
	left: 0;
}
#loading .loadingcontenttxt{
	top:352px;
	width: 542px;
	position: absolute;
	right: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;
}
.no-loading #loading {
	display: none;
}
.no-js #loading {
	display: none;
}



/*-------------------------------------------------------------------
	main
---------------------------------------------------------------------*/
#main{
	position: relative;
	width: 100%;
	min-width: 960px;
	height: 880px;
	overflow: hidden;
	margin: 0 auto;
}
#main .img{
	position: absolute;
	top: 0;
	left: 0;
	min-width: 1366px;
	width: 100%;
	height: 100%;
}
#main .img.fit{
	top: 50%;
}
#main .img.fitwide{
	top: -52px;
}
@media screen and (max-width: 1366px) {
	#main .img{
		left: 50%;
		margin-left: -683px;
	}
}
#main .img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
#main .body{
	position: relative;
	width: 960px;
	height: 768px;
	margin: 0 auto;
}
#main .body h1,
#main .body p,
#main .body div {
	position: absolute;
	display: none;
}
.no-js #main .body h1,
.no-js #main .body p,
#main .body div {
	display: block;
}
#main .body .logo{
	top: 110px;
	left: 188px;
}
#main .body .banner{
	left: 558px;
	top: 631px;
	background-color: #FFFFFF;
}
#main .body .banner a{
	display: block;
	width: 100%;
	height: 100%;
}
#main .body .information{
	top: 554px;
	left: 2px;
}
#main .body .information .information_bg{
	top: -10px;
	left: 0px;
}
#main .body .information .icon_package{
  top: 14px;
  left: 18px;
}
#main .body .information .icon_soft{
  top: 98px;
  left: 18px;
}
#main .body .information .icon_cerob{
  top: 98px;
  left: 62px;
}
#main .body .information .information_text{
  top: 10px;
  left: 105px;
}
#main .body .information .information_link{
	left: 260px;
	top: 101px;
}
#main .body .information .guidebook{
	left: 105px;
	top: 103px;
}

#main .body .information .date{
	left: 105px;
	top: 123px;
}

#main .body .hardware{
	top: 450px;
	right: 1px;
}
#main .body .banner_kisekae_home{
	top: 410px;
	right: 1px;
	width:239px;
	height:30px;
}

#main .body .banner_kisekae_home a{
	display: block;
	width: 100%;
	height: 100%;
}



#main .body .banner_movie{
	left: 388px;
	top: 555px;
}
#main .body .banner_kisekae{
	left: 388px;
	top: 630px;
}
#main .body .banner_movie .main_update,
#main .body .banner_kisekae .main_update,
#main .body .interview .main_update{
	position: absolute;
	top: -12px;
	left: -5px;
}

#main .body .banner_recommend{
	top: 602px;
  left: 390px;
}

#main .body .interview{
	left: 555px;
	top: 554px;
	background: url(../img/interview_bg.png) 0 0 no-repeat;
	height: 75px;
	width:164px;
}

#main .body .live{
	background-color:#ffffff;
	height: 130px;
	width:233px;
	left: 5px;
	top: 420px;
}



/*-------------------------------------------------------------------
	nav
---------------------------------------------------------------------*/
#nav{
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 960px;
	margin: -161px auto 0 auto;
	background: url(../img/nav_bg.png) center center repeat;
}
#nav .banner_recommend {
	width: 950px;
	margin: 3px auto 0;
	position: relative;
}
#nav .banner_recommend .recommend_update {
	position: absolute;
	top: -6px;
	left: -7px;
}
#nav .body{
	position: relative;
	width: 960px;
	height: 72px;
	margin: 0 auto;
}
#nav .body .btn{
	position: absolute;
	top: 3px;
}
#nav .body .introduction{
	left: 7px;
}
#nav .body .point{
	left: 327px;
}
#nav .body .bonus{
	left: 647px;
}



/*-------------------------------------------------------------------
	introduction
---------------------------------------------------------------------*/
#introduction{
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	background: url(../img/introduction_bg.jpg) center center no-repeat;
	background-size: cover;
}
#introduction .body{
	position: relative;
	width: 960px;
	height: 756px;
	margin: 0 auto;
}
#introduction .body .category{
	position: absolute;
	top: 34px;
	left: 1px;
}
#introduction .body .title{
	position: absolute;
	top: 105px;
	left: 452px;
}
#introduction .body .lead{
	position: absolute;
	top: 230px;
	left: 453px;
}
#introduction .body .img01{
	position: absolute;
	top: 99px;
	left: 13px;
}
#introduction .body .text01{
	position: absolute;
	top: 361px;
	left: 20px;
}
#introduction .body .img02{
	position: absolute;
	top: 424px;
	left: 13px;
}
#introduction .body .text02{
	position: absolute;
	top: 615px;
	left: 19px;
}
#introduction .body .img03{
	position: absolute;
	top: 424px;
	left: 323px;
}
#introduction .body .text03{
	position: absolute;
	top: 613px;
	left: 328px;
}
#introduction .body .section_wii{
	position: absolute;
	top: 551px;
	left: 637px;
	width: 257px;
	height: 154px;
	background: url(../img/introduction_wii_bg.png) 0 0 no-repeat;
}
#introduction .body .section_wii .text{
	padding: 24px 0 0 30px;
}
#introduction .body .section_wii .btn{
	padding: 14px 0 0 21px;
}
#introduction .body .character,
#introduction .body .character_shadow{
	position: absolute;
	top: 211px;
	left: 694px;
	visibility: hidden;
}

.no-js #introduction .body .character,
.no-js #introduction .body .character_shadow {
	visibility: visible;
}



/*-------------------------------------------------------------------
	point
---------------------------------------------------------------------*/
#point{
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	background: url(../img/point_bg.jpg) center center no-repeat;
	background-size: cover;
}
#point .body{
	position: relative;
	width: 960px;
	height: 652px;
	margin: 0 auto;
}
#point .body .category{
	position: absolute;
	top: 34px;
	left: 1px;
}
#point .body .title{
	position: absolute;
	top: 51px;
	left: 452px;
}
#point .body .lead{
	position: absolute;
	top: 175px;
	left: 452px;
}
#point .body .hardware{
	position: absolute;
	top: 111px;
	left: 16px;
	visibility: hidden;
}
.no-js #point .body .hardware{
	visibility: visible;
}
#point .body .section_collection .stitle{
	position: absolute;
	top: 296px;
	left: 452px;
}
#point .body .section_collection .img01{
	position: absolute;
	top: 318px;
	left: 445px;
}
#point .body .section_collection .img02{
	position: absolute;
	top: 318px;
	left: 610px;
}
#point .body .section_collection .img03{
	position: absolute;
	top: 318px;
	left: 775px;
}
#point .body .section_collection .text{
	position: absolute;
	top: 433px;
	left: 452px;
}
#point .body .section_amiibo{
	position: absolute;
	top: 509px;
	left: 450px;
	width: 488px;
	height: 97px;
	background: url(../img/point_amiibo_bg.png) 0 0 no-repeat;
}
#point .body .section_amiibo .stitle{
	float: left;
	padding-top: 27px;
	padding-left: 36px;
}
#point .body .section_amiibo .btn{
	float: left;
	padding-top: 10px;
	padding-left: 38px;
}
#point .body .section_amiibo .character{
	position: absolute;
/* 	padding-left: 370px; */
	visibility: hidden;
	width: 97px;
	height: 142px;
	top:-18px;
	right: 16px;
}
.no-js #point .body .section_amiibo .character{
	visibility: visible;
}



/*-------------------------------------------------------------------
	bonus
---------------------------------------------------------------------*/
#bonus{
	position: relative;
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	background: #6e6054 url(../img/bonus_bg_pattern.png) center center repeat;
}
#bonus:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: 2030px;
	height: 766px;
	margin-left: -1015px;
	background: url(../img/bonus_bg.png) 0 0 no-repeat;
}
#bonus .body{
	position: relative;
	width: 960px;
	height: 766px;
	margin: 0 auto;
	background: url(../img/bonus_bg_frame.png) 22px 44px no-repeat;
}
#bonus .body .section_lead{
	position: relative;
	width: 960px;
	height: 314px;
}
#bonus .body .section_lead .category{
	position: absolute;
	top: 31px;
	left: 355px;
}
#bonus .body .section_lead .title{
	position: absolute;
	top: 132px;
	left: 70px;
}
#bonus .body .section_lead .lead{
	position: absolute;
	top: 181px;
	left: 70px;
}
#bonus .body .section_lead .img{
	position: absolute;
	top: 93px;
	left: 668px;
}
#bonus .body .section_caution{
	position: relative;
	width: 960px;
	height: 367px;
	background: url(../img/bonus_caution_bg.png) 64px 0 no-repeat;
}
#bonus .body .section_caution .stitle{
	position: absolute;
	top: 35px;
	left: 100px;
	width: 760px;
	height: 27px;
	text-align: center;
	border-bottom: 1px solid #8a847a;
}
#bonus .body .section_caution .hd01{
	position: absolute;
	top: 87px;
	left: 100px;
}
#bonus .body .section_caution .text01{
	position: absolute;
	top: 93px;
	left: 258px;
}
#bonus .body .section_caution .attention01{
	position: absolute;
	top: 118px;
	left: 258px;
}
#bonus .body .section_caution .hd02{
	position: absolute;
	top: 161px;
	left: 100px;
}
#bonus .body .section_caution .text02{
	position: absolute;
	top: 161px;
	left: 257px;
}
#bonus .body .section_caution .text03{
	position: absolute;
	top: 218px;
	left: 483px;
}
#bonus .body .section_caution .attention02{
	position: absolute;
	top: 243px;
	left: 258px;
}
#bonus .body .section_caution .btn{
	position: absolute;
	top: 315px;
	left: 257px;
}



/*-------------------------------------------------------------------
	mouseover
---------------------------------------------------------------------*/
#main .body .banner_kisekae_home a,
#main .body .banner a,
#nav .banner_recommend a,
#nav .body .btn a,
#introduction .body .section_wii .btn a,
#point .body .section_amiibo .btn a,
#bonus .body .section_caution .btn a,
#footer .body .btn_pagetop a{
	-webkit-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#main .body .banner a:hover{
	opacity: 0.75;
	filter: alpha(opacity=75);
	ms-filter: "alpha(opacity=75)";
}
#main .body .banner_kisekae_home a:hover,
#nav .body .btn a:hover,
#nav .banner_recommend a:hover,
#introduction .body .section_wii .btn a:hover,
#point .body .section_amiibo .btn a:hover,
#bonus .body .section_caution .btn a:hover,
#footer .body .btn_pagetop a:hover,
#main .body .interview a:hover,
#main .body .live a:hover{
	opacity: 0.85;
	filter: alpha(opacity=85);
	ms-filter: "alpha(opacity=85)";
}
#footer .body .nintendo a,
#footer .body .new3ds a{
	display: block;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	-webkit-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#footer .body .nintendo a:hover,
#footer .body .new3ds a:hover{
	border-bottom-color: #FFFFFF;
	opacity: 0.6;
	filter: alpha(opacity=60);
	ms-filter: "alpha(opacity=60)";
}