:root {
    --imageRack-width: 180px;
    --imageRack-header: 50px;

    --imageRack-textColor: #fff;
    --imageRack-background: #333;

    --imageRack-scrollbar: #888;
}

.disp{
    position: relative;
}

.imageRackBox{
    position: fixed;
    bottom: 0;
    z-index: 10000;

    transform: translateZ(0);

    right: calc( -1 * var(--imageRack-width) );
    width: var(--imageRack-width);
    height: calc(100vh - var(--imageRack-header));

    color: var(--imageRack-textColor);
    background: var(--imageRack-background);

    transition: .5s;
}

.imageRackBox.active{
    right: 0;
}

.imageRackWrap{
    width: 100%;
    height: 100%;
    overflow-X: hidden;
    overflow-y: auto;
    scrollbar-color: var(--imageRack-scrollbar) var(--imageRack-background);

    z-index: 2147483647 !important;

    /* タッチを確実に受け取る */
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* スクロール設定 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}
.imageRackTab{
    position: absolute;
    top: 0;
    left: -24px;

    width: 25px;
    height: 60px;
    background:  url("./icon.png") , var(--imageRack-background);
    background-size: 18px, auto;
    background-position: 4px center;
    background-repeat: no-repeat;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}
.imageRackTab:hover{
    cursor: pointer;
}

.mobile .imageRackTab{
    left: -29px;
    width: 30px;
    height: 46px;
    background-size: 20px, auto;
    background-position: 5px center;
}

.imageRackHeader{
  font-size: 12px;
  padding: 20px 10px 10px 20px;
}

.imageRackMainBox{
    width: auto;
    height: auto;
    padding: 0 10px 30px 20px;

    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 10px;

}

.imageRackMainBox > a{
    text-decoration: none;
    color: var(--imageRack-textColor);
}

.imageRackMainBox .item_box{
  gap: 2px;
}
.imageRackMainBox .item_box .item_icon{
    font-size: 12px;
    border: solid 1px #fff;
    padding: 1px 2px;
}
.imageRackMainBox .item_box .item_image{
    font-size: 14px;
    padding-top: 4px;
}
.imageRackMainBox .item_box .item_image img{
    width: 100%;
    height: auto;
}
.imageRackMainBox .item_box .item_caption{
  color: var(--imageRack-textColor);
  font-size: 14px;
}