/* =========================================
   Theme CSS (Trust & Soft)
   - Color / Typography / Components skin
   ========================================= */

:root {
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;

  /* 配色定義 */
  --cta-bg: #2c3643;      /* メイン背景 */
  --cta-bg-deep: #26303c; /* 濃い背景 */
  --accent: #1f7a62;
  --accent-soft: rgba(31, 122, 98, 0.12);

  --surface: #ffffff;
  --surface-muted: #f7f8fa;
  --surface-btn: #f9fafb; /* ボタン用: 極薄いグレー */

  --radius: 18px;
}

body { color: var(--ink); background: var(--surface); }

/* Inline Links */
.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Header Nav skin */
.nav-list a { color: var(--ink); }
.nav-cta a {
  background: var(--accent-soft);
  border: 1px solid rgba(31, 122, 98, 0.18);
  color: var(--ink);
}
.mobile-nav__cta {
  background: var(--accent-soft) !important;
  border-color: rgba(31, 122, 98, 0.22) !important;
}

/* Hero skin */
.hero { background: #f3f7f6; color: var(--ink); }
.hero-eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: rgba(17, 24, 39, 0.72); }
.hero-title { letter-spacing: 0.01em; }
.hero-lead { color: rgba(17, 24, 39, 0.72); }

/* Sections */
.section-title { margin: 0 0 26px; }
.section-title .jp { display: inline-block; font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.section-muted { background: var(--surface-muted); }
.muted { color: var(--muted); margin: 12px 0 18px; }

/* Cards */
.card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 6px 24px rgba(17, 24, 39, 0.04);
}
.card-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.card-text { margin: 0; color: rgba(17, 24, 39, 0.74); }

/* =========================================
   PDF links (修正点)
   - 背景色を少しつけて「ボタン」として認識させる
   - 矢印アイコンを追加
========================================= */
.pdf-link {
  /* 背景: 白ではなく極薄いグレーにして浮き立たせる */
  background: var(--surface-btn); 
  /* 枠線: 少し濃くして視認性を上げる */
  border-color: #d1d5db; 
  color: var(--ink);
  transition: all 0.2s ease;
}

/* ホバー時の挙動 */
.pdf-link:hover {
  background: #f3f4f6; /* ホバーで少し濃く */
  border-color: #9ca3af;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 矢印アイコンの追加 */
.pdf-link::after {
  content: "→"; /* シンプルな矢印 */
  font-family: sans-serif;
  font-weight: bold;
  margin-left: 6px;
  color: var(--accent); /* アクセントカラー */
}

.pdf-note {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 800; line-height: 1; cursor: pointer; user-select: none;
}
.btn-primary { background: var(--cta-bg); color: #fff; border-color: rgba(255, 255, 255, 0.06); }
.btn-ghost { background: #fff; color: var(--ink); border-color: #d1d5db; }
.btn-large { padding: 14px 20px; min-width: 160px; }

/* CTA section */
.cta-section { background: var(--cta-bg); color: #fff; padding: 72px 0; text-align: center; }
.cta-title { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 0.02em; }
.cta-lead { margin: 14px auto 0; color: rgba(255, 255, 255, 0.82); }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; justify-content: center; }
.cta-section .btn-primary { background: #d6d9dd; color: var(--ink); border-color: rgba(255, 255, 255, 0.06); }
.cta-section .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.cta-note { margin: 16px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.78); }

/* Footer */
.site-footer { border-top: 1px solid #eef2f7; background: #fff; color: rgba(17, 24, 39, 0.74); }
.site-footer small { display: block; padding: 20px 0; }

/* Mobile fixed CTA */
.mobile-cta {
  background: var(--cta-bg-deep); color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 900; letter-spacing: 0.02em;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .section-title .jp { font-size: 20px; }
  .cta-title { font-size: 26px; }
  .btn-large { min-width: 150px; }
}