:root {
    --premium-ink: #173c34;
    --premium-brand: #07898a;
    --premium-green: #4fa97b;
    --premium-lime: #b8d83c;
    --premium-yellow: #ffd65a;
    --premium-pink: #ffb8cb;
    --premium-sky: #bce7f4;
    --premium-cream: #fff9ee;
    --premium-soft: #f3f8f5;
    --premium-line: #dce9e3;
    --premium-muted: #64776f;
}

body { background: #fbfcfa; }

.premium-landing {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 90px;
    color: var(--premium-ink);
}

.premium-landing * { box-sizing: border-box; }

/* 日本語見出しの不自然な途中改行を抑えつつ、画面幅に応じて自然に折り返す */
.premium-hero h1,
.premium-section h2,
.premium-final h2,
.premium-field__quote p,
.premium-future__panel p {
    text-wrap: balance;
    overflow-wrap: normal;
}
.premium-nowrap {
    display: inline-block;
    white-space: nowrap;
}
.premium-field__quote strong .premium-nowrap,
.premium-future__panel strong .premium-nowrap,
.premium-final h2 .premium-nowrap {
    margin-right: .08em;
}

.premium-eyebrow {
    margin: 0 0 10px;
    color: var(--premium-brand);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.premium-hero {
    position: relative;
    min-height: 610px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
    align-items: center;
    gap: 38px;
    overflow: hidden;
    padding: 62px 64px;
    border-radius: 40px;
    background:
        radial-gradient(circle at 92% 12%, rgba(255,184,203,.78) 0 11%, transparent 11.2%),
        radial-gradient(circle at 5% 94%, rgba(188,231,244,.92) 0 18%, transparent 18.2%),
        linear-gradient(135deg, #fffdf8 0%, #fff9ee 58%, #f1fbf7 100%);
    box-shadow: 0 24px 70px rgba(29,68,57,.10);
}

.premium-hero__copy { position: relative; z-index: 5; }
.premium-hero h1 {
    margin: 0;
    font-size: clamp(46px, 6.2vw, 78px);
    line-height: 1.08;
    letter-spacing: -.055em;
}
.premium-hero__lead {
    max-width: 680px;
    margin: 24px 0 0;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.9;
    color: #40584f;
}
.premium-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
}
.premium-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.premium-button:hover { transform: translateY(-2px); }
.premium-button--primary {
    background: var(--premium-brand);
    color: #fff;
    box-shadow: 0 12px 30px rgba(7,137,138,.23);
}
.premium-button--primary:hover { background: #067a7b; }
.premium-button--secondary {
    border: 1px solid var(--premium-line);
    background: #fff;
    color: var(--premium-ink);
}
.premium-button--large { min-height: 62px; padding-inline: 34px; font-size: 17px; }
.premium-text-link {
    color: var(--premium-brand);
    font-weight: 900;
    text-underline-offset: 4px;
}
.premium-hero__price {
    margin: 22px 0 0;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.65;
}
.premium-hero__price small { font-weight: 600; color: var(--premium-muted); }

.premium-hero__visual {
    position: relative;
    min-height: 490px;
    isolation: isolate;
}
.premium-hero__visual::before {
    content: "";
    position: absolute;
    inset: 48px 10px 18px 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 24px 60px rgba(29,68,57,.09);
    z-index: -3;
}
.premium-orbit {
    position: absolute;
    border-radius: 50%;
    z-index: -2;
}
.premium-orbit--one { width: 130px; height: 130px; right: 2%; top: 12%; background: var(--premium-yellow); }
.premium-orbit--two { width: 84px; height: 84px; left: 12%; bottom: 8%; background: var(--premium-sky); }
.premium-character { position: absolute; display: block; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(34,70,61,.12)); }
.premium-character--avatar { height: 470px; width: auto; left: 8%; bottom: -18px; z-index: 1; }
.premium-character--pet { width: 220px; height: 220px; right: 0; bottom: 16px; z-index: 2; }
.premium-medal { position: absolute; width: 104px; height: 104px; object-fit: contain; right: 5%; top: 22%; z-index: 3; filter: drop-shadow(0 10px 14px rgba(29,68,57,.12)); }
.premium-point-chip {
    position: absolute;
    top: 14%;
    left: 3%;
    display: grid;
    gap: 3px;
    padding: 13px 17px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(29,68,57,.13);
    z-index: 4;
}
.premium-point-chip strong { font-size: 11px; letter-spacing: .06em; }
.premium-point-chip span { color: var(--premium-green); font-size: 23px; font-weight: 900; }

.premium-section {
    margin-top: 48px;
    padding: 68px 64px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid #edf1ee;
}
.premium-section__heading { max-width: 790px; }
.premium-section__heading--center { margin-inline: auto; text-align: center; }
.premium-section h2,
.premium-final h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.2;
    letter-spacing: -.045em;
}
.premium-section__heading > p:last-child,
.premium-stack__copy p,
.premium-origin__copy p,
.premium-field__copy p,
.premium-future__copy p {
    line-height: 1.9;
    color: #4c625a;
}

.premium-section--difference { background: var(--premium-cream); }
.premium-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
}
.premium-compare__card {
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 34px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--premium-line);
}
.premium-compare__card--member { border: 2px solid rgba(7,137,138,.35); box-shadow: 0 16px 42px rgba(7,137,138,.10); }
.premium-compare__label { margin: 0 0 10px; color: var(--premium-brand); font-size: 13px; font-weight: 900; }
.premium-compare h3 { margin: 0; font-size: 27px; }
.premium-compare ul { display: grid; gap: 13px; margin: 26px 0 30px; padding: 0; list-style: none; }
.premium-compare li { position: relative; padding-left: 27px; line-height: 1.65; color: #485d55; }
.premium-compare li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--premium-green);
    font-weight: 900;
}
.premium-compare .premium-button { margin-top: auto; align-self: flex-start; }

