@charset "utf-8";
/* ==========================================================================
   riichiro.jp — リニューアル用スタイル
   2026 追加分。既存の style_pcsp.css より後に読み込むこと。
   色や余白の調整は :root のカスタムプロパティを触れば全体に効きます。
   ========================================================================== */

:root {
	--rn-teal: #2b7a9b;          /* キーカラー（ヒーロー・感性バー） */
	--rn-teal-deep: #1f5f7a;
	--rn-dark: #282828;          /* 既存サイトの背景色 */
	--rn-night: #1f3341;         /* 考筆話史の面とフッターの、沈んだ紺 */
	--rn-dark-2: #1e1e1e;
	--rn-paper: #eeedea;         /* 縦書きエッセイの紙色 */
	--rn-paper-light: #f4f3f0;   /* Works セクションの地色 */
	--rn-ink: #1a1a1a;
	--rn-asagi: #005d7d;       /* 濃浅葱。白い世界の文字色 */
	--rn-asagi-ink: #00455d;   /* 濃浅葱をさらに沈めた、本文用の色 */
	/* 神仙配色（Creative Field）。霞がかった青灰の4色と、その上に置く墨色 */
	--sx-blue: #9db0c9;
	--sx-mist: #dde4ef;
	--sx-sky: #bdd3e1;
	--sx-grey: #afbac7;
	--sx-ink: #2c3647;
	--rn-beni: #e2557f;        /* 線画の紅。八つの字にふれたときの色 */
	--rn-white: #ffffff;
	--rn-mincho: "Shippori Mincho", "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
	/* 七つの感性の漢字用。極細のジオメトリックサンセリフで、字というより記号に見せる */
	--rn-symbol: "M PLUS 2", "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP", sans-serif;
	/* 「ちょっと良い話」用。細めの手書き風 */
	--rn-hand: "Klee One", "Yu Mincho", "游明朝", serif;
	--rn-gothic: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", sans-serif;
	--rn-gutter: clamp(1.5rem, 5vw, 6rem);
}

/* 縦書き共通 --------------------------------------------------------------- */
.rn-vertical {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-feature-settings: "vkrn" 1, "vpal" 1;
}
.rn-vertical-mixed {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vkrn" 1, "vpal" 1;
}

/* 画面には出さないがスクリーンリーダー・検索エンジンには読ませるテキスト */
.rn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   0. ローディングの幕引き（既存 style_pcsp.css の指定を上書き）
   タイミングは library/js/top.js の setTimeout と対になっています。
   ========================================================================== */
#loading.is-loading .loading_box {
	animation-duration: 1.6s;
}

#loading.is-loading-close::before {
	transition: opacity 1.8s cubic-bezier(0.33, 0, 0.2, 1);
}

/* 下の階層は待たせない。幕はすばやく引く（top.js の is-sub と対） */
.is-sub #loading.is-loading .loading_box {
	animation-duration: 0.5s;
}
.is-sub #loading.is-loading-close::before {
	transition-duration: 0.5s;
}
.is-sub .loading_tagline {
	display: none;
}

/* ローディングはこの一行だけ。画面の中央に大きく置く */
.loading_tagline {
	position: fixed;
	z-index: 2002;
	inset-inline: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding-inline: 1.5rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--rn-gothic);
	font-size: clamp(0.9375rem, 1.5vw, 1.375rem);
	font-weight: 300;
	letter-spacing: 0.36em;
	/* 字送りの分だけ右に寄るので、中央に戻す */
	text-indent: 0.36em;
	line-height: 1.9;
	pointer-events: none;
	opacity: 0;
	animation: rn-fade-in 1.6s ease 0.5s forwards;
}

.loading_tagline span + span {
	margin-inline-start: 2em; /* 区切りの「／」を外したので、間で分ける */
}

/* 幕が引き始めるのに合わせて消す */
#loading.is-loading .loading_tagline {
	animation: rn-loading-tagline-out 1.4s ease forwards;
}

@keyframes rn-loading-tagline-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* モバイルは2段組み。1段目が画面幅に収まる範囲で最大化する */
@media screen and (max-width: 781px) {
	.loading_tagline {
		font-size: clamp(0.75rem, 3.4vw, 1.0625rem);
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}
	.loading_tagline span {
		display: block;
	}
	.loading_tagline span + span {
		margin-inline-start: 0;
		margin-block-start: 0.9em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loading_tagline {
		opacity: 1;
		animation: none;
	}
}

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
#rn-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	background-color: var(--rn-teal);
	overflow: hidden;
}

/* 平坦になりすぎないよう、ごく淡い光のむらを重ねる */
#rn-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% 30%, rgba(255, 255, 255, 0.10), transparent 60%),
		radial-gradient(90% 70% at 20% 100%, rgba(0, 0, 0, 0.18), transparent 65%);
	pointer-events: none;
}

.rn-hero__name {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--rn-white);
	font-family: var(--rn-mincho);
	font-weight: 300;
	font-size: clamp(1.5rem, 3.4vh, 2.5rem);
	line-height: 1;
	letter-spacing: 0.62em;
	/* 字送りの最後に入る余白を打ち消して、天地のバランスを揃える */
	padding-block-end: 0.62em;
	opacity: 0;
	transform: translateY(-1.2rem);
	/* ローディングの黒幕が引いていくのに重ねて、ゆっくり浮かび上がらせる */
	animation: rn-hero-in 3.6s cubic-bezier(0.22, 1, 0.36, 1) 2.4s forwards;
}

.rn-hero__tagline {
	position: absolute;
	z-index: 1;
	inset-block-end: clamp(2.5rem, 6vh, 5rem);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--rn-gothic);
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	white-space: nowrap;
	opacity: 0;
	animation: rn-fade-in 2.8s ease 4.4s forwards;
}

/* 2段に折り返せるよう span に分けているので、1行のときは margin で間を取る */
.rn-hero__tagline span + span {
	margin-inline-start: 2em; /* 区切りの「／」を外したので、間で分ける */
}

.rn-hero__scroll {
	position: absolute;
	z-index: 1;
	inset-block-end: 0;
	inset-inline-start: 50%;
	width: 1px;
	height: clamp(1.5rem, 4vh, 3rem);
	background-color: rgba(255, 255, 255, 0.55);
	transform-origin: top;
	animation: rn-scroll-hint 3s ease-in-out 6s infinite;
}

/* 名前の右下に捺す濃浅葱の印。押すと白い世界がひらく。
   大きさ・位置は名前と同じ font-size を基準に em で決めているので、
   名前が縮めば印も同じだけ縮む。 */
.rn-hero__seal {
	position: absolute;
	z-index: 2;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	/* 名前（.rn-hero__name）と同じ基準 */
	font-size: clamp(1.5rem, 3.4vh, 2.5rem);
	inline-size: 1.3em; /* 押しやすいよう、ひと回り大きく（1.12em → 1.3em） */
	/* 左上が中心にあるので、印の中心を「名前の最後の一文字の右下」へ運ぶ */
	transform: translate(0.88em, 4.05em);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	opacity: 0;
	/* 幕が引いて名前が浮かびはじめるのと同時に、光ったまま捺される */
	animation: rn-seal-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.6s forwards;
}

.rn-hero__seal img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	/* 現れた瞬間から光らせて目を引き、そのあとは、ときどきだけ、ぼんやり灯す */
	animation:
		rn-seal-glow-first 4s ease-out 2.6s 1 both,
		rn-seal-glow 2.6s ease-in-out 6.6s infinite;
}

/* 捺された瞬間の光。4秒かけて静まる */
@keyframes rn-seal-glow-first {
	0%, 45% {
		filter: drop-shadow(0 0 0.35em rgba(255, 150, 120, 0.95)) brightness(1.5);
	}
	100% {
		filter: none;
	}
}

/* 2.6秒に1度、朱がふっと濃くなる */
@keyframes rn-seal-glow {
	0%, 50%, 100% {
		filter: none;
	}
	75% {
		filter: drop-shadow(0 0 0.35em rgba(255, 150, 120, 0.95)) brightness(1.5);
	}
}

/* 線が細いので、うしろに淡い灯りを置いて「押せる」ことを伝える */
.rn-hero__seal::before {
	content: "";
	position: absolute;
	inset: -55%;
	border-radius: 50%;
	background: radial-gradient(closest-side,
		rgba(255, 146, 116, 0.45) 0%,
		rgba(255, 146, 116, 0.16) 45%,
		rgba(255, 146, 116, 0) 100%);
	opacity: 0;
	pointer-events: none;
	animation:
		rn-seal-halo-first 4s ease-out 2.6s 1 both,
		rn-seal-halo 2.6s ease-in-out 6.6s infinite;
}

@keyframes rn-seal-halo-first {
	0%, 45% { opacity: 1; transform: scale(1); }
	100%    { opacity: 0; transform: scale(0.55); }
}

@keyframes rn-seal-halo {
	0%, 50%, 100% { opacity: 0; transform: scale(0.55); }
	75%           { opacity: 1; transform: scale(1); }
}

.rn-hero__seal:hover::before,
.rn-hero__seal:focus-visible::before {
	animation: none;
	opacity: 1;
	transform: scale(1);
}

/* 触れているあいだは点滅させない */
.rn-hero__seal:hover img,
.rn-hero__seal:focus-visible img {
	animation: none;
	filter: drop-shadow(0 0 0.4em rgba(255, 138, 110, 0.75)) brightness(1.3);
}

.rn-hero__seal:hover img,
.rn-hero__seal:focus-visible img {
	transform: scale(1.12);
}
.rn-hero__seal:focus-visible {
	outline: 1px solid rgba(255, 255, 255, 0.75);
	outline-offset: 0.4em;
}

/* --- 押しやすくするしかけ ---
   ① 見えない当たり判定を印のまわりに広げる（指でも外さない）
   ② 灯るたびに、印から輪がひとつ広がる（ふれなくても「押せる」とわかる）
   ③ 少し経つと、横に「押す」と添える
   ④ 押した瞬間、印が沈む */
.rn-hero__seal::after {
	content: "";
	position: absolute;
	inset: -60%;
	border-radius: 50%;
}
.rn-hero__seal-ring {
	position: absolute;
	inset: -8%;
	border: 1px solid rgba(255, 172, 146, 0.9);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation:
		rn-seal-ring 1.6s cubic-bezier(0.22, 1, 0.36, 1) 3.4s 1 both,
		rn-seal-ring-loop 2.6s cubic-bezier(0.22, 1, 0.36, 1) 6.6s infinite;
}
@keyframes rn-seal-ring {
	0%   { opacity: 0.95; transform: scale(1); }
	100% { opacity: 0; transform: scale(2.6); }
}
/* 印が灯る山（75%）に合わせて輪を放つ */
@keyframes rn-seal-ring-loop {
	0%, 66% { opacity: 0; transform: scale(1); }
	72%     { opacity: 0.95; transform: scale(1); }
	100%    { opacity: 0; transform: scale(2.6); }
}
.rn-hero__seal-hint {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc(100% + 0.7em);
	display: flex;
	align-items: center;
	gap: 0.6em;
	/* 目立たせない。細い欧文で、ごく薄く */
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.42em;
	letter-spacing: 0.24em;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.38);
	pointer-events: none;
	opacity: 0;
	transform: translate(-0.5em, -50%);
	animation: rn-seal-hint 1.2s ease 7s forwards;
}
.rn-hero__seal-hint::before {
	content: "";
	inline-size: 1.8em;
	block-size: 1px;
	background-color: currentColor;
}
@keyframes rn-seal-hint {
	to { opacity: 1; transform: translate(0, -50%); }
}
.rn-hero__seal:hover .rn-hero__seal-hint,
.rn-hero__seal:focus-visible .rn-hero__seal-hint {
	color: rgba(255, 255, 255, 0.7);
}
.rn-hero__seal:hover .rn-hero__seal-ring,
.rn-hero__seal:focus-visible .rn-hero__seal-ring {
	animation: rn-seal-ring 1.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.rn-hero__seal:active img {
	transform: scale(0.9);
	transition-duration: 0.08s;
}

/* 捺した瞬間だけ、ほんの少し沈む */
@keyframes rn-seal-in {
	0%   { opacity: 0; transform: translate(0.88em, 4.05em) scale(1.5); }
	60%  { opacity: 1; transform: translate(0.88em, 4.05em) scale(0.94); }
	100% { opacity: 1; transform: translate(0.88em, 4.05em) scale(1); }
}

@keyframes rn-hero-in {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes rn-fade-in {
	to { opacity: 1; }
}
@keyframes rn-scroll-hint {
	0%        { transform: scaleY(0); opacity: 0; }
	40%       { transform: scaleY(1); opacity: 1; }
	100%      { transform: scaleY(1); opacity: 0; }
}

/* ==========================================================================
   1.5 白い世界 — 濃浅葱の印から円がひろがり、文章が静かに立ち上がる
   円の中心は印の位置。--cx / --cy を library/js/renewal.js が入れる。
   ========================================================================== */
.rn-asagi {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background-color: #ffffff;
	color: var(--rn-asagi);
	/* 閉じているあいだは印の一点にすぼめておく */
	clip-path: circle(0 at var(--cx, 8%) var(--cy, 86%));
	transition: clip-path 1.15s cubic-bezier(0.72, 0, 0.24, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rn-asagi.is-open {
	clip-path: circle(150% at var(--cx, 8%) var(--cy, 86%));
}

.rn-asagi__sheet {
	min-block-size: 100%;
	display: flex;
	justify-content: center;
	/* 文章は上から縦にスクロールして読ませる */
	align-items: flex-start;
	padding-block: clamp(4.5rem, 12vh, 7rem) clamp(4rem, 10vh, 6rem);
	padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.rn-asagi__body {
	inline-size: min(40rem, 100%);
}

/* 段落は下からひと呼吸ずつ。--i の順に遅らせている */
.rn-asagi__body > * {
	margin: 0;
	opacity: 0;
	transform: translateY(0.7rem);
	transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.rn-asagi.is-open .rn-asagi__body > * {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(0.5s + var(--i, 0) * 0.2s);
}

/* 一番上に置く「濃浅葱」のタイトル文字 */
.rn-asagi__title {
	text-align: center;
	line-height: 0;
	margin-block-end: clamp(2.5rem, 7vh, 4rem) !important;
}
.rn-asagi__title img {
	display: inline-block;
	block-size: clamp(2rem, 4.5vh, 2.75rem);
	inline-size: auto;
}

/* 色の語釈。本文の手前に、中央寄せで置く */
.rn-asagi__gloss {
	margin-block-end: clamp(2.5rem, 7vh, 4rem) !important;
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
	letter-spacing: 0.05em;
	line-height: 2.15;
	text-align: center;
	color: var(--rn-asagi);
}

/* 本文は1段で縦に流す */
.rn-asagi__cols p {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1rem, 1.2vw, 1.1875rem);
	letter-spacing: 0.04em;
	line-height: 2.2;
	text-align: justify;
	color: var(--rn-asagi-ink);
}
.rn-asagi__cols p + p {
	margin-block-start: 1.3em;
}
.rn-asagi__group + .rn-asagi__group {
	margin-block-start: 2.8em;
}

/* ふりがなは小さく、本文の行間を乱さないように */
.rn-asagi ruby rt {
	font-size: 0.5em;
	letter-spacing: 0;
}

.rn-asagi__coda {
	margin-block-start: clamp(3rem, 8vh, 4.5rem) !important;
	text-align: center;
	font-family: var(--rn-mincho);
	font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
	letter-spacing: 0.12em;
	line-height: 1.8;
	color: var(--rn-asagi-ink);
}

.rn-asagi__last {
	margin-block-start: clamp(1.5rem, 4vh, 2.25rem) !important;
	text-align: center;
	font-family: var(--rn-mincho);
	font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
	letter-spacing: 0.28em;
	text-indent: 0.28em;
	color: var(--rn-asagi-ink);
}

/* 閉じるボタンは細い十字ひとつ */
.rn-asagi__close {
	position: fixed;
	z-index: 1;
	inset-block-start: clamp(1.25rem, 4vh, 2.25rem);
	inset-inline-end: clamp(1.25rem, 4vw, 2.5rem);
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.8s ease 0.9s, transform 0.5s ease;
}
.rn-asagi.is-open .rn-asagi__close {
	opacity: 0.6;
}
.rn-asagi__close:hover {
	opacity: 1;
	transform: rotate(90deg);
}
.rn-asagi__close:focus-visible {
	opacity: 1;
	outline: 1px solid var(--rn-asagi);
	outline-offset: 2px;
}
.rn-asagi__close span,
.rn-asagi__close span::before {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 1.25rem;
	block-size: 1px;
	background-color: var(--rn-asagi);
}
.rn-asagi__close span {
	transform: translate(-50%, -50%) rotate(45deg);
}
.rn-asagi__close span::before {
	content: "";
	inset: 0;
	inline-size: 100%;
	transform: rotate(-90deg);
	transform-origin: center;
	margin: 0;
}

/* 開いているあいだは後ろのページを動かさない */
body.rn-asagi-open {
	overflow: hidden;
}

@media screen and (max-width: 781px) {
	/* 1行だと画面幅に収まらず左右が切れていたので、
	   ローディングのタグラインと同じく2段に分ける */
	.rn-hero__tagline {
		inline-size: min(90vw, 24rem);
		white-space: normal;
		text-align: center;
		letter-spacing: 0.24em;
		text-indent: 0.24em;
		line-height: 1;
	}
	.rn-hero__tagline span {
		display: block;
	}
	.rn-hero__tagline span + span {
		margin-inline-start: 0;
		margin-block-start: 0.9em;
	}
	/* スマホでも読みやすさを優先して、字は大きめに保つ */
	.rn-asagi__sheet {
		padding-block: clamp(4rem, 9vh, 5rem) clamp(3rem, 7vh, 4rem);
	}
	.rn-asagi__gloss {
		text-align: left;
		font-size: 0.9375rem;
	}
	.rn-asagi__cols p {
		font-size: 1rem;
		line-height: 2.1;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rn-hero__seal {
		opacity: 1;
		animation: none;
	}
	.rn-hero__seal img,
	.rn-hero__seal::before,
	.rn-hero__seal-ring,
	.rn-hero__seal:hover .rn-hero__seal-ring {
		animation: none;
	}
	.rn-hero__seal-hint {
		animation: none;
		opacity: 1;
		transform: translate(0, -50%);
	}
	.rn-asagi {
		transition: none;
	}
	.rn-asagi__body > *,
	.rn-asagi.is-open .rn-asagi__body > * {
		transition: none;
		transform: none;
		transition-delay: 0s;
	}
}

/* ==========================================================================
   2. 縦書きエッセイ
   ========================================================================== */
/* デスクトップでは1画面にちょうど収める。
   本文の行長（天地）を 44vh にして、上下におよそ 28vh ずつ余白が残る配分。 */
#rn-essay {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 100svh;
	background-color: var(--rn-paper);
	color: var(--rn-ink);
	padding-block: clamp(3rem, 8vh, 6rem);
	padding-inline: var(--rn-gutter);
}

.rn-essay__inner {
	display: flex;
	justify-content: center;
	max-width: 90rem;
	margin-inline: auto;
	overflow-x: auto;
}

.rn-essay__body {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.875rem, 1.05vw, 1rem);
	line-height: 2.05;
	letter-spacing: 0.06em;
	/* 約物（、。「」）も1字ぶんとして数えられるよう、詰め（vpal）を切ってベタ組みにする */
	font-feature-settings: normal;
	/* 1列の字数。行末に1字だけ残る列が出ないよう、この文章に合わせて決めた数。
	   文章を差し替えたら、ここを見直すこと */
	--cpl: 26;   /* 26字にすると、どのまとまりも最後の列に12字以上残る（実測）。
	                 文章やまとまりを変えたら測り直すこと */
	/* 行長を「字数 × 字送り（1em＋字間0.06em）」で決める。
	   字の大きさは画面幅に比例するので、どの画面でも1列の字数は変わらない */
	inline-size: calc(var(--cpl) * 1.06em + 0.05em);
	text-align: justify;
}

/* 字下げはせず、まとまり（p）ごとに1行ぶん空ける。
   まとまりの中はひと続きに流し、列の天地を揃える */
.rn-essay__body p {
	margin: 0;
}
.rn-essay__body p + p {
	margin-block-start: 2.05em;   /* 行送り（line-height）と同じ＝ちょうど1行ぶん */
}
.rn-essay__l {
	display: inline;
}

/* ==========================================================================
   2.5 考・筆・話・史 — 4字が四隅から飛んできて枠に収まり、枠が引かれ、ひと呼吸おいて灯る
   4字はそれぞれ別のページへのリンク。ふれると、その字だけに細い枠が浮かぶ。
   is-inview は library/js/renewal.js が付け外しする。出入りするたびに組み直す。
   ========================================================================== */
#rn-kanji {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100svh;
	background-color: var(--rn-night);
	color: #e3e3e1;
	overflow: hidden;
}

.rn-kanji__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 4.5vh, 2.75rem);
}

/* 四角の一辺。これを基準に、枠の太さも字の大きさも決める */
.rn-kanji__seal {
	--s: min(46vh, 26rem, 72vw);
	--bw: max(2px, calc(var(--s) * 0.0075));
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	place-items: center;
	inline-size: var(--s);
	aspect-ratio: 1;
	padding: calc(var(--s) * 0.07) calc(var(--s) * 0.06);
	transition: box-shadow 0.5s ease;
}

/* 枠は上下（::before）と左右（::after）に分け、順に引く。
   JS が動かないときは、はじめから引かれた状態 */
.rn-kanji__seal::before,
.rn-kanji__seal::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.rn-kanji__seal::before {
	border-block: var(--bw) solid currentColor;
}
.rn-kanji__seal::after {
	border-inline: var(--bw) solid currentColor;
}
#rn-kanji.is-inview .rn-kanji__seal::before {
	animation: rn-frame-x 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1.45s both;
}
#rn-kanji.is-inview .rn-kanji__seal::after {
	animation: rn-frame-y 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1.75s both;
}

