@charset "UTF-8";
.underMV__wrapper {
  background-image: url(../images/under_MV_contact.jpg);
}

/* progress */
.progress {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px 10px;
}

.progress h2 {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}

.progress h2 span {
  display: block;
  font-size: 14px;
}

.progress__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress__bar .progress {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 20px;
  color: #c6c6c6;
}

.progress__bar .progress span {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 20px;
  border-radius: 50%;
  background-color: #c6c6c6;
}

.progress__bar .progress.input {
  color: unset;
}

.progress__bar .progress.input span {
  background-color: #2e528d;
}

.progress__bar .border {
  flex: 1;
  width: 100%;
  height: 1px;
  background-color: #c6c6c6;
}

.progress__bar .check {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 20px;
  color: #c6c6c6;
}

.progress__bar .check span {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 20px;
  border-radius: 50%;
  background-color: #c6c6c6;
}

.progress__bar .check.input, .progress__bar .check.confirm, .progress__bar .check.done {
  color: unset;
}

.progress__bar .check.input span, .progress__bar .check.confirm span, .progress__bar .check.done span {
  background-color: #2e528d;
}

.progress__bar .border-check {
  background-color: #000;
}

/* form */
.form {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 20px 85px;
}

.form table {
  width: 100%;
  margin-bottom: 35px;
}

.form table tr {
  border-bottom: dotted 1px #d6d6d6;
  vertical-align: middle;
}

.form table tr:first-of-type {
  border-top: dotted 1px #d6d6d6;
}

.form table tr th {
  width: 250px;
  font-size: 18px;
  padding: 10px 0px 10px 15px;
  vertical-align: middle;
}

.form table tr th p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.form table tr th .required {
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  margin-right: 10px;
  background: #fbf2f2;
  color: #af3f3f;
}

.form table tr td {
  font-size: 18px;
  line-height: 200%;
  padding: 10px 10px;
}

.form table tr td p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form table tr td p:not(:last-of-type) {
  margin-bottom: 15px;
}

.form input[type="email"],
.form input[type="text"] {
  width: 100%;
  max-width: 328px;
  height: 45px;
  padding: 5px 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form input[type="tel"] {
  width: unset;
}

.form select {
  max-width: 328px;
  width: 80%;
  height: 45px;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ccc;
  text-align: center;
}

.form textarea {
  padding: 1em;
  width: 100%;
  height: 285px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

.form-button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  max-width: 480px;
  width: 90%;
  height: 72px;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.2s;
}

.form-button::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2vw;
  content: "";
  width: 20.5px;
  height: 16px;
  background-size: cover;
  background-image: url('data:image/svg+xml;utf8,<svg id="_2" data-name="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 401.88"><path fill="%23ffffff" class="cls-1" d="m510.68,57.21c-2.31-11.63-7.46-22.26-14.66-31.05-1.52-1.92-3.1-3.63-4.82-5.35-12.76-12.82-30.66-20.81-50.21-20.81H71.02c-19.56,0-37.4,8-50.21,20.81-1.72,1.71-3.3,3.43-4.82,5.35-7.2,8.79-12.36,19.43-14.6,31.05-.92,4.49-1.39,9.12-1.39,13.81v259.83c0,9.97,2.11,19.55,5.88,28.2,3.5,8.26,8.65,15.73,14.93,22,1.59,1.59,3.17,3.04,4.89,4.49,12.29,10.17,28.15,16.32,45.32,16.32h369.96c17.18,0,33.11-6.14,45.32-16.38,1.72-1.39,3.3-2.84,4.89-4.43,6.27-6.27,11.42-13.74,14.99-22v-.06c3.77-8.65,5.81-18.17,5.81-28.14V71.02c0-4.69-.46-9.32-1.32-13.81ZM46.51,46.51c6.35-6.34,14.87-10.18,24.51-10.18h369.96c9.65,0,18.24,3.84,24.51,10.18,1.12,1.13,2.18,2.39,3.11,3.64l-193.91,169c-5.35,4.69-11.95,7-18.7,7s-13.28-2.32-18.7-7L43.47,50.07c.86-1.25,1.92-2.44,3.04-3.57Zm-10.17,284.35V87.67l140.32,122.41-140.25,122.29c-.07-.46-.07-.99-.07-1.51Zm404.65,34.68H71.02c-6.28,0-12.16-1.65-17.17-4.55l147.98-128.96,13.82,12.02c11.56,10.05,26.03,15.13,40.36,15.13s28.87-5.09,40.43-15.13l13.81-12.02,147.92,128.96c-5.02,2.9-10.9,4.55-17.18,4.55Zm34.69-34.68c0,.53,0,1.05-.07,1.52l-140.25-122.21,140.32-122.42v243.12Z"/></svg>');
}

