/**
 * 文学部デジタルパンフレット（Figma node 2704:10595 準拠）
 */

:root {
	--ru-cream: #fdfcf0;
	--ru-cream-card: #fefcf2;
	--ru-green: #386f6b;
	--ru-green-dark: #2d5a56;
	--ru-yellow: #e9c46a;
	--ru-yellow-bar: #e7d56d;
	--ru-yellow-deep: #f4c058;
	--ru-modal: #e8e6f4;
	--ru-text: #1a1a1a;
	--ru-muted: #5c5c5c;
	--ru-shadow: 0 4px 14px rgba(56, 111, 107, 0.12);
}

/* ページ内アンカー（MV→学生の声・ヘッダーナビ等）をスムーズにスクロール */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.ru-pamphlet {
	background: var(--ru-cream);
	color: var(--ru-text);
	font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

.ru-pamphlet * {
	box-sizing: border-box;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ru-pamphlet a {
	color: #fff;
	text-decoration: none;
}

.ru-pamphlet a:hover {
	text-decoration: underline;
}

/* ヘッダー（Figma 2703:8728） */
.ru-header {
	width: 100%;
}

.ru-header__inner {
	max-width: 1714px;
	margin: 0 auto;
	padding: 10px clamp(20px, 4vw, 103px) 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: min(503px, 8vw);
	row-gap: 16px;
}

.ru-header__brand {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 24px;
	min-width: 0;
	flex: 1 1 auto;
}

.ru-header__logo-line {
	display: block;
	height: 18.975px;
	width: auto;
	max-width: 271.47px;
	flex: 0 0 auto;
}

.ru-header__kanji {
	flex: 1 1 0;
	min-width: 0;
	max-width: 656.9px;
	height: 41.685px;
}

.ru-header__kanji img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
}

.ru-header__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.45;
	color: #266443;
	white-space: nowrap;
}

.ru-header__nav a {
	color: #266443;
}

.ru-header__nav a:hover {
	color: #1d4a32;
}

/* メイン枠線（Figma 2696:5236 Vector）— ヘッダー下〜フッター直上まで（main のみを囲む）。1820×角R110・stroke #386F6B
 * 見た目の枠は ::after（z-index 高）で描画し、はみ出した ru-navcards の黄帯より手前に重ねて途切れないようにする */
.ru-pamphlet-frame {
	--ru-frame-board: 1920;
	--ru-frame-r: min(110px, calc(110 * 100vw / var(--ru-frame-board)));
	--ru-frame-stroke: min(3.79px, calc(3.79 * 100vw / var(--ru-frame-board)));
	position: relative;
	width: min(
		1820px,
		calc(100% - 2 * clamp(16px, calc(51 * 100vw / var(--ru-frame-board)), 51px))
	);
	margin-inline: auto;
	margin-top: clamp(12px, calc(24 * 100vw / var(--ru-frame-board)), 28px);
	margin-bottom: clamp(10px, calc(20 * 100vw / var(--ru-frame-board)), 24px);
	padding: 0;
	border: var(--ru-frame-stroke) solid transparent;
	border-radius: var(--ru-frame-r);
	background: transparent;
	box-sizing: border-box;
	overflow-x: visible;
}

.ru-pamphlet-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 50;
	border-radius: inherit;
	border: var(--ru-frame-stroke) solid var(--ru-green);
	box-sizing: border-box;
	pointer-events: none;
}

/* ナビカード：緑枠より左右ともビューポート幅にはみ出す */
.ru-pamphlet-frame .ru-navcards {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	transform: translateX(-50%);
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

/* ヒーロー MV（Figma 2704:9421・全レイヤー書き出し・1604×830） */
.ru-hero {
	padding: clamp(8px, 1.5vw, 28px) clamp(16px, 3vw, 55px) 0;
	overflow-x: clip;
	overflow-y: visible;
}

/* SP のみ表示（768px 以下で配置）。PC では非表示 */
.ru-hero__menu-btn {
	display: none;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
}

.ru-hero__menu-btn:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 4px;
}

.ru-hero__menu-btn img {
	display: block;
	width: 190px;
	height: auto;
}

.ru-fmenu {
	display: none;
}

.ru-fmenu__panel {
	display: none;
}

.ru-fmenu__item,
.ru-fmenu__footer {
	display: block;
}

.ru-fmenu__item {
	text-decoration: none;
}

.ru-hero__mv {
	position: relative;
	width: 100%;
	max-width: 1604px;
	margin: 0 auto;
	aspect-ratio: 1604 / 830;
}

/* SP MV（Figma 2776:23194・370×595）— 768px 以下で差し替え。アセットは PC と同一 */
.ru-hero__mv--sp {
	display: none;
	aspect-ratio: 370 / 595;
	max-width: min(100%, 767px);
}

