/**/
/* .btn,
.wpcf7-submit {
  background: var(--btn-bg);
  color: var(--btn-color);
  border: none;
  position: relative;
  text-decoration: none;
}

.btn img {
  filter: var(--btn-svg);
}

.btn::before {
  content: "";
  background: var(--btn-border);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  border: 2px solid transparent;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
} */
/* 配色設定

====================================================*/
:root {
  --btn-color: #101010;
  --btn-svg: brightness(0) saturate(100%) invert(0%) sepia(9%) saturate(4%)
    hue-rotate(325deg) brightness(101%) contrast(97%);
  --svg-white: brightness(0) saturate(100%) invert(98%) sepia(97%) saturate(0%)
    hue-rotate(345deg) brightness(105%) contrast(104%);
  --svg-black: brightness(0) saturate(100%);
  --key-color: #00c1d2;
  --key-svg: brightness(0) saturate(100%) invert(65%) sepia(99%) saturate(3287%)
    hue-rotate(144deg) brightness(98%) contrast(101%);
  --main-color: #00c1d2;
  --pink: #ff73b1;
  --gray: #f0f2f4;

  --bg-close-blue: repeating-linear-gradient(
      45deg,
      rgba(0, 193, 210, 0.5),
      rgba(0, 193, 210, 0.5) 1px,
      transparent 0,
      transparent 10px
    ),
    repeating-linear-gradient(
      315deg,
      rgba(0, 193, 210, 0.5),
      rgba(0, 193, 210, 0.5) 1px,
      transparent 0,
      transparent 10px
    );

  --bg-close-pink: repeating-linear-gradient(
      45deg,
      rgba(255, 115, 177, 0.5),
      rgba(255, 115, 177, 0.5) 1px,
      transparent 0,
      transparent 4px
    ),
    repeating-linear-gradient(
      315deg,
      rgba(255, 115, 177, 0.5),
      rgba(255, 115, 177, 0.5) 1px,
      transparent 0,
      transparent 4px
    );

  --red: #ff3838;

  --font-color: #101010;
  --form-bg: #fff;
  --form-color: #101010;
  --border-color: #c3c6d1;
  --agreement-bg: rgba(195, 198, 209, 0.5);
  --checkbox-bg: #0b4679;
  --form-border-style: 1px solid #c3c6d1;
  --form-border-radius: 3px;
}




.link-form,
.btn,
.wpcf7 .wpcf7-submit {
  border: none;
  text-decoration: none;
  /* background: var(--key-color); */
  background: var(--pink);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 17px;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  max-width: 472px;
  width: 100%;
  border-radius: 8px;
  transition: 0.2s;
  position: relative;
}

.btn img {
  filter: var(--svg-white);
}
.link-form img {
  width: 20px;
  height: auto;
  margin-right: 10px;
}

/* マウスオーバーした際のデザイン */
.btn:hover,
.wpcf7 .wpcf7-submit:hover {
  transform: translate(0, 3px);
}
/* 
@media screen and (max-width: 786px) {
  #mainVisual h1 img {
    box-shadow: 0px 4px 10px 0px #00000040;
  }
  .wpcf7 .wpcf7-submit {
    font-size: 18px;
  }
} */
/* form

====================================================*/

.form-content {
  padding: 60px;
  border-radius: var(--form-border-radius);
  color: var(--form-color);
  border: 2px solid var(--border-color);
}

@media screen and (max-width: 800px) {
  .form-content {
    padding: 40px 0;
  border: none;
  }
}

.wpcf7 {
  width: 100%;
}

.field {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 40px;
  flex-direction: column;
}

.field:last-child {
  margin-bottom: 0;
}

.field .label {
  margin-bottom: 8px;
}

.field .label label,
.field .label p {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.92px;
}

.confirm_area > p {
  margin-bottom: 16px;
}

.multiform-label {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.92px;
}

.label p {
  width: 100%;
}

/* ---  フォーム : 必須  --- */
.required {
  font-size: 12px;
  font-weight: 300;
  padding: 2.5px 4px;
  background: var(--red);
  color: #ffffff;
  margin-left: 12px;
  border-radius: 2px;
}

.any {
  margin-left: 12px;
  white-space: nowrap;
}

/* ---  フォーム :   --- */
.input {
  width: 100%;
}

.input input,
.input select,
.input textarea {
  font-size: 16px;
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}
.input input,
.input select{
  min-height: 1.5rem;
  height: 44px;
}

/* ---  フォーム : radio / checkbox  --- */
.wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-radio .wpcf7-list-item,
.wpcf7-radio .wpcf7-list-item label {
  display: flex;
  align-items: center;
  margin: 0;
}

.wpcf7-radio .wpcf7-list-item label {
  cursor: pointer;
}
.wpcf7-checkbox {
  display: grid;
  gap: 8px;
}

