<!-- start Simple Custom CSS and JS -->
<style type="text/css">
.pc-dsp { display:block; }
.sp-dsp { display:none; }

@media only screen and (max-width : 736px){
  .pc-dsp { display:none; }
  .sp-dsp { display:block; }
}

.topic dl
,.topic dt
,.topic dd
,.topic h2
,.topic_category
,.topic_title
,.iframe
{
  margin: 0;
  padding: 0;
}
div.topic {
  width: 800px;
  height: calc(80px * 3 + 60px);
  overflow-y: auto;
  margin: 0 auto;
  margin-top: 20px;
}
.topic h2 {
  background-color: #f74459;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  padding: 6px;
  border-radius: 5px 5px 0 0;
}
/* 表組の基本設定 */
dl.topic_list {
  width: 800px;
  padding-bottom: 4px;
}
.topic_list dt,
.topic_list dd
{
  background-color: white;
  height: 80px;
  font-size: 14px;
  padding: 4px 0 0 4px;
  /*      white-space: nowrap; */
  float: left;
  border-bottom: 1px solid gray;
  /* 罫線の幅と色（以下2行、および dtの定義内、メディアクエリ設定内に同じ属性を設定） */
  border-top: 0px solid gray;
  border-right: 0px solid gray;
}
.topic_list
{
  width: 800px;
}
/* 見出し列 */
.topic_list dt
{
  width: 320px;
}
/* 内容列 */
dd.topic_category
{
  width: 150px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
dd.topic_title
{
  width: 480px;
}
.topic_news {
  width: 150px;
  background-color: #FFCC00;
  padding: 2px 4px;
  border-radius: 5px;
  margin: 2px 2px;
  display: inline-block;
  text-align: center;
}
.topic_date {
  width: 160px;
  display: inline-block;
}

/* 幅が指定より狭いときは見出し列と内容を上下に表示 */
@media screen and (max-width: 736px)
{
  .iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 200% 0 0;
  }
  div.topic {
    width: calc(100% - 14px);
/* 	height: calc(80px * 2 + 60px); */
    height: auto;
    overflow-y: auto;
    margin: 0 auto;
    margin-top: 20px;
  }
  dl.topic_list {
    width: 100%;
    padding-bottom: 10px;
  }
  .topic_list {
    width: 100%;
  }
  .topic_list dt
  ,.topic_list dd
  ,.topic_category dd
  ,.topic_title dd
  {
    width: 100%;
    height: auto;
    margin-left: 0;
    border: 0px solid gray;
  }
  .topic_title dt
  {
    border: 0px solid gray;
  }
  .topic_title dd
  {
    border: 0px solid gray;
    border-bottom: 1px solid gray;
  }

}
.icon-new {
  background-color: #F74459;
  font-size: 10px;
  color: #FFF;
  border-radius: 20px;
  padding: 2px 4px;
  margin: 0px 4px;
}
.block-new {
  width: 100%;
  text-align: center;
}
</style>
<!-- end Simple Custom CSS and JS -->
