@charset "UTF-8";
body {
    justify-content: center;
    background: var(--body-background-color,hsl(0 0% 100%))
}

.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjUwMCIgeDI9IjUwMCIgeTE9IjUwMCIgeTI9IjEwMDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9ImhzbCgwIDEwMCUgNTAlLzE1JSkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImhzbCgwIDEwMCUgNTAlLzAlKSIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTEwMDAgMTAwMEgwVjUwMGM1MDAtMjUwIDUwMCAyNTAgMTAwMCAwdjUwMHoiLz48L3N2Zz4=);
    background-repeat: repeat-x;
    background-position-y: center;
    background-size: var(--bgw) var(--bgh,100%);
    --bgw: clamp(80em,var(--VWidth),1920px);
    animation: hue 30s linear infinite,wave 30s linear infinite;
    opacity: var(--brightness-filter,.5)
}

.bg::after,.bg::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: inherit;
    background-repeat: inherit;
    background-position-y: inherit;
    background-size: var(--bgw) var(--bgh);
    animation: wave var(--dr) var(--dl) linear infinite reverse
}

.bg::before {
    --bgh: 70%;
    --dl: -5s;
    --dr: 20s
}

.bg::after {
    --bgh: 50%;
    --dl: -5s;
    --dr: 10s
}

@keyframes hue {
    0%,100%,50% {
        filter: hue-rotate(160deg)
    }

    25% {
        filter: hue-rotate(190deg)
    }

    75% {
        filter: hue-rotate(130deg)
    }
}

@keyframes wave {
    0% {
        background-position-x: 0
    }

    100% {
        background-position-x: var(--bgw)
    }
}

#login_header {
    width: 100%;
    max-width: 90em;
    margin-inline:auto}

#login_header>.inner {
    height: 6em;
    padding-inline:2em;display: flex;
    align-items: center
}

#login_header #logo {
    margin-inline:2em}

#login_header #logo h1 {
    font-size: 1em;
    display: block;
    height: 2em;
    aspect-ratio: 183/61;
    filter: invert(var(--brightness-filter,-1));
    color: transparent
}

#login_footer {
    width: 100%;
    max-width: 90em;
    margin-inline:auto}

#login_footer>.inner {
    padding: 2em;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 2em
}

#login_footer .copyright {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .5em;
    opacity: .5
}

#login_footer .copyright::before {
    content: attr(icon);
    display: block;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#login_footer .nav ul {
    display: flex;
    gap: 1em
}

#login_footer .nav a {
    color: currentColor
}

#login_footer .language .lang {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1em;
    background: var(--body-text-color-a5,#fff);
    border-radius: 3em;
    height: 3em;
    padding-inline:1em 0;position: relative;
    cursor: pointer;
    transition: background .3s
}

#login_footer .language .lang::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    margin-block-start:-.166667em;margin-inline-end:1em;border: .333334em transparent solid;
    border-top-color: var(--body-text-color-a25,rgba(0 0 0/25%));
    pointer-events: none
}

#login_footer .language .lang>span::before {
    content: attr(icon);
    display: block;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    opacity: .5
}

#login_footer .language .lang>select {
    all: unset;
    height: 3em;
    line-height: 3;
    padding-inline-end:2.5em}

#login_footer .language .lang>select option {
    color: var(--body-text-color);
    background: var(--background-color-L1)
}

#reg_content {
    width: 100%;
    max-width: 90em;
    margin-inline:auto}

#reg_content>.inner {
    padding-inline:2em}

#reg_box {
    border-radius: 2em;
    background-color: var(--body-text-color-a5,rgba(255 255 255/25%));
    background-image: linear-gradient(to var(--inline-end,right),rgba(0 0 0/0%),rgba(0 0 0/2%) 50%);
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    box-shadow: rgba(0 0 0/5%) 0 1em 4em
}

#reg_box>.inner {
    display: grid;
    grid-template-columns: max(30em,40%) 1fr;
    min-height: 35em
}

#reg_form_wrp {
    padding: 5em;
    display: flex;
    flex-direction: column;
    border-radius: 2em;
    background-color: var(--background-color-L3,#fff);
    background-image: radial-gradient(circle at center top,rgba(255 255 255/10%) 0%,rgba(255 255 255/0) 100%),radial-gradient(circle at center bottom,rgba(255 255 255/5%) 0%,rgba(255 255 255/0) 50%);
    box-shadow: rgba(255 255 255/10%) 0 1px 0 0 inset;
    transition: transform .3s,box-shadow .3s
}

#reg_info_wrp {
    order: -1;
    padding: 5em
}

