* {
   margin: 0px;
    padding: 0px;
}

body {
   font-family: Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Osaka,"MS PGothic",Arial,Verdana,sans-serif
  }

.main {
 	width:100%;
 	color: #333;
 	letter-spacing: 1px;
 	}

.main-head-area {
    width: 100%;
    background-color :#F7F3E1;
    }

.main-head-inner {
   margin: 0 auto;
   text-align:center;
   width: calc(100% - 30px);
   max-width: 620px;
   padding: 15px;
}

.main-head-inner p{
   margin: 20px 0;
}


.content {
  width:100%;
}

.question-area {
  width: 100%;
}

.question-content {
  width: 100%;
  }

.question-content-inner {
  width: calc(100% - 30px);
  margin: 0 auto;
   max-width: 620px;
   padding: 30px 15px 20px;

}


.question-content-title {
    color: #FFF;
     text-align: left;
     font-size: 120%;
     display: flex;
     flex-direction: row;
     align-items: center;
     width: 100%;
}
.question-content-title .title-text {
    display: inline-block;
    word-break: break-all;
    margin-left: 10px;

}

.question-area p {
    padding: 15px 0;
  }

.question-content-detail {
   display: flex;
   flex-direction: row;
   align-items: bottom;
}

.question-content-text {
    width: 60%;
    color: #000000;
}

.question-option-area {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-top: 20px;
}

.question-option {
   cursor: pointer;
}

.question-option.not-selected {
   opacity: 0.35;
}

.question-content-image {
    width: 40%;
    text-align: center;
}

.question-content-image img{
    width: 100%;
}


.question-answer-text {
   padding: 10px 0;
   width: 100%;
   text-align: center;
}

.question-answer-text  span{
   font-size: 110%;
   color: #FFF;
   cursor: pointer;
}


.question-answer-detail-inner {
   width: calc(100% - 30px);
   margin: 0 auto;
   max-width: 620px;
   padding: 20px 15px;

}

.correct-answer::before, .incorrect-answer::before {
  content: "正解！";
  display:inline-block;
  text-align:center;
  width: 100%;
  color: #FFF;
  font-size: 150%;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  border: solid 2px #fff;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  width: calc(100% - 30px);
  margin: 5px 0;
}

.correct-answer::before {
  content: "正解！";
}

.incorrect-answer::before {
  content: "不正解・・";
}


.answer-detail-1 {
   display: flex;
   flex-direction: row;
   align-items: center;
}


.answer-detail-1 span{
    display: inline-block;
    word-break: break-all;
    color: #FFF;
    margin-left: 10px;
    font-size: 105%;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.answer-detail-2 {
    margin: 20px 0;
    background-color: #FFF;
    width: calc(100% - 30px);
    padding:15px;
    border-radius: 15px;
}

.answer-detail-2 .head {
    font-size: 120%;
    font-weight: bold;
}

.answer-detail-2 .text {
    font-size: 95%;
    margin: 10px 0;
}

.answer-detail-2 a{
   text-decoration: none !important;
}

.answer-detail-2 .more-information {
    font-size: 110%;
    margin: 10px 0;
    color: #FFF;
    text-align: center;
    padding: 5px 0;
    border-radius: 15px;
}

.answer-detail-3 {
    margin: 20px 0;
    background-color: #FFFDE3;
    width: calc(100% - 30px);
    padding:15px;
    border: 1px solid #EC7A00;
    border-radius: 15px;
}


.answer-detail-3 .head-1 {
   display: flex;
   flex-direction: row;
   align-items: center;
}


.answer-detail-3 .head-1 span{
   display: inline-block;
   margin-left: 5px;
   color: #ED7900;
   font-size: 110%;
}

.answer-detail-3 .head-2 {
   margin: 10px 0;
   font-size: 110%;

}

.answer-detail-3 .text {
   margin: 10px 0;
   display: flex;
   flex-direction: row;
   align-items: center;
}

.answer-detail-3 .text span{
   display: inline-block;
   margin-left: 5px;
   font-size: 90%;
}

.score-area {
   width: 100%;
   background-color :#F7F3E1;

}


.score-area-inner {
   width: calc(100% - 30px);
   margin: 0 auto;
   max-width: 620px;
   padding: 20px 15px;
   text-align: center;

}

.score-box {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: #FFF;
  padding: 15px 0;
  border-radius: 10px;
  border: 4px solid #FFB400;

}

.total-score {
  font-size: 220%;
  font-weight: bold;
  text-shadow: 1px 1px 2px #CCC;
}

.back-to-first {
   text-align: center;
   padding: 20px 0;
   background-color :#F7F3E1;
}

.back-to-first span {
  cursor: pointer;
  text-decoration: underline;
  font-size: 95%;
}

.hidden{
    display: none;
}

/***** Color  *******/

#question-area-1 .question-content,  #question-area-1 .question-answer-detail {
  background-color : #2093DB;
}

