@charset "utf-8";

@layer form {
/* // Form
---------------------------------------------------------------------------------------------------- */
section.form {
  margin: 10%;
  padding: 0.5em;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;

  & h2 {
    font-size: 2rem;
  }
}
.night section.form {
  background-color: #fff1;
}

.form p {
  position: relative;
  margin: 1em;
  text-align: center;

  & > label > span {
    display: inline-block;
    width: 11em;
    text-align: right;
  }
  & > label >  input + b {
    display: inline-block;
    position: absolute;
    bottom: 2px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: visible;
    font-size: 12px;
  }
  & > input[type="submit"] {
    width: 5em;
  }
}
.form dl {
  margin: 1em;
  line-height: 2;
  > dd {
    padding-left: 1em;
  }
}

#convertform section.form {
  margin: 5% 10%;

  & section+section {
    margin-top: 1em;
    border-top-width: 1px;
    border-top-style: solid;
  }
  & h4 {
    font-size: 110%;
    &:before { content: "●"; }
  }
  & p {
    margin: .5em .5em 1em;
  }
  & section:last-child p:last-child {
    margin-bottom: .5em;
  }
  & dl {
    margin-left: .5em;
    + dl { margin-top: .8em; }
  }
  & dl dd + dt {
    margin-top: .2em;
  }
  & dl dt::before {
    content: "◆";
  }
  & dl dd {
    font-size: 95%;
    &::before {
      content: "・";
    }
    & i {
      font-style: normal;
      color: #5599aa;
    }
  }
}

/* ////////// LayerEnd ////////// */
}