:root {
  --nxp-ink: #243149;
  --nxp-muted: #70798b;
  --nxp-border: #dfe4ee;
  --nxp-paper: #ffffff;
  --nxp-bg: #f7f8fb;
  --nxp-purple: #7561b7;
  --nxp-purple-dark: #604ba4;
  --nxp-mint: #eaf8f3;
  --nxp-blue: #edf5ff;
  --nxp-peach: #fff3e8;
  --nxp-lilac: #f1edff;
  --nxp-shadow: 0 24px 70px rgba(45, 54, 78, .10);
}

.nxp-shell, .nxp-shell * { box-sizing: border-box; }
.nxp-shell {
  position: relative; overflow: hidden; max-width: 1180px; margin: 32px auto;
  padding: clamp(20px, 4vw, 54px); color: var(--nxp-ink); background: var(--nxp-bg);
  border: 1px solid #edf0f5; border-radius: 30px; box-shadow: var(--nxp-shadow);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
.nxp-ambient { position:absolute; border-radius:999px; filter:blur(2px); pointer-events:none; opacity:.7; }
.nxp-ambient-a { width:280px; height:280px; right:-120px; top:-120px; background:#e6ddff; }
.nxp-ambient-b { width:220px; height:220px; left:-130px; bottom:120px; background:#dff7ee; }
.nxp-hero, .nxp-progress, .nxp-form { position:relative; z-index:1; }
.nxp-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:32px; }
.nxp-eyebrow { color:var(--nxp-purple); font-size:11px; font-weight:800; letter-spacing:.16em; }
.nxp-hero h1 { margin:7px 0 6px; font-size:clamp(25px, 4vw, 42px); line-height:1.25; letter-spacing:-.03em; }
.nxp-hero p { margin:0; color:var(--nxp-muted); font-size:14px; }
.nxp-secure { flex:0 0 auto; padding:8px 13px; background:#fff; border:1px solid var(--nxp-border); border-radius:99px; font-size:12px; font-weight:700; }
.nxp-secure span { color:#38a67a; margin-right:4px; }
.nxp-progress { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-bottom:20px; }
.nxp-progress-item { min-width:0; display:flex; align-items:center; gap:9px; padding:11px; color:#8790a0; background:rgba(255,255,255,.72); border:1px solid var(--nxp-border); border-radius:14px; text-align:left; transition:.2s ease; }
.nxp-progress-item span { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border-radius:50%; background:#eef0f5; font-size:11px; font-weight:800; }
.nxp-progress-item small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; font-weight:700; }
.nxp-progress-item.is-active { color:var(--nxp-purple-dark); border-color:#cfc6ef; background:#fff; box-shadow:0 8px 24px rgba(90,70,160,.08); }
.nxp-progress-item.is-active span { color:#fff; background:var(--nxp-purple); }
.nxp-progress-item.is-complete span { color:#fff; background:#54ad8c; }
.nxp-form { background:rgba(255,255,255,.9); border:1px solid var(--nxp-border); border-radius:24px; box-shadow:0 16px 45px rgba(42,52,77,.07); }
.nxp-step { display:none; padding:clamp(22px, 4vw, 42px); animation:nxp-in .25s ease both; }
.nxp-step.is-active { display:block; }
@keyframes nxp-in { from { opacity:0; transform:translateY(7px); } }
.nxp-section-heading { display:flex; justify-content:space-between; gap:28px; align-items:flex-end; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--nxp-border); }
.nxp-section-heading span { color:var(--nxp-purple); font-size:10px; font-weight:900; letter-spacing:.15em; }
.nxp-section-heading h2 { margin:3px 0 0; font-size:clamp(21px, 3vw, 30px); letter-spacing:-.03em; }
.nxp-section-heading p { max-width:460px; margin:0; color:var(--nxp-muted); font-size:13px; text-align:right; }
.nxp-grid { display:grid; gap:18px; }
.nxp-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.nxp-grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.nxp-field-wide { grid-column:1/-1; }
.nxp-field { display:flex; flex-direction:column; gap:7px; }
.nxp-field > span, .nxp-placement legend { font-size:12px; font-weight:800; }
.nxp-field b, .nxp-placement b { margin-left:5px; color:#d26767; font-size:9px; }
.nxp-field small { color:var(--nxp-muted); font-weight:500; }
.nxp-field input, .nxp-field select, .nxp-field textarea, .nxp-type-card select {
  width:100%; min-height:48px; padding:11px 14px; color:var(--nxp-ink); background:#fff;
  border:1px solid #cfd6e3; border-radius:12px; outline:none; font:inherit; font-size:14px; transition:.18s ease;
}
.nxp-field textarea { resize:vertical; }
.nxp-field input:focus, .nxp-field select:focus, .nxp-field textarea:focus, .nxp-type-card select:focus { border-color:var(--nxp-purple); box-shadow:0 0 0 4px rgba(117,97,183,.11); }
.nxp-field input::placeholder, .nxp-field textarea::placeholder { color:#a8afbc; }
.nxp-check { display:flex; align-items:flex-start; gap:12px; padding:15px 17px; background:#fafbfc; border:1px solid var(--nxp-border); border-radius:14px; cursor:pointer; }
.nxp-check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--nxp-purple); }
.nxp-check span { display:flex; flex-direction:column; gap:2px; }
.nxp-check strong { font-size:13px; }
.nxp-check small { color:var(--nxp-muted); font-size:11px; }
.nxp-type-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:24px 0; }
.nxp-type-card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:9px; padding:20px; border:1px solid var(--nxp-border); border-radius:18px; cursor:pointer; }
.nxp-type-card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.7), transparent); pointer-events:none; }
.nxp-type-card > * { position:relative; }
.nxp-type-card strong { font-size:18px; }
.nxp-type-card small { color:var(--nxp-muted); font-size:11px; }
.nxp-premium { background:var(--nxp-lilac); }
.nxp-economy { background:var(--nxp-blue); }
.nxp-customer { background:var(--nxp-peach); }
.nxp-type-icon { width:30px; height:5px; background:currentColor; border-radius:9px; opacity:.25; }
.nxp-count-bar { position:relative; overflow:hidden; display:flex; justify-content:space-between; margin:0 0 22px; padding:14px 17px; background:#f4f3f9; border-radius:13px; font-size:13px; }
.nxp-count-bar > *:not(i) { position:relative; z-index:1; }
.nxp-count-bar em { font-style:normal; }
.nxp-count-bar i { position:absolute; left:0; bottom:0; width:0; height:4px; background:#62b492; transition:.25s; }
.nxp-count-bar i.is-error { background:#d26767; }
.nxp-product-list { display:grid; gap:14px; }
.nxp-product-card { display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:center; padding:18px; border:1px solid var(--nxp-border); border-radius:17px; }
.nxp-product-card > div { display:flex; flex-direction:column; gap:8px; }
.nxp-product-card > div small { color:var(--nxp-muted); font-size:11px; }
.nxp-product-card.is-reserved { opacity:.72; border-style:dashed; background:#f2f3f6; }
.nxp-product-card.is-reserved select { color:#7a8190; background:#e9ebef; }
.nxp-product-badge { align-self:flex-start; padding:4px 10px; background:rgba(117,97,183,.1); border-radius:99px; color:var(--nxp-purple-dark); font-size:10px; font-weight:800; }
.nxp-summary-strip { display:flex; justify-content:flex-end; gap:32px; margin:18px 0 28px; padding:16px 18px; background:#f5f3fc; border-radius:14px; font-size:14px; }
.nxp-summary-strip span { margin-right:auto; color:var(--nxp-muted); }
.nxp-summary-strip em { font-style:normal; }
.nxp-delivery-toggle { margin-bottom:16px; }
.nxp-shipping-notes { margin:0 0 16px; }
.nxp-delivery-fields { padding:22px; background:#f8fbff; border:1px solid #dce7f4; border-radius:18px; }
.nxp-registrant-strip { display:flex; gap:18px; margin-bottom:18px; padding:13px 16px; background:var(--nxp-blue); border-radius:13px; font-size:13px; }
.nxp-registrant-strip span { color:var(--nxp-muted); }
.nxp-position-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.nxp-position-card { padding:17px; border:1px solid var(--nxp-border); border-radius:17px; }
.nxp-position-card header { display:flex; justify-content:space-between; gap:12px; margin-bottom:15px; }
.nxp-position-card header > div { display:flex; flex-direction:column; gap:3px; }
.nxp-position-card header small { color:var(--nxp-muted); font-size:10px; }
.nxp-position-card header strong { font-size:14px; }
.nxp-position-card header span { padding:3px 9px; color:var(--nxp-purple-dark); background:#f0edfb; border-radius:99px; font-size:10px; font-weight:800; }
.nxp-placement { margin:0; padding:0; border:0; }
.nxp-placement legend { margin-bottom:7px; }
.nxp-placement { display:grid; grid-template-columns:1fr 1fr; }
.nxp-placement legend { grid-column:1/-1; }
.nxp-placement label input { position:absolute; opacity:0; }
.nxp-placement label span { display:grid; place-items:center; min-height:48px; background:#fff; border:1px solid #cfd6e3; cursor:pointer; }
.nxp-placement label:first-of-type span { border-radius:12px 0 0 12px; }
.nxp-placement label:last-of-type span { border-left:0; border-radius:0 12px 12px 0; }
.nxp-placement input:checked + span { color:#fff; background:var(--nxp-purple); border-color:var(--nxp-purple); }
.nxp-payment-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.nxp-payment-card { display:flex; align-items:center; gap:14px; padding:22px; background:#fff; border:1px solid var(--nxp-border); border-radius:18px; cursor:pointer; }
.nxp-payment-card > input { position:absolute; opacity:0; }
.nxp-payment-card > span:last-child { display:flex; flex-direction:column; }
.nxp-payment-card strong { font-size:16px; }
.nxp-payment-card small { color:var(--nxp-muted); }
.nxp-radio { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border:2px solid #bdc5d3; border-radius:50%; }
.nxp-payment-card input:checked ~ .nxp-radio { border:7px solid var(--nxp-purple); }
.nxp-payment-card:has(input:checked) { border-color:var(--nxp-purple); background:#faf8ff; }
.nxp-bank-info { margin-top:18px; padding:22px; background:var(--nxp-mint); border-radius:18px; }
.nxp-card-id { margin-top:18px; padding:22px; background:#f5f3fc; border:1px solid #ddd6f3; border-radius:18px; }
.nxp-expiry-fields { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.nxp-expiry-fields > span { color:var(--nxp-muted); font-weight:800; text-align:center; }
.nxp-bank-info > span { font-size:11px; font-weight:800; color:#44846d; }
.nxp-bank-info dl { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:12px 0 0; }
.nxp-bank-info dl div { padding:12px; background:rgba(255,255,255,.72); border-radius:11px; }
.nxp-bank-info dt { color:var(--nxp-muted); font-size:10px; }
.nxp-bank-info dd { margin:3px 0 0; font-size:13px; font-weight:800; }
.nxp-safety-note { margin-top:16px; padding:18px 20px; background:#fff8e3; border-left:4px solid #e4b94e; border-radius:12px; }
.nxp-safety-note strong { font-size:13px; }
.nxp-safety-note p { margin:3px 0 0; color:var(--nxp-muted); font-size:11px; }
.nxp-confirm-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.nxp-confirm-grid article { padding:20px; background:#fafbfc; border:1px solid var(--nxp-border); border-radius:17px; }
.nxp-confirm-grid article > span { color:var(--nxp-purple); font-size:10px; font-weight:900; }
.nxp-confirm-grid h3 { margin:7px 0 3px; font-size:17px; }
.nxp-confirm-grid p, .nxp-confirm-grid ul { margin:6px 0 0; padding-left:18px; color:var(--nxp-muted); font-size:12px; }
.nxp-confirm-table { overflow:auto; margin-top:16px; border:1px solid var(--nxp-border); border-radius:14px; }
.nxp-confirm-table table { width:100%; border-collapse:collapse; font-size:12px; }
.nxp-confirm-table th, .nxp-confirm-table td { padding:11px; text-align:left; border-bottom:1px solid var(--nxp-border); white-space:nowrap; }
.nxp-confirm-table th { background:#f3f1fb; }
.nxp-consent { margin-top:18px; background:var(--nxp-mint); }
.nxp-complete { padding:70px 24px; text-align:center; }
.nxp-success-mark { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 22px; color:#fff; background:#56ad8d; border-radius:50%; font-size:33px; box-shadow:0 14px 35px rgba(64,159,124,.25); }
.nxp-complete h2 { margin:8px 0; font-size:30px; }
.nxp-complete p { color:var(--nxp-muted); }
.nxp-receipt { display:inline-block; margin-top:18px; padding:14px 22px; background:#f1edff; border:1px solid #d7cff2; border-radius:13px; color:var(--nxp-purple-dark); font-size:20px; font-weight:900; letter-spacing:.06em; }
.nxp-errors { display:none; margin:0 42px 20px; padding:13px 16px; color:#9b3434; background:#fff0f0; border:1px solid #f0caca; border-radius:12px; font-size:13px; }
.nxp-errors.is-visible { display:block; }
.nxp-errors strong { display:block; margin-bottom:2px; font-size:16px; }
.nxp-errors > span { display:block; }
.nxp-errors ul { margin:8px 0 0; padding-left:1.4em; }
.nxp-invalid { position:relative; padding:10px; background:#fff5f5 !important; border:2px solid #d94d4d !important; border-radius:14px; box-shadow:0 0 0 4px rgba(217,77,77,.08); }
.nxp-invalid input, .nxp-invalid select, .nxp-invalid textarea { border-color:#d94d4d !important; }
.nxp-invalid.nxp-payment-options { padding:12px; }
.nxp-field-error { grid-column:1/-1; width:100%; margin-top:2px; color:#b42323; font-size:12px; font-weight:800; line-height:1.5; }
.nxp-field-error::first-letter { font-size:11px; }
.nxp-actions { display:flex; gap:10px; padding:18px clamp(22px, 4vw, 42px); border-top:1px solid var(--nxp-border); }
.nxp-btn { min-height:46px; padding:10px 18px; border:0; border-radius:12px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:.18s ease; }
.nxp-btn:hover { transform:translateY(-1px); }
.nxp-btn-primary { margin-left:auto; color:#fff; background:var(--nxp-purple); box-shadow:0 10px 24px rgba(117,97,183,.2); }
.nxp-btn-primary:hover { background:var(--nxp-purple-dark); }
.nxp-btn-soft { color:var(--nxp-purple-dark); background:#f1edff; }
.nxp-btn-ghost { color:var(--nxp-ink); background:#eef1f5; }
.nxp-btn:disabled { opacity:.6; cursor:wait; }
.is-hidden, .nxp-hp { display:none !important; }

@media (max-width: 820px) {
  .nxp-shell { margin:10px; padding:18px; border-radius:22px; }
  .nxp-hero { display:block; }
  .nxp-secure { display:inline-block; margin-top:14px; }
  .nxp-progress { display:flex; overflow:auto; padding-bottom:4px; }
  .nxp-progress-item { flex:0 0 44px; justify-content:center; padding:8px; }
  .nxp-progress-item small { display:none; }
  .nxp-section-heading { display:block; }
  .nxp-section-heading p { margin-top:8px; text-align:left; }
  .nxp-type-cards, .nxp-position-grid, .nxp-payment-options { grid-template-columns:1fr; }
  .nxp-product-card { grid-template-columns:1fr; }
  .nxp-bank-info dl { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nxp-shell { margin:0; padding:12px; border:0; border-radius:0; }
  .nxp-hero { padding:12px 4px 0; }
  .nxp-step { padding:24px 17px; }
  .nxp-grid-2, .nxp-grid-3, .nxp-confirm-grid { grid-template-columns:1fr; }
  .nxp-field-wide { grid-column:auto; }
  .nxp-summary-strip { flex-wrap:wrap; gap:8px 18px; }
  .nxp-summary-strip span { width:100%; }
  .nxp-actions { position:sticky; bottom:0; z-index:3; padding:12px; background:rgba(255,255,255,.96); }
  .nxp-btn-soft { display:none; }
  .nxp-bank-info dl { grid-template-columns:1fr; }
  .nxp-errors { margin:0 17px 14px; }
}