@charset "Shift_JIS";
/*------------------------------------------------------------------------------
  RESET
------------------------------------------------------------------------------*/
body,div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,table,th,td,form,fieldset,legend,label,input,textarea,embed,object{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;}
th,td{text-align:left;vertical-align:top;font-weight:normal;word-wrap:break-word;word-break:break-all;}
ul,li{list-style:none;}
img{border:0;line-height:0;vertical-align:bottom;-ms-interpolation-mode:bicubic;}
sub,sup{font-size:100%;line-height:0;}
sup{vertical-align:0.333em;}
sub{vertical-align:baseline;}
em{font-style:normal;}
br{letter-spacing:0 !important;}
object,object:focus,embed{outline:none;}
*{filter:inherit;border:none;}
a{text-decoration:none;outline:none;}
li{line-height:0.1;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
a:link,a:visited{color:#4b4b4b;}
a:hover,a:active,a:focus{color:#777;}


/*--- FOR JS CONTROL ---*/
.none {display:none !important;}
.no-js .none {display:none !important;}
.hidden {visibility:hidden;}
.no-js .hidden{visibility:visible;}

/*------------------------------------------------------------------------------
  FONT
------------------------------------------------------------------------------*/
body { font-family: "‚l‚r ‚oƒSƒVƒbƒN","Hiragino Kaku Gothic Pro","ƒqƒ‰ƒMƒmŠpƒS Pro W3",sans-serif; letter-spacing: 0.01em;}
* html body { font-family: "‚l‚r ‚oƒSƒVƒbƒN",sans-serif;}
*:first-child + html body { font-family: "‚l‚r ‚oƒSƒVƒbƒN",sans-serif;}
body.mac { font-family: "Hiragino Kaku Gothic Pro","ƒqƒ‰ƒMƒmŠpƒS Pro W3",sans-serif;}

/*------------------------------------------------------------------------------
  LAYOUT
-----------------------------------------------------------------------------*/
html, body {
  width: 100%;
  height: 100%;
	background-color: #4c0000;  
}
#bgimg {
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	margin:auto;
	width: 100%;
	height: 100%;
	min-width: 960px;
	background-image:url(../img/bg.jpg);
	background-position: right top;
	background-repeat: no-repeat;
}

/* ---------- HEADER ---------- */

#header {
	position: fixed;
	height: 100%;	
	width: 100%;
	min-width: 960px;
	top:0;
	left: 0;
	overflow: hidden;
}
.nintendo_logo {
	position: fixed;	
	top: 25px;
	left: 26px;
}
.touch .nintendo_logo {
	position: absolute;
	top: 105px;
	z-index: 200;
}

.sbr3ds_logo {
	position: absolute;	
	top: 10px;
	right: 52.6%;
	width: 30%;
	min-width: 300px;
	max-width: 411px;
}
.sbr3ds_logo img{
		width: 100%;
		height: auto;
}

.sbr3ds_chara {
	position: absolute;	
	top: 14px;
	right: 53%;
	width: 80%;
	min-width: 760px;
	max-width: 1056px;
}
.wide .sbr3ds_chara {
	left: 50%;
	margin-left: -1100px
}
.sbr3ds_chara img {
		width: 100%;
		height: auto;
}

/* ---------- MAIN ---------- */
#main {
	width: 100%;
	min-width: 960px;
	position: relative;
	overflow: hidden;
	padding-bottom: 69px;
}
#main .section {
	position: relative;
	width: 960px;
	padding-top:45px;
	margin: 0 auto;
}
#main .section .inner {
	width: 564px;
	margin-left:396px;
	position: relative;
}

#main .in_hdr {
	text-align: right;
	padding-top: 10px;
	padding-bottom: 14px;
	width: 100%;
}
.cts01,
.cts02,
.cts03,
.in_ftr {
	position: relative;
	right: -25px;
	padding-bottom:40px;
}

.cat_num {
	position: relative;
	background-color:#000;
	height: 6px;
}
.cat_num span{
	position: absolute;
	top: 34px;
	right: 0;	
}
.cat_num:before {
	position: absolute;
	content: "";
	background: url(../img/tab_item.png) 0 0 no-repeat;
	height: 34px;
	width: 190px;
	position: absolute;
	top: 0;
	right: 0;	
} 

/* .thin for IE8 */
.thin	.cat_num {
		display: none;
}

.thin	#main .in_hdr {
	width: 960px;
}
.thin .cts01:before,
.thin .cts02:before,
.thin .cts03:before {
	content: "";
	height: 7px;
	background: #000;
	width: 200%;
	position: absolute;
	top:0;
	right:66px;
}
.thin .cts01:after,
.thin .cts02:after,
.thin .cts03:after {
	content: "";
	background: url(../img/tab_item.png) 0 0 no-repeat;
	height: 34px;
	width: 190px;
	position: absolute;
	top: 0;
	right:66px;
}

