@charset "UTF-8";
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP"), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2") format("woff2"), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff") format("woff"), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf") format("opentype");
}

@font-face {
  font-family: 'GJG-regular';
  src: url('../font/GenJyuuGothic-Medium_sub.eot');/* IE9以上用 */
  src: local('GJG Regular'), /* フォントがローカルにインストールされている場合に有効 */
       url('../font/GenJyuuGothic-Medium_sub.woff2')  format('woff2'),
       url('../font/GenJyuuGothic-Medium_sub.woff')  format('woff'),
       url('../font/GenJyuuGothic-Medium_sub.ttf')  format('truetype')
}
@font-face {
  font-family: 'GJG-heavy';
  src: url('../font/GenJyuuGothic-Heavy_sub.eot');/* IE9以上用 */
  src: local('GJG heavy'), /* フォントがローカルにインストールされている場合に有効 */
       url('../font/GenJyuuGothic-Heavy_sub.woff2')  format('woff2'),
       url('../font/GenJyuuGothic-Heavy_sub.woff')  format('woff'),
       url('../font/GenJyuuGothic-Heavy_sub.ttf')  format('truetype')
}

@font-face {
  font-family: 'Nico Moji';
  src: url('../font/nicomoji-plus_sub.eot');/* IE9以上用 */
  src: local('Nico Moji'), /* フォントがローカルにインストールされている場合に有効 */
       url('../font/nicomoji-plus_sub.woff2')  format('woff2'),
       url('../font/nicomoji-plus_sub.woff')  format('woff'),
       url('../font/nicomoji-plus_sub.ttf')  format('truetype')
}

html {
  font-size: 62.5%;
}

body {
  color: #333;
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  color: #333;
  line-height: 1.6;
  word-wrap:break-word;
  background-color: #0079BD;

}

p {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 1.5em;
}
img {
  max-width: 100%;
  height: auto;
}

address {
  font-size: 14px;
  font-size: 1.4rem;
}

a {
  text-decoration: none;
}
/* ===============================================
  #ヘッダー
  =============================================== */
header {
  width: 100%;
  height: 40px;
  background-color: #fff;
  text-align: center;
  position: relative;
  z-index: 12;
}

header .logo {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  line-height: 1;
}

header .logo a {
  color: #0079BD;
  line-height: 40px;
}

