@charset "UTF-8";
/*wang*/
       /* SEHOU: ホーム（カルーセル/ショートカット）CSS（開始） */

/* Responsive Carousel Styles */
        :root {
            --carousel-bp-md: 768px;
            --carousel-gap: 16px;
            --carousel-transition-time: 300ms;
        }
        .estore-carousel {
            position: relative;
            width: 100%;
            overflow: hidden;
            background-color: #ffffff;
        }
        .estore-carousel__track {
            display: flex;
            width: 100%;
            transition: transform var(--carousel-transition-time) cubic-bezier(0.25, 1, 0.5, 1);
            will-change: transform;
            scrollbar-width: none;
        }
        .estore-carousel__track::-webkit-scrollbar {
            display: none;
        }
        .estore-carousel__slide {
            flex-shrink: 0;
            display: block;
            position: relative;
            overflow: hidden;
            /* 方案A：将背景色设为透明，彻底隐藏背景色 */
            background-color: transparent;
            width: 100vw;
            /* 强制容器保持统一的宽高比 */
            aspect-ratio: 16 / 9;
        }
        .estore-carousel__slide img {
            width: 100%;
            height: 100%;
            /* 关键：使用 cover 配合 display: block 消除所有空隙和底部白边 */
            object-fit: cover;
            display: block;
            transform-origin: center center;
            transition: transform 500ms ease;
        }
        .estore-carousel__slide::after {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.2);
            transition: background-color 300ms ease;
            pointer-events: none;
        }
        @media (min-width: 768px) {
            .estore-carousel__track {
                gap: var(--carousel-gap);
                /* 确保同一排的卡片高度拉伸对齐 */
                align-items: stretch;
            }
            .estore-carousel__slide {
                width: calc((100vw - (3 - 1) * var(--carousel-gap)) / 3);
                /* 废弃固定高度 320px，采用统一宽高比，随屏幕宽度等比缩放，彻底消除大屏白边 */
                aspect-ratio: 16 / 9;
                height: auto;
            }
            .estore-carousel__slide:hover img {
                transform: scale(1.05);
            }
            .estore-carousel__slide:hover::after {
                background-color: rgba(0, 0, 0, 0.1);
            }
        }
        .estore-carousel__btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 20;
            width: 32px;
            height: 32px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: background-color 200ms ease, transform 200ms ease;
            cursor: pointer;
            border: none;
            color: #1f2937;
        }
        .estore-carousel__btn:hover {
            background-color: #ffffff;
            transform: translateY(-50%) scale(1.05);
        }
        .estore-carousel__btn--prev { left: 8px; }
        .estore-carousel__btn--next { right: 8px; }
        @media (min-width: 768px) {
            .estore-carousel__btn {
                width: 40px;
                height: 40px;
            }
            .estore-carousel__btn--prev { left: 16px; }
            .estore-carousel__btn--next { right: 16px; }
        }
        .estore-carousel__dots {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 20;
        }
        @media (min-width: 768px) {
            .estore-carousel__dots { bottom: 24px; }
        }
        .estore-carousel__dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
            border: none;
            cursor: pointer;
            transition: background-color 300ms ease, transform 300ms ease;
        }
        .estore-carousel__dot.is-active {
            background-color: #ffffff;
            transform: scale(1.2);
        }
        @media (min-width: 768px) {
            .estore-carousel__dot {
                width: 10px;
                height: 10px;
            }
        }

        /* 原有样式保留 */
        body { font-family: 'Noto Sans JP', sans-serif; }
        /* SEHOU: eStoreランキング(データソース)非表示（開始） */
        .ranking {
            display: none !important;
        }
        /* SEHOU: eStoreランキング(データソース)非表示（終了） */
        
        /* estore 专用自定义样式 (补充 Tailwind 无法处理的细节) */
        .estore-line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        #main-column .estore-home-main h2 {
            margin-bottom: 0;
            padding: 0;
        }
        
        /* 排行榜名次角标 */
        .rank-badge {
            position: absolute;
            top: -12px;
            left: -12px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 22px;
            color: white;
            z-index: 10;
            border: 3px solid white; /* 新增白边 */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .rank-badge.rank-1 { background: #DDAA00; width: 52px; height: 52px; font-size: 26px; top: -16px; left: -16px; border-width: 4px; } /* 金色 */
        .rank-badge.rank-2 { background: #A0B2C6; } /* 银色 */
        .rank-badge.rank-3 { background: #D1895B; } /* 铜色 */
        .rank-badge.rank-4 { background: #4B638A; } /* 藏青色 */
        .rank-badge.rank-5 { background: #8E7B7A; } /* 深灰色 */
        
        /* 隐藏滚动条 */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Shortcuts 断点响应式控制与滚动吸附 */
        .shortcuts-track {
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            touch-action: pan-y pinch-zoom;
        }
        
        /* 移动端 (≤767px): 1个完整 + 露出第二个的 10% */
        @media (max-width: 767px) {
            .shortcut-card {
                /* (100vw - 32px padding - 16px gap) / 1.1 */
                width: calc((100vw - 32px) / 1.1);
            }
        }
        
        /* iPad小屏 (768px ~ 999px): 1个完整 + 露出第二个的 50% */
        @media (min-width: 768px) and (max-width: 999px) {
            .shortcut-card {
                /* (100vw - 32px padding - 24px gap) / 1.5 */
                width: calc((100vw - 32px - 24px) / 1.5);
            }
        }
        
        /* 大屏 (≥1000px): 网格布局，取消横滑 */
        @media (min-width: 1000px) {
            .shortcuts-track {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                overflow-x: visible;
                scroll-snap-type: none;
            }
            .shortcut-card {
                width: auto;
            }
        }
        /* 选项卡商品出现动画 (从下到上淡入) */
        @keyframes fadeUpIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: grid;
        }
        
        /* 子元素交错动画初始状态 */
        .tab-content.active > * {
            opacity: 0;
            animation: fadeUpIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        @media screen and (min-width: 769px) {
            div#main-column > section {
                width: auto;
            }
        }

        /* SEHOU: 検索フォーム見た目調整（開始） */
        .sehou-searchForm {
            border-color: rgba(17, 18, 20, 0.14) !important;
            box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
        }

        /* 支持 0.5px 的设备会更“细腻” */
        @supports (border: .5px solid transparent) {
        .sehou-searchForm {
            border-width: 0.5px !important;
        }
        }

        /* 关键：去掉 input 自己的默认粗边框，避免“双线” */
        .sehou-searchForm input[type="text"],
        .sehou-searchForm input[type="search"] {
            border: 0 !important;
            border-width: 0 !important;
            box-shadow: none !important;
            outline: none !important;
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
        }

        /* focus：只变色不变粗 */
        .sehou-searchForm:focus-within {
            border-color: rgba(17, 18, 20, 0.28) !important;
        }

        /* SEHOU: 検索フォーム見た目調整（終了） */

        

        

/* SEHOU: ホーム（カルーセル/ショートカット）CSS（終了） */