/*==================================================
　 NEWSリスト レイアウト
====================================================*/
.cateSelect {
	width: 900px;
	margin: 1em auto 2em auto;
	border-bottom: 1px solid #BFBFBF;
}
.cateSelect ul {
	display: flex;
	justify-content: space-evenly;
	padding-left: 0;
	list-style-type: none;
	margin-bottom: 0;
	margin-top: 0;
}

/* リンク */
.cateSelect li a {
	text-decoration: none;
    color: #000;
    padding: 0 10px;
}
.cateSelect li a:hover {
    color: #d1d1d1;
    transition: all .3s;
}
/*.newsLst dd a {
    padding: 0 5px;
}
.newsLst dd a:hover {
    color: #d1d1d1;
    transition: all .3s;
}*/

/* news一覧 */
.newsLst {
	width: 900px;
	padding-right: 5px;
	padding-left: 0;
    /*overflow-y: auto;
    height: 28em;*/
}
.newsLstItem {
	list-style: none;
	margin-bottom: 20px;
}

/* ページネーション */
/*.pagination {
	display: flex;
	justify-content: center;
}
.menunum {
	display: flex;
	align-items: center;
	padding: 0;
}
.menunum li {
	list-style: none;
	margin-right: 0.5em;
}
.menunum li a {
	text-decoration: none;
	padding: 8px 16px;
	color: #404040;
	background: #eee;
}
.menunum li a:hover{
	background: #ddd;
}*/
.selection {
	display: none;
}
#page-1 {
	display: block;
}

.pagination {
	display: flex;
	justify-content: center;
}

/* 矢印 */
.first-page {
	margin-right: 0.5em;
}
.first-page button, .end-page button {
	padding: 12px 13px;
	border: 0;
    color: #404040;
    background: #eee;
}
.first-page button:hover, .end-page button:hover {
    cursor: pointer;
    background: #ddd;
}
.prev-page {
	margin-right: 0.5em;
}
.prev-page button, .next-page button {
	padding: 12px 17px;
	border: 0;
    color: #404040;
    background: #eee;
}
.prev-page button:hover, .next-page button:hover {
	cursor: pointer;
    background: #ddd;
}
.next-page {
	margin-right: 0.5em;
}

/* 選択ページ */
.current a {
	color: #fff !important;
    background: #404040 !important;
}
.current a:hover {
	cursor: default !important;
    background: #404040 !important;
}


/*==================================================
　 NEWS個票 レイアウト
====================================================*/
.newsLayout {
	margin: 1em 10px;
	display: flex;
	justify-content: space-between;
	/*align-items: center;*/
}
.newsLayout p {
	width: 90%;
	margin: 1em auto;
	margin-top: 1em;
}
.newsDt {
	margin: 10px 1em;
}
.newsLayout img {
	width: 100%;
}
.SankouNws {
	width: 90%;
	margin: 2em auto 0 auto;
}
/* スライド */
.slick-list.draggable {
	margin: auto;
	width: 90%;
}

/* 行間調整 */
br {
    height: 5px;
    display: block;
    content: "";
}

/* サイドバー */
.sidebar h3 {
	margin-top: 0;
	font-size: 20px;
	position: relative;
	padding: 1rem 2rem;
	text-align: center;
	border: 3px solid #666;
	background-color: #fff;
	margin-bottom: 0;
}
.sideDtList {
	border: 3px solid #666;
	border-top: 0;
	height: 530px;
	overflow-y: auto;
}
.sideDtList::-webkit-scrollbar {
    width: 8px;
}
.sideDtList::-webkit-scrollbar-thumb {
    background: #34c0eb;
    border-radius: 10px;
}
.sideDtList::-webkit-scrollbar-track {
    background: #ededed;
    border-radius: 10px;
}
.sideDtList ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sideDtList ul li {
	padding: 5px;
    line-height: 1.3;
    margin-bottom: 4px;
}
.sideDtList ul li:hover {
	background-color: #e5f4ff;
	transition: all 0.3s ease-in-out;
	border-radius: 14px;
}
.sideDtList a {
	display: flex;
    align-items: center;
    text-decoration: none;
	color: #666;
	font-size: 13px;
	font-weight: bold;
}
.sideDtList img {
	width: 120px;
	margin-right: 5px;
}

/* サイドバー タブ */
/*tabの形状*/
.tab-area {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}
.tab, .hasCategory {
	display: block;
	font-size: 15px;
	color: #fff;
	background: #666;
	margin: 0 4px 2px 0;
	padding: 5px 10px;
	text-decoration: none;
}
.tab:hover, .hasCategory:hover {
	cursor: pointer;
}

/*liにactiveクラスがついた時の形状*/
.tab.active, .hasCategory.active {
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	border-left: 2px solid #666;
	margin-bottom: 0;
}


/*エリアの表示非表示と形状*/
.area, .areaCtg {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active, .areaCtg.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*アニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* カテゴリ　タブ */
ul.hasCategory-child {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    margin: 0;
    padding: 5px;
    background: #fff;
    border: 2px solid #666;
    list-style: none;
}
.hasCategory-child li {
    margin:10px 0 0 0;
	padding: 0px;
    font-size: 14px;
    color: #666;
    background: #fff;
}
.hasCategory-child li:hover {
	color: #d1d1d1;
	transition: all .3s;
}
.tab-area > li.hasCategory {
    position: relative;
}
li.hasCategory ul.hasCategory-child {
    position: absolute;
    width: 200px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    left: 0px;
    top: 32px;
}
li.hasCategory:hover ul.hasCategory-child {
    visibility: visible;
    opacity: 1;
}
.hasCategory-child:before{
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -15px;
    width: 265px;
    font-size: 14px;
    border: 2px solid #666;
    border-bottom: 15px solid #333333;
}