@keyframes rn-frame-x {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@keyframes rn-frame-y {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

.rn-kanji__seal a,
.rn-kanji__seal a:link,
.rn-kanji__seal a:visited {
	position: relative;
	/* いちばん線の細い明朝（Noto Serif JP は 200 が下限）。
	   ひな明朝より横画・うろこが控えめで、字の姿がすっきり立つ。
	   さらに、地色と同じ色の縁を薄くかぶせて画を削り、
	   書体の下限よりもう一段細く見せている（字の大きさに比例させるので em で指定）。
	   縁の色は地色そのもの（--rn-night）。 */
	font-family: "Noto Serif JP", var(--rn-mincho);
	font-weight: 200;
	-webkit-text-stroke: 0.007em var(--rn-night);
	font-size: calc(var(--s) * 0.3);
	line-height: 1;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	/* ふれたときの強い光は filter で重ねる。息づく光（text-shadow）とは別の層なので、
	   点滅の途中でふれても、なめらかに光が強まる */
	transition: filter 0.9s ease, opacity 0.9s ease;
}

/* 1字ずつの細い枠。ふれると浮かび上がり、「押せる」ことを伝える */
.rn-kanji__seal a::before {
	content: "";
	position: absolute;
	inset: -0.34em -0.3em;
	border: 1px solid currentColor;
	opacity: 0;
	transform: scale(0.86);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rn-kanji__seal a:hover::before,
.rn-kanji__seal a:focus-visible::before {
	opacity: 0.55;
	transform: none;
}

/* 字はそれぞれの隅の外から、対角線に沿って飛んでくる */
.rn-kanji__seal a:nth-child(1) { --dx: -1; --dy: -1; }
.rn-kanji__seal a:nth-child(2) { --dx:  1; --dy: -1; }
.rn-kanji__seal a:nth-child(3) { --dx: -1; --dy:  1; }
.rn-kanji__seal a:nth-child(4) { --dx:  1; --dy:  1; }

#rn-kanji.is-inview .rn-kanji__seal a {
	animation:
		rn-seal-fly 0.95s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.16s) both,
		/* 考→筆→話→史と、ひとつずつ、やさしく灯りつづける（8秒でひと巡り） */
		rn-seal-turn 8s ease-in-out calc(1.6s + var(--i, 0) * 2s) infinite;
}

@keyframes rn-seal-fly {
	0% {
		opacity: 0;
		transform: translate(calc(var(--dx, 0) * 2.6em), calc(var(--dy, 0) * 2.6em)) scale(0.82);
	}
	55% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* 自分の番のあいだだけ、ふわっと明るくなって、また沈む */
@keyframes rn-seal-turn {
	0%, 100% {
		text-shadow: 0 0 0.12em rgba(255, 255, 255, 0), 0 0 0.45em rgba(170, 215, 238, 0);
		opacity: 0.76;
	}
	10% {
		text-shadow: 0 0 0.14em rgba(255, 255, 255, 0.7), 0 0 0.6em rgba(170, 215, 238, 0.55);
		opacity: 1;
	}
	26% {
		text-shadow: 0 0 0.12em rgba(255, 255, 255, 0), 0 0 0.45em rgba(170, 215, 238, 0);
		opacity: 0.76;
	}
}

/* ふれたところは色を変えず、強く発光させる */
.rn-kanji__seal a:hover,
.rn-kanji__seal a:focus-visible {
	/* 光らせすぎず、ふわっと浮かぶ程度に */
	filter:
		drop-shadow(0 0 0.1em rgba(255, 255, 255, 0.5))
		drop-shadow(0 0 0.5em rgba(160, 210, 236, 0.45));
	opacity: 1;
	outline: none;
}

/* 字にふれているあいだ、枠もうっすら光を帯びる */
.rn-kanji__seal:has(a:hover),
.rn-kanji__seal:has(a:focus-visible) {
	box-shadow: 0 0 1.1em rgba(160, 210, 236, 0.18), inset 0 0 1.1em rgba(160, 210, 236, 0.1);
}

.rn-kanji__name {
	margin: 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.75rem, 1.15vw, 1rem);
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	color: rgba(227, 227, 225, 0.72);
}

/* スマホでは大きすぎるので、ひと回りずつ3段ほど小さく */
@media screen and (max-width: 640px) {
	.rn-kanji__seal {
		--s: min(46vh, 26rem, 48vw);
	}
}

@media (prefers-reduced-motion: reduce) {
	#rn-kanji.is-inview .rn-kanji__seal a,
	#rn-kanji.is-inview .rn-kanji__seal::before,
	#rn-kanji.is-inview .rn-kanji__seal::after {
		animation: none;
	}
	.rn-kanji__seal a,
	.rn-kanji__seal a::before,
	.rn-kanji__seal {
		transition: none;
	}
}

/* ==========================================================================
   3. ご挨拶 — 左に文章、右に写真。写真は画面に貼りついたまま、文章だけが流れる
   ========================================================================== */
#rn-senses {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	min-block-size: 100svh;
	/* 写真がハイキーのモノクロなので、地色も明るく取る */
	background-color: var(--rn-paper);
	color: var(--rn-ink);
}

.rn-senses__photo {
	grid-column: 2;
	grid-row: 1;
}

/* 人物写真は右端に貼りつき、切り抜かず全体を見せる。
   幅を「写真の実寸（縦 100svh 相当）」の上限で締めているので、
   写真はパネル幅ぴったりに収まり、左端＝写真の左端になる。 */
.rn-senses__bg {
	position: sticky;
	inset-block-start: 0;
	block-size: 100svh;
	/* 1772 : 2366 の写真なので、高さいっぱいのときの幅は 74.88svh */
	inline-size: min(40vw, 36rem, 74.88svh);
	background-image: url(../images/riichiro-nishida-greeting-portrait.jpg?20261015);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* 写真の左端だけをごく浅く地色に溶かす。人物には掛けない */
.rn-senses__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right,
		var(--rn-paper) 0%,
		rgba(238, 237, 234, 0.55) 7%,
		rgba(238, 237, 234, 0.15) 16%,
		rgba(238, 237, 234, 0) 28%);
}

/* ご挨拶文。デスクトップでは1画面に収めるため、本文を2段に組み、
   字の大きさも行間も画面の高さ（vh）に合わせて縮む */
.rn-senses__greeting {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-inline-size: 0;
	max-inline-size: 58rem;
	justify-self: end;
	padding-block-start: clamp(1.5rem, 4.2vh, 3rem);
	/* 下の余白＝写真の下の余白。写真（1500×2003）は枠いっぱいに contain で置かれ、
	   枠の幅は min(40vw, 36rem, 74.88svh)、高さはその 1.3353 倍。
	   これで一番下の「著書／講演・メディア／連載・寄稿」が写真の下端に揃う */
	padding-block-end: max(clamp(1.5rem, 4.2vh, 3rem),
		calc((100svh - min(40vw, 36rem, 74.88svh) * 1.3353) / 2));
	padding-inline: var(--rn-gutter) clamp(1.5rem, 2.8vw, 3rem);
}

/* 上の auto と、下の見出しの auto で余白を分け合い、文章は残りの中ほどに置く */
.rn-senses__greeting h2 {
	margin: auto 0 1.4em;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.8125rem, 1.7vh, 1.125rem);
	letter-spacing: 0.22em;
	color: var(--rn-ink);
}

.rn-senses__greeting p {
	margin: 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.75rem, 1.6vh, 0.9375rem);
	line-height: 2;
	letter-spacing: 0.03em;
	color: rgba(26, 26, 26, 0.84);
	text-align: justify;
}

/* 冒頭の一文 */
.rn-senses__greeting .rn-senses__lead {
	margin-block-end: 1.1em;
	font-family: var(--rn-mincho);
	font-weight: 500;
	font-size: clamp(1rem, 2.3vh, 1.5rem);
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--rn-ink);
	text-align: left;
}

/* 本文は2段組み。段の高さを揃えるため段落は段をまたいでよいが、
   段の頭と尻に1行だけ残ることはさせない */
.rn-senses__body {
	margin-block-end: clamp(2.25rem, 5vh, 4rem);
	column-count: 2;
	column-gap: clamp(1.5rem, 2.6vw, 2.75rem);
}
.rn-senses__body p {
	orphans: 2;
	widows: 2;
}
/* 空行で区切られた段落どうしの間 */
.rn-senses__body > p + p {
	margin-block-start: 1.3em;
}

/* 肩書きと手書きの署名 */
.rn-senses__sign {
	margin-block-start: 1.6em;
	text-align: right;
	break-inside: avoid;
}
.rn-senses__greeting .rn-senses__sign-title {
	font-size: clamp(0.5625rem, 1.05vh, 0.6875rem);
	letter-spacing: 0.1em;
	line-height: 1.75;
	color: rgba(26, 26, 26, 0.6);
	text-align: right;
}
.rn-senses__greeting .rn-senses__greeting-sign {
	margin-block-start: 0.45em;
	line-height: 1;
	text-align: right;
}
.rn-senses__greeting-sign img {
	display: inline-block;
	inline-size: clamp(4.5rem, 8vh, 6.5rem);
	block-size: auto;
}

/* 著書／講演・メディア／連載・寄稿。
   文章の右下に見出しだけを並べ、押すとその上に中身がひらく。
   JS が動かないときは、見出しの下に3つとも並べて見せる */
.rn-senses__more {
	position: relative;
	align-self: flex-end;
	/* 下端に寄せる（写真の下端と揃う）。本文との最低限の間は .rn-senses__body の下余白で取る */
	margin-block-start: auto;
}
.rn-senses__more-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4em clamp(1.1rem, 1.8vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rn-senses__more-tabs button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.35em 0;
	border: 0;
	background: none;
	font-family: var(--rn-mincho);
	font-weight: 500;
	font-size: clamp(0.75rem, 1.5vh, 0.9375rem);
	letter-spacing: 0.16em;
	color: var(--rn-ink);
	cursor: pointer;
	transition: color 0.3s ease;
}
/* ＋ の印。ひらいているあいだは × に回る */
.rn-senses__more-tabs button::after {
	content: "";
	inline-size: 0.7em;
	block-size: 0.7em;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	opacity: 0.6;
	transition: transform 0.35s ease, opacity 0.35s ease;
}
/* 下線は左から引かれる */
.rn-senses__more-tabs button::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s ease;
}
.rn-senses__more-tabs button:hover,
.rn-senses__more-tabs button:focus-visible,
.rn-senses__more-tabs button[aria-expanded="true"] {
	color: var(--rn-teal-deep);
}
.rn-senses__more-tabs button:hover::before,
.rn-senses__more-tabs button:focus-visible::before,
.rn-senses__more-tabs button[aria-expanded="true"]::before {
	transform: scaleX(1);
}
.rn-senses__more-tabs button[aria-expanded="true"]::after {
	transform: rotate(45deg);
	opacity: 1;
}
.rn-senses__more-tabs button:focus-visible {
	outline: 1px dotted currentColor;
	outline-offset: 0.25em;
}

.rn-senses__panel {
	margin-block-start: 0.9rem;
	padding: clamp(0.9rem, 2vh, 1.3rem) clamp(1rem, 1.6vw, 1.5rem);
	border: 1px solid rgba(26, 26, 26, 0.14);
	background-color: rgba(250, 249, 246, 0.96);
	text-align: left;
}
.rn-senses__panel[hidden] {
	display: none;
}
/* JS が動いたら、見出しの上に浮かせてひらく（1画面の組みを崩さない） */
.rn-senses__more.is-ready .rn-senses__panel {
	position: absolute;
	inset-block-end: calc(100% + 0.75rem);
	inset-inline-end: 0;
	z-index: 2;
	inline-size: min(30rem, 72vw);
	margin: 0;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 1.5rem 3rem -1.75rem rgba(26, 26, 26, 0.45);
	animation: rn-panel-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rn-panel-in {
	from { opacity: 0; transform: translateY(0.5rem); }
	to { opacity: 1; transform: none; }
}
.rn-senses__panel h3 {
	margin: 0 0 0.7em;
	font-family: var(--rn-gothic);
	font-weight: 400;
	font-size: clamp(0.625rem, 1.15vh, 0.75rem);
	letter-spacing: 0.22em;
	color: var(--rn-teal-deep);
}
.rn-senses__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rn-senses__panel li {
	position: relative;
	padding-inline-start: 1em;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.6875rem, 1.3vh, 0.8125rem);
	line-height: 1.7;
	color: rgba(26, 26, 26, 0.82);
}
.rn-senses__panel a,
.rn-senses__panel a:link,
.rn-senses__panel a:visited {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(31, 95, 122, 0.35);
	text-underline-offset: 0.3em;
	transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.rn-senses__panel a:hover,
.rn-senses__panel a:focus-visible {
	color: var(--rn-teal-deep);
	text-decoration-color: currentColor;
}
/* 外のサイトへ飛ぶものには小さな矢印 */
.rn-senses__panel a[target="_blank"]::after {
	content: "↗";
	margin-inline-start: 0.3em;
	font-size: 0.85em;
	opacity: 0.55;
}
.rn-senses__panel li + li {
	margin-block-start: 0.3em;
}
.rn-senses__panel li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1em;
	inset-block-start: 0.85em;
	inline-size: 0.45em;
	block-size: 1px;
	background-color: currentColor;
	opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
	.rn-senses__more.is-ready .rn-senses__panel {
		animation: none;
	}
}

/* タブレット幅では2段は細すぎるので、1段に戻して素直に流す */
@media screen and (max-width: 1023px) {
	.rn-senses__body {
		column-count: 1;
	}
	.rn-senses__greeting p {
		font-size: 0.8125rem;
		line-height: 2;
	}
	.rn-senses__more {
		align-self: stretch;
	}
	.rn-senses__more.is-ready .rn-senses__panel {
		position: static;
		inline-size: auto;
		margin-block-start: 0.9rem;
		box-shadow: none;
	}
	.rn-senses__panel li {
		font-size: 0.75rem;
	}
}

@media screen and (max-width: 781px) {
	/* スマホでは写真を上端の帯にして、下端を溶かしてから本文を流す */
	#rn-senses {
		display: flex;
		flex-direction: column;
	}
	.rn-senses__photo {
		order: -1;
	}
	.rn-senses__bg {
		position: relative;
		inline-size: auto;
		block-size: 54svh;
		background-size: cover;
		background-position: center 10%;
		-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0, #000 54%, transparent 100%);
	}
	.rn-senses__bg::after {
		background: none;
	}
	.rn-senses__greeting {
		justify-self: auto;
		inline-size: auto;
		padding: 0.75rem clamp(1.25rem, 5vw, 2rem) 2rem;
	}
	.rn-senses__greeting p {
		line-height: 1.7;
		text-align: left;
	}
	.rn-senses__greeting h2 {
		margin-block-end: 1em;
	}
	.rn-senses__body {
		margin-block-end: 1.25rem;
	}
	.rn-senses__body > p + p {
		margin-block-start: 1em;
	}
	.rn-senses__sign {
		margin-block-start: 1.1em;
	}
	.rn-senses__panel {
		padding: 1.2em 1.15em 1.1em;
	}
}

/* ==========================================================================
   七つの感性 各ページ（/chou/ /wa/ /kyu/ /kou/ /hitsu/ /sou/ /shi/）
   ========================================================================== */
#rn-sense-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 72svh;
	/* 写真の読み込み前・読み込み失敗時の下地 */
	background-color: var(--rn-teal);
	color: var(--rn-white);
	padding-block: clamp(4rem, 12vh, 8rem);
	padding-inline: var(--rn-gutter);
	overflow: hidden;
	text-align: center;
}

/* 背景に大きく「仕」を沈める */
/* 扉の背景に敷くモノクロ写真 */
.rn-sense-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* 人物が上寄りの構図を想定。写真ごとに調整可 */
	object-position: center 35%;
	filter: grayscale(1);
}

/* 白文字が読めるように写真を沈める。ごく薄くティールを残してブランド色を繋ぐ */
#rn-sense-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			rgba(22, 32, 38, 0.34) 0%,
			rgba(22, 32, 38, 0.5) 55%,
			rgba(22, 32, 38, 0.66) 100%),
		linear-gradient(to bottom, rgba(43, 122, 155, 0.18), rgba(43, 122, 155, 0.18));
}

