/* スマホ縦向き：商品と名札を一緒に横スライド */
.ae-showcase__slider-controls,
.ae-showcase__description {
    display: none;
}

@media (max-width: 800px) and (orientation: portrait) {
    .ae-showcase {
        --mobile-metal-post: linear-gradient(
            90deg,
            #789eb8 0%,
            #d0e3ef 18%,
            #ffffff 36%,
            #aac6d9 56%,
            #6e97b3 78%,
            #dceef8 100%
        );
        --mobile-metal-rail: linear-gradient(
            180deg,
            #f5fcff 0%,
            #b2cbdc 18%,
            #ffffff 36%,
            #83aac5 70%,
            #d9ecf7 100%
        );
        --mobile-metal-panel:
            repeating-linear-gradient(
                0deg,
                rgb(255 255 255 / 5%) 0 1px,
                rgb(88 119 143 / 2%) 1px 2px
            ),
            linear-gradient(
                115deg,
                #f5f9fc 0%,
                #d1dee8 24%,
                #f9fcff 47%,
                #dce7ef 72%,
                #bacddb 100%
            );
        --mobile-ink: #193f60;
        --mobile-muted: #49657b;
        --mobile-controls-height: 104px;
        --mobile-case-bottom: max(
            12px,
            env(safe-area-inset-bottom)
        );
    }

    .ae-showcase__view {
        display: block;
        height: 100%;
        padding: 0;
        overflow: hidden;
    }

    .ae-showcase__canvas {
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
    }

    /* ロゴと戻るボタン */
    .ae-showcase__header {
        position: absolute;
        top: max(20px, env(safe-area-inset-top));
        left: 20px;
        right: 20px;
        height: 8%;
        margin: 0;
        z-index: 4;
    }

    .ae-showcase__brand {
        max-width: calc(100% - 130px);
    }

    .ae-showcase__logo {
        width: clamp(110px, 32vw, 140px);
        max-width: 100%;
        height: auto;
    }

    .ae-showcase__brand p {
        display: none;
    }

    .ae-showcase .ae-showcase-return--street {
        top: max(20px, env(safe-area-inset-top));
        right: 16px;
    }

    .ae-showcase .ae-showcase-return--street
    .ae-showcase-return__link {
        min-height: 44px;
        padding: 8px 14px;
        border: 1px solid rgb(255 255 255 / 90%);
        border-radius: 999px;
        background: rgb(255 255 255 / 20%);
        color: var(--mobile-ink);
        font-size: 13px;
    }

    .ae-showcase__canvas::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 14% 10px var(--mobile-case-bottom);
        border: 1px solid #91afc4;
        border-radius: 5px;
        background:
            var(--mobile-metal-post)
                left top / 6px 100% no-repeat,
            var(--mobile-metal-post)
                right top / 6px 100% no-repeat,
            linear-gradient(
                180deg,
                rgb(32 65 91 / 18%),
                transparent 22% 78%,
                rgb(32 65 91 / 10%)
            ),
            linear-gradient(
                110deg,
                rgb(255 255 255 / 13%),
                transparent 28% 74%,
                rgb(220 242 255 / 8%)
            );
        box-shadow:
            inset 7px 0 0 rgb(255 255 255 / 65%),
            inset -7px 0 0 rgb(255 255 255 / 45%),
            inset 10px 0 10px rgb(33 67 92 / 10%),
            inset -10px 0 10px rgb(33 67 92 / 10%),
            0 0 0 1px #789eb8,
            0 5px 12px rgb(25 54 76 / 20%);
        pointer-events: none;
    }

    /* 上端の厚みのある金属レール */
    .ae-showcase__canvas::after {
        content: "";
        position: absolute;
        z-index: 3;
        top: 14%;
        bottom: auto;
        left: 7px;
        right: 7px;
        height: 14px;
        border: 1px solid #91afc4;
        border-radius: 4px 4px 2px 2px;
        background: var(--mobile-metal-rail);
        box-shadow:
            inset 0 1px 0 #ffffff,
            inset 0 -1px 0 #7297b1,
            0 3px 4px rgb(25 54 76 / 18%);
        pointer-events: none;
    }

    /* 商品・名札・説明文のスライド領域 */
    .ae-showcase__canvas > nav {
        position: absolute;
        inset:
            calc(14% + 16px)
            16px
            calc(
                var(--mobile-case-bottom)
                + var(--mobile-controls-height)
            );
        display: flex;
        align-items: stretch;
        gap: 16px;
        margin: 0;
        padding: 8px 12px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 12px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ae-showcase__canvas > nav::-webkit-scrollbar {
        display: none;
    }

    .ae-showcase__canvas > nav::before,
    .ae-showcase__canvas > nav::after {
        display: none;
    }

    .ae-showcase__canvas > nav >
    .ae-showcase__item:nth-child(n) {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        flex: 0 0 100%;
        width: auto;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        gap: 0;
        grid-column: auto;
        grid-row: auto;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        border: 0;
        border-image: none;
        background: none;
        box-shadow: none;
        text-decoration: none;
    }

    .ae-showcase__canvas > nav >
    .ae-showcase__item:nth-child(n)::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0 0 auto;
        height: max(32px, calc(100% - 108px));
        background:
            radial-gradient(
                ellipse 12px 4px at 25% 9px,
                #ffffff 40%,
                #d0e3ef 65%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 12px 4px at 75% 9px,
                #ffffff 40%,
                #d0e3ef 65%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 25% 85% at 25% 0%,
                rgb(255 255 255 / 25%) 0%,
                rgb(235 248 255 / 10%) 46%,
                transparent 78%
            ),
            radial-gradient(
                ellipse 25% 85% at 75% 0%,
                rgb(255 255 255 / 25%) 0%,
                rgb(235 248 255 / 10%) 46%,
                transparent 78%
            );
        box-shadow: none;
        filter: none;
        pointer-events: none;
    }

    /* 商品を横切る光の膜は使わない */
    .ae-showcase__canvas > nav >
    .ae-showcase__item:nth-child(n)::after {
        content: none;
    }

    .ae-showcase__canvas > nav .ae-showcase__art {
        position: relative;
        isolation: isolate;
        flex: 1 1 0;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 0 12px;
        padding: 30px 0 8px;
        overflow: visible;
    }

    .ae-showcase__canvas > nav
    .ae-showcase__item:nth-child(n) .ae-showcase__art img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center bottom;
        scale: 1;
        translate: none;
        transform: none;
    }

    /* 棚の上面：奥を狭くしたガラスと接地影 */
    .ae-showcase__canvas > nav
    .ae-showcase__item:nth-child(n) .ae-showcase__art::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: auto;
        bottom: 6px;
        left: 0;
        right: 0;
        height: 18px;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background:
            radial-gradient(
                ellipse 36% 32% at 50% 60%,
                rgb(23 51 72 / 27%) 0%,
                rgb(23 51 72 / 12%) 46%,
                transparent 78%
            ),
            linear-gradient(
                180deg,
                rgb(222 242 250 / 55%),
                rgb(248 253 255 / 85%) 65%,
                #f5fcff
            );
        clip-path: polygon(
            6% 0,
            94% 0,
            100% 100%,
            0 100%
        );
        box-shadow:
            inset 0 1px 0 rgb(255 255 255 / 80%),
            inset 0 -1px 0 #9fc3d4;
        transform: none;
        filter: none;
        pointer-events: none;
    }

    /* 棚の前面：薄い青緑の厚みと下側の影 */
    .ae-showcase__canvas > nav .ae-showcase__art::after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: 6px;
        border: 1px solid #91b9c8;
        border-radius: 0 0 1px 1px;
        background: linear-gradient(
            180deg,
            #ffffff 0%,
            #d8edf1 25%,
            #88b4c3 55%,
            #d5eaf1 100%
        );
        box-shadow:
            inset 0 1px 0 #ffffff,
            0 3px 3px rgb(24 54 73 / 23%),
            0 8px 10px rgb(24 54 73 / 10%);
        clip-path: none;
        transform: none;
        filter: none;
        pointer-events: none;
    }

    /* 名札と説明文を、一枚の銀色プレートにまとめる */
    .ae-showcase__canvas > nav
    .ae-showcase__item:nth-child(n) .ae-showcase__label {
        position: relative;
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 10px 16px 8px;
        border: 1px solid #9eb4c4;
        border-bottom: 0;
        border-radius: 7px 7px 0 0;
        background: var(--mobile-metal-panel);
        box-shadow: inset 0 1px 0 #ffffff;
        color: var(--mobile-ink);
        font-size: clamp(14px, 4.2vw, 18px);
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
    }

    .ae-showcase__label::after,
    .ae-showcase__number {
        display: none;
    }

    .ae-showcase__arrow {
        display: none;
    }

    .ae-showcase__description {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 6px 14px 10px;
        border: 1px solid #9eb4c4;
        border-top: 0;
        border-radius: 0 0 7px 7px;
        background: var(--mobile-metal-panel);
        box-shadow:
            inset 0 -1px 0 rgb(255 255 255 / 85%),
            0 3px 4px rgb(29 54 74 / 14%);
        color: var(--mobile-muted);
        font-size: clamp(11px, 3.1vw, 13px);
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
        text-wrap: pretty;
    }

    /* 銀色の土台を兼ねる、コンパクトな操作部 */
    .ae-showcase__slider-controls:not([hidden]) {
        position: absolute;
        z-index: 4;
        top: auto;
        bottom: var(--mobile-case-bottom);
        left: 10px;
        right: 10px;
        height: var(--mobile-controls-height);
        display: grid;
        grid-template-rows: 44px 6px auto;
        align-content: center;
        gap: 7px;
        padding: 8px 18px;
        border: 1px solid #91afc4;
        border-top: 5px solid transparent;
        border-radius: 0 0 5px 5px;
        background:
            var(--mobile-metal-panel) padding-box,
            var(--mobile-metal-rail) border-box;
        box-shadow:
            inset 0 1px 0 #ffffff,
            inset 0 -3px 0 #aac6d9,
            0 -1px 0 #6e97b3,
            0 4px 5px rgb(25 54 76 / 15%);
    }

    .ae-showcase__slider-bar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 12px;
    }

    .ae-showcase__prev,
    .ae-showcase__next {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        min-width: 0;
        margin: 0;
        padding: 0;
        appearance: none;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--mobile-ink);
        box-shadow: none;
        font-size: 0;
        cursor: pointer;
        touch-action: manipulation;
    }

    .ae-showcase__prev::before,
    .ae-showcase__next::before {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
    }

    .ae-showcase__prev::before {
        transform: translateX(3px) rotate(-135deg);
    }

    .ae-showcase__next::before {
        transform: translateX(-3px) rotate(45deg);
    }

    .ae-showcase__prev:disabled,
    .ae-showcase__next:disabled {
        color: #8da2b2;
        opacity: 0.45;
        cursor: default;
    }

    .ae-showcase__prev:focus-visible,
    .ae-showcase__next:focus-visible {
        outline: 2px solid #246bb0;
        outline-offset: 1px;
    }

    .ae-showcase__count {
        color: var(--mobile-ink);
        font: 700 18px/1.3 sans-serif;
        font-variant-numeric: tabular-nums;
        text-align: center;
    }

    .ae-showcase__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .ae-showcase__dots > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #9badbc;
    }

    .ae-showcase__dots > .is-current {
        background: #1675d1;
        box-shadow: 0 0 0 1px rgb(255 255 255 / 85%);
    }

    .ae-showcase__swipe-note {
        margin: 0;
        color: var(--mobile-muted);
        font: 500 clamp(10px, 2.8vw, 12px)/1.4 sans-serif;
        text-align: center;
    }

    .ae-showcase__status {
        z-index: 6;
        bottom: 4%;
        width: max-content;
        max-width: calc(100% - 32px);
        text-align: center;
    }

    /* 夜も銀の素材を保ち、背景と照明を変える */
    .ae-showcase[data-time="night"] {
        --showcase-night-background: #14283e;
        --showcase-night-room-opacity: 0.3;
        --mobile-metal-panel:
            repeating-linear-gradient(
                0deg,
                rgb(255 255 255 / 4%) 0 1px,
                rgb(56 85 113 / 2%) 1px 2px
            ),
            linear-gradient(
                115deg,
                #dce8f2 0%,
                #b0c5d8 24%,
                #e9f2fa 47%,
                #c3d6e6 72%,
                #94afc5 100%
            );
    }

    .ae-showcase[data-time="night"] .ae-showcase__view {
        background: var(--showcase-night-background);
    }

    .ae-showcase[data-time="night"] .ae-showcase__room {
        opacity: var(--showcase-night-room-opacity);
    }

    .ae-showcase[data-time="night"]
    .ae-showcase-return--street .ae-showcase-return__link {
        border-color: #aac6d9;
        background: rgb(20 40 62 / 30%);
        color: #f1f7ff;
    }

    .ae-showcase[data-time="night"] .ae-showcase__canvas::before {
        filter: none;
        box-shadow:
            inset 0 0 0 1px rgb(220 239 255 / 65%),
            inset 3px 0 6px rgb(4 19 33 / 25%),
            inset -3px 0 6px rgb(4 19 33 / 25%),
            0 0 0 1px #789eb8,
            0 5px 12px rgb(0 0 0 / 30%);
    }

    .ae-showcase[data-time="night"] .ae-showcase__art img {
        filter:
            var(--ae-product-tone, brightness(1))
            brightness(1.03)
            drop-shadow(0 3px 5px rgb(0 0 0 / 30%));
    }
}