.premium-section--stack {
    display: grid;
    grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}
.premium-stack__visual {
    position: relative;
    min-height: 390px;
    border-radius: 30px;
    background: linear-gradient(145deg, #e9f7f2, #fdfcf4);
    overflow: hidden;
}
.premium-stack__tile,
.premium-stack__history {
    position: absolute;
    background: #fff;
    box-shadow: 0 16px 40px rgba(29,68,57,.10);
}
.premium-stack__tile { top: 44px; left: 44px; display: grid; gap: 6px; padding: 20px 22px; border-radius: 22px; }
.premium-stack__tile span { font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.premium-stack__tile strong { color: var(--premium-green); font-size: 42px; }
.premium-stack__medal { position: absolute; width: 150px; height: 150px; right: 34px; top: 36px; object-fit: contain; }
.premium-stack__history { left: 70px; right: 52px; bottom: 44px; padding: 24px; border-radius: 24px; }
.premium-stack__history span { display: block; color: var(--premium-muted); font-size: 12px; font-weight: 800; }
.premium-stack__history strong { display: block; margin: 5px 0 18px; font-size: 23px; }
.premium-stack__history i { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: #e6eeea; }
.premium-stack__history i:nth-of-type(1) { width: 90%; background: #9dd8bd; }
.premium-stack__history i:nth-of-type(2) { width: 68%; background: #b9e1d0; }
.premium-stack__history i:nth-of-type(3) { width: 46%; }

.premium-section--characters { overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f6fbf8 100%); }
.premium-character-stage {
    display: grid;
    grid-template-columns: 1fr .8fr 1fr .8fr;
    align-items: end;
    gap: 14px;
    min-height: 360px;
    max-width: 900px;
    margin: 38px auto 0;
}
.premium-character-stage__item { height: 350px; display: flex; align-items: flex-end; justify-content: center; border-radius: 46% 46% 24px 24px; background: #edf8f4; overflow: hidden; }
.premium-character-stage__item:nth-child(2) { background: #fff3c9; }
.premium-character-stage__item:nth-child(3) { background: #fce7ee; }
.premium-character-stage__item:nth-child(4) { background: #e3f4fb; }
.premium-character-stage__item img { max-width: 95%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(29,68,57,.10)); }
.premium-character-stage__item--pet { height: 260px; align-self: end; }
.premium-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 920px;
    margin: 30px auto 0;
}
.premium-flow > div {
    position: relative;
    padding: 22px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--premium-line);
}
.premium-flow > div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -16px;
    top: 50%;
    width: 18px;
    height: 18px;
    border-top: 4px solid var(--premium-brand);
    border-right: 4px solid var(--premium-brand);
    transform: translateY(-50%) rotate(45deg);
    z-index: 3;
}
.premium-flow span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--premium-yellow); font-weight: 900; }
.premium-flow strong { display: block; margin: 12px 0 5px; font-size: 18px; }
.premium-flow small { color: var(--premium-muted); line-height: 1.55; }

.premium-section--origin {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
    gap: 46px;
    align-items: center;
    background: var(--premium-ink);
    color: #fff;
}
.premium-origin__copy p { color: #d9e6e1; }
.premium-origin__message { margin-top: 28px; font-size: 19px; }
.premium-origin__message strong { color: var(--premium-yellow); font-size: 24px; }
.premium-origin__badge {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px;
    border-radius: 50% 50% 28px 28px;
    background: var(--premium-yellow);
    color: var(--premium-ink);
    transform: rotate(2deg);
}
.premium-origin__badge span { font-size: 18px; font-weight: 800; }
.premium-origin__badge strong { margin-top: 8px; font-size: 34px; line-height: 1.2; }

.premium-section--field {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 52px;
    align-items: center;
}
.premium-field__quote {
    padding: 40px;
    border-radius: 28px;
    background: #eef9f5;
    font-size: 25px;
    line-height: 1.6;
}
.premium-field__quote p { margin: 0; }
.premium-field__quote strong { color: var(--premium-brand); }

.premium-section--subjects { background: #f9fbfa; }
.premium-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}
.premium-subject-grid > div { min-height: 150px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--premium-line); }
.premium-subject-grid span { color: var(--premium-brand); font-size: 13px; font-weight: 900; }
.premium-subject-grid strong { display: block; margin-top: 14px; font-size: 21px; line-height: 1.45; }
.premium-subject-grid__more { background: var(--premium-yellow) !important; border-color: transparent !important; }
.premium-subject-grid__more span { color: var(--premium-ink); }

.premium-section--future {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 50px;
    align-items: center;
    background: linear-gradient(135deg, #f0faf7, #fffaf0);
}
.premium-future__panel { padding: 38px; border-radius: 30px; background: #fff; box-shadow: 0 16px 40px rgba(29,68,57,.08); }
.premium-future__panel p { margin: 0 0 18px; font-size: 21px; line-height: 1.6; }
.premium-future__panel strong { color: var(--premium-brand); font-size: 27px; }
.premium-future__panel span { color: var(--premium-muted); line-height: 1.8; }

.premium-section--pricing { background: var(--premium-cream); }
.premium-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 820px; margin: 36px auto 0; }
.premium-price-card { position: relative; padding: 34px; border-radius: 28px; background: #fff; border: 1px solid var(--premium-line); text-align: center; }
.premium-price-card--recommended { border: 2px solid var(--premium-brand); box-shadow: 0 16px 38px rgba(7,137,138,.12); }
.premium-price-card__badge { position: absolute; top: -14px; left: 50%; margin: 0; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: var(--premium-brand); color: #fff; font-size: 12px; font-weight: 900; white-space: nowrap; }
.premium-price-card__name { margin: 0; font-weight: 900; }
.premium-price-card__amount { margin: 16px 0 12px; }
.premium-price-card__amount strong { font-size: 48px; letter-spacing: -.04em; }
.premium-price-card__amount span { margin-left: 5px; font-weight: 800; }
.premium-price-card > p:last-child { color: var(--premium-muted); }
.premium-pricing__action { margin-top: 34px; text-align: center; }
.premium-pricing__action p { margin-top: 14px; color: var(--premium-muted); font-size: 13px; }

.premium-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.premium-steps li { position: relative; min-height: 180px; padding: 24px; border-radius: 24px; background: #f7faf8; }
.premium-steps li:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 42px; width: 18px; height: 18px; border-top: 3px solid #b7c8c1; border-right: 3px solid #b7c8c1; transform: rotate(45deg); }
.premium-steps span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--premium-yellow); font-weight: 900; }
.premium-steps strong { display: block; margin-top: 20px; font-size: 18px; }
.premium-steps small { display: block; margin-top: 8px; color: var(--premium-muted); line-height: 1.55; }

.premium-faq-list { display: grid; gap: 12px; margin-top: 30px; }
.premium-faq-list details { border: 1px solid var(--premium-line); border-radius: 18px; background: #fff; }
.premium-faq-list summary { padding: 20px 22px; cursor: pointer; font-weight: 900; }
.premium-faq-list details p { margin: 0; padding: 0 22px 22px; color: #52655e; line-height: 1.85; }

.premium-final {
    position: relative;
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
    gap: 36px;
    align-items: center;
    margin-top: 48px;
    padding: 56px 64px;
    border-radius: 38px;
    overflow: hidden;
    background: var(--premium-ink);
    color: #fff;
}
.premium-final::after { content: ""; position: absolute; width: 280px; height: 280px; right: -90px; top: -110px; border-radius: 50%; background: var(--premium-yellow); opacity: .96; }
.premium-final__characters { position: relative; min-height: 350px; z-index: 2; }
.premium-final__characters img:first-child { position: absolute; height: 360px; width: auto; left: 10px; bottom: -42px; object-fit: contain; }
.premium-final__characters img:last-child { position: absolute; width: 170px; height: 170px; right: -2px; bottom: -5px; object-fit: contain; }
.premium-final__copy { position: relative; z-index: 2; }
.premium-final__copy > p:not(.premium-eyebrow):not(.premium-final__note) { color: #d9e6e1; line-height: 1.8; }
.premium-final__note { margin-top: 18px; color: #aebfb8; font-size: 12px; }
.premium-final__note a { color: #fff; }


@media (min-width: 921px) and (max-width: 1240px) {
    .premium-hero {
        grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
        gap: 28px;
        padding-inline: 46px;
    }
    .premium-hero h1 { font-size: clamp(46px, 5vw, 64px); }
    .premium-section { padding-inline: 46px; }
    .premium-section--stack,
    .premium-section--field,
    .premium-section--future { gap: 38px; }
    .premium-section--stack h2,
    .premium-section--field h2,
    .premium-section--future h2 { font-size: clamp(34px, 3.35vw, 44px); }
    .premium-field__quote { padding: 32px; font-size: 22px; }
    .premium-future__panel { padding: 32px; }
    .premium-future__panel strong { font-size: 24px; }
    .premium-final { grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr); padding-inline: 46px; }
    .premium-final h2 { font-size: clamp(36px, 3.7vw, 48px); }
}

@media (max-width: 920px) {
    .premium-hero { grid-template-columns: 1fr; padding: 48px 38px; }
    .premium-hero__visual { min-height: 430px; }
    .premium-section { padding: 52px 38px; }
    .premium-section--stack,
    .premium-section--origin,
    .premium-section--field,
    .premium-section--future,
    .premium-final { grid-template-columns: 1fr; }
    .premium-character-stage { grid-template-columns: repeat(4, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
    .premium-subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .premium-steps { grid-template-columns: repeat(2, 1fr); }
    .premium-steps li:nth-child(2)::after { display: none; }
    .premium-final__characters { min-height: 300px; }
}

@media (max-width: 680px) {
    .premium-landing { width: min(100% - 20px, 1180px); padding-top: 14px; }
    .premium-hero { min-height: auto; padding: 38px 22px 28px; border-radius: 28px; }
    .premium-hero h1 { font-size: clamp(40px, 13vw, 58px); }
    .premium-hero__lead { font-size: 16px; line-height: 1.8; }
    .premium-hero__actions { align-items: stretch; flex-direction: column; }
    .premium-button { width: 100%; }
    .premium-text-link { text-align: center; }
    .premium-hero__visual { min-height: 355px; margin-top: -10px; }
    .premium-character--avatar { height: 350px; left: 4%; }
    .premium-character--pet { width: 165px; height: 165px; right: -5%; }
    .premium-medal { width: 76px; height: 76px; }
    .premium-point-chip { top: 16%; left: 0; }
    .premium-section { margin-top: 28px; padding: 42px 22px; border-radius: 26px; }
    .premium-section h2, .premium-final h2 { font-size: 34px; }
    .premium-compare,
    .premium-price-grid,
    .premium-subject-grid,
    .premium-flow,
    .premium-steps { grid-template-columns: 1fr; }
    .premium-compare__card { min-height: auto; }
    .premium-section--stack { gap: 30px; }
    .premium-stack__visual { min-height: 330px; }
    .premium-stack__tile { top: 30px; left: 22px; }
    .premium-stack__medal { width: 120px; height: 120px; right: 18px; }
    .premium-stack__history { left: 24px; right: 24px; bottom: 30px; }
    .premium-character-stage { grid-template-columns: repeat(4, 150px); margin-inline: -8px; }
    .premium-character-stage__item { height: 280px; }
    .premium-character-stage__item--pet { height: 220px; }
    .premium-flow > div:not(:last-child)::after,
    .premium-steps li::after { display: none; }
    .premium-origin__badge { min-height: 200px; }
    .premium-field__quote { padding: 28px; font-size: 21px; }
    .premium-future__panel { padding: 28px; }
    .premium-final { min-height: auto; padding: 42px 22px; border-radius: 28px; }
    .premium-final__characters { min-height: 285px; }
    .premium-final__characters img:first-child { height: 300px; left: 8%; }
    .premium-final__characters img:last-child { width: 145px; height: 145px; right: 8%; }
}

@media (prefers-reduced-motion: reduce) {
    .premium-button { transition: none; }
}

@media (max-width: 420px) {
    .premium-final h2 .premium-nowrap { white-space: normal; display: inline; }
}