/* =================================
   challenge button
================================= */

.challenge-button-area {
   margin-top: 23px;
}

@media screen and (width < 768px) {
   .challenge-button-area {
      margin-top: 19px;
   }
}



.challenge-button-title {
   width: 290px;
   margin: 0 auto;
   position: relative;
}

@media screen and (width < 768px) {
   .challenge-button-title {
      width: 247px;
   }
}

.challenge-button-image {
   position: absolute;
   top: -4px;
   left: -2px;
   width: 31px;
   height: 31px;
}

@media screen and (width < 768px) {
   .challenge-button-image {

      img {
         width: 31px;
         height: 31px;
      }
   }
}

.challenge-button-title-text {
   color: #40AD95;
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 0.05em;

   position: relative;
   display: inline-block;
   padding-inline: 26px;

   &::before {
      content: "＼";
      position: absolute;
      bottom: 0px;
      left: 0;
      color: #40AD95;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.05em;
   }

   &::after {
      content: "／";
      position: absolute;
      bottom: 0px;
      right: 0;
      color: #40AD95;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.05em;
   }

   span {
      color: #F57272;
      font-size: 48px;
      font-weight: 500;
      line-height: 1.1;
   }
}

@media screen and (width < 768px) {
   .challenge-button-title-text {
      font-size: 15px;
      padding-left: 26px;
      padding-right: 24px;

      span {
         font-size: 40px;
      }
   }
}

.challenge-button-btn {
   margin-top: 10px;
}

@media screen and (width < 768px) {
   .challenge-button-btn {
      margin-top: 11px;
   }
}

.challenge-button {
   color: #40AD95;
   display: inline-block;
   width: 453px;
   height: 110px;
   border-radius: 10px;
   border: 3px solid #2ECAA8;
   background: #FFF;
   box-shadow: 0 4px 0 0 #8CDDCB;
   padding: 16px 11px 31px 9px;

   position: relative;

   &::before {
      content: "";
      position: absolute;

      width: 19px;
      height: 16px;

      background-image: url("../img/challenge-btn-arrow.webp");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;

      top: 50%;
      right: 4px;
      transform: translateY(-50%);
   }
}

@media screen and (width < 768px) {
   .challenge-button {
      width: 336px;
      height: 80px;
      padding: 7px 11px 31px 8px;

      &::before {
         top: 52%;
         right: 2px;
      }
   }
}

.challenge-button:hover {
   filter: brightness(1.2) !important;
   color: #40AD95 !important;
   opacity: 1 !important;
}

.challenge-button-text {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: 0.05em;

   & .is-big {
      font-size: 48px;
      font-weight: 500;
      letter-spacing: 0.03em;
   }

   & .is-small {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.03em;
   }
}

@media screen and (width < 768px) {
   .challenge-button-text {
      font-size: 16px;

      & .is-big {
         font-size: 36px;
      }

      & .is-small {
         font-size: 14px;
      }
   }
}

/* =================================
   challenge section
================================= */

.p-challenge-section {}

/* =================================
   contact form
================================= */

.contact-form {
   padding-top: 68px;
   padding-bottom: 68px;
   background: #FAF6F4;
}

.contact-form__inner {
   max-width: calc(600px + 16px *2);
   margin: 0 auto;
   padding-inline: 16px;
}

