@charset "UTF-8";

/* フォント
--------------------------*/
:root {
    --default-font: 'Noto Sans JP', sans-serif;
}
/* カラー
--------------------------*/
:root {
    --font-color-default: #474747;
    --white: #FFFFFF;
}

.l-header-underlayer {
    background: transparent;
    position: absolute;
}

.l-main * {
    font-family: var(--default-font);
    color: var(--font-color-default);
}

.l-main {
    background-color: var(--white);
    padding-block: 116px 0;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.l-main::before {
    content: '';
    background-color: #FFFFFF;
    width: 100%;
    height: calc(100% - 280px);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

/* 共通
--------------------------*/
.ui__inner {
    padding: 0 19.999px;
    position: relative;
}

/* 
--------------------------*/
.page__inner {
    width: 1260px;
    margin: 0 auto;
}
    .page__title {
        font-size: 30px;
        font-weight: 700;
        color: var(--font-color-default);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 62px;
        margin-bottom: 39px;
    }
        .page__title::before {
            content: '';
            background: url(/images/favorite/icon_history-ttl.webp) no-repeat center / cover;
            display: block;
            width: 32px;
            height: 32px;
        }

    .page__wrapper {
        background-color: #FFFFFF;
        padding-bottom: 46px;
    }
        .page__bkn-list {
            display: flex;
            flex-wrap: wrap;
            padding: 61px;
            gap: 54px 34px;
            box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);
        }
            .page__bkn-slider {
                position: relative;
                overflow: hidden;
            }
                .page__bkn-item {
                    width: 259px;
                    border-radius: 10px;
                    box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);
                }
                    .page__bkn-link {
                        display: block;
                        border-radius: 10px;
                        overflow: hidden;
                    }
                    .page__bkn-link:hover {
                        opacity: 1;
                    }
                        .page__bkn-image {
                            height: 179px;
                            position: relative;
                            overflow: hidden;
                        }
                            .page__bkn-image img {
                                width: 100%;
                                height: 100%;
                                vertical-align: bottom;
                                object-fit: cover;
                                transition: .3s;
                            }
                            .page__bkn-image.is-madori img {
                                object-fit: contain !important;
                            }
                            .page__bkn-link:hover .page__bkn-image img {
                                transform: scale(1.1);
                                transition: 0.3s;
                            }
                        .page__bkn-vr {
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            z-index: 1;
                            width: fit-content;
                            height: fit-content;
                            margin: auto;
                        }
                            .page__bkn-vr span {
                                font-size: 22px;
                                font-weight: 700;
                                color: #FFFFFF;
                            }
                            
                            /* VRアニメーション追加 */
                            .page__bkn-vr .vr-letter {
                                display: inline-block;
                                position: relative;
                                animation-duration: 1.3s;
                                animation-timing-function: linear;
                                animation-iteration-count: infinite;
                                animation-fill-mode: both;
                                animation-play-state: running;
                                will-change: transform;
                            }
                            
                            .page__bkn-vr .vr-letter-v {
                                animation-name: vrSwapV;
                                animation-delay: 0s;
                            }
                            
                            .page__bkn-vr .vr-letter-r {
                                animation-name: vrSwapR;
                                animation-delay: 0s;
                                transform: translateY(3px); /* Rを少し下に配置 */
                            }
                            
                            @keyframes vrSwapV {
                                0% {
                                    transform: translateX(0) translateY(0) scale(1);
                                    opacity: 1;
                                }
                                10% {
                                    transform: translateX(1.4px) translateY(0.3px) scale(0.95);
                                    opacity: 0.9;
                                }
                                20% {
                                    transform: translateX(2.8px) translateY(0.6px) scale(0.85);
                                    opacity: 0.8;
                                }
                                30% {
                                    transform: translateX(4px) translateY(1px) scale(0.7);
                                    opacity: 0.6;
                                }
                                40% {
                                    transform: translateX(8.4px) translateY(1.8px) scale(0.8);
                                    opacity: 0.7;
                                }
                                50% {
                                    transform: translateX(14px) translateY(3px) scale(0.9);
                                    opacity: 0.8;
                                }
                                60% {
                                    transform: translateX(12px) translateY(2.6px) scale(0.95);
                                    opacity: 0.9;
                                }
                                70% {
                                    transform: translateX(10px) translateY(2px) scale(1);
                                    opacity: 1;
                                }
                                80% {
                                    transform: translateX(7px) translateY(1.4px) scale(1);
                                    opacity: 1;
                                }
                                90% {
                                    transform: translateX(3.5px) translateY(0.7px) scale(1);
                                    opacity: 1;
                                }
                                100% {
                                    transform: translateX(0) translateY(0) scale(1);
                                    opacity: 1;
                                }
                            }
                            
                            @keyframes vrSwapR {
                                0% {
                                    transform: translateX(-4px) translateY(3px) scale(1);
                                    opacity: 1;
                                }
                                10% {
                                    transform: translateX(-5.6px) translateY(2.7px) scale(1);
                                    opacity: 1;
                                }
                                20% {
                                    transform: translateX(-7.2px) translateY(2.4px) scale(1);
                                    opacity: 1;
                                }
                                30% {
                                    transform: translateX(-10px) translateY(2px) scale(1);
                                    opacity: 1;
                                }
                                40% {
                                    transform: translateX(-14px) translateY(1.2px) scale(0.95);
                                    opacity: 0.9;
                                }
                                50% {
                                    transform: translateX(-20px) translateY(0) scale(0.9);
                                    opacity: 0.8;
                                }
                                60% {
                                    transform: translateX(-18.8px) translateY(0.3px) scale(0.85);
                                    opacity: 0.75;
                                }
                                70% {
                                    transform: translateX(-16px) translateY(1px) scale(0.7);
                                    opacity: 0.6;
                                }
                                80% {
                                    transform: translateX(-12px) translateY(1.8px) scale(0.8);
                                    opacity: 0.75;
                                }
                                90% {
                                    transform: translateX(-7px) translateY(2.4px) scale(0.9);
                                    opacity: 0.9;
                                }
                                100% {
                                    transform: translateX(-4px) translateY(3px) scale(1);
                                    opacity: 1;
                                }
                            }
                            
                            .page__bkn-vr::before {
                                content: '';
                                background-color: transparent;
                                border: 2px solid #FFFFFF;
                                border-radius: 50%;
                                width: 70px;
                                height: 70px;
                                position: absolute;
                                bottom: -26px;
                                left: -23px;
                                z-index: -1;
                            }
                .swiper-pagination {
                    background: rgba(255, 255, 255, 0.85);
                    width: 46.001px;
                    height: 22.001px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 3px;
                    border-radius: 187.5px;
                    left: auto;
                    right: 10.999px;
                }
                .no-swiper .swiper-pagination {
                    display: none;
                }
                    .swiper-pagination span {
                        font-size: 13.999px;
                        font-weight: 500;
                    }
                        .page__bkn-info {
                            padding: 12px 15px 13px;
                            position: relative;
                        }
                            .page__bkn-name {
                                font-size: 16px;
                                font-weight: 700;
                                margin-bottom: 2px;
                                width: 195px;
                                overflow: hidden;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                            }
                            .page__bkn-row {
                                display: flex;
                                flex-direction: column;
                                gap: 3px;
                                margin-bottom: 1px;
                            }
                                .page__bkn-price {
                                    font-size: 16px;
                                    font-weight: 700;
                                    display: flex;
                                    align-items: baseline;
                                    gap: 2px;
                                }
                                    .page__bkn-price .price {
                                        font-size: 20px;
                                        font-weight: 700;
                                        color: #EE2424;
                                    }
                                .page__bkn-text {
                                    font-size: 14px;
                                    line-height: 1.525;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                }
                                .page__favorite {
                                    position: absolute;
                                    top: 12px;
                                    right: 14px;
                                }
                                    .page__favorite svg {
                                        width: 26px;
                                        height: 23px;
                                        fill: #FFFFFF;
                                        stroke: #B5B5B5;
                                        stroke-opacity: 1;
                                        stroke-width: 2px;
                                    }
                                    .page__favorite.is-checked svg {
                                        stroke: none;
                                    }

        .no-registered {
            padding: 60px 60px 191px;
            box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);
        }
            .no-registered__head {
                text-align: center;
                font-size: 22px;
                letter-spacing: 0.05em;
                border-bottom: 1px solid #E5E5E5;
                padding-bottom: 59px;
                margin-bottom: 192px;
            }
                .no-registered__title {
                    font-size: 20px;
                    font-weight: 700;
                    letter-spacing: 0.05em;
                    text-align: left;
                    margin-bottom: 14px;
                }
                .no-registered__text {
                    text-align: left;
                    font-size: 16px;
                    line-height: 1.625;
                    letter-spacing: 0.12em;
                }
                .no-registered__step {
                    background-color: #F6F6F6;
                    border-radius: 12px;
                    padding: 29px 21px 29px 31px;
                    width: 487px;
                }
                    .no-registered__step-list {
                        counter-reset: step-counter;
                    }
                        .no-registered__step-item {
                            display: flex;
                            gap: 10px;
                        }
                        .no-registered__step-item:not(:first-child) {
                            padding-top: 19px;
                        }
                        .no-registered__step-item:not(:last-child) {
                            padding-bottom: 19px;
                            border-bottom: 1px solid #E5E5E5;
                        }
                            .no-registered__step-item::before {
                                content: counter(step-counter);
                                counter-increment: step-counter;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 30px;
                                height: 30px;
                                background-color: #FFFFFF;
                                border-radius: 50%;
                                color: var(--font-color-blue);
                                font-size: 16px;
                                margin-top: 9px;
                            }
                            .no-registered__step-text {
                                font-size: 16px;
                                letter-spacing: 0.12em;
                                line-height: 1.625;
                            }
                                .no-registered__step-text span {
                                    font-weight: 700;
                                    color: #EE2424;
                                }
            .no-registered__lower {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #CCCCCC;
                gap: 38px;
                padding: 39px;
            }
                .no-registered__lower-text--bold {
                    font-size: 20px;
                    font-weight: 700;
                    letter-spacing: 0.05em;
                    line-height: 1.6;
                    text-align: left;
                }
                .no-registered__lower-link {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 9px;
                    width: 310px;
                    height: 70px;
                    margin: 0 auto;
                    font-size: 18px;
                    font-weight: 600;
                    background-color: var(--background-color-blue);
                    border: 1px solid var(--background-color-blue);
                    color: #FFFFFF;
                    border-radius: 8px;
                    transition: .3s;
                    position: relative;
                    padding-left: 30px;
                }
                .no-registered__lower-link:before {
                    content: '';
                    display: inline-block;
                    width: 23px;
                    height: 23px;
                    mask-image: url(/images/favorite/icon-search.svg);
                    -webkit-mask-image: url(/images/favorite/icon-search.svg);
                    mask-repeat: no-repeat;
                    -webkit-mask-repeat: no-repeat;
                    mask-position: center;
                    -webkit-mask-position: center;
                    background-color: currentColor;
                    position: absolute;
                    left: 91px;
                }
                    .no-registered__lower-link:hover {
                        opacity: 1;
                        background-color: #fff;
                        color: var(--font-color-blue);
                        border: 1px solid var(--background-color-blue);
                    }

.no-registered__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    margin-bottom: 60px;
}