@charset "utf-8";

/* **************************************************

  loader
  
************************************************** */
#loader {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ==============================
  is-execute
============================== */
html.is-execute.is-loaded #loader {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ==============================
  is-error
============================== */
html.is-error.is-loaded #loader {
  opacity: 0 !important;
  visibility: hidden !important;
}
html.is-error.is-loaded #container {
}

@media screen and (max-width:767px) {
html.is-error.is-loaded #container {
  background: #41b8e7 url(../common/images/bg_01@sp.png) no-repeat center bottom;
  background-size: 133.3333333333333% auto !important;
}
}

@media screen and (min-width:768px) {
html.is-error.is-loaded #container {
  background: #41b8e7 url(../common/images/bg_01.png) no-repeat center bottom;
}
}





/* **************************************************

  container
  
************************************************** */
#container {
  color: #fff;
  background: #41b8e7;
}



/* **************************************************

  question
  
************************************************** */
#question .inner {
  position: relative;
  box-sizing: border-box;
}

@media screen and (max-width:767px) {
#question .inner {
  height: auto !important;
  padding: 20px;
}
}

@media screen and (min-width:768px) {
#question .inner {
  width: 700px;
  min-height: 600px !important;
  margin: 0 auto;
  padding: 35px 0;
}
}



/* **************************************************

  question-header
  
************************************************** */
#question-header { text-align: center; }
#question-header .title {
  position: relative;
  margin: 0 auto;
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
#question-header .title:before {
  display: block;
  content: "";
  background: url(../common/images/level_bg.png) no-repeat center center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#question-header .title img {
  display: block;
  position: relative;
  z-index: 1;
  opacity: 0;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

@media screen and (max-width:767px) {
#question-header .title {
  max-width: 360px;
  width: 41.7910447761194%;
}
}

@media screen and (min-width:768px) {
#question-header .title { width: 192px; }
}


/* ==============================
  is-execute
============================== */
html.is-execute.is-complete #question-header .title {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease-in-out;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease-in-out;
}
/*
html.is-execute.is-complete #question-header .title:before {
	-webkit-animation: title 0.75s ease-in-out infinite alternate both;
	animation: title 0.75s ease-in-out infinite alternate both;
}
*/
html.is-execute.is-complete #question-header .title img {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 0.5s ease-in-out 0.5s;
  transition: transform 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 0.5s ease-in-out 0.5s;
}

@keyframes title {
0% {
  -webkit-transform: scale(1);
  transform: scale(1);
}
100% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
}



/* **************************************************

  question-step
  
************************************************** */
#question-step {
  font-size: 0;
  text-align: center;
  pointer-events: none;
}
#question-step ul {
  width: 100%;
  position: relative;
}
#question-step ul:before {
  background: #98d2f0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
#question-step li {
  position: absolute;
  top: -8px;
}
#question-step li:before {
  background: #98d2f0;
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 auto 8px;
  border: solid 4px #98d2f0;
  border-radius: 50%;
  -webkit-transform: scale(0);
  transform: scale(0);
}
#question-step li.active:before { background: #04a6e1; }
#question-step li img {
  max-width: none;
  width: auto;
  opacity: 0;
}

/* step5 */
#question-step .step5 li:nth-child(1) { left: 0; }
#question-step .step5 li:nth-child(2) { left: 25%; }
#question-step .step5 li:nth-child(3) { left: 50%; }
#question-step .step5 li:nth-child(4) { left: 75%; }
#question-step .step5 li:nth-child(5) { left: 100%; }

/* step7 */
#question-step .step7 li:nth-child(1) { left: 0; }
#question-step .step7 li:nth-child(2) { left: 16.66666666666667%; }
#question-step .step7 li:nth-child(3) { left: 33.33333333333333%; }
#question-step .step7 li:nth-child(4) { left: 50%; }
#question-step .step7 li:nth-child(5) { left: 66.66666666666668%; }
#question-step .step7 li:nth-child(6) { left: 83.33333333333335%; }
#question-step .step7 li:nth-child(7) { left: 100%; }

