/* =============================================
* HOME
* ============================================= */
/* -- -- */
#trouble {
   background-color: #DEF3FF;
   padding: 20px 0 0;
}

#trouble h2 {
   max-width: 326px;
   margin: 0 auto;
   padding-bottom: 20px;
}

#trouble .box {
   padding: 0 12px;
}

#trouble .box .item {
   background-color: #fff;
   border: 3px solid #008AD7;
   border-radius: 10px;
   position: relative;
}

#trouble .box .item:not(:last-child) {
   margin-bottom: 15px;
}

#trouble .box h3 {
   font-weight: 500;
   font-size: 23px;
   letter-spacing: 0;
   line-height: 34px;
   padding: 15px 20px;
   position: relative;
   z-index: 1;
}

#trouble .box h3 strong {
   font-weight: 700;
   color: #008AD7;
}

#trouble .box figure {
   width: 110px;
   position: absolute;
   bottom: 0;
   right: 0;
}

#trouble .txt {
   line-height: 30px;
   padding-top: 40px;
}

#trouble .photo {
   position: relative;
   z-index: 1;
}

#trouble .photo:before {
   content: '';
   width: 100%;
   background-color: #fff;
   position: absolute;
   top: 0;
   bottom: 13%;
   left: 0;
}

/* -- -- */
#reason {
   background-color: #FEF6A1;
   margin-top: -20%;
   padding-bottom: 64px;
}

#reason .box {
   margin: 0 15px;
   position: relative;
}

#reason .box:before {
   content: '';
   width: 100%;
   background-color: #fff;
   border-radius: 10px;
   position: absolute;
   top: 9%;
   bottom: 0;
   left: 0;
}

#reason .box+.box {
   margin-top: 48px;
}

#reason .box .in {
   padding: 20px 30px 40px;
   position: relative;
}

#reason .box .txt {
   padding-top: 15px;
}

/* -- -- */
#retirement__agency .box {
   background-color: #0289D5;
   color: #fff;
   padding: 20px 40px 64px;
}

#retirement__agency .box h3 {
   font-weight: 800;
   font-size: 26px;
   line-height: 37px;
}

#retirement__agency .box figure {
   padding-top: 20px;
}

#retirement__agency .box .txt {
   font-weight: 500;
   line-height: 35px;
   padding-top: 45px;
}

/* -- -- */
#flow {
   background: repeating-linear-gradient(-45deg, #FAFAE0 0, #FAFAE0 10px, #F7F7B1 10px, #F7F7B1 20px);
   padding: 80px 15px 65px;
}

#flow h2 {
   max-width: 277px;
   margin: 0 auto;
   padding-bottom: 40px;
}

#flow .box .item {
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#flow .box .item:not(:last-child) {
   margin-bottom: 25px;
}

#flow .box .item .in {
   display: grid;
   grid-template-columns: 1fr 129px;
   align-items: center;
   padding: 24px 0 24px 24px;
}

/* -- -- */
#faq {
   background: repeating-linear-gradient(145deg, #FFCF34, #FF9922);
}

#faq .box {
   padding: 0 12px 15px;
}

#faq .box .item {
   background-color: #fff;
   border-radius: 10px;
   padding: 20px 20px;
}

#faq .box .item:not(:last-child) {
   margin-bottom: 15px;
}

#faq .box h3 {
   font-weight: 600;
   font-size: 20px;
   line-height: 27px;
   letter-spacing: 0;
   color: #FFA023;
   background: url("../img/index/icon-Q.png") no-repeat top left/30px auto;
   padding-left: 45px;
}

#faq .box .txt {
   background: url("../img/index/icon-A.png") no-repeat top left/30px auto;
   margin-top: 20px;
   padding-left: 45px;
}

/* -- -- */
#contact {
   background-color: #FFFAB8;
   border: 10px solid #FFA023;
}

#contact h2 {
   margin: 0 -10px;
}

#contact .in {
   font-weight: 500;
   padding: 0 15px 20px;
}

#contact .txt {
   padding-bottom: 20px;
}

#contact .form-wrap {
   background-color: #fff;
   border-radius: 10px;
   padding: 30px 15px 60px;
}

#contact .form-row+.form-row {
   padding-top: 25px;
}

#contact .form-row .caption {
   display: flex;
   align-items: center;
   gap: 5px;
}

#contact .form-row .caption span {
   display: block;
   width: 32px;
   color: #fff;
   font-weight: 500;
   font-size: 11px;
   line-height: 18px;
   text-align: center;
}

#contact .form-row .caption span.required {
   background-color: #FFA023;
}

#contact .form-row .caption span.none {
   background-color: #333;
}

#contact .form-row .input {
   padding-top: 5px;
}

#contact .form-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding-top: 40px;
}

#contact .form-btn p {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 50px;
   text-align: center;
   border-radius: 50px;
   background-color: #FFDD46;
   color: #000;
   font-weight: 900;
   font-size: 20px;
   line-height: 20px;
   position: relative;
   z-index: 1;
   transition: all 0.3s;
   box-shadow: 0 5px 0 #DDDDDD;
}

#contact .form-btn p:after {
   content: '';
   width: 20px;
   height: 20px;
   background: url("../img/index/arrow-right.png") no-repeat center top/cover;
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
}

#contact .form-btn p input,
#contact .form-btn p a {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

#contact .form-btn p:hover {
   transform: translateY(5px);
   box-shadow: none;
}

#contact .form-btn .btn-back {
   background-color: #FFFAB8;
}

#contact.thanks .txt {
   font-size: 13px;
   padding-bottom: 30px;
}

#contact.thanks .txt p:not(:last-child) {
   padding-bottom: 30px;
}

/* -- -- */