@charset "utf-8";

.p-book {
	background-color: #d3edfb;
}
.p-book-container {
	--book-tab: 8;
	--book-width: 128;
	--book-height: 72;
	--book-rem: min(1rem, calc((100dvh - var(--header-height) - 5rem * 2) / var(--book-height)));

	--color-vol1: #371080;
	--color-vol2: #3CC05D;
	--color-vol3: #E14E4E;
	--color-vol4: #FA9450;

	--ls: 0;

	position: relative;
	padding: 5rem 0;
	.book-tab {
		a {
			position: relative;
			display: block;
			background-color: #fff;
			text-decoration: none;
			&.vol1 {
				color: var(--color-vol1);
			}
			&.vol2 {
				color: var(--color-vol2);
			}
			&.vol3 {
				color: var(--color-vol3);
			}
			&.vol4 {
				color: var(--color-vol4);
			}
		}
	}
	.page-cover {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #F57979 !important;
		.clip {
			--ls: .1em;
			position: absolute;
			top: calc(-.4 * var(--book-rem));
			left: calc(5.7 * var(--book-rem));
			width: calc(25.7 * var(--book-rem));
			height: calc(10.7 * var(--book-rem));
			background: url(../img/book/cover-clip.svg) no-repeat 50%;
			background-size: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: calc(2.88 * var(--book-rem));
			line-height: 1.4;
			padding-top: calc(1 * var(--book-rem));
			span {
				transform: rotate(6.45deg);
			}
		}
		.logo {
			width: calc(20 * var(--book-rem));
			margin-bottom: calc(3 * var(--book-rem));
		}
		h1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(101.5 * var(--book-rem));
			img:nth-child(2) {
				width: calc(40.8 * var(--book-rem));
				margin-top: calc(2 * var(--book-rem));
			}
		}
	}
	.book-page {
		user-select: text;
		-webkit-user-select: text;
		padding: calc(4 * var(--book-rem)) calc(6 * var(--book-rem)) 0;
		&.-vol1 {
			--color: var(--color-vol1);
		}
		&.-vol2 {
			--color: var(--color-vol2);
		}
		&.-vol3 {
			--color: var(--color-vol3);
		}
		&.-vol4 {
			--color: var(--color-vol4);
		}
		.contents {
			width: calc(90 * var(--book-rem));
		}
		.page-header {
			position: absolute;
			right: 0;
			top: calc(4 * var(--book-rem));
			bottom: 0;
			width: calc(26 * var(--book-rem));
			.num {
				margin-bottom: calc(4 * var(--book-rem));
				padding-bottom: calc(2 * var(--book-rem));
				font-size: calc(1.6 * var(--book-rem));
				font-weight: var(--font-weight-medium);
				line-height: 1;
				border-bottom: 2px solid;
			}
			.title {
				display: flex;
				flex-direction: row-reverse;
				gap: calc(1 * var(--book-rem));
				padding-right: calc(5 * var(--book-rem));
				color: var(--color);
				.sub {
					writing-mode: vertical-rl;
					text-orientation: upright;
					font-size: calc(3.4 * var(--book-rem));
					line-height: 1.5;
				}
				h2 {
					writing-mode: vertical-rl;
					text-orientation: upright;
					font-size: calc(5.4 * var(--book-rem));
					line-height: 1.4;
					.en {
						margin-bottom: 0.05em;
						--ls: -.05em;
					}
					.fisrt-parentheses {
						margin-top: -0.6em;
					}
				}
			}
		}
	}
	.page-index {
		.index-header {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			display: flex;
			flex-direction: row-reverse;
			gap: calc(1 * var(--book-rem));
			padding: calc(5 * var(--book-rem)) calc(4.5 * var(--book-rem)) 0 0;
			h2 {
				width: calc(13.4 * var(--book-rem));
			}
			p {
				writing-mode: vertical-rl;
				text-orientation: upright;
				font-size: calc(2.4 * var(--book-rem));
				line-height: 1.8;
				strong {
					color: #FE7D7D;
				}
			}
			.img {
				position: absolute;
				width: calc(15 * var(--book-rem));
				right: calc(2 * var(--book-rem));
				top: calc(48 * var(--book-rem));
			}
		}
		.index-list {
			display: flex;
			flex-direction: column;
			padding-top: calc(1 * var(--book-rem));
			gap: calc(3.3 * var(--book-rem));
			.index-item {
				display: flex;
				.title {
					position: relative;
					width: calc(42 * var(--book-rem));
					.num {
						font-size: calc(1.4 * var(--book-rem));
						font-weight: var(--font-weight-medium);
						line-height: 1.6;
					}
					.ico {
						position: absolute;
						right: calc(2 * var(--book-rem));
						width: calc(6 * var(--book-rem));
						top: 0;
					}
					a {
						white-space: nowrap;
						display: inline-block;
						font-size: calc(3.1 * var(--book-rem));
						line-height: 1.7;
						text-decoration-thickness: 2px;
						--a-color: var(--color);
						.arrow {
							position: relative;
							display: inline-block;
							width: calc(2 * var(--book-rem));
							height: calc(2 * var(--book-rem));
							border-radius: 100%;
							margin-left: calc(.5 * var(--book-rem));
							background-color: var(--color);
							&::after {
								content: "";
								position: absolute;
								top: 0;
								bottom: 0;
								right: 0;
								left: 10%;
								width: calc(6 / 20 * 100%);
								height: calc(8 / 20 * 100%);
								margin: auto;
								background-color: #fff;
								clip-path: polygon(0 0, 100% 50%, 0 100%);
							}
						}
					}
				}
				dl {
					position: relative;
					margin-left: auto;
					width: calc(47 * var(--book-rem));
					height: calc(13 * var(--book-rem));
					padding: calc(1.5 * var(--book-rem)) calc(2.5 * var(--book-rem));
					background-color: var(--bg);
					border-radius: calc(1 * var(--book-rem));
					font-size: calc(1.4 * var(--book-rem));
					line-height: 1.5;
					font-weight: var(--font-weight-medium);
					&::before {
						content: "";
						position: absolute;
						width: calc(2 * var(--book-rem));
						height: calc(2 * var(--book-rem));
						top: calc(5.5 * var(--book-rem));
						right: calc(100% - 1px);
						background-color: var(--bg);
						clip-path: polygon(0 50%, 100% 0, 100% 100%);
					}
					dt {
						margin-bottom: calc(1 * var(--book-rem));
						font-weight: var(--font-weight-bold);
						font-size: calc(1.8 * var(--book-rem));
						line-height: 1.4;
						color: var(--color);
					}
				}
				&.vol1 {
					--color: var(--color-vol1);
					--bg: #EFEAF8;
				}
				&.vol2 {
					--color: var(--color-vol2);
					--bg: #E5F3DF;
				}
				&.vol3 {
					--color: var(--color-vol3);
					--bg: #FFEDED;
				}
				&.vol4 {
					--color: var(--color-vol4);
					--bg: #FFF5EE;
					.ico {
						top: calc(-3 * var(--book-rem));
					}
				}
			}
		}
	}
	.page-01 {
		.contents {
			display: flex;
			flex-wrap: wrap;
			gap: calc(2 * var(--book-rem)) calc(3 * var(--book-rem));
			& > * {
				width: calc(28 * var(--book-rem));
			}
			section {
				position: relative;
				height: calc(20 * var(--book-rem));
				background-color: #fff;
				padding: calc(2 * var(--book-rem)) calc(2.8 * var(--book-rem));
				border-radius: calc(1.6 * var(--book-rem));
				font-size: calc(1.25 * var(--book-rem));
				line-height: 1.6;
				box-shadow: 2px 2px 0 0 #000;
				h3 {
					margin-bottom: calc(.5 * var(--book-rem));
					color: var(--color);
					font-size: calc(1.6 * var(--book-rem));
					line-height: 1.2;
					.sub {
						display: block;
						font-size: calc(2.5 * var(--book-rem));
						line-height: 1.2;
						white-space: nowrap;
						&.-s {
							font-size: calc(2.2 * var(--book-rem));
						}
					}
					.num {
						display: inline-block;
						font-size: calc(5.5 * var(--book-rem));
						--ls: 0;
						&.-s {
							margin-top: 0.1em;
							font-size: calc(4.4 * var(--book-rem));
						}
						&.-mr {
							margin-right: 0.05em;
						}
						&.-ml {
							margin-left: 0.05em;
						}
					}
				}
				.summary {
					width: calc(18.8 * var(--book-rem));
					.notes {
						display: block;
						font-size: calc(1.1 * var(--book-rem));
						&.-abs {
							position: absolute;
							right: calc(1 * var(--book-rem));
							bottom: calc(1.8 * var(--book-rem));
						}
					}
				}
				.ico {
					position: absolute;
					width: calc(10 * var(--book-rem));
				}
				&.-item1 {
					--color: #371080;
					.ico {
						right: 0;
						top: calc(-.6 * var(--book-rem));
					}
				}
				&.-item2 {
					--color: #0E1ABE;
					.ico {
						right: calc(2 * var(--book-rem));
						top: calc(.7 * var(--book-rem));
					}
				}
				&.-item3 {
					--color: #5F24CC;
					.ico {
						right: calc(2.2 * var(--book-rem));
						top: calc(1.7 * var(--book-rem));
					}
				}
				&.-item4 {
					--color: #09229E;
					.ico {
						right: calc(1.2 * var(--book-rem));
						top: calc(1 * var(--book-rem));
					}
				}
				&.-item5 {
					--color: #760E9C;
					.ico {
						right: calc(.8 * var(--book-rem));
						top: calc(1 * var(--book-rem));
					}
				}
				&.-item6 {
					--color: #0A77E5;
					h3 {
						margin-bottom: 0;
					}
					.ico {
						right: calc(2.2 * var(--book-rem));
						bottom: 0;
					}
				}
				&.-item7 {
					--color: #184AE0;
					.ico {
						right: calc(1.8 * var(--book-rem));
						top: calc(5.5 * var(--book-rem));
					}
				}
			}
			.break {
				position: relative;
				img {
					position: absolute;
					width: calc(10 * var(--book-rem));
				}
				&.-b1 {
					img {
						top: calc(3 * var(--book-rem));
						right: calc(5 * var(--book-rem));
						transform: rotate(-10deg);
					}
				}
				&.-b2 {
					img {
						top: calc(3 * var(--book-rem));
						left: calc(6 * var(--book-rem));
						transform: rotate(10deg);
					}
				}
			}
		}
	}
	.page-02 {
		.page-header {
			.ico {
				position: absolute;
				width: calc(12.3 * var(--book-rem));
				right: calc(12.2 * var(--book-rem));
				bottom: calc(8.7 * var(--book-rem));
			}
		}
		.contents {
			display: grid;
			grid-template-rows: repeat(2, auto);
			grid-auto-flow: column;
			gap: calc(2 * var(--book-rem)) calc(3 * var(--book-rem));
			section {
				--color: #3CC05D;
				width: calc(28 * var(--book-rem));
				&.-item3 {
					--color: #31A26B;
				}
				&.-item5 {
					margin-top: calc(-1 * var(--book-rem));
				}
				header {
					margin-bottom: calc(1 * var(--book-rem));
					text-align: center;
					p {
						margin-bottom: calc(1 * var(--book-rem));
						font-size: calc(1.5 * var(--book-rem));
						line-height: 1;
						.dot {
							display: inline-block;
							position: relative;
							&::before {
								content: "";
								position: absolute;
								right: 0;
								left: 0;
								bottom: 110%;
								margin-inline: auto;
								width: calc(.4 * var(--book-rem));
								height: calc(.4 * var(--book-rem));
								border-radius: 100%;
								background-color: var(--color);
							}
						}
					}
					h3 {
						width: calc(var(--width) / 280 * 100%);
						margin-inline: auto;
					}
				}
				.ranking {
					white-space: nowrap;
					display: flex;
					padding-top: calc(.5  * var(--book-rem));
					padding-bottom: calc(.3  * var(--book-rem));
					border-bottom: 2px solid var(--color);
					align-items: end;
					.rank {
						margin-right: calc(1 * var(--book-rem));
						font-size: calc(1.8 * var(--book-rem));
						line-height: 1;
						.num {
							font-size: calc(3.6 * var(--book-rem));
							color: var(--color);
							&.-first {
								font-size: calc(4 * var(--book-rem));
							}
						}
					}
					.title {
						font-family: "Zen Maru Gothic", sans-serif;
						font-weight: 700;
						font-size: calc(2.6 * var(--book-rem));
						line-height: 1.3;
						--ls: .05em;
						&.-l {
							font-size: calc(3 * var(--book-rem));
						}
						&.-m {
							font-size: calc(2.5 * var(--book-rem));
						}
						&.-s {
							font-size: calc(2.2 * var(--book-rem));
							line-height: 1.4;
						}
						&.-ss {
							font-size: calc(1.8 * var(--book-rem));
							line-height: 1.5;
						}
						&.-ls1 {
							letter-spacing: -.01em;
						}
						&.-udemy {
							font-size: calc(1.5 * var(--book-rem));
							line-height: 1.5;
							span {
								display: block;
								margin-top: calc(-1 * var(--book-rem));;
								font-size: calc(2.5 * var(--book-rem));
								letter-spacing: -.01em;
							}
						}
					}
					.votes {
						margin-left: auto;
						font-size: calc(1.2 * var(--book-rem));
					}
				}
				.summary {
					margin-top: calc(1 * var(--book-rem));
					padding: calc(1 * var(--book-rem)) calc(1.5 * var(--book-rem));
					background-color: var(--color);
					border-radius: calc(.6 * var(--book-rem));
					color: #fff;
					font-size: calc(1.1 * var(--book-rem));
					line-height: 1.5;
					font-weight: var(--font-weight-medium);
				}
			}
		}
	}
	.page-03 {
		padding-top: calc(2 * var(--book-rem));
		.contents {
			font-size: calc(1.5 * var(--book-rem));
			line-height: 1.6;
			font-weight: var(--font-weight-medium);
			h3 {
				width: fit-content;
				margin-bottom: calc(2 * var(--book-rem));;
				padding: calc(1 * var(--book-rem)) calc(3 * var(--book-rem));
				background-color: #fff;
				border-radius: calc(.6 * var(--book-rem));
				color: var(--color);
				font-size: calc(3.6 * var(--book-rem));
				line-height: 1.4;
				box-shadow: 2px 2px 0 0 #000;
			}
			.items {
				position: relative;
				.item {
					position: relative;
					font-size: calc(1.1 * var(--book-rem));
					line-height: 1.6;
					font-weight: var(--font-weight-medium);
					figure {
						position: relative;
						img {
							border-radius: calc(1 * var(--book-rem));
						}
						figcaption {
							position: absolute;
							left: calc(1.6 * var(--book-rem));
							top: calc(-1.6 * var(--book-rem));
							width: calc(12.8 * var(--book-rem));
							height: calc(4.4 * var(--book-rem));
							display: flex;
							justify-content: center;
							align-items: center;
							padding-bottom: calc(1 * var(--book-rem));
							background: url(../img/book/page03-fukidashi1.svg) no-repeat 50%;
							background-size: 100%;
							font-size: calc(1.4 * var(--book-rem));
							z-index: 2;
							&.-size2 {
								width: calc(17.9 * var(--book-rem));
								background-image: url(../img/book/page03-fukidashi2.svg);
							}
							&.-size3 {
								width: calc(19.9 * var(--book-rem));
								background-image: url(../img/book/page03-fukidashi3.svg);
							}
							&.-size4 {
								width: calc(27.9 * var(--book-rem));
								background-image: url(../img/book/page03-fukidashi4.svg);
							}
						}
					}
					.summary {
						margin-top: calc(1 * var(--book-rem));
					}
				}
				.address {
					display: flex;
					align-items: center;
					img {
						position: relative;
						width: calc(12.5 * var(--book-rem));
						z-index: 2;
					}
					p {
						flex-shrink: 0;
						margin-left: calc(-2 * var(--book-rem));
						width: calc(16.5 * var(--book-rem));
						padding: calc(1 * var(--book-rem)) calc(2 * var(--book-rem)) calc(1 * var(--book-rem)) calc(3 * var(--book-rem));
						border-radius: 0 10rem 10rem 0;
						background-color: var(--color);
						color: #fff;
						font-size: calc(1.1 * var(--book-rem));
						line-height: 1.6;
					}
				}
				&.-items1 {
					margin-top: calc(3 * var(--book-rem));
					.item {
						width: calc(34.2 * var(--book-rem));
						margin-bottom: calc(2 * var(--book-rem));
					}
					.-item3 {
						position: absolute;
						right: calc(-2 * var(--book-rem));
						top: calc(1 * var(--book-rem));
					}
					.-item4 {
						position: absolute;
						left: calc(37 * var(--book-rem));
						top: calc(26 * var(--book-rem));
						width: calc(25.7 * var(--book-rem));
					}
					.comment {
						position: absolute;
						left: calc(36.5 * var(--book-rem));
						top: calc(2 * var(--book-rem));
						width: calc(38.4 / 2 * var(--book-rem));
						p {
							position: absolute;
							right: 0;
							left: 0;
							top: calc(1 * var(--book-rem));
							padding-left: calc(1.5 * var(--book-rem));
							display: flex;
							justify-content: center;
							color: var(--color);
							font-size: calc(1.1 * var(--book-rem));
							line-height: 1.6;
							font-weight: var(--font-weight-bold);
						}
					}
					.address {
						position: absolute;
						left: calc(65 * var(--book-rem));
						top: calc(32 * var(--book-rem));
					}
				}
				&.-items2 {
					margin-top: calc(4 * var(--book-rem));
					margin-right: calc(-4 * var(--book-rem));
					display: flex;
					gap: calc(2 * var(--book-rem));
					.-item1 {
						width: calc(33 * var(--book-rem));
					}
					.-item2 {
						width: calc(29.2 * var(--book-rem));
					}
					.-item3 {
						position: absolute;
						left: calc(35 * var(--book-rem));
						top: calc(26 * var(--book-rem));
						width: calc(29.2 * var(--book-rem));
						figcaption {
							left: calc(0.7 * var(--book-rem));
						}
					}
					.comment {
						position: absolute;
						left: calc(2 * var(--book-rem));
						top: calc(29.3 * var(--book-rem));
						width: calc(28.3 * var(--book-rem));
						p {
							position: absolute;
							left: calc(14 * var(--book-rem));
							top: calc(4 * var(--book-rem));
							color: var(--color);
							font-size: calc(1.2 * var(--book-rem));
							line-height: 1.8;
							font-weight: var(--font-weight-bold);
							transform: rotate(-2.8deg);
							white-space: nowrap;
						}
					}
					.map {
						width: calc(24 * var(--book-rem));
						font-size: calc(1.4 * var(--book-rem));
						line-height: 1.8;
						font-weight: var(--font-weight-medium);
						img {
							display: block;
							margin-bottom: calc(2 * var(--book-rem));
							border-radius: calc(1 * var(--book-rem));
							background-color: #fff;
							box-shadow: calc(.4 * var(--book-rem)) calc(.4 * var(--book-rem)) 0 0 #000;
						}
						dt {
							margin-bottom: calc(1 * var(--book-rem));
							font-size: calc(2 * var(--book-rem));
							font-weight: var(--font-weight-bold);
							span {
								font-size: calc(16 / 20 * 100%);
							}
						}
					}
				}
				&.-items3 {
					margin-top: calc(4 * var(--book-rem));
					margin-right: calc(-5 * var(--book-rem));
					.-item1 {
						width: calc(42 * var(--book-rem));
					}
					.-item2 {
						position: absolute;
						left: calc(62 * var(--book-rem));
						top: calc(11 * var(--book-rem));
						width: calc(28.8 * var(--book-rem));
						z-index: 3;
						figure {
							figcaption {
								left: auto;
								right: calc(1 * var(--book-rem));
							}
						}
					}
					.-item3 {
						position: absolute;
						left: calc(44 * var(--book-rem));
						top: calc(26 * var(--book-rem));
						width: calc(30.2 * var(--book-rem));
						figure {
						}
					}
					.comment {
						position: absolute;
						left: calc(44.2 * var(--book-rem));
						top: calc(-2 * var(--book-rem));
						width: calc(516 / 20 * var(--book-rem));
						p {
							position: absolute;
							left: calc(12.6 * var(--book-rem));
							top: calc(3.8 * var(--book-rem));
							color: var(--color);
							font-size: calc(1.2 * var(--book-rem));
							line-height: 1.8;
							font-weight: var(--font-weight-bold);
							transform: rotate(-2.8deg);
							white-space: nowrap;
						}
					}
					.address {
						position: absolute;
						left: 0;
						top: calc(32 * var(--book-rem));
					}
				}
			}
		}
	}
	.page-04 {
		.page-header {
			.ico {
				position: absolute;
				width: calc(12 * var(--book-rem));
				right: calc(13.6 * var(--book-rem));
				bottom: calc(11.7 * var(--book-rem));
			}
		}
		padding-top: calc(6 * var(--book-rem));
		.item {
			height: calc(18 * var(--book-rem));
			margin-bottom: calc(3 * var(--book-rem));
			background-color: #fff;
			border-radius: calc(.6 * var(--book-rem));
			box-shadow: 2px 2px 0 0 #000;
			display: flex;
			align-items: center;
			font-size: calc(1.5 * var(--book-rem));
			font-weight: var(--font-weight-medium);
			line-height: 1.6;
			padding-right: calc(4 * var(--book-rem));
			&:last-child {
				margin-bottom: 0;
			}
			.logo {
				flex-shrink: 0;
				width: calc(16 * var(--book-rem));
				margin-right: calc(2 * var(--book-rem));
				text-align: center;
				img {
					width: calc(12 * var(--book-rem));
				}
				.caption {
					display: block;
					margin-top: calc(.4 * var(--book-rem));
					font-size: calc(1 * var(--book-rem));
					line-height: 1.3;
				}
			}
			h3 {
				margin-bottom: calc(2 * var(--book-rem));
				img {
					width: auto;
					height: calc(3.8 * var(--book-rem));
				}
			}
		}
	}

	@media screen and (min-width: 744px), print {
		min-height: calc(100dvh - var(--header-height));
		.book-main {
			position: relative;
			display: flex;
			flex-direction: row-reverse;
			width: calc(var(--book-width) * var(--book-rem) + var(--book-tab) * var(--book-rem));
			height: calc(var(--book-height) * var(--book-rem));
			margin-inline: auto;
			z-index: 5;
			&::before {
				content: "";
				position: absolute;
				top: 0;
				bottom: calc(.6 * var(--book-rem));
				left: calc(-1.3 * var(--book-rem));
				width: calc(3 * var(--book-rem));
				height: calc(65.2 * var(--book-rem));
				margin-block: auto;
				background: url(../img/book/book-ring.svg) no-repeat 50%;
				background-size: 100%;
				z-index: 10;
			}
		}
		.book-tab {
			width: calc(var(--book-tab) * var(--book-rem));
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: calc(1 * var(--book-rem));
			a {
				display: flex;
				justify-content: center;
				align-items: center;
				height: calc(16 * var(--book-rem));
				border-radius: 0 calc(1 * var(--book-rem)) calc(1 * var(--book-rem)) 0;
				box-shadow: 0 .4rem 1rem 0 rgba(0, 0, 0, 0.10);
				margin-left: calc(-1 * var(--book-rem));
				border-left: calc(1 * var(--book-rem)) solid;
				transition: transform var(--transition);
				.num {
					position: absolute;
					top: calc(1 * var(--book-rem));
					left: calc(1 * var(--book-rem));
					font-size: calc(1.2 * var(--book-rem));
					line-height: 1;
					font-weight: var(--font-weight-medium);
					color: var(--color-base);
				}
				.title {
					padding-top: calc(1 * var(--book-rem));
					writing-mode: vertical-rl;
					font-size: calc(1.6 * var(--book-rem));
					line-height: 1.6;
					.indent {
						padding-top: 1.6em;
					}
				}
				&.is-active {
					transform: translateX(calc(1 * var(--book-rem)));
				}
				@media (hover) {
					&:hover {
						transform: translateX(calc(1 * var(--book-rem)));
					}
				}
			}
		}
		.book-contents {
			position: relative;
			width: calc(var(--book-width) * var(--book-rem));
			background-color: #fff;
			border-radius: calc(1 * var(--book-rem));
			box-shadow: 0 .4rem 1rem 0 rgba(0, 0, 0, 0.10);
			z-index: 3;
			.swiper {
				height: calc(100% + calc(1 * var(--book-rem)));
				margin-top: calc(-1 * var(--book-rem));
				padding-top: calc(1 * var(--book-rem));
				border-radius: calc(1 * var(--book-rem));
			}
			.book-page {
				overflow: visible;
				position: relative;
				height: 100%;
				background: #fff url(../img/book/book-bg.png);
				background-size: calc(16 * var(--book-rem));
				border-radius: calc(1 * var(--book-rem));
				transition-property: transform,opacity,height,box-shadow;
			}
			.swiper-slide-prev {
				box-shadow: .8rem .8rem 2rem rgba(0, 0, 0, 0.30);
			}
		}

		.book-nav {
			position: absolute;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: end;
			gap: 1rem;
			padding: 2rem;
			z-index: 3;
			.button-prev,
			.button-next {
				position: relative;
				cursor: pointer;
				width: 4rem;
				height: 4rem;
				background-color: var(--color-base);
				border-radius: 2rem;
				&::before {
					content: "";
					position: absolute;
					top: 50%;
					right: calc(50% - .5rem);
					width: 1.2rem;
					height: 1.2rem;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transform-origin: 100% 0;
					transform: rotate(45deg);
				}
				animation: pulse 2s ease-in-out infinite;
				overflow: hidden;
				&::after {
					content: "";
					position: absolute;
					top: -50%;
					left: -120%;
					width: 60%;
					height: 200%;
					background: linear-gradient(
						90deg,
						transparent,
						rgba(255,255,255,.5),
						transparent
					);
					transform: rotate(20deg);
					animation: shine 3s 3s infinite;
				}
				&.swiper-button-disabled {
					pointer-events: none;
					opacity: 0.1;
					transform: none !important;
					&::after {
						background: none !important;
					}
				}
				@media (hover) {
					transition: opacity var(--transition);
					&:hover {
						opacity: 0.5;
					}
				}
			}
			.button-prev::before {
				top: 50%;
				right: auto;
				left: calc(50% - .5rem);
				border-right: 0;
				border-left: 2px solid #fff;
				transform-origin: 0 0;
				transform: rotate(-45deg);
			}
			.swiper-pagination {
				position: static;
				width: auto;
				gap: 1rem;
				margin-right: 0.6rem;
				.swiper-pagination-bullet {
					margin: 0;
					width: 0.8rem;
					height: 0.8rem;
					border: 1px solid var(--color-base);
					background-color: #DCDDDD;
					opacity: 1;
				}
				.swiper-pagination-bullet-active {
					background-color: #FFF200;
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		--book-rem: 1rem;

		padding: 5rem 0 6rem 1rem;
		.swiper-wrapper {
			transform: none !important;
			display: block;
			height: auto;
		}
		.swiper-slide {
			width: auto;
			height: auto;
		}
		.book-tab {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 0.3rem;
			a {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 6rem;
				padding-top: 2rem;
				border-radius: .8rem .8rem 0 0;
				font-size: 1.1rem;
				line-height: 1.4;
				text-align: center;
				.num {
					position: absolute;
					right: 0;
					left: 0;
					top: 0.8rem;
					font-size: 1.3rem;
					line-height: 1;
				}
			}
		}
		.book-contents {
			position: relative;
			background: #fff url(../img/book/book-bg.png);
			background-size: 16rem;
			border-radius: 0 0 0 1rem;
			&::before {
				content: "";
				position: absolute;
				top: 2rem;
				bottom: 2rem;
				left: -.8rem;
				width: 1.6rem;
				height: auto;
				margin-block: auto;
				background: url(../img/book/book-ring.svg) repeat-y 50% 0;
				background-size: 100%;
				z-index: 10;
			}
		}
		.page-cover {
			padding: 8rem 0 !important;
			.clip {
				--ls: .1em;
				position: absolute;
				top: 0rem;
				left: 2rem;
				transform-origin: 0 0;
				transform: scale(.5);
			}
			.logo {
				width: 10rem;
				margin-bottom: 1rem;
			}
			h1 {
				width: 32rem;
				img:nth-child(2) {
					width: 16rem;
					margin-top: 1rem;
				}
			}
		}
		.book-page {
			padding: 4rem 2.5rem;
			.contents {
				width: auto;
			}
			.page-header {
				position: relative;
				top: 0;
				width: auto;
				.num {
					margin-bottom: 3rem;
					margin-right: -2.5rem;
					padding-bottom: 1rem;
					font-size: 1.4rem;
				}
				.title {
					justify-content: center;
					gap: 1rem;
					padding: 0;
					margin-bottom: 3rem;
					.sub {
						font-size: calc(3.4 * .6 * var(--book-rem));
					}
					h2 {
						font-size: calc(5.4 * .6 * var(--book-rem));
					}
				}
			}
		}
		.page-index {
			.index-header {
				position: relative;
				justify-content: center;
				gap: 2rem;
				padding: 0;
				h2 {
					width: calc(13.4 * .6 * var(--book-rem));
				}
				p {
					font-size: calc((2.4 * .6) * var(--book-rem));
				}
				.img {
					top: 22rem;
					right: 0rem;
					width: 10rem;
				}
			}
			.index-list {
				display: none;
				gap: 2rem;
				.index-item {
					display: block;
					.title {
						width: auto;
						.num {
							font-size: 1.3rem;
						}
						.ico {
							right: 0;
							width: 5rem;
							top: 0;
						}
						a {
							font-size: 2.4rem;
						}
					}
					dl {
						margin-top: 1rem;
						width: auto;
						height: auto;
						padding: 1.5rem 2rem;
						font-size: 1.3rem;
						&::before {
							top: -1rem;
							right: calc(50% - 1rem);
							clip-path: polygon(50% 0, 100% 100%, 0 100%);
						}
						dt {
							margin-bottom: 0.5rem;
							font-size: 1.6rem;
						}
					}
					&.vol4 {
						.ico {
							top: -2rem;
						}
					}
				}
			}
		}
		.page-01 {
			.contents {
				gap: 1rem;
				& > * {
					width: calc((100% - 1rem) / 2);
				}
				section {
					height: auto;
					padding: 2rem 1rem 1rem;
					border-radius: 1rem;
					font-size: 1.1rem;
					h3 {
						margin-bottom: calc(.5 * var(--book-rem));
						font-size: 1.2rem;
						.sub {
							font-size: 1.8rem;
							&.-s {
								font-size: 1.5rem;
							}
						}
						.num {
							font-size: 3.8rem;
							&.-s {
								margin-top: 0.2em;
								font-size: 3.2rem;
							}
						}
					}
					.summary {
						width: auto;
						.notes {
							margin-top: 0.3em;
							&.-abs {
								position: static;
								text-align: right;
							}
						}
					}
					.ico {
						width: 6rem;
						top: 1rem !important;
						right: .5rem !important;
					}
					&.-item1 {
						.ico {
							right: -1rem !important;
						}
					}
				}
				.break {
					img {
						width: 8rem;
					}
					&.-b2 {
						display: none;
					}
				}
			}
		}
		.page-02 {
			.page-header {
				.ico {
					width: 9rem;
					right: 0rem;
					bottom: 0rem;
				}
			}
			.contents {
				display: block;
				margin-inline: 2rem;
				section {
					width: auto;
					&:not(:last-child) {
						margin-bottom: 4rem;
					}
					&.-item5 {
						margin-top: 0;
					}
				}
				.comment {
					margin-top: -2rem;
					margin-bottom: 2rem;
				}
			}
		}
		.page-03 {
			& + .page-03 {
				padding-top: 0;
				margin-top: -1rem;
			}
			.contents {
				font-size: 1.3rem;
				h3 {
					margin-bottom: 2rem;
					padding: 1rem 2rem;
					font-size: 2rem;
				}
				.items {
					.address {
						margin-top: 1rem;
						justify-content: center;
						img {
							width: 10rem;
						}
					}
					&.-items1 {
						margin-top: 4rem;
						.item {
							width: auto;
							margin-bottom: 3rem;
						}
						.-item3 {
							position: static;
						}
						.-item4 {
							position: static;
						}
						.comment {
							position: relative;
							inset: 0;
							margin-inline: auto;
						}
						.address {
							position: static;
						}
					}
					&.-items2 {
						margin-top: 4rem;
						margin-right: 0;
						display: block;
						.item {
							width: auto;
							margin-bottom: 3rem;
						}
						.-item3 {
							position: static;
							figcaption {
								left: calc(1.6 * var(--book-rem));
							}
						}
						.comment {
							position: relative;
							inset: 0;
							margin-inline: auto;
							margin-top: -2rem;
						}
						.map {
							margin-inline: auto;
							margin-top: 2rem;
						}
					}
					&.-items3 {
						margin-top: 4rem;
						margin-right: 0;
						.item {
							position: relative;
							inset: 0;
							width: auto;
							margin-bottom: 3rem;
						}
						.-item2 {
							width: auto;
							margin-left: auto;
							figure  {
								figcaption {
									right: auto;
									left: calc(1.6 * var(--book-rem));
								}
							}
						}
						.-item3 {
							width: auto;
						}
						.comment {
							position: relative;
							inset: 0;
							margin-inline: auto;
							margin-top: -2rem;
						}
						.address {
							position: static;
						}
					}
				}
			}
		}
		.page-04 {
			.page-header {
				.ico {
					width: 9rem;
					right: 0rem;
					bottom: 0rem;
				}
			}
			.item {
				height: auto;
				display: block;
				font-size: 1.3rem;
				padding: 0 2rem 3rem;
				.logo {
					margin-inline: auto;
				}
				h3 {
					margin-bottom: 1rem;
					img {
						width: auto;
						height: 2.2rem;
					}
				}
				&.-item3 {
					padding-top: 2rem;
					.logo {
						margin-bottom: 1.5rem;
					}
				}
			}
		}
	}

	.-ico1 {
		bottom: 11rem;
		left: 1rem;
	}
	.-ico2 {
		top: 2.8rem;
		right: 3rem;
	}
	.-ico3 {
		top: 11.8rem;
		right: 1rem;
	}
	.-ico4 {
		bottom: -2.4rem;
		right: 1rem;
	}
	@media screen and (max-width: 743px) {
		.-ico1 {
			bottom: 5.3rem;
		}
		.-ico2,
		.-ico3 {
			display: none;
		}
		.-ico4 {
			right: -5rem;
			bottom: -3.4rem;
		}
	}
}
@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow:
			0 8px 24px rgba(0,0,0,.15),
			0 0 0 rgba(255,255,255,0);
	}

	50% {
		transform: scale(1.06);
		box-shadow:
			0 12px 32px rgba(0,0,0,.2),
			0 0 24px rgba(255,255,255,.35);
	}
}
@keyframes shine {
	0% {
		left: -120%;
	}

	30% {
		left: 150%;
	}

	100% {
		left: 150%;
	}
}

.p-book-links {
	padding-block: 14rem;
	background-color: #fff;
	ul {
		display: flex;
		justify-content: center;
		gap: 4rem;
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem;
		ul {
			flex-direction: column;
			gap: 1.5rem;
		}
	}
}