.rn-sense-hero__kanji {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-family: var(--rn-mincho);
	font-size: min(46vh, 34rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.16);
	pointer-events: none;
	user-select: none;
	z-index: 2;
}

.rn-sense-hero__text {
	position: relative;
	z-index: 3;
}

#rn-sense-hero .rn-section-head__en {
	color: rgba(255, 255, 255, 0.75);
}

.rn-sense-hero__title {
	margin: 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	line-height: 1.6;
}

/* 考・史の扉は英文だけを置く */
.rn-sense-hero__title--en {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(1.25rem, 2.8vw, 2.125rem);
	letter-spacing: 0.26em;
	text-indent: 0.26em;
	line-height: 1.5;
}

/* 英文の見出しの下に、内訳を小さく添える */
.rn-sense-hero__sub {
	margin: 1em 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.5625rem, 0.9vw, 0.6875rem);
	letter-spacing: 0.28em;
	text-indent: 0.28em;
	color: rgba(255, 255, 255, 0.6);
}

.rn-sense-hero__lead {
	margin-block-start: clamp(1.5rem, 4vh, 2.5rem);
	margin-block-end: 0;
	font-family: var(--rn-gothic);
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 2.2;
	color: rgba(255, 255, 255, 0.85);
}

/* 扉の大きな漢字も記号寄りのフォントで */
.rn-sense-hero__kanji {
	font-family: var(--rn-symbol);
	font-weight: 100;
}

/* 前後の感性へ渡るリンク */
.rn-sense-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	margin-block-start: clamp(3.5rem, 9vh, 6rem);
	padding-block-start: clamp(2rem, 5vh, 3rem);
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
}

.rn-sense-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.4s ease;
}
.rn-sense-nav a:hover {
	opacity: 0.6;
}

.rn-sense-nav .rn-sense-nav__kanji {
	font-family: var(--rn-symbol);
	font-weight: 200;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--rn-white);
}

.rn-sense-nav .rn-sense-nav__cap {
	font-family: var(--rn-gothic);
	font-size: 0.5625rem;
	font-weight: 300;
	letter-spacing: 0.24em;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   七つの感性 各ページ — 扉と本文の間に挟むモノクロの帯（16:9）
   ========================================================================== */
.rn-sense-photo {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 0;
	background-color: #111;
}

.rn-sense-photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* 顔が上寄りの構図を想定した切り取り位置。写真ごとに調整可 */
	object-position: center 30%;
	filter: grayscale(1);
}

/* 上端は扉のティール、下端は続くセクションの地色へ溶かして繋げる */
.rn-sense-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(43, 122, 155, 0.22) 0%,
		rgba(0, 0, 0, 0) 10%,
		rgba(0, 0, 0, 0) 86%,
		rgba(30, 30, 30, 0.5) 100%);
}

/* 「考」ページのように、下に明るいセクションが続く場合 */
.rn-sense-photo--light::after {
	background: linear-gradient(to bottom,
		rgba(43, 122, 155, 0.22) 0%,
		rgba(0, 0, 0, 0) 10%,
		rgba(0, 0, 0, 0) 86%,
		rgba(233, 233, 233, 0.3) 100%);
}

/* ==========================================================================
   「考」ページ — Deep Blue（氷山の図解）
   ========================================================================== */
#rn-deepblue {
	--db-panel: rgba(246, 246, 246, 0.82);
	--db-accent: #2ba6e0;
	position: relative;
	background-color: #e9e9e9;
	color: #1a1a1a;
	padding-block: clamp(4rem, 11vh, 7.5rem) clamp(4rem, 10vh, 7rem);
	padding-inline: clamp(1.25rem, 4vw, 3.5rem);
	overflow: hidden;
}

.rn-db__inner {
	position: relative;
	max-width: 62rem;
	margin-inline: auto;
}

.rn-db__lead {
	margin: 0;
	max-width: 46rem; /* 見出しが1行に収まる幅 */
}

.rn-db__lead-en {
	display: block;
	font-family: var(--rn-gothic);
	font-size: clamp(1rem, 2.2vw, 1.5rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	color: #8a8a8a;
}

.rn-db__lead-ja {
	display: block;
	margin-block-start: 0.5em;
	font-family: var(--rn-gothic);
	font-size: clamp(1.0625rem, 2.6vw, 1.75rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.6;
	color: #1a1a1a;
}

/* 氷山と注釈を重ねる舞台 */
.rn-db__stage {
	position: relative;
	margin-block-start: clamp(2rem, 6vh, 4rem);
}

.rn-db__figure {
	margin: 0;
}

.rn-db__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* 注釈パネル。デスクトップでは氷山の上に重ねる */
.rn-db__note {
	background-color: var(--db-panel);
	padding: clamp(0.85rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.5rem);
}

.rn-db__note h3 {
	margin: 0 0 1.2em;
	font-family: var(--rn-gothic);
	font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	color: #1a1a1a;
}

.rn-db__note h4 {
	margin: 0 0 0.5em;
	font-family: var(--rn-gothic);
	font-size: clamp(0.625rem, 0.85vw, 0.75rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #1a1a1a;
}

.rn-db__note ul {
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
}
.rn-db__note ul:last-child {
	margin-block-end: 0;
}

.rn-db__note li,
.rn-db__note p {
	margin: 0;
	font-family: var(--rn-gothic);
	font-size: clamp(0.5625rem, 0.78vw, 0.6875rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.85;
	color: #333;
}

.rn-db__note p + h4 {
	margin-block-start: 1.4em;
}
.rn-db__note p + p {
	margin-block-start: 1.2em;
}

/* 最下部のエンゲージメント。ここだけ地を反転させる */
.rn-db__engage {
	background-color: var(--db-accent);
	color: #fff;
	padding: clamp(0.85rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.5rem);
}

.rn-db__engage h3 {
	margin: 0 0 0.7em;
	font-family: var(--rn-gothic);
	font-size: clamp(0.625rem, 0.9vw, 0.75rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	color: #fff;
}

.rn-db__engage p {
	margin: 0;
	font-family: var(--rn-gothic);
	font-size: clamp(0.5625rem, 0.78vw, 0.6875rem);
	font-weight: 300;
	line-height: 1.85;
	color: #fff;
}

/* デスクトップ：氷山の上に注釈を配置する */
@media screen and (min-width: 782px) {
	.rn-db__note,
	.rn-db__engage {
		position: absolute;
		z-index: 1;
	}
	/* 海面より上・右 */
	.rn-db__note--find {
		inset-inline-end: -2%;
		inset-block-start: 0;
		inline-size: 34%;
	}
	/* 海面下・左 */
	.rn-db__note--target {
		inset-inline-start: -2%;
		inset-block-start: 30%;
		inline-size: 31%;
	}
	/* 深部・右 */
	.rn-db__note--solve {
		inset-inline-end: -2%;
		inset-block-start: 52%;
		inline-size: 34%;
	}
	/* 最深部・左 */
	.rn-db__engage {
		inset-inline-start: -2%;
		inset-block-end: 2%;
		inline-size: 34%;
	}
}

/* モバイル：重ねずに図の下へ順に流す */
@media screen and (max-width: 781px) {
	.rn-db__note,
	.rn-db__engage {
		margin-block-start: 1.25rem;
	}
	.rn-db__stage {
		display: flex;
		flex-direction: column;
	}
	.rn-db__figure {
		order: -1;
	}
}

/* 史ページ: タイムラインの下に置く前後ナビの器 */
.rn-history-outro {
	background-color: var(--rn-dark);
	padding-inline: var(--rn-gutter);
	padding-block-end: clamp(3rem, 8vh, 5rem);
}
.rn-history-outro .rn-sense-nav {
	max-width: 54rem;
	margin-inline: auto;
}

/* ==========================================================================
   感性ページの読み物レイアウト（挿画つきの掌編）
   ========================================================================== */
#rn-story {
	background-color: var(--rn-paper);
	color: var(--rn-ink);
	padding-block: clamp(4rem, 12vh, 8rem);
	padding-inline: var(--rn-gutter);
}

.rn-story__inner {
	max-width: 62rem;
	margin-inline: auto;
}

/* 挿画。水彩の紙色と地色が繋がるよう、余白は多めに取る */
.rn-story__figure {
	margin: 0 auto clamp(2rem, 6vh, 3.5rem);
	max-width: 46rem;
}

.rn-story__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/* 挿画の白地をそのまま紙になじませる */
	mix-blend-mode: multiply;
}

.rn-story__figure figcaption {
	margin-block-start: clamp(0.75rem, 2vh, 1.25rem);
	text-align: center;
	font-family: var(--rn-gothic);
	font-size: 0.625rem;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
	color: rgba(26, 26, 26, 0.45);
}

/* 「西田さんのちょっと良い話」の見出し。トップの手書きリンクと同じ書体で受ける */
.rn-story__hand-title {
	margin: 0 0 clamp(2.5rem, 7vh, 4.5rem);
	text-align: center;
	font-family: var(--rn-hand);
	font-weight: 400;
	font-size: clamp(1.125rem, 2.6vw, 1.625rem);
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: var(--rn-ink);
}

.rn-story__eyebrow {
	display: block;
	text-align: center;
	font-family: var(--rn-gothic);
	font-size: 0.5625rem;
	font-weight: 400;
	letter-spacing: 0.45em;
	text-indent: 0.45em;
	color: var(--rn-teal-deep);
}

.rn-story__title {
	margin: clamp(0.75rem, 2vh, 1.25rem) 0 clamp(2.5rem, 7vh, 4.5rem);
	text-align: center;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.375rem, 3.2vw, 2.125rem);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	line-height: 1.6;
	color: var(--rn-ink);
}

.rn-story__body {
	max-width: 34rem;
	margin-inline: auto;
}

.rn-story__body p {
	margin: 0;
	font-family: var(--rn-mincho);
	font-size: clamp(0.875rem, 1.05vw, 1rem);
	line-height: 2.35;
	letter-spacing: 0.05em;
	text-align: justify;
}
.rn-story__body p + p {
	margin-block-start: 1.9em;
}

/* 場面から思索へ切り替わるところに、短い罫を一本だけ引く */
.rn-story__rule {
	inline-size: 2.5rem;
	block-size: 1px;
	margin: clamp(2.75rem, 8vh, 4.5rem) auto;
	border: 0;
	background-color: rgba(26, 26, 26, 0.28);
}

.rn-story__body .rn-story__close {
	font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
	letter-spacing: 0.08em;
}

/* 明るい地の上に置く前後ナビ */
.rn-sense-nav--light {
	border-block-start-color: rgba(26, 26, 26, 0.16);
}
.rn-sense-nav--light .rn-sense-nav__kanji {
	color: var(--rn-ink);
}
.rn-sense-nav--light .rn-sense-nav__cap {
	color: rgba(26, 26, 26, 0.5);
}

/* ==========================================================================
   感性ページの本文（3つの節）
   ========================================================================== */
#rn-sense-body {
	background-color: var(--rn-dark-2);
	color: var(--rn-white);
	padding-block: clamp(4.5rem, 14vh, 10rem);
	padding-inline: var(--rn-gutter);
}

.rn-sense-body__inner {
	max-width: 54rem;
	margin-inline: auto;
}

.rn-sense-body__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-sense-body__item {
	display: grid;
	grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	padding-block: clamp(2rem, 5vh, 3.25rem);
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
}
.rn-sense-body__item:last-child {
	border-block-end: 1px solid rgba(255, 255, 255, 0.14);
}

.rn-sense-body__num {
	grid-column: 1;
	font-family: var(--rn-gothic);
	font-size: 0.625rem;
	font-weight: 300;
	letter-spacing: 0.2em;
	color: var(--rn-teal);
}

.rn-sense-body__head {
	grid-column: 2;
	grid-row: 1 / 2;
	margin: 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: var(--rn-white);
}

.rn-sense-body__text {
	grid-column: 2;
	margin: 1rem 0 0;
	font-family: var(--rn-gothic);
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.03em;
	line-height: 2.15;
	color: rgba(255, 255, 255, 0.72);
}

/* 著書・連載・出演などの一覧 */
.rn-sense-body__works {
	grid-column: 2;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}
.rn-sense-body__works li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.9em;
	padding-block: 0.8em;
	border-block-end: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	letter-spacing: 0.04em;
	line-height: 1.7;
	color: var(--rn-white);
}
/* 主題の下に添える副題（ビジネスセミナー）。会場名は主題のすぐ横、副題は次の行に一行で */
.rn-sense-body__sub {
	flex-basis: 100%;
	margin-block-start: 0.2em;
	font-size: 0.8125em;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.72);
}
/* 取材の一覧の後ろに、少し離して置くブログ（西田理一郎、かく語る） */
.rn-sense-body__works li.rn-sense-body__aside {
	margin-block-start: 1.75rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
	color: rgba(255, 255, 255, 0.8);
}
.rn-sense-body__works small {
	font-family: var(--rn-gothic);
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
}

/* 記事や書籍のあるものは、その題からたどれる。
   色は変えず、細い罫だけを敷いて「押せる」ことを伝える */
.rn-sense-body__works a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid rgba(255, 255, 255, 0.28);
	padding-block-end: 0.12em;
	transition: border-color 0.3s ease, color 0.3s ease;
}
.rn-sense-body__works a:hover,
.rn-sense-body__works a:focus-visible {
	border-block-end-color: #fbb03b;
	color: #fbb03b;
}
.rn-sense-body__works small a {
	border-block-end-color: rgba(255, 255, 255, 0.24);
}

.rn-sense-body__figure {
	grid-column: 2;
	margin: 1.25rem 0 0;
}
.rn-sense-body__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* ==========================================================================
   Pencil & Prompt（pencil/）— できることの一覧と、制作例・サンプル
   白い世界のページ（rn-page--asagi）の上に置く
   ========================================================================== */
.rn-pp-title span {
	font-style: italic;
	opacity: 0.55;
}

/* できること：細い罫で区切った札 */
.rn-pp-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 本文の段が細いので2列。説明文が短く刻まれない */
	gap: 1px;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	background-color: rgba(0, 93, 125, 0.16);
	border: 1px solid rgba(0, 93, 125, 0.16);
}
.rn-pp-menu__item {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.5rem 1.25rem 1.35rem;
	background-color: #fff;
}
.rn-pp-menu__no {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	color: var(--rn-asagi);
	opacity: 0.7;
}
.rn-pp-menu__head {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	font-weight: 400;
}
.rn-pp-menu__en {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	color: var(--rn-asagi);
}
.rn-pp-menu__ja {
	word-break: keep-all; /* 語の途中で折らない（折り目は <wbr>） */
	overflow-wrap: anywhere;
	font-family: var(--rn-mincho);
	font-size: 1.0625rem;
	letter-spacing: 0.06em;
	color: var(--rn-asagi-ink);
}
.rn-pp-menu__text {
	flex: 1;
	margin: 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.8125rem;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: rgba(0, 69, 93, 0.85);
}
.rn-pp-menu__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
}
.rn-pp-menu__tags li {
	padding: 0.25em 0.75em;
	border: 1px solid rgba(0, 93, 125, 0.28);
	border-radius: 999px;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	color: var(--rn-asagi);
}

/* 絞り込み */
.rn-pp-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0 1.5rem;
	padding: 0;
	list-style: none;
}
.rn-pp-filter__btn {
	padding: 0.55em 1.15em;
	border: 1px solid rgba(0, 93, 125, 0.35);
	border-radius: 999px;
	background-color: #fff;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--rn-asagi);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.rn-pp-filter__btn:hover {
	background-color: rgba(0, 93, 125, 0.06);
}
.rn-pp-filter__btn[aria-pressed="true"] {
	border-color: var(--rn-asagi);
	background-color: var(--rn-asagi);
	color: #fff;
}
.rn-pp-filter__btn:focus-visible {
	outline: 1px solid var(--rn-asagi);
	outline-offset: 3px;
}

