<div class="informationTopics dateInline borderSolid">
    <dl>
        <dt>2015-12-31</dt>
        <dd><a href="#">新着情報が入ります新着情報が入ります。</a></dd>
    </dl>
    <dl>
        <dt>2015-07-31</dt>
        <dd><a href="#">日付が記事の左側に入ります。</a></dd>
    </dl>
</div>
<div class="informationTopics dateBlock borderSolid">
    <dl>
        <dt>2015-12-31</dt>
        <dd><a href="#">新着情報が入ります新着情報が入ります。</a></dd>
    </dl>
    <dl>
        <dt>2015-07-31</dt>
        <dd><a href="#">日付が記事の上に入ります。</a></dd>
    </dl>
</div>
<div class="informationTopics dateInline topBorder borderSolid">
    <dl>
        <dt>2015-12-31</dt>
        <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd>
    </dl>
    <dl>
        <dt>2015-07-31</dt>
        <dd><a href="#">ブロックの上端に罫線を追加します。（.topBorder）線種は実線（.borderSolid）</a></dd>
    </dl>
</div>
<div class="informationTopics dateInline borderSolid">
    <dl>
        <dt>2015-12-31</dt>
        <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd>
    </dl>
    <dl>
        <dt>2015-07-31</dt>
        <dd><a href="#">線種は実線（.borderSolid）</a></dd>
    </dl>
</div>
<div class="informationTopics dateInline borderDashed">
    <dl>
        <dt>2015-12-31</dt>
        <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd>
    </dl>
    <dl>
        <dt>2015-07-31</dt>
        <dd><a href="#">線種は破線（.borderDashed）</a></dd>
    </dl>
</div>
<div class="informationTopics dateInline borderDotted">
    <dl>
        <dt>2015-12-31</dt>
        <dd><a href="#">新着情報が入ります新着情報が入ります</a></dd>
    </dl>
    <dl>
        <dt>2015-07-31</dt>
        <dd><a href="#">線種は点線（.borderDotted）</a></dd>
    </dl>
</div>

/* =======================================================
　お知らせ一覧
========================================================== */
.informationTopics.topBorder dl:first-child { border-top: 1px solid #dddddd; }
.informationTopics dl {
    border-bottom: 1px solid #dddddd;
    position: relative;
    line-height: 1.5;
}
.informationTopics dl a {
    color: #666;
    text-decoration: none;
}
.informationTopics dl a:hover { text-decoration: underline; }

@media print, screen and (min-width: 768px) {
    .informationTopics dl { font-size: 14px; }
    .informationTopics.dateBlock dl dt { padding: 0.7em 0.7em 0; }
    .informationTopics.dateBlock dl dd { padding: 0.5em 0.7em 0.7em; }
    .informationTopics.dateInline dl dt {
        display: table-cell;
        white-space: nowrap;
        padding: 10px;
    }
    .informationTopics.dateInline dl dd {
        display: table-cell;
        padding: 10px;
    }
}

@media screen and (max-width: 767px) {
    .informationTopics dl {
        padding: 10px 0;
        font-size: 14px;
    }
    .informationTopics dl dt {
        margin-bottom: 0.5em;
        padding: 0 5px;
    }
    .informationTopics dl dd { padding: 0 5px; }
}

/* =======================================================
　お知らせ一覧
========================================================== */

//線種
$borderStyle: solid ;

//線色
$borderColor: #dddddd ;

//リンク色
$linkColor : $text_color;


.informationTopics {
    &.borderSolid {
        dl {border-style:solid;}
    }
    &.borderDashed {
        dl {border-style:dashed;}
    }
    &.borderDotted {
        dl {border-style:dotted;}
    }
    &.topBorder {
        dl:first-child {border-top-width:1px;}
    }
	dl {
        border-color:$borderColor;
        border-bottom-width:1px;
        position:relative;
        line-height:1.5;

        a {
            color:$linkColor;
            text-decoration:none;

            &:hover {
                text-decoration:underline;
            }
        }
    }
    
    @media print, screen and (min-width: 768px) {
        dl {font-size:$base_text_size;}

        &.dateBlock {
            dt {
                padding:0.7em 0.7em 0;
            }
            dd {
                padding:0.5em 0.7em 0.7em;
            }
        }
        &.dateInline {
            dt {
                display:table-cell;
                white-space:nowrap;
                padding:10px;
            }
            dd {
                display:table-cell;
                padding:10px;
            }
        }
    }
    @media screen and (max-width: 767px){
        dl {
            padding:10px 0;
            font-size:$base_text_size;
        }
        dt {
            margin-bottom:0.5em;
            padding:0 5px;
        }
        dd {
            padding:0 5px;
        }
    }
}