@charset "utf-8";
/* -------------------------- footer ----------------------------- */

footer {
  background-image: url(../image/bg_water_rev.png),
    linear-gradient(to bottom, #aad4fb, #45729b);
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, center center;
  background-size: cover, cover;
  background-blend-mode: multiply;
  padding: 64px 0;
  .footerContactSection {
    background-color: rgba(255, 255, 255, 0.85);
    width: 60%;
    display: grid;
    gap: 32px 0;
    border-radius: 10px;
    > h2 {
      color: #063b6b;
      font-size: clamp(16px, 1.875vw, 36px);
      margin-inline: auto;
    }
    > .errorsBox {
      background-color: #dfdfdf;
      > li {
        font-size: clamp(12px, 0.833vw, 16px);
        padding: 8px;
        color: rgb(255, 109, 109);
        font-weight: bold;
      }
    }
    > form {
      width: 60%;
      margin-inline: auto;
      display: grid;
      row-gap: 16px;
      > h4 {
        text-align: center;
        font-size: clamp(12px, 1.25vw, 24px);
      }
      > label,
      > input,
      > select,
      > span,
      > p {
        font-size: clamp(12px, 0.833vw, 16px);
        padding: 8px;
      }
      > .requiredMark::after {
        margin: 0 0 0 8px;
        content: "必須";
        padding: 0 6px;
        background-color: #063b6b;
        color: white;
      }
      > p {
        &:nth-of-type(even) {
          background-color: #33333311;
        }
      }
      > .formButtonBox {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 32px;
        > button {
          width: fit-content;
          padding: 12px 24px;
          background-color: #4c7fcb;
          color: white;
          border-style: none;
          border-radius: 5px;
          font-size: clamp(12px, 1.25vw, 24px);
          cursor: pointer;
        }
      }
    }
    > #sendDoneMessage {
      text-align: center;
      font-size: clamp(12px, 1.25vw, 24px);
    }
    > #sendDoneMessage2 {
      text-align: center;
      font-size: clamp(12px, 1.25vw, 24px);
    }
    > #sendDoneMessage3 {
      width: fit-content;
      margin-inline: auto;
      text-align: center;
      font-size: clamp(12px, 1.25vw, 24px);
      color: #063b6b;
    }
  }
}

/* --------------------- マウスホバー ---------------------- */

footer {
  > .footerContactSection {
    > form {
      > .hoverBgColor {
        > button {
          transition: background-color 0.3s;
        }
      }
    }
    > #sendDoneMessage3 {
      transition: scale 0.3s;
    }
  }
}

@media (any-hover: hover) {
  footer {
    > .footerContactSection {
      > form {
        > .hoverBgColor {
          > button:hover {
            background-color: #3262aa;
          }
        }
      }
      > #sendDoneMessage3:hover {
        scale: 1.2;
      }
    }
  }
}

/* メディアクエリ ///////////////////////////////// */

@media (width <= 520px) {
  footer {
    > .footerContactSection {
      width: 90%;
      gap: 16px;
      > form {
        width: 80%;
        row-gap: 8px;
      }
    }
  }
}

/* ///////////////////////////////// */