/* =======================================
	moral-check.css
========================================== */
  /* header
--------------------------------------------------------- */
  header {
      position: relative;
      max-width: 1366px;
      margin: 10px auto 0;
  }
  h1 {
      max-width: 794px;
      font-size: 6.933vw;
  }
  h1::before {
      height: 6.933vw;
      width: 8.533vw;
      margin-left: 2.666vw;
      background: url("../images/moral-check/icon.png");
      background-size: cover;
  }
  h1::after {
      height: 6.933vw;
      width: 8.533vw;
      margin-right: 2.666vw;
      background: url("../images/moral-check/icon.png");
      background-size: cover;
  }
  @media only screen and (min-width: 720px) {
      h1::before, h1::after {
          height: 50px;
          width: 61px;
      }
  }
  @media only screen and (min-width: 768px) {
      h1 {
          font-size: 56px;
      }
  }
  @media only screen and (min-width: 1120px) {
      h1::before {
          margin-left: 30px;
      }
      h1::after {
          margin-right: 30px;
      }
  }
  /* main
--------------------------------------------------------- */
  /* -------------------------------------
	btn
------------------------------------- */
  button[type=button].btn {
      padding: .421em .973em;
      color: #fff;
      background: #3395e8;
      border-radius: 5px;
  }
  .btn-start {
      font-family: "M PLUS Rounded 1c";
      font-size: 10.133vw;
      font-weight: 500;
      letter-spacing: .05em;
  }
  @media only screen and (min-width: 554px) {
      .btn-start {
          font-size: 56px;
      }
  }
  /* -------------------------------------
	start
------------------------------------- */
  .start {
      margin-top: 17.6vw;
      text-align: center;
  }
  @media only screen and (min-width: 768px) {
      .start {
          margin-top: 230px;
      }
  }
  /* -------------------------------------
	end
------------------------------------- */
  .end {
      font-family: "M PLUS Rounded 1c";
      margin-top: 10.133vw;
      text-align: center;
  }
  .end p {
      margin-bottom: 9.066vw;
      font-size: 9.6vw;
      color: #ed143d;
      font-weight: 500;
      letter-spacing: .05em;
  }
  .end ul {
      max-width: 566px;
      width: 86.133vw;
      margin: 0 auto;
  }
  .end li:not(:first-child) {
      margin-top: 6.666vw;
  }
  button[type=button].btn-end {
      width: 100%;
      padding: .666em .973em;
      font-size: 6vw;
      font-weight: 400;
      letter-spacing: .05em;
  }
  @media only screen and (min-width: 584px) {
      .end p {
          font-size: 5.6rem;
      }
      button[type=button].btn-end {
          font-size: 3.6rem;
      }
      .end li:not(:first-child) {
          margin-top: 38px;
      }
  }
  @media only screen and (min-width: 768px) {
      .end {
          margin-top: 83px;
      }
  }
  @media only screen and (min-width: 1120px) {
      .end p {
          margin-bottom: 106px;
      }
  }
  /* -------------------------------------
	faq
------------------------------------- */
  .faq {
      position: relative;
      max-width: 1275px;
      padding-bottom: 60px;
      margin: 30px auto 0;
      text-align: center;
  }
  .faq h2 {
      display: inline-block;
      position: relative;
      padding: 0 .266em;
      margin-bottom: 1.533em;
      font-family: "M PLUS Rounded 1c";
      font-size: 8vw;
      font-weight: 500;
  }
  .faq h2::after {
      content: '';
      position: absolute;
      bottom: -.333em;
      left: 0;
      height: .133em;
      width: 100%;
      background: #f78408;
      border-radius: .066em;
  }
  .faq dl {
      text-align: left;
  }
  .faq-box dl {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      font-size: 4.266vw;
  }
  .faq-box dt {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 18.133vw;
      width: 18.133vw;
      margin-bottom: 7.2vw;
      color: #fff;
      background: #fff;
      border-radius: 50%;
  }
  .faq-box dt::after {
      content: '';
      position: absolute;
      top: 75%;
      right: 4px;
      height: 0;
      width: 0;
      border-style: solid;
      border-width: 5px 0 5px 8px;
      border-color: transparent transparent transparent #fff;
      transform: rotate(45deg);
  }
  .faq-box .question span {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      position: absolute;
      top: .5335vw;
      left: .5335vw;
      z-index: 1;
      height: 17.066vw;
      width: 17.066vw;
      padding: .8em 0 0 .5em;
      background: #0ea8db;
      border-radius: 50%;
      letter-spacing: .5em;
  }
  .faq-box .question span::before {
      content: '';
      position: absolute;
      top: 2.133vw;
      left: 50%;
      height: 4.266vw;
      width: 4vw;
      margin-left: -2vw;
      background: url("../images/moral-check/icon_question.png");
      background-size: cover;
  }
  .faq-box .question span::after {
      content: '';
      position: absolute;
      top: 75%;
      right: 4px;
      z-index: 1;
      height: 0;
      width: 0;
      border-style: solid;
      border-width: 5px 0 5px 8px;
      border-color: transparent transparent transparent #0ea8db;
      transform: rotate(45deg);
  }
  .faq-box .answer span {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: .5335vw;
      left: .5335vw;
      z-index: 1;
      height: 17.066vw;
      width: 17.066vw;
      padding: .8em 0 0 .5em;
      background: #e06a9f;
      border-radius: 50%;
      letter-spacing: .5em;
  }
  .faq-box .answer span::before {
      content: '';
      position: absolute;
      top: 2.133vw;
      left: 50%;
      height: 4vw;
      width: 4vw;
      margin-left: -2vw;
      background: url("../images/moral-check/icon_answer.png");
      background-size: cover;
  }
  .faq-box .answer span::after {
      content: '';
      position: absolute;
      top: 75%;
      right: 4px;
      z-index: 1;
      height: 0;
      width: 0;
      border-style: solid;
      border-width: 5px 0 5px 8px;
      border-color: transparent transparent transparent #e06a9f;
      transform: rotate(45deg);
  }
  .faq-box dd {
      width: calc(100% - 20.533vw);
      margin: 0 0 7.2vw 2.4vw;
  }
  .faq-box .txt-question {
      padding: .8875em 1.8em;
      background: #fff;
      border-radius: 10px;
  }
  .faq-box p {
      line-height: 1.625;
  }
  .faq-box dd li:not(:first-child) {
      margin-top: 2.933vw;
  }
  .faq-box dd input {
      display: none;
  }
  .radio + label, .checkbox + label {
      display: block;
      position: relative;
      width: 100%;
      padding: .8em .9375em .8em 50px;
      background: #fff;
      border: 2px solid #e1e1e1;
      border-radius: 5px;
      transition: .3s;
      line-height: 1.2;
  }
  .radio + label::before, .checkbox + label::before {
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      left: 14px;
      height: 15px;
      width: 15px;
      margin: -13px 0 0;
      background: #f1f4f7;
      border: 5px solid #f1f4f7;
      border-radius: 50%;
  }
  .radio:checked + label, .checkbox:checked + label {
      border-color: #e06a9f;
  }
  .radio:checked + label::before, .checkbox:checked + label::before {
      border: 5px solid #e06a9f;
  }
  .radio:checked + label::after, .checkbox:checked + label::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 24px;
      z-index: 1;
      margin: -3px 0 0;
      height: 5px;
      width: 5px;
      background: #e06a9f;
      border-radius: 50%;
  }
  .btn-faq {
      display: inline-flex;
      justify-content: center;
      max-width: 246px;
      width: 58.933vw;
      padding-left: 1.33em !important;
      font-size: 7.466vw;
      font-weight: 700;
      letter-spacing: .357em;
  }
  .btn-faq_next {
      display: inline-flex;
      justify-content: center;
      max-width: 246px;
      width: 58.933vw;
      padding-left: 1.023em !important;
      font-size: 7.466vw;
      font-weight: 700;
      letter-spacing: .05em;
  }
  .correct-answer {
      padding-top: 102px;
      margin-bottom: 30px;
      background: url("../images/moral-check/arrow.png") no-repeat 50% 0;
  }
  .correct-answer dl {
      padding: 5.333vw 4.266vw;
      background: #fff;
      border-radius: 10px;
  }
  .correct-answer dt {
      margin-bottom: 4vw;
      font-size: 2.2rem;
  }
  .correct-answer p {
      font-size: 4.266vw;
      line-height: 1.625;
  }
  .correctness {
      position: absolute;
      top: 21vw;
      left: 50%;
      overflow: hidden;
      z-index: 999;
      max-height: 311px;
      height: 82.933vw;
      max-width: 311px;
      width: 82.933vw;
      margin-left: -41.466vw;
  }
  .correct {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border: 8.533vw solid rgba(224, 47, 72, .7);
      border-radius: 50%;
  }
  .incorrect {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
  }
  .incorrect::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 8.533vw;
      width: 100%;
      background: rgba(224, 47, 72, .7);
      border-radius: 4.2665vw;
      transform: translateY(37.333vw) rotate(45deg);
  }
  .incorrect::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 8.533vw;
      width: 100%;
      background: rgba(224, 47, 72, .7);
      border-radius: 4.2665vw;
      transform: translateY(37.333vw) rotate(-45deg);
  }
  .btnNext , .btnFin , .correct-answer , .correctTxt , .incorrectTxt {
      display:none;
  }
  @media only screen and (min-width: 375px) {
      .correctness {
          margin-left: -15.55em;
      }
      .correct {
          border-width: 32px;
      }
      .incorrect::before {
          height: 32px;
          transform: translateY(140px) rotate(45deg);
      }
      .incorrect::after {
          height: 32px;
          transform: translateY(140px) rotate(-45deg);
      }
  }
  @media only screen and (min-width: 472px) {
      .faq-box dt, .faq-box dd {
          margin-bottom: 34px;
      }
  }
  @media only screen and (min-width: 490px) {
      .btn-faq, .btn-faq_next {
          font-size: 3.6rem;
      }
  }
  @media only screen and (min-width: 525px) {
      .faq-box dl {
          font-size: 2.2rem;
      }
      .correct-answer p {
          font-size: 2.2rem;
          line-height: 1.818;
      }
  }
  @media only screen and (min-width: 550px) {
      .faq h2 {
          font-size: 4.4rem;
      }
      .radio + label, .checkbox + label {
          padding: .8em .8em .8em 60px;
      }
      .radio + label::before, .checkbox + label::before {
          height: 27px;
          width: 27px;
          margin-top: -19px;
      }
      .radio:checked + label::after, .checkbox:checked + label::after {
          height: 17px;
          width: 17px;
          margin: -9px 0 0;
      }
      .correctness {
          top: 115px;
      }
  }
  @media only screen and (min-width: 614px) {
      .faq-box dd li:not(:first-child) {
          margin-top: 18px;
      }
  }
  @media only screen and (min-width: 690px) {
      .faq-box dt {
          height: 125px;
          width: 125px;
      }
      .faq-box .question span {
          top: 2px;
          left: 2px;
          height: 121px;
          width: 121px;
      }
      .faq-box .question span::before {
          top: .8em;
          height: 28px;
          width: 26px;
          margin-left: -13px;
      }
      .faq-box .answer span {
          top: 2px;
          left: 2px;
          height: 121px;
          width: 121px;
      }
      .faq-box .answer span::before {
          top: .8em;
          height: 28px;
          width: 28px;
          margin-left: -14px;
      }
  }
  @media only screen and (min-width: 750px) {
      .faq-box dd {
          width: calc(100% - 143px);
          margin-left: 18px;
      }
      .correct-answer dt {
          margin-bottom: 30px;
      }
  }
  @media only screen and (min-width: 768px) {
      .tit-faq {
          position: absolute;
          top: -38px;
          right: 8px;
          height: 60px;
          width: 355px;
          font-size: 2.427rem;
      }
      .tit-faq::before {
          height: 28px;
          width: 35px;
          margin-left: 8px;
      }
      .tit-faq::after {
          height: 28px;
          width: 35px;
          margin-right: 8px;
      }
      .faq {
          margin-top: 38px;
      }
      .faq-box p {
          line-height: 1.818;
      }
      .spot {
          text-align: left;
      }
      .radio + label, .checkbox + label {
          padding-left: 110px;
      }
      .radio + label::before, .checkbox + label::before {
          left: 40px;
      }
      .radio:checked + label::after, .checkbox:checked + label::after {
          left: 50px;
      }
  }
  @media only screen and (min-width: 891px) {
      .correct-answer dl {
          padding: 47px 38px;
      }
  }
  @media only screen and (min-width: 1025px) {
      .correct-answer {
          margin-left: 143px;
      }
  }