/* 制作例・サンプル */
.rn-pp-works {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rn-pp-work[hidden] {
	display: none;
}
.rn-pp-work__fig {
	margin: 0 0 0.85rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--sx-mist);
}
.rn-pp-work__fig .rn-photo__btn {
	block-size: 100%;
}
.rn-pp-work__fig .rn-photo__btn img {
	block-size: 100%;
	aspect-ratio: auto;
	opacity: 1;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.rn-pp-work__fig .rn-photo__btn:hover img {
	transform: scale(1.03);
}
.rn-pp-work__cat {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	color: var(--rn-asagi);
}
.rn-pp-work__soon {
	padding: 0.1em 0.65em;
	border: 1px solid rgba(0, 93, 125, 0.3);
	border-radius: 999px;
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	opacity: 0.85;
}
.rn-pp-work__title {
	margin: 0.4rem 0 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.06em;
	color: var(--rn-asagi-ink);
}
.rn-pp-work__note {
	margin: 0.3rem 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.8;
	color: rgba(0, 69, 93, 0.75);
}
.rn-pp-works__note {
	margin: 2rem 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: rgba(0, 69, 93, 0.6);
}

/* 「準備中」の絵柄。種類ごとに、サイトの色で描き分ける（実例が届いたら img に差し替える） */
.rn-pp-art {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 0.85rem 1rem;
}
.rn-pp-art span {
	position: relative;
	z-index: 1;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	color: rgba(255, 255, 255, 0.9);
}
.rn-pp-art::before {
	content: "";
	position: absolute;
	pointer-events: none;
}
/* AI：光のにじみ */
.rn-pp-art--ai {
	background:
		radial-gradient(55% 60% at 28% 32%, rgba(189, 211, 225, 0.85), transparent 62%),
		radial-gradient(45% 50% at 74% 68%, rgba(226, 85, 127, 0.4), transparent 62%),
		linear-gradient(135deg, #1f3341, #1f5f7a);
}
/* CG：方眼と、浮かぶ立方体の稜線 */
.rn-pp-art--cg {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 26px),
		linear-gradient(160deg, #2c3647, #005d7d);
}
.rn-pp-art--cg::before {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 26%;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 10px -10px 0 -1px rgba(255, 255, 255, 0), 10px -10px 0 0 rgba(255, 255, 255, 0.35);
	transform: translate(-50%, -50%) rotate(45deg) skew(-8deg, -8deg);
}
/* MOTION：フィルムのコマと再生の印 */
.rn-pp-art--motion {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 23%, transparent 23% 25%),
		linear-gradient(135deg, #1f3341, #2b7a9b);
}
.rn-pp-art--motion::before {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	border-style: solid;
	border-width: 14px 0 14px 24px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
	transform: translate(-40%, -50%);
}
/* WEB：ブラウザの枠と、段組みの気配 */
.rn-pp-art--web {
	background:
		linear-gradient(#cfd9e5, #cfd9e5) 0 0 / 100% 11% no-repeat,
		linear-gradient(#9db0c9, #9db0c9) 10% 28% / 55% 9% no-repeat,
		linear-gradient(#dde4ef, #dde4ef) 10% 48% / 80% 5% no-repeat,
		linear-gradient(#dde4ef, #dde4ef) 10% 58% / 72% 5% no-repeat,
		linear-gradient(#bdd3e1, #bdd3e1) 10% 88% / 36% 20% no-repeat,
		linear-gradient(#bdd3e1, #bdd3e1) 90% 88% / 36% 20% no-repeat,
		#f6f8fb;
}
.rn-pp-art--web span {
	color: var(--rn-asagi);
}
/* INFOGRAPHICS：円グラフと棒グラフ */
.rn-pp-art--info {
	background:
		linear-gradient(#1f5f7a, #1f5f7a) 62% 78% / 6% 34% no-repeat,
		linear-gradient(#2b7a9b, #2b7a9b) 72% 78% / 6% 52% no-repeat,
		linear-gradient(#9db0c9, #9db0c9) 82% 78% / 6% 22% no-repeat,
		#dde4ef;
}
.rn-pp-art--info::before {
	inset-block-start: 22%;
	inset-inline-start: 12%;
	inline-size: 34%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(#1f5f7a 0 42%, #9db0c9 42% 71%, #e2557f 71% 100%);
	-webkit-mask: radial-gradient(circle, transparent 42%, #000 43%);
	mask: radial-gradient(circle, transparent 42%, #000 43%);
}
.rn-pp-art--info span {
	color: var(--rn-asagi);
}
/* DIGITAL ART：色の渦 */
.rn-pp-art--art {
	background:
		conic-gradient(from 210deg at 62% 42%, #e2557f, #bdd3e1, #005d7d, #2c3647, #e2557f);
}

/* AI 合成：二つの円を重ねて、絵と絵を合わせる気配 */
.rn-pp-art--compose {
	background:
		radial-gradient(circle at 40% 46%, rgba(189, 211, 225, 0.7) 0 21%, transparent 21.5%),
		radial-gradient(circle at 60% 50%, rgba(226, 85, 127, 0.5) 0 21%, transparent 21.5%),
		linear-gradient(135deg, #2c3647, #1f5f7a);
}

/* 同じ種類が続くときは、2枚目に紅のにじみを重ねて見分ける */
.rn-pp-art--alt::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(205deg, rgba(226, 85, 127, 0.22), transparent 58%);
	pointer-events: none;
}

/* ご相談へ */
.rn-pp-cta {
	text-align: center;
}
.rn-pp-cta__lead {
	margin: 0;
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
	letter-spacing: 0.08em;
	line-height: 2;
	color: var(--rn-asagi-ink);
}
.rn-pp-cta__link {
	margin: 1.25rem 0 0;
}
.rn-pp-cta__link a {
	display: inline-block;
	padding: 0.9em 2.4em;
	border: 1px solid var(--rn-asagi);
	border-radius: 999px;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	color: var(--rn-asagi);
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.rn-pp-cta__link a:hover,
.rn-pp-cta__link a:focus-visible {
	background-color: var(--rn-asagi);
	color: #fff;
}

@media screen and (max-width: 1023px) {
	.rn-pp-works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (max-width: 560px) {
	.rn-pp-menu {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-pp-works {
		gap: 1.75rem 0.875rem;
	}
	.rn-pp-work__title {
		font-size: 0.875rem;
	}
	.rn-pp-work__note {
		font-size: 0.6875rem;
	}
}

/* 西田塾・ビジネスセミナー：テーマの一覧の下に、写真を同じ大きさで並べる。
   押すと、画面の中央にひと回り大きく出る（dialog、ページに一つだけ置いて共用）。
   縦長の写真は img の style で object-position を指定し、顔が枠に入るようにしている */
.rn-photo-grid {
	grid-column: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* 西田塾・ビジネスセミナーとも4列で同じ大きさに */
	gap: 0.625rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}
.rn-photo-grid li {
	margin: 0;
}
.rn-photo__btn {
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: zoom-in;
}
.rn-photo__btn img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3; /* 縦横の違う写真も同じ枠に。はみ出た分は切る */
	object-fit: cover;
	opacity: 0.85;
	transition: opacity 0.3s ease;
}
.rn-photo__btn:hover img,
.rn-photo__btn:focus-visible img {
	opacity: 1;
}
.rn-photo__btn:focus-visible {
	outline: 1px solid rgba(255, 255, 255, 0.6);
	outline-offset: 3px;
}

.rn-photo-dialog {
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	max-inline-size: none;
	max-block-size: none;
}
.rn-photo-dialog::backdrop {
	background-color: rgba(12, 14, 18, 0.78);
}
.rn-photo-dialog img {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: min(86vw, 52rem);
	max-block-size: 78vh;
	cursor: zoom-out;
}
.rn-photo-dialog[open] {
	animation: rn-photo-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rn-photo-in {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: none; }
}
/* 閉じる（細い×） */
.rn-photo-dialog__close {
	position: absolute;
	inset-block-start: -2.4rem;
	inset-inline-end: 0;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.rn-photo-dialog__close::before,
.rn-photo-dialog__close::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 15%;
	inline-size: 70%;
	block-size: 1px;
	background-color: rgba(255, 255, 255, 0.85);
	transform: rotate(45deg);
}
.rn-photo-dialog__close::after {
	transform: rotate(-45deg);
}
/* 3枚を並べる欄（LE DÉFI R）。縦長の写真ばかりなので枠も縦長に */
.rn-photo-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rn-photo-grid--portrait .rn-photo__btn img {
	aspect-ratio: 3 / 4;
}
/* 白い世界のページでは、写真を薄めない */
.rn-page--asagi .rn-photo__btn img {
	opacity: 1;
}
@media screen and (max-width: 640px) {
	.rn-photo-grid {
		gap: 0.375rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rn-photo-dialog[open] {
		animation: none;
	}
}

/* 西田塾の映像。元の映像は 1280×720 の左右に黒い帯（約104px ずつ）が入っているので、
   少し細い 1060:720 の枠で左右を切り落として見せる。静止画（poster）も同じ切り方になる */
.rn-sense-body__figure--video {
	position: relative;
	aspect-ratio: 1060 / 720;
	overflow: hidden;
	background-color: #111;
}
.rn-video {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
/* 一時停止・再生（右下の小さな丸）。流れている間は ❚❚、止まっている間は ▶ */
.rn-video__toggle {
	position: absolute;
	inset-inline-end: 0.75rem;
	inset-block-end: 0.75rem;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.35);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.3s ease;
}
.rn-video__toggle:hover,
.rn-video__toggle:focus-visible {
	opacity: 1;
}
.rn-video__toggle:focus-visible {
	outline: 1px solid rgba(255, 255, 255, 0.8);
	outline-offset: 3px;
}
.rn-video__toggle::before,
.rn-video__toggle::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
}
.rn-video__toggle[data-state="playing"]::before,
.rn-video__toggle[data-state="playing"]::after {
	inline-size: 2px;
	block-size: 11px;
	background-color: #fff;
	transform: translate(-3px, -50%);
}
.rn-video__toggle[data-state="playing"]::after {
	transform: translate(2px, -50%);
}
.rn-video__toggle[data-state="paused"]::before {
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-35%, -50%);
}

/* PV の欄。16:9 の枠を先に取っておき、埋め込み（iframe）が入れば枠いっぱいに広がる */
.rn-sense-body__pv {
	grid-column: 2;
	position: relative;
	margin: 1.5rem 0 0;
	aspect-ratio: 16 / 9;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.rn-sense-body__pv iframe,
.rn-sense-body__pv video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}
.rn-sense-body__pv-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	color: rgba(255, 255, 255, 0.5);
}
.rn-sense-body__pv-empty span {
	font-family: var(--rn-mincho);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}
.rn-sense-body__pv-empty small {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
}

/* ==========================================================================
   筆 > PRESIDENT Online（hitsu/president/）
   寄稿記事アーカイブを主に、特集・連載は札に収めて控えめに
   ========================================================================== */
.rn-pres-more {
	grid-column: 2;
	margin: 1.5rem 0 0;
}
.rn-pres-more a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.9em;
	padding: 0.85em 1.6em;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	font-family: var(--rn-mincho);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	color: var(--rn-white);
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.rn-pres-more small {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	opacity: 0.7;
}
.rn-pres-more a:hover,
.rn-pres-more a:focus-visible {
	background-color: var(--rn-white);
	color: #1e1e1e;
}

.rn-pres-features {
	grid-column: 2;
	display: grid;
	gap: 1.5rem;
	margin: 1.1rem 0 0;
}
/* バナーを札の幅いっぱいに大きく見せ、その下に説明と記事を置く */
.rn-pres-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.rn-pres-feature__banner {
	display: block;
	line-height: 0;
	transition: opacity 0.3s ease;
}
.rn-pres-feature__banner:hover,
.rn-pres-feature__banner:focus-visible {
	opacity: 0.85;
}
.rn-pres-feature__banner img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}
.rn-pres-feature__meta {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.6);
}
.rn-pres-feature__badge {
	padding: 0.15em 0.7em;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	letter-spacing: 0.08em;
}
.rn-pres-feature__title {
	margin: 0.45rem 0 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: 1.125rem;
	letter-spacing: 0.08em;
	color: var(--rn-white);
}
.rn-pres-feature__text {
	margin: 0.5rem 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.7);
}
.rn-pres-feature__list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}
.rn-pres-feature__list li {
	padding-block: 0.45em;
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.7;
}
.rn-pres-feature__list a,
.rn-pres-feature__link a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.3s ease;
}
.rn-pres-feature__list a:hover,
.rn-pres-feature__link a:hover {
	color: #fbb03b;
}
.rn-pres-feature__link {
	margin: 0.75rem 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
}
.rn-pres-feature__link a {
	border-block-end: 1px solid rgba(255, 255, 255, 0.35);
	padding-block-end: 0.15em;
}
@media screen and (max-width: 781px) { /* 筆の項目が1列になる幅にそろえる */
	.rn-pres-more,
	.rn-pres-features {
		grid-column: 1;
	}
	.rn-pres-feature {
		gap: 1rem;
		padding: 1rem;
	}
}

.rn-sense-body__note {
	grid-column: 2;
	margin: 1rem 0 0;
	font-family: var(--rn-gothic);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.03em;
	line-height: 2;
	color: rgba(255, 255, 255, 0.6);
}

@media screen and (max-width: 781px) {
	.rn-sense-body__item {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-sense-body__head,
	.rn-sense-body__text {
		grid-column: 1;
	}
	.rn-sense-body__works,
	.rn-sense-body__figure,
	.rn-sense-body__pv,
	.rn-photo-grid,
	.rn-sense-body__note {
		grid-column: 1;
	}
	.rn-sense-body__head {
		grid-row: auto;
		margin-block-start: 0.75rem;
	}
}

/* ==========================================================================
   4. 五つの「仕」本文
   ========================================================================== */
#rn-shi {
	background-color: var(--rn-dark-2);
	color: var(--rn-white);
	padding-block: clamp(4.5rem, 14vh, 10rem);
	padding-inline: var(--rn-gutter);
}

.rn-shi__inner {
	max-width: 68rem;
	margin-inline: auto;
}

.rn-section-head {
	text-align: center;
	margin-block-end: clamp(2.5rem, 7vh, 5rem);
}

.rn-section-head__en {
	display: block;
	font-family: var(--rn-gothic);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.45em;
	text-indent: 0.45em;
	color: var(--rn-teal);
	margin-block-end: 1.25rem;
}

.rn-section-head__ja {
	margin: 0;
	font-family: var(--rn-mincho);
	font-weight: 300;
	font-size: clamp(1.125rem, 2.4vw, 1.75rem);
	letter-spacing: 0.22em;
	text-indent: 0.22em;
	line-height: 1.7;
}

.rn-section-head__note {
	margin-block-start: 1.25rem;
	margin-block-end: 0;
	font-family: var(--rn-gothic);
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 2;
	color: rgba(255, 255, 255, 0.6);
}

.rn-shi__list {
	max-width: 54rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* 左に番号と見出し、右に解説。読み物としての体裁 */
.rn-shi__item {
	display: grid;
	grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	padding-block: clamp(2rem, 5vh, 3.25rem);
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
	text-align: left;
}
.rn-shi__item:last-child {
	border-block-end: 1px solid rgba(255, 255, 255, 0.14);
}

.rn-shi__num {
	grid-column: 1;
	display: block;
	font-family: var(--rn-gothic);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	color: var(--rn-teal);
	margin-block-end: 0.85rem;
}

.rn-shi__word {
	grid-column: 1;
	display: block;
	font-family: var(--rn-mincho);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.4;
}

.rn-shi__desc {
	grid-column: 2;
	grid-row: 1 / 2;
	display: block;
	font-family: var(--rn-gothic);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	line-height: 1.9;
	color: var(--rn-teal);
}

.rn-shi__body {
	grid-column: 2;
	margin: 0.75rem 0 0;
	font-family: var(--rn-gothic);
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.03em;
	line-height: 2.15;
	color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   5. 手がけている仕事 — 3画面ぶんの「紙面」
   円に写真を抜き、色の円を刷り重ね、細い罫を走らせる。
   円の大きさは --u（画面に合わせて伸び縮みする一単位）で決めている。
   ========================================================================== */
#rn-works {
	background-color: var(--rn-paper);
	color: var(--rn-ink);
}

.rn-works__poster {
	position: relative;
	min-block-size: 100svh;
	overflow: hidden;
	/* 円の基準。画面の幅にも高さにも収まる大きさ */
	--u: min(44vw, 58svh);
	/* 内訳の列の幅。円・見出しは絶対配置のまま、内訳だけを流れに置く */
	--side: min(30rem, 40vw);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--side));
	align-items: end;
	padding-inline: var(--rn-gutter);
	padding-block: clamp(2.5rem, 7vh, 4.5rem);
}
.rn-works__poster--two,
.rn-works__poster--three {
	--side: min(34rem, 44vw);
}
.rn-works__poster--two {
	grid-template-columns: minmax(0, var(--side)) minmax(0, 1fr);
}

/* 細い罫。紙面を区切る */
.rn-works__rules {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(26, 26, 26, 0.2), rgba(26, 26, 26, 0.2)),
		linear-gradient(rgba(26, 26, 26, 0.2), rgba(26, 26, 26, 0.2)),
		linear-gradient(rgba(26, 26, 26, 0.13), rgba(26, 26, 26, 0.13));
	background-size: 50% 1px, 1px 100%, 1px 24%;
	background-position: 0 78%, 26% 0, 72% 0;
	background-repeat: no-repeat;
}
.rn-works__poster--two .rn-works__rules {
	background-position: 100% 78%, 74% 0, 28% 0;
}

/* 写真を抜いた円 */
.rn-works__circle {
	position: absolute;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--sx-mist);
}
.rn-works__circle img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.06);
}
/* 見出しが載る大きい円は、下半分をすこし沈める */
.rn-works__circle--a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(20, 28, 40, 0.6) 0%,
		rgba(20, 28, 40, 0.28) 38%,
		rgba(20, 28, 40, 0) 62%);
	pointer-events: none;
}

/* 写真の円（見出しの後ろの一枚だけ） */
.rn-works__circle--a {
	inline-size: var(--u);
	block-size: var(--u);
}

/* 刷り重ねる色の円 */
.rn-works__disc {
	position: absolute;
	inline-size: calc(var(--u) * 0.66);
	block-size: calc(var(--u) * 0.66);
	border-radius: 50%;
	background-color: var(--sx-blue);
	mix-blend-mode: multiply;
	opacity: 0.85;
	pointer-events: none;
}

/* 見出しは写真の上に置く */
.rn-works__title {
	position: absolute;
	z-index: 2;
	/* 円からはみ出すと白い字が読めなくなるので、円の内側に収める */
	max-inline-size: calc(var(--u) * 0.78);
	color: var(--rn-white);
	text-shadow: 0 1px 14px rgba(20, 28, 40, 0.5);
}
.rn-works__title-en {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.5625rem, 0.95vw, 0.75rem);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.85;
}
.rn-works__title-ja {
	word-break: keep-all;
	overflow-wrap: anywhere;
	margin: 0.5rem 0 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.25rem, 3vw, 2.25rem);
	letter-spacing: 0.18em;
	line-height: 1.5;
}
/* 英字の見出しは字間を詰める */
.rn-works__title-ja--en {
	margin-block-start: 0;
	font-size: clamp(1.75rem, 3.8vw, 3rem);
	letter-spacing: 0.04em;
	line-height: 1.2;
}
.rn-works__title-note {
	margin: 0.8rem 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
	letter-spacing: 0.1em;
	line-height: 1.9;
	opacity: 0.9;
}

/* 内訳と頭文字。紙面の端に寄せる */
.rn-works__side {
	position: relative;
	z-index: 2;
	grid-row: 1;
	grid-column: 2;
	justify-self: end;
	display: flex;
	align-items: flex-end;
	gap: clamp(0.75rem, 2vw, 1.75rem);
}
.rn-works__lists {
	display: grid;
	gap: clamp(1rem, 2.5vh, 1.75rem);
	text-align: right;
}
.rn-works__list-head {
	margin: 0 0 0.5em;
	padding-block-end: 0.4em;
	border-block-end: 1px solid rgba(31, 95, 122, 0.35);
}
.rn-works__list-head span {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.5625rem, 0.9vw, 0.6875rem);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--rn-teal-deep);
}
.rn-works__list-head small {
	display: block;
	margin-block-start: 0.35em;
	font-family: var(--rn-mincho);
	font-size: clamp(0.75rem, 1.1vw, 0.9375rem);
	letter-spacing: 0.12em;
	color: var(--rn-ink);
}
.rn-works__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rn-works__list li {
	display: grid;
	gap: 0.15em;
	padding-block: 0.38em;
	font-family: var(--rn-gothic);
	font-weight: 300;
	letter-spacing: 0.04em;
}
.rn-works__list li b {
	/* 語の途中では折らない。折り目は <wbr> で指定し、入りきらないときだけ崩す */
	word-break: keep-all;
	overflow-wrap: anywhere;
	font-family: var(--rn-mincho);
	font-weight: 500;
	font-size: clamp(0.75rem, 0.95vw, 0.875rem);
	line-height: 1.55;
	color: var(--rn-ink);
}
.rn-works__list li span,
.rn-works__list-lead {
	/* 文節（<wbr>）と読点でだけ折る。語尾の一、二字が次の行に落ちない */
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.rn-works__list li span {
	font-size: clamp(0.625rem, 0.78vw, 0.71875rem);
	line-height: 1.6;
	color: rgba(26, 26, 26, 0.6);
}
/* 領域のひとこと（01 Strategy の下） */
.rn-works__list-lead {
	margin: 0 0 0.6em;
	font-family: var(--rn-mincho);
	font-size: clamp(0.75rem, 0.95vw, 0.875rem);
	line-height: 1.8;
	letter-spacing: 0.06em;
	color: var(--rn-teal-deep);
}
/* ふたつの内訳を横に並べる（広い画面のみ） */
.rn-works__lists--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.25rem, 2.2vw, 2rem);
	align-items: end;
}

/* 頭文字 */
.rn-works__mark {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(3rem, 7vw, 5.5rem);
	line-height: 0.8;
	color: var(--rn-teal-deep);
	opacity: 0.4;
	user-select: none;
}

