@charset "UTF-8";
  
        /* ---------------------------------- */
        /* 2. abbrタグ（省略語）のスタイル */
        /* ---------------------------------- */
        .abbr-custom {
            /* 省略語の点線下線 */
            border-bottom: 1px dotted currentColor;
            cursor: pointer;
        }

        /* ---------------------------------- */
        /* 3. ツールチップ（メッセージボックス）のスタイル */
        /* ---------------------------------- */
        .tooltip-box {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px; /* p-4 */
            z-index: 50;
            
            /* 初期状態: 要素の高さ分だけ下に移動し、画面外に完全に隠す */
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out; /* トランジション設定 */
            
            /* ポップアップが非表示のときは、クリックイベントを受け付けないようにする */
            pointer-events: none; 
        }

        .tooltip-visible {
            /* 表示状態: 画面下端から 120px 上に持ち上げる */
            transform: translateY(-120px);
            pointer-events: auto; /* 表示されたらクリックを有効にする */
        }

        .tooltip-content-wrapper {
            background-color: #4f46e5; /* bg-indigo-600 */
            color: white;
            padding: 16px; /* p-4 */
            border-top-left-radius: 12px; /* rounded-t-xl */
            border-top-right-radius: 12px; /* rounded-t-xl */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */
            
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 600px; /* max-w-lg 相当 */
            margin-left: auto;
            margin-right: auto;
        }

        .tooltip-text {
            font-size: 1.125rem; /* text-lg */
            font-weight: 500; /* font-medium */
            line-height: 1.2;
        }

        /* 閉じるボタンのスタイル */
        .close-button {
            color: white;
            padding: 4px;
            border-radius: 9999px; /* rounded-full */
            margin-left: 1rem;
            background-color: transparent;
            border: none;
            cursor: pointer;
            transition: background-color 0.15s ease-in-out;
        }

        .close-button:hover {
            background-color: #4338ca; /* hover:bg-indigo-700 */
        }

        .close-button svg {
            width: 24px; /* h-6 w-6 */
            height: 24px;
            stroke: currentColor;
            fill: none;
        }