@charset "utf-8";



.noto-serif-jp-uniquifier {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

body {
    background-color: #d4dcd6;
    background-image: url(./text/back.PNG);
    background-size: 390px 800px;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

header {
    background:linear-gradient(150deg,#4bdee9,#00a3af) ;
    border: double 10px #e4d2d8;
}


.burger {
    position: absolute;
    top: 40px;
    right: 10px;
    cursor: pointer;
    z-index: 1;
    background-color: #666;
    border-radius: 5px;
    opacity: .7;
    position: fixed;
}

.burger.on {
    opacity: 0;
}


.close {
    position: absolute;
    top: 40px;
    right: 10px;
    cursor: pointer;
    z-index: 0;
    background-color: #666;
    border-radius: 5px;
    opacity: 0;
    position: fixed;
}

.close.on {
    opacity: .7;
    z-index: 1;
}

.menu {
    position: absolute;
    top: 0;
    right: -1500px;
    width: 60vw;
    height: 100vh;
    background: #0fc2ad;
    border: 2px double #333;
    z-index: 0;
    transition: all 1s ;
    opacity: .95;
    position: fixed;
}

.menu.on {
    right: 0;
}

.menu-list {
    margin-left: 25px;
    line-height: 50px;
}

.menu-list a {
    font-size: 25px;
    color: #fff;
    background-color: #0fadc2;
    padding: 5px;
    border-radius: 5px;
}

.menu-list2 {
    margin-left: 25px;
    line-height: 50px;
}

.menu-list2 a {
    font-size: 18px;
    color: #fff;
    background-color: #0fadc2;
    padding: 5px;
    border-radius: 5px;
}

.title {
    font-size: 20px;
    text-align: center;
    color:#e4d2d8 ;
    text-shadow: 1px 1px #222;
    line-height: 10px;
}

.nazonazo {
    font-size: 2rem;
    color: #eb6ea5;
    animation: 1.5s title infinite;
}

@keyframes title {
    0% {
        color: #eb6ea5;
    }
    25% {
        color: rgb(72, 84, 245);
    }
    50% {
        color:#eb6ea5 ;
    }
    75% {
        color: (72, 84, 245);
    }
    100% {
       color: #eb6ea5;
    }
}

.farst-list {
    text-align: left;
}

.farst-lists {
    font-size: 2em;
    color: #333;
    font-weight: bold;
}

.farst-list2 {
    text-align: left;
}


.farst {
    text-align: center;
    border: 5px double #333;
    background:linear-gradient(150deg, #4bdee9,#bbfaff);
}

@media  screen and (min-width:720px){
    .title-logo {
        display: inline-block;
        height: 100%;
    }

    .q-logo {
        display: inline-block;
    }

    .farst {
        display: inline-block;
        padding: 20px;
        margin: 10px;
    }

    #farst-all {
        display: flex;
    }

    .quiz {
        font-size: 25px;
    }

}


.title-logo {
    animation:logo 2s 1;
}

@keyframes logo {
 0% {
    padding: 100%;
 }

 50% {
    padding: 0%;
 }

 75% {
    padding: 20%;
 }

 100% {
    padding: 0%;
 }
}



.title-2 {
    background:linear-gradient(150deg,#00e5ce,#0fc2ad) ;
    border: double 5px #e4d2d8;
    text-align: center;
    color: #e4d2d8;
    text-shadow: 1px 1px #111;
}

.select {
    text-align: center;
}

.button {
    text-decoration: none;
    background:linear-gradient(200deg, #eb6ea5, #f1a6c7) ;
    border-radius: 5px;
    color: #e4d2d8;
    text-shadow:1px 1px #222;
    font-size: 25px;
    display: inline-block;
    margin: 5px 0%;
    padding: 10px;
    width: 90%;
    box-shadow: 2px 2px #666;
    transition: 0.15s;
}

.ster {
    color:#ffff7f ;
}

.button:hover {
    color: crimson;
    .ster {color:crimson;}
    box-shadow: 0px 0px #666;
    text-shadow: 0px 0px #666;
}

.table {
    list-style:none;
    text-align: left;
    border: 5px double #0fc2ad;
    padding-left: 1px;
    
}

.table-text {
    line-height: 3rem;
    
}

.table-text a {
    color: #111;
    background-color: #00e5ce;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    border: 3px solid #222;
    text-decoration: none;
}
.table-text a:hover {
    color: crimson;
}

.button-2 {
    text-align: center;
    text-decoration: none;
    background:linear-gradient(200deg, #eb6ea5, #f1a6c7) ;
    border-radius: 5px;
    color: #e4d2d8;
    text-shadow:1px 1px #222;
    font-size: 25px;
    display: inline-block;
    margin: 5px 0%;
    padding: 10px;
    width: 100%;
    box-shadow: 2px 2px #666;
    transition: 0.15s;
}

.button-2:hover {
    color: #333;
    box-shadow: 0px 0px #666;
    text-shadow: 0px 0px #666;
}


.question-select {
    list-style: none;
}

#button-3 {
    font-size: 25px;
    color:#e4d2d8;
    text-shadow:1px 1px #222;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    width: 90%;
    background: linear-gradient(200deg, #eb6ea5, #f1a6c7);
    border-radius: 5px;
    box-shadow: 2px 2px #333;
    padding: 10px;
    transition: 0.2s;
}

#button-3:hover {
    color: crimson;
    box-shadow: 0px 0px #666;
    text-shadow: 0px 0px #666;

}

#hint {
    font-size: 25px;
    background:linear-gradient(150deg,#4bdee9,#00a3af);
    width: 90%;
    text-align: center;
    margin: 20px 0px;
    padding: 20px;
    color: #e4d2d8;
    text-shadow: 1px 1px #666;
    display: none;
    border-radius: 5px;
}

#hint.click {
    display: block;
}

#button-4 {
    font-size: 30px;
    margin: 20px 0px;
    color:#e4d2d8;
    text-shadow:1px 1px #222;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    width: 90%;
    background: linear-gradient(200deg, #eb6ea5, #f1a6c7);
    border-radius: 5px;
    box-shadow: 2px 2px #333;
    padding: 20px;
    border: 5px double #eb6ea5;
    transition: 0.2s;
}

#button-4:hover {
    color:#ff1010;
    box-shadow: 0px 0px #666;
    text-shadow: 0px 0px #666;

}

#answer {
    font-size: 25px;
    background:linear-gradient(150deg,#4bdee9,#00a3af);
    width: 90%;
    text-align: center;
    margin: 20px 0px;
    padding: 20px;
    color: #e4d2d8;
    text-shadow: 1px 1px #666;
    display: none;
    border-radius: 5px;
    border: 5px double #00a3af;
}

#answer.click {
    display: block;
}


footer {
    background:linear-gradient(150deg,#4bdee9,#00a3af);
    padding: 30px;
}

#footer {
    text-align: left;
    line-height: 2rem;
}

.footer-text {
    text-decoration: none;
    color: #222;
    transition: 0.2s;
}

.footer-text:hover {
    color: #e4d2d8;
}

#footer-copy {
    font-size: 10px;
    text-align: center;
}

.button-5 {
    text-align: center;
    text-decoration: none;
    background: #00e5ce;
    border-radius: 5px;
    color: #222;
    text-shadow:1px 1px #fff;
    font-size: 25px;
    display: inline-block;
    margin: 5px 0%;
    padding: 10px;
    width: 90%;
    box-shadow: 2px 2px #666;
    border: 3px solid #333;
    transition: 0.15s;
}

.button-5:hover {
    color: #333;
    box-shadow: 0px 0px #666;
    text-shadow: 0px 0px #666;
}

.privacy {
    background: #d4dcd6;
    text-align: center;
}

.pr18 {
    text-align: center;
}