<!--トピック一覧-->
<section id="topic">
 <h2 class="headingL">Topic</h2>
 <ul class="topiclist">
  <li class="topiclist__item"><a href="comic01/top.html" target="_blank" class="grid"><img
     src="http://placehold.jp/675x182.png?text=　" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
     dolore
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat.</p>
   </a></li>
  <li class="topiclist__item"><a href="comic01/top.html" target="_blank" class="grid"><img
     src="http://placehold.jp/675x182.png?text=　" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
     dolore
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat.</p>
   </a></li>
  <li class="topiclist__item"><a href="comic01/top.html" target="_blank" class="grid"><img
     src="http://placehold.jp/675x182.png?text=　" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
     dolore
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat.</p>
   </a></li>
 </ul>
</section>
<!--トピック一覧ここまで-->

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

トピック一覧

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.topiclist__item {
 margin-bottom: 40px;
}

.topiclist__item:last-child {
 margin: 0;
}

.topiclist__item .grid {
 gap: 20px;
 text-decoration: none;
 align-items: flex-start;
}

.topiclist__item .grid p {
 margin: 0;
}

/* タブレット、スマホ */
@media screen and (max-width: 768px) {
 .topiclist__item .grid {
  gap: 10px;
  grid-template-columns: 1fr;
 }
}