/*
 * TIMEGRAPH FRAME-01 — 公開ページの見た目。
 * パソコン（769px 以上）：画面いっぱいの写真、右の生成り色の説明の面、下の章フィルム（完成デザイン 1672×941 を基準に、幅に比例）。
 * スマートフォン（768px 以下）：一画面に一章（100dvh）、下に「目次／一覧／相談」（完成デザイン 390px 幅を基準に比例）。
 * 一覧表示（.fr-body--list）：同じ内容を、普通の縦の一覧で。
 */

:root {
	--fr-cream: #f4efe6;
	--fr-paper: #f6f2ea;
	--fr-ink: #24221d;
	--fr-ink-soft: #4a463d;
	--fr-olive: #363822;
	--fr-olive-2: #3c3d26;
	--fr-rule: rgba(255, 255, 255, 0.82);
	--fr-yellow: #e8b62a;
	--fr-copper: #a3613a;
	--fr-focus: #e8b62a;
	--u: calc(100vw / 1672);
	--m: calc(100vw / 390);
	--fr-film-h: max(158px, calc(229 * var(--u)));
	--fr-dock-h: 0px;
	--fr-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html:has(.fr-body--story) {
	scroll-snap-type: y proximity;
	scroll-padding-bottom: calc(var(--fr-film-h) + var(--fr-dock-h));
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--fr-olive);
	color: var(--fr-ink);
	font-family: var(--fr-serif);
	font-weight: 400;
	line-height: 1.8;
}

img,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--fr-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(20, 18, 12, 0.45);
}

.fr-skip {
	position: fixed;
	left: 12px;
	top: -200px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--fr-cream);
	color: var(--fr-ink);
	font-size: 16px;
}

.fr-skip:focus {
	top: 12px;
}

/* ---------- ヘッダー ---------- */

.fr-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	height: calc(100 * var(--u));
	min-height: 64px;
	padding: 0 calc(24 * var(--u)) 0 calc(60 * var(--u));
	color: #fff;
	pointer-events: none;
}

.fr-header > * {
	pointer-events: auto;
}

.fr-brand {
	flex: 0 0 auto;
	color: inherit;
	text-decoration: none;
	font-size: max(17px, calc(31 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.085em;
	white-space: nowrap;
}

.fr-brand__short {
	display: none;
}

.fr-header__line {
	flex: 1 1 auto;
	min-width: 24px;
	height: 1px;
	margin: 0 calc(72 * var(--u)) 0 calc(33 * var(--u));
	background: var(--fr-rule);
}

.fr-header__nav {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* 「目次」は JavaScript でボタンになる（frame.js）。ボタンの既定の見た目を消して、リンクと同じ見た目にする。
   :where() で詳細度を 0 にしてあるので、下の .fr-nav-link / .fr-dock__link の指定がそのまま効く。 */
:where(button.fr-nav-link, button.fr-dock__link) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	text-align: inherit;
	text-indent: 0;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
}

.fr-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 calc(38 * var(--u));
	color: inherit;
	text-decoration: none;
	font-size: max(15px, calc(26 * var(--u)));
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.fr-nav-link:first-child {
	padding-left: 0;
}

.fr-nav-link + .fr-nav-link::before,
.fr-nav-link + .fr-nav-cta::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: calc(36 * var(--u));
	min-height: 22px;
	background: var(--fr-rule);
	transform: translateY(-50%);
}

.fr-nav-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	height: calc(52 * var(--u));
	margin-left: calc(19 * var(--u));
	padding: 0 calc(28 * var(--u));
	background: var(--fr-olive-2);
	color: var(--fr-cream);
	text-decoration: none;
	font-size: max(15px, calc(26 * var(--u)));
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.fr-nav-link + .fr-nav-cta::before {
	left: calc(-19 * var(--u));
}

.fr-nav-link:hover,
.fr-nav-cta:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

/* ---------- 章（パソコン） ---------- */

.fr-story {
	display: block;
}

.fr-chapter {
	position: relative;
	height: calc(100vh - var(--fr-film-h));
	height: calc(100dvh - var(--fr-film-h));
	min-height: max(420px, calc(560 * var(--u)));
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--fr-olive);
	color: #fff;
}

.fr-chapter__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #5b5139;
}

