/* CSS Document */

/* Specification Menu は header.php に記述されています。 */

nav.specification-navigation {
	width:auto;
	background-color:#FFFFFF;
	display:block;
	overflow:hidden;

	height: 0px;
	margin-left:250px;
	transition: 0.5s;
	transition-timing-function: ease;
}

nav.specification-navigation.widthup {
	margin-left:61px;
}


nav.specification-navigation.open {
	height:auto;
}

/*a
#specification-menu {
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#specification-menu.open {
	max-height: 80px;
}
*/
/* 仕様書ページ関連のSpecification Menuには最初の動作がいらないので動作を切る */

#specification-menu.no-animate {
  transition: none !important;
}


nav.specification-navigation ul {
	padding:0px 10px 0px 10px;
	display:block;
	overflow:hidden;
	width:auto;
	background-color:#FFFFFF;
}

nav.specification-navigation ul li{
	width:auto;
	float:left;
	margin:5px 5px 5px 2px;
	background-color:#FFFFFF;
	line-height:100%;
	border-right:1px solid #333;
}

nav.specification-navigation ul li:last-child {
	border-right:none;
}

nav.specification-navigation ul li a{
	margin:0px 6px 0px 0px;
	padding:6px 10px 8px 10px;
	font-size:14px;
	line-height:100%;
    transition: 0.5s;
}

nav.specification-navigation ul li a span{
	width:auto;
	display:block;
	float:none;
}

nav.specification-navigation ul li a:hover {
	color:#ff66bb;
	background-color:#ffffcc;
}








/* ●●●　レスポンシブデザイン　●●● */
	
	
	
	

/* ■■　ブレイクポイント1280px PC　■■ */
@media screen and (min-width:1281px) {

}/* 1281px以上で反映 end */



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

}/* 1280px以下で反映 end */





/* ■■　ブレイクポイント960px タブレット　■■ */
@media screen and (min-width:961px) {

}/* 961px以上で反映 end */




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

nav.specification-navigation {
	/*margin-left:250px;*/
	/* メニューがコンテンツに重なるように左マージン61pxのまま end */
	margin-left:61px;
	transition: 0.5s;
}
	
nav.specification-navigation.widthup {
	margin-left:61px;
}

}/* 960px以下で反映 end */





/* ■■　ブレイクポイント768px タブレット　■■ */
@media screen and (min-width:769px) {
	
}/* 769px以上で反映 end */





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



nav.specification-navigation ul {
	padding:2px 3px 2px 3px;
}

nav.specification-navigation ul li{
	width:50%;
	margin:3px 0px 3px 0px;
	border-right:none;
}


nav.specification-navigation ul li a{
	background: url("https://cms.711css.com/wp-content/themes/711CSS_CoLtd/images/icon/icon_arrow_link_website_specifications.svg") no-repeat;
	background-size:24px 24px;
	background-position:0px 10px;
	width:auto;
	display:block;
	overflow:hidden;
	margin:0px 6px 0px 0px;
	padding:6px 10px 4px 19px;
	font-size:14px;
	line-height:100%;
}

nav.specification-navigation ul li a:nth-child(5n) {
	margin:0px 0px 0px 0px;
	}

nav.specification-navigation ul li a:hover {
	color:#ff66bb;
	background-color:#ffffcc;
}

}/* 768px以下で反映 end */



/* ■■　ブレイクポイント428px SmartPhone　■■ */
@media screen and (min-width:500px) {

}/* 429px以上で反映 end */





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

nav.specification-navigation ul li{
	width:50%;
}

}/* 428px以下で反映 end */