@charset "UTF-8";

html {
  font-size: 62.5%;
}
@media screen and (max-width: 1280px) {
  html{
    font-size: calc(100vw / 128.0);
  }
}
@media screen and (max-width: 767px) {
  html{
    font-size: 2.1vw;
  }
}

@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: '游ゴシック', sans-serif;
    color: #fff;
    background-color: #231815;
  }
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: '游ゴシック', sans-serif;
    color: #fff;
    background-color: #231815;
  }
}

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

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

@media screen and (min-width: 768px) {
  #body {
    width: 100%;
    background: #231815 url(../img/bg.jpg) 50% 0/contain repeat-y;
    /*
    background: #231815 url(../img/bg.jpg) 50% 0/100% auto repeat;
    background-attachment: fixed;
   */
  }
  main {
  }
  img {
    max-width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  #body {
    width: 100%;
    background: #231815 url(../img/sp_bg.jpg) 50% 0/contain no-repeat;
    /*
    background: #231815 url(../img/sp_bg.jpg) 50% 0/100% auto repeat;
    background-attachment: fixed;
   */
  }
  img {
    width: 100%;
    height: auto;
  }
  main {
  }
}

@media screen and (min-width: 768px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  header .menu {
    display: none;
  }
  header .gnavi {
    position: absolute;
    top: 3.8rem;
    left: 5.9rem;
  }
  header .gnavi ul {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
  }
  header .gnavi ul li {
    margin-right: 1.6rem;
  }
  header .gnavi ul a {
    transition: opacity 200ms 0s ease;
  }
  header .gnavi ul a:hover {
    opacity: 0.6;
  }
  header .nav01 {
    width: 9.6rem;
  }
  header .nav02 {
    width: 15.0rem;
  }
  header .nav03 {
    width: 16.7rem;
  }
  header .nav04 {
    width: 9.2rem;
  }
  header .nav05 {
    width: 8.4rem;
  }
  header .nav06 {
    width: 12.1rem;
  }
  header .sns {
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 100%;
    position: absolute;
    top: 3.0rem;
    right: 6.0rem;
  }
  header .sns a {
    transition: opacity 200ms 0s ease;
  }
  header .sns a:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  header .menu {
    position: absolute;
    top: 2.0rem;
    left: 2.0rem;
    width: 3.5rem;
  }
  header .gnavi {
    display: none;
  }
  header .sns {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 100%;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
  }
}

