/* SP: 1.25枚 / タブレット: 2.25枚 / PC: 3.25枚。左右に隣の画像を均等に見せる。 */
.product-group-area .outer-carousel {
    --outer-width: 80%;
    --outer-visible: 1;
    --outer-gap: 12px;
    margin: 0 0 30px;
    min-width: 0;
}
.product-group-area .outer-carousel__viewport {
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}
.product-group-area .outer-carousel__slider {
    position: relative;
    display: flex;
    gap: var(--outer-gap);
    margin: 0;
    padding: 0;
    will-change: transform;
}
.product-group-area .outer-carousel__slider > div {
    box-sizing: border-box;
    flex: 0 0 calc(var(--outer-width) - var(--outer-gap));
    min-width: 0;
}
.product-group-area .outer-carousel__slider img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    user-select: none;
}
/* 初期化前も横スクロールを残し、バーだけ隠す。ドット用の高さも先に確保する。 */
.product-group-area .outer-carousel:not([data-ready]) {
    padding-bottom: 44px; /* ドット32px + 上余白12px */
}
.product-group-area .outer-carousel:not([data-ready]) .outer-carousel__slider {
    overflow-x: auto;
    scrollbar-width: none;
}
.product-group-area .outer-carousel:not([data-ready]) .outer-carousel__slider::-webkit-scrollbar {
    display: none;
}
.product-group-area .outer-carousel__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 12px;
}
.product-group-area .outer-carousel__dot {
    appearance: none;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}
.product-group-area .outer-carousel__dot::before {
    content: '';
    position: static;
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border: 1px solid #222;
    border-radius: 50%;
    background: #fff;
}
.product-group-area .outer-carousel__dot[aria-current="true"]::before {
    background: #222;
}
.product-group-area .outer-carousel button:focus-visible,
.product-group-area .outer-carousel__viewport:focus-visible {
    outline: 2px solid #003da6;
    outline-offset: -2px;
}
@media (min-width: 600px) {
    .product-group-area .outer-carousel { --outer-width: 44.444444%; --outer-visible: 2; }
}
@media (min-width: 1024px) {
    .product-group-area .outer-carousel {
        --outer-width: 30.769231%;
        --outer-visible: 3;
        --outer-gap: 20px;
        margin-bottom: 40px;
    }
}