ul,li,ol,dl,dt,dd,div,p,h1,h2,h3,h4,h5,a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  line-height: 1;
  list-style-type: none;
  border: none;
}

html,body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family:Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS P ゴシック", MS P Gothic, sans-serif;
  color: #FFF;
  -webkit-text-size-adjust: 100%;
}

img {
  vertical-align: bottom;
  border: none;
  color: #FFF;
}


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

共通

************************************/
#wapper {
  position: relative;
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.background {
  position: fixed;
  top: 0;
  height: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1
}


p {
  margin: 0 0 30px 0;
  font-size: 160%;
  line-height: 1.5;
}

a {
  outline: none;
}

@media screen and(orientation: portrait) and (min-width: 768px) {
 p {
    font-size: 120%;
    line-height: 1.5;
  } 
}


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

ナビゲーション

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

#navi {
  width: 100%;
  position: fixed;
  top: -452px;
  overflow: hidden;
  z-index: 50;
}

#navi ul {
  overflow: hidden;
  text-align: center;
}

#navi li {
  width: 50%;
  height: 84px;
  float: left;
  box-sizing: border-box;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#030102));
  background: -moz-linear-gradient(top, #333333, #030102);
  background: gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#030102));
  border-top: 1px solid #434343;
}

#navi li.cs {
  padding: 30px 0 34px 0;
}

#navi li:nth-child(odd) {
  border-right: 2px solid #000;
}

#navi li:nth-child(even) {
  border-left: 2px solid #3c3c3c;
}

#navi li a {
  display: block;
  padding: 30px 0 34px 0;
}

#navi .subTitle {
  padding: 8px 0;
  text-align: center;
  background: #434343;
}

#navi .btnMenu {
  width: 200px;
  margin: 0 auto;
}


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

トップ

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

#top #wrapper {
  position: static;
  height: 100%;
  background: #0b1238;
  overflow: hidden;
}

#top #container {
  position: relative;
  height: 95%;
  /*height: 100%;*/
  background: url(../images/top/bg.jpg) center top no-repeat;
  background-size: contain;
}


#top h1 {
  position: absolute;
  bottom: 5%;
  width: 100%;
  padding: 0 10px;
  text-align: center;
  box-sizing: border-box;
}

#top h1 img {
  width: 100%;
  max-width: 640px;
}

#top .date {
  position: absolute;
  width: 100%;
  bottom: 1%;
  text-align: center;
}

#top .date img {
  width: 100%;
  max-width: 640px;
}

#top .point {
  position: absolute;
  left: 10px;
  bottom: 190px;
  z-index: 5;
}

#top .dvd {
  position: absolute;
  right: 10px;
  bottom: 205px;
  z-index: 5;
}

#top .subContents {
  position: absolute;
  top: 95%;
  width: 100%;
  padding: 20px 0 0 0;
  overflow: hidden;
  background: #0b1238;
}

#top .trailer {
  margin: 0 0 20px 0;
  padding: 20px 0;
  background: #000;
  text-align: center;
}

#top .trailer iframe {
  width: 600px;
  height: 337px;
}

#top .trailer .name {
  margin: 0 0 8px 0;
  text-align: center;
}

#top .tieup {
  margin: 0 0 30px 0;
}

#top .tieup a {
  display: block;
  width: 100%;
  margin: 0 0 20px 0;
  text-align: center;
}

#top .tieup a:last-child {
  margin: 0;
}

#top .tieup a img {
  width: 100%;
  max-width: 400px;
}

#top .credit {
  margin: 0 0 40px 0;
  padding: 0 10px;
}

#top .credit img {
  width: 100%;
}

@media only screen and (orientation : landscape) {
  #top #container {
    height: 100%;
    background: url(../images/top/bg_h.jpg) center top no-repeat;
    background-size: contain;
  }
  
  #top h1 {
    bottom: 11%;
  }
  
  #top .date {
    bottom: 6%;
  }
  
  #top .point {
    position: absolute;
    right: 10px;
    bottom: 50px;
  }
  
  #top .dvd {
    right: 10px;
    bottom: 65px;
  }
  
  #top .tieup {
    text-align: center;
  }
  
  #top .tieup a {
    display: inline-block;
    width: inherit;
    margin: 0 10px 10px 0;
    text-align: center;
  }
  
  #top .tieup a:last-child {
    margin: 0 10px 0 0;
  }
  
  #top .tieup a img {
    width: 100%;
    max-width: 250px;
  }
}

