@charset "UTF-8";

/* =============================================
* ベスト診断
* ============================================= */
.simulator {
   position: relative;
}

.simulator [class*="screen-"] {
   display: none;
   width: 100%;
   min-height: calc(100vh - 57px);
   box-sizing: border-box;
   padding: 45px 0 165px;
}

.simulator .box {
   max-width: 715px;
   margin: 0 auto;
   position: relative;
}

.simulator .process,
.simulator .loading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   margin-top: 5px;
}

.simulator .process-bar,
.simulator .loading-bar {
   width: 655px;
   height: 20px;
   border-radius: 30px;
   background-color: #c6c3c3;
   overflow: hidden;
}

.simulator .process-active,
.simulator .loading-active {
   display: block;
   height: 100%;
   background-color: #246bac;
   transition: width 0.5s ease;
}

.simulator .process-percent,
.simulator .loading-percent {
   font-weight: 700;
   font-size: 20px;
   line-height: 26px;
}

.simulator .form-step .in {
   background-image: linear-gradient(to bottom, #e1e6e9, #d1e9f5);
   box-shadow: 0 0 11px rgba(0, 0, 0, 0.15);
   border-radius: 24px;
   margin-top: 40px;
   padding: 45px 45px 30px;
}

.simulator h2 {
   font-weight: 700;
   font-size: 38px;
   letter-spacing: 0.15em;
   line-height: 60px;
   padding: 120px 0 100px;
}

.simulator h2 span {
   font-size: 60px;
}

.simulator h3 {
   font-weight: 700;
   font-size: 30px;
   letter-spacing: 0.15em;
   line-height: 42px;
   text-align: center;
}

.simulator h3 span {
   display: block;
   color: #737276;
   font-size: 18px;
}

.simulator .step-nav {
   padding-top: 50px;
}

.simulator .step-close {
   color: inherit;
   background: transparent;
   border: 0;
   font-weight: 700;
   font-size: 28px;
   line-height: 1;
   letter-spacing: 0;
   position: absolute;
   top: 0;
   right: 3px;
   cursor: pointer;
}

.simulator .btn-prev {
   color: inherit;
   background: transparent;
   border: 0;
   font-weight: 700;
   font-size: 18px;
   letter-spacing: 0.15em;
   line-height: 26px;
   cursor: pointer;
   margin-left: 15px;
}

.simulator .btn-next {
   display: block;
   width: 254px;
   height: 46px;
   background-color: #246bac;
   color: #fff;
   border: 0;
   font-weight: 900;
   font-size: 24px;
   line-height: 1;
   letter-spacing: 0.12em;
   border-radius: 50px;
   position: relative;
   margin: 0 auto;
   transition: all 0.3s;
   cursor: pointer;
}

.simulator .btn-next:after {
   content: '';
   border-width: 8px 0 8px 14px;
   border-color: transparent transparent transparent #246bac;
   border-style: solid;
   position: absolute;
   top: calc(50% - 8px);
   right: 15px;
}

.simulator .btn-next:hover {
   opacity: 0.7;
}

.simulator .form-step:not([data-step="0"], .mailform) h3 {
   color: #246bac;
}

.simulator .form-step:not([data-step="0"], .mailform) .input {
   padding-top: 45px;
}

.simulator .form-step:not([data-step="0"], .mailform) .input .item+.item {
   margin-top: 15px;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-not-valid-tip {
   display: none;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox,
.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio {
   gap: 16px;
   font-weight: 700;
   font-size: 30px;
   letter-spacing: 0.15em;
   line-height: 36px;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox label,
.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio label {
   display: block;
   cursor: pointer;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label,
.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio .wpcf7-list-item-label {
   align-items: center;
   background-color: #fff;
   width: 100%;
   height: 108px;
   padding: 0 70px;
   box-sizing: border-box;
   transition: all 0.3s;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label {
   grid-template-columns: 36px 1fr;
   gap: 30px;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label:before,
.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label:after {
   border-radius: 50%;
   margin: auto;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label:before {
   width: 36px;
   height: 36px;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label:after {
   background: #246bac;
   width: 24px;
   height: 24px;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio .wpcf7-list-item-label {
   grid-template-columns: 1fr;
   gap: 0;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio .wpcf7-list-item-label:before,
.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio .wpcf7-list-item-label:after {
   display: none;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio .wpcf7-list-item-label:hover {
   background-color: #ccc;
}

.simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio input:checked+.wpcf7-list-item-label {
   background-color: #ccc;
}

.simulator .form-step:not([data-step="0"], .mailform) .select+.select {
   margin-top: 15px;
}

.simulator .form-step:not([data-step="0"], .mailform) .select .wpcf7-form-control-wrap:after {
   content: '';
   width: 0;
   height: 0;
   background: transparent;
   border-width: 14px 10px 0 10px;
   border-color: #6d6e71 transparent transparent transparent;
   border-style: solid;
   position: absolute;
   top: 50px;
   right: 40px;
}

.simulator .form-step:not([data-step="0"], .mailform) .select select {
   height: 108px;
   font-weight: 700;
   font-size: 30px;
   line-height: 36px;
   letter-spacing: 0.15em;
   padding: 0 70px;
   border: 0;
}

.simulator .form-step:not([data-step="0"], .mailform) .rank div {
   display: grid;
   grid-template-columns: 120px 1fr;
}

.simulator .form-step:not([data-step="0"], .mailform) .rank div:not(:last-child) {
   margin-bottom: 16px;
}

.simulator .form-step:not([data-step="0"], .mailform) .rank .cap {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 108px;
   background-color: #246bac;
   color: #fff;
   font-weight: 700;
   font-size: 30px;
   line-height: 36px;
   letter-spacing: 0.15em;
}

.simulator .form-step:not([data-step="0"], .mailform) .rank .cap span {
   font-size: 40px;
}

.simulator .screen-1 {
   display: block;
   background: url("../img/simulator/bg-1.png") no-repeat center top/cover;
   color: #fff;
}

.simulator .screen-1 .form-step .in {
   background: transparent;
   position: relative;
   padding: 60px 45px 90px;
}

.simulator .screen-1 .form-step .in:before {
   content: '';
   width: 100%;
   height: 100%;
   background-image: linear-gradient(to bottom, #e1e6e9, #d1e9f5);
   position: absolute;
   top: 0;
   left: 0;
   mix-blend-mode: soft-light;
   border-radius: inherit;
}

.simulator .q0-radio {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
   padding-top: 60px;
}

.simulator .q0-radio label {
   display: block;
   font-weight: 700;
   font-size: 60px;
   line-height: 60px;
   letter-spacing: 0.15em;
   position: relative;
   cursor: pointer;
}

.simulator .q0-radio input {
   display: none;
}

.simulator .q0-radio span {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 170px;
   color: #246bac;
   background-color: #fff;
   border-radius: 34px;
   transition: all 0.3s;
   box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.4);
   position: relative;
}

.simulator .q0-radio span:after {
   content: '';
   width: 42px;
   height: 42px;
   background: url("../img/simulator/arrow-circle-right.png") no-repeat center top/cover;
   position: absolute;
   top: 50%;
   right: 36px;
   transform: translateY(-50%);
}

.simulator .q0-radio span:hover {
   background-color: #ccc;
}

.simulator .q0-radio small {
   display: block;
   font-size: 19px;
   letter-spacing: 0.15em;
   line-height: 30px;
   padding-top: 5px;
}

.simulator .q0-radio input:checked~span {
   background-color: #ccc;
}

.simulator .screen-2 {
   background: #e1e6e9;
}

.simulator .screen-2 .form-step {
   display: none;
}

.simulator .screen-2 .form-step.active {
   display: block;
}

.simulator .screen-3 {
   display: grid;
   background: #e1e6e9;
}

.simulator .screen-3 .wrap {
   margin: auto;
   margin-top: 80px;
}

.simulator .screen-3 .step-close {
   color: #737276;
   position: absolute;
   top: -80px;
   right: 0;
}

.simulator .result-preview .in {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 20px;
   min-height: 650px;
   background-image: linear-gradient(to bottom, #e1e6e9, #d1e9f5);
   box-shadow: 0 0 11px rgba(0, 0, 0, 0.15);
   border-radius: 24px;
   padding: 0 45px;
}

.simulator .result-preview .loading-ttl {
   color: #5b5a5c;
   font-weight: 700;
   font-size: 73px;
   line-height: 1;
}

.simulator .result-preview h3 {
   padding-top: 10px;
}

.simulator .result-preview .loading {
   max-width: 715px;
   margin: 0 auto;
}

.simulator .result-preview .note {
   color: #716c6d;
   font-weight: 700;
   font-size: 20px;
   line-height: 32px;
}

.simulator .screen-4 {
   background: url("../img/simulator/bg-1.png") no-repeat center top/cover;
   color: #fff;
}

.simulator .screen-4 .step-close {
   color: #737276;
   position: absolute;
   top: -80px;
   right: 0;
}

.simulator .screen-4 .wrap {
   display: block;
   box-shadow: 0 0 11px rgba(0, 0, 0, 0.15);
   border-radius: 24px;
   margin-top: 80px;
   padding: 45px 45px 30px;
}

.simulator .screen-4 .wrap:before {
   content: '';
   width: 100%;
   height: 100%;
   background-image: linear-gradient(to bottom, #e1e6e9, #d1e9f5);
   position: absolute;
   top: 0;
   left: 0;
   border-radius: inherit;
   opacity: 0.45;
}

.simulator .screen-4 h3 {
   font-size: 50px;
   line-height: 72px;
   padding-bottom: 30px;
}

.simulator .screen-4 .desc {
   font-weight: 700;
   font-size: 20px;
   line-height: 27px;
   text-align: center;
   padding-bottom: 45px;
}

.simulator .screen-4 .form-in {
   background: rgba(255, 255, 255, 0.8);
   border-radius: 24px;
   max-width: 900px;
   margin: 0 auto;
   padding: 60px 30px;
   box-sizing: border-box;
   position: relative;
}

.simulator .screen-4 .form-row {
   max-width: 520px;
   margin: 0 auto;
   padding-bottom: 30px;
}

.simulator .screen-4 .txt-pp {
   max-width: max-content;
   color: #000100;
   font-weight: 500;
   font-size: 17px;
   line-height: 30px;
   margin: 0 auto;
}

.simulator .screen-4 .txt-pp a {
   text-decoration: underline;
   color: #246bac;
}

.simulator .screen-4 .txt-pp a:hover {
   text-decoration: none;
}

.simulator .screen-4 .form-pp-1 {
   color: #000100;
   text-align: center;
   padding-top: 30px;
}

.simulator .screen-4 .form-btn {
   padding-top: 80px;
   position: relative;
}

.simulator .screen-4 .form-btn p {
   max-width: 520px;
   border-radius: 50px;
}

.simulator .screen-4 .form-btn p:after {
   content: '';
   border-width: 8px 0 8px 14px;
   border-color: transparent transparent transparent #fff;
   border-style: solid;
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
}

.simulator .result-text {
   color: #231815;
   background-color: #fff;
   border: 1px solid #231815;
   line-height: 32px;
   box-sizing: border-box;
   padding: 15px;
}

.simulator .result-text .sim-desc a {
   text-decoration: underline;
}

.simulator .result-text .sim-desc a:hover {
   text-decoration: none;
}

.simulator .result-text hr {
   border-top: 1px solid #231815;
   margin: 15px 0;
}

.simulator .result-text .sim-answers {
   white-space: pre-wrap;
}

.closed-modal-wrapper {
   display: none;
   padding: 16px;
   box-sizing: border-box;
   background: rgba(6, 16, 26, 0.32);
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 101;
}

.shindan-form-modal {
   display: flex;
   padding: 8px 16px 16px;
   width: 480px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 16px;
   background: #f7f5f3;
   box-sizing: border-box;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.close-modal-close-button-wrapper {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 10px;
   align-self: stretch;
   cursor: pointer;
}

.close-modal-close-button {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 6px;
   width: 20px;
   height: 20px;
}

.modal-title-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin-bottom: 20px;
}

.modal-title-wrapper .main-text {
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: .8px;
}

.modal-title-wrapper .sub-text {
   text-align: center;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
   letter-spacing: .56px;
}

.modal-button-wrapper {
   display: flex;
   width: 400px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 12px;
}

.modal-button-base {
   display: flex;
   width: 248px;
   height: 52px;
   padding: 4px 24px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   border-radius: 60px;
   box-sizing: border-box;
   background: #de2d2d;
   box-shadow: 0 1px 2px #06101a4d, 0 1px 3px 1px #06101a26;
}

.modal-button-base .text {
   color: #fff;
   text-align: center;
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%;
   letter-spacing: .8px;
}

.modal-cancel-button {
   display: flex;
   height: 20px;
   padding: 6px 8px;
   align-items: center;
   gap: 4px;
   cursor: pointer;
}

.modal-cancel-button .text {
   color: #06101a9e;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%;
   letter-spacing: .56px;
}

@media screen and (max-width: 1023px) {
   .simulator .q0-radio {
      grid-template-columns: 1fr;
   }

   .simulator .result-preview .process-bar {
      width: 585px;
   }

   .simulator .screen-3 h3 {
      font-size: 45px;
   }
}

@media screen and (max-width: 767px) {
   .simulator .wrap {
      padding: 0 15px;
   }

   .simulator [class*="screen-"] {
      min-height: calc(100vh - 60px);
      padding: 40px 0 80px;
   }

   .simulator h2 {
      font-size: 19px;
      line-height: 28px;
      padding: 45px 0 35px;
   }

   .simulator h2 span {
      display: inline-block;
      font-size: 30px;
      line-height: 36px;
      padding-bottom: 12px;
   }

   .simulator h3 {
      font-size: 20px;
      line-height: 30px;
   }

   .simulator h3 span {
      font-size: 11px;
   }

   .simulator .box {
      line-height: 16px;
   }

   .simulator .step-nav {
      padding-top: 35px;
   }

   .simulator .btn-prev {
      font-size: 10px;
      line-height: inherit;
      margin-left: 0;
   }

   .simulator .btn-next {
      width: calc(100% - 20px);
      height: 45px;
      font-size: 15px;
      line-height: 27px;
      position: relative;
   }

   .simulator .btn-next:after {
      content: '';
      border-width: 8px 0 8px 14px;
      border-color: transparent transparent transparent #fff;
      border-style: solid;
      position: absolute;
      top: calc(50% - 8px);
      right: 20px;
   }

   .simulator .step-close {
      font-size: 13px;
      top: 2px;
      right: 0;
   }

   .simulator .process-bar {
      width: 100%;
      height: 10px;
   }

   .simulator .process-percent {
      font-size: 10px;
      line-height: inherit;
   }

   .simulator .form-step .in {
      border-radius: 12px;
      padding: 20px 15px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .input {
      padding-top: 15px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .input .item+.item {
      margin-top: 8px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox,
   .simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio {
      gap: 8px;
      font-size: 15px;
      line-height: 20px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label,
   .simulator .form-step:not([data-step="0"], .mailform) .wpcf7-radio .wpcf7-list-item-label {
      height: 54px;
      padding: 0 20px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label {
      grid-template-columns: 18px 1fr;
      gap: 14px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label:before {
      width: 18px;
      height: 18px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .wpcf7-checkbox .wpcf7-list-item-label:after {
      width: 12px;
      height: 12px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .select+.select {
      margin-top: 8px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .select .wpcf7-form-control-wrap:after {
      border-width: 8px 6px 0 6px;
      top: 25px;
      right: 10px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .select select {
      height: 54px;
      font-size: 15px;
      line-height: 20px;
      padding: 0 32px 0 20px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .rank div {
      grid-template-columns: 60px 1fr;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .rank .cap {
      width: 60px;
      height: 54px;
      font-size: 15px;
   }

   .simulator .form-step:not([data-step="0"], .mailform) .rank .cap span {
      font-size: 20px;
   }

   .simulator .screen-1 {
      background-image: url("../img/simulator/bg-1_sp.png");
   }

   .simulator .screen-1 h3 {
      max-width: max-content;
      text-align: left;
      margin: 0 auto;
   }

   .simulator .screen-1 .form-step .in {
      margin-top: 0;
      padding: 30px 20px;
   }

   .simulator .q0-radio {
      padding-top: 30px;
   }

   .simulator .q0-radio label span {
      height: 85px;
      border-radius: 17px;
      font-size: 30px;
      line-height: 35px;
   }

   .simulator .q0-radio label span:after {
      width: 20px;
      height: 20px;
      right: 15px;
   }

   .simulator .q0-radio label small {
      font-size: 10px;
      line-height: 15px;
   }

   .simulator .result-preview .in {
      gap: 10px;
      min-height: 375px;
   }

   .simulator .result-preview .loading-ttl {
      font-size: 45px;
      line-height: 45px;
   }

   .simulator .result-preview h3 {
      font-size: 13px;
      letter-spacing: 0;
      line-height: 22px;
   }

   .simulator .result-preview .loading {
      width: 100%;
      line-height: 10px;
   }

   .simulator .result-preview .loading-bar {
      width: calc(100% - 20px);
   }

   .simulator .result-preview .note {
      font-size: 12px;
      line-height: 18px;
   }

   .simulator .screen-3 .step-close {
      top: -20px;
   }

   .simulator .screen-3 .wrap {
      margin-top: 20px;
   }

   .simulator .screen-4 {
      background-image: url("../img/simulator/bg-1_sp.png");
      padding: 45px 15px;
   }

   .simulator .screen-4 .step-close {
      top: -20px;
   }

   .simulator .screen-4 .wrap {
      margin-top: 20px;
      padding: 40px 10px 10px;
      border-radius: 12px;
   }

   .simulator .screen-4 h3 {
      font-size: 25px;
      line-height: 36px;
      padding-bottom: 20px;
   }

   .simulator .screen-4 .desc {
      font-size: 13px;
      line-height: 22px;
      padding-bottom: 20px;
   }

   .simulator .screen-4 .form-in {
      padding: 20px 20px 0;
      border-radius: 12px 12px 0 0;
   }

   .simulator .screen-4 .form-row {
      padding-bottom: 20px;
   }

   .simulator .screen-4 .txt-pp {
      font-size: 12px;
      line-height: 20px;
   }

   .simulator .screen-4 .form-pp-1 {
      padding-top: 20px;
   }

   .simulator .screen-4 .form-btn {
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px 0 45px;
      border-radius: 0 0 12px 12px;
   }

   .shindan-form-modal {
      width: calc(100% - 40px);
      max-width: 480px;
   }
}