#reg_form_wrp>.inner {
    width: 100%;
    max-width: 30em;
    margin-inline:auto;display: flex;
    flex-direction: column;
    gap: 2em;
    flex: auto;
    justify-content: space-between;
    transition: transform .3s
}

#reg_form_wrp.form>.inner {
    max-width: 40em
}

#reg_form {
    display: flex;
    flex-direction: column;
    gap: 1.5em
}

#reg_form h2 {
    font-size: 2em;
    font-weight: 800;
    text-transform: uppercase
}

#reg_form p {
    margin: 0
}

#reg_form .input>label {
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding-inline:1.5em;height: 4em;
    border-radius: 4em;
    background: var(--background-color-L3,rgba(0 0 0/5%));
    transition: box-shadow .3s
}

#reg_form .input>label>span {
    display: block;
    width: 2em;
    height: 2em;
    overflow: hidden;
    transition: color .3s
}

#reg_form .input>label>span::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#reg_form .input>label>input {
    all: unset;
    flex: auto;
    height: 3em;
    color: currentColor;
    font-weight: 800;
    transition: background-color 999999s
}

#reg_form .input>label>input::-webkit-input-placeholder {
    font-weight: 600;
    color: var(--body-text-color-a50,rgba(0 0 0/50%))
}

#reg_form .input>label:focus-within {
    box-shadow: var(--SiteTHM-A75) 0 0 0 .25em,var(--SiteTHM-A10) 0 0 0 99em inset
}

#reg_form .input>label:focus-within>span[icon] {
    color: var(--SiteTHM)
}

#reg_form .tips_wrp {
    margin-inline:1.5em}

#reg_form .tips_wrp>div {
    margin-block-start:1em}

#reg_form .tips_wrp>div:not(.tips,.show) {
    display: none
}

#reg_form .tips_wrp .tips {
    color: var(--body-text-color-a50,rgba(0 0 0/50%))
}

#reg_form .tips_wrp .success {
    color: var(--text-color-complete);
    font-weight: 800
}

#reg_form .tips_wrp .alert {
    color: var(--text-color-alert);
    font-weight: 800
}

#reg_form .btc {
    text-align: center
}

#reg_form .btw {
    font-size: 1.166667em;
    text-transform: uppercase
}

#reg_form .email_address {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.5em;
    height: 4em;
    padding-inline:1.5em;border-radius: 4em;
    background: var(--background-color-L3,rgba(0 0 0/5%))
}

#reg_form .email_address::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    opacity: .5
}

#reg_form .email_address span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.166667em;
    font-weight: 800
}

#reg_form .user_email_address {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.5em
}

#reg_form .user_email_address::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#reg_form .user_email_address span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.166667em;
    font-weight: 800
}

#reg_form .form {
    display: grid;
    grid-template-columns: max(25%,8em) 1fr;
    gap: 1em;
    padding-block-start:2em;margin-block-start:.5em;background: linear-gradient(90deg,transparent,var(--body-text-color-a5,rgba(0 0 0/5%)),transparent) no-repeat center 0/100% 1px
}

#reg_form .form .T>span {
    min-height: 3em;
    display: flex;
    align-items: center
}

#reg_form .form .C {
    grid-column: 2/3
}

#reg_form .form [class*=cpt-] {
    --CPT-UH: 3.5em;
    --CPT-BDR: 1.75em
}

#reg_form .form .cpt-select>span,#reg_form .form .cpt-text>span {
    padding-inline:1.333334em}

#reg_form .form .cpt-select>span+select,#reg_form .form .cpt-text>span+input {
    padding-inline-start:0;border-radius: 0
}

#reg_form .form [currency]::before,#reg_form .form [region]::before {
    --h: 1.5em
}

#reg_form .form #country_code {
    font-weight: 800;
    min-width: 4.666667em;
    box-sizing: border-box
}

#reg_form .form .reg_btc {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-block-start:1em}

#reg_form .form #reg_btw {
    display: block;
    font-size: 1.166667em
}

#reg_form .form .terms a {
    display: inline-block;
    vertical-align: top;
    font-weight: 800
}

#reg_form .form .password_show::before {
    content: 'visibility';
    opacity: .5
}

#reg_form .form .password_visible::before {
    content: 'visibility_off';
    opacity: 1
}

#connect_icon {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 2em;
    grid-auto-flow: dense;
    width: fit-content
}

#connect_icon::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    grid-column: 2/3;
    margin-inline:auto;opacity: .5
}

#connect_icon span {
    border-radius: 25%;
    width: 4em;
    height: 4em;
    overflow: hidden
}

#connect_icon span::before {
    display: block;
    font-size: 2.5em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    margin: .3em
}

#connect_icon span:not(.seagm) {
    background: var(--hex);
    background-image: linear-gradient(135deg,hsl(calc(var(--h) - 5) var(--s) var(--l)),hsl(calc(var(--h) + 5) var(--s) var(--l)));
    color: #fff
}

