:root {
	--nkj-cream: #f5f1e7;
	--nkj-paper: #faf8f3;
	--nkj-marble: #d2b588;
	--nkj-marble-deep: #b8975f;
	--nkj-sumi: #1c1c1a;
	--nkj-greige: #b3a992;
	--nkj-wood: #8a6f4d;
	--nkj-wood-accessible: #765a39;
	--nkj-white: #fff;
	--nkj-font-serif: "Shippori Mincho", "Zen Old Mincho", "Noto Serif JP", serif;
	--nkj-font-sans: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	--nkj-font-latin: "Cormorant Garamond", serif;
}

.nkj-drill-series,
.nkj-drill-volume,
.nkj-drill-nav {
	box-sizing: border-box;
	color: var(--nkj-sumi);
	font-family: var(--nkj-font-sans);
	line-height: 1.9;
}

.nkj-drill-series,
.nkj-drill-volume {
	width: min(calc(100% - 32px), 920px);
	margin-inline: auto;
}

.nkj-drill-series *,
.nkj-drill-volume *,
.nkj-drill-nav * {
	box-sizing: border-box;
}

.nkj-drill-series h2,
.nkj-drill-series h3,
.nkj-drill-volume h2,
.nkj-drill-volume h3 {
	color: var(--nkj-sumi);
	font-family: var(--nkj-font-serif);
	line-height: 1.45;
}

.nkj-drill-series h2,
.nkj-drill-volume h2 {
	margin: 2.8em 0 0.8em;
	font-size: clamp(1.55rem, 4.8vw, 2.25rem);
}

.nkj-drill-series h3,
.nkj-drill-volume h3 {
	font-size: clamp(1.1rem, 3.7vw, 1.35rem);
}

