/* =========================================================
   カラーB｜テーマ差し色レイヤー (theme-accent.css)
   ─ ゴールドで世界観、ターコイズ(#2BAFA4)はポイント使いで視線誘導
   ※ common.css → 各ページCSS の「後」に読み込むこと
   ========================================================= */

/* ── 見出しデザイン：英字を大きく（明朝・ゴールド）＋日本語を小さく添える ── */
.section-label {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 300;            /* 01_monoの大見出しと同じ細さ */
  letter-spacing: 0.1em;
  color: var(--c-accent);      /* ゴールド */
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 8px;
}
.section-label::after { display: none; }
/* 日本語見出しは小さく、ゴールドで添える */
h2,
.section-heading-row h2,
.cta-section h2 {
  font-size: 15px;
  font-weight: 400;
  color: var(--c-accent);
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section-label { font-size: 42px; }
}

/* 予約・お問い合わせ系ボタン＝深めターコイズ（白文字が読める #218B83） */
.btn-primary,
.machine-btn,
.study-btn-primary { background: var(--c-cta); color: #fff; }
/* スマホ固定ボタン：お問い合わせ＝ゴールド／LINE＝ターコイズ */
.fixed-contact { background: var(--c-primary); color: #fff; }
.fixed-line { background: var(--c-cta); color: #fff; }
.btn-primary:hover,
.machine-btn:hover { background: #1c7a73; opacity: 1; }

/* 「導入後も安心のサポート」帯はオフホワイトに */
.banner-section { background: var(--c-surface); }

/* 枠線にはゴールドを使わず、ニュートラルなグレーに */
.btn-outline,
.banner-card,
.subsidy-banner,
.seminar-banner,
.support-banner { border-color: #cfcfcf; }
.tag { border-color: #e2e2e2; }
/* ハンバーガーもゴールドをやめてニュートラルな濃色に */
.menu-icon { background: var(--c-text); border-color: var(--c-text); }

/* リンク・矢印＝ターコイズ（視線誘導のワンポイント） */
.slider-arrows,
.subsidy-arrow,
.seminar-banner-arrow,
.support-banner-arrow,
.insta-follow,
.story-card-arrow,
.study-more a { color: var(--c-turq); }

/* Contact：メインビジュアルと同じマシン画像を背景にした角丸バナー */
.cta-section { background: #fff; }
.cta-card {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: #23968c url("../images/ks-mv.jpg") center / cover no-repeat;
  padding: 88px 24px 80px;
  text-align: center;
}
.cta-card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.cta-card > * { position: relative; z-index: 1; }
.cta-card .section-label {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
  color: #fff; text-transform: uppercase; margin-bottom: 16px;
}
.cta-card h2 { color: #fff; font-size: 26px; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; margin-bottom: 20px; }
.cta-card p { color: rgba(255,255,255,0.9); margin-bottom: 26px; }
.cta-card .cta-tags { justify-content: center; margin-bottom: 34px; }
.cta-card .cta-tag { color: #fff; border-color: rgba(255,255,255,0.55); }
.cta-main-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 0 46px; border-radius: 999px;
  background: var(--c-cta); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none;
  transition: background 0.2s ease;
}
.cta-main-btn:hover { background: #1c7a73; }
.cta-sub-link {
  display: inline-block; margin-top: 22px;
  color: #fff; font-size: 13px; letter-spacing: 0.04em; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.55); padding-bottom: 2px;
}
@media (min-width: 768px) {
  .cta-card { padding: 112px 24px 100px; }
  .cta-card h2 { font-size: 32px; }
}