@charset "utf-8";

/*-- ベース --*/
.proverb { border-color: #502d02; background: #f4e061; }

/*-- 問題 --*/
.q_list { margin-bottom: 0; }
.q_list ul { width: 100%; max-width: 600px; margin: 0 auto; }
.q_list li { float: left; width: 100%; margin-bottom: 5px; }

.q_list li a {
  display: block;
  padding: 5px 5px 5px 40px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  text-align: left;
  border: 4px solid #999;
  background: #fff;
}

.q_list li a:hover { text-decoration: none; background: #ffc427; }
.selected { cursor: default; background: #ffc427!important; }
.selected:hover { background: #ffc427!important; }
.used { cursor: default; background: #ccc!important; }
.used:hover { background: #ccc!important; }
.selected_1 { position: relative; }
.selected_1::before { position: absolute; left: 10px; top: 50%; content: '1'; width: 20px; height: 20px; margin-top: -10px; font-size: 1.6rem; color: #fff; text-align: center; border-radius: 50%; background: #333; }
.selected_2 { position: relative; }
.selected_2::before { position: absolute; left: 10px; top: 50%; content: '2'; width: 20px; height: 20px; margin-top: -10px; font-size: 1.6rem; color: #fff; text-align: center; border-radius: 50%; background: #333; }

/*-- 解答 --*/
.a_list { margin-bottom: 5px; padding: 5px; background: #ffd570; }
.a_list ul { width: 100%; max-width: 300px; margin: 0 auto; }
.a_list li { float: left; width: 33%; text-align: center; }
.a_list li span { display: inline-block; width: 50px; height: 50px; padding: 10px; font-size: 4.4rem; font-weight: bold; color: #333; vertical-align: bottom; border: 4px solid #df1f1d; background: #fff; }

/*-- 結果 --*/
.answer { padding: 5px 0; font-size: 2.0rem; font-weight: bold; text-align: center; }
.answer_info { max-width: 600px; margin: 0 auto; margin-bottom: 5px; }
.answer_info th { width: 100px; }
.answer_info td { font-size: 1.4rem; line-height: 1.8; }