/* --------------------------------------------------

	競馬用語辞典 - カテゴリー表示

-------------------------------------------------- */


/* --------------------------------------------------
	メインカラム
-------------------------------------------------- */

/* - カテゴリー ヘッダー
-------------------------------------------------- */
#category_list_header { padding-bottom: 8px; }

#category_list_header > .content {
	display: table;
	wdith: 100%;
}

#category_list_header .content .group_title {
	
	/*background-color: #188542;*/
	/*border-radius: 2px;*/
	/*color: #fff;*/
	padding-right: 6px;
	
	
	display: table-cell;
	vertical-align: middle;
	
}

#category_list_header .content .group_title p {
	background-color: #188542;
	color: #fff;
	position: relative;
	
	border-radius: 2px;
	padding: 10px 12px;
	font-size: 1.2rem;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.4;
}

#category_list_header .content .group_title p:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(24, 133, 66, 0);
	border-left-color: #188542;
	border-width: 6px;
	margin-top: -6px;
}

#category_list_header .content h3 {
	font-size: 2.2rem;
	display: table-cell;
	padding-left: 10px;
	vertical-align: middle;
}

#category_list_header .content h3 span {
	font-size: 1.4rem;
}





/* - リスト／一覧 表示切り替え タブ
-------------------------------------------------- */
.words_body .tab { margin-top: 20px; }

.words_body .tab > ul {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.words_body .tab > ul > li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-left: 1px solid #fff;
}

.words_body .tab > ul > li:first-child { border-left: none; }

.words_body .tab > ul > li > a {
	display: block;
	background-color: #e7e7e7;
	height: 4.4rem;
	line-height: 4.4rem;
	font-weight: bold;
	color: #444;
	text-decoration: none;
}

.words_body .tab > ul > li > a:hover { background-color: #dcedc8; }

.words_body .tab > ul > li.current > a {
	background-color: #2aa83d;
	color: #fff;
}

.words_body .tab > ul > li.current > a:hover { background-color: #2aa83d; }

.words_body .tab > ul > li.current > a {
	position: relative;
	background: #2aa83d;
}

.words_body .tab > ul > li.current > a:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(42, 168, 61, 0);
	border-top-color: #2aa83d;
	border-width: 10px;
	margin-left: -10px;
}



/* - カテゴリー内 用語リスト表示
------------------------------------------------------------ */
.category_list_block {
	background-color: #eaeaea;
	padding: 5px;
}

.category_list_block ul.link_list > li > a { padding: 16px 10px; }

.category_list_block ul.link_list li a {
	font-size: 1.5rem;
	padding-left: 2.4rem;
	padding-left: 2.5rem;
}

.category_list_block ul.link_list li a i {
	text-indent: -1.5rem;
}

/* ----- 用語 読み ----- */
.category_list_block ul.link_list li span {
	display: block;
	font-size: 1.0rem;
	color: #666;
	border-top: 1px dotted #d7d7d7;
	padding-top: 0.4rem;
}







/* ------------------------------------------------------------

	979px以下

------------------------------------------------------------ */
@media screen and ( max-width : 979px ) {
	
	/* - カテゴリー内用語リスト表示
	------------------------------------------------------------ */
	.category_list_block ul.link_list > li {
		width: auto;
		float: none;
	}
	
	.category_list_block ul.link_list > li a {
		font-size: 1.4rem;
	}
	
	
	
	#category_list_header > .content {
		display: block;
		width: auto;
	}
	
	#category_list_header > .content .group_title p {
		display: block;
		padding: 4px;
		font-size: 1.1rem;
		
		display: inline-block;
		padding: 4px 8px;
	}
	
	#category_list_header > .content p:after {
		display: none;
	}
	
	#category_list_header > .content h3 {
		display: block;
		padding-left: 0;
		margin-top: 5px;
		font-size: 1.8rem;
	}
	
}


/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
	
	#category_list_header > .content h3 {
		font-size: 1.6rem;
	}
}