/* ============================================================
   components.css  —  再利用可能なプレゼンテーション部品
   特定のセクションに紐づかず、複数箇所で使う視覚要素：
   セクション見出し（label / title / divider）とボタン各種。
   ============================================================ */

/* ---------- セクション共通見出し ---------- */
/* 全セクションが共有する見出しパターン */

/* セクションの欧文ラベル（例：BUSINESS） */
.section-label {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--green-mid);
  margin-bottom: 12px;
}

/* セクションの和文タイトル（例：事業内容） */
.section-title {
  font-family: "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--green-dark);
  letter-spacing: 3px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* タイトル下の装飾的な区切り線 */
.section-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, var(--green-light), var(--purple-light));
  margin-bottom: 36px;
}

/* ---------- ボタン：ヒーロー ---------- */

/* 白背景のプライマリボタン */
.btn-primary {
  background: #fff;
  color: var(--green-dark);
  padding: 14px 32px;
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s;
  border: 2px solid #fff;
  display: inline-block;
}

.btn-primary:hover {
  background: transparent;
  color: #fff;
}

/* 枠線のみのセカンダリボタン */
.btn-secondary {
  background: transparent;
  color: #fff;
  padding: 14px 32px;
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: 0.2s;
  display: inline-block;
}

.btn-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- ボタン：スクールバナー ---------- */

/* 写真背景の上に重ねる枠線ボタン */
.school-btn {
  display: inline-block;
  background: transparent;
  color: #fff;
  padding: 12px 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: 0.2s;
}

.school-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* ---------- ボタン：お問い合わせ CTA ---------- */

/* 白背景の主要 CTA ボタン */
.cta-btn-white {
  background: #fff;
  color: var(--green-dark);
  padding: 16px 40px;
  font-size: 13px;
  letter-spacing: 2px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s;
  display: inline-block;
}

.cta-btn-white:hover {
  background: var(--green-pale);
}

/* 枠線のみの補助 CTA ボタン */
.cta-btn-outline {
  background: transparent;
  color: #fff;
  padding: 16px 40px;
  font-size: 13px;
  letter-spacing: 2px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: 0.2s;
  display: inline-block;
}

.cta-btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}