.contact-form__form {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

@media screen and (width < 768px) {
   .contact-form__form {
      gap: 24px;
   }
}

.form-item {}

.form-item__head {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}

.form-item__tag {
   width: 62px;
   height: 32px;
   border-radius: 10px;
   background: #EC7A7A;

   color: #fff;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.06em;

   padding-top: 3.5px;
   text-align: center;

   &.is-optional {
      color: #EC7A7A;
      border: 1px solid #EC7A7A;
      background: none;
   }
}

@media screen and (width < 768px) {
   .form-item__tag {
      font-size: 14px;
      padding-top: 6px;
   }
}

.form-item__label {
   color: #333;
   font-size: 20px;
   font-weight: 500;
   letter-spacing: 0.06em;
}

@media screen and (width < 768px) {
   .form-item__label {
      font-size: 16px;
   }
}

.form-item__input {
   margin-top: 8px;

   &.is-select {
      position: relative;

      &::after {
         content: "";
         position: absolute;
         top: 50%;
         right: 16px;
         transform: translateY(-50%);
         width: 15px;
         height: 15px;
         background: url("../img/contact-select-arrow.webp") no-repeat center center;
         background-size: contain;
         pointer-events: none;
      }
   }
}

@media screen and (width < 768px) {
   .form-item__input {

      &.is-select {

         &::after {
            top: 64%;
            right: 8px;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
         }
      }
   }
}

.form-input__text {
   border-radius: 10px;
   background: #FFF;
   width: 100%;
   height: 48px;
   padding: 0 16px;

   &.is-select {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.06em;

      /* 未選択時だけグレー */
      &:invalid {
         color: #C3C3C3;
      }

      /* プルダウン内の選択肢 */
      option {
         color: #333333;
      }

      /*  選択後の文字色 */
      color: #333333;
   }
}

@media screen and (width < 768px) {
   .form-input__text {
      /* padding-top: 8px; */
   }
}

.privacy-policy {}

.privacy-policy-title {
   text-align: center;
}

@media screen and (width < 768px) {
   .privacy-policy-title {
      padding-left: 8px;
   }
}

.privacy-policy-title-text {
   color: #333;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.06em;

   display: inline-block;
   text-decoration: underline !important;
}

.privacy-policy-title-text:hover {
   opacity: 0.8 !important;
   color: inherit !important;
}

.contact__privacy {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

@media screen and (width < 768px) {
   .contact__privacy {
      margin-top: -11px;
   }
}

/* 元のチェックボックスを非表示 */
.contact__privacy-checkbox-input {
   appearance: none;
   -webkit-appearance: none;
   margin: 0;
   width: 20px;
   height: 20px;
   background: #fff;
   cursor: pointer;
   position: relative;
   flex-shrink: 0;
}

/* テキストとの間隔 */
.contact__privacy-text {
   margin-left: 8px;
}

@media screen and (width < 768px) {
   .contact__privacy-text {
      margin-left: 0px;
   }
}

/* チェック時 */
.contact__privacy-checkbox-input:checked::after {
   content: "";
   position: absolute;
   top: 2px;
   left: 6px;
   width: 5px;
   height: 10px;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
   transform: rotate(45deg);
}

.contact__privacy-word {
   color: #333;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.06em;

   cursor: pointer;
}

@media screen and (width < 768px) {
   .contact__privacy-word {
      /* padding-left: 4px; */
   }
}

.contact__btn {}

@media screen and (width < 768px) {
   .contact__btn {
      margin-top: -10px;
   }
}

.c-button-wrap {
   width: 300px;
   height: 60px;
   margin: 0 auto;

   text-align: center;
   /* padding-top: 12px; */

   border-radius: 10px;
   background: #EC7A7A;
   box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);

   cursor: pointer;
}

@media screen and (width < 768px) {
   .c-button-wrap {
      width: 280px;
   }
}

.c-button {
   color: #FFF;
   font-size: 22px;
   font-weight: 500;
   letter-spacing: 0.06em;

   width: 100%;
   height: 100%;
   border: none;
   background: transparent;
   cursor: pointer;
}

/* 確認するボタンを有効にするための指定 */
.challenge-button-area {
   position: relative;
   z-index: 1;
}

.contact-form {
   position: relative;
   z-index: 10;
}

.contact__btn {
   position: relative;
   z-index: 20;
}

/* バリデーションメッセージ */
.form-error {
   color: #d33;
   font-size: 14px;
   margin-top: 6px;
}

.form-error-privacy {
   text-align: center;
}


/* 追加「ご相談内容」 */
.form-textarea {
   border-radius: 10px;
   background: #FFF;
   width: 100%;
   height: 130px;
   padding: 16px 16px;
}