@media screen and(orientation: portrait) and (min-width: 768px) {
  #top .tieup {
    text-align: center;
  }
  
  #top .tieup a {
    display: inline-block;
    width: inherit;
    margin: 0 10px 10px 0;
    text-align: center;
  }
  
  #top .tieup a:last-child {
    margin: 0 10px 0 0;
  }
  
  #top .tieup a img {
    width: 100%;
    max-width: 250px;
  }
}


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

トレーラー

************************************/
#trailer .background {
  background-image: url(../images/trailer/bg.jpg);
}

#trailer #container {
  padding: 60px 20px 60px 20px;
}

#trailer .thumbArea {
  position: absolute;
  width: 60%;
  top: 180px;
  left: 38%;
}

#trailer .thumb {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin: 0 0 8px 0;
  overflow: hidden;
}

#trailer .name {
  margin: 0 0 40px 0;
}

#trailer .thumb iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media only screen and (orientation : landscape) {
  #trailer .background {
    background-position: left -350px;
  }

}


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

劇場情報

************************************/
#theater .background {
  background-image: url(../images/theater/bg.jpg);
}

#theater #container {
  padding: 60px 20px 60px 20px;
}

#theater h1 {
  margin: 0 0 30px 0;
}

#theater .presentArea {
  width: 392px;
  margin: 0 auto 30px auto;
}

#theater .present {
  position: relative;
  height: 367px;
  margin: 0 0 10px 0;
  background: url(../images/theater/present_cs.png) no-repeat;
}

#theater .presentOpen .present {
  background: url(../images/theater/present.png) no-repeat;
}

#theater .present a {
  position: absolute;
  top: 301px;
  left: 37px;
  display: block;
  width: 318px;
  height: 44px;
  background: url(../images/theater/btn_buy.png) no-repeat;
  text-indent: -9999px;
}

#theater .caution {
  margin: 0 0 30px 0;
  text-align: center;
}

#theater .bnr {
  margin: 0 0 30px 0;
  text-align: center;
}

#theater .bnr a {
  display: block;
  margin: 0 0 10px 0;
}

#theater .latest {
  padding: 0 0 22px 5px;
  color: #DDDDDD;
}

#theater table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px 0;
  font-size: 120%;
}

#theater th {
  padding: 0 0 2px 0;
  text-align: left;
  border-bottom: 3px solid #FFF;
}

#theater th:nth-child(1){
  width: 4em;
}

#theater th:nth-child(3){
  width: 6em;
}

#theater th:nth-child(4){
  width: 4em;
}

#theater tr {
  /*opacity: 0;*/
}

#theater td {
  padding: 10px 0;
  background: url(../images/theater/bg_table.gif);
  border-bottom: 1px solid #898989;
  vertical-align: top;
}

#theater td:last-child {
  color: #eac965;
  text-align: center;
}

#theater table a {
  color: #6ac0f7;
  font-weight: bold;
  text-decoration: none;
}

@media only screen and (orientation : landscape) {
  #theater .presentArea {
    margin: 0;
    float: right;
  }
  
  #theater th:nth-child(3){
    width: 10em;
  }
  
  #theater .theaterList {
    width: 100%;
    /*margin: 0 -422px 0 0;
    padding: 0 422px 0 0;
    float: left;*/
    box-sizing: border-box;
  }
}


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

コメント

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

#comment .background {
  background-image: url(../images/comment/bg.jpg);
}

#comment #container {
  /*padding: 60px 20px 60px 20px;*/
  padding: 60px 0 0 0;
}

#comment #container h1 {
  margin: 0 0 30px 20px;
}

#comment .cmnt {
  /*width: 501px;*/
  margin: 0 auto 30px auto;
  padding: 0 20px 31px 20px;
  background: url(../images/comment/dot.gif) left bottom repeat-x;
}

#comment .cmnt img {
  width: 100%;
}

#comment .kevin img {
  width: 100%;
}


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

インタビュー

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

#interview .background {
  background-image: url(../images/interview/bg.jpg);
}

#interview #container {
  padding: 60px 20px 60px 20px;
}

