



/* // id #special_topic
-------------------------------------------------------- */

#special_topic {
    width: 95%;
    margin: auto;
    padding: 20px 2% 10px;
    border: #999 thin dotted;
    position: relative;
}

#special_topic h5 {
    font-size: 1.8rem;
    padding: 5px 15px;
    color: #fff;
    background: #d13a3a;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: -25px;
}

#special_topic .row{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:#aaa thin dotted;
}

#special_topic .row.last{
	border:none;
}

#special_topic .flexbox {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#special_topic figure {
    width: 10%;
}

#special_topic figure img {
    width: 100%;
    max-width: 98px;
}

#special_topic .txtbox {
    width: 88%;
}

#special_topic .red {
    color: #d13a3a;
}

#special_topic p {
    margin-bottom: 1em;
}

#special_topic .date {
    margin-bottom: 3px;
    font-size: 1.1rem;
    display: block;
}

#special_topic ul.link.topics a {
    font-weight: bold;
    color: #000;
}


#special_topic ul.link.topics a:hover {
    color: #6699cc;
}

#special_topic ul.link.topics a i {
    margin-right: 2px;
    vertical-align: middle;
}



@media print,
screen and (max-width: 768px) {
    #special_topic {
        padding: 20px 0 20px 2%;
    }

    #special_topic h5 {
        font-size: 1.6rem;
        font-size: 1.6rem;
    }

    #special_topic.clearfix::after {
        content: "";
        display: block;
        clear: both;
    }

    #special_topic .flexbox {
        display: block;
    }

    #special_topic figure {
        width: 26%;
        margin-right: 10px;
        float: left;
    }

    #special_topic .txtbox {
        width: 95%;
        float: none;
    }

}