/*
//============================================================================================
// system name    : －－－－
// program name   : bAsTooltip StyleSheet
// file name      : bAsTooltip.css
// summary        : bAsツールチップ用スタイルシート
//--------------------------------------------------------------------------------------------
// author         : 👍bAs)Yoshi
// creation date  : 2024/10/21
// version        : 1.00
//--------------------------------------------------------------------------------------------
// change history : 2024/10/21 👍bAs)Yoshi 新規作成
// 
// Copyright 2024 bEST ANSWER's Inc.
//============================================================================================
*/

@charset "UTF-8";






/* ===================================================================== */
/* （変数定義）****************************** STA */
/*:root {*/
    /* ツールチップ表示時のマウスカーソル */
    /*--bAs_tooltip_cursor: help;*/
    /* ツールチップの背景色 */
    /*--bAs_tooltip_backgroundcolor: #484848;*/
    /* ツールチップの文字色 */
    /*--bAs_tooltip_textcolor: white;*/
    /* ツールチップの背景色（エラー時） */
    /*--bAs_tooltip_backgroundcolor_ERR: #ffbaba;*/
    /* ツールチップの文字色（エラー時） */
    /*--bAs_tooltip_textcolor_ERR: red;
}*/
/* （変数定義）****************************** END */




/* 
--------------------------------------------------------------------- 
 ツールチップ０１（簡易版）共通定義　　　　　※簡易版の為、今の所 input要素直接だと上手く表示できない
--------------------------------------------------------------------- 
*/
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ツールチップ本体の基本部分 */
/*.bAs-tooltip01-top,
.bAs-tooltip01-top_ERR,
.bAs-tooltip01-bottom,
.bAs-tooltip01-bottom_ERR,
.bAs-tooltip01-left,
.bAs-tooltip01-left_ERR,
.bAs-tooltip01-right,
.bAs-tooltip01-right_ERR {
    cursor: var(--bAs_tooltip_cursor, default);
    position: relative;
}*/
/* ツールチップ本体の基本部分 ［標準用］ */
/*.bAs-tooltip01-top,
.bAs-tooltip01-bottom,
.bAs-tooltip01-left,
.bAs-tooltip01-right {*/
    /* 標準時はちょっとだけ透過しておく */
    /*opacity: 0.7;
}*/
/* ツールチップ本体の基本部分 ［エラー用］ */
/*.bAs-tooltip01-top_ERR,
.bAs-tooltip01-bottom_ERR,
.bAs-tooltip01-left_ERR,
.bAs-tooltip01-right_ERR {
    opacity: 1;
}*/
    /* ツールチップボックス（:before）共通スタイル */
    /*.bAs-tooltip01-top:hover:before,
    .bAs-tooltip01-top_ERR:hover:before,
    .bAs-tooltip01-bottom:hover:before,
    .bAs-tooltip01-bottom_ERR:hover:before,
    .bAs-tooltip01-left:hover:before,
    .bAs-tooltip01-left_ERR:hover:before,
    .bAs-tooltip01-right:hover:before,
    .bAs-tooltip01-right_ERR:hover:before {
        content: attr(data-bas-tooltipmsg);
        display: block;
        position: absolute;
        font-size: 12px;
        min-width: 100px;
        max-width: 300px;
        min-height: 16px;
        padding: 8px;
        border-radius: 4px;
        white-space: pre;
        box-shadow: 2px 2px 8px rgba(0, 0, 128, 0.3);
    }*/
/* ツールチップボックス（:before）共通スタイル ［標準用］ */
/*.bAs-tooltip01-top:hover:before,
.bAs-tooltip01-bottom:hover:before,
.bAs-tooltip01-left:hover:before,
.bAs-tooltip01-right:hover:before {
    color: var(--bAs_tooltip_textcolor, white);
    background-color: var(--bAs_tooltip_backgroundcolor, #484848);
}*/
/* ツールチップボックス（:before）共通スタイル ［エラー用］ */
/*.bAs-tooltip01-top_ERR:hover:before,
.bAs-tooltip01-bottom_ERR:hover:before,
.bAs-tooltip01-left_ERR:hover:before,
.bAs-tooltip01-right_ERR:hover:before {
    color: var(--bAs_tooltip_textcolor_ERR, #ffbaba);
    background-color: var(--bAs_tooltip_backgroundcolor_ERR, red);
}*/
/* 矢印（:after）共通スタイル */
/*.bAs-tooltip01-top:hover:after,
.bAs-tooltip01-top_ERR:hover:after,
.bAs-tooltip01-bottom:hover:after,
.bAs-tooltip01-bottom_ERR:hover:after,
.bAs-tooltip01-left:hover:after,
.bAs-tooltip01-left_ERR:hover:after,
.bAs-tooltip01-right:hover:after,
.bAs-tooltip01-right_ERR:hover:after {
    content: "";
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    border-style: solid;
}*/


