@charset "UTF-8";
/*
 * やっぱり気になるお金のはなし（slug: money / ID:163）専用スタイル
 * Figma: PC 1440 / SP 828 基準。rem = 10px（html font-size 62.5%）。
 * 命名: FLOCSS（p-money*）。SP は @media (max-width:768px)。
 * CSS構成: tokens / base / layout / components / page overrides。
 * @layer は既存テーマCSSとの読み込み順・詳細度に影響するため未導入。
 */

/* ============================================================
 * 0. 全体ラッパー
 * ============================================================ */
.p-money {
	--money-color-accent: #e65a00;
	--money-color-border: #e6e6e6;
	--money-color-cream: #ffffdc;
	--money-color-income: #2379b5;
	--money-color-link: #2dc8aa;
	--money-color-muted: #808080;
	--money-color-panel: #fff;
	--money-color-surface: #f0f0f0;
	--money-color-talk: #fff2c1;
	--money-color-text: #000;
	--money-color-outgoing: #ff7858;

	/* Figma: ページ全体の地色はクリーム #ffffdc（白カードはこの上に乗る）。
	   Figma クリーム上端(y201)→MV(y257) の 56px ぶんを padding-top で確保
	   （padding を持たせることで先頭子要素とのマージン相殺も防ぐ＝罫線直下からクリーム開始） */
	background-color: var(--money-color-cream);
	color: var(--money-color-text);
	font-family: "Zen Kaku Gothic New", sans-serif;
	line-break: strict;
	overflow-wrap: break-word;
	padding-top: 5.6rem;
	word-break: normal;
}

.p-money__inner {
	margin: 0 auto;
	max-width: 118rem;
	padding: 0 2.5rem;
	width: 100%;
}

/* セクション共通の白カード（角丸＋枠線） */
.p-money__card {
	background-color: var(--money-color-panel);
	border: 2px solid var(--money-color-border);
	border-radius: 8rem;
	margin: 0 auto;
	max-width: 112.8rem;
	padding: 0 12rem 8rem;
	position: relative;
}

/* セクション見出しの丸番号バッジ */
.p-money__badge {
	background-color: var(--money-color-accent);
	border-radius: 50%;
	color: var(--money-color-panel);
	display: grid;
	font-family: "acumin-pro", sans-serif;
	font-size: 4.2rem;
	font-weight: 500;
	height: 7rem;
	left: 50%;
	line-height: 1;
	padding-top: 0;
	place-items: center;
	position: absolute;
	top: -3.5rem;
	transform: translateX(-50%);
	width: 7rem;
}

.p-money__badge::before {
	border: 1px solid var(--money-color-panel);
	border-radius: 50%;
	content: "";
	inset: 0.6rem;
	position: absolute;
}

.p-money__badgeNum {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	line-height: 1;
	padding-bottom: 5px;
	position: absolute;
	z-index: 1;
}

/* トピック4のバッジ数字「4」は視覚的に左へ寄るため右側を微調整する。 */
#money-4 .p-money__badgeNum {
	padding-right: 3px;
}

.p-money__badgeSvg {
	display: block;
	height: 100%;
	overflow: visible;
	width: 100%;
}

.p-money__qTitle {
	color: var(--money-color-accent);
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1.5;
	padding-top: 8rem;
	text-align: center;
}

.p-money__qTitle small {
	display: block;
	font-size: 2.8rem;
}

#money-3 .p-money__qTitle,
#money-4 .p-money__qTitle {
	font-size: 2.8rem;
}

#money-3 .p-money__qTitle small,
#money-4 .p-money__qTitle small {
	font-size: 3.2rem;
}

/* ============================================================
 * 1. メインビジュアル
 * ============================================================ */
.l-moneyMv {
	overflow: hidden;
	position: relative;
}

/* イラストは MV セクション全幅を基準に左右端へ配置するため、inner は positioning context にしない */
.p-moneyMv__inner {
	position: static;
}

/* Figma: タイトルは 495×216px・中央。SVGが preserveAspectRatio="none" のため
   箱の縦横比を 495:216 に固定して歪み（へしゃげ）を防ぐ */
.p-moneyMv__title {
	aspect-ratio: 495 / 216;
	/* Figma: MV上端(イラスト)からタイトルまで 80px */
	margin: 8rem auto 0;
	max-width: 80%;
	width: 49.5rem;
}

.p-moneyMv__title picture,
.p-moneyMv__title img,
.p-moneyMv__title svg {
	display: block;
	height: 100%;
	width: 100%;
}

.p-moneyMv__lead {
	font-size: 1.8rem;
	line-height: 2.22;
	margin: 7.6rem auto 0;
	/* 改行は <br> で Figma の4行に固定。1行目が折り返さない幅を確保 */
	max-width: 64rem;
	text-align: center;
}

/* Figma実寸: 左キャラ x-42・w349 / 右キャラ 右端ぴったり・w370。
   画面端へはみ出させ、Figmaにない余白を出さない */
.p-moneyMv__char {
	position: absolute;
	z-index: 1;
}

/* 登場：左右からスライドイン（back-out で「ぴょこっ」と出る）→ 終了後にふわふわ上下。
   transform 競合を避けるため、登場は span(translateX)・ふわふわは img(translateY) に分離 */
