.top {
  height: 520px;
}
h2 {
  opacity: 1;
  transform: translateX(0%);
}
th {
  background: #efefef;
}
th,
td {
  padding: 10px;
}
tr {
  border-bottom: dotted lightgray 1px;
}
#form h2 {
  text-align: center;
  margin-bottom: 20px;
}
textarea {
  width: 100%;
  height: 200px;
}
.attension {
  color: #fff;
  background: #d92b2b;
  padding: 2px 4px;
  font-size: 0.8rem;
  border-radius: 3px;
  float: right;
}
@media (max-width: 767px) {
  .top {
    height: 400px;
  }
  th,
  td {
    display: block;
    padding: 10px;
    width: 100%;
  }
  input[type="text"] {
    width: calc(100% - 28px);
    font-size: 16px;
  }
}
@media (min-width: 767px) {
  #form {
    width: 80%;
    margin: 20px 10%;
  }
  th {
    width: 34%;
  }
  th,
  td {
    padding: 20px;
  }
  input[type="text"] {
    width: 45%;
  }
}
table {
  border-collapse: collapse;
  table-layout: fixed;
  border: solid 1px lightgrey;
  width: 100%;
  padding: 10px;
}
input[type="text"],
textarea {
  border: lightgray solid 1px;
  border-radius: 5px;
}
#form p {
  margin-bottom: 0;
  font-size: 14px;
}

.focus li {
  display: flex;
  align-items: flex-start;
}
.focus i {
  position: relative;
  top: 7px;
}