* { box-sizing: border-box; margin: 0; padding: 0; }
/* 300×250を基準に全体を同比率で拡縮。最大幅400px。 */
html { font-size: min(0.3333333333vw, 1.3333333333px); }
html, body { width: 100%; max-width: 400px; height: 250rem; font-family: 'M PLUS Rounded 1c', sans-serif; }
.banner-container { display: block; position: relative; width: 100%; height: 250rem; overflow: hidden; text-decoration: none; color: #fff4dc; background: radial-gradient(ellipse at 48% 60%, #49577f 0%, #252b51 48%, #171b34 100%); }
.banner-container::after { content: ''; position: absolute; inset: 7rem; border: 1rem solid #e3c48a55; border-radius: 80rem 80rem 5rem 5rem; pointer-events: none; }
.copy { position: relative; z-index: 3; text-align: center; padding-top: 13rem; }
.eyebrow { font-family: 'Outfit', sans-serif; font-size: 6rem; letter-spacing: 2rem; color: #d9be89; }
h1 { margin-top: 6rem; font-family: 'Noto Serif JP', serif; font-size: 19rem; font-weight: 600; line-height: 1.45; letter-spacing: .6rem; }
h1 span { color: #ffe1a7; }
.description { margin-top: 5rem; font-size: 8rem; color: #dfdce9; letter-spacing: .4rem; }
.orbit { position: absolute; width: 204rem; height: 204rem; left: 47rem; top: 48rem; border: 1rem solid #e4c58c33; border-radius: 50%; }
.orbit::before { content: ''; position: absolute; inset: 9rem; border: 1rem dashed #e4c58c33; border-radius: 50%; }
.cards { position: absolute; z-index: 2; left: 43rem; top: 80rem; width: 177rem; height: 120rem; }
.card { position: absolute; width: 66rem; height: 107rem; object-fit: cover; border-radius: 5rem; border: 1rem solid #efd99f; box-shadow: 0 5rem 14rem #080d2999; }
.card-left { left: 13rem; top: 10rem; transform: rotate(-19deg); animation: left-in .8s ease-out both; }
.card-right { right: 6rem; top: 10rem; transform: rotate(19deg); animation: right-in .8s ease-out both; }
.card-center { width: 73rem; height: 119rem; left: 54rem; top: 0; z-index: 2; animation: center-in .9s ease-out both; }
.card-note { position: absolute; right: 16rem; top: 111rem; font-size: 8rem; line-height: 1.9; letter-spacing: .5rem; color: #e6d0ac; }
.brand { position: absolute; left: 17rem; bottom: 20rem; font-size: 8rem; line-height: 1.5; }
.brand strong { font-size: 11rem; letter-spacing: .6rem; }
.cta-button { position: absolute; z-index: 4; right: 17rem; bottom: 25rem; display: flex; align-items: center; justify-content: space-between; width: 154rem; padding: 8rem 12rem; color: #292c48; background: linear-gradient(110deg, #f8e6bd, #e4bf81); border-radius: 4rem; box-shadow: 0 3rem 12rem #0d122b55; font-size: 11rem; font-weight: 800; transition: filter .2s; }
.cta-button span { font-size: 16rem; line-height: 1; }
.footer-note { position: absolute; right: 32rem; bottom: 11rem; font-size: 7rem; color: #d6cee2; }
.star { position: absolute; color: #efd49b; }
.star-one { left: 24rem; top: 99rem; font-size: 20rem; }
.star-two { right: 27rem; top: 78rem; font-size: 20rem; }
.star-three { left: 34rem; top: 165rem; font-size: 10rem; }
.banner-container:hover .cta-button { filter: brightness(1.1); }
.banner-container:focus-visible { outline: 3rem solid #efd49b; outline-offset: -3rem; }
@keyframes left-in { from { opacity: 0; transform: translateX(25rem) rotate(-5deg); } to { opacity: 1; transform: rotate(-19deg); } }
@keyframes right-in { from { opacity: 0; transform: translateX(-25rem) rotate(5deg); } to { opacity: 1; transform: rotate(19deg); } }
@keyframes center-in { from { opacity: 0; transform: translateY(12rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }