@charset "UTF-8";
.check #check_sp_text { text-align: center; margin-bottom: 15px; }
.check .question { padding-top: 15px; }
.check .question .question_inner { width: 100%; margin-left: auto; margin-right: auto; border: 1px solid #dde3e1; border-radius: 5px; box-shadow: 1px 1px 6px 0 #CCC; background: #FFF; }
.check .question h3 { text-align: center; }
.check .question ul { width: 100%; }
.check .question ul li { text-align: center; display: flex; justify-content: center; align-items: center; height: 6em; float: left; margin-left: 0.5em; margin-right: 0.5em; padding: 0 0.5em; background-color: #FFF3BA; font-family: 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro W6', Osaka, Verdana, Arial, Helvetica, sans-serif; color: #41210C; border-radius: 5px; cursor: pointer; position: relative; overflow: hidden; z-index: 2; box-sizing: border-box; transition: color 0.2s, background 0.5s; }
.check .question ul li span.one_l { line-height: 3em; }
.check .question ul li:hover { color: #fff; font-weight: bold; background-color: #F06F00; }
.check .question ul li.active { color: #fff; font-weight: bold; background-color: #001996; }
.check .question + .question { margin-top: 5px; }
.check .question + .question::before { content: ""; display: block; width: 50px; height: 40px; margin: 0 auto; border-top: 20px solid #001996; border-right: 25px solid transparent; border-bottom: 20px solid transparent; border-left: 25px solid transparent; }
.check .result { padding-top: 15px; margin-top: 5px; position: relative; }
.check .result .result_inner { width: 100%; margin-left: auto; margin-right: auto; border: 5px solid #666; border-radius: 5px; box-shadow: 1px 1px 6px 0 #CCC; background: #FFF; transition: opacity 0.5s; }
.check .result h3 { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #666; }
.check .result h3 span { color: #666; }
.check .result p { line-height: 1.5em; }
.check .result .result_pho img { width: 100%; height: auto; }
.check .result .result_link { text-align: center; margin-top: 20px; }
.check .result .result_link a { font-size: 16px; font-weight: bold; text-decoration: none; text-align: center; display: inline-block; padding: 10px 30px; margin-left: auto; margin-right: auto; border-radius: 10px; color: #FFF; background-color: #666; }
.check .result::before { content: ""; display: block; width: 50px; height: 40px; margin: 0 auto; border-top: 20px solid #001996; border-right: 25px solid transparent; border-bottom: 20px solid transparent; border-left: 25px solid transparent; }
.check .result#result1 .result_inner { border-color: #C00; }
.check .result#result1 h3 span { color: #C00; }
.check .result#result2 .result_inner { border-color: #FC0; }
.check .result#result2 h3 span { color: #FC0; }
.check .result#result3 .result_inner { border-color: #F70; }
.check .result#result3 h3 span { color: #F70; }
.check .result#result4 .result_inner { border-color: #093; }
.check .result#result4 h3 span { color: #093; }
.check .result#result5 .result_inner, .check .result#result6 .result_inner { border-color: #309; }
.check .result#result5 h3 span, .check .result#result6 h3 span { color: #309; }

@media screen and (max-width: 767px) { .check .ttl-category .badge { position: absolute; right: 10px; bottom: 3px; font-size: 12px; line-height: 15px; display: inline-block; color: #FFF; background-color: #C00; padding: 1px 1em 0; border-radius: 8px; border: 1px solid #FFF; }
  .check .row { margin-left: 0; margin-right: 0; padding-top: 28px; padding-bottom: 40px; }
  .check .question .question_inner { padding: 25px 10px; }
  .check .question h3 { font-size: 16px; }
  .check .question ul { margin-top: 5px; }
  .check .question ul li { margin-top: 15px; height: 5em; }
  .check .question ul.choice_2_pieces li, .check .question ul.choice_3_pieces li { width: calc( 100% - 1em ); }
  .check .result .result_inner { padding: 25px 20px; }
  .check .result h3 { font-size: 20px; }
  .check .result .result_text { font-size: 16px; }
  .check .result .result_pho { margin-top: 10px; }
  .check .result .result_sub_text { font-size: 14px; margin-top: 7px; } }
@media screen and (min-width: 768px) and (max-width: 991px) { .check .row { padding-bottom: 100px; } }
@media screen and (min-width: 768px), print { .check .ttl-category .badge { position: absolute; right: 20px; bottom: -8px; }
  .check .row { padding-top: 40px; padding-bottom: 60px; }
  .check .question .question_inner { padding: 40px 20px; }
  .check .question h3 { font-size: 20px; }
  .check .question ul { margin-top: 20px; }
  .check .question ul li { margin-top: 20px; height: 6em; }
  .check .question ul.choice_2_pieces li { width: calc( 50% - 1em ); }
  .check .question ul.choice_3_pieces li { width: calc( 33.333% - 1em ); }
  .check .result .result_inner { padding: 30px 35px; }
  .check .result h3 { font-size: 24px; }
  .check .result .result_text { font-size: 18px; }
  .check .result .result_text_box { float: left; width: calc( 66.4173% - 1em ); padding-top: 10px; }
  .check .result .result_pho { float: right; width: 33.5827%; }
  .check .result .result_sub_text { font-size: 16px; margin-top: 10px; } }