.member-register-form {
            width: min(100%, 600px);
            margin: 32px auto;
            padding: 32px;
            box-sizing: border-box;
            border: 1px solid #dfe7ee;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 16px 36px rgba(38, 52, 86, .12);
        }

        .member-register-form,
        .member-register-form * {
            box-sizing: border-box;
        }

        .login:has(.member-register-form) main {
            max-width: 1180px;
            margin-right: auto;
            margin-left: auto;
            padding-right: 20px;
            padding-left: 20px;
            box-sizing: border-box;
            justify-content: center;
        }

        .login:has(.member-register-form) .left-column,
        .login:has(.member-register-form) .right-column {
            display: none;
        }

        .login:has(.member-register-form) .content,
        .login:has(.member-register-form) .contents {
            width: 100%;
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
        }

        .member-register-field {
            display: grid;
            gap: 8px;
        }

        .member-register-heading {
            margin-bottom: 24px;
        }

        .member-register-title {
            margin: 0;
            color: #24323d;
            font-size: 24px;
            font-weight: 900;
            line-height: 1.4;
        }

        .member-register-description {
            margin: 8px 0 0;
            color: #687784;
            font-size: 14px;
            line-height: 1.7;
        }

        .member-register-benefits {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 16px;
            margin: 16px 0 0;
            padding: 0;
            list-style: none;
        }

        .member-register-benefits li {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #3d4d59;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.5;
        }

        .member-register-benefits li::before {
            display: inline-grid;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #e8f5ed;
            color: #2e8b52;
            content: "✓";
            place-items: center;
            font-size: 11px;
            font-weight: 900;
            line-height: 1;
        }

        .member-register-field + .member-register-field,
        .member-register-actions {
            margin-top: 20px;
        }

        .member-register-agreement {
            margin-top: 22px;
        }

        .member-register-agreement-label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #3d4d59;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.7;
        }

        .member-register-agreement-label input[type="checkbox"] {
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            margin: 2px 0 0;
            /*accent-color: #3ea562;*/
        }

        .member-register-agreement-label a {
            color: #2e8b52;
            font-weight: 900;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .member-register-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #263642;
            font-size: 14px;
            font-weight: 900;
            line-height: 1.5;
        }

        .member-register-badge {
            display: inline-flex;
            align-items: center;
            min-height: 18px;
            padding: 1px 6px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 900;
            line-height: 1.4;
        }

        .member-register-badge.is-required {
            background: #fdecec;
            color: #c33d3d;
        }

        .member-register-badge.is-optional {
            background: #eef1f4;
            color: #6b7780;
        }

        .member-register-help {
            margin: -2px 0 0;
            color: #687784;
            font-size: 12px;
            line-height: 1.6;
        }

        .member-register-form input[type="text"],
        .member-register-form input[type="password"],
        .member-register-form input[type="email"],
        .member-register-form select {
            min-height: 44px;
            border: 1px solid #cfd9e2;
            border-radius: 6px;
            background: #fff;
            color: #263642;
            font-size: 16px;
            line-height: 1.4;
        }

        .member-register-form input[type="text"],
        .member-register-form input[type="password"],
        .member-register-form input[type="email"] {
            width: 100%;
            padding: 10px 12px;
        }

        .member-register-password {
            position: relative;
            width: 100%;
        }

        .member-register-password input[type="password"],
        .member-register-password input[type="text"] {
            padding-right: 80px;
        }

        .member-register-password-toggle {
            position: absolute;
            top: 50%;
            right: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            min-height: 32px;
            padding: 0 10px;
            border: 1px solid #cfd9e2;
            border-radius: 999px;
            background: #f7fafc;
            color: #3d4d59;
            cursor: pointer;
            font-size: 13px;
            font-weight: 900;
            line-height: 1;
            transform: translateY(-50%);
            white-space: nowrap;
        }

        .member-register-password-toggle:hover {
            background: #eef5f0;
            color: #2e8b52;
        }

        .member-register-password-toggle:focus {
            outline: 3px solid rgba(62, 165, 98, .18);
            outline-offset: 1px;
        }

        .member-register-form select {
            max-width: 100%;
            padding: 9px 34px 9px 10px;
        }

        .member-register-form input:focus,
        .member-register-form select:focus {
            border-color: #3ea562;
            outline: 3px solid rgba(62, 165, 98, .18);
            outline-offset: 1px;
        }

        .member-register-birthday {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 16px;
            align-items: center;
        }

        .member-register-date-part {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            color: #263642;
            font-size: 15px;
            font-weight: 700;
        }

        .member-register-date-part select {
            min-width: 78px;
        }

        .member-register-date-part:first-child select {
            min-width: 118px;
        }

        .member-register-actions input[type="submit"] {
            display: block;
            width: 100%;
            min-height: 46px;
            border: 0;
            border-radius: 999px;
            background: #3ea562;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            font-weight: 900;
            transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }

        .member-register-actions input[type="submit"]:hover {
            background: #348d53;
            box-shadow: 0 8px 18px rgba(62, 165, 98, .25);
        }

        .member-register-actions input[type="submit"]:focus {
            outline: 3px solid rgba(62, 165, 98, .25);
            outline-offset: 2px;
        }

        .member-register-actions input[type="submit"]:active {
            transform: translateY(1px);
        }

        @media screen and (max-width: 640px) {
            .member-register-form {
                width: auto;
                margin: 20px 12px;
                padding: 24px 18px;
            }

            .member-register-title {
                font-size: 22px;
            }

            .member-register-benefits {
                display: grid;
                gap: 8px;
            }

            .member-register-birthday {
                flex-wrap: wrap;
                gap: 8px;
            }

            .member-register-date-part {
                flex: 1 1 0;
                gap: 4px;
                min-width: 0;
            }

            .member-register-date-part select,
            .member-register-date-part:first-child select {
                flex: 1 1 auto;
                min-width: 0;
                width: 100%;
                padding-right: 22px;
                padding-left: 8px;
            }
        }

        @media screen and (max-width: 1024px) {
            .login:has(.member-register-form) .left-column {
                display: block;
            }
            .login:has(.member-register-form) main {
                padding-top: 64px;
            }
        }

        @media screen and (max-width: 560px) {
            .login:has(.member-register-form) main {
                padding: 58px 0 0;
            }
        }