/* motopuppu/static/css/style.css */
/* --- ナビゲーションバーとサイドバーの重なり順を修正 --- */
/* アプリケーション全体の固定ナビゲーションバーを最前面に設定 */
.navbar.fixed-top {
    z-index: 1030;
}

/* ヘルプページのサイドバーの位置と重なり順を調整 */
.help-sidebar .sticky-top {
    top: 80px; /* ナビゲーションバーの高さ分だけ下げる */
    z-index: 1020; /* Bootstrapのデフォルト値ですが、明示的に指定 */
}

/* --- 固定ナビゲーションバーの下にコンテンツが隠れるのを防ぐ --- */
#main-content {
    padding-top: 80px; /* ナビゲーションバーの高さに合わせて調整 */
}


/* --- FullCalendar カスタマイズ --- */
.fc .fc-daygrid-day-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 1px 2px; margin-bottom: 2px; min-height: 1.4em; position: relative; }
.fc .fc-daygrid-day-number { order: 1; text-decoration: none !important; color: inherit; padding: 0; text-align: left; flex-shrink: 0; line-height: 1.2; font-weight: normal; }
.fc-holiday-name { order: 2; font-size: 0.7em; line-height: 1.2; color: #dc3545; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; text-align: right; cursor: default; }
.fc-day-holiday .fc-daygrid-day-number, .fc .fc-daygrid-day-number.is-holiday { color: #dc3545 !important; font-weight: bold; }
.fc-day-sun:not(.fc-day-holiday) .fc-daygrid-day-number, .fc .fc-daygrid-day-number.is-sun:not(.is-holiday) { color: #dc3545 !important; }
.fc-day-sat:not(.fc-day-holiday):not(.fc-day-sun) .fc-daygrid-day-number, .fc .fc-daygrid-day-number.is-sat:not(.is-holiday):not(.is-sun) { color: #0d6efd !important; }
.fc .fc-daygrid-day-frame { padding: 2px; min-height: 4.5em; position: relative; }
.fc .fc-col-header-cell-cushion { text-decoration: none !important; color: inherit; display: block; padding: 4px; }
.fc .fc-col-header-cell > a { text-decoration: none !important; color: inherit; }
.fc-list-event-title a { text-decoration: none; color: inherit; }
.fc-list-day-text, .fc-list-day-side-text { text-decoration: none; color: inherit; }

/* --- ポップオーバーのスタイル調整 --- */
.motopuppu-popover { max-width: 350px; font-size: 0.875rem; }
.motopuppu-popover .popover-body dl { margin-bottom: 0; }
.motopuppu-popover .popover-body dt { font-weight: bold; color: #6c757d; margin-top: 0.3rem; }
.motopuppu-popover .popover-body dd { margin-left: 0.5rem; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; }
.motopuppu-popover .popover-body dd:first-of-type { margin-top: 0; }

/* --- お知らせモーダル用スタイル (共通) --- */
#announcementsModal .modal-body .mb-3 h6 {
    font-weight: bold; /* Poppins/Ralewayのboldは600想定 */
}
#announcementsModal .modal-body .mb-3 .small {
    line-height: 1.6;
    /* color: #2c3e50; */ /* .page-landing で指定されるのでここではコメントアウト */
}
/* トップページの場合のフォント色を明示的に指定 (Poppinsに合わせる) */
.page-landing #announcementsModal .modal-body .mb-3 .small {
    color: #2c3e50;
}


/* --- デザイン案B: モダンフラット (トップページ専用) --- */
/* Poppins フォントは index.html の page_specific_head ブロックで読み込まれる前提 */

.page-landing { /* body.page-landing でトップページ全体の基本スタイルを設定 */
    font-family: 'Poppins', sans-serif;
    background-color: #eef2f5; /* 例: 薄いクールグレー背景 */
    color: #2c3e50; /* ダークブルーグレー */
    line-height: 1.7;
}

.page-landing h1, .page-landing h2, .page-landing h3,
.page-landing h4, .page-landing h5, .page-landing h6,
.page-landing .h1, .page-landing .h2, .page-landing .h3,
.page-landing .h4, .page-landing .h5, .page-landing .h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #2c3e50;
}

/* アプリ名の大見出し */
.page-landing #main-content > .container h2.text-center {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0.75rem !important;
}

