@charset "utf-8";
/* # =================================================================
#### breadcrumb
# ================================================================= */
.breadcrumbs{
	position : relative;
	display : block;
	width : 100%;
	background : transparent;
	padding : 10px 0;
}

.breadcrumbs ul{
	position : relative;
	display : flex;
	flex-wrap : wrap; /* ← はみ出し防止 */
	justify-content : flex-start;
	align-items : center;
	width : 100%; /* ← 固定幅解除 */
	max-width : 1200px;
	margin : 0 auto;
	list-style : none;
}

.breadcrumbs ul li{
	margin-right : 5px;
	font-size : 12px;
	color : var(--font-color);
}

.breadcrumbs ul li a{
	color : var(--font-color);
	text-decoration : none;
	transition : opacity 0.3s ease;
}

.breadcrumbs ul li a:hover{
	opacity : 0.6;
}

/* 区切り矢印 */
.breadcrumbs ul li.separator{
	color : #999;
	margin : 0 5px;
	user-select : none;
}

/* 現在のページ */
.breadcrumbs ul li.current{
	font-weight : 700;
	color : var(--font-color);
	cursor : default;
	pointer-events : none;
}

/* 長いタイトルを省略表示 */
.breadcrumbs ul li:last-child{
	overflow : hidden;
	max-width : 60%;
	text-overflow : ellipsis;
	white-space : nowrap;
}
/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1366px
# ================================================================= */
@media screen and (max-width: 1366px){

}/*** 1366px ***/
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){
.breadcrumbs{
	padding : 10px 15px;
}
.breadcrumbs ul{
	width : 100%;
}
}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){

}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){

}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/