@charset "utf-8";


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● anim.css                                            */
/*    CSSアニメーションを定義                             */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 基本形
--------------------------------------------------- */


    // 回転モーション
    @keyframes rotate {
        0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    // 点滅モーション
    @keyframes blink{
        0% { opacity:0; }
       50% { opacity:1; }
      100% { opacity:0; }
    }





/* スクロールをうながすアイコン
--------------------------------------------------- */
.mouse_scroll {
    margin: 2.5rem auto 0;
    width:  30px;
    height: 50px;
    border: 2px solid $text-color;
    border-radius: 50px;
    position: relative;
    &::before,
    &::after {
      @extend %_pseudo_element;
    }
    &::after {
      width:  8px;
      height: 8px;
      left: 50%;
      transform: translateX(-50%);
      background-color: $text-color;
      border-radius: 50%;
      animation: wheel 2s infinite;
    }
    &::before{
      content: "scroll down";
      display: inline-block;
      left: 50%;
      bottom: calc(100% + 0.5em);
      white-space: nowrap;
      text-align: center;
      width: 6em;
      margin-left: -3em;
      font-size: 2rem;
      animation: blink 2s infinite;
    }
  }
  @keyframes wheel {
    0% {
      top: calc(10px + 0%);
    }
    1% {
      opacity: 1;
    }
    100% {
      top: calc(100% - 18px);
      opacity: 0;
    }
  }