<!-- BEGIN_MODULE Topicpath id="topicpath" -->
<ul class="acms-topicpath acms-margin-bottom-mini clearfix topic-path">
  <!-- BEGIN blog:loop -->
  <li>
    <a href="{url}"><img src="/svg/top_icon.svg" /></a><span>|</span>
  </li>
  <!-- END blog:loop -->
  <!-- BEGIN category:loop -->
  <li><a href="{url}">{name}</a><span>|</span></li>
  <!-- END category:loop -->
  <!-- BEGIN entry -->
  <li>{title}</li>
  <!-- END entry -->
</ul>
<!-- END_MODULE Topicpath -->
.topic-path {
  padding-bottom: 1.5rem;
  margin: 0;
  list-style: none;
  display: flex;
  font-size: 0.75rem;
}

.topic-path li {
  display: flex;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-family: "Montserrat", /* web font*/ "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", /* Mac, iOS*/ "BIZ UDPGothic", "Meiryo",
    /* Windows*/ "Noto Sans CJK JP", /* Android*/ sans-serif; /* general term*/
}
.topic-path li span{
  margin: 0 1rem;
  color: #333333; /* 記号の色 */
  opacity: 0.7;/* 記号の色を薄く */
}

/* 最後のliのテキストが長いとき省略する */
.topic-path li:last-child {
   overflow: hidden;
 }
.topic-path li:last-child  {
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }

.topic-path li a:hover {
  opacity: 0.7;
}
.topic-path li img:hover {
  opacity: 0.7;
}
/* 改行させない */
.topic-path li a {
  word-break: keep-all;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.