/* ▼▼▼ 各方向の個別スタイル ▼▼▼ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━ */
/* ↑ 【上】 */
/* ━━━━━━━━━━━━━━━ */
/* ツールチップボックス（:before）【上】共通スタイル */
/*.bAs-tooltip01-top:hover:before,
.bAs-tooltip01-top_ERR:hover:before {
    bottom: calc(100% + 10px);
    left: 4px;
}*/
/* 矢印（:after）【上】共通スタイル */
/*.bAs-tooltip01-top:hover:after,
.bAs-tooltip01-top_ERR:hover:after {
    bottom: calc(100% + 12px - 10px);*/
    /*left: calc(4px + 8px);*/
    /*left: 2px;
    border-width: 0 12px 12px 12px;
}*/
/* ◆ 標準用 ◆ */
/* 矢印（:after）【上】標準用スタイル */
/*.bAs-tooltip01-top:hover:after {
    border-color: transparent var(--bAs_tooltip_backgroundcolor, #484848) transparent transparent;
}*/
/* ◆ エラー用 ◆ */
/* 矢印（:after）【上】エラー用スタイル */
/*.bAs-tooltip01-top_ERR:hover:after {
    border-color: transparent var(--bAs_tooltip_backgroundcolor_ERR, red) transparent transparent;
}*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━ */
/* ↓ 【下】 */
/* ━━━━━━━━━━━━━━━ */
/* ツールチップボックス（:before）【下】共通スタイル */
/*.bAs-tooltip01-bottom:hover:before,
.bAs-tooltip01-bottom_ERR:hover:before {
    top: calc(100% + 10px);
    left: 4px;
}*/
/* 矢印（:after）【下】共通スタイル */
/*.bAs-tooltip01-bottom:hover:after,
.bAs-tooltip01-bottom_ERR:hover:after {
    top: calc(100% + 12px - 10px);*/
    /*left: calc(4px + 8px);*/
    /*left: 2px;
    border-width: 12px 12px 0 12px;
}*/
/* ◆ 標準用 ◆ */
/* 矢印（:after）【下】標準用スタイル */
/*.bAs-tooltip01-bottom:hover:after {
    border-color: transparent var(--bAs_tooltip_backgroundcolor, #484848) transparent transparent;
}*/
/* ◆ エラー用 ◆ */
/* 矢印（:after）【下】エラー用スタイル */
/*.bAs-tooltip01-bottom_ERR:hover:after {
    border-color: transparent var(--bAs_tooltip_backgroundcolor_ERR, red) transparent transparent;
}*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━ */
/* ← 【左】 */
/* ━━━━━━━━━━━━━━━ */
/* ツールチップボックス（:before）【左】共通スタイル */
/*.bAs-tooltip01-left:hover:before,
.bAs-tooltip01-left_ERR:hover:before {
    top: 10%;
    right: calc(100% + 10px);
}*/
/* 矢印（:after）【左】共通スタイル */
/*.bAs-tooltip01-left:hover:after,
.bAs-tooltip01-left_ERR:hover:after {
    top: calc(10% + 8px);
    right: calc(100% + 12px - 10px);
    border-width: 0 12px 12px 0;
}*/
/* ◆ 標準用 ◆ */
/* 矢印（:after）【左】標準用スタイル */
/*.bAs-tooltip01-left:hover:after {
    border-color: transparent transparent var(--bAs_tooltip_backgroundcolor, #484848) transparent;
}*/
/* ◆ エラー用 ◆ */
/* 矢印（:after）【左】エラー用スタイル */
/*.bAs-tooltip01-left_ERR:hover:after {
    border-color: transparent transparent var(--bAs_tooltip_backgroundcolor_ERR, red) transparent;
}*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ━━━━━━━━━━━━━━━ */
/* → 【右】 */
/* ━━━━━━━━━━━━━━━ */
/* ツールチップボックス（:before）【下】共通スタイル */
/*.bAs-tooltip01-right:hover:before,
.bAs-tooltip01-right_ERR:hover:before {
    top: 0;
    left: calc(100% + 10px);
}*/
/* 矢印（:after）【下】共通スタイル */
/*.bAs-tooltip01-right:hover:after,
.bAs-tooltip01-right_ERR:hover:after {
    top: calc(10% + 8px);
    left: calc(100% + 12px - 10px);
    border-width: 0 0 12px 12px;
}*/
/* ◆ 標準用 ◆ */
/* 矢印（:after）【左】標準用スタイル */
/*.bAs-tooltip01-right:hover:after {
    border-color: transparent transparent var(--bAs_tooltip_backgroundcolor, #484848) transparent;
}*/
/* ◆ エラー用 ◆ */
/* 矢印（:after）【左】エラー用スタイル */
/*.bAs-tooltip01-right_ERR:hover:after {
    border-color: transparent transparent var(--bAs_tooltip_backgroundcolor_ERR, red) transparent;
}*/











/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bAs-tooltip01-Main {
    position: absolute;
    padding: 6px 6px;
    background: var(--tooltip-bg, #333);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    display: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* 表示アニメーション用 */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
    .bAs-tooltip01-Main.show {
        opacity: 1;
        transform: scale(1);
    }
    .bAs-tooltip01-Main::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
    }


    /* ▼ top 向け三角 */
    .bAs-tooltip01-Main[data-pos="top"]::after {
        left: 50%;
        bottom: -8px;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid var(--tooltip-bg, #333);
    }

    /* ▲ bottom 向け三角 */
    .bAs-tooltip01-Main[data-pos="bottom"]::after {
        left: 50%;
        top: -8px;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid var(--tooltip-bg, #333);
    }

    /* ◀ right 向け三角 */
    .bAs-tooltip01-Main[data-pos="right"]::after {
        top: 50%;
        right: -8px;
        transform: translateY(-50%);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 8px solid var(--tooltip-bg, #333);
    }

    /* ▶ left 向け三角 */
    .bAs-tooltip01-Main[data-pos="left"]::after {
        top: 50%;
        left: -8px;
        transform: translateY(-50%);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 8px solid var(--tooltip-bg, #333);
    }