/* html,
body {
  width: 100vw;
  font-size: 0.520833333vw;
} */

/* body {
  margin: 0;
  padding: 0;
} */

@keyframes promptBlink {
  0% {
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 0.0;
  }

  40% {
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 1.0;
  }

  41% {
    transform: skewX(10deg) scaleX(1.05) translateX(-0.1rem);
    opacity: 0.5;
  }

  42% {
    /* transform: scaleX(1.0) translateX(0); */
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 0.7;
  }

  43% {
    /* transform: scaleX(1.05) translateX(0.1rem); */
    transform: skewX(-10deg) scaleX(1.05) translateX(0.0rem);
    opacity: 0.0;
  }

  44% {
    /* transform: scaleX(1.0) translateX(0); */
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 1.0;
  }

  60% {
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    /* transform: translateX(-0.1rem); */
    opacity: 1.0;
  }

  61% {
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 0.3;
  }

  62% {
    transform: skewX(-10deg) scaleX(1.05) translateX(0.1rem);
    opacity: 1.0;
  }

  63% {
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 0.0;
  }

  64% {
    transform: skewX(20deg) scaleX(1.1) translateX(0.2rem);
    opacity: 0.7;
  }

  65% {
    opacity: 0.3;
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
  }

  100% {
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 0.0;
  }

  /* 100% {
    transform: skewX(0deg) scaleX(1.0) translateX(0.0rem);
    opacity: 1.0;
  } */
}


