@charset "UTF-8";
[v-cloak] {
  display: none;
}

:root {
    /** SerachUi用設定 */
    --su-scrollbar-width : 0.5rem;
    --su-logo_height_small : 2.0rem;
    --su-right_pane_width : 500px;

    /**SerachUi利用色（基本）*/
    --su-light: #ffffff;   
    --su-light-rgb: 255 255 255;
    --su-dark: #222222;
    --su-dark-rgb: 71 71 71;

    /**SerachUi利用色その１*/
    --su-primary-light: #e7e7e7;   
    --su-primary-light-rgb: 231 231 231;   
    --su-primary-dark: #474747;   
    --su-primary-dark-rgb: 187 187 187;   
    /**SerachUi利用色その２*/
    --su-secondary-light: #5185b6;
    --su-secondary-light-rgb: 81 133 182;   
    --su-secondary-dark: #5185b6;   
    --su-secondary-dark-rgb: 81 133 182;   
}

html {
    color-scheme: light dark;
}
body {
    color: light-dark(var(--su-dark), var(--su-light));
    background-color: light-dark(var(--su-light), var(--su-dark));
    
    /** bootstrap カスタマイズ*/
    --bs-body-color: light-dark(var(--su-dark), var(--su-light));
    --bs-body-color-rgb: light-dark(rgb(var(--su-dark-rgb)), rgb(var(--su-light-rgb)));
    --bs-body-bg : light-dark(var(--su-light), var(--su-dark));
    --bs-body-bg-rgb  : light-dark(rgb(var(--su-light-rgb)), rgb(var(--su-dark-rgb)));
}
/**
 * スクロールバーの設定
 * ※すべてのブラウザでスクロールバーをカスタマイズできるプロパティは現在無い。
 * -webkit-scrollbarはChromeやSafariでしか実現しない （FireFoxやIEなどのブラウザでは実現しない）。
 **/
/*スクロールバーの幅 */
::-webkit-scrollbar {
    width:var(--su-scrollbar-width);
    height:var(--su-scrollbar-width);
}
/*スクロールバーのレール */
::-webkit-scrollbar-track {
    border-radius: var(--bs-border-radius-lg);
    background-color: light-dark(var(--su-primary-light), var(--su-dark));
}
/*スクロールバーのつまみ */
::-webkit-scrollbar-thumb {
    border-radius: var(--bs-border-radius-lg);
    background-color: light-dark(rgb(var(--su-dark-rgb) / .5), var(--su-primary-light));
}-primary
/* スクロールバーの設定ここまで */

/** 汎用style 設定 */
/** 高さ */
.height_1 {
    height: 1.5rem !important;
}
.height_2 {
    height: 3rem !important;
}
.height_3 {
    height: 4.5rem !important;
}
.height_4 {
    height: 6rem !important;
}
.height_5 {
    height: 7.5rem !important;
}

/** max-height */
.max-h-none{
    max-height: none !important;
}
.max-h-3{
    max-height: 4.5rem !important;
}
.max-h-5{
    max-height: 8rem !important;
}
.max-h-10{
    max-height: 15rem !important;
}


/** 幅 */
.width_auto {
    width: auto;
}
.width_1 {
    width: 1.5rem !important;
}
.width_2 {
    width: 3rem !important;
}
.width-3 {
    width: 4.5rem !important;
}
.width-4 {
    width: 6rem !important;
}
.width-5 {
    width: 7.5rem !important;
}
.width-6 {
    width: 9rem !important;
}

/** max-width */
.max-w-none{
    max-width: none !important;
}
.max-w-5{
    max-width: 7.5rem !important;
}
.max-w-6{
    max-width: 9rem !important;
}
/**
    max-width
    bootstrapの設定値を基準にしている
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
*/
.max-w-sm{
    max-width: calc(var(--bs-breakpoint-sm, 576px) * .75);
}
.max-w-md{
    max-width: calc(var(--bs-breakpoint-md, 768px) * .75);
}
.max-w-lg{
    max-width: calc(var(--bs-breakpoint-lg, 992px) * .75);
}
.max-w-xl{
    max-width: calc(var(--bs-breakpoint-xl, 1200px) * .75);
}
.max-w-xxl{
    max-width: calc(var(--bs-breakpoint-xxl, 1400px) * .75);
}

