* {
	font-family: sans-serif;
}
html,
body {
	margin: 0;
	width: 100%;
}
.border {
	width: 100%;
	height: 16px;
	font-size: 12px;
}
header {
	width: 100%;
	height: 96px;
	background: rgb(0, 0, 192);
	position: sticky;
	top: 0px;
	left: 0px;
	z-index: 998;
}
header h1 {
font-size: 24px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
strong {
	white-space: pre-wrap;
	word-break: keep-all;
	margin: 2px;
}
header h1 {
	margin: 2px;
	color: #ffffff;
}
div.content {
	background: rgb(255, 255, 255);
}
.top[pages] {
	display: none;
}
@media screen and (max-width: 767px) {
	article {
		width: 100%;
		min-height: 128px;
		background: rgba(255, 255, 255, 1);
	}
	.article {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.content {
		position: sticky;
	top: 125px;
	left: 0px;
	z-index: 996;
		margin: 0;
		padding: 2px;
	}
	nav {
		width: 96%;
		min-height: 28px;
		background: rgba(0, 200, 255, 1);
		text-align: center;
		padding: 2%;
		position: sticky;
		top: 96px;
		left: 0px;
		z-index: 997;
	}
	nav a {
		color: white;
		font-weight: 900;
	}
	nav div.side {
		display: none;
	}
	.top {
		width: 100%;
		height: auto;
		aspect-ratio: 3/2;
		background-image: url("https://sirokuma.cloudfree.jp/assets/image/top.jpeg");
		background-size: cover;
		position: sticky;
		top: 135px;
		left: 0px;
		z-index: 995;
	}
	.top h1 {
		background: rgba(0, 0, 0, 0.4);
		margin: 0;
		width: 96%;
		height: 100%;
		padding: 2%;
		position: relative;
	}
	.top h1 button {
		width: 192px;
		height: 48px;
		border-radius: 8px;
		font-size: 20px;
		font-weight: 900;
		color: white;
		background: orange;
		border: none;
		box-shadow: 4px 4px 16px rgba(255, 255, 255, 0.5);
		position: absolute;
		bottom: 8px;
		right: 8px;
	}
	.pc-nav {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	article {
		width: 100%;
		min-height: 128px;
		background: rgba(255, 255, 255, 1);
		display: flex;
	}
	nav {
		width: 26%;
		min-height: 28px;
		background: rgba(0, 200, 255, 1);
		text-align: center;
		padding: 2%;
		position: sticky;
		top: 96px;
		left: 0px;
		z-index: 997;
	}
	nav a, .pc-nav a{
		color: white;
		font-weight: 900;
	}
	nav div.side {
		width: 96%;
		text-align: left;
		padding: 2%;
		background: rgba(0, 200, 255, 0.25);
		min-height: 32px;
	}
	main {
		width: 70%;
	}
	.content, .article {
		width: 100%;
	}
	}
	.top {
		width: 100%;
		height: auto;
		aspect-ratio: 3/2;
		background-image: url("https://sirokuma.cloudfree.jp/assets/image/top.jpeg");
		background-size: cover;
		z-index: 995;
	}
	.top h1 {
		background: rgba(0, 0, 0, 0.4);
		margin: 0;
		width: 96%;
		height: 100%;
		padding: 2%;
		position: relative;
	}
	.top h1 button {
		width: 192px;
		height: 48px;
		border-radius: 8px;
		font-size: 20px;
		font-weight: 900;
		color: white;
		background: orange;
		border: none;
		box-shadow: 4px 4px 16px rgba(255, 255, 255, 0.5);
		position: absolute;
		bottom: 8px;
		right: 8px;
	}
}
/*element style*/
table {
	width: 100%;;
	height: auto;
	margin: 8px auto;
	background: rgb(160,160,160);
}
thead {
	background: rgb(100,100,100);
	color: white;
	width: 100%;
}
tbody {
	background: rgb(200,200,200);
	color: black;
	width: 100%;
}
th,td {
	width: 100%;
}
section.img-text {
	width: 90%;
	padding: 3%;
	min-height: 32px;
	margin: 8px auto;
	display: flex;
}
section.img-text img.image {
	width: 100px;
        height: 100px;
	border-radius: 12px;
    image-rendering: crisp-edges;               /* 標準のブラウザー */
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering: -o-crisp-edges;            /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Safari, Chrome */
    image-rendering: optimize-contrast;         /* 一般的な方法 */
    image-rendering: pixelated;                 /* ピクセル化 */
    -ms-interpolation-mode: nearest-neighbor;   /* IE/Edge */
}
section.img-text div.ctx {
	padding: 2%;font-size:10px;
}
section.img-text[type="0"] {
	background: rgba(0,0,200,0.3);
	border-radius: 16px;
	outline: 2px solid rgba(0,0,200,0.2);
	outline-offset: -2px;
	box-shadow: 4px 4px 32px rgba(160,160,160,0.5);
}
section.img-text[type="1"] {
	background: rgba(0,200,0,0.3);
	border-radius: 16px;
	outline: 2px solid rgba(0,200,0,0.2);
	outline-offset: -2px;
	box-shadow: 4px 4px 32px rgba(160,160,160,0.5)
}
section.img-text[type="2"] {
	background: rgba(200,0,0,0.3);
	border-radius: 16px;
	outline: 2px solid rgba(200,0,0,0.2);
	outline-offset: -2px;
	box-shadow: 4px 4px 32px rgba(160,160,160,0.5)
}
button {
		width: 192px;
		height: 48px;
		border-radius: 8px;
		font-size: 20px;
		font-weight: 900;
		color: white;
		background: orange;
		border: none;
		box-shadow: 4px 4px 16px rgba(255, 255, 255, 0.5);
}
.news-tb {
	width: 90%;
	margin: 2px auto;
	height: 240px;
	overflow-y: scroll;
	padding: 2%;
	background: white;
	border-radius: 16px;
}
.news-header {
	width: 96%;margin: 0 auto;
	box-shadow: 4px 4px 8px rgba(100,100,100,0.5);
	border-radius: 12px;
	text-align: center;
}
.news-list div {
	width: 90%;
	margin: 0 auto;
	padding: 2%;
	border-radius: 12px;
	box-shadow: 4px 4px 8px rgba(192,192,192,0.5);
	outline: 2px solid rgba(192,192,192,0.2);
	outline-offset: 
}