@charset "UTF-8";
/*     フェードイン    */
.fadeIn {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
}

.fadeIn-up {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(0, 50px);
}

.fadeIn-down {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(0, -80px);
}

.fadeIn-left {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(-50px, 0);
}

.fadeIn-right {
  opacity: 0;
  transition-delay: 100ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
  transform: translate(50px, 0);
}

/*     スライドイン    */
.slideIn {
  opacity: 0;
  transition-delay: 0ms;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.23, 0.76, 0.73, 0.97);
}

.slideIn-up {
  opacity: 1;
  transform: translate(0, 80px);
}

.slideIn-down {
  opacity: 1;
  transform: translate(0, -80px);
}

.slideIn-left {
  opacity: 1;
  transform: translate(-80px, 0);
}

.slideIn-right {
  opacity: 1;
  transform: translate(80px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0);
}

.list-scroll > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.list-scroll > *.scroll-in {
  opacity: 1;
  transform: translateY(0);
}

.contact {
  background: linear-gradient(0deg, rgb(255, 255, 255) 90%, rgb(255, 245, 245) 100%);
}
.contact__ttl {
  color: var(--color-primary);
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
}
@media screen and (max-width: 640px) {
  .contact__ttl {
    font-size: 24px;
  }
}
.contact__lead-txt {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 80px;
}
@media screen and (max-width: 640px) {
  .contact__lead-txt {
    font-size: 16px;
    margin-bottom: 50px;
  }
}
.contact__table {
  width: 100%;
  margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
  .contact__table {
    margin-bottom: 32px;
    border-top: solid 3px var(--color-primary);
  }
}
.contact__table th,
.contact__table td {
  padding: 16px 20px;
}
@media screen and (max-width: 640px) {
  .contact__table th,
.contact__table td {
    display: block;
    padding: 16px 20px;
  }
}
.contact__table th {
  text-align: left;
  vertical-align: middle;
  width: 300px;
  color: var(--color-primary);
  border-bottom: solid 3px var(--color-primary);
}
@media screen and (max-width: 640px) {
  .contact__table th {
    width: 100%;
    border-bottom: solid 1px var(--color-primary);
    background-color: var(--bg-pink);
  }
}
.contact__table td {
  font-weight: 400;
  border-bottom: solid 1px var(--color-primary);
}
@media screen and (max-width: 640px) {
  .contact__table td {
    font-size: 14px;
    border-bottom: solid 3px var(--color-primary);
  }
}
.contact input::-moz-placeholder {
  color: #cfcfcf;
}
.contact input::placeholder {
  color: #cfcfcf;
}
.contact input[type=submit],
.contact input[type=reset] {
  width: min(250px, 100%);
  font-weight: 500;
  font-size: 18px;
  padding: 16px 40px;
  border-radius: 50px;
  color: #fff;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-top: 16px;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}
@media screen and (max-width: 640px) {
  .contact input[type=submit],
.contact input[type=reset] {
    font-size: 16px;
    padding: 14px 20px;
    margin-top: 14px;
  }
}
.contact input[type=submit]:hover,
.contact input[type=reset]:hover {
  opacity: 0.7;
}
.contact input[type=text],
.contact input[type=tel],
.contact textarea,
.contact select {
  font-size: 15px;
  padding: 8px 18px;
  border: solid 1px #a9a9a9;
  border-radius: 5px;
}
.contact textarea {
  width: 100%;
  resize: none;
}
.contact .error_msg {
  color: #ff0000;
  font-size: 14px;
}
.contact input[type=submit] {
  background-color: var(--color-primary);
}
.contact input[type=reset] {
  background-color: #6c6c6c;
}
.contact .radio-btn__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.contact .checkbox__wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*-------------------------------------*/
/* thanks-page                         */
/*-------------------------------------*/
.thanks {
  padding: 100px 0;
}
@media screen and (max-width: 640px) {
  .thanks {
    padding: 80px 0;
  }
}
.thanks__ttl {
  font-size: 32px;
}
@media screen and (max-width: 640px) {
  .thanks__ttl {
    font-size: 24px;
  }
}
.thanks__lead {
  font-size: 18px;
  margin: 20px 0 50px;
}
@media screen and (max-width: 640px) {
  .thanks__lead {
    text-align: left;
    font-size: 16px;
  }
}
/*# sourceMappingURL=contact.css.map */