/**
 * PRONTO HEALTH 共通スタイル
 *
 * static_html 内の全 HTML から重複していた CSS を抽出・統合。
 * 参照元: 01_pronto_top.html, 04_pronto_ご利用ガイド.html 等（転記ベース）
 *
 * 注意: static_html は参照専用。直接編集しないこと。
 */

/* ==========================================
   CSS変数定義（トンマナの管理）
   ========================================== */
:root {
  --c-bg: #FAF9F6;
  --c-bg-alt: #F2EFE9;
  --c-dark: #1A1A1A;
  --c-dark-soft: #2C2C2C;
  --c-accent: #8B7D3C; /* ゴールドカラー */
  --c-border: #E5E0D8;

  /* タイポグラフィ設定 */
  --f-serif-en: 'Cormorant Garamond', serif;
  --f-serif-jp: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --f-sans: 'Noto Sans JP', sans-serif;
}

/* ==========================================
   ベーススタイル
   ========================================== */
body {
  font-family: var(--f-serif-jp);
  background-color: var(--c-bg);
  color: var(--c-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.05em;
  line-height: 1.8;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

.font-sans {
  font-family: var(--f-sans);
}

.font-serif-en {
  font-family: var(--f-serif-en);
}

/* ==========================================
   スクロール表示アニメーション (.reveal)
   IntersectionObserver と連動
   ========================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

/* ==========================================
   カスタムホバー線 (.hover-line)
   Aタグなどの下線アニメーション
   ========================================== */
.hover-line {
  position: relative;
}

.hover-line::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.4s ease;
}

.hover-line:hover::after {
  width: 100%;
}

/* ==========================================
   FAQアコーディオンアニメーション
   ========================================== */
.faq-content {
  transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.4s ease,
    padding 0.4s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}

.faq-content.open {
  max-height: 500px; /* 十分な高さを確保 */
  opacity: 1;
  visibility: visible;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

/* ==========================================
   ヒーロー背景 ケンバーンズエフェクト
   ========================================== */
@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

.hero-bg-anim {
  animation: kenBurns 20s ease-out forwards;
}

/* ==========================================
   スムーズスクロール時のヘッダー被り防止
   （ご利用ガイド等のアンカーリンク用）
   ========================================== */
html {
  scroll-behavior: smooth;
}

.scroll-mt {
  scroll-margin-top: 120px;
}

/* ==========================================
   サイドバーのアクティブリンク表示
   （ご利用ガイドの目次用）
   ========================================== */
.toc-link.active {
  color: var(--c-accent);
}

.toc-link.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: var(--c-accent);
  border-radius: 50%;
}

/* ==========================================
   スクロールバー非表示（横スクロール領域用）
   ========================================== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}