.form-button:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg id="_2" data-name="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 401.88"><path fill="%232e528d" class="cls-1" d="m510.68,57.21c-2.31-11.63-7.46-22.26-14.66-31.05-1.52-1.92-3.1-3.63-4.82-5.35-12.76-12.82-30.66-20.81-50.21-20.81H71.02c-19.56,0-37.4,8-50.21,20.81-1.72,1.71-3.3,3.43-4.82,5.35-7.2,8.79-12.36,19.43-14.6,31.05-.92,4.49-1.39,9.12-1.39,13.81v259.83c0,9.97,2.11,19.55,5.88,28.2,3.5,8.26,8.65,15.73,14.93,22,1.59,1.59,3.17,3.04,4.89,4.49,12.29,10.17,28.15,16.32,45.32,16.32h369.96c17.18,0,33.11-6.14,45.32-16.38,1.72-1.39,3.3-2.84,4.89-4.43,6.27-6.27,11.42-13.74,14.99-22v-.06c3.77-8.65,5.81-18.17,5.81-28.14V71.02c0-4.69-.46-9.32-1.32-13.81ZM46.51,46.51c6.35-6.34,14.87-10.18,24.51-10.18h369.96c9.65,0,18.24,3.84,24.51,10.18,1.12,1.13,2.18,2.39,3.11,3.64l-193.91,169c-5.35,4.69-11.95,7-18.7,7s-13.28-2.32-18.7-7L43.47,50.07c.86-1.25,1.92-2.44,3.04-3.57Zm-10.17,284.35V87.67l140.32,122.41-140.25,122.29c-.07-.46-.07-.99-.07-1.51Zm404.65,34.68H71.02c-6.28,0-12.16-1.65-17.17-4.55l147.98-128.96,13.82,12.02c11.56,10.05,26.03,15.13,40.36,15.13s28.87-5.09,40.43-15.13l13.81-12.02,147.92,128.96c-5.02,2.9-10.9,4.55-17.18,4.55Zm34.69-34.68c0,.53,0,1.05-.07,1.52l-140.25-122.21,140.32-122.42v243.12Z"/></svg>');
}

.form-button input {
  font-size: 18px;
  background-color: #2e528d;
  border: solid 1px #2e528d;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  cursor: pointer;
  transition: 0.2s;
  color: #fff;
}

.form-button input:hover {
  background-color: #fff;
  border-color: #2e528d;
  color: #2e528d;
}

/* thanks */
.thanks {
  text-align: center;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  /* progressスマホ */
  .progress {
    padding: 30px 10px;
  }
  .progress h2 {
    font-size: 14px;
  }
  .progress h2 span {
    font-size: 10px;
  }
  .progress__bar .progress {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
  }
  .progress__bar .progress span {
    width: 8px;
    height: 8px;
    margin-right: 10px;
  }
  /* formスマホ */
  .form {
    padding: 0 10px 30px;
  }
  .form table {
    margin-bottom: 30px;
  }
  .form table tr th {
    max-width: 250px;
    width: 100%;
    font-size: 16px;
    padding: 10px 0px 10px 5px;
  }
  .form table tr th p {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .form table tr th .required {
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
    background: #f8e2e2;
    color: #af3f3f;
  }
  .form table tr td {
    font-size: 15px;
    line-height: 200%;
    padding: 0 0 10px;
  }
  .form table tr td p {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .form table tr td p:not(:last-of-type) {
    margin-bottom: 15px;
  }
  .form table tr th,
  .form table tr td {
    display: block;
  }
  .form input[type="email"],
  .form input[type="text"] {
    width: 100%;
    max-width: 328px;
    height: 45px;
    padding: 5px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .form input[type="tel"] {
    width: unset;
  }
  .form select {
    max-width: 328px;
    width: 80%;
    height: 45px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ccc;
    text-align: center;
  }
  .form textarea {
    padding: 1em;
    width: 100%;
    height: 200px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
  }
  .form-button {
    max-width: 420px;
    width: 90%;
    height: 60px;
  }
  .form-button::before {
    left: 4vw;
  }
  .form-button input {
    font-size: 16px;
  }
}