.page-play.-firedepartment{
  background: #e3f2f2;
}
.container-quiz{
  backface-visibility: visible;
  .q{
    padding: 0px 0;
    margin:24px 0 0 0 ;
    text-align: center;
    font-size:120%;
    font-weight: bold;
    @media (max-width: 840px) {
      font-size:110%;
    }
    @media (max-width: 500px) {
      font-size:105%;
    }
  }
  .choice{
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border:1px solid #ddd;
    border-radius: 8px;
    height:100%;
    transition: all .3s;
    cursor: pointer;
    &:hover{
      transform: scale(1.1);
      box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
      @media (max-width: 500px) {
        transform: scale(1);
      }
    }
    .inner{
      display: flex;
      align-items: center;
      justify-content: center;
      width:100%;
      height:100%;
      padding:14px;
      color:block;
      line-height: 1.6;
      font-weight: bold;
      font-size: 90%;
      text-align: center;
      @media (max-width: 840px) {
        padding:11px;
      }
      @media (max-width: 500px) {
        padding:10px 4px ;
      }
      .text{
        line-height: 2;
      }
    }
    &.-selected {
      box-shadow: 0 0 0 3px #e63b2e;
    }
  }
  .grid-block.-disable{
    pointer-events: none;
  }
  .panel{
    min-height: 300px;
    margin:0 0 20px 0;
    perspective: 2000px;
    z-index: 2;
    position: relative;
    backface-visibility: visible;
    @media (max-width: 840px) {

    }
    @media (max-width: 500px) {
      min-height: 280px;
    }
    img{
      margin:0 auto;
      display: block;
    }
  }

  .panel-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 1s ease;
      /*aspect-ratio: 16 / 11;*/
      backface-visibility: visible;
      @media (max-width: 840px) {

      }
      @media (max-width: 500px) {
        /*aspect-ratio: 5 / 6;*/
      }
  }

  .panel-inner.is-flipped {
    transform: rotateX(180deg);
     .panel-front{
        position: absolute;
     }
     .panel-back {
        position: relative;
     }
  }

  .panel-front,
  .panel-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 4px;
    background: white;
    box-sizing: border-box;
  }

  .panel-front {
    transform: rotateY(0deg);
    background: white;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    > .inner{
      
      .q{
        margin: 30px 0 10px 0;
        @media (max-width: 500px) {
          margin: 20px 0 0 0;
        }
      }
    }
  }

  .panel-back {
    transform: rotateX(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding:20px;
    background-color:#eee0be;
    flex-direction: column;
    
    @media (max-width: 840px) {

    }
    @media (max-width: 500px) {
      padding:18px;
    }
    .result{
      font-size: 180%;
      font-weight: bold;
      text-align: center;
    }
    .inner{
      display: flex;
      align-items: center;
      column-gap: 20px;
      margin:0 0 20px 0;
      .comment{
        flex:1;
        .explain{
          font-size:110%;
        }
      }
      .boy{
        width:100px;
        @media (max-width: 840px) {

        }
        @media (max-width: 500px) {
          width:40px;
        }
        img{
          display: block;
          width::10%;
        }
      }
    }
    .explain{
      font-weight: bold;
      font-size:120%;
      @media (max-width: 500px) {
        font-size:100%;
      }
    }
    .caption{
      padding: 16px 16px 16px 52px;
      background: white;
      border-radius: 4px;
      background: url(images/caution.svg) no-repeat;
      background-size: 20px;
      background-position: left 14px top 16px;
      background-color: white;
      line-height: 1.8;
      @media (max-width: 840px) {
        font-size:90%;
        line-height: 1.8;
      }
      @media (max-width: 500px) {
        padding: 10px 10px 10px 38px;
        background-position: left 10px top 10px;
        font-size:80%;
      }
    }
    .close .btn-basic{
      padding:8px 26px;
      &:after{
        content:none;
      }
    }
  }
}

.modal-firedepartment{
  .modaal-container{
    border-radius: 12px;
    @media (max-width: 840px) {
      max-width: 94% !important;
    }
  }
}

