@charset "UTF-8";

#contact-form {
  width: 90%;
  max-width: 600px;
  margin: 0 auto 4em;
  padding: 2em;
  background-color: #eeeeee;
  color:#333;
}
@media screen and (max-width: 599px) {
  #contact-form {
    width: 100%;
    padding: 1em;
  }
}
.contact-form-inner {
  padding: 16px;
  background-color: white;
}
.form-tr {
  width: 100%;
  margin: 1em 0;
}
.form-th {
  display: inline-flex;
  margin-bottom: 0.2em;
}
.form-th.form-required::after {
  content: "必須";
  margin-left: 0.5em;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  font-size: 0.8em;
  background-color: red;
  color: white;
  align-items: center;
}

.form-th.form-any::after {
  content: "任意";
  margin-left: 0.5em;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  font-size: 0.8em;
  background-color: cyan;
  color: black;
  align-items: center;
}
textarea,
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="text"] {
  width: 100%;
}

textarea:focus-visible,
input[type="email"]:focus-visible,
input[type="date"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="text"]:focus-visible {
  outline: solid 1px blue !important;
}

.form-acceptance {
  margin: 1em 0;
}
.form-acceptance.wpcf7-form-control-wrap {
  width: fit-content;
  margin: 0 auto;
}
.form-acceptance span.wpcf7-list-item {
  width: 100%;
  margin-bottom: 1em;
}
.form-acceptance input[type="checkbox"] {
  display: inline-flex;
  width: 10%;
  margin-left: 0;
  align-items: center;
}
.form-acceptance span.wpcf7-list-item-label {
  display: inline-block;
  width: 85%;
}
.wpcf7-list-item-label::before {
  display: none;
}
.form-btn-send {
  text-align: center;
}
input[type="submit"] {
  width: 80%;
  margin: 0 auto;
  padding: 1em;
  border-radius: 0.5em;
  background-color: #faa500;
  color: black;
  transition: 0.3s;
  border: solid 1px #faa500;
}
@media screen and (max-width: 599px) {
  input[type="submit"] {
    width: 100%;
  }
}

input[type="submit"][disabled] {
  background-color: gray;
  color: white;
  /* transition: 0.3s; */
  border: solid 1px gray;
}
input[type="button"] {
  width: 100%;
  padding: 1em;
  border-radius: 0.5em;
  background-color: #aaaaaa;
  color: black;
  transition: 0.3s;
  border: solid 1px #aaaaaa;
}
input[type="button"]:hover,
input[type="submit"]:hover {
  opacity: 0.7;
  cursor: pointer;
}
/* 確認画面でtextareaの内容を改行も表示させる */
.form-td.form-textarea {
  white-space: pre-wrap;
}
/* form-acceptance-btnをボタン表示にする */
.form-btn-acceptance .wpcf7-list-item {
  width: 100%;
  margin: 0;
  text-align: center;
}

/* チェックボックスを非表示にする */
.form-btn-acceptance
  .wpcf7-form-control-wrap[data-name="your-acceptance-btn"]
  input[type="checkbox"] {
  display: none;
} /* ラベルをボタンのように見せる */
.form-btn-acceptance
  .wpcf7-form-control-wrap[data-name="your-acceptance-btn"]
  .wpcf7-list-item-label {
  display: inline-block;
  width: 80%;
  margin: 0 auto 2em;
  padding: 1em;
  color: #fff;
  background-color: grey;
  border: none;
  cursor: pointer;
  border-radius: 0.5em;
  text-align: center;
  transition: background-color 0.3s;
}
@media screen and (max-width: 599px) {
  .form-btn-acceptance
    .wpcf7-form-control-wrap[data-name="your-acceptance-btn"]
    .wpcf7-list-item-label {
    width: 100%;
  }
}

/* チェックボックスがオンの時のスタイル変更 */
.form-btn-acceptance
  .wpcf7-form-control-wrap[data-name="your-acceptance-btn"]
  input[type="checkbox"]:checked
  + .wpcf7-list-item-label {
  background-color: blue;
}
/*  */
.wpcf7-spinner {
  display: none;
}

.g-recaptcha div{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2em;
}