@charset "UTF-8";
@media screen and (min-width: 961px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 520px) {
}

/*========= ローディング画面のためのCSS ===============*/

#logo_loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    background-color: #fff;
  }
  #logo_loader .f_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  
    width: 25%;
    height: auto;
    text-align: center;
    color: #fff;
    font-size: 30px;
  }
  @media screen and (max-width: 960px) {
    #logo_loader .f_logo {
      width: 80%;
    }
  }
  #logo_loader .f_logo img {
    width: 100%;
    height: auto;
  }
  
  #logo_loader .f_logo:before {
    content: "";
    display: block;
    width: 110%;
    height: 110%;
    background-color: #fff;
    position: absolute;
    bottom: 100%;
    left: 0;
    -webkit-animation: loadLogo 1.0s;
            animation: loadLogo 1.0s;
    -webkit-animation-timing-function:ease-in-out;
            animation-timing-function:ease-in-out;
  }
  @-webkit-keyframes loadLogo {
    0% {
      bottom: -1%;
    }
    25% {
      bottom: 0;
    }
    80% {
      bottom: 100%;
    }
    100% {
      bottom: 100%;
    }
  }
  @keyframes loadLogo {
    0% {
      bottom: -1%;
    }
    25% {
      bottom: 0;
    }
    80% {
      bottom: 100%;
    }
    100% {
      bottom: 100%;
    }
  }
  
  /*========= 画面遷移のためのCSS ===============*/
  
  /*画面遷移アニメーション*/
  .splashbg{
      display: none;
  }
  
  /*bodyにappearクラスがついたら出現*/
  body.appear .splashbg{
      display: block;
      content: "";
      position:fixed;
      z-index: 999;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      -webkit-transform: scaleY(0);
          -ms-transform: scaleY(0);
              transform: scaleY(0);
      /* background-color: #fff; */
      background-color: rgb(0, 160, 168);
      -webkit-animation-name:PageAnime;
              animation-name:PageAnime;
      -webkit-animation-duration:.85s;
              animation-duration:.85s;
      -webkit-animation-timing-function:ease-in;
              animation-timing-function:ease-in;
      -webkit-animation-fill-mode:forwards;
              animation-fill-mode:forwards;
  }
  
  @-webkit-keyframes PageAnime{
      0% {
          -webkit-transform-origin:bottom;
                  transform-origin:bottom;
          -webkit-transform:scaleY(0);
                  transform:scaleY(0);
      }
      50% {
          -webkit-transform-origin:bottom;
                  transform-origin:bottom;
          -webkit-transform:scaleY(1);
                  transform:scaleY(1);
      }
      50.001% {
          -webkit-transform-origin:top;
                  transform-origin:top;
      }
      100% {
          -webkit-transform-origin:top;
                  transform-origin:top;
          -webkit-transform:scaleY(0);
                  transform:scaleY(0);
      }
  }
  
  @keyframes PageAnime{
      0% {
          -webkit-transform-origin:bottom;
                  transform-origin:bottom;
          -webkit-transform:scaleY(0);
                  transform:scaleY(0);
      }
      50% {
          -webkit-transform-origin:bottom;
                  transform-origin:bottom;
          -webkit-transform:scaleY(1);
                  transform:scaleY(1);
      }
      50.001% {
          -webkit-transform-origin:top;
                  transform-origin:top;
      }
      100% {
          -webkit-transform-origin:top;
                  transform-origin:top;
          -webkit-transform:scaleY(0);
                  transform:scaleY(0);
      }
  }
  
  /*画面遷移の後現れるコンテンツ設定*/
  #container{
    opacity: 0;/*はじめは透過0に*/
  }
  
  /*bodyにappearクラスがついたら出現*/
  body.appear #container{
    -webkit-animation-name:PageAnimeAppear;
            animation-name:PageAnimeAppear;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    opacity: 0;
  }
  
  @-webkit-keyframes PageAnimeAppear{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
  }
  }
  
  @keyframes PageAnimeAppear{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
  }
  }
  
  /*----------------------------------------------------
        img
    ----------------------------------------------------*/
    .anime-bg,
    .anime-bg-right,
    .anime-bg-insta {
      display: block;
      position: relative;
      overflow: hidden;
    }
    .anime-bg::after,
    .anime-bg-right::after,
    .anime-bg-insta::after {
      background-color: #fff;
      bottom: 0;
      content: '';
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
    .anime-bg::after,
    .anime-bg-right::after,
    .anime-bg-insta::after{
      -webkit-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
              transform: translate(0, 0);
    }
    
    /*------*/
  
    .anime-bg.is-animated::after{
      -webkit-transform: translate(0, -100%);
          -ms-transform: translate(0, -100%);
              transform: translate(0, -100%);
      -webkit-animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
              animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
    }
    @-webkit-keyframes mask-bg {
      0% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
      }
      100% {
          -webkit-transform: translate(0, 101%);
                  transform: translate(0, 101%)
      }
    }
    @keyframes mask-bg {
      0% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
      }
      100% {
          -webkit-transform: translate(0, 101%);
                  transform: translate(0, 101%)
      }
    }
  
    .anime-bg-right.is-animated::after,
    .anime-bg-insta.is-animated::after {
      -webkit-transform: translate(-100%, 0);
          -ms-transform: translate(-100%, 0);
              transform: translate(-100%, 0);
      -webkit-animation: mask-bg-right 1.2s cubic-bezier(0.8, 0, 0.170, 1);
              animation: mask-bg-right 1.2s cubic-bezier(0.8, 0, 0.170, 1);
    }
    @-webkit-keyframes mask-bg-right {
      0% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
      }
      100% {
        -webkit-transform: translate(101%, 0);
                transform: translate(101%, 0)
  
      }
    }
    @keyframes mask-bg-right {
      0% {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0)
      }
      100% {
        -webkit-transform: translate(101%, 0);
                transform: translate(101%, 0)
  
      }
    }