@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');


/**
 * ================================================================================
 * Table of Contents:
 *
 * Top Page Settings
 * Basic Structure
 * Content Settings
 * ================================================================================
 */ 

 




/**
 * ================================================================================
 * Basic Structure
 * ================================================================================
 */


html,
body {
  width: 100%;
  height: 100%;
  }

body {
  background-color: #000;
  color: #fff;
  }

#header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 20000;
  }

#contents {
  width: 100%;
  height: 100%;
  }

#footer {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 55px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  }

#loader {
  background-color: #000;
  background-image: url("/assets/common/img/loader.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 35px auto;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  }






/**
 * ================================================================================
 * Content Settings
 * ================================================================================
 */


/**
 * Main Visual
 * -------------------------------
 */

#mv {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  }

body.is-loaded #mv .mv_animateShake.is-animated { animation: mv_shake 3s infinite; }

@keyframes mv_shake {
  0% {
    transform: none;
  }
  33% {
    transform: none;
  }
  33.3% {
    transform: skewX(10deg);
    opacity: 1;
  }
  33.6% {
    transform: skewX(-10deg);
    opacity: 0;
  }
  33.9% {
    transform: none;
    opacity: 1;
  }
  66% {
    transform: none;
  }
  66.3% {
    transform: skewX(2.5deg);
  }
  66.6% {
    transform: skewX(-2.5deg);
  }
  66.9% {
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewX(7.5deg);
    opacity: 1;
  }
  77.6% {
    transform: skewX(-7.5deg);
    opacity: 0;
  }
  77.9% {
    transform: none;
    opacity: 1;
  }
}


  /* -- .mv_inner -- */
  #mv .mv_inner {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    }


  /* -- .mv_ttl -- */
  #mv .mv_ttl {
    width: 100%;
    text-align: center;
    }

    #mv .mv_ttl .mv_ttlLogo {
      width: calc(100vw * (700 / 1600));
      opacity: 0;
      visibility: hidden;
      }
    body.is-loaded #mv .mv_ttl .mv_ttlLogo {
      opacity: 1;
      visibility: visible;
      }

      #mv .mv_ttl .mv_ttlLogo .mv_ttlLogoInner path {
        fill: #fff;
        stroke: rgba(255, 255, 255, 1);
        stroke-width: .5px;
        }

      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt01 {
        stroke-dasharray: calc(100% * (225 / 1600));
        animation: mv_ttlLogoAni01 0.9s ease-in both 0s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt02 {
        stroke-dasharray: calc(100% * (202 / 1600));
        animation: mv_ttlLogoAni02 0.9s ease-in both 0.15s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt03 {
        stroke-dasharray: calc(100% * (188 / 1600));
        animation: mv_ttlLogoAni03 0.9s ease-in both 0.3s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt04 {
        stroke-dasharray: calc(100% * (203 / 1600));
        animation: mv_ttlLogoAni04 0.9s ease-in both 0.45s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt05 {
        stroke-dasharray: calc(100% * (222 / 1600));
        animation: mv_ttlLogoAni05 0.9s ease-in both 0.6s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt06 {
        stroke-dasharray: calc(100% * (185 / 1600));
        animation: mv_ttlLogoAni06 0.9s ease-in both 0.75s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt07 {
        stroke-dasharray: calc(100% * (225 / 1600));
        animation: mv_ttlLogoAni07 0.9s ease-in both 0.9s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt08 {
        stroke-dasharray: calc(100% * (205 / 1600));
        animation: mv_ttlLogoAni08 0.9s ease-in both 1.05s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt09 {
        stroke-dasharray: calc(100% * (151 / 1600));
        animation: mv_ttlLogoAni09 0.9s ease-in both 1.2s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt10 {
        stroke-dasharray: calc(100% * (218 / 1600));
        animation: mv_ttlLogoAni10 0.9s ease-in both 1.35s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt11 {
        stroke-dasharray: calc(100% * (224 / 1600));
        animation: mv_ttlLogoAni11 0.9s ease-in both 1.5s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt12 {
        stroke-dasharray: calc(100% * (206 / 1600));
        animation: mv_ttlLogoAni12 0.9s ease-in both 1.65s; 
        }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt13 {
        stroke-dasharray: calc(100% * (182 / 1600));
        animation: mv_ttlLogoAni13 0.9s ease-in both 1.8s; 
        }

      @keyframes mv_ttlLogoAni01 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (225 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni02 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (202 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni03 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (188 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni04 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (203 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni05 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (222 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni06 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (185 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni07 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (225 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni08 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (205 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni09 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (151 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni10 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (218 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni11 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (224 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni12 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (206 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni13 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100% * (182 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }

  
  /* -- .mv_artist -- */
  #mv .mv_artist {
    width: 100%;
    text-align: center;
    margin-top: calc(100vw * (60 / 1600));
    }

    #mv .mv_artist > dt {
      display: block;
      padding-bottom: calc(100vw * (15 / 1600));
      position: relative;
      }

      #mv .mv_artist > dt > span { display: block; }

      #mv .mv_artist > dt > span:nth-of-type(1) {
        font-family: "Special Elite", cursive;
        font-size: calc(100vw * (20 / 1600));
        letter-spacing: 0.3em;
        }

      #mv .mv_artist > dt > span:nth-of-type(2) {
        width: calc(100vw * (40 / 1600));
        height: calc(100vw * (2 / 1600));
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        }

        #mv .mv_artist > dt > span:nth-of-type(2) > span {
          background-color: #fff;
          display: block;
          width: 100%;
          height: 100%;
          }

    #mv .mv_artist > dd {}

      #mv .mv_artist > dd .mv_artistLists {
        margin: calc(100vw * (-40 / 1600)) 0 0 calc(100vw * (-60 / 1600));
        list-style: none;
        letter-spacing: -.40em;
        }

        #mv .mv_artist > dd .mv_artistLists > li {
          display: inline-block;
          padding: calc(100vw * (40 / 1600)) 0 0 calc(100vw * (60 / 1600));
          letter-spacing: normal;
          vertical-align: top;
          }

          #mv .mv_artist > dd .mv_artistLists > li > * {
            display: block;
            width: calc(100vw * (220 / 1600))
            }

            #mv .mv_artist > dd .mv_artistLists > li > * img { width: 100%; }


  /* -- .mv_bg -- */
  #mv .mv_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    }

    #mv .mv_bg:after {
      content: "";
      background-color: rgba(0, 0, 0, 0.2);
      background-image: url("/assets/top/img/mv_bg_dot.svg");
      background-repeat: repeat;
      background-size: 2px auto;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      }

    body.is-loaded #mv .mv_bg .mv_bgInner {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      }

      #mv .mv_bg video,
      #mv .mv_bg img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        transform: translate(-50%, -50%);
        }

      #mv .mv_bg img { display: none; }



/**
 * Sound
 * -------------------------------
 */

#sound {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3;
  }


  /* -- .sound_change -- */
  #sound .sound_change {
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: 1s all;
    }

  #sound .sound_change.is-show {
    opacity: 1;
    visibility: visible;
    }

    #sound .sound_change::before,
    #sound .sound_change::after {
      display: inline-block;
      font-family: "Special Elite", cursive;
      color: #fff;
      transition: 0.3s all;
      }

    #sound .sound_change:hover::before,
    #sound .sound_change:hover::after { opacity: 0.7; }

    #sound .sound_change::before {
      content: "\f6a9";
      display: inline-block;
      margin-right: 5px;
      font-family: "Font Awesome 6 Free";
      font-size: 1.4rem;
      font-weight: 900;
      }
    body.is-sound #sound .sound_change::before { content: "\f028"; }

    #sound .sound_change::after {
      content: "OFF";
      font-size: 1.4rem;
      letter-spacing: 0.15em;
      }
    body.is-sound #sound .sound_change::after { content: "ON"; }



/**
 * Sound Check
 * -------------------------------
 */

#soundCheck {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: 1s all;
  }

#soundCheck.is-remove {
  opacity: 0;
  visibility: hidden;
  }


  /* -- .soundCheck_inner -- */
  #soundCheck .soundCheck_inner {
    width: 600px;
    padding: 40px;
    font-family: "Special Elite", cursive;
    color: #fff;
    text-align: center;
    }

    #soundCheck .soundCheck_inner > dt {
      display: block;
      margin-bottom: 15px;
      position: relative;
      font-size: 2.8rem;
      letter-spacing: 0.3em;
      }

    #soundCheck .soundCheck_inner > dd {}

      #soundCheck .soundCheck_inner > dd > ul {
        margin-left: -15px;
        list-style: none;
        letter-spacing: -.40em;
        }

        #soundCheck .soundCheck_inner > dd > ul > li {
          display: inline-block;
          width: 50%;
          padding-left: 15px;
          letter-spacing: normal;
          vertical-align: top;
          }

          #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn {
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            height: 60px;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255, 255, 255, 0.7);
            position: relative;
            cursor: pointer;
            color: #fff;
            font-size: 2.0rem;
            line-height: 1;
            letter-spacing: 0.15em;
            transition: 0.3s all;
            }
          #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn:hover {
            background-color: rgba(255, 255, 255, 1);
            border: 2px solid rgba(255, 255, 255, 1);
            color: #000;
            }

            #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn::before {
              display: inline-block;
              margin-right: 10px;
              font-family: "Font Awesome 6 Free";
              color: #fff;
              font-size: 2.0rem;
              font-weight: 900;
              transition: 0.3s all;
              }
            #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn:hover::before { color: #000; }

            #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn-on::before { content: "\f028"; }
            #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn-off::before { content: "\f6a9"; }