/* キャッチコピー */
.page-landing #main-content > .container p.text-center.text-muted {
    font-size: 1.15rem;
    color: #526272 !important;
    margin-bottom: 3rem !important;
}

/* Misskeyログインボタン */
.page-landing .btn-primary {
    background: linear-gradient(135deg, #1abc9c, #16a085);
    border: none;
    padding: 0.8rem 2rem;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(22, 160, 133, 0.25);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #fff;
}
.page-landing .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(22, 160, 133, 0.35);
}

/* カード共通スタイル */
.page-landing .card {
    border: none;
    box-shadow: 0 5px 20px rgba(44, 62, 80, 0.1);
    border-radius: 0.6rem;
    overflow: hidden;
}
.page-landing .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e7eaec;
    color: #2c3e50;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

/* 機能ハイライトのリストアイテム */
.page-landing #indexFunctionalHighlights .list-group-item {
    border:none;
    padding: 1.25rem;
    background-color: #fff;
    transition: background-color 0.2s ease-in-out;
}
.page-landing #indexFunctionalHighlights .list-group-item i {
    color: #1abc9c;
    font-size: 1.6rem;
}
.page-landing #indexFunctionalHighlights .list-group-item h6 {
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.page-landing #indexFunctionalHighlights .list-group-item small {
    color: #7f8c8d;
}

/* 重要なお知らせ */
.page-landing .alert-warning {
    background-color: #fdf3d8;
    border: 1px solid #fce8b2;
    color: #8a6d3b;
    border-radius: 0.375rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 1.25rem;
}
.page-landing .alert-warning .alert-heading {
    color: inherit;
    font-weight: 600;
}

/* その他お知らせボタン */
.page-landing .btn-outline-primary {
    color: #1abc9c;
    border-color: #1abc9c;
    border-radius: 50px;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
}
.page-landing .btn-outline-primary:hover {
    background-color: #1abc9c;
    color: #fff;
}

/* フッターの text-muted の色もトップページでは調整 (任意) */
.page-landing .footer .text-muted,
.page-landing .footer a.text-muted { /* text-muted クラスを持つリンクも対象に */
    color: #526272 !important; /* キャッチコピーの text-muted と合わせるなど */
}
.page-landing .footer a:not(.text-muted) { /* 通常のフッターリンク */
    color: #1abc9c; /* アクセントカラー */
}
.page-landing .footer a:not(.text-muted):hover {
    color: #16a085; /* ホバー色 */
}

/* --- 給油記録カード (スマートフォン表示用) --- */
.fuel-log-card .list-group-item {
    padding: 0.75rem 1rem;
}

.fuel-log-card dl {
    margin: 0;
}

.fuel-log-card dt {
    font-size: 0.8rem; /* 項目ラベルのフォントサイズ */
    font-weight: normal;
    color: #6c757d;     /* Bootstrapの .text-muted の色 */
    margin-bottom: 0.1rem;
}

.fuel-log-card dd {
    font-size: 1rem;    /* 値のフォントサイズ */
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2;
}

/* 一部のdd要素は少し大きくして目立たせる */
.fuel-log-card dd.fs-5 {
    font-size: 1.25rem !important; /* fs-5クラスを上書き */
    font-weight: 600;
}

/* ▼▼▼ 単位(km)表示用のスタイルを追加 ▼▼▼ */
.fuel-log-card dd.distance-value-cell::after {
    content: " km";
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
    margin-left: 0.25rem;
}

/* --- ▼▼▼ ここから追記ブロック ▼▼▼ --- */
/* --- 走行ログ＆セッティングシートカード (スマートフォン表示用) --- */
.activity-log-card .list-group-item,
.setting-sheet-card .list-group-item {
    padding: 0.75rem 1rem;
}

.activity-log-card dl,
.setting-sheet-card dl {
    margin: 0;
}

.activity-log-card dt,
.setting-sheet-card dt {
    font-size: 0.8rem;
    font-weight: normal;
    color: #6c757d;
    margin-bottom: 0.1rem;
}

