html, body {
  height: 100%; }

html {
  font-size: 62.5%; }

body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: sans-serif; }

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd, div, section, li, table, th, td, tr, form, iframe {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: bottom; }

li {
  list-style-type: none; }

img {
  vertical-align: bottom;
  width: 100%;
  height: auto; }

.pc_hidden {
  display: none; }

.sp_hidden {
  display: block; }

.ld-overlay {
  position: fixed;
  color: #CCC;
  font-size: 12px;
  letter-spacing: 0.4pt;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FFFFFF;
  z-index: 1000;
  overflow: hidden; }

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out; }

.loader {
  color: #c3a2be;
  font-size: 10px;
  margin: auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0) scale(0.5);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0; }

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.loader:after {
  left: 3.5em; }

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
#wrap {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0; }

.logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 60%; }

#gnav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #FFF;
  height: 100%;
  z-index: 1100; }
  #gnav .gnav-btns {
    display: flex;
    height: 100%;
    padding: 50px 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; }
    #gnav .gnav-btns li a,
    #gnav .gnav-btns li span {
      display: block;
      transition: all 0.2s; }
      #gnav .gnav-btns li a img,
      #gnav .gnav-btns li span img {
        height: 55px;
        width: auto; }
    #gnav .gnav-btns li.btn0 {
      background: url("../images/gnav/gnav_btn0_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn1 {
      background: url("../images/gnav/gnav_btn1_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn2 {
      background: url("../images/gnav/gnav_btn2_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn3 {
      background: url("../images/gnav/gnav_btn3_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn4 {
      background: url("../images/gnav/gnav_btn4_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn5 {
      background: url("../images/gnav/gnav_btn5_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.btn6 {
      background: url("../images/gnav/gnav_btn6_hover.png") no-repeat left top;
      background-size: 100% auto; }
    #gnav .gnav-btns li.current {
      position: relative; }
      #gnav .gnav-btns li.current::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: -2px;
        height: 4px;
        width: 100%;
        background: #F00; }
    #gnav .gnav-btns li.btn-sns {
      display: flex; }
      #gnav .gnav-btns li.btn-sns a {
        display: flex;
        width: 50%; }

#caststaff {
  background: none;
  position: relative; }
  #caststaff .caststaff-inner {
    height: 100%; }
    #caststaff .caststaff-inner .page-title {
      width: 40%;
      margin: 20px 0 0 20px; }
  #caststaff::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/caststaff/caststaff_bg1.jpg") no-repeat center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5; }
  #caststaff .billing-block {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0; }
  #caststaff .cast-block {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0 100px; }
  #caststaff .cast {
    position: relative;
    width: 100%;
    margin-bottom: 50px; }
    #caststaff .cast-inner {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      justify-content: space-between; }
      #caststaff .cast-inner:nth-child(1) {
        margin-top: -50px; }
    #caststaff .cast-name {
      width: 100%; }
    #caststaff .cast .cast-img {
      width: 100%; }
    #caststaff .cast dd {
      color: #FFF;
      font-size: 1.4rem;
      line-height: 1.7em;
      letter-spacing: 0.06em; }
  #caststaff #cast2 dt {
    height: calc( 100vw / 16 * 9 );
    position: relative; }
    #caststaff #cast2 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 0;
      left: 10px;
      z-index: 10;
      width: 25px; }
    #caststaff #cast2 dt .cast-img {
      display: block;
      position: absolute;
      top: 0;
      left: 45px;
      z-index: 10;
      width: calc( 90vw - 25px ); }
    #caststaff #cast2 dt::before {
      content: '';
      display: block;
      width: 130px;
      height: calc( ( 90vw - 25px ) / 574 * 324 + 5px );
      background: #7b59a3;
      position: absolute;
      top: 15px;
      left: 0;
      z-index: 1; }
  #caststaff #cast2 dd {
    padding: 0 20px; }
    #caststaff #cast2 dd .cast-name {
      margin-bottom: 20px; }
  #caststaff #cast3 dt {
    height: calc( 100vw / 32 * 21 );
    position: relative; }
    #caststaff #cast3 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 0;
      left: 20px;
      z-index: 10;
      width: 285px; }
    #caststaff #cast3 dt .cast-img {
      display: block;
      position: absolute;
      top: 35px;
      left: 20px;
      z-index: 10;
      width: calc( 90vw - 25px ); }
    #caststaff #cast3 dt::before {
      content: '';
      display: block;
      width: 80%;
      height: 142px;
      background: #7b59a3;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1; }
  #caststaff #cast3 dd {
    padding: 0 20px; }
    #caststaff #cast3 dd .cast-name {
      margin-bottom: 20px; }
  #caststaff #cast4::after {
    mix-blend-mode: overlay;
    content: '';
    display: block;
    width: calc( 100% - 20px );
    height: 105px;
    background: url("../images/caststaff/cast_overlay.png") repeat;
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 2; }
  #caststaff #cast4 dt {
    height: calc( 100vw / 32 * 21 );
    position: relative; }
    #caststaff #cast4 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 0;
      left: 40px;
      z-index: 10;
      width: 285px; }
    #caststaff #cast4 dt .cast-img {
      display: block;
      position: absolute;
      width: calc( 90vw - 25px );
      top: 36px;
      left: 40px;
      z-index: 10; }
    #caststaff #cast4 dt::before {
      content: '';
      display: block;
      width: calc( 100% - 20px );
      height: 126px;
      background: #7b59a3;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1; }
  #caststaff #cast4 dd {
    padding: 0 20px; }
    #caststaff #cast4 dd .cast-name {
      margin-bottom: 20px; }
  #caststaff #cast5 dt {
    height: calc( 100vw / 32 * 19 );
    position: relative; }
    #caststaff #cast5 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 15px;
      left: 10px;
      z-index: 10;
      width: 34px; }
    #caststaff #cast5 dt .cast-img {
      display: block;
      position: absolute;
      width: calc( 90vw - 25px );
      top: 15px;
      left: 45px;
      z-index: 10; }
    #caststaff #cast5 dt::before {
      content: '';
      display: block;
      width: 130px;
      height: calc( ( 90vw - 25px ) / 574 * 324 );
      background: #7b59a3;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1; }
  #caststaff #cast5 dd {
    padding: 0 20px; }
    #caststaff #cast5 dd .cast-name {
      margin-bottom: 20px; }
  #caststaff #cast6 dt {
    height: calc( 100vw / 32 * 19 );
    position: relative; }
    #caststaff #cast6 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 15px;
      right: 20px;
      z-index: 10;
      width: 25px; }
    #caststaff #cast6 dt .cast-img {
      display: block;
      position: absolute;
      width: calc( 90vw - 25px );
      top: 15px;
      right: 45px;
      z-index: 10; }
    #caststaff #cast6 dt::before {
      content: '';
      display: block;
      width: 130px;
      height: calc( ( 90vw - 25px ) / 574 * 324 + 30px );
      background: #7b59a3;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1; }
  #caststaff #cast6 dd {
    padding: 0 20px; }
    #caststaff #cast6 dd .cast-name {
      margin-bottom: 20px; }
  #caststaff #cast7::after {
    mix-blend-mode: overlay;
    content: '';
    display: block;
    width: 140px;
    height: 142px;
    background: url("../images/caststaff/cast_overlay.png") repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; }
  #caststaff #cast7 dt {
    height: calc( 100vw / 32 * 21 );
    position: relative; }
    #caststaff #cast7 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 0;
      left: 20px;
      z-index: 10;
      width: 285px; }
    #caststaff #cast7 dt .cast-img {
      display: block;
      position: absolute;
      width: calc( 90vw - 25px );
      top: 42px;
      left: 20px;
      z-index: 10; }
    #caststaff #cast7 dt::before {
      content: '';
      display: block;
      width: calc( 100% - 20px );
      height: 142px;
      background: #7b59a3;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1; }
  #caststaff #cast7 dd {
    padding: 0 20px; }
    #caststaff #cast7 dd .cast-name {
      margin-bottom: 20px; }
  #caststaff #cast1::after {
    content: '';
    display: block;
    width: 100px;
    height: calc( ( 90vw - 25px ) / 574 * 324 );
    background: url("../images/caststaff/cast_overlay.png") repeat;
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 2;
    mix-blend-mode: overlay; }
  #caststaff #cast1 dt {
    width: 100%;
    height: calc( 100vw / 16 * 10 );
    position: relative; }
    #caststaff #cast1 dt .cast-name-en {
      display: block;
      position: absolute;
      top: 24px;
      right: 10px;
      z-index: 10;
      width: 25px; }
    #caststaff #cast1 dt .cast-img {
      display: block;
      position: absolute;
      top: 24px;
      right: 35px;
      width: calc( 100% - 35px );
      z-index: 10; }
    #caststaff #cast1 dt::before {
      content: '';
      display: block;
      width: 130px;
      height: calc( ( 90vw - 25px ) / 574 * 324 );
      background: #7b59a3;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1; }
  #caststaff #cast1 dd {
    width: 100%;
    padding: 0 20px; }
    #caststaff #cast1 dd .cast-name {
      margin-bottom: 23px; }
  #caststaff .staff {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 50px; }
    #caststaff .staff-bg {
      content: '';
      display: none;
      width: 100%;
      height: 100vh;
      background: #000 url("../images/caststaff/staff_bg_blur.jpg") no-repeat center top;
      background-size: 100% auto;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -2; }
    #caststaff .staff-block {
      padding: 100px 0;
      position: relative; }
    #caststaff .staff dt {
      width: 250px;
      margin-bottom: 20px; }
    #caststaff .staff dd {
      width: 100%;
      color: #FFF;
      font-size: 1.4rem;
      line-height: 1.7em;
      letter-spacing: 0.06em; }
    #caststaff .staff:first-child {
      align-items: flex-start; }
      #caststaff .staff:first-child dt {
        width: 100%; }
        #caststaff .staff:first-child dt .staff-name {
          width: 250px;
          margin-bottom: 20px; }
        #caststaff .staff:first-child dt .staff-img {
          width: 100%; }
      #caststaff .staff:first-child dd {
        width: 100%; }
  #caststaff .caststaff-bridge {
    width: 100%;
    height: 100vh;
    position: relative; }
    #caststaff .caststaff-bridge .inner {
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: #000 url("../images/caststaff/caststaff_bridge.jpg") no-repeat center top;
      background-size: 100% auto;
      z-index: -1; }
      #caststaff .caststaff-bridge .inner img {
        opacity: 0; }

