/* ============================================================
   KARTE.io INSPIRED — FULL LAYOUT REDESIGN v2
   - サイドバー廃止 → スティッキートップナビ
   - 1024px以下でハンバーガーメニュー（スライドインドロワー）
   - 390px〜1440px フルレスポンシブ
   復元: このファイルをlink外す + styles-original.css に戻す
   ============================================================ */

/* ----------------------------------------------------------
   1. デザイントークン
   ---------------------------------------------------------- */
:root {
  --k-dark:        #354341;
  --k-dark2:       #1f2e2c;
  --k-mid:         #5c7774;
  --k-light:       #8f9695;
  --k-teal:        #2aab9f;
  --k-teal-dark:   #0e8989;
  --k-teal-light:  #eef8f7;
  --k-teal-xlight: #f5fcfb;
  --k-grad:        linear-gradient(90deg, #c23ae8 -3%, #44a3f6 96%);
  --k-grad-135:    linear-gradient(135deg, #c23ae8 0%, #44a3f6 100%);
  --k-grad-text:   linear-gradient(90deg, #c23ae8 0%, #44a3f6 100%);
  --k-mesh:        radial-gradient(ellipse 90% 70% at 65% 35%,
                     #ffdaef 0%, #f4f4f4 48%, #eafaff 100%);
  --k-bg:          #ffffff;
  --k-bg-gray:     #f0f1f1;
  --k-bg-green:    #eef8f7;
  --k-shadow-sm:   0 2px 8px #00000010, 0 1px 2px #0000000a;
  --k-shadow-md:   0 8px 24px #00000014, 0 2px 8px #0000000c;
  --k-shadow-lg:   0 16px 48px #0000001a, 0 4px 16px #0000000e;
  --k-r-sm:  8px;
  --k-r-md:  16px;
  --k-r-lg:  24px;
  --k-r-pill:999px;
  --k-font:  'Noto Sans JP','Hiragino Sans','Yu Gothic UI',sans-serif;
  --k-mono:  'Cascadia Code','Consolas','Source Code Pro',monospace;
  --nav-h:   62px;

  /* base変数上書き */
  --primary:       #2aab9f;
  --primary-light: #eef8f7;
  --primary-dark:  #0e8989;
  --gray-100:      #f0f1f1;
  --gray-200:      #e4e7e6;
  --gray-300:      #cdd1d0;
  --gray-400:      #a3a8a7;
  --gray-500:      #8f9695;
  --gray-600:      #5c7774;
  --gray-700:      #3d5654;
  --gray-800:      #354341;
  --gray-900:      #1f2e2c;
  --code-bg:       #1f2e2c;
  --font-sans:     var(--k-font);
  --radius:        var(--k-r-md);
  --shadow:        var(--k-shadow-sm);
  --shadow-lg:     var(--k-shadow-md);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--k-font);
  background: var(--k-bg);
  color: var(--k-dark);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(42,171,159,.18); color: var(--k-dark); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--k-bg-gray); }
::-webkit-scrollbar-thumb { background: #b8ceca; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--k-teal); }

/* ----------------------------------------------------------
   2. トップナビゲーション
   ---------------------------------------------------------- */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--k-dark);
  height: var(--nav-h);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 2px 16px rgba(0,0,0,.2);
}

.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ロゴ */
.nav-logo {
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
}
.nav-logo-tag {
  font-size: 8px;
  color: var(--k-teal);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  line-height: 1;
}
.nav-logo-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.3;
  white-space: nowrap;
}

/* デスクトップ用ナビリンク群 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
}
.nav-links a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all .15s;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.nav-links a:hover  { color: rgba(255,255,255,.92); background: rgba(255,255,255,.08); }
.nav-links a.active { color: #fff; background: rgba(42,171,159,.22); }
.nav-cat {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.25);
  padding: 0 8px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 右端のIndexボタン */
.nav-index-btn {
  flex-shrink: 0;
  background: rgba(42,171,159,.18);
  border: 1px solid rgba(42,171,159,.35);
  color: #a8f0eb;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--k-r-pill);
  transition: all .2s;
  letter-spacing: .03em;
  white-space: nowrap;
}
.nav-index-btn:hover {
  background: var(--k-teal);
  border-color: var(--k-teal);
  color: #fff;
  box-shadow: 0 2px 12px rgba(42,171,159,.4);
}

/* ----------------------------------------------------------
   3. ハンバーガーボタン
   ---------------------------------------------------------- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: all .28s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------
   4. モバイルドロワー（nav-links がスライドイン）
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .hamburger  { display: flex; }
  .nav-index-btn { display: none; }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;
    background: var(--k-dark);
    padding: calc(var(--nav-h) + 16px) 0 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    z-index: 850;
    border-right: 1px solid rgba(255,255,255,.07);
    box-shadow: none;
  }
  .nav-links.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.35);
  }
  .nav-links a {
    font-size: 13px;
    padding: 11px 24px;
    border-radius: 0;
    border-left: 2px solid transparent;
  }
  .nav-links a:hover,
  .nav-links a.active {
    border-left-color: var(--k-teal);
    background: rgba(255,255,255,.05);
    color: #fff;
  }
  .nav-cat {
    padding: 16px 24px 6px;
    font-size: 9px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 8px;
  }
  .nav-cat:first-child { border-top: none; margin-top: 0; }
}

/* ----------------------------------------------------------
   5. ナビオーバーレイ
   ---------------------------------------------------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ----------------------------------------------------------
   6. ページコンテンツ（サイドバー廃止・中央寄せ）
   ---------------------------------------------------------- */
/* .layout を完全無効化（残っていても影響しない） */
.layout { display: contents; }
.sidebar { display: none !important; }
.main-content { max-width: none; padding: 0; }

/* 新メインコンテナ */
.page-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 52px 40px 100px;
}
@media (max-width: 1024px) { .page-content { padding: 40px 32px 80px; } }
@media (max-width: 768px)  { .page-content { padding: 28px 20px 72px; } }
@media (max-width: 480px)  { .page-content { padding: 20px 14px 60px; } }
@media (min-width: 1440px) { .page-content { max-width: 960px; padding: 60px 48px 120px; } }

/* ----------------------------------------------------------
   7. パンくず
   ---------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--k-light);
  margin-bottom: 24px;
  letter-spacing: .02em;
}
.breadcrumb a { color: var(--k-teal); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--gray-300); }

/* ----------------------------------------------------------
   8. INDEX ヒーロー — フルKARTE
   ---------------------------------------------------------- */
.hero {
  background: var(--k-dark);
  border-radius: var(--k-r-lg);
  padding: 64px 56px 68px;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 480px; height: 480px;
  background: var(--k-grad-135);
  border-radius: 50%;
  opacity: .14;
  filter: blur(70px);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 20%;
  width: 360px; height: 360px;
  background: var(--k-teal);
  border-radius: 50%;
  opacity: .07;
  filter: blur(60px);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }

