@charset "UTF-8";
@import url(normalize.css);

/* Google fontsアイコン読み込み */
@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0&icon_names=replay,share);

/* さつき源代明朝フォント読み込み */
@font-face {
  font-family: 'SatsukiGendaiMincho-M';
  src: url('../../font/SatsukiGendaiMincho-M.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ローディングアニメーション */
.loader-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: var(--_, 
        linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), 
        linear-gradient(180deg, #6E529F 0%, #091E35 100%));
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-box {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.leo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.blue-orbit {
  width: 165px;
  height: 165px;
  border: 1px solid #91daffa5;
  -webkit-animation: spin3D 3s linear .2s infinite;
  animation: spin3D 3s linear .2s infinite;
}

.green-orbit {
  width: 120px;
  height: 120px;
  border: 1px solid #91ffbfa5;
  -webkit-animation: spin3D 2s linear 0s infinite;
  animation: spin3D 2s linear 0s infinite;
}

.red-orbit {
  width: 90px;
  height: 90px;
  border: 1px solid #ffca91a5;
  -webkit-animation: spin3D 1s linear 0s infinite;
  animation: spin3D 1s linear 0s infinite;
}

.white-orbit {
  width: 60px;
  height: 60px;
  border: 2px solid #ffffff;
  -webkit-animation: spin3D 10s linear 0s infinite;
  animation: spin3D 10s linear 0s infinite;
}

.w1 {
  transform: rotate3D(1, 1, 1, 90deg);
}

.w2 {
  transform: rotate3D(1, 2, .5, 90deg);
}

.w3 {
  transform: rotate3D(.5, 1, 2, 90deg);
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}


body {
    overflow: hidden;
    background: var(--_, 
        linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), 
        linear-gradient(180deg, #6E529F 0%, #091E35 100%));
    background-size: 100% 100vh;
}


/*背景星*/
.stars {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; 
  pointer-events: none;
}

.stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}


/*sp*/
@media screen and (max-width:767px) {

    .start,
    .question,
    .last {
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .question,
    .last {
        display: none;
    }

    /* カード類まとめてサイズなど指定 */
    .start_book {
        width: 75%;
        position: absolute;
        top: 20%;
    }

    .book_question {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .book_question img {
        width: 100%;
        padding-right: 5%;
    }

    /* ボタン類まとめて指定 */
    .start_button{
        width: 221px;
        height: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .yes_button,
    .no_button {
        width: 160px;
        height: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .retry-button,
    .twitter-button {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .q_button {
        position: relative;
        height: 124px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10%;
    }

    .last-button {
        position: relative;
        width: 80%;
        height: 10%;

        display: flex;

        justify-content: space-between;
        align-items: center;
    }

    /* ボタン画像まとめて指定 */
    .start_img,
    .retry-img,
    .yes_img,
    .no_img,
    .twitter-img {
        position: absolute;
    }

    .retry-img,
    .twitter-img {
        font-size: 5vh;
        color: #fff;
    }
    
    /* ボタンテキストまとめて指定 */
    .start_text,
    .yes_text,
    .no_text{
        font-family: "SatsukiGendaiMincho-M", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 27px;
        color: #ECE7E7;
        position: absolute;
    }

    .start_button {
        padding-top: 120%;
    }

    .question_text {
        font-family: "SatsukiGendaiMincho-M", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 35px;
        color: #202C2B;
        position: absolute;
    }

    .p-center {
        text-align: center;
    }

    .yes_button {
        padding-bottom: 0%;
    }

    /* 結果画面 */
    .imgin-1 {
        position: relative;
        height: 70vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .imgin-2 {
        animation: slideIn01 4s 1;
        overflow: hidden;
        position: absolute;
        width: 70%;
        padding-bottom: 10%;
    }

    @keyframes slideIn01 {
        0% {
          opacity: 0;
          transform: translateY(-300px);
        }
        40% {
          opacity: 1;
          transform: translateY(0);
        }
    }

    .circle {
        display: flex;
        padding: 5vh;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        border: 3px solid #FFF;
        background: rgba(255, 255, 255, 0.10);
    }

    .twitter-link {
        text-decoration: none;
    }

    .pc {
        display: none;
    }

}

/* PC,tablet */
@media screen and (min-width:768px) {
    body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .start,
    .question,
    .last {
        display: none;
    }

    .pc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

    }

    .pc img {
        width: 600px;
        opacity: 0.5;
    }

    .pc span {
        font-family: "SatsukiGendaiMincho-M", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 50px;
        color: #d4d4d4;

        position: absolute;
    }
}