#app,
body,
html {
    height: 100%
}

#app {
    color: #0c0c0c
}

.card[data-v-3c4e81e4] {
    -ms-flex-align: center;
    -ms-flex-pack: start;
    -webkit-box-align: center;
    -webkit-box-pack: start;
    align-items: center;
    color: #3a3226;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2.5rem;
    justify-content: flex-start
}

.card .color-block[data-v-3c4e81e4] {
    height: 100%;
    margin-right: .5rem;
    width: .5rem
}

.card .monji-block[data-v-3c4e81e4] {
    -ms-flex-align: start;
    -ms-flex-direction: column;
    -ms-flex-negative: 1;
    -ms-flex-pack: center;
    -ms-flex-positive: 0;
    -webkit-box-align: start;
    -webkit-box-direction: normal;
    -webkit-box-flex: 0;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.card .monji-block .kanji[data-v-3c4e81e4] {
    font-family: XANO;
    font-size: 1.2rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    width: 100%
}

.card .monji-block .rgb[data-v-3c4e81e4] {
    font-size: .8rem
}

.picker[data-v-d67ced04] {
    height: 100%;
    position: relative;
    width: 100%
}

.picker .circle[data-v-d67ced04] {
    -webkit-box-sizing: border-box;
    -webkit-transition: all 1s;
    border-radius: 50%;
    box-sizing: border-box;
    height: 100%;
    position: absolute;
    transition: all 1s;
    width: 100%
}

.picker .linear-gradient[data-v-d67ced04] {
    background: -webkit-gradient(linear, left bottom, right top, from(#fffffb), color-stop(#cb1b45), color-stop(#f7c242), color-stop(#7db9de), color-stop(#00aa90), color-stop(#8a6bbe), to(#fffffb));
    background: linear-gradient(to top right, #fffffb, #cb1b45, #f7c242, #7db9de, #00aa90, #8a6bbe, #fffffb);
    z-index: 998
}

.fill-bright {
    fill: #fffffb !important
}

.home[data-v-8f2eb0a2] {
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center
}

.home .display[data-v-8f2eb0a2] {
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    -webkit-transition: all 1s;
    flex-grow: 1;
    height: 100%;
    position: relative;
    transition: all 1s;
    width: 100px
}

.home .display .copy[data-v-8f2eb0a2],
.home .display .random[data-v-8f2eb0a2],
.home .display .series[data-v-8f2eb0a2] {
    bottom: 1.5rem;
    height: 1.2rem;
    position: absolute;
    width: 1.2rem
}

.home .display .copy[data-v-8f2eb0a2],
.home .display .random[data-v-8f2eb0a2] {
    fill: #0c0c0c
}

.home .display .series[data-v-8f2eb0a2] {
    right: 1rem
}


.home .display .copy[data-v-8f2eb0a2] {
    right: 2.6rem
}

.home .display .random[data-v-8f2eb0a2] {
    right: 4.2rem
}

.home .display .romaji[data-v-8f2eb0a2] {
    bottom: 1.5rem;
    left: 5rem;
    letter-spacing: .2rem
}

.home .display .kanji[data-v-8f2eb0a2],
.home .display .romaji[data-v-8f2eb0a2] {
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    position: absolute;
    writing-mode: vertical-lr
}

.home .display .kanji[data-v-8f2eb0a2] {
    bottom: 1rem;
    font-family: XANO;
    font-size: 3rem;
    left: 1rem;
    letter-spacing: .5rem
}

.home .display .rgb-block[data-v-8f2eb0a2] {
    -ms-flex-align: start;
    -ms-flex-direction: column;
    -webkit-box-align: start;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    margin-bottom: 2px
}

.home .display .rgb-block .b[data-v-8f2eb0a2],
.home .display .rgb-block .g[data-v-8f2eb0a2],
.home .display .rgb-block .r[data-v-8f2eb0a2] {
    -webkit-transition: all 1s;
    background-color: #0c0c0c;
    height: 2px;
    margin-top: 2px;
    transition: all 1s;
    width: 0
}

.home .display .rgb-number[data-v-8f2eb0a2] {
    -ms-flex-pack: distribute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: MONO;
    font-size: 1.3rem;
    justify-content: space-around
}

.home .display .cmyk-number[data-v-8f2eb0a2] {
    -ms-flex-align: end;
    -ms-flex-direction: column;
    -webkit-box-align: end;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    font-family: MONO;
    font-size: 1.3rem;
    margin: 2rem 1rem
}

.home .display .cmyk-number .n[data-v-8f2eb0a2]:after {
    display: inline-block;
    font-size: 1rem;
    margin-bottom: .5rem;
    margin-left: -.5rem;
    position: relative;
    top: -.8rem
}

.home .display .cmyk-number .c[data-v-8f2eb0a2]:after {
    content: "c"
}

.home .display .cmyk-number .m[data-v-8f2eb0a2]:after {
    content: "m"
}

.home .display .cmyk-number .y[data-v-8f2eb0a2]:after {
    content: "y"
}

.home .display .cmyk-number .k[data-v-8f2eb0a2]:after {
    content: "k"
}

.home .tab-wrapper[data-v-8f2eb0a2] {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 100%;
    overflow-y: scroll
}

@media (max-width:679px) {
    .home .tab-wrapper[data-v-8f2eb0a2] {
        -ms-flex-preferred-size: 100px;
        flex-basis: 100px
    }
}

@media (min-width:680px) and (max-width:1199px) {
    .home .tab-wrapper[data-v-8f2eb0a2] {
        -ms-flex-preferred-size: 400px;
        flex-basis: 400px
    }
}

@media (min-width:1200px) and (max-width:1799px) {
    .home .tab-wrapper[data-v-8f2eb0a2] {
        -ms-flex-preferred-size: 800px;
        flex-basis: 800px
    }
}

@media (min-width:1800px) {
    .home .tab-wrapper[data-v-8f2eb0a2] {
        -ms-flex-preferred-size: 1200px;
        flex-basis: 1200px
    }
}

.home .tab-wrapper .tab[data-v-8f2eb0a2] {
    position: relative;
    width: 100%
}

.home .tab-wrapper .tab[data-v-8f2eb0a2]:before {
    background: url(../images/background.png);
    background-attachment: local;
    background-repeat: repeat;
    content: "";
    display: block;
    height: 100%;
    opacity: .3;
    position: absolute;
    width: 100%
}

@media (min-width:600px) {
    .home .tab-wrapper .tab[data-v-8f2eb0a2] {
        -ms-flex-line-pack: start;
        -ms-flex-pack: start;
        -ms-flex-wrap: wrap;
        -webkit-box-pack: start;
        align-content: flex-start;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start
    }
}

.home .tab-wrapper .tab .tab-item[data-v-8f2eb0a2] {
    margin-bottom: 1rem
}

@media (max-width:679px) {
    .home .tab-wrapper .tab .tab-item[data-v-8f2eb0a2] {
        width: 100%
    }
}

@media (min-width:680px) and (max-width:1199px) {
    .home .tab-wrapper .tab .tab-item[data-v-8f2eb0a2] {
        width: 33%
    }
}

@media (min-width:1200px) and (max-width:1799px) {
    .home .tab-wrapper .tab .tab-item[data-v-8f2eb0a2] {
        width: 25%
    }
}

@media (min-width:1800px) {
    .home .tab-wrapper .tab .tab-item[data-v-8f2eb0a2] {
        width: 20%
    }
}

.color-bright[data-v-8f2eb0a2] {
    color: #fffffb !important
}

.bg-bright[data-v-8f2eb0a2] {
    background-color: #fffffb !important
}

.js-tab-item[data-v-8f2eb0a2] {
    opacity: 0
}

@font-face {
    font-family: XANO;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/XANO-mincho-U32.ttf) format("truetype")
}

@font-face {
    font-family: MONO;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/BPtypewrite.ttf) format("truetype")
}

html {
    -moz-osx-font-smoothing: grayscale;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    font-family: MONO, Avenir, Helvetica, Arial, sans-serif;
    outline: none;
    overflow-y: hidden;
    user-select: none
}

@media (max-width:679px) {
    html {
        font-size: 15px
    }
}

@media (min-width:680px) and (max-width:1199px) {
    html {
        font-size: 20px
    }
}

@media (min-width:1200px) and (max-width:1799px) {
    html {
        font-size: 23.5px
    }
}

@media (min-width:1800px) {
    html {
        font-size: 24px
    }
}