@charset "UTF-8";

html {
  font-size: 62.5%;
}
@media screen and (max-width: 849px) {
  html{
    font-size: 2.1vw;
  }
}
@media screen and (min-width: 850px) {
  body {
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'Lucida Grande', sans-serif;
    color: #000000;
  }
}
@media screen and (max-width: 849px) {
  body {
    font-size: 1.8rem;
    line-height: 1.8;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'Lucida Grande', sans-serif;
    color: #000000;
  }
}

@media screen and (min-width: 850px) {
  .vsp { display: none !important; }
}
@media screen and (max-width: 849px) {
  .vpc { display: none !important; }
}

a {
  color: #fff;
  text-decoration: underline;
}
a:hover {
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width: 850px) {
  #body {
    width: 100%;
    overflow: hidden;
  }
  main {
  }
  img {
    max-width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 849px) {
  #body {
    width: 100%;
    overflow: hidden;
  }
  img {
    width: 100%;
    height: auto;
  }
  main {
  }
}


@media screen and (min-width: 850px) {
  header {
    background-color: #0c0d0f;
  }
  header .inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
  }
  header .wappen {
    position: absolute;
    top: calc(min(1920px, 100vw) * (421 / 1920));
    right: calc(min(1920px, 100vw) * (421 / 1920));
    width: calc(min(1920px, 100vw) * (247 / 1920));
  }
  header .menu {
    display: none;
  }
  header .gnav {
    position: fixed;
    top: calc(min(1920px, 100vw) * (228 / 1920));
    right: calc(50% - (1920px / 2) + 3.0rem);
    width: 16.0rem;
    overflow: hidden;
    z-index: 100;
  }
  header .gnav li {
    margin-bottom: 2.5rem;
    font-size: 0;
    padding-right: 0.8rem;
  }
  header .gnav .twitter {
    text-align: center;
    width: calc(min(1920px, 100vw) * (64 / 1920));
    margin-left: auto;
    padding-right: 0rem;
  }
  header .gnav a {
    transition: all 200ms 0s ease;
  }
  header .gnav a:hover {
    opacity: 0.7;
  }
  header .sp-nav {
    display: none;
  }
}
@media screen and (max-width: 1920px) {
  header .gnav {
    right: 3.0rem;
  }
}
@media screen and (max-width: 1100px) {
  header .gnav {
    top: 5.0rem;
    width: 13.0rem;
  }
}
@media screen and (max-width: 849px) {
  header .inner {
    position: relative;
  }
  header .wappen {
    position: absolute;
    bottom: 3.0rem;
    right: 0.5rem;
    width: 17.0rem;
  }
  header .menu {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.0rem;
    box-sizing: border-box;
    margin: 0rem;
    z-index: 100;
  }
  header .menu img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  header .menu .open {
    display: block;
  }
  header .menu .close {
    display: none;
  }
  .nav-open header .menu .open {
    display: none;
  }
  .nav-open header .menu .close {
    display: block;
  }

  header .sp-cover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  header .gnav {
    display: none;
  }
  header .sp-nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 6rem;
    box-sizing: border-box;
    z-index: 99;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    transition: all 200ms 0s ease;
    transform: translateY(-100%);
    background-color: #0c0d0f;
    font-size: 0;
  }
  header .sp-nav.open {
    transform: translateY(0);
  }
  header .sp-nav>ul>li>span,
  header .sp-nav>ul>li>a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 1.5rem 3rem;
    text-align: right;
  }
  header .sp-nav>ul>li img {
    width: 15.0rem;
    min-width: 160px;
  }
  header .sp-nav>ul>li.twitter img {
    width: 7.2rem;
    min-width: auto;
  }
  header .sp-nav img {
    width: auto;
  }
  body.nav-open {
    width: 100%;
    height: 100%;
    position: fixed;
  }
}

