<head>
  <style>
    /* グローバルフォント設定 */
    body {
      font-family: "Noto Sans JP", "Roboto", "Arial", sans-serif;
    }

    /* パンくずリストの全体スタイル */
    .breadcrumbs ul {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      font-family: 'Arial', sans-serif; /* 使用されているフォントに合わせる */
      font-size: 11px; /* フォントサイズ */
      color: #333333; /* テキストカラー */
    }

    /* パンくずリストの各アイテム */
    .breadcrumbs ul li {
      list-style: none;
      display: flex;
      align-items: center;
    }

    .breadcrumbs ul li a {
      color: #333333; /* リンクカラー */
      text-decoration: none;
      font-weight: normal;
      padding-right: 10px; /* アイテム間のスペース */
      display: inline-block;
    }

    .breadcrumbs ul li a:hover {
      color: #0052cc; /* リンクホバー時のカラー */
      text-decoration: underline; /* ホバー時に下線 */
    }

    /* 最後のアイテム（リンクなし）のスタイル */
    .breadcrumbs ul li:last-child a {
      color: #666666; /* 最後のアイテムのテキストカラー */
      pointer-events: none; /* 最後のアイテムはクリック不可 */
      text-decoration: none;
    }

    /* パンくずリストの区切り（「»」） */
    .breadcrumbs .seperator {
      font-size: 12px;
      color: #666666;
      padding: 0 10px; /* 区切りの前後にスペース */
    }

    /* モバイル対応 */
    @media only screen and (max-width: 767px) {
      .breadcrumbs ul {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 10px;
      }

      .breadcrumbs ul li a {
        font-size: 12px; /* モバイルでは少し小さめに */
        padding-right: 5px;
      }

      .breadcrumbs .seperator {
        font-size: 14px;
      }
    }

    /* モバイル向け調整（文字サイズをさらに小さくする場合） */
    @media only screen and (max-width: 480px) {
      .breadcrumbs ul li a {
        font-size: 10px; /* スマホの小さい画面では文字をさらに小さく */
        padding-right: 3px; /* アイテム間のスペースを少し減らす */
      }

      .breadcrumbs .seperator {
        font-size: 12px;
      }
    }

    /* スペースや間隔調整 */
    .breadcrumbs ul li:first-child a {
      padding-left: 0;
    }

    .breadcrumbs ul li a:after {
      content: '»'; /* 区切り文字 */
      padding-left: 10px;
      color: #666666;
    }

    .breadcrumbs ul li:last-child a:after {
      content: ''; /* 最後のアイテムには区切り文字を表示しない */
    }
  </style>
</head>