/* SP＝768px 以下：ナビカード非表示・MV 差し替え・枠のモバイル調整 */
@media (max-width: 768px) {
	.ru-pamphlet-frame {
		width: calc(100% - 2 * clamp(10px, 2vw, 20px));
		--ru-frame-r: min(48px, calc(48 * 100vw / var(--ru-frame-board)));
		--ru-frame-stroke: 2.5px;
		margin-top: 0;
		margin-inline: auto;
		margin-bottom: 10px;
	}

	.ru-header__nav {
		display: none;
	}

	.ru-header__logo-line {
		display: none;
	}

	/* 英字ラインと同じ枠（.ru-header__logo-line と同一数値）で漢字ロゴを表示 */
	.ru-header__kanji {
		flex: 0 0 auto;
		min-width: 0;
		max-width: none;
		height: auto;
	}

	.ru-header__kanji img {
		width: auto;
		height: 18.975px;
		max-width: 271.47px;
		object-fit: contain;
		object-position: left bottom;
	}

	.ru-hero__mv--desktop {
		display: none;
	}

	.ru-hero__mv--sp {
		display: block;
	}

	.ru-hero {
		position: relative;
		padding-top: 40px;
		padding-inline: clamp(10px, 4vw, 20px);
		padding-bottom: 40px;
	}

	.ru-hero__menu-btn {
		display: block;
		position: relative;
		z-index: 70;
	}

	.ru-hero__menu-wrap {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 70;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		border-radius: 6px;
		overflow: hidden;
	}

	.ru-fmenu {
		display: block;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		width: 100%;
		transition: max-height 0.3s ease, opacity 0.3s ease;
	}

	.ru-fmenu.is-open {
		max-height: 460px;
		opacity: 1;
		pointer-events: auto;
	}

	.ru-fmenu__panel {
		display: flex;
		flex-direction: column;
		gap: 1px;
		position: static;
		width: 100%;
		border-radius: 0;
		overflow: hidden;
		background: #ffffff;
		box-shadow: none;
	}

	.ru-fmenu__item {
		height: 54px;
		background: #70bc96;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.1em;
		color: #fff;
	}

	.ru-fmenu__item p {
		display: inline-block;
		transform: translateY(-0.5px);
		margin: 0;
	}

	/* メニュー表示中もボタンは表示したまま */

	.ru-fmenu__item:focus-visible {
		outline: 3px solid var(--ru-green);
		outline-offset: 2px;
	}

	.ru-fmenu__footer {
		height: 21px;
		background: #ffffff;
	}

	.ru-navcards {
		display: none;
	}
}

.ru-hero__layer {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	box-sizing: border-box;
}

a.ru-hero__layer {
	text-decoration: none;
	color: inherit;
}

a.ru-hero__layer:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 4px;
}

.ru-hero__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/*
 * MV 人物イラスト（インタラクティブレイヤー）— ホバーで右に 5° 傾ける・#students-voice へジャンプ
 * 親レイヤーのインライン rotate と競合させないよう img に transform を付与
 */
.ru-hero__layer[data-node-id='2703:8401'],
.ru-hero__layer[data-node-id='2703:8564'],
.ru-hero__layer[data-node-id='2703:8730'],
.ru-hero__layer[data-node-id='2703:9187'],
.ru-hero__layer[data-node-id='2703:8482'] {
	pointer-events: auto;
	cursor: pointer;
}

/* 2703:9187（f90f96…d8b.svg）：常に手前。他人物ホバー時はそちらをより手前に（25） */
.ru-hero__layer[data-node-id='2703:9187'] {
	z-index: 20;
}

/* 2703:9418（a9c7489…e0.svg・タイトル「ブンガク」）：人物ホバー（25）より上で常に最前列 */
.ru-hero__layer[data-node-id='2703:9418'] {
	z-index: 50;
}

.ru-hero__layer[data-node-id='2703:8401'] img,
.ru-hero__layer[data-node-id='2703:8564'] img,
.ru-hero__layer[data-node-id='2703:8730'] img,
.ru-hero__layer[data-node-id='2703:9187'] img,
.ru-hero__layer[data-node-id='2703:8482'] img {
	transform-origin: center bottom;
	transition: transform 0.5s ease;
}

/* 2703:8730（19f4fd34…118.svg）はホバーで手前に出さない */
.ru-hero__layer[data-node-id='2703:8401']:hover,
.ru-hero__layer[data-node-id='2703:8564']:hover,
.ru-hero__layer[data-node-id='2703:9187']:hover,
.ru-hero__layer[data-node-id='2703:8482']:hover {
	z-index: 25;
}

.ru-hero__layer[data-node-id='2703:8401']:hover img,
.ru-hero__layer[data-node-id='2703:8564']:hover img,
.ru-hero__layer[data-node-id='2703:8730']:hover img,
.ru-hero__layer[data-node-id='2703:9187']:hover img,
.ru-hero__layer[data-node-id='2703:8482']:hover img {
	transform: rotate(5deg);
}

/* min-height は aspect-ratio と矛盾しレイヤー％座標を崩すため付けない */

/* ナビカード行（Figma 2703:4716）
 * 角丸は固定 px だと縮小時に比率だけ変わる → 1920 幅デザインと同じ見え方で等比 */
.ru-navcards {
	--ru-nav-board: 1920;
	--ru-navcard-radius: min(21px, calc(21 * 100vw / var(--ru-nav-board)));
	background: #e7d56d;
	padding: 26px clamp(16px, 3vw, 64px) 21px;
}

