:root {
  --navy: #082f68;
  --navy-deep: #06275a;
  --blue: #0759aa;
  --red: #dd1238;
  --red-dark: #bd092c;
  --yellow: #ffe600;
  --ink: #112d59;
  --muted: #748193;
  --line: #cad8e6;
  --paper: #fff;
  --soft: #faf9f8;
  --page-width: 1080px;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: #f7fbfe; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #f7fbfe; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
em { color: var(--red); font-style: normal; }
br.sp-only, br.sp-break-narrow, br.sp-account-break, br.sp-card-note-break, br.sp-transaction-item-break, br.sp-point-option-break { display: none; }
br.sp-participation-break { display: none; }

.lp { position: relative; width: 100%; margin: 0; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fbfdff 0%, #fff 18%, #f7fbfe 43%, #f0f8fc 69%, #fff 100%); }
.lp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 93% 4.2%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
    radial-gradient(circle at 6% 30.5%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
    radial-gradient(circle at 94% 46%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
    radial-gradient(circle at 5% 61%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
    radial-gradient(circle at 95% 69%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
    radial-gradient(circle at 6% 90%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
    radial-gradient(circle at 5% 17%, rgba(49,142,196,.72) 0 4px, rgba(49,142,196,.18) 4.3px, transparent 5.2px),
    radial-gradient(circle at 95% 55%, rgba(49,142,196,.72) 0 4px, rgba(49,142,196,.18) 4.3px, transparent 5.2px),
    radial-gradient(circle at 5% 77%, rgba(49,142,196,.72) 0 4px, rgba(49,142,196,.18) 4.3px, transparent 5.2px),
    radial-gradient(circle at 94% 83%, rgba(49,142,196,.72) 0 4px, rgba(49,142,196,.18) 4.3px, transparent 5.2px),
    url("assets/backgrounds/city-flow-desktop.png");
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.lp > section, .lp > footer { position: relative; z-index: 1; }
.section-inner { width: min(100% - 80px, 900px); margin-inline: auto; }
.section-inner--narrow { max-width: 820px; }

.brand-row, .footer-brand { display: flex; align-items: center; gap: 20px; }
.bank-logo { width: 270px; height: auto; }
.brand-separator { color: #9aa4ad; font-size: 13px; }
.dpoint-lockup { display: flex; align-items: center; gap: 20px; color: #313941; font-size: 15px; font-weight: 800; white-space: nowrap; }
.dpoint-lockup img { width: 46px; height: auto; flex: 0 0 auto; object-fit: contain; }
.dpoint-lockup--horizontal img { width: 118px; }

.hero { overflow: hidden; background: transparent; }
.hero__inner { position: relative; min-height: 0; padding-top: 26px; padding-bottom: 38px; }
.hero .brand-row { justify-content: center; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding-top: 8px; }
.hero__copy { position: relative; z-index: 2; min-width: 0; text-align: center; }
.campaign-name { position: relative; z-index: 2; margin: 20px 0 0; line-height: 0; text-align: center; }
.campaign-name picture { display: block; }
.campaign-name img { width: min(100%, 760px); height: auto; margin-inline: auto; }
.hero-message { margin-bottom: 24px; color: var(--navy); font-size: 30px; font-weight: 900; letter-spacing: -.035em; line-height: 1.4; }
.hero-message span { display: block; white-space: nowrap; }
.hero-message em { font-size: 1.12em; }
.hero-points { display: flex; align-items: baseline; justify-content: center; gap: 7px; color: var(--red); line-height: 1; white-space: nowrap; }
.hero-points-lead { width: 390px; max-width: 100%; margin: 0 auto 4px; color: var(--navy); font-size: 15px; font-weight: 900; letter-spacing: .04em; text-align: center; }
.hero-points > span { color: var(--navy); font-size: 19px; font-weight: 900; }
.hero-points strong { font: 900 82px/1 Arial, sans-serif; letter-spacing: -.055em; }
.hero-points small { font-size: 15px; font-weight: 900; }
.hero-points-note { width: 390px; max-width: 100%; margin: 7px auto 0; color: #53677e; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.hero-combined-points { width: 390px; max-width: 100%; margin: 14px auto 0; padding-top: 12px; border-top: 1px solid rgba(104, 170, 214, .42); text-align: center; }
.hero-card-offer { margin: 0; color: var(--navy); font-size: 14px; font-weight: 900; }
.hero-card-points { margin: 1px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; color: #24669e; font-size: 12px; font-weight: 900; line-height: 1.3; }
.hero-card-points strong { display: inline-flex; align-items: baseline; gap: 2px; letter-spacing: -.025em; white-space: nowrap; }
.hero-card-points strong { color: var(--red); }
.hero-card-points .point-prefix { font-size: 12px; }
.hero-card-points .point-number { font: 900 21px/1 Arial, sans-serif; }
.hero-card-points .point-suffix { font-size: 11px; letter-spacing: 0; }
.hero-card-points--featured { margin: 7px 0 0; gap: 10px; font-size: 13px; }
.hero-card-points--featured .point-prefix { font-size: 13px; }
.hero-card-points--featured .point-number { font-size: 26px; }
.hero-card-points--featured .point-suffix { font-size: 12px; }
.period { width: 390px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 15px auto 20px; padding-top: 14px; border-top: 1px solid rgba(8, 47, 104, .18); }
.period__label { flex: none; color: var(--red); font-size: 15px; font-weight: 900; letter-spacing: .06em; line-height: 1.4; white-space: nowrap; }
.period__dates { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.period b { color: var(--navy); font: 900 24px/1 Arial, sans-serif; }
.period small { color: #52667e; font-size: 13px; font-weight: 900; line-height: 1; }
.period i { flex: none; width: 18px; height: 1px; margin: 0 1px; background: var(--navy); }

.action-button, .closing-button { min-height: 62px; padding: 16px 24px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; background: linear-gradient(135deg, var(--blue), #064287); box-shadow: 0 10px 23px rgba(6, 70, 140, .2); color: #fff; cursor: pointer; font: inherit; font-size: 16px; font-weight: 900; line-height: 1.35; text-align: center; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.hero__copy .action-button { width: 390px; max-width: 100%; }
.hero__copy .action-button--card-campaign { min-height: 54px; margin-top: 12px; border: 1px solid rgba(8,47,104,.45); background: rgba(255,255,255,.8); box-shadow: none; color: var(--navy); font-size: 14px; }
.hero__copy .action-button--card-campaign span { font-size: 23px; }
.hero__copy .action-button--card-campaign:hover { background: #fff; box-shadow: 0 8px 18px rgba(6,70,140,.12); }
.action-button span, .closing-button span { font: 400 27px/1 Arial, sans-serif; }
.action-button:hover, .closing-button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(6, 70, 140, .27); }
.action-button[aria-disabled="true"] { cursor: default; }
.action-button[aria-disabled="true"]:hover { transform: none; box-shadow: 0 10px 23px rgba(6, 70, 140, .2); }
.action-button:focus-visible, .closing-button:focus-visible, .floating-card-campaign:focus-visible, .card-campaign-modal__close:focus-visible, .card-modal-link:focus-visible, summary:focus-visible, input:focus-visible + .custom-check { outline: 4px solid var(--yellow); outline-offset: 3px; }

.poinco-stage { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.poinco-stage img { position: relative; z-index: 3; width: 470px; max-width: none; }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(9, 74, 145, .14); border-radius: 50%; transform: rotate(-15deg); }
.orbit--outer { inset: 0 -25% 5% -15%; }
.orbit--inner { inset: 14% -9% 18% 4%; }
.stage-dot { display: none; }
.stage-dot--red { top: 8%; left: 4%; width: 12px; height: 12px; background: #f17086; }
.stage-dot--blue { top: 14%; right: 0; width: 8px; height: 8px; background: #4a9fd1; }
.campaign-facts { position: relative; padding: 30px 0 34px; background: transparent; }
.campaign-facts::before, .campaign-facts::after { content: ""; position: absolute; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(8,47,104,.14), transparent); }
.campaign-facts::before { top: 0; }
.campaign-facts::after { bottom: 0; }
.campaign-facts h2 { margin-bottom: 25px; color: var(--navy); font-size: 24px; font-weight: 900; text-align: center; }
.campaign-facts dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.campaign-facts dl div { min-width: 0; padding: 4px 14px; border-left: 1px solid #dde4ea; text-align: center; }
.campaign-facts dl div:first-child { border-left: 0; }
.campaign-facts dt { margin-bottom: 6px; color: var(--muted); font-size: 14px; font-weight: 800; }
.campaign-facts dd { min-width: 0; margin: 0; color: var(--navy); font-size: 16px; font-weight: 900; line-height: 1.5; }
.campaign-facts dd.participation-method { text-align: center; }
.campaign-facts dd strong { color: var(--red); }
.campaign-facts dd small { font-size: 13px; }
.campaign-facts dd .expiry-note { display: inline-block; max-width: 100%; color: #52667e; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: normal; }
.campaign-facts dd .eligibility-note { display: block; width: 100%; max-width: 100%; margin-top: 4px; padding-left: 1em; color: #52667e; font-size: 11px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; text-align: left; text-indent: -1em; white-space: normal; }
.campaign-facts dd .participation-note { display: block; width: 100%; max-width: 100%; margin-top: 4px; color: var(--red); font-size: 16px; font-weight: 900; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; text-align: center; white-space: normal; }

.account { background: transparent; }
.account__grid { min-height: 720px; padding-block: 48px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.account h2, .section-heading h2, .point-summary h2, .details-section h2, .closing h2 { color: var(--navy); font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: 1.42; }
.account h2 { margin-bottom: 0; }
.account-points { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; color: var(--red); }
.account-points strong { font: 900 76px/1 Arial, sans-serif; letter-spacing: -.04em; }
.account-points span { font-size: 16px; font-weight: 900; }
.account-requirements { margin: 4px 0 23px; padding-left: 16px; border-left: 3px solid var(--red); }
.account-note { margin-bottom: 6px; font-size: 17px; font-weight: 900; line-height: 1.6; }
.account-guide { margin-bottom: 0; color: #53677e; font-size: 15px; font-weight: 800; line-height: 1.65; }
.account .action-button { padding-inline: 18px; gap: 12px; font-size: 14px; white-space: nowrap; }
.phone-figure { margin-bottom: 0; justify-self: end; }
.phone { position: relative; width: 330px; padding: 18px 13px 14px; border: 10px solid #101923; border-radius: 45px; background: #fff; box-shadow: 0 15px 32px rgba(9, 33, 61, .16); }
.phone__speaker { position: absolute; top: 4px; left: 50%; width: 68px; height: 5px; z-index: 2; border-radius: 99px; background: #abb5bf; transform: translateX(-50%); }
.phone img { width: 100%; border-radius: 21px; }
.phone-figure figcaption { margin-top: 8px; color: #929aa4; font-size: 12px; text-align: right; }

.next-line { background: transparent; }
.next-line .section-inner { height: 60px; display: flex; align-items: center; gap: 8px; color: var(--red); font-size: 14px; }
.next-line b { font: 900 13px/1 Arial, sans-serif; }
.next-line i { height: 1px; flex: 1; margin-left: 10px; background: #e1e6eb; }

.transactions { padding-top: 52px; background: transparent; }
.transactions__intro { margin-bottom: 30px; color: #68788a; font-size: 15px; }
.section-heading { margin-bottom: 22px; }
.section-heading h2 { margin-bottom: 4px; }
#transactions-title .sp-line { display: block; white-space: nowrap; }
.section-heading > p:last-child { margin-bottom: 0; font-size: 16px; }
.transaction-table { border-top: 1px solid var(--line); }
.transaction-row { min-height: 145px; padding: 26px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 260px 1fr; gap: 34px; }
.transaction-category { display: flex; align-items: center; gap: 16px; }
.transaction-category img { width: 74px; height: 74px; flex: 0 0 auto; }
.transaction-category h3 { margin: 0; font-size: 21px; line-height: 1.5; }
.transaction-row dl { margin-bottom: 0; display: grid; align-content: center; }
.transaction-row dl div { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.transaction-row dt { font-size: 17px; font-weight: 800; white-space: nowrap; }
.transaction-row dd { color: var(--red); font: 900 25px/1.2 Arial, sans-serif; white-space: nowrap; }
.transaction-row dd small { font: 900 12px/1 "Yu Gothic", sans-serif; }
.card-bonus-intro { position: relative; z-index: 1; width: fit-content; max-width: calc(100% - 28px); min-height: 38px; margin: 36px auto -19px; padding: 8px 19px 8px 13px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(135deg, #f51d4d, #dc0a39); box-shadow: 0 6px 13px rgba(220, 10, 57, .22); color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .04em; }
.card-bonus-intro span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.24); color: #fff; font: 900 17px/1 Arial, sans-serif; letter-spacing: 0; }
.card-bonus-intro strong { font: inherit; }
.card-bonus { min-height: 114px; margin: 0; padding: 39px 28px 15px; border-radius: 6px 6px 0 0; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--blue), #064287); box-shadow: 0 10px 24px rgba(6, 70, 140, .2); color: #fff; text-align: center; }
.card-bonus__label { display: grid; justify-items: center; gap: 4px; }
.card-bonus__label span { font-size: 17px; font-weight: 900; }
.card-bonus__label small { color: rgba(255,255,255,.78); font-size: 13px; font-weight: 800; }
.card-bonus strong { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; font: 900 38px/1 Arial, sans-serif; white-space: nowrap; }
.card-bonus strong small { font-size: 13px; }
.card-bonus strong .card-bonus__max { font-size: 14px; }

@media (min-width: 821px) {
  .card-bonus-intro { margin-left: 34px; margin-right: 0; }
  .card-bonus { min-height: 110px; padding: 39px 34px 17px; grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; gap: 30px; text-align: left; }
  .card-bonus__label { justify-items: start; text-align: left; }
  .card-bonus strong { justify-self: end; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-section { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .82s ease, transform .82s cubic-bezier(.22, .75, .25, 1); will-change: opacity, transform; }
  .reveal-section.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; }
  .poinco-stage img, .phone-figure { transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; }
}

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .lp::before { transform: translate3d(0, var(--parallax-background-y, 0px), 0) scale(1.025); transform-origin: center top; }
}

.join { padding: 64px 0 60px; background: transparent; }
.section-heading--left { text-align: left; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { min-height: 82px; margin-bottom: 0; padding: 15px 30px; border-bottom: 1px solid rgba(8,47,104,.12); display: grid; grid-template-columns: 95px 62px 1fr; align-items: center; gap: 20px; background: transparent; }
.steps li:first-child { border-top: 1px solid rgba(8,47,104,.12); }
.step-no { color: #cbd3dc; font: 500 39px/1 Georgia, serif; }
.steps img { width: 36px; max-height: 50px; justify-self: center; }
.steps img[src*="dpoint-"] { width: 34px; }
.steps strong { font-size: 18px; }
.entry-notice { min-height: 52px; margin-top: 22px; padding: 10px 15px; border: 1.5px solid #ff6178; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--red); font-size: 15px; text-align: center; }
.entry-notice span { width: 18px; height: 18px; border: 1px solid var(--red); border-radius: 50%; display: grid; flex: 0 0 auto; place-items: center; font: 900 11px/1 Arial, sans-serif; }
.fine-print { margin: 22px 0 0; color: #6f7d8c; font-size: 14px; }

.point-check { position: relative; padding: 88px 0; background: transparent; color: #fff; isolation: isolate; }
.point-check::before { content: ""; position: absolute; top: 38px; bottom: 38px; left: 50%; width: min(calc(100% - 48px), 1020px); z-index: -1; border-radius: 115px 34px 115px 34px / 86px 34px 86px 34px; background: radial-gradient(circle at 88% 18%, rgba(69,142,207,.32), transparent 29%), radial-gradient(circle at 8% 86%, rgba(12,78,148,.8), transparent 34%), linear-gradient(135deg, #052b60, #074886); box-shadow: 0 24px 55px rgba(5,41,92,.2); transform: translateX(-50%); }
.point-check__grid { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; }
.point-summary, .point-options { min-width: 0; }
.point-summary h2 { margin-bottom: 7px; color: #fff; font-size: 31px; }
.point-summary h2 span { display: block; white-space: nowrap; }
.point-summary > p { margin-bottom: 23px; color: rgba(255,255,255,.82); font-size: 15px; }
.point-summary__campaign { display: block; color: #fff; font-weight: 900; }
.point-summary__limit { display: block; margin: 2px 0 7px; color: rgba(255,255,255,.78); font-size: 14px; font-weight: 800; }
.point-total { width: 310px; max-width: 100%; padding: 15px 21px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 5px; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.point-total span { grid-column: 1 / -1; font-size: 15px; text-align: center; }
.point-total strong { justify-self: end; color: #f01742; font: 900 60px/1 Arial, sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.point-total small { padding-bottom: 6px; color: #f01742; font-size: 13px; font-weight: 900; }
.point-summary > .point-total-note { width: 310px; max-width: 100%; margin: 9px 0 0; color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; line-height: 1.7; }
.point-options { margin: 0; padding: 0; border: 0; }
.point-options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.point-options label { position: relative; min-height: 54px; margin: 0 -8px; padding: 8px; border-radius: 5px; display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 10px; cursor: pointer; transition: background .15s ease; }
.point-options label:hover { background: rgba(255,255,255,.1); }
.point-options label.is-disabled { opacity: .58; cursor: not-allowed; }
.point-options label.is-disabled:hover { background: transparent; }
.point-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.custom-check { width: 21px; height: 21px; border: 2px solid #fff; display: grid; place-items: center; background: #fff; }
.point-options input:checked + .custom-check::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg) translateY(-1px); }
.point-options input:not(:checked) + .custom-check { background: transparent; }
.point-options b { font-size: 16px; }
.point-options label > strong { font: 900 15px/1 Arial, sans-serif; white-space: nowrap; }
.point-options > p { margin: 12px 0 0; color: rgba(255,255,255,.72); font-size: 13px; text-align: right; }
.point-options > .point-options__entry-note { margin-top: 3px; }

.details-section { padding: 64px 0 72px; border-top: 0; background: transparent; }
.details-section h2 { margin-bottom: 32px; font-size: 36px; }
.details-section h2 span { white-space: nowrap; }
.details-list { border-top: 1px solid #d8e0e8; }
.details-list details { border-bottom: 1px solid #d8e0e8; }
.details-list summary { position: relative; min-height: 66px; padding: 20px 50px 20px 6px; cursor: pointer; color: var(--navy); font-size: 16px; font-weight: 900; list-style: none; }
.details-list summary::-webkit-details-marker { display: none; }
.details-list summary::after { content: "›"; position: absolute; top: 50%; right: 10px; color: #a0aab4; font: 400 21px/1 Arial, sans-serif; transform: translateY(-50%); }
.details-list details[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.details-content { padding: 2px 12px 27px 4px; color: #526173; }
.details-content section + section { margin-top: 20px; }
.details-content h3 { margin: 0 0 7px; color: var(--navy); font-size: 18px; font-weight: 900; line-height: 1.55; }
.details-content h3 small { font-size: 14px; font-weight: 800; white-space: nowrap; }
.details-list .details-content p { margin: 0; padding: 0; color: #526173; font-size: 15px; line-height: 1.85; }
.details-list .details-content .schedule-summary { margin-bottom: 8px; }
.criteria-content section p + p { margin-top: 8px; }
.card-benefit-content p + p { margin-top: 8px; }
.criteria-content .keep-word { white-space: nowrap; }
.criteria-tiers { margin: 9px 0 0; padding: 0; }
.criteria-tiers li { padding-left: 0; font-weight: 800; }
.details-list .details-content .hanging-marker--dot { padding-left: 1em; text-indent: -1em; }
.details-list .details-content .hanging-marker--note { padding-left: 1em; text-indent: -1em; }
.details-list .details-content .marker-notes > span { display: block; padding-left: 2em; text-indent: -2em; }
.details-list .details-content .marker-notes--plain > span { padding-left: 1em; text-indent: -1em; }
.details-content ul { margin: 0; padding: 0; list-style: none; }
.details-content li { position: relative; padding-left: 1.25em; color: #526173; font-size: 15px; line-height: 1.9; }
.details-content li + li { margin-top: 7px; }
.notice-content li::before { content: "〇"; position: absolute; left: 0; }
.investment-content li::before { content: "○"; position: absolute; left: 0; }
.investment-content > p:first-child { margin-bottom: 8px; color: var(--navy); font-weight: 800; }
.details-list .details-content .investment-registration { margin: 14px 0 0; color: var(--navy); font-weight: 700; line-height: 1.75; }
.details-list .details-content .document-note { margin-top: 13px; padding-left: 1.2em; color: var(--navy); text-indent: -1.2em; }

.closing { position: relative; padding: 64px 0; background: transparent; color: #fff; text-align: center; isolation: isolate; }
.closing::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: min(calc(100% - 48px), 700px); z-index: -1; border-radius: 34px 92px 34px 92px / 34px 64px 34px 64px; background: radial-gradient(circle at 91% 26%, rgba(255,255,255,.72) 0 1px, transparent 2px), radial-gradient(circle at 11% 78%, rgba(67,145,216,.36), transparent 30%), linear-gradient(125deg, #073779, #0762ad); box-shadow: 0 20px 44px rgba(5,41,92,.18); transform: translateX(-50%); }
.closing::after { content: ""; position: absolute; right: max(calc((100% - 650px) / 2), 48px); bottom: 36px; width: 120px; height: 120px; z-index: -1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.closing h2 { margin-bottom: 24px; color: #fff; font-size: 29px; }
.closing-title-line { white-space: nowrap; }
.closing-actions { width: min(100%, 430px); margin-inline: auto; display: grid; gap: 14px; }
.closing-button { width: 100%; min-height: 62px; background: #fff; box-shadow: 0 9px 20px rgba(2,23,52,.2); color: var(--blue); font-size: 16px; }
.closing-button--entry { color: var(--red); }
.closing-button--entry[aria-disabled="true"] { cursor: default; }
.closing-button--entry[aria-disabled="true"]:hover { transform: none; box-shadow: 0 9px 20px rgba(2,23,52,.2); }
.closing-button--app { border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.08); box-shadow: none; color: #fff; }
.closing-button--app:hover { box-shadow: 0 10px 24px rgba(2,23,52,.16); }
.floating-actions { position: fixed; right: 24px; bottom: 24px; z-index: 20; width: min(320px, calc(100vw - 48px)); display: grid; gap: 9px; }
.floating-entry, .floating-card-campaign { width: 100%; opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity .2s ease, transform .2s ease; visibility: hidden; }
.floating-actions.is-visible .floating-entry, .floating-actions.is-visible .floating-card-campaign { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.floating-entry { position: relative; min-height: 82px; padding: 18px 48px 18px 28px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 13px; background: linear-gradient(135deg, #ed2450, #cf0835); box-shadow: 0 14px 30px rgba(205, 8, 53, .26), inset 0 1px 0 rgba(255,255,255,.24); color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .035em; line-height: 1.35; text-align: center; text-decoration: none; }
.floating-entry[aria-disabled="true"] { cursor: default; }
.floating-entry[aria-disabled="true"]:hover { transform: translateY(0); }
.floating-entry > span:last-child { border: 1px solid transparent; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.floating-card-campaign { position: relative; min-height: 64px; padding: 12px 48px 12px 14px; border: 1px solid rgba(8,47,104,.52); border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.94); box-shadow: 0 10px 22px rgba(5,41,92,.14); color: var(--navy); cursor: pointer; font: inherit; font-size: 13px; font-weight: 900; line-height: 1.35; text-align: center; text-decoration: none; }
.floating-card-campaign__label span { display: inline; white-space: nowrap; }
.floating-card-campaign__label span + span::before { content: " "; }
.floating-card-campaign > span:last-child { border: 1px solid rgba(8,47,104,.22); border-radius: 50%; display: grid; place-items: center; color: var(--blue); }
.floating-entry > span:last-child, .floating-card-campaign > span:last-child { position: absolute; top: 50%; right: 18px; width: 24px; height: 24px; transform: translateY(-50%); }
.floating-entry > span:last-child svg, .floating-card-campaign > span:last-child svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.card-campaign-modal { position: fixed; inset: 0; z-index: 40; padding: 32px 20px; display: grid; place-items: center; background: rgba(3,29,67,.52); backdrop-filter: blur(5px); }
.card-campaign-modal[hidden] { display: none; }
.card-campaign-modal__dialog { position: relative; width: min(100%, 680px); padding: 38px 42px 28px; border: 1px solid rgba(255,255,255,.86); border-radius: 28px; background: rgba(255,255,255,.98); box-shadow: 0 24px 56px rgba(2,23,52,.28); color: var(--navy); }
.card-campaign-modal__close { position: absolute; top: 15px; right: 16px; width: 36px; height: 36px; padding: 0; border: 1px solid #d5dee8; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; font: 400 26px/1 Arial, sans-serif; }
.card-campaign-modal__eyebrow { margin: 0 0 7px; color: var(--red); font-size: 13px; font-weight: 900; letter-spacing: .11em; }
.card-campaign-modal h2 { margin: 0; font-size: 28px; line-height: 1.35; }
.card-campaign-modal__lead { margin: 8px 0 22px; color: #596b80; font-size: 15px; font-weight: 700; }
.card-campaign-modal__links { display: grid; gap: 13px; }
.card-modal-link { position: relative; min-width: 0; text-decoration: none; }
.card-modal-link--campaign { min-height: 112px; padding: 19px 66px 18px 24px; border-radius: 18px; display: grid; align-content: center; gap: 5px; background: linear-gradient(135deg, #0b579e, #073f7e); box-shadow: 0 10px 20px rgba(5,71,139,.18); color: #fff; }
.card-modal-link--campaign span { color: rgba(255,255,255,.78); font-size: 13px; font-weight: 800; }
.card-modal-link--campaign strong { font-size: 22px; letter-spacing: -.02em; }
.card-modal-link--campaign > i { position: absolute; top: 50%; right: 24px; width: 33px; height: 33px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; display: grid; place-items: center; color: #fff; font: 400 21px/1 Arial, sans-serif; transform: translateY(-50%); }
.card-modal-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.card-modal-link--product { min-height: 136px; padding: 18px 20px; border: 1px solid #cad8e5; border-radius: 18px; display: grid; align-content: start; gap: 7px; background: #fff; box-shadow: 0 8px 18px rgba(5,41,92,.08); color: var(--navy); }
.card-modal-link--product > span { color: #63758b; font-size: 12px; font-weight: 800; }
.card-modal-link--product strong { font-size: 20px; letter-spacing: -.02em; }
.card-modal-link--product small { margin-top: auto; color: var(--blue); font-size: 12px; font-weight: 900; }
.card-modal-link--product small b { display: inline-block; margin-left: 3px; font-size: 14px; }
.card-campaign-modal__product-note { margin: 12px 0 0; color: #62748a; font-size: 12px; font-weight: 800; text-align: center; }
.card-campaign-modal__external-note { margin: 13px 0 0; padding: 14px 14px 0; border-top: 1px solid #dde5ed; color: var(--red); font-size: 12px; font-weight: 800; line-height: 1.65; text-align: center; }
body.is-modal-open { overflow: hidden; }
footer { padding: 26px 0; background: rgba(255,255,255,.82); }
.footer__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.footer-brand { justify-content: center; }
.footer-bank { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.footer__inner .bank-logo { width: 205px; }
.footer__inner .dpoint-lockup img { width: 36px; height: auto; }
.footer__inner .dpoint-lockup--horizontal img { width: 106px; }
.footer-copyright { color: #7f8994; font-size: 10px; line-height: 1.35; white-space: nowrap; }
.footer__inner p { margin: 0; color: #7f8994; font-size: 12px; text-align: center; }

@media (min-width: 821px) and (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .poinco-stage img { width: min(100%, 470px); max-width: 100%; }
}

@media (max-width: 820px) {
  html, body { background: #fff; }
  .lp { width: 100%; box-shadow: none; }
  .lp::before {
    background-image:
      radial-gradient(circle at 97% 30.8%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
      radial-gradient(circle at 3% 47.4%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
      radial-gradient(circle at 97% 60.2%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
      radial-gradient(circle at 3% 77.2%, rgba(241,91,116,.82) 0 5px, rgba(241,91,116,.2) 5.4px, transparent 6.2px),
      radial-gradient(circle at 97% 12.8%, rgba(49,142,196,.72) 0 4px, rgba(49,142,196,.18) 4.3px, transparent 5.2px),
      radial-gradient(circle at 3% 55.1%, rgba(49,142,196,.72) 0 4px, rgba(49,142,196,.18) 4.3px, transparent 5.2px),
      url("assets/backgrounds/city-flow-mobile.png");
  }
  .section-inner { width: min(100% - 28px, 560px); }
  .bank-logo { width: 168px; }
  .brand-row, .footer-brand { gap: 14px; }
  .dpoint-lockup { gap: 14px; }
  .dpoint-lockup img { width: 35px; height: auto; }
  .dpoint-lockup--horizontal img, .footer__inner .dpoint-lockup--horizontal img { width: 88px; }
  .hero__inner { min-height: 0; padding-top: 18px; padding-bottom: 50px; }
  .hero__grid { grid-template-columns: 1fr; align-items: stretch; gap: 18px; padding-top: 10px; }
  .campaign-name { margin-top: 16px; }
  .campaign-name img { width: min(100%, 560px); }
  .hero-message { font-size: clamp(28px, 7.7vw, 34px); line-height: 1.4; }
  .hero-points strong { font-size: clamp(66px, 18vw, 82px); }
  .hero-points > span { font-size: 17px; }
  .hero-points small { font-size: 14px; }
  .hero-points-note { font-size: 13px; }
  .period { width: 100%; gap: 7px; }
  .period__label { font-size: 14px; }
  .period__dates { gap: 7px; }
  .period b { font-size: 24px; }
  .period small { font-size: 13px; }
  .action-button { width: 100%; }
  .poinco-stage { min-height: 360px; }
  .poinco-stage img { width: min(119%, 500px); }
  .campaign-facts { padding-block: 30px; }
  .campaign-facts dl { grid-template-columns: 1fr; gap: 0; }
  .campaign-facts dl div { min-height: 68px; padding: 13px 4px; border-top: 1px solid #dde4ea; border-left: 0; display: grid; grid-template-columns: 42% 1fr; align-items: center; text-align: left; }
  .campaign-facts dl div:first-child { border-top: 0; }
  .campaign-facts dt { margin: 0; font-size: 15px; }
  .campaign-facts dd { font-size: 16px; text-align: right; }
  .account__grid { min-height: 0; padding-block: 54px; grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .account__copy { min-width: 0; }
  .account .action-button { font-size: 15px; white-space: normal; }
  .phone-figure { justify-self: center; }
  .phone { width: min(82vw, 320px); }
  .transactions { padding-top: 48px; }
  .transaction-row { grid-template-columns: 1fr; gap: 18px; padding-block: 30px; }
  .transaction-category h3 br { display: none; }
  .transaction-row dl { width: 100%; padding-left: 0; }
  br.sp-transaction-item-break, br.sp-point-option-break { display: inline; }
  .transaction-row dl div { min-height: 58px; padding: 9px 4px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border-top: 1px solid rgba(104,170,214,.34); }
  .transaction-row dl div:first-child { border-top: 0; }
  .transaction-row dt { white-space: normal; }
  .transaction-row dd { min-width: 95px; padding: 0; text-align: right; }
  .card-bonus { min-height: 108px; grid-template-columns: 1fr; gap: 7px; padding: 37px 14px 14px; }
  .card-bonus strong { font-size: 30px; }
  .card-bonus strong small { font-size: 12px; }
  .card-bonus strong .card-bonus__max { font-size: 12px; }
  .steps li { min-height: 88px; grid-template-columns: 56px 44px 1fr; gap: 10px; padding: 16px 12px; }
  .step-no { font-size: 31px; }
  .steps strong { font-size: 16px; line-height: 1.65; }
  .entry-notice { min-height: 58px; font-size: 15px; }
  .fine-print { font-size: 14px; line-height: 1.85; }
  .point-check__grid { grid-template-columns: 1fr; gap: 44px; }
  .point-check { padding-block: 72px; }
  .point-check::before { top: 24px; bottom: 24px; width: calc(100% - 20px); border-radius: 58px 16px 58px 16px / 45px 16px 45px 16px; }
  .point-total { max-width: none; }
  .point-summary h2 { font-size: clamp(27px, 8vw, 31px); }
  .point-summary > p { font-size: 16px; }
  .point-options label { min-height: 64px; margin-inline: -5px; padding: 10px 5px; grid-template-columns: 23px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; }
  .point-options b { font-size: 15px; line-height: 1.55; }
  .point-options label > strong { grid-column: auto; align-self: center; justify-self: end; font-size: 16px; }
  .point-options > p { font-size: 13px; line-height: 1.7; }
  .details-section { padding-block: 64px 72px; }
  .details-section h2 { font-size: 34px; }
  .details-section h2 span { display: block; }
  .details-list summary { min-height: 70px; padding-block: 21px; font-size: 16px; }
  .details-list .details-content p, .details-content li { font-size: 15px; }
  .closing-button { min-width: 0; width: 100%; }
  .closing { padding-block: 58px; }
  .closing-title-line { display: block; }
  .closing::before { top: 18px; bottom: 18px; width: calc(100% - 20px); border-radius: 24px 58px 24px 58px / 24px 46px 24px 46px; }
  .closing::after { right: 18px; bottom: 28px; width: 90px; height: 90px; }
  .footer__inner { flex-wrap: wrap; }
  .footer__inner .bank-logo { width: 168px; }
  .footer__inner p { width: 100%; margin: 5px 0 0; text-align: center; }
}

@media (max-width: 390px) {
  .hero-message { font-size: 28px; }
  .hero-message span { white-space: normal; }
  .hero-points { gap: 5px; }
  .hero-points strong { font-size: 64px; }
  .period__dates { gap: 4px; }
  .period__label { font-size: 14px; }
  .period b { font-size: 21px; }
  .period small { font-size: 12px; }
  .period i { width: 14px; margin-inline: 0; }
  .poinco-stage { min-height: 315px; }
  .transaction-row dt { font-size: 15px; }
  .transaction-row dd { font-size: 22px; }
  .entry-notice { align-items: flex-start; text-align: left; }
  .point-options b { font-size: 14px; }
  .point-options label > strong { font-size: 15px; }
}

@media (max-width: 350px) {
  .period__dates { gap: 3px; }
  .period b { font-size: 18px; }
  .period small { font-size: 11px; }
  .period i { width: 10px; }
  .closing h2 { font-size: 25px; }
  .campaign-facts dl div { grid-template-columns: 39% 1fr; }
  .campaign-facts dd small { font-size: 12px; white-space: nowrap; }
}

/* Smartphone-only refinements. Desktop and tablet layouts remain unchanged. */
@media (max-width: 560px) {
  /* Keep the flowing background but remove edge dots that can resemble bullets. */
  .lp::before {
    background-image: url("assets/backgrounds/city-flow-mobile.png");
  }

  .section-inner { width: min(100% - 32px, 528px); }

  .hero__inner { padding-top: 16px; padding-bottom: 22px; }
  .campaign-name { margin-top: 12px; }
  .hero__grid { gap: 12px; padding-top: 8px; }
  .hero__copy::before { content: ""; position: absolute; z-index: -1; inset: 7% -12% -3%; background: radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.96) 0 48%, rgba(255,255,255,.7) 64%, rgba(255,255,255,0) 79%); pointer-events: none; }
  .hero-points-lead { margin-bottom: 5px; font-size: 13px; letter-spacing: .02em; }
  .hero-points { gap: 5px; }
  .hero-points > span { font-size: 15px; }
  .hero-points strong { font-size: clamp(62px, 16.3vw, 70px); }
  .hero-points small { font-size: 12px; }
  .hero-combined-points { margin-top: 12px; padding-top: 10px; }
  .hero-card-offer { font-size: 13px; }
  .hero-card-points { gap: 6px; font-size: 11px; }
  .hero-card-points .point-number { font-size: 19px; }
  .hero-card-points--featured { margin-top: 6px; gap: 8px; font-size: 12px; }
  .hero-card-points--featured .point-prefix { font-size: 12px; }
  .hero-card-points--featured .point-number { font-size: 24px; }
  .hero-card-points--featured .point-suffix { font-size: 11px; }
  .poinco-stage { min-height: 220px; }
  .poinco-stage::before { content: ""; position: absolute; z-index: 0; width: min(76vw, 300px); aspect-ratio: 1.38; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,221,102,.54) 0, rgba(255,236,163,.34) 47%, rgba(255,248,220,0) 76%); filter: blur(4px); pointer-events: none; transform: translateY(10px); }
  .poinco-stage img { width: min(82%, 330px); }

  .campaign-facts { padding-block: 26px; }
  .campaign-facts h2 { margin-bottom: 18px; }
  .campaign-facts dl div { min-height: 62px; padding: 10px 4px; display: grid; grid-template-columns: 42% 1fr; align-items: center; }
  .campaign-facts dt { margin: 0; font-size: 14px; }
  .campaign-facts dd { font-size: 16px; text-align: center; }
  br.sp-participation-break { display: inline; }

  .account__grid { padding-block: 36px; gap: 24px; }
  .account h2 { font-size: clamp(30px, 8vw, 32px); }
  .account-points { gap: 7px; }
  .account-points span { transform: translateY(-2px); }
  .account-requirements { margin-top: 5px; padding-left: 13px; }
  .phone { width: min(70vw, 252px); padding: 14px 10px 11px; border-width: 7px; border-radius: 34px; }
  .phone img { border-radius: 18px; }

  .transactions { padding-top: 40px; }
  .transactions__intro { margin-bottom: 20px; }
  br.sp-only, br.sp-card-note-break, br.sp-transaction-item-break, br.sp-point-option-break { display: inline; }
  #transactions-title { font-size: 27px; line-height: 1.5; letter-spacing: -.04em; }
  #transactions-title .sp-line { display: block; white-space: nowrap; }
  #transactions-title .sp-line--prefix { white-space: normal; }
  #transactions-title .sp-transaction-title-unit { display: block; white-space: nowrap; }
  .transaction-row { gap: 14px; padding-block: 24px; }
  .card-bonus-intro { min-height: 34px; margin-top: 28px; margin-bottom: -17px; padding: 7px 15px 7px 11px; font-size: 12px; }
  .card-bonus-intro span { width: 18px; height: 18px; font-size: 15px; }
  .card-bonus { row-gap: 4px; margin-top: 0; }
  .card-bonus strong { grid-column: auto; align-self: auto; justify-self: center; }

  .join { padding: 52px 0 48px; }

  .point-check { padding-block: 64px; }
  .point-check::before { top: 18px; bottom: 18px; }
  .point-check__grid { gap: 32px; }
  .point-summary > p { margin-bottom: 18px; }
  .point-total { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 7px; row-gap: 5px; }
  .point-total span { flex-basis: 100%; line-height: 1; }
  .point-total strong { justify-self: auto; }
  .point-options b { font-size: 15px; }

  .details-section { padding: 54px 0 62px; }
  .details-section h2 { margin-bottom: 26px; font-size: 32px; }
  .criteria-content h3 { font-size: 17px; overflow-wrap: normal; word-break: normal; }
  .criteria-content h3 small { display: block; margin-top: 2px; white-space: nowrap; }
  .details-content { padding-right: 4px; }

  .floating-actions { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: 230px; gap: 6px; }
  .floating-entry { min-height: 52px; padding: 10px 40px 10px 12px; border-radius: 50%; font-size: 12px; }
  .floating-card-campaign { min-height: 52px; padding: 8px 40px 8px 11px; border-radius: 50%; font-size: 11px; }
  .floating-card-campaign__label span { display: block; }
  .floating-card-campaign__label span + span::before { content: none; }
  .floating-entry > span:last-child, .floating-card-campaign > span:last-child { right: 15px; width: 20px; height: 20px; }
  .card-campaign-modal { padding: 20px 16px; }
  .card-campaign-modal__dialog { padding: 32px 20px 22px; border-radius: 22px; }
  .card-campaign-modal__close { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 23px; }
  .card-campaign-modal__eyebrow { margin-bottom: 5px; font-size: 11px; }
  .card-campaign-modal h2 { padding-right: 30px; font-size: 23px; }
  .card-campaign-modal__lead { margin: 7px 0 17px; font-size: 13px; }
  .card-campaign-modal__links { gap: 10px; }
  .card-modal-link--campaign { min-height: 92px; padding: 16px 53px 15px 18px; border-radius: 14px; }
  .card-modal-link--campaign span { font-size: 11px; }
  .card-modal-link--campaign strong { font-size: 18px; }
  .card-modal-link--campaign > i { right: 17px; width: 27px; height: 27px; font-size: 18px; }
  .card-modal-link-grid { gap: 10px; }
  .card-modal-link--product { min-height: 117px; padding: 15px 13px; border-radius: 14px; gap: 5px; }
  .card-modal-link--product > span, .card-modal-link--product small { font-size: 10px; }
  .card-modal-link--product strong { font-size: 16px; }
  .card-campaign-modal__product-note { margin-top: 10px; font-size: 10px; }
  .card-campaign-modal__external-note { margin-top: 10px; padding: 10px 0 0; font-size: 10px; line-height: 1.55; }
  footer { padding: 20px 0 max(114px, calc(102px + env(safe-area-inset-bottom))); }
  .footer-brand { flex-wrap: wrap; row-gap: 4px; }
  .footer-bank { display: contents; }
  .footer__inner .bank-logo { order: 1; width: 152px; }
  .footer-brand .brand-separator { order: 2; }
  .footer-brand .dpoint-lockup { order: 3; }
  .footer-copyright { order: 4; flex-basis: 100%; font-size: 9px; text-align: center; }
}

@media (max-width: 350px) {
  br.sp-break-narrow, br.sp-account-break { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .action-button, .closing-button, .floating-entry { transition: none; }
}