@charset "UTF-8";

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { color: #111; font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; font-size: 1.8rem; line-height: 1.8; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; transition: all .3s ease; -ms-interpolation-mode: bicubic; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
a { transition: all .3s ease; }
a:link { color: #; text-decoration: none; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: underline; }
a:hover img { opacity: 0.8; }

/* --------------------------------------------------
  汎用クラス
-------------------------------------------------- */

.d-block { display: block; }
.d-flex { display: flex; }
.d-none { display: none; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.clearfix::after { content: ''; display: block; clear: both; }

/* --------------------------------------------------
  カスタムプロパティ
-------------------------------------------------- */

:root {
  --primary: #000;
  --secondary: #fff;
}
/*
.root-sample {
  background: var(--primary);
  color: var(--secondary);
}
*/


/* --------------------------------------------------
  ダークモード時の設定
-------------------------------------------------- */

@media (prefers-color-scheme: dark) {
}


/* --------------------------------------------------
  ヘッダ
-------------------------------------------------- */

header {
  margin: 0 auto;
  padding: 20px;
  max-width: 1000px;
}
header h1 {
  font-size: 100%;
  text-align: center;
}
header h1 img {
  width: 100%;
  max-width: 60%;
}

/* --------------------------------------------------
  
-------------------------------------------------- */

main {
  margin: 0 auto;
  padding: 30px 15px;
  max-width: 1000px;
  border: solid 1px #ccc;
  border-width: 1px 0;
  display: block;
}
section {
}
h2 {
  font-size: 2.4rem;
}
form dl {
  margin-bottom: 20px;
}
form dt {
  padding: 5px 0;
  font-weight: bold;
}
form dd {
}
form input[type="text"] {
  padding: 10px;
  width: 100%;
  border: solid 1px #ccc;
  font-size: 100%;
}
form select {
  padding: 10px;
  font-size: 100%;
}
form #button {
  margin: 40px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}
form #button button {
  padding: 20px;
  min-width: 40%;
  background: #ddd;
  border-radius: 5px;
  color: #666;
  font-size: 2rem;
  font-weight: bold;
}
form #button button[type="submit"] {
  background: #1aaa3b;
  color: #fff;
}

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

@media screen and (max-width: 768px) {
  form table {
    border-bottom: solid 1px #ccc;
  }
  form th, form td {
    width: 100%;
    display: block;
  }
  form td {
    border-width: 0 1px;
  }
  form #button {
    flex-direction: column;
    align-items: center;
  }
  form #button button {
    width: 80%;
  }
}



/* --------------------------------------------------
  フッタ
-------------------------------------------------- */

footer {
  padding: 20px;
  font-size: 1.6rem;
  text-align: center;
}