#story {
  height: 100%; }
  #story .story-inner {
    height: 100%; }
  #story .story-l {
    width: 100%;
    height: 100%;
    background: url("../images/story/story_bg.jpg") no-repeat left bottom;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; }
    #story .story-l .page-title {
      position: absolute;
      top: 65px;
      left: 30px;
      width: 30%;
      z-index: 100; }
    #story .story-l .catch1 {
      width: 100%;
      padding: 0 20px;
      margin: auto auto 30px; }
    #story .story-l .scroll-text {
      margin: 0 auto auto;
      padding: 0 20px; }
      #story .story-l .scroll-text p {
        text-align: left;
        font-size: 1.4rem;
        line-height: 1.7em;
        letter-spacing: 0.05em;
        color: #FFF; }
        #story .story-l .scroll-text p br {
          display: none; }
  #story .story-r {
    width: 100%;
    height: 100%;
    background: url("../images/story/story_kv1.jpg") no-repeat center top;
    background-size: cover;
    position: relative; }
    #story .story-r .catch2 {
      width: 6%;
      position: absolute;
      top: 12%;
      right: 16%; }

#introduction {
  height: 100%; }
  #introduction .introduction-inner {
    position: relative;
    height: 100%; }
    #introduction .introduction-inner .page-title {
      position: absolute;
      top: 65px;
      right: 30px;
      width: 40%;
      z-index: 100; }
  #introduction .introduction-l {
    width: 100%;
    height: 100vh;
    background: url("../images/introduction/introduction_kei.jpg") no-repeat left top;
    background-size: cover;
    position: relative; }
    #introduction .introduction-l .catch4 {
      position: absolute;
      right: 25%;
      top: 20vh;
      width: 12%; }
    #introduction .introduction-l .catch3 {
      width: 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 100; }
  #introduction .introduction-r {
    width: 100%;
    background: url("../images/introduction/introduction_bg.jpg") no-repeat right top;
    background-size: cover;
    padding: 30px 0 60px; }
    #introduction .introduction-r .catch1 {
      width: 100%;
      padding: 0 5px;
      margin-bottom: 30px; }
    #introduction .introduction-r-inner .thumbs1,
    #introduction .introduction-r-inner .thumbs2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      padding: 0 8px;
      margin: 3em auto; }
      #introduction .introduction-r-inner .thumbs1 img,
      #introduction .introduction-r-inner .thumbs2 img {
        display: block;
        width: calc( 33% - 4px );
        margin: 0 2px; }
    #introduction .introduction-r-inner .textbox {
      width: 100%;
      padding: 0 20px; }
      #introduction .introduction-r-inner .textbox .catch2 {
        margin: 3em 1.5em; }
      #introduction .introduction-r-inner .textbox .scroll-text {
        width: 100%; }
        #introduction .introduction-r-inner .textbox .scroll-text p {
          color: #FFF;
          font-size: 1.4rem;
          line-height: 1.7em; }

