.accordion-details { border-top: 1px solid }
.accordion-details:last-child { border-bottom: 1px solid }

.accordion-details summary {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
    grid-template-areas: 
        "num icn"
        "ttl ttl";
    column-gap: clamp(40px, calc(40px + (120 - 40) * ((100vw - 800px) / (1920 - 800))), 120px);
    transition: padding var(--duration-fast) var(--timing-ease);
}

.accordion-details summary .item-number {
    grid-area: num;
    position: relative;
    transform: translateX(0px);
    transition: transform var(--duration-normal) var(--timing-cubic);
}

.accordion-details summary .item-title {
    grid-area: ttl;
    padding-top: 20px;
    line-height: 1.15;
}

.accordion-details summary .item-icon {
    grid-area: icn;
}

.accordion-details[open] summary {
    padding-bottom: clamp(40px, calc(40px + (120 - 40) * ((100vw - 800px) / (1920 - 800))), 120px);
}


@media (min-width: 767px) {

    .accordion-details summary {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "num ttl icn";
    }

    .accordion-details summary .item-title {
        padding-top: 0;
    }

}

@media (pointer:fine) {

    .accordion-details:not([open]):hover {

        color: var(--cWhite);
        background-color: var(--cBlack);

        transition: 
            color var(--duration-normal) var(--timing-cubic), 
            background-color var(--duration-fast) var(--duration-normal) var(--timing-cubic);
    }

    .accordion-details summary .bg-animation {
        background-color: var(--cWhite);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
        transition: all var(--duration-normal) var(--timing-cubic);
    }

    .accordion-details:not([open]):hover .bg-animation {
        background-color: var(--cBlack);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transition: all var(--duration-normal) var(--timing-cubic);
    }

    .accordion-details:not([open]):hover .item-number {
        transform: translateX(15px);
    }

}

@media (prefers-color-scheme: dark) and (pointer:fine) {

    .accordion-details:not([open]):hover {
        color: var(--cWhite);
        background-color: var(--cGray_d);
    }

    .accordion-details summary .bg-animation,
    .accordion-details:not([open]):hover .bg-animation {
        background-color: var(--cGray_d);
    }   
}