@charset "utf-8";

/* ----------------------------------------------------------
    リセット / 新要素設定
------------------------------------------------------------- */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, form, fieldset, legend, table, th, td, caption, a, article, aside, nav, section, figure, figcaption, footer, header, main, audio, canvas, video, menu, details, ul, li {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 100%;
    vertical-align: baseline;
    list-style: none;
}
fieldset, legend, img { border: 0; }
article, aside, nav, section, figure, figcaption, footer, header, main, menu, details { display: block; }
video, audio, canvas {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
audio:not([controls]) { display: none; }
[hidden] { display: none; }
* { box-sizing: border-box; }

/* ----------------------------------------------------------
    ベース
------------------------------------------------------------- */
body {
  background: #000;
  color: #fff;
  font-family: Meiryo UI, Yu Gothic, Hiragino Kaku Gothic Pro, Hiragino Sans, sans-serif;
  letter-spacing: 0.28em;
}

/* ----------------------------------------------------------
    要素
------------------------------------------------------------- */

.brand { margin: 0 auto; width: min(30%,150px); display: block; }
.small { font-size: 60%; display: block; }
h1.naked { font-weight: normal; text-align: center; }

.text { line-height: 1.5; text-align: justify; text-justify: inter-character; }
.error { color:#D55355; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 1px solid #555; border-left: none; border-right: none; }
table th, table td { vertical-align: middle; }
table th { font-weight: normal; white-space: nowrap; }
table td { width: 100%; }
table td input,
table td textarea { width: 100%; padding: 15px; border-radius: 5px; border: none; }
input[type="submit"] { background: #1d1d1d; color: #fff; border-radius: 5px; border: none; }
input[type="submit"].cancel { background: none; border: 1px solid #1d1d1d; }
.btn { width: 100%; text-align: center; }

footer { min-height: auto; background: #0f0f0f; }
footer a { line-height: 1; color: #fff; text-decoration: none; }
footer ul { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
footer li + li a { border-left: 1px solid #fff; }

@media (max-width: 768px) {
  section { padding: 5vh 8vw 10vh; }
  h1.naked { padding: 5vh 0 5vh; font-size: 1.5rem; line-height: 1.5; }
  .text { margin: 0 0 3vh; font-size: 0.9rem; }
  table { margin: 5vh 0; }
  table tr { border-bottom: 1px dotted #333; }
  table th, table td { width: 100%; display: block; }
  table th { padding: 3vh 0 1vh; font-size: 0.9rem; text-align: left; }
  table td { padding: 0 0 3vh; }
  table td input,
  table td textarea { padding: 3vw; }
  input[type="submit"] { padding: 5vw 30vw; font-size: 0.9rem; letter-spacing: 0.1em; }
  input[type="submit"].cancel { margin: 0 0 3vw; }
  footer { padding: 10vh 0; }
  footer a { padding: 0.5vw 1.5vw; font-size: 0.7rem; letter-spacing: 0.05em; }
}

@media (min-width: 769px) {
  section { margin: 0 auto; padding: 100px 0 200px; width: min(70%, 800px); }
  h1.naked { padding: 50px 0 80px; font-size: 2rem; }
  .text { margin: 0 0 30px; text-align: center; }
  table { margin: 50px 0; }
  table th, table td { padding: 30px; border-bottom: 1px dotted #333; }
  table td { padding-left: 0; }
  table td input,
  table td textarea { padding: 15px; }
  input[type="submit"] { padding: 20px 100px; font-size: 1.2rem; letter-spacing: 0.1em; cursor: pointer; transition: opacity 0.5s; }
  input[type="submit"]:hover { opacity: 0.5; }
  footer { padding: 10vh 0; }
  footer a { padding: 5px 20px; font-size: 0.8rem; transition: opacity 0.5s; }
  footer a:hover { opacity: 0.5; }
}