* {
    box-sizing: border-box;
}

:root {
    /* Common */
    --color-white: #FFFFFF;
    --color-white-90: #FFFFFFE5;
    --color-white-40: #FFFFFF66;
    --color-white-10: #FFFFFF1A;
    --color-light-gray: #EEEEEE;
    --color-gray: #D9D9D9;

    /* BG */
    --main-color-bg: #201D32;
    --point-color-bg: #332C5C;
    --card-color-bg1: #27263E;
    --card-color-bg2: #30335B;
    --footer-color-bg: #181525;

    /* Font */
    --font-color-point1: #CDD2FF;
    --font-color-point2: #717FFF;
    --font-color-point3: #65DE86;
    --font-color-footer: #5E516A;

    /* Border */
    --border-color-point1: #4F4F64;
    --border-color-point2: #00D1FF;

    /* Shadow */
    --shadow-color-black-40: #00000066;

    /* Blur */
    --blur-color-point1: #4B30B7;
    --blur-color-point2: #1F002E;
    --blur-color-point3: linear-gradient(135deg, #6900AA 13.47%, #19005F 84.76%);
    --blur-color-point4: #307EB7;
    --blur-color-point5: #4330B7;
    --blur-color-point6: #5A174C;

    /* Button */
    --button-color-store: linear-gradient(91deg, #7F43FF 1.65%, #00D1FF 97.66%);
}

html {
    font-size: 10px;
}

html.ja {
    font-size: 9px;
}

html,
body {
    height: 100%;
    min-height: 100%;
}

html,
body,
a,
button {
    color: var(--color-gray);
    text-decoration: none;
    font-family: 'Barlow', sans-serif;
}

html.ja,
.ja body,
.ja a,
.ja button {
    color: var(--color-gray);
    text-decoration: none;
    font-family: 'IBM Plex Sans JP', 'Barlow', sans-serif;
}

/* addClass */
.blind {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
}


/* position */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

/* /position */


#vueWrap {
    min-height: 100%;
    position: relative;
}