/* ==========================================================================
   左右いっぱいに広がるモダンヘッダー（スマホ縦縮小対応版）
   ========================================================================== */
.site-header {
  width: 100vw;               /* 画面の横幅いっぱいに強制拡張 */
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* 親要素の幅を無視して画面全体に広げる裏技 */
  
  background-color: #1e293b;  /* 深みのあるダークネイビー */

  
  /* パソコンの時は少しゆったりめの上下余白 */
  padding: 20px 0;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  transition: padding 0.2s ease; /* 画面サイズ切り替え時の動きを滑らかに */
}

/* ヘッダー内部のコンテンツ（ロゴ文字）を中央に寄せる */
.header-inner {
  max-width: var(--primary-size);         /* 本文の最大幅と合わせる */
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* サイトのタイトルロゴ */
.site-logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin: 0;
  display: inline-block;
  transition: font-size 0.2s ease;
}

/* ==========================================================================
   左右いっぱいに広がる流れるパンくずリスト（スマホ縦縮小・ライトグレー版）
   ========================================================================== */
.breadcrumb-container {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  background-color: #dbe3eb;  /* 黒文字が綺麗に映える、白に近いごく淡いライトグレー */
    border-bottom: 1px solid #c4ced8; /* 旧Menuのキーカラーをアクセント線として使用 */ 
  
  /* パソコンの時は少しゆったりめの上下余白 */
  padding: 12px 0;
}

/* パンくず内部のコンテンツを中央に寄せる */
.breadcrumb-inner {
  max-width: var(--primary-size);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  
}

/* ulタグのリセットと横並び化 */
.breadcrumb-inner ul {
  list-style: none;           /* リストの黒丸を消去 */
  padding: 0;                 /* デフォルトの左側インデントをリセット */
  margin: 0;                  /* 上下の不要な余白をリセット */
  display: flex;              /* li要素を横一列に並べる */
  align-items: center;        /* 縦方向の軸を中央で綺麗に揃える */
  flex-wrap: wrap;            /* 画面幅が狭いときに安全に折り返す */
  gap: 8px;                   /* 要素同士の間隔を適度に空ける */
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;             /* はっきり読めるシックな濃いグレー */
}

/* 各liタグの挙動を調整 */
.breadcrumb-inner ul li {
  display: inline-flex;
  align-items: center;
  color: #0f172a;             /* リンクになっていないテキスト（現在地）は完全な墨黒 */
}

/* 区切り文字（ > ）が入るliタグの自動調整 */
.breadcrumb-inner ul li:not(:has(a)) {
  font-weight: 600;
}

/* 区切り文字「>」自体の色を少し落ち着かせる */
.breadcrumb-inner ul li:contains(">") {
  color: #94a3b8;             /* 区切り文字はマイルドなグレー */
  user-select: none;
}

/* パンくずの各リンク（aタグ） */
.breadcrumb-inner ul li a {
  color: #2563eb;             /* 明るい背景に馴染むスマートなロイヤルブルー */
  text-decoration: none;
  transition: all 0.2s ease;
}

/* リンクにホバーしたとき */
.breadcrumb-inner ul li a:hover {
  color: #1d4ed8;             /* ホバー時は少し濃い青に変化 */
  text-decoration: underline; /* リンクらしさを強調する下線 */
}

/* --------------------------------------------------------------------------
   【追加】スマートフォン向けの画面幅調整（画面幅768px以下の時）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .breadcrumb-container {
    /* スマホ時は上下の余白を「12px」から「6px」へ半減させて縦幅をスリムに */
    padding: 6px 0; 
  }
  
  .breadcrumb-inner {
    /* 左右の余白もスマホ用に少し詰めてコンテンツ幅を広く確保 */
    padding: 0 16px; 
  }
  
  .breadcrumb-inner ul {
    /* 文字サイズを一回り小さく（0.8rem）して、スマホ画面での折り返しを減らす */
    font-size: 0.8rem; 
    /* 要素間の隙間も少しキュッと詰める */
    gap: 6px; 
  }
}