.bg-login {
    background: var(--ClourBG, #F2F6FC);
}
.bg-white {
    background: var(--Background-bg-base, #FFF);
}

.text-danger {
    color: var(--Danger-danger-500, #DF0C3D);
}

.text-primary {
    color: var(--Texts-text-base, #14181F);
}
.text-secondary {
    color: var(--Texts-text-secondary, #525E6F);
}

.text-white {
    color: var(--Texts-text-white, #FFF) !important;
}

.font-size-11 {
    font-size: 11px;
}
.font-size-12 {
    font-size: 12px;
}
.font-size-13 {
    font-size: 13px;
}

.font-weight-normal {
    font-weight: 400;
}

.border-bottom {
    border-bottom: 1px solid var(--Border-border-default, #DCE0E5);
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * ロゴ、アイコン
 */
.logo {
    width: 229px;
    height: 52px;
    flex-shrink: 0;
    aspect-ratio: 229/52;
    display: block;
}

.login-cover {
    width: 263px;
    height: 394px;
    flex-shrink: 0;
}
.logo-sidebar {
    display: flex;
    width: 168.392px;
    height: 38px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 168.39/38.00;
    margin: var(--Num-padding-12, 12px);

    background: url(/img/KYCC-logo.png) no-repeat center center;
    background-size: contain;
}
#sidebar-toggle:checked ~ .sidebar .logo-sidebar {
    width: 40px;
    height: 40px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: url(/img/KYCC-logo_small.png) lightgray 50% / cover no-repeat;
    box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.20) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.16) inset;
    background-size: contain;
}

.icon-obj_sidebar {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1.667px 1.666px;
    justify-content: center;
    align-items: center;
}
.icon-obj_form {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 6px;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5px;
    right: 5px;
    box-sizing: border-box;
}
.icon-obj_message {
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 1.875px 1.5px;
    justify-content: center;
    align-items: center;
}
.icon-obj_alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 2px;
    justify-content: center;
    align-items: center;
}
.icon-obj_footer {
    display: flex;
    width: 18px;
    height: 18px;
    padding: 2.625px 1.5px;
    justify-content: center;
    align-items: center;
}
.icon-obj_tag {
    display: flex;
    width: 16px;
    height: 16px;
    padding: 1.333px 1.334px 1.333px 1.333px;
    justify-content: center;
    align-items: center;
}
.icon-obj_account {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1.333px 1.334px 1.333px 1.333px;
    justify-content: center;
    align-items: center;

    background-size: contain !important;
}
.icon-obj_noteerror {
    display: inline-block;
    width: 14px;
    height: 14px;
    padding: 1.458px 1.166px 1.458px 1.167px;
    justify-content: center;
    align-items: center;
    background-size: contain !important;
}
.icon-obj_pageerror {
    width: 211px;
    height: 211px;
    flex-shrink: 0;
}
.icon-obj_pageerror_mini {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 1.833px 1.833px 1.833px 1.834px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.icon-obj_sidebar-arrow {
    display: flex;
    width: 8px;
    height: 10px;
    padding: 5px 0;

    background-size: contain !important;

    position: absolute;
    right: 20px;
}
.icon-obj_text {
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 1.333px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    background-size: contain !important;
}
.icon-obj_svgtext {
    display: inline-block;
    padding: 2.083px;
    align-self: center;
}
.icon-obj_flashcategory {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
.icon-obj_flashcategory-small {
    display: flex;
    width: 16.667px;
    height: 14.167px;
    flex-shrink: 0;
    padding: 2.917px 1.667px;
    justify-content: center;
    align-items: center;

    background-size: contain !important;
}
.icon-obj_flashclose {
    display: flex;
    width: 20px;
    height: 20px;
    margin: 0px 6px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.icon-obj_announcementcollapse {
    display: flex;
    width: 24px;
    height: 24px;
    margin: 0 13px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    box-sizing: border-box;
}
.icon-obj_text-arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 5px 0;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.icon-obj_button {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1.667px 1.666px;
    justify-content: center;
    align-items: center;
}
.icon-obj_tablesort {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.icon-obj_lookup {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 4.167px 1.666px 4.167px 1.667px;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
}
.icon-obj_paginator {
    display: inline;
    width: 14px;
    height: 14px;
    padding: 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.icon-eye-w-text {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%), var(--Background-bg-base, #FFF);

    /* Btn-effect */
    box-shadow: 0px 7px 12px 0px rgba(255, 255, 255, 0.08) inset, 0px -2px 2px 0px rgba(48, 48, 48, 0.10) inset;
}



.icon-account { background: url(/img/icon-account.svg) no-repeat center center; }
.icon-alert { background: url(/img/icon-alert.svg) no-repeat center center; }
.icon-alert_orange { background: url(/img/icon-alert_orange.svg) no-repeat center center; }
.icon-arrow_blue { background: url(/img/icon-arrow_blue.svg) no-repeat center center; }
.icon-arrow_down { background: url(/img/icon-arrow_down.svg) no-repeat center center; }
.icon-arrow_left { background: url(/img/icon-arrow_left.svg) no-repeat center center; }
.icon-arrow_left2 { background: url(/img/icon-arrow_left2.svg) no-repeat center center; }
.icon-arrow_left3 { background: url(/img/icon-arrow_left3.svg) no-repeat center center; }
.icon-arrow_right { background: url(/img/icon-arrow_right.svg) no-repeat center center; }
.icon-arrow_right2 { background: url(/img/icon-arrow_right2.svg) no-repeat center center; }
.icon-arrow_right3 { background: url(/img/icon-arrow_right3.svg) no-repeat center center; }
.icon-bulksearch { background: url(/img/icon-bulksearch.svg) no-repeat center center; }
.icon-bulksearch.on { background: url(/img/icon-bulksearch_blue.svg) no-repeat center center; }
.icon-calendar { background: url(/img/icon-calendar.svg) no-repeat center center; }
.icon-check_green { background: url(/img/icon-check_green.svg) no-repeat center center; }
.icon-check_turquoise { background: url(/img/icon-check_turquoise.svg) no-repeat center center; }
.icon-close { background: url(/img/icon-close.svg) no-repeat center center; }
.icon-download { background: url(/img/icon-download.svg) no-repeat center center; }
.icon-download2 { background: url(/img/icon-download2.svg) no-repeat center center; }
.icon-download_blue { background: url(/img/icon-download_blue.svg) no-repeat center center; }
.icon-error_accessdenied { background: url(/img/icon-error_accessdenied.svg) no-repeat center center; }
.icon-error_notfound { background: url(/img/icon-error_notfound.svg) no-repeat center center; }
.icon-eye { background: url(/img/icon-eye.svg) no-repeat center center; }
.icon-eye_blue { background: url(/img/icon-eye_blue.svg) no-repeat center center; }
.icon-eye_close_blue { background: url(/img/icon-eye_close_blue.svg) no-repeat center center; }
.icon-file_blue { background: url(/img/icon-file_blue.svg) no-repeat center center; }
.icon-filter { background: url(/img/icon-filter.svg) no-repeat center center; }
.icon-filter_white { background: url(/img/icon-filter_white.svg) no-repeat center center; }
.icon-folder { background: url(/img/icon-folder.svg) no-repeat center center; }
.icon-globe { background: url(/img/icon-globe.svg) no-repeat center center; }
.icon-help { background: url(/img/icon-help.svg) no-repeat center center; }
.icon-help.on { background: url(/img/icon-help_blue.svg) no-repeat center center; }
.icon-history { background: url(/img/icon-history.svg) no-repeat center center; }
.icon-history.on { background: url(/img/icon-history_blue.svg) no-repeat center center; }
.icon-home { background: url(/img/icon-home.svg) no-repeat center center;}
.icon-home.on { background: url(/img/icon-home_blue.svg) no-repeat center center; }
.icon-image_blue { background: url(/img/icon-image_blue.svg) no-repeat center center; }
.icon-info { background: url(/img/icon-info.svg) no-repeat center center; }
.icon-link { background: url(/img/icon-link.svg) no-repeat center center; }
.icon-link.on { background: url(/img/icon-link_blue.svg) no-repeat center center; }
.icon-listregistering { background: url(/img/icon-note.svg) no-repeat center center; }
.icon-listregistering.on { background: url(/img/icon-note_blue2.svg) no-repeat center center; }
.icon-lock_blue { background: url(/img/icon-lock_blue.svg) no-repeat center center; }
.icon-logout { background: url(/img/icon-logout.svg) no-repeat center center; }
.icon-mail_gray { background: url(/img/icon-mail_gray.svg) no-repeat center center; }
.icon-more { background: url(/img/icon-more.svg) no-repeat center center; }
.icon-plus { background: url(/img/icon-plus.svg) no-repeat center center; }
.icon-save_orange { background: url(/img/icon-save_orange.svg) no-repeat center center; }
.icon-search { background: url(/img/icon-search.svg) no-repeat center center; }
.icon-search.on { background: url(/img/icon-search_blue2.svg) no-repeat center center; }
.icon-search_blue { background: url(/img/icon-search_blue.svg) no-repeat center center; }
.icon-send_blue { background: url(/img/icon-send_blue.svg) no-repeat center center; }
.icon-setting { background: url(/img/icon-setting.svg) no-repeat center center; }
.icon-setting.on { background: url(/img/icon-setting_blue.svg) no-repeat center center; }
.icon-sidebar { background: url(/img/icon-sidebar_left.svg) no-repeat center center; }
.icon-sidebar.close { background: url(/img/icon-sidebar_left.svg) no-repeat center center; }
.icon-sidebar.open { background: url(/img/icon-sidebar_right.svg) no-repeat center center; }
.icon-slider { background: url(/img/icon-slider.svg) no-repeat center center; }
.icon-sort { background: url(/img/icon-sort.svg) no-repeat center center; background-size: inherit; }
.icon-sort_down { background: url(/img/icon-sort_down.svg) no-repeat center center; }
.icon-sort_up { background: url(/img/icon-sort_down.svg) no-repeat center center; transform: rotate(180deg); }
.icon-thumbsup_turquoise { background: url(/img/icon-thumbsup_turquoise.svg) no-repeat center center; }
.icon-usage { background: url(/img/icon-usage.svg) no-repeat center center; }
.icon-usage.on { background: url(/img/icon-usage_blue.svg) no-repeat center center; }

.icon-edit {
    background: url(/img/icon-edit.svg) no-repeat center center;
}

.icon-delete {
    background: url(/img/icon-delete.svg) no-repeat center center;
    cursor: pointer;
}
.icon-delete_white {
    background: url(/img/icon-delete_white.svg) no-repeat center center;
    cursor: pointer;
}   

.icon-close {
    background: url(/img/icon-close.svg) no-repeat center center;
    cursor: pointer;
}

.icon-close_black {
    background: url(/img/icon-close_black.svg) no-repeat center center;
    cursor: pointer;
}

.icon-management {
    background: url(/img/icon-management.svg) no-repeat center center;
    cursor: pointer;
}

.icon-reset {
    background: url(/img/icon-reset.svg) no-repeat center center;
    cursor: pointer;
}

.icon-check_multiselect {
    background: url(/img/icon-check_multiselect.svg) no-repeat center center;
    cursor: pointer;
}
.icon-note_edit {
    background: url(/img/icon-note_edit.svg) no-repeat center center;
}   

.tag {
    display: inline-flex;
    /* height: 24px; */
    padding: 4px 10px 4px 6px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    border-radius: 29px;
    text-align: center;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    white-space: nowrap;
}

.tag-info {
    border: 1px solid var(--Primary-Colour01, #1F4F9A);
    background: var(--Primary-Colour01, #1F4F9A);
    color: var(--Texts-text-white, #FFF);
}
.tag-info::before {
    content: '';
    display: flex;
    width: 16px;
    height: 16px;
    padding: 1.333px 2.333px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: url(/img/icon-note_white.svg) no-repeat center center;
}

.tag-system {
    border: 1px solid var(--Primary-Colour01, #1F4F9A);
    background: var(--Background-bg-raised, #FFF);
    color: var(--Primary-Colour01, #1F4F9A);

    /* Btn-effect */
    box-shadow: 0px 7px 12px 0px rgba(255, 255, 255, 0.08) inset, 0px -2px 2px 0px rgba(48, 48, 48, 0.10) inset;
}
.tag-system::before {
    content: '';
    display: flex;
    width: 16px;
    height: 16px;
    padding: 1.333px 1.334px 1.333px 1.333px;
    justify-content: center;
    align-items: center;
    background: url(/img/icon-info_blue.svg) no-repeat center center;
}

.button {
    white-space: nowrap;
    cursor: pointer;
}.text-center {
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    text-align: -ms-center;
    text-align: -o-center;
}
.text-right {
    text-align: right;
    text-align: -webkit-right;
    text-align: -moz-right;
    text-align: -ms-right;
    text-align: -o-right;
}

.text-danger {
    color: var(--Danger-danger-500, #DF0C3D);
}
.decoration-none {
    text-decoration: none;
}


.display {
    display: block !important;
}
.display-none {
    display: none;
}
.display-flex {
    display: flex;
}
.collapse {
    display: none;
}
.show {
    display: flex;
}

.align-top {
    align-items: flex-start;
    justify-content: flex-start;
}
.align-left {
    align-items: flex-start;
    justify-self: unset;
}
.align-center {
    align-items: center;
    justify-content: center;
}
.align-right {
    align-items: flex-end;
    justify-content: flex-end;
}
.align-between {
    align-items: center;
    justify-content: space-between;
}
.align-end {
    align-items: flex-end;
}
.flex-fillwidth {
    flex: 1 1 0;
    min-width: 0;
}
.flex-direction-column {
    flex-direction: column;
}
.flex-direction-row {
    flex-direction: row;
}
.flex-direction-initial {
    flex-direction: initial;
}

.wm-582p {
    max-width: 582px;
}
.wm-720p {
    max-width: 720px;
}
.wm-980p {
    max-width: 980px;
}
.w-100 {
    width: 100%;
}
.w-193p {
    width: 193px;
}
.w-220p {
    width: 220px;
}
.w-250p {
    width: 250px;
}
.w-300p {
    width: 300px;
}
.w-360p {
    width: 360px;
}
.w-556p {
    width: 556px;
}
.w-950p {
  width: 950px;
}
.w-1028 {
    width: 1028px;
}
.w-1045 {
    width: 1045px;
}
.h-100 {
    height: 100%;
}
.h-50p {
    height: 50px;
}
.hmi-40p {
    min-height: 40px; /* フラッシュメッセージ用最低高 */
}
.hmi-58p {
    min-height: 58px; /* 風評検索フラッシュメッセージ用最低高 */
}
.m-0 {
    margin: 0 !important;
}
.mt-0 {
    margin-top: 0 !important;
}
.mt-2 {
    margin-top: 2px !important;
}
.mt-m8 {
    margin-top: -8px !important;
}
.mt-m16 {
    margin-top: -16px !important;
}
.mt-6 {
    margin-top: 6px !important;
}
.mt-8 {
   margin-top: 8px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-22 {
    margin-top: 22px !important;
}
.mt-24 {
    margin-top: 24px !important;
}
.mt-28 {
    margin-top: 28px !important;
}
.mt-31 {
    margin-top: 31px !important;
}
.mt-36 {
    margin-top: 36px !important;
}
.mt-42 {
    margin-top: 42px !important;
}
.mt-62 {
    margin-top: 62px !important;
}
.mt-68 {
    margin-top: 68px !important;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mv-10 {
    margin-right: 10px;
    margin-left: 10px;
}
.ml-auto {
    margin-left: auto !important;
}
.p-0 {
    padding: 0 !important;
}

.gap-2 {
    gap: 2px;
}
.gap-3 {
    gap: 3px;
}
.gap-6 {
    gap: 6px;
}
.gap-8 {
    gap: 8px;
}
.gap-16 {
    gap: 16px;
}
.gap-22 {
    gap: 22px;
}
.gap-26 {
    gap: 26px;
}
.gap-28 {
    gap: 28px;
}
.gap-32 {
    gap: 32px;
}
.gap-42 {
    gap: 42px;
}
.gap-64 {
    gap: 64px;
}
.gap-77 {
    gap: 77px;
}
.gap-120 {
    gap: 120px;
}
.row-gap-12 {
    row-gap: 12px;
}

.ps-relative {
    position: relative;
}

.resize-none {
    resize: none;
}

/* checkboxでチェックが入っているときに表示 */
.switch-display {
    display: none;
}
.switch-display + * {
    display: none;
}
.switch-display:checked + * {
    display: flex;
}

/* メモ更新フラッシュメッセージ */
.message_dialog {
    position: absolute;
    top: 34px;
    left: 12px;
    display: block;
}

.fade_out {
  animation: fadeOut ease .3s;
  -moz-animation: fadeOut ease .3s;
  -ms-animation: fadeOut ease .3s;
  -o-animation: fadeOut ease .3s;
  -webkit-animation: fadeOut ease .3s;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; display: none;}
}

@-moz-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; display: none;}
}

@-ms-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; display: none;}
}

@-o-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; display: none;}
}

@-webkit-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; display: none;}
}.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .modal {
        border-radius: var(--Num-radius-base, 8px);
        border: 1px solid var(--Border-border-default, #DCE0E5);
        background: var(--Background-bg-base, #FFF);
        box-shadow: 0 1px 2px 0 rgba(128, 128, 128, 0.12);
        min-width: 320px;
        max-width: 550px;
        padding: 33px 45px;
        position: relative;

        &.w-640 {
            max-width: 640px;
        }

        .modal-close {
            position: absolute;
            top: 12px;
            right: 12px;
            border: none;
            cursor: pointer;
            display: flex;
            width: 20px;
            height: 20px;
            padding: 4.167px 1.666px 4.167px 1.667px;
        }

        .modal-title {
            color: var(--Texts-text-base, #14181F);
            font-family: "Noto Sans JP";
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            letter-spacing: -0.12px;
        }

        /* メッセージ部分 */
        .modal-body {
            color: var(--Texts-text-base, #14181F);
            font-family: "Noto Sans JP";
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            margin-top: 24px;
            margin-bottom: 50px;
            min-height: 30px;
            max-height: 65vh;
            overflow-y: true;

            &.secondary {
                color: var(--Texts-text-secondary, #525E6F);
            }
        }

        /* ボタン コンテナ*/
        .modal-actions {
            text-align: right;

            .modal-button {
                display: inline-block;
                box-sizing: border-box;
                width: 152px;
                padding: 8px;
                border: none;
                border-radius: var(--Num-radius-base, 8px);
                cursor: pointer;
                margin-left: 16px;

                color: var(--Texts-text-white, #FFF);
                background: var(--Primary-Colour01, #1F4F9A);
                text-align: center;

                /* Typography/text-base-500 */
                font-family: "Noto Sans JP";
                font-size: 15px;
                font-style: normal;
                font-weight: 500;
                line-height: 140%; /* 21px */
                box-shadow: 0 7px 12px 0 rgba(255, 255, 255, 0.08) inset, 0 -2px 2px 0 rgba(48, 48, 48, 0.10) inset;

                /* 赤色のボタン  */
                &.danger {
                    background: var(--Styles-Danger-500, #DF0C3D);
                }

                /* キャンセル用（白背景黒字） */
                &.cancel {
                    border: 1px solid var(--Border-border-default, #DCE0E5);
                    background: var(--Background-bg-base, #FFF);
                    color: var(--Texts-text-base, #14181F);
                }
            }
        }
    }

    /* モーダル拡張CSS: 一括検索用 */
    .modal-bulksearch {
        min-width: 640px;
        min-height: 272px;
        padding: 84px 0;

        .modal-title {
            text-align: center;
        }

        .modal-body {
            margin: 48px 0 37px;

            color: var(--Texts-text-base, #14181F);

            /* Typography/text-long-paragraph */
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
        }
        .modal-actions {
            text-align: center;

            .modal-button {
                width: 280px;
                height: 40px;
                margin-left: 12px;
            }
            .modal-button:nth-child(1) {
                margin-left: 0;
            }
        }
    }

    /* モーダル拡張CSS: G-Search記事閲覧 */
    .modal-gsearch {
        .modal-body {
            margin-top: 42px;
            margin-bottom: 12px;

            p {
                color: var(--Texts-text-base, #14181F);
                /* Body2 */
                font-family: "Noto Sans JP";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 145%; /* 20.3px */
            }
        }
    }
}
/* 拒否リスト一括登録拡張 */
.modal.bulk-reject {
    .modal-body {
        margin: 48px 0 37px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        .icon-obj_text.icon-note_edit {
            width: 19px;
            height: 20px;
        }
        .icon-obj_text.icon-folder {
            margin-left: 2px;
        }
    }

    .modal-actions.text-center {
        text-align: center;
    }

}

/* ツールチップ */
.tooltip {
    display: block;
    position: absolute;
    flex-shrink: 0;
    padding: 14px;
    min-width: 200px;

    background: var(--Background-bg-raised, #FFF);
    border: 1px solid var(--Border-border-default, #DCE0E5);
    border-radius: 8px;

    font-weight: normal !important;
    visibility: hidden;
    z-index: 10;
    
    /* 矢印部分 */
    &.tooltip-top::before,
    &.tooltip-top::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    &.tooltip-top::before {
        top: -9px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 0 8px 8px 8px; /* 上の辺を0px、右、下、左の辺を8pxに設定 */
        border-color: transparent transparent var(--Border-border-default, #DCE0E5) transparent; /* 下側の色をボーダー色に設定 */
        transform: translateX(-50%); /* 矢印を中央に配置 */
    }
    &.tooltip-top::after {
        top: -8px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 0 8px 8px 8px; /* 上の辺を0px、右、下、左の辺を8pxに設定 */
        border-color: transparent transparent var(--Background-bg-raised, #FFF) transparent; /* 下側の色を背景色に設定 */
        transform: translateX(-50%); /* 矢印を中央に配置 */
    }
    &.tooltip-bottom::before,
    &.tooltip-bottom::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    &.tooltip-bottom::before {
        bottom: -9px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 8px 8px 0 8px; /* 上の辺を8px、右、左の辺を8px、下の辺を0pxに設定 */
        border-color: var(--Border-border-default, #DCE0E5) transparent transparent transparent; /* 上側の色をボーダー色に設定 */
        transform: translateX(-50%); /* 矢印を中央に配置 */
    }
    &.tooltip-bottom::after {
        bottom: -8px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 8px 8px 0 8px; /* 上の辺を8px、右、左の辺を8px、下の辺を0pxに設定 */
        border-color: var(--Background-bg-raised, #FFF) transparent transparent transparent; /* 上側の色を背景色に設定 */
        transform: translateX(-50%); /* 矢印を中央に配置 */
    }
    &.tooltip-right::before,
    &.tooltip-right::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    &.tooltip-right::before {
        right: -9px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 8px 0 8px 8px; /* 上、下、左の辺を8px、右の辺を0pxに設定 */
        border-color: transparent transparent transparent var(--Border-border-default, #DCE0E5); /* 左側の色をボーダー色に設定 */
        transform: translateY(-50%); /* 矢印を中央に配置 */
    }
    &.tooltip-right::after {
        right: -8px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 8px 0 8px 8px; /* 上、下、左の辺を8px、右の辺を0pxに設定 */
        border-color: transparent transparent transparent var(--Background-bg-raised, #FFF); /* 左側の色を背景色に設定 */
        transform: translateY(-50%); /* 矢印を中央に配置 */
    }
    &.tooltip-left::before,
    &.tooltip-left::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    &.tooltip-left::before {
        left: -9px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 8px 8px 8px 0; /* 上、右、下の辺を8px、左の辺を0pxに設定 */
        border-color: transparent var(--Border-border-default, #DCE0E5) transparent transparent; /* 右側の色をボーダー色に設定 */
        transform: translateY(-50%); /* 矢印を中央に配置 */
    }
    &.tooltip-left::after {
        left: -8px; /* 矢印の位置を調整 */
        border-style: solid;
        border-width: 8px 8px 8px 0; /* 上、右、下の辺を8px、左の辺を0pxに設定 */
        border-color: transparent var(--Background-bg-raised, #FFF) transparent transparent; /* 右側の色を背景色に設定 */
        transform: translateY(-50%); /* 矢印を中央に配置 */
    }

    a {
        text-decoration: none;
    }

}