@charset "utf-8";

/* ソート用の矢印スタイル（クリック可能） */
.sort-arrow {
    cursor: pointer;
    user-select: none;
    /* テキスト選択を無効化 */
    margin-left: 5px;
    /* 矢印とテキストの間の余白 */
}

/* テーブルヘッダーのスタイル */
th {
    position: relative;
    /* 絶対位置の要素を基準にするため */
    padding-right: 30px;
    /* 矢印用のスペースを確保 */
}

/* 矢印の形と色と絶対位置の設定 */
th .sort-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    opacity: 0;
}

/* 昇順ソート時の矢印の表示（CSSでは内容を変更できないため、この部分はJSで制御する） */
th.sorted-asc .sort-arrow {
    transform: rotate(180deg) translateY(4px);
    opacity: 1;
}

/* 降順ソート時の矢印の表示 */
th.sorted-desc .sort-arrow {
    opacity: 1;
}