.logo_img {
  text-align: center;
  margin-bottom: 20px;
}
.logo_s {
  width: 12.6%;
  margin: auto;
}
.logo_s img {
  width: 100%;
  height: auto;
}
.question .logo_title {
  display: flex;
  width: 70%;
  margin: auto auto 30px;
}
.question .logo_title .logo_s {
  width: 19.7101449275%;
  margin-right: 20px;
}
/* .question .logo_title .theme_title {
  width: 80%;
} */
/* ===============================================
#コンテンツ
=============================================== */
.contents_wrap {
  padding-top: 20px;
  padding-bottom: 40px;
}
.inner {
  max-width: 500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.inner_wide {
  max-width: 690px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.theme_orange1 {
  background-color: #DDA63A;
}
.theme_orange2 {
  background-color: #FCC30B;
}
.theme_orange3 {
  background-color: #FD6925;
}
.theme_orange4 {
  background-color: #BF8B2E;
}
.theme_green1 {
  background-color: #4C9F38;
}
.theme_green2 {
  background-color: #417935;
}
.theme_green3 {
  background-color: #56C02B;
}
.theme_blue1 {
  background-color: #26BDE2;
}
.theme_blue2 {
  background-color: #0A97D9;
}
.theme_blue3 {
  background-color: #19486A;
}
/* #テーマセレクト
----------------------- */
.panel {
  width: 100%;
  margin: auto auto 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.panel .panel_box {
  width: 23.31%;
  position: relative;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 2px solid #fff;
  box-shadow:6px 6px 0px -2px #333333;
  margin-bottom: 15px;
  margin-right: 15px;
  padding: 25px 15px;
}
.panel .panel_box figure img:nth-child(2) {
  margin-left: 5px;
  margin-right: 5px;
}
.panel .panel_box:nth-child(4n) {
  margin-right: 0;
}
.panel .panel_box::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru_white.png) top center no-repeat;
  position: absolute;
  top: 7px;
  left: 7px;
}
.panel .panel_box::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru_white.png) top center no-repeat;
  position: absolute;
  top: 7px;
  right: 7px;
}
.panel .panel_box_inner::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru_white.png) top center no-repeat;
  position: absolute;
  bottom: 7px;
  left: 7px;
}
.panel .panel_box_inner::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru_white.png) top center no-repeat;
  position: absolute;
  bottom: 7px;
  right: 7px;
}
.panel .panel_box h4 {
  font-family: 'Nico Moji';
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 20px;
  letter-spacing: -0.05em;
  line-height: 1.3;
  text-align: center;
  min-height: 5.3em;
}
.panel .panel_box figure {
  text-align: center;
}
.panel .panel_box figure img {
  width: 26%;
  height: auto;
  max-width: 100%;
}
/* #テーマイコン
----------------------- */
.theme_icon {
  width: 45%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

/* #テーマメッセ
----------------------- */
.theme_msg_wrap {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #fff;
  box-shadow:6px 6px 0px -2px #333333;
  border: 2px solid #333;
  padding: 40px 35px;
  position: relative;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.theme_msg_wrap p {
  font-size: 20px;
  font-size: 2.0rem;
  text-align: justify;
}
.theme_msg_wrap::before {
  width: 12px;
  height: 12px;
  content: "";
  color: #333;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  top: 8px;
  right: 12px;
}
.theme_msg_wrap::after {
  width: 12px;
  height: 12px;
  content: "";
  color: #333;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  top: 8px;
  left: 12px;
}

.msg::before {
  width: 12px;
  height: 12px;
  content: "";
  color: #333;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  bottom: 8px;
  right: 12px;
}
.msg::after {
  width: 12px;
  height: 12px;
  content: "";
  color: #333;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  bottom: 8px;
  left: 12px;
}
.theme_bn {
  text-align: center;
}

.btn_wrap {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
}
.theme_select .btn_wrap {
  width: 36.231884058%;
  padding-top: 15px;
}
.btn_wrap ul {
  list-style: none;
}
.btn_wrap li:last-child {
  margin-top: 15px;
}
.single li:last-child {
  margin-top: 0;
}
.theme_msg_wrap .theme_bn {
  text-align: center;
}
/* ===============================================
#問題
=============================================== */
.question_wrap {
  margin-bottom: 15px;
  position: relative;
}
.question_wrap dt {
  display: inline-block;
  font-family: 'GJG-regular';
  font-size: 22px;
  font-size: 2.2rem;
  min-width: 80px;
  padding: 10px 15px;
  line-height: 1;
  color: #fff;
  background-color: #DDA63A;
  border: 2px solid #333;
  border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  box-shadow:6px 6px 0px -2px #333333;
  position: relative;
  transform: rotate(0.001deg);
}
.theme_orange1 .question_wrap dt {
  background-color: #DDA63A;
}
.theme_orange2 .question_wrap dt {
  background-color: #FCC30B;
}
.theme_orange3 .question_wrap dt {
  background-color: #FD6925;
}
.theme_orange4 .question_wrap dt {
  background-color: #BF8B2E;
}
.theme_green1 .question_wrap dt {
  background-color: #4C9F38;
}
.theme_green2 .question_wrap dt {
  background-color: #417935;
}
.theme_green3 .question_wrap dt {
  background-color: #56C02B;
}
.theme_blue1 .question_wrap dt {
  background-color: #26BDE2;
}
.theme_blue2 .question_wrap dt {
  background-color: #0A97D9;
}
.theme_blue3 .question_wrap dt {
  background-color: #19486A;
}
.question_wrap dd {
  font-family: 'GJG-regular';
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  width: 100%;
  margin-top: -2px;
  padding: 20px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 0 10px 10px 10px;
  -webkit-border-radius: 0 10px 10px 10px;
  -moz-border-radius: 0 10px 10px 10px;
  box-shadow:6px 6px 0px -2px #333333;
  z-index: 2;
  position: relative;
  text-align: justify;
  transform: rotate(0.001deg);
}
.question_wrap dd p {
  font-size: 20px;
  font-size: 2.0rem;
}
.question_wrap .question_star {
  width: 50%;
  position: absolute;
  top: 0.5em;
  right: 0;
  text-align: right;
}
.question_wrap .question_star img {
  width: 12.8%;
  height: auto;
  margin-left: 5px;
}
.answer_wrap {
  margin-bottom: 45px;
}
.answer_wrap ol {
  list-style: none;
}
.answer_wrap li {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 15px;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  background-color: #fff;
  border: 2px solid #333;
  box-shadow:6px 6px 0px -2px #333333;
  display: flex;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  align-items: center;
  background: #333333; /* Old browsers */
  background: -moz-linear-gradient(left, #333333 0%, #333333 12%, #333333 12%, #ffffff 12%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #333333 0%,#333333 12%,#333333 12%,#ffffff 12%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #333333 0%,#333333 12%,#333333 12%,#ffffff 12%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.answer_wrap li:last-child {
  margin-bottom: 0;
}
.answer_wrap li span {
  text-align: center;
  font-family: 'GJG-regular';
  font-size: 30px;
  font-size: 3.0rem;
  color: #fff;
  min-width: 55px;
  display: inline-block;
  /* background-color: #333; */
  border-radius: 24px 0 0 24px;
  -webkit-border-radius: 24px 0 0 24px;
  -moz-border-radius: 24px 0 0 24px;
  transform: rotate(0.001deg);
}
.answer_wrap li .ans {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  width: 445px;
  padding: 10px 20px;
}
.clear_question {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  padding-bottom: 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 2px solid #333;
  box-shadow:6px 6px 0px -2px #333333;
  background-color: #fff;
  min-height: 125px;
  position: relative;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.clear_memory {
  width: 302px;
  margin: auto;
  position: relative;
}
/* .clear_memory span {
  display: inline-block;
  width: 10px;
  height: 32px;
  background: url(../img/memory_off.png) top left no-repeat;
}
.clear_memory span:last-child {
  width: 12px;
} */
.clear_memory .on {
  background: url(../img/memory.png) top left no-repeat;
}
.memory_frame {
  position: relative;
}
.memory_frame figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.memory_frame span {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
}
.memory_frame span:nth-of-type(2) {
  position: absolute;
  top: 2px;
  left: 12px;
  z-index: 1;
}
.memory_frame span:nth-of-type(3) {
  position: absolute;
  top: 2px;
  left: 22px;
  z-index: 1;
}
.memory_frame span:nth-of-type(4) {
  position: absolute;
  top: 2px;
  left: 32px;
  z-index: 1;
}
.memory_frame span:nth-of-type(5) {
  position: absolute;
  top: 2px;
  left: 42px;
  z-index: 1;
}
.memory_frame span:nth-of-type(6) {
  position: absolute;
  top: 2px;
  left: 52px;
  z-index: 1;
}
.memory_frame span:nth-of-type(7) {
  position: absolute;
  top: 2px;
  left: 62px;
  z-index: 1;
}
.memory_frame span:nth-of-type(8) {
  position: absolute;
  top: 2px;
  left: 72px;
  z-index: 1;
}
.memory_frame span:nth-of-type(9) {
  position: absolute;
  top: 2px;
  left: 82px;
  z-index: 1;
}
.memory_frame span:nth-of-type(10) {
  position: absolute;
  top: 2px;
  left: 92px;
  z-index: 1;
}
.memory_frame span:nth-of-type(11) {
  position: absolute;
  top: 2px;
  left: 102px;
  z-index: 1;
}
.memory_frame span:nth-of-type(12) {
  position: absolute;
  top: 2px;
  left: 112px;
  z-index: 1;
}
.memory_frame span:nth-of-type(13) {
  position: absolute;
  top: 2px;
  left: 122px;
  z-index: 1;
}
.memory_frame span:nth-of-type(14) {
  position: absolute;
  top: 2px;
  left: 132px;
  z-index: 1;
}
.memory_frame span:nth-of-type(15) {
  position: absolute;
  top: 2px;
  left: 142px;
  z-index: 1;
}
.memory_frame span:nth-of-type(16) {
  position: absolute;
  top: 2px;
  left: 152px;
  z-index: 1;
}
.memory_frame span:nth-of-type(17) {
  position: absolute;
  top: 2px;
  left: 162px;
  z-index: 1;
}
.memory_frame span:nth-of-type(18) {
  position: absolute;
  top: 2px;
  left: 172px;
  z-index: 1;
}
.memory_frame span:nth-of-type(19) {
  position: absolute;
  top: 2px;
  left: 182px;
  z-index: 1;
}
.memory_frame span:nth-of-type(20) {
  position: absolute;
  top: 2px;
  left: 192px;
  z-index: 1;
}
.memory_frame span:nth-of-type(21) {
  position: absolute;
  top: 2px;
  left: 202px;
  z-index: 1;
}
.memory_frame span:nth-of-type(22) {
  position: absolute;
  top: 2px;
  left: 212px;
  z-index: 1;
}
.memory_frame span:nth-of-type(23) {
  position: absolute;
  top: 2px;
  left: 222px;
  z-index: 1;
}
.memory_frame span:nth-of-type(24) {
  position: absolute;
  top: 2px;
  left: 232px;
  z-index: 1;
}
.memory_frame span:nth-of-type(25) {
  position: absolute;
  top: 2px;
  left: 242px;
  z-index: 1;
}
.memory_frame span:nth-of-type(26) {
  position: absolute;
  top: 2px;
  left: 252px;
  z-index: 1;
}
.memory_frame span:nth-of-type(27) {
  position: absolute;
  top: 2px;
  left: 262px;
  z-index: 1;
}
.memory_frame span:nth-of-type(28) {
  position: absolute;
  top: 2px;
  left: 272px;
  z-index: 1;
}
.memory_frame span:nth-of-type(29) {
  position: absolute;
  top: 2px;
  left: 282px;
  z-index: 1;
}
.memory_frame span:nth-of-type(30) {
  position: absolute;
  top: 2px;
  left: 292px;
  z-index: 1;
}

.memory_no {
  font-size: 16px;
  font-size: 1.6rem;
  font-family: arial;
  font-weight: bold;
}
.memory_no1 {
  position: absolute;
  top: 30px;
  left: -0.5rem;
}
.memory_no15 {
  position: absolute;
  top: 30px;
  width: 2rem;
  left: 0;
  right: 0;
  margin: auto;
}
.memory_no30 {
  position: absolute;
  top: 30px;
  right: -1.0rem;
}
/* ===============================================
#判定・解説
=============================================== */
.inner_ans {
  max-width: 560px;
  width: 100%;
  margin: auto;
}
.judge {
  width: 100%;
  margin-top: -60px;
  margin-bottom: -8px;
  padding-top:80px;
  background: url(../img/bg_maru.png) top center no-repeat;
}
.theme_orange1 .judge {
  background: url(../img/bg_maru.png) top center no-repeat;
}
.theme_orange2 .judge {
  background: url(../img/bg_maru_orange2.png) top center no-repeat;
}
.theme_orange3 .judge {
  background: url(../img/bg_maru_orange3.png) top center no-repeat;
}
.theme_orange4 .judge {
  background: url(../img/bg_maru_orange4.png) top center no-repeat;
}
.theme_green1 .judge {
  background: url(../img/bg_maru_green1.png) top center no-repeat;
}
.theme_green2 .judge {
  background: url(../img/bg_maru_green2.png) top center no-repeat;
}
.theme_green3 .judge {
  background: url(../img/bg_maru_green3.png) top center no-repeat;
}
.theme_blue1 .judge {
  background: url(../img/bg_maru_blue1.png) top center no-repeat;
}
.theme_blue2 .judge {
  background: url(../img/bg_maru_blue2.png) top center no-repeat;
}
.theme_blue3 .judge {
  background: url(../img/bg_maru_blue3.png) top center no-repeat;
}
.judge h2 {
  font-size: 50px;
  font-size: 5.0rem;
  font-family: 'GJG-heavy';
  text-align: center;
  position: relative;
  margin: auto;
  transform: rotate(0.001deg);
}
.judge h2 img {
  vertical-align: middle;
  margin-top: -10px;
  margin-right: 20px;
}
.answer {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  width: 71.4285714286%;
  margin: 20px auto 5px;
  padding: 10px;
  background: url(../img/bg_ans.png) repeat;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  text-align: center;
}
.answer span {
  font-family: 'Nico Moji';
  display: block;
  font-size: 20px;
  font-size: 2.0rem;
}
.answer_list {
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  width: 80%;
  height: 25px; /*2行の高さを固定に*/
  margin: auto auto 0;
}
/*フララのみ調整*/
.theme_blue3 .answer_list {
  height: 55px; /*高さを固定に*/
}

.answer_list br {
  display: none;
}
.name_wrap {
  display: flex;
}
.aoi {
  width: 60.25%;
  display: flex;
  margin: auto;
  padding-top: 1em;
  align-items: center;
  justify-content: space-between;
  background: url(../img/ans_wrong_t04.png) right bottom no-repeat;
  background-size: 74%;
  min-height: 240px;
}
.aoi p {
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  padding-top: 1em;
  padding-left: 1em;
  /* width: 54%; */
  width: 100%;
  text-shadow:1px 0px 1px #ffffff;
}
/*フララのみ調整*/
.theme_blue3 .aoi p {
  padding-top: 0;
  padding-bottom: 20px;
}

.aoi p span {
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  padding-bottom: 1em;
}
.aoi figure {
  width: 95%;
}

.comment {
  padding-top: 60px;
}
.work_end {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  font-family: 'Nico Moji';
  color: #fff;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.2;
}
/* ===============================================
#宿題クリア
=============================================== */
.clear_judge {
  max-width: 500px;
  margin-top: -30px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  padding-bottom: 50px;
  text-align: center;
  background: url(../img/bg_clear_maru.png) top center no-repeat;
}
.theme_orange1 .clear_judge  {
  background: url(../img/bg_clear_maru.png) top center no-repeat;
}
.theme_orange2 .clear_judge  {
  background: url(../img/bg_clear_maru_orange2.png) top center no-repeat;
}
.theme_orange3 .clear_judge  {
  background: url(../img/bg_clear_maru_orange3.png) top center no-repeat;
}
.theme_orange4 .clear_judge  {
  background: url(../img/bg_clear_maru_orange4.png) top center no-repeat;
}
.theme_green1 .clear_judge  {
  background: url(../img/bg_clear_maru_green1.png) top center no-repeat;
}
.theme_green2 .clear_judge  {
  background: url(../img/bg_clear_maru_green2.png) top center no-repeat;
}
.theme_green3 .clear_judge  {
  background: url(../img/bg_clear_maru_green3.png) top center no-repeat;
}
.theme_blue1 .clear_judge  {
  background: url(../img/bg_clear_maru_blue1.png) top center no-repeat;
}
.theme_blue2 .clear_judge  {
  background: url(../img/bg_clear_maru_blue2.png) top center no-repeat;
}
.theme_blue3 .clear_judge  {
  background: url(../img/bg_clear_maru_blue3.png) top center no-repeat;
}
.clear_judge figure {
  text-align: center;
}
.clear_judge figure img {
  width: 7%;
}
.clear_judge figure img:nth-child(2) {
  margin-left: 5px;
  margin-right: 5px;
}
.clear_judge h2 {
  font-size: 40px;
  font-size: 4.0rem;
  font-family: 'GJG-heavy';
  transform: rotate(0.001deg);
}
.clear_judge h2 span {
  font-size: 60px;
  font-size: 6.0rem;
}
.clear_msg {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: bold;
  font-family: 'Nico Moji';
  line-height: 1.2;
  transform: rotate(0.001deg);
}
.theme_total {
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 2px solid #333;
  box-shadow:6px 6px 0px -2px #333333;
  background-color: #fff;
  min-height: 125px;
  position: relative;
}
.theme_total::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  top: 7px;
  left: 7px;
}
.theme_total::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  top: 7px;
  right: 7px;
}
.theme_total_inner {
  width: 86%;
  margin: auto;
}
.theme_total_inner::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  bottom: 7px;
  left: 7px;
}
.theme_total_inner::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/maru.png) top center no-repeat;
  position: absolute;
  bottom: 7px;
  right: 7px;
}
.theme_total figure {
  text-align: center;
  margin-bottom: 5px;
}
.theme_total .profile {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
.theme_total .profile span {
  font-size: 12px;
  font-size: 1.2rem;
  display: block;
}
.total_comment {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
}
/* ===============================================
#結果タイプ
=============================================== */
.judge_illust {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: -30px;
}
.type_judge .theme_total {
    margin-bottom: 50px;
    padding: 40px;
}
.type_judge .theme_total .theme_total_inner {
  width: 100%;
}
.judge_illust figure {
  width: 60%;
  margin: auto;
}

.btn_share_wrap {
  width: 58.4%;
  margin: 40px auto 0;
  padding: 20px;
  border: 4px solid #CECECE;
  background-color: #fff;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
.btn_share_wrap ul {
  display: flex;
  justify-content: space-between;
  width: 47.9452054795%;
  margin: auto;
}
.btn_share_wrap ul li {
}
.btn_share_wrap .fab {
  font-size: 53px;
  font-size: 5.3rem;
}
.fa-line {
  color: #00b800;
  margin-right: 18px;
}
.fa-twitter-square {
  color: #1da1f2;
}
.btn_retry_wrap {
  width: 58.4%;
}
.btn_share_wrap li:last-child {
  margin-top: 0;
}
/* ===============================================
  #フッター
  =============================================== */
footer {
  width: 100%;
  text-align: center;
  background-color: #fff;
  line-height: 1.2;
}

footer .copy_wrap {
  padding-top: 18px;
  padding-bottom: 18px;
}

footer .copy_wrap .copy {
  font-size: 14px;
  font-size: 1.4rem;
}



/* ===============================================
  #ページ共通
  =============================================== */
.section_wrap {
  width: 100%;
}

.inner_wrap {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 60px;
}

section p:last-child {
  margin-bottom: 0;
}




@media screen and (max-width: 767px) {
  header .logo {
    font-size: 16px;
    font-size: 1.6rem;
  }
  p {
    font-size: 14px;
    font-size: 1.4rem;
    margin-bottom: 1.5em;
  }
  address {
    font-size: 16px;
    font-size: 1.6rem;
    font-style: normal;
  }
  .inner {
    max-width: 100%;
    width: 89.3333333333%;
    margin-left: auto;
    margin-right: auto;
  }
  .inner_wide {
    max-width: 100%;
    width: 89.3333333333%;
    margin-left: auto;
    margin-right: auto;
  }
  .logo_s {
    width: 18.8059701493%;
  }
  .question .logo_title {
      width: 100%;
  }
  /* #テーマセレクト
  ----------------------- */
  .panel {
    width: 100%;
    margin: auto auto 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .panel .panel_box {
    width: 47%;
    box-shadow:6px 6px 0px -2px #333333;
    margin-bottom: 15px;
    margin-right: 0;
    padding: 25px 17px;
  }
  .panel .panel_box:nth-child(4n) {
    margin-right: 0;
  }

  /* #テーマイコン
  ----------------------- */
  .theme_icon {
    width: 66.8656716418%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
  .theme_icon img {
    width: 100%;
    height: auto;
  }
  .btn_wrap {
    width: 74.6268656716%;
    padding-top: 30px;
  }
  .theme_select .btn_wrap {
    width: 74.1839762611%;
    padding-top: 15px;
  }
  .theme_msg_wrap .theme_bn {
    width: 90%;
    margin: auto;
  }
  .theme_bn img {
    width: 100%;
    height: auto;
  }
  /* ===============================================
  #判定・解説
  =============================================== */
  .inner_ans {
    max-width: 100%;
    width: 100%;
    margin: auto;
  }
  .judge {
    width: 100%;
    margin-top: -60px;
    margin-bottom: -8px;
    padding-top: 60px;
    background: url(../img/bg_maru.png) top center no-repeat;
  }
  .judge h2 {
    font-size: 50px;
    font-size: 5.0rem;
    font-family: 'GJG-heavy';
    text-align: center;
    position: relative;
    margin: auto;
  }
  .judge h2 img {
    vertical-align: middle;
    margin-top: -10px;
    margin-right: 20px;
  }
  .answer {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    width: 71.4285714286%;
    margin: 10px auto 5px;
    padding: 10px;
    background: url(../img/bg_ans.png) repeat;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    text-align: center;
  }
  .answer_3B .answer {
    font-size: 16px;
    font-size: 1.6rem;
    width: 91.429%;
  }
  .answer span {
    font-family: 'Nico Moji';
    display: block;
    font-size: 20px;
    font-size: 2.0rem;
  }
  .answer_list {
    width: 90%;
    font-size: 10px;
    font-size: 1.0rem;
    font-weight: bold;
    text-align: center;
    height: 20px; /*2行の高さを固定に*/
    margin: auto auto 0;
  }
  .answer_list br {
    display: block;
  }
  .answer_3B .answer {
    font-size: 11px;
    font-size: 1.1rem;
  }
.theme_blue3 .answer {
  height: 80px; /*フララの答え枠の高さを揃える*/
}

  .answer_wrap li {
    background: #333333; /* Old browsers */
    background: -moz-linear-gradient(left, #333333 0%, #333333 18%, #333333 18%, #ffffff 18%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #333333 0%,#333333 18%,#333333 18%,#ffffff 18%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #333333 0%,#333333 18%,#333333 18%,#ffffff 18%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
  }
  .answer_list .answer_list {
    display: block;
  }
  .aoi {
    width: 74.6666666667%;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: flex-start;
    min-height: 220px;
  }
/*  .answer_3B .aoi {
    align-items: flex-start;
  }*/
  .aoi p {
    font-weight: bold;
    font-size: 16px;
    font-size: 1.6rem;
    padding-top: 1em;
    padding-left: 0;
    /* width: 40%; */
  }
/*  .answer_3B .aoi p {
    padding-top: 2em;
  }*/
  .aoi p span {
    display: block;
    font-size: 10px;
    font-size: 1.0rem;
    padding-bottom: 1em;
  }
  .aoi figure {
    width: 60%;
  }
  .aoi figure img {
    width: 95%;
  }
  .comment {
    padding-top: 60px;
  }

  .clear_question {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 2px solid #333;
    box-shadow:6px 6px 0px -2px #333333;
    background-color: #fff;
    min-height: 125px;
  }
  /* ===============================================
  #宿題クリア
  =============================================== */
  .clear_judge {
    max-width: 100%;
    margin-top: -30px;
    padding-top: 30px;
    padding-bottom: 50px;
    text-align: center;
    background: url(../img/bg_clear_maru_sp.png) top center no-repeat;
    background-size: cover;
  }
  .theme_orange1 .clear_judge  {
    background: url(../img/bg_clear_maru_sp.png) top center no-repeat;
    background-size: cover;
  }
  .theme_orange2 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_orange2.png) top center no-repeat;
    background-size: cover;
  }
  .theme_orange3 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_orange3.png) top center no-repeat;
    background-size: cover;
  }
  .theme_orange4 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_orange4.png) top center no-repeat;
    background-size: cover;
  }
  .theme_green1 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_green1.png) top center no-repeat;
    background-size: cover;
  }
  .theme_green2 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_green2.png) top center no-repeat;
    background-size: cover;
  }
  .theme_green3 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_green3.png) top center no-repeat;
    background-size: cover;
  }
  .theme_blue1 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_blue1.png) top center no-repeat;
    background-size: cover;
  }
  .theme_blue2 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_blue2.png) top center no-repeat;
    background-size: cover;
  }
  .theme_blue3 .clear_judge  {
    background: url(../img/bg_clear_maru_sp_blue3.png) top center no-repeat;
    background-size: cover;
  }

  .clear_judge figure img:nth-child(2) {
    margin-left: 5px;
    margin-right: 5px;
  }
  .theme_total {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 2px solid #333;
    box-shadow:6px 6px 0px -2px #333333;
    background-color: #fff;
    min-height: 125px;
    position: relative;
  }
  .theme_total_inner {
    width: 86.5671641791%;
  }
  .theme_total figure img {
    width: 100%;
  }

  /* ===============================================
  #結果タイプ
  =============================================== */
  .judge_illust {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-bottom: -30px;
  }
  .judge_illust figure {
    width: 86%;
  }
  .judge_illust img {
    max-width: 100%;
    height: auto;
  }
  .type_judge .theme_total {
      margin-bottom: 10px;
      padding: 40px 20px;
  }
  .btn_share_wrap {
    width: 87.1641791045%;
    margin: 40px auto 0;
    padding: 20px;
    border: 4px solid #CECECE;
    background-color: #fff;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
  }
  .btn_share_wrap ul {
    width: 49.918%;
    margin: auto;
  }
  .btn_retry_wrap {
    width: 87.1641791045%;
  }

  footer .copy_wrap {
    width: 90%;
    margin: auto;
  }
  footer .copy_wrap .copy {
    font-size: 10px;
    font-size: 1.0rem;
  }

  .question_wrap .question_star img {
    width: 19%;
  }

}

