@charset "UTF-8";

#pageHeaderWrapper::after { content: none; }
@media screen and (min-width:769px), print {
	.n-inner {
		max-width: 800px;
		margin-inline: auto;
	}
}

/* article */
.article {
	#articleCont {
		img { max-width: 100%; }
		.box {
			.text > * + * { margin-top: 2em; }
		}
	}
	#postPager > ul {
		display: flex;
		.noPost {
			opacity: 0;
			pointer-events: none;
		}
	}
	@media screen and (min-width:769px), print{
		#pageHeader {
			padding-left: 50px;
			.time {
				font-size: 14px;
				margin-top: 60px;
			}
			#pageJpTitle {
				font-size: 24px;
				line-height: 48px;
				margin-top: 10px;
			}
		}
		#articleCont {
			.box {
				margin-top: 45px;
				.title {
					font-size: 18px;
					&:is(* + &) { margin-top: 40px; }
				}
				* + .text { margin-top: 15px; }
			}
		}
		#postPager > ul {
			gap: 80px;
			justify-content: center;
			margin-top: 185px;
			a:hover { text-decoration: underline; }
		}
	}
	@media screen and (max-width:768px){
		#pageHeader {
			.time {
				margin-top: 43px;
			}
			#pageJpTitle {
				font-size: 20px;
				line-height: 40px;
				margin-top: 10px;
			}
		}
		#articleCont {
			padding-inline: 25px;
			.box {
				margin-top: 50px;
				.title {
					font-size: 15px;
					&:is(* + &) { margin-top: 44px; }
				}
				.text {
					&:is(* + &) { margin-top: 22px; }
				}
			}
		}
		#postPager > ul {
			margin-top: 88px;
			padding-inline: 25px;
			justify-content: space-between;
		}
	}
}

.archive {
	#archiveCont {
		#postArchiveList {
			border-left: solid #000;
		}
		#postsCont {
			.pagerCont {
				display: flex;
				justify-content: space-between;
				.nolink {
					opacity: 0;
					pointer-events: none;
				}
				ul {
					display: flex;
					&::before, li::after {
						content: "｜";
						display: inline-block;
					}
					a { text-decoration: underline; }
				}
			}
		}
	}
	@media screen and (min-width:769px), print{
		#archiveCont {
			display: flex;
			gap: 180px;
			align-items: flex-start;
			padding-top: 160px;
			#postArchiveList {
				font-size: 20px;
				padding-left: 90px;
				border-left-width: 10px;
				.title { margin-top: -0.6em; }
				.list {
					margin-block: 45px -0.6em;
					li { margin-block: 4px; }
				}
			}
			#postsCont {
				width: calc(100% - 400px);
				max-width: 512px;
				padding-top: 77px;
				#postsList {
					li + li { margin-top: 37px; }
					a:hover { text-decoration: underline; }
				}
				.pagerCont {
					margin-top: 185px;
					.prevLink, .nextLink {
						a:hover { text-decoration: underline; }
					}
					ul a:hover { text-decoration: none; }
				}
			}
		}
	}
	@media screen and (max-width:768px){
		#archiveCont {
			padding-top: 15px;
			#postArchiveList {
				font-size: 17.5px;
				padding-block: 1px;
				padding-left: 20px;
				border-left-width: 5px;
				.title { margin-top: -0.65em; }
				.list {
					margin-block: 26px -0.6em;
					li { margin-top: 4px; }
				}
			}
			#postsCont {
				padding: 95px 25px 0;
				#postsList {
					li + li { margin-top: 37px; }
				}
				.pagerCont { margin-top: 83px; }
			}
		}
	}
}