/* ---- 1枚目：大きい円は左、内訳は右下 ---- */
.rn-works__poster--one .rn-works__circle--a {
	inset-block-start: 14%;
	inset-inline-start: 6%;
}
.rn-works__poster--one .rn-works__disc {
	inset-block-start: 10%;
	inset-inline-start: calc(6% + var(--u) * 0.62);
}
.rn-works__poster--one .rn-works__title {
	inset-block-start: calc(14% + var(--u) * 0.46);
	inset-inline-start: calc(6% + var(--u) * 0.11);
}


/* ---- 2枚目：左右を入れ替える ---- */
.rn-works__poster--two .rn-works__circle--a {
	inset-block-start: 12%;
	inset-inline-end: 6%;
}
.rn-works__poster--two .rn-works__disc {
	inset-block-start: 46%;
	inset-inline-end: calc(6% + var(--u) * 0.58);
}
.rn-works__poster--two .rn-works__title {
	inset-block-start: calc(12% + var(--u) * 0.46);
	inset-inline-end: calc(6% + var(--u) * 0.11);
	text-align: right;
}
/* 「マーケティングと、」を一行に収める。円が小さい画面では字も円に合わせて縮める */
.rn-works__poster--two .rn-works__title-ja {
	font-size: min(clamp(1.25rem, 3vw, 2.25rem), calc(var(--u) * 0.072));
	letter-spacing: 0.1em;
}
.rn-works__poster--two .rn-works__side {
	grid-column: 1;
	justify-self: start;
	flex-direction: row-reverse;
}
.rn-works__poster--two .rn-works__lists {
	text-align: left;
}

/* ---- 3枚目：円を中ほどに、内訳は右下 ---- */
.rn-works__poster--three .rn-works__circle--a {
	inset-block-start: 10%;
	inset-inline-start: 12%;
}
.rn-works__poster--three .rn-works__disc {
	inset-block-start: 6%;
	inset-inline-start: calc(12% + var(--u) * 0.6);
}
.rn-works__poster--three .rn-works__title {
	inset-block-start: calc(10% + var(--u) * 0.46);
	inset-inline-start: calc(12% + var(--u) * 0.11);
}


/* 1024〜1279px：内訳の列と円がぶつからないよう、円をひと回り小さくし、
   ふたつの内訳は縦に積む（紙面が少し伸びることがある） */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.rn-works__poster {
		--u: min(34vw, 50svh);
	}
	.rn-works__poster,
	.rn-works__poster--two,
	.rn-works__poster--three {
		--side: min(24rem, 36vw);
	}
	.rn-works__lists--two {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 締めのひとこと。全領域に効く力として、少し大きく */
.rn-works__ai {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.3em 0.9em;
	max-inline-size: 72rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 7vh, 4.5rem) var(--rn-gutter) clamp(2rem, 5vh, 3rem);
	border-block-start: 1px solid rgba(26, 26, 26, 0.16);
	font-family: var(--rn-mincho);
	font-size: clamp(1.125rem, 2vw, 1.625rem);
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-align: center;
	color: var(--rn-ink);
}
.rn-works__ai span[lang="en"] {
	letter-spacing: 0.2em;
	color: var(--rn-teal-deep);
}
.rn-works__ai-sep {
	color: rgba(26, 26, 26, 0.35);
}

/* 事例へ */
.rn-works__cases {
	max-inline-size: 72rem;
	margin: 0 auto;
	padding: 0 var(--rn-gutter) clamp(3rem, 8vh, 5rem);
	text-align: right;
}
.rn-works__cases a {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4em;
	color: var(--rn-ink);
	text-decoration: none;
	transition: color 0.4s ease;
}
.rn-works__cases span {
	padding-block-end: 0.3em;
	border-block-end: 1px solid rgba(31, 95, 122, 0.45);
	font-family: var(--rn-mincho);
	font-size: clamp(0.8125rem, 1.1vw, 1rem);
	letter-spacing: 0.12em;
}
.rn-works__cases small {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.5625rem;
	letter-spacing: 0.2em;
	color: rgba(26, 26, 26, 0.5);
}
.rn-works__cases a:hover,
.rn-works__cases a:focus-visible {
	color: var(--rn-teal-deep);
}

/* ==========================================================================
   Mind Timeline — 画像ではなくテキストで組んだ項目
   既存の画像項目（timeline_09.png など）と並んで見えるよう寸法を合わせている
   ========================================================================== */
/* 前後の帯（timeline_14.png など）は 1105×185 の絵で、
   字の高さも余白もその中で決まっている。
   同じ見え方になるよう、桁の幅を基準（cqw）にして寸法を写し取る。
     ・左の余白  93/1105 = 8.4%
     ・上下の余白 57/1105 = 5.2%
     ・英字      78/1105 = 7.0%
     ・和文      74/1105 = 6.7% */
.timeline_img:has(> .rn-tl) {
	container-type: inline-size;
}

.rn-tl {
	position: relative;
	padding: 5.2cqw 8.4cqw;
	font-family: var(--rn-gothic);
	font-weight: 300;
	line-height: 1.5; /* .timeline_02_set の line-height:0 を打ち消す */
	text-align: left;
	color: var(--rn-white);
}

/* 英字の行。ひとつの枠に二段を収めているので、
   英字の下には前後の帯と同じ白い罫を、桁いっぱいに引いて区切る */
.rn-tl__en {
	position: relative;
	margin: 0 -8.4cqw 5.2cqw;
	padding: 0 8.4cqw 5.2cqw;
	border-block-end: 1px solid #fff;
	font-size: 1.5rem;
	font-size: 7cqw;
	letter-spacing: 0.01em;
	line-height: 0.95; /* 絵の帯と同じ高さに収める */
	white-space: nowrap;
}
/* 罫と中心線が交わるところの丸 — .timeline_02_set:after と同じ絵 */
.rn-tl__en::before {
	content: "";
	position: absolute;
	inset-inline-end: -0.9408602151vw;
	inset-block-end: -0.9408602151vw;
	inline-size: 1.8817204301vw;
	block-size: 1.8817204301vw;
	background: url(../images/top/timeline_circle.png) center / 50% no-repeat;
}

/* 説明の行は、前後の説明帯（timeline_13.png）と同じ明朝・同じ大きさで。
   53/1105 = 4.8%、行送りは 85/53 = 1.6 */
.rn-tl__ja {
	margin: 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: 1rem;
	font-size: 4.8cqw;
	letter-spacing: 0.02em;
	line-height: 1.6;
}

/* Read more — 前後の「read more」と同じ絵を使う。
   押すと続きがひらく、JS なしで動く details。
   つまみは英字の行の右端に置き（流れからは外す）、
   ひらいた本文は説明の下に続く */
.rn-tl__more {
	margin: 0;
}
.rn-tl__more summary {
	display: flex;
	align-items: center;
	position: absolute;
	inset-block-start: 5.2cqw;
	inset-inline-end: 8.4cqw;
	block-size: 6.65cqw; /* 英字の行と同じ高さ＝上下の中心がそろう */
	inline-size: 6.18745vw;
	min-inline-size: 80px;
	max-inline-size: 123.749px;
	line-height: 0;
	cursor: pointer;
	list-style: none;
}
.rn-tl__more summary::-webkit-details-marker {
	display: none;
}
/* 下線がすっと引かれる — timeline_btn02 の read more と同じ振る舞い */
.rn-tl__more summary::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -4px;
	inline-size: 100%;
	block-size: 2px;
	background: #fbb03b;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform 0.3s;
}
.rn-tl__more summary:hover::after,
.rn-tl__more summary:focus-visible::after,
.rn-tl__more[open] summary::after {
	transform: scale(1, 1);
	transform-origin: left top;
}
.rn-tl__more .rn-tl__note {
	margin: 0;
	padding-block-start: 1.4em;
	font-size: 0.8125rem;
	font-size: max(0.6875rem, 3.8cqw); /* 本文なので、小さな画面でも読める下限を置く */
	line-height: 1.95;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.62);
}

@media screen and (max-width: 767px) {
	.rn-tl__more summary {
		inline-size: 10.4vw;
		min-inline-size: 0;
		max-inline-size: none;
	}
	/* 丸は小さな画面では 10px 固定（.timeline_02_set:after と同じ） */
	.rn-tl__en::before {
		inset-inline-end: -5px;
		inset-block-end: -5px;
		inline-size: 10px;
		block-size: 10px;
		background-size: 10px;
	}
}

/* ==========================================================================
   西田要諦百章 — 縦組みの語句が上下に流れる全画面
   色の付いた語句はそれぞれのページへのリンク。
   ========================================================================== */
#rn-quotes {
	position: relative;
	block-size: 100svh;
	background-color: #f2f1ee;
	color: var(--rn-ink);
	overflow: hidden;
}

/* 方眼紙のような下地 */
#rn-quotes::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(26, 26, 26, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(26, 26, 26, 0.055) 1px, transparent 1px);
	background-size: 2.25rem 2.25rem;
	pointer-events: none;
}

/* 見出しは画面のど真ん中。流れる語句の上に浮かせる */
.rn-quotes__head {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	text-align: center;
	pointer-events: none;
}

/* 語句に埋もれないよう、見出しの背後だけ紙色を濃くしておく */
.rn-quotes__head::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: min(30rem, 68vw);
	block-size: min(30rem, 68vw);
	background: radial-gradient(closest-side,
		#f2f1ee 0%,
		#f2f1ee 36%,
		rgba(242, 241, 238, 0.92) 54%,
		rgba(242, 241, 238, 0.5) 74%,
		rgba(242, 241, 238, 0) 100%);
}

.rn-quotes__head > * {
	position: relative;
}

.rn-quotes__head .rn-section-head__en {
	color: var(--rn-teal-deep);
}

.rn-quotes__title {
	margin: 0.7rem 0 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.5rem, 4.4vw, 2.75rem);
	letter-spacing: 0.24em;
	text-indent: 0.24em;
	line-height: 1.3;
	color: var(--rn-ink);
}


/* 見出しの下に置く「西田理一郎」。語句より少し大きく、押せる */
.rn-quotes__portrait {
	margin: 1.1rem 0 0;
	font-family: var(--rn-mincho);
	font-size: clamp(1rem, 2.4vw, 1.375rem);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}
.rn-quotes__portrait a {
	padding-block-end: 0.25em;
	border-block-end: 1px solid rgba(31, 95, 122, 0.4);
	color: var(--rn-ink);
	text-decoration: none;
	/* 見出し全体は触れないようにしてあるので、この一行だけ押せるようにする */
	pointer-events: auto;
	transition: color 0.4s ease, border-color 0.4s ease;
}
.rn-quotes__portrait a:hover,
.rn-quotes__portrait a:focus-visible {
	color: var(--rn-teal-deep);
	border-block-end-color: currentColor;
}

/* 列の並び。右から左へ読む向きに合わせて row-reverse で並べる */
.rn-quotes__field {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	gap: clamp(0.5rem, 1.4vw, 1.5rem);
	padding-inline: clamp(0.75rem, 3vw, 2.5rem);
	/* 語句の大きさの基準。--xl 〜 --s はこれの何倍か、で決める */
	--q: clamp(0.625rem, 0.82vw, 0.75rem);
}

/* 列そのものは横書きのまま。はみ出したぶんを隠す窓の役 */
.rn-quotes__col {
	flex: 1 1 0;
	min-inline-size: 0;
	overflow: hidden;
}

/* 中身は縦組み。flex の主軸（inline 軸）が天地方向になるので、
   語句が上から下へ数珠つなぎに並ぶ。 */
.rn-quotes__stream {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-feature-settings: "vkrn" 1, "vpal" 1;
	display: flex;
	flex-wrap: nowrap;
	gap: 2.6em;
	/* 縦組みでは inline-size が高さ。中身ぶんの長さを持たせる */
	inline-size: max-content;
	animation: rn-quotes-down var(--dur, 40s) linear infinite;
	animation-delay: var(--delay, 0s);
	will-change: transform;
}
.rn-quotes__col--up .rn-quotes__stream {
	animation-name: rn-quotes-up;
}

@keyframes rn-quotes-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}
@keyframes rn-quotes-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

/* 流れは止めない。カーソル（またはフォーカス）が当たった語句の
   列だけを止めて、その一文を読ませる */
.rn-quotes__stream:has(.rn-quotes__q:hover),
.rn-quotes__stream:has(.rn-quotes__q:focus-visible) {
	animation-play-state: paused;
}

.rn-quotes__q {
	position: relative;
	flex: none;
	font-family: var(--rn-mincho);
	font-size: var(--q);
	font-weight: 400;
	line-height: 1.85;
	letter-spacing: 0.04em;
	color: rgba(26, 26, 26, 0.82);
	transition: color 0.3s ease;
}

/* 新聞の紙面のように、大小の差で奥行きを出す。
   小さいものは薄く遠く、大きいものは濃く手前に見える */
.rn-quotes__q--s {
	color: rgba(26, 26, 26, 0.58);
}
.rn-quotes__q--m {
	font-size: calc(var(--q) * 1.45);
	color: rgba(26, 26, 26, 0.78);
}
.rn-quotes__q--l {
	font-size: calc(var(--q) * 2.1);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: rgba(26, 26, 26, 0.92);
}
.rn-quotes__q--xl {
	font-size: calc(var(--q) * 3);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--rn-ink);
}

/* 大きく組んだ語句には、段見出しのような細い罫を右に添える。
   行送りは詰めて、見出しらしく（列からはみ出さない太さにも効く） */
.rn-quotes__q--l,
.rn-quotes__q--xl {
	border-block-start: 1px solid rgba(26, 26, 26, 0.3);
	padding-block-start: 0.55em;
	line-height: 1.55;
}

/* 通し番号。字の始まり（縦組みでは上）に小さく横向きで置く */
.rn-quotes__q[data-no]::after {
	content: attr(data-no);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -1.9em;
	writing-mode: horizontal-tb;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.34em;
	letter-spacing: 0.18em;
	color: var(--rn-teal-deep);
	opacity: 0.85;
	pointer-events: none;
}

/* カーソルを当てた一文の右側を、赤ペンで上から下へなぞる。
   縦組みの中でも位置を狂わせたくないので、物理プロパティで置いている。 */
.rn-quotes__q::before {
	content: "";
	position: absolute;
	top: -0.2em;
	right: -0.4em;
	width: 2.5px;
	height: calc(100% + 0.4em);
	border-radius: 1.25px;
	/* 引き始めと引き終わりがわずかに細くなる、ペンらしい濃淡 */
	background: linear-gradient(to bottom,
		rgba(200, 56, 47, 0.55) 0%,
		#c8382f 12%,
		#c8382f 88%,
		rgba(200, 56, 47, 0.5) 100%);
	/* 手で引いた線らしく、ほんの少しだけ傾ける */
	transform: rotate(0.7deg) scaleY(0);
	transform-origin: top center;
	opacity: 0.88;
	transition: transform 0.55s cubic-bezier(0.33, 0, 0.15, 1);
	pointer-events: none;
}
.rn-quotes__q:hover::before,
.rn-quotes__q:focus-visible::before {
	transform: rotate(0.7deg) scaleY(1);
}

/* なぞられた一文は、少しだけ濃くする */
.rn-quotes__q:hover {
	color: var(--rn-ink);
}

/* リンクの語句は蛍光ペンを引いたように見せる */
.rn-quotes__q--link {
	color: var(--rn-ink);
	text-decoration: none;
	background-color: rgba(126, 178, 227, 0.55);
	box-shadow: 0 0 0 0.18em rgba(126, 178, 227, 0.55);
	transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
/* ご挨拶から移してきた七つの感性＋史。語録とは色を分ける */
.rn-quotes__q--sense {
	font-size: clamp(0.6875rem, 0.95vw, 0.875rem);
	letter-spacing: 0.12em;
	background-color: rgba(43, 122, 155, 0.22);
	box-shadow: 0 0 0 0.2em rgba(43, 122, 155, 0.22);
}

/* 大きく組んだ語句は、面で塗ると重いので淡く敷く */
.rn-quotes__q--l.rn-quotes__q--link,
.rn-quotes__q--xl.rn-quotes__q--link {
	background-color: rgba(126, 178, 227, 0.3);
	box-shadow: 0 0 0 0.08em rgba(126, 178, 227, 0.3);
}

.rn-quotes__q--link:hover,
.rn-quotes__q--link:focus-visible {
	background-color: var(--rn-teal);
	box-shadow: 0 0 0 0.18em var(--rn-teal);
	color: #fff;
	outline: none;
}

@media screen and (max-width: 781px) {
	/* 列が細くなりすぎるので本数を絞る */
	.rn-quotes__col:nth-child(n + 7) {
		display: none;
	}
	.rn-quotes__head::before {
		inline-size: min(22rem, 86vw);
		block-size: min(22rem, 86vw);
	}
	.rn-quotes__field {
		--q: 0.625rem;
	}
	/* 列が細いので、大きいものは少し控えめに */
	.rn-quotes__q--l {
		font-size: calc(var(--q) * 1.75);
	}
	.rn-quotes__q--xl {
		font-size: calc(var(--q) * 2.3);
	}
	.rn-quotes__stream {
		gap: 2.2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rn-quotes__stream {
		animation: none;
	}
	.rn-quotes__q::before {
		transition: none;
	}
}

/* ==========================================================================
   Creative Field — 写真と色のタイルを敷きつめた、動かないモザイク
   上の要諦百章が常に流れているので、ここは土台を固定して落ち着かせる。
   タイルの大きさは重要度の順。並びは grid-template-areas で決めていて、
   各タイルの style="grid-area:…" と対応している。
   ========================================================================== */
#rn-field {
	background-color: var(--sx-mist);
}

.rn-field__grid {
	display: grid;
	/* 7 マスを半分ずつに割った 14 列。最下段だけ半マスのタイル（寺社・VOA）を置く */
	grid-template-columns: repeat(14, minmax(0, 1fr));
	grid-template-rows: repeat(4, minmax(0, 1fr));
	grid-template-areas:
		"title  title  title   title   deep  deep   deep   deep   labo   labo   labo   labo   drop   drop"
		"defi   defi   rk      rk      deep  deep   deep   deep   pencil pencil pencil pencil salon  salon"
		"books  books  books   books   sora  sora   fuku   fuku   mai    mai    mai    mai    carta  carta"
		"art    art    rrbocj  rrbocj  kokubou kokubou jisha jaslea jaslea voa  talks  talks  series series";
	block-size: 100svh;
	min-block-size: 36rem;
}

.rn-field__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	min-inline-size: 0;
	min-block-size: 0;
	padding: clamp(0.75rem, 1.6vw, 1.5rem);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--bg, #2e3a2f);
	color: var(--rn-white);
	text-align: center;
}
a.rn-field__tile,
a.rn-field__tile:link,
a.rn-field__tile:visited,
a.rn-field__tile:hover {
	color: var(--rn-white);
	text-decoration: none;
}
/* 色面のタイルは地が淡いので、字は墨色で置く */
.rn-field__tile:not(.rn-field__tile--photo),
a.rn-field__tile:not(.rn-field__tile--photo):link,
a.rn-field__tile:not(.rn-field__tile--photo):visited,
a.rn-field__tile:not(.rn-field__tile--photo):hover {
	color: var(--sx-ink);
}
a.rn-field__tile:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -6px;
}
/* 写真の上の字は、淡い写真でも読めるよう影を足す */
.rn-field__tile--photo .rn-field__label {
	text-shadow: 0 1px 12px rgba(20, 28, 40, 0.55);
}

