@charset "utf-8";

.main-content-inner{
 background: #fff;
 height: 100%;
}
h2.exam-ttl{
 position: relative;
 font-size: 20px;
 font-size: 2.0rem;
 padding: 8px 0 8px 40px;
 margin: 0 0 20px;
}
p{
 margin: 0 0 0 8px;
}
ol.examination-list{
 width: 94%;
 margin: 40px auto;
 padding: 0 0 0;
}
@media screen and (max-width: 425px){
   ol.examination-list{
    width: 100%;
   }
}

ol.examination-list li{
 display: table;
 position: relative;
 margin: 0 0 16px;
 border-bottom: 1px solid #ccc;
 padding-left: 38px;
 padding-bottom: 20px;
}
.exam-num{
   padding-right: 0px;
   position: absolute;
   top: 0.2em;
   left: 0;
   display: block;
   width: 30px;
   height: 30px;
   background: #3498db;
   color: #fff;
   font: 400 18px/32px 'Open Sans', sans-serif;
   text-align: center;
   -webkit-border-radius: 50%;
           border-radius: 50%;
}
ol.examination-list li > div{
 display: table-cell;
 vertical-align: top;
 padding: 0;
}
ol.examination-list li .question{
   width: 100%;
}
ol.examination-list li .answer-choices{
   display: table;
   margin: 0;
   vertical-align: middle;
   border-collapse: separate;
   border-spacing: 4px 0px;
   width: 120px;
}
ol.examination-list li form{
   display: table-cell;
}
ol.examination-list li form > button{
   display: block;
   width: 50px;
   height: 50px;
   background: red;
   cursor: pointer;
   line-height: 1.7;
   font-size: 32px;
   font-size: 3.2rem;
   color: #FFF;
   -webkit-border-radius: 4px;
           border-radius: 4px;
   opacity: 0.3;
}
ol.examination-list li form > button:hover,
ol.examination-list li form > button.selected{
   opacity: 1;
}
ol.examination-list li form > button.btn-yes{
   background: #FF0000;
}
ol.examination-list li form > button.btn-no{
   background: #027FFF;
}
ol.examination-list .result-area{
   padding-left: 20px;
}
ol.examination-list .result-area > div{
   display: table;
   width: 64px;
   text-align: center;
   width: 100%;
   border-bottom: 1px dotted #ccc;
}
ol.examination-list .result-area > div:last-child{
   border-bottom: none;
}
ol.examination-list .result-area > div p{
   display: table-cell;
   white-space: nowrap;
   text-align: center;
   width: 50%;
   padding: 2px 8px;
}
ol.examination-list .result-area > div p.result-ttl{
   -ms-text-align-last: justify;
       text-align-last: justify;
   letter-spacing: -0.2em;
   font-size: 12px;
   font-size: 1.2rem;
   font-weight: bold;
}
.correct,
.incorrect/*,
.correct-result*/{
 text-align: center;
 font-weight: bold;
 font-size: 16px;
 font-size: 1.6rem;
 line-height: 1.4;
 margin: 20px 0 20px;
}
.correct{
 color: #3498db;
}
.incorrect{
 color: #cc0000;
}
/*ol.examination-list li .checkmark{
 white-space: nowrap;
 text-align: center;
}
ol.examination-list li .checkmark img{
 width: 32px;
}
ol.examination-list li .checkmark span{
 display: block;
 font-size: 13px;
 font-size: 1.3rem;
 color: #0090FF;
}*/
/*
.commentary{
 width: 90%;
 margin: 0 auto 50px;
 padding: 10px 20px 20px;
 border: 1px solid #666;
}*/
.form-btn-col2{
   width: 60%;
}
@media screen and (max-width: 599px){
   .form-btn-col2{
      width: 100%;
   }
   .form-btn-col2 > form{
      margin: auto;
      width: 90%;
   }
}