@charset "UTF-8";
/* ==========================================================================
   パンくずリスト  コラム配下のみ調整          SEOP-149 ② / 2026-08-18

   ・対象は https://almond.clinic/column/ 配下のみ
       個別記事     … #body_wrap.single-column
       カテゴリページ … #body_wrap.tax-column_category
       コラム一覧    … #body_wrap.post-type-archive-column
     他の投稿タイプのパンくずには影響しない
   ・階層そのものは parts/breadcrumb.php 側で追加している
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 記事タイトルを表示する

   SWELL本体に下記の指定があり、個別記事の最後の項目が非表示になっている。
     .single .p-breadcrumb__item:last-child > span.p-breadcrumb__text { display:none }
   追加CSSに打ち消しの指定があるが詳細度で負けているため効いていない。
   ここでは #body_wrap（SWELLが出力しているID）を付けて確実に上書きする。
   -------------------------------------------------------------------------- */
#body_wrap.single-column .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   2. スマホ・タブレット（959px以下）
      1行のまま横並びにし、横スクロールで末尾まで確認できるようにする
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {

	#body_wrap.single-column .p-breadcrumb__list,
	#body_wrap.tax-column_category .p-breadcrumb__list,
	#body_wrap.post-type-archive-column .p-breadcrumb__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	/* スクロールバーは出さない（指でスクロールする想定） */
	#body_wrap.single-column .p-breadcrumb__list::-webkit-scrollbar,
	#body_wrap.tax-column_category .p-breadcrumb__list::-webkit-scrollbar,
	#body_wrap.post-type-archive-column .p-breadcrumb__list::-webkit-scrollbar {
		display: none;
	}

	/* 縮まずに横へ伸びるようにする（既定は flex:0 1 auto で縮んでしまう） */
	#body_wrap.single-column .p-breadcrumb__item,
	#body_wrap.tax-column_category .p-breadcrumb__item,
	#body_wrap.post-type-archive-column .p-breadcrumb__item {
		flex: none;
	}
}

/* --------------------------------------------------------------------------
   3. PC（960px以上）
      全階層が見切れないようにする。
      入りきらない場合は折り返して次の行へ送る
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {

	#body_wrap.single-column .p-breadcrumb__list,
	#body_wrap.tax-column_category .p-breadcrumb__list,
	#body_wrap.post-type-archive-column .p-breadcrumb__list {
		flex-wrap: wrap;
		height: auto;
		overflow: visible;
		row-gap: 2px;
	}

	#body_wrap.single-column .p-breadcrumb__item,
	#body_wrap.tax-column_category .p-breadcrumb__item,
	#body_wrap.post-type-archive-column .p-breadcrumb__item {
		flex: none;
	}

	/* 記事タイトルが1行に収まらない場合は、その項目の中で折り返す */
	#body_wrap.single-column .p-breadcrumb__item:last-child .p-breadcrumb__text {
		white-space: normal;
	}

	/* 折り返しに合わせて、パンくず全体の高さを固定しない */
	#body_wrap.single-column .p-breadcrumb,
	#body_wrap.tax-column_category .p-breadcrumb,
	#body_wrap.post-type-archive-column .p-breadcrumb {
		height: auto;
	}
}