/**
 primaryColor: #00d1b2
**/

html {
    scroll-behavior: smooth;
}

header {
    position: absolute;
    width: 100%;
    background: #00d1b2;
    z-index: 2;
    height: 55px;
}

#app header h1 {
    padding-left: 10px;
    padding-top: 8px;
    color: #ffffff;
}

.chaturl {
    padding-left: 10px;
}

.chaturl a {
    color: #ffffff;
    font-size: 14px;
}

.chaturl a:hover {
    text-decoration: underline;
}

#section {
    padding: 55px 0px 0px 0px;
}

#section-head {
    padding-bottom: 24px;
}

#section-ranking {
    padding: 24px 24px 24px 24px;
}

#section-content {
    padding: 24px 24px 24px 24px;
}

#section-main {
    padding-top: 24px;
}

footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    border-top: 1px solid #eeeeee;
    background: #ffffff;
}

footer .field {
    padding: 10px;
}

#message-contents {
    z-index: 1;
    padding: 55px 10px 76px 10px;
    background: #ffffff;
}

.message-wrapper {
    margin: 20px 10px;
}

.message-wrapper .box {
    float: left;
}

.message-wrapper .box.mymessage {
    float: right;
}

.mymessage p {
    text-align: right;
}

#loaded {
    display: none;
}

.ad-sp-top {
    padding-top: 12px;
    max-width: 100%;
}

.ad-sp {
    display: none;
}

.ad-sp img {
    border: 2px solid #eeeeee;
}
.ad-pc img {
    border: 2px solid #eeeeee;
}

.ranking1 {
    background: repeating-linear-gradient(0deg, #B67B03 4em, #DAAF08 8em, #FEE9A0 12em, #DAAF08 16em, #B67B03 20em); 
    color: #8B4513;
}

.ranking2 {
    background: repeating-linear-gradient(0deg, #A0A0A0 4em, #C0C0C0 8em, #F0F0F0 12em, #C0C0C0 16em, #A0A0A0 20em); 
    color: #707070;
}

.ranking3 {
    background-color: #cd7f32;
    background: repeating-linear-gradient(0deg, #9D4f02 4em, #cd7f32 8em, #FDCfA2 12em, #cd7f32 16em, #9D4f02 20em); 
    color: #7D2f00;
}

@media screen and (max-width: 768px) {
    .ad-pc {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .ad-sp {
        display: block;
    }
}