/*==================================================================================================================================

  *パンくず

==================================================================================================================================*/
.breadcrumb {
  background-color: #f9f9f9; /* 背景色 */
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
}

/* リストの項目 */
.breadcrumb ol {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  padding-left: 0;
  margin: 0;
}

/* 各リスト項目 */
.breadcrumb li {
  display: inline-block;
  margin-right: 10px;
}

/* リスト項目間の区切り */
.breadcrumb li + li:before {
  content: "›";
  margin-left: 10px;
  color: #888; /* 区切り線色 */
}

/* リンク */
.breadcrumb a {
  text-decoration: none;
  color: #0073e6; /* リンク色 */
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: #005bb5; /* リンクのホバー時 */
}

/* 現在のページ（リンクがない） */
.breadcrumb li span {
  color: #666; /* 現在のページの色 */
}

/* スマホでの調整 */
@media (max-width: 768px) {
  .breadcrumb {
    padding: 10px 15px;
  }

  .breadcrumb li {
    display: block;
    margin-bottom: 5px;
  }

  .breadcrumb li + li:before {
    content: none; /* スマホでは区切りを消す */
  }
}