/* ==============================
   Reset（最小限）
============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==============================
   コンテナ・レイアウト
============================== */
section {
  padding: 80px 20px;
}
.Contents {
  max-width: 1000px;
  margin: 0 auto;
}
.section--narrow {
  padding: 30px 20px;
}

/* ==============================
   タイトル・見出し
============================== */
.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 50px;
  color: #111;
  letter-spacing: 0.05em;
}

.sub-title {
  font-size: 1.2rem;
  color: #666;
  text-align: center;
  margin-bottom: 1em;
}

/* ==============================
   ボタンスタイル
============================== */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #555;
}

.btn--accent {
  background-color: #d33;
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ==============================
   テキスト・ユーティリティ
============================== */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ==============================
   マージン・パディング調整
============================== */
.mt-0   { margin-top: 0 !important; }
.mt-40  { margin-top: 40px !important; }
.mb-40  { margin-bottom: 40px !important; }

/* ==============================
   Flexbox系ユーティリティ
============================== */
.d-flex        { display: flex; }
.flex-column   { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.justify-center{ justify-content: center; }
.align-center  { align-items: center; }

/* ==============================
   テキスト装飾
============================== */
.highlight-yellow {
  font-weight: bold;
  background-color: #ffeb3b;
  padding: 0 4px;
}