@charset "utf-8";

/* ---- css reset ---- */
@import url(reset.css);
@import url(base.css);

/* ---- Structure ---- */
body{ margin: 0; padding: 0; background: #FFF; }
#Background,
#Foreground{ width:100%; margin: 0;}
#Foreground header,
#Foreground #Wrap,
#Foreground footer{ width:100%; margin: 0;}
.frame_pri{max-width: 1100px; margin: 0 auto;}

/* - Seasonal - */
body{ background-color: #FFC001; /*27.27%*/}
#Background #bgptn{ width: 100%; height:500px; top:680px;  background: url(../images/_season/top_body.jpg) repeat-x center top; background-size: auto; }
#Background #sky{ width: 100%; height:500px; top:0px;  background: url(../images/_season/top_sky.jpg) repeat-x center top; background-size: auto;  }
#Background #sky1{ width: 100%; height:500px; top:0px;  background: url(../images/_season/top_sky1.jpg) repeat-x center top; background-size: auto;  }
#Background #sky2{ width: 100%; height:500px; top:0px;  background: url(../images/_season/top_sky2.jpg) repeat-x center top; background-size: auto;  }
#Background #horizon{ width: 100%; height: 260px; top:440px; background: url(../images/_season/top_horizon.png) repeat-x center top; background-size: auto;  }
#topic ul li a .tpinner{ border-color: #30A1D1; /*border-color: #30A1D1;*/ }
#topic ul li a:hover .tpinner{ border-color: #FFA64D;}
#topic ul li .text{ color: #FF0000; }

/* - Depth - */
#Background{ height:100%; position: absolute; top:0; left: 0; z-index: 0; }
#Foreground{ height:100%; position: absolute; top:0; left: 0; z-index: 50; }

/* - Background - */
#Background .layer1{ height:100%; position: absolute; top:0; left: 0; z-index: 1; }
#Background .layer2{ height:100%; position: absolute; top:0; left: 0; z-index: 2; }
#Background .layer3{ height:100%; position: absolute; top:0; left: 0; z-index: 3; }
#Background .layer4{ height:100%; position: absolute; top:0; left: 0; z-index: 4; }
#Background .layer5{ height:100%; position: absolute; top:0; left: 0; z-index: 5; }

/* - Foreground - */
/* Header */
#main_navi{ background:url(../images/top/navi_bg.png) no-repeat center top; background-size: 100% auto;  }
h1#title{ width: 14.2%; line-height: 0; display: block; float: left;}
nav{ width: 85.8%; display: block; float: left; }
nav ul{ width: 100%; display: block; list-style-type: none; padding: 0; margin: 0; }
nav ul li{ width: 16.66%; display: block; padding: 0; margin: 0; float: left; }

/* #Wrap */
#cover{ width: 100%; padding-bottom: 30px; }
#cover #key_visual{ width: 44.545%; float: right; }
#cover #music{ width: 10.909%; float: left; }
#cover #logomark{ width: 39.1%; float: left; padding: 0 5.44% 0 0;}
#cover #seasonal{ width: 43.64%; padding: 0 5.44% 0 6.36%; float: left;}
#cover #topic{ width: 49.09%; padding-left: 6.363%; float: left;}

#cover #music #bgm{ display: none; }
#cover #music .bgm_button{ display: none; }

#topic ul{display: block; padding: 0; margin: 0 auto; width: 100%; list-style-type: none; text-align: center; }
#topic ul li{display: inline-block; text-align: center; vertical-align: top; width: 25%; /display:inline;/zoom: 1;}
#topic ul li a{display: block; width: 100px; height: 100px; margin: 0 auto 1% auto;}
#topic ul li a .tpinner{ width: 90%; height: 90%; background-position: center center; background-repeat: no-repeat; background-size: contain; background-color: #FFF; border-width: 10%; border-style: solid; -moz-border-radius: 15%; border-radius: 15%; behavior: url(/css/PIE.htc);/*for IE*/}
#topic ul li a img{ }
#topic ul li a:hover .tpinner{}
#topic ul li .text{display: block; font-size: 0.8em; line-height: 1.1; }

#exUI{ width: 100%; height:100px; position: absolute; top:675px; left: 0; z-index: 50;}
#exUI .uiLeft{ width: 55.5%; float: left; }
#exUI .uiRight{ width: 43.5%; float: right; text-align: center; }
#exUI .uiLeft > div{ width:53.7%; margin: 0 auto; }
#exUI .uiRight > div{ width:36%; padding-top: 6%; display: inline-block; /display:inline;/zoom: 1; }

#mainContainer{ padding-top: 8%; background-color: #FFF; border: #FFF solid 1px; -moz-border-radius: 3em; border-radius: 3em; behavior: url(/css/PIE.htc);/*for IE*/ position: relative;}
#mainLeft{ width: 51.0%; padding: 0 0 0 3.6%; float: left; }
#mainRight{ width: 38.2%; padding: 0 3.6% 0 0; float: right; }

#newsList{ margin-bottom: 2em; width: 100%; text-align: left; }
#newsList ul{ width: 92%; margin: 0; padding: 0 4%; list-style-type: none; display: block; }
#newsList ul li{ padding: 0 0 2px 0; margin: 0 0 2px 0; border-bottom: #F6AA0F dotted 2px; display: block; font-size: 13px; font-size: 1.3rem; }
#newsList ul li a{ text-decoration: none; color: #53412F; }
#newsList ul li a:hover{ text-decoration: none; color: #D1312C; }
#newsList ul li .date{ display: block; margin:0; font-size: 12px; font-size: 1.2rem; color: #F6AA0F; }

#itemList{ margin-bottom: 2em; width: 100%; text-align: left; }
#itemList h3{ width: 32.2%; }
#itemList ul{ display: block; margin: 0; padding: 0; list-style-type: none; }
#itemList ul li{ width: 48%; display: block; padding: 0; margin: 0 0 0.5% 1%; float: left; }

#pv{ margin-bottom: 2em; }

#banner_pri{ margin-bottom: 2em;}

/* #game */
#gameContainer{display: none; width: 100%; height: 120%; background: url(../images/common_alpha80w.png); position: absolute; top:0; left: 0; z-index: 999; }
/*#game{ display: block; }*/
#gameContainer .game_inner{ height: 100%;}
#gameContainer #game_menu{ margin: 1%; background: url(../game/images/top_menu_bg.png); -moz-border-radius: 2em; border-radius: 2em; behavior: url(/css/PIE.htc);/*for IE*/}
#gameContainer #game_menu .game_header{ width: 100%; padding: 1% 0; line-height: 0; }

#gameContainer #game_menu .game_body{ padding: 0 5%;}
#gameContainer #game_menu .game_body ul{ list-style-type: none; margin: 0; padding: 2%; display: block;background: #FFF; -moz-border-radius: 2em; border-radius: 2em; behavior: url(/css/PIE.htc);/*for IE*/  }
#gameContainer #game_menu .game_body ul li{ width: 20%; display: block; float: left; text-align: center; }
#gameContainer #game_menu .game_body ul li.title{ width: 40%; }
#gameContainer #game_menu .game_footer{ width: 100%; padding: 2% 0; line-height: 0; text-align: center;}
#gameContainer #game_menu .game_footer div{ width: 30%; margin: 0 auto; text-align: center; }

/* Footer */
footer .inside{ text-align: center; }
footer #copyright{ padding:0 3%; color:#FFF;}
footer #copyright .line1{ font-size: 15px; font-size: 1.5rem; margin: 0px;}
footer #copyright .line2{ font-size: 14px; font-size: 1.4rem; font-family: Verdana, Helvetica, sans-serif; text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
footer #copyright .jas{font-size: 10px; font-size: 1.0rem;}

.scale_text{ font-size: font-size: 14px; font-size: 1.4rem; }


/* Mediaqueries */
/* PC(~1100px) ============================================================= */
@media screen and (max-width: 1100px) {
#Background #bgptn{ background-size: cover;  }
#Background #sky{ background-size: cover;  }
#Background #sky1{ background-size: cover;  }
#Background #sky2{ background-size: cover;  }
#Background #horizon{ background-size: cover;  }


}
/* Tablet(Landscape) =================================================================== */
@media screen and (max-width: 960px) {
#topic ul li .text{ font-size: 0.6em; }
}
/* Smartphone(Landscape) ============================================================== */
@media screen and (max-width: 540px) {
#topic ul li .text{ color: #FFF; font-size: 0.6em; }

#cover #logomark{ width: 44.545%; padding: 0;}
#cover #seasonal{ width: 55.454%; padding: 0;}
#cover #topic{ width: 100%; padding-left: 0; padding-top: 3%; float: none; clear:both;}

#exUI .uiLeft{ width: 100%; float: none; }
#exUI .uiRight{ width: 100%; float: none; }
#exUI .uiRight > div{ padding-top: 0;  }

#mainContainer{ padding-top: 25%; margin: 0 1%; -moz-border-radius: 1.5em; border-radius: 1.5em; behavior: url(/css/PIE.htc);/*for IE*/ position: relative;}
#mainLeft{ width: 96%; padding: 0 2%; float: none; }
#mainRight{ width: 96%; padding: 0 2%; float: none; }

#gameContainer #game_menu{ -moz-border-radius: 0.5em; border-radius: 0.5em;}
#gameContainer #game_menu .game_body ul{ -moz-border-radius: 0.5em; border-radius: 0.5em; }
}
/* Smartphone(Portrait) =============================================================== */
@media screen and (max-width: 320px) {
/* iphone3-5 Portrait  */


}