/*---------------------------------------------
  page_index
---------------------------------------------*/
#page_index #bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1; }
  #page_index #bg #slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    #page_index #bg #slide > div {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 8;
      opacity: 0.0; }
      #page_index #bg #slide > div.active {
        z-index: 10;
        opacity: 1.0; }
      #page_index #bg #slide > div.last-active {
        z-index: 9; }
  #page_index #bg:after {
    content: "";
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-image: url("images/3cs_bg.svg");
    background-size: 5px 5px;
    top: 0;
    left: 0; }
#page_index #kv {
  position: relative;
  width: 100vw;
  height: calc(100vh - 13.3333vw);
  overflow: hidden; }
  #page_index #kv .kv-inner {
    width: 100vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%); }
    #page_index #kv .kv-inner .kv-logo {
      width: 32vw;
      margin: 0 auto;
      margin-bottom: 8vw; }
    #page_index #kv .kv-inner .kv-catch_en {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      text-align: center;
      font-size: 5.3333333333vw;
      line-height: 8vw;
      margin-bottom: 8vw; }
    #page_index #kv .kv-inner .kv-catch_jp {
      text-align: center;
      font-size: 3.7333333333vw;
      line-height: 5.6vw;
      margin-bottom: 8vw; }
    #page_index #kv .kv-inner .btn_white_round {
      width: 64vw;
      height: 13.3333333333vw;
      line-height: 13.3333333333vw;
      font-family: 'Montserrat', sans-serif;
      font-weight: 300; }
  #page_index #kv .kv-scroll {
    position: absolute;
    top: 0;
    left: 5.3333333333vw;
    border-right: solid 1px #ccc;
    height: calc(100vh - 13.3333vw);
    border-right: solid 1px #ccc;
    width: 5.3333333333vw; }
    #page_index #kv .kv-scroll .kv-scroll--image {
      border-right: solid 1px #e80063;
      width: 5.3333333333vw;
      position: absolute;
      bottom: 0;
      padding: 2.6666666667vw 0; }
    #page_index #kv .kv-scroll img {
      width: 2.9333333333vw; }
#page_index #creators {
  width: 90%;
  margin: 0 auto; }
  #page_index #creators .live_bnr_pc {
    display: none; }

@media screen and (min-width: 768px), print {
  /*---------------------------------------------
    page_index
  ---------------------------------------------*/
  #page_index #bg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    background-image: url("images/3cs_poster.jpg");
    background-size: cover; }
    #page_index #bg video {
      min-width: 100%;
      min-height: 100vh;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%); }
  #page_index #kv {
    height: calc(100vh - 5vw);
    overflow: hidden;
    line-height: 1; }
    #page_index #kv .kv-inner .kv-logo {
      width: 210px;
      margin: 0 auto;
      margin-bottom: 40px; }
    #page_index #kv .kv-inner .kv-catch_en {
      font-size: 22px;
      margin-bottom: 16px;
      line-height: 1; }
    #page_index #kv .kv-inner .kv-catch_jp {
      font-size: 14px;
      margin-bottom: 60px;
      line-height: 1; }
    #page_index #kv .kv-inner .btn_white_round {
      font-size: 14px;
      width: 240px;
      height: 50px;
      line-height: 50px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 300; }
    #page_index #kv .kv-scroll {
      position: absolute;
      top: 0;
      left: 8.3333333333vw;
      height: calc(100vh - 5vw);
      width: 1.6666666667vw; }
      #page_index #kv .kv-scroll .kv-scroll--image {
        width: 1.6666666667vw;
        position: absolute;
        bottom: 0;
        padding: 0.8333333333vw 0; }
      #page_index #kv .kv-scroll img {
        width: 0.9166666667vw; }
  #page_index #creators {
    width: 100%; }
    #page_index #creators .creator .bg_creator {
      background-size: auto 100%;
      position: relative; }
      #page_index #creators .creator .bg_creator .creator_info {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        left: 6.6666666667vw;
        padding: 6.6666666667vw 0; }
    #page_index #creators .creator .live_bnr_pc.is-right {
      text-align: right; }
    #page_index #creators .creator .live_bnr_pc.is-left {
      text-align: left; }
    #page_index #creators .creator:nth-child(2n) .creator_info {
      left: auto;
      right: 6.6666666667vw;
      padding: 6.6666666667vw 0; }
    #page_index #creators .live_bnr {
      background: rgba(0, 0, 0, 0.7); }
    #page_index #creators .live_bnr_pc {
      display: block;
      height: 100%;
      text-align: center; }
      #page_index #creators .live_bnr_pc img {
        width: auto;
        height: 100%; }
    #page_index #creators .live_bnr_sp {
      display: none; } }
@media screen and (min-width: 768px), print {
  #page_index #creators .creator.is-left .bg_creator {
    background-position: left !important; }

  #page_index #creators .creator.is-left .bg_creator .creator_info {
    left: auto;
    right: 6.6666666667vw !important;
    padding: 6.6666666667vw 0 !important; }

  #page_index #creators .creator.is-left .bg_creator .creator-no {
    right: auto !important;
    left: 3.75vw !important; }

  #page_index #creators .creator.is-right .bg_creator {
    background-position: right !important; }

  #page_index #creators .creator.is-right .bg_creator .creator_info {
    right: auto;
    left: 6.6666666667vw !important;
    padding: 6.6666666667vw 0 !important; }

  #page_index #creators .creator.is-right .bg_creator .creator-no {
    right: 3.75vw !important;
    left: auto !important; }

  #page_index #creators .creator:nth-child(2n).is-right .bg_creator {
    background-position: right !important; }

  #page_index #creators .creator:nth-child(2n).is-right .bg_creator .creator_info {
    left: auto;
    right: 6.6666666667vw !important;
    padding: 6.6666666667vw 0 !important; }

  #page_index #creators .creator:nth-child(2n).is-right .bg_creator .creator_no {
    right: 3.75vw !important;
    left: auto !important; } }