.contact {
  margin-top: clamp(75px, 7.8vw, 150px);
  width: 100%;
}
.contact .wpcf7-response-output {
  display: none;
}

.contactInner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1920px;
  width: 100%;
  padding-left: clamp(16px, (16.7vw), 320px);
  padding-right: clamp(16px, (16.7vw), 320px);
}
@media (max-width: 767px) {
  .contactInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.contactIntro {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
  opacity: 1;
}
.contactIntro.-hide {
  opacity: 0;
}

.contactIntroTtl {
  font-size: clamp(1.4rem, (1vw), 2rem);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
}

.contactIntroTel {
  margin-top: clamp(15px, 1.3vw, 25px);
  font-size: clamp(3.5rem, (3.6vw), 7rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.008em;
  color: #00009b;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: 8px;
}
@media (max-width: 767px) {
  .contactIntroTel {
    text-align: center;
  }
}
.contactIntroTel::before {
  margin-top: clamp(5.6px, 0.4vw, 8px);
  content: "";
  display: block;
  width: clamp(31.4px, 2.3vw, 45px);
  min-width: clamp(31.4px, 2.3vw, 45px);
  height: clamp(31.4px, 2.3vw, 45px);
  background-image: url(../../img/philosophy/icon_tel.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.contactIntroTxt {
  margin-top: clamp(9px, 0.8vw, 15px);
  font-size: clamp(1.44rem, (0.9vw), 1.8rem);
  font-weight: 500;
  line-height: 1.4444444444;
  letter-spacing: 0.01em;
  text-align: center;
}

.contactIntroDesc {
  margin-top: clamp(60px, 6.3vw, 120px);
  font-size: clamp(1.4rem, (0.8vw), 1.6rem);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-align: center;
}

.contactForm {
  margin-top: clamp(49px, 3.6vw, 70px);
  width: 100%;
  transition: all 0.2s ease;
  opacity: 1;
}
.contactForm.-hide {
  opacity: 0;
}
.contactForm form {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.contactForm form p {
  display: contents;
}
.contactForm form .wpcf7-form-control-wrap {
  display: contents;
}
.contactForm form br {
  display: contents;
}

.contactFormItem {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: clamp(12.6px, 0.9vw, 18px);
}
.contactFormItem:not(:first-child) {
  margin-top: clamp(21px, 1.6vw, 30px);
}

.contactFormLabel {
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.008em;
}

.contactFormInput {
  width: 100%;
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.008em;
  padding: clamp(15.4px, 1.1vw, 22px) 1.5em;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  color: #333;
}
.contactFormInput::placeholder {
  color: #7d7d7d;
}

.contactFormTextarea {
  width: 100%;
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.008em;
  padding: clamp(15.4px, 1.1vw, 22px) 1.5em;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  height: clamp(141px, 14.7vw, 282px);
  resize: vertical;
  color: #333;
}
.contactFormTextarea::placeholder {
  color: #7d7d7d;
}

.contactPolicy {
  margin-top: clamp(35px, 2.6vw, 50px);
  border: 1px solid #949494;
  padding-top: clamp(16px, 1.2vw, 23px);
  padding-bottom: clamp(16px, 1.2vw, 23px);
  padding-left: clamp(23px, 1.7vw, 33px);
  padding-right: clamp(23px, 1.7vw, 33px);
  width: 100%;
  overflow-y: scroll;
  height: clamp(125.9px, 9.4vw, 180px);
}

.contactPolicyTtl {
  font-size: clamp(1.3rem, (0.7vw), 1.4rem);
  font-weight: bold;
  line-height: 2;
}

.contactPolicyTxt {
  font-size: clamp(1.2rem, (0.6vw), 1.2rem);
  font-weight: 500;
  line-height: 1.6666666667;
}
.contactPolicyTxt + .contactPolicyTtl {
  margin-top: clamp(7px, 0.5vw, 10px);
}

.contactFormCheck {
  margin-top: clamp(30px, 3.1vw, 60px);
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.contactFormAgree {
  position: relative;
  cursor: pointer;
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: bold;
  line-height: 1.4444444444;
  letter-spacing: 0.01em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  column-gap: clamp(12.6px, 0.9vw, 18px);
  position: relative;
}
.contactFormAgree .wpcf7-acceptance,
.contactFormAgree .wpcf7-list-item {
  display: contents;
}
.contactFormAgree::after {
  content: "";
  display: block;
  width: clamp(16px, 1vw, 20px);
  min-width: clamp(16px, 1vw, 20px);
  height: clamp(16px, 1vw, 20px);
  background-color: #f6f6f6;
  border: 1px solid #333333;
  border-radius: 3px;
}
.contactFormAgree input {
  opacity: 0;
}
.contactFormAgree input:checked + span::before {
  position: absolute;
  top: 60%;
  left: 1px;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: clamp(18.4px, 1.2vw, 23px);
  height: clamp(18.4px, 1.2vw, 23px);
  background-image: url(../../img/contact/icon_check.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.contactFormBtn {
  cursor: pointer;
  margin-top: clamp(35px, 2.6vw, 50px);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.01em;
  color: white;
  background-color: #00009b;
  text-align: center;
  border: 1px solid #00009b;
  border-radius: 8px;
  padding-top: clamp(17.5px, 1.3vw, 25px);
  padding-bottom: clamp(17.5px, 1.3vw, 25px);
  padding-left: clamp(32.9px, 2.4vw, 47px);
  padding-right: clamp(32.9px, 2.4vw, 47px);
  min-width: clamp(150px, 13vw, 250px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  display: inline-flex !important;
  column-gap: clamp(10.5px, 0.8vw, 15px);
  transition: all 0.1s ease;
  pointer-events: none;
  opacity: 0.3;
}
.contactFormBtn.-allow {
  pointer-events: auto;
  opacity: 1;
}
.contactFormBtn::after {
  content: "";
  display: block;
  width: clamp(7px, 0.5vw, 10px);
  height: clamp(7px, 0.5vw, 10px);
  background-color: white;
  border-radius: 50%;
  transition: all 0.1s ease;
}
.contactFormBtn:hover {
  background-color: whitesmoke;
  color: #00009b;
  opacity: 1;
}
.contactFormBtn:hover::after {
  background-color: #00009b;
}

.contactConfirm {
  background-color: #f2f3fa;
  padding-top: clamp(50px, 7.8vw, 150px);
  padding-bottom: clamp(50px, 5.2vw, 100px);
  padding-left: clamp(16px, 5.2vw, 100px);
  padding-right: clamp(16px, 5.2vw, 100px);
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
  opacity: 1;
}
.contactConfirm.-hide {
  opacity: 0;
}

.contactConfirmTtl {
  font-size: clamp(2.5rem, (2.6vw), 5rem);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.008em;
  color: #00009b;
  text-align: center;
}

.contactConfirmTxt {
  margin-top: clamp(21px, 1.6vw, 30px);
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: 500;
  line-height: 1.4444444444;
  letter-spacing: 0.01em;
  text-align: center;
}

.contactConfirmForm {
  margin-top: clamp(35px, 2.6vw, 50px);
  width: 100%;
}

.contactConfirmItem {
  width: 100%;
}
.contactConfirmItem:not(:first-of-type) {
  margin-top: clamp(21px, 1.6vw, 30px);
}

.contactConfirmLabel {
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.008em;
}

.contactConfirmInput,
.contactConfirmTextarea {
  padding-top: clamp(25.2px, 2.2vw, 42px);
  padding-bottom: clamp(14px, 1vw, 20px);
  padding-left: clamp(15px, 1.6vw, 30px);
  padding-right: clamp(15px, 1.6vw, 30px);
  width: 100%;
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: 500;
  line-height: 1.5555555556;
  letter-spacing: 0.008em;
  color: #7d7d7d;
  background: none;
  border: none;
  border-bottom: 1px solid #7d7d7d;
  resize: none;
  pointer-events: none;
}

.contactConfirmTextarea {
  height: clamp(141px, 14.7vw, 282px);
}

.contactConfirmBottom {
  margin-top: clamp(50px, 5.2vw, 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(14px, 1vw, 20px);
}

.contactConfirmBtn {
  cursor: pointer;
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.01em;
  color: white;
  background-color: #00009b;
  text-align: center;
  border: 1px solid #00009b;
  border-radius: 8px;
  padding-top: clamp(17.5px, 1.3vw, 25px);
  padding-bottom: clamp(17.5px, 1.3vw, 25px);
  padding-left: clamp(32.9px, 2.4vw, 47px);
  padding-right: clamp(32.9px, 2.4vw, 47px);
  min-width: clamp(150px, 13vw, 250px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(10.5px, 0.8vw, 15px);
  transition: all 0.1s ease;
}
@media (max-width: 767px) {
  .contactConfirmBtn {
    width: calc((100% - clamp(14px, 1vw, 20px)) / 2);
    padding-left: 0;
    padding-right: 0;
  }
}
.contactConfirmBtn:hover {
  background-color: whitesmoke;
  color: #00009b;
  opacity: 1;
}
.contactConfirmBtn:hover::after, .contactConfirmBtn:hover::before {
  background-color: #00009b !important;
}
.contactConfirmBtn.-back::before {
  content: "";
  display: block;
  width: clamp(7px, 0.5vw, 10px);
  height: clamp(7px, 0.5vw, 10px);
  background-color: white;
  border-radius: 50%;
  transition: all 0.1s ease;
}
.contactConfirmBtn.-submit::after {
  content: "";
  display: block;
  width: clamp(7px, 0.5vw, 10px);
  height: clamp(7px, 0.5vw, 10px);
  background-color: white;
  border-radius: 50%;
  transition: all 0.1s ease;
}

.contactFormSubmit {
  position: absolute;
  left: -200vw;
  opacity: 0;
}

.contactComplete {
  padding-top: clamp(50px, 7.8vw, 150px);
  padding-bottom: clamp(50px, 5.2vw, 100px);
  padding-left: clamp(16px, 5.2vw, 100px);
  padding-right: clamp(16px, 5.2vw, 100px);
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
  opacity: 1;
}
.contactComplete.-hide {
  opacity: 0;
}

.contactCompleteTtl {
  font-size: clamp(2.5rem, (2.6vw), 5rem);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.008em;
  color: #00009b;
  text-align: center;
}

.contactCompleteTxt {
  margin-top: clamp(21px, 1.6vw, 30px);
  font-size: clamp(1.26rem, (0.9vw), 1.8rem);
  font-weight: 500;
  line-height: 1.4444444444;
  letter-spacing: 0.01em;
  text-align: center;
}