/* 街のお店に表示する入口の看板 */
.ae-town__showcase-entry {
    position: absolute;
    z-index: 7;
    bottom: 17%;
    left: 50%;
    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 23px;
    border: 1px solid #9bcaff;
    border-radius: 12px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #edf6ff 100%
    );
    color: #1248a0;

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 4px 0 #80b8ed,
        0 8px 16px rgb(8 35 78 / 20%);

    font-family: inherit;
    font-size: clamp(14px, 1.15vw, 18px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    white-space: nowrap;

    cursor: pointer;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

/* マウスを重ねたとき */
.ae-town__showcase-entry:hover {
    transform: translate(-50%, -3px);
    color: #0050ff;

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 4px 0 #80b8ed,
        0 12px 20px rgb(8 35 78 / 24%);
}

/* 押しているとき */
.ae-town__showcase-entry:active {
    transform: translate(-50%, 2px);

    box-shadow:
        inset 0 1px 0 #ffffff,
        0 1px 0 #80b8ed,
        0 4px 8px rgb(8 35 78 / 18%);
}

/* キーボード操作時 */
.ae-town__showcase-entry:focus-visible {
    outline: 3px solid #0050ff;
    outline-offset: 6px;
}

/* 夜の街でも輪郭が見えるように */
.ae-town[data-time="night"] .ae-town__showcase-entry {
    border-color: #c5e3ff;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 4px 0 #669bd1,
        0 8px 20px rgb(0 12 40 / 35%);
}

@media (prefers-reduced-motion: reduce) {
    .ae-town__showcase-entry {
        transition: none;
    }
}
/* 扉の足元から、歩道側へ広がる光 */
.ae-town__entrance-light {
    position: absolute;
    z-index: 2;

    left: 50.2%;
    top: 92.7%;
    width: 34%;
    height: 16%;
    transform: translateX(-50%);

    background: radial-gradient(
        ellipse at 50% 0%,
        rgb(255 229 166 / 42%) 0%,
        rgb(255 219 145 / 20%) 35%,
        transparent 74%
    );

    opacity: 0;
    pointer-events: none;
}

/* 夜：このお店の外壁は、周囲より少しだけ明るく */
.ae-town[data-time="night"]
.ae-town__shop--super > img:first-child {
    filter: brightness(0.68) saturate(0.85);
}

/* 夜：既存の窓の形を使い、暖かい照明を強める */
.ae-town[data-time="night"]
.ae-town__shop--super::after {
    background: linear-gradient(
        180deg,
        #fffbed 0%,
        #fff0c2 55%,
        #ffdc96 100%
    );

    filter: drop-shadow(0 0 5px rgb(255 219 145 / 35%));
}

/* 夜：入口から歩道へ光をこぼす */
.ae-town[data-time="night"] .ae-town__entrance-light {
    opacity: 1;
}
/* 建物を選ぶ透明なボタン */
.ae-town__showcase-building {
    position: absolute;
    z-index: 6;

    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

/* 建物の足元を固定して、画像と窓の光を一緒に拡大 */
.ae-town__shop--super > img:first-child,
.ae-town__shop--super::after {
    transform-origin: 50% 93%;
    transition: transform 240ms ease;
}

/* 接近開始後は、建物の拡大率をカメラ処理に統一 */
html.ae-entry-active .ae-town__shop--super > img:first-child,
html.ae-entry-active .ae-town__shop--super::after,
html.ae-entry-active .ae-town__shop--super .ae-town__shop-logo-layer {
    transform: none;
    transition: none;
}

/* 建物画像だけが拡大するので、街路樹や街灯は動かない */
.ae-town__shop--super:has(
    .ae-town__showcase-building:is(:hover, :focus-visible)
) > img:first-child,
.ae-town__shop--super:has(
    .ae-town__showcase-building:is(:hover, :focus-visible)
)::after {
    transform: scale(1.035);
}

.ae-town__showcase-building:focus-visible {
    outline: 2px solid #bdeaff;
    outline-offset: 4px;
}

/* RPGの行動案内ボックス */
.ae-town__action-box {
    position: absolute;
    z-index: 12;

    width: max-content;
    max-width: calc(100% - 32px);

    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);

    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;
}

.ae-town__action-title {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

.ae-town__action-marker {
    color: #93ddff;
    font-size: 0.65em;
}

.ae-town__action-help {
    padding-left: 27px;
    color: #cee0f1;
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.5;
}
/* 表示の準備ができた入店案内だけを表示 */
.ae-town__street .ae-town__action-box.is-ready {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
/* マウスのない端末では、案内を常に表示 */
@media (hover: none) {
    .ae-town__action-help {
        font-size: 0;
    }

    .ae-town__action-help::after {
        content: "建物をタップして、ショーケースへ";
        font-size: 12px;
    }
}

/* 動きを減らす設定に対応 */
@media (prefers-reduced-motion: reduce) {
    .ae-town__shop--super > img:first-child,
    .ae-town__shop--super::after,
    .ae-town__action-box {
        transition: none;
    }
}
/* 建物と一緒に拡大するロゴ配置用の面 */
.ae-town__shop-logo-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;

    transform-origin: 50% 93%;
    transition: transform 240ms ease;
}

/* 看板の中央に、余白を取って配置 */
.ae-town__shop--super
.ae-town__shop-logo-layer > img.ae-town__shop-logo {
    position: absolute;
    display: block;

    left: 50.2%;
    top: 16.9%;
    width: 23%;
    height: auto;
    max-width: none;

    margin: 0;
    padding: 0;
    border: 0;
    transform: translate(-50%, -50%);
    user-select: none;

    /* 元の水色を活かした、塗装サインの色味 */
    filter:
        saturate(0.95)
        brightness(0.96)
        drop-shadow(0 0.6px 0.5px rgb(22 67 91 / 20%));
}

/* 夜はロゴの文字だけを水色に発光させる */
.ae-town[data-time="night"]
.ae-town__shop--super
.ae-town__shop-logo-layer > img.ae-town__shop-logo {
    filter:
        saturate(0.65)
        brightness(1.15)
        drop-shadow(0 0 1px rgb(185 225 240 / 50%))
        drop-shadow(0 0 4px rgb(130 195 220 / 30%));
}

/* 拡大するのは配置用の面だけ */
.ae-town__shop--super:has(
    .ae-town__showcase-building:is(:hover, :focus-visible)
) .ae-town__shop-logo-layer {
    transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
    .ae-town__shop-logo-layer {
        transition: none;
    }
}
/* 行動案内：昼は白と水色でコンパクトに */
.ae-town__action-box {

    border: 1px solid #8cc9ed;
    border-radius: 5px;
    background: linear-gradient(
        145deg,
        rgb(255 255 255 / 97%),
        rgb(231 247 255 / 97%)
    );
    color: #164c78;

    box-shadow:
        inset 0 0 0 2px rgb(255 255 255 / 80%),
        0 3px 10px rgb(35 101 139 / 13%);
}

.ae-town__action-title {
    gap: 8px;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.35;
    letter-spacing: 0.05em;
}

.ae-town__action-marker {
    color: #168dc5;
}

.ae-town__action-help {
    padding-left: 19px;
    color: #52768c;
    font-size: clamp(10px, 0.75vw, 12px);
    line-height: 1.4;
}

/* 夜：同じサイズのまま、落ち着いた紺色に */
.ae-town[data-time="night"] .ae-town__action-box {
    border-color: #a4cde8;
    background: linear-gradient(
        145deg,
        rgb(22 47 78 / 97%),
        rgb(12 31 55 / 97%)
    );
    color: #f1f8ff;

    box-shadow:
        inset 0 0 0 2px rgb(120 169 204 / 15%),
        0 3px 12px rgb(0 12 30 / 25%);
}

.ae-town[data-time="night"] .ae-town__action-marker {
    color: #9bddff;
}

.ae-town[data-time="night"] .ae-town__action-help {
    color: #bed3e3;
}

/* タップ操作用の説明文も小さく揃える */
@media (hover: none) {
    .ae-town__action-help {
        font-size: 0;
    }

    .ae-town__action-help::after {
        font-size: 11px;
    }
}


/* 街から店内へ入る演出 */
.ae-entry {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 100;
    overflow: hidden;
}

.ae-showcase.is-entering {
    background: transparent;
}

.ae-showcase.is-entering::backdrop {
    background: transparent;
}

.ae-showcase.is-entering > .ae-entry {
    display: block;
}

.ae-showcase.is-entering > .ae-showcase__view {
    visibility: hidden;
}

.ae-showcase.is-entering.is-revealing > .ae-showcase__view {
    visibility: visible;
}

/* PC・横向きでは、操作案内を入店完了後に表示 */
@media (min-width: 801px), (orientation: landscape) {
    .ae-showcase.is-entering .ae-showcase__header,
    .ae-showcase.is-entering .ae-showcase__slider-controls,
    .ae-showcase.is-entering > .ae-showcase-return--street {
        visibility: hidden;
    }
}

/* 入店開始後は店前用の戻るボタンを隠す */
.ae-entry.is-opening .ae-entry__cancel {
    visibility: hidden;
}
/* 接近中は背後の街を維持する */
.ae-showcase.is-entering.is-revealing {
    background: transparent;
}

/* 街から引き継ぐ空。扉の部分だけ店内を見せる */
.ae-entry__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.ae-entry__scene {
    z-index: 1;
}

/* 演出中は、背後の部屋画像を見せる */
.ae-showcase.is-entering .ae-showcase__view {
    background: #e9e4dc;
}

.ae-showcase.is-entering .ae-showcase__room {
    opacity: 1;
}
/* 夜は入口のぼかし表示から、完成時と同じ室内を見せる */
@media (max-width: 650px) and (orientation: portrait) {
    .ae-showcase[data-time="night"] .ae-showcase__view {
        background: var(--showcase-night-background, #97938d);
    }
}

.ae-showcase[data-time="night"].is-entering .ae-showcase__room {
    opacity: var(--showcase-night-room-opacity, 1);
}
/* 入口の中心を基準に、画面全体を覆う面 */
.ae-entry__scene {
    position: absolute;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transform-origin: 50.03% 59.88%;
    container-type: inline-size;
}

.ae-entry__scene > img {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    pointer-events: none;
    user-select: none;
}

/* 夜の地面。建物・壁には光や投影を出さない */
.ae-entry__ground {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: inset(81.8% 0 0);
    pointer-events: none;
}

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

/* 左窓・扉・右窓から手前へ広がる光 */
.ae-entry__ground::before {
    content: "";
    position: absolute;
    inset: 81.8% 0 0;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgb(255 229 165 / 48%),
            transparent 72%
        ) left top / 38% 100% no-repeat,
        radial-gradient(
            ellipse at 50% 0%,
            rgb(255 235 180 / 55%),
            transparent 75%
        ) center top / 38% 100% no-repeat,
        radial-gradient(
            ellipse at 50% 0%,
            rgb(255 229 165 / 48%),
            transparent 72%
        ) right top / 38% 100% no-repeat;
}

/* 透明余白を除いた接地点を基準に、影を手前へ伸ばす */
.ae-entry__shadow {
    position: absolute;
    display: block;
    background: #14202b;
    opacity: 0.32;
    -webkit-mask: var(--entry-shadow-image) center / 100% 100% no-repeat;
    mask: var(--entry-shadow-image) center / 100% 100% no-repeat;
    filter: blur(1.5px);
}

.ae-entry__shadow--bike {
    --entry-shadow-image: url("../../images/town/street-bike.png");
    left: 20%;
    bottom: 7.5%;
    width: 34%;
    aspect-ratio: 1536 / 1024;
    transform-origin: 50% 83.01%;
    transform: translateX(-50%) skewX(-10deg) scaleY(-0.3);
}

.ae-entry__shadow--tree {
    --entry-shadow-image: url("../../images/town/street-tree.png");
    left: 78%;
    bottom: 9%;
    width: 26%;
    aspect-ratio: 971 / 1619;
    transform-origin: 50% 96.05%;
    transform: translateX(-50%) skewX(8deg) scaleY(-0.24);
}

/* ガチャ：台座から手前へ広がる、短く柔らかな影 */
.ae-entry__shadow--gacha {
    right: var(--entry-gacha-right, 2%);
    top: calc(91% - 0.8cqw);
    bottom: auto;
    width: 16.5%;
    height: 4cqw;
    aspect-ratio: auto;
    transform: none;
    -webkit-mask: none;
    mask: none;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgb(15 24 34 / 65%) 0%,
        rgb(15 24 34 / 40%) 30%,
        transparent 75%
    );
    opacity: 0.65;
    filter: blur(2px);
}

/* 窓の明暗変化に地面の光も合わせる */
.ae-entry[data-time="night"].is-hinting .ae-entry__ground::before {
    animation: ae-entry-light-night 1.2s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
    .ae-entry[data-time="night"].is-hinting .ae-entry__ground::before {
        animation: none;
    }
}

/* 入口アップに重ねる小物 */
.ae-entry__scene > img.ae-entry__prop {
    z-index: 3;
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(2px 4px 3px rgb(20 35 55 / 14%));
}

/* 街と同じく、自転車は入口の左 */
/* 自転車：少し壁際へ寄せ、壁への柔らかな影を付ける */
.ae-entry__scene > img.ae-entry__prop--bike {
    left: 20%;
    bottom: 7.5%;
    width: 34%;
    filter:
        saturate(0.88)
        contrast(0.94)
        drop-shadow(0.35cqw -0.12cqw 0.22cqw rgb(35 48 64 / 18%));
}

/* 反射は入口全体と同じ座標で配置し、ガラス内だけに表示 */
.ae-entry__reflection {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

/* 青い窓枠・壁・地面には映り込みを出さない */
.ae-entry__reflection--left {
    clip-path: inset(38.3% 70.6% 27% 5.6%);
}

.ae-entry__reflection--right {
    clip-path: inset(38.3% 5.6% 27% 70.6%);
}

.ae-entry__reflection > img {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    margin: 0;
    opacity: 0.16;
    filter:
        saturate(0.55)
        contrast(0.8)
        sepia(0.15)
        hue-rotate(155deg);
    pointer-events: none;
}

/* 実物より少し上へずらし、背後のガラスに姿を見せる */
.ae-entry__reflection-bike {
    left: 4%;
    bottom: 13%;
    width: 34%;
}

.ae-entry__reflection-tree {
    left: 64%;
    bottom: 14%;
    width: 26%;
}

/* 映り込み：色を抜き、薄いグレーの陰影にする */
.ae-entry__reflection > img {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    margin: 0;
    opacity: 0.18;
    filter: grayscale(1) brightness(0.65) contrast(0.8);
    pointer-events: none;
}

/* 自転車：実物の左端3%に対し、反射は少し右へ */
.ae-entry__reflection-bike {
    left: 3.6%;
    bottom: 8%;
    width: 34%;
}

/* 木：実物の左端65%に対し、反射は少し左へ */
.ae-entry__reflection-tree {
    left: 64.3%;
    bottom: 9.5%;
    width: 26%;
}

/* ガチャ：実物より少し左へ */
.ae-entry__reflection-gacha {
    right: calc(var(--entry-gacha-right, 2%) + 0.7%);
    bottom: 9.5%;
    width: 16.5%;
}

/* 街路樹：鮮やかさと明暗差を抑える */
.ae-entry__scene > img.ae-entry__prop--tree {
    left: 78%;
    bottom: 9%;
    width: 26%;
    filter: saturate(0.76) contrast(0.88) brightness(1.04);
}

/* 木の接地影：幹の根元から右へ柔らかく伸ばす */
.ae-entry__scene::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 80%;
    bottom: 10.5%;
    width: 12%;
    height: 2.8%;
    transform: translateX(-50%);
    background:
        radial-gradient(
            ellipse at 33% 50%,
            rgb(49 45 35 / 28%) 0%,
            rgb(49 45 35 / 12%) 18%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 55% 50%,
            rgb(49 45 35 / 15%) 0%,
            transparent 70%
        );
    pointer-events: none;
}

/* ガチャは右端。木より奥に重ねる */
.ae-entry__gacha {
    position: absolute;
    z-index: 2;
    right: var(--entry-gacha-right, 2%);
    bottom: 9%;
    width: 16.5%;
    aspect-ratio: 2 / 3;
    pointer-events: none;
}

.ae-entry__gacha > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    user-select: none;
}

