@charset "UTF-8";
:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
h2.title {
  margin-bottom: 2%;
  font-size: max(3.6rem, 20px);
}
h2.title span {
  display: block;
  font-size: max(1.6rem, 12px);
  color: #0C81C5;
  padding-left: max(1.6rem, 10px);
  position: relative;
}
h2.title span::before {
  content: "●";
  font-size: max(0.8rem, 5px);
  position: absolute;
  transform: translate(0%, -50%);
  top: 50%;
  left: 0;
}

#contact .first {
  padding: 6% 0;
}
#contact .first p {
  text-align: center;
  padding-bottom: 3%;
}
#contact form .form {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
  border-radius: max(2.5rem, 15px);
  padding: max(7%, 12px);
  margin-bottom: 6%;
}
#contact form .form .title {
  margin-bottom: max(7%, 12px);
}
#contact form .form .title p {
  text-align: center;
}
#contact form .form .form_q {
  display: flex;
  margin-bottom: 5%;
}
@media screen and (max-width: 768px) {
  #contact form .form .form_q {
    flex-direction: column;
  }
}
#contact form .form .form_q p {
  width: 30%;
  min-width: 180px;
  font-size: max(1.8rem, 14px);
  padding-top: 2%;
}
#contact form .form .form_q input,
#contact form .form .form_q textarea {
  flex: 1;
  box-shadow: inset 3px 3px 3px rgba(167, 167, 167, 0.08), inset 0px 0px 0px rgba(255, 255, 255, 0.6);
  border-radius: max(2.5rem, 10px);
  background-color: #F4F4F4;
  padding: max(0.6rem, 7px) max(1.8rem, 14px);
  font-size: max(1.8rem, 14px);
}
#contact form .form .form_q.agreement {
  justify-content: center;
  /* チェックボックスを非表示にする */
  /* チェックマークボックス */
  /* チェックされたときのマーク（擬似要素） */
  /* テキストスタイル */
}
#contact form .form .form_q.agreement .custom-checkbox input[type=checkbox] {
  display: none;
}
#contact form .form .form_q.agreement .custom-checkbox .checkmark {
  box-shadow: inset 3px 3px 3px rgba(167, 167, 167, 0.08), inset 0px 0px 0px rgba(255, 255, 255, 0.6);
  border-radius: max(2.5rem, 10px);
  background-color: #F4F4F4;
  width: max(3rem, 30px);
  height: max(3rem, 20px);
  aspect-ratio: 1/1;
  margin-right: 1.5rem;
  position: relative;
}
#contact form .form .form_q.agreement .custom-checkbox input[type=checkbox]:checked + .checkmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(0.8rem, 5px);
  height: max(1.6rem, 10px);
  border: solid #0C81C5;
  border-width: 0 max(0.3rem, 2px) max(0.3rem, 2px) 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
#contact form .form .form_q.agreement .custom-checkbox {
  font-size: max(1.8rem, 14px);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}
#contact form .form .submit button {
  width: 100%;
  background: #ffffff;
}