/* トピックス */
ul.topics {
    list-style-type: none;
}

    ul.topics li.headline {
        text-align: left;
        border-bottom: solid 1px #B0BCCD;
        background: url(/sp/img/pallow.png) no-repeat right;
        padding: 8px;
        font-family: HiraKakuProN-W3;
    }

        ul.topics li.headline h4, ul.topics li.headline h5 {
            width: 95%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
        }


    ul.topics li.firstblock {
        text-align: left;
        border-bottom: dotted 1px #CCC;
        /*background-color:#ffffff;*/
        padding: 4px;
        font-family: HiraKakuProN-W3;
        white-space: normal;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        /*line-height:1.7;*/
    }

        ul.topics li.firstblock img {
            display: block;
            margin: auto;
            max-width: 100%;
        }

        ul.topics li.firstblock h4 {
            border-bottom: 1px dotted #cccccc;
        }

        ul.topics li.firstblock h5 {
            text-align: right;
        }

        ul.topics li.firstblock p {
            font-size: 12px;
            line-height: 1.3;
            padding: 5px;
            white-space: normal;
        }

            ul.topics li.firstblock p img {
                display: block;
                float: none;
                margin: auto;
            }


        ul.topics li.firstblock .mvbox {
            text-align: center;
            padding-top: 5px;
        }


/** マーキーさせたい部分 */
.marquee {
    overflow: hidden; /* スクロールバーが出ないように */
    position: relative; /* マーキーの内容部分の位置の基準になるように */
    padding: 0px;
    margin: 0px;
}
    /* マーキーの内容部分の高さ確保 */
    .marquee::after {
        white-space: nowrap;
        display: inline-block;
    }
    /* マーキーさせたい部分(内側) */
    .marquee > .marquee-inner {
        position: absolute;
        top: 0;
        white-space: nowrap;
        animation-name: marquee;
        animation-timing-function: linear;
        animation-duration: 20s;
        animation-iteration-count: infinite;
    }

/** マーキーアニメーション */
@keyframes marquee {
    0% {
        left: 100%;
        transform: translate(0);
    }

    100% {
        left: 0;
        transform: translate(-100%);
    }
}