:root {
	--color-white: #ffffff;
	--color-text-primary: #1a1d21;
	--color-border-card: #c4c9ce;
	--color-bg-placeholder: #edeff2;
	--color-pale-blue: #ecf1f4;
	--color-catchcopy-text: #987210;
	--color-accent-red: #bc0007;
	--color-nav-btn: #1e2d40;
	--color-nav-btn-sp: #19293d;
	--color-text-on-brand-label: #8fa3b8;

	--color-navy: #1b2942;
	--color-navy-deep: #10192b;
	--color-navy-pale: #22334f;
	--color-accent-blue: #7ea6d1;
	--color-orange: #e79a3d;
	--color-red-dark: #d24a45;
	--color-beige: #f3eee1;
	--color-line: #3bb143;
	--color-amazon: #df933c;
	--color-rakuten: #d85151;

	--mv: linear-gradient(229deg, #1c5d82 14.75%, #12263f 75.21%);
	--bg-arrows: url(../images/bg-arrows-s2.svg);

	--font-heading: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
	--font-body: 'Noto Sans JP', sans-serif;
	--font-bracket: 'Anonymous Pro', monospace;
	--font-number: 'Cabin', sans-serif;

	--gutter-pc: 40px;
	--gutter-sp: 16px;
	--content-max: 1200px;
}

/*----------base----------*/
html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
	font-family: var(--font-body);
	color: var(--color-text-primary);
	background: var(--color-white);
}

h1,
h2,
h3 {
	font-family: var(--font-heading);
}

a {
	transition: opacity 0.2s ease;
}

:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 2px;
}

@media (hover: hover) {
	a:hover {
		opacity: 0.8;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/*----------utility----------*/
.br-sp {
	display: none;
}

.text-gradient-mv {
	color: transparent;
	background: var(--mv);
	-webkit-background-clip: text;
	background-clip: text;
}

/*----------common----------*/
.section {
	position: relative;
	overflow: hidden;
	color: var(--color-white);
}

.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
	text-align: center;
}

.section-head::before {
	content: '';
	width: 37px;
	height: 32px;
	background: url(../images/heading-check.svg) no-repeat center / contain;
}

.section-head::after {
	content: '';
	width: 74px;
	height: 2px;
	margin-top: 24px;
	background: var(--color-accent-blue);
}

.section-head p {
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

.section-heading {
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

.series > .section-head .section-heading,
.features > .section-head .section-heading {
	font-size: 28px;
}

.bracket {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
}

.bracket::before,
.bracket::after {
	flex: none;
	font-family: var(--font-bracket);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--color-text-on-brand-label);
}

.bracket::before {
	content: '[';
}

.bracket::after {
	content: ']';
}

.btn {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 80px;
	padding: 0 56px 0 32px;
	font-size: 21px;
	font-weight: 700;
	color: var(--color-white);
	border-radius: 999px;
}

.btn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 24px;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-65%) rotate(45deg);
}

/*----------main----------*/
main {
	position: relative;
	background:
		url(../images/bg-fade-top.svg) no-repeat center top / 150% auto,
		url(../images/glow-ellipse-left.svg) repeat-y -698px -466px,
		url(../images/glow-ellipse-right.svg) repeat-y 1122px 250px,
		var(--color-navy);
}

.bg-flow-series-onward {
	background: var(--bg-arrows) no-repeat center top / 100% auto;
}

.bg-flow-features {
	background: url(../images/bg-triangle.png) repeat-y center top / 100% auto;
}

/*----------hero----------*/
.hero {
	padding-top: 56px;
	text-align: center;
	background: url(../images/bg-arrows-s1.png) no-repeat center top / 100% auto;
}

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1440 / 1108;
	background:
		repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 8px),
		linear-gradient(to bottom, var(--color-white) 4.36%, rgba(255, 255, 255, 0) 100%);
	-webkit-mask: url(../images/bg-arrows-s1.png) no-repeat center top / 100% auto;
	mask: url(../images/bg-arrows-s1.png) no-repeat center top / 100% auto;
	pointer-events: none;
}

.hero-title {
	position: relative;
	z-index: 1;
	margin: 0 auto 40px;
}

.hero-title img {
	width: 100%;
	max-width: 757px;
	margin: 0 auto;
}

.hero-arrow {
	position: absolute;
	bottom: 30px;
	width: 60px;
}

.hero-arrow-left {
	left: 180px;
}

