/* components/breadcrumb.css: 下層ページのパンくず。下層のみで読み込む（marquee の後、pages/sub-common の前）。 */
.breadcrumb {
  position: absolute;
  right: 0;
  /* ヒーロー内枠の下端から16px下に固定する */
  bottom: -16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
}

.breadcrumb img:first-child {
  width: 10px;
  height: 10px;
}

.breadcrumb img:nth-of-type(2) {
  width: 7px;
  height: 12px;
  margin-inline: 3px;
}

.breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 767px) {
  /* 短いリンクや区切りアイコンまで flex の shrink で圧縮されると「ホーム」が縦に1文字ずつ折れるため、
     それらは縮めず、長い現在地（記事タイトル）だけを折り返す */
  .breadcrumb {
    position: static;
    flex-wrap: wrap;
    row-gap: 4px;
    margin-top: 50px;
    justify-content: flex-end;
    font-size: 14px;
  }

  .breadcrumb a,
  .breadcrumb img {
    flex-shrink: 0;
  }

  .breadcrumb > span:last-child {
    white-space: normal;
  }
}

@media (min-width: 768px) {
  /* PCでも長い記事タイトルで2行になると「ホーム」が潰れて見出しに重なるため、リンク・矢印は縮めず、
     現在地だけを1行で「…」省略する（SPは上の折り返し方式のまま） */
  .breadcrumb {
    max-width: 100%;
    white-space: nowrap;
  }

  .breadcrumb a,
  .breadcrumb img {
    flex-shrink: 0;
  }

  .breadcrumb > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}