@charset "UTF-8";
/*
	Filename: contact
	Version: 1.0.1
*/
/*-----------------------------------------------------
	#contact
------------------------------------------------------*/
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

#contact {
  position: relative;
  height: auto;
  margin-top: 198px;
}
#contact p {
  margin-bottom: 52px;
  font-size: 20px;
  font-weight: 500;
}
.formArea {
  padding: 78px;
  /* border: 1px solid var(--brand-grey); */
  background-color: white;
}
.formArea table {
  width: 100%;
  margin-bottom: 10px;
}
.formArea th {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}
.formArea td {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}
.required_red {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #ad1707;
}
::-webkit-input-placeholder {
  font-size: 20px;
  font-weight: 500;
  color: #c7c7c7;
}
::-moz-placeholder {
  font-size: 20px;
  font-weight: 500;
  color: #c7c7c7;
}
:-ms-input-placeholder {
  font-size: 20px;
  font-weight: 500;
  color: #c7c7c7;
}
.formArea input[type="text"] {
  width: 100%;
  padding: 16.5px;
  background: #f5f5f5;
  border: none;
  border-radius: 2px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-family: var(--font-fourth);
  font-size: 20px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.formArea textarea {
  width: 100%;
  height: 632px;
  padding: 15px;
  background: #f5f5f5;
  border: none;
  border-radius: 2px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-family: var(--font-fourth);
  font-size: 20px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.formArea input[type="text"]:focus,
.formArea textarea:focus {
  border: 1px solid #1a1a1a;
}
.formArea input.error[type="text"],
.formArea textarea.error {
  border: 1px solid #ad1707;
}
.selectbtn select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.selectbtn select::-ms-expand {
  display: none;
}
.selectbtn.select_arrow {
  position: relative;
  border-radius: 2px;
  background: #f5f5f5;
}
.selectbtn.select_arrow::before {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 36px;
  height: 36px;
  content: "";
  pointer-events: none;
  background: url("../img/common/expand_more.png") no-repeat center center;
  background-size: cover;
}
.selectbtn.select_arrow select {
  padding: 15px;
  font-family: var(--fo);
  font-size: 20px;
  color: #1a1a1a;
}
.check {
  width: 100%;
  max-width: 476px;
  margin: 0 auto 15px;
  padding: 5px 10px 6px;
  border: 1px solid var(--brand-grey);
  border-radius: 2px;
}
.check label {
  cursor: pointer;
}
.check label a {
  border-bottom: 1px solid var(--brand-grey);
  font-weight: 700;
}
.formArea input[type="checkbox"] {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.formArea input[type="checkbox"] {
  cursor: pointer;
  padding-left: 30px; /*label手前にチェックボックス用の余白を開ける*/
  vertical-align: middle;
  position: relative;
}
.formArea input[type="checkbox"]::before,
.formArea input[type="checkbox"]::after {
  content: "";
  display: block;
  position: absolute;
}
.formArea input[type="checkbox"]::before {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid #1a1a1a;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  top: 50%;
  left: 5px;
}
.formArea input[type="checkbox"]:checked::before {
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
}
.formArea input[type="checkbox"]::after {
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  opacity: 0;
  height: 6px;
  width: 11px;
  transform: rotate(-45deg);
  top: -5px;
  left: 10px;
}
.formArea input[type="checkbox"]:checked::after {
  opacity: 1;
}
.formArea .link_btn_01 {
  width: 100%;
  max-width: 476px;
  margin: 50px auto 0;
  padding: 20px 16px;
  background: #1a1a1a;
  background-color: #d6d6d6;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}
.error {
  color: #ad1707;
}

.formArea .able {
  width: 100%;
  max-width: 476px;
  margin: 50px auto 0;
  padding: 20px 16px;
  background: #1a1a1a;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

@media screen and (max-width: 1040px) {
  #contact p {
    font-size: 18px;
  }
}

@media screen and (max-width: 750px) {
  #contact {
    margin-top: 158px;
  }
  #contact p {
    font-size: 14px;
  }
  .formArea {
    padding: 50px 20px;
    margin-bottom: 98px;
  }
  ::-webkit-input-placeholder {
    font-size: 16px;
  }
  ::-moz-placeholder {
    font-size: 16px;
  }
  :-ms-input-placeholder {
    font-size: 16px;
  }
  .formArea input[type="text"] {
    font-size: 16px;
  }
  .formArea textarea {
    font-size: 16px;
  }
  .selectbtn.select_arrow select {
    font-size: 16px;
  }
  .check {
    padding: 5px 5px 6px;
  }
  .check label {
    font-size: 12px;
  }
  .formArea input[type="checkbox"]::after {
    top: -3px;
    left: 10px;
  }
}