@keyframes moneyCharInLeft {
	from { opacity: 0; transform: translateX(-130%); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes moneyCharInRight {
	from { opacity: 0; transform: translateX(130%); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes moneyCharFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-0.8rem); }
}

.p-moneyMv__char img {
	animation: moneyCharFloat 3s ease-in-out 0.9s infinite;
	display: block;
	height: auto;
	width: 100%;
}

.p-moneyMv__char--left {
	animation: moneyCharInLeft 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	left: -4.2rem;
	top: 3.5rem;
	width: 34.9rem;
}

.p-moneyMv__char--right {
	animation: moneyCharInRight 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	right: 0;
	top: 0;
	width: 37rem;
}

/* イントロの全身イラスト：スクロールで視界に入ったら登場（MVと同じ右→左＋ふわふわ）。
   JS が is-anim-init で初期非表示、is-inview で発火（JS無効時は通常表示のまま） */
.p-moneyTalk__icon--char.is-anim-init {
	opacity: 0;
}

.p-moneyTalk__icon--char.is-inview {
	animation: moneyCharInRight 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.p-moneyTalk__icon--char.is-inview img {
	animation: moneyCharFloat 3s ease-in-out 0.9s infinite;
}

/* モーション低減設定の利用者にはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
	.p-moneyMv__char--left,
	.p-moneyMv__char--right,
	.p-moneyMv__char img,
	.p-moneyTalk__icon--char.is-inview,
	.p-moneyTalk__icon--char.is-inview img,
	.p-moneyNavi__photo img,
	.p-moneyTalk__icon:not(.p-moneyTalk__icon--char) img {
		animation: none;
	}

	.p-moneyTalk__icon--char.is-anim-init {
		opacity: 1;
	}
}

/* ============================================================
 * 2. ナビゲーター紹介
 * ============================================================ */
.l-moneyNavi {
	margin-top: 8.1rem;
}

.p-moneyNavi__head {
	text-align: center;
}

.p-moneyNavi__label {
	background-color: var(--money-color-panel);
	border-radius: 100rem;
	color: var(--money-color-accent);
	display: inline-block;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
	padding: 1rem 4rem;
}

.p-moneyNavi__items {
	display: flex;
	gap: 0;
	justify-content: center;
	margin-top: 4rem;
}

/* Figma: ナビのイラストは約335〜353px。2体をほぼ隣接させて大きく見せる */
.p-moneyNavi__item {
	max-width: 34rem;
	width: 50%;
}

.p-moneyNavi__photo {
	margin: 0 auto;
	max-width: 33rem;
	width: 100%;
}

/* ナビのポートレートは±5°でゆらゆら（ゲームキャラ風のウキウキ感）。足元支点で揺らす */
@keyframes moneyNaviWiggle {
	0%, 100% { transform: rotate(-1deg); }
	50%      { transform: rotate(1deg); }
}

.p-moneyNavi__photo img {
	animation: moneyNaviWiggle 1.6s ease-in-out infinite;
	display: block;
	height: auto;
	transform-origin: bottom center;
	width: 100%;
}

/* 2人目は逆位相で揺らし、動きに変化をつける */
.p-moneyNavi__item:nth-child(2) .p-moneyNavi__photo img {
	animation-delay: -0.8s;
}

.p-moneyNavi__initial {
	font-size: 2.8rem;
	font-weight: 700;
	margin-top: 1rem;
	text-align: center;
}

.p-moneyNavi__desc {
	font-size: 1.8rem;
	line-height: 1.66;
	margin: 2rem auto 0;
	max-width: 27.5rem;
}

/* ============================================================
 * 3. アンカーリンク
 * ============================================================ */
.l-moneyAnchor {
	margin-top: 8rem;
}

/* Figma: ボタン427px×2＋間隔40px＝セクション894pxを中央寄せ */
.p-moneyAnchor__items {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem 4rem;
	justify-content: center;
	margin: 0 auto;
	max-width: 89.4rem;
}

.p-moneyAnchor__item {
	width: calc(50% - 2rem);
}

.p-moneyAnchor__item:nth-child(n+3) {
	min-height: 11.9rem;
}

.p-moneyAnchor__link {
	align-items: center;
	border: 1px solid var(--money-color-accent);
	border-radius: 100rem;
	color: var(--money-color-text);
	display: flex;
	/* Figma: 左右パディング約19.5px・数字↔文字13px。①②が1行に収まる内側余白に合わせる */
	gap: 1.2rem;
	min-height: 8rem;
	padding: 1rem 1.5rem;
	transition: background-color 0.3s, color 0.3s;
}

/* Figma実アセット: オレンジ塗り円＋内側の白リング（SVGをそのまま使用）。数字は上に重ねる */
.p-moneyAnchor__num {
	align-items: center;
	background: url(images/anchor_num.svg) center / contain no-repeat;
	color: var(--money-color-panel);
	display: flex;
	flex-shrink: 0;
	font-family: "acumin-pro", sans-serif;
	font-size: 2rem;
	height: 4.3rem;
	justify-content: center;
	line-height: 1;
	padding-bottom: 2px;
	width: 4.3rem;
}

.p-moneyAnchor__text {
	flex: 1;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.45;
	/* ①②は1行・③④は<br>でのみ改行（Figma準拠） */
	white-space: nowrap;
}

/* Figma実アセット: オレンジ塗り円＋白の下矢印（ステム付き）。SVGをそのまま使用 */
.p-moneyAnchor__arrow {
	background: url(images/anchor_arrow.svg) center / contain no-repeat;
	flex-shrink: 0;
	height: 2.85rem;
	width: 2.85rem;
}

/* ホバー: 背景クリーム寄りの淡い強調（アイコンSVGはそのまま視認できる範囲に留める） */
.p-moneyAnchor__link:hover {
	background-color: #fff5ef;
}

/* ============================================================
 * 4. セクション共通 余白
 * ============================================================ */
.l-moneySection {
	margin-top: 16.7rem;
}

.l-moneySection + .l-moneySection {
	margin-top: 10rem;
}

/* ============================================================
 * 5. 吹き出し（会話劇）
 * ============================================================ */
.p-moneyTalk {
	margin: 0 auto;
	margin-top: 8rem;
	max-width: 100rem;
}

.p-moneyTalk--intro {
	margin-top: 5.1rem;
}

.p-moneyTalk__row {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.p-moneyTalk__row + .p-moneyTalk__row {
	margin-top: -4.2rem;
}

/* Figma 271:3153: セクション1冒頭の全身イラストは白カード右端基準で配置 */
.p-moneyTalk__row--intro {
	height: 20.4rem;
	position: relative;
	width: 100%;
}

.p-moneyTalk__row--intro .p-moneyTalk__icon--char {
	margin-top: 0;
	position: absolute;
	right: -6.9rem;
	top: 0;
}

.p-moneyTalk__row--intro .p-moneyTalk__bubble {
	margin-right: 0;
	max-width: 35rem;
	position: absolute;
	right: 2.7rem;
	top: 2.2rem;
	width: 35rem;
}

.p-moneyTalk--intro .p-moneyTalk__row--right .p-moneyTalk__bubble {
	margin-right: 0;
}

/* T先生（右）= オレンジ吹き出し / Y先生（左）= 黄吹き出し */
.p-moneyTalk__row--right {
	align-items: flex-end;
}

/* Figma 299:1332: アイコンは navi 画像を頭部にクロップ（円マスクなし）。
   箱 183×119px＝18.3rem×11.9rem、画像は幅100%・上揃えで頭〜肩を見せる */
.p-moneyTalk__icon {
	flex-shrink: 0;
	height: 11.9rem;
	margin-top: -3.4rem;
	order: 2;
	overflow: hidden;
	width: 18.3rem;
}

.p-moneyTalk__icon img {
	display: block;
	height: auto;
	width: 100%;
}

/* 会話アイコン(navi_y/navi_t)もナビと同じ±1°でゆらゆら。イントロの全身イラスト(char_t)は除外。
   開始タイミングは行ごとに散らして同期しないようにする */
.p-moneyTalk__icon:not(.p-moneyTalk__icon--char) img {
	animation: moneyNaviWiggle 1.6s ease-in-out infinite;
	transform-origin: bottom center;
}

.p-moneyTalk__row:nth-child(5n+1) .p-moneyTalk__icon:not(.p-moneyTalk__icon--char) img {
	animation-delay: -0.1s;
}

.p-moneyTalk__row:nth-child(5n+2) .p-moneyTalk__icon:not(.p-moneyTalk__icon--char) img {
	animation-delay: -0.9s;
}

.p-moneyTalk__row:nth-child(5n+3) .p-moneyTalk__icon:not(.p-moneyTalk__icon--char) img {
	animation-delay: -1.4s;
}

.p-moneyTalk__row:nth-child(5n+4) .p-moneyTalk__icon:not(.p-moneyTalk__icon--char) img {
	animation-delay: -0.5s;
}

.p-moneyTalk__row:nth-child(5n) .p-moneyTalk__icon:not(.p-moneyTalk__icon--char) img {
	animation-delay: -1.2s;
}

/* イントロは手振り全身イラスト（char_t・204px・クロップなし） Figma 271:3157 */
.p-moneyTalk__icon--char {
	height: auto;
	overflow: visible;
	width: 21.4rem;
}

.p-moneyTalk__bubble {
	border-radius: 10px;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.625;
	max-width: 55rem;
	order: 1;
	padding: 1.2rem 3rem;
	position: relative;
	width: 55rem;
}

.p-moneyTalk__bubble .is-em {
	color: var(--money-color-accent);
}

/* Figma: 黒文字＋オレンジ1px下線 */
.p-moneyTalk__bubble .is-underline {
	text-decoration: underline;
	text-decoration-color: var(--money-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

/* Figma: 両話者とも同じ淡い黄色 #fff2c1（左右はしっぽの向きのみで区別） */
.p-moneyTalk__row--left .p-moneyTalk__bubble {
	background-color: var(--money-color-talk);
	margin-left: 3.8rem;
}

.p-moneyTalk__row--left .p-moneyTalk__icon {
	margin-left: -5.6rem;
}

/* Figma: しっぽは吹き出し底から下向き・アイコン側。背景はCSS、しっぽは書き出しSVG（bubble_tail.svg）。
   左話者は scaleX(-1) で左向きに反転 */
.p-moneyTalk__row--left .p-moneyTalk__bubble::before {
	background: url(images/bubble_tail.svg) no-repeat center top / contain;
	bottom: -1.4rem;
	content: "";
	height: 1.5rem;
	left: 4rem;
	position: absolute;
	transform: scaleX(-1);
	width: 2.79rem;
}

.p-moneyTalk__row--right .p-moneyTalk__bubble {
	background-color: var(--money-color-talk);
	margin-right: 3.7rem;
}

.p-moneyTalk__row--right .p-moneyTalk__icon {
	margin-right: -5.3rem;
}

.p-moneyTalk__row--right .p-moneyTalk__bubble::before {
	background: url(images/bubble_tail.svg) no-repeat center top / contain;
	bottom: -1.4rem;
	content: "";
	height: 1.5rem;
	position: absolute;
	right: 4rem;
	width: 2.79rem;
}

/* ============================================================
 * 6. 学費一覧テーブル（セクション1）
 * ============================================================ */
.p-moneyFee {
	margin-top: -5rem;
}

.p-moneyFee__title {
	color: var(--money-color-accent);
	font-size: 2.8rem;
	font-weight: 500;
	text-align: center;
}

.p-moneyFee__note {
	color: var(--money-color-muted);
	font-size: 1.6rem;
	font-weight: 400;
	margin-top: 2.5rem;
	text-align: center;
}

.p-moneyFee__rows {
	margin-top: 5.4rem;
}

.p-moneyFee__row {
	border-top: 3px dotted var(--money-color-text);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 33rem;
	padding: 3.4rem 0;
}

.p-moneyFee__row:nth-child(3),
.p-moneyFee__row:nth-child(4) {
	min-height: 28rem;
}

.p-moneyFee__row:nth-child(5) {
	min-height: 30.6rem;
}

.p-moneyFee__row--single {
	justify-content: flex-start;
	padding-top: 4.3rem;
}

.p-moneyFee__rows .p-moneyFee__row:last-child {
	border-bottom: 3px dotted var(--money-color-text);
}

.p-moneyFee__rowHead {
	color: var(--money-color-text);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 3rem;
	text-align: center;
	white-space: nowrap;
}

.p-moneyFee__body {
	align-items: center;
	display: flex;
	gap: 0;
	justify-content: space-around;
	width: 100%;
}

.p-moneyFee__row--single .p-moneyFee__body {
	flex-direction: column;
}

.p-moneyFee__row--single .p-moneyFee__total {
	margin-top: 2.8rem;
	/* etc(nowrap)を年次ブロックの中心軸に合わせて中央揃えにする */
	text-align: center;
	width: 100%;
}

.p-moneyFee__row--single .p-moneyFee__etc {
	line-height: 1.6;
	margin-top: 0;
	white-space: nowrap;
}

.p-moneyFee__years {
	align-items: center;
	display: flex;
	gap: 3.4rem;
}

.p-moneyFee__year {
	text-align: center;
}

.p-moneyFee__yearLabel {
	font-size: 1.8rem;
	font-weight: 500;
}

.p-moneyFee__yearValue {
	font-size: 2.6rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin: 0.4rem 0 0.4rem;
}

.p-moneyFee__amountNum {
	font-family: "acumin-pro", sans-serif;
	font-weight: 500;
}

.p-moneyFee__amountYen {
	font-size: 1.8rem;
}

.p-moneyFee__yearSub .p-moneyFee__amountYen,
.p-moneyFee__totalSub .p-moneyFee__amountYen {
	font-size: 1.4rem;
}

.p-moneyFee__etc .p-moneyFee__amountNum {
	font-size: 2rem;
}

.p-moneyFee__etc .p-moneyFee__amountYen {
	font-size: 1.4rem;
}

/* Figma: 再進学／社会人サポート額（）は本文と同じ黒・18px */
.p-moneyFee__yearSub {
	color: var(--money-color-text);
	font-size: 1.8rem;
	font-weight: 500;
}

.p-moneyFee__plus {
	font-size: 2rem;
	font-weight: 500;
}

.p-moneyFee__total {
	width: 40rem;
}

.p-moneyFee__totalBox {
	background: url(images/fee_total_bg.png) center / 100% 100% no-repeat;
	border-radius: 1rem;
	padding: 3.2rem 2rem;
	position: relative;
	text-align: center;
}

.p-moneyFee__totalLabel {
	font-size: 1.8rem;
	font-weight: 500;
}

.p-moneyFee__totalValue {
	font-size: 2.6rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.2;
	margin: 0.4rem 0 0.4rem;
}

.p-moneyFee__totalSub {
	color: var(--money-color-text);
	font-size: 1.8rem;
	font-weight: 500;
}

.p-moneyFee__etc {
	color: var(--money-color-accent);
	font-size: 1.5rem;
	font-weight: 400;
	margin-top: 1.5rem;
	text-align: center;
}

/* 学費一覧スライダー（SPのみ slick 化／PCは通常stack） */
.p-moneySlider .slick-list,
.p-moneySlider .slick-track {
	height: auto;
}

/* ============================================================
 * 7. 共通ボタン（白丸ボタン）
 * ============================================================ */
.p-moneyBtn {
	margin-top: 11rem;
	text-align: center;
}

.p-moneyBtn__link {
	align-items: center;
	background-color: var(--money-color-panel);
	border: 1px solid var(--money-color-text);
	border-radius: 100rem;
	color: var(--money-color-text);
	display: inline-flex;
	font-size: 1.6rem;
	font-weight: 500;
	gap: 2rem;
	letter-spacing: 0.16rem;
	min-height: 5.3rem;
	padding: 0.8rem 0.8rem 0.8rem 3rem;
	transition: background-color 0.3s, color 0.3s;
}

/* Figma 299:1363: 黒円∅29＋白い右向きステム矢印（書き出しSVGをそのまま使用） */
.p-moneyBtn__arrow {
	background: url(images/btn_arrow.svg) center / contain no-repeat;
	flex-shrink: 0;
	height: 2.9rem;
	width: 2.9rem;
}

.p-moneyBtn__link:hover {
	background-color: var(--money-color-text);
	color: var(--money-color-panel);
}

/* ============================================================
 * 8. 学費支援制度カード（セクション2・3）
 * ============================================================ */
.p-moneySupport {
	margin-top: 5rem;
}

.p-moneySupport__item {
	border-top: 3px dotted var(--money-color-text);
	padding: 4rem 0;
	text-align: center;
}

.p-moneySupport__item:last-child {
	border-bottom: 3px dotted var(--money-color-text);
}

#money-2 .p-moneySupport__itemInner {
	margin: 0 auto;
	max-width: 63rem;
}

#money-2 .p-moneySupport__body,
#money-2 .p-moneySupport__meta,
#money-2 .p-moneySupport__howto {
	max-width: none;
}

.p-moneySupport__tag {
	border: 2px solid var(--money-color-border);
	border-radius: 0.5rem;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	margin-bottom: 2.6rem;
	padding: 0.8rem 1.4rem;
}

.p-moneySupport__name {
	color: var(--money-color-accent);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.p-moneySupport__nameSub {
	color: var(--money-color-accent);
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
}

.p-moneySupport__body {
	font-size: 1.8rem;
	letter-spacing: 0.05rem;
	line-height: 1.66;
	margin: 4rem auto 0;
	max-width: 62rem;
	text-align: left;
}

.p-moneySupport__meta {
	font-size: 1.8rem;
	letter-spacing: 0.05rem;
	line-height: 1.66;
	margin: 2rem auto 0;
	max-width: 62rem;
	text-align: left;
}

.p-moneySupport__body--split,
.p-moneySupport__meta--split {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
}

.p-moneySupport__label,
.p-moneySupport__content {
	min-width: 0;
}

/* Figma: ※注釈はグレー・16px */
.p-moneySupport__metaNote {
	color: var(--money-color-muted);
	font-size: 1.6rem;
}

.p-moneySupport__howto {
	color: var(--money-color-accent);
	font-size: 1.8rem;
	font-weight: 500;
	margin: 2.4rem auto 0;
	max-width: 62rem;
	text-align: left;
}

.p-moneySupport__howto + .p-moneySupport__body {
	margin-top: 1.6rem;
}

/* Figma: 本文中のリンクはティール #2dc8aa＋下線（吹き出し内・制度カードのmeta内とも同一） */
.p-moneyTalk__bubble a,
.p-moneySupport__meta a,
.p-moneySupport__body a {
	color: var(--money-color-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* セクション3：建築関連アルバイト紹介の例 + 注釈吹き出し */
.p-moneySupport__example {
	align-items: center;
	display: flex;
	gap: 3rem;
	justify-content: center;
	margin: 3rem auto 0;
	max-width: 80rem;
}

.p-moneySupport__exampleBox {
	background-color: var(--money-color-surface);
	border-radius: 8px;
	font-size: 1.8rem;
	line-height: 1.66;
	padding: 3rem;
	text-align: left;
	width: 35.8rem;
}

.p-moneySupport__exampleTitle {
	font-size: 1.8rem;
	font-weight: 500;
	margin-bottom: 1.2rem;
}

.p-moneySupport__exampleText {
	margin: 0;
}

.p-moneySupport__exampleNote {
	background-color: var(--money-color-panel);
	border: 1px solid var(--money-color-muted);
	border-radius: 8px;
	font-size: 1.6rem;
	line-height: 1.65;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 16.5rem;
	padding: 2.3rem 2.7rem;
	position: relative;
	text-align: left;
	width: 32.5rem;
}

/* 吹き出しの尻尾（PC：左向き・上下中央）。45°回転した正方形の外側2辺だけに1pxボーダーを付け、
   箱の白背景で内側2辺を隠して「1px枠線の三角ノッチ」にする（箱の枠線と同じ1px） */
.p-moneySupport__exampleNote::before {
	background: var(--money-color-panel);
	border-bottom: 1px solid var(--money-color-muted);
	border-left: 1px solid var(--money-color-muted);
	content: "";
	height: 1.4rem;
	left: -0.75rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 1.4rem;
}

.p-moneySupport__exampleNote::after {
	content: none;
}

.p-moneySupport__exampleNoteTitle {
	font-size: 1.8rem;
	font-weight: 500;
	margin-bottom: 1.2rem;
}

/* ============================================================
 * 9. モデルケース（セクション4）
 * ============================================================ */
.p-moneyCase {
	display: flex;
	gap: 2.3rem;
	justify-content: center;
	margin: 5rem auto 0;
}

.p-moneyCase__item {
	width: 28rem;
}

/* カードの見た目は内側要素へ。スライダー時にスライド端で枠線が見切れないよう、
   .p-moneyCase__item（スライド）側に余白を持たせて inner を内側に配置する */
.p-moneyCase__inner {
	background-color: var(--money-color-surface);
	border: 1px solid var(--money-color-muted);
	border-radius: 3rem;
	height: 100%;
	padding: 1.8rem 1.5rem 3rem;
}

.p-moneyCase__title {
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	text-align: center;
}

.p-moneyCase__title .is-alpha {
	font-size: 2rem;
}

.p-moneyCase__illust {
	margin: 1.4rem auto 0;
	width: 21.7rem;
}

.p-moneyCase__illust img {
	border: 0.3rem solid var(--money-color-panel);
	box-sizing: border-box;
	display: block;
	height: auto;
	width: 100%;
}

.p-moneyCase__graph {
	margin: 1.4rem auto 0;
	width: 21.8rem;
}

.p-moneyCase__graph picture,
.p-moneyCase__graph img {
	display: block;
	height: auto;
	width: 100%;
}

/* 収支グラフ上部の「↑収入 / ↓支出」ラベル（Figma 308:6363 / 6366）。
   青棒中心≈22.8%・赤棒中心≈76.5% に合わせて2分割配置する。 */
.p-moneyCase__graphLabels {
	display: flex;
	margin-bottom: 0.6rem;
}

.p-moneyCase__graphLabel {
	align-items: center;
	display: inline-flex;
	font-size: 1.5rem;
	gap: 0.2rem;
	justify-content: center;
	letter-spacing: 0.05rem;
}

.p-moneyCase__graphLabel--in {
	color: var(--money-color-income);
	width: 45.6%;
}

.p-moneyCase__graphLabel--out {
	color: var(--money-color-outgoing);
	margin-left: 7.4%;
	width: 47%;
}

.p-moneyCase__graphArrow {
	font-weight: 700;
}

/* ============================================================
 * 10. 関連情報
 * ============================================================ */
/* お金の話ページのみ、共通 .l-section の上余白を無効化して
   セクション間の余白を各ブロックの padding で制御する。 */
.l-section {
	margin-top: 0;
}

.l-moneyRelated {
	padding: 18rem 0 24rem;
}

.p-moneyRelated__title {
	color: var(--money-color-accent);
	font-size: 3.2rem;
	font-weight: 500;
	text-align: center;
}

.p-moneyRelated__items {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem 2.4rem;
	justify-content: center;
	margin: 5rem auto 0;
	max-width: 71rem;
}

.p-moneyRelated__item {
	width: calc(50% - 1.2rem);
}

.p-moneyRelated__link {
	align-items: center;
	background-color: #f2f2f2;
	border-radius: 100rem;
	box-shadow: 0.4rem 0.6rem 0 rgba(225, 200, 110, 0.6);
	color: var(--money-color-text);
	display: flex;
	font-size: 1.6rem;
	font-weight: 500;
	gap: 1.6rem;
	letter-spacing: 0.16rem;
	min-height: 5.3rem;
	padding: 1rem 2.7rem;
	transition: transform 0.2s, box-shadow 0.2s;
}

.p-moneyRelated__link:hover {
	box-shadow: 0.2rem 0.3rem 0 rgba(225, 200, 110, 0.6);
	transform: translate(0.2rem, 0.3rem);
}

.p-moneyRelated__linkText {
	flex: 1;
}

/* Figma 308:6469: 白円∅29＋オレンジの右向きステム矢印（書き出しSVGをそのまま使用） */
.p-moneyRelated__arrow {
	background: url(images/related_arrow.svg) center / contain no-repeat;
	flex-shrink: 0;
	height: 2.9rem;
	width: 2.9rem;
}

/* ============================================================
 * 11. スライダー（dot / arrow）見た目 ── 学費一覧SPスライダー用
 * ============================================================ */
.p-moneySlider .slider-dots {
	display: flex;
	gap: 2rem;
	justify-content: center;
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
}

.p-moneySlider .slider-dots li {
	height: 1rem;
	width: 1rem;
}

.p-moneySlider .slider-dots li button {
	background-color: #e0e0e0;
	border: 0;
	border-radius: 50%;
	font-size: 0;
	height: 1rem;
	padding: 0;
	width: 1rem;
}

.p-moneySlider .slider-dots li.slick-active button {
	background-color: var(--money-color-accent);
}

@media screen and (min-width: 769px) {
	/* PCはナビのイラストとテキストを近づける（負の下マージン） */
	.p-moneyNavi__photo {
		margin: 0 auto -4rem;
	}

	#money-1 .p-money__card {
		padding-bottom: 12rem;
	}

	#money-2 .p-money__card {
		padding-bottom: 14rem;
	}

	#money-3 .p-money__card {
		padding-bottom: 13rem;
	}

	#money-4 .p-money__card {
		padding-bottom: 13rem;
	}

	.p-moneyCase {
		display: block;
		max-width: 96rem;
		position: relative;
		width: 100%;
	}

	.p-moneyCase__item {
		width: 100%;
	}

	.p-moneyCase__inner {
		align-items: center;
		display: grid;
		gap: 5rem;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		min-height: 52rem;
		padding: 5rem 5.5rem;
	}

	.p-moneyCase__profile,
	.p-moneyCase__data {
		min-width: 0;
	}

	.p-moneyCase__title {
		color: var(--money-color-accent);
		font-size: 3rem;
		font-weight: 400;
		line-height: 1.45;
		text-align: left;
	}

	.p-moneyCase__title .is-alpha {
		font-size: 3.4rem;
	}

	.p-moneyCase__illust {
		margin-top: 3rem;
		width: 100%;
	}

	.p-moneyCase__graph {
		margin-top: 0;
		width: 100%;
	}

	.p-moneyCase__graphLabels {
		margin-bottom: 1.5rem;
	}

	.p-moneyCase__graphLabel {
		font-size: 1.8rem;
		font-weight: 500;
	}

	.p-moneyCase.slick-initialized .slick-list {
		overflow: hidden;
	}

	.p-moneyCase .slide-arrow {
		background: url("images/slider_arrow.svg") center / contain no-repeat;
		border: 0;
		cursor: pointer;
		font-size: 0;
		height: 5rem;
		margin-top: -2.5rem;
		padding: 0;
		position: absolute;
		top: 50%;
		width: 5rem;
		z-index: 5;
	}

	.p-moneyCase .prev-arrow {
		left: -7rem;
	}

	.p-moneyCase .next-arrow {
		right: -7rem;
		transform: scaleX(-1);
	}

	.p-moneyCase .slide-arrow::before {
		content: none;
	}

	#money-2 .p-moneySupport {
		margin-top: 6rem;
	}

	#money-2 .p-moneySupport__item:nth-child(1) {
		padding: 5rem 0;
	}

	#money-2 .p-moneySupport__item:nth-child(2) {
		min-height: 52.6rem;
	}

	#money-2 .p-moneySupport__item:nth-child(3) {
		min-height: 37rem;
	}

	#money-2 .p-moneySupport__item:nth-child(4) {
		min-height: 42.7rem;
	}

	#money-2 .p-moneySupport__item:nth-child(5) {
		min-height: 47.5rem;
	}

	#money-3 .p-moneySupport__item:nth-child(1) {
		min-height: 51.2rem;
	}

	#money-3 .p-moneySupport__item:nth-child(2) {
		min-height: 56.9rem;
	}
}

