@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------
	Universal Style
------------------------------------------------------------------------------------------------------------------------*/
body{
background:#fff;
font-size:100.01%;
color:#624834;
-webkit-text-size-adjust:none;
}
html,body,div,
h1,h2,h3,h4,h5,h6,
p,dl,dt,dd,ul,ol,li,img,
table,caption,th,td,
form,fieldset,legend,input,textarea,select,
pre,code,blockquote,address{
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,
p,dl,dt,dd,ul,ol,li,img,
table,caption,th,td,
form,fieldset,legend,input,textarea,select,button,
div,pre,code,blockquote,address{
font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,sans-serif;
}
img{
max-width:100%;
border:0;
vertical-align:bottom;
}
ul{
list-style-position:outside;
list-style-type:none;
}
ol{
margin-left:2em;
list-style-position:outside;
}
dl dd{
margin-bottom:7px;
}
em{
font-style:normal;
color:#f00;
}
table{
border:medium none;
border-collapse:collapse;
}
th,td{
font-weight:normal;
vertical-align:top;
}
a:link{color:#624834;}
a:visited{color:#800080;}
a:hover,
a:active{color:#f90;}

fieldset{border:0;}
legend{display:none;}
input{vertical-align:middle;}
sup{vertical-align:text-top;line-height:0.6;}
sub{vertical-align:baseline;}
hr{display:none;}


/*	枠組み	*/

/*========================================================================================================================
	Base Layout
========================================================================================================================*/
body.news{background:#84d1ff;}
body.comic{background:#ffecb8;}
body.download{background:#eee8ff;}
body.profile{background:#ffe478;}
body.character{background:#c2ec70;}
body.stickers{background:#dcffdb;}

body.profile,
body.character{
position:relative;
overflow:hidden;
/*visibility:hidden;*/
}

#page{
min-width:320px;
overflow:hidden;
}


/*------------------------------------------------------------------------------------------------------------------------
	Header Area
------------------------------------------------------------------------------------------------------------------------*/
#header{
position:relative;
margin:0 auto;
padding:10px 64px 20px;
width:956px;
background:#fff;
}
#header #site-id{margin:0;}
.top #header{
position:relative;
z-index:3000;
margin:0 auto;
padding:0;
width:auto;
z-index:50;
}
.profile #header,
.character #header{
position:relative;
z-index:3000;
margin:0;
padding:0;
width:1px;
height:100px;
z-index:50;
background:transparent;
}
.top #header #site-id{
position:absolute;
top:50px;
left:4.2%;
z-index:2000;
width:14.2%;
}
.profile #header #site-id,
.character #header #site-id{
position:fixed;
top:20px;
left:20px;
}


/*------------------------------------------------------------------------------------------------------------------------
	GlobalNavi Area
------------------------------------------------------------------------------------------------------------------------*/
#global-nav{
display:block;
position:absolute;
top:0;
right:0;
z-index:6000;
width:130px;
}
.profile #global-nav,
.character #global-nav{position:fixed;}
#gnav-menu{display:none;}
#global-nav ul{
margin:0;
padding:18px 0 140px 6px;
border-radius:20px 0 0 20px;
background:#fff url(../images/bg/gnav-icon.png) 6px bottom no-repeat;
}
#global-nav ul li{
margin:0;
padding-bottom:2px;
background:url(../images/bg/line-dashed01.gif) left bottom repeat-x;
}
#global-nav ul li span{
position:absolute;
visibility:hidden;
}
#global-nav ul .sp-only{display:none;}


/*------------------------------------------------------------------------------------------------------------------------
	Contents Area
------------------------------------------------------------------------------------------------------------------------*/
#contents{
margin:0 auto;
padding:0 64px 50px;
width:956px;
min-height:900px;
background:#fff;
}
.top #contents{
margin:0 auto;
padding:30px 0.5% 50px;
width:auto;
min-height:0;
background:#fff;
}
.profile #contents,
.character #contents{
position:absolute;
top:0;
left:0;
z-index:1;
margin:0 auto;
padding:0;
width:100%;
min-height:980px;
background:none;
}


/*------------------------------------------------------------------------------------------------------------------------
	Footer Area
------------------------------------------------------------------------------------------------------------------------*/
#footer{/*margin-right:-124px;*/
position:relative;
padding:8px 0;
background:#0097d7;
}
#foot-nav{
position:absolute;
top:-50px;
left:50%;
margin:0 0 0 -400px;
width:780px;
z-index: 7100;

}
.top #foot-nav{
margin:0 0 0 -430px;
width:840px;
}
#foot-nav .logo{
float:left;
margin:0;
}
#foot-nav .utility{
float:right;
margin:20px 0 0;
border-left:1px solid #624834;
}
#foot-nav .utility li{
float:left;
margin:0;
padding:0 15px;
border-right:1px solid #624834;
font-size:0.6875em;
text-align:center;
}
#foot-nav .utility li a:link,
#foot-nav .utility li a:visited{color:#41220f;text-decoration:none;}
#foot-nav .utility li a:hover,
#foot-nav .utility li a:active{color:#41220f;text-decoration:underline;}

#footer #copyright{
margin:0;
color:#fff;
font-size:0.9375em;
text-align:center;
}


/*------------------------------------------------------------------------------------------------------------------------
	clearFix
------------------------------------------------------------------------------------------------------------------------*/
#foot-nav:after,
#foot-nav .utility:after{
display:block;
clear:both;
visibility:hidden;
content:".";
height:0;
font-size:0;
line-height:0;
}

