@charset "shift_jis";
/* CSS Document */


.ct_box .ct_inbox .btn_ct_inbox_back {
display: block;
position: absolute;
top:0;
left:1;
width: 41px;
height: 42px;

z-index: 1000;
}

.ct_box .ct_inbox {
background: url(../images/bg.png) no-repeat;
}


/* .ct_box .btn_again {
display: none;
position: absolute;
top:179px;
left:240px;
width: 84px;
height: 29px;
cursor: pointer;

z-index: 150;
}
.ct_box .btn_again:hover {
opacity: 0.7;
} */



.ct_box .ct_inbox .txtimg_box {
display: block;
position: absolute;
width: 257px;
height: 105px;
right:-260px;
top:103px;
z-index: 1000;
text-align: center;
}




.ct_box .result_box.disnone {
display: none;
}

.ct_box .result_box .result_correct {
display: block;
position: absolute;
top:4px;
left:39px;
width: 97px;
height: 97px;

opacity: 0;
}


.ct_box .result_box .result_correct.showCorrect {
animation: showCorrect 0.25s linear;
animation-fill-mode: forwards;
}
@keyframes showCorrect {
  0% {
    top:-16px;
    left:19px;
    width: 97px;
    height: 97px;
    opacity: 0;
  }
  100% {
    top:4px;
    left:39px;
    width: 57px;
    height: 57px;
    opacity: 1;
  }
}


.ct_box .result_box .result_wrong {
display: block;
position: absolute;
top:4px;
left:39px;
width: 97px;
height: 97px;

opacity: 0;
}

.ct_box .result_box .result_wrong.showWrong {
animation: showWrong 0.25s linear;
animation-fill-mode: forwards;
}
@keyframes showWrong {
  0% {
    top:-16px;
    left:19px;
    width: 97px;
    height: 97px;
    opacity: 0;
  }
  100% {
    top:4px;
    left:39px;
    width: 57px;
    height: 57px;
    opacity: 1;
  }
}



.ct_inbox .q_box {
margin: 62px 0 0 37px;
width: 251px;
height: 95px;
box-sizing: border-box;
}

.ct_inbox .q_box.q01 {
background: url(../images/qimg_01.png) no-repeat top left;
}
.ct_inbox .q_box.q02 {
background: url(../images/qimg_02.png) no-repeat top left;
}
.ct_inbox .q_box.q03 {
background: url(../images/qimg_03.png) no-repeat top left;
}
.ct_inbox .q_box.q04 {
background: url(../images/qimg_04.png) no-repeat top left;
}
.ct_inbox .q_box.q05 {
background: url(../images/qimg_05.png) no-repeat top left;
}
.ct_inbox .q_box.q01,
.ct_inbox .q_box.q02,
.ct_inbox .q_box.q03 {
padding: 60px 0 0 162px;
}
.ct_inbox .q_box.q04,
.ct_inbox .q_box.q05 {
padding: 50px 0 0 85px;
}



.ct_inbox .btn_play{
cursor: pointer;
}
.ct_inbox .btn_play:hover{
opacity: 0.7;
}
.ct_inbox .btn_play.disnone{
display: none;
}

.ct_inbox .btn_next:hover{
opacity: 0.7;
}
.ct_inbox .btn_next.disnone{
display: none;
}


.ct_inbox .btn_box {
margin: 39px 0 0 18px;
width: 291px;
height: 61px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}


.ct_inbox .btn_box>div {
position: relative;
}
.ct_inbox .btn_box .btn01,
.ct_inbox .btn_box .btn02 {
cursor: pointer;
}
.ct_inbox .btn_box .btn01:hover,
.ct_inbox .btn_box .btn02:hover {
opacity: 0.7;
}


.ct_inbox .audio {
opacity: 0;
}