/** フォントサイズ */
.fs-07 {
    font-size: calc(var(--bs-body-font-size)*.875);
}
.fs-08 {
    font-size: calc(var(--bs-body-font-size)*.775);
}

/** 背景色*/
.su_bg {
    background-color: light-dark(var(--su-light), var(--su-dark));
}
.su_bg_rev {
    background-color: light-dark(var(--su-dark), var(--su-light));
}
.su_bg_pri {
    background-color: light-dark(var(--su-primary-light), var(--su-primary-dark));
}
.su_bg_pri_rev {
    background-color: light-dark(var(--su-primary-dark), var(--su-primary-light));
}
/** text色*/
.su_txt {
    color: light-dark(var(--su-dark), var(--su-light));
}
.su_txt_rev {
    color: light-dark(var(--su-light), var(--su-dark));
}
.su_txt_pri {
    color: light-dark(var(--su-primary-dark), var(--su-primary-light));
    }
.su_txt_pri_rev {
    color: light-dark(var(--su-primary-light), var(--su-primary-dark));
}
/** border色*/
.su_border {
    border-color: light-dark(var(--su-light), var(--su-dark));
}
.su_border_rev {
    border-color: light-dark(var(--su-dark), var(--su-light));
}
.su_border_pri {
    border-color: light-dark(var(--su-primary-light), var(--su-primary-dark));
}
.su_border_pri_rev {
    border-color: light-dark(var(--su-primary-dark), var(--su-primary-light));
}

/* 汎用 style 設定 ここまで*/

/** ロゴ表示部高さ */
.logoarea_height {
    height: calc(var(--su-logo_height_small)*0.75);
}

/** 右ペイン（ドキュメント一覧）*/
.sidearea {
    width: var(--su-right_pane_width);
    min-width: var(--su-right_pane_width);
    transition: transform 0.3s ease-in-out;
}

/** 質問入力部 */
.input_wrapper {
    position: fixed !important;
    bottom: var(--su-logo_height_small) !important;
    left: 0% !important;
    padding-left: 3rem !important;
    padding-right: 4rem !important;
}

.search_area {
    background-color: light-dark(var(--su-primary-light),  var(--su-primary-dark));
    border: 1px solid light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
    z-index: 1 !important;

}

.search_area .text_input_area {
    position: relative;
    border: 1px solid light-dark(rgb(var(--su-dark-rgb) / .3), rgb(var(--su-light-rgb) / .1));
    padding: 5px;
    background-color: transparent;
    border-radius: 0.5rem;
    width: 100%;
}
.search_area .text_input_area .input_area {
    position: relative;
    width: 100%;
    height: 2.1rem;
    min-height: 2.1rem;
    max-height: 5.0rem;
    border-style: none;
    background-color: transparent;
    border-color:  transparent;
    bottom: 0;
}

.search_area .text_input_area .input_area .search_textarea {
    width: 100%;
    height:100%;
    resize:none;
    position: relative;
    background-color: transparent;
    color: light-dark(var(--su-dark),var(--su-light));
    overflow-anchor: none;
    border-style: none;
}
.search_area .text_input_area .input_area .search_textarea:focus {
    background-color: transparent;
    box-shadow: none;
}
.search_area .text_input_area .input_area .search_textarea::placeholder
, .su_txt_gray{
    color: light-dark(rgb(var(--su-dark-rgb) / .75),rgb(var(--su-light-rgb) / .5));
}