.ae-entry__gacha > .ae-entry__gacha-handle {
    position: absolute;
    left: 35%;
    top: 54.5%;
    width: 30%;
    height: auto;
}

/* 固定背景：扉の位置だけ、コードでくり抜く */
.ae-entry__facade {
    --entry-wall-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1672 941'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H1672V941H0Z M643 357H1030V770H643Z'/%3E%3C/svg%3E");

    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;

    -webkit-mask-image: var(--entry-wall-mask);
    mask-image: var(--entry-wall-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* 夜：背景と画像だけを暗くし、照明は暗くしない */
.ae-entry[data-time="night"] .ae-entry__facade,
.ae-entry[data-time="night"] .ae-entry__door > img,
.ae-entry[data-time="night"] .ae-entry__gacha,
.ae-entry[data-time="night"] .ae-entry__reflection {
    filter: brightness(0.60) saturate(0.78);
}

/* 木は、調整済みの色味を保って夜の明るさにする */
.ae-entry[data-time="night"] .ae-entry__scene
    > img.ae-entry__prop--tree {
    filter:
        saturate(0.5928)
        contrast(0.88)
        brightness(0.624);
}

/* 自転車も、色味と壁への影を維持する */
.ae-entry[data-time="night"] .ae-entry__scene
    > img.ae-entry__prop--bike {
    filter:
        saturate(0.6864)
        contrast(0.94)
        drop-shadow(0.35cqw -0.12cqw 0.22cqw rgb(35 48 64 / 18%))
        brightness(0.60);
}

.ae-entry__message {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: max-content;
	max-width: min(480px, calc(100% - 32px));
	max-height: calc(100% - 120px);
	margin: 0;
	padding: 12px 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid #a9d4ee;
	border-radius: 8px;
	background: #f5fbff;
	color: #164c78;
	font: 600 14px/1.7 sans-serif;
	overflow-wrap: anywhere;
	text-align: center;

	@media (max-width: 650px) {
		padding: 12px 14px;
		font-size: 13px;
	}

	@media (max-width: 1100px) and (max-height: 500px) {
		top: 50%;
		max-height: calc(100% - 96px);
	}
}

.ae-entry__message[hidden] {
    display: none;
}

.ae-entry__cancel {
    position: absolute;
    z-index: 3;
    top: var(--ae-return-top);
    right: var(--ae-return-right);
    cursor: pointer;
}

.ae-entry[data-time="night"] .ae-entry__message {
    background: #152c48;
    color: #f1f8ff;
}

html.ae-entry-active .ae-town__action-box {
    visibility: hidden;
    opacity: 0;
}
/* 入口画像上の開口部。外へ動いた扉はここで隠す */
.ae-entry__doorway {
    position: absolute;
    z-index: 2;
    left: 38.4569%;
    top: 37.9384%;
    width: 23.1459%;
    height: 43.8895%;
    overflow: hidden;
    pointer-events: none;
}

.ae-entry__door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.ae-entry__door--left {
    left: 0;
}

.ae-entry__door--right {
    left: 50%;
}

/* 元画像を拡大配置して、扉部分だけを見せる */
.ae-entry__door > img {
    position: absolute;
    display: block;
    top: -86.4407%;
    width: 864.0827%;
    height: 227.845%;
    max-width: none;
    margin: 0;
    pointer-events: none;
    user-select: none;
}

.ae-entry__door--left > img {
    left: -332.2997%;
}

.ae-entry__door--right > img {
    left: -432.2997%;
}

/* ガラスに貼る、縦長のCLICKステッカー */
.ae-entry__action {
    position: absolute;
    z-index: 5;
    left: 8%;
    top: 40%;
    width: 44px;
    pointer-events: auto;
}

.ae-entry__action[hidden] {
    display: none;
}

.ae-entry__action button {
    appearance: none;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 110px;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #123e68;
    font-family: inherit;
    cursor: pointer;
}

.ae-entry__click {
    display: block;
    padding: 6px 4px;
    border: 2px solid currentColor;
    border-radius: 4px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font: 800 clamp(14px, 1.1cqw, 18px)/1 sans-serif;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 1px rgb(255 255 255 / 55%);
}

@media (hover: hover) {
    .ae-entry__action button:hover {
        color: #0756a3;
    }
}

.ae-entry__action button:focus-visible {
    outline: 2px solid #123e68;
    outline-offset: 2px;
    border-radius: 4px;
}

.ae-entry__action button:disabled {
    opacity: 1;
    cursor: default;
}
/* 左右の窓：昼は照明を表示しない */
.ae-entry__window-light {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ae-entry__window-light > span {
    position: absolute;
    top: 38.3%;
    bottom: 27%;
    width: 23.8%;
}

.ae-entry__window-light > span:first-child {
    left: 5.6%;
}

.ae-entry__window-light > span:last-child {
    right: 5.6%;
}

/* 中央の扉：昼の誘導用の光 */
.ae-entry__door::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 5.6% 9% 6.8%;
    background: radial-gradient(
        ellipse at 50% 12%,
        rgb(255 249 215 / 95%),
        rgb(255 219 135 / 60%) 40%,
        rgb(255 223 156 / 15%) 75%,
        transparent
    );
    opacity: 0;
    pointer-events: none;
}

/* 夜：左右の窓を表示 */
.ae-entry[data-time="night"] .ae-entry__window-light {
    display: block;
}

/* 夜：3面とも、街側と同じ暖色で常時点灯 */
.ae-entry[data-time="night"] .ae-entry__window-light > span,
.ae-entry[data-time="night"] .ae-entry__door::after {
    background:
        linear-gradient(
            125deg,
            transparent 0% 38%,
            #ffffff55 40% 43%,
            transparent 46%
        ),
        linear-gradient(
            180deg,
            #fff8df 0%,
            #ffe9b5 55%,
            #f5c678 100%
        );
    opacity: 1;
}

/* 昼：扉の光で3回だけ誘導 */
.ae-entry.is-hinting .ae-entry__door::after {
    animation: ae-entry-light 1.2s ease-in-out 3;
}

/* 夜：3面が少し暗くなってから明るくなり、元に戻る */
.ae-entry[data-time="night"].is-hinting
    .ae-entry__door::after,
.ae-entry[data-time="night"].is-hinting
    .ae-entry__window-light > span {
    animation: ae-entry-light-night 1.2s ease-in-out 3;
}

@keyframes ae-entry-light {
    0%, 100% { opacity: 0; }
    45%, 55% { opacity: 0.85; }
}

@keyframes ae-entry-light-night {
    0%, 100% { filter: brightness(1); }
    20% { filter: brightness(0.55); }
    55%, 70% { filter: brightness(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .ae-entry.is-hinting .ae-entry__door::after,
    .ae-entry[data-time="night"].is-hinting
        .ae-entry__window-light > span {
        animation: none;
    }
}
/* 看板・2階・中央の入口を、入店の反応範囲にする */
.ae-town__showcase-building {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.ae-town__showcase-building::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: auto;
    clip-path: polygon(
        28% 12%, 72% 12%,
        72% 28%, 92% 28%,
        92% 55%, 72% 55%,
        72% 94%, 28% 94%,
        28% 55%, 8% 55%,
        8% 28%, 28% 28%
    );
}

/* 案内を、選んだ入口の足元付近へ配置 */
.ae-town__action-box {
    top: var(--entry-guide-y, 0px);
    bottom: auto;
    left: var(--entry-guide-x, 50%);
    gap: 3px;
    padding: 9px 14px;
}

.ae-town__action-box:not(.is-ready) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* タッチ端末では、入口のそばに簡潔な案内を残す */
@media (hover: none) {
    .ae-town__action-box,
    .ae-town__action-box:not(.is-ready) {
        top: auto;
        bottom: calc(var(--ground-height) * 0.52);
        left: 50%;
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}
/* 屋根の上に、枠のない入店案内 */
.ae-town__showcase-building {
    overflow: visible;
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
}

.ae-town__entry-sign {
    position: absolute;

    /* 建物中央に合わせ、屋根に近づける */
    top: 30px;
    left: 50%;
    pointer-events: auto;

    display: block;
    width: max-content;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    box-shadow: none;

    color: #245571;
    font-size: clamp(14px, 1.1vw, 18px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -100%);
    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        color 180ms ease;

	@media (max-width: 1100px) {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 20px;
		min-height: 44px;
		max-width: min(320px, calc(100vw - 48px));
		padding: 8px 12px;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0.03em;
		white-space: normal;
		text-align: center;
		touch-action: manipulation;
	}
}

.ae-town__street.is-entry-sign-ready .ae-town__entry-sign,
.ae-town__showcase-building:focus-visible .ae-town__entry-sign {
    opacity: 1;
    visibility: visible;
}

.ae-town__entry-sign-touch {
    display: none;
}

@media (hover: none) {
    .ae-town__entry-sign-mouse {
        display: none;
    }

    .ae-town__entry-sign-touch {
        display: inline;
    }
}

@media (hover: hover) {
    .ae-town__showcase-building:hover .ae-town__entry-sign {
        color: #087dac;
    }
}

.ae-town[data-time="night"] .ae-town__entry-sign {
    color: #e2f4ff;
}

@media (hover: hover) {
    .ae-town[data-time="night"]
    .ae-town__showcase-building:hover .ae-town__entry-sign {
        color: #a4e3ff;
    }
}

/* 入店中は、表示条件にかかわらず隠す */
html.ae-showcase-open .ae-town__street .ae-town__entry-sign {
    opacity: 0;
    visibility: hidden;
}

/* 入店画面を開いている間は表示しない */
html.ae-showcase-open .ae-town__entry-sign {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ae-town__entry-sign,
    .ae-town__entry-sign-help {
        transition: none;
    }
}
.ae-entry__pavement,
.ae-entry__scene > img.ae-entry__shop-logo {
    display: none;
}

/* スマホ縦：街と共通の建物・地面・小物比率 */
@media (max-width: 650px) and (orientation: portrait) {
    .ae-entry {
        background: transparent;
    }

    .ae-entry__scene {
        overflow: visible;
        --entry-pavement-top:
            calc(100% - var(--entry-shop-height) * 63 / 1087);
        --entry-pavement-height:
            calc(
                var(--entry-ground-height) * 0.9
                + var(--entry-shop-height) * 63 / 1087
            );
    }

    /* 街と同じ看板位置・ロゴの色味 */
    .ae-entry__scene > img.ae-entry__shop-logo {
        display: block;
        z-index: 3;
        left: 50.2%;
        top: 16.9%;
        width: 23%;
        height: auto;
        transform: translate(-50%, -50%);
        filter:
            saturate(0.95)
            brightness(0.96)
            drop-shadow(0 0.6px 0.5px rgb(22 67 91 / 20%));
    }

    .ae-entry[data-time="night"] .ae-entry__scene
        > img.ae-entry__shop-logo {
        filter:
            saturate(0.65)
            brightness(1.15)
            drop-shadow(0 0 1px rgb(185 225 240 / 50%))
            drop-shadow(0 0 4px rgb(130 195 220 / 30%));
    }
    /* 扉の大きさに合わせてステッカーを小さく */
    .ae-entry__action {
        left: 8%;
        top: 50%;
        width: 26px;
        height: 70%;
        max-height: 84px;
        transform: translateY(-50%);
    }

    .ae-entry__action button {
        height: 100%;
        min-height: 0;
        padding: 2px;
    }

    .ae-entry__click {
        padding: 3px 2px;
        border-width: 1px;
        border-radius: 3px;
        font-size: clamp(9px, 1.35cqw, 11px);
        letter-spacing: 0.04em;
    }
    /* 扉の光を、全景画像のガラス部分へ合わせる */
    .ae-entry__door--left::after {
        inset: 12.13% 8.81% 9.84% 15.81%;
    }

    .ae-entry__door--right::after {
        inset: 12.13% 24.32% 9.84% 1.52%;
    }

    /* 前回の独自タイルを解除 */
    .ae-entry__scene::before {
        content: none;
    }

    /* 地面の模様・歩道・縁石・道路はtown.cssを使用 */
    .ae-entry__pavement {
        display: block;
        inset: auto;
        top: var(--entry-pavement-top);
        left: 0;
        width: 100%;
        height: var(--entry-pavement-height);
    }

    .ae-entry[data-time="night"] .ae-entry__pavement {
        filter: brightness(0.45) saturate(0.7);
    }

    /* 街と同じ全景画像。扉部分だけ開口 */
    .ae-entry__facade {
        content: url("../../images/town/shop-super.png");
        clip-path: none;
        --entry-wall-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1447 1087'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H1447V1087H0Z M568 733H899V1038H568Z'/%3E%3C/svg%3E");
    }

    .ae-entry__doorway {
        left: 39.2536%;
        top: 67.4333%;
        width: 22.8749%;
        height: 28.0589%;
    }

    .ae-entry__door > img {
        content: url("../../images/town/shop-super.png");
        top: -240.3279%;
        width: 874.3202%;
        height: 356.3934%;
    }

    .ae-entry__door--left > img {
        left: -343.2024%;
    }

    .ae-entry__door--right > img {
        left: -443.2024%;
    }

    /* 街と同じ窓マスク。動く扉の光は扉自身に持たせる */
    .ae-entry__window-light {
        background: linear-gradient(#fffbed, #fff0c2 55%, #ffdc96);
        -webkit-mask: var(--entry-window-mask) 0 0 / 100% 100% no-repeat;
        mask: var(--entry-window-mask) 0 0 / 100% 100% no-repeat;

        clip-path: polygon(
            evenodd,
            0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
            39.3918% 67.4333%,
            39.3918% 95.4922%,
            62.1285% 95.4922%,
            62.1285% 67.4333%,
            39.3918% 67.4333%,
            0% 0%
        );
    }

    @media (prefers-reduced-motion: reduce) {
        .ae-entry[data-time="night"].is-hinting
            .ae-entry__window-light {
            animation: none;
        }
    }

    .ae-entry__window-light > span {
        display: none;
    }

    .ae-entry[data-time="night"].is-hinting
    .ae-entry__window-light {
        animation: ae-entry-light-night 1.2s ease-in-out 3;
    }

    /* 自転車：街と同じ横20%、建物高の30% */
    .ae-entry__scene > img.ae-entry__prop--bike {
        left: 20%;
        bottom: calc(var(--entry-ground-height) * 0.06);
        width: auto;
        height: calc(var(--entry-shop-height) * 0.30);
        transform: translate(-50%, 17%);
    }

    /* 木：街と同じ横78%、建物高の58% */
    .ae-entry__scene > img.ae-entry__prop--tree {
        left: 78%;
        bottom: calc(var(--entry-ground-height) * 0.06);
        width: auto;
        height: calc(var(--entry-shop-height) * 0.58);
        transform: translate(-50%, 4%);
    }

    /* ガチャ：街と同じ右2%、建物高×22%の幅 */
    .ae-entry__gacha {
        bottom: 0;
        z-index: 7;
    }

    /* 夜の投影を新しい小物位置に合わせる */
    .ae-entry__ground {
        clip-path: none;
    }

    .ae-entry__ground::before {
        inset: var(--entry-pavement-top) 0 auto;
        height: calc(var(--entry-pavement-height) * 0.46);
    }

    .ae-entry__shadow--bike {
        left: 20%;
        bottom: calc(var(--entry-ground-height) * 0.06);
        width: calc(var(--entry-shop-height) * 0.45);
        transform: translate(-50%, 17%) skewX(-10deg) scaleY(-0.3);
    }

    .ae-entry__shadow--tree {
        left: 78%;
        bottom: calc(var(--entry-ground-height) * 0.06);
        width: calc(var(--entry-shop-height) * 0.58 * 971 / 1619);
        transform: translate(-50%, 4%) skewX(8deg) scaleY(-0.24);
    }

    .ae-entry__shadow--gacha {
        top: calc(100% - 0.8cqw);
    }

    .ae-entry__scene::after {
        left: 78%;
        bottom: calc(var(--entry-ground-height) * 0.06);
    }

    /* 映り込みも全景画像の窓へ合わせる */
    .ae-entry__reflection--left {
        clip-path: inset(69.46% 67.8% 9.93% 11.06%);
    }

    .ae-entry__reflection--right {
        clip-path: inset(69.46% 10.44% 9.93% 68.42%);
    }

    .ae-entry__reflection-bike {
        left: calc(20.6% - var(--entry-shop-height) * 0.225);
        bottom: calc(var(--entry-ground-height) * 0.06);
        width: calc(var(--entry-shop-height) * 0.45);
        transform: translateY(17%);
    }

    .ae-entry__reflection-tree {
        left: calc(
            77.3% - var(--entry-shop-height) * 0.58 * 971 / 1619 / 2
        );
        bottom: calc(var(--entry-ground-height) * 0.06);
        width: calc(var(--entry-shop-height) * 0.58 * 971 / 1619);
        transform: translateY(4%);
    }
    .ae-entry__reflection-gacha {
        bottom: 0;
    }
}