.input p {
  width: 100%;
}

/* ---  フォーム : 姓名  --- */
.field.name_field {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.name_field .input p {
  display: flex;
  justify-content: space-between;
}

.name_field .input span.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.input-name {
  width: calc(50% - 8px);
}

.name_field .input span.wpcf7-form-control-wrap:last-child {
  margin-right: 0;
}

/* ---  個人情報の同意  --- */
.field_agreement .wpcf7-list-item {
  margin: 0 !important;
  display: block;
  /* width: 100%; */
}

input[type="checkbox"] {
  max-width: 20px;
  min-width: 20px;
}
input[type="checkbox"],
.field_agreement input[type="checkbox"] {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-color);
  background-color: #fff;
  margin-right: 8px;
  vertical-align: -5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 !important;
  font-size: 1px;
}
input[type="checkbox"]:checked,
.field_agreement input[type="checkbox"]:checked {
  background-color: var(--checkbox-bg);
  border-color: var(--checkbox-bg);
}
input[type="checkbox"]:checked:before,
.field_agreement input[type="checkbox"]:checked:before {
  position: absolute;
  top: -1px;
  left: 5px;
  transform: rotate(50deg);
  width: 8px;
  height: 16px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  content: "";
}

.field_agreement .wpcf7-list-item label {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 300;
  line-height: 27px;
  letter-spacing: 0em;
  text-align: left;

  background-color: #fff;
  width: 100%;
  padding: 8px 15px;
  cursor: pointer;
  border: 1px solid #d0d5d8;
  border-radius: 3px;
}

.field_agreement > p,
.field_agreement > p > a {
  letter-spacing: 0em;
  text-align: left;
  width: 100%;
  color: #030712;
}

.field_agreement > p > a {
  text-decoration: underline;
  font-weight: 600;
}

.field_agreement ul {
  list-style-position: inside;
}

.field_agreement ul a {
  color: #0b4679;
  text-decoration: underline;
}

/* .field_agreement {
  margin-bottom: 80px;
} */

.field_agreement ul {
  margin: 16px 0 0;
  font-size: 14px;
}

.field_agreement .wpcf7-not-valid-tip {
  margin-top: 0;
}

.wpcf7-form-control-wrap[data-name="acceptance"] {
  width: 100%;
}

.agreement-text {
  height: 100px;
  width: 100%;
  background: rgba(195, 198, 209, 0.3);
  padding: 16px;
  overflow-y: scroll;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* ---  エラー表示  --- */
.wpcf7-not-valid-tip {
  margin-top: 4px;
  color: var(--red) !important;
  font-size: 12px !important;
  text-align: left;
}

.wpcf7-response-output {
  background-color: #fff;
  text-align: center;
}

.submit p {
  display: flex;
  flex-direction: column;
}

.btn-back {
  background: var(--border-color) !important;
  color: #101010 !important;
}

.btn-back:hover {
  opacity: 0.8;
}

.wpcf7 .wpcf7-submit:disabled {
  opacity: 0.5;
  box-shadow: none;
  color: #000;
  background: var(--border-color);
}

.wpcf7 .wpcf7-submit:disabled:hover {
  box-shadow: none;
  transform: none;
}

.btn-back::after,
.wpcf7-submit::after {
  content: "";
  background-image: url(img/icon_arrow_down.svg);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 16px;
  position: absolute;
  right: 16px;
  transform: rotate(-90deg);
}

.btn-back::after {
  left: 16px;
  transform: rotate(90deg);
  filter: var(--svg-black);
}

/* ---  確認画面と完了画面を非表示  --- */
.confirm_area,
.thanks_area {
  display: none;
}

.confirm_area-card {
  background: #fff;
  padding: 8px 15px;
  border-radius: 3px;
  margin-bottom: 24px;
}

.confirm_area-card > p {
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}

/* ---  デフォルトのサンクスメッセージを非表示  --- */
.wpcf7-response-output {
  display: none;
}

@media screen and (max-width: 786px) {
  #form {
  }

  #form .section_ttl-body {
    margin-bottom: 40px;
  }

  .field {
    flex-direction: column;
    margin-bottom: 16px;
  }

  .field .label {
    width: 100%;
    margin-bottom: 8px;
    margin-right: 0;
  }

  .field .label label {
    justify-content: left;
    margin-right: 0;
  }

  .select,
  .input {
    width: 100%;
  }

  /* .input input,
  .select .wpcf7-form-control-wrap {
    padding: 8.5px 16px;
  } */

  .form-comment {
    margin-top: 56px;
  }

  .form_bottom {
    margin-bottom: 56px;
  }
}

.f-recaptcha-text {font-size: 12px;margin-top: 24px;}