img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width:768px) {
  .container {
    padding: 0 4%;
  }
}

html {
  height: 100%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1D1919;
  font-weight: 300;
  height: 100%;
}

a {
  transition: all 0.3s ease 0s;
}

@media (any-hover: hover) {
  a:hover {
    opacity: .7;
  }
}

.for-pc {
  display: block;
}

.for-sp {
  display: none;
}

@media screen and (max-width:768px) {
  .for-pc {
    display: none;
  }

  .for-sp {
    display: block;
  }
}

/* 追従ボタン */
.cta-btns__scroll {
  display: none;
  /* 初期状態で非表示 */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4.7%;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
  /* 初期透明度は0 */
  visibility: hidden;
  /* 要素を非表示 */
  z-index: 2;
}

.cta-btns__scroll.visible {
  display: flex;
  /* フレックスボックスとして表示 */
  opacity: 1;
  /* 完全に不透明 */
  visibility: visible;
  /* 要素を表示 */
}


/**
 * ***************************************
 * 	FVのスタイル
 * ***************************************
 */

.fv {
  position: relative;
}

.fv img {
  aspect-ratio: 1920 / 1162;
}

@media (max-width: 768px) {
  .fv img {
    aspect-ratio: 750 / 1334;
  }
}

/**
 * ---------------------------------------
 * 	FVのCTA
 */

.cta-btns__fv {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4.7%;
}

.cta-btns__fv .cta-btn__form img {
  width: clamp(0px , 349 / 1920 * 100vw, 349px);
  aspect-ratio: 349 / 137;
}

.cta-btns__fv .cta-btn__tel img {
  width: clamp(0px , 435 / 1920 * 100vw, 435px);
  aspect-ratio: 435 / 182;
}

@media (max-width: 768px) {
  .cta-btns__fv {
    bottom: 4%;
    gap: 1.3%;
  }

  .cta-btns__fv .cta-btn__form img {
    width: clamp(0px, 156.5 / 375 * 100vw, 313px);
    aspect-ratio: 313 / 124;
  }

  .cta-btns__fv .cta-btn__tel img {
    width: clamp(0px, 192 / 375 * 100vw, 384px);
    aspect-ratio: 384 / 161;
  }

}

/**
 * ***************************************
 * 	メディア
 * ***************************************
 */

.media {
  margin-top: -1%;
}

.media img {
  aspect-ratio: 1920 / 1066;
}

@media (max-width: 768px) {
  .media {
    margin-top: 0;
  }

  .media img {
    aspect-ratio: 750 / 1334;
  }
}

/**
 * ***************************************
 * 	料金一覧
 * ***************************************
 */

.price img {
  aspect-ratio: 1920 / 2323;
}
@media (max-width: 768px) {
  .price img {
    aspect-ratio: 750 / 2810;
  }
}

/**
 * ***************************************
 * 	こんなお悩みありませんか？
 * ***************************************
 */

.problems img {
  aspect-ratio: 1920 / 1829;
}

@media (max-width: 768px) {
  .problems img {
    aspect-ratio: 750 / 1636;
  }
}

/**
 * ***************************************
 * 	おすすめポイント
 * ***************************************
 */

.points img {
  aspect-ratio: 1920 / 4603;
}

@media (max-width: 768px) {
  .points img {
    aspect-ratio: 750 / 4443;
  }
}

/**
 * ***************************************
 * 	CTA
 * ***************************************
 */

.cta {
  position: relative;
}

.cta img {
  width: 100%;
  aspect-ratio: 1920 / 624;
}

@media (max-width: 768px) {
  .cta img {
    aspect-ratio: 750 / 624;
  }
}

.cta-btns {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7%;
}

.cta-btns__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  margin-top: 2%;
}

/* お問い合わせフォームへのボタン */
.cta-btns .cta-btn__form img {
  width: clamp(0px , 766 / 1920 * 100vw, 766px);
  aspect-ratio: 766 / 227;
  margin-left: 6%;
}

/* LINEお友だち追加はコチラのボタン */
.cta-btns__scroll .cta-btn__line,
.cta-btns .cta-btn__line {
  flex-shrink: 0;
}

