/* header
------------------------------------------------------------------------*/
@media screen and (min-width: 641px) {
	#topicPath { margin: 0; border: none; }
	#brandName { display: none; }
	#trigger  { display: none; }
	#brandNav { width: 100%; background: #490002; /*url(http://web.bifix.jp/images/navbar_bg.jpg) no-repeat top center; background-size: cover;*/ }
	#brandNav ul { margin: 0 auto; width: 980px; border-left: 1px solid #976f6b; }
	/*
	5つバージョン
	#brandNav li { float: left; width: 195px; text-align: center; font-size: 1.1rem; border-right: 1px solid #976f6b; }*/
	#brandNav li { float: left; width: 162.33333px; text-align: center; font-size: 1.1rem; border-right: 1px solid #976f6b; }
	/*#brandNav li:last-child { width: 195px; }*/
	/*#brandNav li { float: left; width: 193px; text-align: center; font-size: 1.1rem; border-right: 1px solid #976f6b; }
	#brandNav li:last-child { width: 194px; }*/
	#brandNav li a { display: block; padding: 10px 0; color: #fff; text-decoration: none; -webkit-transition: all .3s; transition: all .3s; }
	#brandNav li a:hover { color: #490002; background: #e1e9f6; -webkit-transition: all .3s; transition: all .3s; }
	#brandNav li a.active { background: #e1e9f6; }

	/* active設定 
	#----- #nav00 { display: none; }
	#-----.pageOutline   #nav01 a { background: #e1e9f6; color:#490002; }
*/
}
@media screen and (max-width: 640px) {
	#brandHeader { position: relative; background: #490002; }
	#brandName { padding: 7px 0 9px 0; }
	#brandName h1 { margin: 0; padding: 5px 0 0 10px; font-size: 1.4rem; color: #fff; box-sizing: border-box;}
	#brandNav { border-top: 1px solid #490002; border-bottom: 1px solid #490002; } 
	#brandNav ul { display: none; background: #490002; width: 100%; }
	#brandNav ul li { position: relative;  border-top: 1px solid #976f6b; }
	#brandNav ul li a { display: block; padding: 10px; font-size: 1.2rem; text-decoration: none; color: #fff; }
	#brandNav ul li a::after { position: absolute; top: 50%; content: ''; width: 7px; height: 7px; border: 0px; border-top: solid 3px #fff; border-right: solid 3px #fff; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 15px; margin-top: -5px; }
	#trigger { position: absolute; top: 15px; right: 5px; display: block; padding: 0 0 0 100%; width: 40px; cursor: pointer; }
	#trigger .menu-trigger,
	#trigger .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; }
	#trigger .menu-trigger { position: relative; margin-left: 10px; width: 21px; height: 18px; }
	#trigger .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 2px; }
	#trigger .menu-trigger span:nth-of-type(1) { top: 0; }
	#trigger .menu-trigger span:nth-of-type(2) { top: 8px; }
	#trigger .menu-trigger span:nth-of-type(3) { bottom: 0; }
	#trigger .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); }
	#trigger .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
	#trigger .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); }	
}