/* ==========================================================================
   1. 変数定義 (Variables)
   ========================================================================== */
:root {
  /* * ブランドカラーの設定
   * 黄色・オレンジ系をベースにした配色設定
   */
  --brand: #f59e0b;   /* メインカラー（濃い黄色/Amber 500） */
  --brand-2: #fbbf24; /* サブカラー（明るい黄色/Amber 400）- グラデーション用 */
  --brand-3: #d97706; /* アクセントカラー（オレンジ/Amber 600）- 文字や強調用 */
  --brand-4: #3b82f6; /* コントラストカラー（青/Blue 500）- Kintoneの雲のイメージ */
  --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: #000080 !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: #40e0d0 !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;
}

/* オリジナルテキスト */
.text-original {
  color: #dcae05;
}

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

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

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

/* 機能紹介などで使う大きなアイコン */
.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #0d6efd;
}

/* 半透明の白いバッジ（ヒーローエリア内のタグなど） */
.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 #0d6efd;
}

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

/* アコーディオンが開いている時のスタイル */
.accordion-button:not(.collapsed) {
  background: rgba(245, 158, 11, .1); /* 薄いオレンジ背景 */
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  color: var(--brand-3); /* テキストを濃いオレンジに */
}

/* アコーディオンの矢印アイコンの色相 */
.accordion-button:not(.collapsed)::after {
  filter: sepia(100%) saturate(1000%) hue-rotate(5deg) brightness(100%) 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: #f59e0b; /* 背景色 */
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --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: #fbbf24; /* ホバー時 */
  --bs-btn-hover-border-color: #fbbf24;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #d97706; /* クリック時 */
  --bs-btn-active-border-color: #d97706;
}

/* モード切り替えドロップダウンの重なり順調整 */
.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);
}