.ru-navcards__inner {
	max-width: 1792px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	align-items: stretch;
}

/* 768px 幅までは 4 列 1 行。767px 以下で 2×2、560px 以下で 1 列 */
@media (max-width: 767px) {
	.ru-navcards__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ru-navcards__inner {
		grid-template-columns: 1fr;
	}
}

.ru-navcard--figma {
	position: relative;
	display: block;
	border-radius: var(--ru-navcard-radius);
	overflow: hidden;
	box-shadow: var(--ru-shadow);
	text-decoration: none;
	color: inherit;
}

.ru-navcard--figma:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 3px;
}

/* Figma カード基準 439×108.62 */
.ru-navcard__canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 439 / 108.62;
	border-radius: var(--ru-navcard-radius);
	overflow: hidden;
	background: transparent;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.ru-navcard--figma:hover .ru-navcard__canvas {
	opacity: 0.9;
}

.ru-navcard__layer {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ru-navcard__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.ru-navcard__flat {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

/* セクション見出し */
.ru-section {
	padding: clamp(30px, 6vw, 72px) clamp(20px, 4vw, 120px);
	max-width: 1920px;
	margin: 0 auto;
}

.ru-section__title {
	font-size: clamp(32px, 6vw, 56px);
	font-weight: 900;
	line-height: 1.1;
	margin: 0 0 8px;
	letter-spacing: 0.04em;
}

.ru-section__title span {
	color: var(--ru-yellow-deep);
	-webkit-text-stroke: 2px var(--ru-green);
	paint-order: stroke fill;
}

.ru-section__title--grad .ru-accent {
	color: #f9a825;
	-webkit-text-stroke-width: 0;
}

.ru-section__title--grad .ru-word {
	color: var(--ru-text);
}

/* 学生インタビュー（Figma 2707:10699） */
.ru-section--students-voice {
	overflow-x: clip;
	overflow-y: visible;
}

/* アートボード 1625.48×893 に合わせた周辺イラスト（2704:10591 装飾レイヤー）
 * MV と同様、ステージ幅に連動してグリッド・カードをスケール（container + cqw） */
.ru-sv__stage {
	--ru-sv-board: 1625.48046875;
	/* タイトル SVG 用：ビューポート連動（768px 幅のレイアウト切替時も同じ比率） */
	--ru-sv-vw-board: 1920;
	position: relative;
	width: 100%;
	max-width: 1625px;
	margin: 0 auto;
	overflow: visible;
	container-type: inline-size;
	container-name: ru-sv-stage;
}

.ru-sv__stage::before {
	content: "";
	display: block;
	width: 100%;
	padding-bottom: calc(893 / 1625.48046875 * 100%);
}

.ru-sv__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

.ru-sv-decor__layer {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ru-sv-decor__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.ru-sv__main {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(8px, calc(44 / var(--ru-sv-board) * 100 * 1cqw), 44px);
	box-sizing: border-box;
}

.ru-sv {
	width: 100%;
	margin: 0;
}

.ru-sv__row--middle,
.ru-sv__row--bottom {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	justify-items: center;
	gap: clamp(8px, calc(32 / var(--ru-sv-board) * 100 * 1cqw), 32px);
}

.ru-sv__row--bottom {
	margin-top: clamp(12px, calc(40 / var(--ru-sv-board) * 100 * 1cqw), 40px);
}

/* 社会学 voice03：グリッドセル内でやや左へ（ステージ幅に比例） */
.ru-sv__slot--bl .ru-sv-card {
	transform: translateX(clamp(-40px, calc(-24 / var(--ru-sv-board) * 100 * 1cqw), -8px));
}

.ru-sv__title {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	padding: min(16px, calc(16 * 100vw / var(--ru-sv-vw-board))) 0;
	width: 100%;
	max-width: min(100%, 420px, calc(420 * 100vw / var(--ru-sv-vw-board)));
}

.ru-sv__title-img {
	display: block;
	width: 100%;
	max-width: min(100%, 389px, calc(389 * 100vw / var(--ru-sv-vw-board)));
	height: auto;
}

.ru-sv-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: min(100%, clamp(140px, calc(340 / var(--ru-sv-board) * 100 * 1cqw), 340px));
	margin: 0;
	margin-inline: auto;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
	text-align: center;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

.ru-sv-card:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 4px;
}

.ru-sv-card__photo-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ru-sv-card__photo-wrap picture {
	display: contents;
}

/* 静止／ホバー画像のクロスフェード（0.5s） */
.ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--rest,
.ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--hover {
	transition: opacity 0.5s ease;
}

.ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--hover {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.ru-sv-card:hover .ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--rest,
.ru-sv-card:focus-within .ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--rest {
	opacity: 0;
}

.ru-sv-card:hover .ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--hover,
.ru-sv-card:focus-within .ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--rest,
	.ru-sv-card__photo-wrap--crossfade .ru-sv-card__photo--hover {
		transition-duration: 0.01ms;
	}
}

.ru-sv-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* voice01.svg 実寸 286×397 に合わせる */
.ru-sv-card--philosophy .ru-sv-card__photo-wrap {
	aspect-ratio: 296 / 387;
	max-width: min(100%, clamp(130px, calc(280 / var(--ru-sv-board) * 100 * 1cqw), 280px));
}

.ru-sv-card--philosophy .ru-sv-card__photo {
	-webkit-mask-image: url("../images/students-voice/mask-philosophy.svg");
	mask-image: url("../images/students-voice/mask-philosophy.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ru-sv-card--history .ru-sv-card__photo-wrap {
	aspect-ratio: 382.2 / 390.19;
	max-width: min(100%, clamp(140px, calc(370 / var(--ru-sv-board) * 100 * 1cqw), 370px));
	border-radius: 50%;
}

.ru-sv-card--sociology .ru-sv-card__photo-wrap {
	aspect-ratio: 339.13 / 424.51;
	max-width: min(100%, clamp(130px, calc(290 / var(--ru-sv-board) * 100 * 1cqw), 290px));
}

.ru-sv-card--sociology .ru-sv-card__photo {
	-webkit-mask-image: url("../images/students-voice/mask-sociology.svg");
	mask-image: url("../images/students-voice/mask-sociology.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ru-sv-card--japanese-lit .ru-sv-card__photo-wrap {
	aspect-ratio: 345.37 / 446.27;
	max-width: min(100%, clamp(130px, calc(300 / var(--ru-sv-board) * 100 * 1cqw), 300px));
}

.ru-sv-card--japanese-lit .ru-sv-card__photo {
	-webkit-mask-image: url("../images/students-voice/mask-japanese-lit.svg");
	mask-image: url("../images/students-voice/mask-japanese-lit.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ru-sv-card--english-lit .ru-sv-card__photo-wrap {
	aspect-ratio: 342.86 / 435.19;
	max-width: min(100%, clamp(140px, calc(320 / var(--ru-sv-board) * 100 * 1cqw), 320px));
}

.ru-sv-card--english-lit .ru-sv-card__photo {
	-webkit-mask-image: url("../images/students-voice/mask-english-lit.svg");
	mask-image: url("../images/students-voice/mask-english-lit.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Figma 合成 SVG（voice01〜05）は枠・マスク込み。コース別 .ru-sv-card--* .ru-sv-card__photo と詳細度が同じなので、このブロックは必ず後に置く（さもないと mask が再適用され画像が消える） */
/*
 * photo-wrap の max-width がコースごとに 280〜370px とバラつくと、cover で拡大したとき基準幅が違いイラスト同士の相対スケールが崩れる。
 * 横幅上限だけ .ru-sv-card と同一 clamp に揃え、縦横比は上記コース別 aspect-ratio のまま（Figma 比は維持）。
 */
.ru-sv-card--figma-face .ru-sv-card__photo-wrap {
	width: 100%;
	max-width: min(100%, clamp(140px, calc(340 / var(--ru-sv-board) * 100 * 1cqw), 340px));
	margin-inline: auto;
	box-sizing: border-box;
}

/* PC：voice01 は他カードより大きく見えやすいため、枠幅を少し絞る */
.ru-sv-card--figma-face.ru-sv-card--philosophy .ru-sv-card__photo-wrap {
	max-width: min(100%, clamp(130px, calc(320 / var(--ru-sv-board) * 100 * 1cqw), 320px));
}

.ru-sv-card--figma-face .ru-sv-card__photo {
	-webkit-mask-image: none;
	mask-image: none;
	object-fit: contain;
	object-position: center bottom;
}

.ru-sv-card--figma-face.ru-sv-card--history .ru-sv-card__photo-wrap {
	border-radius: 0;
}

/* PC：voice01 の見た目サイズ補正を確実に適用 */
@media (min-width: 769px) {
	.ru-sv-card--figma-face.ru-sv-card--philosophy .ru-sv-card__photo-wrap {
		max-width: min(100%, clamp(130px, calc(320 / var(--ru-sv-board) * 100 * 1cqw), 320px));
	}

	/* PC：voice02 を拡大（親カード上限も同時に拡張） */
	.ru-sv-card.ru-sv-card--figma-face.ru-sv-card--history {
		max-width: min(100%, clamp(157px, calc(383 / var(--ru-sv-board) * 100 * 1cqw), 383px));
	}

	.ru-sv-card--figma-face.ru-sv-card--history .ru-sv-card__photo-wrap {
		max-width: min(100%, clamp(157px, calc(383 / var(--ru-sv-board) * 100 * 1cqw), 383px));
	}
}

/* SP（768px 以下）：2 列 × 3 段 — 1: voice01|タイトル、2: voice02|voice03、3: voice04|voice05 */
@media (max-width: 768px) {
	.ru-section--students-voice {
		background-image: url("../images/students-voice/bg-sp.svg");
		background-repeat: no-repeat;
		background-position: center top;
		/* 横幅基準で 90%（−10%）、高さは auto で縦横比維持。左右は center で余白 */
		background-size: 90% auto;
		/* .ru-section の縦パディングに +20px（当セクション SP のみ） */
		padding-bottom: calc(clamp(30px, 6vw, 72px) + 20px);
	}

	/* ::before の固定アスペクト + main:absolute だとグリッド実高さが文書フローに乗らず重なる */
	.ru-sv__stage::before {
		display: none;
	}

	.ru-sv__decor {
		display: none;
	}

	.ru-sv__main {
		position: relative;
		inset: auto;
		padding-inline: 0;
	}

	.ru-sv {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(8px, 3.5vw, 20px);
		row-gap: clamp(10px, 3vw, 22px);
		align-items: center;
		justify-items: center;
		width: 100%;
	}

	.ru-sv__row--middle,
	.ru-sv__row--bottom {
		display: contents;
		margin-top: 0;
	}

	.ru-sv__slot--tl {
		grid-column: 1;
		grid-row: 1;
	}

	.ru-sv__title {
		grid-column: 2;
		grid-row: 1;
		width: 80%;
		max-width: 80%;
		padding: 0 0 40% 0;
		justify-self: center;
	}

	.ru-sv__slot--tr {
		grid-column: 2;
		grid-row: 2;
	}

	.ru-sv__slot--bl {
		grid-column: 1;
		grid-row: 2;
	}

	.ru-sv__slot--bc {
		grid-column: 1;
		grid-row: 3;
	}

	.ru-sv__slot--br {
		grid-column: 2;
		grid-row: 3;
	}

	.ru-sv__slot--bl .ru-sv-card {
		transform: none;
	}

	.ru-sv-card {
		max-width: 100%;
		min-width: 0;
	}

	/*
	 * グリッドセル / flex 子の min-width: auto により、SVG の width 属性（例 285px）が最小幅になりセルより広がり、
	 * photo-wrap の overflow:hidden で意図せず切れる。セル幅に縮め、Figma 枠内に収める。
	 */
	.ru-sv__slot {
		min-width: 0;
	}

	.ru-sv-card--figma-face .ru-sv-card__photo-wrap {
		min-width: 0;
		max-width: 100%;
	}

	/*
	 * voice01：縦長比のため同幅でも他カードより大きく見える → 枠幅を抑えて視覚サイズを近づける。
	 * contain で足元欠け対策は維持。
	 */
	.ru-sv-card--figma-face.ru-sv-card--philosophy .ru-sv-card__photo-wrap {
		aspect-ratio: 286 / 397;
		max-width: min(78%, 100%);
		margin-inline: auto;
	}

	.ru-sv-card--figma-face.ru-sv-card--philosophy .ru-sv-card__photo {
		object-fit: contain;
		object-position: center bottom;
	}

	/*
	 * voice02〜05：枠幅 90% 上限・contain でサイズ感を揃える。aspect-ratio は各 SVG 実寸。
	 */
	.ru-sv-card--figma-face.ru-sv-card--history .ru-sv-card__photo-wrap,
	.ru-sv-card--figma-face.ru-sv-card--sociology .ru-sv-card__photo-wrap,
	.ru-sv-card--figma-face.ru-sv-card--japanese-lit .ru-sv-card__photo-wrap,
	.ru-sv-card--figma-face.ru-sv-card--english-lit .ru-sv-card__photo-wrap {
		max-width: min(90%, 100%);
		margin-inline: auto;
	}

	.ru-sv-card--figma-face.ru-sv-card--history .ru-sv-card__photo-wrap {
		aspect-ratio: 383 / 385;
	}

	.ru-sv-card--figma-face.ru-sv-card--sociology .ru-sv-card__photo-wrap {
		aspect-ratio: 340 / 404;
	}

	.ru-sv-card--figma-face.ru-sv-card--japanese-lit .ru-sv-card__photo-wrap {
		aspect-ratio: 346 / 448;
	}

	.ru-sv-card--figma-face.ru-sv-card--english-lit .ru-sv-card__photo-wrap {
		aspect-ratio: 363 / 415;
	}

	.ru-sv-card--figma-face.ru-sv-card--history .ru-sv-card__photo,
	.ru-sv-card--figma-face.ru-sv-card--sociology .ru-sv-card__photo,
	.ru-sv-card--figma-face.ru-sv-card--japanese-lit .ru-sv-card__photo,
	.ru-sv-card--figma-face.ru-sv-card--english-lit .ru-sv-card__photo {
		object-fit: contain;
		object-position: center bottom;
	}

	.ru-sv-card--figma-face .ru-sv-card__photo {
		max-width: 100%;
	}

	.ru-sv__title-img {
		max-width: 100%;
	}
}

/* 卒業生 INTERVIEW（Figma 2707:10702） */
.ru-section--graduates {
	overflow-x: clip;
	overflow-y: visible;
	padding-bottom: calc(20px + clamp(40px, 6vw, 120px));
}

.ru-grad__stage {
	--ru-grad-board: 1606.6954345703125;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1607px;
	margin: 0 auto;
	overflow: visible;
	container-type: inline-size;
	container-name: ru-grad-stage;
}

/* Figma フレーム相当の高さ（装飾・タイトル・カード行）。コメントは canvas の外で縦に積む */
.ru-grad__canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 1606.6954345703125 / 545.7464599609375;
	flex-shrink: 0;
}

.ru-grad__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	overflow: visible;
}

.ru-grad-decor__layer {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ru-grad-decor__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

.ru-grad__main {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: calc(65 / var(--ru-grad-board) * 100 * 1cqw);
	padding: 0 clamp(8px, calc(24 / var(--ru-grad-board) * 100 * 1cqw), 24px);
	box-sizing: border-box;
}

.ru-grad__title-wrap {
	position: relative;
	width: calc(620.872802734375 / var(--ru-grad-board) * 100 * 1cqw);
	height: calc(83.3932876586914 / var(--ru-grad-board) * 100 * 1cqw);
	flex-shrink: 0;
}

.ru-grad__title-sp {
	display: none;
}

.ru-grad-title__layer {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 卒業生タイトル差し替え（interview-titile.svg）を他レイヤーより手前に */
.ru-grad__title-wrap .ru-grad-title__layer[data-node-id="2707:10708"] {
	z-index: 10;
}

.ru-grad-title__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.ru-grad__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: calc(56 / var(--ru-grad-board) * 100 * 1cqw);
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	align-content: center;
}

/*
 * SP（768px 以下）：ベースの .ru-grad__main（flex）・.ru-grad__row（flex）より後に置き、
 * display:grid / display:contents が効くようにする（先頭の 768 ブロックだと上書きされる）。
 */
@media (max-width: 768px) {
	.ru-section--graduates {
		background-image: url("../images/graduates/bg-sp.svg");
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 90% auto;
	}

	.ru-grad__canvas {
		aspect-ratio: unset;
		height: auto;
		min-height: 0;
	}

	/* SP：PC 用のベクター装飾は非表示。背景は .ru-section--graduates の bg-sp.svg */
	.ru-grad__decor {
		display: none;
	}

	.ru-grad__main {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(8px, 3.5vw, 20px);
		row-gap: clamp(10px, 3vw, 22px);
		align-items: start;
		justify-items: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 0;
	}

	.ru-grad__row {
		display: contents;
	}

	/* Z 字テレコ：各段で 2 列目を手前・上寄せ、1 列目を左斜め下（下＋やや右）へずらして重ねる */
	.ru-grad__col--illo {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-self: center;
		z-index: 1;
		transform: translateX(clamp(4px, 2vw, 16px));
	}

	.ru-grad__title-wrap {
		grid-column: 2;
		grid-row: 1;
		display: block;
		width: 100%;
		max-width: 90%;
		height: auto;
		min-width: 0;
		align-self: center;
		justify-self: end;
		z-index: 2;
		transform: translateX(clamp(-10px, -3vw, -2px));
	}

	.ru-grad__title-sp {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.ru-grad__title-wrap .ru-grad-title__layer {
		display: none !important;
	}

	/* テレコ用の translate は列ではなく .ru-grad-card へ（列に transform があると枠外へはみ出す） */
	.ru-grad__row .ru-grad__col--card:nth-child(2) {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-self: center;
		z-index: 2;
		overflow: hidden;
	}

	/* 1列目：カードを translateX(+) で右へずらすと描画が列の右外へはみ出す。列に hidden だと右端で円が切れ、列内に余白だけ残る → visible */
	.ru-grad__row .ru-grad__col--card:nth-child(3) {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-self: center;
		margin-top: clamp(16px, 7.5vw, 42px);
		z-index: 1;
		overflow: visible;
	}

	.ru-grad__row .ru-grad__col--card:nth-child(4) {
		grid-column: 2;
		grid-row: 3;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-self: center;
		z-index: 2;
		overflow: hidden;
	}

	.ru-grad__row .ru-grad__col--card:nth-child(5) {
		grid-column: 1;
		grid-row: 3;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-self: center;
		margin-top: clamp(16px, 7.5vw, 42px);
		z-index: 1;
		overflow: visible;
	}

	.ru-grad__col .ru-grad-card,
	.ru-grad__col .ru-grad-illo-btn {
		max-width: 100%;
	}

	.ru-grad__col--illo .ru-grad-illo-btn {
		width: 95%;
		margin-inline: auto;
	}

	/* 2・3行目の2列目：カード幅 80%＋従来どおり横方向オフセット（列内でクリップ） */
	.ru-grad__row .ru-grad__col--card:nth-child(2) .ru-grad-card,
	.ru-grad__row .ru-grad__col--card:nth-child(4) .ru-grad-card {
		width: 80%;
		margin-inline: auto;
		transform: translateX(clamp(-10px, -3vw, -2px));
	}

	/* 2・3行目の1列目：横方向オフセットをカード側へ */
	.ru-grad__row .ru-grad__col--card:nth-child(3) .ru-grad-card,
	.ru-grad__row .ru-grad__col--card:nth-child(5) .ru-grad-card {
		transform: translateX(clamp(4px, 2vw, 16px));
	}
}

/* 卒業生コメント（voice-text01 等）：行の直下、0.3s で高さ＋不透明度を開閉 */
.ru-grad__voice-text {
	--ru-grad-voice-dur: 0.3s;
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	max-width: calc(1606.6954345703125 / var(--ru-grad-board) * 100 * 1cqw);
	margin-inline: auto;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	box-sizing: border-box;
	transition:
		grid-template-rows var(--ru-grad-voice-dur) ease,
		opacity var(--ru-grad-voice-dur) ease,
		margin-top var(--ru-grad-voice-dur) ease;
}

.ru-grad__voice-text.is-expanded {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: clamp(12px, calc(24 / var(--ru-grad-board) * 100 * 1cqw), 24px);
}

.ru-grad__voice-text-inner {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

.ru-grad__voice-text-close {
	position: absolute;
	inset: 10px 10px auto auto;
	top: 6%;
	right: 4%;
	left: auto;
	width: 100px;
	height: 100px;
	border: none;
	background: transparent;
	color: var(--ru-green);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.ru-grad__voice-text-close:hover {
	background: transparent;
}

.ru-grad__voice-text-close:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 2px;
}


.ru-grad__voice-text-inner {
	min-height: 0;
	overflow: hidden;
}

.ru-grad__voice-text-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.ru-grad__voice-text {
		--ru-grad-voice-dur: 0.01ms;
	}
}

.ru-grad__col {
	flex: 0 0 auto;
	width: calc(var(--ru-grad-col-w) / var(--ru-grad-board) * 100 * 1cqw);
	max-width: 100%;
}

@media (min-width: 769px) {
	.ru-grad__row > .ru-grad__col:nth-child(1),
	.ru-grad__row > .ru-grad__col:nth-child(2) {
		width: calc(var(--ru-grad-col-w) / var(--ru-grad-board) * 100 * 1cqw * 0.9);
		max-width: 100%;
	}

	/* 卒業生：PC のみ、行内5枚（イラスト＋4カード）をホバーでやや薄く */
	.ru-section--graduates .ru-grad__main .ru-grad-illo-btn img,
	.ru-section--graduates .ru-grad__main .ru-grad-card__flat img,
	.ru-section--graduates .ru-grad__main .ru-grad-card__photo img {
		opacity: 1;
		transition: opacity 0.2s ease;
	}

	.ru-section--graduates .ru-grad__main .ru-grad-illo-btn:hover img,
	.ru-section--graduates .ru-grad__main .ru-grad-card:hover .ru-grad-card__flat img,
	.ru-section--graduates .ru-grad__main .ru-grad-card:hover .ru-grad-card__photo img {
		opacity: 0.9;
	}
}

.ru-grad-illo {
	width: 100%;
	position: relative;
	overflow: visible;
}

.ru-grad-illo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

.ru-grad-illo-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
	position: relative;
	overflow: hidden;
}

.ru-grad-illo-btn:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 4px;
}

.ru-grad-illo-btn img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

.ru-grad-card {
	display: block;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
}

.ru-grad-card:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 4px;
}

.ru-grad-card__stack {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

.ru-grad-card__layer {
	position: absolute;
	display: block;
	pointer-events: none;
	overflow: visible;
}

.ru-grad-card__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.ru-grad-card__photo {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
}

.ru-grad-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.ru-grad-card__flat {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	overflow: hidden;
}

/* interview02〜05：cover だとアスペクト差で左右／片側が欠ける → 全体を収める */
.ru-grad-card__flat img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* SP：.ru-grad__col / .ru-grad__voice-text のベース指定より後で上書き */
@media (max-width: 768px) {
	.ru-grad__main .ru-grad__col.ru-grad__col--illo,
	.ru-grad__main .ru-grad__col.ru-grad__col--card {
		width: 86%;
		max-width: 100%;
		min-width: 0;
	}

	.ru-grad__stage .ru-grad__voice-text {
		max-width: 100%;
	}

	/*
	 * 2行目2列目：cover＋枠を少し縦長、トリムはやや上寄せ。
	 */
	.ru-grad__main .ru-grad__row .ru-grad__col--card:nth-child(2) .ru-grad-card {
		aspect-ratio: var(--ru-grad-col-w) / calc(var(--ru-grad-col-h) * 1.08) !important;
	}

	.ru-grad__main .ru-grad__row .ru-grad__col--card:nth-child(2) .ru-grad-card__flat img {
		object-fit: cover;
		object-position: center 30%;
	}

	/*
	 * 3行目2列目：下欠け対策で bottom 寄せにすると上が切れる → 枠を縦に確保しつつ
	 * object-position は中央よりやや下（52%）で上下のバランスを取る。
	 */
	.ru-grad__main .ru-grad__row .ru-grad__col--card:nth-child(4) .ru-grad-card {
		aspect-ratio: var(--ru-grad-col-w) / calc(var(--ru-grad-col-h) * 1.16) !important;
	}

	.ru-grad__main .ru-grad__row .ru-grad__col--card:nth-child(4) .ru-grad-card__flat img {
		object-position: center 52%;
	}
}

/*
 * 769px〜1100px：.ru-grad__row のみ行間を詰める（768px 以下はグリッド化のため除外）。
 */
@media (max-width: 1100px) and (min-width: 769px) {
	.ru-grad__row {
		gap: clamp(4px, 0.9cqw, 14px);
	}
}

@media (max-width: 640px) {
	/* 768px グリッドの column-gap / row-gap を gap 一括指定で上書きしない */
	.ru-grad__main {
		padding-top: clamp(4px, 2vw, 12px);
	}
}

/* 動画紹介ブロック */
.ru-video-block {
	margin-top: 48px;
	padding: 32px clamp(16px, 3vw, 40px);
	background: rgba(255, 255, 255, 0.65);
	border-radius: 24px;
	border: 2px dashed rgba(56, 111, 107, 0.25);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ru-video-block h2 {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ru-green);
}

.ru-video-block__courses {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.ru-video-block__courses img {
	max-width: 180px;
	height: auto;
}

/* インタビューモーダル */
.ru-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(45, 90, 86, 0.45);
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ru-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.ru-modal {
	background: var(--ru-modal);
	border: 3px dashed var(--ru-green);
	border-radius: 24px;
	max-width: 920px;
	width: 100%;
	padding: clamp(20px, 4vw, 40px);
	position: relative;
	margin: auto 0;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.ru-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--ru-green);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--ru-shadow);
}

.ru-modal__close:hover {
	background: var(--ru-cream);
}

.ru-modal__tag {
	display: inline-block;
	font-size: 14px;
	font-weight: 800;
	color: var(--ru-green);
	margin-bottom: 12px;
}

.ru-modal__title {
	font-size: clamp(20px, 3.5vw, 28px);
	font-weight: 800;
	line-height: 1.45;
	margin: 0 0 16px;
}

.ru-modal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 24px;
	font-size: 14px;
}

.ru-modal__meta time {
	background: #fff;
	padding: 6px 12px;
	border-radius: 8px;
	font-weight: 700;
	color: var(--ru-muted);
}

.ru-modal__body h3 {
	font-size: 15px;
	margin: 24px 0 8px;
	color: var(--ru-green-dark);
}

.ru-modal__body p {
	margin: 0 0 12px;
}

body.ru-modal-open {
	overflow: hidden;
}

/* フッター（Figma 2752:17145）
 * 1920 アートボード基準の min(設計px, calc(設計px * 100vw / 1920)) で PC と同じ形状を等比縮小。
 * 狭い幅で SNS 行がはみ出す場合はバー内を横スクロール（レイアウトは横一列のまま）。 */
.ru-footer-pamphlet {
	--ru-footer-board: 1920;
	padding: min(48px, calc(48 * 100vw / var(--ru-footer-board))) 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(37px, calc(37 * 100vw / var(--ru-footer-board)));
	text-align: center;
}

.ru-footer-pamphlet__heading-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
}

.ru-footer-pamphlet__heading {
	margin: 0;
	width: min(386px, calc(386 * 100vw / var(--ru-footer-board)));
	max-width: 100%;
	line-height: 0;
}

.ru-footer-pamphlet__heading-img {
	display: block;
	width: 100%;
	height: auto;
}

.ru-footer-pamphlet__bar {
	/* body のデフォルト margin を残したまま、バーだけビューポート端までフルブリード */
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	background: #e7d56d;
	padding: min(32px, calc(32 * 100vw / var(--ru-footer-board)))
		min(16px, calc(16 * 100vw / var(--ru-footer-board)))
		calc(min(46px, calc(46 * 100vw / var(--ru-footer-board))) + 8px);
	margin-bottom: -8px;
	box-sizing: border-box;
	min-height: min(258px, calc(258 * 100vw / var(--ru-footer-board)));
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* 横 1 列（SP も PC と同じ並び・同一スケール式） */
.ru-footer-pamphlet__social-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: center;
	gap: min(100px, calc(100 * 100vw / var(--ru-footer-board)));
	width: min(920px, calc(920 * 100vw / var(--ru-footer-board)));
	max-width: 100%;
	box-sizing: border-box;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	/* 見出し SVG：PC 式より 20% 大きく（親 max-width: 100% でビューポート幅は超えない） */
	.ru-footer-pamphlet__heading {
		width: min(calc(386px * 1.2), calc(386 * 1.2 * 100vw / var(--ru-footer-board)));
	}

	.ru-footer-pamphlet__bar {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		justify-content: safe center;
	}

	/* 設計幅いっぱいの一行を保ち、狭い画面ではスクロール */
	.ru-footer-pamphlet__social-row {
		width: max-content;
		max-width: none;
		margin-inline: auto;
	}
}

.ru-footer-pamphlet__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	gap: 0;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.ru-footer-pamphlet__col:hover {
	text-decoration: none;
	opacity: 0.92;
}

.ru-footer-pamphlet__col:focus-visible {
	outline: 3px solid var(--ru-green);
	outline-offset: 6px;
	border-radius: 4px;
}

/* SNS 各カラムは facebook.svg / instagram.svg / x.svg / ticktock.svg の1枚表示
 * X(117×178) は縦長のため max-width だけだと他より大きく見える → 共通枠 + contain で統一 */
.ru-footer-pamphlet__asset {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 0;
	flex-shrink: 0;
	width: min(180px, calc(180 * 100vw / var(--ru-footer-board)));
	height: min(175px, calc(175 * 100vw / var(--ru-footer-board)));
	box-sizing: border-box;
}

.ru-footer-pamphlet__asset img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom center;
	margin: 0;
}