* {
    box-sizing: border-box;
}

html {
    background-color: #142b41;
    background-image: repeating-conic-gradient(from 45deg, #263e50 0 25%, #142b41 0 50%);
    background-size: min(8vw, 60px) min(8vw, 60px);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: #17285d;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    background-color: #142b41;
    background-image: repeating-conic-gradient(from 45deg, #263e50 0 25%, #142b41 0 50%);
    background-size: min(8vw, 60px) min(8vw, 60px);
}

.landing {
    width: min(100%, 750px);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    font-size: min(1vw, 7.5px);
    line-height: 1.4;
    background-color: #142b41;
    background-image: repeating-conic-gradient(from 45deg, #263e50 0 25%, #142b41 0 50%);
    background-size: 8em 8em;
    box-shadow: 0 0 0 2px #17234e, 0 0 32px #050c18;
}

.landing img {
    display: block;
    height: auto;
}

.art {
    max-width: 100%;
}

html.scroll-reveal-ready [data-scroll-reveal] {
    opacity: 0;
    translate: 0 30px;
    transition: opacity 0.5s ease-out, translate 0.5s ease-out;
}

html.scroll-reveal-ready [data-scroll-reveal].is-scroll-revealed {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    html.scroll-reveal-ready [data-scroll-reveal] {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }
}

.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 750 / 1040;
    overflow: hidden;
    isolation: isolate;
    background: #090d22;
}

.hero-background,
.hero-silkhat img,
.hero-title img,
.character-motion img {
    width: 100%;
    max-width: none;
}

.hero-silkhat picture,
.hero-title picture,
.character-motion>picture {
    display: block;
}

.character-motion>picture {
    width: 100%;
    height: 100%;
}

.hero-background-picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-artwork {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero .hero-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-silkhat {
    position: absolute;
    z-index: 1;
    top: -1.4423%;
    left: -31.6%;
    width: 159.7333%;
    pointer-events: none;
}

.hero-title {
    position: absolute;
    z-index: 2;
    top: 0;
    left: -6%;
    width: 109.8667%;
    line-height: 0;
    pointer-events: none;
}

.character-stage {
    position: absolute;
    z-index: 3;
    top: 40.3846%;
    left: 0;
    width: 100%;
    aspect-ratio: 749 / 567;
    --hero-character-origin-y: 45%;
    --hero-character-portal-bottom: 55%;
    pointer-events: none;
}

.hero-character {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.character-motion {
    position: absolute;
    inset: 0;
    transform-origin: 50% var(--hero-character-origin-y, 45%);
}

.hero.is-preparing .hero-character {
    opacity: 0;
}

.hero.is-preparing .hero-title {
    opacity: 0;
}

.hero.is-animating .hero-character {
    animation: hero-character-portal 1.9s cubic-bezier(.2, .78, .3, 1) both;
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    will-change: clip-path;
}

.hero.is-animating .character-motion {
    animation: hero-character-emerge 1.9s cubic-bezier(.2, .78, .3, 1) both;
    will-change: transform, opacity;
}

.hero.is-animating .hero-title img {
    animation: hero-title-emerge 1.2s cubic-bezier(.2, .78, .3, 1) .8s both;
    transform-origin: 50% 90.25%;
    will-change: transform, opacity;
}

@keyframes hero-character-portal {

    0%,
    10% {
        clip-path: inset(0 0 var(--hero-character-portal-bottom, 55%) 0);
        -webkit-clip-path: inset(0 0 var(--hero-character-portal-bottom, 55%) 0);
    }

    40%,
    100% {
        clip-path: inset(0);
        -webkit-clip-path: inset(0);
    }
}

@keyframes hero-character-emerge {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.02);
    }

    12% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: translate(0, -2.5%) scale(1.045) rotate(-1deg);
    }

    86% {
        transform: translate(0, .35%) scale(.99) rotate(.35deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@keyframes hero-title-emerge {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.02);
    }

    12% {
        opacity: 1;
    }

    70% {
        opacity: 1;
        transform: translate(0, -2.5%) scale(1.045) rotate(-1deg);
    }

    86% {
        transform: translate(0, .35%) scale(.99) rotate(.35deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero.is-preparing .hero-character {
        opacity: 1;
    }

    .hero.is-preparing .hero-title {
        opacity: 1;
    }

    .hero.is-animating .hero-character {
        animation: none;
        clip-path: none;
        -webkit-clip-path: none;
        will-change: auto;
    }

    .hero.is-animating .character-motion {
        animation: none;
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    .hero.is-animating .hero-title img {
        animation: none;
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

.character-motion img {
    height: 100%;
    object-fit: fill;
}

.campaign-surface {
    position: relative;
    padding: 0 0 0.1em;
    background: transparent;
}

@media (min-width: 768px) {
    .landing {
        width: 100%;
        box-shadow: none;
    }

    .hero {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

    .hero-background-picture {
        position: relative;
        inset: auto;
        height: auto;
    }

    .hero .hero-background {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center bottom;
    }

    .hero-artwork {
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        transform: none;
    }

    .hero-silkhat {
        top: 0;
        left: 0;
        width: 100%;
    }

    .hero-title {
        top: 0;
        left: 21.0769%;
        width: 57.8462%;
    }

    .character-stage {
        top: auto;
        bottom: 6%;
        left: 9.7436%;
        width: 80.5128%;
        aspect-ratio: 3140 / 1885;
        --hero-character-origin-y: 61.48%;
        --hero-character-portal-bottom: 38.52%;
    }

    .campaign-surface {
        width: min(100%, 750px);
        margin-inline: auto;
        overflow: hidden;
    }
}

.opening {
    position: relative;
    padding: 0 0 1em;
}

.period-main {
    width: 92%;
    margin: 0 auto 1.4em;
}

.cm-block {
    position: relative;
    padding-bottom: 5.5em;
}

.cm-heading {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.cm-ribbon {
    position: relative;
    z-index: 1;
    width: 92.4%;
}

.cm-character {
    position: absolute;
    z-index: 2;
    top: -4.5em;
    width: 20%;
    height: auto;
    filter: drop-shadow(0 .3em .2em rgba(18, 26, 60, .35));
}

.cm-character-left {
    left: 1%;
}

.cm-frame {
    position: relative;
    z-index: 1;
    width: 92%;
    margin: -13.2em auto 0;
    padding: 14em 8em 8em;
    border: 0;
    border-radius: 4em;
    background: transparent url("../image/cm-frame.svg") center / 100% 100% no-repeat;
    box-shadow: 0 .5em 1.1em rgba(2, 9, 26, .3);
}

.cm-screen {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    border: 0;
}

.cm-screen iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.shop-section {
    position: relative;
    width: 92%;
    margin: 24em auto 0;
    padding: 0;
    isolation: isolate;
}

.shop-opening-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 10.5em 2.7em 4em;
    border: .75em solid #303780;
    border-bottom: 0;
    border-radius: 6.5em 6.5em 0 0;
    background: #fff;
    box-shadow: none;
}

.shop-opening-panel>.ribbon-heading {
    position: absolute;
    z-index: 2;
    top: -15.8em;
    left: 50%;
    width: calc(100% + 3.8em);
    margin: 0;
    transform: translateX(-50%);
}

.shop-opening-panel>.ribbon-heading img:first-child {
    width: 100%;
}

.shop-opening-panel .ribbon-character {
    top: -16%;
    right: -1%;
    width: 19%;
}

.ticket-promotion {
    position: relative;
    width: 100%;
    border-radius: 3em;
    box-shadow: 0 .5em 1em rgba(7, 39, 74, .16);
}

.shop-rest {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding: 1em 1.2em 3.5em;
    border: .75em solid #303780;
    border-top: 0;
    border-radius: 0 0 3.5em 3.5em;
    background: #fff;
    box-shadow: none;
}

.shop-rest-lower {
    width: 95.5%;
    margin: 7.8em auto 0;
    padding: 0;
    background: transparent;
}

.shop-section>.ribbon-heading {
    margin-top: .5em;
}

.ribbon-heading {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto 1.3em;
}

.ribbon-heading img {
    width: 100%;
    filter: drop-shadow(0 .3em .25em rgba(24, 28, 60, .22));
}

.ribbon-character {
    position: absolute;
    z-index: 3;
    top: -32%;
    width: 18%;
    height: auto;
    filter: drop-shadow(0 .25em .2em rgba(20, 30, 59, .25));
}

.ribbon-heading .ribbon-character {
    width: 18%;
}

.ribbon-character-left {
    left: 1%;
}

.ribbon-character-right {
    right: 1%;
}

.app-intro {
    position: relative;
    margin: 0 auto 4.1em;
    text-align: center;
}

.app-intro-title {
    position: relative;
    width: 86%;
    margin: 0 .8em 0 auto;
}

.app-original-title {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
}

.limited-stamp {
    position: absolute;
    z-index: 1;
    top: 6em;
    left: -23%;
    width: 33%;
}

.free-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 23.2em;
    margin: 0;
    border-radius: 3em 3em 0 0;
    background: linear-gradient(108deg, #5cc0dc 0%, #168fce 100%);
}

.free-intro>img.art {
    position: relative;
    z-index: 2;
    width: 87%;
    transform: translateY(1.1em);
}

.free-stamp {
    position: absolute;
    z-index: 1;
    top: -4.8em;
    left: 3%;
    width: 21.5%;
}

.gift-section {
    position: relative;
    width: 100%;
    margin: 2.3em auto 3.8em;
    text-align: center;
}

.ticket-gift {
    width: 100%;
    margin: 0;
    padding: 0 0 3.2em;
    border-radius: 0 0 3em 3em;
    background: repeating-linear-gradient(135deg, #cce9f8 0 2.8em, #bde2f5 2.8em 5.6em);
    text-align: left;
}

.foil-note {
    position: relative;
    z-index: 1;
    width: 49%;
    margin: 1em 0 0;
}

.title-with-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100%;
    margin: .35em auto 1.2em;
}

.title-with-badge>.art {
    width: 81%;
}

.ticket-gift .title-with-badge>.art {
    position: absolute;
    top: 4.5em;
    left: 7.5%;
    width: 71%;
}

.ticket-gift .title-with-badge {
    position: relative;
    display: block;
    height: 14.5em;
    margin: 0;
}

.ticket-gift .all-badge {
    position: absolute;
    top: -1.2em;
    right: 8%;
    width: 15.5%;
}

.all-badge {
    flex: 0 0 14.5%;
    width: 14.5%;
    height: auto;
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.3em;
    align-items: start;
    width: 90%;
    margin: 0 auto;
}

.ticket-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ticket-visual {
    position: relative;
    width: 100%;
    aspect-ratio: .6;
}

.ticket-art {
    position: absolute;
    top: -8.67%;
    left: -21.43%;
    width: 142.86%;
    max-width: none;
    height: 115.6%;
    object-fit: fill;
    filter: drop-shadow(0 .65em .65em rgba(15, 24, 45, .35));
}

.ticket-date {
    width: 98%;
}

.small-caption {
    margin: 1em 0 0;
    color: #1c2b5d;
    font-size: 1.55em;
    font-weight: 900;
    text-shadow: 0 .1em .12em rgba(255, 255, 255, .8);
}

.ticket-gift .small-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08em;
    width: 89%;
    min-height: 2.2em;
    margin: .7em auto 0;
    padding: .3em .2em;
    color: #101010;
    background: #fff;
    font-size: 4em;
    line-height: 1;
    text-shadow: none;
}

.ticket-gift .small-caption strong {
    font-size: 1.5em;
    line-height: 1;
}

.ticket-notes {
    display: flex;
    flex-direction: column;
    gap: .25em;
    margin: .75em 0 0 5.2%;
    color: #17285d;
    font-size: 3.2em;
    line-height: 1.4;
}

.ticket-notes strong {
    font-weight: 900;
}

.purchase-condition {
    position: relative;
    width: 92%;
    margin: 2em auto 3.4em;
    text-align: center;
}

.purchase-condition>.art {
    width: 88%;
    margin: 0 auto;
}

.purchase-stamp {
    position: absolute;
    z-index: 2;
    top: -1em;
    left: -1%;
    width: 22%;
    height: auto;
    transform: rotate(-10deg);
}

.period-label {
    width: 77%;
    margin: 0 auto 1em;
}

.callout {
    width: 31%;
    margin: .4em auto 1.1em;
}

.keychain-callout {
    margin-top: -.2em;
}

.keychain-grid,
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8em 1em;
    align-items: center;
    width: 100%;
    margin: 1.8em auto 1.2em;
}

.keychain-grid {
    position: relative;
}

.keychain-item {
    position: relative;
    min-width: 0;
    aspect-ratio: .68;
    margin-top: 0;
    overflow: hidden;
}

.keychain-item>img:not(.keyring) {
    position: absolute;
    top: -2%;
    left: -6%;
    width: 112%;
    max-width: none;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 .65em .65em rgba(15, 24, 45, .35));
}

.landing .keyring {
    position: absolute;
    top: 16%;
    left: 80%;
    z-index: 2;
    width: auto;
    height: 18.9em;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 .25em .35em rgba(67, 48, 23, .3));
    transform: translate(-50%, -94%) rotate(20deg);
    transform-origin: 50% 94%;
    pointer-events: none;
}

.keychain-label {
    position: absolute;
    z-index: 3;
    width: 13%;
    filter: drop-shadow(0 .2em .15em rgba(20, 28, 55, .15));
}

.keychain-label-front {
    top: 0;
    left: -2%;
}

.keychain-label-back {
    right: -2%;
    bottom: -1%;
}

.sticker-grid {
    gap: 1.1em 1em;
    margin-top: 1.2em;
}

.sticker-grid img {
    width: 100%;
    filter: drop-shadow(0 .65em .65em rgba(15, 24, 45, .35));
}

.sticker-grid img:nth-child(4),
.sticker-grid img:nth-child(5) {
    grid-row: 2;
    grid-column: 2;
    width: 100%;
}

.sticker-grid img:nth-child(4) {
    transform: translateX(-51%);
}

.sticker-grid img:nth-child(5) {
    transform: translateX(51%);
}

.cushion-promotion {
    position: relative;
    width: 95.5%;
    margin: 6.8em auto 0;
}

.lottery-condition {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36.4em;
    margin: 0;
    border-radius: 3em 3em 0 0;
    background: linear-gradient(108deg, #5cc0dc 0%, #168fce 100%);
    text-align: center;
}

.lottery-condition>.art {
    position: relative;
    z-index: 2;
    width: 86%;
    max-width: none;
}

.lottery-stamp {
    position: absolute;
    z-index: 1;
    top: -5.9em;
    left: 2.5%;
    width: 22%;
    transform: none;
}

.cushion-gift {
    position: relative;
    height: 181.9em;
    margin: 0;
    border-radius: 0 0 3em 3em;
    background: repeating-linear-gradient(45deg, #cce9f8 0 2.8em, #bde2f5 2.8em 5.6em);
    text-align: left;
}

.cushion-gift>.period-label {
    position: absolute;
    top: 4em;
    left: 50%;
    width: 89%;
    margin: 0;
    transform: translateX(-50%);
}

.cushion-title {
    position: absolute;
    top: 21.55em;
    left: 0;
    width: 86%;
    max-width: none;
}

.cushion-gift>.all-badge {
    position: absolute;
    z-index: 2;
    top: 14.8em;
    right: 2%;
    width: 15%;
    max-width: none;
}

.softness {
    position: absolute;
    z-index: 3;
    top: 34em;
    left: 1%;
    width: 32%;
    max-width: none;
}

.cushion-choice {
    position: absolute;
    top: 9.84375em;
    right: 15%;
    margin: 0;
    color: #111;
    font-size: 3.2em;
    line-height: 1.2;
}

.cushion-display {
    position: absolute;
    inset: 0 0 auto;
    height: 143.8em;
}

.cushion-product,
.side-label,
.size-height,
.size-width {
    position: absolute;
    max-width: none;
    object-fit: contain;
}

.cushion-product {
    z-index: 1;
    filter: drop-shadow(0 .65em .65em rgba(15, 24, 45, .35));
}

.purple-back {
    top: 43em;
    left: 3%;
    width: 42.7%;
}

.purple-front {
    z-index: 2;
    top: 34em;
    left: 28.5%;
    width: 54.7%;
}

.blue-front {
    z-index: 2;
    top: 91.2em;
    left: 3.8%;
    width: 59.5%;
}

.blue-back {
    top: 100em;
    left: 51.6%;
    width: 40.5%;
}

.side-label {
    z-index: 0;
    width: 16.8%;
    filter: drop-shadow(0 .15em .18em rgba(25, 37, 72, .15));
}

.purple-back-label {
    top: 75em;
    left: 7.7%;
}

.purple-front-label {
    top: 73em;
    right: 19.8%;
}

.blue-front-label {
    top: 124.3em;
    left: 6.6%;
}

.blue-back-label {
    top: 123.1em;
    right: 7.6%;
}

.size-height {
    z-index: 3;
    top: 37.4em;
    right: 3%;
    width: 15%;
}

.size-width {
    z-index: 3;
    top: 93.4em;
    left: 7.3%;
    width: 53.2%;
}

.cushion-caption {
    position: absolute;
    top: 35.95em;
    left: 5.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .05em;
    width: 89%;
    height: 2.15em;
    margin: 0;
    color: #111;
    background: #fff;
    font-size: 4em;
    font-weight: 900;
    line-height: 1;
}

.cushion-caption strong {
    font-size: 1.4em;
    line-height: 1;
}

.cushion-notes {
    position: absolute;
    top: 54.3859649em;
    left: 5.5%;
    width: 89%;
    margin: 0;
    color: #111;
    font-size: 2.85em;
    line-height: 1.55;
}

.cushion-notes-indent {
    padding-left: 1em;
}

.coloring-gift {
    width: 95.5%;
    margin: 6.8em auto 0;
    text-align: left;
}

.coloring-header {
    position: relative;
    height: 27.2em;
    border-radius: 4em 4em 0 0;
    background: linear-gradient(108deg, #5cc0dc 0%, #168fce 100%);
}

.coloring-title {
    position: absolute;
    top: 5em;
    left: 3.8%;
    width: 93%;
    max-width: none;
    margin: 0;
}

.coloring-body {
    position: relative;
    height: 182.7em;
    border-radius: 0 0 3.5em 3.5em;
    background-color: #c8eafa;
    background-image:
        radial-gradient(circle, #b6dcef 0 2.25em, transparent 2.4em),
        radial-gradient(circle, #b6dcef 0 2.25em, transparent 2.4em);
    background-size: 9.7em 9.7em;
    background-position: 0 0, 4.85em 4.85em;
}

.coloring-body>img {
    position: absolute;
    max-width: none;
}

.coloring-period {
    top: 4.6em;
    left: 5.6%;
    width: 88.8%;
    margin: 0;
}

.clearfile-title {
    top: 19.5em;
    left: 7%;
    width: 86%;
}

.choose-label {
    top: 66em;
    left: 52.3%;
    width: 44.3%;
}

.coloring-page {
    z-index: 1;
    top: 75em;
    left: 1.6%;
    width: 51.5%;
    filter: drop-shadow(.35em .45em .35em rgba(21, 30, 49, .26));
    transform: rotate(-7deg);
}

.coloring-clearfile {
    z-index: 2;
    width: 23.5%;
    filter: drop-shadow(.3em .4em .3em rgba(21, 30, 49, .3));
}

.coloring-clearfile-one {
    top: 74.5em;
    left: 53.8%;
    transform: rotate(4deg);
}

.coloring-clearfile-two {
    z-index: 3;
    top: 84.6em;
    left: 75%;
    width: 23.8%;
    transform: rotate(10deg);
}

.coloring-clearfile-back {
    top: 112em;
    left: 72.6%;
    width: 23.8%;
    transform: rotate(8deg);
}

.coloring-clearfile-label {
    z-index: 0;
    width: 16.6%;
}

.coloring-front-label {
    top: 72.5em;
    left: 80%;
}

.coloring-back-label {
    top: 117.3em;
    left: 58.7%;
}

.deadline-note {
    top: 144.2em;
    left: 16.9%;
    width: 66.1%;
}

.coloring-notes {
    position: absolute;
    top: 55.2em;
    left: 5.6%;
    margin: 0;
    color: #111;
    font-size: 3em;
    line-height: 1.5;
}

.coloring-notes span {
    padding-left: 1em;
}

.store-campaign {
    padding: 0;
    text-align: center;
}

.store-campaign>.art {
    width: 100%;
    margin: 0 auto 4em;
    filter: none;
}

.app-banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.app-banner>.art {
    width: 100%;
}

.store-finder,
.net-link {
    display: block;
    width: 94%;
    margin: 0 auto 2em;
}

.shop-rest-lower>.store-finder {
    width: 100%;
    margin: 4em auto 0;
}

.shop-rest-lower>.store-finder img {
    filter: none;
}

.store-finder img,
.net-link img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 .3em .5em rgba(19, 31, 69, .25));
}

.online-promos {
    position: relative;
    width: 92%;
    margin: 2em auto 0;
    padding: 0;
}

.online-promos .ribbon-heading {
    margin: .6em auto .8em;
}

.net-campaign,
.x-campaign {
    position: relative;
    width: 100%;
    margin: 0 auto 5em;
    padding: 1.4em 1.2em 2.4em;
    border: .45em solid rgba(255, 255, 255, .95);
    border-radius: 1.3em;
    background: #fff;
    box-shadow: 0 0 0 .4em #132b50, 0 .6em 1.6em rgba(0, 0, 0, .28);
}

.net-prize,
.x-prize {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 1.2em 0 2.4em;
    text-align: center;
}

.net-copy,
.x-copy {
    width: 88%;
    margin: 0 auto 1em;
}

.net-limited {
    position: absolute;
    z-index: 1;
    top: .5em;
    left: -1%;
    width: 22%;
    transform: rotate(-8deg);
}

.net-prize>.period-label,
.x-prize>.period-label {
    width: 82%;
    margin: .5em auto 1em;
}

.towel-photo {
    width: 94%;
    margin: 0 auto 1.3em;
    object-fit: contain;
}

.net-link {
    width: 94%;
    margin-bottom: 1.4em;
}

.apply-banner {
    width: 92%;
    margin: 1em auto .2em;
}

.x-prize {
    padding-top: 1em;
    padding-bottom: 1.6em;
}

.x-copy {
    width: 92%;
    margin-bottom: .8em;
}

.x-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100%;
    margin: 1em auto .4em;
}

.x-gift-title {
    width: 72%;
}

.winner-badge {
    width: 18%;
    flex: 0 0 18%;
    transform: rotate(7deg);
}

.x-gift-items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.2em .55em;
    align-items: center;
    margin: 7em auto 1.5em;
}

.x-gift-items>img {
    width: 100%;
    filter: drop-shadow(0 .25em .35em rgba(24, 36, 74, .18));
}

.x-mini-keychain {
    position: relative;
    min-width: 0;
    aspect-ratio: .68;
    margin-top: 7em;
}

.x-mini-keychain-art {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
}

.x-mini-keychain-art>img {
    position: absolute;
    top: -2%;
    left: -6%;
    width: 112%;
    max-width: none;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 .25em .35em rgba(24, 36, 74, .18));
}

.x-banner {
    display: block;
    width: 94%;
    margin: 1em auto 0;
}

.x-banner>img {
    width: 100%;
}

.page-footer {
    position: relative;
    margin-top: 1.4em;
    padding: 10em 5em 13em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    background: transparent;
    border-top: .8em solid #f4d52c;
}

.page-footer p {
    margin: 0 0 1em;
    color: #f8e139;
    font-size: 2em;
    font-weight: 900;
    line-height: 1.3;
    text-shadow: .08em .08em 0 #be1e36, .16em .16em 0 #111936;
}

.page-footer small {
    display: block;
    color: rgba(255, 255, 255, .9);
    font-size: 1.25em;
    line-height: 1.8;
}

/* In-store keychain promotion */
.keychain-promo-panel {
    position: relative;
    width: calc(100% - 3em);
    margin: 0 auto;
    border-radius: 3em;
    background: #cdeafb;
}

.keychain-promo-panel>.purchase-condition {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 51.2em;
    margin: 0;
    padding: 2em 0;
    border-radius: 3em 3em 0 0;
    background: linear-gradient(108deg, #5cc0dc 0%, #168fce 100%);
}

.keychain-promo-panel>.purchase-condition>.art {
    position: relative;
    z-index: 2;
    width: 93%;
    margin: 0 auto;
}

.keychain-promo-panel .purchase-stamp {
    top: -5em;
    left: 3%;
    z-index: 1;
    width: 25%;
    transform: none;
}

.keychain-gift {
    width: 100%;
    margin: 0 auto;
    padding: 4.8em .65% 4.8em;
    border-bottom: .8em dotted rgba(255, 255, 255, .98);
    background-color: #cdeafb;
    background-image: repeating-conic-gradient(from 45deg, #d8effb 0 25%, #c2e5f7 0 50%);
    background-size: 6em 6em;
}

.keychain-gift>.period-label {
    width: 89%;
    margin: 0 auto 1em;
}

.keychain-gift>.title-with-badge {
    position: relative;
    display: block;
    height: auto;
    margin: 2.4em auto 0;
}

.keychain-gift>.title-with-badge>.art {
    width: 88%;
    margin: 0 auto;
}

.keychain-gift>.title-with-badge>.all-badge {
    position: absolute;
    top: -8.7em;
    right: -1.5%;
    width: 15.5%;
    max-width: none;
}

.keychain-gift>.keychain-callout {
    position: absolute;
    z-index: 4;
    top: 32em;
    right: 9.5%;
    width: 34.7%;
    margin: 0;
    filter: drop-shadow(0 .45em .55em rgba(245, 62, 46, .55));
}

.keychain-gift>.keychain-grid {
    gap: 1.55em 1em;
    width: 100%;
    margin: 17.5em auto 6.8em;
}

.keychain-gift .keychain-item {
    z-index: 1;
    overflow: visible;
}

.keychain-gift .keychain-item>img:not(.keyring) {
    z-index: 1;
}

.keychain-gift .keychain-item:nth-child(6)>img:not(.keyring) {
    left: -15%;
    transform: rotate(-4deg);
}

.x-mini-keychain .keyring {
    height: 10em;
}

.keychain-gift .keychain-label {
    z-index: 0;
    width: 17.1%;
}

.keychain-gift .keychain-label-front {
    top: -9%;
    left: -2%;
}

.keychain-gift .keychain-label-back {
    top: -9.3%;
    left: 59%;
    right: auto;
    bottom: auto;
    width: 50.5%;
}

.keychain-gift>.small-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08em;
    width: 89%;
    margin: 1em auto 0;
    min-height: 2.2em;
    padding: .3em .2em;
    color: #111;
    background: #fff;
    font-size: 4em;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
}

.keychain-gift>.small-caption strong {
    font-size: 1.5em;
    line-height: 1;
}

.keychain-note {
    width: 89%;
    margin: .75em auto 0;
    color: #111;
    font-size: 3.2em;
    font-weight: 700;
    text-align: left;
}

.sticker-gift {
    width: 100%;
    margin: 0;
    padding: 7.1em 0 4em;
    border-radius: 0 0 3em 3em;
    background-color: #cdeafb;
    background-image: repeating-conic-gradient(from 45deg, #d8effb 0 25%, #c2e5f7 0 50%);
    background-size: 6em 6em;
    text-align: left;
}

.sticker-gift>.period-label {
    width: 89%;
    margin: 0 auto 1em;
}

.sticker-gift>.title-with-badge {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 1em auto 0;
}

.sticker-gift>.title-with-badge>.art {
    width: 78.5%;
    margin: 0 0 0 4%;
}

.sticker-gift>.title-with-badge>.all-badge {
    position: absolute;
    top: -6.4em;
    right: 4%;
    width: 14.5%;
    max-width: none;
}

.sticker-gift>.callout {
    position: absolute;
    z-index: 3;
    top: 33.7em;
    left: 13%;
    width: 32%;
    margin: 0;
    filter: drop-shadow(0 .45em .55em rgba(245, 62, 46, .55));
}

.sticker-gift>.sticker-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.8em 1.4em;
    width: 112%;
    margin: 7.3em -6% 0;
}

.sticker-grid>img:nth-child(1),
.sticker-grid>img:nth-child(2),
.sticker-grid>img:nth-child(3) {
    grid-row: 1;
    grid-column: span 2;
}

.sticker-grid>img:nth-child(4) {
    grid-row: 2;
    grid-column: 2 / span 2;
    transform: none;
}

.sticker-grid>img:nth-child(5) {
    grid-row: 2;
    grid-column: 4 / span 2;
    width: 88%;
    justify-self: center;
    transform: none;
}

.sticker-gift>.small-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08em;
    width: 89%;
    min-height: 2.2em;
    margin: .85em auto 0;
    padding: .3em .2em;
    color: #111;
    background: #fff;
    font-size: 3.85em;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
}

.sticker-gift>.small-caption strong {
    font-size: 1.45em;
    line-height: 1;
}

.sticker-note {
    width: 89%;
    margin: .75em auto 0;
    color: #111;
    font-size: 3.2em;
    font-weight: 700;
    text-align: left;
}

/* Kojima Net lottery panel */
.online-promos {
    isolation: isolate;
    margin-top: 18em;
}

.online-promos>.net-campaign,
.online-promos>.x-campaign {
    z-index: 1;
}

.online-promos>.net-campaign {
    padding: 0 2.6em;
    border: .9em solid #942276;
    border-radius: 6em;
    background: #fff;
    box-shadow: 0 .8em 1.6em rgba(0, 0, 0, .28);
    isolation: isolate;
}

.net-campaign>.ribbon-heading {
    position: absolute;
    z-index: 3;
    top: -16.8em;
    left: 50%;
    width: 97.5%;
    margin: 0;
    transform: translateX(-50%);
}

.net-campaign>.ribbon-heading .ribbon-character {
    top: -20%;
    left: -4%;
    width: 18%;
}

.net-campaign .net-prize {
    padding: 12.3em 0 2.4em;
}

.net-campaign .net-copy {
    position: relative;
    z-index: 2;
    width: 94%;
    margin: 0 auto 2.2em;
}

.net-campaign .net-limited {
    z-index: 1;
    top: 27.6em;
    left: -6.8%;
    width: 28%;
    transform: none;
}

.net-product-card {
    width: 100%;
    padding: 2.7em 0 5em;
    overflow: visible;
    border-radius: 4em;
    background-color: #e9d7eb;
    background-image: repeating-conic-gradient(from 45deg, #e9d7eb 0 25%, #dec7e5 0 50%);
    background-size: 8em 8em;
}

.net-product-card>.period-label {
    width: 89%;
    margin: 0 auto;
}

.net-product-card>.towel-photo {
    width: 100%;
    margin: 4em auto 0;
    filter: drop-shadow(0 .65em .65em rgba(15, 24, 45, .35));
    transform: rotate(-3.5deg);
}

.net-size-note {
    width: 96%;
    margin: .9em auto 0;
    padding-right: .75em;
    color: #111;
    font-size: 3.3em;
    line-height: 1.4;
    text-align: right;
}

.net-campaign .net-link {
    width: 100%;
    margin: 4.5em auto 3.8em;
}

.net-campaign .apply-banner {
    width: 100%;
    margin: 0 auto;
}

.net-application-note {
    width: 100%;
    margin: 1.25em auto 0;
    color: #111;
    font-size: 3em;
    line-height: 1.5;
    text-align: left;
}

/* X repost campaign panel and its reference-matched prize layout */
.online-promos>.x-campaign {
    width: 100%;
    margin: 16em auto 0;
    padding: 0 2.6em 4em;
    border: .9em solid #942276;
    border-radius: 6em;
    background: #fff;
    box-shadow: 0 .8em 1.6em rgba(0, 0, 0, .28);
    isolation: isolate;
}

.x-campaign>.ribbon-heading {
    position: absolute;
    z-index: 3;
    top: -11.6em;
    left: 50%;
    width: 97%;
    margin: 0;
    transform: translateX(-50%);
}

.x-campaign>.ribbon-heading .ribbon-character-right {
    top: -32%;
    right: -2%;
    width: 20%;
}

.x-campaign>.x-prize {
    padding: 17em 0 4em;
}

.x-campaign .x-copy {
    width: 96%;
    margin: 0 auto 2em;
}

.x-product-card {
    width: 100%;
    margin: 1em auto 0;
    padding: 3.3em 0 5.55em;
    overflow: visible;
    border-radius: 4em;
    background-color: #e9d7eb;
    background-image: repeating-linear-gradient(45deg, #e9d7eb 0 3em, #dec7e5 3em 6em);
}

.x-product-card>.period-label {
    width: 89%;
    margin: 0 auto;
}

.x-campaign .x-title-row {
    position: relative;
    width: 100%;
    height: 27em;
    margin: .7em auto 0;
}

.x-campaign .x-gift-title {
    width: 78%;
    margin: 0 auto;
}

.x-campaign .winner-badge {
    position: absolute;
    top: 10.7em;
    right: 3%;
    width: 19%;
    transform: rotate(7deg);
}

.x-gift-items {
    position: relative;
    width: 100%;
    height: 56em;
    margin: 10.5em auto 0;
}

.x-gift-items>.x-mini-keychain {
    position: absolute;
    top: 0;
    width: 27%;
    aspect-ratio: .68;
    margin: 0;
    overflow: visible;
}

.x-gift-items>.x-mini-keychain:nth-child(1) {
    left: -4%;
    top: 3em;
    z-index: 5;
    transform: rotate(-8deg);
}

.x-gift-items>.x-mini-keychain:nth-child(2) {
    left: 14%;
    top: -1em;
    z-index: 4;
    transform: rotate(-2deg);
}

.x-gift-items>.x-mini-keychain:nth-child(3) {
    left: 33%;
    top: 2em;
    z-index: 3;
}

.x-gift-items>.x-mini-keychain:nth-child(4) {
    left: 53%;
    top: -1em;
    z-index: 2;
    transform: rotate(3deg);
}

.x-gift-items>.x-mini-keychain:nth-child(5) {
    left: 71%;
    top: 1.7em;
    z-index: 1;
    transform: rotate(8deg);
}

.x-mini-keychain-art {
    overflow: visible;
}

.x-mini-keychain-art>img {
    top: -2%;
    left: -6%;
    width: 112%;
    filter: drop-shadow(0 .25em .35em rgba(24, 36, 74, .2));
}

.x-mini-keychain .keyring {
    height: 18.9em;
}

.x-gift-items>img {
    position: absolute;
    top: 36em;
    left: 0;
    width: 25%;
    max-width: none;
    filter: drop-shadow(0 .25em .35em rgba(24, 36, 74, .2));
}

.x-gift-items>img:nth-of-type(1) {
    top: 39.3em;
    left: -4.1%;
    width: 26.5%;
    z-index: 11;
}

.x-gift-items>img:nth-of-type(2) {
    top: 35em;
    left: 18.5%;
    width: 26.426694%;
    z-index: 12;
}

.x-gift-items>img:nth-of-type(3) {
    top: 36.7em;
    left: 37.6%;
    width: 26.683264%;
    z-index: 13;
}

.x-gift-items>img:nth-of-type(4) {
    top: 36.6em;
    left: 57.9%;
    width: 27.013140%;
    z-index: 14;
}

.x-gift-items>img:nth-of-type(5) {
    top: 35.7em;
    left: 78.1%;
    width: 22.651452%;
    z-index: 15;
}

.x-campaign .x-banner {
    width: 100%;
    margin: 6em auto 0;
}

.page-footer {
    z-index: 1;
    margin-top: 0;
    padding: 3.8em 5.6em 13em;
    display: block;
    color: #fff;
    text-align: left;
    background: transparent;
    border-top: 0;
}

.page-footer small {
    color: #fff;
    font-size: 3.2em;
    line-height: 1.4;
}

.footer-copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: .25em;
    margin-top: .45em;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(11px, 2.4vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

.footer-copyright-prefix,
.footer-copyright-approval {
    white-space: nowrap;
}

.footer-copyright-main,
.footer-copyright-approval {
    display: inline-block;
    transform: scaleY(.8);
    transform-origin: center center;
}