#connect_icon span.seagm {
    background: #000 linear-gradient(135deg,rgba(255 255 255/25%),rgba(255 255 255/0%));
    box-shadow: rgba(255 255 255/5%) 0 0 0 1px
}

#connect_icon span.seagm::before {
    content: '';
    background: url(../images/seagm_logo_2020_shield-a28166db3a.svg) no-repeat center bottom/auto 90%
}

#connect_icon~h2 {
    font-size: 1.333334em;
    text-transform: unset
}

#connect_icon~h2 b {
    font-weight: 800
}

#login_form_sns {
    display: flex;
    flex-direction: column;
    gap: 1em
}

#login_form_sns h3 {
    font-size: 1em;
    text-align: center;
    opacity: .5
}

#login_form_sns .sns_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

#login_form_sns .sns_list a {
    box-shadow: unset
}

#login_form_sns .sns_list a:not(:hover,:focus) {
    background: 0 0;
    color: inherit
}

#login_form_sns .sns_list .more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5em;
    cursor: pointer;
    color: var(--body-text-color-a50,rgba(0 0 0/50%))
}

#login_form_sns .sns_list .more::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#login_form_sns .sns_list:not(.expand) a:nth-of-type(5)~a {
    display: none
}

#login_form_sns .sns_list.expand .more {
    display: none
}

#reg_info_wrp>.inner {
    display: flex;
    flex-direction: column;
    gap: 1.5em
}

#reg_info_wrp h2 {
    font-size: 1.666667em;
    font-weight: 800;
    text-transform: uppercase
}

#reg_info_wrp p {
    font-size: 1.166667em;
    margin: 0;
    opacity: .7
}

#reg_info_wrp .reg_steps {
    display: flex;
    flex-direction: column;
    gap: 1em
}

#reg_info_wrp .reg_steps>li {
    counter-increment: steps;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    align-items: center
}

#reg_info_wrp .reg_steps>li::before {
    content: counter(steps);
    display: block;
    font-size: 1.5em;
    font-weight: 800;
    width: 2em;
    aspect-ratio: 1;
    line-height: 2;
    overflow: hidden;
    text-align: center;
    color: var(--body-text-color,rgba(0 0 0/75%));
    background: var(--body-text-color-a5,rgba(0 0 0/5%));
    border-radius: .5em;
    align-self: start
}

@media only screen and (max-width: 1000px) {
    #login_header>.inner {
        max-width:40em;
        margin-inline:auto;box-sizing: border-box
    }

    #login_header #logo {
        margin-inline:0}

    #login_footer>.inner {
        max-width: 40em;
        margin-inline:auto;box-sizing: border-box;
        grid-template-columns: 1fr;
        row-gap: 1.5em;
        align-items: start
    }

    #login_footer .copyright {
        width: fit-content;
        margin-inline:auto}

    #login_footer .nav {
        order: -1
    }

    #login_footer .nav ul {
        justify-content: center;
        flex-wrap: wrap
    }

    #login_footer .language .lang {
        width: fit-content;
        margin-inline:auto;box-shadow: var(--body-text-color-a5,rgba(0 0 0/5%)) 0 0 0 1px inset
    }

    #reg_box {
        max-width: 40em;
        margin-inline:auto}

    #reg_box>.inner {
        grid-template-columns: 1fr
    }

    #reg_form_wrp {
        padding: 4em;
        --tigoo-w: 6em
    }

    #reg_form h2 {
        font-size: 1.666667em
    }

    #reg_form .btw {
        font-size: 1em
    }

    #login_form_sns {
        padding-block-start:2em;background-image: linear-gradient(90deg,transparent,rgba(0 0 0/5%),transparent),linear-gradient(90deg,transparent,rgba(255 255 255/5%),transparent);
        background-repeat: no-repeat;
        background-position: center 0,center 1px;
        background-size: 100% 1px
    }

    #reg_info_wrp {
        padding: 4em;
        order: 9
    }

    #reg_info_wrp>.inner {
        width: 100%;
        max-width: 30em;
        margin-inline:auto;gap: 1em
    }

    #reg_info_wrp h2 {
        font-size: 1.333334em
    }

    #reg_form_wrp.form>.inner {
        max-width: 30em
    }

    #reg_form .user_email_address span {
        font-size: 1em
    }

    #reg_form .form {
        grid-template-columns: 1fr
    }

    #reg_form .form .T>span {
        min-height: unset;
        margin-inline:1.5em;font-weight: 800
    }

    #reg_form .form .C {
        grid-column: inherit
    }

    #reg_form .form .C~.T {
        margin-block-start:1em}
}

