/* ==========================================================================
   1. 基本設定 (Base & Typography)
   ========================================================================== */

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

.bar {
  padding: 0.8em 1em; /* 内側の余白を広めに */
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  
  /* 背景：ブランドカラーの青グラデーション */
  background: linear-gradient(135deg, #0078D4, #005a9e);
  color: #ffffff; /* 白文字 */
  
  /* 影をつけて少し浮かせる */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  border-radius: 4px; /* 角を少し丸く */
  border: none;
  
  font-weight: 700;
  letter-spacing: 0.05em; /* 文字間隔を少し広げて読みやすく */
}

/* ダークモード対応 */
[data-bs-theme="dark"] .bar {
  background: linear-gradient(135deg, #004578, #003355); /* 少し暗めの青 */
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

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

/* --- アイコン設定 (Bootstrap Icons) --- */
.bi {
  vertical-align: -.125em; /* アイコンを文字のベースラインより少し下に調整 */
  fill: currentColor;      /* 親要素の文字色を継承 */
}

/* --- テーマ切り替えボタン (Light/Dark) --- */
/* 右下に固定表示されるテーマ切り替えボタンの配色設定 */
.btn-bd-primary {
  /* ▼ ベースカラー */
  --bd-violet-bg: #6c757d; 
  --bd-violet-rgb: 108, 117, 125;
  
  --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: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  
  /* ▼ クリック時・アクティブ時の色 */
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
}

/* テーマ切り替えボタンの重なり順（最前面に表示） */
.bd-mode-toggle {
  z-index: 1500;
}

/* ==========================================================================
   3. カルーセル / スライドショー (Carousel)
   ========================================================================== */

/* --- カルーセル全体の共通設定 --- */
.carousel-item {
  position: relative;
  min-height: 500px; /* スライドの最小高さを確保 */
  background-size: cover;
  background-position: center;
}

/* スライド画像の調整 */
.carousel-item img {
  object-fit: cover; /* 画像の比率を保ったまま枠いっぱいに表示 */
  width: 100%;
  height: 500px;
}

/* --- スライド上の黒いフィルター (Overlay) --- */
/* 文字を読みやすくするために画像の上に半透明の黒を重ねる */
.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 黒色の50%透明 */
  z-index: 1;
}

/* --- スライド内のテキスト (Caption) --- */
.carousel-caption {
  position: absolute;
  z-index: 2; /* オーバーレイより手前に表示 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 文字の影で視認性向上 */
}

/* ダークモード時のキャプション色強制（白） */
[data-bs-theme="dark"] .carousel-caption {
  color: white !important;
}

/* --- 各スライドの個別背景画像設定 --- */
/* HTMLで使用されているスライド画像のみ定義 */

/* スライド1: ITツール導入支援 */
.carousel-slide1 {
  background-image: url('https://seifa.co.jp/img/seifa/slide1.webp');
}

/* スライド2: デジタル人材育成 */
.carousel-slide2 {
  background-image: url('https://seifa.co.jp/img/seifa/slide2.webp');
}

/* ==========================================================================
   4. Pick UPセクション用 グラデーションボタン設定
   ========================================================================== */

/* 色変数の定義 (Microsoft365ページと同様の青色定義) */
:root {
  --brand: #0078D4;   /* メインカラー */
  --brand-2: #00A4EF; /* 明るい青（グラデーション用） */
  --brand-3: #004578; /* 濃い青 */
  --brand-4: #50E6FF; /* アクセント */
}

/* --- グラデーションボタン --- */
.btn-gradient {
  position: relative;
  border: none;
  color: #fff !important; /* 文字色を白で固定 */
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ボタンの周囲を走る光のアニメーション効果 */
.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%; }
}

/* Microsoft365導入サービス用カード */
.card-bg-microsoft365 {
  /* * 文字の視認性を確保するため、画像に「黒の半透明（60%）」を効果重ねています。 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('https://seifa.co.jp/img/seifa/logo-microsoft365.webp');
  
  /* 画像全体ができるだけ入るように調整しつつ、カード全体を埋める設定 */
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* テキストを白くして視認性を上げる */
  color: #ffffff !important;
  border: none; /* 枠線を消して没入感を出す */
  overflow: hidden; /* 角丸からはみ出さないようにする */
}

/* カード内の見出し（h5）も強制的に白くし、影をつけて読みやすくする（見出し要素は降順対策のため、html側では「<h3 class="h5 ...">」で書き換えを実施 */
.card-bg-microsoft365 h3 {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* DX認定取得サービス用カード */
.card-bg-dx-nintei {
  /* * 文字の視認性を確保するため、画像に「黒の半透明（60%）」を効果重ねています。 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('https://seifa.co.jp/img/seifa/logo-dx-nintei.webp');
  
  /* 画像全体ができるだけ入るように調整しつつ、カード全体を埋める設定 */
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* テキストを白くして視認性を上げる */
  color: #ffffff !important;
  border: none; /* 枠線を消して没入感を出す */
  overflow: hidden; /* 角丸からはみ出さないようにする */
}

/* カード内の見出し（h5）も強制的に白くし、影をつけて読みやすくする */
.card-bg-dx-nintei h3 {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* AI活用支援サービス用カード */
.card-bg-ai {
  /* * 文字の視認性を確保するため、画像に「黒の半透明（60%）」を効果重ねています。 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('https://seifa.co.jp/img/seifa/logo-ai.webp');
  
  /* 画像全体ができるだけ入るように調整しつつ、カード全体を埋める設定 */
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* テキストを白くして視認性を上げる */
  color: #ffffff !important;
  border: none; /* 枠線を消して没入感を出す */
  overflow: hidden; /* 角丸からはみ出さないようにする */
}

/* カード内の見出し（h5）も強制的に白くし、影をつけて読みやすくする */
.card-bg-ai h3 {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* Kintone導入・定着支援用カード */
.card-bg-kintone {
  /* * 文字の視認性を確保するため、画像に「黒の半透明（60%）」を効果重ねています。 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('https://seifa.co.jp/img/seifa/logo-kintone.webp');
  
  /* 画像全体ができるだけ入るように調整しつつ、カード全体を埋める設定 */
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* テキストを白くして視認性を上げる */
  color: #ffffff !important;
  border: none; /* 枠線を消して没入感を出す */
  overflow: hidden; /* 角丸からはみ出さないようにする */
}

/* カード内の見出し（h5）も強制的に白くし、影をつけて読みやすくする */
.card-bg-kintone h3 {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* ホームページ制作・運用支援用カード */
.card-bg-web-service {
  /* * 文字の視認性を確保するため、画像に「黒の半透明（60%）」を効果重ねています。 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('https://seifa.co.jp/img/seifa/logo-web-service.webp');
  
  /* 画像全体ができるだけ入るように調整しつつ、カード全体を埋める設定 */
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* テキストを白くして視認性を上げる */
  color: #ffffff !important;
  border: none; /* 枠線を消して没入感を出す */
  overflow: hidden; /* 角丸からはみ出さないようにする */
}

/* カード内の見出し（h5）も強制的に白くし、影をつけて読みやすくする */
.card-bg-web-service h3 {
  color: #ffffff !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* ==========================================================================
   5. 画像のライト・ダークモード切り替え設定
   ========================================================================== */

/* --- 1. 基本設定（ライトモード） --- */
/* 明示的にライトモード、またはAuto（システムがライト）の場合に適用 */
.theme-img-dark {
  display: none !important; /* ダーク用は隠す */
}
.theme-img-light {
  display: block !important; /* ライト用を表示 */
}

/* --- 2. 強制ダークモードの場合 --- */
/* 右下のボタンで「Dark」を選択した場合 */
[data-bs-theme="dark"] .theme-img-dark {
  display: block !important; /* ダーク用を表示 */
}
[data-bs-theme="dark"] .theme-img-light {
  display: none !important; /* ライト用を隠す */
}

/* --- 3. Auto設定かつ、デバイスがダークモードの場合 --- */
/* 右下のボタンで「Auto」を選択し、PC/スマホがダークモードの場合 */
@media (prefers-color-scheme: dark) {
  [data-bs-theme="auto"] .theme-img-dark {
    display: block !important;
  }
  [data-bs-theme="auto"] .theme-img-light {
    display: none !important;
  }
}