/* ============================================================
 * SP（768px 以下）
 * ============================================================ */
@media screen and (max-width: 768px) {
	.p-money__inner {
		padding: 0 2rem;
	}

	.p-money__card {
		border-radius: 4rem;
		padding: 0 1.5rem 6rem;
	}

	.p-money__badge {
		font-size: 3.6rem;
		height: 6rem;
		top: -3rem;
		width: 6rem;
	}

	.p-money__qTitle {
		font-size: 2.6rem;
		padding-top: 6rem;
	}

	.p-money__qTitle small {
		font-size: 2.2rem;
	}

	#money-3 .p-money__qTitle,
	#money-4 .p-money__qTitle {
		font-size: 2.2rem;
	}

	#money-3 .p-money__qTitle small,
	#money-4 .p-money__qTitle small {
		font-size: 2.6rem;
	}

	/* MV */
	/* SPはFigmaの縦組タイトル（mv_title_sp.png 570×1326）。
	   Figma SP実寸: w281/h654・frame828基準 → 幅約34% */
	.p-moneyMv__title {
		aspect-ratio: 570 / 1326;
		margin-top: 2rem;
		max-width: 14.5rem;
		width: 34%;
	}

	/* Figma SP実寸(828基準/CSS=÷2): 左キャラ w349→17.4rem・画面左端ぴったり /
	   右キャラ w356→17.8rem・画面右端ぴったり。非対称を維持 */
	.p-moneyMv__char--left {
		left: -1.5rem;
		top: 12rem;
		width: 17.4rem;
	}

	.p-moneyMv__char--right {
		right: -1.5rem;
		top: 11rem;
		width: 17.8rem;
	}

	/* Figma SP: リードは左寄せ1ブロック。キャラは絶対配置(top4〜5rem＋高さ約17.5rem＝
	   下端約22rem)。タイトルは通常フローでリードはその下に続くが、キャラ下端まで
	   確実にクリアさせるための余白を確保する（縦組タイトル素材が未提供のため安全側に倍率維持） */
	.p-moneyMv__lead {
		font-size: 1.79rem;
		margin-top: 4rem;
		max-width: none;
		text-align: left;
	}

	/* SPではリード文の改行（<br>）を全て無効化し、折り返しに任せる */
	.p-moneyMv__lead br {
		display: none;
	}

	/* ナビゲーター（2カラム維持） */
	/* SPは列間の余白(gap)を保ったままイラスト(写真)だけを拡大する。
	   テキスト(initial/desc)は item 幅のままなので列間隔は変わらない */
	.p-moneyNavi__items {
		gap: 2rem;
	}

	/* min-width:150% で拡大し、左右の負マージンでボックス内中央に置く */
	.p-moneyNavi__photo {
		margin-left: -26%;
		margin-right: -25%;
		max-width: none;
		min-width: 150%;
	}

	.p-moneyNavi__desc {
		font-size: 1.5rem;
	}

	/* text-align は基底(center)を継承。font-size/weight/margin はSP個別指定 */
	.p-moneyNavi__initial {
		font-size: 2.2rem;
		font-weight: 500;
		margin-top: -2rem;
	}

	/* アンカーリンク：1カラム */
	.l-moneyAnchor {
		margin-top: 6rem;
	}

	.p-moneyAnchor__item {
		min-height: 0;
		width: 100%;
	}

	/* nth-child(n+3) はPC基底の min-height(11.9rem) が specificity で勝つため、
	   SPでは同 specificity で打ち消す */
	.p-moneyAnchor__item:nth-child(n+3) {
		min-height: 0;
	}

	.p-moneyAnchor__items {
		gap: 1.5rem;
	}

	/* PCと差分のある値のみ上書き（align-items/border/color/display/transition はPC基底を継承） */
	.p-moneyAnchor__link {
		gap: 0.6rem;
		min-height: 6rem;
		padding: 0 1rem;
	}

	/* PCと差分のあるサイズのみ上書き（background/flex-shrink はPC基底を継承） */
	.p-moneyAnchor__arrow {
		height: 2.5rem;
		width: 2.5rem;
	}

	.p-moneyAnchor__text {
		font-size: 1.4rem;
	}

	.l-moneySection {
		margin-top: 12rem;
	}

	.l-moneySection + .l-moneySection {
		margin-top: 7rem;
	}

	/* 吹き出し：縦積み（アイコンは吹き出し下） */
	.p-moneyTalk__row,
	.p-moneyTalk__row--right {
		align-items: flex-start;
		flex-direction: column;
		gap: 0;
	}

	.p-moneyTalk__row + .p-moneyTalk__row {
		margin-top: 3rem;
	}

	.p-moneyTalk {
		margin-top: 6rem;
	}

	.p-moneyTalk--intro {
		margin-top: 5rem;
	}

	.p-moneyTalk__row--intro {
		height: auto;
		width: 100%;
	}

	.p-moneyTalk__row--intro .p-moneyTalk__icon--char,
	.p-moneyTalk__row--intro .p-moneyTalk__bubble {
		position: relative;
		right: auto;
		top: auto;
	}

	/* 基底の max-width:35rem（specificity 0,2,0）を同 specificity で上書き */
	.p-moneyTalk__row--intro .p-moneyTalk__bubble {
		max-width: 31rem;
	}

	/* イントロの全身イラストはコンテンツ右端へ寄せ、浮き（負マージン）をなくす。
	   汎用アイコンの縮小に飲まれないよう全身イラストの幅は維持する */
	.p-moneyTalk__row--intro .p-moneyTalk__icon--char {
		align-self: flex-end;
		margin-top: 0;
		width: 18.4rem;
	}

	.p-moneyFee {
		margin-top: 12rem;
	}

	.p-moneyFee__note {
		line-height: 2.2rem;
		margin: 3rem 0;
	}

	.p-moneyTalk__bubble {
		font-size: 1.5rem;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		padding: 1.8rem 2rem;
		/* body { text-align: justify } の継承を打ち消す（SPの狭幅で字間が開くため） */
		text-align: left;
		width: 100%;
	}

	.p-moneyTalk__row--left .p-moneyTalk__bubble,
	.p-moneyTalk__row--right .p-moneyTalk__bubble {
		margin-left: 0;
		margin-right: 0;
	}

	.p-moneyTalk__row--left .p-moneyTalk__bubble::before {
		border: 0;
		bottom: -1.4rem;
		height: 1.5rem;
		left: 8rem;
		top: auto;
		width: 2.79rem;
	}

	.p-moneyTalk__row--right .p-moneyTalk__bubble::before {
		border: 0;
		bottom: -1.4rem;
		height: 1.5rem;
		right: 8rem;
		top: auto;
		width: 2.79rem;
	}

	/* 対話の顔アイコン（SP）。margin-left/right は基底既定0かつ左右ルールが上書きするため省略 */
	.p-moneyTalk__icon {
		height: 9.2rem;
		margin-top: -1.2rem;
		width: 14rem;
	}

	.p-moneyTalk__icon img {
		height: auto;
		width: 100%;
	}

	.p-moneyTalk__row--left .p-moneyTalk__icon {
		left: -3.5rem;
		margin-left: 0;
		margin-top: -2rem;
		position: relative;
	}

	.p-moneyTalk__row--right .p-moneyTalk__icon {
		align-self: flex-end;
		margin-right: 0;
		margin-top: -2rem;
		position: relative;
		right: -3.7rem;
	}

	/* 学費一覧：スライダー（1スライド＝1学科を縦積み） */
	.p-moneyFee__title {
		font-size: 2.4rem;
	}

	.p-moneyFee__rows {
		margin-top: 1rem;
	}

	/* flex-direction/gap はPC基底と同じため記載しない。border は基底の
	   border-top＋last-child border-bottom と二重破線になるので付けない */
	.p-moneyFee__row {
		min-height: 0;
		padding: 4rem 1rem;
		text-align: center;
	}

	.p-moneyFee__row:nth-child(3),
	.p-moneyFee__row:nth-child(4),
	.p-moneyFee__row:nth-child(5) {
		min-height: 0;
	}

	.p-moneyFee__rowHead {
		font-size: 2rem;
		line-height: 1.4;
		margin-bottom: 2rem;
		white-space: normal;
	}

	.p-moneyFee__body {
		flex-direction: column;
		gap: 0;
	}

	.p-moneyFee__years {
		gap: 1.4rem;
		justify-content: center;
		margin-top: 3rem;
	}

	.p-moneyFee__yearSub {
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.p-moneyFee__yearValue {
		font-size: 2.2rem;
	}

	.p-moneyFee__total {
		margin: 3rem auto 0;
		width: 100%;
	}

	.p-moneyFee__totalBox {
		margin: 3rem 0;
		padding: 3rem 0;
	}

	.p-moneyFee__etc {
		font-size: 1.6rem;
		line-height: 2rem;
		margin: 4rem 0 2rem;
	}

	/* スライダー左右矢印（collection と同じ矢印画像を流用）。SP（slick初期化時）のみ */
	.p-moneySlider.slick-initialized {
		position: relative;
	}

	/* 左右矢印は Figma（トピック4）の円形矢印 SVG を全スライダー共通で使用。
	   next は同一SVGを scaleX(-1) で反転（白丸＋黒シェブロン） */
	.p-moneySlider .slide-arrow {
		background: url("images/slider_arrow.svg") center / contain no-repeat;
		border: 0;
		cursor: pointer;
		font-size: 0;
		height: 4.1rem;
		margin-top: -2.05rem;
		padding: 0;
		position: absolute;
		top: 50%;
		width: 4.1rem;
		z-index: 5;
	}

	.p-moneySlider .prev-arrow {
		left: -3.3rem;
	}

	.p-moneySlider .next-arrow {
		right: -3.3rem;
		transform: scaleX(-1);
	}

	.p-moneySlider .slide-arrow::before {
		content: none;
	}

	/* 丸ドット破線は --dot 付きスライダー（学費行／支援カード）のみ。
	   枠線付きカード（モデルケース）には適用しない */
	.p-moneySlider--dot.slick-initialized .slick-slide {
		background-image:
			radial-gradient(circle, var(--money-color-text) 1.5px, transparent 1.6px),
			radial-gradient(circle, var(--money-color-text) 1.5px, transparent 1.6px);
		background-position: left top, left bottom;
		background-repeat: repeat-x;
		background-size: 8px 3px;
		border: 0;
	}

	/* 支援制度カード */
	.p-moneySupport.p-moneySlider--dot .p-moneySupport__item {
		padding-left: 2.4rem;
		padding-right: 2.4rem;
	}

	.p-moneySupport__name {
		font-size: 2.2rem;
	}

	.p-moneySupport__body--split,
	.p-moneySupport__meta--split {
		display: block;
	}

	.p-moneySupport__body--split .p-moneySupport__label,
	.p-moneySupport__meta--split .p-moneySupport__label,
	.p-moneySupport__body--split .p-moneySupport__content,
	.p-moneySupport__meta--split .p-moneySupport__content {
		display: block;
	}

	/* body/meta/howto の font-size は基底(1.8rem)を継承するためSP指定は削除 */

	/* セクション3 例＋注釈：縦積み */
	.p-moneySupport__example {
		flex-direction: column;
		gap: 2rem;
	}

	/* Figma SP: 例ボックス・吹き出しは全幅にせず中央寄せ（右ボーダー見切れ防止）。テキストは左寄せのまま */
	.p-moneySupport__exampleBox,
	.p-moneySupport__exampleNote {
		margin-left: auto;
		margin-right: auto;
		width: 92%;
	}

	/* 尻尾は上・中央（Figma SP） */
	/* SPは上向きノッチ（45°回転正方形の上・左辺を1pxボーダーにし中央上に配置） */
	.p-moneySupport__exampleNote::before {
		border-bottom: 0;
		border-top: 1px solid var(--money-color-muted);
		left: 50%;
		top: -0.8rem;
		transform: translateX(-50%) rotate(45deg);
	}

	/* モデルケース：縦積み */
	.p-moneyCase {
		flex-direction: column;
		gap: 3rem;
	}

	.p-moneyCase__item {
		margin: 0 auto;
		max-width: 36rem;
		width: 100%;
	}

	.p-moneyCase__inner {
		display: block;
		padding: 3rem 0;
	}

	/* スライダー時はスライド端から内側に枠線を置き、見切れ・隣スライドの覗きを防ぐ */
	.p-moneyCase.slick-initialized .slick-slide {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.p-moneyCase__illust {
		width: 100%;
	}

	.p-moneyCase__graph {
		width: 29rem;
	}

	.p-moneyCase__graphLabel {
		font-size: 1.5rem;
	}

	.l-moneyRelated {
		padding: 11rem 0 14rem;
	}

	/* ボタン */
	.p-moneyBtn {
		margin-top: 5rem;
	}

	/* SPは常に全幅・文言は中央寄せ、矢印は右端から1remに絶対配置 */
	.p-moneyBtn__link {
		font-size: 1.5rem;
		justify-content: center;
		padding: 1.4rem 1rem 1.4rem 2rem;
		position: relative;
		width: 100%;
	}

	.p-moneyBtn__text {
		line-height: 2rem;
	}

	.p-moneyBtn__arrow {
		position: absolute;
		right: 1rem;
		top: 50%;
		transform: translateY(-50%);
	}

	/* 関連情報：1カラム */
	.p-moneyRelated__title {
		font-size: 2.6rem;
	}

	.p-moneyRelated__item {
		width: 100%;
	}
}