@charset "utf-8";
/* CSS Document */
.p_contact__inner {
  padding: 60px 0
}
.p_contact__content {
  margin: 0 auto;
  max-width: 904px;
  padding-top: 40px;
  width: 100%
}
.p_contact .form {
  margin-top: 60px;
  padding-bottom: 60px;
  padding-top: 60px;
  position: relative
}
.p_contact .form_content {
  margin: 40px auto 0;
  max-width: 810px;
  width: 100%
}
.p_contact .form_item {
  font-family: Noto Sans JP, sans-serif
}
.p_contact .form_item + .form_item {
  margin-top: 30px
}
.p_contact .form_item__desc .desc_txt {
  font-weight: 400;
  line-height: 1.8;
  padding-top: 30px;
  text-align: center
}
.p_contact .form_label {
  display: flex;
  font-weight: 500;
  gap: 8px;
  position: relative
}
.p_contact .form_label.required:before, .p_contact .form_label.unrequired:before {
  align-items: center;
  border-radius: 4px;
  display: flex;
  font-size: .625rem;
  font-weight: 500;
  height: 24px;
  justify-content: center;
  left: 0;
  letter-spacing: .1em;
  line-height: 1;
  padding: 2px;
  position: relative;
  top: -3px;
  width: 48px
}
.p_contact .form_label.required:before {
  background-color: #0ca26c;
  color: #fff;
  content: "必須"
}
.p_contact .form_label.unrequired:before {
  background-color: #fff;
  border: 1px solid #c3c3c3;
  color: #c3c3c3;
  content: "任意"
}
.p_contact .form_wrap {
  margin-top: 5px;
  position: relative
}
.p_contact .form_wrap input, .p_contact .form_wrap select, .p_contact .form_wrap textarea {
  background-color: #fff;
  border: 1px solid #c3c3c3;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  outline: 0;
  padding: 5px 15px;
  width: 100%
}
.p_contact .form_wrap input::-moz-placeholder, .p_contact .form_wrap select::-moz-placeholder, .p_contact .form_wrap textarea::-moz-placeholder {
  color: #c3c3c3;
  font-weight: 500
}
.p_contact .form_wrap input::placeholder, .p_contact .form_wrap select::placeholder, .p_contact .form_wrap textarea::placeholder {
  color: #c3c3c3;
  font-weight: 500
}
.p_contact .form_wrap select {
  color: #c3c3c3;
  padding: 5px 30px 5px 15px;
  transition: opacity .3s ease
}
.p_contact .form_wrap select option, .p_contact .form_wrap select:valid {
  color: #333
}
.p_contact .form_wrap select[style*="pointer-events: none"] {
  cursor: not-allowed;
  opacity: .5
}
.p_contact .form_wrap textarea {
  height: 220px;
  resize: unset
}
.p_contact .form_input {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
.p_contact .form_input.w_318 {
  max-width: 318px;
  width: 100%
}
.p_contact .form_input.form_select {
  position: relative
}
.p_contact .form_input.form_select:after {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #d9d9d9;
  content: "";
  height: 0;
  position: absolute;
  right: 16px;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  width: 0
}
.p_contact .form_acceptance {
  align-items: center;
  display: flex;
  font-weight: 500;
  gap: 11px;
  justify-content: center;
  padding-top: 21px
}
.p_contact .form_acceptance input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 2px solid #c3c3c3;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  height: 20px;
  left: -1px;
  position: relative;
  width: 20px
}
.p_contact .form_acceptance input[type=checkbox]:after {
  background-color: #c3c3c3;
  border: 0;
  content: "";
  height: 6px;
  left: 2px;
  -webkit-mask-image: url(../images/common/icon_check.svg);
  mask-image: url(../images/common/icon_check.svg);
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  position: absolute;
  scale: .5;
  top: 2px;
  transition: .35s ease-out;
  width: 9px
}
.p_contact .form_acceptance input[type=checkbox]:checked:after {
  left: 4px;
  opacity: 1;
  scale: 1.4;
  top: 6px
}
.p_contact .form_acceptance__txt {
  display: flex
}
.p_contact .form_acceptance a {
  align-items: center;
  color: #2b343b;
  display: flex;
  gap: 5px;
  text-decoration: underline;
  text-underline-offset: 2px
}
.p_contact .form_submit {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  width: 100%
}
.p_contact .form_submit a, .p_contact .form_submit button, .p_contact .form_submit input {
  background-color: #38b08a;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  height: 48px;
  letter-spacing: .1em;
  margin: 0 auto;
  max-width: 261px;
  padding: 10px 20px 10px 10px;
  position: relative;
  width: 100%
}
.p_contact .form_submit a:after, .p_contact .form_submit button:after, .p_contact .form_submit input:after {
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
  border-top: 7px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0
}
@media screen and (min-width:768px) {
  .p_contact__inner {
    padding: 88px 0 82px
  }
  .p_contact__content {
    padding-top: 73px
  }
  .p_contact .form {
    margin-top: clamp(3.75rem, 31.712962963vw + -11.4722222222rem, 12.3125rem);
    padding-bottom: clamp(6.25rem, 18.5185185185vw + -2.6388888889rem, 11.25rem);
    padding-top: 80px
  }
  .p_contact .form_content {
    margin: 70px auto 0
  }
  .p_contact .form_item + .form_item {
    margin-top: 38px
  }
  .p_contact .form_item__desc .desc_txt {
    padding-top: 62px
  }
  .p_contact .form_label {
    flex-shrink: 0
  }
  .p_contact .form_label.required:before, .p_contact .form_label.unrequired:before {
    font-size: .875rem
  }
  .p_contact .form_wrap input, .p_contact .form_wrap select, .p_contact .form_wrap textarea {
    padding: 5px 9px
  }
  .p_contact .form_wrap select {
    height: 38px;
    padding: 7px 30px 6px 9px
  }
  .p_contact .form_wrap textarea {
    height: 179px
  }
  .p_contact .form_input {
    flex-wrap: nowrap;
    gap: 20px
  }
  .p_contact .form_input.form_select:after {
    right: 8px
  }
  .p_contact .form_acceptance {
    padding-top: 37px
  }
  .p_contact .form_acceptance input[type=checkbox]:after {
    height: 6px;
    width: 9px
  }
  .p_contact .form_acceptance a:hover {
    text-decoration: none
  }
  .p_contact .form_submit {
    padding-top: 35px
  }
  .p_contact .form_submit a:after, .p_contact .form_submit button:after, .p_contact .form_submit input:after {
    right: clamp(.5625rem, 1.6203703704vw + -.2152777778rem, 1rem)
  }
}