.up-d_topics-wrapper{
  max-width:800px;
}

.up-d_topics-content a{
    display:flex;
    background: #fff;
    border: 2px solid #FAC712;
    padding:20px;
    border-radius:20px;
    align-items: center;
    background-color:#FFF9E0;
    transition:.4s;
}

.up-d_topics-img{
  position:relative;
  width:30%;
}

.up-d_topics-img::before{
  content:"";
  width:100%;
  display:block;
  padding-top:100%;
  position:relative;
}

.up-d_topics-img img{
  width:100%;
  height:100%;
  position:absolute;
  object-fit:contain;
  object-position:center;
  top:0;
  left:0;
}

.up-d_topics-cont{
  width:70%;
  padding-left:5%;
}

.up-d_topics-date{
  margin:0;
  font-weight:900;
  color:#444;
  transition:.4s;
}

.up-d_topics-title{
  margin-top:.5em;
  padding-top:.5em;
  border-top:2px solid #FAC712;
  font-size:20px;
  line-height:1.5;
  display: -webkit-box;             
  -webkit-box-orient: vertical;      /* 垂直方向に配置 */
  overflow: hidden;                  /* 溢れた部分を隠す */
  text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 2;             /* 最大行数を2行に設定 */
  color:#444;
  transition:.4s;
}

.up-d_topics-content a:hover{
  background-color: #FAC712;
  transform:scale(1.01);
  box-shadow: 0 0 3px #888;
}

.up-d_topics-content a:hover .up-d_topics-date{
  color:#fff;
}

.up-d_topics-content a:hover .up-d_topics-title{
  color:#fff;
  border-top:2px solid #fff;
}

@media(max-width: 768px){
  .up-d_topics-content a{
    display:block;
  }
  
  .up-d_topics-img{
  position:relative;
  width:100%;
  margin-bottom:10px;
}


.up-d_topics-cont{
  width:100%;
  padding-left:0%;
}


.up-d_topics-title{
  font-size:16px;
}

}

.up-d_banner-item{
  margin-top:0;
}



@media(max-width: 768px){
.up-d_banner-list {
    display: block;
}

#up-d_steam-banner {
    padding-bottom: 6rem !important;
    margin-top: 20px;
}

.up-d_steam-banner-label {
        font-size: 12px !important;
}

.up-d_steam-banner-copy {
        font-size: 14px !important;
        padding-top: 5px !important;
        line-height: 1.05;
    }
    
#up-d_steam-banner > a {
        padding: 40px 6px;
}
}
