@charset "UTF-8";

/***************************************************************************
  Reset
*/

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

img {
  vertical-align: middle;
}

/***************************************************************************
  HTML
*/

html {
  background-color: #fff;
  color: #000;
  font-family: "メイリオ", "Meiryo", sans-serif;
  font-size: 75%;
  line-height: 1.5;
  padding: 1.5em;
}

h1 {
  font-size: 2.25em;
  line-height: 1.33;
  margin-bottom: 0.67em;
  text-align: center;
}

h2 {
  font-size: 1.5em;
  line-height: 1;
  margin-bottom: 1em;
}

p {
  margin-bottom: 1.5em;
}

div.content {
  text-align: center;
}

div.content p,
div.content ul {
  text-align: left;
}

div.content p.error {
  color: #c00;
  font-weight: bold;
  text-align: inherit;
}

div.content form div.item {
  margin-bottom: 1.5em;
  text-align: left;
}

div.content form label {
  display: block;
  font-weight: bold;
}

div.content form input[type=text] {
  border: solid 1px #999;
  width: 100%;
}

div.content form input[type=text]:focus {
  border: solid 1px #039;
}

div.content form div.item span.error {
  color: #c00;
  display: block;
  font-weight: bold;
  text-align: inherit;
}

div.content p.submit {
  padding: 0.75em 1em 5.25em;
  text-align: center;
}

div.content input[type=submit] {
  background-color: #eee;
  border: solid 1px #eee;
  color: #000;
  font-weight: bold;
  padding: 0.75em 1em;
  outline-style: none;
}

div.content input[type=submit]:hover {
  border: solid 1px #999;
}

div.content input[type=submit]:focus {
  border: solid 1px #039;
}

div.content input[type=submit][disabled] {
  color: #999;
}

div.content input[type=submit][disabled]:hover,
div.content input[type=submit][disabled]:focus {
  border: solid 1px #eee;
}

div.content p.downloading {
  color: #c00;
  padding: 0.75em 1em;
  text-align: center;
}

div.content ul.note {
  list-style-type: disc;
  padding-left: 2em;
}

.hidden {
  visibility: hidden;
}

@media screen and (min-width: 768px) {

  html {
    font-size: 87.5%;
    padding-left: 0;
    padding-right: 0;
  }

  div.content {
    margin-left: auto;
    margin-right: auto;
    text-align: inherit;
    width: 93.75%;
  }

  div.content form {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
  }

}

@media screen and (min-width: 1024px) {

  html {
    font-size: 100%;
  }

  div.content form {
    max-width: 800px;
  }

}