@charset "utf-8";

/*-- ベース --*/
.sanji { border-color: #8b4a0f!important; background: #ffdf93!important; }

/*-- 問題 --*/
.q_list { margin-bottom: 5px; }
.q_list ul { width: 100%; max-width: 300px; margin: 0 auto; }
.q_list li { float: left; width: 33%; margin-bottom: 10px; text-align: center; }
.q_list li a { display: inline-block; width: 50px; height: 50px; padding: 10px; font-size: 4.4rem; font-weight: bold; color: #fff; line-height: 1.3; border-bottom: 4px solid #a51412; border-radius: 4px; background: #d83b38; }
.q_list li a:hover { text-decoration: none; background: #e54744; }
.selected { cursor: default; border-color: #770000!important; background: #960000!important; }
.selected:hover { background: #960000!important; }
.used { cursor: default; border-color: #666!important; background: #999!important; }
.used:hover { background: #999!important; }

@media (max-width: 600px) {
  .q_list ul { max-width: 240px; }
  .q_list li a { width: 34px; height: 34px; padding: 5px; font-size: 3.0rem; }
}

/*-- 解答 --*/
.a_list { margin-bottom: 5px; padding: 5px 0; 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; line-height: 1.3; vertical-align: bottom; border: 4px solid #df1f1d; background: #fff; }

@media (max-width: 600px) {
  .a_list ul { max-width: 240px; }
  .a_list li span { width: 34px; height: 34px; padding: 5px; font-size: 3.0rem; }
}

/*-- 結果 --*/
.read { margin-bottom: 5px; font-size: 1.6rem; font-weight: bold; text-align: center; }

@media (max-width: 600px) {
  .result { padding: 5px; font-size: 2.4rem; }
}