@media screen and (min-width: 850px) {
  footer {
    text-align: center;
    font-size: 1.2rem;
    margin: 10.0rem 0;
    color: #000;
  }
  footer .text {
    margin: 4.0rem 0;
  }
  footer .twitter img {
    width: 5.5rem;
  }
  footer .copyright {
    margin-top: 4.0rem;
  }
  footer .copyright .mark {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 849px) {
  footer {
    text-align: center;
    font-size: 1.9rem;
    margin: 7.0rem 0;
    color: #000;
  }
  footer .twitter {
    margin: 3.0rem 0;
  }
  footer .text {
    margin: 2.0rem 4.0rem;
  }
  footer .logo img {
    width: 70%;
  }
  footer .twitter img {
    width: 7.2rem;
  }
  footer .copyright {
    margin-top: 5.0rem;
  }
  footer .copyright .mark {
    font-size: 1.6rem;
  }
}


@keyframes anim_slide {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: calc(min(1920px, 100vw));
  }
}
@media screen and (min-width: 850px) {
  .slide01 {
    width: 100%;
    background: #000 url(../img/slide_01.jpg) center top/auto 100% repeat-x;
    animation: anim_slide 30s linear infinite;
    height: calc(min(1920px, 100vw) * (230 / 1920));
  }
  .slide02 {
    width: 100%;
    background: #000 url(../img/slide_02.jpg) center top/auto 100% repeat-x;
    animation: anim_slide 30s linear infinite;
    height: calc(min(1920px, 100vw) * (230 / 1920));
  }
}
@media screen and (max-width: 849px) {
  .slide01 {
    width: 100%;
    background: #000 url(../img/slide_01.jpg) center top/auto 100% repeat-x;
    animation: anim_slide 30s linear infinite;
    height: 11.5rem;
  }
  .slide02 {
    width: 100%;
    background: #000 url(../img/slide_02.jpg) center top/auto 100% repeat-x;
    animation: anim_slide 30s linear infinite;
    height: 11.5rem;
  }
}

@media screen and (min-width: 850px) {
  main section {
  }
  main section .container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
  }
}
@media screen and (max-width: 849px) {
}

@media screen and (min-width: 850px) {
  .introduction {
    position: relative;
    min-height: calc(min(1920px, 100vw) * (834 / 1920));
    background-color: #0a0b0d;
  }
  .introduction .image {
    width: calc(min(1920px, 100vw) * (1279 / 1920));
    position: absolute;
    top: 0;
    left: 0;
  }
  .introduction .content {
    position: relative;
    z-index: 1;
    width: 649px;
    margin-right: calc(min(1920px, 100vw) * (260 / 1920));
    margin-left: auto;
    padding-top: calc(min(1920px, 100vw) * (95 / 1920));
  }
  .introduction h2 {
    margin-bottom: calc(min(1920px, 100vw) * (42 / 1920));
    width: calc(min(1920px, 100vw) * (631 / 1920));
  }
  .introduction .text {
    font-size: 1.4rem;
    line-height: 1.8;
    padding-bottom: 3.0rem;
  }
}
@media screen and (max-width: 1500px) {
  .introduction .content {
    width: 35%;
    margin-right: 20%;
  }
}
@media screen and (max-width: 849px) {
  .introduction {
    position: relative;
    background-color: #0e0c0d;
  }
  .introduction .content {
    width: 100%;
    padding: 3.0rem;
  }
  .introduction h2 {
    margin-bottom: 4.0rem;
  }
  .introduction .text {
    font-size: 1.7rem;
    line-height: 1.8;
    padding-bottom: 7.0rem;
  }
}

