:root {
    --navi-select-back : rgba( 128 , 64 , 192 , 1.0 );
}

/**
 * ヘッダ部 : ナビゲーションエリア全体定義
 */
.cp_navi {
	background-color : #FFFFFF;
	color : #808080;
	display : block;
	white-space : nowrap;
	overflow : hidden;
}

/**
 * ナビゲーションリスト
 */
.cp_navi ul {
	margin : 0;
	padding : 0;
    background : rgba( 0 , 0 , 0 , 1.0 );
	overflow-x : auto;
}

/**
 * ナビゲーション要素 通常
 */
.cp_navi ul li {
	display : inline-block;
	list-style-type : none;
	-webkit-transition : all 0.2s;
	        transition : all 0.2s;
}
.cp_navi > ul > li > a > .caret
.cp_navi > ul > li > span > .caret {
	margin-left: 0.4rem;
	border-top : 0.5rem solid #A0A0A0;
	border-left : 0.4rem solid transparent;
	border-right : 0.4rem solid transparent;
	content : '';
	display : inline-block;
	width : 0;
	height : 0;
	vertical-align : middle;
	-webkit-transition : color 0.1s linear;
	        transition : color 0.1s linear;
}
.cp_navi > ul > li > a ,
.cp_navi > ul > li > span {
	color : #A0A0A0;
	display : block;
	line-height : 3.0rem;
	padding : 0 0.5rem 0 0.5rem;
	text-decoration : none;
}

/**
 * ナビゲーション要素 選択状態
 */
.cp_navi > ul > li.selected {
	background-color : rgba( 16 , 128 , 96 , 1.0 );
}
.cp_navi > ul > li.selected > a {
	color : #FFFFFF;
}

/**
 * ナビゲーション要素 カーソル指定時
 */
.cp_navi > ul > li:hover {
	background-color : var( --navi-select-back );
}
.cp_navi > ul > li:hover > a {
	color : rgba( 255 , 255 , 255 , 1.0 );
}
.cp_navi > ul > li:hover > a > .caret {
	border-top-color : rgba( 255 , 255 , 255 , 1.0 );
}
.cp_navi > ul > li > div {
	background-color : var( --navi-select-back );
	border-top : 0;
	border-radius : 0 0 0.2rem 0.2rem;
	box-shadow : 0 0.2rem 0.2rem -0.2rem rgba( 0 , 0 , 0 , 0.05 );
	display : none;
	margin : 0;
	opacity : 0;
	position : absolute;
	width : auto;
	visibility : hidden;
	-webkit-transiton : opacity 0.2s;
	       transition : opacity 0.2s;
}
.cp_navi > ul > li:hover > div {
	display : block;
	opacity : 1;
	visibility : visible;
	z-index : 9;
}
.cp_navi > ul > li > div ul > li {
	display : block;
}
.cp_navi > ul > li > div ul > li > a {
	color : #FFFFFF;
	display : block;
	padding : 0.2rem 1.4rem;
	text-decoration : none;
}
.cp_navi > ul > li > div ul > li:hover > a {
	background-color : var( --navi-select-back );
}

ul > li > a > img ,
ul > li > span > img {
	width : 1.6rem;
	height : auto;
	vertical-align : middle;
}

div .c {
	text-align : center;
}