@media screen and (min-width: 768px) {
  .gmenu {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .gmenu {
    background: #231815;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    padding-top: 7.0rem;
    padding-left: 3.0rem;
    transform: translate(-100%, 0);
    z-index: 101;
    transition: all 200ms 0s ease;
  }
  .open .gmenu {
    opacity: 1;
    transform: translate(0, 0);
  }
  .gmenu ul li {
    margin-bottom: 1.0rem;
    text-align: center;
  }
  .gmenu ul a {
    display: block;
    margin: 0 auto;
    width: fit-content;
  }
}

footer {
  background: #231815;
  text-align: center;
  color: #fff;
}
footer .logo {
  width: 37.5rem;
  margin: 0 auto;
  margin-bottom: 6.0rem;
}
footer .sns {
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto;
  margin-bottom: 7.0rem;
  overflow: hidden;
  border-radius: 100%;
}
footer .sns a {
  transition: opacity 200ms 0s ease;
}
footer .sns a:hover {
  opacity: 0.6;
}
footer .text {
  margin-bottom: 3.4rem;
  padding: 0 2.0rem;
  font-size: 1.5rem;
}
footer .copyright {
}
footer .copyright .mark {
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  footer .inner {
    padding: 10.0rem 0;
  }
}
@media screen and (max-width: 767px) {
  footer {
    margin-top: -2.0rem;
  }
  footer .inner {
    padding: 10.0rem 0;
  }
}

@media screen and (min-width: 768px) {
  main section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  main section .container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  section.scrollify {
    min-height: 100vh;
  }
}
@media screen and (max-width: 767px) {
  main section {
    position: relative;
    width: 100%;
  }
  main section .container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  section.scrollify {
    min-height: 100vh;
  }
}

@keyframes vertical {
  0% { transform:translateY(-5px); }
  100% { transform:translateY( 5px); }
}

section.mv {
}
section.mv .container {
  overflow: initial;
}
@media screen and (min-width: 768px) {
  section.mv .container {
    max-width: 192.0rem;
    margin: 0 auto;
  }
  section.mv .logo {
    margin-top: -8.5rem;
  }
  section.mv .tab {
    max-width: 22.6rem;
    position: absolute;
    top: calc(50% + 10.8rem);
    right: 20.4rem;
    animation: vertical 1.0s ease-in-out infinite alternate;
  }
  section.mv .tab a {
    transition: opacity 200ms 0s ease;
  }
  section.mv .tab a:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  section.mv {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section.mv .tab {
    width: 17.3rem;
    position: absolute;
    top: calc(50% - 13.1rem);
    left: calc(50% - 23.2rem);
    animation: vertical 1.0s ease-in-out infinite alternate;
  }
}

section.comments .container {
  overflow: initial;
}
section.comments .youtube iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
section.comments h2 {
  max-width: 24.6rem;
  margin-bottom: 5.5rem;
}
section.comments .block {
  background: rgba(211,210,208,0.2);
  padding: 4.0rem;
  border-radius: 1.0rem;
  margin-bottom: 4.0rem;
}
section.comments .block:last-child {
  margin-bottom: 0rem;
}
section.comments h3 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 3.0rem;
  line-height: 1.4;
}
section.comments h3:first-letter {
  color: #6eb92b;
}
section.comments h3 .post {
  display: block;
  font-size: 2.0rem;
}
section.comments .text {
  color: #fff;
}
@media screen and (min-width: 768px) {
  section.comments {
    /* background: rgba(0,0,0,0.6);*/
    background: url(../img/comments_bg.jpg) 50% 0/cover repeat;
    background-attachment: fixed;
  }
  section.comments .container {
    padding: 0 3.0rem;
  }
  section.comments .wrap {
    max-width: 155.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 20.0rem 0;
  }
  section.comments .youtube {
    width: 51%;
    flex-shrink: 0;
    margin-right: 6.4rem;
  }
  section.comments .youtube .inner {
    position: sticky;
    top: 0;
    padding-top: 10.0rem;
  }
  section.comments .content {
    min-height: 62.0rem;
  }
}
@media screen and (max-width: 767px) {
  section.comments {
    /*
    background: rgba(12,13,13,0.6);
   */
    background: #0c0e0d url(../img/sp_comments_bg.jpg) 50% 0/100% auto no-repeat;
    background-attachment: fixed;
  }
  section.comments {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section.comments .container {
    padding: 0 3.0rem;
  }
  section.comments .wrap {
    padding: 10.0rem 0;
  }
  section.comments .youtube {
    width: 100%;
    margin-bottom: 6.0rem;
  }
}

section.introduction h2 {
  max-width: 28.4rem;
  margin-bottom: 1.5rem;
}
section.introduction .lead {
  max-width: 40.4rem;
  margin-bottom: 3.5rem;
}
@media screen and (min-width: 768px) {
  section.introduction {
    background: #231815;
  }
  section.introduction .container {
    max-width: 120.5rem;
    padding: 3.0rem 2.0rem;
    padding-bottom: 18.0rem;
    margin: 0 auto;
  }
  section.introduction h2 {
    margin-left: 5.2rem;
  }
  section.introduction .block {
    background: rgba(35,24,21,0.7);
    padding: 3.8rem 5.2rem;
  }
  section.introduction .text {
    line-height: 2.0;
  }
  section.introduction .image01 {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: 100%;
    max-width: 64.0rem;
    margin: 0 auto;
  }
  section.introduction .image02 {
    position: absolute;
    bottom: 0rem;
    left: 50%;
    width: 100%;
    max-width: 192.0rem;
    margin: 0 auto;
    transform: translate(-50%, 0);
  }
}
@media screen and (max-width: 767px) {
  section.introduction {
    background: #0c0d0d;
  }
  section.introduction .container {
    padding: 18.0rem 0 38.0rem 0;
  }
  section.introduction .wrap {
    background: rgba(35,24,21,0.7);
    padding: 4.0rem 4.0rem;
  }
  section.introduction h2 {
    margin-bottom: 4.2rem;
  }
  section.introduction .lead {
    margin-bottom: 3.9rem;
  }
  section.introduction .text {
  }
  section.introduction .image01 {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 70%;
    margin: 0 auto;
  }
  section.introduction .image02 {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 64.0rem;
    margin: 0 auto;
  }
}

section.story {
}
section.story h2 {
  max-width: 12.4rem;
  margin-bottom: 4.2rem;
}
section.story .lead {
  max-width: 48.2rem;
  margin-bottom: 3.9rem;
}
section.story .text {
  line-height: 2.0;
}
@media screen and (min-width: 768px) {
  section.story {
    background: url(../img/story_bg.jpg) 50% 50%/cover no-repeat;
  }
  section.story .container {
    display: flex;
    justify-content: right;
    padding-bottom: 7.0rem;

    max-width: 153.0rem;
    margin: 0 auto;
  }
  section.story .block {
    background: rgba(35,24,21,0.7);
    width: 71.1rem;
    padding: 5.5rem 4.0rem;
  }
}
@media screen and (max-width: 767px) {
  section.story {
    background: url(../img/sp_story_bg.jpg) 50% 50%/cover no-repeat;
  }
  section.story .block {
    padding: 8.0rem 4.0rem 13.0rem 4.0rem;
  }
}

section.cast {
  position: relative;
  z-index: 1;
}
section.cast h2 {
  max-width: 10.3rem;
  margin: 0 auto;
  margin-bottom: 4.7rem;
}
section.cast .text {
  text-align: center;
  max-width: 100.0rem;
  line-height: 1.8;
  margin: 0 auto;
  margin-bottom: 3.2rem;
}
section.cast .text span {
  display: inline-block;
  white-space: nowrap;
  font-size: 1.6rem;
}
section.cast .text span.main {
  font-size: 1.9rem;
  font-weight: bold;
  display: block;
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  section.cast {
    background: #020818;
  }
  section.cast .image01 {
    position: absolute;
    top: 12.0rem;
    left: 0;
    width: 100%;
    max-width: 39.2rem;
    margin: 0 auto;
  }
  section.cast .image02 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 39.0rem;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  section.cast {
    background: #0c0d0d;
  }
  section.cast .wrap {
    padding: 9.0rem 2.0rem;
    padding-bottom: 50.0rem;
  }
  section.cast .image01 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

section.theater h2 {
  max-width: 17.9rem;
  margin-bottom: 4.1rem;
}
section.theater h3 {
  margin-bottom: 2.6rem;
  color: #fff;
  font-size: 3.0rem;
  font-weight: bold;
  line-height: 1;
}
section.theater h4 {
  background-color: #231815;
  color: #fff;
  font-size: 2.0rem;
  padding: 0.0rem 1.9rem;
  width: fit-content;
  margin-bottom: 1.7rem;
}
section.theater .area {
  position: relative;
  background: url(../img/theater_line.png) 0 100% /60.5rem 0.3rem no-repeat;
  padding-bottom: 3.0rem;
  margin-bottom: 3.0rem;
}
section.theater dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  color: #fff;
  margin-bottom: 2.0rem;
}
section.theater dl:last-child {
  margin-bottom: 0rem;
}
section.theater dl dt {
  width: 20.0rem;
  font-weight: normal;
}
section.theater dl dd {
  width: calc(100% - 20.0rem);
}
@media screen and (min-width: 768px) {
  section.theater {
    background: #b0b9bb url(../img/theater_bg.jpg) 50% 50%/cover no-repeat;
    background-attachment: fixed;
    align-items: start;
  }
  section.theater .container {
    display: flex;
    justify-content: right;
    align-items: center;
  }
  section.theater .block {
    background: rgba(35,24,21,0.7);
    padding: 4.0rem;
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  section.theater {
    background: #231815 url(../img/sp_theater_bg.jpg) 0 0/100% auto no-repeat;
    padding-top: 26.0rem;
  }
  section.theater .block {
    padding: 9.0rem 2.0rem 3.0rem 2.0rem;
  }
  section.theater h4 {
    border: solid 1px #fff;
  }
}