@charset "UTF-8";
    /*----シャッターエフェクト----*/
    .start {
        position:fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        z-index: 9010;
    }
    .start p {
        position:fixed;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 9010;
        width: 280px;
    }

    .shutter_logo{
        width: 90%;
    }

    .shutter{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#373737;
        z-index:9000;
        animation: byeShutter 3s forwards;
        
        &::before,
        &::after{
          content:'';
          position:absolute;
          top:0;
          left:0;
          bottom:0;
          margin:auto;
        }
        
        &::before{
          background-color:#ed6c00;
          width:0;
          height:1px;
          animation: shutterOpen1 3s forwards;
        }
        
        &::after{
          width:100vw;
          height:0;
          margin-left:-10%;
          background-color:#fff;
          animation: shutterOpen2 3s forwards;
        }
    }

      @keyframes byeShutter{
        70%{
          opacity:1;
        }
        100%{
          opacity:0;
          display:none;
          z-index:0;
        }
      }
      
      @keyframes shutterOpen1{
        0%{
          width:0;
          height:1px;
        }
        50%{
          width:100%;
          height:1px;
        }
        90%{
          width:100%;
          height:100%;
        }
        100%{
          width:100%;
          height:100%;
          z-index:0;
        }
      }
      
      @keyframes shutterOpen2{
        60%{
          width:120%;
          height:0;
          transform:rotate(5deg);
        }
        90%{
          width:120%;
          height:100%;
          transform:rotate(-5deg);
        }
        100%{
          width:120%;
          height:100%;
          transform:rotate(-5deg);
          z-index:0;
        }
      }
    /*--------------------------*/

/*----キャッチコピー(下からフェードイン)----*/
 .copy_1 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.copy_2 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 1.5s,visibility 1.5s, transform 1.5s;
}
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.copy_3 {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);
    transition: opacity 2s,visibility 2s, transform 2s;
}
.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}
/*---------------------*/

    /*--コンテンツスライドイン--*/
    .slide_left {
      opacity: 0;
      visibility: hidden;
      transform: translateX(-50px);
      transition: opacity 1s, visibility 1s, transform 1s;
  }

  .slide_right {
      opacity: 0;
      visibility: hidden;
      transform: translateX(50px);
      transition: opacity 1s, visibility 1s, transform 1s;
  }

  .scroll {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
  }