/*tool-tip*/

/* ツールアイコンのコンテナスタイル */
.tool-tip-bottom {
    position: relative;
    display: inline-block;
}

/* ツールチップの基本スタイル */
.tooltip {
    visibility: hidden;
    width: 80px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 125%;  /* アイコンの下に表示 */
    left: 50%;  /* 要素の中心に配置 */
    transform: translateX(-50%); /* 中心から左にずらす */
    white-space: nowrap; /* テキストが改行されないようにする */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* ホバー時の表示設定 */
.tool-tip-bottom:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
.tool-tip-bottom-vertical {
    position: relative;
    display: inline-block;
}

/* ツールチップの基本スタイル */
.tooltip-vertical {
    visibility: hidden;
    /*width: 80px;*/
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 10px 0;
    position: absolute;
    z-index: 1;
    top: 125%;  /* アイコンの下に表示 */
    left: 50%;  /* 要素の中心に配置 */
    transform: translateX(-50%); /* 中心から左にずらす */
    white-space: nowrap; /* テキストが改行されないようにする */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* ホバー時の表示設定 */
.tool-tip-bottom-vertical:hover .tooltip-vertical {
    visibility: visible;
    opacity: 1;
}
/* ツールチップを含む親コンテナのスタイル */
.tool-tip-right {
    position: relative;
    display: inline-flex;
    align-items: center; /* アイコンとテキストを中央揃えに */
}

/* ツールチップのスタイル */
.tooltip-right {
    visibility: hidden;
    width: auto; /* ツールチップのテキストに基づいて幅を自動調整 */
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 3px 14px; /* テキストの周りの余白 */
    position: absolute;
    z-index: 1;
    top: 50%; /* 親要素の真ん中の位置に */
    left: 120%; /* ボタンの右側に表示 */
    transform: translateY(-50%); /* 縦方向の中心からずらす */
    white-space: nowrap; /* テキストが改行されないようにする */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* ホバー時のツールチップ表示設定 */
.tool-tip-right:hover .tooltip-right {
    visibility: visible;
    opacity: 1;
}
    /* ツールチップを含む親コンテナのスタイル */
    .tool-tip-left-vertical {
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }

    /* ツールチップのスタイル */
    .tooltip-left-vertical {
        visibility: hidden;
        background-color: black;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 5px 8px; /* テキストの周りの余白 */
        position: absolute;
        z-index: 1;
        top: 50%; /* 親要素の真ん中の位置に */
        right: 110%; /* アイコンの左側に表示 */
        transform: translateY(-50%); /* 縦方向の中心からずらす */
        white-space: nowrap; /* テキストが改行されないようにする */
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        font-size:14px;
    }

    /* ホバー時のツールチップ表示設定 */
    .tool-tip-left-vertical:hover .tooltip-left-vertical {
        visibility: visible;
        opacity: 1;
    }

.tooltip-container {
    position: relative;
    display: inline-block;
}
.tooltip-container:hover .tooltip-text-bottom,.tooltip-container:hover .tooltip-text-left{
    visibility: visible;
    opacity: 1;
}
.tooltip-text-bottom {
    visibility: hidden;
    opacity: 0;
    background-color: #333;
    color: #fff;
    text-align: center;
    /*border-radius: 4px;*/
    padding: 4px 8px;
    position: absolute;
    z-index: 10;
    bottom: -100%;
    left: 60%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    font-size: 13px;
    white-space: nowrap;
}
.tooltip-text-left {
    visibility: hidden;
    opacity: 0;
    background-color: #333;
    color: #fff;
    text-align: center;
    /*border-radius: 4px;*/
    padding: 4px 8px;
    position: absolute;
    z-index: 10;
    bottom: -120%;
    left: -40%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    font-size: 13px;
    white-space: nowrap;
}