.hero-arrow-right {
	right: 180px;
}

/*----------mv----------*/
.mv-book-band {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	margin: 0 calc(-1 * var(--gutter-pc));
	padding: 32px var(--gutter-pc);
	background: linear-gradient(195deg, rgba(28, 63, 106, 0.65) 15%, rgba(18, 38, 63, 0.65) 75%);
}

.mv-book-main {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 40px;
}

:where(.mv-book-main) > .book-cover {
	width: 196px;
	height: 1px;
	min-height: 100%;
	object-fit: cover;
}

.mv-copy-books {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.mv-catchcopy {
	padding: 12px 16px 12px 20px;
	text-align: center;
	background: var(--color-white);
}

.mv-catchcopy-main {
	margin-bottom: 4px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-catchcopy-text);
}

.mv-catchcopy-main strong {
	font-size: 30px;
	color: var(--color-accent-red);
}

.mv-catchcopy-sub {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-catchcopy-text);
}

.mv-sub-books {
	display: flex;
	gap: 24px;
}

:where(.mv-sub-books) .book-cover {
	width: 107px;
}

/*----------jump-nav----------*/
.jump-nav {
	padding: 40px 8px 64px;
	background: radial-gradient(closest-side, rgba(126, 166, 209, 0.5) 20%, rgba(126, 166, 209, 0)) no-repeat center / 120% 444px;
}

.jump-nav ul {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: var(--content-max);
	margin: 0 auto;
}

.jump-nav .btn {
	min-width: 220px;
	padding: 0 24px;
	background: var(--color-nav-btn);
	box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(255, 255, 255, 0.25);
}

.jump-nav .btn::after {
	border-top: 0;
	border-bottom: 2px solid currentColor;
}

.jump-nav-label {
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/*----------series----------*/
.series {
	padding: 64px var(--gutter-pc);
	background: linear-gradient(to bottom, rgba(223, 236, 244, 0.15) 9%, rgba(223, 236, 244, 0) 49%, rgba(223, 236, 244, 0.4) 94%);
}

.subject-list-lg {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	justify-items: center;
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto 40px;
}

:where(.subject-list-lg) .book-cover {
	width: 180px;
}

.purchase-area {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 40px auto 0;
	text-align: center;
}

.purchase-buttons {
	display: flex;
	gap: 40px;
	max-width: 900px;
	margin: 0 auto;
}

.btn-amazon {
	background: var(--color-amazon);
}

.btn-rakuten {
	background: var(--color-rakuten);
}

/*----------features----------*/
.features {
	padding: 64px var(--gutter-pc) 80px;
}

.features > .section-head {
	margin-bottom: 64px;
}

.feature-index {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: var(--content-max);
	margin: 0 auto 40px;
}

.feature-index a {
	position: relative;
	display: block;
	padding: 16px 0 8px;
	text-align: center;
	color: var(--color-navy-deep);
	background: var(--color-pale-blue);
	border-radius: 12px;
}

.feature-index-number {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-number);
	font-size: 48px;
	font-weight: 500;
	font-style: italic;
	line-height: 1;
	color: var(--color-accent-blue);
}

.feature-index-label {
	gap: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.feature-index-check {
	position: absolute;
	top: 4px;
	right: 16px;
	opacity: 0.3;
}

.feature-index-chevron {
	margin: 8px auto 0;
	color: var(--color-navy-pale);
}

.feature-block {
	position: relative;
	z-index: 1;
	overflow: hidden;
	max-width: var(--content-max);
	margin: 0 auto 32px;
	padding: 48px var(--gutter-pc);
	text-align: center;
	color: var(--color-text-primary);
	background: var(--color-white) var(--bg-arrows) no-repeat center top 2% / 100% auto;
	border-radius: 16px;
}

.feature-number {
	margin-bottom: 8px;
	font-family: var(--font-number);
	font-size: 80px;
	font-weight: 500;
	font-style: italic;
	line-height: 1;
	color: var(--color-accent-blue);
}

.feature-heading {
	margin: 0 auto 32px;
	font-size: 26px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.feature-heading-text {
	min-width: 0;
}

.checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 40px;
}

.checklist li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 8px;
	background: var(--color-beige);
	border-radius: 8px;
}

.checklist-item-wide {
	grid-column: 1 / -1;
}

.checklist-3col {
	grid-template-columns: repeat(3, 1fr);
}

