@charset "utf-8";
body {
    font-size: 1.9rem;
    color: #000;
    background-color: #fafafa
}
.container,
.footer {
    position: relative;
    overflow: hidden;
    width: 100%
}
.arti-img {
    display: block;
    position: relative;
    overflow: hidden;
    font-size: 0
}
.arti-img img {
    width: 100%;
    height: auto;
    max-height: 400px;
    transition: all 1s ease .1s
}
.arti-category a + a {
    padding-left: 10px
}

.ad-pc,
.ad-mobile,
.ad-all {
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    z-index: 1;
    margin-top: 20px !important;
}
.ad-all {
    background: #eee;
    padding: 20px 0
}
.ad-pc {
    display: block
}
.ad-mobile {
    display: none
}
.ad-pc .ad-box {
    text-align: center;
    margin: 0 auto;
    max-width: 970px
}
.ad-all .ad-box,
.ad-mobile .ad-box {
    text-align: center;
    margin: 0 auto;
    max-width: 300px;
    max-height: 250px
}
.arti-related + .ad-all .ad-box,
.arti-reply + .ad-all .ad-box {
    max-width: 100%;
    max-height: 360px;
    padding: 0 20px;
}
.ad-box .ad-banner {
    line-height: 0;
    overflow: hidden;
}
.ad-box img {
    max-width: 100%
}
@media (max-width:1024px) {
    .ad-pc {
        display: none
    }
    .ad-mobile {
        display: block
    }
}
.arti-related+.ad-all {
    margin-bottom: 70px
}
.popularity-box+.ad-all {
    max-width: 100%;
    margin-top: -100px;
    margin-bottom: 50px
}
.popularity-box+.ad-all .ad-box {
    max-width: 1460px;
}
@media (max-width:1024px) {
    .popularity-box+.ad-all {
        margin-top: -50px
    }
}
@keyframes spinCircle {
    from {
        transform: translate(-50%, -50%) rotate(0)
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}
.loadingBox .dim {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    z-index: 10000;
}
.loadingBox .circle {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 10px solid #fff;
    border-top: 10px solid red;
    border-radius: 50em;
    animation-name: spinCircle;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    z-index: 10001
}