/**
 * 固定ページ: graduate_page 専用スタイル
 * URL: /graduate_page
 */

body {
	padding: 0 !important;
}

.page-graduate_page .sp-only {
	display: none !important;
}
@media (max-width: 768px) {
	.page-graduate_page .sp-only {
		display: block !important;
	}
}

.page-graduate_page {
	padding: 0 0 80px;
	margin-top: -16px;
}

@media (max-width: 768px) {
	.page-graduate_page {
		padding: 0 0 0;
	}
}

.page-graduate_page .container {
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 768px) {
	.page-graduate_page .container {
		padding: 0 24px;
	}
}

/* -------------------------------------------------------------
   KV（page-night_top と同構造）
   ------------------------------------------------------------- */
.page-graduate_page .kv-section {
	width: 100%;
	position: relative;
}

.page-graduate_page .kv-image {
	width: 100%;
	line-height: 0;
}

.page-graduate_page .kv-image img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: bottom;
}

@media (max-width: 1440px) {
	.page-graduate_page .kv-image {
		height: 270px;
		overflow: hidden;
	}
	.page-graduate_page .kv-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

@media (max-width: 768px) {
	.page-graduate_page .kv-image {
		height: 160px;
	}
}

.page-graduate_page .kv-text {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 4.8125rem;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.page-graduate_page .kv-text {
		height: auto;
		/* day_top と同じ余白 */
		padding: 4.1875rem var(--container-padding-x-sp, 24px);
	}
}

.page-graduate_page .kv-title {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-black);
}

.page-graduate_page .kv-title-inner {
	--kv-chars: 7;
	display: flex;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
}

.page-graduate_page .kv-title-inner .title-contact-text {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.page-graduate_page .kv-title-inner .mask-text {
	height: 4rem;
	width: auto;
	display: block;
	vertical-align: bottom;
	object-fit: contain;
}

/* 1440px〜768px：day_top と同じ縮小ロジック */
@media (max-width: 1440px) and (min-width: 769px) {
	.page-graduate_page .kv-title-inner {
		height: auto;
		width: 100%;
		/* day_top は 6文字想定のため、7文字でも同じサイズ感になるよう横幅を補正 */
		max-width: calc(30vw * (var(--kv-chars) / 6));
	}

	.page-graduate_page .kv-title-inner .title-contact-text {
		display: flex;
		height: 100%;
		min-height: 0;
		min-width: 0;
		flex: 1 1 0;
		/* 文字数で均等に分け、はみ出さないようにする */
		max-width: calc((100% - 4px * (var(--kv-chars) - 1)) / var(--kv-chars));
	}

	.page-graduate_page .kv-title-inner .mask-text {
		height: calc(2.5rem * (0.46 + 54vw / 1440));
		width: auto;
		max-width: 100%;
		object-fit: contain;
		display: block;
	}
}

@media (max-width: 768px) {
	.page-graduate_page .kv-title-inner {
		height: 32px;
	}

	.page-graduate_page .kv-title-inner .mask-text {
		height: 32px;
		width: auto;
		object-fit: contain;
	}
}

/* パンくず（night_top と同様） */
.page-graduate_page .breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0 8px;
	padding: 12px 2em;
	margin-bottom: 80px;
	background-color: var(--color-gray-bg);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-normal);
	font-weight: var(--font-weight-bold);
	color: var(--color-gray-dark);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
@media (max-width: 768px) {
	.page-graduate_page .breadcrumb {
		margin-bottom: 64px;
	}
}
.page-graduate_page .breadcrumb::-webkit-scrollbar {
	display: none;
}
.page-graduate_page .breadcrumb a,
.page-graduate_page .breadcrumb span {
	white-space: nowrap;
}
.page-graduate_page .breadcrumb a {
	color: var(--color-gray-dark);
	text-decoration: none;
}
.page-graduate_page .breadcrumb a:hover {
	text-decoration: underline;
}
.page-graduate_page .breadcrumb span {
	color: var(--color-gray-dark);
	user-select: none;
}

/* -------------------------------------------------------------
   コンテンツ：卒業生用申請書（Figma 2814-13722）
   ------------------------------------------------------------- */
.page-graduate_page .graduate-request {
	max-width: 1280px;
	margin: 0 auto clamp(48px, 4.44vw, 64px);
	position: relative;
}

.page-graduate_page .graduate-request__title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(280px, 30vw, 432px);
	height: clamp(56px, 4.93vw, 71px);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.page-graduate_page .graduate-request__title::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-black, #1f1f1f);
	clip-path: polygon(7.3% 2.8%, 92.7% 2.8%, 99.3% 50%, 92.7% 97.2%, 7.3% 97.2%, 0.7% 50%);
	z-index: 0;
}

.page-graduate_page .graduate-request__title::after {
	content: '';
	position: absolute;
	inset: 4px;
	background: #fff;
	clip-path: polygon(7.3% 2.8%, 92.7% 2.8%, 99.3% 50%, 92.7% 97.2%, 7.3% 97.2%, 0.7% 50%);
	z-index: 1;
}

@media (max-width: 768px) {
	.page-graduate_page .graduate-request__title::after {
		inset: 2px;
	}
}

