@charset "utf-8";

/* トップページ：写真集をめくるような表紙→もくじ */

body.home,
body.front-page-book {
	background: #fafaf7;
	overflow: hidden;
}

.book {
	position: fixed;
	inset: 0;
	perspective: 1800px;
	background: #fafaf7;
	color: #777;
}

.book__page {
	position: absolute;
	inset: 0;
	height: 100vh;
	height: 100dvh;
}

/* ---------- 表紙 ---------- */
.book__cover {
	background: #fcfcfc;
	cursor: pointer;
	transform-origin: left center;
	transition: opacity 2s ease;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	z-index: 2;
	outline: none;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.book__cover__face {
	position: relative;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.book__cover__logo {
	width: 150px;
	mix-blend-mode: multiply;
}

/* めくる時の影（ページが傾くにつれ濃くなる） */
.book__cover__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
	opacity: 0;
	transition: opacity 1.3s ease;
	pointer-events: none;
}

.book.is-open .book__cover {
	opacity: 0;
	pointer-events: none;
}

.book.is-open .book__cover__shade {
	opacity: 1;
}

/* TAP TO OPEN：下からうっすら */
.book__cover__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(28px + env(safe-area-inset-bottom));
	text-align: center;
	color: #9a9a9a;
	opacity: 0;
	transform: translateY(24px);
	animation: hint-in 1.6s ease 1.2s forwards;
}

.book__cover__en {
	display: block;
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-size: 15px;
	letter-spacing: .5em;
	padding-left: .5em;
	line-height: 1.6;
}

.book__cover__ja {
	display: block;
	font-size: 11px;
	letter-spacing: .25em;
	margin-top: 2px;
}

.book__cover__chevron {
	display: block;
	width: 10px;
	height: 10px;
	margin: 10px auto 0;
	border-right: 1px solid #b5b5b5;
	border-bottom: 1px solid #b5b5b5;
	transform: rotate(45deg);
	animation: chevron-bob 2.4s ease-in-out 2.8s infinite;
}

@keyframes hint-in {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes chevron-bob {
	0%, 100% { transform: translateY(0) rotate(45deg); opacity: .6; }
	50%      { transform: translateY(5px) rotate(45deg); opacity: 1; }
}

/* ---------- もくじ ---------- */
.book__page--index {
	background: #fafaf7;
	z-index: 1;
	overflow-y: auto;
	display: flex;
}

.book__index {
	width: 100%;
	max-width: 520px;
	/* 縦に収まる時は中央、収まらない時はスクロールして末尾が画面下部に揃う */
	margin: auto;
	padding: 48px 28px calc(48px + env(safe-area-inset-bottom));
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 2s ease .4s, transform 2s ease .4s;
}

.book.is-open .book__index {
	opacity: 1;
	transform: none;
}

.book__index__en {
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-size: 12px;
	letter-spacing: .2em;
	color: #aaa;
	margin: 0;
}

.book__index__ja {
	font-size: 19px;
	font-weight: 400;
	letter-spacing: .15em;
	color: #777;
	margin: 6px 0 36px;
}

.book__index__lead {
	font-size: 12px;
	letter-spacing: .06em;
	line-height: 2;
	color: #8a8a8a;
	margin: 0;
}

.book__index__rule {
	width: 70%;
	max-width: 300px;
	margin: 36px auto 100px;
	border: 0;
	border-top: 1px solid #e3e5ec;
}

.book__index__list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.book__index__list li {
	margin: 0 0 14px;
}

.book__index__list a {
	display: inline-block;
	color: #808080;
	font-size: 13px;
	letter-spacing: .05em;
	text-decoration: none;
	position: relative;
	padding: 2px 0;
	transition: color .2s;
}

.book__index__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: #b5b5b5;
	transition: width .25s;
}

.book__index__list a:hover {
	color: #555;
}

.book__index__list a:hover::after {
	width: 100%;
}

@media screen and (min-width: 40em) {
	.book__index__list { padding-right: 8%; }
}

@media (prefers-reduced-motion: reduce) {
	.book__cover, .book__cover__shade { transition-duration: .6s; transition-delay: 0s; }
	.book__index { transition-duration: .6s; transition-delay: .2s; }
	.book__cover__hint { animation-duration: .01s; animation-delay: 0s; }
	.book__cover__chevron { animation: none; }
}