@charset "utf-8";
* {
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
  letter-spacing: 1px;
  color: #595757;
}
body{
  background-color: black;
}
.alt {
  text-indent: -9999px;
  font-size: 0px;
  line-height: 0;
}
.clear {
  clear: both;
}
.center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

img{
  background-color: black;
}

div.wrapper{
  width:100%;
   line-height: 1.8em;
  position: relative;
}

div.container{
  width:100%;
  max-width:960px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.round {
  -webkit-border-top-right-radius: 23px;
      -moz-border-radius-topright: 23px;
      border-top-right-radius: 23px;
    -webkit-border-top-left-radius: 23px;
      -moz-border-radius-topleft: 23px;
      border-top-left-radius: 23px;
    
    -webkit-border-bottom-right-radius: 23px;
      -moz-border-radius-bottomright: 23px;
      border-bottom-right-radius: 23px;
    -webkit-border-bottom-left-radius: 23px;
      -moz-border-radius-bottomleft: 23px;
      border-bottom-left-radius: 23px;
}

/*INTRODUCTION*/

div.introduction{
  min-height:930px;
  position: relative;
  text-align: center;
}

img#moon{
  height:auto;
  max-width: 522px;
  width:100%;
}

img.eng1{
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top:100px;
  left:0px;
  border: none;
  height:auto;
  max-width:516px;
  width:100%;
}

img.jp1{
  position: relative;
  top:200px;
  height:auto;
  max-width: 114px;
  width:90%;
  /*left:430px;*/
}

img.jp2{
  position: absolute;
  top:650px;
  left:28%;
}

img.cast{
  position: relative;
  top:150px;
  left:0;
  max-width:377px;
  height:auto;
  width:100%;
}

div.trailerArea{
  display:block;
  margin-left:auto;
  margin-right:auto;
  position: relative;
  top:20px;
  left:0;
  height:auto;
  width:100%;
  max-width:560px;
  height:415px;
}

iframe.youtube{
  width:100%;
  height:100%;
  font-size: 90%;
}

/*ABOUT*/

div.about{
  position: relative;
  min-height:960px;
  text-align: center;
}

h1{
  width:100%;
  /*max-width: 570px;*/
  display: block;
  margin-left:auto;
  margin-right:auto;
}

h1>img{
  width:100%;
  /*max-width: 570px;*/
  display: block;
}

img.haishin{
  position: relative;
  top:50px;
  left:0;
  max-width:520px;
  height:auto;
  width:100%;
}

a#primeLink{
  position: relative;
  top:90px;
  left:0;
  display: block;
  padding:10px 20px 15px 20px;
  width:290px;
  height:46px;
  color:#000;
  font-size: 105%;
  text-align: center;
  letter-spacing: 0;
  background-color: #C0A135;
  margin-right: auto;
  margin-left: auto;
}

a#primeLink:hover{
  text-decoration: none;
  background-color: #7FBE26;
  color:#fff;
}

p.about_text{
  color:#BCBBBB;
  font-size: 100%;
  text-align: left;
  max-width:580px;
  width:100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top:120px;
}

/*archiveArea*/

div.archiveArea{
  width:100%;
  /*background-color: #F5F4EF;*/
  background-color: black;
  min-height: 150px;
  text-align: center;
}

div.mainImageArea{
  width:100%;
  min-height:100px;
  background-color: black;
  
  text-align: center;
}

img.fullsize{
  width:100%;
  max-width:1280px;
  height:auto;
  margin-left: auto;
  margin-right: auto;
}

div.titleArea{
  width:100%;
  height:240px;
  text-align: center;
}
div.titleMoon{
  position: relative;
  z-index: 200;
  width: 180px;
  height: 182px;
  top:50px;
  margin-left: auto;
  margin-right: auto;
  color:white;
  text-align: center;
  padding-top:70px;
  line-height: 1.6;
  font-size: 120%;
  letter-spacing: 2px;
  background: url("../img/common/moon_m.png") top center no-repeat;
}

div.tumbnailsArea{
  width:100%;
  max-width: 1280px;
  min-height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top:10px;
  
  text-align: left;
  padding-bottom: 8px;
}

img.smallsize{

  /*max-width:480px;*/
  width:98%;
  height:auto;
}

img.col1{
margin-top:2%;
}

img.col2{
  margin-top:2%;

}

img.col3{
  margin-top:2%;
}

div.infoArea { text-align:center;margin-top:35px; padding-bottom:10px;  }
div.infoArea p.infoArea_t { color:#BCBBBB; font-size:120%; }
div.infoArea a.info { text-align:center; padding:10px; border:1px #b2b2b2 solid; width:460px; margin:0 auto; color:#BCBBBB; background-color:#000; text-decoration:none; font-weight:normal; display:block; }
div.infoArea a.info:hover {border:1px #b2b2b2 solid; color:#BCBBBB; background-color:#494949; text-decoration:none; }
.lightbox { display: none; margin-bottom:0px; }
p.info_t { margin:0 auto; font-weight:bold; text-align:center; margin-top:10px; font-size:110%; }
h2.info { font-size:100%; border:1px #999 solid; padding:13px 20px; text-align:center; margin-bottom:25px; margin-top:2px; line-height:1.6em; }
p.info { padding-top:10px; }
p.info span.info_box { background-color:#dadada; padding:5px 10px; }
div.info_left { float:left; }
img.info_img { float:right; margin-top:10px; }
p.info_cap { font-size:65%; clear:both; text-align:right; line-height:1.3em; padding-top:5px; }

@media screen and (max-width: 479px) {
  img.jp2{
    position: absolute;
    top:570px;
    left:10%;
  }
  div.tumbnailsArea img.smallsize:nth-child(odd){
  max-width:480px;
  width:98%;
  height:auto;
}
  div.tumbnailsArea img.smallsize:nth-child(even){
  max-width:480px;
  padding-left:2%;
  width:98%;
  height:auto;
}
div.infoArea { text-align:center;margin-top:35px; padding-bottom:0px;  }
p.info_t { margin:0 auto; font-weight:bold; text-align:center; font-size:110%; }
div.infoArea a.info { text-align:center; padding:10px; border:1px #b2b2b2 solid; width:90%; margin:0 auto; color:#BCBBBB; background-color:#000; text-decoration:none; font-weight:normal; display:block; }
h2.info { font-size:100%; border:1px #999 solid; padding:10px 5px; text-align:center; margin-bottom:10px; line-height:1.3; }
p { line-height:1.3; }
p.info { padding-top:10px; line-height:1.3; }
div.info_left { float:none;}
img.info_img { float:none; margin:0; margin-left:31%; width:110px; height:100px; }
p.info_cap { font-size:65%; text-align:center; line-height:1.3em; padding-top:5px; }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  img.jp2{
    position: absolute;
    top:640px;
    left:20%;
  }
  div.tumbnailsArea img.smallsize:nth-child(odd){
  max-width:480px;
  width:98%;
  height:auto;
}
  div.tumbnailsArea img.smallsize:nth-child(even){
  max-width:480px;
  padding-left:2%;
  width:98%;
  height:auto;
}

}
@media screen and (min-width: 768px) {
  img.col1{
margin-top:2%;
}

img.col2{
  margin-top:2%;
margin-left:1%;
}

img.col3{
  margin-top:2%;
margin-left: 2%;
}
}