@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


	
/* 無限ループアニメーション */
@keyframes infinite-loop {
    to {
        transform: translateX(-100%);
    }
}

/* 無限ループアニメーションのメインスタイル */
.infiniteLoop {
    --item-max-width: 400px;
    --item-mobile-width: 80vw;
    --duration: 20s;
    --gap: 0.5rem;
    --play-state: running;
    --direction: normal;
    --flex-direction: row;
}

.infiniteLoop.-reverse {
    --direction: reverse;
    --flex-direction: row-reverse
}

.infiniteLoop:hover {
    --play-state: paused
}

.infiniteLoop>* {
    display: flex
}

.infiniteLoop>*>*>* {
    overflow: hidden;
    transform: translateX(0);
    flex-wrap: nowrap !important;
    flex-direction: var(--flex-direction, row);
    margin: 0 !important;
    padding-left: var(--gap) !important;
    gap: var(--gap);
    width: calc(var(--infinite-loop_width, 100vw)*1)
}

.infiniteLoop>*>*>*>* {
    padding: 0 !important
}

.infiniteLoop>*>*>*>*>* {
    max-width: var(--item-max-width, 0px);
    margin-inline: auto
}

@media(min-width: 600px) {
    .infiniteLoop>*>*>* {
        animation: infinite-loop var(--duration) linear infinite both var(--play-state) var(--direction);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }
}

@media not all and (min-width: 600px) {
    .infiniteLoop>*>*:nth-child(n+2) {
        display: none
    }

    .infiniteLoop>*>*>* {
        -webkit-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        overflow-x: scroll;
        padding: 0 calc((100vw - var(--item-mobile-width, 80vw)) / 2) !important;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .infiniteLoop>*>*>*::-webkit-scrollbar {
        display: none
    }

    .infiniteLoop>*>*>*>* {
        flex-shrink: 0;
        width: var(--item-mobile-width, 80vw) !important;
        scroll-snap-align: center
    }
}