form
{
  margin: 20px 16px;
}

/* View */
form > div > fieldset
{
  border: 3px double #a0a0a0;
  border-width: 3px 0px 0px 0px;
  margin: 0px;
  padding: 4px 0px;
}

form > div > fieldset > legend
{
  margin: 0px 0px 0px 24px;
  padding: 0px 12px;
  color: #707070;
}

form > div > fieldset > dl
{
  position: relative;
  margin: 0px 0px 8px 0px;
}

/* Label */
form > div > fieldset > dl > dt
{
  width: 160px;
  position: absolute;
  margin: 16px 0px 0px 0px;
  padding: 2px 0px;
}

form > div > fieldset > dl > dt > label,
form > div > fieldset > dl > dt > span
{
  display: block;
  width: 108px;
  line-height: 40px;
}

form > div > fieldset > dl > dt > label
{
  cursor: pointer;
}

form > div > fieldset > dl > dt > .required:after
{
  content: "必須";
  position: absolute;
  top: 0px;
  right: 0px;

  display: block;
  margin: 12px 0px;
  width: 48px;
  border-radius: 10px;
  background-color: #ff8040;

  line-height: 20px;

  text-align: center;
  font-size: 82%;
  color: #ffffff;
}

/* Input */
form > div > fieldset > dl > dd
{
  border-top: 1px dotted #ddd;
  padding: 12px 0px 2px 168px;
  margin: 0px 0px 8px 0px;
  min-height: 32px;
}

form > div > fieldset > dl > dt:first-child + dd
{
  border-top: 0px;
}

form > div > fieldset > dl > dd + dd
{
  border-top: 0px;
  padding-top: 2px;
  margin-top: -12px;
}

/* Description */
form > div > fieldset > dl > dd > p
{
  margin: 6px 0px;
  padding: 0px;
  font-size: 90%;
  color: #746f97;
}

/* Example */
form > div > fieldset > dl > dd > kbd
{
  display: block;
  margin: 6px 0px;
  font-size: 90%;
  font-family: inherit;
  padding: 0px;
  color: #318718;
}

form > div > fieldset > dl > dd > kbd:before
{
  content: "記入例：";
}

/* Sample */
form samp
{
  font-family: inherit;
}

form > div > fieldset > dl > dd samp
{
  background-color: #f8f8fa;
  padding: 6px 8px;
  display: block;
  white-space: pre-line;
  font-family: inherit;
  line-height: 1.4;
  min-height: 20px;
  color: #346881;
}

/* Error */
form > div > fieldset > dl > dd span.error,
form > div > fieldset > dl > dd mark
{
  display: block;
  background-color: Transparent;
  border: 0px;
  border-radius: 6px;
  margin: 3px 0px;
  padding: 0px 3px 0px 22px;
  line-height: 20px;
  font-size: 90%;
  color: #B15421;
}

form > div > fieldset > dl > dd mark:before
{
  content: url(icon/invalid.png);
  display: block;
  width: 20px;
  height: 20px;
  margin: 0px 0px -20px -24px;
}

/* Input List */
form > div > fieldset > dl > dd > ul
{
  margin: 6px 0px 0px 0px;
  padding: 0px;
  list-style-type: none;
}

form > div > fieldset > dl > dd > ul > li
{
  margin: 0px 0px 4px 0px;
  padding: 0px;
}

/* Input */
form input,
form select,
form textarea,
form button
{
  font-family: inherit;
  outline: 0px;
}

form input:placeholder-shown,
form input::-webkit-input-placeholder
{
  font-size: 80%;
  color: #AAA;
}

form input[type="text"],
form input[type="password"]
{
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 12px 8px;
  box-sizing: border-box;
  width: auto;
  max-width: 100% !important;
  line-height: 1;
  font-size: 120%;
}

form input[type="text"]:focus,
form input[type="password"]:focus
{
  border-color: #79A;
}

form input[type="radio"],
form input[type="checkbox"]
{
  width: 12px;
  height: 20px;
  margin: 2px 0px 6px 12px;
  vertical-align: middle;
}

form input[type="radio"] + label,
form input[type="checkbox"] + label
{
  display: inline-block;
  line-height: 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin: 0px 0px 6px -24px;
  padding: 2px 12px 2px 40px;
  cursor: pointer;
}

form input[type="radio"]:checked + label,
form input[type="checkbox"]:checked + label
{
  border-color: #ccc;
}

form input[type="radio"]:focus + label,
form input[type="checkbox"]:focus + label
{
  border-color: #79a;
}

form input[type="checkbox"]:disabled + label:after
{
  content: "（変更不可）";
  color: #a0a0a0;
  font-size: 80%;
}

form select
{
  height: 48px;
  font-size: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px 0px 0px 3px;
  padding: 0px 0px 0px 4px;
  margin: 4px 0px;
  cursor: pointer;
}

form select:focus
{
  border-color: #79a;
}

form input[type="submit"],
form button
{
  padding: 6px 20px;
  min-width: 120px;
  height: 40px;
  cursor: pointer;
  background-color: #4060a0;
  border: 1px solid #4060a0;
  border-radius: 5px;
  color: #ffffff;
  transition: background-color 0.2s linear;
}

form input[type="submit"].cancel,
form button.cancel
{
  background-color: #fff;
  color: #4060a0;
  border: 1px solid #6a87c4;
}

form input[type="submit"]:hover,
form button:hover
{
  background-color: #6483c1;
  border-color: #6483c1;
}

form input[type="submit"].cancel:hover,
form button.cancel:hover
{
  background-color: #dbe1f0;
  border-color: #92a4d1;
}

form dd > input[type="submit"],
form dd > button
{
  padding: 0px 16px;
  min-width: 80px;
  height: 32px;
}

form label.command
{
  display: inline-block;
  background-color: #4e928f;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 18px;
  font-size: 82%;
  color: #ffffff;
  transition: background-color 0.2s linear;
}

form label.command:hover
{
  background-color: #6fb3af;
}

form textarea
{
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px 0px 0px 3px;
  box-sizing: border-box;
  padding: 12px 8px;
  line-height: 1.5;
  font-size: 100%;
  vertical-align: middle;
  resize: vertical;
}

form textarea:focus
{
  border-color: #79a;
}

/* Commands */
form > div > menu
{
  margin: 4px 0px 24px 168px;
  padding: 0px;
  list-style-type: none;
  cursor: default;
}

form > div > menu.center
{
  margin-left: 0px;
  text-align: center;
}

form > div > menu > li
{
  display: inline-block;
  margin: 0px 6px 0px 0px;
}

/* Remarks */
form > div > ul
{
  background-color: #f6f4e0;
  border-radius: 4px;
  padding: 12px 32px;
  font-size: 90%;
  color: #606058;
}

form > div > ul > li
{
  margin: 0px 0px 4px 0px;
}