/**
 * Modal
 * -------------------------------
 */

/* -- .modal_artistLists -- */
.modal_artistLists {
  background-color: #fff;
  width: 700px;
  }

  .modal_artistLists .modal_artistListsTtl {
    background-color: #000;
    text-align: center;
    padding: 25px 60px;
    }

    .modal_artistLists .modal_artistListsTtl img { width: 400px; }

  .modal_artistLists .modal_artistListsInner { padding: 50px 60px; }

  .modal_artistLists .modal_artistListsLinks {
    margin: -15px 0 0 -15px;
    list-style: none;
    letter-spacing: -.40em;
    text-align: center;
    }

    .modal_artistLists .modal_artistListsLinks > li {
      display: inline-block;
      width: 50%;
      padding: 15px 0 0 15px;
      letter-spacing: normal;
      vertical-align: top;
      }

      .modal_artistLists .modal_artistListsLinks > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        border: 1px solid #000;
        font-family: "Special Elite", cursive;
        color: #000;
        font-size: 1.8rem;
        text-decoration: none;
        line-height: 1;
        }

      .modal_artistLists .modal_artistListsLinks > li > a:hover {
        background-color: #000;
        color: #fff;
        }

        .modal_artistLists .modal_artistListsLinks > li > a:before {
          display: inline-block;
          margin-right: 15px;
          font-family: "Font Awesome 6 Brands";
          color: #000;
          font-size: 2.2rem;
          font-weight: 900;
          transition: 0.3s all;
          }

        .modal_artistLists .modal_artistListsLinks > li > a:hover:before { color: #fff; }

        .modal_artistLists .modal_artistListsLinks > li.modal_artistListsLinksYm > a:before { content: "\f167"; }
        .modal_artistLists .modal_artistListsLinks > li.modal_artistListsLinksAm > a:before { content: "\f179"; }
        .modal_artistLists .modal_artistListsLinks > li.modal_artistListsLinksSp > a:before { content: "\f1bc"; }
        .modal_artistLists .modal_artistListsLinks > li.modal_artistListsLinksSc > a:before { content: "\f1be"; }






/**
 * ================================================================================
 * Footer Settings
 * ================================================================================
 */


/**
 * SNS
 * -------------------------------
 */

.footer_sns {
  margin-left: -30px;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  letter-spacing: -.40em;
  }

  .footer_sns > li {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
    letter-spacing: normal;
    vertical-align: middle;
    }

    .footer_sns > li > a { display: block; }

    .footer_sns > li > a:hover { opacity: 1; }

      .footer_sns > li > a::before {
        display: inline-block;
        font-family: "Font Awesome 6 Brands";
        color: #666;
        font-size: 2.0rem;
        font-weight: 900;
        transition: 0.3s all;
        }

      .footer_sns > li > a:hover::before { color: #fff; }

      .footer_sns > li.footer_snsTw > a::before { content: "\f099"; }
      .footer_sns > li.footer_snsYt > a::before { content: "\f167"; }
      .footer_sns > li.footer_snsIg > a::before { content: "\f16d"; }
      .footer_sns > li.footer_snsSc > a::before { content: "\f1be"; }



/**
 * Navigation
 * -------------------------------
 */

.footer_nav {
  margin-left: -30px;
  position: absolute;
  top: 50%;
  left: 220px;
  transform: translateY(-50%);
  letter-spacing: -.40em;
  }

  .footer_nav:before {
    content: "";
    background-color: #666;
    width: 1px;
    height: 80%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    }
  
  .footer_nav > li {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
    letter-spacing: normal;
    vertical-align: middle;
    }

    .footer_nav > li > a { display: block; }

    .footer_nav > li > a::before {
      display: inline-block;
      font-family: "Font Awesome 6 Free";
      color: #666;
      font-size: 2.0rem;
      font-weight: 900;
      transition: 0.3s all;
      }

    .footer_nav > li > a:hover::before { color: #fff; }

    .footer_nav > li.footer_navBc > a::before {
      font-family: "Font Awesome 6 Brands";
      content: "\f2d5";
      }
    .footer_nav > li.footer_navCart > a::before { content: "\f07a"; }

    .footer_nav > li > a > img {
      height: 18px;
      opacity: 0.5;
      transform: translateY(-2px);
      transition: 0.2s all;
      }

    .footer_nav > li > a:hover > img { opacity: 1; }

 

/**
 * Credit
 * -------------------------------
 */

.footer_credit {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  }

  .footer_credit > p {
    font-family: "Special Elite", cursive;
    color: #666;
    font-size: 10px;
    }

    .footer_credit > p > br { display: none; }










@media all and (min-width: 768px) and (max-width: 1499px) {


/**
 * ================================================================================
 * Content Settings
 * ================================================================================
 */


/**
 * Main Visual
 * -------------------------------
 */
  
#mv {}
  

  /* -- .mv_ttl -- */
  #mv .mv_ttl {
    width: 100%;
    text-align: center;
    }

    #mv .mv_ttl .mv_ttlLogo { width: calc(1600px * (700 / 1600)); }

      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt01 { stroke-dasharray: calc(1600px * (225 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt02 { stroke-dasharray: calc(1600px * (202 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt03 { stroke-dasharray: calc(1600px * (188 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt04 { stroke-dasharray: calc(1600px * (203 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt05 { stroke-dasharray: calc(1600px * (222 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt06 { stroke-dasharray: calc(1600px * (185 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt07 { stroke-dasharray: calc(1600px * (225 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt08 { stroke-dasharray: calc(1600px * (205 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt09 { stroke-dasharray: calc(1600px * (151 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt10 { stroke-dasharray: calc(1600px * (218 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt11 { stroke-dasharray: calc(1600px * (224 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt12 { stroke-dasharray: calc(1600px * (206 / 1600)); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt13 { stroke-dasharray: calc(1600px * (182 / 1600)); }

      @keyframes mv_ttlLogoAni01 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (225 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni02 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (202 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni03 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (188 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni04 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (203 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni05 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (222 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni06 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (185 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni07 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (225 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni08 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (205 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni09 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (151 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni10 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (218 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni11 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (224 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni12 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (206 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni13 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(1600px * (182 / 1600));
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }

  
  /* -- .mv_artist -- */
  #mv .mv_artist { margin-top: calc(1600px * (60 / 1600)); }

    #mv .mv_artist > dt { padding-bottom: calc(1600px * (15 / 1600)); }

      #mv .mv_artist > dt > span:nth-of-type(1) { font-size: calc(1600px * (20 / 1600)); }

      #mv .mv_artist > dt > span:nth-of-type(2) {
        width: calc(1600px * (40 / 1600));
        height: calc(1600px * (2 / 1600));
        }

    #mv .mv_artist > dd {}

      #mv .mv_artist > dd .mv_artistLists { margin: calc(1600px * (-40 / 1600)) 0 0 calc(1600px * (-60 / 1600)); }

        #mv .mv_artist > dd .mv_artistLists > li { padding: calc(1600px * (40 / 1600)) 0 0 calc(1600px * (60 / 1600)); }

          #mv .mv_artist > dd .mv_artistLists > li > * { width: calc(1600px * (220 / 1600)); }

    
}
    









@media all and (min-width: 0px) and (max-width: 767px) {
    
    
/**
 * ================================================================================
 * Basic Structure
 * ================================================================================
 */

#footer {
  height: auto;
  padding: 15px 20px 20px 20px;
  }

#loader { background-size: 30px auto; }






/**
 * ================================================================================
 * Content Settings
 * ================================================================================
 */


/**
 * Main Visual
 * -------------------------------
 */
  
#mv {}
  

  /* -- .mv_ttl -- */
  #mv .mv_ttl {}

    #mv .mv_ttl .mv_ttlLogo { width: calc(100vw * (700 / 750) * 0.9); }

      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt01 { stroke-dasharray: calc(100vw * (225 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt02 { stroke-dasharray: calc(100vw * (202 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt03 { stroke-dasharray: calc(100vw * (188 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt04 { stroke-dasharray: calc(100vw * (203 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt05 { stroke-dasharray: calc(100vw * (222 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt06 { stroke-dasharray: calc(100vw * (185 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt07 { stroke-dasharray: calc(100vw * (225 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt08 { stroke-dasharray: calc(100vw * (205 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt09 { stroke-dasharray: calc(100vw * (151 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt10 { stroke-dasharray: calc(100vw * (218 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt11 { stroke-dasharray: calc(100vw * (224 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt12 { stroke-dasharray: calc(100vw * (206 / 750) * 0.9); }
      body.is-loaded #mv .mv_ttl .mv_ttlLogo #mv_ttlLogoSt13 { stroke-dasharray: calc(100vw * (182 / 750) * 0.9); }

      @keyframes mv_ttlLogoAni01 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (225 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni02 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (202 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni03 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (188 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni04 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (203 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni05 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (222 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni06 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (185 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni07 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (225 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni08 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (205 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni09 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (151 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni10 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (218 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni11 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (224 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni12 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (206 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }
      @keyframes mv_ttlLogoAni13 {
        0% {
          fill: transparent;
          stroke: transparent;
          stroke-dashoffset: calc(100vw * (182 / 750) * 0.9);
        }
        50% {
          fill: transparent;
          stroke: rgba(255, 255, 255, 1);
          stroke-dashoffset: 0;
        }
        80% {
          fill: #ccc;
          stroke: #ccc;
        }
        100% {
          fill: #fff;
          stroke: #fff;
        }
      }

  
  /* -- .mv_artist -- */
  #mv .mv_artist { margin-top: calc(100vw * (60 / 750)); }

    #mv .mv_artist > dt { padding-bottom: calc(100vw * (15 / 750) * 1.4); }

      #mv .mv_artist > dt > span:nth-of-type(1) { font-size: calc(100vw * (20 / 750) * 1.2); }

      #mv .mv_artist > dt > span:nth-of-type(2) {
        width: calc(100vw * (40 / 750) * 1.4);
        height: calc(100vw * (2 / 750) * 1.4);
        }

    #mv .mv_artist > dd {}

      #mv .mv_artist > dd .mv_artistLists { margin: calc(100vw * (-40 / 750) * 1.3) 0 0 calc(100vw * (-60 / 750) * 1.4); }

        #mv .mv_artist > dd .mv_artistLists > li { padding: calc(100vw * (40 / 750) * 1.3) 0 0 calc(100vw * (60 / 750) * 1.4); }

          #mv .mv_artist > dd .mv_artistLists > li > * { width: calc(100vw * (220 / 750) * 1.2); }



/**
 * Sound
 * -------------------------------
 */

#sound {
  top: 15px;
  right: 15px;
  }


  /* -- .sound_change -- */
  #sound .sound_change {}

    #sound .sound_change:hover::before,
    #sound .sound_change:hover::after { opacity: 1; }

    #sound .sound_change::before {
      margin-right: 5px;
      font-size: 1.3rem;
      }

    #sound .sound_change::after { font-size: 1.3rem; }



/**
 * Sound Check
 * -------------------------------
 */

#soundCheck {}


  /* -- .soundCheck_inner -- */
  #soundCheck .soundCheck_inner {
    width: 100%;
    padding: 20px;
    }

    #soundCheck .soundCheck_inner > dt {
      margin-bottom: 10px;
      font-size: 2.0rem;
      }

    #soundCheck .soundCheck_inner > dd {}

      #soundCheck .soundCheck_inner > dd > ul { margin-left: -10px; }

        #soundCheck .soundCheck_inner > dd > ul > li {
          width: 50%;
          padding-left: 10px;
          }

          #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn {
            height: 50px;
            border: 2px solid rgba(255, 255, 255, 0.7);
            font-size: 1.6rem;
            }
          #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.7);
            color: #fff;
            }

            #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn::before {
              margin-right: 10px;
              font-size: 1.6rem;
              }
            #soundCheck .soundCheck_inner > dd > ul > li .soundCheck_btn:hover::before { color: #fff; }
  
  
  
/**
 * Modal
 * -------------------------------
 */

/* -- .modal_artistLists -- */
.modal_artistLists { width: 100%; }

  .modal_artistLists .modal_artistListsTtl { padding: 20px;  }

    .modal_artistLists .modal_artistListsTtl img { width: 100%; }

  .modal_artistLists .modal_artistListsInner { padding: 20px; }

  .modal_artistLists .modal_artistListsLinks { margin: -10px 0 0 -10px; }

    .modal_artistLists .modal_artistListsLinks > li {
      width: 100%;
      padding: 10px 0 0 10px;
      }

      .modal_artistLists .modal_artistListsLinks > li > a {
        height: 50px;
        font-size: 1.6rem;
        }

      .modal_artistLists .modal_artistListsLinks > li > a:hover {
        background-color: transparent;
        color: #000;
        }

        .modal_artistLists .modal_artistListsLinks > li > a:before {
          margin-right: 10px;
          font-size: 2.0rem;
          }

        .modal_artistLists .modal_artistListsLinks > li > a:hover:before { color: #000; }




  
  
/**
 * ================================================================================
 * Footer Settings
 * ================================================================================
 */


/**
 * SNS
 * -------------------------------
 */

.footer_sns {
  margin-left: -25px;
  position: static;
  text-align: center;
  transform: translateY(0);
  }

  .footer_sns > li { margin-left: 25px; }

    .footer_sns > li > a::before { font-size: 2.0rem; }

    .footer_sns > li > a:hover::before { color: #666; }
  
  
  
/**
 * Navigation
 * -------------------------------
 */

.footer_nav {
  padding-top: 5px;
  margin: -25px 0 0 -25px;
  position: static;
  text-align: center;
  transform: translateY(0);
  }

  .footer_nav:before { display: none; }
  
  .footer_nav > li { margin: 25px 0 0 25px; }
  
    .footer_nav > li > a::before { font-size: 2.0rem; }

    .footer_nav > li > a:hover::before { color: #666; }

    .footer_nav > li > a > img { height: 16px; }
  
    .footer_nav > li > a:hover > img { opacity: 0.5; }


 
/**
 * Credit
 * -------------------------------
 */

.footer_credit {
  margin-top: 15px;
  position: static;
  text-align: center;
  transform: translateY(0);
  }

  .footer_credit > p {
    font-size: 10px;
    line-height: 1;
    }

    
}