@charset "utf-8";
/* CSS Document */

html, body {
  overflow-x: hidden;
}

/* サイドバーレイアウト */

main {
	position: fixed;
    width: 7%;
    height: 100vh;
    top: 0;
    left: 0;
	background-color: #FFFFFF;
	background-image: url("../image/top-back.jpg");
	background-size: cover;
    box-shadow: 0px 0px 4px 0px #666;
	z-index: 100;
}
main img {
	width: 50px;
	margin-left: 5px;
	margin-top: 20px;
}
/*サイドバースマホ版*/
@media(max-width:750px) and (orientation: portrait){
	main, .sidebar {
		display: none;
	}
}

/*全体ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/

.newslist {
	display: block;
	position: relative;
	width: 93%;
	left: 7%;
	top: 7%;
	overflow: hidden;
	padding-top: 5rem; /* ヘッダーの高さ分ずらす */
}

/*スマホ版*/
@media(max-width:750px) and (orientation: portrait){
	.newslist{
		width: 100%;
		left: 0%;
	}
}

/*タイトルｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ*/
.news-header{
	position: fixed;
	width: 93%;
	left: 7%;
	right: 0;
	height: 5rem;
	background-image: url("../image/top-obi.jpg");
	background-position: center;
	background-size: cover;
	z-index: 100;
}


.news-header{
	font-family: serif;
	color: aliceblue;
}

.title {
	
}
.title h1{
	position: absolute;
	margin-left: 2rem;
	margin-top: 1rem;
	font-size: 1.7rem;
	color: white;
}


@media(max-width: 640px){
	.news-header {
		width: 100%;
		left: 0;
	}
}

.newslist{
	display: block;
	position: relative;
}

.news-list{
	position: relative;
	width: 90%;
	margin: 0 auto;
	padding: 5% 0;
	font-size: 1.2vw;
}
.news-list  li {
	display: flex;
	padding: 2%;
	border-bottom: 1px solid #ccc;
	list-style: none;
}

.news-list  a {
	display: flex;
	width: 93%;
	text-decoration: none;
	color: black;
}

.news-list  p{
	display: flex;
	align-items: center;
	height: 80%;
	margin-left: 3%;
	background-color: salmon;
	
	font-size: 0.8vw;
}

.news-list a:hover {
	color: #0bd;
}

.news-list  li span:first-child {
	width: 20%;
	margin-right: 5%;
}

.news-list li span:last-child {
	flex: 1;
	
}

.news-list #pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 5%;
}
.news-list #pagination button {
	border: none;
	padding: 15px 0;
	cursor: pointer;
	min-width: 40px;
	text-align: center;
	border-radius: 5px;
}

.news-list #pagination button:hover {
	color: #0bd;
}

.news-list #pagination #paginateButton {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*スマホ版*/
@media(max-width: 640px){
	.header{
		height: 10vh;
		margin: 3% 0 0 0;
	}

	.header h1{
		top: 28%;
		font-size: 5vw;
	}
	
	
	.title h1{
		position: absolute;
		width:50%;
		top: 5vh;
		left: 3vw;
		border-bottom: 0px solid;
		font-size: 1rem;
		text-shadow: 1px 2px 3px #808080;
		z-index: 999;
	}

	.news-list{
		margin: 8% auto;
		font-size: 2.2vw;
	}

	.news-list  a {
		display: flex;
		width: 100%;
		text-decoration: none;
		color: black;
	}

	.news-list  p{
		font-size: 1.8vw;
	}

	.news-list #pagination {
		display: flex;
		justify-content: center;
		gap: 3px;
		margin-top: 5%;
	}

}

/*
	.right-footer-all {
		position: relative;
		bottom: 0;
	}
*/

	/* 画面全体を占めるラッパー的扱い */
	.newslist {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 15vh); /* ヘッダー分を差し引いた高さ */
	}

	/* メインコンテンツ部分を伸ばす */
	.news-list {
		flex: 1; /* コンテンツが少なくてもフッターを下に押す */
	}