/* step10 */
#question-step .step10 li:nth-child(1) { left: 0; }
#question-step .step10 li:nth-child(2) { left: 11.11111111111111%; }
#question-step .step10 li:nth-child(3) { left: 22.22222222222222%; }
#question-step .step10 li:nth-child(4) { left: 33.33333333333333%; }
#question-step .step10 li:nth-child(5) { left: 44.44444444444444%; }
#question-step .step10 li:nth-child(6) { left: 55.55555555555555%; }
#question-step .step10 li:nth-child(7) { left: 66.66666666666666%; }
#question-step .step10 li:nth-child(8) { left: 77.77777777777777%; }
#question-step .step10 li:nth-child(9) { left: 88.88888888888888%; }
#question-step .step10 li:nth-child(10) { left: 100%; }

@media screen and (max-width:767px) {
#question-step {
  height: 28px;
  margin: 8.35821% 2.985074626865672% 0;
}
#question-step li {
  width: 24px;
  margin-left: -12px;
}
#question-step li:nth-child(10) { width: 31px; }
#question-step li img { height: 12px; }
}

@media screen and (min-width:768px) {
#question-step {
  width: 380px;
  height: 35px;
  margin: 38px auto 0;
}
#question-step li {
  width: 30px;
  margin-left: -15px;
  top: -10px;
}
#question-step li:nth-child(10) { width: 39px; }
#question-step li:before {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  border-width: 5px;
}
#question-step li img { height: 15px; }
}


/* ==============================
  is-execute.is-complete
============================== */
html.is-execute.is-complete #question-step ul:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
html.is-execute.is-complete #question-step li img {
  opacity: 0.5;
  -webkit-transition: opacity 0.5s ease-in-out 1.5s;
  transition: opacity 0.5s ease-in-out 1.5s;
}
html.is-execute.is-complete #question-step li.active img { opacity: 1; }
html.is-execute.is-complete #question-step li:before {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
}
html.is-execute.is-complete #question-step li.active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* ==============================
  is-next
============================== */
html.is-next #question-step li img,
html.is-next #question-step li:before {
  -webkit-transition-delay: 0s !important;
  transition-delay: 0s !important;
}



/* **************************************************

  question-body
  
************************************************** */
#question-body {
  position: relative;
  z-index: 1;
}
#question-body .slide { pointer-events: none; }
#question-body .slide.slick-current { pointer-events: auto; }
#question-body .question {
  font-size: 16px;
  line-height: 1.666666666666667;
  box-sizing: border-box;
  display: table;
  width: 100%;
  position: relative;
  opacity: 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
#question-body .question:before,
#question-body .question:after {
  display: block;
  content: "";
  width: 10px;
  height: 100%;
  box-sizing: border-box;
  border: solid 1px #fff;
  position: absolute;
  top: 0;
}
#question-body .question:before {
  border-right: none;
  border-radius: 5px 0 0 5px;
  left: 0;
}
#question-body .question:after {
  border-left: none;
  border-radius: 0 5px 5px 0;
  right: 0;
}
#question-body .question .txt {
  display: table-cell;
  box-sizing: border-box;
  vertical-align: middle;
  opacity: 0;
}
#question-body .subtitle {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: #ffee58;
  text-align: center;
  margin-top: 14px;
  opacity: 0;
}
#question-body .answer {
  text-align: center;
  margin-top: 13px;
  position: relative;
  z-index: 1;
}
#question-body .answer li {
  width: 220px;
  opacity: 0;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
#question-body .answer li a {
  font-size: 16px;
  font-weight: 700;
  line-height: 34px;
  color: #fff;
  background: #41b8e7;
  white-space: nowrap;
  display: block;
  border: solid 3px #fff;
  border-radius: 8px;
}

@media screen and (min-width:375px) {
#question-body .question { font-size: 15px; }
}

@media screen and (max-width:767px) {
#question-body { margin-top: 7.462686567164179%; }
#question-body .question .txt {
  height: 8.333333333333333em;
  padding: 0 10.44776119402985%;
}
#question-body .question .txt br { display: none; }
#question-body .answer li { margin: 6px auto 0; }
#question-body .answer li:first-child { margin-top: 0; }
#question-body .answer li a {
  -webkit-transition: background 0.1s ease-out;
  transition: background 0.1s ease-out;
}
#question-body .answer li a.touch,
#question-body .answer li a.click { background: #74bc1f !important; }
}