.cta-btns__scroll .cta-btn__line img,
.cta-btns .cta-btn__line img {
  width: clamp(0px , 403 / 1920 * 100vw, 403px);
  aspect-ratio: 403 / 157;
}

/* TELはコチラのボタン */
.cta-btns__scroll .cta-btn__tel,
.cta-btns .cta-btn__tel {
  flex-shrink: 0;
}

.cta-btns__scroll .cta-btn__tel img,
.cta-btns .cta-btn__tel img {
  width: clamp(0px , 500 / 1920 * 100vw, 500px);
  aspect-ratio: 500 / 210;
}


/* SP時のスタイリング */
@media (max-width: 768px) {
  .cta-btns {
    bottom: 16%;
  }

  .cta-btns__bottom {
    gap: 3%;
  }

  /* お問い合わせフォームへのボタン */
  .cta-btns .cta-btn__form img {
      width: clamp(0px, 328 / 375 * 100vw, 656px);
      aspect-ratio: 656 / 196;
      margin-inline: auto;
    }
  
    /* LINEお友だち追加はコチラのボタン */
    
    .cta-btns__scroll .cta-btn__line img,
    .cta-btns .cta-btn__line img {
      width: clamp(0px, 155.5 / 375 * 100vw, 403px);
      aspect-ratio: 311 / 123;
    }
  
    /* TELはコチラのボタン */
    .cta-btns__scroll .cta-btn__tel img,
    .cta-btns .cta-btn__tel img {
      width: clamp(0px, 192 / 375 * 100vw, 500px);
      aspect-ratio: 500 / 210;
    }
}

/**
 * ***************************************
 * 	お客様の声
 * ***************************************
 */

.voice img {
  aspect-ratio: 1920 / 2767;
}

@media (max-width: 768px) {
  .voice {
    margin-top: -1%;
  }

  .voice img {
    aspect-ratio: 750 / 2309;
  }
}

/**
 * ***************************************
 * 	施工事例
 * ***************************************
 */

.works img {
  aspect-ratio: 1920 / 1595;
}

@media (max-width: 768px) {
  .works img {
    aspect-ratio: 750 / 1274;
  }
}

/**
 * ***************************************
 * 	6つのお約束
 * ***************************************
 */

.promises img {
  aspect-ratio: 1920 / 1869;
}

@media (max-width: 768px) {
  .promises {
    margin-top: 3.9%;
  }

  .promises img {
    aspect-ratio: 750 / 1762;
  }
}

/**
 * ***************************************
 * 	ボランティア活動
 * ***************************************
 */

.volunteer img {
  aspect-ratio: 1920 / 2465;
}

@media (max-width: 768px) {
  .volunteer img {
    aspect-ratio: 750 / 2248;
  }
}

/**
 * ***************************************
 * 	footer（LP本体）
 * ***************************************
 */

.main-footer {
  position: relative;
}

.main-footer img {
  aspect-ratio: 1920 / 716;
}

@media (max-width: 768px) {
  .main-footer img {
    aspect-ratio: 750 / 710;
  }
}

/**
 * ***************************************
 * 	フォームのスタイル
 * ***************************************
 */

.form-header img {
  aspect-ratio: 3840 / 358;
}

@media (max-width: 768px) {

  .form-header img {
    aspect-ratio: 750 / 179;
  }
}

.form-main {
  background: #FFF7EB;
  padding-bottom: clamp(70px, 208 / 1920 * 100vw, 208px);
}

.form {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 20 / 1920 * 100vw, 20px);
  align-items: center;
  padding-top: clamp(34px, 58 / 1920 * 100vw, 58px);
}

.form__caution {
  font-size: clamp(12px, 20 / 1920 * 100vw, 20px);
  color: #FAA73E;
  margin-left: 4%;
}

.form__row {
  display: flex;
  column-gap: clamp(12px, 46 / 1920 * 100vw, 46px);
  align-items: center;
}