@media screen and (max-width: 320px) {
  .panel .panel_box h4 img {
    width: 100%;
    height: auto;
  }
  .panel .panel_box figure img {
    width: 30%;
    height: auto;
  }
  .answer {
    width: 90%;
  }
  .answer_wrap li {
    background: #333333; /* Old browsers */
    background: -moz-linear-gradient(left, #333333 0%, #333333 20%, #333333 20%, #ffffff 20%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #333333 0%,#333333 20%,#333333 20%,#ffffff 20%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #333333 0%,#333333 20%,#333333 20%,#ffffff 20%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
  }
  .clear_memory {
    width: 302px;
    width: 95%;
    margin: auto;
    position: relative;
  }
  /* .clear_memory span {
    display: inline-block;
    width: 10px;
    height: 32px;
    background: url(../img/memory_off.png) top left no-repeat;
  }
  .clear_memory span:last-child {
    width: 12px;
  } */
  .clear_memory .on {
    background: url(../img/memory.png) top left no-repeat;
  }
  .memory_frame {
    position: relative;
  }
  .memory_frame figure {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .memory_frame img {
    width: 100%;
  }
  .memory_frame span {
    position: absolute;
    width: 7px;
    top: 2px;
    left: 3px;
    z-index: 1;
    height: 27px;
    overflow: hidden;
  }
  .memory_frame span img {
    height: 27px;
  }
  .memory_frame span:nth-of-type(2) {
    position: absolute;
    top: 2px;
    left: 12px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(3) {
    position: absolute;
    top: 2px;
    left: 20px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(4) {
    position: absolute;
    top: 2px;
    left: 29px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(5) {
    position: absolute;
    top: 2px;
    left: 38px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(6) {
    position: absolute;
    top: 2px;
    left: 47px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(7) {
    position: absolute;
    top: 2px;
    left: 56px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(8) {
    position: absolute;
    top: 2px;
    left: 65px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(9) {
    position: absolute;
    top: 2px;
    left: 73px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(10) {
    position: absolute;
    top: 2px;
    left: 82px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(11) {
    position: absolute;
    top: 2px;
    left: 91px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(12) {
    position: absolute;
    top: 2px;
    left: 100px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(13) {
    position: absolute;
    top: 2px;
    left: 109px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(14) {
    position: absolute;
    top: 2px;
    left: 118px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(15) {
    position: absolute;
    top: 2px;
    left: 127px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(16) {
    position: absolute;
    top: 2px;
    left: 136px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(17) {
    position: absolute;
    top: 2px;
    left: 145px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(18) {
    position: absolute;
    top: 2px;
    left: 154px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(19) {
    position: absolute;
    top: 2px;
    left: 163px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(20) {
    position: absolute;
    top: 2px;
    left: 172px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(21) {
    position: absolute;
    top: 2px;
    left: 180px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(22) {
    position: absolute;
    top: 2px;
    left: 189px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(23) {
    position: absolute;
    top: 2px;
    left: 198px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(24) {
    position: absolute;
    top: 2px;
    left: 207px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(25) {
    position: absolute;
    top: 2px;
    left: 216px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(26) {
    position: absolute;
    top: 2px;
    left: 225px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(27) {
    position: absolute;
    top: 2px;
    left: 234px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(28) {
    position: absolute;
    top: 2px;
    left: 243px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(29) {
    position: absolute;
    top: 2px;
    left: 251px;
    z-index: 1;
  }
  .memory_frame span:nth-of-type(30) {
    position: absolute;
    top: 2px;
    left: 260px;
    z-index: 1;
  }
  .memory_no {
    font-size: 16px;
    font-size: 1.6rem;
    font-family: arial;
    font-weight: bold;
  }
  .memory_no1 {
    position: absolute;
    top: 30px;
    left: 0;
  }
  .memory_no15 {
    position: absolute;
    top: 30px;
    width: 2rem;
    left: 0;
    right: 0;
    margin: auto;
  }
  .memory_no30 {
    position: absolute;
    top: 30px;
    right: -0.6rem;
  }

  .work_end img {
    max-width: 100%;
    height: auto;
  }
  .btn_share_wrap ul {
    display: flex;
    justify-content: space-between;
    width: 65%;
  }
  .btn_share_wrap.btn_wrap li:last-child {
    margin-top: 0;
  }
  .question .logo_title .theme_title img {
    max-width: 100%;
    height: auto;
  }
  footer .copy_wrap .copy {
    font-size: 10px;
    font-size: 1.0rem;
  }

  .question_wrap .question_star {
    width: 50%;
    top: 1em;
  }
  .question_wrap .question_star img {
    width: 18%;
  }
  .theme_orange1 .judge {
    background-size: 155%;
  }
  .theme_orange2 .judge {
    background-size: 155%;
  }
  .theme_orange3 .judge {
    background-size: 155%;
  }
  .theme_orange4 .judge {
    background-size: 155%;
  }
  .theme_green1 .judge {
    background-size: 155%;
  }
  .theme_green2 .judge {
    background-size: 155%;
  }
  .theme_green3 .judge {
    background-size: 155%;
  }
  .theme_blue1 .judge {
    background-size: 155%;
  }
  .theme_blue2 .judge {
    background-size: 155%;
  }
  .theme_blue3 .judge {
    background-size: 155%;
  }
  .judge_illust figure {
    width: 86%;
  }

  .panel .panel_box figure img:nth-child(2) {
    margin-left: 3px;
    margin-right: 3px;
  }
  .aoi {
    width: 92%;
  }
  .aoi p {
    /* width: 46%; */
    padding-left: 1em;
  }
  .aoi figure {
    width: 52%;
  }
  .clear_msg {
    font-size: 18px;
    font-size: 1.8rem;
  }
}