/* -----------------------------------------------------------------------------
**
** PC 検索サジェスト用CSS
**
----------------------------------------------------------------------------- */

.TOL-header-PC-Suggest-Area * {
    font-family: "roboto", noto-sans-cjk-jp;
}

/* サジェスト */
.TOL-header-PC-Suggest-Area {
    width: 97%;
    height: 474px;
    position: absolute;
    background: white;
    top: 35px;
    right: 11px;
    left: 12px;
    overflow-y: scroll;
    overflow-x: hidden;
    inline-size: auto;
    z-index: 2;
    box-shadow: 0px 1px 6px rgba(0,0,0,0.3);
}

    .TOL-header-PC-Suggest-Area::-webkit-scrollbar {
        background: #dbdbdb;
        width: 7.6px;
        border-right: 6px solid white;
    }

    .TOL-header-PC-Suggest-Area::-webkit-scrollbar-thumb {
        background-color: var(--tr-red);
        border-right: 6px solid white;
    }

@-moz-document url-prefix() {
    .TOL-header-PC-Suggest-Area {
        scrollbar-width: thin;
        scrollbar-color: var(--tr-red) #dbdbdb;
    }
}
/* 項目 */
.TOL-header-PC-Suggest-Area span {
    font-size: 14px;
}

.TOL-header-PC-Suggest-Area ul {
    list-style: none;
    margin: 2px 8px 0px 8px;
    overflow-wrap: break-word;
}

.TOL-header-PC-Suggest-Area li + li {
    border-top: 1px solid #dfdfdf;
}

.TOL-header-PC-Suggest-Area li:hover {
    background: var(--tr-light-gray);
}

.TOL-header-PC-Suggest-Area li a {
    display: block;
    box-sizing: border-box;
    text-decoration: none;
    padding: 12px 1px 12px 1px;
    position: relative;
    font-size: 11px;
    font-weight: bold;
    color: var(--tr-black);
    margin: 0 6px;
}
/* 検索対象文字 */
.TOL-header-PC-Suggest-Area ul span {
    color: var(--tr-red);
    font-size: 11px;
    font-weight: bold;
}

.TOL-header-PC-Suggest-liKeyword {
    width: 100%;
}
/* 件数 */
.TOL-header-PC-Suggest-liCount {
    width: 78px;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 24px;
}

    .TOL-header-PC-Suggest-liCount a {
        color: var(--tr-medium-gray);
    }
/* リスト下部 */
.TOL-header-PC-Suggest-Area hr {
    border-top: 1px solid #dfdfdf;
    margin: 0px 18px;
}

.TOL-header-PC-Suggest_p {
    margin: 10px 18px 23px 18px;
    text-align: right;
    justify-content: flex-end
}

    .TOL-header-PC-Suggest_p a {
        display: block;
        color: var(--tr-black);
        font-size: 11px;
    }

    .TOL-header-PC-Suggest_p img {
        width: 12px;
        margin-left: 8px;
    }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' -25, 'opsz' 20;
}

    .material-symbols-outlined.suggest {
        position: relative;
        right: 1px;
        top: 3px;
        transform: scale(1.1, 1.1);
    }
/* タイトル */
.TOL-header-PC-Suggest-inner-title {
    width: 100%;
}
/* アーティスト名 */
.TOL-header-PC-Suggest-inner-artist-name {
    width: 100%;
}
/* 商品 */
.TOL-header-PC-Suggest-inner-item {
    width: 100%;
}

    .TOL-header-PC-Suggest-inner-item ul {
        margin-top: 3px;
        margin-bottom: 3px;
    }
/* アーティスト情報 */
.TOL-header-PC-Suggest-inner-artist-info {
    width: 100%;
}

/* 関連 */
.TOL-header-PC-Suggest-inner-connect {
    width: 100%;
}

    .TOL-header-PC-Suggest-inner-connect ul {
        margin-top: 3px;
        margin-bottom: 3px;
    }
/* 出品 */
.TOL-header-PC-Suggest-inner-listing {
    width: 100%;
}
/* 20240124 karlpark 閉じる */
.TOL-suggest-detail-PC-close-button {
    position: absolute;
    width: 20px;
    right: 40px;
    top: 5px;
    height: 20px;
    font-size: 16px;
}

/* 20250205 karlpark SI254 */
.TOL-header-PC-Suggest-Area .TOL-header-PC-Suggest-inner-artist-name a.active,
.TOL-header-PC-Suggest-Area .TOL-header-PC-Suggest-inner-title a.active,
.TOL-header-PC-Suggest-Area .TOL-header-PC-Suggest-inner-item a.active,
.TOL-header-PC-Suggest-Area .TOL-header-PC-Suggest-inner-artist-info a.active,
.TOL-header-PC-Suggest-Area .TOL-header-PC-Suggest-inner-connect a.active,
.TOL-header-PC-Suggest-Area .TOL-header-PC-Suggest-inner-listing a.active {
    background-color: #e3e9f6;
    cursor: pointer;
}