.submit-button,
.form__label {
  font-size: clamp(11px, 25 / 1920 * 100vw, 25px);
  color: #fff;
  background: #FAA73E;
  width: clamp(110px, 251 / 1920 * 100vw, 251px);
  height: clamp(35px , 71 / 1920 * 100vw, 71px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.required-mark {
  font-size: clamp(8px, 16 / 1920 * 100vw, 16px);
  margin-top: 7%;
}

.form__input {
  width: clamp(220px , 704 / 1920 * 100vw, 704px);
  height: clamp(35px , 71 / 1920 * 100vw, 71px);
  background: #fff;
  border: 1px solid #707070;
}

.form__input,
.form__row--textarea {
  padding: 1em;
  font-size: clamp(14px, 16 / 1440 * 100vw, 16px);
}

.form__radio__buttons {
  width: clamp(220px, 704 / 1920 * 100vw, 704px);
  display: flex;
  align-items: center;
}

.form__radio__input {
  width: clamp(10px, 30 / 1920 * 100vw, 30px);
  height: clamp(10px, 30 / 1920 * 100vw, 30px);
  border: 1px solid #707070;
  margin: 0px;
  margin-top: clamp(0px, 4 / 1920 * 100vw, 4px);
  margin-left: clamp(10px, 20 / 1920 * 100vw, 20px);
}

.form__radio__label {
  display: inline-block;
  font-size: clamp(10px, 30 / 1920 * 100vw, 30px);
  margin-left: clamp(0px, 11 / 1920 * 100vw, 11px);
}

.form__row--textarea {
  align-items: flex-start;
}

.form__input--textarea {
  height: clamp(80px , 153 / 1920 * 100vw, 153px);
}

.submit-button {
  font-size: clamp(17px, 35 / 1920 * 100vw, 35px);
  margin-top: clamp(0px, 48 / 1920 * 100vw, 48px);
  width: clamp(170px , 339 / 1920 * 100vw, 339px);
  height: clamp(47px , 95 / 1920 * 100vw, 95px);
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

@media (any-hover: hover) {
  .submit-button:hover {
    opacity: .7;
  }
}

/* iOSのinput, textareaのデフォルトスタイルをリセット */
input:not([type="radio"]),
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}



/* SP時のスタイリング */
@media screen and (max-width:768px) {
  .form-main {
      padding-bottom: clamp(0px, 70px / 375 * 100vw, 208px);
    }
  
    .form {
      gap: clamp(0px, 16 / 375 * 100vw, 20px);
      padding-top: clamp(0px, 34 / 375 * 100vw, 58px);
    }
  
    .form__caution {
      font-size: clamp(0px, 12 / 375 * 100vw, 20px);
      margin-left: 4%;
    }
  
    .form__row {
      column-gap: clamp(0px, 12 / 375 * 100vw, 46px);
    }
  
  
    .submit-button,
    .form__label {
      font-size: clamp(0px, 11 / 375 * 100vw, 25px);
      width: clamp(0px, 110 / 375 * 100vw, 251px);
      height: clamp(0px, 35 / 375 * 100vw, 71px);
    }
  
    .required-mark {
      font-size: clamp(0px, 8 / 375 * 100vw, 16px);
      margin-top: 7%;
    }
  
    .form__input {
      width: clamp(0px, 220 / 375 * 100vw, 704px);
      height: clamp(0px, 35/ 375 * 100vw, 71px);
    }

      .form__input,
      .form__row--textarea {
        padding: 0.5em;
        font-size: clamp(0px, 13 / 375 * 100vw, 16px);
      }
  
    .form__radio__buttons {
      width: clamp(0px, 220 / 375 * 100vw, 704px);
    }
  
    .form__radio__input {
      width: clamp(0px, 10 / 375 * 100vw, 30px);
      height: clamp(0px, 10 / 375 * 100vw, 30px);
      margin: 0px;
      margin-top: 0px;
      margin-left: clamp(0px, 10 / 375 * 100vw, 20px);
    }
  
    .form__radio__label {
      font-size: clamp(0px, 12 / 375 * 100vw, 30px);
      margin-left: clamp(0px, 3 / 375 * 100vw, 11px);
    }
  
    .form__input--textarea {
      height: clamp(0px, 80 / 375 * 100vw, 153px);
    }
  
    .submit-button {
      font-size: clamp(0px, 17 / 375 * 100vw, 35px);
      margin-top: clamp(0px, 48 / 375 * 100vw, 48px);
      width: clamp(0px, 170 / 375 * 100vw, 339px);
      height: clamp(0px, 47 / 375 * 100vw, 95px);
    }
}




/**
 * ***************************************
 * 	footer（フォームページ）
 * ***************************************
 */

.form-footer {
  position: relative;
}

.form-footer-img {
  aspect-ratio: 1919 / 710;
  width: 100%;
  height: auto;
}

.privacy-policy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16.5%;
  font-size: clamp(12.5px, 30 / 1920 * 100vw, 30px);
  color: #1D1A1A;
}




/* SP時のスタイリング */
@media screen and (max-width:768px) {
  .form-footer-img {
    aspect-ratio: 754 / 710;
  }

  .privacy-policy {
    font-size: clamp(12.5px, 12.5 / 375 * 100vw, 25px);
  }

}


/**
 * ***************************************
 * 	Thanksページのスタイル
 * ***************************************
 */

.thanks-main {
  height: 100%;
}

.thanks-body {
  background: #FFF7EB;
}

.thanks-container {
  border: 10px solid #FAA73E;
  width: 100%;
  height: 100%;
  max-width: 750px;
  margin-inline: auto;
  padding-top: clamp(0px, 82 / 1920 * 100vw, 82px);
  padding-right: clamp(0px, 28 / 1920 * 100vw, 28px);
  /* padding-bottom: clamp(0px, 322 / 1920 * 100vw, 322px); */
  padding-left: clamp(0px, 28 / 1920 * 100vw, 28px);
  text-align: center;
}

.thanks-message--en {
  width: clamp(0px , 573 / 1920 * 100vw, 573px);
  height: clamp(0px , 35 / 1920 * 100vw, 35px);
}

.thanks-message {
  font-size: clamp(0px, 35 / 1920 * 100vw, 35px);
  font-weight: 600;
  line-height: calc(60 / 35);
  margin-top: clamp(0px, 122 / 1920 * 100vw, 122px);
}

.thanks-text {
  font-size: clamp(0px, 25 / 1920 * 100vw, 25px);
  line-height: calc(43 / 25);
  margin-top: clamp(0px, 122 / 1920 * 100vw, 122px);
}

.back-to-top-btn {
  display: grid;
  place-items: center;
  text-transform: uppercase;
  color: #fff;
  background: #FAA73E;
  width: clamp(0px , 285 / 1920 * 100vw, 285px);
  height: clamp(0px , 71 / 1920 * 100vw, 71px);
  font-size: clamp(0px, 25 / 1920 * 100vw, 25px);
  margin-inline: auto;
  margin-top: clamp(0px, 176 / 1920 * 100vw, 176px);
}

@media screen and (max-width:768px) {
  
    .thanks-container {
      border: 5px solid #FAA73E;
      padding-top: clamp(0px, 41 / 375 * 100vw, 82px);
      padding-right: 3%;
      padding-bottom: clamp(0px, 161 / 375 * 100vw, 322px);
      padding-left: 3%;
      text-align: center;
    }
  
    .thanks-message--en {
      width: 90%;
      height: auto;
    }
  
    .thanks-message {
      font-size: clamp(0px, 18 / 375 * 100vw, 28px);
      font-weight: 600;
      line-height: calc(60 / 35);
      margin-top: clamp(0px, 30 / 375 * 100vw, 60px);
    }
  
    .thanks-text {
      font-size: clamp(0px, 16 / 375 * 100vw, 25px);
      line-height: calc(43 / 25);
      margin-top: clamp(0px, 30 / 375 * 100vw, 60px);
    }
  
    .back-to-top-btn {
      display: grid;
      place-items: center;
      text-transform: uppercase;
      color: #fff;
      background: #FAA73E;
      width: clamp(0px, 213 / 375 * 100vw, 285px);
      height: clamp(0px, 52 / 375 * 100vw, 71px);
      font-size: clamp(0px, 16 / 375 * 100vw, 25px);
      margin-inline: auto;
      margin-top: clamp(0px, 60 / 375 * 100vw, 120px);
    }

}