@charset "UTF-8";

/* 1. コンテナ：はみ出た分を隠す */
.stamp-marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    padding: 20px 0;
}

/* 2. トラック：アニメーションの実行主体 */
.stamp-marquee-track {
    display: flex;
    /* 12枚分の合計幅を移動させる（180px * 12 = 2160px） */
    animation: marquee-scroll 30s linear infinite;
}

/* ホバーで一時停止（UX向上） */
.stamp-marquee-track:hover {
    animation-play-state: paused;
}

/* 3. 各スタンプカードの設定 */
.stamp-card {
    flex-shrink: 0;
    width: 160px; /* カード自体の幅 */
    height: 160px;
    margin: 0 10px; /* 左右の余白（計20px） */
    background: white;
    /* 透過チェッカー柄 */
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 10px 10px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.stamp-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 4. アニメーション：1セット分(180px * 12)を左に送る */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    /* (width 160px + margin 20px) * 12枚 = 2160px */
    to { transform: translateX(-2160px); }
}

/* スマホ対応：少し小さくする */
@media (max-width: 640px) {
    .stamp-card {
        width: 120px;
        height: 120px;
    }
    @keyframes marquee-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-1680px); } /* (120+20) * 12 */
    }
}

.uk-navbar-nav>li>a.uk-button-secondary,
.uk-navbar-nav>li>a.uk-button-primary {
    color: #fff;
}
.uk-navbar-nav>li>a.uk-button-secondary:hover,
.uk-navbar-nav>li>a.uk-button-primary:hover {
    color: #eee;
}