article{
    display:flex;
}

#main{
    background-color: rgba(240,248,255,0.85);
    width:70vw;
    margin-right:2vw;
}

#news{
    margin-top:-1.5vw;
}
#title_n{
    font-size:2.5vw;
    font-family: "Hannari";
    color:darkblue;
}
#newsbox{
    width:60vw;
    height:20vw;
    border:2px solid #000;
    overflow-y:scroll;
    margin-left: 1.5vw;
    margin-top:-1.5vw;
}
.newses{
    margin-top:-1vw;
    margin-left:1vw;
    line-height: 2;
}

#contents{
    margin-top:0vw
}
#title_c{
    font-size:2.5vw;
    font-family: "Hannari";
    color:darkblue;
}

.contents_list{
    display:flex;
}
.content1{
    cursor:pointer;
    position:relative;
    width:20vw;
    opacity:0;
    text-decoration:none;
}
.fu{
    animation-name:fu;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fu{
    from{
        opacity:0;
        transform:translateY(100%);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

#cont1-pic{
    background-image:url(./pictures/1678207568574.gif);
    background-repeat: no-repeat;
    background-size: cover;
    height:20vw;
    transition:transform .6s ease;
    width:20vw;
    position:relative;
    top:-2vw;
}
.content1:hover #cont1-pic{
    transform:scale(1.5);
}
#cont1-pic p{
    align-items: center;
    bottom:0;
    display: flex;
    justify-content:center;
    left:0;
    margin:auto;
    pointer-events:none;
    position:relative;
    right:0;
    top:8vw;
    width:20vw;
    z-index:1;
}

#cont2-pic{
    background-image:url(./pictures/1678210604015.gif);
    background-repeat: no-repeat;
    background-size: cover;
    height:20vw;
    transition:transform .6s ease;
    width:20vw;
    position:relative;
    top:-2vw;
}
.content1:hover #cont2-pic{
    transform:scale(1.5);
}
#cont2-pic p{
    align-items: center;
    bottom:0;
    display: flex;
    justify-content:center;
    left:0;
    margin:auto;
    pointer-events:none;
    position:relative;
    right:0;
    top:8vw;
    width:20vw;
    z-index:1;
}

#cont3-pic{
    background-image:url(./pictures/1678900621381.gif);
    background-repeat: no-repeat;
    background-size: cover;
    height:20vw;
    transition:transform .6s ease;
    width:20vw;
    position:relative;
    top:-2vw;
}
.content1:hover #cont3-pic{
    transform:scale(1.5);
}
#cont3-pic p{
    align-items: center;
    bottom:0;
    display: flex;
    justify-content:center;
    left:0;
    margin:auto;
    pointer-events:none;
    position:relative;
    right:0;
    top:8vw;
    width:20vw;
    z-index:1;
}

#cont4-pic{
    background-image:url(./pictures/1678933360289.gif);
    background-repeat: no-repeat;
    background-size: cover;
    height:20vw;
    transition:transform .6s ease;
    width:20vw;
    position:relative;
    top:-2vw;
}
.content1:hover #cont4-pic{
    transform:scale(1.5);
}
#cont4-pic p{
    align-items: center;
    bottom:0;
    display: flex;
    justify-content:center;
    left:0;
    margin:auto;
    pointer-events:none;
    position:relative;
    right:0;
    top:8vw;
    width:20vw;
    z-index:1;
}

#cont5-pic{
    background-image:url(./pictures/1678933300432.gif);
    background-repeat: no-repeat;
    background-size: cover;
    height:20vw;
    transition:transform .6s ease;
    width:20vw;
    position:relative;
    top:-2vw;
}
.content1:hover #cont5-pic{
    transform:scale(1.5);
}
#cont5-pic p{
    align-items: center;
    bottom:0;
    display: flex;
    justify-content:center;
    left:0;
    margin:auto;
    pointer-events:none;
    position:relative;
    right:0;
    top:8vw;
    width:20vw;
    z-index:1;
}

#cont6-pic{
    background-image:url(./pictures/1678933227689.gif);
    background-repeat: no-repeat;
    background-size: cover;
    height:20vw;
    transition:transform .6s ease;
    width:20vw;
    position:relative;
    top:-2vw;
}
.content1:hover #cont6-pic{
    transform:scale(1.5);
}
#cont6-pic p{
    align-items: center;
    bottom:0;
    display: flex;
    justify-content:center;
    left:0;
    margin:auto;
    pointer-events:none;
    position:relative;
    right:0;
    top:8vw;
    width:20vw;
    z-index:1;
}