:root {
  --tablewidth: 82%;
  --tableborderwidth: 3px;
  --tablebordercolor: #000;
  --thtdborderwidth: 1px;
  --thtdbordercolor: #ccc;
  --thbgcolor: #EFEFEF;
  --tdbgcolor: #fff;
  --textfieldbgcolor: #eee;
  --inputfieldfontsize: 16px;
  --labelfontsize: 16px;
}

.mailform {}

.mailform table {
  border: var(--tableborderwidth) solid var(--tablebordercolor);
  border-collapse: collapse;
}

.mailform td label {
  line-height: 1.5;
}

.mailform tr>* {
  border: var(--thtdborderwidth) solid var(--thtdbordercolor);
  font-size: var(--labelfontsize);
}

.mailform th {
  padding: 10px 5px 10px 20px;
  position: relative;
  background: var(--thbgcolor);
  color: #111111;
  font-family: "IBM Plex Sans JP", sans-serif;
  border: none;
}

.mailform th p,
.mailform td p {
  margin: 0 !important;
  padding: 0 !important;
}

.mailform th span:not([class*=form7]) {
  position: absolute;
  background: red;
  color: white;
  top: 50%;
  right: 10px;
  margin-top: -11px;
  line-height: 1;
  padding: 3px 5px;
  font-size: 80%;
  font-weight: normal;
}

.mailform td {
  padding: 8px 0;
  line-height: 1;
  background: var(--tdbgcolor);
}

.mailform input[type="text"],
.mailform input[type="email"] {
  width: calc(100% - 32px);
  margin: 0 16px;
  font-size: var(--inputfieldfontsize);
  background: var(--textfieldbgcolor);
  appearance: none;
  border: 1px solid var(--thtdbordercolor);
  padding: 5px;
}

.mailform input[type="radio"],
.mailform input[type="checkbox"] {
  margin-right: 5px;
}

.mailform input.age {
  width: 4em;
}

.mailform textarea {
  width: calc(100% - 32px);
  margin: 0 16px;
  font-size: var(--inputfieldfontsize);
  background: var(--textfieldbgcolor);
  appearance: none;
  border: 1px solid var(--thtdbordercolor);
  padding: 5px;
  height: 6em;
}

.mailform ul.att {
  font-size: 12.8px;
  font-family: "IBM Plex Sans JP", sans-serif;
  text-align: left;
  margin-bottom: 15px;
  line-height: 1.5;
  color: #333333;
  padding: 0 16px;
}

.mailform ul.att li {
  list-style: none;
}

.mailform ul.att p {
  margin: 0;
  padding: 0;
}

.mailform .order-check td {
  text-align: center;
  padding-bottom: 10px;
}

.mailform .order-check .clear {
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mailform .order-submit,
.mailform .order-finish {
  text-align: center;
  margin-top: -30px;
  position: relative;
  z-index: 11;
}

.mailform :is(input[type="image"], button) {
  appearance: none !important;
  border: none;
  border-radius: none;
  background: none;
  cursor: pointer;
}

.mailform :disabled {
  opacity: 1 !important;
}

.mailform :is(input[type="image"], button).disabled {
  pointer-events: none;
  filter: grayscale(1);
}

@media screen and (min-width: 501px) {
  .mailform table {
    width: var(--tablewidth);
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 500px) {
  .mailform table {
    margin-left: 15px;
    margin-right: 15px;
  }
}