@charset "UTF-8";

#body_content {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1d2125;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 20px 0;
}

#title_content {
    padding: 5px 0;
    background: #203a63;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

@media (max-width:768px) {
    #title_content {
        font-size: 20px;
        padding: 6px 0;
    }
}

#header_content,
#footer_content {
    height: 100px;
    width: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 10px 0;
}

.hf_content_box{
    display: flex;
    justify-content: space-around;
}

.hf_content_box a, .block_link_title{
    display: block;
    width: 90px;
    padding: 6px 0;
    border-radius: 8px;
    background: #31363b;
    color: #fff;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    transition: .2s;
    font-weight: bold;
}

.hf_content_box a:hover{
    background: #4a90ff;
}

.hf_content_box .block_link_title{
    width: 330px;
}


.N,.灰{background:#ccc;}
.R,.青{background:#9fe8ff;}
.SR,.紫{background:#c4adff;}
.SSR,.金{background:#ffff83;}
.UR,.虹{background: linear-gradient(120deg,#fbffca,#baffbf,#a7efff,#ffabff);}
.PR{background:#ffff83;}
.DR{background: linear-gradient(120deg,#fbffca,#baffbf,#a7efff,#ffabff);}

.EX,.SSS,.SS{background: linear-gradient(135deg,#fbffca,#baffbf,#a7efff,#ffabff);}
.T0,.S\+,.S,.S-{background: #ff5252;}
.T1,.A\+,.A,.A-{background: #ffcb52;}
.T2,.B\+,.B,.B-{background: #53ff52;}
.T3,.C\+,.C,.C-{background: #52f6ff;}
.T4,.D\+,.D,.D-{background: #526eff;}
.T5,.F\+,.F,.F-{background: #a652ff;}

.T0\.5{background: #ff8352;}
.T1\.5{background: #d3ff52;}
.T2\.5{background: #52ffb9;}
.T3\.5{background: #52c6ff;}
.T4\.5{background: #6e52ff;}
.T5\.5{background: #be52ff;}

/* お気に入りのカラーパターン */
.bg_color_dark{
    background: #373737;
    color: white;
}
.bg_color_white{
    background: white;
    color: black;
}
.bg_color_yellow{
    background: #ffff83;
    color: black;
}
.bg_color_bluu{
    background: #1565c0;
    color: white;
}

#x_post_button{
    height: 34px;
    border-radius: 8px;
    background: #277aff;
    cursor: pointer;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#x_post_button:hover{
    opacity:.8;
}

#koukoku_bottom{
    width: 320px;
    margin: 10px 0;
}