@media screen and (min-width:600px) and (max-width:767px) {
#question-body .question { font-size: 24px; }
#question-body .question .txt { padding: 0 70px; }
#question-body .subtitle {
  font-size: 20px;
  margin-top: 32px;
}
}

@media screen and (min-width:768px) {
#question-body {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-80px);
  transform: translate(-50%,-80px);
}
#question-body .question {
  font-size: 30px;
  line-height: 1.6;
}
#question-body .question:before,
#question-body .question:after {
  width: 20px;
  border-width: 2px;
}
#question-body .question:before { border-radius: 10px 0 0 10px; }
#question-body .question:after { border-radius: 0 10px 10px 0; }
#question-body .question .txt {
  height: 7em;
  padding: 0.3166666666666667em 70px;
}
#question-body .subtitle {
  font-size: 20px;
  margin-top: 30px;
}
#question-body .answer {
  letter-spacing: -0.4em;
  margin-top: 30px;
}
#question-body .answer li {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: top;
  margin-left: 20px;
}
#question-body .answer li:first-child { margin-left: 0; }
#question-body .answer li a {
  line-height: 52px;
  border-width: 4px;
  -webkit-transition: background 0.2s ease-out, -webkit-transform 0.2s ease-out, box-shadow 0.2s ease-out;
  transition: background 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
#question-body .answer li a:hover {
  background: #74bc1f;
  box-shadow: 0 4px 0 rgba(0,0,0,0.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
}


/* ==============================
  transition
============================== */
#question-body #question-slider .slide .question {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
}
#question-body #question-slider .slide .question .txt {
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
#question-body #question-slider .slide .subtitle {
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
#question-body #question-slider .slide .answer li {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}


/* ==============================
  is-execute.is-complete & slick-active
============================== */
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .question {
  opacity: 1;
  -webkit-transition-delay: 1s, 1s;
  transition-delay: 1s, 1s;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .question .txt {
  opacity: 1;
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .subtitle {
  opacity: 1;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .answer li {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .answer li:nth-child(1) {
  -webkit-transition-delay: 1.6s, 1.6s;
  transition-delay: 1.6s, 1.6s;
}
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .answer li:nth-child(2) {
  -webkit-transition-delay: 1.7s, 1.7s;
  transition-delay: 1.7s, 1.7s;
}
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .answer li:nth-child(3) {
  -webkit-transition-delay: 1.8s, 1.8s;
  transition-delay: 1.8s, 1.8s;
}



/* **************************************************

  question-slider
  
************************************************** */
#question-slider .slick-list { overflow: visible !important; }
#question-slider .slide .slide-inner { position: relative; }
#question-slider .slide .illust li {
  position: absolute;
  opacity: 0;
  -webkit-transform: translateY(40%);
  transform: translateY(40%);
}

@media screen and (min-width:768px) {
#question-slider .slide .illust li { width: auto !important; }
}


/* ==============================
  transition
============================== */
#question-slider .slide .illust li {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-delay: 2s, 2s;
  transition-delay: 2s, 2s;
}


/* ==============================
  is-execute.is-complete & slick-active
============================== */
html.is-execute.is-complete #question-body #question-slider .slide.slick-active .illust li {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}


/* ==============================
  type1
============================== */
#question-slider .slide .illust.type1 li:nth-child(1) {
  width: 107px;
  bottom: -40px;
  left: -50px;
  
}
#question-slider .slide .illust.type1 li:nth-child(2) {
  width: 107px;
  bottom: -40px;
  right: -50px;
}

@media screen and (min-width:375px) and (max-width:767px) {
#question-slider .slide .illust.type1 li:nth-child(1) {
  left: 50%;
  margin-left: -210px;/*中心からの距離+自身の横幅*/
}
#question-slider .slide .illust.type1 li:nth-child(2) {
  right: 50%;
  margin-right: -210px;/*中心からの距離+自身の横幅*/
}
}

