/* Base Reset & Variables */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .re-top-lp {
            --bg-color: #fcfbfa;
            --section-bg-alt: #f5f2ee;
            --text-main: #222120;
            --text-muted: #66625f;
            --accent-pink: #c78d73;
            --border-color: #e6e1da;
            --sale-red: #a94442;
            --cta-gold: #8d7355;
            --font-serif: "Times New Roman", "Shippori Mincho", "Yu Mincho", "MS Mincho", serif;
            --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        }

        .re-top-lp .link_section{
            margin:5% 10%;
            a {
                        display: block;
                        background: var(--bg-color);
                        color:var(--text-muted);
                        font-size: 14px;
                        font-weight: bold;
                        padding: 10px;
                        border-radius: 50px;
                        text-align: center;
                        width: 100%;
                        border: 1px solid var(--border-color);
                    }

        }

        .re-top-lp {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: var(--font-sans);
            font-size: 14px;
            line-height: 1.6;
            letter-spacing: 0.04em;
            -webkit-font-smoothing: antialiased;
            min-width: 320px; /* 320px幅のデバイスを完全に担保 */
            max-width:700px;
            margin:0 auto;
        }

        .container {
            width: 100%;
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 16px;
        }

        /* --- Global Alert Banner --- */
        .top-alert {
            background-color: var(--text-main);
            color: #fff;
            font-size: 11px;
            text-align: center;
            padding: 8px 12px;
            letter-spacing: 0.05em;
            font-weight: 500;
        }

        /* --- Hero Section (上下反転構造) --- */
        .hero {
            padding: 16px 0 30px 0;
        }

        .hero-banner {
            background-color: var(--section-bg-alt);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            display: flex;
            flex-direction: column-reverse;
            width: 100%;
            overflow: hidden;
            color:var(--text-main);
        }

        .hero-left {
            padding:10px;
        }

        .hero-right {
            width: 100%;
            height: auto;
            background-color: #eae4dc;
            img{
                display: block;
                width:100%;
                height: auto;
            }
        }

        .hero-tag {
            display: inline-block;
            background-color: var(--sale-red);
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
            border-radius: 2px;
        }

        .hero-title {
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.4;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .hero-title span {
            font-size: 12px;
            display: block;
            color: var(--accent-pink);
            margin-bottom: 4px;
            font-weight: 600;
        }

        .hero-desc {
            font-size: 12px;
            line-height:1.2;
            color: var(--text-muted);
        }

        /* --- UIコンポーネント設計共通 --- */
        .section-padding {
            padding: 32px 0;
        }

        .section-header {
            margin-bottom: 20px;
        }

        .section-header h2 {
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.05em;
            border:0;
            padding:0;
        }

        .section-header h2 span {
            font-size: 11px;
            font-weight: 400;
            color: var(--text-muted);
            margin-left: 4px;
        }

        /* --- ① 新商品コーナー (CSS Snap カルーセル) --- */
        .carousel-snap {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 8px;
            padding-bottom: 8px;
            -webkit-overflow-scrolling: touch;
        }

        .carousel-snap::-webkit-scrollbar {
            display: none;
        }

        .carousel-snap li {
            flex: 0 0 40%;
            max-width:110px;
            scroll-snap-align: start;
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 8px;
            position: relative;
        }

        .carousel-snap li span {
            position: absolute;
            top: -1px;
            left: -1px;
            background-color: var(--accent-pink);
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            padding: 4px 6px;
            border-radius: 2px;
            z-index: 2;
        }

        .carousel-snap li .thumb {
            width: 100%;
            background-color: var(--section-bg-alt);
            border-radius: 2px;
            margin-bottom: 8px;
            img{
                display:block;
                width:100%;
                height:auto;
            }
        }

        .carousel-snap.tag-list li img{
            display:block;
            width:100%;
            height:auto;
        }

        .carousel-snap li .texts{
            .goods_title{
                font-size:10px;
                color:var(--text-main);
                word-break: break-all;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
            }
            .price{
                font-size:12px;
                color:var(--text-main);
                margin-top:5px;
            }
        }
        .carousel-snap.tag-list li p{
            color: var(--text-main);
        }
        

        .carousel-snap.tag-list li .item-title{
            font-size:10px;
            color:var(--text-main);
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
        }

        .carousel-snap.tag-list li .item-price{
           font-size:12px;
                color:var(--text-main);
                margin-top:5px;
        }

        .btn-favorite-icon {
            position: absolute;
            top: 12px;
            right: 12px;
            background: none;
            border: none;
            font-size: 18px;
            color: var(--accent-pink);
            cursor: pointer;
            padding: 6px;
            z-index: 3;
        }

        .star{
							display:flex;
							font-size:10px;
							align-items:baseline;
							margin:0;
							i{
							position:relative;
							display:block;
							margin-right:5px;
							font-style:normal;
							font-size:15px;
							letter-spacing:-1px;
							color:transparent;
							background:linear-gradient(90deg,#ddd);
							background-clip:text;
							-webkit-background-clip:text;
		    }
		}

        /* --- ② 売れ筋ランキング --- */
        .ranking-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: space-around;
        }

        .ranking-list li{
            counter-increment: ranking;
            position:relative;
            img{
            width:90px;
            height:auto;
            border-radius: 4px 0px 0px 4px;
            }
            a{border:1px solid var(--border-color);}
        }

        .ranking-list li::before{
                position: absolute;
                top: 5px;
                left: 5px;
                color: #fff;
                background: #bb96a2;
                font-size: 12px;
                text-align: center;
                width: 23px;
                height: 23px;
                line-height: 23px;
                border-radius: 50px;
                content: "" counter(ranking) "";
                z-index:1;
        }

        .ranking-list li:first-child{
            a{
                border:3px solid #dfc576;
            }
            &::before{
                background: #dfc576;
                top: -5px;
                left: -5px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
            }
        }

        .ranking-list li:nth-child(2){
            &::before{
                background: #9aaeb5;
            }

            a{
                border:3px double #9aaeb5;
            }
        }

        .ranking-list li:nth-child(3){
            &::before{
                background: #ad876b;
            }

            a{
                border:1px solid #ad876b;
            }
        }

        .ranking-list li a{
            display: flex;
            background: #fff;
            background:var(--section-bg-alt);
            gap: 12px;
            position: relative;
            border-radius: 4px;
        }

        .ranking-list img {
            display:block;
            flex-shrink: 0;
        }

        .ranking-list div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 8px 0 0;
        }

        .ranking-list div p {
            font-size: 12px;
            color: var(--text-main);
            margin-bottom: 4px;
            word-break: break-all;

            &.item-title{
							font-size:10px;
							margin:0;
							overflow: hidden;
							display: -webkit-box; /* WebKit系ブラウザ向け */
							-webkit-box-orient: vertical; /* WebKit系ブラウザ向け */
							-webkit-line-clamp: 1; /* WebKit系ブラウザ向け */
							text-overflow: ellipsis;
						}
						&.item-price{
							font-size:12px;
							font-weight:bold;
							margin:5px 0;
						}

						&.star{
							display:flex;
							font-size:10px;
							align-items:baseline;
							margin:0;
							i{
							position:relative;
							display:block;
							margin-right:5px;
							font-style:normal;
							font-size:15px;
							letter-spacing:-1px;
							color:transparent;
							background:linear-gradient(90deg,#ddd);
							background-clip:text;
							-webkit-background-clip:text;
							}
						}
        }

        .rank-number {
            font-size: 15px;
            margin-right: 2px;
        }

        /* --- ③ 特集誘導ナビ --- */

        .category-grid{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 5px;
            grid-row-gap: 5px;
        }

        .category-grid li{
            height: 100px;
            position: relative;
            padding: 0;
            border-radius: 5px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }

        .category-grid li:first-child:before{
            content: "NEW";
            position: absolute;
            top: 5px;
            left: -32px;
            transform: rotate(320deg);
            background: #34aec3;
            color: #fff;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
            width: 99px;
            height: 23px;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            z-index: 3;
        }

        .category-grid li a{
            display:block;
            color:#363540;
            position: relative;
            overflow:hidden;
            height:100%;

        }

        .category-grid li img{
            display:block;
            width:100%;
            
        }


        .category-grid li div{
            font-size:12px;
            padding:5px;
            position: absolute;
            color: #fff;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            width:100%;
        }

        .category-grid li .title{
            font-size:11px;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow:hidden;
            line-height: 1.1;
        }

        .category-grid li .time{
            font-size:10px;
            text-align:right;
            margin:3px 0;
        }

        /* --- ④ カテゴリー枠 --- */

        .category-block{
            display: flex;
	        flex-wrap: wrap;
        }

        .category-block > * {
            width: calc(100% / 3);
            box-sizing: border-box;
            a{
                display:block;
                oveflow:hidden;
            }
            img{
                display:block;
                height:auto;
                max-width:70px;
                margin:0 auto 8px;
                border-radius:50%;
                border: 1px dashed var(--border-color);
            }

            p{
                color:var(--text-main);
                font-size:11px;
                text-align:center;
                margin-bottom: 8px;
            }
        }
   


        /* メディアクエリ：PC対応 */
        @media (min-width: 768px) {
            .hero-banner { flex-direction: row; }
            .hero-left { width: 50%; padding: 35px; }
            .hero-right { width: 50%; height: auto; }
            .carousel-item { flex: 0 0 30%; }
            .ranking-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
            .category-grid { grid-template-columns: repeat(4, 1fr); }
            .pickup-products-vertical { grid-template-columns: 1fr 1fr; display: grid; }
            .header-logo img { height: 44px; } /* PCではロゴを少し大きめに表示 */
        }


.hero-slider{
    position:relative;
    overflow:hidden;
    padding:0 5%;
}

.hero li{
    padding:0 2.5px;
}

.hero-track{
    display:flex;
    transition:transform .45s ease;
    will-change:transform;
}

.hero-slide{
    flex:0 0 100%;
}

.hero-pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
}

.hero-pagination button{
    width:8px;
    height:8px;
    border:none;
    border-radius:999px;
    background:#ddd;
    cursor:pointer;
    transition:.3s;
}

.hero-pagination button.active{
    width:34px;
    background:#ee0e51;
}

.hero-prev,
.hero-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    cursor: pointer;
    z-index: 5;
    color: #999;
}

.hero-prev{left:5px;}
.hero-next{right:5px;}