#register .hero-title { line-height: normal; margin-bottom: calc(12px * var(--spc)); text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .15); }
#register .hero-desc { margin-bottom: calc(12px * var(--spc)); text-shadow: 0 16px 32px rgba(12, 12, 13, .4); }
#register .period-pill { margin-bottom: calc(48px * var(--spc)); }
#register .register-panels { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; margin: 0 auto; }
#register .card { position: relative; z-index: 2; text-align: left; color: #fff; box-sizing: border-box; }
#register .card--register { width: calc(820px * var(--spc)); height: calc(514px * var(--spc)); background: url('../assets/images/register/pc/panel_register.webp') center / 100% 100% no-repeat; }
#register .card--register .card__inner { display: flex; flex-direction: row; gap: calc(24px * var(--spc)); padding: calc(54px * var(--spc)) 0 0 calc(56px * var(--spc)); }
#register .register-gift { position: relative; flex: none; width: calc(282px * var(--spc)); height: calc(398px * var(--spc)); background: #262e58; overflow: hidden; }
#register .register-gift__stack img { position: absolute; object-fit: contain; }
#register .register-gift__stack--ooparts img { width: calc(178.312px * var(--spc)); height: calc(178.312px * var(--spc)); top: calc(37.5px * var(--spc)); }
#register .register-gift__stack--ooparts img:nth-child(1) { left: 0; top: calc(44.57px * var(--spc)); }
#register .register-gift__stack--ooparts img:nth-child(2) { left: calc(21.99px * var(--spc)); }
#register .register-gift__stack--ooparts img:nth-child(3) { left: calc(49.49px * var(--spc)); }
#register .register-gift__stack--ooparts img:nth-child(4) { left: calc(76.2px * var(--spc)); }
#register .register-gift__stack--ooparts img:nth-child(5) { left: calc(103.69px * var(--spc)); top: calc(32px * var(--spc)); }
#register .register-gift__stack--costume img { width: calc(174.424px * var(--spc)); height: calc(173.655px * var(--spc)); top: calc(158.88px * var(--spc)); }
#register .register-gift__stack--costume img:nth-child(1) { left: 0; }
#register .register-gift__stack--costume img:nth-child(2) { left: calc(27.66px * var(--spc)); }
#register .register-gift__stack--costume img:nth-child(3) { left: calc(54.56px * var(--spc)); }
#register .register-gift__stack--costume img:nth-child(4) { left: calc(80.68px * var(--spc)); }
#register .register-gift__stack--costume img:nth-child(5) { left: calc(107.58px * var(--spc)); }
#register .register-gift__badge { position: absolute; left: calc(6px * var(--spc)); display: flex; align-items: center; justify-content: center; width: calc(85px * var(--spc)); height: calc(85px * var(--spc)); background: url('../assets/images/register/pc/badge_star.svg') center / 100% 100% no-repeat; font-family: var(--font-title); font-size: calc(20px * var(--spc)); letter-spacing: calc(.4px * var(--spc)); color: #fff; z-index: 1; }
#register .register-gift__badge--ooparts { top: calc(36px * var(--spc)); }
#register .register-gift__badge--costume { top: calc(238.88px * var(--spc)); }
#register .register-gift__caption { position: absolute; left: 50%; top: calc(347px * var(--spc)); transform: translateX(-50%); margin: 0; z-index: 1; font-family: var(--font-body); font-weight: 700; font-size: calc(16px * var(--spc)); color: #fff; white-space: nowrap; }
#register .register-form { width: calc(400px * var(--spc)); flex: none; }
#register .register-form__step { display: flex; flex-direction: column; gap: calc(20px * var(--spc)); }
#register .card__title { text-align: center; font-family: var(--font-title); font-size: calc(24px * var(--spc)); font-weight: 400; letter-spacing: normal; color: #C6CBD2; margin: 0; }
#register .card__title::after { content: ''; display: block; width: calc(400px * var(--spc)); height: calc(13px * var(--spc)); margin: calc(10px * var(--spc)) auto 0; background: url('../assets/images/register/pc/line_title.webp') center / 100% 100% no-repeat; opacity: .3; }
#register .card__title--done { font-size: calc(28px * var(--spc)); }
#register .card__title--done::after { margin-top: calc(12px * var(--spc)); opacity: .5; }
#register .card__title--store { color: #c89852; }
#register .card__title--store::after { width: calc(320px * var(--spc)); height: calc(14px * var(--spc)); opacity: .6; }
#register .field { margin: calc(-2px * var(--spc)) 0 0; }
#register .phone-input { width: calc(400px * var(--spc)); background: #fff; border-radius: calc(10px * var(--spc)); padding: calc(16px * var(--spc)) calc(14px * var(--spc)); gap: 0; }
#register .phone-input__prefix, #register .phone-input__dash, #register .phone-input__field { height: auto; background: transparent; border: 0; padding: 0; font-family: var(--font-title); font-size: calc(24px * var(--spc)); font-weight: 400; color: #1a1f38; letter-spacing: normal; }
#register .phone-input__field { flex: 1; min-width: 0; }
#register .phone-input__field:focus { box-shadow: none; }
#register .phone-input__field.is-error { color: var(--ds-point); }
#register .field__hint { padding: calc(6px * var(--spc)) calc(14px * var(--spc)) 0; margin: 0; font-family: var(--font-body); font-size: calc(13px * var(--spc)); line-height: 1.6; color: #92a6e8; }
#register .field__error { padding: calc(6px * var(--spc)) calc(14px * var(--spc)) 0; margin: 0; min-height: 0; font-family: var(--font-body); font-size: calc(13px * var(--spc)); line-height: 1.6; color: var(--ds-point); }
#register .field.is-error .field__hint { display: none; }
#register .field__error:empty { display: none; }
#register .terms { display: flex; flex-direction: column; gap: calc(14px * var(--spc)); margin: 0; }
#register .terms__head { display: flex; align-items: center; justify-content: space-between; padding: 0; margin: 0; border: 0; }
#register .terms__all { display: flex; align-items: center; gap: calc(8px * var(--spc)); font-family: var(--font-body); font-size: calc(16px * var(--spc)); font-weight: 700; letter-spacing: normal; color: #fff; cursor: pointer; }
#register .terms__notice-link { font-family: var(--font-body); font-size: calc(12px * var(--spc)); line-height: 1.4; color: var(--ds-blue-secondary); text-decoration: underline; }
#register .terms__list { display: flex; flex-direction: column; gap: calc(6px * var(--spc)); padding: 0 calc(10px * var(--spc)); }
#register .terms__list label:not(.terms__text) { display: flex; align-items: flex-start; gap: calc(8px * var(--spc)); font-family: var(--font-body); font-size: calc(14px * var(--spc)); line-height: 1.4; color: #fff; cursor: pointer; }
#register .terms__list input[type="checkbox"] { margin-top: calc((1.4em - 16em / 14) / 2); }
#register .terms__item { position: relative; padding-left: calc(24px * var(--spc)); font-family: var(--font-body); font-size: calc(14px * var(--spc)); line-height: 1.4; color: #fff; }
#register .terms__item > input[type="checkbox"] { position: absolute; left: 0; top: 0; }
#register .terms__text { cursor: pointer; }
#register .terms__detail { background: none; border: 0; padding: 0; font: inherit; color: var(--ds-blue-secondary); cursor: pointer; }
#register .terms__detail:hover { text-decoration: underline; }
#register .terms input[type="checkbox"] { flex: none; width: calc(16px * var(--spc)); height: calc(16px * var(--spc)); border: 1px solid #d9d9d9; border-radius: calc(2px * var(--spc)); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#register .terms__head input[type="checkbox"] { background: #f5f5f5; }
#register .terms input[type="checkbox"]:checked { background: var(--ds-blue-primary); border-color: var(--ds-blue-primary); }
#register .terms input[type="checkbox"]:checked::before { content: '\2713'; color: #fff; font-size: calc(12px * var(--spc)); line-height: 1; }
#register .btn-register { position: relative; display: block; width: calc(420px * var(--spc)); height: calc(62px * var(--spc)); border: 0; padding: 0; background: transparent; cursor: pointer; }
#register .btn-register::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: calc(4px * var(--spc)); border-radius: calc(10px * var(--spc)); background: #696f7d; }
#register .btn-register::after { content: attr(data-label); position: absolute; left: 0; right: 0; top: 0; bottom: calc(4px * var(--spc)); display: flex; align-items: center; justify-content: center; border-radius: calc(10px * var(--spc)); background: #929aaa; font-family: var(--font-title); font-size: calc(20px * var(--spc)); letter-spacing: 0.02em; color: #fff; white-space: nowrap; }
#register .btn-register:not(:disabled)::before { background: #a45e18; }
#register .btn-register:not(:disabled)::after { background: #cf873f; }
#register .btn-register:not(:disabled):hover::after { background: #f9b066; }
#register .btn-register:disabled { cursor: not-allowed; }
#register .form-status { margin: 0; min-height: 0; font-family: var(--font-body); font-size: calc(14px * var(--spc)); line-height: 1.5; text-align: center; color: var(--color-text-dim); }
#register .form-status:empty { display: none; }
#register .register-result { height: calc(219px * var(--spc)); padding: calc(20px * var(--spc)) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(15px * var(--spc)); text-align: center; }
#register .register-result__head { font-family: var(--font-body); font-size: calc(24px * var(--spc)); font-weight: 700; line-height: 1.3; color: #ffe000; }
#register .register-result__desc { font-family: var(--font-body); font-size: calc(16px * var(--spc)); line-height: 1.5; color: #fff; }
#register .register-result__link { color: var(--ds-blue-secondary); }
#register .result-banners { display: flex; gap: calc(6px * var(--spc)); justify-content: center; }
#register .result-banner { display: flex; align-items: center; justify-content: center; width: calc(122.667px * var(--spc)); height: calc(60px * var(--spc)); padding: calc(12px * var(--spc)) calc(20px * var(--spc)); border-radius: calc(10px * var(--spc)); background: #33408b; font-family: var(--font-title); font-size: calc(12px * var(--spc)); line-height: 1.4; color: #a8b6ff; text-align: center; white-space: nowrap; box-sizing: border-box; }
#register .result-banner--primary { background: #4253ae; }
#register .result-banner:hover { filter: brightness(1.15); }
#register .card--store { width: calc(400px * var(--spc)); height: calc(514px * var(--spc)); background: url('../assets/images/register/pc/panel_store.webp') center / 100% 100% no-repeat; }
#register .card--store .store__inner { width: calc(320px * var(--spc)); margin-left: calc(40px * var(--spc)); padding-top: calc(56px * var(--spc)); display: flex; flex-direction: column; gap: calc(50px * var(--spc)); }
#register .store-gift { position: relative; width: calc(320px * var(--spc)); height: calc(188px * var(--spc)); overflow: hidden; }
#register .store-gift__shadow { position: absolute; left: calc(85px * var(--spc)); top: calc(152px * var(--spc)); width: calc(166px * var(--spc)); height: calc(26px * var(--spc)); background: url('../assets/images/register/pc/shadow_ellipse.svg') center / contain no-repeat; }
#register .store-gift__item { position: absolute; left: calc(66px * var(--spc)); top: 0; width: calc(188px * var(--spc)); height: calc(188px * var(--spc)); object-fit: contain; }
#register .store-gift__badge { position: absolute; left: calc(192.31px * var(--spc)); top: calc(13px * var(--spc)); display: flex; align-items: center; justify-content: center; width: calc(91.146px * var(--spc)); height: calc(91.146px * var(--spc)); background: url('../assets/images/register/pc/badge_star_store.svg') center / 100% 100% no-repeat; font-family: var(--font-body); font-weight: 700; font-size: calc(14px * var(--spc)); line-height: normal; text-align: center; color: #fff; z-index: 1; }
#register .store-badges { width: 100%; display: flex; flex-direction: column; gap: calc(6px * var(--spc)); }
#register .store-badges__row { display: flex; gap: calc(6px * var(--spc)); justify-content: center; }
#register .store-btn { box-sizing: border-box; position: relative; flex: none; width: calc(162px * var(--spc)); height: calc(60px * var(--spc)); background: #0C0D10; border: 1px solid #394253; border-radius: calc(5px * var(--spc)); }
#register .store-btn__logo { position: absolute; background: center / contain no-repeat; }
#register .store-btn__logo--google { left: calc(16px * var(--spc)); top: calc(11px * var(--spc)); width: calc(128px * var(--spc)); height: calc(36.0089px * var(--spc)); background-image: url('../assets/images/common/store_googleplay.svg'); }
#register .store-btn__logo--appstore { left: calc(24.32px * var(--spc)); top: calc(11px * var(--spc)); width: calc(107px * var(--spc)); height: calc(30.9961px * var(--spc)); background-image: url('../assets/images/common/store_appstore.svg'); }