#interview #container h1 {
  margin: 0 0 30px 0;
}

#interview #container h2 {
  margin: 0 0 30px 0;
}

#interview p strong {
  color: #000;
  font-weight: bold;
  background: #f6ea2e;
}

#interview .photo {
  margin: 0 0 33px 0;
  text-align: center;
}

#interview .photo img {
  width: 85%;
  margin: 0 0 2px 0;
}

#interview .profile {
  padding: 25px;
  background: rgba(11,18,56,0.52);
}

#interview .profile p {
  margin: 0;
}

#interview .profile h3 {
  margin: 0 0 10px 0;
  font-size: 180%;
}


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

イントロダクション

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

#intro .background {
  background-image: url(../images/intro/bg.jpg);
}

#intro #container {
  padding: 60px 0 60px 0;
}

#intro #container h1 {
  margin: 0 0 30px 20px;
}

#intro #container h2 {
  margin: 0 0 30px 0;
  text-align: center;
}

#intro #container p {
  padding: 0 20px;
}

#intro #container .point {
  margin: 0 0 30px 0;
  padding: 0 20px;
}

#intro #container .point img {
  width: 100%;
}

#intro .photo {
  margin: 0 0 33px 0;
  text-align: center;
}

#intro .photo img {
  width: 100%;
  margin: 0 0 2px 0;
}


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

ストーリー

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

#story .background {
  background-image: url(../images/story/bg.jpg);
}

#story #container {
  padding: 60px 0 60px 0;
}

#story #container h1 {
  margin: 0 0 30px 20px;
}

#story .photo {
  margin: 0 0 33px 0;
  text-align: center;
}

#story .photo img {
  width: 100%;
  margin: 0 0 2px 0;
}

#story #container p {
  padding: 0 20px;
}


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

キャスト

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

#cast .background {
  background-image: url(../images/cast/bg.jpg);
}

#cast #container {
  padding: 60px 20px 60px 20px;
}

#cast #container h1 {
  margin: 0 0 30px 20px;
}

#cast h2 {
  margin: 0 0 20px 0;
}

#cast .castThumbArea {
  margin: 0 0 30px 0;
  overflow: hidden;
}

#cast .castThumbArea ul {
}

#cast .castThumbArea li {
  position: relative;
  width: 33%;
  height: 83px;
  margin: 0 3px 3px 0;
  float: left;
  background-size: cover;
  overflow: hidden;
}

#cast .castThumbArea li:nth-child(3n) {
  margin: 0 0 3px 0;
}

#cast .castThumbArea li.kevin    { background-image: url(../images/cast/thumb_ph01.png); }
#cast .castThumbArea li.jennifer { background-image: url(../images/cast/thumb_ph02.png); }
#cast .castThumbArea li.denis    { background-image: url(../images/cast/thumb_ph03.png); }
#cast .castThumbArea li.frank    { background-image: url(../images/cast/thumb_ph04.png); }
#cast .castThumbArea li.ellen    { background-image: url(../images/cast/thumb_ph05.png); }
#cast .castThumbArea li.ivan     { background-image: url(../images/cast/thumb_ph06.png); }

#cast .castThumbArea li img {
  position: absolute;
}

#cast .over {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
}

#cast .castThumbArea li.current .over {
  opacity: 0;
}

#cast .photo {
  margin: 0 0 30px 0;
  text-align: center;
}

#cast .photo img {
  width: 100%;
  max-width: 640px;
}

#cast .castContent {
  display: none;
  width: 100%;
  overflow: hidden;
}

#cast .castContent.current {
  display: block;
  width: 100%;
  overflow: hidden;
}

#cast .castContent p {
  
}


@media only screen and (orientation : landscape) {
  #cast .castThumbArea li {
   background-position: left center;
  }
  
  #cast .photo {
    margin: 0 20px 15px 0;
    float: left;
  }
  
  #cast .photo img {
    width: 100%;
    max-width: 480px;
  }
}

@media screen and(orientation: portrait) and (min-width: 768px) {
  #cast .castThumbArea li {
   background-position: left center;
  }
  
  #cast .photo {
    margin: 0 20px 15px 0;
    float: left;
  }
  
  #cast .photo img {
    width: 100%;
    max-width: 340px;
  }
}