body:has(.displaydevice input[type="checkbox"]:checked) {
    overflow: hidden;
}

main {
    width: 100%;
    margin: 60px auto;

    .top {
        width: min(100% - 40px, var(--width-l));
        margin: 60px auto;

        h1 {
            font-size: 36px;
            line-height: 1.3;
        }

        p {
            color: var(--secondtext);
        }
    }

    .search {
        width: min(100%, var(--width-l) + 40px);
        display: flex;
        flex-wrap: nowrap;
        position: sticky;
        top: 60px;
        overflow-x: auto;
        z-index: 9;
        gap: 5px;
        padding: 0 20px;
        margin: 0 auto 40px;

        input[type="checkbox"] {
            display: none;

            &:checked+label {
                background-color: var(--themecolor);
                color: #fff;
            }
        }

        label {
            display: inline-block;
            padding: 8px 20px;
            background-color: var(--thirdback);
            color: var(--secondtext);
            border-radius: 99px;
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
            white-space: nowrap;

            &:hover {
                background-color: var(--fourthback);
            }

            &:active {
                transform: scale(.9);
            }
        }
    }

    .displaydevice {
        width: min(100% - 40px, var(--width-l));
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        grid-auto-rows: auto;
        grid-auto-flow: dense;
        align-items: start;
        gap: 10px;

        .device {
            break-inside: avoid;
            grid-column: span 3;
            grid-row: span 2;
            height: 100%;

            &.hidden {
                display: none;
            }

            &>label {
                position: relative;
                display: block;
                width: 100%;
                height: 100%;
                background: var(--secondback);
                border-radius: 20px;
                overflow: hidden;
                cursor: pointer;

                img {
                    width: 100%;
                }

                .texts {
                    width: 100%;

                    .category {
                        opacity: .5;
                        font-size: 12px;
                        line-height: 1;
                    }

                    h3 {
                        line-height: 1.3;
                    }

                    .price {
                        color: var(--accentcolor);
                    }

                    .explain {
                        opacity: .7;
                        font-size: 14px;
                        line-height: 1.4;
                    }

                    .area1,
                    .area2 {
                        margin: 10px;
                    }

                    .area3 {
                        width: 100%;

                        a {
                            display: none;
                            width: fit-content;
                            background: var(--thirdback);
                            padding: 6px 15px;
                            border-radius: 99px;
                            color: var(--maintext);

                            &:hover {
                                background: var(--fourthback);
                            }
                        }
                    }
                }
            }

            &:has(.card-layout-l) {
                height: 100%;
            }

            .card-layout-l {
                width: 100%;
                height: 100%;
                aspect-ratio: 5 / 4;

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    z-index: 1;
                    transform: scale(1);
                    border-radius: 20px;
                }

                .texts {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    z-index: 3;
                    transform: scale(1);

                    p:not(.price),
                    h3 {
                        filter: drop-shadow(0 0 10px #0007);
                    }

                    h3,
                    .category,
                    .explain {
                        color: #fff;
                    }
                }

                &::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 40%;
                    z-index: 2;
                    display: block;
                    backdrop-filter: blur(0);
                    background: linear-gradient(#0000, #0007);
                    opacity: 0;
                    mask-image: linear-gradient(to top, rgb(0 0 0 / 100%) 50%, rgb(0 0 0 / 0%) 100%);
                    animation: fadein 1s .65s forwards;
                }
            }

            input:checked+label.card-layout-l::before {
                display: none;
            }

            .card-layout-m {
                img {
                    aspect-ratio: 16 / 9;
                    object-fit: cover;
                    border-radius: 20px 20px 0 0;
                }

                .texts {
                    height: 100%;
                    display: flex;
                    flex-direction: column;

                }
            }


            &:has(.card-layout-s) {
                grid-row: span 1;
                height: 100%;
            }

            .card-layout-s {
                display: flex;
                align-items: center;
                height: 100%;

                img {
                    width: max(min(50vw - 30px,200px), 30%);
                    height: 100%;
                    object-fit: cover;
                    border-radius: 20px 0 0 20px;
                }

                .texts {
                    .explain {
                        display: none;
                    }

                    .area3 {
                        display: none;
                    }
                }
            }

            &:not(:has(img)) {
                grid-row: span 1;
                height: 100%;

                label {
                    height: 100%;

                    .texts {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding: 5px;

                        .area3 {
                            margin: 0;
                        }
                    }
                }

                article {
                    .area1 {
                        margin: 10px;
                    }
                }
            }

            article {
                position: fixed;
                display: flex;
                align-items: center;
                top: 0;
                left: 0;
                width: 100%;
                height: 100dvh;
                pointer-events: none;
                opacity: 0;
                z-index: 11;

                &>label {
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    cursor: pointer;
                }

                &>.content {
                    width: min(100% - 40px, var(--width-s));
                    margin: 0 auto;
                    background: var(--secondback-t);
                    border-radius: 30px;
                    overflow: hidden;
                    z-index: 12;
                    filter: drop-shadow(5px 5px 20px #0004);

                    img {
                        width: 100%;
                        border-radius: 30px 30px 0 0;
                        aspect-ratio: 16 / 9;
                        object-fit: cover;
                    }

                    .texts {
                        .category {
                            color: var(--thirdtext);
                            font-size: 12px;
                            line-height: 1;
                        }

                        .price {
                            color: var(--accentcolor);
                        }

                        .explain {
                            color: var(--secondtext);
                            font-size: 14px;
                            line-height: 1.4;
                        }

                        .area1,
                        .area2 {
                            width: calc(100% - 20px);
                            margin: 0 10px 10px;
                            padding: 10px;
                        }

                        .area3 {
                            overflow-x: auto;
                            padding: 0 20px 20px;

                            .btns {
                                display: flex;
                                justify-content: flex-end;
                                width: fit-content;

                                a,
                                label {
                                    display: inline-block;
                                    width: fit-content;
                                    white-space: nowrap;
                                    background: var(--btn);
                                    color: var(--btntext);
                                    padding: 6px 15px;
                                    margin-right: 5px;
                                    cursor: pointer;
                                    border-radius: 99px;
                                    transition: .2s;

                                    &:hover {
                                        background: var(--btnhover);
                                    }
                                }

                                label {
                                    background: var(--thirdback);
                                    color: var(--maintext);

                                    &:hover {
                                        background: var(--fourthback);
                                    }
                                }
                            }

                        }
                    }
                }
            }

            &:not(:has(img)) {
                article {
                    .area1 {
                        margin: 10px !important;
                    }
                }
            }

            input {
                display: none;
            }

            input:checked+label+article {
                pointer-events: all;
                opacity: 1;
                backdrop-filter: blur(20px);
            }

        }
    }
}



@supports (view-transition-name: none) {
    @keyframes simple-bounce {
        60% {
            transform: scale(1.04);
        }

        80% {
            transform: scale(0.98);
        }
    }

    @keyframes fade-in-unblur {
        from {
            opacity: 0;
            filter: blur(4px);
            transform: translateY(8px);
        }
    }

    @keyframes fade-out-blur {
        to {
            opacity: 0;
            filter: blur(4px);
            transform: translateY(8px);
        }
    }

    /* 背景 */
    .device.is-transitioning:has(input:not(:checked))>label,
    .device.is-transitioning:has(input:checked) article .content {
        view-transition-name: device-container;
    }

    ::view-transition-group(device-container) {
        animation-duration: 0.6s;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-origin: center;
        isolation: isolate;
        z-index: 1;
    }

    /* カードの画像 */
    .device.is-transitioning:has(input:not(:checked)) label img,
    .device.is-transitioning:has(input:checked) article img {
        view-transition-name: device-image;
    }

    ::view-transition-group(device-image) {
        animation-duration: 0.6s;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-origin: center;
        isolation: isolate;
        z-index: 2;
    }

    /* テキスト1 */
    .device.is-transitioning:has(input:not(:checked)) label .texts .area1,
    .device.is-transitioning:has(input:checked) article .texts .area1 {
        view-transition-name: device-texts1;
    }

    ::view-transition-group(device-texts1) {
        animation-duration: 0.63s;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
        animation-delay: 0.01s;
        transform-origin: center;
        isolation: isolate;
        z-index: 3;
    }

    /* テキスト2 */
    .device.is-transitioning:has(input:not(:checked)) label .texts .area2,
    .device.is-transitioning:has(input:checked) article .texts .area2 {
        view-transition-name: device-texts2;
    }

    ::view-transition-group(device-texts2) {
        animation-duration: 0.66s;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
        animation-delay: 0.02s;
        transform-origin: center;
        isolation: isolate;
        z-index: 4;
    }

    /* テキスト3 */
    .device.is-transitioning:has(input:not(:checked)) label .texts .area3,
    .device.is-transitioning:has(input:checked) article .texts .area3 {
        view-transition-name: device-texts3;
    }

    ::view-transition-group(device-texts3) {
        animation-duration: 0.69s;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
        animation-delay: 0.02s;
        transform-origin: center;
        isolation: isolate;
        z-index: 4;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
        backdrop-filter: blur(0);
    }

    100% {
        opacity: 1;
        backdrop-filter: blur(20px);
    }
}