/*入力履歴バッジ*/
.wordbutton {
    padding: .1rem .3rem;   /*上下 | 左右*/
    font-size: .75rem;
    background-color: light-dark(rgb(var(--su-dark-rgb) / .15), var(--su-dark));
    height: 1.5rem;
    max-width: 15rem;
    border:none;
}
.wordbutton_text {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top: 1px solid var(--su-primary-light);
    border-bottom: 1px solid var(--su-primary-light);
    border-left: 1px solid var(--su-primary-light);
}
.wordbutton_btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    width: 1.5rem;
    padding: 0  !important;
    margin-left: 0 !important;
    border-top: 1px solid var(--su-primary-light);
    border-bottom: 1px solid var(--su-primary-light);
    border-right: 1px solid var(--su-primary-light);
}    
.wordbutton_bi {
    font-size: .8rem;
}
.wordbutton_btn:hover {
    color: red;
    padding: 0  !important;
}    
.clearbutton {
    border-color: light-dark(rgb(var(--su-dark-rgb) / .7), rgb(var(--su-light-rgb) / .2));
    border-radius: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
}

.clearbutton:hover {
    border-color: red;
    color: red;
    padding: 0  !important;
}    

/** カテゴリドロップダウンボタン */
.dropdown-su-style {
    color: light-dark(var(--su-dark), var(--su-light));
    border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
}

.dropdown-su-style:hover {
    color: light-dark(var(--su-dark), var(--su-light));
    border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
    background: light-dark(var(--su-light), var(--su-dark));
}


/**回答＞ファイル情報エリア*/
.file_info_box {
    color: light-dark(var(--su-dark), var(--su-light));
    background-color: light-dark(var(--su-primary-light), var(--su-dark));
    border: 1px solid light-dark(rgb(var(--su-dark-rgb) / .5), var(--su-primary-light));
}