/*------------------------------------------------------------------------------------------------------------------------
	screen
------------------------------------------------------------------------------------------------------------------------*/
/*	1750px以下
--------------------------------------*/
@media screen and (max-width:1750px){

.top #global-nav{display:none;}

}


/*	1400px以下
--------------------------------------*/
@media screen and (max-width:1420px){

.top #header #site-id{top:30px;}
#global-nav{width:100px;}
#global-nav ul{background-position:-6px bottom;}

.top #contents{padding-bottom:0;}

.top #foot-nav{
position:absolute;
top:-85px;
left:50%;
margin:0 0 0 -510px;
width:500px;
}
.top #foot-nav .logo{
float:none;
margin:0;
text-align:center;
}
.top #foot-nav .utility{
float:none;
margin:10px 0 0;
border:0;
text-align:center;
letter-spacing:-0.4em;
}
.top #foot-nav .utility li{
float:none;
display:inline-block;
letter-spacing:normal;
}
.top #foot-nav .utility li:first-child{
border-left:1px solid #624834;
}

}



/*	1080px以下
--------------------------------------*/
@media screen and (max-width:1100px){

#header{
width:auto;
padding-right:20px;
padding-left:20px;
}

.profile #global-nav,
.character #global-nav{display:none;}

#contents{
width:auto;
padding-right:100px;
padding-left:20px;
}

}


/*	900px以下
--------------------------------------*/
@media screen and (max-width:920px){

.top #foot-nav{
margin:0 0 0 -350px;
width:340px;
}
.top #foot-nav .utility li{
padding:0 5px;
font-size:0.625em;
}
#foot-nav{
margin-left:-340px;
width:680px;
}
#foot-nav .logo{width:240px;}
#foot-nav .logo img{width:90%;}


}


/*	640px以下
--------------------------------------*/
@media screen and (max-width:640px){

body.profile,
body.character{
overflow:visible;
}

/*#page{overflow:hidden;}*/
#header,
.top #header,
.profile #header,
.character #header{
padding:10px;
width:auto;
background:#d2f4ff;
}
#header #site-id,
.top #header #site-id,
.profile #header #site-id,
.character #header #site-id{
position:static;
text-align:center;
}

#header #site-id,
.top #header #site-id{
margin:0 auto;
width:120px;
}

#global-nav,
.profile #global-nav,
.character #global-nav{
display:block !important;
position:static;
width:auto;
background:#0097d7;
}
#gnav-menu{
display:block;
margin:0 15px 0 0;
padding:7px 40px 5px 0;
background:url(../images/bg/gnav-menu.png) right center no-repeat;
background-size:35px 18px;
color:#fff;
font-size:1em;
font-weight:bold;
text-align:right;
cursor:pointer;
}
#global-nav ul{
display:none;
margin:0;
padding:0;
border-radius:0;
border-top:1px solid #d2f4ff;
background:#0097d7;
}
#global-nav ul.open{display:block;}
#global-nav ul li{
margin:0;
padding-bottom:0;
background:none;
border-bottom:1px solid #d2f4ff;
font-size:1em;
text-align:left;
}
#global-nav ul .sp-only{display:block;}
#global-nav ul li a,
#global-nav ul li .pre{
display:block;
padding:6px 15px 4px;
}
#global-nav ul li a:link,
#global-nav ul li a:visited,
#global-nav ul li a:hover,
#global-nav ul li a:active{color:#fff;text-decoration:none;}
#global-nav ul li span{
position:static;
visibility:visible;
}
#global-nav ul li img{display:none;}
#global-nav ul li .pre{
background:#ccc;
color:#fff;
}

#contents{
padding:0 10px 100px;
width:auto;
min-height:0;
}
.top #contents{
margin:0 auto;
padding:0 10px 100px;
width:auto;
min-height:0;
}
.profile,
.character{height:auto !important;}
.profile #contents,
.character #contents{
height:auto !important;
}
.profile #contents,
.character #contents{
position:static;
min-height:0;
}

#footer{
position:relative;
padding:8px 0;
background:#0097d7;
}
#foot-nav,
.top #foot-nav{
position:absolute;
top:-115px;
left:0;
margin:0 0 0;
width:100%;
}
#foot-nav .logo,
.top #foot-nav .logo{
float:none;
margin:0 auto !important;
text-align:center;
width:290px;
}
#foot-nav .logo img,
.top #foot-nav .logo img{width:80%;}
#foot-nav .utility,
.top #foot-nav .utility{
float:none;
margin:10px 0 0;
border-left:0;
text-align:center;
letter-spacing:-0.34em;
font-size:0.6875em;
}
#foot-nav .utility li,
.top #foot-nav .utility li{
display:inline-block;
float:none;
margin:0 -1px 5px 0;
padding:0;
border-right:1px solid #624834;
border-left:1px solid #624834;
font-size:1em;
text-align:center;
letter-spacing:normal;
}
#foot-nav .utility li a,
.top #foot-nav .utility li a{
display:block;
padding:2px 0;
width:130px;
}

#copyright,
.profile #contents #copyright,
.character #contents #copyright{font-size:0.75em;}
#copyright span,
.profile #contents #copyright span,
.character #contents #copyright span{display:block;}
.profile #contents #copyright span,
.character #contents #copyright span{font-size:inherit;}

}