@font-face {
    font-family: "Hiragino Kaku Gothic Pro";
    font-weight: 600;
    src: url("Hiragino Kaku Gothic Pro W6.otf");
}

@font-face {
    font-family: "Hiragino Kaku Gothic Pro";
    font-weight: 400;
    src: url("Hiragino Kaku Gothic Pro W3.otf");
}

:root {
    --lvL: #777777;
    --lvE: #f16161;
    --lv2: #2d8fff;
    --lv3: #fff27e;
    --lv4: #ffa947;
    --lv5: #ec0909;
    --lv6: #9b0034;
    --lv7: #a709b6;
    --lvLtext: #FFF;
    --lvEtext: #FFF;
    --lv2text: #000;
    --lv3text: #000;
    --lv4text: #000;
    --lv5text: #FFF;
    --lv6text: #FFF;
    --lv7text: #FFF;
}

html {
    background: #000;
}

body {
    margin: 20rem 2rem;
}

img{
    display: inline-block;
}

.btn-warpper {
    margin-top: 20px;
}

.btn {
    padding: 5px;
    border: solid 2px #cfcfcf;
    color: #bcbcbc;
    border-radius: 5px;
    user-select: none;
}

.frame {
    font-family: "Hiragino Kaku Gothic Pro", sans-serif;
    color: #FFF;
    padding: 10px;
    background-color: #000;
    width: 19.5rem;
}

.frame h1 {
    background: #445b8d;
    font-size: 1.25rem;
    text-align: center;
    padding: .25rem;
    border-radius: .5rem .5rem 0 0;
    margin: 0;
}

.frame section {
    background: #293a5e;
    font-size: 1rem;
}

.frame section.final {
    border-radius: 0 0 .5rem .5rem;
    background: #3a4e7a;
}

.frame section div {
    padding: .25rem .5rem .25rem .5rem;
}

.frame section div:first-child {
}

.frame section div:last-child {
    padding-bottom: .5rem;
}

.frame section .column :is(.time, .title-b) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame section .column.time {
    background: #304679;
    border-bottom: solid .125rem #20325a;
}

.frame section .column.title-b {
    letter-spacing: 1px;
    font-size: 1.1rem;
    background: #365393;
    border-bottom: solid .125rem #223663;
}

.frame section .tag {
    width: 7.375rem;
}

.frame section .value {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 11rem;
    height: 1.5rem;
    font-size: .9rem;
    /* line-height: 1; */
    border-radius: .25rem;
}

.frame section .value.col1 {
    width: 3.25rem;
}

.frame section .value.col2 {
    margin-left: .25rem;
    width: 7.5rem;
}

.frame section .value {
}

.frame section .value .text {
    font-size: .85rem;
}

.frame section .value.lvL {
    background: var(--lvL);
    color: var(--lvLtext);
}

.frame section .value.lvE {
    background: var(--lvE);
    color: var(--lvEtext);
}

.frame section .value.lv2 {
    background: var(--lv2);
    color: var(--lv2text);
}

.frame section .value.lv3 {
    background: var(--lv3);
    color: var(--lv3text);
}

.frame section .value.lv4 {
    background: var(--lv4);
    color: var(--lv4text);
}

.frame section .value.lv5 {
    background: var(--lv5);
    color: var(--lv5text);
    font-weight: 600;
}

.frame section .value.lv6 {
    background: var(--lv6);
    color: var(--lv6text);
    font-weight: 600;
}

.frame section .value.lv7 {
    background: var(--lv7);
    color: var(--lv7text);
    font-weight: 600;
}

.frame section .column {
    display: flex;
    align-items: center;
}

.frame .section .risk {
    font-weight: 600;
}