#trailer-btns {
  margin: 10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap; }
  #trailer-btns li {
    width: 25%;
    box-sizing: border-box;
    padding-bottom: 10px;
    padding-right: 10px; }
    #trailer-btns li span {
      display: block;
      letter-spacing: 0.6pt;
      background: #CCC;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      color: #2a2824;
      border: solid 1px #CCC !important;
      border-radius: 30px;
      cursor: pointer; }
      #trailer-btns li span:hover {
        background: #FFF;
        border: solid 1px #FFF !important; }
      #trailer-btns li span.current {
        background: #e60038 !important;
        color: #FFF !important;
        border: solid 1px #e60038 !important;
        cursor: default !important; }
        #trailer-btns li span.current:hover {
          background: #e60038;
          border: solid 1px #e60038 !important; }

.is_loaded #introduction,
.is_loaded #story {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded .page-title {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #story .catch1 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #story .scroll-text {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #story .catch2 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.is_loaded #introduction .catch4 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes fadeInUp {
  from {
    transform: translateY(40px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }
@-webkit-keyframes scaleVerticalRight {
  from {
    transform: translateY(-40px);
    height: 0%; }
  to {
    transform: translateY(0px);
    height: 100%; } }
@-webkit-keyframes scaleLeft {
  from {
    width: 100%; }
  to {
    width: 0; } }
@keyframes scaleLeft {
  from {
    width: 100%; }
  to {
    width: 0; } }
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes moveLeft {
  from {
    transform: translateX(40px);
    opacity: 0; }
  to {
    transform: translateX(0px);
    opacity: 1; } }
@keyframes moveLeft {
  from {
    transform: translateX(40px);
    opacity: 0; }
  to {
    transform: translateX(0px);
    opacity: 1; } }
@-webkit-keyframes moveBottom {
  from {
    transform: translateY(-40px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }
@keyframes moveBottom {
  from {
    transform: translateY(-40px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }
.fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.6s; }

.fadeinLeft {
  opacity: 0;
  transform: translateY(40px) translateX(-40px);
  transition: all 1.6s; }

.fadeinRight {
  opacity: 0;
  transform: translateY(40px) translateX(40px);
  transition: all 1.6s; }