/* Common */
/* ============================================ */

html,
body {
  height: 100%;
}

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", "Helvetica Neue", "Helvetica", sans-serif;
  font-feature-settings: "palt";
  background-color: #000;
  color: #c3c3c3;
  line-height: 1.5em;
}

.pc {
display: inline-block;
}

.sp {
display: none;
}

/* CONENT */
/* ============================================ */

/* trailer */

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0.95;
  z-index: 15;
  display: none;
}

#trailer-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  display: none;
}

#trailer-flex {
  display: flex;
  flex-direction: column;
  /* 子要素をflexboxにより縦方向に揃える */
  justify-content: center;
  /* 子要素をflexboxにより中央に配置する */
  align-items: center;
  /* 子要素をflexboxにより中央に配置する */
  width: 100%;
  height: 100%;
}

#inner {
  width: 100%;
  max-width: 1200px;
  padding:0 30px;
}

#btn-close {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 100;
}

#trailer-flex ul a img,
#btn-menu img,
#btn-close img {
  cursor: pointer;
  transition: filter 0.5s;
}

#inner h5 {
text-align: center;
font-family: "FOT-ニューロダン Pro M","NewRodinPro-M";
color: #f8e29c;
font-size:30px;
margin-bottom: 20px;
}

#inner h5 span {
font-size: 0.8em;
}

#btn-trailer {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: none;
  cursor: pointer;
}

#btn-trailer img,
#btn-close img {
  width: 87px;
  height: auto;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  display: none;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  border:solid 1px #3e3e3e;
}

/* index */

#index-container {
width:100%;
padding:40px 20px 30px 20px;
text-align: center;
background-image: url(../img/index/bg_top.png);
background-repeat: repeat-x;
background-size:auto 432px;
background-position: center top;
}

#index-container h1 {
margin-bottom: 30px;
}

#index-container h2 {
margin-bottom: 30px;
}

#index-container h1 img {
width: 989px;
height: auto;
}

#index-container h2 img {
width: 396px;
height: auto;
}

#index-art {
display: flex;
justify-content: center;
margin-bottom: 30px;
}

#index-art > div {
width: 690px;
}

#index-art div.enter {
position: relative;
width:633px;
border:solid 1px #393939;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}

#index-art div.enter > img {
width: 100%;
height: auto;
}

#index-art div.enter span {
display: block;
width: 100%;
padding:20px 0;
background: rgb(175,139,39);
background: linear-gradient(90deg, rgba(175,139,39,1) 0%, rgba(247,223,144,1) 50%, rgba(175,139,39,1) 100%);
}

#index-art div.enter a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

#index-art > div h3 {
display: block;
margin-top: 20px;
}

#index-art > div > h3 img {
width:auto;
height: 86px;
}

#sns-container {
display: flex;
justify-content: center;
margin-bottom: 60px;
}

#sns-container li {
display: block;
width:157px;
}

#sns-container li a img {
width:108px;
height: auto;
}

#gotheater {
margin-bottom: 60px;
}

#gotheater img {
width:348px;
height: auto;
}

#copyright {
font-size: 9px;
opacity: 0.6;
}

/* 1400以下 */
/* ============================================ */

@media only screen and (max-width: 1400px) {

/* trailer 1400 */

#inner h5 {
font-size:2.5vw;
margin-bottom: 20px;
}


/* index 1400 */

#index-container {
width:100%;
padding:2.85vw 1.42vw 2.14vw 1.42vw;
text-align: center;
background-image: url(../img/index/bg_top.png);
background-repeat: repeat-x;
background-size:auto 30.85vw;
background-position: center top;
}

#index-container h1 {
margin-bottom: 2.14vw;
}

#index-container h2 {
margin-bottom: 2.14vw;
}

#index-container h1 img {
width: 70.64vw;
height: auto;
}

#index-container h2 img {
width: 28.28vw;
height: auto;
}

#index-art {
display: flex;
justify-content: center;
margin-bottom: 2.14vw;
}

#index-art > div {
width: 49.28vw;
}

#index-art div.enter {
position: relative;
width:45.21vw;
border:solid 1px #393939;
}

#index-art div.enter > img {
width: 100%;
height: auto;
}

#index-art div.enter span {
display: block;
width: 100%;
padding:1.42vw 0;
background: rgb(175,139,39);
background: linear-gradient(90deg, rgba(175,139,39,1) 0%, rgba(247,223,144,1) 50%, rgba(175,139,39,1) 100%);
}

#index-art div.enter span img {
width: 22.21vw;
height: auto;
}

#index-art div.enter a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

#index-art > div h3 {
display: block;
margin-top: 1.42vw;
}

#index-art > div > h3 img {
width:auto;
height: 6.35vw;
}

#sns-container {
display: flex;
justify-content: center;
margin-bottom: 4.28vw;
}

#sns-container li {
display: block;
width:11.21vw;
}

#sns-container li a img {
width:7.71vw;
height: auto;
}

#gotheater {
margin-bottom: 4.28vw;
}

#gotheater img {
width:24.85vw;
height: auto;
}

#copyright {
font-size: 9px;
opacity: 0.6;
}

}


/* 640以下 */
/* ============================================ */

/* index 640 */

@media only screen and (max-width: 640px) {

.pc {
display: none;
}

.sp {
display: inline-block;
}

/* trailer 640 */


#inner {
  width: 100%;
  max-width: 1200px;
  padding:0 3%;
}

#inner h5 {
font-size:3.6vw;
margin-bottom: 3vw;
}

#btn-close {
  position: absolute;
  right: 3.12vw;3.12vw;
  top: 3.12vw;
  z-index: 100;
}

#btn-trailer {
  top: 3.12vw;
  right: 3.12vw;
}

#btn-trailer img,#btn-close img {
  width: 13.6vw;
  height: auto;
}

/* index 640 */

#index-container {
width:100%;
padding:6.25vw 0vw 6.25vw 0vw;
text-align: center;
background-image: url(../img/index/bg_top.png);
background-repeat: repeat-x;
background-size:auto 30.85vw;
background-position: center top;
}

#index-container h1 {
margin-bottom: 6.25vw;
}

#index-container h2 {
margin-bottom: 4vw;
}

#index-container h1 img {
width: 95.31vw;
height: auto;
}

#index-container h2 img {
width: 61.87vw;
height: auto;
}

#index-art {
display: block;
margin-bottom: 2.14vw;
}

#index-art > div {
width: 100%;
margin-bottom: 6.25vw
}

#index-art div.enter {
position: relative;
width:93.75vw;
border:solid 1px #393939;
margin: 0 auto;
}

#index-art div.enter > img {
width: 100%;
height: auto;
}

#index-art div.enter span {
display: block;
width: 100%;
padding:4vw 0;
background: rgb(175,139,39);
background: linear-gradient(90deg, rgba(175,139,39,1) 0%, rgba(247,223,144,1) 50%, rgba(175,139,39,1) 100%);
}

#index-art div.enter span img {
width: 46.09vw;
height: auto;
}

#index-art div.enter a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

#index-art > div h3 {
display: block;
margin-top: 3vw;
}

#index-art > div > h3 img {
width:auto;
height: 13.43vw;
}

#sns-container {
display: flex;
justify-content: center;
margin-bottom: 8vw;
}

#sns-container li {
display: block;
width:20vw;
}

#sns-container li a img {
width:16.87vw;
height: auto;
}

#gotheater {
margin-bottom: 6vw;
}

#gotheater img {
width:54.37vw;
height: auto;
}

#copyright {
font-size: 9px;
opacity: 0.6;
}

}