.fr-chapter__media--empty {
	background: linear-gradient(160deg, #6f6146 0%, #3c3d26 100%);
}

.fr-chapter__media picture,
.fr-chapter__media .fr-media__img,
.fr-chapter__media .fr-media__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fr-chapter__media .fr-media__img,
.fr-chapter__media .fr-media__video {
	object-fit: cover;
	object-position: var(--fr-fx, 50%) var(--fr-fy, 50%);
}

.fr-media__video {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.fr-media__video.is-playing {
	opacity: 1;
}

.fr-chapter__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(18, 14, 8, 0.34) 0%, rgba(18, 14, 8, 0) calc(200 * var(--u))),
		linear-gradient(90deg, rgba(18, 14, 8, 0.42) 0%, rgba(18, 14, 8, 0.16) 42%, rgba(18, 14, 8, 0) 66%);
	pointer-events: none;
}

.fr-chapter__head {
	position: absolute;
	top: calc(158 * var(--u));
	left: calc(63 * var(--u));
	right: calc(560 * var(--u));
}

.fr-chapter__count {
	display: none;
}

.fr-chapter__heading {
	margin: 0;
	font-weight: 400;
	font-size: inherit;
	line-height: inherit;
}

.fr-chapter__label {
	display: flex;
	align-items: center;
	gap: 0;
	font-size: max(15px, calc(28 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.fr-rule {
	display: inline-block;
	flex: 0 0 auto;
	margin-right: calc(35 * var(--u));
	width: calc(62 * var(--u));
	min-width: 28px;
	height: 1px;
	background: currentColor;
}

.fr-slash {
	margin: 0 0.32em;
}

.fr-chapter__title {
	display: block;
	margin-top: calc(26 * var(--u));
	font-size: max(40px, calc(112 * var(--u)));
	font-weight: 500;
	line-height: 1.17;
	letter-spacing: 0;
	font-feature-settings: "palt" 1;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.22);
}

.fr-chapter__panel {
	position: absolute;
	top: calc(100 * var(--u));
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: max(330px, calc(522 * var(--u)));
	padding: calc(72 * var(--u)) calc(27 * var(--u)) calc(89 * var(--u)) calc(57 * var(--u));
	overflow-y: auto;
	background: var(--fr-cream);
	color: var(--fr-ink);
}

.fr-chapter__body {
	font-size: max(15px, calc(20.5 * var(--u)));
	font-weight: 500;
	line-height: 1.95;
	letter-spacing: 0;
	word-break: auto-phrase;
}

.fr-chapter__body p {
	margin: 0 0 1em;
}

.fr-chapter__body p:last-child {
	margin-bottom: 0;
}

.fr-chapter__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
}

.fr-chapter__cta--contact {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.fr-chapter__cta--contact > .fr-button--primary,
.fr-chapter__cta--contact > .fr-button-note,
.fr-chapter__cta--contact > .fr-button:only-child {
	grid-column: 1 / -1;
}

.fr-chapter__cta--contact .fr-button {
	min-height: 46px;
	padding: 8px 12px;
	font-size: max(14px, calc(21 * var(--u)));
}

.fr-chapter__cta--contact .fr-button-note {
	order: 99;
	margin: 2px 0 0;
}

.fr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 48px;
	padding: 10px 24px;
	background: var(--fr-olive-2);
	color: var(--fr-cream);
	text-decoration: none;
	font-size: max(15px, calc(24 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-align: center;
}

.fr-button:hover {
	background: #2c2d1b;
}

.fr-button--next {
	justify-content: space-between;
	width: max(170px, calc(233 * var(--u)));
	height: max(48px, calc(65 * var(--u)));
	padding: 0 calc(28 * var(--u)) 0 calc(48 * var(--u));
	font-size: max(16px, calc(27 * var(--u)));
}

.fr-button--secondary {
	background: transparent;
	color: var(--fr-ink);
	box-shadow: inset 0 0 0 1px var(--fr-ink);
}

.fr-button--secondary:hover {
	background: rgba(43, 41, 36, 0.06);
}

.fr-button-note {
	margin: -4px 0 4px;
	font-size: max(13px, calc(18 * var(--u)));
	line-height: 1.6;
	color: var(--fr-ink-soft);
}

.fr-arrow {
	flex: 0 0 auto;
	width: max(22px, calc(30 * var(--u)));
	height: auto;
}

.fr-chapter--no-media .fr-chapter__shade {
	display: none;
}

.fr-video-toggle {
	position: absolute;
	left: calc(63 * var(--u));
	bottom: calc(40 * var(--u));
	z-index: 3;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 0;
	background: rgba(18, 14, 8, 0.45);
	color: #fff;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

.fr-swipe {
	display: none;
}

/* ---------- 章フィルム（パソコン） ---------- */

.fr-film {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 25;
	height: var(--fr-film-h);
	padding: calc(28 * var(--u)) 0 0;
	background: var(--fr-olive);
	color: #f1ebe0;
}

.fr-film__list {
	display: flex;
	margin: 0;
	padding: 0 calc(32 * var(--u)) 0 calc(37 * var(--u));
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.fr-film__list::-webkit-scrollbar {
	display: none;
}

.fr-film__item {
	position: relative;
	flex: 0 0 auto;
	width: max(150px, calc(276 * var(--u)));
}

.fr-film__item:last-child {
	width: max(122px, calc(226 * var(--u)));
}

.fr-film__link {
	display: block;
	width: max(122px, calc(226 * var(--u)));
	color: inherit;
	text-decoration: none;
}

.fr-film__thumb {
	display: block;
	height: max(48px, calc(90 * var(--u)));
	overflow: hidden;
	background: #5b5139;
}

.fr-film__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease;
}

.fr-film__text {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: calc(32 * var(--u));
	margin-top: calc(16 * var(--u));
	font-size: max(13px, calc(24 * var(--u)));
	line-height: 1.5;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.fr-film__num {
	min-width: 1.6em;
}

.fr-film__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.fr-film__item + .fr-film__item .fr-film__text::before {
	content: "";
	position: absolute;
	left: calc(-28 * var(--u));
	top: 50%;
	width: 1px;
	height: calc(32 * var(--u));
	background: rgba(241, 235, 224, 0.42);
	transform: translateY(-50%);
}

.fr-film__link[aria-current] .fr-film__label {
	color: #fff;
}

.fr-film__link:hover .fr-film__thumb img {
	opacity: 0.82;
}

.fr-film__progress {
	position: absolute;
	left: calc(37 * var(--u));
	right: calc(40 * var(--u));
	top: calc(191 * var(--u));
}

.fr-film__track {
	position: relative;
	display: block;
	height: 2px;
	background: rgba(241, 235, 224, 0.55);
}

.fr-film__dot {
	--fr-p: 0;
	position: absolute;
	left: 0;
	top: 50%;
	width: calc(38 * var(--u) + (100% - 38 * var(--u)) * var(--fr-p));
	height: 3px;
	background: var(--fr-yellow);
	transform: translateY(-50%);
	transition: width 0.4s ease;
}

.fr-film__dot::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--fr-yellow);
	transform: translateY(-50%);
}

.fr-dock {
	display: none;
}

/* ---------- 目次（ダイアログ） ---------- */

.fr-toc {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 18, 12, 0.6);
}

.fr-toc[hidden] {
	display: none;
}

.fr-toc__box {
	position: relative;
	width: min(560px, 100%);
	max-height: 100%;
	overflow-y: auto;
	padding: 36px 36px 28px;
	background: var(--fr-cream);
	color: var(--fr-ink);
}

.fr-toc__title {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fr-ink);
	font-size: 24px;
	letter-spacing: 0.08em;
}

.fr-toc__list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.fr-toc__list a {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 52px;
	border-bottom: 1px solid rgba(43, 41, 36, 0.2);
	text-decoration: none;
	font-size: 18px;
}

.fr-toc__num {
	min-width: 2em;
	color: var(--fr-copper);
}

.fr-toc__list-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 16px;
}

