/*========================================================== 
 *    Article style
 *========================================================== 
 *    @記事部分のスタイル
 *    @公開側とビジュアルエディタで共有する
 *========================================================== */
.topics-style p { margin-bottom:20px; line-height:2em; }
.topics-style .title-main { padding:10px; border-bottom: solid 1px #555; border-left:solid 7px #555; margin-bottom:20px; font-size:140%; font-weight:bold; color:#555; background-color:#f4f4f4; line-height:1.8rem;  }
.topics-style .title-sub { margin-bottom:20px; font-weight:bold; }
.topics-style .title-sub::before { content:"◯"; display:inline-block; }
.topics-style .text-par { margin-bottom:20px; }

.topics-style .box-section { margin-bottom:40px; }

.topics-style .list-ccl > li { margin-left:1em; text-indent:-1em; }
.topics-style .list-ccl > li::before { display:inline; content:"○"; }

.topics-style .list-has-one { }
.topics-style .list-has-one > dt { padding:5px 10px; border:solid 1px #6c777e; background-color:#6c777e; font-weight:bold; color:#FFF; }
.topics-style .list-has-one > dd { padding:5px 10px; border:solid 1px #6c777e; border-top:none; }

.topics-style .list-has-one.join { overflow:hidden; }
.topics-style .list-has-one.join > dt { float:left; width:24%; text-align:center; }
.topics-style .list-has-one.join > dd { float:left; width:76%; border-top:solid 1px #6c777e; }

.topics-style .list-has-one.join + .list-has-one { margin-top:30px; }

.topics-style .box-credit { display:inline-block; position:relative; padding:20px 20px 15px; border:solid 1px #333; }
.topics-style .box-credit::before { content:"CREDIT"; display:inline-block; position:absolute; top:-10px; left:-1px; padding:5px; font-size:85%; line-height:1rem; background-color:#000; color:#FFF; }

.topics-style .box-banner { width:300px; }
.topics-style .box-banner img { width:100%; }