/**ファイルアイコン色*/
.bi-file-earmark-pdf {
    color: light-dark(#cd2031, #ffffff);
}

.bi-file-earmark-excel-fill {
    color: light-dark(#3e8550, #ffffff);
}

.bi-file-earmark-ppt-fill {
    color: light-dark(#b84b2d, #ffffff);
}

.bi-filetype-txt {
    color: light-dark(#222, #ffffff);
}
.bi-filetype-csv {
    color: light-dark(#1a7932, #ffffff);
}
.bi-file-earmark-word-fill {
    color: light-dark(#2c59b7, #ffffff);
}


/** bootstrap カスタマイズ*/
/**
 * ボタン属性
 */
 .btn-su-01 {
     --bs-btn-color: light-dark(var(--su-dark),var(--su-dark));
     --bs-btn-bg: light-dark(var(--su-light),rgb(var(--su-primary-dark-rgb) / .7));
     --bs-btn-border-color: light-dark(rgb(var(--su-dark-rgb) / .5), var(--su-primary-dark));

     --bs-btn-hover-color: light-dark(var(--su-dark),var(--su-dark));
     --bs-btn-hover-bg: rgb(var(--su-primary-dark-rgb) / .5);
     --bs-btn-hover-border-color: light-dark(rgb(var(--su-dark-rgb) / .5), var(--su-primary-dark));

     --bs-btn-focus-shadow-rgb: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
     --bs-btn-active-color: var(--su-light);
     --bs-btn-active-bg: rgb(var(--su-primary-dark-rgb) / .5);
     --bs-btn-active-border-color:light-dark(rgb(var(--su-dark-rgb) / .5), var(--su-primary-dark));
     --bs-btn-active-shadow: inset 0 3px 5px light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
     --bs-btn-disabled-color:light-dark(var(--su-dark),var(--su-dark))
     --bs-btn-disabled-bg: light-dark(var(--su-primary-dark),var(--su-primary-dark));
     --bs-btn-disabled-border-color:light-dark(var(--su-dark),var(--su-dark));
 }
 .btn-su-02 {
     --bs-btn-color: light-dark(var(--su-light),var(--su-light));
     --bs-btn-bg: var(--su-secondary-light);
     --bs-btn-border-color: var(--bs-btn-bg);
     
     --bs-btn-hover-color: light-dark(var(--su-dark),var(--su-dark));   
     --bs-btn-hover-bg: rgb(var(--su-secondary-light-rgb) / .7);
     --bs-btn-hover-border-color: rgb(var(--su-secondary-light-rgb) / .7);

     --bs-btn-focus-shadow-rgb: rgb(var(--su-secondary-light-rgb) / .7);
     --bs-btn-active-color: var(--su-light);
     --bs-btn-active-bg: transparent;
     --bs-btn-active-border-color: var(--su-light);
     --bs-btn-active-shadow: inset 0 3px 5px rgb(var(--su-secondary-light-rgb) / .7);
     --bs-btn-disabled-color:light-dark(var(--su-dark),var(--su-dark))
     --bs-btn-disabled-bg: light-dark(var(--su-dark),var(--su-dark));
     --bs-btn-disabled-border-color:light-dark(var(--su-dark),var(--su-dark));
 }
 .btn-su-03 {
    --bs-btn-color: light-dark(rgb(var(--su-dark-rgb) / .8), rgb(var(--su-light-rgb) / .8));
    --bs-btn-bg: light-dark(var(--su-light), var(--su-dark));
    --bs-btn-border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));

    --bs-btn-hover-color: light-dark(rgb(var(--su-dark-rgb) / .8), rgb(var(--su-light-rgb) / .8));
    --bs-btn-hover-bg:           light-dark(rgb(var(--su-primary-light-rgb) / .3), rgb(var(--su-primary-dark-rgb) / .1));
    --bs-btn-hover-border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));

    --bs-btn-active-color: light-dark(rgb(var(--su-dark-rgb) / .8), rgb(var(--su-light-rgb) / .8));
    --bs-btn-active-bg: light-dark(rgb(var(--su-primary-light-rgb) / .3), rgb(var(--su-primary-dark-rgb) / .1));
    --bs-btn-active-border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
    --bs-btn-active-shadow: inset 0 3px 5px light-dark(rgb(var(--su-primary-light-rgb) / .3), rgb(var(--su-primary-dark-rgb) / .1));

    --bs-btn-disabled-color:light-dark(var(--su-primary-dark),var(--su-primary-light));
    --bs-btn-disabled-bg: light-dark(var(--su-light),var(--su-primary-dark));
    --bs-btn-disabled-border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
    --bs-btn-disabled-shadow: inset 0 3px 5px light-dark(var(--su-light),var(--su-primary-dark));
 }

/* boostarp>list-group の表示設定のカスタマイズ（ファイル一覧用） */
.list-group{
    --bs-list-group-bg: light-dark(var(--su-primary-light), var(--su-primary-dark));
    --bs-list-group-border-color: light-dark(rgb(var(--su-dark-rgb) / .4), rgb(var(--su-dark-rgb) / .2));

    --bs-list-group-action-hover-color: var(--bs-body-color);
    --bs-list-group-action-hover-bg: var(--bs-body-bg);
    --bs-list-group-action-active-color: var(--bs-body-color);
    --bs-list-group-action-active-bg: var(---bs-body-bg);

    --bs-list-group-active-color: var(--bs-body-color);
    --bs-list-group-active-bg: var(--bs-body-bg);
    --bs-list-group-active-border-color: var(--bs-body-bg);        
}

/* boostarp>list-group の表示設定のカスタマイズ（ファイル一覧用） ここまで*/


/*ドロップダウン */
.dropdown-menu {
    --bs-dropdown-bg: light-dark(var(--su-light),var(--su-primary-dark));
    --bs-dropdown-border-color: light-dark(var(--su-primary-dark),var(--su-light));
    --bs-dropdown-link-active-color: light-dark(var(--su-dark), var(--su-light));
    --bs-dropdown-link-active-bg: light-dark(rgb(var(--su-primary-dark-rgb) / .3), rgb(var(--su-primary-light-rgb) / .3));

    --bs-dropdown-link-hover-color: light-dark(var(--su-dark), var(--su-light));
    --bs-dropdown-link-hover-bg: light-dark(rgb(var(--su-primary-dark-rgb) / .3), rgb(var(--su-primary-light-rgb) / .3))!important;
}

/** boostarp>accodion の表示設定のカスタマイズ（検索履歴用） */
.accordion {
    /** 
        開閉アイコン
        bootstrap icon利用
    */
    --bs-accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23aaaaaa' class='bi bi-chevron-down' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23aaaaaa' class='bi bi-chevron-down' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");

    --bs-accordion-border-width: 0;
    --bs-accordion-btn-color: light-dark(var(--su-dark), var(--su-light));
    --bs-accordion-btn-bg:  light-dark(var(--su-light), var(--su-dark));
    --bs-accordion-active-color :  light-dark(var(--su-dark), var(--su-light));
    --bs-accordion-active-bg: light-dark(var(--su-light), var(--su-dark));
    --bs-accordion-btn-focus-border-color: light-dark(var(--su-light), var(--su-dark));
    --bs-accordion-btn-focus-box-shadow: none;
}
.accordion-button {
    box-shadow: none;
}
/** 開放時の表示色（変えない）*/
.accordion-button:not(.collapsed) {
    color: light-dark(var(--su-dark), var(--su-light));
    background-color: light-dark(var(--su-light), var(--su-dark));
    box-shadow: none;
}
/** フォーカス時のシャドウ効果なし*/
.accordion-button:focus {
    box-shadow: none;
}

/**
    チェックボックス（switch)）
*/
.form-check-input {
    background-color: light-dark(var(--su-light), var(--su-primary-light));
    border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
}
.form-check-input:focus {
    box-shadow: none;
}

/** 評価ボタン*/
.btn-evaluation {
    background: light-dark(var(--su-light),var(--su-primary-dark));
    border-color: light-dark(rgb(var(--su-dark-rgb) / .5), rgb(var(--su-light-rgb) / .5));
}
.btn-evaluation-good:hover, .btn-evaluation-good-selected {
    background-color: #2a6638 !important;
    color: var(--su-light) !important;
}
.btn-evaluation-bad:hover, .btn-evaluation-bad-selected {
    background-color: #710c16 !important;
    color: var(--su-light) !important;
}
/** boostarp>accodion の表示設定のカスタマイズ（検索履歴用） ここまで*/
/** boostarp>btn_link の表示設定のカスタマイズ*/
.btn_su_link {
    --bs-btn-color: light-dark(var(--bs-link-color),#F2F2F2);
    --bs-btn-hover-color: light-dark(var(--bs-link-hover-color), #DDDDDD);
    --bs-btn-active-color: light-dark(var(--bs-link-hover-color), #DDDDDD);
} 
.su_downloading_pointer {
    cursor: wait !important;
}
/** boostarp>btn_link の表示設定のカスタマイズ ここまで*/

/* bootstrap カスタマイズ ここまで*/
/** スマートフォン向けスタイル */
@media (max-width: 768px) {
    body {
        --bs-body-font-size:.9rem;
    }
    /** 左ペイン（結果一覧）*/
    .resultarea {
        width:100%
    }
    /** 右ペイン（ファイル一覧）*/
    .sidearea {
        position: fixed;
        top: 0;
        right: 0;
        width: 92%;
        min-width: 92%;
        height: 99%;
        z-index: 1050;
        transform: translateX(100%);
    }
    .sidearea.active {
        transform: translateX(0);
    }
    .input_wrapper {
        width:100%
    }
}
@media (min-width: 769px) {
    /** 左ペイン（結果一覧）*/
    .resultarea {
        width: calc((100% - var(--su-right_pane_width)));
        min-width: var(--su-right_pane_width);
    }
    /** 右ペイン（ファイル一覧）*/
    .sidearea {
        position: relative;
        transform: translateX(0);
    }
    .input_wrapper {
        width: calc((100% - var(--su-right_pane_width)));
        min-width: var(--su-right_pane_width);
    }
}