/**
 * Open Campus Reservation — Transmission Complete
 * Figma PC 1497-11105（1497:11272）/ TB 1573-34670（1634:18110）
 * SP 送信完了コンテンツ枠 Frame 570（1634:18117）・内側 Frame 2732（1634:18118）
 *
 * @package Senmon_School
 */

.senmon-school-oc-reservation-complete {
	background-color: var(--senmon-color-white);
	color: var(--senmon-color-gray-90);
}

.senmon-school-oc-reservation-complete__outer {
	padding: 120px 0;
	box-sizing: border-box;
}

.senmon-school-oc-reservation-complete__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--senmon-page-gutter-x);
	box-sizing: border-box;
}

.senmon-school-oc-reservation-complete__main {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* 見出し〜本文 16px、本文〜ボタン 80px（Figma 1497:11272） */
.senmon-school-oc-reservation-complete__title {
	margin: 0;
	font-family: var(--senmon-font-hero);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.5;
	letter-spacing: 2px;
	color: var(--senmon-color-primary);
}

/* PC 見出しのみ表示（TB では文言が異なる: 1634:18111） */
.senmon-school-oc-reservation-complete__title-line {
	display: block;
}

.senmon-school-oc-reservation-complete__title-line--tb {
	display: none;
}

.senmon-school-oc-reservation-complete__message {
	margin-top: 16px;
	font-family: var(--senmon-font-hero);
	font-weight: 500;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.8px;
	color: var(--senmon-color-gray-90);
}

.senmon-school-oc-reservation-complete__message p {
	margin: 0;
}

.senmon-school-oc-reservation-complete__message p + p {
	margin-top: 0;
}

.senmon-school-oc-reservation-complete__actions {
	margin-top: 80px;
	display: flex;
	justify-content: center;
	width: 100%;
}

.senmon-school-oc-reservation-complete__back {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 6px 24px;
	border-radius: 999px;
	border: 1px solid var(--senmon-color-primary);
	background-color: var(--senmon-color-white);
	color: var(--senmon-color-primary);
	text-decoration: none;
	font-family: var(--senmon-font-nav);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.7px;
	transition: background-color var(--senmon-transition), color var(--senmon-transition);
}

.senmon-school-oc-reservation-complete__back:hover {
	background-color: var(--senmon-color-primary);
	color: var(--senmon-color-white);
}

.senmon-school-oc-reservation-complete__back-icon {
	width: 6px;
	height: 9px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9' viewBox='0 0 6 9'%3E%3Cpath d='M1 0.5L5 4.5L1 8.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9' viewBox='0 0 6 9'%3E%3Cpath d='M1 0.5L5 4.5L1 8.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* TB（744 相当・コンテンツ幅 712 = 16px ガター ×2） */
@media (max-width: 959px) {
	.senmon-school-oc-reservation-complete__outer {
		padding: 40px 0;
	}

	.senmon-school-oc-reservation-complete__main {
		max-width: 100%;
	}

	.senmon-school-oc-reservation-complete__title-line--pc {
		display: none;
	}

	.senmon-school-oc-reservation-complete__title-line--tb {
		display: block;
	}

	.senmon-school-oc-reservation-complete__title {
		font-size: 32px;
		line-height: 1.5;
		letter-spacing: 1.6px;
	}

	/* 本文ブロック下〜ボタン 64px（Figma y240 − 176） */
	.senmon-school-oc-reservation-complete__actions {
		margin-top: 64px;
	}
}

/* TB のみ: layout.css の main min-height:50vh によるボタン下の空白を抑える（PC・SP・他ページは変更しない） */
@media (min-width: 601px) and (max-width: 1441px) {
	.senmon-school-main.senmon-school-oc-reservation-complete {
		min-height: 0;
	}
}

/*
 * SP（max-width: 600px = テーマ senmon-bp-sp）
 * Figma Frame 570（1634:18117）375×313 / 内 Frame 2732（1634:18118）x16 y40 343×176
 * 見出し72 + 間8 + 本文枠96 = 176 | 2732下端 y216 → ボタン y240 で上余白24px
 * ボタン下の余白は従来 calc(40px+130px) を約 1/3 に縮小（固定バー分も同比率で短縮）
 */
@media (max-width: 600px) {
	.senmon-school-oc-reservation-complete__outer {
		padding-top: 40px;
		padding-bottom: 40px;
		padding-left: 0;
		padding-right: 0;
	}

	/* 横 16px = Frame 2732 の x（375 幅時に本文 343px） */
	.senmon-school-oc-reservation-complete__inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* 見出し 2 行ぶんの行ボックス高さ 72px（1634:18119）→ 24px × line-height 1.5 × 2 */
	.senmon-school-oc-reservation-complete__title {
		font-size: 24px;
		line-height: 1.5;
		letter-spacing: 0.1em;
	}

	/* 見出し下〜本文 8px（1634:18120 y80 − 見出し高さ72） */
	.senmon-school-oc-reservation-complete__message {
		margin-top: 8px;
	}

	/* 本文ブロック下端（216）〜ボタン上端（240）= 24px（TB の64pxは上書き） */
	.senmon-school-oc-reservation-complete__actions {
		margin-top: 24px;
	}

	/* SP: ボタンは塗り（contact-complete と同様） */
	.senmon-school-oc-reservation-complete__back {
		background-color: var(--senmon-color-primary);
		color: var(--senmon-color-white);
	}

	.senmon-school-oc-reservation-complete__back:hover,
	.senmon-school-oc-reservation-complete__back:focus-visible,
	.senmon-school-oc-reservation-complete__back:active {
		background-color: var(--senmon-color-white);
		color: var(--senmon-color-primary);
		border-color: var(--senmon-color-primary);
	}
}