@charset 'utf-8';

/*-----------------------------------------------------
html
-------------------------------------------------------*/
html{
	overflow-y: scroll;
}


/*-----------------------------------------------------
body
-------------------------------------------------------*/
body{
	line-height: 1.6;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',Arial,Osaka,Sans-Serif;
	font-size: 12px;
	font-size: 75%\9;
	letter-spacing: .03em;
	color: #333;

	-webkit-text-size-adjust: none;
}
input,textarea{
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',Arial,Osaka,Sans-Serif;
}

/* for IE6 */
* html body{
	font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
}
* html input,
* html textarea{
	font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
}
/* for IE9 */
body:not(:target){
	font-size: 75%\9;
}

/*-----------------------------------------------------
a
-------------------------------------------------------*/
a:link,
a:visited{
	text-decoration: underline;
	color: #0016ff;
}
a:hover,
a:active{
	text-decoration: none;
	color: #ff0000;
}
#Content ul.share li a,
#Content ul li.cero a,
#Content ul li.amiibo a,
div.footer div.lower ul li.published_by a,
div.footer div.lower ul li.available a {
	-webkit-transition: all .2s cubic-bezier(.645, .045, .355, 1.000);
	        transition: all .2s cubic-bezier(.645, .045, .355, 1.000);
}
#Content ul.share li a img,
#Content ul li.cero a img,
#Content ul li.amiibo a img,
div.footer div.lower ul li.published_by a img,
div.footer div.lower ul li.available a img {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
#Content ul.share li a:hover,
#Content ul li.cero a:hover,
#Content ul li.amiibo a:hover,
div.footer div.lower ul li.published_by a:hover,
div.footer div.lower ul li.available a:hover {
	opacity: .7;
}


/*-----------------------------------------------------
nonvisual-menu
-------------------------------------------------------*/
div.nonvisual-menu{
	width: 0;
	height: 0;
	overflow: hidden;
	/* except MacIE \*/position: absolute;/* end */
	top: 0;
	left: 0;
	line-height: 1px;
	font-size: 1px;
	color: #fff;
}

div.nonvisual-menu a{
	line-height: 1px;
	text-decoration: none;
	font-size: 1px;
	color: #fff;
}
#main-Contents img{
	height: 1px;
	position: absolute;
	top: 0px;
	left: 0px;
	border: none!important;
}

/*-----------------------------------------------------
Ie6Update
-------------------------------------------------------*/
#Ie6Update{
	width: 100%;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	text-align: center;
	border-bottom: 2px solid #6f6f6f;
}
#Ie6Update div.bg{
	width: 100%;
	position: absolute;
	z-index: 101;
	top: 0;
	left: 0;
	background: #f9f9f9;
}
#Ie6Update p{
	position: relative;
	z-index: 102;
	padding: 10px 0 10px 0;
}

/*-----------------------------------------------------
Container
-------------------------------------------------------*/
#Container {
	min-width: 960px;
	overflow-x: hidden;
}

/*-------------------------------------
Header
---------------------------------------*/
div.header {
	height: 254px;
	position: relative;
	line-height: 1;
	background: url('../images/header_bg.jpg') center center no-repeat;
}
div.header:before,
div.header:after,
#Container.character:before,
#Container.character:after {
	content: '';
	width: 50%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
}
div.header:before,
#Container.character:before {
	right: 50%;
	margin-right: 800px;
	background: #9d231a;
}
div.header:after,
#Container.character:after {
	left: 50%;
	margin-left: 800px;
	background: #133e78;
}
div.header h1 {
	position: relative;
	z-index: 110;
	padding: 36px 0 0;
	text-align: center;
}
div.header ul.nav {
	width: 100%;
	position: absolute;
	z-index: 100;
	bottom: -88px;
	left: 0;
}
div.header ul.nav li {
	position: absolute;
	bottom: 0;
	left: 50%;
}
div.header ul.nav li.nav_item01 {margin-left: -442px;}
div.header ul.nav li.nav_item02 {margin-left: -220px;}
div.header ul.nav li.nav_item03 {margin-left: 2px;}
div.header ul.nav li.nav_item04 {margin-left: 224px;}
div.header ul.nav li a {display: inline-block;}

/* pankuzu
---------------------*/
#Content dl.pankuzu{

}
#Content dl.pankuzu dt{
	overflow: hidden;
	display: none;
	line-height: 1px;
	font-size: 1px;
}
#Content dl.pankuzu dd{

}
#Content dl.pankuzu ul{

}
#Content dl.pankuzu ul li{

}
#Content dl.pankuzu ul li a{

}


