/* 情報システム取引者育成プログラム 受講申込 */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic", sans-serif;
  background: #f4f6f9;
  color: #333;
  line-height: 1.7;
  font-size: 15px;
}
a { color: #1f4e8c; }
.inner { max-width: 920px; margin: 0 auto; padding: 0 16px; }

.test-env { background: #c0392b; color: #fff; text-align: center; font-weight: bold; padding: 8px 16px; }
header.site { background: #1f4e8c; }
header.site a { display: block; color: #fff; text-decoration: none; padding: 16px 0; letter-spacing: .05em; }
main.inner { background: #fff; margin: 24px auto; padding: 24px 28px 32px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
footer.site { text-align: center; font-size: 12px; color: #999; padding: 0 16px 24px; }

h1 { font-size: 22px; color: #1f4e8c; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #e3e8f0; }
h2 { font-size: 17px; color: #1f4e8c; margin: 28px 0 10px; padding-left: 10px; border-left: 4px solid #1f4e8c; }

.steps { display: flex; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: step; }
.steps li { flex: 1; text-align: center; font-size: 13px; padding: 6px 4px; background: #eef2f8; color: #777; position: relative; }
.steps li + li { margin-left: 2px; }
.steps li::before { counter-increment: step; content: counter(step) ". "; }
.steps li.done { background: #d5e0f0; color: #1f4e8c; }
.steps li.current { background: #1f4e8c; color: #fff; font-weight: bold; }

.error { color: #c0392b; background: #fdf0ee; border-left: 4px solid #c0392b; padding: 10px 14px; }
.field-error { color: #c0392b; font-size: 13px; margin: 4px 0 0; }
.note, .hint { font-size: 13px; color: #666; }
.hint { margin: 4px 0 0; }
.charge-now { margin: 6px 0 0; }
.charge-now strong { color: #1f4e8c; font-size: 16px; }
.req { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 11px; color: #fff; background: #c0392b; border-radius: 3px; vertical-align: middle; font-weight: normal; }
.badge { display: inline-block; padding: 0 6px; font-size: 12px; color: #fff; background: #888; border-radius: 3px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
th, td { border: 1px solid #d8dee8; padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #f2f5fa; font-weight: normal; white-space: nowrap; }
td.num { text-align: right; white-space: nowrap; }
td.check { text-align: center; width: 4em; }
td.check input { width: 20px; height: 20px; }
tr.inactive td { color: #999; background: #fafafa; }
tr.total td { font-weight: bold; background: #f7f9fc; }
table.detail th, table.form th { width: 11em; }

table.form input[type=text], table.form input[type=email], table.form input[type=tel], table.form select {
  font: inherit; padding: 6px 8px; border: 1px solid #b8c2d0; border-radius: 4px; max-width: 100%;
}
table.form input[type=text], table.form input[type=email], table.form input[type=tel] { width: 100%; }
table.form input.short { width: 12em; }
table.form td.pair label { display: inline-block; margin-right: 12px; }
table.form td.pair input[type=text] { width: 9em; }

.policy { font-size: 13px; background: #f7f9fc; border: 1px solid #d8dee8; padding: 12px 16px; max-height: 260px; overflow-y: auto; }
.policy p { margin: 0 0 8px; }
.agree { font-weight: bold; margin: 14px 0; }
.agree input { width: 18px; height: 18px; vertical-align: middle; }

.buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 8px; }
.btn { display: inline-block; font: inherit; padding: 10px 24px; border: 1px solid #1f4e8c; border-radius: 4px; background: #fff; color: #1f4e8c; text-decoration: none; cursor: pointer; }
.btn.primary { background: #1f4e8c; color: #fff; font-weight: bold; }
.btn.primary:hover { background: #173d6e; }
.btn.small { padding: 2px 12px; font-size: 13px; white-space: nowrap; }
.btn:disabled { opacity: .6; cursor: wait; }

.contact { margin-top: 36px; padding-top: 12px; border-top: 1px solid #e3e8f0; font-size: 13px; }
.contact h2 { font-size: 15px; }

@media (max-width: 640px) {
  main.inner { margin: 0; border-radius: 0; padding: 16px; }
  .steps li { font-size: 11px; }
  table.seminars thead { display: none; }
  table.seminars, table.seminars tbody, table.seminars tr, table.seminars td { display: block; width: 100%; }
  table.seminars tr { border: 1px solid #d8dee8; margin-bottom: 10px; }
  table.seminars td { border: none; border-bottom: 1px solid #eef1f6; }
  table.seminars td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: #888; }
  table.seminars td.check, table.seminars td.num { text-align: left; width: 100%; }
  tr.total td[colspan] { display: none; }
  table.detail th, table.detail td, table.form th, table.form td { display: block; width: 100%; border-top: none; }
  table.detail tr:first-child th, table.form tr:first-child th { border-top: 1px solid #d8dee8; }
  table.form input.short { width: 100%; }
}