@charset "UTF-8";

/* ==================================
== entry
================================== */
#entry {
  font-family: var(--sub-font-family);
  padding: 34px 0 25px;
  position: relative;
}

#entry h2 {
  padding-left: 17vw;
  line-height: 1;
  margin-bottom: 57px;
}

#entry p {
  font-size: min(4vw, 1.3rem);
}

@media screen and (max-width: 768px) {}

@media screen and (min-width: 769px) {
  #entry {
    padding: 100px 0 130px;
  }

  #entry p {
    font-size: 2rem;
    line-height: 1.8;
  }
}

/* ==================================
== form
================================== */
.contact-form {
  font-family: var(--sub-font-family);
  padding: 0 0 75px;
  position: relative;
}

.contact-form table {
  margin: auto;
}

.contact-form table th,
.contact-form table td {
  font-size: 1.5rem;
  font-weight: 400;
}

.contact-form table th {
  text-align: center;
  vertical-align: top;
  padding: 40px 0 10px;
}

.contact-form table th {
  padding: 40px 0 5px;
}

.contact-form table td input,
.contact-form table td textarea {
  border-bottom: 1px solid #000;
  width: 100%;
}

.contact-form .accept {
  font-size: 1.3rem;
  width: fit-content;
  margin: 55px auto 20px;
}

.contact-form .accept label {
  position: relative;
  margin: 0.5rem;
  line-height: 135%;
  cursor: pointer;
}

.contact-form .accept input {
  position: relative;
  top: 0.2rem;
  margin: 0 1rem 0 0;
  cursor: pointer;
}

.contact-form .accept input:checked {
  top: 0.2rem;
}

.contact-form .accept input:before {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid #000;
}

.contact-form .accept input:checked:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  height: 1rem;
  border-color: #009688;
  border-top-style: none;
  border-right-style: none;
}

.contact-form .accept input:after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: #fff;
  cursor: pointer;
}

.contact-form .memo {
  font-size: 0.9rem;
  margin-bottom: 45px;
  text-align: center;
}

.contact-form input[type="submit"] {
  font-size: 1.7rem;
  width: 100%;
  height: 42px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  transition: var(--anime-transition);
}

.contact-form input[type="submit"]:hover {
  background: var(--black-color);
  color: var(--white-color);
}

@media screen and (max-width: 768px) {

  .contact-form table th,
  .contact-form table td {
    width: 100%;
    display: inline-block;
  }
}

@media screen and (min-width: 769px) {
  .contact-form {
    padding: 0 40px 160px 0;
  }

  .contact-form table th,
  .contact-form table td {
    font-size: 2.0rem;
    font-weight: 400;
    padding: 20px 10px 10px;
  }

  .contact-form table th {
    text-align: right;
  }

  .contact-form table td input,
  .contact-form table td textarea {
    border-bottom: 1px solid #000;
    width: 450px;
  }

  .contact-form .accept {
    font-size: 2.5rem;
    margin: 110px auto 20px;
  }

  .contact-form .accept input {
    top: -0.8rem;
    margin: 0 1.6rem 0 0;
  }

  .contact-form .accept input:checked {
    top: -0.4rem;
  }

  .contact-form .accept input:before {
    width: 2.5rem;
    height: 2.5rem;
  }

  .contact-form .accept input:after {
    width: 2.8rem;
    height: 2.8rem;
  }

  .contact-form .memo {
    font-size: 1.8rem;
    margin-bottom: 70px;
  }

  .contact-form input[type="submit"] {
    font-size: 2.1rem;
    width: 320px;
    height: 65px;
  }
}