@charset "UTF-8";

.main.self{background: var(--gray-100);}
.main.self .container{height: 100%;}

.self_wrap{text-align: center; padding: 8rem 0;}
.self_wrap img{border-radius: 1.4rem; box-shadow: 3px 3px 14px rgba(0, 0, 0, 0.06); width: 34rem; margin-top: 5rem;}
.self_wrap h3{font-size: 4rem; margin-top: 2rem;}
.self_wrap h3 strong{color: #d0021b;}
.self_wrap p{margin-top: 2rem; font-size: 1.8rem;}
.self_wrap > div{text-align: center;}
.self_wrap > div a{display: inline-block; background: #d0021b url('/img/self_f_arrow.png') no-repeat center right 2.5rem; padding: 1.6rem 2.5rem; width: 23rem; color: #fff; border-radius: 1rem; margin-top: 4.6rem; font-size: 1.7rem; font-weight: 500; text-align: left; min-width: 34rem; transition: 0.2s;}
.self_wrap > div a:hover{box-shadow: 3px 3px 10px #c8969c;}

@media (min-height: 554px) {
  .self_wrap{
    min-height: calc(100vh - 430px);
  }
}

@media (max-width: 991.98px){
  .self_wrap{padding-top: 9rem;}
  .self_wrap h3{font-size: 3rem;}
  .self_wrap p{font-size: 1.6rem;}
  .self_wrap img{margin-top: 3rem;}
}

.self_form_wrap{padding-top: 6rem; padding-bottom: 8rem;}
.self_form_wrap .container > h2{max-width: 800px;margin: 20px auto;font-size: 2.4rem;font-weight: 600; color: #242d39;}
.self_form{max-width: 800px; margin: 0 auto; background:#d0021b; border-radius: 1.6rem 1.6rem 2rem 2rem; box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.05);} 
.self_form > h3{padding: 0 4rem; color: #fff; font-size: 2.1rem; font-weight: 500; border-radius: 1.6rem 1.6rem 0 0; display: flex; align-items: center; height: 6rem;}
.self_form > h3 em{display: inline-block; font-style: normal; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 5rem; padding: 0.3rem 1rem; font-size: 1.7rem; margin-left: 1rem;}
.self_form .inner{background: #fff; border-radius: 1.6rem; padding: 4rem;}
.question{position: relative;font-size: 1.8rem;font-weight: 500;padding-left: 3.5rem;}
.question::before{position: absolute;content: "Q";color: #fff;background: #d0021b;border-radius: 5rem;left: 0;top: 0;width: 27px;line-height: 27px;text-align: center;font-size: 1.7rem;}
.s_check{padding: 2rem 3rem; border-radius: 1.6rem; background:#f9f9f9; margin-top: 2rem;}

.self_btn{display: flex; justify-content: space-between; margin-top: 3rem;}
.self_btn > a{display: block; padding: 0.7rem 2rem; border: 1px solid #69707a; font-size: 1.6rem; color: #3c4047; border-radius: 5rem;}
.self_btn > div{display: flex; gap: 1rem;}
.self_btn button {padding: 0.7rem 4rem 0.6rem 2rem; border: 1px solid #242d39; border-radius: 5rem; background-color: #242d39; color: #fff; font-size: 1.6rem; font-weight: 500; cursor: pointer; position: relative;}
.self_btn button::after {content: ''; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%) rotate(-45deg); width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;}

.self_btn button.s_prev{padding: 0.7rem 2rem 0.6rem 4rem; background: #fff; color: #272728}
.self_btn button.s_prev::after{right: inherit; left: 2rem; border-color: #272728; transform: translateY(-50%) rotate(135deg);}

:root {accent-color: #d0021b;}
.s_check > li{display: flex; align-items: center; margin: 0.5rem 0; font-size: 1.6rem;}
.s_check > li input{margin-right: 0.6rem;}
.s_check > li label{margin-bottom: 0;}
.s_check input[type="radio"]:checked + label {color: #d0021b; font-weight: 500;}


.result_tit2{margin-bottom: 2rem;}
.result_tit2 h4{margin-bottom: 1rem; line-height: 1.4; font-weight: 600;}
.result_tit2 h4 span{position: relative;display: inline-block;padding-left: 3.7rem;color: #000}
.result_tit2 h4 span b{position: absolute;left: 0;border-radius: 5rem;text-align: center;color: #fff;background: #000;width: 3rem;height: 3rem;}
.result_tit2 h4 span.r01{color: #e71919;}
.result_tit2 h4 span.r01 b{background: #e71919;}
.result_tit2 h5{padding: 0.7rem 0 0 0.2rem;}

@media (max-width: 524px) {
  .self_form_wrap .container > h2{font-size: 2.2rem; margin-top: 30px;}
  .self_form > h3{font-size: 1.8rem; padding: 0 3rem; height: 5rem;}
  .self_form > h3 em{font-size: 1.5rem;}
  .self_form .inner{padding: 3rem 2.4rem;}
  .question{font-size: 1.7rem;}
  .self_btn{flex-wrap: wrap;}
  .self_btn > a,
  .self_btn button{padding: 0.3rem 1rem !important; font-size: 1.5rem;}
  .self_btn button::after{display: none;}
}

.q_blank{color: var(--blue-link) !important; text-decoration: underline !important;}
.self_form .rs_box2,
.self_form .occupation_li .dep01{background: #f9f9f9; border-radius: 1.6rem;}
.self_form .result_tit h4{font-size: 1.9rem;}
.self_form input{margin-bottom: 3px; margin-right: 3px;}

 .self_form label.checked {
    color: #d0021b; font-weight: 500;
  }