@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);


/******************************

  1. public
  2. header
  3. information
  4. movie
  5. news
  6. game-about
  7. spec
  8. footer
  
******************************/


/***  public　***/

html {
  overflow-y: scroll; font-size: 62.5%; /* =10px */
}

body {
  background: #fff5da;
  color: #000;
  font-size: 14px;
  font-family: 'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", YuGothic, '游ゴシック',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1;
  text-align: center;
}

a:link { color: #0000FF; }
a:visited { color: #663399; }
a:hover { text-decoration: underline; color: #FF0000; }

/***  header　***/

header {
  background: url(../images/header-img.png),url(../images/header-bg.jpg);
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  position: relative;
}

header p#asw {
  left: 2%;
  position: absolute;
  padding-top: 2%;
}

header p {
  max-width: 98%;
  margin: 0 auto;
  padding-top: 82%;
}

header p img {
  max-width: 98%;
  margin-bottom: 3px;
}

header h1 {
  max-width: 82%;
  margin: 0 auto;
  z-index: 9999;
}

header h1 img {
  max-width: 82%;
  margin-bottom: 8px;
}

header nav {
  padding-bottom: 4%;
  width: 100%;
}

header nav ul{
  display: block;
  margin: 0 40px;
  position: relative;
  text-align: center;
  *zoom: 1;
}

header nav ul:before,
header nav ul:after {
  content: " ";
  display: table;
}

header nav ul:after {
  clear: both;
}

header nav ul li {
  display: block;
  float: left;
  margin: 0 auto 10px;
  width: 50%;
}

header nav ul li img{
  max-width: 80%;
  text-align: right;
}

header nav ul li:last-child{
  padding-top: 4%;
}

/***  information　***/

div#information {
  background: url(../images/info/bg_ojt.png) , url(../images/info/bg.jpg);
  background-size: 100%, 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  width: 100%;
}

div#information ul#sns {
  padding-top: 90px;
  margin: 0 auto;
  max-width: 180px;
}

div#information ul#sns li {
  display: block;
  float: left;
  padding: 0 5px 0 15px;
  margin-bottom: 25px;
}

div#information p img{
  margin: 0 auto;
}

div#information ul:before,
div#information ul:after {
  content: " ";
  display: table;
}

div#information ul:after {
  clear: both;
}

div#information p {
  margin: 0 auto 20px;
  text-align: center;
}

div#information p#web {
  margin: -5px auto 15px;
  text-align: center;
  width: 78%;
}

div#information p#tips {
  margin: -5px auto 50px;
  text-align: center;
  width: 78%;
}

@media screen and (orientation: landscape) {

div#information p#web {
  margin: -5px auto 15px;
  text-align: center;
  width: 45%;
}

div#information p#tips {
  margin: -5px auto 32px;
  text-align: center;
  width: 45%;
}

}

div#information p#web img {
	width: 100%;
}

div#information p#tips img {
	width: 100%;
}

div#information div.inr dl {
  background: url(../images/info/facebook-bg_top.jpg) no-repeat center top;
  background-size: 100%;
  margin: 0 auto;
  padding: 0;
}

div#information div.inr dt img {
  width: 100%;
}

div#information div.inr dd img {
  margin-bottom: -5px;
  width: 100%;
}

div#information div.inr div#fb {
  background-image: url(../images/info/facebook-bg_bottom.jpg), url(../images/info/facebook-bg_center.jpg);
  background-position: bottom, top;
  background-repeat: no-repeat,repeat-y;
  background-size: 100%, 100%;
  margin: 0;
  padding-bottom: 15%;
}

div#information div.inr div#fb .fb-page {
  width: 75%;
}

/***  movie　***/

div#movie {
  background: url(../images/movie/bg.jpg), url(../images/movie/bg02.png);
  background-position: top center;
  background-repeat: no-repeat, repeat-y;
  background-size: 100%, 100%;
  text-align: left;
  padding-left: 5%;
  width: 100%-5%;
}

div#movie ul {
  padding-bottom: 8%;
}

div#movie li img {
  display: inline;
  max-width: 70%;
  padding-bottom: 2%;
  overflow: hidden;
}


/***  news　***/

div#news {
  background: url(../images/info/news-bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}

div#news p, div#news p img {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

div#news div{
  background: url(../images/info/news-bg-bottom.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #8ad2f7;
  padding-bottom: 10%;
  width: 100%
}

div#news div div.box{
  background: url(../images/info/news-bg-center.png);
  background-position: top;
  background-repeat: repeat-y;
  background-size: 100%;
  padding: 4.3% 0 4.3%;
  width: 100%;
}

div#news div dl{
  color: #8ad2f7; 
  height: 140px;
  overflow-y: scroll;
  margin: 0 auto;
  width: 80%;
}

div#news div dt{
  clear: both;
  float: left;
  margin-right: 10px;
  width: 20%;
}

div#news div dd{
  float: right;
  margin-bottom: 10px;
  text-align: left;
  width: 70%;
}

div#news div dl:before,
div#news div dl:after {
  content: " ";
  display: table;
}

div#news div dl:after {
  clear: both;
}

div#news div dd a:link ,
div#news div dd a:visited {
  color:#8ad2f7;
  text-decoration:underline;
}

div#news div dd a:hover {
  color:#f7df8a;
  text-decoration:underline;
}

/*** game-about ***/

div#game-about img{
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/***  spec　***/

div#spec {
  background: url(../images/spec-bg.png) #88ca5a;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
}

div#spec p img {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/***  footer　***/

footer {
  background: url(../images/footer-bg.png), url(../images/footer-bg02.png);
  background-size: 100%,100%;
  background-position: left top, left top;
  background-repeat: no-repeat, repeat-y;
  margin: 0 auto -20px;
  padding: 52px 0 20px;
  z-index: 9999;
}

footer ul{
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 275px;
  *zoom: 1;
}

footer ul li{
  float: left;
  margin-right: 32px;
}

footer ul li:last-child{
  float: left;
  margin: 0 0 0 -13px;
}

footer ul:before,
footer ul:after {
  content: " ";
  display: table;
}

footer ul:after {
  clear: both;
}

footer p.enq img {
  margin: 15px 0;
  width: 72%;
}

@media screen and (orientation: landscape) {

footer p.enq img {
  margin: 15px 0;
  width: 45%;
}

}

footer div#address {
  border-top: 1px solid #daa80e;
  margin-top: 10px;
  width: 100%;
}

footer div#address img {
  max-width: 90%;
}

footer div#address p:first-child {
  margin: 20px 0 25px;
}

body .ggl{
  height: 0;
  line-height: 0;
  margin: -38px 0 0 0;

  padding: 0;
}