.p-asoken {
    padding-block: 200px;
    background-image: url(../img/asoken/asoken-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    @media (max-width: 767.98px) {
        padding-block: 50px;
    }
}
.p-asoken__inner {
    max-width: 1530px;
    padding-inline: 50px;
}
.p-asoken__title {
    width: 33%;
    margin-inline: auto;
    margin-bottom: 50px;
    text-align: center;
    @media (max-width: 767.98px) {
        width: 100%;
        margin-bottom: 30px;
    }
    img {
        display: inline-block;
    }
}
.p-asoken__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    column-gap: 6rem;
    @media (max-width: 767.98px) {
        grid-template-columns: repeat(1, 1fr);
        column-gap: 0;
        row-gap: 30px;
    }
}

.p-asoken__item a {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    transition: transform .18s ease, opacity .18s ease;
    transform: translate(0, 0);
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        /* 影（台座） */
        background-color: #0075c2;
        transform: translate(10px, 10px);
        transition: transform .18s ease;
    }

    /* hover = 少し押す */
    &:hover {
        opacity: 0.92;
        transform: translate(4px, 4px);
        &::after {
        transform: translate(6px, 6px);
        }
    }

    /* active = しっかり押す（クリック中） */
    &:active {
        opacity: 0.95;
        transform: translate(10px, 10px);
        &::after {
        transform: translate(0, 0);
        }
    }
}

/* 画像の隙間対策（任意） */
.p-asoken__item a img {
    display: block;
    width: 100%;
    height: auto;
}