* {
    /* 全ての要素に強制的に適用する設定 */
    font-family: "Meiryo UI", "Meiryo", sans-serif !important;
}


/* ボタンのホバー設定: 指示*/
.btn {
    display: inline-block;
    padding: 10px 30px;
    border: 2px solid #0047AB;
    border-radius: 25px;
    background-color: #fff;
    color: #0047AB;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
}
.btn:hover {
    background-color: #0047AB;
    color: #fff;
}

/* ヘッダー共通仕様：白背景・黒枠線 */
.header { display: flex; align-items: center; padding: 10px 30px; background: #fff; border-bottom: 1px solid #000; }
.logo {background: transparent;border: none;padding: 0;display: flex;align-items: center;}        
.nav { display: flex; gap: 20px; font-weight: bold; margin-left: 30px;}
.nav-current { color: #000; text-decoration: none; }
.nav-link { color: #0000ff; text-decoration: underline; }
.user { margin-left: auto; display: flex; align-items: center; color: #0000ff; font-weight: normal; text-decoration: underline; }
.user-icon { background: #5dfcc6; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #ffffff; margin-right: 5px; text-decoration: none !important; }
.logo img {
    height: 20px; /* ここでサイズを一括調整 */
    width: auto;  /* 横幅は比率を維持して自動計算 */
    vertical-align: middle;
    transform: translateY(10px);
}
        body { font-family: sans-serif; margin: 0; background-color: #f0f0f0; }
        .main-layout { display: flex; padding: 40px; gap: 40px; }
        .sidebar-menu { width: 200px; border: 1px solid #dddddd; border-radius: 20px; padding: 20px; text-align: left; height: 500px; background: transparent; }
        .menu-title { font-size:30px;font-weight: bold; margin-bottom: 20px; display: block; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
        .sidebar-links { list-style: none; padding: 0; margin: 0; }
        .sidebar-links li { margin-bottom: 15px; }
        .sidebar-links a { color: #0000ff; text-decoration: underline; font-weight: bold; }
        .button-container { display: flex; gap: 40px; margin: 0 auto;}
        .huge-image-btn { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            width: 350px; 
            height: 300px; 
            border: 1px solid #dddddd; 
            border-radius: 20px; 
            background: #fff; 
            text-decoration: none; 
            color: #000; 
            transition: 0.3s; 
        }
        .huge-image-btn:hover { background-color: #e6e6e6; }  
        .btn-label { font-size: 20px; font-weight: 400; }

        /* 中央コンテンツ */
        .main-title { margin: 20px 0 0 50px; font-size: 30px; font-weight: 700; }
        .card { background: #fff; border: 1px solid #999; border-radius: 60px; width: 800px; margin: 20px auto; padding: 40px; text-align: center; }
        .inner-title { font-size: 25px; font-weight: 700; margin-bottom: 10px; }
        .input-row { text-align: left; width: 550px; margin: 0 auto 20px; }
        .input-row label { font-weight: bold; display: block; margin-bottom: 5px; }
        input[type="text"], select { width: 100%; padding: 8px; border: 1px solid #999; box-sizing: border-box; }
        textarea{ width: 100%; height:100%; padding: 8px; border: 1px solid #999; box-sizing: border-box;}
        
        .sub-title { text-align: left; margin: 20px 0 0 10px; font-size: 20px; font-weight: 600; }
        .file-upload { border: 2px dashed #0000ff; background: #eef; height: 100px; display: flex; align-items: center; justify-content: center; color: #0000ff; font-size: 24px; cursor: pointer; }
        .btn-capsule { display: inline-block; width: 220px; padding: 10px; border: 2px solid #0000ff; border-radius: 50px; background: #fff; color: #0000ff; text-decoration: none; font-weight: bold; transition: 0.3s; margin-top: 20px; }
        .btn-capsule:hover { background: #0000ff; color: #fff; }
        .btn-group { display: flex; justify-content: center; gap: 40px; margin-top: 50px; }
        /* 白の青文字 */
        .btn-outline { display: inline-block; width: 220px; padding: 12px; border: 2px solid #0000ff; border-radius: 15px; background: #fff; color: #0000ff; text-decoration: none; font-weight: bold; transition: 0.3s; }
        .btn-outline:hover { background: #0000ff; color: #fff; }
        /* 青の白文字 */
        .btn-solid { display: inline-block; width: 220px; padding: 12px; border: 2px solid #0000ff; border-radius: 15px; background: #0000ff; color: #fff; text-decoration: none; font-weight: bold; transition: 0.3s; }
        .btn-solid:hover { background: #fff; color: #0000ff; }
        
        .img-placeholder { width: 100px; height: 100px;  display: flex; align-items: center; justify-content: center; margin: 40px auto; }

        .cancel { display: block; margin-top: 10px; }
        .cancel a {color: red !important;}.cancel a:visited {color: red !important;}

        .content { padding: 40px; }
        .top-row { display: flex; justify-content: space-between; margin-bottom: 20px; }
        .btn-blue { background: #3030ff; color: #fff; padding: 8px 40px; border-radius: 10px; text-decoration: none; font-weight: bold; border: none; cursor: pointer; }
        /* .btn-update { position: absolute; right: 0; top: 0; } */

        table { width: 100%; border-collapse: collapse; background: #eee; }
        th, td { font-weight: normal;border: 0px solid #e7e7e7; padding: 2px 12px !important;text-align: left; }
        td {background: #f9f9f9; height: 50px !important;}
        .status-badge {text-align: center;width:80%; background: #5dfcc6; padding: 5px 10px; border-radius: 10px; display: inline-block; border: 1px solid #ccc; }
        .speaker-badge {text-align: center;width:80%; background: #ffffff; padding: 5px 10px; border-radius: 10px; display: inline-block; border: 1px solid #ccc; color: #666;}

        .list-graph-fix {
            width: 150px !important;
            height: 40px !important;
            object-fit: contain;
            display: block;
            margin: 0 auto;
        }
                /* コンテンツエリア */
        .content { padding: 40px 60px; }
        .detail-title { font-size: 28px; font-weight: bold; margin-bottom: 10px; }
        .detail-info { font-size: 20px; font-weight: normal; margin-bottom: 30px; }
        /* サンプル画像エリア */
        .sample-img-box {
            width: 100%;
            max-width: 900px;
            height: 500px;
            background-color: #4472c4;
            color: #fff;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        /* ヘッダーの下から画面端までをレイアウト範囲とする */
        .page-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        /* メインコンテンツを左右に分割 */
        .main-pane {
            display: flex;
            flex: 1; /* 残りの高さをすべて使う */
            overflow: hidden;
            padding: 20px; /* 全体に余白を持たせる */
            gap: 20px;     /* 左右ペインの間の隙間 */
        }

        .left-pane {
            flex: 6; 
            overflow-y: auto;
            background-color: #f0f0f0; /* 背景色を統一 */
        }

        .right-pane {
            flex: 4;
            overflow-y: auto;
            background-color: #f0f0f0; /* 背景色を統一 */
            border-left: 1px solid #ccc; /* 境界がわかるように薄い線を追加 */
            padding-left: 20px;
        }

        img { max-width: 100%; height: auto; margin-bottom: 20px; }

        .action-bar {
            display: flex;
            justify-content: flex-end; /* 右寄せ */
            align-items: center;
            gap: 15px; /* 要素間の間隔 */
            margin-bottom: 20px;
        }

        /* 公開状態のラベルとセレクトボックス */
        .status-select-container {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }

        .status-select {
            padding: 4px 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .more-options {
            color: #0000ff;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
            line-height: 1;
        }
/* --- モーダル共通スタイル --- */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .modal-overlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-content {
            background-color: #f5f5f5;
            padding: 30px;
            border-radius: 8px;
            position: relative;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            max-width: 90%;
            box-sizing: border-box;
            max-height: 90vh;   /* ← 追加：画面高さの90%を上限にする */
            overflow-y: auto;   /* ← 追加：超えた分はスクロールで見られる */
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            cursor: pointer;
            color: #000;
            user-select: none;
        }

        .modal-title {
            font-size: 32px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 25px;
        }

        .modal-btn-blue {
            background-color: #0052cc;
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            font-weight: bold;
        }

        .modal-btn-white {
            background-color: white;
            color: #0052cc;
            border: 1px solid #0052cc;
            padding: 10px 24px;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            margin-right: 10px;
        }

        /* --- タイトルとペンマークの配置調整 --- */
        .detail-title {
            display: flex;
            align-items: center; /* これで文字と画像を縦中央で綺麗に揃えます */
            gap: 10px;           /* タイトルとペンマークの間の隙間 */
        }

        .pencil-icon {
            cursor: pointer;
            height: 24px;        /* 固定値でサイズを指定すると安定します */
            width: auto;
            object-fit: contain;
            transform: translateY(10px);
        }

        /* --- 授業情報の編集モーダル固有のスタイル --- */
        .edit-modal {
            width: 750px;
            background-color: #f8f9fa;
        }

        .edit-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            border: 1px solid #e0e0e0;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }

        .form-label {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 8px;
            display: block;
        }

        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
            box-sizing: border-box;
        }

        .form-select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
            background-color: white;
            box-sizing: border-box;
        }

        .form-textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
            resize: none;
            box-sizing: border-box;
        }

        .textarea-counter {
            text-align: right;
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }

        .edit-footer {
            display: flex;
            justify-content: flex-end;
            margin-top: 25px;
        }

        /* --- 話者情報設定モーダル固有のスタイル --- */
        .speaker-modal { width: 900px; min-height: 450px; }
        .speaker-row { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
        .custom-img-select-container { position: relative; width: 130px; }
        
        .img-select-trigger {
            width: 100%; height: 120px; background: white; border: 2px solid #0052cc;
            border-radius: 6px; display: flex; align-items: center; justify-content: space-between;
            padding: 5px; box-sizing: border-box; cursor: pointer; user-select: none;
        }
        .img-select-trigger img { max-width: 75%; max-height: 100%; object-fit: contain; }
        .arrow-icon { font-size: 12px; color: #666; margin-right: 4px; }

        .img-options-dropdown {
            position: absolute; top: 124px; left: 0; width: 100%; max-height: 200px;
            background: white; border: 1px solid #ccc; border-radius: 4px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15); display: none; overflow-y: auto; z-index: 1100; box-sizing: border-box;
        }
        .img-options-dropdown.is-active { display: block; }
        .img-option-item { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box; cursor: pointer; border-bottom: 1px solid #eee; }
        .img-option-item:last-child { border-bottom: none; }
        .img-option-item:hover { background-color: #0052cc; }
        .img-option-item img { max-width: 90%; max-height: 90%; object-fit: contain; }

        .children-img-box { width: 130px; height: 120px; background: white; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; border-radius: 6px; box-sizing: border-box; }
        .children-img-box img { max-width: 90%; max-height: 90%; object-fit: contain; }
        
        .speaker-input-group { flex: 1; }
        .speaker-input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; box-sizing: border-box; }
        .speaker-select-group { flex: 1; }
        .speaker-select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; }
        .speaker-notice { color: #ff3b30; font-size: 12px; margin-top: 5px; line-height: 1.4; }
        .speaker-footer { display: flex; justify-content: flex-end; margin-top: 40px; }

        /* --- 添付ファイルモーダル固有のスタイル --- */
        .attachment-modal { width: 500px; }
        .attachment-text { color: #666; margin-bottom: 20px; font-size: 16px; }

        /* --- 再分析小モーダル --- */
        .mini-modal { position: absolute; background: white; border: 1px solid #ccc; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 4px; display: none; z-index: 1050; }
        .mini-modal-item { padding: 10px 20px; color: #0000ff; text-decoration: underline; cursor: pointer; font-weight: bold; white-space: nowrap; }
        .mini-modal-item:hover { background-color: #f0f0f0; }
        .more-options-container { position: relative; display: inline-block; }
        .more-options { cursor: pointer; padding: 0 5px; font-size: 20px; user-select: none; }
/* ========================================================
   【新規追加】右ペイン：音声書き起こしデータエリアのスタイル 
   ======================================================== */
.right-pane {
    display: flex !important;
    flex-direction: column !important;
    background-color: #f0f0f0 !important; /* タイトル部分の背景をグレーに */
    padding: 0 !important;               /* 内側の白背景を隙間なく敷くため余白リセット */
    overflow: hidden !important;
}

/* 右ペイン内のタイトル文字用 */
.pane-title {
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* タイムライン画像を配置する「背景が白い」エリア（6/7の領域） */
.transcript-content-area {
    flex: 1;
    background-color: #ffffff; /* ここから下を真っ白にする */
    border-top: 1px solid #ccc;
    position: relative;        /* 透明トリガーボタンを絶対配置するための基準点 */
    box-sizing: border-box;
    overflow-y: auto;          /* 縦に長くなったら独自にスクロールさせる */
}

/* はめ込むハードコピー画像 */
.transcript-mock-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 画像内の「︙」の上にぴったり重ねるクリック判定エリア */
.mock-action-trigger {
    position: absolute;
    width: 10%;    /* クリックできる幅 */
    height: 12%;   /* クリックできる高さ */
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;  /* 画像よりも確実に手前に出す */
    transition: background 0.2s;
    /* 【確認用】 */
    /* background: rgba(255, 0, 0, 0.3) !important;  */
}
/* .mock-action-trigger:hover {
    background: rgba(255, 0, 0, 0.5) !important;
} */

/* 3枚目：発話記録の編集 / メモの追加 が飛び出す吹き出しメニュー */
.transcript-popup-menu {
    position: absolute;
    background: #ffffff;
    border: 1px solid #999999;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 6px 0;
    display: none; /* 初期状態は非表示 */
    z-index: 1200;
    min-width: 160px;
}

/* 吹き出しメニュー内の各行（文字） */
.transcript-popup-item {
    padding: 10px 16px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    user-select: none;
    font-weight: normal; /* メイリオUIの強制太字をマイルドに */
}
.transcript-popup-item:hover {
    background-color: #f0f0f0;
}

/* --- コメントを追加モーダル固有のスタイル --- */
.comment-modal {
    width: 600px;
    background-color: #f5f5f5;
}

.comment-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e0e0e0;
}

.comment-notice {
    color: #ff3b30;
    font-size: 14px;
    margin-top: 8px;
}

/* --- グラフ下に出現するコメントエリア（2枚目画像再現） --- */
.graph-comment-box {
    background: #ffffff;
    border: 1px solid #333333;
    border-radius: 4px;
    padding: 15px 20px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    display: none; /* 最初は非表示 */
}

.graph-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: normal;
}

.graph-comment-text {
    font-size: 18px;
    margin: 0;
    color: #000;
}

/* 削除ボタンのホバーエフェクト */
#btn-delete-comment:hover {
    background-color: #ff7875 !important;
    cursor: pointer;
}

/* ========================================================
   【新規追加】ヘッダーユーザーメニューのスタイル 
   ======================================================== */
.user-dropdown-menu {
    position: absolute;
    top: 40px;          /* ヘッダーの高さに合わせて出現位置を調整 */
    right: 0;
    background-color: #ffffff;
    border: 1px solid #999999;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 240px;
    display: none;      /* 初期状態は非表示 */
    z-index: 1300;      /* モーダル群の手前に表示 */
    padding: 4px 0;
    box-sizing: border-box;
}

/* 最上段の「音声分析可能回数」エリア */
.user-dropdown-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 14px;
    color: #333333;
    border-bottom: 2px solid #ccc; /* 画像にある太めの境界線 */
    font-weight: normal;
    text-decoration: none !important;
}

.user-dropdown-info .count-num {
    font-weight: bold;
}

/* 各メニューリンクの共通スタイル */
.user-dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    color: #333333;
    text-decoration: none !important; /* アンダーラインを強制排除 */
    font-weight: normal;
    box-sizing: border-box;
    transition: background-color 0.2s;
}

/* マウスホバー時に薄青くする設定（画像再現） */
.user-dropdown-item:hover {
    background-color: #c6dafc; 
    color: #333333;
}

/* お知らせの赤丸 */
.notice-dot {
    color: #ff4d4f;
    font-size: 12px;
    margin-left: 2px;
    vertical-align: middle;
}

/* ログアウト（赤文字） */
.logout-item {
    color: #ff4d4f;
}
.logout-item:hover {
    background-color: #ffeef0; /* ログアウト時のみ薄赤ホバーにしても綺麗です。お好みで #c6dafc に変更可 */
    color: #ff4d4f;
}

/* --- ツールチップ（吹き出し）のスタイル --- */
        .tooltip-box {
            position: absolute;
            background: #fff9e6;
            border: 2px solid #ff4d4d;
            border-radius: 15px;
            padding: 15px 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            z-index: 1000;
            width: 250px;
            display: none; /* 初期状態は非表示 */
            transition: all 0.3s ease;
        }
        .tooltip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 18px;
            color: #333;
            margin-bottom: 8px;
        }
        .tooltip-close {
            cursor: pointer;
            color: #999;
            font-size: 20px;
        }
        .tooltip-body {
            font-size: 15px;
            color: #444;
        }
        /* 吹き出しの突起（右側につく三角） */
        .tooltip-box::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
            border-width: 10px;
            border-style: solid;
            border-color: transparent transparent transparent #ff4d4d;
        }
        .tooltip-box::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
            border-width: 8px;
            border-style: solid;
            border-color: transparent transparent transparent #fff9e6;
            z-index: 1;
            margin-left: -2px;
        }
        /* 赤い枠線用の三角 */
        .tooltip-box.arrow-top::after {
            top: -20px; /* 上枠の外側に配置 */
            left: 50%;
            transform: translateX(-50%);
            border-color: transparent transparent #ff4d4d transparent; /* 下向きから上向きに変更 */
        }
        /* 内側の背景色塗りつぶし用の三角 */
        .tooltip-box.arrow-top::before {
            top: -16px; /* 枠線の太さに合わせて微調整 */
            left: 50%;
            transform: translateX(-50%);
            border-color: transparent transparent #fff9e6 transparent; /* 下向きから上向きに変更 */
            margin-left: 0; /* 右側用のマージンをリセット */
        }
        /* アクション行の相対位置ベース */
        .input-row {
            position: relative;
        }

/* ファイルリスト全体のコンテナ */
        .file-list-container {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* 選択されたファイル名と削除ボタンの表示行（横並び・右寄せ） */
        .file-display-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background-color: #f9f9f9;
            border-radius: 6px;
            border: 1px solid #eee;
            box-sizing: border-box;
            width: 100%;
        }
        .file-name-text {
            font-size: 14px;
            color: #333;
            word-break: break-all;
            padding-right: 10px;
        }
        /* 画像を再現した丸みを帯びた削除ボタン */
        .file-delete-btn {
            background: #fff;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }
        .file-delete-btn:hover {
            background: #fff1f0;
        }

        /* 次へボタンをセンターに配置するためのラッパー */
        .submit-btn-wrapper {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 20px;
        }
/* --- 分析中プログレスメーター --- */
.progress-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 120px; /* 必要に応じてテーブル幅に合わせて調整してください */
    font-size: 13px;
    color: #333;
}

.progress-text {
    font-size: 13px;
    white-space: nowrap;
}

/* 4分割のバーの外枠 */
.progress-bar-spec {
    display: flex;
    width: 100%;
    height: 8px; /* メーターの太さ */
    background: transparent;
    gap: 2px; /* ブロックごとの隙間 */
}

/* 各ブロックの基本スタイル（未達成：ライトグレー） */
.bar-block {
    flex: 1;
    background-color: #e0e0e0;
}

/* 左端と右端の角を丸める処理 */
.bar-block:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.bar-block:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* 進行中・達成したブロック（画像に合わせた鮮やかな青） */
.bar-block.fill {
    background-color: #0066ff;
}

/* --- 【追加】ポップアップ用背景暗転レイヤー --- */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        /* --- 【追加】サイズ固定・内部スクロールのポップアップ本体 --- */
        .popup-window {
            width: 800px;
            max-height: 75vh;
            position: relative;   /* ← 追加 */
            z-index: 10001;       /* ← 追加（popup-overlayより1上） */
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* スクロールする中身のコンテナ */
        .popup-content {
            padding: 30px;
            overflow-y: auto;
            flex: 1;
            text-align: center;
        }

        .popup-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333333;
        }

        .popup-text {
            font-size: 15px;
            line-height: 1.6;
            color: #555555;
            margin-bottom: 20px;
            text-align: left;
        }

        .popup-image {
            width: 80%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 25px;
        }

        /* 画面共通の白→青ホバーボタン仕様 */
        .popup-close-btn {
            display: inline-block;
            padding: 10px 45px;
            border: 2px solid #0047AB;
            border-radius: 15px;
            background-color: #fff;
            color: #0047AB;
            font-size: 15px;
            font-weight: bold;
            text-decoration: none;
            transition: 0.3s;
            cursor: pointer;
            margin-bottom: 5px;
        }
        .popup-close-btn:hover {
            background-color: #0047AB;
            color: #fff;
        }
/* ========================================================
   【追加】STEP15・STEP16用の「左向き三角（＜[  ]）」上書き設定
   ======================================================== */

/* 吹き出し本体が右側にある時、突起の位置を左端（left: 0）に移動させます */
.tooltip-box.arrow-left::after {
    top: 50%;
    left: -20px; /* 100% から -20px（左側）に強制移動 */
    transform: translateY(-50%);
    border-color: transparent #ff4d4d transparent transparent; /* 三角の向きを右向きから「左向き」に変更 */
}

/* 内側の塗りつぶし用三角も同様に左端へ移動させます */
.tooltip-box.arrow-left::before {
    top: 50%;
    left: -16px; /* 100% から -16px（左側）に強制移動 */
    transform: translateY(-50%);
    border-color: transparent #fff9e6 transparent transparent; /* 三角の向きを右向きから「左向き」に変更 */
    margin-left: 0;
}
/* ========================================================
   arrow-bottom: 吹き出し下端に三角を表示（ボタンの上に吹き出しがある場合）
   ======================================================== */
.tooltip-box.arrow-bottom::after {
    top: 100%;         /* 吹き出しの下端 */
    left: 50%;
    transform: translateX(-50%);
    border-color: #ff4d4d transparent transparent transparent; /* 上向き三角（赤枠） */
}

.tooltip-box.arrow-bottom::before {
    top: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%);
    border-color: #fff9e6 transparent transparent transparent; /* 上向き三角（背景色） */
    margin-left: 0;
}
/* ========================================================
   【新規追加】チュートリアル非活性化・ハイライト制御
   ======================================================== */

/* 1. チュートリアル中に画面全体（背景）の操作を禁止するクラス */
body.tutorial-active {
    pointer-events: none !important;
}

/* 2. ツールチップ本体は常に最前面で操作可能に保つ */
#dynamic-tooltip *,
.tooltip-box *,
#btn-upload-target,
.tutorial-toggle-container {
    pointer-events: auto !important;
}

/* 3. 【汎用】非活性化の例外として、一時的にクリック・入力を許可するターゲット用のクラス */
.tutorial-focus-target {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9995 !important;
}
#btn-speaker-setup.tutorial-focus-target {
    background-color: #0052cc !important;
    color: #ffffff !important;
}
/* チュートリアル中（画面非活性時）でも、トップへのリンクとロゴはいつでも押せるようにする */
body.tutorial-active {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9995 !important; 
}
/* body.tutorial-active .logo,
body.tutorial-active .nav a[href="top.html"] {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9995 !important; 
} */
/* チュートリアル中もユーザー名エリアは常にクリック可能にする設定 */
        .user.tutorial-highlight,
        #user-menu-trigger {
            z-index: 9995 !important;
            pointer-events: auto !important;
        }