/* 写真タイル：モノクロ写真に色を重ねて、デュオトーンのように見せる */
.rn-field__tile--photo {
	background-color: var(--tint);
}
.rn-field__tile--photo > img,
.rn-field__tile--photo > video {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* 淡い神仙配色を重ねても白い字が読めるよう、写真は一段沈めておく */
	filter: grayscale(1) contrast(1.05) brightness(0.8);
	transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rn-field__tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--tint);
	mix-blend-mode: multiply;
	opacity: 0.95;
	transition: opacity 0.7s ease;
}
/* 字の後ろだけ、ほんのり沈めて読みやすくする */
.rn-field__tile--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(75% 70% at 50% 50%, rgba(20, 28, 40, 0.42), rgba(20, 28, 40, 0.08));
	pointer-events: none;
}

.rn-field__label {
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.rn-field__label em {
	font-family: var(--rn-gothic);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(0.75rem, 1.1vw, 1.0625rem);
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	line-height: 1.5;
	text-transform: uppercase;
	word-break: keep-all; /* 長い団体名は <wbr> の位置で折る */
	padding-block-end: 0.75em;
	/* 見出しの下に細い線。ふれると左右に伸びる */
	background: linear-gradient(currentColor, currentColor) center bottom / 64% 1px no-repeat;
	transition: background-size 0.6s ease;
}
.rn-field__label small {
	max-inline-size: 21em;
	text-wrap: balance;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.5625rem, 0.7vw, 0.6875rem);
	letter-spacing: 0.08em;
	line-height: 1.75;
	opacity: 0.85;
}

/* 半マスのタイル（寺社観光協会・VOA）。字間を詰めて、細い幅に収める */
.rn-field__tile--mini {
	padding-inline: clamp(0.4rem, 0.8vw, 0.75rem);
}
.rn-field__tile--mini .rn-field__label {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.rn-field__tile--mini .rn-field__label em {
	letter-spacing: 0.14em;
	text-indent: 0.14em;
}
.rn-field__tile--mini .rn-field__label small {
	letter-spacing: 0.04em;
}
.rn-field__tile--mini .rn-field__logo--ink.rn-field__logo--wide {
	max-inline-size: 88%;
}

/* 見出しタイル。Creative Field の一語だけを置く */
.rn-field__tile--title {
	align-items: flex-start;
	justify-content: flex-end;
	text-align: left;
	padding: clamp(1.25rem, 2.4vw, 2.25rem);
}
.rn-field__title {
	margin: 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(1rem, 1.7vw, 1.625rem);
	letter-spacing: 0.34em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--sx-ink);
}

/* ロゴ。写真の上では白（img）、淡い色面の上では墨色（白いロゴを型にして塗る） */
.rn-field__logo {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: min(78%, 15rem);
	max-block-size: clamp(3.25rem, 10vh, 6.25rem);
	filter: drop-shadow(0 1px 10px rgba(20, 28, 40, 0.4));
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.rn-field__logo--wide {
	max-block-size: clamp(1.5rem, 4.4vh, 2.6rem);
}
/* 濃い色のロゴ（RRBOCJ）は、淡い地にそのまま置く */
.rn-field__logo--plain {
	filter: none;
	max-block-size: clamp(1.75rem, 5vh, 3rem);
}
.rn-field__logo--ink {
	block-size: clamp(3.25rem, 10vh, 6.25rem);
	background-color: currentColor;
	filter: none;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.rn-field__logo--ink.rn-field__logo--wide {
	block-size: clamp(1.5rem, 4.4vh, 2.6rem);
}
.rn-field__logo--rk {
	block-size: clamp(1.75rem, 4.8vh, 2.75rem);
	opacity: 0.85;
}
a.rn-field__tile:hover .rn-field__logo,
a.rn-field__tile:focus-visible .rn-field__logo {
	transform: scale(1.04);
}

/* 人物が右に立つ写真は、ロゴを左に寄せて顔にかけない */
.rn-field__tile--left .rn-field__label {
	inline-size: 46%;
	margin-inline-end: auto;
}

/* 顔が真ん中に来る写真は、ロゴと説明を下端に置いて顔にかけない */
.rn-field__tile--foot {
	justify-content: flex-end;
}
.rn-field__tile--foot::after {
	background: linear-gradient(to top, rgba(20, 28, 40, 0.6), rgba(20, 28, 40, 0) 58%);
}

/* 原稿用紙の写真は明るいので、字の後ろの沈みを浅くする */
.rn-field__tile--paper > img {
	filter: grayscale(1) contrast(1.05) brightness(0.95);
}
.rn-field__tile--paper::after {
	background: linear-gradient(to top, rgba(20, 28, 40, 0.5), rgba(20, 28, 40, 0) 45%);
}
.rn-field__tile--paper .rn-field__label {
	margin-block-start: auto;
}

/* 数字だけで見せるタイル。100 は太い Bodoni で強く */
.rn-field__num {
	font-family: "Bodoni Moda", var(--rn-mincho);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(3rem, 6.2vw, 5.75rem);
	line-height: 0.9;
	letter-spacing: -0.01em;
}
.rn-field__cap {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.5625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	opacity: 0.8;
}

/* ふれたとき。土台は動かさず、色と線だけが応える */
.rn-field__tile--photo:hover > img,
.rn-field__tile--photo:focus-visible > img,
.rn-field__tile--photo:hover > video,
.rn-field__tile--photo:focus-visible > video {
	transform: scale(1.05);
}
.rn-field__tile--photo:hover::before,
.rn-field__tile--photo:focus-visible::before {
	opacity: 0.6;
}
a.rn-field__tile:hover .rn-field__label em,
a.rn-field__tile:focus-visible .rn-field__label em {
	background-size: 100% 1px;
}

@media screen and (max-width: 1023px) {
	.rn-field__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: clamp(9rem, 24vw, 14rem);
		grid-template-areas:
			"title  title   deep   deep"
			"labo   labo    deep   deep"
			"books  books   pencil pencil"
			"defi   rk      mai    mai"
			"salon  sora    art    art"
			"fuku   carta   drop   jaslea"
			"talks  talks   series series"
			"jisha  voa     rrbocj kokubou";
		block-size: auto;
		min-block-size: 0;
	}
}

@media screen and (max-width: 640px) {
	.rn-field__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* 1行目（Creative Field）だけは字の高さに合わせて低く、残りは 44vw */
		grid-template-rows: minmax(4.5rem, auto);
		grid-auto-rows: 44vw;
		grid-template-areas:
			"title  title"
			"deep   deep"
			"defi   rk"
			"pencil pencil"
			"books  books"
			"fuku   carta"
			"sora   drop"
			"talks  talks"
			"labo   labo"
			"salon  jisha"
			"art    art"
			"mai    mai"
			"jaslea voa"
			"kokubou rrbocj"
			"series series";
	}
	.rn-field__tile--title {
		padding: 1.25rem 1.25rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rn-field__tile--photo > img,
	.rn-field__tile--photo::before,
	.rn-field__label em,
	.rn-field__logo {
		transition: none;
	}
}

/* ==========================================================================
   Creative Field から入るページ — 印（ハンコ）の白い世界と同じ、
   白地に濃浅葱の、写真を置かないミニマルな組み
   ========================================================================== */
.rn-page--asagi #rn-sense-hero {
	min-block-size: auto;
	background-color: #ffffff;
	color: var(--rn-asagi);
	padding-block: clamp(4.5rem, 13vh, 7.5rem) clamp(2rem, 6vh, 3.5rem);
}
/* 写真の上に敷く暗い幕は要らない */
.rn-page--asagi #rn-sense-hero::after {
	content: none;
}
.rn-page--asagi .rn-sense-hero__title,
.rn-page--asagi .rn-sense-hero__title--en {
	color: var(--rn-asagi);
}
.rn-page--asagi .rn-sense-hero__title--logo span {
	display: block;
	inline-size: min(60vw, 20rem);
	margin-inline: auto;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.rn-page--asagi .rn-sense-hero__sub {
	color: rgba(0, 93, 125, 0.72);
}
.rn-page--asagi .rn-sense-hero__lead {
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	letter-spacing: 0.05em;
	line-height: 2.15;
	color: var(--rn-asagi-ink);
}

/* 扉のロゴの下に置く一点。白い紙の上なので、額縁だけで立たせる */
.rn-page--asagi .rn-sense-hero__art {
	margin: clamp(2rem, 5vh, 3.25rem) auto 0;
	inline-size: min(78vw, 22rem);
}
.rn-page--asagi .rn-sense-hero__art img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.rn-page--asagi #rn-doc {
	background-color: #ffffff;
	color: var(--rn-asagi-ink);
	padding-block-start: clamp(1.5rem, 4vh, 2.5rem);
}
.rn-page--asagi .rn-doc__block + .rn-doc__block,
.rn-page--asagi .rn-doc__lens-head,
.rn-page--asagi .rn-doc__night-no,
.rn-page--asagi .rn-doc__engage,
.rn-page--asagi .rn-doc__engage li {
	border-color: rgba(0, 93, 125, 0.2);
}
/* 見出し・数字・印は濃浅葱、本文はそれを沈めた色 */
.rn-page--asagi .rn-doc__title-ja,
.rn-page--asagi .rn-doc__motto,
.rn-page--asagi .rn-doc__aphorism,
.rn-page--asagi .rn-doc__verse,
.rn-page--asagi .rn-doc__lens-ja,
.rn-page--asagi .rn-doc__night-theme,
.rn-page--asagi .rn-doc__night-title,
.rn-page--asagi .rn-doc__domain-en,
.rn-page--asagi .rn-doc__rule-head,
.rn-page--asagi .rn-doc__engage-ja,
.rn-page--asagi .rn-doc__sign,
.rn-page--asagi .rn-doc__epoch {
	color: var(--rn-asagi);
}
.rn-page--asagi .rn-doc__ja,
.rn-page--asagi .rn-doc__domain-ja {
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 2.2;
	color: var(--rn-asagi-ink);
}
.rn-page--asagi .rn-doc__en,
.rn-page--asagi .rn-doc__motto-en,
.rn-page--asagi .rn-doc__aphorism-en,
.rn-page--asagi .rn-doc__night-fr,
.rn-page--asagi .rn-doc__engage-en,
.rn-page--asagi .rn-doc__sign-en,
.rn-page--asagi .rn-doc__figure figcaption {
	color: rgba(0, 69, 93, 0.6);
}
.rn-page--asagi .rn-doc__title-en,
.rn-page--asagi .rn-doc__lens-en,
.rn-page--asagi .rn-doc__numeral,
.rn-page--asagi .rn-doc__rule-no,
.rn-page--asagi .rn-doc__inout dt,
.rn-page--asagi .rn-doc__epoch-arrow {
	color: rgba(0, 93, 125, 0.75);
}
.rn-page--asagi .rn-doc__night-close {
	border-inline-start-color: rgba(0, 93, 125, 0.4);
	color: var(--rn-asagi);
}
.rn-page--asagi .rn-doc__link a {
	color: var(--rn-asagi);
	border-block-end-color: rgba(0, 93, 125, 0.4);
}
/* 資料写真も白地になじむ濃度に */
.rn-page--asagi .rn-doc__figure img {
	filter: grayscale(1) contrast(1.02) brightness(1.04);
}

/* 下の道しるべ（Creative Field へ戻る） */
.rn-page--asagi .rn-sense-nav {
	border-block-start-color: rgba(0, 93, 125, 0.2);
}
.rn-page--asagi .rn-sense-nav .rn-sense-nav__kanji {
	color: var(--rn-asagi);
}
.rn-page--asagi .rn-sense-nav .rn-sense-nav__cap {
	color: rgba(0, 93, 125, 0.6);
}

/* ==========================================================================
   読みもののページ共通の組み（HIGH-END MARKETING LABO／LE DÉFI R）
   和文を主に、英文や仏文を小さく添える
   ========================================================================== */
#rn-doc {
	background-color: var(--rn-paper);
	color: var(--rn-ink);
	padding-block: clamp(3.5rem, 9vh, 6rem);
	padding-inline: var(--rn-gutter);
}

.rn-doc__inner {
	max-inline-size: 56rem;
	margin-inline: auto;
}

.rn-doc__block + .rn-doc__block {
	margin-block-start: clamp(2.75rem, 7vh, 4.5rem);
	padding-block-start: clamp(2rem, 5vh, 3rem);
	border-block-start: 1px solid rgba(26, 26, 26, 0.14);
}

/* 章の見出し。和文の横に、小さく英文を添える */
.rn-doc__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em 1.2em;
	margin: 0 0 1.6em;
}
.rn-doc__title-ja {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.0625rem, 1.9vw, 1.4375rem);
	letter-spacing: 0.2em;
}
.rn-doc__title-en {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--rn-teal-deep);
}

/* 綱領のひとこと */
.rn-doc__motto {
	margin: 0;
	font-family: var(--rn-mincho);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.6vw, 1.875rem);
	letter-spacing: 0.12em;
	line-height: 1.6;
}
.rn-doc__motto-en {
	margin: 0.7em 0 1.8em;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
	letter-spacing: 0.1em;
	color: rgba(26, 26, 26, 0.5);
}

/* 本文。和文が主、英文は一段落として添える */
.rn-doc__ja {
	margin: 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
	line-height: 2.05;
	letter-spacing: 0.04em;
	text-align: justify;
}
.rn-doc__en {
	margin: 0.7em 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.6875rem, 0.85vw, 0.75rem);
	line-height: 1.95;
	letter-spacing: 0.05em;
	color: rgba(26, 26, 26, 0.5);
	text-align: justify;
}
.rn-doc__ja + .rn-doc__ja {
	margin-block-start: 1em;
}

/* IN / OUT */
.rn-doc__inout {
	display: grid;
	gap: clamp(1.25rem, 3vh, 1.75rem);
	margin: 1.6em 0 0;
}
.rn-doc__inout dt {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.32em;
	color: var(--rn-teal-deep);
}
.rn-doc__inout dd {
	margin: 0.5em 0 0;
}

.rn-doc__aphorism {
	margin: 1.8em 0 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
	letter-spacing: 0.1em;
	line-height: 1.9;
}
.rn-doc__aphorism-en {
	margin: 0.6em 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.6875rem, 0.85vw, 0.75rem);
	letter-spacing: 0.05em;
	color: rgba(26, 26, 26, 0.5);
}

/* 五つのレンズ */
.rn-doc__lenses {
	margin: 1.8em 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(1.5rem, 3.5vh, 2.25rem);
}
.rn-doc__lens-head {
	display: flex;
	align-items: baseline;
	gap: 0.9em;
	margin: 0 0 0.6em;
	padding-block-end: 0.6em;
	border-block-end: 1px solid rgba(26, 26, 26, 0.14);
}
.rn-doc__lens-ja {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	letter-spacing: 0.18em;
}
.rn-doc__lens-en {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--rn-teal-deep);
}

/* 業務領域 Ⅰ〜Ⅷ */
.rn-doc__domains {
	margin: 1.8em 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(1.75rem, 4vh, 2.5rem);
}
.rn-doc__domains li {
	display: grid;
	grid-template-columns: 3em minmax(0, 1fr);
	gap: 0 clamp(0.75rem, 1.6vw, 1.5rem);
}
/* 番号を振らない一覧（art.Bound）は、1列で広く使う */
.rn-doc__domains--plain li {
	grid-template-columns: minmax(0, 1fr);
}

.rn-doc__numeral {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	letter-spacing: 0.06em;
	color: var(--rn-teal-deep);
}
.rn-doc__domain-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3em 0.9em;
	margin: 0 0 0.7em;
}
.rn-doc__domain-en {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.75rem, 1.1vw, 0.9375rem);
	letter-spacing: 0.26em;
	text-transform: uppercase;
}
.rn-doc__domain-ja {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.8125rem, 1.15vw, 0.9375rem);
	letter-spacing: 0.16em;
	color: rgba(26, 26, 26, 0.7);
}

/* 一夜の作法（LE DÉFI R） */
.rn-doc__rules {
	margin: 1.8em 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(1.25rem, 3vh, 1.75rem);
}
.rn-doc__rules li {
	display: grid;
	grid-template-columns: 2.2em minmax(0, 1fr);
	gap: 0 clamp(0.5rem, 1.2vw, 1rem);
}
.rn-doc__rule-no {
	font-family: var(--rn-mincho);
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	letter-spacing: 0.1em;
	color: var(--rn-teal-deep);
}
.rn-doc__rule-head {
	margin: 0 0 0.5em;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
	letter-spacing: 0.14em;
}

/* これまでの夜 */
.rn-doc__nights {
	margin: 1.8em 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	/* 一夜ずつ、ひと呼吸おいて読めるように間を広めに */
	gap: clamp(4rem, 10vh, 6rem);
}
.rn-doc__night-no {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em 1.1em;
	margin: 0 0 0.7em;
	padding-block-end: 0.6em;
	border-block-end: 1px solid rgba(26, 26, 26, 0.14);
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.28em;
	color: var(--rn-teal-deep);
}
.rn-doc__night-theme {
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
	letter-spacing: 0.14em;
	color: var(--rn-ink);
}
.rn-doc__night-title {
	margin: 0;
	font-family: var(--rn-mincho);
	font-weight: 500;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	letter-spacing: 0.1em;
	line-height: 1.6;
}
.rn-doc__night-fr {
	margin: 0.4em 0 1em;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.6875rem, 0.85vw, 0.75rem);
	letter-spacing: 0.12em;
	color: rgba(26, 26, 26, 0.5);
}
/* その夜の結び。本文より一段強く、すこし右に寄せる */
.rn-doc__night-close {
	margin: 0.9em 0 0;
	padding-inline-start: 1.2em;
	border-inline-start: 1px solid rgba(31, 95, 122, 0.4);
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	letter-spacing: 0.1em;
	line-height: 1.85;
	color: var(--rn-teal-deep);
}

/* 扉にロゴを置く（art.Bound） */
.rn-sense-hero__title--logo {
	margin: 0;
	line-height: 0;
}
.rn-sense-hero__title--logo img {
	inline-size: min(60vw, 20rem);
	block-size: auto;
}

/* 紹介文の横に線画を置く（art.Bound） */
.rn-doc__block--intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(6rem, 14vw, 10rem);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}
.rn-doc__portrait {
	margin: 0;
}
/* 線画は濃浅葱で塗って、白い世界の色数に収める */
.rn-doc__portrait-ink {
	display: block;
	inline-size: 100%;
	background-color: var(--rn-asagi);
	opacity: 0.8;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.rn-doc__portrait img {
	inline-size: 100%;
	block-size: auto;
	/* 線画は紅なので、地色の紙に馴染む濃さに落とす */
	opacity: 0.85;
}

/* 資料の写真 */
.rn-doc__figure {
	margin: 1.8em 0 0;
}
.rn-doc__figure img {
	/* 元が小さい資料写真なので、拡大はせずに実寸まで */
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	filter: grayscale(1) contrast(1.03);
}
.rn-doc__figure figcaption {
	margin-block-start: 0.7em;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.6875rem, 0.85vw, 0.75rem);
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: rgba(26, 26, 26, 0.55);
}

