@charset "UTF-8";

/* -------------------- Reset -------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  word-break: break-word;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

/* -------------------- Links -------------------- */
a {
  color: #33c;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

a:hover, a:focus, a:active {
  color: #f00;
  opacity: 0.8;
}

/* -------------------- Headings -------------------- */
h1 { font-size: 2rem; font-weight: bold; margin-bottom: 1rem; }
h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.8rem; }
h3 { font-size: 1.2rem; font-weight: bold; margin-bottom: 0.6rem; }
h4, h5, h6 { font-size: 1rem; font-weight: bold; margin-bottom: 0.5rem; }

/* -------------------- Paragraphs -------------------- */
p, ol, ul, dl, table {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* -------------------- Text -------------------- */
.bold { font-weight: bold; }
.center { text-align: center; }
.txtR { text-align: right; }
.txtL { text-align: left; }

/* -------------------- Float -------------------- */
.fl { float: left; }
.fr { float: right; }

/* -------------------- Clearfix -------------------- */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* -------------------- Border Radius -------------------- */
.radius-sm { border-radius: 3px; }
.radius-md { border-radius: 6px; }
.radius-lg { border-radius: 10px; }

/* -------------------- Spacing Utilities (rem) -------------------- */
.spacing-values: 0.25 0.5 0.75 1 1.5 2;

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 2rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 2rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 2rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 2rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 2rem; }

/* -------------------- Responsive -------------------- */
@media (max-width: 768px) {
  html { font-size: 14px; }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1rem; }
  h4, h5, h6 { font-size: 0.9rem; }

  .mt-3, .mb-3, .pt-3, .pb-3 { margin/padding: 0.8rem !important; }
}