.activity-log-card dd,
.setting-sheet-card dd {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2;
    /* テキストが長い場合に折り返す */
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* --- ▲▲▲ 追記はここまで ▲▲▲ --- */


/* --- 整備記録カードの走行距離に単位を追加 --- */
.maintenance-log-card dd.distance-value-cell::after {
    content: " km";
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
    margin-left: 0.25rem;
}

/* --- 表示設定トグル用 --- */
.view-toggles-container .form-switch {
    padding-left: 3.5em; /* ラベルとの余白を調整 */
}
.view-toggles-container .form-check-label {
    padding-top: 0.1em; /* スイッチとの垂直位置を微調整 */
}

/* --- Touring Log Timeline --- */
.timeline {
    list-style: none;
    padding: 0;
    position: relative;
}
.timeline:before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 10px;
    width: 2px;
    background-color: #e9ecef;
}
.timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 35px;
}
.timeline-item-marker {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--bs-primary);
}
.timeline-item-content {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}
.timeline-item-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* --- ヘルプページ共通スタイル --- */
.help-body {
    font-family: 'Poppins', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    background-color: #f4f7f9; /* アプリ全体の背景色 */
    color: #4a5568; /* 基本テキストカラー */
    line-height: 1.7;
}

.help-container {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.help-content h1, .help-content h2, .help-content h3, .help-content h4, .help-content h5 {
    font-weight: 600;
    color: #2d3748;
    letter-spacing: -0.5px;
}

.help-content h2.page-title { /* layout.htmlのメインタイトル */
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.help-content .lead {
    font-size: 1.1rem;
    color: #718096;
}

/* サイドバー */
.help-sidebar .list-group-item {
    border: none;
    padding: 0.85rem 1.25rem;
    font-weight: 500;
    color: #4a5568;
    border-radius: 0.5rem !important;
    margin-bottom: 0.25rem;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; /* スムーズな変化のため */
}

/* 機能ガイドのトグルボタンのスタイルを!importantで上書きし、アニメーション中の崩れを防ぐ */
.help-sidebar .list-group-item[data-bs-toggle="collapse"] {
    font-weight: 500 !important;
    color: #4a5568 !important;
}

/* 展開ボタンが「展開されている」状態（.collapsedクラスがない状態）のスタイル */
.help-sidebar .list-group-item[data-bs-toggle="collapse"]:not(.collapsed) {
    background-color: #ecf0f1;
    color: #2d3748 !important; /* 文字色も濃いまま維持 */
}

/* 現在地を示すアクティブなリンクのスタイル */
.help-sidebar .list-group-item.active {
    background-color: #3498db;
    color: white !important; /* !importantを追加 */
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

/* アクティブでないリンクのホバー時のスタイル */
.help-sidebar .list-group-item:not(.active):hover {
    background-color: #ecf0f1;
}

.help-sidebar .list-group-item .fa-chevron-down {
    transition: transform 0.2s ease-in-out;
}
.help-sidebar .list-group-item[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}
.help-sidebar .collapse .list-group-item {
    font-size: 0.9rem;
    padding: 0.6rem 1.25rem 0.6rem 2.5rem; /* インデント */
    font-weight: 400;
}
.help-sidebar .collapse .list-group-item.active {
    font-weight: 500;
}


/* アコーディオン */
.help-content .accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    overflow: hidden; /* 角丸を効かせるため */
}
.help-content .accordion-header {
    border-bottom: 1px solid #e2e8f0;
}
.help-content .accordion-button {
    font-weight: 600;
    color: #2d3748;
}
.help-content .accordion-button:not(.collapsed) {
    background-color: #f8fafc;
    color: #3498db;
    box-shadow: none;
}
.help-content .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}
.help-content .accordion-body {
    font-size: 0.95rem;
}
.help-content .accordion-body ul, .help-content .accordion-body ol {
    padding-left: 1.2rem;
}

/* テーブル */
.help-content table {
    font-size: 0.9rem;
}
.help-content table thead {
    background-color: #f8fafc;
}
.help-content table th {
    font-weight: 600;
    color: #4a5568;
}

/* その他パーツ */
.help-content .info-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3498db;
    padding: 1rem 1.25rem;
    border-radius: 0.375rem;
    font-family: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace;
    font-size: 0.9rem;
}

