@charset "shift-jis";
@import "reset.css";

html { height: 100%; }
body { font-size:12px; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',"MS P Gothic", Osaka, sans-serif; }
body { -webkit-text-size-adjust: 100%; }

* { word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }

/* !clearfix */
.cfix { zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }

/* !Links */
a:link { color:#fff; text-decoration:none; }
a:visited { color:#fff; text-decoration:none; }
a:hover { color:#fff; text-decoration:underline; }
a:active { color:#fff; text-decoration:underline; }

.left { float: left; }
.right { float: right; }

html#bg { background: url(../images/common/bg_contents02.png) ; }
body#lower { background: url(../images/common/bg_contents.jpg) 50% 201px no-repeat; min-height: 100%; min-width: 960px; }

/*
html#dot { background: url(../images/top/bg_dot.png) left center; }
#top { background: url(../images/top/bg_body.png) repeat-x left center; }
*/
#top { background: url(../images/top/bg_dot.png) center top; }

#top #footer .bdrLnk { color: #ffff00; }

#top #flashArea { background: #ff003b /* url(../images/top/bg_flash.png) center top repeat-x */; line-height: 1; font-size: 1px; height: 690px; min-width: 960px; max-width: 1300px; margin: 0 auto; overflow: hidden; position: relative; }
#top #flashArea #flashContent { position: absolute; top: 0; left: 50%; margin: 0 0 0 -650px; width: 1300px; }
#top #flashArea .inner { position: relative; zoom:1; width: 100%; margin: 0 auto; height: 690px; }
/*
#top #flashArea .inner #mainImg { position: absolute; left: 50%; top:0; margin: 0 0 0 -650px; width: 1300px; height: 630px; background: #fff; }
#top #flashArea .inner #mainImg img { position: absolute; top: 0; left: 0; }
#top #flashArea .inner #mainImg .img2 { display: none; }
*/
#top #flashArea .inner #mainImg { position: absolute; left: 50%; top:0; margin: 0 0 0 -650px; width: 1300px; height: 630px; /* background: #ff003b;  */}
#top #flashArea .inner #mainImg img { position: absolute; top: 0; left: 0; }
#top #flashArea .inner #mainImg .elm {}
#top #flashArea .inner #mainImg .light { top: 340px; -webkit-transform-origin-y: 90%; }
#top #flashArea .inner #mainImg .silhouette { top: 424px; left: 508px; }
#top #flashArea .inner #mainImg .balls0 { top: 300px; left: 440px; -webkit-transform-origin-y: 100%;  }
#top #flashArea .inner #mainImg .balls1 { top: 49px; left: 262px; -webkit-transform-origin-y: 100%; }
#top #flashArea .inner #mainImg .balls2 { top: -60px; left: 5px; -webkit-transform-origin-y: 100%; }

/* #top #flashArea .inner #mainImg .img2 { display: none; } */


#top #flashArea .inner #nintendoLogo { position: absolute; left: 50%; top:22px; margin: 0 0 0 -464px; }
#top #flashArea .inner #wiiLogo { position: absolute; left: 50%; top:13px; margin: 0 0 0 380px ; }
#top #flashArea .inner #mainlogo { position: absolute; left: 50%; top:28px; margin: 0 0 0 -190px; }
#top #flashArea .inner #btn01 { position: absolute; left: 50%; bottom: 10px; margin: 0 0 0 -352px ; }
#top #flashArea .inner #btn02 { position: absolute; left: 50%; bottom: 11px; margin: 0 0 0 -124px ; }
#top #flashArea .inner #btn03 { position: absolute; left: 50%; bottom: 11px; margin: 0 0 0 136px ; }
#top #flashArea .inner #btn04 { position: absolute; left: 50%; bottom: 26px; margin: 0 0 0 193px ; }

#top #cssOpening { position: absolute; zoom:1; margin: 0 0 0 -650px; height: 630px; top: 0; left: 50%; width: 1300px; overflow: hidden; display: none; }
.item { position: absolute; top: 50%; left: 50%; margin: 0;
  -webkit-transform: scale3d( 0, 0, 0 ); 
  display: none;
}
#top h1 img.away { -webkit-transform: scale3d( 1.5, 1.5, 0); opacity: 0; }
#localNav li.away { -webkit-transform: scale3d( 1.5, 1.5, 0); opacity: 0; }

#top h1 img.away.fadeIn, 
#localNav li.away.fadeIn { -webkit-transform: scale3d( 1, 1, 0);  -webkit-transition: 0.5s; opacity: 1; }

#top .elm.away { -webkit-transform: scale( 0.3); opacity: 0; }
#top .elm.balls0.away { -webkit-transform: scale( 0.3); opacity: 0; }
#top .elm.balls1.away { -webkit-transform: scale( 0.5); opacity: 0; }
#top .elm.balls2.away { -webkit-transform: scale( 0.7); opacity: 0; }
#top .elm.away.fadeIn { -webkit-transform: scale( 1);  -webkit-transition: 1s; opacity: 1; }





.bigger {
  -webkit-animation-name: bigger;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-iteration-count: 1;
}
.biggerStop {
  -webkit-animation-name: biggerStop;
  -webkit-animation-duration: 4.5s;
  -webkit-animation-iteration-count: 1;
}

#bgSpace.fade {
  -webkit-transition: 3s;
  opacity: 0;
  -webkit-transform: scale3d( 2, 2, 0);
}



@-webkit-keyframes bigger {
  0%   { opacity: 0; -webkit-transform: scale3d( 0, 0, 0); -webkit-animation-timing-function: ease-in; }
  10%  { opacity: 0; }
  40%  { opacity: 1; }
  80%  { opacity: 0; }
  100%  { opacity: 0; -webkit-transform: scale3d( 5, 5, 0); }
}

@-webkit-keyframes biggerStop {
  0%   { opacity: 0; -webkit-transform: scale3d( 0, 0, 0); -webkit-animation-timing-function: ease-in-out; }
  10%  { opacity: 0; }
  40%  { opacity: 1; -webkit-transform: scale3d( 1, 1, 1); }
  60%  { opacity: 1; -webkit-transform: scale3d( 1, 1, 1); -webkit-animation-timing-function: ease-in; }
  70%  { opacity: 0; }
  100%  { opacity: 0; -webkit-transform: scale3d( 5, 5, 0); }
}
#top #loadingTxt { position: absolute; top: 50%; left: 50%; margin: 50px 0 0 -57px; }
#top #spiner { position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -70px;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
.fade {
  -webkit-transition: 1s;
  opacity: 0;
  -webkit-transform: scale3d( 2, 2, 0);
}


@-webkit-keyframes spin {
  0%   { -webkit-transform: rotate3d(0,0,0,0); }
  50%  { -webkit-transform: rotate3d(0,0,1,180deg); }
  100%  { -webkit-transform: rotate3d(0,0,1,360deg); }
}



#top #skipBtn { position: absolute; left: 50%; top: 612px; margin: 0 0 0 -93px ; }

#top #container { min-width: 960px; margin: 0 auto; background: #ff003b; max-width: 1300px; }
#top #container .inner { height: 156px; position: relative; zoom:1; width: 760px; }
#top #container .inner .thumImg { position: absolute; left: 0; top:0; }
#top #container .inner .detail { position: absolute; left: 116px; top: 0; }
#top #container .inner .detail .icnCero { position: absolute; right: 10px; top: 9px; }
#top #container .inner .backNumber { position: absolute; left: 116px; top: 79px; }
#top #container .inner .tvcm { position: absolute; right: 14px; }
#top #footer { padding: 0; }
#footer { padding: 0 0 113px; }
#footer .bdrLnk { color: #ff003a; border-top:1px solid #fff; border-bottom: 1px solid #fff; width: 920px; font-size: 11px; font-weight: normal; line-height: 1.1; margin: 0 auto; }
#footer .bdrLnk .none { background: none!important; }
#footer .bdrLnk .leftArea { float: left; margin: 14px 0 ; }
#footer .bdrLnk .leftArea li { float: left; padding: 0 10px 0 0 ; margin: 0 10px 0 0 ; background: url(../images/common/ftr_bdr.png) right center no-repeat; }
#footer .bdrLnk .rightArea { float: right; margin: 14px 0 ; }
#footer .bdrLnk .rightArea li { float: left; padding: 0 0 0 10px ; margin: 0 0 0 10px ; background: url(../images/common/ftr_bdr.png) left center no-repeat; }
#footer small { display: block; width: 715px; margin: 0 auto ; padding: 16px 0 56px; }

#header { background: url(../images/common/bg_header.png) center top no-repeat; height: 201px; }
#header .inner { width: 960px; height: 200px; margin: 0 auto; position: relative; }
#header #nintendoLogo { position: absolute; left: 20px; top: 22px;}
#header #wiiLogo { position: absolute; right: 20px; top: 13px; }
#header #hdrBtn { position: absolute; right:36px; top: 80px; }
#header #hdrBtn li { float: left; margin: 0 0 0 7px ; _margin:0 0 0 7px;  }
#header h1 { position: absolute; left: 60px; bottom: -41px; }

#container {  }
#container .inner { width: 960px; margin: 0 auto; }
#container #btnTop { text-align: right; margin: 23px 20px 36px 0 ; font-size: 1px; line-height: 1;  }

#contents #leadArea { position: relative; zoom: 1; font-size: 1px; line-height: 1; zoom:1; }
#contents #leadArea #mainImg { position: absolute; right: 0; top:0 ; }
#contents #leadArea h2 { margin: 0 0 27px; }
#contents .pink .lineCnt { background: url(../images/common/pink_cts.png) left center repeat-y; }
#contents .blue .lineCnt { background: url(../images/common/blue_cts.png) left center repeat-y; }

#howto #leadArea { margin: 64px 36px 49px 60px; }
#howto #box01 { text-align: center; font-size: 1px; line-height: 1; margin: 0 0 26px; }
#howto #box01 .lineCnt { padding: 19px 0 18px; }
#howto #box01 .boxImg { margin: 0 0 32px; }
#howto #box01 .boxInner { width: 700px; margin: 0 auto; }
#howto #box01 .fltBox { width: 330px; }
#howto #box01 .boxInner p { margin: 20px 0 0 ; text-align: center; }
#howto #box02 .lineCnt { padding: 16px 60px 23px 57px; position: relative; zoom: 1; height: 202px; font-size: 1px; line-height: 1; }
#howto #box02 .lineCnt .boxImg { position: absolute; top: 16px;; right: 60px; }
#howto #box02 .lineCnt h3 { margin: 0 0 27px ; }
#howto #box02 .lineCnt p { margin: 0 0 0 32px ; }

#lineup #leadArea { margin: 56px 18px 33px 58px; height: 322px; }
#lineup #leadArea h2 { margin: 5px 0 27px; }
#lineup #box01 .lineCnt { text-align: center; font-size: 1px; line-height: 1; zoom: 1; }
#lineup #box01 h3 { padding: 10px 0 11px; }
#lineup #box01 #btnArea { padding: 0 0 20px; }

#mode #leadArea { margin: 60px 53px 72px 57px; }
#mode .category { position: relative; zoom: 1; padding: 0 0 0 40px; font-size: 1px; line-height: 1; }
#mode .category h3 { margin: 0px 0px 23px ; }
#mode .category h4 { margin: 0 0 24px; }
#mode #cate01 .cateImg { position: absolute; right: 61px; top: 40px; }
#mode #cate01 { margin: 0 0 39px; }
#mode #cate02 .cateInner { margin: 0 100px 48px 61px; position: relative; height: 186px; }
#mode #cate02 #cate02_1 { padding: 3px 0 0 361px; }
#mode #cate02 #cate02_2 { padding: 16px 368px 0 0; }
#mode #cate02 #cate02_1 .cateImg { position: absolute; left: 0; top: 0; }
#mode #cate02 #cate02_2 .cateImg { position: absolute; right: 0; top: 0; }
#mode #cate03 .cateImg { position: absolute; right: 61px; top: 40px; }
#mode #cate03 { margin: 0 0 61px; height: 238px;}
#mode .blue .lineCnt { position: relative; zoom: 1; padding: 6px 0 0 57px; }
#mode .blue .lineCnt .boxImg { position: absolute; right: 61px; }
#mode .blue .lineCnt h3 { margin: 0 0 17px; }
#mode #box01 { margin: 0 0 36px; }
#mode #box01 .lineCnt { height: 235px; }
#mode #box01 .lineCnt .boxImg { top:6px; }
#mode #box02 .lineCnt .boxImg { top:19px; height: 202px; }
#mode #box02 .lineCnt p { margin: 0 0 77px; }
#mode #box02 .lineCnt ul { padding: 0 0 26px; }
#mode #box02 .lineCnt li { width: 260px; float: left; margin: 0 30px 0 0 ; text-align: center; }
#mode #box02 .lineCnt li h4 { background:url(../images/mode/bdr05.png) center bottom no-repeat ; width: 260px; padding: 0 5px 25px; margin: 0 0 1px; }
#mode #box02 .lineCnt li.last { margin: 0; }
#mode #box02 .lineCnt li .boxImg01 { padding: 0 0 0 3px; }
#mode #box02 .lineCnt li .boxImg02 { padding: 0 0 0 4px; }

#movie h2 { margin: 66px 0 30px 60px ; }
#movie .lineCnt { padding: 14px 56px 21px ; }
#movie #flashArea { width: 513px; position: relative; zoom: 1; margin: 0 auto 43px ; }
#movie #flashArea #flashContent { position: absolute; top: 51px; left: 15px; width: 480px; height: 310px; }
#movie #btnArea { /* background: url(../images/movie/bg_btnarea.png) center center no-repeat ; */ font-size: 1px; line-height: 1; }
#movie #btnArea li { width: 188px; height: 173px; float: left; }
#movie #btnArea li a { width: 188px; height: 173px; overflow: hidden; position: relative; display: block; }
#movie #btnArea li img { position: absolute; left: 0; top:0;  }
#movie #btnArea li a.current img { left: -376px !important; cursor: default; }
#movie #btnArea li a.hover img { left: -188px; }
#movie #btnArea #btn01 { margin: 0 19px 0 0 ; padding: 0 18px 0 0 ; background: url(../images/movie/bdr.png) right top no-repeat ; }
#movie #btnArea #btn02 { margin: 0 20px 0 0 ; }
#movie #btnArea #btn03 { margin: 0 19px 0 0 ; padding: 0 18px 0 0 ; background: url(../images/movie/bdr.png) right top no-repeat ; }

body#noscript { background: url(../images/common/bg_contents.jpg) 50% 0 no-repeat; min-height: 100%; _height:100%; min-width: 960px; position: relative; zoom: 1; }
#noscript .wrapper { min-height: 600px; }
#noscript #container { position: absolute; top:50%; left: 50%; margin: -103px 0 0 -247px ; width: 494px; }
#noscript p { margin: 0 0 50px; }
#noscript .btn { width: 185px; margin: 0 auto; }

/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-tmp iframe, .fancybox-tmp object {
	vertical-align: top;
	padding: 0;
	margin: 0;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	padding: 0;
	margin: 0;
	background: none;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	padding: 0;
	margin: 0;
	position: relative;
	outline: none;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 10px;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading span {
	background-image: url(../images/common/fancybox_loading.gif);
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8020;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('../images/common/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
  background:url(../images/common/btn_close.png) ;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 188px 0 0 -92px;
	width: 185px;
	height: 44px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-close:hover { background-position: 0 -44px; }

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 67px;
	height: 67px;
	cursor: pointer;
	background: transparent url('../images/common/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
	display: block;
}

.fancybox-prev {
  background:url(../images/common/btn_back.png) top left no-repeat ;
  position: absolute;
  top:50%;
  left:50%;
  margin: 0 0 0 -319px;
}

.fancybox-next {
  background:url(../images/common/btn_next.png) top left no-repeat ;
  position: absolute;
  top:50%;
  left:50%;
  margin: 0 0 0 257px;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 66px;
	height: 66px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
	display: none!important;
}

.fancybox-prev span {
	left: 20px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 20px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}
.fancybox-nav:hover {
  background-position: 0 -67px;
}


.fancybox-tmp {
	position: absolute;
	top: -9999px;
	left: -9999px;
	padding: 0;
	overflow: visible;
	visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: #000;
}

#fancybox-overlay.overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8030;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	margin-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}