@media only screen and (max-width: 480px) {
    #login_footer>.inner,#login_header>.inner,#reg_content>.inner {
        padding-inline:1.5em
    }

    #login_header #logo h1 {
        height: 1.75em
    }

    #login_footer>.inner {
        padding-block-start:2em;background: linear-gradient(90deg,transparent,var(--body-text-color-a5,rgba(0 0 0/5%)),transparent) no-repeat center 0/100% 1px
    }

    #reg_box {
        background: unset;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
        box-shadow: unset
    }

    #reg_form_wrp {
        padding: 2em;
        border-radius: 1em;
        box-shadow: rgb(0 0 0 / 10%) 0 0 4em;
        transform: none!important
    }

    #reg_form_wrp>.inner {
        transform: none!important
    }

    #reg_form h2 {
        font-size: 1.333334em
    }

    #reg_info_wrp {
        padding: 2em
    }

    #reg_info_wrp h2 {
        font-size: 1.166667em
    }

    #connect_icon span {
        width: 3em;
        height: 3em
    }

    #connect_icon span::before {
        font-size: 2em;
        margin: .25em
    }
}

#SNS_connect_wrp {
    padding: 5em;
    display: flex;
    flex-direction: column;
    border-radius: 2em;
    background-color: var(--background-color-L3,#fff);
    background-image: radial-gradient(circle at center top,rgba(255 255 255/10%) 0%,rgba(255 255 255/0) 100%),radial-gradient(circle at center bottom,rgba(255 255 255/5%) 0%,rgba(255 255 255/0) 50%);
    box-shadow: rgb(255 255 255 / 10%) 0 1px 0 0 inset;
    transition: transform .3s,box-shadow .3s
}

#SNS_connect_wrp>.inner {
    width: 100%;
    max-width: 30em;
    margin-inline:auto;display: flex;
    flex-direction: column;
    gap: 2em;
    flex: auto;
    justify-content: space-between;
    text-align: center
}

#SNS_connect_wrp h2 {
    font-size: 2em;
    font-weight: 800
}

#SNS_connect_wrp .btc .btw {
    font-size: 1.166667em;
    text-transform: uppercase
}

#connect_icon_v {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .5em 1em
}

#connect_icon_v::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    opacity: .5;
    margin-block:.75em}

#connect_icon_v .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em 2em
}

#connect_icon_v .brand:first-of-type {
    order: -1
}

#connect_icon_v .icon {
    border-radius: 25%;
    width: 5em;
    height: 5em;
    overflow: hidden
}

#connect_icon_v .icon::before {
    display: block;
    font-size: 3em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    margin: .333334em
}

#connect_icon_v .icon:not(.seagm) {
    background: var(--hex);
    background-image: linear-gradient(135deg,hsl(calc(var(--h) - 5) var(--s) var(--l)),hsl(calc(var(--h) + 5) var(--s) var(--l)));
    color: #fff
}

#connect_icon_v .icon.seagm {
    background: #000 linear-gradient(135deg,rgba(255 255 255/25%),rgba(255 255 255/0%));
    box-shadow: rgba(255 255 255/5%) 0 0 0 1px
}

#connect_icon_v .icon.seagm::before {
    content: '';
    background: url(../images/seagm_logo_2020_shield-a28166db3a.svg) no-repeat center bottom/auto 90%
}

#connect_icon_v .info {
    display: flex;
    flex-direction: column;
    gap: .5em
}

#connect_icon_v .name {
    font-size: 1.333334em;
    font-weight: 800
}

#connect_icon_v .mail {
    opacity: .5
}

@media only screen and (max-width: 1000px) {
    #SNS_connect_wrp h2 {
        font-size:1.666667em
    }

    #SNS_connect_wrp>.inner {
        text-align: start
    }

    #connect_icon_v {
        width: 100%;
        grid-template-columns: 1fr
    }

    #connect_icon_v::before {
        transform: rotate(90deg);
        margin-block:0;margin-inline:.5em}

    #connect_icon_v .brand {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center
    }

    #connect_icon_v .icon {
        width: 4em;
        height: 4em
    }

    #connect_icon_v .icon::before {
        font-size: 2.5em;
        margin: .3em
    }

    #connect_icon_v .info {
        gap: 0
    }
}

@media only screen and (max-width: 480px) {
    #SNS_connect_wrp {
        padding:3em;
        border-radius: 1em;
        box-shadow: rgb(0 0 0 / 10%) 0 0 4em
    }

    #SNS_connect_wrp h2 {
        font-size: 1.333334em
    }

    #SNS_connect_wrp .btc .btw {
        display: block
    }

    #connect_icon_v .name {
        font-size: 1.166667em
    }
}