@charset 'utf-8';
/* ======================================================
CSS information

 File Name  : contact.css
 Style Info : 「お問い合わせ」のCSS
====================================================== */

.grecaptcha-badge {
  visibility: visible;
}

[data-class="wpcf7cf_group"],
.wpcf7cf_remove, .wpcf7cf_add {
  display: block;
}

.wpcf7-spinner,
.wpcf7-response-output {
  display: none;
}

.wpcf7-list-item:first-of-type {
  margin-left: 0;
}

.wpcf7-not-valid-tip {
  color: var(--required);
}

#form-block {
  margin-bottom: 2rem;
  margin-inline: auto;
  width: min(100%, 820px);
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #form-block {
    margin-bottom: 2.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #form-block {
    margin-bottom: 3rem;
  }

}

.wpcf7-list-item {
  display: block;
  margin: 0 0 1rem 0;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  .wpcf7-list-item {
    margin-bottom: 1.2rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  .wpcf7-list-item {
    margin-bottom: 1.4rem;
  }

}

.wpcf7-list-item:last-child {
  margin-bottom: 0;
}

#form-block .required {
  padding-block: .2rem .6rem;
  color: var(--required);
  font-size: 1.4rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #form-block .grid-table > .row > .cell:first-of-type {
    width: 200px;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #form-block .grid-table > .row > .cell:first-of-type {
    width: 220px;
  }

}

#confirm-block {
  margin-bottom: 7rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #confirm-block {
    margin-bottom: 8rem;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #confirm-block {
    margin-bottom: 9rem;
  }

}

#confirm-block .privacy-link {
  text-decoration: underline;
  margin-left: 1rem;
}

#confirm-block dt {
  text-align: center;
}

#confirm-block dd {
  margin-top: 2rem;
  margin-inline: auto;
  width: fit-content;
  font-size: 1.4rem;
}

/* 768px～（タブレット）
------------------------------------*/
@media (min-width: 768px) {

  #confirm-block dd {
    margin-top: 2.5rem;
    text-align: center;
  }

}

/* 960px～（パソコン）
------------------------------------*/
@media (min-width: 960px) {

  #confirm-block dd {
    margin-top: 3rem;
  }

}

#form-btn-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/*****************************************
 * hover
 ****************************************/

@media (hover: hover) {

  input[type="submit"] {
    transition: all .3s ease-in-out;
  }

  input[type="submit"]:hover {
    color: var(--basecolor3);
    background: var(--basecolor2);
    border-color: var(--basecolor3);
  }

}