@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap');

.g-table--col-2 .g-table__head:first-of-type{
  width: auto;
}
.g-table__cell{
  opacity: 0;
  padding: 10px 10px;
}
.g-table__cell span{
  margin: auto;
}
.color_answer_active{
  color: #FF72BA;
}

.cell-empty{
  display: none;
}

@media print, screen and (min-width:1081px) {
}
@media print, screen and (max-width:1080px) {
  table.g-table{
    margin: auto;
    width: auto;
  }
}
@media print, screen and (max-width: 767px) {
  .component__wrapper{
    max-width: 310px;
    margin: auto;
  }
  table.g-table{
    margin-right: auto;
    margin-left: 0;
  }
  .g-table__head{
    padding: 6px 26px;
  }
  .g-correct{
    width: 24px;
    height: 24px;
    border: 3px solid var(--correct);
  }
  .g-radio-btn__block--correct .g-correct {
    left: calc(50% - (24px / 2));
    top: calc(50% - (24px / 2));
  }
  .g-incorrect::before, .g-incorrect::after{
    border: 2px solid var(--incorrect);
    width: 22.5px;
  }
  img.setting_img{
    width: 100%;
  }
}

/* 正答率 表 アニメーション */
@keyframes fadeInIcon {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.anime_no01{
  animation: fadeInIcon 0.8s ease-in-out .6s 1 normal forwards;
}
.anime_no02{
  animation: fadeInIcon 0.8s ease-in-out .65s 1 normal forwards;
}
.anime_no03{
  animation: fadeInIcon 0.8s ease-in-out .7s 1 normal forwards;
}
.anime_no04{
  animation: fadeInIcon 0.8s ease-in-out .75s 1 normal forwards;
}
.anime_no05{
  animation: fadeInIcon 0.8s ease-in-out .8s 1 normal forwards;
}
.anime_no06{
  animation: fadeInIcon 0.8s ease-in-out .85s 1 normal forwards;
}
.anime_no07{
  animation: fadeInIcon 0.8s ease-in-out .9s 1 normal forwards;
}
.anime_no08{
  animation: fadeInIcon 0.8s ease-in-out .95s 1 normal forwards;
}
.anime_no09{
  animation: fadeInIcon 0.8s ease-in-out 1s 1 normal forwards;
}
.anime_no10{
  animation: fadeInIcon 0.8s ease-in-out 1.05s 1 normal forwards;
}

/* 正答率 グラフ アニメーション */
.pie-chart-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  margin-bottom: 30px;
  opacity: 0;
  animation: fadeInIcon 0.8s ease-in-out 0.6s 1 normal forwards;
}
.box .percent {
  position: relative;
  width: 200px;
  height: 200px;
}
.box .percent svg {
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.box .percent svg circle {
  position: relative;
  fill: none;
  stroke-width: 14;
  stroke: #f3f3f3;
  stroke-dasharray: 560;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}
.box .percent .number {
  color: #0DE4A6;
  flex-flow: column;
  font-family: Barlow;
  font-weight: 600;
  position: absolute;
  top: 17px;
  left: 17px;
  width: 166px;
  height: 166px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box .percent .number .title {
  font-size: 80px;
}
.box .percent .number .title span {
  font-size: 24px;
}
.number{
  border: solid 7px rgba(0, 0, 0, 0.1);
  border-radius: 100px;
}
.box .text {
  padding: 10px 0 0;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.box .percent .line{
  animation: circleAnim 1s 0.6s forwards;
  stroke-dashoffset: 0;/* 全体(560)に対してのマイナス割合の設定 */
  stroke: #0DE4A6;
}


.box .percent .line.graph_80{
  animation: circleAnim 1s 0.6s forwards;
  stroke-dashoffset: 112;
  stroke: #0DE4A6;
}

@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 560;
  }
  100%, to {
    stroke-dasharray: 560 560;
  }
}



/* js制御 */
.js-answer_before{
  display: flex;
}
.js-answer_after{
  display: none;
}
.js-answer_before.js-answer__active{
  display: none;
}
.js-answer_after.js-answer__active{
  display: inherit;
}