.page-graduate_page .graduate-request__title-text {
	position: relative;
	z-index: 2;
	font-size: clamp(20px, 1.94vw, 28px);
	font-weight: 700;
	line-height: 1;
	color: var(--color-black, #1f1f1f);
	text-align: center;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.page-graduate_page .graduate-request__box {
	background: #ecffda;
	border: 4px solid var(--color-black, #1f1f1f);
	border-radius: clamp(8px, 0.69vw, 10px);
	padding: clamp(56px, 5vw, 72px) clamp(16px, 2.78vw, 40px) clamp(16px, 2.78vw, 40px);
	box-sizing: border-box;
}

.page-graduate_page .graduate-request__note {
	max-width: 1200px;
	margin: 0 auto clamp(16px, 1.67vw, 24px);
	font-size: clamp(14px, 1.25vw, 18px);
	font-weight: 700;
	color: var(--color-black, #1f1f1f);
	line-height: 1.6;
}

.page-graduate_page .graduate-request__note p {
	margin: 0;
}

.page-graduate_page .graduate-request__note u {
	text-underline-offset: 3px;
}

.page-graduate_page .graduate-request__card {
	max-width: 1200px;
	margin: 0 auto;
	background: #fff;
	border: 4px solid var(--color-black, #1f1f1f);
	border-radius: 4px;
	padding: clamp(16px, 1.39vw, 20px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 1.11vw, 16px);
}

.page-graduate_page .graduate-request__file {
	display: flex;
	align-items: center;
	gap: 23px;
	flex: 1 1 auto;
	min-width: 0;
}

.page-graduate_page .graduate-request__file-icon {
	width: clamp(80px, 6.8vw, 98px);
	height: clamp(80px, 6.8vw, 98px);
	border: clamp(2px, 0.28vw, 4px) solid var(--color-black, #1f1f1f);
	background: var(--color-black, #1f1f1f);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: #fff;
	font-weight: 700;
}

.page-graduate_page .graduate-request__file-icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.page-graduate_page .graduate-request__file-icon span {
	font-size: clamp(16px, 1.39vw, 20px);
	line-height: 16px;
}

.page-graduate_page .graduate-request__file-divider {
	width: 2px;
	height: clamp(72px, 6.53vw, 94px);
	background: var(--color-black, #1f1f1f);
	flex-shrink: 0;
}

.page-graduate_page .graduate-request__file-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

.page-graduate_page .graduate-request__file-name {
	margin: 0;
	font-size: clamp(16px, 1.25vw, 18px);
	font-weight: 700;
	color: var(--color-black, #1f1f1f);
}

.page-graduate_page .graduate-request__file-size {
	margin: 0;
	font-size: clamp(14px, 1.25vw, 18px);
	font-weight: 400;
	color: var(--color-black, #1f1f1f);
}

/* ボタンは btn-more（common）を利用 */
.page-graduate_page .graduate-request__card .btn-more {
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.page-graduate_page .graduate-request {
		margin-bottom: 48px;
	}

	.page-graduate_page .graduate-request__title-text {
		white-space: normal;
	}

	.page-graduate_page .graduate-request__box {
		padding-top: 40px;
		border: 2px solid var(--color-black, #1f1f1f);
	}

	.page-graduate_page .graduate-request__note {
		line-height: 1.7;
	}

	.page-graduate_page .graduate-request__card {
		flex-direction: column;
		align-items: stretch;
		border: 2px solid var(--color-black, #1f1f1f);
		text-align: center;
	}

	/* night_top の download-item と同じ並び */
	.page-graduate_page .graduate-request__file {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.page-graduate_page .graduate-request__file-icon {
		width: 92px;
		height: 40px;
		flex-direction: row;
		padding: 0 8px;
	}

	.page-graduate_page .graduate-request__file-divider {
		width: 100%;
		height: 1px;
		min-height: 1px;
		margin: 0;
	}

	.page-graduate_page .graduate-request__file-meta {
		align-items: flex-start;
		text-align: center;
	}

	.page-graduate_page .graduate-request__card .btn-more {
		margin: 0 auto;
		height: var(--btn-more-height, 48px);
		max-width: var(--btn-more-width, 214px);
		width: 100%;
	}
}

/* --- セクション --- */
.graduate-section {
	margin-bottom: 48px;
}

.graduate-section__title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--color-primary);
}

.graduate-section__content {
	line-height: var(--line-height-loose);
}

.graduate-section__content p {
	margin: 0 0 16px;
}
.graduate-section__content p:last-child { margin-bottom: 0; }

/* --- ダウンロードリンク --- */
.graduate-download {
	margin-top: 24px;
}

.graduate-download__link {
	display: inline-block;
	padding: 12px 32px;
	background-color: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
	border-radius: var(--border-radius-md);
	font-weight: var(--font-weight-bold);
	transition: opacity 0.3s ease;
}

.graduate-download__link:hover {
	opacity: 0.8;
}

/* パスワード未入力時は、固定コンテンツを非表示（PHP条件分岐なし） */
.page-graduate_page:has(.post-password-form) .graduate-request {
	display: none;
}

/* --- fadeUp --- */
.fadeUp {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.fadeUp.is-visible {
	opacity: 1;
	transform: translateY(0);
}
