@charset "UTF-8";

/* ++++++++++++++++++++++++++++++
report page
++++++++++++++++++++++++++++++ */
@media screen and (min-width:769px), print{
	#mainHeader { padding-bottom: 620px; }
	#lowerBox { margin-top: -545px; }
}
@media screen and (max-width:768px){
}

/* archive */
@media screen and (min-width:769px), print{
	.archive .wBox { padding-bottom: 395px; }
	#postList li + li { margin-top: 100px; }
	#postList a {
		display: flex;
		justify-content: space-between;
	}
	#postList .thumb {
		width: 280px;
		border-radius: 0 20px;
	}
	#postList .text {
		padding-top: 30px;
		width: calc(100% - 320px);
	}
	#postList .text .number {
		font-size: 12px;
		margin-bottom: 0.5em;
	}
	.pagerCont { margin-top: 195px; }
}
@media screen and (max-width:768px){
}

/* article */
#postHeader .tags {
	border-block: 1px solid #c8c8c8;
	font-family: "Noto Sans JP", sans-serif;
}
#postHeader #postTitle,
#postHeader #sTitle { color: #8246aa; }
#mainText .title { color: #6633cc; }
#mainText .text > * + * { margin-top: 2em; }
#postContents .block .blockTitle { color: #6633cc; }
#postContents .block .links li + li { margin-top: 10px; }
#postContents .block .links a {
	display: block;
	text-align: center;
	border: 1px solid #c8c8c8;
	font-family: "Noto Sans JP", sans-serif;
}
#postContents .block.table table {
	width: 100%;
	table-layout: fixed;
	border-block: 1px solid #c8c8c8;
}
#postContents .block.table table th {
	font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width:769px), print{
	.article #mainHeader { padding-bottom: 310px; }
	.article #lowerBox { margin-top: -310px; }
	#postCont {
		max-width: 1000px;
		margin-inline: auto;
		box-sizing: border-box;
	}
	#postHeader .tags { padding: 13px 0; }
	#postHeader #postTitle {
		font-size: 28px;
		margin-top: 34px;
	}
	#postHeader #sTitle {
		font-size: 16px;
		margin-top: 8px;
	}
	#mainVis { margin-top: 42px; }
	#mainText .title {
		font-size: 18px;
		margin-top: 42px;
	}
	#mainText .text { margin-top: 34px; }

	#postContents {
		margin: 90px -100px 0;
		padding-bottom: 300px;
	}
	#postContents .block + .block { margin-top: 100px; }
	#postContents .block:not(.table) {
		display: flex;
	}
	#postContents .block > * {
		box-sizing: border-box;
	}
	#postContents .block .image {
		width: 475px;
		margin-right: 50px;
	}
	#postContents .block .main {}
	#postContents .block .image + .main { width: calc(100% - 525px); }
	#postContents .block .main > * + * { margin-top: 35px; }
	#postContents .block .main > * + .blockTitle { margin-top: 45px; }
	#postContents .block .blockTitle { font-size: 18px; }
	#postContents .block .blockText > * + * { margin-top: 2em; }
	#postContents .block .links a { padding: 5px; }
	#postContents .block.table table tr > * {
		padding-block: 30px;
		vertical-align: middle;
	}
	#postContents .block.table table th {
		width: 200px;
		padding-inline: 20px;
		border-right: 1px dashed #c8c8c8;
	}
	#postContents .block.table table td { padding-inline: 40px; }
}
@media screen and (max-width:768px){
	.article #mainHeader > .inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-inline: 25px;
		& > * { padding-inline: 0 !important; }
		.archiveLink { padding-top: 46px; }
	}
	#postCont {
		display: flex;
		flex-direction: column;
		#postHeader { order: 2; }
		#mainVis { order: 1; }
		#mainText { order: 3; }
		#postContents { order: 4; }
	}
	#postHeader .tags {
		font-size: 12px;
		margin-top: 25px;
		padding-block: 10px;
	}
	#postHeader #postTitle {
		font-size: 18px;
		margin-top: 15px;
	}
	#postHeader #sTitle {
		font-size: 12px;
		margin-top: 12px;
	}
	#mainText .title { margin-top: 60px; }
	#mainText .text {
		font-size: 12px;
		margin-top: 37px;
	}
	#mainText .text > * + * { margin-top: 2em; }
	#postContents .block {
		font-size: 12px;
		padding-top: 70px;
		.image + .main { margin-top:43px; }
		.main > * + * { margin-top: 43px; }
		.image { padding-inline: 25px; }
		.blockTitle { font-size: 14px; }
		.links a { padding-block: 5px; }
	}
	#postContents .table,
	#postContents .table table,
	#postContents .table tbody,
	#postContents .table tr,
	#postContents .table tr > * {
		display: block;
	}
	#postContents .table tr > * { padding-block: 20px; }
	#postContents .table td { border-top: 1px dashed #c8c8c8; }
}