@charset "utf-8";

.noteList-item {
  position: relative;
  padding-left: 1.5em;
  font-size: 16px;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .noteList-item {
    font-size: min(3.9vw,30px);
    line-height: 1.73;
  }
}

.noteList-item::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "※";
}

.contactFormWrap {
  margin-top: 30px;
}

.formArea-txt {
  margin: 50px 0 20px;
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .formArea-txt {
    margin: min(9.33vw,70px) 0 min(4.66vw,35px);
    font-size: min(3.9vw,30px);
  }
}

.formField {
  display: flex;
  gap: 0 5px;
}
@media screen and (max-width: 768px) {
  .formField {
    flex-wrap: wrap;
    gap: min(1.33vw,10px) 0;
  }
}

.formField + .formField {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .formField + .formField {
    margin-top: min(2.66vw,20px);
  }
}

.formField-ttl {
  display: flex;
  align-items: center;
  gap: 0 12px;
  width: 280px;
  padding: 28px;
  background-color: #edf7fc;
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .formField-ttl {
    width: 100%;
    padding: min(2.53vw,19px);
    font-size: min(3.9vw,30px);
  }
}

.formField-input {
  width: calc(100% - 292px);
  padding: 20px;
  background-color: #f1f1f1;
}
@media screen and (max-width: 768px) {
  .formField-input {
    width: 100%;
    padding: min(2.53vw,19px);
    font-size: min(3.9vw,30px);
  }
}

#form-name .formField-input,
#form-kana .formField-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
@media screen and (max-width: 768px) {
  #form-name .formField-input,
  #form-kana .formField-input {
    gap: 0 min(2.66vw,20px);
  }
}

#form-name .formField-input div,
#form-kana .formField-input div {
  width: calc((100% - 20px) / 2);
}
@media screen and (max-width: 768px) {
  #form-name .formField-input div,
  #form-kana .formField-input div {
    width: calc((100% - min(2.66vw,20px)) / 2);
  }
}

.formField-input input:not([type="checkbox"]),
.formField-input textarea {
  width: 100%;
  padding: 11px 20px;
  border: none;
}
@media screen and (max-width: 768px) {
  .formField-input input:not([type="checkbox"]),
  .formField-input textarea {
    padding: min(2.4vw,18px) min(2.66vw,20px);
  }
}

.formField-contents {
  height: 280px;
  margin-bottom: 15px;
  padding: 20px;
  background-color: #e8e8e8;
  overflow-y: auto;
}
@media screen and (max-width: 768px) {
  .formField-contents {
    height: min(54.66vw,410px);
    padding: min(3.9vw,30px);
    margin-bottom: min(2.66vw,20px);
  }
}

@media screen and (max-width: 768px) {
  .formField-contents p {
    font-size: min(3.73vw,28px);
  }
}

.formField-contents p + p {
  margin-top: 1em;
}

.formField-txt {
  margin: 10px 0 5px;
}
@media screen and (max-width: 768px) {
  .formField-txt {
    margin: min(2.26vw,17px) 0 min(1.6vw,12px);
  }
}

.formField-note {
  margin-top: 5px;
  color: #999;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .formField-note {
    margin-top: min(1.6vw,12px);
    font-size: min(3.2vw,24px);
  }
}

.form-checkboxLabel {
  display: flex;
  align-items: center;
  gap: 0 12px;
  width: fit-content;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .form-checkboxLabel {
    gap: 0 min(2.13vw,16px);
    font-size: min(3.9vw,30px);
  }
}

.form-checkboxLabel:not(:last-of-type) {
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .form-checkboxLabel:not(:last-of-type) {
    
  }
}

.form-checkbox {
  position: relative;
  width: 30px;
  height: auto;
  aspect-ratio: 1;
  border: none;
  background-color: #fff;
  appearance: none;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .form-checkbox {
    width: min(5.33vw,40px);
  }
}

.form-checkbox:checked {
  background-color: #06b6d4;
}

.form-checkbox:checked::after {
  position: absolute;
  top: 10px;
  left: 9px;
  rotate: -45deg;
  width: 12px;
  height: auto;
  aspect-ratio: 12/6;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  content: "";
}
@media screen and (max-width: 768px) {
  .form-checkbox:checked::after {
    top: min(1.33vw,10px);
    left: min(1.2vw,9px);
    width: min(2.93vw,22px);
  }
}

.required {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  background-color: #e60012;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .required {
    margin-right: 0.2em;
    font-size: min(3.46vw,26px);
    line-height: 1.2;
    white-space: nowrap;
  }
}

.formArea-btnWrap {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .formArea-btnWrap {
    flex-wrap: wrap;
    gap: min(4vw,30px);
  }
}

.formArea-btn {
  display: block;
  width: 250px;
  margin: 0 auto;
  padding: 10px 20px;
  border: 2px solid #0071b3;
  border-radius: 9999px;
  background-color: #0071b3;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
@media screen and (max-width: 768px) {
  .formArea-btn {
    width: min(80vw,600px);
    padding: min(2.53vw,19px) min(4vw,30px);
    font-size: min(4.26vw,32px);
  }
}

@media screen and (min-width: 769px) {
  .formArea-btn:hover {
    background-color: #fff;
    color: #0071b3;
  }
}

.formArea-btn._back {
  border-color: #999;
  background-color: #999;
}

@media screen and (min-width: 769px) {
  .formArea-btn._back:hover {
    background-color: #fff;
    color: #999;
  }
}

.errmsg {
  width: 100%;
  margin-top: 0;
  color: #f00;
  font-weight: 500;
}

.confirmArea[aria-hidden="true"] {
  display: none;
}

.confirmTable {
  width: 100%;
  border-collapse: separate;
}

@media screen and (max-width: 768px) {
  .confirmTable {
    table-layout: fixed;
    border-collapse: collapse;
  }
}

@media screen and (max-width: 768px) {
  .confirmTable colgroup {
    display: none;
  }
}

.confirmTable th {
  padding: 20px 30px;
  background-color: #edf7fc;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .confirmTable th {
    display: block;
    width: 100%;
    margin-top: min(0.78vw,6px);
    padding: min(2.66vw,20px) min(4vw,30px);
    font-size: min(3.9vw,30px);
  }
}

.confirmTable th .required {
  margin-left: 12px;
}

.confirmTable td {
  width: 70%;
  padding: 20px 30px;
  background-color: #f1f1f1;
}
@media screen and (max-width: 768px) {
  .confirmTable td {
    display: block;
    width: 100%;
    margin-top: min(0.78vw,6px);
    padding: min(2.66vw,20px) min(4vw,30px);
    font-size: min(3.9vw,30px);
  }
}

.formArea-btnWrap .formArea-btn {
  margin: 0;
}

* + .heading-h2 {
  margin-top: 60px;
}

.contactLinkWrap {
  width: 50%;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .contactLinkWrap {
    width: 100%;
  }
}

.contactLink {
  position: relative;
  display: block;
  padding: 20px 30px 20px 20px;
  border: 1px solid #ccc;
  text-decoration: none;
}

.contactLink._img {
  display: flex;
  align-items: center;
  padding: 0 30px 0 0;
}

.contactLinkWrap .contactLink[target="_blank"]::after {
  position: absolute;
  top: 50%;
  right: 10px;
  rotate: 45deg;
  translate: 0 -50%;
  margin: 0;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  background: none !important;
}

.contactLink-img {
  width: 35%;
}

.contactLink-ttl {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.contactLink._img .contactLink-ttl {
  width: 65%;
}

.contactLink-txt {
  margin-top: 10px;
}

.thanksBox {
  max-width: 720px;
  margin: 0 auto;
}