@charset "utf-8";

/*-------------------------------
	ヘッダー
-------------------------------*/

.header__inner{
	background: var(--black-ordermade);
}
.header-top{
	border-bottom: 1px solid #fff;
}
.header-logo a{
	background-image: url(../images/common/logo-white.svg);
}

.header-top__nav-item a,
.header-top__nav-item a:hover{
	color: #fff;
}
.header-top__nav-item a::before,
.header-top__nav-item a:hover::before{
	background-image: url(../images/common/icon_arrow-white-border.svg);
}
.header-top__nav-item a::after{
	background: #fff;
}
.header-top__nav-youtube{
	border-color: #fff;
}

.header-bottom__nav-item{
	border-left-color: #fff;
}
.header-bottom__nav-item:last-child{
	border-right-color: #fff;
}
.header-bottom__nav-item > a,
.header-bottom__nav-item > .a{
	color: #fff;
}
.header-bottom__nav-item > a > span::before,
.header-bottom__nav-item > .a > span::before,
.header-bottom__nav-item:last-child > a > span::after,
.header-bottom__nav-item:last-child > .a > span::after{
	background: #fff;
}

.header-bottom__nav-button a{
	border: none;
}

.nav__child-item a::before{
	background-image: url(../images/common/icon_arrow-black-border.svg);
}

/* メニューをhoverした時のスタイル */
.header:has(.header-bottom__nav-item:hover) .header__inner{
	background: #fff;
}
.header:has(.header-bottom__nav-item:hover) .header-logo a{
	background-image: url(../images/common/logo.svg);
}
.header:has(.header-bottom__nav-item:hover) .header-top{
	border-bottom-color: var(--blackcolor);
}
.header:has(.header-bottom__nav-item:hover) .header-top__nav-youtube{
	border: 1px solid var(--blackcolor);
}
.header:has(.header-bottom__nav-item:hover) .header-top__nav-item a{
	color: var(--blackcolor);
}
.header:has(.header-bottom__nav-item:hover) .header-top__nav-item a::before{
	background-image: url(../images/common/icon_arrow-black-border.svg);
}
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item{
	border-left-color: var(--blackcolor);
}
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item:last-child{
	border-right-color: var(--blackcolor);
}
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item > a,
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item > .a{
	color: var(--blackcolor);
}
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item > a > span::before,
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item > .a > span::before,
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item > a > span::after,
.header:has(.header-bottom__nav-item:hover) .header-bottom__nav-item > .a > span::after{
	background: var(--blackcolor);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.header-top{
		border-bottom: none;
	}
	.menu-button.is_open + .header .header__inner{
		background: #fff;
	}
	.menu-button.is_open + .header .header-logo a{
		background-image: url(../images/common/logo.svg);
	}

}



/*-------------------------------
	ぱんくず
-------------------------------*/

.Breadclumb{
	background: var(--black-ordermade);
}
.Breadclumb__item{
	color: #fff;
}
.Breadclumb__item a{
	color: #fff;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

}