/* クリック時にJSでこのクラスを付け外しします */
.active-jump {
  animation: jump 0.5s ease;
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
}


.images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 30px;
}


.books img{
    width: 30%;
    height: auto;
    object-fit: contain;
}
.images video {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.images > div {
    background: white;
    padding: 20px;
    border-radius: 15px;
    min-height: 380px;
    text-align: left;

    transition: all .3s ease;
}
.images > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,.15);
}
.images > div:not(.books) img,
.images video {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.books{
    text-align:center;
}
.books img{
    width: 18%;
    height: auto;
    object-fit: contain;
}
.bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
     align-items:stretch;
}
.cite,
.msg{
    height:100%;
}