/*--------------------
form
--------------------*/
#form .inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 868px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 80px;
  padding-bottom: 79.5px;
}
#form .description {
  text-align: center;
  padding-bottom: 86px;
}
#form table {
  width: 100%;
}
#form tr:first-child th,
#form tr:first-child td {
  border-top: 1px dashed #fff;
}
#form th,
#form td {
  border-bottom: 1px dashed #fff;
  padding-top: 32px;
  padding-bottom: 32px;
}
#form th,
#form td input,
#form td textarea {
  font-weight: 400;
  line-height: 2;
}
#form th {
  text-align: left;
}
#form th .asterisk {
  color: #F37E9C;
  padding-left: 7px;
}
#form td {
  width: 67.2811%;
}
#form td input, 
#form td textarea {
  width: 100%;
  color: white;
  background-color: rgba(var(--darkBlue-rgb), 0.3);
  border: none;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
#form td .textarea {
  height: 320px;
  line-height: 1.5;
}
#form .check td {
  text-align: center;
  border-bottom: none;
  padding-top: 56.6px;
  padding-bottom: 56.5px;
}
#form .custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
#form .custom-checkbox input[type="checkbox"] {
  display: none;
}
#form .custom-checkbox .checkmark {
  width: 24px;              /* ← チェックボックスの横幅 */
  height: 24px;             /* ← チェックボックスの縦幅 */
  border: 1px solid #fff;   /* ← 枠の色と太さ */
  background-color: transparent;
  position: relative;
  transition: background-color 0.2s ease;
}
/* チェックが入った状態の見た目 */
#form .custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 7px;               /* チェックマークの位置 */
  top: 3px;
  width: 6px;
  height: 12px;
  /* border: solid #00ffcc;   ← チェックマークの色 */
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#form .txt_checkmark {
  padding-left: 16px;
  font-size: 1rem;
  line-height: 2;
}
#form .btn_container {
  display: flex;
  justify-content: center;
}
#form .submit {
  color: #3A7DC1;
  line-height: 2;
  border: none;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 30px;
  padding-right: 30px;
}
@media screen and (max-width: 600px) {
  #form .inner {
    width: 87.2%;
    padding-top: 96px;
    padding-bottom: 144px;
    padding-left: 0;
    padding-right: 0;
  }
  #form .description {
    text-align: left;
    padding-bottom: 58px;
  }
  #form tr {
    display: flex;
    flex-wrap: wrap;
  }
  #form th,
  #form td {
    width: 100%;
  }
  #form th {
    border: none;
    padding-top: 24px;
    padding-bottom: 8px;
  }
  #form td {
    padding-top: 8px;
    padding-bottom: 24px;
  }
  #form tr:first-child td {
    border-top: none;
  }
  #form .check td {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}