/* --- ダッシュボード タイムライン (接続修正版 v2) --- */
.dashboard-timeline {
    list-style: none;
    padding: 0;
    position: relative;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 50px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 20px;
    bottom: -1.5rem;
    width: 4px;
    background-color: #e9ecef;
    z-index: 1;
}
.timeline-item:last-child::before {
    display: none;
}
.timeline-item-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 4px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
}
.timeline-item-marker.type-fuel {
    color: #198754;
    border-color: #198754;
}
.timeline-item-marker.type-maintenance {
    color: #ffc107;
    border-color: #ffc107;
}
.timeline-item-content {
    position: relative;
    background-color: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.timeline-item-content:hover {
    background-color: #f1f3f5;
    border-color: #dee2e6;
}
.timeline-item-date {
    font-weight: 600;
    font-size: 0.9rem;
    color: #6c757d;
}
.timeline-item-title {
    font-weight: 600;
    margin-bottom: 0.1rem;
    color: #212529;
}
.timeline-item-description {
    font-size: 0.9rem;
    color: #495057;
}
.timeline-item-cost {
    font-size: 0.85rem;
    color: #6c757d;
}
#timelineDetailModal .modal-header .icon-fuel { color: #198754; }
#timelineDetailModal .modal-header .icon-maintenance { color: #ffc107; }

/* モーダルの詳細表示スタイル */
#timelineDetailModal .modal-body dt {
    font-weight: bold;
}
#timelineDetailModal .modal-body dd {
    white-space: pre-wrap; /* メモなどの改行を反映 */
    word-break: break-word;
}
/* ▼▼▼ 変更・追記 ▼▼▼ */
/* --- 並び替えモード用のスタイル --- */
.widget-grab-handle {
    cursor: grab;
    display: none; /* 通常時は非表示 */
}
.sortable-ghost {
    opacity: 0.4;
    background: #c8ebfb;
}
#dashboard-widgets-container.is-sorting .widget-grab-handle {
    display: inline-block; /* is-sortingクラスが付いた時だけ表示 */
}
#dashboard-widgets-container.is-sorting .card-header,
/* ▼▼▼ アコーディオン化対応 ▼▼▼ */
#dashboard-widgets-container.is-sorting .accordion-header {
    background-color: #f0f8ff; /* 並び替え中はヘッダー色を少し変える */
}
/* ▲▲▲ 変更・追記 ここまで ▲▲▲ */

/* --- 【見た目修正】ダッシュボード アコーディオンウィジェット --- */
.dashboard-widgets .accordion-header {
    display: flex;
    align-items: center;
}

.dashboard-widgets .accordion-button {
    display: flex;
    align-items: center;
    width: auto;
    flex-grow: 1;
}

.dashboard-widgets .accordion-header > *:not(.accordion-button) {
    padding: 0.5rem 1rem;
    flex-shrink: 0;
}

/* ボタンのデフォルトスタイルをリセットして、親ヘッダーの見た目を継承させる */
.dashboard-widgets .accordion-button {
    color: inherit; /* テキスト色を親から継承 */
    background-color: transparent; /* 背景を透過 */
    border: none;
    box-shadow: none;
    border-radius: 0; /* 角丸をなくす */
}

/* 展開時もスタイルを維持 */
.dashboard-widgets .accordion-button:not(.collapsed) {
    color: inherit;
    background-color: transparent;
    box-shadow: none;
}

/* フォーカス時の青い枠線も削除 */
.dashboard-widgets .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* 矢印アイコンの色が薄くならないように調整 */
.dashboard-widgets .accordion-button::after,
.dashboard-widgets .accordion-button:not(.collapsed)::after {
    filter: brightness(0.7);
}

/* --- グローバル検索フォーム --- */
#global-search-form {
    position: relative; /* 結果表示の基準位置とする */
}