#question-area-1 .question-answer-text  {
  background-color : #57AEEB;
}

#question-area-1 .answer-detail-2 .more-information {
    background-color : #2792DB;
}


#question-area-2 .question-content,  #question-area-2 .question-answer-detail {
  background-color : #E0970D;
}

#question-area-2 .question-answer-text  {
  background-color : #EBB360;
}

#question-area-2 .answer-detail-2 .more-information {
    background-color : #DF980C;
}

#question-area-3 .question-content,  #question-area-3 .question-answer-detail {
  background-color : #73B229;
}

#question-area-3 .question-answer-text  {
  background-color : #A8C65D;
}

#question-area-3 .answer-detail-2 .more-information {
    background-color : #74B329;
}

#question-area-4 .question-content,  #question-area-4 .question-answer-detail {
  background-color : #8281EA;
}

#question-area-4 .question-answer-text  {
  background-color : #A19CF8;
}

#question-area-4 .answer-detail-2 .more-information {
    background-color : #837FEA;
}

#question-area-5 .question-content,  #question-area-5 .question-answer-detail {
  background-color : #DD81A8;
}

#question-area-5 .question-answer-text  {
  background-color : #F3A2C6;
}

#question-area-5 .answer-detail-2 .more-information {
    background-color : #DC80A8;
}

#question-area-6 .question-content,  #question-area-6 .question-answer-detail {
  background-color : #8BBEA8;
}

#question-area-6 .question-answer-text  {
  background-color : #9AD1B2;
}

#question-area-6 .answer-detail-2 .more-information {
    background-color : #8CBFA8;
}

#question-area-7 .question-content,  #question-area-7 .question-answer-detail {
  background-color : #78C4E6;
}

#question-area-7 .question-answer-text  {
  background-color : #a0d6ee;
}

#question-area-7 .answer-detail-2 .more-information {
    background-color : #7AC4E6;
}

#question-area-8 .question-content,  #question-area-8 .question-answer-detail {
  background-color : #E6789E;
}

#question-area-8 .question-answer-text  {
  background-color : #eea1bb ;
}

#question-area-8 .answer-detail-2 .more-information {
    background-color : #E5779E;
}

#question-area-9 .question-content,  #question-area-9 .question-answer-detail {
  background-color : #7BB980;
}

#question-area-9 .question-answer-text  {
  background-color : #a3cea7;
}

#question-area-9 .answer-detail-2 .more-information {
    background-color : #7CBA80;
}

#question-area-10 .question-content,  #question-area-10 .question-answer-detail {
  background-color : #88A6D0;
}

#question-area-10 .question-answer-text  {
  background-color :#acc1de;
}

#question-area-10 .answer-detail-2 .more-information {
    background-color : #7C95B9;
}



/****** Font *****/
.font-strong {
   font-weight: bold;
}

.font-blue {
    color: #1754A8;
}

.font-larger {
    font-size: 110%;
}

.font-annotation {
   font-size: 70%;
}

.layout_margin-bottom-50 {
    margin-bottom: 50px;
}

.layout_padding-bottom-160 {
    padding-bottom: 160px;
}

.layout_padding-top-100 {
    padding-top: 100px;
}

.layout_margin-top-50 {
    margin-top: 50px;
}



@media screen and (max-width: 767px) {
  .main-head-area img{
    width: calc(100% - 30px) !important;
  }


  .main-head-inner {
    width: calc(100% - 20px);
    max-width: 620px;
    padding: 15px 10px;
  }

   .main-head-text {
      margin: 0 auto;
      font-size: 100%;
   }


   .question-content-inner {
     width: calc(100% - 20px);
     padding: 20px 10px;

   }

   .score-area-inner {
     width: calc(100% - 20px);
     padding: 20px 10px;

   }

  .question-content-text {
    width: 50%;
   }


  .question-content-image {
    width: 50%;
  }

  .question-content-image img{
    width: 100% !important;

  }

   .question-option-area img {
      width: 40%;
  }


}

@media screen and (max-width: 350px) {

  body{
    font-size: 95%;
  }

  .question-content-text {
    width: 45%;

   }


  .question-content-image {
    width: 55%;
  }


}