.fr-toc__close {
	position: absolute;
	top: 18px;
	right: 18px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--fr-ink);
	background: transparent;
	color: var(--fr-ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

/* ---------- 一覧表示 ---------- */

.fr-body--list,
.fr-body--sub {
	background: var(--fr-paper);
}

.fr-body--list .fr-header,
.fr-body--sub .fr-header {
	position: absolute;
	color: var(--fr-ink);
	--fr-rule: rgba(43, 41, 36, 0.55);
}

.fr-body--list .fr-nav-cta {
	color: var(--fr-cream);
}

.fr-list,
.fr-page {
	padding: max(120px, calc(150 * var(--u))) 24px 72px;
}

.fr-list__inner,
.fr-page__inner {
	max-width: 880px;
	margin: 0 auto;
}

.fr-list__title,
.fr-page__title {
	margin: 0 0 8px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--fr-ink);
	font-size: 34px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

.fr-index {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.fr-index__item {
	border-bottom: 1px solid rgba(43, 41, 36, 0.24);
}

.fr-index__link {
	display: grid;
	grid-template-columns: 150px 3em 1fr;
	align-items: center;
	gap: 0 24px;
	min-height: 88px;
	padding: 9px 0;
	text-decoration: none;
	font-size: 22px;
	letter-spacing: 0.06em;
}

.fr-index__thumb {
	display: block;
	width: 150px;
	height: 70px;
	overflow: hidden;
	background: #d9cdb9;
}

.fr-index__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fr-list__back {
	display: flex;
	width: 100%;
	min-height: 58px;
	margin: 0 0 64px;
	font-size: 20px;
}

.fr-entry {
	margin: 0 0 64px;
	padding-top: 8px;
	scroll-margin-top: 24px;
}

.fr-entry__heading {
	margin: 0 0 20px;
	font-weight: 400;
}

.fr-entry__label {
	display: block;
	color: var(--fr-copper);
	font-size: 18px;
	letter-spacing: 0.08em;
}

.fr-entry__title {
	display: block;
	margin-top: 6px;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.4;
}

.fr-entry__media {
	margin: 0 0 24px;
}

.fr-entry__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.fr-entry__body {
	font-size: 18px;
	line-height: 1.95;
	letter-spacing: 0.03em;
}

.fr-entry__body p {
	margin: 0 0 1em;
}

.fr-entry__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.fr-entry__cta .fr-button--next {
	width: auto;
	height: auto;
	min-width: 170px;
	padding: 10px 24px;
	font-size: 18px;
}

.fr-entry__cta .fr-button-note {
	flex: 0 0 100%;
	margin: -4px 0 4px;
}

.fr-page__content {
	font-size: 17px;
	line-height: 1.95;
}

/* ---------- フッター ---------- */

.fr-footer {
	padding: 28px 24px calc(28px + var(--fr-film-h));
	background: var(--fr-olive);
	color: #e9e2d4;
	font-size: 14px;
	text-align: center;
}

.fr-body--list .fr-footer,
.fr-body--sub .fr-footer {
	padding-bottom: calc(28px + var(--fr-dock-h));
}

.fr-footer__note {
	margin: 0 0 8px;
}

.fr-footer__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 24px;
	margin: 0;
}

.fr-footer__meta a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- タブレット（769〜1024px） ---------- */

@media (max-width: 1024px) and (min-width: 769px) {
	.fr-header__line {
		margin-right: 20px;
	}

	.fr-nav-link {
		padding: 0 16px;
	}

	.fr-chapter__head {
		right: calc(max(330px, calc(522 * var(--u))) + 32px);
	}

	.fr-chapter__panel {
		padding: 40px 24px 40px 32px;
	}
}

/* ---------- スマートフォン（768px 以下） ---------- */

@media (max-width: 768px) {
	:root {
		--fr-film-h: 0px;
		--fr-dock-h: max(56px, calc(65 * var(--m)));
	}

	.fr-header {
		height: max(64px, calc(90 * var(--m)));
		padding: 0 calc(28 * var(--m));
	}

	.fr-brand {
		font-size: max(16px, calc(19 * var(--m)));
		letter-spacing: 0.22em;
	}

	.fr-brand__name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.fr-brand__short {
		display: inline;
	}

	.fr-header__line {
		margin: 0 0 0 calc(22 * var(--m));
	}

	.fr-header__nav {
		display: none;
	}

	.fr-chapter {
		height: auto;
		min-height: calc(100vh - var(--fr-dock-h));
		min-height: calc(100dvh - var(--fr-dock-h));
		overflow: visible;
		display: flex;
		flex-direction: column;
	}

	.fr-chapter__media {
		inset: 0 0 auto;
		height: 100%;
	}

	.fr-chapter__media .fr-media__img,
	.fr-chapter__media .fr-media__video {
		object-position: var(--fr-sx, 50%) var(--fr-sy, 50%);
	}

	.fr-chapter__shade {
		background:
			linear-gradient(180deg, rgba(18, 14, 8, 0.58) 0%, rgba(18, 14, 8, 0.22) 45%, rgba(18, 14, 8, 0.04) 62%, rgba(18, 14, 8, 0.32) 100%);
	}

	.fr-chapter__head {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: 2;
		padding: calc(90 * var(--m)) calc(10 * var(--m)) 0 calc(28 * var(--m));
	}

	.fr-chapter__count {
		margin-right: calc(18 * var(--m)) !important;
		display: flex;
		align-items: center;
		gap: calc(22 * var(--m));
		margin: calc(-8 * var(--m)) 0 calc(34 * var(--m));
		font-size: max(16px, calc(19 * var(--m)));
		line-height: 1.4;
		letter-spacing: 0.08em;
	}

	.fr-bar {
		position: relative;
		flex: 1 1 auto;
		height: 2px;
		background: rgba(255, 255, 255, 0.62);
	}

	.fr-bar i {
		position: absolute;
		left: 0;
		top: 50%;
		width: calc(32 * var(--m) + (100% - 32 * var(--m)) * var(--fr-progress, 0));
		height: 3px;
		background: var(--fr-yellow);
		transform: translateY(-50%);
	}

	.fr-bar i::after {
		content: "";
		position: absolute;
		right: -5px;
		top: 50%;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--fr-yellow);
		transform: translateY(-50%);
	}

	.fr-chapter__label {
		font-size: max(16px, calc(19 * var(--m)));
	}

	.fr-rule {
		width: calc(36 * var(--m));
		min-width: 24px;
		margin-right: calc(22 * var(--m));
	}

	.fr-chapter__title {
		margin-top: calc(52 * var(--m));
		font-size: max(36px, calc(58 * var(--m)));
		line-height: 1.2;
	}

	.fr-chapter__panel {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		z-index: 2;
		width: auto;
		overflow: visible;
		padding: calc(42 * var(--m)) calc(34 * var(--m)) calc(44 * var(--m)) calc(42 * var(--m));
	}

	.fr-chapter__body {
		font-size: max(16px, calc(20.5 * var(--m)));
		line-height: 1.95;
		letter-spacing: 0.05em;
	}

	.fr-chapter__cta {
		align-items: stretch;
	}

	.fr-chapter__cta--contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-chapter__cta .fr-button--next {
		display: none;
	}

	.fr-chapter__cta:not(.fr-chapter__cta--contact):has(> .fr-button--next:only-child) {
		display: none;
	}

	.fr-button {
		font-size: 17px;
	}

	/* 写真と文章を分ける（標準）：上に写真、下に生成り色の面。写真の欄は、見出しが長くても見出しの高さまで伸びる */
	.fr-chapter--panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}

	.fr-chapter--panel .fr-chapter__media,
	.fr-chapter--panel .fr-chapter__shade,
	.fr-chapter--panel .fr-chapter__head {
		grid-row: 1;
		grid-column: 1;
	}

	.fr-chapter--panel .fr-chapter__media {
		position: relative;
		inset: auto;
		height: auto;
		min-height: calc((100dvh - var(--fr-dock-h)) * 0.615);
	}

	.fr-chapter--panel .fr-chapter__shade {
		position: relative;
		inset: auto;
		z-index: 1;
		background: linear-gradient(180deg, rgba(18, 14, 8, 0.48) 0%, rgba(18, 14, 8, 0.12) 46%, rgba(18, 14, 8, 0.08) 70%, rgba(18, 14, 8, 0.4) 100%);
	}

	.fr-chapter--panel .fr-chapter__head {
		min-height: calc((100dvh - var(--fr-dock-h)) * 0.615);
		padding-bottom: calc(30 * var(--m));
	}

	.fr-chapter--panel .fr-chapter__panel {
		grid-row: 2;
		grid-column: 1;
	}

	.fr-chapter--panel .fr-chapter__title {
		font-size: max(30px, calc(40 * var(--m)));
	}


	.fr-chapter--panel.fr-chapter--no-media .fr-chapter__media,
	.fr-chapter--panel.fr-chapter--no-media .fr-chapter__head {
		min-height: 0;
		padding-bottom: calc(40 * var(--m));
	}

	/* 写真いっぱい（表紙）：見出しを写真に重ね、本文は読み上げ・一覧表示で */
	.fr-chapter--cover .fr-chapter__panel {
		margin-top: auto;
		padding: 0 calc(28 * var(--m)) calc(24 * var(--m));
		background: transparent;
		color: #fff;
	}

	.fr-chapter--cover .fr-chapter__body {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.fr-chapter--cover .fr-button--secondary {
		color: #fff;
		box-shadow: inset 0 0 0 1px #fff;
		background: rgba(18, 14, 8, 0.3);
	}

	.fr-chapter--cover .fr-button-note {
		color: #fff;
	}

	.fr-swipe {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		align-self: center;
		margin: auto 0 calc(48 * var(--m));
		min-height: 44px;
		padding: 0 12px;
		color: #fff;
		text-decoration: none;
		font-size: max(15px, calc(19 * var(--m)));
		letter-spacing: 0.06em;
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
	}

	.fr-swipe svg {
		width: calc(30 * var(--m));
		height: auto;
	}

	.fr-chapter--cover .fr-chapter__panel + .fr-swipe,
	.fr-chapter--cover .fr-video-toggle + .fr-swipe {
		margin-top: 0;
	}

	.fr-chapter--panel .fr-swipe {
		display: none;
	}

	.fr-video-toggle {
		left: auto;
		right: calc(20 * var(--m));
		top: calc(84 * var(--m));
		bottom: auto;
	}

	.fr-film {
		display: none;
	}

	.fr-dock {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		height: calc(var(--fr-dock-h) + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--fr-olive);
	}

	.fr-dock__link {
		position: relative;
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
		height: 100%;
		min-height: 44px;
		color: #f1ebe0;
		text-decoration: none;
		font-size: max(17px, calc(21 * var(--m)));
		letter-spacing: 0.1em;
	}

	.fr-dock__link + .fr-dock__link::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: calc(34 * var(--m));
		background: rgba(241, 235, 224, 0.6);
		transform: translateY(-50%);
	}

	.fr-dock__link[aria-current] {
		color: #fff;
	}

	.fr-footer {
		padding-bottom: calc(28px + var(--fr-dock-h));
	}

	/* 一覧表示（スマートフォン）：ヘッダーは出さず、下の「目次／一覧／相談」で移動する */
	.fr-body--list .fr-header {
		display: none;
	}

	.fr-list {
		padding: calc(30 * var(--m)) calc(28 * var(--m)) calc(40 * var(--m) + var(--fr-dock-h));
	}

	.fr-body--sub .fr-header {
		position: relative;
	}

	.fr-page {
		padding: 24px 20px 48px;
	}

	.fr-list__title {
		margin: 0;
		padding: calc(14 * var(--m)) 0 calc(18 * var(--m));
		font-size: max(24px, calc(32 * var(--m)));
	}

	.fr-index {
		margin-bottom: calc(52 * var(--m));
	}

	.fr-index__link {
		grid-template-columns: calc(131 * var(--m)) 1.6em 1fr;
		gap: 0 calc(28 * var(--m));
		min-height: calc(78 * var(--m));
		padding: calc(8 * var(--m)) 0;
		font-size: max(16px, calc(20 * var(--m)));
		font-weight: 500;
		white-space: nowrap;
	}

	.fr-index__thumb {
		width: calc(131 * var(--m));
		height: calc(62 * var(--m));
	}

	.fr-list__back {
		min-height: max(48px, calc(55 * var(--m)));
		margin-bottom: calc(56 * var(--m));
		font-size: max(16px, calc(19.5 * var(--m)));
	}

	.fr-entry__title {
		font-size: 26px;
	}

	.fr-entry__body {
		font-size: 16px;
	}

	.fr-toc {
		padding: 16px 16px calc(16px + var(--fr-dock-h));
	}

	.fr-toc__box {
		padding: 28px 22px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}