.nkj-drill-series a,
.nkj-drill-volume a,
.nkj-drill-nav a {
	color: var(--nkj-wood-accessible);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.nkj-drill-kicker,
.nkj-drill-number {
	color: var(--nkj-wood-accessible);
	font-family: var(--nkj-font-latin);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	overflow-wrap: anywhere;
}

.nkj-drill-series-hero,
.nkj-drill-cover {
	position: relative;
	overflow: hidden;
	margin: 32px 0 52px;
	padding: clamp(32px, 8vw, 72px) clamp(24px, 8vw, 74px);
	border: 1px solid rgb(184 151 95 / 55%);
	background:
		linear-gradient(135deg, rgb(250 248 243 / 90%), rgb(232 220 196 / 82%)),
		repeating-linear-gradient(115deg, transparent 0 34px, rgb(184 151 95 / 10%) 35px 36px);
}

.nkj-drill-series-hero::after,
.nkj-drill-cover::after {
	position: absolute;
	right: -55px;
	bottom: -80px;
	width: 210px;
	height: 210px;
	border: 1px solid rgb(184 151 95 / 45%);
	border-radius: 50%;
	content: "国語";
	display: grid;
	place-items: center;
	color: rgb(138 111 77 / 10%);
	font-family: var(--nkj-font-serif);
	font-size: 4rem;
	transform: rotate(-10deg);
}

.nkj-drill-series-hero h2,
.nkj-drill-cover h2 {
	position: relative;
	z-index: 1;
	margin: 0.35em 0;
	font-size: clamp(2.15rem, 8vw, 4.65rem);
	letter-spacing: 0.03em;
}

.nkj-drill-series-hero h2 {
	font-size: clamp(2.05rem, 6.5vw, 3.8rem);
}

.nkj-drill-series-hero > p,
.nkj-drill-cover > p {
	position: relative;
	z-index: 1;
	overflow-wrap: anywhere;
}

.nkj-drill-motto {
	display: inline-block;
	margin-top: 1.2em;
	padding: 10px 14px;
	border: 1px solid var(--nkj-sumi);
	background: var(--nkj-sumi);
	color: var(--nkj-white);
	font-weight: 700;
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.nkj-drill-series-hero h2 {
		font-size: clamp(1.8rem, 9vw, 2.1rem);
		letter-spacing: 0.01em;
		overflow-wrap: anywhere;
	}

	.nkj-drill-motto {
		display: block;
		width: 100%;
		font-size: 0.78rem;
		letter-spacing: 0;
		line-height: 1.8;
	}
}

.nkj-drill-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

.nkj-drill-card {
	display: block;
	min-height: 190px;
	padding: 24px;
	border: 1px solid rgb(184 151 95 / 50%);
	background: var(--nkj-paper);
	box-shadow: 0 12px 28px rgb(28 28 26 / 5%);
	text-decoration: none;
	transition: transform 180ms ease, border-color 180ms ease;
}

.nkj-drill-card:hover,
.nkj-drill-card:focus-visible {
	border-color: var(--nkj-wood);
	transform: translateY(-3px);
}

.nkj-drill-card span,
.nkj-drill-card small {
	display: block;
	color: var(--nkj-wood-accessible);
	font-family: var(--nkj-font-latin);
	font-weight: 600;
	letter-spacing: 0.12em;
}

.nkj-drill-card h3 {
	margin: 0.5em 0 0.2em;
}

.nkj-drill-card p {
	margin: 0.2em 0 1em;
	color: var(--nkj-sumi);
}

.nkj-one-sheet {
	margin: 64px 0;
	padding: clamp(24px, 6vw, 48px);
	border: 1px solid rgb(184 151 95 / 55%);
	background:
		linear-gradient(135deg, rgb(250 248 243 / 94%), rgb(232 220 196 / 65%)),
		repeating-linear-gradient(115deg, transparent 0 34px, rgb(184 151 95 / 10%) 35px 36px);
}

.nkj-one-sheet h2 {
	margin-top: 0.35em;
}

.nkj-one-sheet-grid {
	display: grid;
	gap: 12px;
	margin: 28px 0 20px;
	grid-template-columns: 1fr;
}

.nkj-one-sheet-downloads {
	display: grid;
	gap: 12px;
	margin: 24px 0;
	grid-template-columns: 1fr;
}

.nkj-one-sheet-downloads .nkj-one-sheet-card {
	min-height: 150px;
	border-width: 2px;
}

.nkj-one-sheet-group {
	margin-top: 42px;
	padding-top: 26px;
	border-top: 1px solid rgb(184 151 95 / 45%);
}

.nkj-one-sheet-group h3 {
	margin: 0 0 0.35em;
	font-family: var(--nkj-font-serif);
	font-size: clamp(1.25rem, 3vw, 1.7rem);
}

.nkj-one-sheet-card {
	display: flex;
	min-height: 180px;
	padding: 20px;
	border: 1px solid rgb(184 151 95 / 55%);
	background: var(--nkj-paper);
	box-shadow: 0 10px 25px rgb(28 28 26 / 5%);
	color: var(--nkj-sumi) !important;
	flex-direction: column;
	text-decoration: none;
	transition: transform 180ms ease, border-color 180ms ease;
}

.nkj-one-sheet-card:hover,
.nkj-one-sheet-card:focus-visible {
	border-color: var(--nkj-wood);
	transform: translateY(-3px);
}

.nkj-one-sheet-card span,
.nkj-one-sheet-card small {
	color: var(--nkj-wood-accessible);
	font-family: var(--nkj-font-latin);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.nkj-one-sheet-card strong {
	margin: 0.65em 0 0.35em;
	font-family: var(--nkj-font-serif);
	font-size: 1.08rem;
	line-height: 1.6;
}

.nkj-one-sheet-card b {
	margin-top: auto;
	padding-top: 14px;
	color: var(--nkj-wood-accessible);
	font-size: 0.9rem;
}

.nkj-drill-promises,
.nkj-drill-team,
.nkj-drill-cta,
.nkj-drill-origin,
.nkj-drill-check,
.nkj-drill-about {
	margin: 48px 0;
	padding: clamp(24px, 6vw, 48px);
	border: 1px solid rgb(184 151 95 / 48%);
	background: var(--nkj-paper);
}

.nkj-drill-team dl {
	display: grid;
	gap: 0;
	margin: 24px 0;
	border-top: 1px solid rgb(184 151 95 / 35%);
}

.nkj-drill-team dl div {
	display: grid;
	gap: 4px;
	padding: 14px 0;
	border-bottom: 1px solid rgb(184 151 95 / 35%);
}

.nkj-drill-team dt {
	color: var(--nkj-wood-accessible);
	font-size: 0.85rem;
	font-weight: 700;
}

.nkj-drill-team dd {
	margin: 0;
	font-family: var(--nkj-font-serif);
	font-size: 1.12rem;
}

.nkj-drill-cta {
	border-color: var(--nkj-sumi);
	background: var(--nkj-sumi);
	color: var(--nkj-white);
}

.nkj-drill-cta h2 {
	margin-top: 0;
	color: var(--nkj-white);
}

.nkj-drill-cta a {
	display: inline-block;
	padding: 13px 20px;
	border: 3px double var(--nkj-white);
	border-radius: 2px;
	color: var(--nkj-white);
	font-weight: 700;
	text-decoration: none;
}

.nkj-drill-cta .nkj-drill-note {
	color: #e9dcc3;
}

.nkj-drill-credit {
	margin: -28px 0 32px;
	color: #5f584d;
	font-size: 0.92rem;
}

.nkj-drill-origin strong {
	font-family: var(--nkj-font-serif);
	font-size: 1.2rem;
}

.nkj-drill-question {
	margin: 24px 0;
	padding: 22px;
	border-left: 4px solid var(--nkj-marble-deep);
	background: var(--nkj-paper);
}

.nkj-drill-question h3 {
	margin: 0.25em 0 1em;
}

.nkj-drill-volume details {
	margin-top: 18px;
	border-top: 1px solid rgb(184 151 95 / 40%);
	padding-top: 14px;
}

.nkj-drill-volume summary {
	cursor: pointer;
	font-weight: 700;
}

.nkj-drill-volume details[open] summary {
	margin-bottom: 12px;
	color: var(--nkj-wood);
}

.nkj-drill-practice {
	margin: 64px 0;
	padding-top: 6px;
	border-top: 1px solid rgb(184 151 95 / 55%);
}

.nkj-drill-practice blockquote,
.nkj-drill-volume > blockquote {
	margin: 24px 0;
	padding: clamp(22px, 5vw, 36px);
	border: 0;
	background: #efe5d2;
	color: var(--nkj-sumi);
	font-family: var(--nkj-font-serif);
	font-size: 1.06rem;
}

.nkj-drill-volume table {
	display: block;
	overflow-x: auto;
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	-webkit-overflow-scrolling: touch;
}

.nkj-drill-volume th,
.nkj-drill-volume td {
	min-width: 110px;
	padding: 10px 12px;
	border: 1px solid rgb(184 151 95 / 45%);
	text-align: left;
}

.nkj-drill-volume th {
	background: #e9dcc3;
}

.nkj-drill-note {
	color: #625b50;
	font-size: 0.86rem;
}

.nkj-drill-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 8px;
	width: min(calc(100% - 32px), 920px);
	margin: 48px auto;
	padding-top: 24px;
	border-top: 1px solid rgb(184 151 95 / 55%);
}

.nkj-drill-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid rgb(184 151 95 / 50%);
	text-align: center;
	text-decoration: none;
}

.nkj-drill-nav a:last-of-type {
	justify-self: end;
}

@media (max-width: 767px) {
	.nkj-drill-series-hero h2,
	.nkj-drill-cover h2 {
		font-size: clamp(1.9rem, 8.5vw, 2.2rem);
		word-break: break-all;
	}

	.nkj-drill-motto {
		display: block;
		font-size: 0.82rem;
		overflow-wrap: anywhere;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.nkj-drill-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nkj-one-sheet-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nkj-one-sheet-downloads {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nkj-drill-team dl div {
		grid-template-columns: 160px 1fr;
		align-items: baseline;
	}
}

@media (min-width: 1024px) {
	.nkj-drill-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nkj-one-sheet-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media print {
	header,
	footer,
	.nkj-drill-nav,
	.nkj-drill-cta,
	.nkj-drill-series-hero::after,
	.nkj-drill-cover::after {
		display: none !important;
	}

	.nkj-drill-series,
	.nkj-drill-volume {
		width: 100%;
		color: #000;
	}

	.nkj-drill-volume details:not([open]) > *:not(summary) {
		display: block;
	}

	.nkj-drill-question,
	.nkj-drill-practice {
		break-inside: avoid;
	}
}