@media screen and (min-width: 850px) {
  .story {
    position: relative;
    min-height: calc(min(1920px, 100vw) * (709 / 1920));
    background-color: #363636;
  }
  .story .image {
    width: calc(min(1920px, 100vw) * (983 / 1920));
    position: absolute;
    top: calc(min(1920px, 100vw) * (80 / 1920));
    right: 0;
  }
  .story .content {
    position: relative;
    z-index: 1;
    width: 715px;
    margin-left: calc(min(1920px, 100vw) * (260 / 1920));
    padding-top: calc(min(1920px, 100vw) * (95 / 1920));
  }
  .story h2 {
    margin-bottom: calc(min(1920px, 100vw) * (42 / 1920));
    width: calc(min(1920px, 100vw) * (291 / 1920));
  }
  .story .text {
    font-size: 1.4rem;
    line-height: 1.8;
    padding-bottom: 3.0rem;
  }
}
@media screen and (max-width: 1500px) {
  .story .content {
    width: 43%;
    margin-right: 10%;
  }
}
@media screen and (max-width: 849px) {
  .story {
    position: relative;
    background-color: #363636;
  }
  .story .content {
    width: 100%;
    padding: 3.0rem;
  }
  .story h2 {
    margin-bottom: 4.0rem;
  }
  .story .text {
    font-size: 1.7rem;
    line-height: 1.8;
    padding-bottom: 7.0rem;
  }
}

@media screen and (min-width: 850px) {
  .cast {
    position: relative;
    background: #0a0b0d url(../img/cast_image.jpg) 50% 0 no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
  }
  .cast .content {
    position: relative;
    z-index: 1;
    width: 510px;
    margin: 0 auto;
    padding-top: calc(min(1920px, 100vw) * (106 / 1920));
  }
  .cast h2 {
    margin-bottom: calc(min(1920px, 100vw) * (35 / 1920));
    width: calc(min(1920px, 100vw) * (241 / 1920));
  }
  .cast .text {
    font-size: 1.4rem;
    line-height: 1.8;
    padding-bottom: calc(min(1920px, 100vw) * (106 / 1920));
  }
  .cast dl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .cast dl dt {
    width: 10.5rem;
    color: #cfbea2;
    margin-top: 1.0rem;
  }
  .cast dl dd {
    width: calc(100% - 10.5rem);
    margin-top: 1.0rem;
  }
}
@media screen and (max-width: 849px) {
  .cast {
    position: relative;
    background-color: #0a0b0d;
  }
  .cast .content {
    width: 100%;
    padding: 3.0rem;
  }
  .cast h2 {
    margin-bottom: 4.0rem;
  }
  .cast .text {
    font-size: 1.7rem;
    line-height: 1.8;
    padding-bottom: 6.0rem;
  }
  .cast dl {
    margin-bottom: 2.0rem;
  }
  .cast dl dt {
    color: #cfbea2;
  }
  .cast dl dd {
    margin-bottom: 2.0rem;
  }
}

