section a {
   padding: 0px; /*ボックス内の余白*/
   display:inline;
}
.contents section.list a:hover {
   background: #F6F4F0; /*背景色*/
}

video{   width:640px;   height:390px;   }

.lb {
    display: flex;
    position: fixed;
    width: 100%; 
    height: 100%; 
    text-align:center;
    vertical-align:middle;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}

.lb img {
    height: 100%;

    transform: scale(.7);
    transition: .4s transform ease;
    pointer-events: none;
}

@media screen and (max-width:500px){
   .lb img { width: 100% !important; height: auto; }
   video{   width:320px;   height:195px;   }
}

.lb:target {
    opacity: 1;
    z-index: 103;
}

.lb:target img {
    transform: scale(1);
}

.lb::before,.lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height:3px;
    top: 32px;
    right: 16px;
    background: #fff;
    border-radius: 4px;
    z-index: 104;
}
.lb::before { transform: rotate(-315deg); }
.lb::after  { transform: rotate(315deg);  }