/* ==========================================================================
   1. 変数定義 (Variables)
   ========================================================================== */
:root {
  /* * ブランドカラー定義（緑バージョン） */
  --brand: #198754;   /* Main Green (基本の緑 / Bootstrap Successに近い色) */
  --brand-2: #20c997; /* Teal / Emerald (明るい青緑) - グラデーション用 */
  --brand-3: #0f5132; /* Dark Green (深い緑) - テキストや強調用 */
  --brand-4: #a3cfbb; /* Accent Green (淡い緑) - 光の表現など */
  --ink: #0b1220;     /* 基本文字色（濃紺/ほぼ黒） */
}

/* ==========================================================================
   2. 基本設定 & リセット (Base & Reset)
   ========================================================================== */
body {
  color: var(--ink);
  /* 日本語フォント設定（游ゴシック優先） */
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* * ユーザーがOS設定で「視差効果を減らす」をオンにしている場合の対応
 * アニメーションを無効化してアクセシビリティを確保します
 */
@media (prefers-reduced-motion: reduce) {
  .hero-wrap,
  .hero-wrap::before,
  .hero-wrap::after,
  .btn-gradient::after {
    animation: none !important;
  }
}

/* セクション共通の余白設定 */
.section {
  padding: 72px 0;
}

/* ==========================================================================
   3. タイポグラフィ (Typography)
   ========================================================================== */

/* --- 見出し --- */

   /* 全見出しのフォント設定 */
h1, h2, h3, h4, h5, h6 {
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* H1: ヒーローエリア用 */
h1 {
  color: #ffffff;
}

/* H2～H6: 通常セクション用 (深い緑に変更) */
h2, h3, h4, h5, h6 {
  color: var(--brand-3) !important;
}

/* H2～H6: 通常セクション用 ※ダークモード時 (明るい緑に変更) */
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: var(--brand-2) !important;
}

/* --- 本文・リスト --- */

/* 通常時の文字色 */
p, li {
  color: #000000 !important;
}

/* 通常時の文字色 ※ダークモード時 */
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] li {
  color: #ffffff !important;
}

/* --- 特殊なテキストスタイル --- */

/* リード文 */
.lead {
  color: #ffffff;
  font-weight: bold;
}

/* オフキャンバス（メニュー）のタイトル */
.offcanvas-title {
  color: #ffffff;
  font-weight: bold;
}

/* Bootstrap Iconsの位置調整 */
.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

/* ★Bootstrap標準カラーの上書き（HTML側の text-primary 等を緑にするため） */
.text-primary {
  color: var(--brand) !important;
}
.bg-primary {
  background-color: var(--brand) !important;
}
.border-primary {
  border-color: var(--brand) !important;
}
.badge.bg-primary {
  background-color: var(--brand) !important;
}

/* ==========================================================================
   4. コンポーネント (Components)
   ========================================================================== */

/* --- アイコン・バッジ --- */

/* 機能紹介などで使う大きなアイコン */
.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--brand); /* 青から緑へ変更 */
}

/* 半透明の白いバッジ（ヒーローエリア内のタグで使用） */
.badge-soft {
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

/* --- カード --- */

/* カードの基本スタイル */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

/* カードの基本スタイル ※ダークモード時 */
[data-bs-theme="dark"] .card {
  background-color: #2d3748;
  color: #fff;
}

/* カードホバー時の浮き上がりエフェクト */
.card:hover {
  transform: translateY(-5px);
}

/* カードの左端へのアクセント線 (緑に変更) */
.case-study-card {
  border-left: 5px solid var(--brand);
}


/* --- アコーディオン --- */

/* アコーディオンが開いている時のスタイル */
.accordion-button:not(.collapsed) {
  background: rgba(25, 135, 84, 0.1); /* ブランドカラー(緑)の薄い背景 */
  color: var(--brand-3);
  box-shadow: none;
}

/* アコーディオンの矢印アイコンの色相調整 (緑系にシフト) */
.accordion-button:not(.collapsed)::after {
  /* 緑色へのフィルター変換 */
  filter: sepia(100%) saturate(300%) hue-rotate(80deg) brightness(80%) contrast(100%);
}

/* --- 導入フロー用ステップ円--- */
.step-circle {
  width: 60px;
  height: 60px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 1rem auto;
}

/* ==========================================================================
   5. ボタン
   ========================================================================== */

/* --- グラデーションボタン --- */
.btn-gradient {
  position: relative;
  border: none;
  color: #fff;
  /* グラデーション (緑系) */
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  overflow: hidden;
  isolation: isolate;
}

/* ボタンの周囲を走る光のアニメーション効果 */
.btn-gradient::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand-4), var(--brand));
  background-size: 300% 100%;
  filter: blur(8px);
  z-index: -1;
  animation: btnBorder 6s linear infinite;
  opacity: .7;
}

/* ボタンホバー時の挙動 */
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  color: #fff;
}

/* ボタン枠のアニメーション定義 */
@keyframes btnBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --- テーマ切り替えボタン (緑ベースに変更) --- */
.btn-bd-primary {
  --bd-violet-bg: #198754; /* 背景色: 緑 */
  --bd-violet-rgb: 25, 135, 84;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #20c997; /* ホバー時: 明るい緑 */
  --bs-btn-hover-border-color: #20c997;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #0f5132; /* クリック時: 濃い緑 */
  --bs-btn-active-border-color: #0f5132;
}

/* モード切り替えドロップダウンの重なり順調整 */
.bd-mode-toggle {
  z-index: 1500;
}

/* ==========================================================================
   6. ヒーローエリア
   ========================================================================== */

/* メインビジュアルのラッパー */
.hero-wrap {
  position: relative;
  color: #fff;
  overflow: clip; /* 範囲外のアニメーションを隠す */
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(-45deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand-4));
  background-size: 400% 400%;
  animation: gradientMove 18s ease-in-out infinite;
  isolation: isolate;
}

/* 背景の回転する光のエフェクト (疑似要素) */
.hero-wrap::before,
.hero-wrap::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .08), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(40px);
  animation: swirl 24s linear infinite;
  pointer-events: none;
}

/* 2つ目の光のエフェクト（逆回転） */
.hero-wrap::after {
  animation-direction: reverse;
  animation-duration: 30s;
  opacity: .7;
}

/* 背景グラデーションのアニメーション定義 */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 光の回転アニメーション定義 */
@keyframes swirl {
  0% { transform: rotate(0deg) scale(1.05); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1.05); }
}

/* ヒーローエリア内のボタンアニメーション */
.hero-cta .btn {
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease;
}

.hero-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}