@charset "UTF-8";

#contact-form {
  width: 90%;
  max-width: 600px;
  margin: 0 auto 4em;
  padding: 0em;
  /* background-color: #eeeeee; */
}
@media screen and (max-width: 599px) {
  #contact-form {
    width: 100%;
    padding: 0em;
  }
}
.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::before {
  content: "必須";
  margin-right: 0.5em;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  font-size: 0.8em;
  background-color: #fba0ab;
  color: white;
  align-items: center;
}

.form-th.form-any::before {
  content: "任意";
  margin-right: 0.5em;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  font-size: 0.8em;
  background-color: #91c9ff;
  color: black;
  align-items: center;
}
select,
textarea,
input[type="file"],
input[type="email"],
input[type="tel"],
input[type="text"] {
  width: 100%;
}

input[type="date"] {
  width: 40%;
}
select[name="your-time1"],
select[name="your-time2"] {
	width: auto;
}
span[name="your-time1"],
span[name="your-time2"] {
  line-height: 1 !important;
}
input[type="date"],
input[type="file"] {
  line-height: 1.3 !important;
}
input[type="file"] {
  font-size: 16px;
}
select:focus-visible,
textarea:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="text"]:focus-visible {
  outline: solid 1px pink !important;
}

.form-acceptance {
  display: block;
  /* margin: 1em 0; */
  width: 100%;
  max-width: 300px;
  margin: 1em auto;
}
.form-acceptance a{
  color: blue;
  text-decoration: underline;
}
.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;
}
input[type="button"][value="戻る"] {
  display: block;
  width: 80%;
  margin: 1em auto 0 !important;
  padding: 1em;
  border-radius: 0.5em;
  color: black;
  transition: 0.3s;
}
@media screen and (max-width: 599px) {
  input[type="button"][value="戻る"],
  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;
}
.form-confirm .form-td {
  border: solid 1px #888;
  min-height: 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.contact-form-inner.__mt-2em {
  margin-top: 2em;
}

/*  */
.accordions {
  /* max-width: 600px; */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 50px 0px 0px;
}
.accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.accordion__menu {
  /* border: 1px solid pink; */
}
.accordion__button {
  appearance: none;
  text-align: inherit;
  width: 100%;
  background-color: var(--color_main);
  color: #fff;
  padding: 20px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  transition: 0.3s;
  position: relative;
}
.accordion__button:hover {
  opacity: 0.6;
}
.accordion__button::before{
  content: "";
  width: 2em;
  height: 1px;
  position: absolute;
  background-color: black;
  top:50%;
  right: 1em;
  transform: translateY(-50%);
  transition: 0.3s;
}
.accordion__button::after{
  content: "";
  width: 2em;
  height: 1px;
  position: absolute;
  background-color: black;
  top:50%;
  right: 1em;
  transform: translateY(-50%) rotate(90deg);
  transition: 0.3s;
}
.accordion__menu.open .accordion__button::before{
  transform: translateY(-50%) rotate(45deg);
}

.accordion__menu.open .accordion__button::after{
  transform: translateY(-50%) rotate(135deg);


}



.accordion__body {
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
}
.accordion__text {
  padding: 20px 0;
}