@charset "UTF-8";
body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, form, table, tbody, tfoot, thead, tr, th, td, figure {
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }

body {
  background: #0f6eb9;
  font-size: 16px; }
  body.fixed {
    height: 100%;
    min-height: 100vh; }

li {
  list-style: none; }

a {
  color: #0f6eb9; }

.all_container {
  position: relative;
  background: #fff url(../images/common/all_container_bg.png) center top repeat;
  background-size: auto;
  width: 100%;
  overflow: hidden; }
  .all_container.result {
    background: #fff url(../images/result/all_container_bg.png) center top repeat;
    background-size: auto; }
  .all_container.hidden {
    display: none; }
  .all_container img {
    max-width: 100%;
    max-height: 100%; }

@media screen and (min-width: 885px) {
  .lg_none {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .lg_none {
    display: none !important; }
  .lmd_none {
    display: unset !important; } }

.header_container {
  width: 98%;
  max-width: 854px;
  height: 96px;
  margin: 0 auto;
  line-height: 0;
  text-align: center; }
  .header_container::after {
    content: "";
    display: block;
    clear: both; }
  .result .header_container {
    max-width: 1000px; }
  .header_container .table {
    display: table;
    table-layout: fixed;
    float: left;
    max-width: 300px;
    height: 96px; }
    .result .header_container .table {
      max-width: 340px; }
  .header_container .logo1, .header_container .logo2, .header_container .icon {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .header_container .logo1 img, .header_container .logo2 img, .header_container .icon img {
      vertical-align: middle; }
  .header_container .logo1 {
    width: 36%; }
  .header_container .logo2 {
    width: 45.334%; }
  .header_container .icon {
    width: 18.666%;
    padding: 0 3% 0 3.666%; }
  .header_container .logo3 {
    float: right;
    height: 100%;
    padding: 31.5px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .header_container .logo3 a {
      height: 100%; }
  .header_container a {
    display: block;
    -webkit-transition: 0.3s linear 0s, width 0s, padding 0s;
    -o-transition: 0.3s linear 0s, width 0s, padding 0s;
    transition: 0.3s linear 0s, width 0s, padding 0s; }
    .header_container a.hover {
      opacity: 0.7; }

.footer_container {
  background: #0f6eb9;
  height: 50px;
  padding: 20px 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .footer_container .text {
    line-height: 1;
    font-size: 10px;
    color: #fff; }

.sns_container {
  padding: 40px 0 25px;
  line-height: 0;
  text-align: center; }
  .sns_container .title {
    width: 94px;
    margin: 0 auto 10px;
    line-height: 0; }
    .result .sns_container .title {
      width: 146px; }
  .sns_container .list {
    display: inline-block;
    line-height: 0; }
    .sns_container .list::after {
      content: "";
      display: block;
      clear: both; }
    .sns_container .list > li {
      display: block;
      float: left;
      width: 50px;
      margin: 0 15px; }
      .sns_container .list > li a {
        display: block;
        -webkit-transition: 0.3s linear 0s, width 0s, padding 0s;
        -o-transition: 0.3s linear 0s, width 0s, padding 0s;
        transition: 0.3s linear 0s, width 0s, padding 0s; }
        .sns_container .list > li a.hover {
          opacity: 0.7; }

.pagetop_container {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 0;
  text-align: center; }
  .pagetop_container > a {
    display: block;
    width: 5.8%;
    margin: 0 auto;
    padding: 2% 0; }

.modal_container {
  display: none;
  position: static;
  background: #0f6eb9;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: scroll;
  z-index: 500; }
  .modal_container.shown {
    display: block; }
  .modal_container img {
    max-width: 100%;
    max-height: 100%; }

.modal_inner {
  position: absolute;
  background: #0f6eb9;
  width: 100%;
  min-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  padding: 3.513% 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.modal_content {
  display: none;
  width: 100%;
  margin: 0 auto; }
  .modal_content.current {
    display: block; }
  .modal_content[data-target="profile"] {
    max-width: 854px; }
    .modal_content[data-target="profile"] > a {
      height: 34px;
      padding: 0 0 1.171%; }
      .modal_content[data-target="profile"] > a:last-of-type {
        padding: 3.513% 0 0; }
  .modal_content > a {
    display: block;
    line-height: 0;
    text-align: right;
    cursor: pointer; }
    .modal_content > a:last-of-type {
      text-align: center; }
    .modal_content > a.hover {
      opacity: 0.7; }

.profile_container {
  position: relative;
  background: url(../images/common/modal_bg_top_lg.png) center top no-repeat;
  background-size: 100% auto;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .profile_container::before {
    content: "";
    position: absolute;
    background: url(../images/common/modal_bg_bottom_lg.png) center bottom no-repeat, url(../images/common/modal_bg_middle_lg.png) center top repeat-y;
    background-size: 100% auto;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 16.394% auto 0; }

.profile_inner {
  position: relative;
  padding: 14.403% 10.188% 7.846%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .profile_inner .content::after {
    content: "";
    display: block;
    clear: both; }
  .profile_inner .content > figure {
    width: 35.295%;
    line-height: 0; }
    .profile_inner .content > figure.right {
      width: 41.177%; }
  .profile_inner .content > div {
    width: 58.824%; }
    .profile_inner .content > div.left {
      width: 52.942%; }
  .profile_inner .content + .content {
    margin-top: 7.353%; }
  .profile_inner .left {
    float: left; }
  .profile_inner .right {
    float: right; }
  .profile_inner .head {
    background: url(../images/common/profile_line_lg.png) left bottom no-repeat;
    background-size: auto;
    margin: 0 0 6.25%;
    padding: 0 0 3.75%;
    color: #f04650; }
    .profile_inner .head > strong {
      display: block;
      line-height: 1;
      font-size: 1.625em; }
      .profile_inner .head > strong > small {
        font-size: 0.577em; }
    .profile_inner .head > span {
      display: inline-block;
      margin: 0.8em 0 0;
      line-height: 1.334em;
      font-size: 0.938em; }
  .profile_inner .body {
    line-height: 1.85em;
    font-size: 0.813em;
    font-weight: bold;
    text-align: left;
    color: #0f6eb9; }

.desc_container {
  border: 6px solid #0f6eb9;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 4.853% 3.677%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .content + .desc_container {
    margin-top: 7.353%; }
  .desc_container .title {
    width: 35%;
    margin: 0 auto;
    line-height: 0;
    text-align: center;
    -webkit-transform: translate(0, -15px);
    -ms-transform: translate(0, -15px);
    transform: translate(0, -15px); }
  .desc_container .img {
    float: left;
    width: 28.53%;
    line-height: 0; }
  .desc_container .text {
    float: right;
    font-size: 0.938em;
    font-weight: bold;
    text-align: justify;
    color: #0f6eb9; }
  .desc_container .button {
    clear: both; }
    .desc_container .button > a {
      display: block;
      background: #f04650 url(../images/common/desc_button.png) center center no-repeat;
      background-size: 100% auto;
      border: 2px solid #f04650;
      border-radius: 40px;
      width: 35.881%;
      margin: 11.575% auto 0;
      padding: 6.645% 0 0;
      font-size: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .desc_container .button > a.hover {
        background: #fff url(../images/common/desc_button_on.png) center center no-repeat;
        background-size: 100% auto; }

.about_container {
  display: block;
  position: relative;
  max-width: 914px;
  margin: 0 auto; }
  .about_container::before {
    content: "";
    display: block;
    margin: -5% auto 0; }
  .about_container::after {
    content: "";
    display: block;
    clear: both; }
  .about_container .left {
    float: left;
    width: 48%; }
  .about_container .sub {
    position: relative;
    width: 49.228%;
    margin: 0 0 0 27.65%; }
  .about_container .list {
    margin: -12.672% auto 0;
    line-height: 0; }
    .about_container .list::after {
      content: "";
      display: block;
      clear: both; }
    .about_container .list > li {
      display: block;
      position: relative;
      float: left; }
      .about_container .list > li:first-child {
        max-width: 52%; }
        .about_container .list > li:first-child a {
          right: 0; }
      .about_container .list > li:last-child {
        float: right;
        max-width: 47%; }
        .about_container .list > li:last-child a {
          left: 0; }
    .about_container .list a {
      position: absolute;
      background: #0ca8e2 url(../images/index/profile.png) center center no-repeat;
      background-size: 100% auto;
      border: 2px solid #0ca8e2;
      border-radius: 2em;
      width: 6.25em;
      height: 2.25em;
      bottom: 10px;
      text-indent: -9999px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer; }
      .about_container .list a.hover {
        background: #fff url(../images/index/profile_on.png) center center no-repeat;
        background-size: 100% auto; }
  .about_container .right {
    float: right;
    width: 48%; }
  .about_container .bg {
    background: url(../images/index/about_bg_lg.png) center bottom no-repeat;
    background-size: 100% 95%;
    margin: 18.221% auto 0;
    padding: 0 12.712% 12.712% 5.933%;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .about_container .title {
    display: inline-block;
    background: #fff;
    margin: 0 auto 4%;
    padding: 0 0.5em;
    line-height: 1;
    font-size: 1.25em;
    color: #0078be; }
  .about_container .text {
    line-height: 1.85em;
    font-size: 0.813em;
    text-align: justify;
    color: #0078be; }

.explain_container {
  max-width: 700px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.explain_inner {
  background: url(../images/result/desc_container_bg_lg.png) center bottom no-repeat;
  width: 104.286%;
  margin: 5.715% 0 3.572%; }

.explain_content {
  width: 82.466%;
  margin: 0 10.822% 0 auto;
  padding: 0 0 8.22% 0; }
  .explain_content .title {
    width: 39.535%;
    margin: 0 auto 0.665%;
    line-height: 0;
    text-align: center;
    -webkit-transform: translate(0, -15px);
    -ms-transform: translate(0, -15px);
    transform: translate(0, -15px); }
  .explain_content .img {
    float: left;
    width: 28.53%;
    line-height: 0; }
  .explain_content .text {
    float: right;
    font-size: 0.938em;
    font-weight: bold;
    text-align: justify;
    color: #0f6eb9; }
  .explain_content .button {
    padding: 3.987% 0 0;
    clear: both; }
    .explain_content .button > a {
      display: block;
      background: #f04650 url(../images/common/desc_button.png) center center no-repeat;
      background-size: 100% auto;
      border: 2px solid #f04650;
      border-radius: 40px;
      width: 35.881%;
      margin: 0 auto 0;
      padding: 6.645% 0 0;
      font-size: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .explain_content .button > a.hover {
        background: #fff url(../images/common/desc_button_on.png) center center no-repeat;
        background-size: 100% auto; }

.main_container {
  min-height: calc(100vh - 146px); }

.index_container::after {
  content: "";
  position: absolute;
  background: url(../images/index/index_bg_lg.png) center center no-repeat;
  background-size: 100% auto;
  width: 35.068%;
  height: 38.236%;
  right: -9.276%;
  top: 54.412%;
  pointer-events: none; }

.index_container .title {
  line-height: 0; }

.index_container .copy {
  padding: 2.5% 0;
  line-height: 2em;
  font-size: 1em;
  font-weight: bold;
  color: #0f6eb9; }
  .index_container .copy > strong, .index_container .copy > span {
    font-size: 1.56em;
    color: #f04650; }
  .index_container .copy > strong {
    display: inline-block;
    padding: 0 0.05em;
    -webkit-transform: scale(0.9, 1);
    -ms-transform: scale(0.9, 1);
    transform: scale(0.9, 1); }
  .index_container .copy > span {
    margin: 0 -0.3em; }

.index_container .link {
  line-height: 0;
  text-align: center; }
  .index_container .link > a {
    display: inline-block;
    background: #f04650 url(../images/index/start.png) center center no-repeat;
    background-size: 100% auto;
    border: 3px solid #f04650;
    border-radius: 47px;
    width: 39.593%;
    margin: 0 auto;
    padding: 9.955% 0 0;
    font-size: 0;
    text-indent: -9999px;
    color: #fff;
    -webkit-transition: background 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s;
    transition: background 0.3s linear 0s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .index_container .link > a.hover {
      background: #fff url(../images/index/start_on.png) center center no-repeat;
      background-size: 100% auto; }

.index_container .text {
  padding: 3.5% 0;
  line-height: 1.858em;
  font-size: 0.875em;
  font-weight: bold;
  color: #0f6eb9; }

@media screen and (max-width: 854px) {
  .index_container::after {
    width: 32.602%;
    height: 34.341%;
    top: 60.584%; } }

.question_container {
  width: 100vw;
  max-width: 854px;
  margin: 0 auto; }

.question_inner {
  position: relative;
  background: url(../images/question/question_bg_lg.png) right top no-repeat;
  background-size: 100% 100%;
  width: 103.513%;
  margin: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.question_content {
  position: relative;
  width: 95.023%;
  height: 79.626vw;
  max-height: 680px;
  margin: 0 4.186% 0 auto;
  padding: 8.485% 0 4.186% 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

@media screen and (max-width: 884px) {
  .question_inner {
    width: 100%; }
  .index .question_content {
    height: auto;
    max-height: none; } }

.question_head .num {
  display: block;
  background: #0f6eb9;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  margin: 0 auto 2%;
  padding: 17px 0;
  line-height: 1;
  font-style: normal;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .question_head .num > span {
    display: block;
    -webkit-transform: scale(0.9, 1);
    -ms-transform: scale(0.9, 1);
    transform: scale(0.9, 1); }

.question_head .text {
  position: relative;
  width: 100%;
  height: 3em;
  line-height: 1.5em;
  font-size: 24px;
  font-weight: bold;
  color: #0f6eb9; }
  .question_head .text > p {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    white-space: pre; }

.question_reply {
  width: 66.511%;
  margin: 0 auto;
  padding: 4.5% 0 5.6%; }
  .question_reply::after {
    content: "";
    display: block;
    clear: both; }
  .question_reply > li {
    display: block;
    float: left;
    width: 32.043%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .question_reply > li > a {
      display: block;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% auto;
      border: 3px solid;
      border-radius: 50px;
      padding: 34.066% 0 0;
      line-height: 0;
      text-indent: -9999px;
      color: transparent;
      -webkit-transition: 0.3s linear 0s, width 0s, padding 0s;
      -o-transition: 0.3s linear 0s, width 0s, padding 0s;
      transition: 0.3s linear 0s, width 0s, padding 0s;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .question_reply > li > a.hover {
        background-color: transparent !important; }
    .question_reply > li + li {
      margin-left: 1.936%; }
  .question_reply .item1 {
    background-color: #f04650;
    background-image: url(../images/question/question_reply1.png); }
    .question_reply .item1.hover {
      background-image: url(../images/question/question_reply1_on.png);
      color: #f04650; }
  .question_reply .item2 {
    background-color: #0ca8e2;
    background-image: url(../images/question/question_reply2.png); }
    .question_reply .item2.hover {
      background-image: url(../images/question/question_reply2_on.png);
      color: #0ca8e2; }
  .question_reply .item3 {
    background-color: #0f6eb9;
    background-image: url(../images/question/question_reply3.png); }
    .question_reply .item3.hover {
      background-image: url(../images/question/question_reply3_on.png);
      color: #0f6eb9; }

.question_progress {
  background: url(../images/question/line_lg.png) center bottom no-repeat;
  background-size: 100% auto;
  width: 64.403%;
  margin: 0 auto;
  color: #0f6eb9;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .question_progress .bar {
    position: relative;
    border: 2px solid;
    border-radius: 12px;
    margin: 0 auto 4%;
    padding: 1.455% 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .question_progress .bar::before {
      content: "";
      position: absolute;
      background: #0f6eb9;
      width: 0;
      left: 0;
      top: 0;
      bottom: 0;
      margin: 0;
      -webkit-transition: width 0.3s ease 0s;
      -o-transition: width 0.3s ease 0s;
      transition: width 0.3s ease 0s;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    .question_progress .bar.q1::before {
      width: 0%; }
    .question_progress .bar.q2::before {
      width: 5%; }
    .question_progress .bar.q3::before {
      width: 10%; }
    .question_progress .bar.q4::before {
      width: 15%; }
    .question_progress .bar.q5::before {
      width: 20%; }
    .question_progress .bar.q6::before {
      width: 25%; }
    .question_progress .bar.q7::before {
      width: 30%; }
    .question_progress .bar.q8::before {
      width: 35%; }
    .question_progress .bar.q9::before {
      width: 40%; }
    .question_progress .bar.q10::before {
      width: 45%; }
    .question_progress .bar.q11::before {
      width: 50%; }
    .question_progress .bar.q12::before {
      width: 55%; }
    .question_progress .bar.q13::before {
      width: 60%; }
    .question_progress .bar.q14::before {
      width: 65%; }
    .question_progress .bar.q15::before {
      width: 70%; }
    .question_progress .bar.q16::before {
      width: 75%; }
    .question_progress .bar.q17::before {
      width: 80%; }
    .question_progress .bar.q18::before {
      width: 85%; }
    .question_progress .bar.q19::before {
      width: 90%; }
    .question_progress .bar.q20::before {
      width: 95%; }
  .question_progress .text {
    padding: 0 0 10%;
    line-height: 1;
    font-size: 16px; }

.question_button {
  width: 64.403%;
  margin: 5% auto 0; }
  .question_button::after {
    content: "";
    display: block;
    clear: both; }
  .question_button > li {
    width: 49.091%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .question_button > li > a {
      display: block;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% auto;
      padding: 18.519% 0 0;
      line-height: 0;
      text-indent: -9999px;
      -webkit-transition: 0.3s linear 0s, width 0s, padding 0s;
      -o-transition: 0.3s linear 0s, width 0s, padding 0s;
      transition: 0.3s linear 0s, width 0s, padding 0s;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    .question_button > li:nth-child(1) {
      float: left; }
    .question_button > li:nth-child(2) {
      float: right; }
  .question_button .item1 {
    background-image: url(../images/question/question_button1.png); }
    .question_button .item1.hover {
      background-image: url(../images/question/question_button1_on.png); }
  .question_button .item2 {
    background-image: url(../images/question/question_button2.png); }
    .question_button .item2.hover {
      background-image: url(../images/question/question_button2_on.png); }

.result_container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto; }

.result_inner {
  position: relative;
  background: url(../images/result/result_bg_top_lg.png) center top no-repeat, url(../images/result/result_bg_bottom_lg.png) center bottom no-repeat;
  background-size: 100% auto;
  width: 103%;
  margin: 0; }
  .result_inner::before {
    content: "";
    position: absolute;
    background: url(../images/result/result_bg_middle_lg.png) center top repeat-y;
    background-size: 100% auto;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 13.787% auto 15.146%; }

.result_content {
  position: relative;
  width: 94.175%;
  min-height: 680px;
  margin: 0 4.369% 0 auto;
  padding: 5.155% 0 3.815% 0; }

@media screen and (max-width: 1060px) {
  .result_inner {
    width: 100%; }
    .result_inner::before {
      margin: 13.397% auto 14.717%; } }

.first_container {
  width: 98%;
  max-width: 840px;
  margin: 0 auto; }
  .first_container .head {
    background: url(../images/result/result_line1.png) left bottom repeat-x;
    background-size: auto 4px;
    padding: 0 0 4.762%; }
    .first_container .head::after {
      content: "";
      display: block;
      clear: both; }
    .first_container .head .left {
      position: relative;
      float: left;
      width: 55.953%;
      padding: 5.358% 0 0; }
    .first_container .head .right {
      float: right;
      margin: 0 0 0 -10%;
      line-height: 0;
      text-align: right; }
      .first_container .head .right + .left {
        padding: 0 0 8.334%; }
      .result01 .first_container .head .right {
        width: 38.096%; }
      .result02 .first_container .head .right {
        width: 50%;
        margin-right: -5.952%;
        padding-top: 4%; }
      .result03 .first_container .head .right {
        width: 47.62%;
        margin-right: -5.952%;
        padding-top: 14%; }
      .result04 .first_container .head .right {
        width: 47.143%;
        margin-right: -3.095%;
        padding-top: 4%; }
      .result05 .first_container .head .right {
        width: 45.239%;
        margin-right: -2.38%;
        padding-top: 5%; }
      .result06 .first_container .head .right {
        width: 45.239%;
        margin-right: -3.571%;
        padding-top: 6%; }
      .result07 .first_container .head .right {
        width: 44.048%;
        margin-right: -1.19%;
        padding-top: 6%; }
      .result08 .first_container .head .right {
        width: 42.858%;
        margin-right: -1.19%; }
      .result09 .first_container .head .right {
        width: 47.62%;
        margin-right: -5.952%; }
    .first_container .head .bal {
      width: 58.724%;
      line-height: 0; }
    .first_container .head .sub {
      margin: 0.5em 0 0;
      font-size: 1.125em;
      font-weight: bold;
      color: #0f6eb9; }
    .first_container .head .title {
      line-height: 1.143em;
      font-size: 2.625em;
      color: #f04650; }
  .first_container .text {
    margin: 1em 0 0;
    line-height: 1.858em;
    font-size: 0.875em;
    text-align: justify; }
    .first_container .text .thin {
      margin: 0 -0.5em; }
  .first_container .sns {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 0; }
    .first_container .sns::after {
      content: "";
      display: block;
      clear: both; }
    .first_container .sns > li {
      display: inline-block;
      width: 6.383%;
      margin: 0 0 0 3.192%;
      line-height: 0;
      vertical-align: middle; }
      .first_container .sns > li:first-child {
        width: 7.873%;
        margin: 0; }
      .first_container .sns > li > a {
        -webkit-transition: opacity 0.2s linear 0s;
        -o-transition: opacity 0.2s linear 0s;
        transition: opacity 0.2s linear 0s; }
        .first_container .sns > li > a.hover {
          opacity: 0.7; }
  .first_container .row {
    position: relative;
    margin: 7.143% 0 9.524%;
    padding: 0 0 0.5em; }
    .first_container .row::before {
      content: "";
      position: absolute;
      background: url(../images/result/result_line2.png) top center repeat-y;
      background-size: 100% auto;
      width: 4px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 0 auto; }
    .first_container .row::after {
      content: "";
      display: block;
      clear: both; }
    .first_container .row .left {
      float: left;
      width: 42.858%; }
    .first_container .row .right {
      float: right;
      width: 42.858%; }
    .first_container .row .bal {
      width: 63.889%;
      line-height: 0; }
    .first_container .row .title {
      margin: 0.3em 0 0;
      font-size: 1.875em;
      color: #0f6eb9; }
    .first_container .row .sub {
      margin: 0.45em 0 0;
      line-height: 1.5em;
      font-size: 1.25em;
      font-weight: bold;
      color: #0f6eb9; }
      .first_container .row .sub .thin {
        margin: 0 -0.5em; }

@media screen and (max-width: 884px) {
  .first_container .head .left {
    margin-left: 2%; }
  .first_container .row .left {
    margin-left: 2%; }
  .first_container .row .right {
    margin-right: 2%; } }

@media screen and (max-width: 970px) {
  .first_container {
    width: 98%;
    max-width: 840px;
    margin: 0 auto; }
    .first_container .head {
      position: relative; }
      .first_container .head .left {
        float: none;
        width: 50%; }
      .first_container .head .right {
        position: absolute;
        width: 50%;
        right: 0;
        top: 50%;
        margin-right: 0 !important;
        padding-top: 0 !important;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%); } }

.advice_container {
  background: #0f6eb9;
  padding: 10.12% 0 8.929%;
  text-align: center; }
  .advice_container .title {
    line-height: 0; }
  .advice_container .profile {
    position: relative;
    width: 50.31%;
    margin: -0.515% auto 0;
    line-height: 0; }
    .advice_container .profile::before {
      content: "";
      display: block;
      background: url(../images/result/link_profile_bg.png) center bottom no-repeat;
      background-size: 100% auto;
      margin: 0 auto;
      padding: 32.787% 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    .advice_container .profile > li:first-child > a {
      left: 0; }
    .advice_container .profile > li:last-child > a {
      right: 0; }
    .advice_container .profile > li > a {
      position: absolute;
      background: #c8e9fa url(../images/result/profile.png) center center no-repeat;
      background-size: 100% auto;
      border: 2px solid #c8e9fa;
      border-radius: 36px;
      width: 20.492%;
      bottom: 0;
      margin: 0 0 8.197%;
      padding: 7.378% 0 0;
      font-size: 0;
      -webkit-transition: 0.2s linear 0s, width 0s, padding 0s;
      -o-transition: 0.2s linear 0s, width 0s, padding 0s;
      transition: 0.2s linear 0s, width 0s, padding 0s;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer; }
      .advice_container .profile > li > a.hover {
        background: #0f6eb9 url(../images/result/profile_on.png) center center no-repeat;
        background-size: 100% auto; }
  .advice_container .comment {
    width: 86.598%;
    margin: 0 auto; }
    .advice_container .comment > li {
      display: block;
      position: relative;
      margin: 0 auto 2.062%; }
      .advice_container .comment > li::after {
        content: "";
        display: block;
        clear: both; }
      .advice_container .comment > li:last-child {
        margin-bottom: 0; }
      .advice_container .comment > li:nth-child(odd) figure {
        left: -1.19%; }
      .advice_container .comment > li:nth-child(odd) p::before {
        border-right: 1.072em solid #fff;
        left: 0;
        -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        transform: translate(-100%, 0); }
      .advice_container .comment > li:nth-child(even) figure {
        right: -1.19%; }
      .advice_container .comment > li:nth-child(even) p::before {
        border-left: 1.072em solid #fff;
        right: 0;
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        transform: translate(100%, 0); }
    .advice_container .comment figure {
      position: absolute;
      width: 10.715%;
      top: 50%;
      line-height: 0;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%); }
    .advice_container .comment p {
      position: relative;
      background: #fff;
      border-radius: 6px;
      width: 72.62%;
      margin: 0 auto;
      padding: 3.572% 5%;
      line-height: 1.858em;
      font-size: 0.875em;
      text-align: justify;
      -webkit-box-shadow: 0 3px 0 rgba(50, 58, 155, 0.3);
      box-shadow: 0 3px 0 rgba(50, 58, 155, 0.3);
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .advice_container .comment p::before {
        content: "";
        position: absolute;
        border-top: 0.5em solid transparent;
        border-bottom: 0.5em solid transparent;
        width: 0;
        height: 0;
        top: 0;
        bottom: 0;
        margin: auto 0; }

.latter_container {
  width: 98%;
  max-width: 840px;
  margin: 0 auto;
  padding: 6.186% 0 2.062%;
  text-align: center; }
  .latter_container .example {
    position: relative;
    padding: 0 0 5.953%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .latter_container .example::before {
      content: "";
      position: absolute;
      background: url(../images/result/example_bg.png) center center no-repeat;
      background-size: contain;
      width: 22%;
      left: -5%;
      top: 0;
      margin: -3% 0 0;
      padding: 17% 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      pointer-events: none; }
    .latter_container .example::after {
      content: "";
      position: absolute;
      background: url(../images/result/result_line1.png) right bottom repeat-x;
      background-size: auto 4px;
      height: 4px;
      left: 0;
      right: 14%;
      bottom: 0; }
      .result03 .latter_container .example::after {
        right: 10%; }
      .result07 .latter_container .example::after {
        right: 7.62%; }
    .latter_container .example .bal {
      width: 27.381%; }
  .latter_container .objective {
    position: relative;
    background: url(../images/result/result_line1.png) right bottom repeat-x;
    background-size: auto 4px;
    padding: 5.953% 0 5.953%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .latter_container .objective::before {
      content: "";
      position: absolute;
      background: url(../images/result/objective_bg.png) right center no-repeat;
      background-size: contain;
      width: 16%;
      right: -3%;
      top: 0;
      margin: -13% 0 0;
      padding: 24% 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      pointer-events: none; }
      .result03 .latter_container .objective::before {
        width: 15.477%;
        right: -5.952%; }
      .result07 .latter_container .objective::before {
        width: 13.096%;
        right: -5.952%;
        margin-top: -9.523%; }
    .latter_container .objective .bal {
      width: 32.143%; }
  .latter_container .phrase {
    background: url(../images/result/result_line1.png) right bottom repeat-x;
    background-size: auto 4px;
    padding: 5.953% 0 5.953%; }
    .latter_container .phrase .bal {
      width: 32.62%; }
  .latter_container .case {
    padding: 5.953% 0 0; }
    .latter_container .case .bal {
      width: 32.62%; }
    .latter_container .case .sub {
      line-height: 1.6em;
      text-align: center; }
      .latter_container .case .sub > strong {
        display: block;
        line-height: 1.3em;
        font-size: 1.286em;
        color: #0f6eb9; }
    .latter_container .case .list > li.vertical .img {
      float: none;
      margin: 0 auto;
      padding: 15px 0; }
    .latter_container .case .list > li.vertical .cap {
      float: none;
      width: 100%;
      margin: 0 auto;
      padding: 0 0 15px; }
    .latter_container .case .img {
      float: left;
      line-height: 0;
      padding: 1.2em 0; }
    .latter_container .case .cap {
      float: right;
      padding: 1em 0 1em 15px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
    .latter_container .case .link {
      display: block;
      background: url(../images/result/desc_blank.png) center center no-repeat;
      background-size: 100% auto;
      width: 64.032%;
      margin: 0 auto;
      padding: 14.23% 0 0;
      font-size: 0;
      -webkit-transition: 0.2s linear 0s, width 0s, padding 0s;
      -o-transition: 0.2s linear 0s, width 0s, padding 0s;
      transition: 0.2s linear 0s, width 0s, padding 0s;
      clear: both;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .latter_container .case .link.hover {
        background: url(../images/result/desc_blank_on.png) center center no-repeat;
        background-size: 100% auto; }
  .latter_container .bal {
    margin: 0 auto 0.75em;
    line-height: 0; }
  .latter_container .title {
    line-height: 1.584em;
    font-size: 1.5em;
    color: #0f6eb9; }
  .latter_container .text {
    margin: 1em 0 0;
    line-height: 2em;
    font-size: 0.875em; }
  .latter_container .list {
    display: table;
    width: 100%;
    text-align: justify; }
    .latter_container .list > li {
      display: table-cell;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .latter_container .list > li:nth-child(1) {
        width: 31.905%;
        padding: 0 3.334% 0 0; }
      .latter_container .list > li:nth-child(2) {
        background: url(../images/result/result_line3.png) left top repeat-y;
        background-size: 4px auto;
        width: 35.714%;
        padding: 0 3.334% 0 3.81%; }
      .latter_container .list > li:nth-child(3) {
        background: url(../images/result/result_line3.png) left top repeat-y;
        background-size: 4px auto;
        width: 32.381%;
        padding: 0 0 0 3.81%; }
      .latter_container .list > li .img {
        width: 39.167%; }
      .latter_container .list > li .cap {
        width: 60.833%; }
      .latter_container .list > li.vertical .img {
        width: 62.5%; }
      .latter_container .list > li:empty {
        background: none; }
      .latter_container .list > li p {
        line-height: 1.858em;
        font-size: 0.875em;
        text-align: justify; }
        .latter_container .list > li p > span {
          display: block;
          margin: 0 0 0 -0.5em;
          color: #0f6eb9; }

@media screen and (max-width: 884px) {
  .latter_container .example, .latter_container .objective, .latter_container .case {
    padding-left: 2%;
    padding-right: 2%; } }

.back_container {
  padding: 1.547% 0 8.248%;
  line-height: 0;
  text-align: center; }
  .back_container > a {
    display: block;
    background: url(../images/result/back.png) center center no-repeat;
    background-size: 100% auto;
    width: 27.836%;
    margin: 0 auto;
    padding: 5.155% 0 0;
    font-size: 0;
    -webkit-transition: 0.2s linear 0s, width 0s, padding 0s;
    -o-transition: 0.2s linear 0s, width 0s, padding 0s;
    transition: 0.2s linear 0s, width 0s, padding 0s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .back_container > a.hover {
      background: url(../images/result/back_on.png) center center no-repeat;
      background-size: 100% auto; }

#floatingCirclesG {
  position: absolute;
  background: #fff;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 5.155% 0 4.186% 0; }
  .result_content #floatingCirclesG {
    margin: 5.155% 0 3.815% 0; }

.f_circleG_range {
  position: absolute;
  width: 11.2vw;
  max-width: 112px;
  height: 11.2vw;
  max-height: 112px;
  left: 0;
  right: 0;
  top: 0;
  margin: 28.75% auto 0; }
  .result_content .f_circleG_range {
    margin-top: 24.897%; }

.f_circleG {
  position: absolute;
  background: #0f6eb9;
  border-radius: 10px;
  height: 24.108%;
  width: 8.929%;
  opacity: 0;
  -webkit-animation: f_fadeG 1.2s infinite;
  animation: f_fadeG 1.2s infinite; }
  .f_circleG.item1 {
    left: 7.143%;
    top: 37.5%;
    opacity: 1;
    -webkit-transform: rotateZ(90deg);
    -ms-transform: rotate(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-delay: 0s;
    animation-delay: 0s; }
  .f_circleG.item2 {
    left: 12.5%;
    top: 18.75%;
    -webkit-transform: rotateZ(120deg);
    -ms-transform: rotate(120deg);
    transform: rotateZ(120deg);
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
  .f_circleG.item3 {
    left: 25.893%;
    top: 4.465%;
    -webkit-transform: rotateZ(150deg);
    -ms-transform: rotate(150deg);
    transform: rotateZ(150deg);
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
  .f_circleG.item4 {
    right: 45.536%;
    top: 0;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
  .f_circleG.item5 {
    right: 25.893%;
    top: 4.465%;
    -webkit-transform: rotateZ(210deg);
    -ms-transform: rotate(210deg);
    transform: rotateZ(210deg);
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; }
  .f_circleG.item6 {
    right: 12.5%;
    top: 18.75%;
    -webkit-transform: rotateZ(240deg);
    -ms-transform: rotate(240deg);
    transform: rotateZ(240deg);
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
  .f_circleG.item7 {
    right: 7.143%;
    bottom: 37.5%;
    -webkit-transform: rotateZ(270deg);
    -ms-transform: rotate(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s; }
  .f_circleG.item8 {
    right: 12.5%;
    bottom: 18.75%;
    -webkit-transform: rotateZ(300deg);
    -ms-transform: rotate(300deg);
    transform: rotateZ(300deg);
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s; }
  .f_circleG.item9 {
    right: 25.893%;
    bottom: 4.465%;
    -webkit-transform: rotateZ(330deg);
    -ms-transform: rotate(330deg);
    transform: rotateZ(330deg);
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s; }
  .f_circleG.item10 {
    right: 45.536%;
    bottom: 0;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s; }
  .f_circleG.item11 {
    left: 25.893%;
    bottom: 4.465%;
    -webkit-transform: rotateZ(30deg);
    -ms-transform: rotate(30deg);
    transform: rotateZ(30deg);
    -webkit-animation-delay: 1s;
    animation-delay: 1s; }
  .f_circleG.item12 {
    left: 12.5%;
    bottom: 18.75%;
    -webkit-transform: rotateZ(60deg);
    -ms-transform: rotate(60deg);
    transform: rotateZ(60deg);
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s; }

@keyframes f_fadeG {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes f_fadeG {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

#loading_text {
  color: #0f6eb9;
  font-weight: bold;
  font-size: 1.4em;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  position: relative;
  top: 16.5em;
  text-align: center; }