@media screen and (min-width:768px) {
#question-slider .slide .illust.type1 li:nth-child(1) {
  left: -235px;
  bottom: -70px;
  
}
#question-slider .slide .illust.type1 li:nth-child(2) {
  right: -220px;
  bottom: -70px;
}
}



/* **************************************************

  result
  
************************************************** */
#result {
  background: #41b8e7;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  position: absolute;
  left: 0;
  top: 0;
}
#result .inner {
  position: relative;
  z-index: 1;
}

@media screen and (max-width:767px) {
#result .inner { padding: 25px 20px 82%; }
}

@media screen and (min-width:768px) {
#result .inner { padding: 30px 0 510px; }
#result .inner {
  width: 960px;
  margin: 0 auto;
}
}


/* ==============================
  active
============================== */
#result.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}



/* **************************************************

  background
  
************************************************** */
@media screen and (max-width:767px) {
#background:before { margin: 0 0 -7% -8%; }
}

@media screen and (min-width:768px) {
#background:before { margin: 0 0 -145px 25px; }
}



/* **************************************************

  result-header
  
************************************************** */
#result-header { text-align: center; }
#result-header .title {
  font-size: 20px;
  line-height: 1;
}
#result-header .image {
  font-size: 0;
  background: #fff;
  margin-top: 28px;
  border-radius: 6px;
  overflow: hidden;
}
#result-header .image .src {
  background-size: 100% auto !important;
  display: block;
  opacity: 0;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
#result-header .image { display: block; }
#result-header .nav {
  margin-top: 20px;
  opacity: 0;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
#result-header .nav li {
  font-size: 13px;
  line-height: 50px;
  margin-top: 10px;
}
#result-header .nav li a {
  color: #41a1ef;
  display: block;
  background: #fff;
  padding-left: 24px;
  border-radius: 6px;
  position: relative;
}
#result-header .nav li a:before {
  font-family: 'icomoon' !important;
  font-size: inherit;
  line-height: 24px;
  background-size: 100% auto !important;
  display: block;
  letter-spacing: 0;
  vertical-align: top;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#result-header .nav li.fb a { color: #4967b0 !important; }
#result-header .nav li.re a { padding-left: 0; }
#result-header .nav li.tw a:before,
#result-header .nav li.fb a:before {
  color: #fff;
  border-radius: 50%;
}
#result-header .nav li.tw a:before {
  background: #41a1ef;
  content: "\e901";
}
#result-header .nav li.fb a:before {
  background: #4967b0;
  content: "\e900";
}
#result-header .nav li.re a:before { content: "\e902"; }

/* image */
#result.elementary #result-header .image .src { background: url(../images/result/elementary_image.png) no-repeat center top; }
#result.intermediate #result-header .image .src { background: url(../images/result/intermediate_image.png) no-repeat center top; }
#result.advanced #result-header .image .src { background: url(../images/result/advanced_image.png) no-repeat center top; }

/* elementary */
#result.elementary.score1 #result-header .image .src { background-position: center 20% !important; }
#result.elementary.score2 #result-header .image .src { background-position: center 40% !important; }
#result.elementary.score3 #result-header .image .src { background-position: center 60% !important; }
#result.elementary.score4 #result-header .image .src { background-position: center 80% !important; }
#result.elementary.score5 #result-header .image .src { background-position: center 100% !important; }

/* intermediate */
#result.intermediate.score1 #result-header .image .src { background-position: center 14.28571428571429% !important; }
#result.intermediate.score2 #result-header .image .src { background-position: center 28.57142857142857% !important; }
#result.intermediate.score3 #result-header .image .src { background-position: center 42.85714285714287% !important; }
#result.intermediate.score4 #result-header .image .src { background-position: center 57.14285714285716% !important; }
#result.intermediate.score5 #result-header .image .src { background-position: center 71.42857142857145% !important; }
#result.intermediate.score6 #result-header .image .src { background-position: center 85.71428571428574% !important; }
#result.intermediate.score7 #result-header .image .src { background-position: center 100% !important; }