/*-------------------------------------
Main
---------------------------------------*/
#Main{

}

/* section
---------------------*/
#Main div.section{

}


/*-------------------------------------
Side
---------------------------------------*/
#Side{

}


/*-------------------------------------
Common
---------------------------------------*/
div.base_wrap {
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center center;
}
div.base_inside {
	width: 960px;
	position: relative;
	margin: 0 auto;
}

/* ttl
---------------------*/
.section_ttl {
	position: relative;
	background: #fff;
}
.section_ttl img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/* pagetop
---------------------*/
p.pagetop {
	position: absolute;
	bottom: 68px;
	left: 50%;
	margin-left: -150px;
}
p.pagetop a {
	display: block;
/*	-webkit-transition: all 500ms cubic-bezier(.645, .045, .355, 1.000);
	        transition: all 500ms cubic-bezier(.645, .045, .355, 1.000);*/
}
p.pagetop a:hover {
	/*opacity: .7;*/
}

/* form
---------------------*/
input.input-usually,
textarea.input-usually{
	padding: 2px;
	font-size: 100%;
	border: 1px solid #809db9;
	background: #ffffff;
}
input.input-focus,
textarea.input-focus{
	border: 1px solid #ef7a00;
	background: #fffbd7;

	outline: none;
}

/*-------------------------------------
Footer
---------------------------------------*/
div.footer {
	background: #fff;
}
div.footer div.upper {
	height: 50px;
	overflow: hidden;
	line-height: 1;
	background: #f9ac00;
}
div.footer div.upper ul li {
	float: left;
	padding: 18px 0 19px;
}
div.footer div.upper ul li a {
	display: inline-block;
}
div.footer div.upper ul li:first-child {
	padding: 18px 25px 19px 10px;
}
div.footer div.upper ul li:last-child {
	float: right;
	padding: 18px 13px 19px 0;
}
div.footer div.lower {
	width: 960px;
	height: 85px;
	position: relative;
	margin: 0 auto;
}
div.footer div.lower ul li {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
div.footer div.lower ul li.published_by {
	height: 40px;
	left: 10px;
}
div.footer div.lower ul li.copyright {
	width: 387px;
	height: 26px;
	left: 0;
	right: 0;
	margin: auto;
}
div.footer div.lower ul li.available {
	height: 37px;
	right: 10px;
}

/*-------------------------------------
Overlay
---------------------------------------*/
div.overlay {
	width: 100%;
	height: 120%;
	display: none;
	opacity: 0;
	position: fixed;
	z-index: 110;
	top: 0;
	left: 0;
	background: #eee url('../images/modal_bg.jpg') center top no-repeat;
}
div.marathon_modal {
	width: 844px;
	display: none;
	opacity: 0;
	position: absolute;
	z-index: 200;
	top: 80px;
	left: 0;
	right: 0;
	margin: 0 auto 40px;
	padding: 0 8px 8px 8px;
	line-height: 1;
	border-radius: 8px;
	background: #128c3b;
}
div.marathon_modal h2 {
	padding: 26px 0 23px;
	text-align: center;
}
div.marathon_modal p.close {
	position: absolute;
	top: 20px;
	right: 20px;
}
div.marathon_modal p.close a { display: inline-block; }
div.marathon_modal div.box {
	height: 604px;
	background: url('../images/modal_box_bg.png') center top no-repeat;
}
div.marathon_modal h3 {
	margin: 0 0 41px;
	padding: 40px 5px 0 0;
	text-align: center;
}
div.marathon_modal ul.screen {
	width: 552px;
	margin: 0 auto 20px;
}
div.marathon_modal ul.screen li {
	display: inline;
}
div.marathon_modal ul.screen li:first-child {
	padding-right: 40px;
}
div.marathon_modal p.txt {
	text-align: center;
}
div.marathon_modal p.txt01 {
	margin: 0 0 38px;
}
div.marathon_modal p.txt02 a {
	display: inline-block;
	position: relative;
	top: -4px;
}
div.marathon_modal ul.chara li {
	position: absolute;
}
div.marathon_modal ul.chara li.chara01 {
	top: 221px;
	left: -66px;
}
div.marathon_modal ul.chara li.chara02 {
	top: 365px;
	right: -62px;
}