/* 外のサイトへ渡すリンク */
.rn-doc__link {
	margin: 2em 0 0;
}
.rn-doc__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding-block-end: 0.4em;
	border-block-end: 1px solid rgba(31, 95, 122, 0.4);
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.75rem, 1vw, 0.875rem);
	letter-spacing: 0.16em;
	color: var(--rn-teal-deep);
	text-decoration: none;
	transition: border-color 0.4s ease, opacity 0.4s ease;
}
.rn-doc__link a::after {
	content: "↗";
	font-size: 0.9em;
}
.rn-doc__link a:hover,
.rn-doc__link a:focus-visible {
	border-block-end-color: currentColor;
	opacity: 0.75;
}

/* 短い言葉だけのページ（SALON DE R）。中央に据えて、一行ずつ間を取る */
.rn-doc__inner--narrow {
	max-inline-size: 46rem;
}
.rn-doc__block--verse {
	text-align: center;
}
.rn-doc__block--verse .rn-doc__ja {
	text-align: center;
}
.rn-doc__verse {
	margin: 0;
	/* 行末に1〜2字だけ残さないよう、行の長さを揃えて折る */
	text-wrap: balance;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1rem, 1.8vw, 1.4375rem);
	letter-spacing: 0.12em;
	line-height: 2.1;
}
.rn-doc__verse + .rn-doc__verse {
	margin-block-start: 1.5em;
}
.rn-doc__block--verse .rn-doc__sign {
	text-align: center;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
}

/* 1925 ⇄ 2125（RK PROJECT の結び） */
.rn-doc__block--epoch {
	text-align: center;
}
.rn-doc__epoch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 4vw, 2.75rem);
	margin: 0 0 1.4em;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(1.75rem, 5vw, 3.25rem);
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	line-height: 1.2;
}
.rn-doc__epoch-arrow {
	font-size: 0.5em;
	letter-spacing: 0;
	text-indent: 0;
	color: var(--rn-teal-deep);
}
.rn-doc__block--epoch .rn-doc__sign {
	margin-block-start: 0;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-align: center;
}
.rn-doc__block--epoch .rn-doc__sign-en {
	text-align: center;
}

/* 主宰の署名 */
.rn-doc__sign {
	margin: 2em 0 0;
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
	letter-spacing: 0.16em;
	text-align: right;
}
.rn-doc__sign-en {
	margin: 0.6em 0 0;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: rgba(26, 26, 26, 0.5);
	text-align: right;
}

/* 契約形態 */
.rn-doc__engage {
	margin: 1.6em 0 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid rgba(26, 26, 26, 0.14);
}
.rn-doc__engage li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3em 1.5em;
	padding-block: clamp(0.6rem, 1.5vh, 0.95rem);
	border-block-end: 1px solid rgba(26, 26, 26, 0.14);
}
.rn-doc__engage-ja {
	font-family: var(--rn-mincho);
	font-weight: 400;
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	letter-spacing: 0.12em;
}
.rn-doc__engage-en {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, 0.5);
}

@media screen and (max-width: 781px) {
	.rn-doc__domains li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.4em;
	}
	.rn-doc__rules li {
		grid-template-columns: 1.6em minmax(0, 1fr);
	}
	.rn-doc__block--intro {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-doc__portrait {
		justify-self: center;
		inline-size: 45%;
	}
	.rn-doc__night-close {
		padding-inline-start: 0.9em;
	}
	.rn-doc__ja,
	.rn-doc__en {
		text-align: left;
	}
}

/* ==========================================================================
   フッター（既存 style_pcsp.css の指定を上書き）
   ========================================================================== */
#footer {
	/* 考筆話史の面と同じ、沈んだ紺 */
	background-color: var(--rn-night);
	padding-block: clamp(2rem, 5vh, 3rem);
	padding-inline: var(--rn-gutter);
	text-align: center;
}

/* 手書き署名ロゴ */
.ftr_sign {
	margin: 0 auto clamp(1rem, 2.6vh, 1.5rem);
	inline-size: min(30%, 13rem);
}
.ftr_sign img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.ftr_sns_ul {
	gap: clamp(1.625rem, 2.8vw, 2.5rem);
	margin-block-end: clamp(0.9rem, 2.4vh, 1.4rem);
}

.ftr_sns_ul li {
	inline-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.ftr_sns_ul .desvg svg,
.ftr_sns_ul svg {
	fill: var(--rn-white);
	transition: opacity 0.4s ease;
}
.ftr_sns_ul a:hover svg {
	opacity: 0.6;
}

.copyrights {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.62);
}

@media screen and (max-width: 576px) {
	#footer {
		padding-block: clamp(1.75rem, 4.5vh, 2.5rem);
	}
	.ftr_sign {
		inline-size: 44%;
	}
	.ftr_sns_ul li {
		inline-size: 1.375rem;
	}
	.copyrights {
		font-size: 0.6875rem;
	}
}

/* ==========================================================================
   ギャラリーページ
   ========================================================================== */
#rn-gallery {
	background-color: var(--rn-dark);
	color: var(--rn-white);
	padding-block: clamp(6rem, 16vh, 11rem);
	padding-inline: var(--rn-gutter);
}

.rn-gallery__inner {
	max-width: 78rem;
	margin-inline: auto;
}

.rn-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(0.5rem, 1.2vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rn-gallery__item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background-color: #333;
}

.rn-gallery__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.rn-gallery__item:hover img {
	transform: scale(1.06);
}

/* 縦位置の写真が混ざる場合の変則グリッド */
.rn-gallery__item--wide {
	grid-column: span 2;
	aspect-ratio: 3 / 2;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
/* 幅が足りない環境では行を長くして列数を減らす（横スクロール回避） */
@media screen and (max-width: 1023px) {
	/* 幅が狭いと本文と写真が近づくので、溶かす幅を広めに取る */
	.rn-senses__bg::after {
		background: linear-gradient(to right,
			var(--rn-paper) 0%,
			rgba(238, 237, 234, 0.72) 14%,
			rgba(238, 237, 234, 0.28) 30%,
			rgba(238, 237, 234, 0) 48%);
	}
}

@media screen and (max-width: 781px) {
	/* スマホでは縦組みだと1行が長くなりすぎるため、
	   本文のみ横組みに切り替えて可読性を優先する */
	/* スマホでは1画面に収める前提を外し、素直に流し込む */
	/* 1画面に収まるよう、字と行間を少し詰めて画面の中ほどに置く */
	#rn-essay {
		display: flex;
		align-items: center;
		min-block-size: 100svh;
		padding-block: clamp(2.25rem, 6svh, 3.5rem);
	}
	#rn-essay .rn-essay__inner {
		display: block;
	}
	#rn-essay .rn-essay__body {
		writing-mode: horizontal-tb;
		inline-size: auto;
		font-size: 0.8125rem;
		line-height: 1.85;
		letter-spacing: 0.04em;
	}
	#rn-essay .rn-essay__body p + p {
		margin-block-start: 0.9em;
	}
	/* 行末に「質。」「情感。」のように1〜2字だけ残らないよう、
	   文末のひと塊は切らずにまとめて次の行へ送る */
	.rn-nb {
		white-space: nowrap;
	}
	/* 狭い画面では番号・見出しと解説を縦に積む */
	.rn-shi__item {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-shi__desc,
	.rn-shi__body {
		grid-column: 1;
	}
	.rn-shi__desc {
		grid-row: auto;
		margin-block-start: 0.75rem;
	}
	.rn-works__poster {
		--u: min(78vw, 42svh);
		display: block;
	}
	.rn-works__lists--two {
		grid-template-columns: minmax(0, 1fr);
	}
	/* どの紙面も、円は上・見出しは円の下・内訳は下端に。
	   紙面の高さは内訳の長さで変わるので、位置は % ではなく円の大きさ（--u）から決める */
	.rn-works__poster .rn-works__circle--a {
		inset-block-start: calc(var(--u) * 0.2);
		inset-inline-start: 4%;
		inset-inline-end: auto;
	}
	.rn-works__poster .rn-works__disc {
		inset-block-start: calc(var(--u) * 0.72);
		inset-inline-start: auto;
		inset-inline-end: 6%;
	}
	.rn-works__poster .rn-works__title {
		/* 円の丸みからはみ出さないよう、少し上げて細く */
		inset-block-start: calc(var(--u) * 0.56);
		inset-inline-start: calc(4% + var(--u) * 0.1);
		inset-inline-end: auto;
		max-inline-size: calc(var(--u) * 0.72);
		text-align: left;
	}
	/* 1枚目は顔が円の上寄りにあるので、見出しは円の下のほう（組んだ手のあたり）へ下げて顔にかけない */
	.rn-works__poster--one .rn-works__title {
		inset-block-start: calc(var(--u) * 0.86);
	}
	/* 内訳は円に重ねず、下に流す */
	.rn-works__poster .rn-works__side {
		position: static;
		margin-block-start: calc(var(--u) * 1.3);
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: flex-end;
	}
	.rn-works__poster .rn-works__lists {
		text-align: left;
	}
}
/* 1列になるスマホでは、横位置の写真は横長の枠のまま（縦に切り詰めると人物が切れる） */
@media screen and (max-width: 560px) {
	.rn-gallery__item--wide {
		grid-column: span 1;
		aspect-ratio: 3 / 2;
	}
}