/* elementary */
#result.advanced.score1 #result-header .image .src { background-position: center 10% !important; }
#result.advanced.score2 #result-header .image .src { background-position: center 20% !important; }
#result.advanced.score3 #result-header .image .src { background-position: center 30% !important; }
#result.advanced.score4 #result-header .image .src { background-position: center 40% !important; }
#result.advanced.score5 #result-header .image .src { background-position: center 50% !important; }
#result.advanced.score6 #result-header .image .src { background-position: center 60% !important; }
#result.advanced.score7 #result-header .image .src { background-position: center 70% !important; }
#result.advanced.score8 #result-header .image .src { background-position: center 80% !important; }
#result.advanced.score9 #result-header .image .src { background-position: center 90% !important; }
#result.advanced.score10 #result-header .image .src { background-position: center 100% !important; }

@media screen and (min-width:375px) {
#result-header .nav li { font-size: 15px; }
#result-header .nav li a { padding-left: 30px; }
#result-header .nav li a:before {
  line-height: 28px;
  width: 28px;
  height: 28px;
  left: 20px;
}
}

@media screen and (min-width:600px) {
#result-header .nav li { font-size: 18px; }
}

@media screen and (min-width:768px) {
#result-header {
  width: 800px;
  margin: 0 auto;
}
#result-header .title { font-size: 40px; }
#result-header .image {
  margin-top: 56px;
  border-radius: 8px;
}
#result-header .nav { letter-spacing: -0.4em; }
#result-header .nav li {
  font-size: 18px;
  line-height: 64px;
  display: inline-block;
  letter-spacing: 0;
  vertical-align: top;
  width: 390px;
  margin: 0;
}
#result-header .nav li a {
  padding-left: 50px;
  border: solid 3px #fff;
  border-radius: 8px;
  -webkit-transition: color 0.2s ease-out, background 0.2s ease-out;
  transition: color 0.2s ease-out, background 0.2s ease-out;
}
#result-header .nav li a:hover {
  color: #fff !important;
  background: #74bc1f !important;
}
#result-header .nav li.tw a:hover { background: #41a1ef !important; }
#result-header .nav li.fb a:hover { background: #4967b0 !important; }
#result-header .nav li:nth-child(2) { margin-left: 20px; }
#result-header .nav li:nth-child(3) { margin-top: 20px; }
#result-header .nav li a:before {
  font-size: 26px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  left: 20px;
}
#result-header .nav li:nth-child(3) a:before { left: 0; }
}


/* ==============================
  is-execute.is-complete & active
============================== */
html.is-execute.is-complete #result.active #result-header .image .src {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 0.5s ease-in-out 0.5s;
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 0.5s ease-in-out 0.5s;
}
html.is-execute.is-complete #result.active #result-header .nav {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1s ease-in-out 1s;
  transition: -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1s ease-in-out 1s;
}



/* **************************************************

  result-body
  
************************************************** */
#result-body {
  margin-top: 44px;
  opacity: 0;
}
#result-body .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #ffee58;
}
#result-body .result-item { margin-top: 25px; }
#result-body .result-item .item {
  background: #41b8e7;
  display: table;
  box-sizing: border-box;
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
}
#result-body .result-item .item:first-child { margin-top: 0 !important; }
#result-body .result-item .item > * {
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
  height: 108px;
  padding: 10px 0 15px;
}
#result-body .result-item .item .q {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  width: 58px;
}
#result-body .result-item .item .question-wrap {
  font-size: 12px;
  line-height: 1.666666666666667;
}
#result-body .result-item .item .question-wrap strong {
  font-size: 16px;
  font-weight: 400;
}
#result-body .result-item .item .question-wrap .correct-answer { color: #ffee58; }
#result-body .result-item .item:not(.incorrect) .question-wrap .correct-answer { display: none; }
#result-body .result-item .item .question-wrap .correct-answer,
#result-body .result-item .item .question-wrap .your-answer {
  line-height: 1;
  letter-spacing: -0.4em;
  margin-top: 8px;
}
#result-body .result-item .item .question-wrap .correct-answer > *,
#result-body .result-item .item .question-wrap .your-answer > * {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: middle;
}
#result-body .result-item .item .correction {
  font-size: 12px;
  text-align: center;
  width: 60px;
}
#result-body .result-item .item .correction .txt { display: block; }
#result-body .result-item .item .correction .txt:before {
  font-family: 'icomoon' !important;
  font-size: 32px;
  line-height: 1;
  display: block;
  content: "\e904";
  margin-bottom: 10px;
}
#result-body .result-item .item.incorrect .correction .txt:before { content: "\e905"; }
#result-body .result-item .item .correction .txt:after { content: "正解"; }
#result-body .result-item .item.incorrect .correction .txt:after { content: "不正解"; }