@media screen and (min-width: 850px) {
  .comment {
    position: relative;
    background: #fff url(../img/comment_image.jpg) 100% calc(min(1920px, 100vw) * (112 / 1920)) no-repeat;
    background-size: 51% auto;
    background-attachment: fixed;
  }
  .comment .content {
    position: relative;
    z-index: 1;
    width: 700px;
    margin-left: calc(min(1920px, 100vw) * (260 / 1920));
    padding-top: calc(min(1920px, 100vw) * (130 / 1920));
  }
  .comment h2 {
    margin-bottom: calc(min(1920px, 100vw) * (80 / 1920));
    width: calc(min(1920px, 100vw) * (167 / 1920));
  }
  .comment .text {
    font-size: 1.6rem;
    line-height: 1.8;
    padding-bottom: 3.0rem;
    color: #000;
  }
  .comment .text p {
    background: rgba(255,255,255,0.2);
    padding: 1.0rem 1.0rem 1.0rem 0;
  }
  .comment .text .name {
    color: #7d0021;
    font-weight: bold;
    font-size: 3.0rem;
    margin-top: 0.5rem;
    margin-bottom: 8.0rem;
    background: none;
  }
  .comment .text .name .post {
    font-size: 1.6rem;
    margin-left: 2.0rem;
  }
}
@media screen and (max-width: 1450px) {
  .comment .content {
    width: 48%;
  }
}
@media screen and (max-width: 849px) {
  .comment {
    position: relative;
    background-color: #fff
  }
  .comment .content {
    width: 100%;
    padding: 3.0rem;
  }
  .comment h2 {
    margin-bottom: 4.0rem;
  }
  .comment .text {
    font-size: 1.7rem;
    line-height: 1.8;
    padding-bottom: 6.0rem;
    color: #000;
  }
  .comment .text .name {
    color: #7d0021;
    font-weight: bold;
    font-size: 2.4rem;
    margin-top: 1.0rem;
    margin-bottom: 8.5rem;
  }
  .comment .text .name .post {
    font-size: 1.6rem;
    margin-left: 2.0rem;
  }
  .comment .text .name:last-child {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 850px) {
  .theatre {
    position: relative;
    background: #0d1103 url(../img/theatre_image.jpg) 0 0 no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    min-height: calc(min(1920px, 100vw) * (747 / 1920));
  }
  .theatre .content {
    position: relative;
    z-index: 1;
    width: 650px;
    margin-left: auto;
    margin-right: calc(min(1920px, 100vw) * (260 / 1920));
    padding-top: calc(min(1920px, 100vw) * (102 / 1920));
    padding-bottom: 10.0rem;
  }
  .theatre h2 {
    margin-bottom: calc(min(1920px, 100vw) * (42 / 1920));
    width: calc(min(1920px, 100vw) * (162 / 1920));
  }
  .theatre .text {
    font-size: 1.3rem;
    line-height: 1.8;
    padding: 1.0rem 2.0rem 2.0rem 2.0rem;
    background: rgba(0,0,0,0.5);
  }
  .theatre .text .row {
    border-bottom: dashed 1px #666;
    display: flex;
    padding: 1.0rem 0;
  }
  .theatre .text .row .pref {
    width: 10.8rem;
  }
  .theatre .text .row .name {
    width: 44%;
    box-sizing: border-box;
    padding-right: 1.0rem;
  }
  .theatre .text .row .date {
    width: calc(100% - 10.8rem - 44%);
  }
}
@media screen and (max-width: 1600px) {
  .theatre .content {
    margin-right: 22.0rem;
  }
}
@media screen and (max-width: 1100px) {
  .theatre .content {
    width: 65%;
    margin-right: 20.0rem;
  }
}
@media screen and (max-width: 849px) {
  .theatre {
    position: relative;
    background-color: #000;
    padding-bottom: 6.5rem;
  }
  .theatre .content {
    width: 100%;
    padding: 3.0rem;
  }
  .theatre h2 {
    margin-bottom: 4.0rem;
  }
  .theatre .text {
    font-size: 1.7rem;
    line-height: 1.8;
    padding-bottom: 3.0rem;
  }
  .theatre .text .row {
    border-bottom: dashed 1px #666;
    display: flex;
    padding: 1.2rem 0;
  }
  .theatre .text .row .pref {
    width: 8.0rem;
  }
  .theatre .text .row .name {
    width: calc(100% - 8.0rem - 11.0rem);
    box-sizing: border-box;
    padding-right: 1.0rem;
  }
  .theatre .text .row .name a {
    text-decoration: underline;
  }
  .theatre .text .row .date {
    width: 11.0rem;
  }
}

#popup {
  width: 100%;
  max-width: 30.0rem;
  padding: 0;
  border-radius: 0;
}
.remodal-wrapper {
  z-index: 999999;
  padding: 15px 15px 0;
}
.remodal-overlay {
  z-index: 99999;
  background: rgba(0,0,0,0.90);
}


section#youtube_wp {
    padding: 0em;
    text-align: center;
    background: #333;    
}
.youtube_wp {
    width: 90%;
    margin: 0 auto;
}
.youtube {
  position: relative;
  padding-top: 56.25%;
    margin: 0 auto;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width:849px) {
 
section#youtube_wp {
    padding:2em 5% 2em 5%;
    text-align: center;
    background: #333;    
}
.youtube_wp {
    width: 90%;
    margin: 0 auto;
}
   
}



.disp {
	width: 900px;
	margin: 0 auto;
}
@media screen and (max-width:678px) {
.disp {
	width:95%;
	margin: 0 auto;
}
}

.disp h1 {font-size: 4rem; text-align: center;}
.disp h2 {font-size: 3rem; text-align: center;}
.disp h3 {font-size: 2.5rem; text-align: center;}
.disp p {
	font-size: 1.6rem;
}