.thin .cts01 .inner:before { 
	content: "";
	background: url(../img/num01_thin.png);
	height: 34px;
	width: 46px;
	position: absolute;
	top: -45px;
	right: 20px;
}
.thin .cts02 .inner:before {
	content: "";
	background: url(../img/num02_thin.png);
	height: 34px;
	width: 46px;
	position: absolute;
	top: -45px;
	right: 20px;
}
.thin .cts03 .inner:before {
	content: "";
	background: url(../img/num03_thin.png);
	height: 34px;
	width: 46px;
	position: absolute;
	top: -45px;
	right: 20px;
}

@media screen and (max-width:1160px){
	.cat_num {
		display: none;
	}
	#main .in_hdr {
	width: 960px;
	}
	.cts01:before,
	.cts02:before,
	.cts03:before {
		content: "";
		height: 7px;
		background: #000;
		width: 200%;
		position: absolute;
		top:0;
		right:66px;
	}
	.cts01:after,
	.cts02:after,
	.cts03:after {
		content: "";
		background: url(../img/tab_item.png) 0 0 no-repeat;
		height: 34px;
		width: 190px;
		position: absolute;
		top: 0;
		right:66px;
	}
	
	.cts01 .inner:before { 
		content: "";
		background: url(../img/num01_thin.png);
		height: 34px;
		width: 46px;
		position: absolute;
		top: -45px;
		right: 20px;
	}
	.cts02 .inner:before {
		content: "";
		background: url(../img/num02_thin.png);
		height: 34px;
		width: 46px;
		position: absolute;
		top: -45px;
		right: 20px;
	}
	.cts03 .inner:before {
		content: "";
		background: url(../img/num03_thin.png);
		height: 34px;
		width: 46px;
		position: absolute;
		top: -45px;
		right: 20px;
	}
/* end / @media */
}

.section01_btn,
.section02_btn,
.section03_sbr_btn {
	padding-top:22px;
	text-align: center;
}
.section03_sbr_btn {
	position: relative;
}
#main .section.in_ftr {
	padding-top:0;
}
.section03_sbr_btn:before{
	content: "";
	display: block;
	background:url(../img/btn_bg.png) 0 0 repeat-x;
	position: absolute;
	top:24px;
	left: -200%;
	width: 400%;
	height: 100px;
}
.section03_sbr_btn a{
	position: relative;
	z-index: 200;
}
.new3ds_logo {
	padding-right: 20px;
}
.new3ds_logo,
.section01_btn,
.section02_btn,
.section03_btn {
	position: relative;
	z-index: 200;
}

.section02_note {
	padding-top:12px;
}
.section03_images {
	margin-bottom: 50px;
} 

.section03_3ds .slidebox{
	position: absolute;
	top: 0;
	left: 0;
}
.section03_3ds .slidebox li{
	position: absolute;
	top: 0;
	left: 20px;
}
.cts03 {
	text-align: center;
}
.section03_stitle {
	margin-bottom: 16px;	
}
.section03_info {
	margin-bottom: 22px;
}

/* ---------- NAV ---------- */
#nav {
	height: 69px;
	box-sizing: border-box;
	border-top:3px solid #a80000;
	background: #000;
	position: fixed;
	bottom:0;
	left: 0;
	width: 100%;
	z-index: 500;
} 
#nav:after {
	content: "";
	position: absolute;
	top: -24px;
	left: 0;
	width: 100%;
	height: 24px;
	background: url(../img/footer_shadow.png) 0 0 repeat-x;
}
#nav .inner {
	width: 960px;
	margin: 0 auto;
}
#nav .inner  li {
	display: inline-block;
	position: relative;
}
#nav .inner li a {
	position: relative;
	display:inline-block;
	width: 100%;
	height: 100%;
}


/* ---------- SP_FIX ---------- */
.touch #header {
	top:18%;
	left: auto;
	right: 0;
}
.touch .sbr3ds_chara {
	right: 53%;
/* 	right: 520px; */
/* 	right: auto; */
}
body.touch {
	min-width: 980px;
}
.touch #main {
	z-index: 20;
}
.touch #nav {
	height: auto;
	max-height: 69px;
	overflow-y:hidden;
}
.touch #nav .inner {
	width: 100%;
	max-width: 960px;
}
.touch #nav .inner  li {
	width: 25%;
}
.touch #nav .inner li img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.touch .cts02:before,
.touch .cts03:before {
	width: 480px;
	left: auto;
	right: 74px;
}

.touch #nav{
	position: absolute;
	top:0;
}
.touch #main {
	top:84px;
	padding-bottom: 0;
}
.touch #bgimg{
	background-position: 80% 0;
}