body.bg-guiz {
    overflow: hidden auto;
}
.fixed-bottom {
    pointer-events: none;
}
.fixed-bottom .btn {
    pointer-events: auto;
}
.btn-animation {
    animation: btn-animation 0.5s ease 0s infinite alternate;
    transform-origin: center;
}
@keyframes btn-animation {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}
.btn i {
    vertical-align: middle;
}
.btn-lg {
    font-size: 1.75rem;
    line-height: 2;
}
.btn-prev,
.btn-next {
    width: 5rem;
    height: 5rem;
    border-radius: 50%!important;
}
.btn-prev i,
.btn-next i {
    text-align: left;
}
.img-title{
    width: auto;
    height: 2rem;
}
.img-helf-fluid{
    max-width: 50%;
    height: auto;
}
.img-book-fluid{
    width: 35%;
    height: auto;
}
.img-landolt-ring{
    width: auto;
    /* height: 1.5rem; */
    height: 1.2rem;
}
#content-img-good {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
}
.wrap{
    margin: 0 auto;
    position: relative;
    z-index: 1;
    animation: rotate-wrap 6s linear infinite;
    font-size: 0;
    animation-play-state: paused;
}
@keyframes rotate-wrap {
    0%  {transform: rotate(0);}
    100%  {transform: rotate(360deg);}
}
.tooltip {
    font-size: 1.5rem;
}
.img-animal{
    animation: rotate-animal 6s linear infinite;
    display: block;
    animation-play-state: paused;
}
.img-doughnut{
    width: 50%;
    z-index: 1;
}
.img-landoltring-2{
    width: 35%;
}
.img-landoltring-3{
    width: 20%;
}
.img-landoltring-4{
    width: 12%;
}
.img-landoltring-5{
    width: 5%;
}
@keyframes rotate-animal {
    0%  {transform: rotate(0);}
    100%  {transform: rotate(-360deg);}
}
.eat-animal-0{
    animation: eat-doughnut-0 0.5s linear 1;
    animation-fill-mode: forwards;
    z-index: 10;
}
@keyframes eat-doughnut-0 {
    0%  {top: 0;}
    100% {top: 20vw;}
}
.eat-animal-1{
    animation: eat-doughnut-1 0.5s linear 1;
    animation-fill-mode: forwards;
    z-index: 10;
}
@keyframes eat-doughnut-1 {
    0%  {left: 0;}
    100% {left: 20vw;}
}
.eat-animal-2{
    animation: eat-doughnut-2 0.5s linear 1;
    animation-fill-mode: forwards;
    z-index: 10;
}
@keyframes eat-doughnut-2 {
    0%  {top: 0;}
    100% {top: -20vw;}
}
.eat-animal-3{
    animation: eat-doughnut-3 0.5s linear 1;
    animation-fill-mode: forwards;
    z-index: 10;
}
@keyframes eat-doughnut-3 {
    0%  {right: 0;}
    100% {right: 20vw;}
}
.text-answer {
    position: absolute;
    z-index: 100;
    width: 25vw;
    height: 25vw;
    font-size: 20vw;
    top: 50%;
    left: 50%;
    color: #ff0000;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
/*デバイスが横向きの場合*/
@media (orientation: landscape) {
    .wrap{
        width: 85vh;
    }
    @keyframes eat-doughnut-0 {
        0%  {top: 0;}
        100% {top: 20vh;}
    }
    @keyframes eat-doughnut-1 {
        0%  {left: 0;}
        100% {left: 20vh;}
    }
    @keyframes eat-doughnut-2 {
        0%  {top: 0;}
        100% {top: -20vh;}
    }
    @keyframes eat-doughnut-3 {
        0%  {right: 0;}
        100% {right: 20vh;}
    }
    .text-answer {
        width: 25vh;
        height: 25vh;
        font-size: 20vh;
    }
}

@media screen and ( max-width:767px) {
    .btn-lg {
        font-size: 1.5rem;
        line-height: 1.5;
    }
    .btn-lg i {
        font-size: 1em;
    }
    .btn-prev,
    .btn-next {
        font-size: 1.75rem;
        line-height: 2;
    }
    .btn-prev i,
    .btn-next i {
        font-size: 2em;
    }
}