.tooltip {
		position: relative;
		display: inline-block;
		cursor: pointer;
}

.tooltip .tooltiptext {
		visibility: hidden;
		width: 200px;
		background-color: #ffcece;
		color: #000000;
		text-align: center;
		border-radius: 5px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		top: 100%; /* ツールチップを画像の上に表示 */
		left: 50%;
		margin-left: -100px;
		opacity: 0;
		transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 0.8;
}
.gridlist {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 1em;
    box-sizing: border-box;
    
    
}

.dvd {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease;
    width:200px;
}

.dvd img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: filter 0.3s ease;
    pointer-events: none;
}

.dvd:hover {
    transform: perspective(600px) rotateY(-18deg) scale(1.03);
}

.dvd::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

.dvd:hover::before {
    animation: shine 0.75s ease forwards;
}

@keyframes shine {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

.buttons{
    [role=button],button{background:linear-gradient(#f2f2f2 45%,#ebebeb 0,#cfcfcf);border:1px solid #8e8f8f;border-radius:3px;box-shadow:inset 0 0 0 1px #fffc;box-sizing:border-box;color:#222;font:9pt Segoe UI,SegoeUI,Noto Sans,sans-serif;min-height:23px;min-width:75px;padding:0 12px;position:relative;text-align:center;z-index:0}input[type=file]::file-selector-button{background:linear-gradient(#f2f2f2 45%,#ebebeb 0,#cfcfcf);border:1px solid #8e8f8f;border-radius:3px;box-shadow:inset 0 0 0 1px #fffc;box-sizing:border-box;color:#222;font:9pt Segoe UI,SegoeUI,Noto Sans,sans-serif;min-height:23px;min-width:75px;padding:0 12px;position:relative;text-align:center;z-index:0}[role=button]:before,button:before{background:linear-gradient(#eaf6fd 45%,#bee6fd 0,#a7d9f5);border-radius:3px;box-shadow:inset 0 0 0 1px #fffc;content:"";height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;transition:opacity .3s;width:100%;z-index:-1}[role=button]:after,button:after{background:linear-gradient(#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db);border-radius:2px;box-shadow:inset 1px 1px 0 #0003,inset -1px 1px 0 #0001;content:"";height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;transition:opacity .3s;width:100%;z-index:-1}[role=button]:disabled,button:disabled{background:#f4f4f4;border-color:#adb2b5;color:#838383}[role=button]:not(:disabled):hover,button:not(:disabled):hover{border-color:#3c7fb1;transition:border-color .3s}[role=button]:not(:disabled):hover:before,button:not(:disabled):hover:before{opacity:1;transition:opacity .3s}[role=button]:not(:disabled):not(:hover),button:not(:disabled):not(:hover){border-color:#8e8f8f;transition:border-color 1s linear}[role=button]:not(:disabled):not(:hover):before,button:not(:disabled):not(:hover):before{opacity:0;transition:opacity 1s linear}[role=button]:not(:disabled).active,[role=button]:not(:disabled):active,button:not(:disabled).active,button:not(:disabled):active{border-color:#6d91ab;transition:border-color .3s}[role=button]:not(:disabled).active:after,[role=button]:not(:disabled):active:after,button:not(:disabled).active:after,button:not(:disabled):active:after{opacity:1;transition:opacity .3s}[role=button].focused,[role=button]:focus-visible,button.focused,button:focus-visible{box-shadow:inset 0 0 0 2px #98d1ef;outline:1px dotted #000;outline-offset:-4px}[role=button].default,[role=button].focused,[role=button]:focus,button.default,button.focused,button:focus{-webkit-animation:pulse-anim 1s ease infinite alternate;animation:pulse-anim 1s ease infinite alternate;background-image:linear-gradient(#eaf6fd 45%,#bee6fd 0,#a7d9f5);border-color:#5586a3}label[role=button]{align-items:center;display:inline-flex}label[role=button]>input[type=file]{display:none}@-webkit-keyframes pulse-anim{0%{box-shadow:inset 0 0 3px 1px #34deffdd}to{box-shadow:inset 0 0 1px 1px #34deffdd}}@keyframes pulse-anim{0%{box-shadow:inset 0 0 3px 1px #34deffdd}to{box-shadow:inset 0 0 1px 1px #34deffdd}}
/*# sourceMappingURL=button.css.map */
}
.add{
    position:absolute;
z-index:2;
left:-260px;
width:22em;
filter: drop-shadow(5px 5px 5px rgba(204, 114, 114, 0.144));
bottom:5rem;

}