#quizList{
  margin: 50px 0 0 0;
  @media (max-width: 500px) {
    gap: 20px; 
  }
  > li{
    transition: all .3s;

    &:hover{
      transform: scale(1.1);
      z-index: 100;
      @media (max-width: 840px) {
        transform: scale(1.0);
      }
      .card-summary{
        box-shadow: 0 0 12px rgba(0, 0, 0,0.3);
      }
    }
    position: relative;
    &.-done .card-summary.-firedepartment,
    &.-correct .card-summary.-firedepartment,
    &.-mistake .card-summary.-firedepartment{
      &:before{
        content:'';
        display: flex;
        align-items: center;
        justify-content: center;
        width:56px;
        aspect-ratio: 1 / 1;
        z-index: 4;
        position: absolute;
        right:0px;
        top:0;
        transform: translate(20%, -20%);
        border-radius: 50%;
        color:white;
        font-size:12px;
        white-space: nowrap;
        font-weight: bold;
        box-shadow:  0 0 6px rgba( 0, 0, 0, 0.2);
        border:3px solid white;
      }
    }
    &.-done .card-summary.-firedepartment{ 
      &:after{
        content:'';
        display: block;
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index: 2;
        border-radius: 12px;
      }
    }
    &.-done.-correct .card-summary.-firedepartment{
      &:after{
        background: rgba(242, 180, 15, 0.3);
      }
    }
    &.-correct .card-summary.-firedepartment{ 
      &:before{
        content:'正解';
        background: #ff9900;
        font-size:16px;
      }
    }
    &.-mistake .card-summary.-firedepartment{ 
      &:before{
        content:'間違い';
        background: #666;
      }
       
    }  
  }
}
.grid-block.-cols3.-haspadding.-choice{
  @media (max-width: 840px) {
    gap:20px;
  }
  @media (max-width: 500px) {
    gap:8px;
  }
}


.card-summary.-firedepartment{
  cursor: pointer;
  transition: all .3s;
  position: relative;
  overflow: visible;
  .summary{
    font-size:80%;
    padding:0 12px 12px 12px;
    line-height: 1.8;
    @media (max-width: 840px) {

    }
    @media (max-width: 500px) {
      padding:0 10px 10px 10px;
    }
    br{
      display: none !important;
    }
  }
  .thumb{
    margin-bottom:12px;
  }
  &.-bounce{
    animation: quizBounce 1s cubic-bezier(.18,.89,.32,1.28);
    transform-origin: center;
    will-change: transform;
    z-index: 10;
  }
}
@keyframes quizBounce{
  0%{
    transform: scale(0.8);
  }
  40%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
  }
}

.container-clear{
  margin: 50px 0 0 0;
  @media (max-width: 840px) {
    margin: 30px 0 ;
  }
  .btn-basic.-clear { 
    margin: 0px auto 0 auto;
    padding:12px 18px ;
    min-width:0;
    width:auto;
    font-size:100%;
    &:after{
      content: none;
    }
  }
}

.rank-display {
    text-align: center;
    margin:  0 0 0px 0;
    padding:0 0 30px 0;
    @media (max-width: 500px) {
      padding-bottom: 0;
    }
    .-rankS { color: #d4b300; }
    .-rankA { color: orange; }
    .-rankB { color: green; }
    .-rankC { color: #2093e7; }
    .-rankD { color: gray; }
    .rank-label{
      .text{
        font-size:150%;
        font-weight: bold;
        font-family: "Zen Maru Gothic", sans-serif;
      }

    }
    .rank-name{
      margin: 0px 0 0 0;
      .text{
        font-size:240%;
        font-weight: bold;
        margin: 0 0 20px 0;
        font-family: "Zen Maru Gothic", sans-serif;
        font-weight: 800;
        color:#555;
        @media (max-width: 840px) {
          font-size:180%;
        }
        @media (max-width: 500px) {
          font-size:150%;
        }
      }
    }
    .rank-score{
      margin: 20px 0 0 0;
      .text{
        font-weight: bold;
        font-size: 110%;
        background: #e60012;;
        padding:12px 30px;
        border-radius: 50px;
        color:white;
        display: inline-block;
        margin:0 auto;;
        @media (max-width: 840px) {
          padding:10px 18px;
          font-size: 100%;
        }
        @media (max-width: 500px) {
          font-size: 100%;
        }
      }
    }
}

.modaal-content-container{
  @media (max-width: 840px) {
    padding:25px;
  }
  @media (max-width: 500px) {
    padding:15px 15px 25px 15px;
  }
}