.vb-lgt-join, .vb-lgt-join * { box-sizing: border-box; } .vb-lgt-join { background: #FFFFFF; color: #003d52; font-family: var(--t-text-font); padding: 88px 0; } .vb-lgt-join__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .vb-lgt-join__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; } .vb-lgt-join__title { margin: 0 0 18px; font-family: var(--t-headline-font); font-size: clamp(1.9rem, 65px, 2.6rem); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; color:#003D52; } .vb-lgt-join__text { margin: 0 0 24px; max-width: 56ch; font-size: 1.03rem; line-height: 1.7; color: #1a4a55; text-wrap: pretty; } .vb-lgt-join__steps { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: vbjoin; } .vb-lgt-join__step { counter-increment: vbjoin; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid #e0eef2; font-size: .98rem; line-height: 1.6; color: #1a4a55; } .vb-lgt-join__step:last-child { border-bottom: 1px solid #e0eef2; } .vb-lgt-join__step::before { content: counter(vbjoin); width: 28px; height: 28px; border-radius: 8px; background: #00a2c6; color: #FFFFFF; font-family: var(--t-headline-font); font-size: .9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .vb-lgt-join__note { margin: 0; padding: 18px 22px; border-radius: 12px; background: #fff5f5; border: 1px solid #ffd6d6; font-size: .95rem; line-height: 1.6; color: #cc4040; } .vb-lgt-join__note b { color: #aa2e2e; } /* ---------- form ---------- */ .vb-lgt-join__form { background: #e6f4f8; border: 1px solid #d0e4ec; border-radius: 20px; padding: 34px 36px 36px; font-family: var(--t-text-font); } .vb-lgt-join__form input, .vb-lgt-join__form textarea, .vb-lgt-join__form select { font: inherit; } .vb-lgt-join__formtitle { margin: 0 0 6px; font-family: var(--t-headline-font); font-size: 1.3rem; } .vb-lgt-join__formlead { margin: 0 0 24px; font-size: .93rem; color: #4a6e75; line-height: 1.55; } .vb-lgt-join__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .vb-lgt-join__group { margin-bottom: 16px; } .vb-lgt-join__label { display: block; margin: 0 0 7px; font-size: .9rem; font-weight: 600; color: #003d52; } .vb-lgt-join__req { color: #ff6666; } .vb-lgt-join__control { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #d0e4ec; border-radius: 10px; background: #FFFFFF; color: #003d52; font-size: 1rem; line-height: 1.4; transition: border-color .2s ease, box-shadow .2s ease; } .vb-lgt-join__control::placeholder { color: #6a8a93; } .vb-lgt-join__control:focus { outline: none; border-color: #00a2c6; box-shadow: 0 0 0 3px rgba(0, 162, 198, .22); } textarea.vb-lgt-join__control { min-height: 120px; resize: vertical; } select.vb-lgt-join__control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23003d52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .vb-lgt-join__check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin: 0 0 16px; font-size: .92rem; line-height: 1.55; color: #1a4a55; } .vb-lgt-join__check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #00a2c6; } .vb-lgt-join__check--wide input { margin-top: 4px; } .vb-lgt-join__check--wide span > a { color: #00a2c6; } .vb-lgt-join__check--wide span > a:hover, .vb-lgt-join__check--wide span > a:focus-visible { color: #003d52; text-decoration: underline; } .vb-lgt-join__docicon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; flex: none; } .vb-lgt-join__download { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border: 1px solid #00a2c6; border-radius: 8px; background: rgba(0, 162, 198, .08); color: #0089a8; font-family: var(--t-text-font); font-size: .82rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .vb-lgt-join__download:hover, .vb-lgt-join__download:focus-visible { background: #00a2c6; color: #FFFFFF; border-color: #00a2c6; transform: translateY(-1px); } .vb-lgt-join__download svg { width: 16px; height: 16px; flex: none; } .vb-lgt-join__file { margin: 0 0 16px 32px; } .vb-lgt-join__filelabel { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed #00a2c6; border-radius: 10px; background: rgba(0, 162, 198, .05); color: #0089a8; font-size: .9rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .vb-lgt-join__filelabel:hover, .vb-lgt-join__filelabel:focus-within { background: rgba(0, 162, 198, .12); border-color: #0089a8; color: #003d52; } .vb-lgt-join__filelabel svg { width: 20px; height: 20px; flex: none; } .vb-lgt-join__filetext { flex: 1; } .vb-lgt-join__fileinput { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .vb-lgt-join__filename { display: none; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #d4f0e0; border: 1px solid #a0d8b8; color: #006b4a; font-size: .82rem; line-height: 1.4; } .vb-lgt-join__filename--visible { display: flex; align-items: center; gap: 8px; } .vb-lgt-join__filename svg { width: 16px; height: 16px; flex: none; } .vb-lgt-join__counter { display: block; margin-top: 6px; font-size: .82rem; color: #6a8a93; text-align: right; } .vb-lgt-join__error { margin-top: 6px; font-size: .84rem; color: #cc4040; } .vb-lgt-join__errorbox { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #fff5f5; border: 1px solid #ffd6d6; color: #cc4040; font-size: .9rem; } .vb-lgt-join__success { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: #d4f0e0; border: 1px solid #a0d8b8; color: #006b4a; font-size: .95rem; line-height: 1.55; } .vb-lgt-join .t-btnflex { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 15px 28px; border: 1px solid transparent; border-radius: 10px; background: #ff6666; color: #FFFFFF; font-family: var(--t-text-font); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .25s ease, transform .25s ease; } .vb-lgt-join .t-btnflex:hover { background: #e55555; } .vb-lgt-join .t-btnflex:active { transform: translateY(1px); } .vb-lgt-join__privacy { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: #6a8a93; } @media (max-width: 1199px) { .vb-lgt-join__inner { padding: 0 20px; } .vb-lgt-join__grid { gap: 34px; } } @media (max-width: 959px) { .vb-lgt-join { padding: 64px 0; } .vb-lgt-join__grid { grid-template-columns: 1fr; } } @media (max-width: 639px) { .vb-lgt-join { padding: 52px 0; } .vb-lgt-join__form { padding: 26px 22px 28px; } .vb-lgt-join__row { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 479px) { .vb-lgt-join__inner { padding: 0 16px; } }