.hero-tag {
  display: inline-block;
  background: var(--k-grad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: var(--k-r-pill);
  margin-bottom: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(194,58,232,.45);
}
.hero h1 {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 16px;
}
.hero h1 em {
  font-style: normal;
  background: var(--k-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .subtitle {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  line-height: 1.9;
  max-width: 540px;
  margin-bottom: 40px;
  letter-spacing: .01em;
}
.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-stat .value {
  font-size: 34px;
  font-weight: 900;
  display: block;
  background: var(--k-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.hero-stat .label {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .hero { padding: 40px 28px 44px; }
  .hero h1 { font-size: 30px; }
  .hero .subtitle { font-size: 13px; }
  .hero-stats { gap: 20px; }
  .hero-stat .value { font-size: 24px; }
}
@media (max-width: 480px) {
  .hero { padding: 28px 20px 32px; border-radius: var(--k-r-md); }
  .hero h1 { font-size: 24px; }
}

/* ----------------------------------------------------------
   9. セクションタイトル
   ---------------------------------------------------------- */
.section-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--k-dark);
  margin: 48px 0 20px;
  letter-spacing: .02em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--k-bg-gray);
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 44px; height: 2px;
  background: var(--k-grad);
  border-radius: 2px;
}

/* ----------------------------------------------------------
   10. コースヘッダー（講座ページ）
   ---------------------------------------------------------- */
.course-header {
  background: var(--k-mesh);
  border-radius: var(--k-r-lg);
  padding: 44px 48px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(42,171,159,.12);
}
.course-header::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: var(--k-grad-135);
  border-radius: 50%;
  opacity: .1;
  filter: blur(40px);
  pointer-events: none;
}
.course-header::after {
  content: '';
  position: absolute;
  bottom: -40px; left: 40px;
  width: 200px; height: 200px;
  background: var(--k-teal);
  border-radius: 50%;
  opacity: .07;
  filter: blur(30px);
  pointer-events: none;
}
.course-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--k-grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: var(--k-r-pill);
  margin-bottom: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 14px rgba(194,58,232,.3);
  position: relative;
  z-index: 1;
}
.course-header h1 {
  font-size: 28px;
  font-weight: 900;
  color: var(--k-dark);
  line-height: 1.35;
  letter-spacing: .01em;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.course-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) { .course-meta-grid { grid-template-columns: 1fr; } }
