.kancho-main {
    position: relative;
    width: 100%;
    max-width: 600px;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    /* background: #5e1785; */
}

.kancho-visual {
    position: relative;
    width: 100%;
    line-height: 0;
}

.kancho-visual>img {
    display: block;
    width: 100%;
    height: auto;
}

.kancho-event-period {
    position: absolute;
    z-index: 2;
    top: 38.6%;
    left: 16.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 67%;
    height: 2.9%;
    margin: 0;
    color: #d6c3e6;
    background: #541b86;
    font-size: min(3.8vw, 23px);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1;
    white-space: nowrap;
}

.kancho-hit {
    position: absolute;
    z-index: 2;
    display: block;
    border-radius: 12px;
    outline: 0;
}

.kancho-hit:focus-visible {
    outline: 4px solid #fff;
    outline-offset: -5px;
}

.kancho-hit--villain,
.kancho-hit--potion {
    top: 86.6%;
    width: 41.8%;
    height: 7.5%;
}

.kancho-hit--villain {
    left: 6.7%;
}

.kancho-hit--potion {
    right: 6.7%;
}

.kancho-hit--login {
    top: 61.1%;
    left: 6.6%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86.8%;
    height: 21.4%;
    color: #512301;
    font-size: min(5vw, 30px);
    font-weight: 800;
    line-height: 1;
}

.kancho-hit--login span {
    padding: min(1.34vw, 8px) min(3.34vw, 20px);
    /* background: #efe939; */
}

.kancho-entry-count {
    position: absolute;
    top: 58.65%;
    left: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 20.2%;
    margin: 0;
    color: #512301;
    /* background: #ffcae2; */
    line-height: 1;
    white-space: nowrap;
}

.kancho-entry-count strong {
    font-size: min(11.67vw, 70px);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: 1;
}

.kancho-entry-count .kancho-count-line {
    padding-top: 12px;
}

.kancho-count-line {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.kancho-entry-count .kancho-count-line>span {
    margin-left: min(1.34vw, 8px);
    font-size: min(7.5vw, 45px);
}

.kancho-wanted-counts {
    position: absolute;
    inset: 0;
    color: #512301;
    pointer-events: none;
}

.kancho-wanted-counts p {
    position: absolute;
    left: 9.17%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36.33%;
    height: 1.78%;
    margin: 0;
    border-radius: 999px;
    background: #fff;
    line-height: 1;
    white-space: nowrap;
}

.kancho-wanted-counts p:nth-child(even) {
    right: 9.17%;
    left: auto;
}

.kancho-wanted-counts p:nth-child(1),
.kancho-wanted-counts p:nth-child(2) {
    top: 27.51%;
}

.kancho-wanted-counts p:nth-child(3),
.kancho-wanted-counts p:nth-child(4) {
    top: 44.42%;
}

.kancho-wanted-counts p:nth-child(5),
.kancho-wanted-counts p:nth-child(6) {
    top: 61.33%;
}

.kancho-wanted-counts p:nth-child(7),
.kancho-wanted-counts p:nth-child(8) {
    top: 78.24%;
}

.kancho-wanted-counts p:nth-child(9),
.kancho-wanted-counts p:nth-child(10) {
    top: 95.16%;
}

.kancho-wanted-counts strong {
    font-size: min(4.34vw, 26px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1;
}

.kancho-wanted-counts .kancho-count-line>span {
    margin-left: min(.5vw, 3px);
    font-size: min(2.5vw, 15px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.2;
}

.kancho-city {
    margin-top: -1px;
}

.kancho-copyright {
    padding: 10px 0px;
    color: rgba(255, 255, 255, .75);
    background: #000;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}


#base_wrap {
    /* background: #5e1785; */
}

@media (max-width: 600px) {
    #base_wrap {
        box-shadow: none;
    }

    .kancho-hit {
        border-radius: clamp(6px, 2vw, 12px);
    }
}

.edk-site-popup-layer {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}

.edk-site-popup-layer.is-empty,
.edk-site-popup-layer.is-hidden,
.edk-site-popup.is-hidden {
    display: none;
}

.edk-site-popup {
    position: fixed;
    width: min(var(--popup-width), calc(100vw - 32px));
    height: min(var(--popup-height), calc(100vh - 48px));
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
    pointer-events: auto;
}

.edk-site-popup.size-sm {
    --popup-width: 380px;
    --popup-height: 380px;
}

.edk-site-popup.size-md {
    --popup-width: 420px;
    --popup-height: 580px;
}

.edk-site-popup.size-lg {
    --popup-width: 600px;
    --popup-height: 600px;
}

.edk-site-popup-layer.layout-stack .edk-site-popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.edk-site-popup-layer.layout-stack .edk-site-popup:nth-child(2) {
    transform: translate(calc(-50% + 22px), calc(-50% + 22px));
}

.edk-site-popup-layer.layout-stack .edk-site-popup:nth-child(3) {
    transform: translate(calc(-50% + 44px), calc(-50% + 44px));
}

.edk-site-popup-layer.layout-stack .edk-site-popup:nth-child(n + 4) {
    transform: translate(calc(-50% + 66px), calc(-50% + 66px));
}

.edk-site-popup-layer.layout-side {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    flex-wrap: wrap;
}

.edk-site-popup-layer.layout-side .edk-site-popup {
    position: relative;
    flex: 0 0 auto;
}

.edk-site-popup-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.edk-site-popup-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #f8fafc;
}

.edk-site-popup-body img {
    display: block;
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
}

.edk-site-popup-footer {
    display: flex;
    align-items: center;
    flex: 0 0 54px;
    border-top: 1px solid rgba(226, 232, 240, .95);
    background: #fff;
}

.edk-site-popup-footer button {
    flex: 1 1 50%;
    height: 100%;
    min-width: 0;
    padding: 0 10px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    font-size: clamp(.86rem, .78rem + .22vw, .98rem);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edk-site-popup-option {
    color: #334155;
    background: #f8fafc;
}

.edk-site-popup-option:hover {
    color: #1d4ed8;
    background: #eef4ff;
}

.edk-site-popup-close {
    color: #fff;
    background: #111827;
}

.edk-site-popup-close:hover {
    background: #020617;
}

@media (max-width: 500px) {

    body.edk-site-popup-modal-open {
        overflow: hidden;
    }

    .edk-site-popup-layer,
    .edk-site-popup-layer.layout-side {
        display: block;
        padding: 0;
        background: rgba(15, 23, 42, .58);
        pointer-events: auto;
    }

    .edk-site-popup,
    .edk-site-popup-layer.layout-side .edk-site-popup {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: min(var(--popup-height), calc(100dvh - 64px));
        max-width: none;
        transform: none;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -12px 42px rgba(0, 0, 0, .22);
    }

    .edk-site-popup:nth-child(2),
    .edk-site-popup:nth-child(n + 3) {
        transform: none;
    }

    .edk-site-popup-footer {
        flex-basis: calc(54px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .edk-site-popup-layer.is-empty,
    .edk-site-popup-layer.is-hidden {
        display: none;
    }
}