.colepage_title{
    position: relative;
    height:60px;
    width:400px;
    font-size:50px;
    color: #ffffffe0;
    text-shadow: 2px 2px 5px #b3b3b3;
}
.colepage_title::before{
    content: "";
    position: absolute;
    bottom: 0;
    width: 0%;
    border-top: 1px solid #000000;
    transition: width 10s ease;
    animation: lineGrow1 1s ease forwards;
}

.colepage_title::first-letter{
    color:rgb(248, 113, 113);
}

@keyframes lineGrow1 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%; /* 希望の長さに指定（50%や100%など） */
  }
}

.collection_container{
    display: flex;
    height:80vh;
    width:100%;
    align-items:center; /* 画像の上下の揃え位置を「上」にする */
    flex-direction: column-reverse;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 15vh;
    padding-bottom: 45vh;
    scrollbar-width: none;
    transition: opacity 0.2s ease; /* 0.5秒かけて変化 */
    opacity: 0;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -webkit-user-select: none;
}

.show{
    opacity: 1;
}

.collection{
    max-height: 150px;
    width:auto;
    margin:20px;
    padding:10px;
    border-radius: 5px;
}

.collection img{
    max-height: 60vh;
    max-width: auto;
    -webkit-user-drag: none;
    cursor:pointer ;
}

.collectionname{
    display: flex;
    position:fixed;
    top:700px;
    left:1250px;
    height:50px;
    width:400px;
    border-bottom: 1px solid #686868;
    justify-content: flex-start; /* 下寄せ */
    align-items: flex-end;
}

.detail{
    display: none;
}

.detailbox{
    display: none;
    position:fixed;
    top:100px;
    left:200px;
    height:80vh;
    width:80vw;
    border:3px solid #bbbbbbf6;
    background-color: #fffffff1;
    z-index: 9999;
    transition: all 0.2s ease;
    transition-property: display, opacity, height, padding-top;
    transition-behavior: allow-discrete;
    transition-duration: 0.2s;

    @starting-style {
        opacity: 0;
    }
}

.detailimgbox{
    display: flex;
    height: 100%;
    width: 50%;
}

.detailimg{
    padding:100px;
    max-height:100%;
    max-width:100%;
    align-self: flex-start;
    align-items: center;
    margin:auto;
}

.detailtext{
    width:50%;
    padding:50px;
}

#detailclose{
    position:absolute;
    top:0px;
    right:0px;
    height: 50px;
    width:50px;
    border-radius: 50px;
    margin:5px;
    border:1px solid #585858;
}