.course-meta-item {
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--k-r-sm);
  padding: 12px 16px;
}
.course-meta-item .meta-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--k-light);
  display: block;
  margin-bottom: 4px;
}
.course-meta-item .meta-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--k-dark);
}
.path-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--k-r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.path-badge.path-a      { background: var(--k-teal-light); color: var(--k-teal-dark); border: 1px solid rgba(42,171,159,.25); }
.path-badge.path-b      { background: #f0eaff; color: #6d28d9; border: 1px solid rgba(139,92,246,.3); }
.path-badge.path-opt    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.path-badge.path-common { background: var(--k-bg-gray); color: var(--k-dark); border: 1px solid var(--gray-200); }
@media (max-width: 640px) {
  .course-header { padding: 28px 22px; }
  .course-header h1 { font-size: 20px; }
}

/* ----------------------------------------------------------
   11. フェーズセクション
   ---------------------------------------------------------- */
.phase-section {
  margin-bottom: 40px;
  border-radius: var(--k-r-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--k-shadow-sm);
  transition: box-shadow .2s;
}
.phase-section:hover { box-shadow: var(--k-shadow-md); }
.phase-header {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--k-bg);
  border-bottom: 1px solid var(--gray-200);
  position: relative;
  overflow: hidden;
}
.phase-header::after {
  content: '';
  position: absolute;
  right: -20px; top: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: .08;
  pointer-events: none;
}
.phase-1 .phase-header::after { background: var(--k-teal); }
.phase-2 .phase-header::after { background: #c23ae8; }
.phase-3 .phase-header::after { background: #44a3f6; }
.phase-4 .phase-header::after { background: #f59e0b; }

.phase-number {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--k-r-md);
  flex-shrink: 0;
}
.phase-1 .phase-number { color: var(--k-teal);  background: var(--k-teal-light); }
.phase-2 .phase-number { color: #7c3aed; background: #f0eaff; }
.phase-3 .phase-number { color: #1d4ed8; background: #eff6ff; }
.phase-4 .phase-number { color: #92400e; background: #fef3c7; }

.phase-header-content h2 {
  font-size: 18px;
  font-weight: 900;
  color: var(--k-dark);
  line-height: 1.3;
  letter-spacing: .01em;
  margin-bottom: 3px;
}
.phase-header-content .phase-time { font-size: 12px; color: var(--k-light); font-weight: 500; }
.phase-body { background: var(--k-bg); padding: 28px; }
.phase-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
}
.phase-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--k-bg-gray);
  border-radius: var(--k-r-pill);
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--k-dark);
}

/* ----------------------------------------------------------
   12. ステップカード
   ---------------------------------------------------------- */
.step-card {
  margin-bottom: 20px;
  border: 1px solid var(--gray-200);
  border-radius: var(--k-r-md);
  overflow: hidden;
  transition: all .2s ease;
}
.step-card:hover {
  border-color: rgba(42,171,159,.35);
  box-shadow: var(--k-shadow-md);
  transform: translateY(-1px);
}
.step-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  background: var(--k-bg-gray);
  border-bottom: 1px solid var(--gray-200);
}
.step-number {
  background: var(--k-grad);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: var(--k-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(194,58,232,.35);
}
.step-header h3 { font-size: 15px; font-weight: 700; color: var(--k-dark); letter-spacing: .01em; }
.step-body { padding: 22px 24px; }
.step-body p  { color: var(--k-dark); font-size: 14px; line-height: 1.85; margin-bottom: 14px; }
.step-body ul,
.step-body ol { margin: 0 0 14px 20px; color: var(--k-dark); font-size: 14px; line-height: 1.85; }
.step-body li { margin-bottom: 6px; }
.step-body h4 {
  font-size: 13px; font-weight: 700; color: var(--k-dark);
  margin: 20px 0 8px; padding-left: 10px;
  border-left: 3px solid var(--k-teal);
}

.checklist { list-style: none; margin-top: 16px; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; font-size: 13px; color: var(--k-dark);
  border-bottom: 1px solid var(--gray-100);
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before { content: '□'; font-size: 16px; color: var(--k-teal); flex-shrink: 0; line-height: 1.4; }

/* ----------------------------------------------------------
   13. コードブロック
   ---------------------------------------------------------- */
pre {
  background: var(--k-dark);
  color: #d4e8e6;
  border-radius: var(--k-r-md);
  padding: 20px 24px;
  overflow-x: auto;
  font-family: var(--k-mono);
  font-size: 13px;
  line-height: 1.75;
  margin: 12px 0 20px;
}
pre .comment  { color: #507d7a; }
pre .keyword  { color: #54bbb2; }
pre .string   { color: #a8f0eb; }
pre .number   { color: #7dd3cf; }
pre .function { color: #e0f7f5; }
pre .prompt   { color: var(--k-teal); user-select: none; }
pre .output   { color: #8fb8b5; }
.code-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a3836;
  color: #6fa8a5;
  font-size: 11px;
  font-family: var(--k-mono);
  padding: 7px 20px;
  border-radius: var(--k-r-md) var(--k-r-md) 0 0;
  letter-spacing: .06em;
}
.code-label + pre { border-radius: 0 0 var(--k-r-md) var(--k-r-md); margin-top: 0; }
code {
  font-family: var(--k-mono);
  font-size: .88em;
  background: var(--k-teal-light);
  color: var(--k-teal-dark);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(42,171,159,.2);
}
pre code { background: none; color: inherit; padding: 0; border: none; font-size: 1em; }

/* ----------------------------------------------------------
   14. Callout
   ---------------------------------------------------------- */
.callout {
  border-radius: var(--k-r-md);
  padding: 14px 18px;
  margin: 16px 0;
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.7;
}
.callout .callout-icon { font-size: 18px; flex-shrink: 0; padding-top: 1px; }
.callout .callout-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; display: block; }
.callout.tip    { background: var(--k-teal-light); border: 1px solid rgba(42,171,159,.22); color: #1a6b66; }
.callout.info   { background: #f0eaff; border: 1px solid rgba(139,92,246,.22); color: #4c1d95; }
.callout.warn   { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }
.callout.danger { background: #fff1f0; border: 1px solid #fca5a5; color: #991b1b; }
.callout.cost   { background: var(--k-bg-green); border: 1px solid rgba(42,171,159,.28); color: var(--k-dark); }

/* ----------------------------------------------------------
   15. エラーブロック
   ---------------------------------------------------------- */
details.error-block {
  background: #fff8f5;
  border: 1px solid #fcd9cc;
  border-radius: var(--k-r-sm);
  margin-top: 16px;
  overflow: hidden;
}
details.error-block summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #b45309;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}
details.error-block summary:hover { background: #fff0ea; }
details.error-block summary::before {
  content: '▶';
  font-size: 9px;
  transition: transform .2s;
  color: #e57340;
}
details.error-block[open] summary::before { transform: rotate(90deg); }
details.error-block .error-body {
  padding: 4px 16px 16px;
  font-size: 13px;
  color: #7c2d12;
  line-height: 1.75;
  border-top: 1px solid #fcd9cc;
}
details.error-block .error-body p { margin-bottom: 8px; }
details.error-block .error-body ul { margin-left: 18px; }

/* ----------------------------------------------------------
   16. 比較テーブル
   ---------------------------------------------------------- */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 13px;
  border-radius: var(--k-r-md);
  overflow: hidden;
  box-shadow: var(--k-shadow-sm);
  border: 1px solid var(--gray-200);
}
.comparison-table th {
  background: var(--k-dark);
  color: rgba(255,255,255,.9);
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.comparison-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--k-dark);
  font-size: 13px;
  line-height: 1.7;
  vertical-align: top;
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: var(--k-bg-green); }
.comparison-table .tag-free { color: var(--k-teal-dark); font-weight: 700; }
.comparison-table .tag-paid { color: #7c3aed; font-weight: 700; }
.comparison-table .tag-opt  { color: #92400e; font-weight: 700; }

/* ----------------------------------------------------------
   17. 図解
   ---------------------------------------------------------- */
.diagram {
  background: var(--k-bg-gray);
  border: 1px solid var(--gray-200);
  border-radius: var(--k-r-lg);
  padding: 28px 32px;
  margin: 24px 0;
  overflow-x: auto;
}
.diagram-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--k-light);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 20px;
  text-align: center;
}
.flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 12px;
}
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 90px; }
.flow-box {
  background: var(--k-bg);
  border: 1.5px solid var(--gray-200);
  color: var(--k-dark);
  border-radius: var(--k-r-sm);
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--k-shadow-sm);
  transition: all .15s;
}
.flow-box:hover { box-shadow: var(--k-shadow-md); transform: translateY(-1px); }
.flow-box.green   { background: var(--k-teal-light); border-color: rgba(42,171,159,.35); color: var(--k-teal-dark); }
.flow-box.purple  { background: #f0eaff; border-color: rgba(124,58,237,.3); color: #5b21b6; }
.flow-box.orange  { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.flow-box.red     { background: #fff1f0; border-color: #fca5a5; color: #991b1b; }
.flow-box.gray    { background: var(--k-bg-gray); border-color: var(--gray-300); color: var(--k-dark); }
.flow-box.dark    { background: var(--k-dark); border-color: var(--k-mid); color: #fff; }
.flow-label { font-size: 10px; color: var(--k-light); text-align: center; font-weight: 500; }
.flow-arrow { font-size: 16px; color: var(--k-teal); padding: 0 4px; flex-shrink: 0; align-self: center; margin-bottom: 20px; }
.flow-down-arrow { text-align: center; font-size: 18px; color: var(--k-teal); margin: 8px 0; }

/* ----------------------------------------------------------
   18. モックスクリーン
   ---------------------------------------------------------- */
.mock-screen {
  border-radius: var(--k-r-md);
  overflow: hidden;
  box-shadow: var(--k-shadow-md);
  margin: 24px 0;
  max-width: 100%;
  font-family: var(--k-mono);
}
.screen-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  height: 34px;
}
.titlebar-dots { display: flex; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-red { background: #ff5f57; } .dot-yellow { background: #febc2e; } .dot-green { background: #28c840; }
.screen-caption { font-family: var(--k-font); font-size: 11px; color: var(--k-light); text-align: center; margin-top: 8px; font-style: italic; }
.titlebar-center { flex: 1; text-align: center; font-size: 12px; font-family: var(--k-font); color: #aaa; }

/* Terminal */
.mock-screen.terminal .screen-titlebar { background: #2a3836; }
.mock-screen.terminal .screen-body {
  background: var(--k-dark); color: #d4e8e6;
  padding: 14px 18px; min-height: 140px; font-size: 13px; line-height: 2;
}
.t-prompt { color: var(--k-teal); } .t-cmd { color: #a8f0eb; } .t-out { color: #8fb8b5; }
.t-ok { color: var(--k-teal); } .t-err { color: #f87171; } .t-comment { color: #4a7572; }

/* Browser */
.mock-screen.browser .screen-titlebar { background: #e8eaed; height: auto; min-height: 36px; flex-wrap: wrap; padding: 6px 14px; }
.browser-urlbar {
  flex: 1; background: #fff; border-radius: var(--k-r-pill);
  padding: 4px 14px; font-size: 12px; font-family: var(--k-font); color: #555;
  display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden;
  border: 1px solid #c6c9cc;
}
.browser-urlbar .lock { color: #30a66f; font-size: 11px; }
.browser-urlbar .url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-screen.browser .screen-body { background: #fff; min-height: 200px; font-family: var(--k-font); font-size: 13px; }

/* IDE */
.mock-screen.ide .screen-titlebar { background: #2a3836; }
.ide-titlebar-text { font-size: 12px; font-family: var(--k-font); color: #ccc; flex: 1; text-align: center; }
.mock-screen.ide .ide-layout { display: grid; grid-template-columns: 180px 1fr; min-height: 220px; }
.ide-sidebar { background: #2a3836; padding: 8px 0; border-right: 1px solid #1e2f2d; }
.ide-sidebar-header { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #6fa8a5; padding: 4px 12px 8px; }
.ide-file { font-size: 12px; font-family: var(--k-mono); padding: 3px 12px 3px 24px; color: #8fb8b5; cursor: default; }
.ide-file.folder { color: #a8d8d5; padding-left: 12px; } .ide-file.active { background: rgba(42,171,159,.18); color: #fff; }
.ide-editor { background: var(--k-dark); padding: 12px 16px; overflow: hidden; }
.ide-tab { display: inline-flex; align-items: center; gap: 6px; background: var(--k-dark); color: #8fb8b5; font-size: 11px; font-family: var(--k-mono); padding: 4px 14px; border-bottom: 2px solid var(--k-teal); }
.ide-code { font-size: 12px; font-family: var(--k-mono); color: #d4e8e6; line-height: 1.9; padding-top: 8px; }
.ide-ln { color: #3d6562; user-select: none; display: inline-block; min-width: 28px; text-align: right; margin-right: 16px; }
.ide-kw { color: #54bbb2; } .ide-str { color: #a8f0eb; } .ide-fn { color: #e0f7f5; } .ide-var { color: #7dd3cf; } .ide-cmt { color: #4a7572; }
.ide-chat-panel { background: #2a3836; border-left: 1px solid rgba(42,171,159,.15); display: flex; flex-direction: column; min-width: 220px; }
.ide-chat-header { font-size: 11px; color: #8fb8b5; padding: 8px 12px; border-bottom: 1px solid rgba(42,171,159,.15); font-family: var(--k-font); background: #233431; }
.ide-chat-body { padding: 10px 12px; flex: 1; }
.ide-chat-msg { font-size: 12px; font-family: var(--k-font); line-height: 1.5; margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; }
.ide-chat-msg.user { background: rgba(42,171,159,.18); color: #d4e8e6; } .ide-chat-msg.ai { background: rgba(255,255,255,.05); color: #a8d8d5; }
.ide-chat-input { background: var(--k-dark); border-top: 1px solid rgba(42,171,159,.12); padding: 8px 12px; font-size: 12px; font-family: var(--k-font); color: #4a7572; font-style: italic; }

/* AI Studio */
.mock-screen.aistudio .screen-titlebar { background: #f0f4f9; border-bottom: 1px solid #dadce0; }
.aistudio-logo { font-size: 13px; font-family: var(--k-font); font-weight: 600; color: #1a73e8; flex: 1; }
.mock-screen.aistudio .aistudio-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 260px; background: #fff; }
.aistudio-left { background: #f8f9fa; border-right: 1px solid #e8eaed; padding: 12px; }
.aistudio-section-title { font-size: 11px; font-weight: 600; color: #80868b; text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 4px; }
.aistudio-model-chip { display: flex; align-items: center; gap: 6px; background: var(--k-teal-light); border: 1px solid rgba(42,171,159,.25); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--k-teal-dark); margin-bottom: 6px; }
.aistudio-chat { display: flex; flex-direction: column; padding: 16px; }
.aistudio-msg { margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.aistudio-msg.user .aistudio-msg-label { font-size: 11px; font-weight: 600; color: #1a73e8; margin-bottom: 2px; }
.aistudio-msg.ai .aistudio-msg-label { font-size: 11px; font-weight: 600; color: #188038; margin-bottom: 2px; }
.aistudio-msg.ai .aistudio-msg-body { background: #f8f9fa; border-radius: 8px; padding: 10px 12px; font-size: 12px; }
.aistudio-input-bar { margin-top: auto; background: #f0f4f9; border-radius: 24px; padding: 10px 16px; font-size: 12px; color: #aaa; border: 1px solid #dadce0; font-style: italic; }

/* GitHub */
.mock-screen.github .screen-titlebar { background: #161b22; }
.github-logo-text { font-size: 14px; font-weight: 700; color: #f0f6fc; font-family: var(--k-font); }
.mock-screen.github .github-header { background: #161b22; padding: 10px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #30363d; }
.github-repo-path { font-size: 14px; font-family: var(--k-mono); color: #58a6ff; }
.github-repo-path .sep { color: #6e7681; margin: 0 4px; }
.mock-screen.github .github-body { background: #0d1117; color: #c9d1d9; padding: 0; min-height: 180px; }
.github-tabs { display: flex; border-bottom: 1px solid #30363d; padding: 0 16px; }
.github-tab { padding: 10px 14px; font-size: 13px; font-family: var(--k-font); color: #8b949e; border-bottom: 2px solid transparent; }
.github-tab.active { color: #f0f6fc; border-bottom-color: #f78166; }
.github-file-row { display: flex; align-items: center; padding: 7px 16px; border-bottom: 1px solid #21262d; font-size: 13px; gap: 8px; }
.github-file-icon { color: #8b949e; width: 16px; } .github-file-name { color: #58a6ff; flex: 1; } .github-commit-msg { color: #8b949e; font-size: 12px; }

/* Vercel */
.mock-screen.vercel .screen-titlebar { background: #1a1a1a; }
.vercel-logo-text { font-size: 14px; font-weight: 700; color: #fff; font-family: var(--k-font); flex: 1; }
.mock-screen.vercel .vercel-body { background: #111; color: #eee; padding: 16px 20px; min-height: 180px; }
.vercel-project-card { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 14px 16px; }
.vercel-project-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.vercel-deploy-status { display: inline-flex; align-items: center; gap: 6px; background: #0a3300; color: #4cc38a; font-size: 12px; padding: 3px 10px; border-radius: 4px; margin-bottom: 8px; }
.vercel-url { font-size: 12px; color: #0070f3; font-family: var(--k-mono); }
.vercel-time { font-size: 11px; color: #888; margin-top: 4px; }

/* Supabase */
.mock-screen.supabase .screen-titlebar { background: #1c1c1c; }
.supabase-logo-text { font-size: 13px; font-weight: 700; color: #3ecf8e; font-family: var(--k-font); flex: 1; }
.mock-screen.supabase .supabase-layout { display: grid; grid-template-columns: 180px 1fr; min-height: 220px; }
.supabase-nav { background: #1c1c1c; padding: 8px 0; border-right: 1px solid #2a2a2a; }
.supabase-nav-item { padding: 8px 16px; font-size: 13px; color: #888; cursor: default; display: flex; align-items: center; gap: 8px; }
.supabase-nav-item.active { background: #2a2a2a; color: #fff; }
.supabase-main { background: #181818; padding: 16px; color: #ccc; }
.supabase-table-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.supabase-table-title { font-size: 16px; font-weight: 600; color: #fff; }
.supabase-btn { background: #3ecf8e; color: #000; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; }
.supabase-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--k-mono); }
.supabase-table th { background: #222; color: #888; text-align: left; padding: 6px 10px; border: 1px solid #2a2a2a; }
.supabase-table td { padding: 6px 10px; border: 1px solid #2a2a2a; color: #ccc; }
.supabase-table tr:nth-child(even) td { background: #1e1e1e; }

/* ----------------------------------------------------------
   19. INDEX: Path カード / Lecture カード
   ---------------------------------------------------------- */
.path-card {
  background: var(--k-bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--k-r-lg);
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: var(--k-shadow-sm);
  transition: all .2s;
}
.path-card:hover { box-shadow: var(--k-shadow-md); border-color: rgba(42,171,159,.3); transform: translateY(-2px); }
.path-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.path-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.path-icon.a { background: var(--k-teal-light); } .path-icon.b { background: #f0eaff; } .path-icon.opt { background: #fef3c7; }
.path-card-header h3 { font-size: 15px; font-weight: 700; color: var(--k-dark); }
.path-card-header .path-time { font-size: 11px; color: var(--k-light); }
.path-flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.pf-node { background: var(--k-bg-gray); border: 1px solid var(--gray-200); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--k-dark); }
.pf-node.highlight { background: var(--k-teal-light); border-color: rgba(42,171,159,.35); color: var(--k-teal-dark); }
.pf-arrow { color: var(--gray-300); font-size: 12px; }

.lecture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
.lecture-card {
  background: var(--k-bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--k-r-md);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--k-shadow-sm);
}
.lecture-card:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-md); border-color: rgba(42,171,159,.35); }
.lecture-card .lc-number { font-size: 10px; font-weight: 700; color: var(--k-teal); text-transform: uppercase; letter-spacing: .1em; }
.lecture-card .lc-title { font-size: 13px; font-weight: 700; color: var(--k-dark); line-height: 1.45; }
.lecture-card .lc-time { font-size: 11px; color: var(--k-light); }
.lecture-card .lc-bar { height: 3px; border-radius: 2px; margin-top: 8px; }
.lc-bar.bar-a { background: var(--k-grad); }
.lc-bar.bar-b { background: linear-gradient(90deg,#c23ae8,#8b5cf6); }
.lc-bar.bar-opt { background: linear-gradient(90deg,#f59e0b,#ef4444); }
.lc-bar.bar-common { background: var(--gray-300); }

/* ----------------------------------------------------------
   20. フッターナビ
   ---------------------------------------------------------- */
.lecture-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.lecture-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--k-teal);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--k-r-pill);
  border: 1.5px solid rgba(42,171,159,.3);
  background: var(--k-teal-light);
  transition: all .18s;
}
.lecture-nav a:hover { background: var(--k-teal); color: #fff; border-color: var(--k-teal); box-shadow: 0 4px 16px rgba(42,171,159,.35); }
.lecture-nav .nav-label { font-size: 10px; color: var(--k-light); display: block; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* ----------------------------------------------------------
   21. タグ・ユーティリティ
   ---------------------------------------------------------- */
.tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--k-r-pill); }
.tag.free    { background: var(--k-teal-light); color: var(--k-teal-dark); }
.tag.paid    { background: #f0eaff; color: #5b21b6; }
.tag.windows { background: #eff6ff; color: #1e40af; }
.tag.mac     { background: var(--k-bg-gray); color: var(--k-dark); }
.divider { border: none; border-top: 1px solid var(--gray-200); margin: 36px 0; }
.icon-label { display: flex; align-items: center; gap: 6px; }


/* ============================================================
   NAV v3 — logo: sckpt / dropdown / full-width hero
   ============================================================ */

/* === Logo: スクプト === */
.nav-logo {
  text-decoration: none; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 1px; padding: 5px 0; line-height: 1;
}
.logo-kana { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.01em; line-height: 1.05; }
.logo-latin { font-size: 8px; font-weight: 700; color: var(--k-teal); letter-spacing: .22em; text-transform: uppercase; }

/* === 全体ガイドリンク === */
.nav-top-link {
  color: rgba(255,255,255,.65); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; transition: all .15s; white-space: nowrap;
  letter-spacing: .01em; flex-shrink: 0; display: flex; align-items: center;
}
.nav-top-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-top-link.active { color: #fff; background: rgba(42,171,159,.22); }

/* === プルダウン（デスクトップ） === */
.nav-dropdown { position: relative; flex-shrink: 0; }
.nav-dd-btn {
  display: flex; align-items: center; gap: 5px; background: none; border: none;
  color: rgba(255,255,255,.65); font-size: 13px; font-weight: 600; padding: 6px 12px;
  border-radius: 8px; cursor: pointer; letter-spacing: .01em; height: 36px;
  transition: all .15s; white-space: nowrap; font-family: var(--k-font);
}
.nav-dd-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-dropdown.open .nav-dd-btn,
.nav-dd-btn.active { color: #fff; background: rgba(42,171,159,.22); }
.nav-dd-chev { font-size: 10px; transition: transform .2s; display: inline-block; line-height: 1; margin-top: 1px; }
.nav-dropdown.open .nav-dd-chev { transform: rotate(180deg); }

.nav-dd-panel {
  position: absolute; top: calc(100% + 8px); left: -8px;
  background: #1a2d2a; border: 1px solid rgba(42,171,159,.22); border-radius: 12px;
  padding: 16px; width: 480px; box-shadow: 0 14px 44px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .2s cubic-bezier(.4,0,.2,1); z-index: 950;
}
.nav-dropdown.open .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nav-dd-col { display: flex; flex-direction: column; gap: 2px; }
.nav-dd-label {
  display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(255,255,255,.28);
  padding: 0 8px 6px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 4px;
}
.nav-dd-panel a {
  color: rgba(255,255,255,.62); text-decoration: none; font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: 6px; transition: all .12s; letter-spacing: .01em; display: block;
}
.nav-dd-panel a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-dd-panel a.active { color: var(--k-teal); background: rgba(42,171,159,.14); font-weight: 700; }

/* nav-index-btn を非表示 */
.nav-index-btn { display: none !important; }

/* デスクトップ: nav-links 調整 */
@media (min-width: 1025px) {
  .nav-links { gap: 4px; flex: none; }
  .nav-links > .nav-cat,
  .nav-links > a:not(.nav-top-link) { display: none; }
}

/* モバイルドロワー: プルダウンをフラットに展開 */
@media (max-width: 1024px) {
  .nav-top-link {
    display: block; font-size: 13px; padding: 11px 24px; border-radius: 0;
    border-left: 2px solid transparent; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav-top-link:hover, .nav-top-link.active {
    border-left-color: var(--k-teal); background: rgba(255,255,255,.05); color: #fff; border-radius: 0;
  }
  .nav-dropdown { position: static; }
  .nav-dd-btn { display: none; }
  .nav-dd-panel {
    position: static; opacity: 1 !important; visibility: visible !important;
    transform: none !important; background: none; border: none; padding: 0;
    width: auto; box-shadow: none; border-radius: 0;
  }
  .nav-dd-grid { display: flex; flex-direction: column; gap: 0; }
  .nav-dd-col { gap: 0; }
  .nav-dd-label {
    padding: 12px 24px 4px; border-bottom: none;
    border-top: 1px solid rgba(255,255,255,.06); margin: 4px 0 0;
  }
  .nav-dd-panel a {
    font-size: 13px; padding: 10px 24px; border-radius: 0; border-left: 2px solid transparent;
  }
  .nav-dd-panel a:hover, .nav-dd-panel a.active {
    border-left-color: var(--k-teal); background: rgba(255,255,255,.05); color: #fff; border-radius: 0;
  }
}

/* ============================================================
   フルワイドヒーロー / コースヘッダー
   ============================================================ */
html { overflow-x: hidden; }
.page-content { padding-top: 0; }
.breadcrumb { padding-top: 20px; }

.hero {
  width: 100vw; position: relative; left: 50%; transform: translateX(-50%);
  border-radius: 0 !important; padding: 80px 40px; margin-bottom: 64px;
}
@media (min-width: 1000px) {
  .hero {
    padding-left: max(40px, calc((100vw - 960px) / 2));
    padding-right: max(40px, calc((100vw - 960px) / 2));
    padding-top: 100px; padding-bottom: 100px;
  }
}
@media (max-width: 768px) { .hero { padding: 60px 24px; } }
@media (max-width: 480px) { .hero { padding: 48px 16px; } }

.course-header {
  width: 100vw; position: relative; left: 50%; transform: translateX(-50%);
  border-radius: 0 !important; border-left: none; border-right: none;
  padding: 52px 40px; margin-bottom: 48px;
}
@media (min-width: 960px) {
  .course-header {
    padding-left: max(40px, calc((100vw - 880px) / 2));
    padding-right: max(40px, calc((100vw - 880px) / 2));
  }
}
@media (max-width: 640px) { .course-header { padding: 32px 20px; } }

/* ============================================================
   LP TOP (index.html) — 白ベースヒーロー
   ============================================================ */
.page-index .hero {
  background: #ffffff; border-bottom: 2px solid var(--gray-200);
  box-shadow: 0 4px 32px rgba(0,0,0,.04);
}
.page-index .hero::before { opacity: .04; }
.page-index .hero::after  { opacity: .03; }
.page-index .hero h1 { color: var(--k-dark); }
.page-index .hero h1 em {
  background: var(--k-grad-text); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; font-style: normal;
}
.page-index .hero .subtitle { color: var(--k-mid); }
.page-index .hero-stats { border-top-color: var(--gray-200); }
.page-index .hero-stat .label { color: var(--k-light); }

/* ============================================================
   SCKPT メソッドセクション（index.html 専用）
   ============================================================ */
.sckpt-method {
  background: var(--k-dark); width: 100vw; position: relative; left: 50%;
  transform: translateX(-50%); padding: 80px 40px; margin-bottom: 72px; overflow: hidden;
}
.sckpt-method::before {
  content: ''; position: absolute; top: -120px; right: -80px;
  width: 500px; height: 500px; background: var(--k-grad-135);
  border-radius: 50%; opacity: .08; filter: blur(80px); pointer-events: none;
}
@media (min-width: 1000px) {
  .sckpt-method {
    padding-left: max(40px, calc((100vw - 960px) / 2));
    padding-right: max(40px, calc((100vw - 960px) / 2));
    padding-top: 96px; padding-bottom: 96px;
  }
}
@media (max-width: 768px) { .sckpt-method { padding: 60px 24px; } }

.sckpt-method-header { text-align: center; margin-bottom: 56px; position: relative; z-index: 1; }
.sckpt-tag {
  display: inline-block; background: var(--k-grad); color: #fff; font-size: 10px;
  font-weight: 700; padding: 5px 16px; border-radius: var(--k-r-pill); margin-bottom: 16px;
  letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 20px rgba(194,58,232,.4);
}
.sckpt-method-header h2 {
  font-size: 38px; font-weight: 900; color: #fff; letter-spacing: .01em;
  line-height: 1.25; margin-bottom: 16px;
}
@media (max-width: 768px) { .sckpt-method-header h2 { font-size: 24px; } }
.sckpt-method-header p { color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.9; max-width: 640px; margin: 0 auto; }
.sckpt-method-header strong { color: rgba(255,255,255,.9); }

.sckpt-principles {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-bottom: 56px; position: relative; z-index: 1;
}
@media (max-width: 1024px) { .sckpt-principles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .sckpt-principles { grid-template-columns: 1fr 1fr; } }
.sckpt-principle {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--k-r-md); padding: 20px 16px;
  display: flex; flex-direction: column; gap: 6px; transition: all .2s;
}
.sckpt-principle:hover { background: rgba(42,171,159,.12); border-color: rgba(42,171,159,.3); }
.sp-num   { font-size: 9px; font-weight: 700; color: var(--k-teal); letter-spacing: .1em; text-transform: uppercase; }
.sp-title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.3; }
.sp-body  { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.6; }

.sckpt-steps { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; z-index: 1; }
@media (max-width: 768px) { .sckpt-steps { grid-template-columns: 1fr; gap: 8px; } }
.sckpt-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 0 8px; position: relative; text-align: center;
}
.sckpt-step:not(:last-child)::after {
  content: '\2192'; position: absolute; right: -4px; top: 12px;
  color: rgba(42,171,159,.4); font-size: 18px; line-height: 1;
}
@media (max-width: 768px) { .sckpt-step:not(:last-child)::after { display: none; } }
.ss-num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--k-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff;
  box-shadow: 0 4px 16px rgba(194,58,232,.4); flex-shrink: 0;
}
.ss-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.4; }
.ss-desc  { font-size: 10px; color: rgba(255,255,255,.42); line-height: 1.5; }


/* ============================================================
   PREMIUM v2 — カラー・レイアウト・UX 刷新
   ============================================================ */

/* --- カラートークン上書き（モダン・高級感） --- */
:root {
  --k-dark:        #0d1117;
  --k-dark2:       #070b10;
  --k-mid:         #3e5c68;
  --k-light:       #6b8fa4;
  --k-teal:        #14b8a6;
  --k-teal-dark:   #0f8f85;
  --k-teal-light:  #f0fdfa;
  --k-teal-xlight: #f7fffe;
  --k-grad:        linear-gradient(110deg, #7c3aed 0%, #0ea5e9 100%);
  --k-grad-135:    linear-gradient(135deg, #6d28d9 0%, #0369a1 100%);
  --k-grad-text:   linear-gradient(110deg, #c084fc 0%, #38bdf8 100%);
  --k-mesh:        radial-gradient(ellipse 90% 70% at 58% 32%,
                     #ede9fe 0%, #f8fafc 48%, #e0f2fe 100%);
  --k-bg:          #ffffff;
  --k-bg-gray:     #f1f5f9;
  --k-bg-green:    #f0fdfa;
  --k-shadow-sm:   0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --k-shadow-md:   0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --k-shadow-lg:   0 20px 56px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
  /* base vars 上書き */
  --primary:       #14b8a6;
  --primary-dark:  #0f8f85;
  --primary-light: #f0fdfa;
  --gray-800:      #1e293b;
  --gray-900:      #0f172a;
  --code-bg:       #0d1117;
}

/* --- nav: ガラスモーフィズム + 右寄せ --- */
.top-nav {
  background: rgba(13,17,23,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 32px rgba(0,0,0,.28);
}
.nav-inner { gap: 12px; }
.nav-links {
  margin-left: auto;
  flex: none;
  align-items: center;
}
.nav-top-link { font-size: 13px; }
.nav-dd-btn   { font-size: 13px; }

/* nav ドロップダウンパネル（プレミアム） */
.nav-dd-panel {
  background: rgba(13,17,23,.98);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(20,184,166,.12);
}

/* --- ヒーロー（白ベース）: グリッドパターン追加 --- */
.page-index .hero {
  background-image:
    radial-gradient(circle at 80% 20%, rgba(124,58,237,.06) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(14,165,233,.06) 0%, transparent 50%),
    linear-gradient(#f8fafc 1px, transparent 1px),
    linear-gradient(90deg, #f8fafc 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-color: #ffffff;
}

/* --- コースヘッダー（講座ページ）: よりリッチな背景 --- */
.course-header {
  background: var(--k-mesh);
  box-shadow: 0 4px 40px rgba(0,0,0,.06);
}
.course-header::before { opacity: .15; }

/* --- カード: サブtleグラスマーフィズム --- */
.path-card, .lecture-card {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,.07);
}
.path-card:hover {
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 40px rgba(20,184,166,.15), var(--k-shadow-md);
  border-color: rgba(20,184,166,.3);
}
.lecture-card:hover {
  box-shadow: 0 12px 32px rgba(20,184,166,.12), var(--k-shadow-md);
  border-color: rgba(20,184,166,.3);
}

/* ステップカード */
.step-card:hover {
  border-color: rgba(20,184,166,.4);
  box-shadow: 0 8px 28px rgba(20,184,166,.12);
}

/* フェーズ */
.phase-1 .phase-number { color: #14b8a6; background: #f0fdfa; }

/* ヒーローstat値の色調整（新グラデ） */
.hero-stat .value {
  background: var(--k-grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ステップナンバーの glow 調整 */
.step-number {
  box-shadow: 0 2px 10px rgba(124,58,237,.35);
}

/* --- テーブルスクロールラッパー --- */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--k-r-md);
  margin: 16px 0 24px;
}
.tbl-scroll .comparison-table { margin: 0; border-radius: 0; }
.comparison-table th { min-width: 72px; }
.comparison-table td { min-width: 72px; word-break: break-word; }

/* flow-row の崩れ防止 */
.flow-row { gap: 12px; row-gap: 16px; }
.flow-node { min-width: 72px; flex-shrink: 0; }

/* --- コードコピーボタン --- */
.code-copy-wrap {
  position: relative;
  margin: 12px 0 20px;
}
.code-copy-wrap pre { margin: 0; }
.code-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .18s;
  font-family: var(--k-font);
  letter-spacing: .02em;
  line-height: 1;
  z-index: 10;
}
.code-copy-btn:hover {
  background: rgba(20,184,166,.2);
  border-color: rgba(20,184,166,.4);
  color: #fff;
}
.code-copy-btn.copied {
  background: rgba(20,184,166,.25);
  border-color: rgba(20,184,166,.5);
  color: #14b8a6;
}
.code-copy-btn svg { flex-shrink: 0; }
/* code-label がある場合は少し下にずらす */
.code-label + .code-copy-wrap .code-copy-btn,
.code-copy-wrap:has(.code-label) .code-copy-btn { top: 46px; }

/* --- Callout コピーボタン --- */
.callout { position: relative; }
.callout-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  background: none;
  border: 1px solid rgba(0,0,0,.1);
  color: rgba(0,0,0,.3);
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
}
.callout-copy-btn:hover { background: rgba(0,0,0,.07); color: rgba(0,0,0,.7); }
.callout.tip .callout-copy-btn, .callout.cost .callout-copy-btn {
  border-color: rgba(20,184,166,.25); color: rgba(20,184,166,.5);
}
.callout.tip .callout-copy-btn:hover, .callout.cost .callout-copy-btn:hover {
  background: rgba(20,184,166,.1); color: #14b8a6;
}

/* --- スクショ作業マーク --- */
.screenshot-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 14px;
  vertical-align: middle;
  cursor: default;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

/* --- セクションタイトルの下線（新グラデ） --- */
.section-title::after { background: var(--k-grad); }

/* --- コースバッジ --- */
.course-badge { box-shadow: 0 2px 14px rgba(124,58,237,.3); }

/* --- ヒーロータグ glow --- */
.hero-tag { box-shadow: 0 4px 24px rgba(124,58,237,.5); }

/* --- Callout カラー微調整 --- */
.callout.tip  { background: #f0fdfa; border-color: rgba(20,184,166,.25); color: #0f766e; }
.callout.info { background: #f5f3ff; border-color: rgba(124,58,237,.2);  color: #4c1d95; }

/* --- フッターナビ --- */
.lecture-nav a {
  border-color: rgba(20,184,166,.3);
  background: rgba(20,184,166,.06);
}
.lecture-nav a:hover {
  background: #14b8a6;
  border-color: #14b8a6;
  box-shadow: 0 4px 18px rgba(20,184,166,.4);
}

/* --- phase カラー (teal update) --- */
.phase-1 .phase-header::after { background: #14b8a6; }

/* --- SCKPT メソッドセクション: グラデ & glow 強化 --- */
.sckpt-method {
  background: linear-gradient(160deg, #0d1117 0%, #0f1a2e 100%);
}
.sckpt-method::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 10%;
  width: 420px; height: 420px;
  background: linear-gradient(135deg, #14b8a6, #0ea5e9);
  border-radius: 50%;
  opacity: .05;
  filter: blur(70px);
  pointer-events: none;
}
.sckpt-principle {
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.sckpt-principle:hover {
  background: rgba(20,184,166,.1);
  border-color: rgba(20,184,166,.25);
}

/* --- SCKPT tag: 新グラデ --- */
.sckpt-tag { box-shadow: 0 4px 22px rgba(124,58,237,.45); }

/* --- ハンバーガー (mobile): 色更新 --- */
.hamburger span { background: rgba(255,255,255,.75); }

/* --- breadcrumb リンク --- */
.breadcrumb a { color: #14b8a6; }

/* --- scrollbar --- */
::-webkit-scrollbar-thumb { background: #2a4a58; }
::-webkit-scrollbar-thumb:hover { background: #14b8a6; }

/* --- インラインコード --- */
code {
  background: #f0fdfa;
  color: #0f766e;
  border-color: rgba(20,184,166,.2);
}


/* ============================================================
   FIX v3 — nav / checklist / phase / table / back-to-top
   ============================================================ */

/* --- デスクトップ: hamburger 非表示 + dropdown hover で開く --- */
@media (min-width: 1025px) {
  .hamburger { display: none !important; }
  /* CSS hover でドロップダウン表示（JS不要のフォールバック） */
  .nav-dropdown:hover .nav-dd-panel,
  .nav-dropdown.open  .nav-dd-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

/* --- 全体ガイド（ドロップダウン内に移動） --- */
.nav-dd-home {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: all .12s;
}
.nav-dd-home:hover { color: #fff; background: rgba(255,255,255,.06); border-radius: 6px 6px 0 0; }
.nav-dd-home.active { color: #14b8a6; }

@media (max-width: 1024px) {
  .nav-dd-home {
    padding: 11px 24px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 13px;
    border-left: 2px solid transparent;
  }
  .nav-dd-home:hover, .nav-dd-home.active {
    border-left-color: #14b8a6;
    background: rgba(255,255,255,.05);
    color: #fff;
    border-radius: 0;
  }
}

/* --- Phase ヘッダー: 一貫した背景 --- */
.phase-header {
  background: #f8fafc !important;
  border-left: 3px solid transparent;
}
.phase-1 .phase-header { border-left-color: #14b8a6; }
.phase-2 .phase-header { border-left-color: #7c3aed; }
.phase-3 .phase-header { border-left-color: #2563eb; }
.phase-4 .phase-header { border-left-color: #d97706; }
/* blob 装飾を非表示（見づらさの原因） */
.phase-1 .phase-header::after,
.phase-2 .phase-header::after,
.phase-3 .phase-header::after,
.phase-4 .phase-header::after { display: none; }

/* --- Checklist: 二重□ 解消 + checkbox スタイル --- */
.checklist li { cursor: pointer; }
.checklist li::before { display: none; }  /* CSS-added □ を非表示 */
.chk-box {
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: #14b8a6;
  cursor: pointer;
  margin-top: 2px;
}

/* lecture-05+ 形式のチェックリスト */
.checklist-section {
  margin: 24px 0 32px;
  background: var(--k-bg-gray);
  border-radius: var(--k-r-md);
  padding: 20px 24px;
  border: 1px solid var(--gray-200);
}
.checklist-section h2 {
  font-size: 16px; font-weight: 700;
  color: var(--k-dark); margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.75;
  color: var(--k-dark);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] {
  flex-shrink: 0; width: 16px; height: 16px;
  margin-top: 3px; accent-color: #14b8a6; cursor: pointer;
}
.checklist-item span { flex: 1; }

/* --- page-nav (lecture-05+ 下部ナビ) --- */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.page-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #14b8a6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--k-r-pill);
  border: 1.5px solid rgba(20,184,166,.3);
  background: rgba(20,184,166,.06);
  transition: all .18s;
}
.page-nav-btn:hover {
  background: #14b8a6; color: #fff;
  border-color: #14b8a6;
  box-shadow: 0 4px 16px rgba(20,184,166,.35);
}
@media (max-width: 480px) {
  .page-nav { flex-direction: column; }
  .page-nav-btn { justify-content: center; }
}

/* --- 全テーブル横スクロール --- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- ステップ内 ol/ul を縦並び確保 --- */
.step-body ol, .step-body ul { display: block; }
.step-body ol li, .step-body ul li { display: list-item; }
.step-body ol { counter-reset: none; }

/* --- TOPに戻るボタン --- */
#back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  background: rgba(13,17,23,.9);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: rgba(255,255,255,.75);
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s, background .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0;
  font-family: sans-serif;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#back-to-top:hover { background: #14b8a6; border-color: #14b8a6; color: #fff; }

/* --- callout コピーボタン非表示 --- */
.callout-copy-btn { display: none !important; }

/* --- SCKPT footnote --- */
.sckpt-footnote {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.28);
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  line-height: 1.8;
  letter-spacing: .02em;
}

/* ===== FIX v4 ===== */

/* Hero text on white LP background */
.page-index .hero .subtitle strong {
  color: var(--k-teal) !important;
}

/* Mock-screen: non-interactive illustration */
.mock-screen {
  pointer-events: none;
  cursor: default;
  position: relative;
}
/* "イメージ図" label in titlebar */
.mock-screen .screen-titlebar {
  position: relative;
}
.mock-screen .screen-titlebar::after {
  content: 'イメージ図';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: rgba(255,255,255,.45);
  font-family: var(--font-sans, sans-serif);
  letter-spacing: .04em;
}

/* Table: improved readability */
table th {
  background: var(--k-dark, #0d1117) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  font-size: 13px;
  white-space: nowrap;
}
table td {
  color: var(--k-dark, #0d1117) !important;
  padding: 10px 14px !important;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.65;
}
table tbody tr:nth-child(even) td {
  background: #f8fafc;
}
table tbody tr:hover td {
  background: rgba(20, 184, 166, .05);
}
/* Prevent overly narrow columns */
table td, table th {
  min-width: 60px;
}

/* sckpt-footnote: slightly larger, more breathing room */
.sckpt-footnote {
  font-size: 13px !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,.4) !important;
  margin-top: 20px !important;
}

/* Code block: clear gap after mock-screen caption */
.screen-caption {
  margin-bottom: 20px;
}

/* ===== FIX v5: nav dropdown overflow fix =====
   .nav-links の overflow:hidden がパネルをクリップしていたため visible に上書き */
.nav-links { overflow: visible !important; }
/* パネルが viewport 右端で切れないよう right-aligned に変更 */
.nav-dd-panel { left: auto; right: -8px; }

/* ===== FIX v6: CTA ボタン ===== */

/* グローバルナビ: 受講するボタン */
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(110deg, #7c3aed 0%, #0ea5e9 100%);
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 7px 16px;
  border-radius: 20px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(124,58,237,.35);
  transition: opacity .15s, transform .15s, box-shadow .15s;
  margin-left: 8px;
}
.nav-cta-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(124,58,237,.5);
  background: linear-gradient(110deg, #7c3aed 0%, #0ea5e9 100%) !important;
}
/* モバイル: ドロワー内ではブロック表示 */
@media (max-width: 1024px) {
  .nav-cta-btn {
    display: block;
    margin: 12px 24px;
    text-align: center;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* ヒーロー: CTA ボタンエリア */
.hero-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(110deg, #7c3aed 0%, #0ea5e9 100%);
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 16px 36px;
  border-radius: 32px;
  text-decoration: none !important;
  box-shadow: 0 6px 28px rgba(124,58,237,.45);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(124,58,237,.55);
  opacity: .95;
}
.hero-cta-note {
  font-size: 12px;
  color: rgba(30,30,30,.45);
  line-height: 1.5;
}
/* index.html は白ヒーロー背景なのでノートテキスト色調整 */
.page-index .hero-cta-note {
  color: rgba(30,30,30,.45);
}

/* ===== FIX v7: お問合わせナビボタン ===== */
.nav-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: rgba(255,255,255,.72) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.2);
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
  margin-left: 6px;
}
.nav-contact-btn:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
}
@media (max-width: 1024px) {
  .nav-contact-btn {
    display: block;
    margin: 4px 24px 16px;
    text-align: center;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
  }
}