/*
//============================================================================================
// system name    : －－－－
// program name   : bAsButton StyleSheet
// file name      : bAsButton.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";


/* ===================================================================== */
/* 
--------------------------------------------------------------------- 
 bAsボタン 基底スタイル
--------------------------------------------------------------------- 
*/
/* bAsボタン〔通常時〕 デフォルト設定 */
button.bAs-ButtonBASE {
    /* 子要素maskをposition: absoluteで被せるため基準とする */
    position: relative;
    /* 背景指定 */
    background-color: indigo;
    /* フォントサイズ指定 */
    font-size: 20px;
    /* フォントカラー指定 */
    color: #ffffff;
    /* マージン設定 */
    margin: 0;
    /* パディング設定 */
    padding: 0.5%;
    /* シャドー設定 */
    box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px #333333;
    /* アニメーション設定　開始時と終了時はとても緩やかに変化 */
    transition: 0.1s ease-in-out;
    /* 子要素 上下左右中央寄せ */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
    /* bAsボタン〔ボタンダウン時〕  */
    button.bAs-ButtonBASE:active {
        /* シャドーをなくす */
        box-shadow: initial;
    }
    /* bAsボタン〔フォーカス時〕  */
    button.bAs-ButtonBASE:focus {
        /* フォーカス枠線 */
        outline: 2px dotted black;
        outline-offset: 2px;
    }
    /* bAsボタン〔非活性時〕  */
    button.bAs-ButtonBASE:disabled {
        /* シャドーをなくす */
        box-shadow: initial;
        /* イベント無効化 */
        pointer-events: none;
    }

    /* bAsボタン〔ホバー時〕 テキスト下線  */
    button.bAs-ButtonBASE:hover span.bAs-Button-Text {
        /* ボタンテキスト下線 */
        text-decoration: underline dotted #ffffff99;
        /*text-decoration: underline solid hotpink;*/
    }

    /* bAsボタン 内容物(アイコン + 文字列)  */
    button.bAs-ButtonBASE span.bAs-Button-Content {
        /* マージン設定 */
        margin: 0;
        /* パディング設定 */
        padding: 0;
        /* 子要素 上下左右中央寄せ */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
        /* bAsボタン アイコン */
        button.bAs-ButtonBASE span.bAs-Button-Content span.bAs-Button-Icon {
            /* アスペクト比 */
            /*aspect-ratio: 1/1;*/
        }
        /* bAsボタン テキスト */
        button.bAs-ButtonBASE span.bAs-Button-Content span.bAs-Button-Text {
            /* マージン設定 */
            margin: 0 5px;
        }

    /* ボタンマスク：通常時 */
    button.bAs-ButtonBASE span.bAs-Button-Mask {
        /* 親要素にかぶせる */
        position: absolute;
        top: 0px;
        left: 0px;
        /* サイズ指定 */
        width: 100%;
        height: 100%;
        /* 枠指定 */
        border: none;
        /* マージン設定 */
        margin: 0;
        /* パディング設定 */
        padding: 0;
        /* 被せる色指定 */
        /*background: radial-gradient(#ffffff33 2%,#ffffff00 95%);*/
        /*background: radial-gradient(#ffffff22 3%, #00000033 95%);*/
        background: linear-gradient(#ffffff22 3%, #22222233 98%);
    }
        /* ボタンマスク：hover時 */
        button.bAs-ButtonBASE span.bAs-Button-Mask:hover {
            /* mask設定 */
            /*background-color: #ffffff66;*/
            /* 被せる色の不透明度指定 */
            /*opacity: 0.25;*/
        }
    /* ボタンマスク：非活性時 */
    button.bAs-ButtonBASE:disabled span.bAs-Button-Mask {
        /* 被せる色指定 */
        background: transparent;
        background-color: #666666;
        /* 被せる色の不透明度指定 */
        opacity: 0.85;
    }




/* ===================================================================== */
/* 
--------------------------------------------------------------------- 
 ダイアログメッセージのボタンスタイル
--------------------------------------------------------------------- 
*/
button.bAs-DialogMessageButton {
    height: 60px;
}


/* ================================================================================ */
/* 
--------------------------------------------------------------------------------- 
タブレット端末用　データの取得が重くなる為、応急処置として使用するボタンスタイル
--------------------------------------------------------------------------------- 
*/
button.bAs-Button-Normal {
    /* 子要素maskをposition: absoluteで被せるため基準とする */
    position: relative;
    /* マージン設定 */
    margin: 0;
    /* パディング設定 */
    padding: 0.5%;
    /* シャドー設定 */
    box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px #333333;
    /* アニメーション設定　開始時と終了時はとても緩やかに変化 */
    transition: 0.1s ease-in-out;
    /* 子要素 上下左右中央寄せ */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}
/* bAsボタン〔ボタンダウン時〕  */
button.bAs-Button-Normal:active {
    /* シャドーをなくす */
    box-shadow: initial;
}
/* bAsボタン〔フォーカス時〕  */
button.bAs-Button-Normal:focus {
    /* フォーカス枠線 */
    outline: 2px dotted black;
    outline-offset: 2px;
}
/* bAsボタン〔非活性時〕  */
button.bAs-Button-Normal:disabled {
    /* シャドーをなくす */
    box-shadow: initial;
    /* イベント無効化 */
    pointer-events: none;
}

/* bAsボタン〔ホバー時〕 テキスト下線  */
button.bAs-Button-Normal:hover span.bAs-Button-Text {
    /* ボタンテキスト下線 */
    text-decoration: underline dotted #ffffff99;
}
/* bAsボタン 内容物(アイコン + 文字列)  */
button.bAs-Button-Normal span.bAs-Button-Content {
    /* マージン設定 */
    margin: 0;
    /* パディング設定 */
    padding: 0;
    /* 子要素 上下左右中央寄せ */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
/* bAsボタン テキスト */
button.bAs-Button-Normal span.bAs-Button-Content span.bAs-Button-Text {
    /* マージン設定 */
    margin: 0 5px;
}
/* ボタンマスク：通常時 */
button.bAs-Button-Normal span.bAs-Button-Mask {
    /* 親要素にかぶせる */
    position: absolute;
    top: 0px;
    left: 0px;
    /* サイズ指定 */
    width: 100%;
    height: 100%;
    /* 枠指定 */
    border: none;
    /* マージン設定 */
    margin: 0;
    /* パディング設定 */
    padding: 0;
    /* 被せる色指定 */
    background: linear-gradient(#ffffff22 3%, #22222233 98%);
    border-radius: 6px;
}
/* ボタンマスク：hover時 */
button.bAs-Button-Normal span.bAs-Button-Mask:hover {
    /* mask設定 */
    /*background-color: #ffffff66;*/
    /* 被せる色の不透明度指定 */
    /*opacity: 0.25;*/
}
/* ボタンマスク：非活性時 */
button.bAs-Button-Normal:disabled span.bAs-Button-Mask {
    /* 被せる色指定 */
    background: transparent;
    background-color: #666666;
    /* 被せる色の不透明度指定 */
    opacity: 0.85;
}