.checklist-badge {
	position: absolute;
	pointer-events: none;
}

.checklist-badge-100 {
	right: -12px;
	bottom: -7px;
	width: 103px;
}

.checklist-badge-hanamaru {
	top: -21px;
	right: 16px;
	width: 129px;
}

.checklist-badge-arrow {
	top: -8px;
	right: 32px;
	width: 71px;
}

.checklist p {
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: 0.05em;
	text-align: center;
}

.checklist strong {
	color: var(--color-red-dark);
}

.sample-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 32px;
}

.feature-block > .sample {
	max-width: 700px;
	margin: 0 auto;
}

.sample img {
	width: 100%;
	background: var(--color-bg-placeholder);
	border: 1px solid var(--color-border-card);
	border-radius: 4px;
}

.sample figcaption {
	margin-top: 4px;
	font-size: 14px;
	text-align: center;
}

.sample-zoom {
	position: relative;
	display: block;
	width: 100%;
	cursor: zoom-in;
}

.sample-zoom::after {
	content: '';
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 40px;
	height: 40px;
	background: url(../images/icon-ex.svg) no-repeat center / contain;
}

/*----------bonus-purchase----------*/
.bonus-purchase {
	background:
		var(--bg-arrows) no-repeat center top / 100% auto,
		linear-gradient(180deg, rgba(223, 236, 244, 0.2) 9.27%, rgba(223, 236, 244, 0) 49.07%, rgba(223, 236, 244, 0.4) 93.75%);
}

.english-bonus {
	padding: 64px var(--gutter-pc);
	text-align: center;
}

.bonus-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	gap: 24px;
	max-width: 400px;
	margin: 0 auto 40px;
}

.bonus-links li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 165px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-white);
}

.bdesk-banner {
	display: block;
	max-width: 620px;
	margin: 0 auto;
}

.purchase-final {
	padding: 64px var(--gutter-pc);
	text-align: center;
}

/*----------lightbox----------*/
.lightbox {
	width: fit-content;
	margin: auto;
	overflow: visible;
	background: none;
	border: 0;
}

.lightbox::backdrop {
	background: rgb(16 25 43 / 0.85);
}

.lightbox-image {
	width: min(1200px, calc(100vw - 32px), calc((100vh - 96px) * 1541 / 1092));
	border-radius: 4px;
}

.lightbox-close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 40px;
	height: 40px;
	font-size: 24px;
	line-height: 1;
	color: var(--color-navy);
	background: var(--color-white);
	border: 2px solid var(--color-border-card);
	border-radius: 50%;
}

html:has(.lightbox[open]) {
	overflow: hidden;
}

/*----------l-header----------*/
.l-header {
	-webkit-font-smoothing: auto;
}

/*----------footer----------*/
.footer {
	padding: 16px;
	font-size: 14px;
	text-align: center;
	color: var(--color-text-primary);
	background: var(--color-white);
}

/*----------page-top----------*/
.page-top {
	position: fixed;
	z-index: 20;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	background: var(--color-accent-blue);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-top::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid var(--color-white);
	border-left: 2px solid var(--color-white);
	transform: translate(-50%, -30%) rotate(45deg);
}

.page-top.is-visible {
	opacity: 1;
	visibility: visible;
}

