@charset "utf-8";

/*-- ベース --*/
.prefectures { border-color: #44afc4!important; background: #b5dde5!important; }

/*-- レベル --*/
.level_info { margin-bottom: 5px; text-align: center; font-size: 2.8rem; }

/*-- 問題 --*/
.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.6rem;
  color: #333;
  text-align: left;
  border: 4px solid #999;
  background: #fff;
}

.q_list li a:hover { text-decoration: none; background: #ffe4a5; }
.q_list .selected { position: relative; cursor: default; background: #ffc427!important; }
.q_list .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 .selected:hover { background: #ffc427!important; }
.q_list .used { cursor: default; background: #ccc!important; }
.q_list .used:hover { background: #ccc!important; }

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

.map_area { display: table; width: 100%; margin-bottom: 10px; }
.controler { display: table-cell; width: 80px; text-align: center; vertical-align: middle; }
.map { display: table-cell; }

.prefectly { position: relative; width: 500px; height: 500px; margin: 0 auto; background: #fff; border: 1px solid #ccc; }
.prefectly li { position:absolute; left:0px; top:0px; }
.prefectly li img { z-index:2; position:absolute; left:0px; top:0px; }
.prefectly li .jp { z-index:1; }
.prefectly li .selected { display:none; }

.controler a { display: inline-block; position: relative; width: 60px; height: 60px; border-bottom: 4px solid #148fa8; border-radius: 50%; background: #44afc4; }
.controler a::before { position: absolute; content: ''; width: 0; height: 0; border: 14px solid transparent; }
.controler_l a::before { right: 25px; top: 17px; border-right-color: #fff; }
.controler_r a::before { left: 25px; top: 17px; border-left-color: #fff; }
.controler_l a:hover::before { border-right-color: #ffce00; }
.controler_r a:hover::before { border-left-color: #ffce00; }

.q_info { position: relative; }
.hint { position: absolute; right: 4px; top: 4px; display: inline-block; padding: 2px 4px 0 4px; color: #fff; border-radius: 4px; background: #f9186f; }
.hint:hover { text-decoration: none; color: #fff; background: #ff478d; }

/*-- 解答 --*/
.a_list { margin-bottom: 10px; }
.a_list ul { width: 100%; }
.a_list li { float: left; margin-right: 5px; margin-bottom: 10px; 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: 3.2rem; font-weight: bold; text-align: center; }

/*-- 結果 --*/
.read { margin-top: 10px; font-size: 1.4rem; text-align: center; }

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

/*-- クリア --*/
.level_up { margin-bottom: 5px; text-align: center; font-size: 2.0rem; font-weight: bold; color: #d10000; }
.level { margin-bottom: 10px; padding: 10px; text-align: center; border: 2px solid #ccc; border-radius: 10px; background: #fff; }
.level span { font-size: 2.0rem; font-weight: bold; }