/* パンくずリンク表示 */
/*breadcrumbs--------------------------------------*/
.child-header-breadcrumbs {
  display: block;
  width: 100%;

  /* スクリーンリーダーのみのテキストを非表示にするためのクラス */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .child-header-breadcrumbs-list {
    display: block;
  }
}

.child-header-breadcrumbs-list {
  display: none;
  height: auto;
  border-top: 1px solid var(--gr-150);
  border-bottom: 1px solid var(--gr-150);
  background-color: #fff;
  overflow: hidden;
  padding: 20px 0;

  ul,
  ol {
    padding-left: 60px;
    /* white-space: nowrap; */
    line-height: 0;
    text-align: left;
    list-style: none;

    .child-header & {
      padding-left: 24px;
    }

    li {
      display: inline-block;
      position: relative;
      font-size: 12px;
      line-height: 22px;
      margin-left: 8px;
      padding-left: 8px;
      /* white-space: nowrap; */
      color: var(--night);

      &:nth-of-type(n + 2)::after {
        content: "";
        position: absolute;
        display: block;
        top: 8px;
        right: 100%;
        width: 6px;
        height: 6px;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        transform: rotate(45deg);
      }

      a {
        color: var(--night);
        /* text-decoration: none; */

        &:hover {
          text-decoration: underline;
        }

        img {
          width: 16px;
          height: auto;
          margin: 3px 0;
        }
      }

      br {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .child-header-breadcrumbs-list {
    ul,
    ol {
      padding-left: 15px;

      li:nth-of-type(1) {
        margin-left: 0;
        padding-left: 0;
      }
    }
  }
}