/* アニメーションを控えたい設定の利用者には動きを止める */
@media (prefers-reduced-motion: reduce) {
	.rn-hero__name,
	.rn-hero__tagline {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.rn-hero__scroll {
		animation: none;
		opacity: 0.55;
	}
	.rn-gallery__item img {
		transition: none;
	}
}

/* ==========================================================================
   LE DÉFI R — 扉は会の正式ロゴ（臙脂）をそのまま置く。
   これまでの夜の下に、音つきの映像を2本（押すと再生）
   ========================================================================== */
.rn-sense-hero__title--defi img {
	inline-size: min(78vw, 26rem);
}
.rn-defi-films {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
	margin-block: clamp(5.5rem, 13vh, 8rem) 0; /* 第五夜との間は、夜どうしより一段広く空けて区切る */
}
.rn-defi-films + .rn-photo-grid {
	margin-block-start: clamp(2.5rem, 6vh, 3.5rem);
}
.rn-defi-film {
	margin: 0;
}
.rn-defi-film video {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	background-color: #111;
}
.rn-defi-film figcaption {
	margin-block-start: 0.6rem;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	line-height: 1.7;
	opacity: 0.8;
}
@media screen and (max-width: 640px) {
	.rn-defi-films {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* LE DÉFI R：その夜の写真を一枚、本文の右に添える（第一夜《暗闇の饗宴》）。
   スマホでは題のすぐ下に、横幅いっぱいで */
.rn-doc__night--figure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
	align-content: start;
}
.rn-doc__night--figure > * {
	grid-column: 1;
}
.rn-doc__night--figure > .rn-doc__night-no {
	grid-column: 1 / -1;
}
.rn-doc__night--figure > .rn-doc__night-figure {
	grid-column: 2;
	grid-row: 2 / span 5;
	align-self: start;
	margin: 0.3em 0 0;
}
.rn-doc__night-figure .rn-photo__btn img {
	aspect-ratio: 4 / 3;
}
@media screen and (max-width: 767px) {
	.rn-doc__night--figure {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-doc__night--figure > .rn-doc__night-figure {
		grid-column: 1;
		grid-row: auto;
		margin: 0.2em 0 1.1em;
	}
}
/* 縦長の写真を添える夜（第三夜）は、枠を細く縦長に */
.rn-doc__night--portrait {
	grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
}
.rn-doc__night--portrait .rn-doc__night-figure .rn-photo__btn img {
	aspect-ratio: 4 / 5;
	object-position: 50% 30%;
}
@media screen and (max-width: 767px) {
	.rn-doc__night--portrait {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-doc__night--portrait .rn-doc__night-figure {
		inline-size: min(100%, 20rem);
	}
}

/* 筆の扉：万年筆で書く手元の写真（横長 1584×672）。
   ペン先は左寄り（横 27%・縦 64% あたり）。縦長の画面で切り詰めても、ペン先が枠に残るように左へ寄せる */
.rn-sense-hero__bg--pen {
	object-position: 24% 62%;
}

/* 話の扉：口もととマイクの写真（横長 1584×672）。
   縦長の画面で切り詰めるときは、唇とマイクのあいだ（横 65% あたり）が中央に来るように右へ寄せる */
.rn-sense-hero__bg--mic {
	object-position: 70% 50%;
}

/* 史の扉：壁に描かれた年表の写真（横長 1584×672）。年号の帯は左〜中央（横 5〜60%、縦 55% あたり）、右は無地の壁。
   縦長の画面では年号の帯が残るように左へ寄せる。写真の文字は読ませず、気配だけ残すよう書き出し時に軽くぼかしている */

/* ==========================================================================
   RIICHIRO MAI（天空の棚田）— 白い世界のページ。扉の下に音つきの映像を大きく一本
   ========================================================================== */
.rn-mai-film {
	margin: 0 0 clamp(3rem, 8vh, 5rem);
}
.rn-mai-film video {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	background-color: #111;
}

/* ラボのサービス：見出しから別ページ（FUKUMIMI）へ。色は見出しのまま、細い下線で押せることを伝える */
.rn-doc__domain-en a,
.rn-doc__domain-en a:link,
.rn-doc__domain-en a:visited {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid currentColor;
	padding-block-end: 0.1em;
}
.rn-doc__domain-en a:hover,
.rn-doc__domain-en a:focus-visible {
	opacity: 0.7;
}

/* 副題（― 仏語・英語の行）のない夜は、題のすぐ下に本文が来るので少し空ける */
.rn-doc__night-title + .rn-doc__ja {
	margin-block-start: 0.8em;
}

/* ハイエンド・マーケティング・ラボのメイン画像（The Elite’s Sanctuary）。本文より一回り広く */
.rn-labo-key {
	max-inline-size: 72rem;
	margin: 0 auto clamp(3rem, 8vh, 5rem);
}
.rn-labo-key img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* サロンドアール：細い本文の幅に合わせて、写真は2列で大きめに */
.rn-photo-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block: clamp(2.5rem, 6vh, 4rem);
}

/* 筆・取材：誌面の切り抜きを小さく添える（押すと拡大）。一覧の行の中で次の行に */
.rn-sense-body__clip {
	flex-basis: 100%;
	margin-block-start: 0.6em;
}
.rn-sense-body__clip .rn-photo__btn {
	inline-size: clamp(6.5rem, 12vw, 9rem);
}
.rn-sense-body__clip .rn-photo__btn img {
	aspect-ratio: auto;
	object-fit: contain;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.rn-sense-body__works .rn-sense-body__clip a,
.rn-sense-body__clip .rn-photo__btn {
	border-block-end: 0;
}

/* サロンドアール：葉巻を巻く映像。縦（9:16）と横（16:9）を同じ高さで横に並べる */
.rn-salon-films {
	display: grid;
	grid-template-columns: minmax(0, 0.5625fr) minmax(0, 1.7778fr);
	gap: 0.625rem;
	align-items: start;
	margin-block: clamp(2.5rem, 6vh, 4rem) 0;
}
.rn-salon-films video {
	aspect-ratio: auto;
}
@media screen and (max-width: 640px) {
	.rn-salon-films {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-salon-films .rn-defi-film:first-child {
		inline-size: min(100%, 18rem);
		margin-inline: auto;
	}
}
/* 2列の写真の数が奇数のとき、最後の一枚は横いっぱいに（横長の写真を置く） */
.rn-photo-grid--2 li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.rn-photo-grid--2 li:last-child:nth-child(odd) .rn-photo__btn img {
	aspect-ratio: 3 / 2;
}

/* 夜に添える映像（第七夜《白トリュフ狩り》） */
.rn-doc__night-figure video {
	display: block;
	inline-size: 100%;
	block-size: auto;
	background-color: #111;
}

/* ローディングの幕。真っ黒ではなく 85% の黒（K85 相当）に */
#loading::before {
	background-color: #262626;
}

/* Creative Field の見出しタイルだけは、夜の紺で沈めて白抜きに。周りの淡い色面から一枚浮かせる */
.rn-field__tile--title .rn-field__title {
	color: #ffffff;
}

/* SALON DE R のロゴ。葉巻の先（左端、横 1.85%・縦 53.9%）から煙が立ちのぼる */
.rn-salon-logo,
.rn-page--asagi .rn-sense-hero__title--logo .rn-salon-logo {
	position: relative;
	display: block;
	margin-inline: auto;
	background: none;
	-webkit-mask-image: none;
	mask-image: none;
}
.rn-field__label .rn-salon-logo {
	inline-size: fit-content;
}
.rn-smoke,
.rn-page--asagi .rn-sense-hero__title--logo .rn-smoke {
	position: absolute;
	inset-inline-start: -5%;
	inset-block-end: 46%;
	display: block;
	inline-size: 16%;
	block-size: 56%;
	margin: 0;
	background: none;
	-webkit-mask-image: none;
	mask-image: none;
	pointer-events: none;
}
.rn-smoke i {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	inline-size: 46%;
	aspect-ratio: 3 / 5;
	border-radius: 50%;
	background-color: currentColor;
	filter: blur(2px);
	opacity: 0;
	animation: rn-smoke 4.5s ease-out infinite;
}
.rn-smoke i:nth-child(2) { animation-delay: 1.1s; }
.rn-smoke i:nth-child(3) { animation-delay: 2.2s; }
.rn-smoke i:nth-child(4) { animation-delay: 3.3s; }
.rn-sense-hero__title--logo .rn-smoke i {
	filter: blur(6px);
}
@keyframes rn-smoke {
	0%   { transform: translate(-50%, 0) scale(0.35); opacity: 0; }
	12%  { opacity: 0.6; }
	45%  { transform: translate(-15%, -95%) scale(1.05) rotate(14deg); opacity: 0.38; }
	75%  { transform: translate(-70%, -150%) scale(1.4) rotate(-6deg); opacity: 0.18; }
	100% { transform: translate(-40%, -200%) scale(1.8) rotate(8deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rn-smoke i { animation: none; }
}

/* LE DÉFI R：夜の題の横に添える補足（第一夜の「ダークダイニングレストラン」） */
.rn-doc__night-note {
	font-family: var(--rn-gothic);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	opacity: 0.75;
}

/* Pencil & Prompt：映像の制作例は横いっぱいに、16:9 で大きく */
.rn-pp-work--feature {
	grid-column: 1 / -1;
}
.rn-pp-work__fig--video {
	aspect-ratio: 16 / 9;
	background-color: #111;
}
.rn-pp-work__fig--video video {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* ==========================================================================
   スマホ・タブレットで写真の切り抜き位置を変える。
   img の style に --sp（例 --sp:86% 50%）を書いておくと、狭い画面ではその位置で切り抜く。
   扉の背景（横長の写真を縦長の画面に敷く）はタブレットから、ほかはスマホだけ。
   ========================================================================== */
@media screen and (max-width: 1023px) {
	.rn-sense-hero__bg[style*="--sp"] {
		object-position: var(--sp) !important;
	}
}
@media screen and (max-width: 640px) {
	img[style*="--sp"],
	video[style*="--sp"] {
		object-position: var(--sp) !important;
	}
}

/* ==========================================================================
   扉のリード。行ごとに span で区切る（PC では <br> と同じ見え方）
   ========================================================================== */
.rn-lead-line {
	display: block;
}
.rn-lead-line--gap {
	margin-block-start: 1lh;
}

/* ==========================================================================
   スマホの改行を整える（PC は変えない）
   ・文章は最後の行が1〜3字だけにならないように（text-wrap: pretty）
   ・日本語は文節の切れ目で折る（word-break: auto-phrase。未対応のブラウザは従来どおり）
   ・見出しや短い一行ものは、行の長さをそろえる（text-wrap: balance）
   ========================================================================== */
@media screen and (max-width: 640px) {
	#wrapper p,
	#wrapper li,
	#wrapper dd,
	#wrapper figcaption,
	#wrapper small,
	#wrapper blockquote {
		text-wrap: pretty;
		word-break: auto-phrase;
		line-break: strict;
	}
	#wrapper h1,
	#wrapper h2,
	#wrapper h3,
	.rn-lead-line,
	.rn-doc__motto,
	.rn-doc__aphorism,
	.rn-doc__night-close,
	.rn-doc__night-no,
	.rn-pp-work__note,
	.rn-sense-hero__sub {
		text-wrap: balance;
		word-break: auto-phrase;
	}
}
@media screen and (max-width: 640px) {
	/* プレジデント：「すべての記事を見る」と添え書きを上下に。ボタンの中で語を割らない */
	.rn-pres-more a {
		flex-direction: column;
		align-items: center;
		gap: 0.35em;
		text-align: center;
	}
	/* Pencil & Prompt：2列の題は、長いカタカナ語が一行に収まるよう字間を詰める */
	.rn-pp-work__title {
		font-size: 0.8125rem;
		letter-spacing: 0.02em;
	}
	/* RK の年号（1925 ⇄ 2125）は一行のまま */
	.rn-doc__epoch {
		flex-wrap: nowrap;
		gap: 0.8rem;
		font-size: 1.5rem;
		letter-spacing: 0.12em;
	}
}

/* ==========================================================================
   講演／メディア（talks/）— 白い世界の組み。筆のオンラインメディア・取材と同じ一覧
   ========================================================================== */
.rn-media-list {
	margin: 1.4em 0 0;
	padding: 0;
	list-style: none;
}
.rn-media-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.9em;
	padding-block: 0.85em;
	border-block-end: 1px solid rgba(0, 93, 125, 0.16);
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	letter-spacing: 0.04em;
	line-height: 1.7;
	color: var(--rn-asagi-ink);
}
.rn-media-list small {
	font-family: var(--rn-gothic);
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: rgba(0, 93, 125, 0.7);
}
.rn-media-list a,
.rn-media-more a {
	color: var(--rn-asagi);
	text-decoration: none;
	border-block-end: 1px solid rgba(0, 93, 125, 0.35);
	padding-block-end: 0.1em;
	transition: border-color 0.3s ease, opacity 0.3s ease;
}
.rn-media-list a:hover,
.rn-media-list a:focus-visible,
.rn-media-more a:hover,
.rn-media-more a:focus-visible {
	border-block-end-color: currentColor;
	opacity: 0.75;
}
/* 取材の後ろに、少し離して置くブログ */
.rn-media-list li.rn-media-list__aside {
	margin-block-start: 1.5rem;
	border-block-start: 1px solid rgba(0, 93, 125, 0.16);
	font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
}
.rn-media-film {
	position: relative;
	margin: 1.4em 0 0;
	aspect-ratio: 16 / 9;
	background-color: #111;
}
.rn-media-film iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}
.rn-media-more {
	margin: 1.2em 0 0;
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	letter-spacing: 0.06em;
}
.rn-media-more a::after {
	content: " →";
}

/* 筆・連載：一つの媒体の配下に複数の企画（PEAKLOUNGE）。媒体名は一度だけ、企画は下に小さく並べる */
.rn-sense-body__works .rn-sense-body__sublist {
	flex-basis: 100%;
	margin: 0.3em 0 0;
	padding: 0;
	list-style: none;
}
.rn-sense-body__works .rn-sense-body__sublist li {
	display: block;
	position: relative;
	padding: 0.25em 0 0.25em 1.1em;
	border: 0;
	font-family: var(--rn-gothic);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
}
.rn-sense-body__works .rn-sense-body__sublist li::before {
	content: "・";
	position: absolute;
	inset-inline-start: 0;
}

/* お問い合わせ：迷惑メール対策の見えない欄。画面の外に置き、人には見せない */
.rn-hp {
	position: absolute;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* SALON DE R のロゴ：大きさを外枠で決め、中のロゴは枠いっぱいに。
   （中身の幅に合わせる fit-content と中のロゴの % 指定が循環して、iPhone の Safari では幅 0 になり消えていた） */
.rn-field__label .rn-salon-logo {
	inline-size: calc(clamp(3.25rem, 10vh, 6.25rem) * 433 / 400);
	max-inline-size: 78%;
}
.rn-field__label .rn-salon-logo .rn-field__logo {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: auto;
	aspect-ratio: 433 / 400;
}
.rn-page--asagi .rn-sense-hero__title--logo .rn-salon-logo {
	inline-size: min(60vw, 20rem);
}
.rn-page--asagi .rn-sense-hero__title--logo .rn-salon-logo > span[role="img"] {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 433 / 400;
}

/* ==========================================================================
   史（Time Line）の扉：写真を置かない静かな扉。
   下の Mind Timeline と同じ墨色（#282828）の地に、ごく淡い光のむらと粒子、
   そして下の年表の縦線へそのままつながる一本の細い線
   ========================================================================== */
#rn-sense-hero.rn-sense-hero--quiet {
	background-color: #282828;
	background-image:
		linear-gradient(to bottom, rgba(40, 40, 40, 0) 70%, #282828 100%),
		radial-gradient(70% 55% at 50% 38%, rgba(255, 255, 255, 0.06), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#rn-sense-hero.rn-sense-hero--quiet::after {
	content: none;
}
.rn-sense-hero__line {
	position: absolute;
	z-index: 1;
	inset-inline-start: 50%;
	inset-block-end: 0;
	inline-size: 1px;
	block-size: 26%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
	transform-origin: bottom;
	animation: rn-tl-line 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
@keyframes rn-tl-line {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
	.rn-sense-hero__line { animation: none; }
}

/* 史の扉：横向きの年表（英語）。拠点の移り変わりを、細い横線・点・年号・地名だけで。
   色はモノトーン。2019 年以降（いま）の点と年号は白く、それより前は灰で。
   横線は最初と最後の点のあいだだけ。中央からは下の Mind Timeline の縦線へ一本でつながる */
#rn-sense-hero.rn-sense-hero--quiet {
	flex-direction: column;
}
.rn-sense-hero--quiet .rn-sense-hero__line {
	display: none;
}
.rn-tl-hero {
	--dot: 9px;
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	inline-size: min(100%, 60rem);
	margin: clamp(3rem, 9vh, 5.5rem) auto 0;
	padding: 0;
	list-style: none;
	animation: rn-fade-in 1.6s ease 0.6s both;
}
/* 横線：最初の点（1/12）から最後の点（11/12）まで */
.rn-tl-hero::before {
	content: "";
	position: absolute;
	inset-inline: calc(100% / 12);
	inset-block-start: calc(var(--dot) / 2);
	block-size: 1px;
	background: rgba(255, 255, 255, 0.3);
}
.rn-tl-hero::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: calc(100% + 1.6rem);
	inline-size: 1px;
	block-size: 100vh;
	background: rgba(255, 255, 255, 0.3);
}
.rn-tl-hero li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding-block-start: calc(var(--dot) + 1.4rem);
	text-align: center;
}
.rn-tl-hero li::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(50% - var(--dot) / 2);
	inline-size: var(--dot);
	block-size: var(--dot);
	border-radius: 50%;
	background-color: #8f8f8f;
}
.rn-tl-hero li.is-now::before {
	background-color: #ffffff;
}
.rn-tl-hero__year {
	font-family: var(--rn-gothic);
	font-weight: 400;
	font-size: clamp(1.125rem, 2.1vw, 1.75rem);
	letter-spacing: 0.02em;
	line-height: 1;
	color: #a8a8a8;
}
.rn-tl-hero li.is-now .rn-tl-hero__year {
	color: #ffffff;
}
.rn-tl-hero__label {
	display: block;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: clamp(0.625rem, 0.95vw, 0.8125rem);
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	text-wrap: balance;
}
@media screen and (max-width: 640px) {
	.rn-tl-hero {
		--dot: 7px;
		margin-block-start: 2.5rem;
	}
	.rn-tl-hero li {
		gap: 0.4rem;
		padding-block-start: calc(var(--dot) + 0.9rem);
	}
	.rn-tl-hero__year {
		font-size: 0.875rem;
	}
	.rn-tl-hero__label {
		inline-size: min-content; /* MINAMI / AOYAMA のように語ごとに折る */
		font-size: 0.5rem;
		letter-spacing: 0.08em;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rn-tl-hero { animation: none; }
}

/* スマホの扉の調整（PC は変えない） */
@media screen and (max-width: 640px) {
	/* 考（Marketing Strategy）：人物の顔が上にあるので、題とリードを下げて顔にかけない */
	.rn-sense-hero--text-low .rn-sense-hero__text {
		margin-block-start: 34svh;
	}
	/* 筆（PEN）：「共感が熱に変わり、…動きはじめる——」を一行に収めるため、リード全体を少し小さく */
	.rn-sense-hero__lead--compact {
		font-size: min(0.6875rem, 3.15vw); /* 幅の狭いスマホでも一行に収まるよう、画面幅に合わせて縮む */
		letter-spacing: 0.02em;
	}
	.rn-lead-line--nowrap {
		white-space: nowrap;
	}
}

/* 筆の下位ページ（SUPER CEO／ビープラス／LEADERS）：誌面やバナーを大きく一枚、押すと拡大 */
.rn-media-feature {
	max-inline-size: 46rem;
	margin: 0 auto clamp(2rem, 5vh, 3rem);
}
.rn-media-feature--page {
	max-inline-size: 34rem; /* 縦長の誌面は細めに */
}
.rn-media-feature .rn-photo__btn img {
	aspect-ratio: auto;
	opacity: 1;
}
.rn-media-feature figcaption {
	margin-block-start: 0.9rem;
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}
#rn-sense-body .rn-media-feature + .rn-pres-more,
.rn-sense-body__inner > .rn-pres-more {
	text-align: center;
}
.rn-sense-body__sign {
	margin: 2rem 0 0;
	font-family: var(--rn-mincho);
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.75);
	text-align: right;
}

/* 筆・書籍出版：本の紹介映像は、題の下に文字のリンクで */
.rn-sense-body__book-link {
	flex-basis: 100%;
	margin-block-start: 0.2em;
	font-family: var(--rn-gothic);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.06em;
}
.rn-sense-body__works .rn-sense-body__book-link a::before {
	content: "▶ ";
	font-size: 0.8em;
}

/* ==========================================================================
   スマホのトップ：2つ目（エッセイ）と4つ目（ご挨拶）の本文の字並び。
   両端揃え＋文節での折り返しが重なると、行によって字間が大きく開いてしまうので、
   ここだけは一字単位で折り返し（字間は均等）、両端揃えは最後の行以外の端をそろえるだけにする。
   行間はほんの少し詰め、左右・上下の余白をそろえる
   ========================================================================== */
@media screen and (max-width: 640px) {
	#rn-essay p,
	#rn-senses .rn-senses__greeting p {
		word-break: normal;
		line-break: strict;
		/* 行の右端もそろえる（最後の行は左揃え）。下の枠の幅を字送りの整数倍にしてあるので、
		   ほとんどの行は字間を変えずにぴったり収まり、禁則や英字で一字ずれる行だけがわずかに広がる */
		text-align: justify;
		text-align-last: start;
		letter-spacing: 0.04em;
		/* 最後の行が二、三字だけにならないようにする調整は renewal.js（字間をごくわずかに詰める） */
	}
	/* 左右の余白をまったく同じにする：文章の枠の幅を「13px の字＋字間 0.04em」の整数倍に切り下げて中央に置く。
	   （余白 28px の内側に入る字数ぶんの幅。余った端数は左右に等分される） */
	#rn-essay .rn-essay__body,
	#rn-senses .rn-senses__greeting > * {
		--rn-adv: calc(0.8125rem * 1.04);
		/* ちょうど整数倍だと、計算の端数で行末の一字（「、」など）が入らず次の行へ送られるので、ほんのわずか（0.02em）足す */
		inline-size: calc(round(down, 100% - 0.02em, var(--rn-adv)) + 0.02em);
		margin-inline: auto;
	}
	#rn-essay p {
		line-height: 1.65;
	}
	/* 縦組み（PC）用に「ひとかたまりで折る」としていた語句は、横組みのスマホでは普通に折る
	   （まとめて次の行に送られ、前の行の字間が開いていた） */
	#rn-essay .rn-nb,
	#rn-senses .rn-senses__greeting .rn-nb {
		white-space: normal;
	}
	/* 「一篇を、紡ぐ。受け継がれる、実り。静かに灯る、情感。」は、どの画面幅でも行末に二、三字が残りやすいので、
	   スマホでは「静かに灯る、情感。」の前で改行する（前の行は左揃えのまま、字間は広げない） */
	#rn-essay .rn-essay__l.rn-nb {
		display: block;
	}
	#rn-senses .rn-senses__body p {
		line-height: 1.55;
	}
	#rn-essay {
		padding-inline: 1.75rem;
	}
	#rn-senses .rn-senses__greeting {
		padding: 2rem 1.75rem;
	}
}

/* PC とスマホで改行の位置を変える文（話のリード）。片方だけを出す */
.rn-only-sp {
	display: none;
}
@media screen and (max-width: 640px) {
	.rn-only-pc {
		display: none;
	}
	.rn-only-sp {
		display: block;
	}
}

/* サロンドアール：映像が縦長の一本だけのときは、中央に細く */
.rn-salon-films--single {
	grid-template-columns: minmax(0, 18rem);
	justify-content: center;
}

/* ==========================================================================
   サロンドアール：写真と映像の一覧。写真は切り抜かず元の縦横のまま、
   列に積む（石垣のような組み）。本文より一回り広く、PC 3列・スマホ 2列
   ========================================================================== */
.rn-salon-gallery {
	--gap: 0.75rem;
	inline-size: min(100vw - 2 * var(--rn-gutter, 1.5rem), 64rem);
	margin: clamp(3rem, 8vh, 5rem) 0 clamp(3rem, 8vh, 5rem) 50%;
	transform: translateX(-50%);
	padding: 0;
	list-style: none;
	columns: 3;
	column-gap: var(--gap);
}
.rn-salon-gallery li {
	break-inside: avoid;
	margin: 0 0 var(--gap);
}
.rn-salon-gallery .rn-photo__btn img {
	aspect-ratio: auto;
	block-size: auto;
	opacity: 1;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.rn-salon-gallery .rn-photo__btn {
	overflow: hidden;
}
.rn-salon-gallery .rn-photo__btn:hover img {
	transform: scale(1.03);
}
.rn-salon-gallery__film video {
	display: block;
	inline-size: 100%;
	block-size: auto;
	background-color: #111;
}
@media screen and (max-width: 640px) {
	.rn-salon-gallery {
		--gap: 0.5rem;
		columns: 2;
	}
}

/* ==========================================================================
   R&B（日本ロールス・ロイス＆ベントレー オーナーズクラブ）：
   公式サイトへの入口を、会報の表紙ごと押せる大きな札に。ページの最後にも同じ行き先のボタン
   ========================================================================== */
.rn-rrb-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin: 0 0 clamp(3.5rem, 9vh, 5.5rem);
	background-color: #5e1416; /* 会報の表紙の臙脂に合わせる */
	color: #f4ede4;
	text-decoration: none;
	overflow: hidden;
	transition: background-color 0.4s ease;
}
#rn-doc .rn-rrb-cta,
#rn-doc .rn-rrb-cta span,
#rn-doc .rn-rrb-button a {
	text-decoration: none;
}
.rn-rrb-cta__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.rn-rrb-cta__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.rn-rrb-cta__label {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.3em;
	opacity: 0.7;
}
.rn-rrb-cta__name {
	font-family: var(--rn-mincho);
	font-size: clamp(0.9375rem, 1.2vw, 1rem);
	line-height: 1.75;
	letter-spacing: 0.04em;
}
.rn-rrb-cta__name span {
	display: inline-block; /* 語の途中では折らない */
}
.rn-rrb-cta__url {
	font-family: var(--rn-gothic);
	font-weight: 300;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	opacity: 0.8;
}
.rn-rrb-cta__go {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin-block-start: 0.6rem;
	padding: 0.85em 1.5em;
	border: 1px solid rgba(244, 237, 228, 0.7);
	font-family: var(--rn-gothic);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	transition: background-color 0.4s ease, color 0.4s ease;
}
.rn-rrb-cta__go::after {
	content: "↗";
}
.rn-rrb-cta:hover .rn-rrb-cta__img,
.rn-rrb-cta:focus-visible .rn-rrb-cta__img {
	transform: scale(1.03);
}
.rn-rrb-cta:hover .rn-rrb-cta__go,
.rn-rrb-cta:focus-visible .rn-rrb-cta__go {
	background-color: #f4ede4;
	color: #5e1416;
}
.rn-rrb-poster {
	margin-block-end: clamp(3.5rem, 9vh, 5.5rem);
}
.rn-rrb-film {
	margin-block-end: clamp(3rem, 8vh, 4.5rem);
}
.rn-rrb-button {
	margin: clamp(3.5rem, 9vh, 5rem) 0 0;
	text-align: center;
}
.rn-rrb-button a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	padding: 1.1em 2.4em;
	background-color: #5e1416;
	color: #f4ede4;
	font-family: var(--rn-gothic);
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-decoration: none;
	transition: background-color 0.4s ease;
}
.rn-rrb-button a span span {
	display: inline-block; /* 「…ベントレー」「オーナーズクラブ」の途中では折らない */
}
.rn-rrb-button a > span {
	font-weight: 300;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	opacity: 0.75;
}
.rn-rrb-button a:hover,
.rn-rrb-button a:focus-visible {
	background-color: #7d1c1f;
}
@media screen and (max-width: 640px) {
	.rn-rrb-cta {
		grid-template-columns: minmax(0, 1fr);
	}
	.rn-rrb-cta__go {
		align-self: stretch;
		justify-content: center;
	}
	.rn-rrb-button a {
		display: flex;
		padding-inline: 1.25em;
	}
}