@charset "utf-8";

/*-- ベース --*/
.shape_memory { border-color: #006583!important; background: #e2f9ff!important; }

/*-- 記憶 --*/
.m_list ul { width: 100%; }
.m_list li { float: left; margin-right: 5px; margin-bottom: 5px; text-align: center; }
.m_list li span { display: inline-block; width: 34px; height: 34px; padding: 7px; font-size: 2.4rem; font-weight: bold; color: #fff; vertical-align: top; border: 2px solid #ddd; border-radius: 4px; background: #fff; }
.m_list li span img { width: 100%; border-radius: 2px; }

/*-- 問題 --*/
.q_list { margin-bottom: 5px; }
.q_list ul { width: 100%; }
.q_list li { float: left; margin-right: 5px; margin-bottom: 10px; text-align: center; }
.q_list li a { display: inline-block; width: 34px; height: 34px; padding: 7px; font-size: 2.4rem; font-weight: bold; color: #fff; vertical-align: top; border: 3px solid #ddd; border-bottom: 4px solid #aaa; border-radius: 4px; background: #fff; }
.q_list li a:hover { text-decoration: none; background: #f5f5f5; }
.q_list li a img { width: 100%; border-radius: 2px; }
.selected { cursor: default; border-color: #888!important; background: #aaa!important; }
.selected:hover { background: #aaa!important; }

@media (max-width: 600px) {
  .q_list li a { width: 28px; height: 28px; padding: 5px; font-size: 2.2rem; }
}

/*-- 解答 --*/
.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; }
.a_list li span img { width: 100%; border-radius: 2px; }

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

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

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