.ae-showcase { border:0; padding:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none; background:#d9efff; color:#083474; overflow:hidden; }
.ae-showcase::backdrop { background:#b8e7fa; }
.ae-showcase, .ae-showcase * { box-sizing:border-box; }
.ae-showcase__view { width:100%; height:100%; display:grid; place-items:center; overflow:hidden; background:linear-gradient(#d8efff,#eaf7ff 75%,#a6d3f4); }
.ae-showcase__canvas { position:relative; width:min(100vw,177.6833dvh); aspect-ratio:1672/941; container-type:inline-size; flex:none; }
.ae-showcase__background { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.ae-showcase__header { position:absolute; top:1.8%; left:3.8%; right:3%; height:7%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ae-showcase__brand { display:flex; align-items:center; gap:1.7cqw; }
.ae-showcase__brand h2 { font:800 2.3cqw/1.1 sans-serif; letter-spacing:.05em; margin:0; color:#083474; }
.ae-showcase__brand p { font:600 1.25cqw/1.4 sans-serif; margin:0; border-left:1px solid #5983b9; padding-left:1.6cqw; }
.ae-showcase__back { border:1px solid #145dff; border-radius:99px; padding:.65cqw 1.3cqw; background:#fffffff2; color:#145dff; font:700 1.3cqw/1.5 sans-serif; cursor:pointer; }
.ae-showcase__item { position:absolute; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-decoration:none; color:#082c70; background:transparent; padding:0; border:0; margin:0; cursor:pointer; font-family:inherit; isolation:isolate; }
.ae-showcase__item--01 { left:5%; width:29%; }
.ae-showcase__item--02 { left:36%; width:28%; }
.ae-showcase__item--03 { left:66.5%; width:28%; }
.ae-showcase__item:nth-child(-n+3) { top:13.8%; height:43.4%; }
.ae-showcase__item:nth-child(n+4) { top:62.7%; height:25.5%; width:22%; }
.ae-showcase__item--04 { left:3.8%; }
.ae-showcase__item--05 { left:27.4%; }
.ae-showcase__item--06 { left:51.7%; }
.ae-showcase__item--07 { left:75.6%; }
.ae-showcase__art { display:flex; align-items:flex-end; justify-content:center; width:100%; min-height:0; flex:1; padding-bottom:.45cqw; }
.ae-showcase__art img { display:block; max-width:100%; width:auto; height:auto; max-height:100%; object-fit:contain; transition:transform .2s ease; }
.ae-showcase__item--03 .ae-showcase__art img { height:100%; }
.ae-showcase__label { display:flex; align-items:center; justify-content:center; gap:.7cqw; width:100%; min-height:4.1cqw; padding:.55cqw .65cqw; background:linear-gradient(155deg,#fff,#f2f8ff); border:1px solid #80b8ff; border-radius:.55cqw; box-shadow:0 .2cqw .2cqw #2468ae24; font-size:1.62cqw; font-weight:750; line-height:1.25; white-space:nowrap; }
.ae-showcase__item:nth-child(n+4) .ae-showcase__label { font-size:1.16cqw; min-height:3.7cqw; gap:.45cqw; padding:.5cqw .4cqw; }
.ae-showcase__number { font-variant-numeric:tabular-nums; font-size:1.15em; color:#0756ff; border:1px solid #c7dcfc; border-radius:.3cqw; padding:.25cqw .35cqw; box-shadow:0 .08cqw .12cqw #234d8e14; }
.ae-showcase__arrow { color:#0756ff; font-size:1.25em; }
.ae-showcase__item:hover .ae-showcase__art img, .ae-showcase__item:focus-visible .ae-showcase__art img { transform:translateY(-.5cqw); }
.ae-showcase__item:hover .ae-showcase__label { border-color:#145dff; }
.ae-showcase :focus-visible { outline:3px solid #004cff; outline-offset:4px; }
.ae-showcase__status { position:absolute; bottom:1%; left:50%; transform:translateX(-50%); margin:0; background:#fff; border-radius:8px; color:#123b70; box-shadow:0 2px 12px #2468ae24; padding:8px 14px; font-size:14px; }
.ae-showcase__status:empty { display:none; }
html.ae-showcase-open, html.ae-showcase-open body { overflow:hidden!important; }
html.ae-showcase-open .ae-site-menu { visibility:hidden; }

@media (prefers-reduced-motion:reduce) { .ae-showcase__art img { transition:none; } }
@media (max-width:767px) and (orientation:portrait) { .ae-showcase__canvas { width:100%; } .ae-showcase__brand p { display:none; } }

/* ========================================
   ショーケース：コードで描くガラスケース
   ======================================== */

/* 部屋を背景に置き、ショーケースを手前に重ねる */
.ae-showcase__view {
    position: relative;
    isolation: isolate;
    padding: 20px 24px;
    overflow: auto;
    background: #e9e4dc;
}

/* ピントを外すのは、この部屋だけ */
.ae-showcase__room {
    position: absolute;
    inset: -8px;
    z-index: 0;
    display: block;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    max-width: none;
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

/* 商品・札・ガラス枠は、ぼかさず手前へ */
.ae-showcase__view > .ae-showcase__canvas {
    z-index: 1;
}

/* 画面の縦横に合わせてケース全体を収める */
.ae-showcase__canvas {
    position: relative;
    width: min(
        1440px,
        calc(100vw - 48px),
        calc((100dvh - 40px) * 1.6)
    );
    aspect-ratio: 16 / 10;
    isolation: isolate;
    container-type: inline-size;
}

/* 背景画像は使わない */
.ae-showcase__background {
    display: none;
}

/* ケースの青い土台 */
.ae-showcase__canvas::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 2%;
    right: 2%;
    bottom: 5%;
    height: 6%;
    border: 1px solid #80b5de;
    border-radius: 0 0 2cqw 2cqw;
    background: linear-gradient(
        180deg,
        #f6fcff 0%,
        #c6e6fa 18%,
        #4aa3f0 22%,
        #1477d5 52%,
        #0754b5 78%,
        #d6eafa 82%,
        #f3faff 100%
    );
    box-shadow:
        0 1.2cqw 2.5cqw rgb(29 78 123 / 16%),
        inset 0 1px 0 #ffffff;
    pointer-events: none;
}

/* ヘッダー */
.ae-showcase__header {
    top: 3%;
    left: 5%;
    right: 5%;
    height: 8%;
}

.ae-showcase__brand {
    gap: 1.8cqw;
}

.ae-showcase__brand h2 {
    font-size: 2.1cqw;
    letter-spacing: 0.08em;
}

.ae-showcase__brand p {
    padding-left: 0;
    border-left: 0;
    color: #24476a;
    font-size: 1.05cqw;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

.ae-showcase__back {
    display: inline-flex;
    align-items: center;
    gap: 1cqw;
    padding: 0.7cqw 1.2cqw;
    border: 0;
    border-radius: 99px;
    background: rgb(255 255 255 / 55%);
    color: #214f7f;
    box-shadow: none;
    font: 600 1.05cqw/1.4 sans-serif;
    transition: background 180ms ease;
}

.ae-showcase__back:hover {
    background: rgb(255 255 255 / 85%);
}

/* 選択状態は囲み線ではなく文字の下線で示す */
.ae-showcase__back:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}

/* 3商品＋4商品の棚 */
.ae-showcase__canvas > nav {
    position: absolute;
    inset: 20% 5% 10%;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1.35fr 1fr;
    gap: 3cqw 1.8cqw;
    padding: 0 1.6cqw 1.4cqw;
    isolation: isolate;
}

/* ガラスの背面・左右の枠・反射 */
.ae-showcase__canvas > nav::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -9% -2% 0;
    border: 0.4cqw solid transparent;
    border-radius: 1.2cqw 1.2cqw 0.8cqw 0.8cqw;
    background:
        linear-gradient(
            115deg,
            rgb(255 255 255 / 72%) 0%,
            rgb(255 255 255 / 12%) 22%,
            rgb(173 214 244 / 20%) 52%,
            rgb(255 255 255 / 65%) 74%,
            rgb(219 239 254 / 30%) 100%
        ) padding-box,
        linear-gradient(
            125deg,
            #f9fdff 0%,
            #8ebbdc 16%,
            #eaf7ff 32%,
            #75a6cf 55%,
            #ffffff 78%,
            #8cb6d8 100%
        ) border-box;
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 90%),
        inset 1cqw 0 1.8cqw rgb(120 179 223 / 12%),
        inset -1cqw 0 1.8cqw rgb(120 179 223 / 12%),
        0 0.3cqw 0.8cqw rgb(60 111 157 / 12%);
    pointer-events: none;
}

/* 上段と下段を分ける、厚みのある棚板 */
.ae-showcase__canvas > nav::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 56%;
    left: -1.5%;
    right: -1.5%;
    height: 2.6cqw;
    border: 1px solid rgb(133 184 221 / 45%);
    border-radius: 0.4cqw;
    background: linear-gradient(
        180deg,
        #f8fdff 0%,
        #e4f4ff 22%,
        #b7d9f2 26%,
        #d2e9f9 84%,
        #f3fbff 100%
    );
    box-shadow: 0 0.7cqw 1cqw rgb(65 117 162 / 12%);
    pointer-events: none;
}

/* 既存の絶対配置を解除 */
.ae-showcase__canvas > nav > .ae-showcase__item {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0.8cqw;
    color: #173f6b;
}

/* 上段：3列 */
.ae-showcase__canvas > nav > .ae-showcase__item:nth-child(-n+3) {
    grid-column: span 4;
    grid-row: 1;
}

/* 下段：4列 */
.ae-showcase__canvas > nav > .ae-showcase__item:nth-child(n+4) {
    grid-column: span 3;
    grid-row: 2;
}

/* 小物画像のエリア */
.ae-showcase__art {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 0 0.7cqw 1.4cqw;
    isolation: isolate;
}

/* 各商品の白い台座 */
.ae-showcase__art::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 3%;
    right: 3%;
    bottom: 0;
    height: 26%;
    min-height: 2cqw;
    border: 1px solid rgb(174 207 232 / 75%);
    border-radius: 1cqw;
    background: linear-gradient(
        170deg,
        #ffffff 0%,
        #eff9ff 58%,
        #d6eafa 78%,
        #b4d5ed 100%
    );
    box-shadow:
        inset 0 2px 0 #ffffff,
        0 0.4cqw 0.5cqw rgb(56 105 145 / 15%);
    transform: perspective(600px) rotateX(28deg);
    transform-origin: center bottom;
}

.ae-showcase__art img,
.ae-showcase__item--03 .ae-showcase__art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center bottom;

    transform-origin: center bottom;
    scale: 1.15;

    filter:
        var(--ae-product-tone, brightness(1))
        drop-shadow(0 0.3cqw 0.25cqw rgb(33 70 105 / 12%));
    transition: transform 220ms ease;
}

/* ②④⑤⑥⑦だけ、黄味を抑える */
.ae-showcase__item:is(
    .ae-showcase__item--02,
    .ae-showcase__item--04,
    .ae-showcase__item--05,
    .ae-showcase__item--06,
    .ae-showcase__item--07
) .ae-showcase__art img {
    --ae-product-tone: url("#ae-product-cool");
}

/* PC・横向き画面：商品の大きさと接地位置 */
@media (min-width: 801px), (orientation: landscape) {
    .ae-showcase__item:nth-child(-n+3) .ae-showcase__art img {
        scale: var(--product-scale, 1.25);
        translate:
            var(--product-x, 0px)
            var(--product-y, 0.8cqw);
        filter:
            var(--ae-product-tone, brightness(1))
            drop-shadow(0 1px 1px rgb(23 48 65 / 48%))
            drop-shadow(0 4px 3px rgb(27 58 81 / 28%))
            drop-shadow(0 8px 6px rgb(27 58 81 / 15%));
    }

    .ae-showcase__item:nth-child(n+4) .ae-showcase__art img {
        scale: var(--product-scale, 1.7);
        translate:
            var(--product-x, 0px)
            var(--product-y, 1.2cqw);
        filter:
            var(--ae-product-tone, brightness(1))
            drop-shadow(0 1px 0.8px rgb(23 48 65 / 45%))
            drop-shadow(0 3px 2px rgb(27 58 81 / 26%))
            drop-shadow(0 5px 4px rgb(27 58 81 / 13%));
    }
}
/* 全7商品：選んだときに少し浮く */
.ae-showcase__item:nth-child(n):is(:hover, :focus-visible)
.ae-showcase__art img {
    transform: translateY(-0.28cqw);
}

/* 動きを減らす設定では浮かせない */
@media (prefers-reduced-motion: reduce) {
    .ae-showcase__item:nth-child(n):is(:hover, :focus-visible)
    .ae-showcase__art img {
        transform: none;
    }
}
/* 値札：白いカードと細い青の二重枠 */
.ae-showcase__item:nth-child(n) .ae-showcase__label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5em;
    width: 100%;
    min-height: clamp(48px, 3.8cqw, 64px);
    padding: 0.65cqw 0.8cqw;

    border: 1px solid #8ca6ba;
    border-radius: 3px;
    background: linear-gradient(155deg, #ffffff, #f0f5f9);
    box-shadow:
        inset 0 0 0 3px #ffffff,
        inset 0 0 0 4px #c3d3df,
        0 2px 2px rgb(29 54 74 / 15%);

    backdrop-filter: none;
    color: #193f60;
    font-family:
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        Meiryo,
        sans-serif;
    font-size: clamp(14px, 1.15cqw, 21px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;

    transition:
        border-color 180ms ease,
        background 180ms ease;
}

/* 番号：カード内の小さな通し番号 */
.ae-showcase__number {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #64849b;
    font-family: inherit;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

/* 値札に丸い矢印は付けない */
.ae-showcase__arrow {
    display: none;
}

/* 商品画像の浮き上がり */
.ae-showcase__item:is(:hover, :focus-visible)
.ae-showcase__art img {
    transform: translateY(-0.4cqw);
}

/* 展示を選ぶと値札の枠も少し濃くする */
.ae-showcase__item:nth-child(n):is(:hover, :focus-visible)
.ae-showcase__label {
    border-color: #477e9f;
    background: linear-gradient(155deg, #ffffff, #eaf5fc);
}

/* PC・横向き画面：文字量に合わせた立て札と展示配置 */
@media (min-width: 801px), (orientation: landscape) {
    .ae-showcase__canvas > nav > .ae-showcase__item {
        --pedestal-depth: clamp(22px, 1.95cqw, 36px);
        --stand-top-height: clamp(84px, 6cqw, 116px);
        --stand-forward: clamp(42px, 4cqw, 76px);
        --ticket-space: calc(
            clamp(48px, 3.8cqw, 64px) + 1.1cqw
        );

        padding-bottom: var(--ticket-space);
        gap: 0;
    }

    /* 商品と台座を一緒に動かす */
    .ae-showcase__art {
        translate: 0 var(--display-y, 0px);
        pointer-events: none;
    }

    /* 上段の台座を少し下げ、上下段の間隔を整える */
    .ae-showcase__item:nth-child(-n+3) {
        --display-y: 0.5cqw;
    }

    .ae-showcase__item:nth-child(n) .ae-showcase__label {
        position: absolute;
        z-index: 3;
        left: var(--ticket-left, auto);
        right: var(--ticket-right, 3%);
bottom: calc(
    var(--ticket-space)
    + var(--pedestal-depth)
    + 0.35cqw
    - var(--display-y, 0px)
    - var(--stand-forward, 0px)
        );

        /* 文字量に応じて幅を決める */
        width: max-content;
        max-width: 94%;
        min-height: clamp(38px, 2.6cqw, 48px);
        padding: 0.5cqw 0.7cqw;
        gap: 0.55em;

        font-size: clamp(12px, 0.85cqw, 16px);
        line-height: 1.45;
        white-space: nowrap;

        transform: perspective(600px) rotateX(-8deg);
        transform-origin: center bottom;
        pointer-events: none;
    }

    /* 小さな銀色のカードホルダー */
    .ae-showcase__label::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -5px;
        width: clamp(30px, 2.5cqw, 46px);
        height: 8px;
        border: 1px solid #91a8b8;
        border-radius: 2px;
        background: linear-gradient(
            #f7fcff 0%,
            #c4d4df 35%,
            #93abba 75%,
            #c2d3df 100%
        );
        box-shadow: 0 3px 3px rgb(27 58 81 / 23%);
        transform: translateX(-50%);
    }

    /* ① 開発相談：台座の奥側の中心へ */
    .ae-showcase__item--01 {
        --product-scale: 1.25;
        --product-x: 3.5cqw;
        --product-y: 1.8cqw;
    }

    /* ② 会社紹介：中央に配置 */
    .ae-showcase__item--02 {
        --product-scale: 1.25;
        --product-x: 0cqw;
        --product-y: 1.8cqw;
    }

    /* ③ 採用：台座に合わせて左へ */
    .ae-showcase__item--03 {
        --product-scale: 1.25;
        --product-x: -3.5cqw;
        --product-y: 1.8cqw;
        --ticket-left: 3%;
        --ticket-right: auto;
    }

    /* ④ AI駆動型開発：台座に合わせて右へ */
    .ae-showcase__item--04 {
        --product-scale: 1.7;
        --product-x: 3cqw;
        --product-y: 2.5cqw;
        --ticket-left: 3%;
        --ticket-right: auto;
    }

    /* ⑤ 数字：少し右へ、上面に接地 */
    .ae-showcase__item--05 {
        --product-scale: 1.7;
        --product-x: 1cqw;
        --product-y: 2.3cqw;
        --ticket-left: 3%;
        --ticket-right: auto;
    }

    /* ⑥ 強み：少し左へ、上面に接地 */
    .ae-showcase__item--06 {
        --product-scale: 1.65;
        --product-x: -1cqw;
        --product-y: 2.9cqw;
    }

    /* ⑦ 問い合わせ：台座に合わせて左へ */
    .ae-showcase__item--07 {
        --product-scale: 1.65;
        --product-x: -3.2cqw;
        --product-y: 1.85cqw;
        --ticket-left: 3%;
        --ticket-right: auto;
    }
    /* 展示全体を選ぶと台座が薄く光る */
    .ae-showcase__item:is(:hover, :focus-visible)
    .ae-showcase__art::before {
        border-color: #67b6e5;
        box-shadow:
            inset 0 2px 1px rgb(255 255 255 / 95%),
            inset 0 -1px 1px rgb(145 182 208 / 35%),
            0 0 10px rgb(72 171 230 / 25%);
    }
}

/* 狭い横向き画面では、長い名札の折り返しを許可 */
@media (max-width: 1100px) and (orientation: landscape) {
    .ae-showcase__item:nth-child(n) .ae-showcase__label {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* キーボード操作時の目印 */
.ae-showcase__item:focus-visible {
    outline: 2px solid #24669f;
    outline-offset: 5px;
    border-radius: 10px;
}

/* 動きを減らす設定に対応 */
@media (prefers-reduced-motion: reduce) {
    .ae-showcase__item:nth-child(n) .ae-showcase__label {
        transition: none;
    }
}
/* 縦長の画面では、読める大きさで2列にする */
@media (max-width: 800px) and (orientation: portrait) {
    .ae-showcase__view {
        display: block;
        padding: 20px 14px 32px;
    }

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

    .ae-showcase__header {
        position: relative;
        inset: auto;
        height: auto;
        margin: 0 4px 46px;
    }

    .ae-showcase__brand h2 {
        font-size: 22px;
    }

    .ae-showcase__brand p {
        display: none;
    }

    .ae-showcase__back {
        padding: 9px 13px;
        font-size: 12px;
    }

    .ae-showcase__canvas > nav {
        position: relative;
        inset: auto;
        margin: 0 8px;
        padding: 18px 10px 26px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 26px 12px;
    }

    .ae-showcase__canvas > nav::before {
        inset: -16px -6px 0;
        border-width: 3px;
        border-radius: 12px;
    }

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

    .ae-showcase__canvas > nav > .ae-showcase__item:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
        gap: 10px;
    }

    .ae-showcase__art {
        flex: none;
        height: 150px;
        padding: 0 4px 12px;
    }

    .ae-showcase__art::before {
        border-radius: 10px;
    }

    .ae-showcase__item:nth-child(n) .ae-showcase__label {
        min-height: 58px;
        padding: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        border-radius: 8px;
        font-size: 13px;
        white-space: normal;
    }

    .ae-showcase__number {
        display: none;
    }

    .ae-showcase__canvas::after {
        left: 0;
        right: 0;
        bottom: -12px;
        height: 20px;
        border-radius: 0 0 12px 12px;
    }
}

/* 動きを抑える設定に対応 */
@media (prefers-reduced-motion: reduce) {
    .ae-showcase__art img,
    .ae-showcase__label,
    .ae-showcase__arrow,
    .ae-showcase__back {
        transition: none;
    }

    .ae-showcase__item:is(:hover, :focus-visible) .ae-showcase__art img,
    .ae-showcase__item:is(:hover, :focus-visible) .ae-showcase__arrow {
        transform: none;
    }
}
/* ========================================
   ショーケース調整：大きく、奥行きのあるケースへ
   ======================================== */

/* 左上の正式ロゴ */
.ae-showcase__brand h2 {
    display: flex;
    align-items: center;
    margin: 0;
    line-height: 1;
}

.ae-showcase__logo {
    display: block;
    width: clamp(140px, 14cqw, 240px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* PC・横向き画面 */
@media (min-width: 801px), (orientation: landscape) {

    /* PC・横向き画面の余白 */
    .ae-showcase__view {
        display: grid;
        place-items: center;
        padding: 10px 14px 16px;
        overflow: hidden;
    }

/* ケース全体を、余白を除いた表示領域に収める */
.ae-showcase__canvas {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

    /* 背景の上にロゴ・案内文・戻るボタンを配置 */
    .ae-showcase__header {
        top: 0;
        left: 0;
        right: 0;
        height: 10%;
        padding: 0 2.8%;
        gap: 16px;
        border: 0;
        background: transparent;
    }

    .ae-showcase__brand {
        min-width: 0;
        gap: 1.6cqw;
    }

    .ae-showcase__brand p {
        font-size: clamp(12px, 1.02cqw, 18px);
    }

    .ae-showcase__back {
        flex-shrink: 0;
        font-size: clamp(12px, 1cqw, 17px);
    }

    /* 奥の壁と、左右へ斜めに伸びるガラス面 */
    .ae-showcase__canvas::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: 15% 0.8% 7%;
        border-top: 0.45cqw solid #49aff2;
        border-left: 0.3cqw solid #8cb9d9;
        border-right: 0.3cqw solid #8cb9d9;
        border-radius: 0.5cqw 0.5cqw 0 0;
        background:
            linear-gradient(
                108deg,
                transparent 43%,
                rgb(255 255 255 / 85%) 47%,
                #8db9d8 49%,
                #e7f7ff 52%,
                transparent 56%
            ) left top / 5% 100% no-repeat,
            linear-gradient(
                -108deg,
                transparent 43%,
                rgb(255 255 255 / 85%) 47%,
                #8db9d8 49%,
                #e7f7ff 52%,
                transparent 56%
            ) right top / 5% 100% no-repeat,
            linear-gradient(
                180deg,
                #87bff0 0%,
                #b7dcf8 28%,
                #effaff 29%,
                #d7edfc 60%,
                #f5fcff 100%
            );
        box-shadow:
            inset 0 0.25cqw 0 #eaf9ff,
            inset 0 -0.2cqw 0 #8cbfe3,
            0 -0.15cqw 0 #e7f7ff;
        pointer-events: none;
    }

    /* 商品エリアを左右へ拡張 */
    .ae-showcase__canvas > nav {
        inset: 19% 2.4% 8%;
        padding: 0 1.6cqw 1.1cqw;
        grid-template-rows: 1.35fr 1fr;
        gap: 2.8cqw 1.8cqw;
    }

    /* ガラスは透明に近くし、縁と反射を中心に描く */
    .ae-showcase__canvas > nav::before {
        inset: -5% -0.8% 0;
        border-width: 0.32cqw;
        border-radius: 0.4cqw;
        background:
            linear-gradient(
                112deg,
                rgb(255 255 255 / 30%) 0%,
                transparent 19%,
                transparent 48%,
                rgb(255 255 255 / 22%) 49%,
                transparent 62%,
                rgb(255 255 255 / 12%) 100%
            ) padding-box,
            linear-gradient(
                180deg,
                #f4fcff 0%,
                #9dbed5 2%,
                #eaf8ff 4%,
                #a5c8df 48%,
                #f8fdff 78%,
                #99bdd6 100%
            ) border-box;
        box-shadow:
            inset 0 0 0 1px rgb(255 255 255 / 85%),
            inset 0.5cqw 0 0.7cqw rgb(109 167 211 / 10%),
            inset -0.5cqw 0 0.7cqw rgb(109 167 211 / 10%);
    }

    /* 上段の棚：天面と前面の境目をはっきりさせる */
    .ae-showcase__canvas > nav::after {
        top: 56%;
        left: -1.1%;
        right: -1.1%;
        height: 3cqw;
        border: 1px solid #b8d9ef;
        border-radius: 0.25cqw;
        background: linear-gradient(
            180deg,
            #ffffff 0%,
            #edf9ff 15%,
            #daeffc 24%,
            #a6cee9 27%,
            #c9e4f6 70%,
            #e9f7ff 96%,
            #ffffff 100%
        );
        box-shadow:
            0 0.15cqw 0 #9fc7e2,
            0 0.8cqw 1cqw rgb(54 103 145 / 16%);
    }

    /* 台座：薄い板から、厚みのある展示台へ */
    .ae-showcase__art::before {
        left: 1%;
        right: 1%;
        height: 29%;
        border: 1px solid #c2dfef;
        border-radius: 0.8cqw;
        background: linear-gradient(
            165deg,
            #ffffff 0%,
            #f3fbff 50%,
            #e0f1fc 100%
        );
        box-shadow:
            inset 0 0.15cqw 0 #ffffff,
            0 0.55cqw 0 #c1dff2,
            0 0.65cqw 0 #a4c8e2,
            0 1cqw 0.8cqw rgb(56 105 145 / 18%);
        transform: perspective(800px) rotateX(36deg);
    }

    /* 台座の厚み分、画像と札の間を確保 */
    .ae-showcase__canvas > nav > .ae-showcase__item {
        gap: 0;
    }

    .ae-showcase__art {
        padding-bottom: 1cqw;
    }

    /* 一番下の青いケース土台 */
    .ae-showcase__canvas::after {
        left: 0.8%;
        right: 0.8%;
        bottom: 2%;
        height: 6%;
        border-radius: 0.2cqw 0.2cqw 1cqw 1cqw;
        background: linear-gradient(
            180deg,
            #f6fcff 0%,
            #d4efff 11%,
            #87cdf9 16%,
            #218ce6 23%,
            #0870d1 62%,
            #0754ac 78%,
            #b7d7ed 82%,
            #f3fbff 100%
        );
        box-shadow:
            inset 0 1px 0 #ffffff,
            0 0.8cqw 1.2cqw rgb(31 78 119 / 17%);
    }
}

/* スマホのロゴサイズ */
@media (max-width: 800px) and (orientation: portrait) {
    .ae-showcase__logo {
        width: 145px;
    }
}
/* ========================================
   斜め上から見下ろすショーケース
   ======================================== */

/* ロゴをひと回り小さく */
.ae-showcase__logo {
    width: clamp(130px, 10.5cqw, 185px);
    height: auto;
}

@media (min-width: 801px), (orientation: landscape) {

    /*
     * ケースの構造をSVGで描く
     * 奥の背面 → 棚の天面 → 手前の縁
     * 商品や文字には傾きをつけない
     */
    .ae-showcase__canvas::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: 12% 0.8% 7%;

        border: 0;
        border-radius: 0;
        box-shadow: none;

        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 700' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='wall' cx='.5' cy='.75' r='.85'%3E%3Cstop offset='0' stop-color='%23d5edfc'/%3E%3Cstop offset='.5' stop-color='%23acd4f3'/%3E%3Cstop offset='1' stop-color='%237eafe0'/%3E%3C/radialGradient%3E%3Cpattern id='floor' patternUnits='userSpaceOnUse' width='32' height='18'%3E%3Crect width='32' height='18' fill='%23e3f0f7'/%3E%3Crect width='32' height='3' fill='%23cbdfea' fill-opacity='.65'/%3E%3C/pattern%3E%3ClinearGradient id='edge' x2='0' y2='1'%3E%3Cstop stop-color='%23ffffff'/%3E%3Cstop offset='.12' stop-color='%23dceffc'/%3E%3Cstop offset='.75' stop-color='%23a7cde8'/%3E%3Cstop offset='1' stop-color='%23d7edfc'/%3E%3C/linearGradient%3E%3ClinearGradient id='glass'%3E%3Cstop stop-color='%23ffffff' stop-opacity='.48'/%3E%3Cstop offset='.45' stop-color='%238ac4ed' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.55'/%3E%3C/linearGradient%3E%3ClinearGradient id='metal'%3E%3Cstop stop-color='%237fa9c8'/%3E%3Cstop offset='.25' stop-color='%23ffffff'/%3E%3Cstop offset='.55' stop-color='%23a4c9e2'/%3E%3Cstop offset='.8' stop-color='%23f4fcff'/%3E%3Cstop offset='1' stop-color='%2381accb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 30H950V190H50Z' fill='url(%23wall)' fill-opacity='.28'/%3E%3Cpath d='M50 190H950L1000 400H0Z' fill='url(%23floor)'/%3E%3Cpath d='M50 190L0 400M950 190L1000 400' fill='none' stroke='%239bbfd2' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M0 400H1000V430H0Z' fill='url(%23edge)'/%3E%3Cpath d='M0 430H50L0 646Z' fill='%23c5dce9'/%3E%3Cpath d='M950 430H1000V646Z' fill='%23c5dce9'/%3E%3Cpath d='M50 430H950L1000 646H0Z' fill='url(%23floor)'/%3E%3Cpath d='M50 430L0 646M950 430L1000 646' fill='none' stroke='%239bbfd2' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M50 30L0 245V670L50 190Z' fill='url(%23glass)'/%3E%3Cpath d='M950 30L1000 245V670L950 190Z' fill='url(%23glass)'/%3E%3Cpath d='M50 30H950' fill='none' stroke='%232c9eea' stroke-width='10'/%3E%3Cpath d='M50 36H950' fill='none' stroke='%23effaff' stroke-width='4'/%3E%3Cpath d='M50 43V190M950 43V190' fill='none' stroke='url(%23metal)' stroke-width='8'/%3E%3Cpath d='M50 30L0 245V670M950 30L1000 245V670' fill='none' stroke='%23399fe3' stroke-width='10' stroke-linejoin='round'/%3E%3Cpath d='M50 36L5 247V646M950 36L995 247V646' fill='none' stroke='%23e9f9ff' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M50 190H950M0 400H1000M0 646H1000' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M0 430H1000' fill='none' stroke='%239fc7e2' stroke-width='2'/%3E%3C/svg%3E");

        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;

        filter: drop-shadow(
            0 0.5cqw 0.5cqw rgb(47 99 142 / 10%)
        );

        pointer-events: none;
    }

    /* 以前の四角い背面と棚板を非表示に */
    .ae-showcase__canvas > nav::before,
    .ae-showcase__canvas > nav::after {
        display: none;
    }

    /* 奥側の商品には、左右に少し余白を設ける */
    .ae-showcase__canvas > nav {
        inset: 19% 2.4% 8%;
        padding: 0 1.6cqw 1.1cqw;
        grid-template-rows: 1.35fr 1fr;
        gap: 2.8cqw 1.8cqw;
    }

    .ae-showcase__canvas > nav >
    .ae-showcase__item:nth-child(-n+3) {
        margin-inline: 0.8cqw;
    }

    /*
     * 台座の天面を広げる。
     * 奥側が狭く、手前側が広い台形として見せる。
     */
/* 商品の高さは維持する */
.ae-showcase__art {
    padding-bottom: calc(
        clamp(12px, 1.3cqw, 24px) + 1cqw
    );
}

/* 上面：個別の遠近変形を使わず、形状を直接描く */
.ae-showcase__art::before {
    content: "";
    position: absolute;
    z-index: -1;

    /*
     * 奥側が左右へずれる余地を確保。
     * 手前の辺は、前面の左右位置と一致させる。
     */
    left: -18.6%;
    right: -18.6%;
    bottom: calc(
        var(--pedestal-depth) - 1px
        - var(--stand-forward, 0px)
    );
    height: var(--stand-top-height);
    min-height: 0;

    border: 0;
    border-radius: 0;

    clip-path: polygon(
        var(--stand-back-left, 18.57%) 0,
        var(--stand-back-right, 81.43%) 0,
        85.715% 100%,
        14.285% 100%
    );

    background:
        radial-gradient(
            ellipse at 35% 12%,
            rgb(255 255 255 / 95%),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f1f9fe 65%,
            #dcecf7 100%
        );

    transform: none;
    box-shadow:
        inset 0 -2px 1px rgb(145 182 208 / 30%);

    pointer-events: none;
}

/* 上段：左右の台座ほど、奥側を画面中央へ寄せる */
.ae-showcase__item--01 {
    --stand-back-left: 28.5%;
    --stand-back-right: 91.36%;
}

.ae-showcase__item--02 {
    --stand-back-left: 18.57%;
    --stand-back-right: 81.43%;
}

.ae-showcase__item--03 {
    --stand-back-left: 8.64%;
    --stand-back-right: 71.5%;
}

/* 下段：上段より奥側の縮みを控えめにする */
.ae-showcase__item:nth-child(n+4) {
    --stand-top-height: clamp(84px, 6cqw, 116px);
}

.ae-showcase__item--04 {
    --stand-back-left: 28.43%;
    --stand-back-right: 93.43%;
}

.ae-showcase__item--05 {
    --stand-back-left: 21.1%;
    --stand-back-right: 86.1%;
}

.ae-showcase__item--06 {
    --stand-back-left: 13.9%;
    --stand-back-right: 78.9%;
}

.ae-showcase__item--07 {
    --stand-back-left: 6.57%;
    --stand-back-right: 71.57%;
}
/* 台座の手前の側面 */
.ae-showcase__art::after {
    content: "";
    position: absolute;
    z-index: -2;

    left: 1%;
    right: 1%;
    bottom: calc(0px - var(--stand-forward, 0px));
    height: var(--pedestal-depth);

    border: 1px solid #afcfe5;
    border-top: 0;
    border-radius: 0 0 0.65cqw 0.65cqw;

    background:
        linear-gradient(
            90deg,
            rgb(255 255 255 / 35%),
            transparent 35%,
            rgb(91 139 175 / 10%)
        ),
        linear-gradient(
            180deg,
            #e1f0fa 0%,
            #cfe4f3 38%,
            #b9d5e9 85%,
            #a5c6df 100%
        );

    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 70%),

        /* 床との接点にできる、短く濃い影 */
        0 2px 2px rgb(37 77 110 / 22%),

        /* 台座から少し離れると薄くなる影 */
        0.2cqw 0.45cqw 0.55cqw rgb(48 94 131 / 16%),

        /* 外側へ広がる、柔らかい影 */
        0.35cqw 0.8cqw 1cqw rgb(62 110 146 / 9%);

    pointer-events: none;
}
    /* 手前の土台を、棚の幅にそろえる */
    .ae-showcase__canvas::after {
        left: 0.8%;
        right: 0.8%;
        bottom: 2%;
        height: 6%;
    }
}

/* スマホでは小さすぎないサイズに */
@media (max-width: 800px) and (orientation: portrait) {
    .ae-showcase__logo {
        width: 125px;
    }
}
/* 外枠の金属・反射を重ねるレイヤー */
.ae-showcase__frame {
    display: none;
}

@media (min-width: 801px), (orientation: landscape) {
    .ae-showcase__frame {
        display: block;
        position: absolute;

        /* 既存のケース背景と同じ位置 */
        top: 12%;
        left: 0.8%;
        width: 98.4%;
        height: 81%;

        z-index: 2;
        overflow: visible;
        pointer-events: none;

        filter: drop-shadow(
            0 2px 2px rgb(48 91 121 / 15%)
        );
    }
}
/* ========================================
   外枠の拡大・ガラス反射・二面の青い土台
   ======================================== */

@media (min-width: 801px), (orientation: landscape) {

/* ケースの縁と影まで画面内に収める */
.ae-showcase__view {
    padding: 20px 40px 28px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

    /* ケース背景を広げ、商品の上に余白を確保 */
    .ae-showcase__canvas::before {
        inset: 6% 0.5% 1%;
    }

    /* 外枠も背景とそろえ、左右の縁を画面内に収める */
    .ae-showcase__frame {
        top: 6%;
        left: 0.5%;
        width: 99%;
        height: 93%;

        overflow: visible;
        pointer-events: none;

        filter:
            drop-shadow(0 1px 1px rgb(25 49 65 / 25%))
            drop-shadow(0 3px 3px rgb(35 63 80 / 12%));
    }

    /* 以前の土台は、新しい二面構造に置き換える */
    .ae-showcase__canvas::after {
        display: none;
    }

    /* 下段ボタンと、土台上面が重ならない余白 */
    .ae-showcase__canvas > nav {
        bottom: 12%;
    }
}

/* ========================================
   夜の店内：深い背景・柔らかな照明・接地影
======================================== */

/* 同じ寸法・位置のまま、夜だけ白ロゴに切り替える */
.ae-showcase .ae-showcase__logo--night {
    display: none;
}

.ae-showcase[data-time="night"] .ae-showcase__logo--day {
    display: none;
}

.ae-showcase[data-time="night"] .ae-showcase__logo--night {
    display: block;
}

/* 商品を巻き込まず、元の壁・床の照明だけ落とす */
.ae-showcase[data-time="night"] .ae-showcase__room {
    filter: blur(3px) brightness(0.65);
}

.ae-showcase[data-time="night"] .ae-showcase__canvas::before,
.ae-showcase[data-time="night"] .ae-showcase__canvas > nav::before,
.ae-showcase[data-time="night"] .ae-showcase__canvas > nav::after {
    filter: brightness(0.72);
}

/* 上から差す、輪郭の柔らかい暖色光 */
.ae-showcase[data-time="night"] .ae-showcase__item::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15%;
    bottom: 12%;
    left: -5%;
    right: -5%;

    background: radial-gradient(
        ellipse 34% 74% at 50% 78%,
        rgb(255 209 149 / 28%) 0%,
        rgb(255 187 102 / 12%) 45%,
        transparent 76%
    );

    filter: blur(14px);
    pointer-events: none;
}

/* 商品と台座の手前に、暖色の照り返しを重ねる */
.ae-showcase[data-time="night"] .ae-showcase__item::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 20%;
    bottom: 12%;
    left: 4%;
    right: 4%;

    background:
        radial-gradient(
            ellipse 55% 25% at 50% 80%,
            rgb(255 194 112 / 55%) 0%,
            rgb(255 174 75 / 26%) 40%,
            transparent 78%
        ),
        radial-gradient(
            ellipse 40% 55% at 50% 48%,
            rgb(255 218 168 / 20%) 0%,
            transparent 75%
        );

    mix-blend-mode: screen;
    filter: blur(8px);
    pointer-events: none;
}

/* 台座は元の柄・グラデーションを保って暖色を加える */
.ae-showcase[data-time="night"] .ae-showcase__art::before {
    filter: brightness(1.08) sepia(0.16);
}

/* 商品は背景より明るくし、光の暖かさと接地影を加える */
.ae-showcase[data-time="night"] .ae-showcase__art img {
    filter:
        var(--ae-product-tone, brightness(1))
        brightness(1.03)
        sepia(0.14)
        saturate(1.06)
        drop-shadow(0 1px 1px rgb(35 22 12 / 60%))
        drop-shadow(0 0.3cqw 0.25cqw rgb(35 22 12 / 35%))
        drop-shadow(0 0.65cqw 0.65cqw rgb(35 22 12 / 16%));
}

/* 白ロゴの明るさを保つ */
.ae-showcase[data-time="night"] .ae-showcase__logo--night {
    filter: brightness(1.28);
}

/* 説明文は読みやすくする */
.ae-showcase[data-time="night"] .ae-showcase__brand p {
    color: #fff5e8;
    border-color: rgb(255 245 232 / 35%);
}