#global-search-results {
    /* display: none; */ /* JSで制御するため、ここでは'block'のままにしておく */
    position: absolute;
    top: 100%; /* フォームの真下に表示 */
    left: 0;
    right: 0;
    z-index: 1050; /* ナビゲーションバーより手前に */
    max-height: 70vh; /* 最大高さを画面の70%に */
    overflow-y: auto; /* 高さを超えたらスクロール */
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 検索結果アイテム */
.search-result-item .result-title {
    font-weight: 500;
}
.search-result-item .result-text {
    font-size: 0.85em;
    color: #6c757d; /* text-muted */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ▼▼▼ ここから追記 ▼▼▼ */
/* --- グローバル検索フォームのスタイル調整 --- */
#global-search-input {
    background-color: #495057; /* 濃いグレーの背景 */
    color: #f8f9fa;            /* 明るいグレーの文字色 */
    border-color: #6c757d;     /* 少し明るいグレーの境界線 */
}

/* 検索ボックスのプレースホルダー文字の色 */
#global-search-input::placeholder {
    color: #adb5bd;
}

/* 検索ボックスのフォーカス（クリックした時）のスタイル */
#global-search-input:focus {
    background-color: #495057;
    color: #f8f9fa;
    border-color: #80bdff; /* Bootstrapのデフォルトのフォーカス色 */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrapのデフォルトのフォーカスグロー */
}

/* ナビゲーションバーの入力グループのアイコン背景 */
#global-search-form .input-group-text {
    background-color: #495057;
    border-color: #6c757d;
    color: #adb5bd; /* アイコンの色 */
}
/* ▲▲▲ 追記ここまで ▲▲▲ */

/* ▼▼▼ 【ここから追記】車両アイコン画像用のスタイル ▼▼▼ */
.vehicle-icon-image {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #dee2e6; /* 薄い枠線 */
    vertical-align: middle;
}
/* ▲▲▲ 追記ここまで ▲▲▲ */


/* --- (再修正) Intro.js チュートリアル表示スタイル --- */
/* 以前の introjs 関連のスタイルはすべて削除し、以下に置き換える */

/* ツールチップ全体のスタイル */
.introjs-tooltip {
    position: relative; /* スキップボタンを絶対配置するための基準点 */
    font-family: var(--bs-font-sans-serif);
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow-lg);
    padding: 1rem;
    max-width: 380px; /* 横幅を少し広げて窮屈さを解消 */
    min-width: 300px; /* 最小幅も確保 */
}

/* ツールチップのタイトル */
.introjs-tooltip-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    /* 右側にスキップボタンを配置するスペースを確保 */
    padding-right: 4rem; 
}

/* ツールチップのテキスト */
.introjs-tooltiptext {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bs-body-color);
}

/* スキップボタン (右上配置) */
.introjs-skipbutton {
    /* 既存のボタンスタイルを完全にリセット */
    all: unset;
    
    /* 右上隅に絶対配置 */
    position: absolute;
    top: 0.85rem;
    right: 1.25rem;
    
    /* テキストリンクとしてのスタイル */
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--bs-secondary);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.introjs-skipbutton:hover {
    color: var(--bs-dark);
    text-decoration: underline;
}


/* 下部のボタン全体を囲むコンテナ */
.introjs-tooltipbuttons {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 1rem;
    padding-top: 0.75rem;
    text-align: right; /* ボタンを右揃えに */
}

/* 「次へ」「前へ」「完了」ボタン共通のスタイル */
.introjs-button {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: var(--bs-border-radius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
    color: var(--bs-gray-700);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
}

.introjs-button:hover {
    background-color: var(--bs-gray-300);
}

/* 「次へ」ボタン */
.introjs-nextbutton {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.introjs-nextbutton:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}
.introjs-disabled.introjs-nextbutton {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.65;
}

/* 「完了」ボタン */
.introjs-donebutton {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
.introjs-donebutton:hover {
    background-color: #157347;
    border-color: #146c43;
    color: #fff;
}

/* プログレスバーのスタイル */
.introjs-progress {
    background-color: var(--bs-gray-200);
}
.introjs-progressbar {
    background-color: var(--bs-primary);
}