/* MARK: #kamon_wrapper */
#kamon_wrapper {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  position: relative;

  &.dark {
    background-color: #111;
  }

  &.light {
    background-color: #fff;
  }

  /* canvas { */
  /* position: fixed; */
  /* MARK: #kamon */
  #kamon {
    position: sticky;
    top: 0;
    left: 0;
    /* right: 0; */
    /* bottom: 0; */
    /* margin: auto; */
  }




  /* MARK: #roll */
  #roll {
    position: relative;
    width: 100%;
    z-index: -1;
  }




  /* MARK: #prompt */
  #prompt {
    /* position: fixed; */
    position: absolute;
    bottom: 6.4rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 26.0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    color: #808080;
    opacity: 0.0;
    /* transform: translateY(-4.0rem); */
    animation: promptBlink 3000ms infinite cubic-bezier(0.215, 0.61, 0.355, 1);

    .text {
      font-family: "Roboto";
      font-size: 1.5rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    i {
      font-size: 3.2rem;
    }

    &.hide {
      animation-iteration-count: 0;
    }
  }

  @keyframes blink2 {
    50% {
      opacity: 1.0;
      transform: translateY(0.0rem);
    }

    100% {
      transform: translateY(4.0rem);
    }
  }




  /* MARK: #loader */
  #loader {
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    z-index: 1001;

    width: 9.6rem;
    height: 9.6rem;
    transition:
      opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1),
      transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 0.0;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-family: "Roboto";
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .loading & {
      color: #999999;
      transition: none;
      animation: blink 1.6s infinite linear;

      &::after {
        border-top-color: #999;
        animation: spin 1.6s infinite linear;
      }
    }

    &::after {
      content: '';
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #99999933;
      animation: none;
    }
  }

  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes blink {
    50% {
      opacity: 1.0;
    }
  }



  /* MARK: #info */
  #info {

    .jp,
    .en {
      position: absolute;
      width: 33.0rem;
    }

    .name {
      font-family: "Noto Sans JP";
      font-size: 5.2rem;
      font-weight: 400;
      font-style: normal;
      margin: 0 0 1.0rem;
      animation-duration: 1000ms;
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
      animation-fill-mode: both;

      .dark & {
        color: #fff;
        filter: drop-shadow(1px 1px 1px #000);
      }

      .light & {
        color: #000;
        filter: drop-shadow(1px 1px 1px #ccc);
      }
    }

    .desc {
      font-family: "Noto Serif JP";
      font-weight: 400;
      font-style: normal;
      font-size: 1.4rem;
      line-height: 1.8;
      animation-duration: 1000ms;
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
      animation-fill-mode: both;

      .dark & {
        color: #ccc;
        filter: drop-shadow(1px 1px 0px #000);
      }

      .light & {
        color: #333;
        filter: drop-shadow(1px 1px 0px #ccc);
      }
    }

    .miniName {
      position: absolute;
      font-family: "Noto Sans JP";
      font-size: 2.4rem;
      font-weight: 400;
      font-style: normal;
      color: #808080;
      transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .jp {
      top: 3.2rem;
      left: 3.2rem;

      .name {
        white-space: nowrap;
        letter-spacing: 0.4rem;
        opacity: 0.0;
        transform: translateX(-100%);
      }

      .desc {
        opacity: 0.0;
        transform: translateY(-100%);
      }

      .miniName {
        top: 0;
        left: 0;
      }
    }

    .en {
      right: 3.2rem;
      bottom: 3.2rem;

      .name {
        opacity: 0.0;
        transform: translateX(100%);
      }

      .desc {
        opacity: 0.0;
        transform: translateY(100%);
      }

      .miniName {
        right: 0;
        bottom: 0;
      }
    }
  }





  /* MARK: #control */
  #control {
    width: 100%;
    height: 100%;

    .rightControl {
      position: absolute;
      top: 3.2rem;
      right: 3.2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4.8rem;

      #controlHider {
        align-self: flex-end;

        input[type="checkbox"] {
          display: none;

          &+label {
            display: inline-block;
            width: 6.4rem;
            height: 4.8rem;
            font-size: 3.2rem;
            color: #808080;
            border: 1px solid #8080801a;
            border-radius: 0.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
            cursor: pointer;

            &:hover {
              border: 1px solid #808080;
            }

            i {
              position: absolute;
              transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

              &.fa-angles-left {
                opacity: 0.0;

                :checked+label & {
                  opacity: 1.0;
                }
              }

              &.fa-angles-right {
                opacity: 1.0;

                :checked+label & {
                  opacity: 0.0;
                }
              }
            }
          }
        }
      }

      #themeChanger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

        #control.hidden & {
          transform: translateX(130%);
          opacity: 0.0;
        }

        .switch {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 1.6rem;
        }

        .caption {
          font-family: "Roboto";
          font-size: 1.5rem;
          text-align: center;
          color: #808080;
        }

        input[type="radio"] {
          display: none;

          &+label {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 6.4rem;
            height: 4.8rem;
            font-size: 3.2rem;
            border-radius: 0.8rem;
            transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

            :checked+& {
              background-color: #808080;

              .dark & {
                color: #111111;
              }

              .light & {
                color: #ffffff;
              }
            }

            :not(:checked)+& {
              color: #808080;
              border: 1px solid #8080801a;

              &:hover {
                border: 1px solid #808080;
                cursor: pointer;
              }
            }
          }
        }
      }

      #play,
      #ward {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        z-index: 1;
        transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

        #control.hidden & {
          transform: translateX(130%);
          opacity: 0.0;
        }

        .button {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 1.6rem;

          .icon {
            width: 6.4rem;
            height: 4.8rem;
            font-size: 3.2rem;
            color: #808080;
            border: 1px solid #8080801a;
            border-radius: 0.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

            &.disabled {
              pointer-events: none;
              opacity: 0.4;
            }

            &:hover {
              border: 1px solid #808080;
              cursor: pointer;
            }

            &.running {
              background-color: #808080;
              animation: softBlink 2.0s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
              pointer-events: none;

              .dark & {
                color: #111;
              }

              .light & {
                color: #fff;
              }
            }
          }
        }

        .caption {
          font-family: "Roboto";
          font-size: 1.5rem;
          text-align: center;
          color: #808080;
        }
      }

      @keyframes softBlink {
        50% {
          opacity: 0.0;
        }
      }
    }

    .leftControl {
      position: absolute;
      left: 3.2rem;
      bottom: 4.8rem;

      #progress {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

        #control.hidden & {
          transform: translateX(-130%);
          opacity: 0.0;
        }

        .label {
          font-family: "Roboto";
          font-size: 1.5rem;
          color: #808080;
        }

        .circleWrap {
          position: relative;
          width: 14.4rem;
          height: 14.4rem;
          display: flex;
          justify-content: center;
          align-items: center;

          svg {
            width: 100%;
            height: 100%;

            circle {
              fill: none;
              stroke-dasharray: 283;
              stroke-width: 8;

              &.bg {
                stroke: #808080;
                opacity: 0.4;
              }

              &.bar {
                stroke: #808080;
                stroke-linecap: round;
                transform-origin: center;
                transform: rotate(270deg);
              }
            }
          }

          .rate {
            position: absolute;
            font-family: "Roboto";
            font-size: 2.4rem;
            color: #808080;
          }
        }
      }
    }
  }





















  #copyright {
    position: absolute;
    left: 2.4rem;
    bottom: 0.8rem;
    font-family: "Roboto";
    font-size: 1.5rem;
    color: #808080;
    opacity: 0.5;
  }

}



/* #logo {
  position: fixed;
  width: 20.0rem;
  height: 20.0rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0.3;
  mask-image: url(../img/logo.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

body.dark #logo {
  background-color: #999999;
}

body.light #logo {
  background-color: #666666;
} */

/* #logo img {
  width: 100%;
  height: 100%;
} */





/* タブレット */
@media only screen and (max-width: 1024px) {

  html,
  body {
    font-size: 0.9765625vw;
  }
}






/* スマホ */
@media only screen and (max-width: 600px) {

  html,
  body {
    font-size: 1.666666666vw;
  }

}