/* ==========================================================================
   1. 変数定義 (Variables)
   ========================================================================== */
:root {
  /* * ブランドカラーの設定 */
  --brand:#7c3aed;
  --brand-2:#06b6d4;
  --brand-3:#22c55e;
  --brand-4:#f59e0b;
  --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;
}
*/

/* オリジナルグラデーションテキスト */
/*.gradient-text {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/*

/* ==========================================================================
   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-gray-bg: #7c3aed;
  --bd-gray-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-gray-bg);
  --bs-btn-border-color: #3b82f6;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #7c3aed;
  --bs-btn-hover-border-color: #3b82f6;
  --bs-btn-focus-shadow-rgb: var(--bd-gray-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #7c3aed;
  --bs-btn-active-border-color: #3b82f6;
}

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