@media screen and (min-width:768px) {
#result-body { margin-top: 50px; }
#result-body .title { font-size: 30px; }
#result-body .result-item { margin-top: 20px; }
#result-body .result-item .item { margin-top: 20px; }
#result-body .result-item .item > * {
  height: 198px;
  padding: 25px 0 35px;
}
#result-body .result-item .item .q {
  font-size: 50px;
  width: 160px;
}
#result-body .result-item .item .question-wrap { font-size: 20px; }
#result-body .result-item .item .question-wrap strong { font-size: 40px; }
#result-body .result-item .item .question-wrap .correct-answer,
#result-body .result-item .item .question-wrap .your-answer { margin-top: 15px; }
#result-body .result-item .item .correction {
  font-size: 20px;
  width: 188px;
}
#result-body .result-item .item .correction .txt:before { font-size: 95px; }
}


/* ==============================
  is-execute.is-complete & active
============================== */
html.is-execute.is-complete #result.active #result-body {
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out 1s;
  transition: opacity 0.5s ease-in-out 1s;
}



/* **************************************************

  result-nav
  
************************************************** */
#result-nav { margin-top: 30px; }
#result-nav li {
  font-size: 10px;
  font-weight: 700;
  line-height: 46px;
}
#result-nav li a {
  color: #fff;
  display: block;
  background: #04a6e1;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 6px;
  position: relative;
}
#result-nav li:nth-child(2) a { background: #74bc1f; }
#result-nav li a:after {
  font-family: 'icomoon' !important;
  font-size: 13px;
  display: block;
  content: "\e903";
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (min-width:375px) {
#result-nav li { font-size: 12px; }
#result-nav li a:after {
  font-size: 15px;
  right: 15px;
}
}

@media screen and (min-width:600px) {
#result-nav li { font-size: 14px; }
#result-nav li a:after { font-size: 17px; }
}

@media screen and (max-width:767px) {
#result-nav li { margin-top: 10px; }
}

@media screen and (min-width:768px) {
#result-nav { margin-top: 40px; }
#result-nav ul:after {
  display: block;
  content: "";
  clear: both;
}
#result-nav li {
  font-size: 18px;
  line-height: 64px;
  width: 470px;
}
#result-nav li:nth-child(1) { float: left; }
#result-nav li:nth-child(2) { float: right; }
#result-nav li a {
  border-radius: 8px;
  -webkit-transition: color 0.2s ease-out, background 0.2s ease-out;
  transition: color 0.2s ease-out, background 0.2s ease-out;
}
#result-nav li a:hover {
  color: #41a1ef;
  background: #fff !important;
}
#result-nav li a:after { font-size: 26px; }
}



/* **************************************************

  footer-title
  
************************************************** */
#footer-title {
  width: 58%;
  position: absolute;
  margin-bottom: -10%;
  left: 16.26666666666667%;
  bottom: 0%;
}

@media screen and (min-width:768px) {
#footer-title {
  width: 376px;
  left: 50%;
  margin-bottom: -138px;
  margin-left: -125px;
}
}



/* **************************************************

  error-popup
  
************************************************** */
#error-popup {
  color: #fff;
  text-align: center;
}
#error-popup .messsage {
  font-size: 14px;
  font-weight: 700;
}
#error-popup .btn {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2em;
}
#error-popup .btn a {
  line-height: 42px;
  color: #fff;
  white-space: nowrap;
  display: block;
  width: 200px;
  margin: 0 auto;
  border: solid 3px #fff;
  border-radius: 8px;
}

@media screen and (min-width:768px) {
#error-popup .messsage { font-size: 18px; }
#error-popup .btn { font-size: 20px; }
#error-popup .btn a {
  line-height: 52px;
  border-width: 4px;
}
}