@charset "utf-8";

/*-- ベース --*/
.library { border-color: #4d2e0a; background: #e2cdaa!important; }

/*-- 問題:著者名 --*/
.q_list_1 { margin-bottom: 5px; }
.q_list_1 ul { width: 100%; }
.q_list_1 li { float: left; margin-right: 5px; margin-bottom: 10px; text-align: center; }
.q_list_1 li a { display: inline-block; width: 34px; height: 34px; padding: 5px; font-size: 2.4rem; font-weight: bold; color: #fff; vertical-align: top; border-bottom: 4px solid #602e01; border-radius: 4px; background: #8b4a0f; }
.q_list_1 li a:hover { text-decoration: none; background: #9e581c; }
.q_list_1 .selected { cursor: default; border-color: #666!important; background: #999!important; }
.q_list_1 .selected:hover { background: #999!important; }
.q_list_1 .used { cursor: default; background: #ccc!important; }
.q_list_1 .used:hover { background: #ccc!important; }

@media (max-width: 600px) {

  .q_list_1 li a { width: 28px; height: 28px; padding: 5px; font-size: 2.2rem; }

}

/*-- 問題:作品名、作品情報 --*/
.q_list_2 { margin-bottom: 0; }
.q_list_2 ul { width: 100%; max-width: 600px; margin: 0 auto; }
.q_list_2 li { float: left; width: 100%; margin-bottom: 10px; }

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

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

@media (max-width: 600px) {
  .q_list_2 li a { font-size: 1.6rem; }
}

/*-- 解答 --*/
.a_list { margin-bottom: 5px; }
.a_list ul { width: 100%; }
.a_list li { float: left; margin-right: 5px; margin-bottom: 5px; text-align: center; }
.a_list li span { display: inline-block; width: 34px; height: 34px; padding: 5px; font-size: 2.4rem; font-weight: bold; color: #333; vertical-align: top; border: 4px solid #df1f1d; background: #fff; }

@media (max-width: 600px) {
  .a_list li span { width: 24px; height: 24px; padding: 5px; font-size: 2.0rem; }
}

/*-- 結果 --*/
.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.6rem; line-height: 1.8; }