/*----------SP (767px以下)----------*/
@media (max-width: 767px) {
	.br-sp {
		display: inline;
	}

	.br-pc {
		display: none;
	}

	.section {
		padding-right: var(--gutter-sp);
		padding-left: var(--gutter-sp);
	}

	.section-head {
		margin-bottom: 24px;
	}

	.section-head::after {
		margin-top: 16px;
	}

	.section-heading {
		align-self: stretch;
		justify-content: space-between;
		font-size: 18px;
	}

	.series > .section-head .section-heading {
		gap: 0;
		font-size: 18px;
	}

	.features > .section-head {
		margin-bottom: 24px;
	}

	.features > .section-head .section-heading {
		font-size: 20px;
		line-height: 1.4;
		letter-spacing: 0.03em;
	}

	.features > .section-head::after {
		width: 40px;
		margin-top: 4px;
	}

	.btn {
		flex: none;
		height: 54px;
		padding: 0 24px 0 32px;
		font-size: 18px;
		letter-spacing: 0.54px;
	}

	/*----------main----------*/
	main {
		background-size: 500% auto, auto, auto;
	}

	/*----------hero----------*/
	.hero {
		background-size: 200% auto;
	}

	.hero::before {
		left: -50%;
		width: 200%;
	}

	.hero-arrow {
		display: none;
	}

	/*----------mv----------*/
	.mv-book-band {
		margin: 0 calc(-1 * var(--gutter-sp));
		padding: 24px 0;
		background: linear-gradient(233deg, rgba(28, 63, 106, 0.65) 14.75%, rgba(18, 38, 63, 0.65) 75.21%);
	}

	.mv-book-main {
		display: grid;
		grid-template-columns: repeat(6, 33px);
		gap: 16px 24px;
	}

	.mv-copy-books,
	.mv-sub-books {
		display: contents;
	}

	.mv-catchcopy {
		grid-row: 1;
		grid-column: 1 / -1;
		justify-self: center;
		padding: 8px 8px 8px 14px;
		white-space: nowrap;
	}

	.mv-catchcopy-main {
		font-size: 18px;
		letter-spacing: 1.2px;
	}

	.mv-catchcopy-main strong {
		font-size: 24px;
	}

	.mv-catchcopy-sub {
		font-size: 18px;
		letter-spacing: 0.9px;
	}

	.mv-book-main > .book-cover,
	.mv-sub-books li {
		grid-column: span 2;
	}

	.mv-sub-books li:nth-child(3) {
		grid-column: 2 / span 2;
	}

	.book-cover {
		width: 90px;
		height: 127px;
		object-fit: cover;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
	}

	:where(.mv-book-main) > .book-cover {
		min-height: 0;
	}

	/*----------jump-nav----------*/
	.jump-nav {
		margin: 0 calc(-1 * var(--gutter-sp));
		padding: 32px var(--gutter-sp);
		background-position: calc(50% + 0.5px) -104px;
	}

	.jump-nav ul {
		grid-template-columns: 1fr;
		gap: 16px;
		width: auto;
	}

	.jump-nav .btn {
		min-width: 0;
		width: 100%;
		line-height: 1.5;
		background: var(--color-nav-btn-sp);
		box-shadow: none;
	}

	.jump-nav-label {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.jump-nav-label::after {
		content: '';
		width: 37px;
		height: 2px;
		margin-top: 2px;
		background: rgba(255, 255, 255, 0.5);
	}

	/*----------series----------*/
	.series {
		padding-top: 32px;
		padding-bottom: 16px;
	}

	.subject-list-lg {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px 24px;
		margin-bottom: 0;
	}

	.purchase-area {
		margin-top: 56px;
	}

	.purchase-buttons {
		position: relative;
		flex-direction: column;
		gap: 24px;
	}

	.purchase-buttons::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: -116px;
		left: 50%;
		width: 428px;
		height: 384px;
		background: radial-gradient(closest-side, rgba(126, 166, 209, 0.25) 50%, rgba(126, 166, 209, 0));
		transform: translateX(-50%);
	}

	/*----------features----------*/
	.feature-index {
		grid-template-columns: 1fr;
	}

	.feature-index-number {
		font-size: 32px;
	}

	.feature-block {
		padding: 32px var(--gutter-sp);
	}

	.feature-number {
		font-size: 56px;
	}

	.feature-index-label {
		font-size: 18px;
	}

	.feature-index-label::before,
	.feature-index-label::after {
		font-size: 32px;
	}

	.feature-heading {
		gap: 4px;
		font-size: 17px;
	}

	.feature-heading-text {
		min-width: auto;
		white-space: nowrap;
	}

	.checklist {
		grid-template-columns: 1fr;
	}

	.checklist-icon {
		width: 48px;
	}

	.checklist-badge-100 {
		top: -20px;
		right: -15px;
		bottom: auto;
		width: 101px;
	}

	.checklist-badge-hanamaru {
		top: -20px;
		right: -2px;
		width: 81px;
	}

	.checklist-badge-arrow {
		right: -12px;
		width: 56px;
	}

	.checklist p {
		font-size: 14px;
		line-height: 1.5;
	}

	.sample-gallery {
		grid-template-columns: 1fr;
	}

	/*----------bonus-purchase----------*/
	.english-bonus .section-head p {
		line-height: 1.5;
	}

	.bonus-links {
		gap: 16px;
	}

	.bonus-links li {
		width: 140px;
	}

	.purchase-final {
		z-index: 0;
	}

	/*----------page-top----------*/
	.page-top {
		right: 16px;
		bottom: 16px;
	}
}