@charset "UTF-8";

/* reset css ------------------------------------------ */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:where([hidden]:not([hidden="until-found"])) {
	display: none	!important;
}

:where(html) {
	-webkit-text-size-adjust: none;
	color-scheme: dark light;
	tab-size: 2;
	scrollbar-gutter: stable;
	interpolate-size: allow-keywords;
	line-height: 1.5;
}

:where(html:has(dialog:modal[open])) {
	overflow: clip;
}

@media (prefers-reduced-motion:no-preference) {
	:where(html:focus-within) {
		scroll-behavior: smooth;
	}
}

:where(body) {
	line-height: inherit;
	font-family: system-ui,sans-serif;
	-webkit-font-smoothing: antialiased;
}

:where(button) {
	all: unset;
}
:where(input, button, textarea, select) {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
}
:where(textarea) {
	resize: vertical;
	resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
	cursor: pointer;
}

:where(:disabled, label:has(>:disabled, +:disabled)) {
	cursor: not-allowed;
}

:where(a) {
	color: inherit;
	text-underline-offset: .2ex;
}

:where(ul,ol) {
	list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}

:where(img, picture, svg, video) {
	max-inline-size: 100%;
	block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

:where(h1, h2, h3) {
	line-height: calc(1em + 0.5rem);
	text-wrap: balance;
}

:where(hr) {
	border: none;
	border-block-start: 1px solid;
	color: inherit;
	block-size: 0;
	overflow: visible;
}

:where(dialog,[popover]) {
	border: none;
	background: none;
	color: inherit;
	inset: unset;
	max-width: unset;
	max-height: unset;
	overflow: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
	display: none	!important;
}

:where(:focus-visible) {
	outline: 3px solid CanvasText;
	box-shadow: 0 0 0 5px Canvas;
	outline-offset: 1px;
}

:where(:focus-visible, :target) {
	scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
	clip-path: inset(50%)	!important;
	height: 1px	!important;
	width: 1px	!important;
	overflow: hidden	!important;
	position: absolute	!important;
	white-space: nowrap	!important;
	border: 0	!important;
	user-select: none	!important;
}
/*end reset css ------------------------------------------ */





/* アイコンフォント */
@font-face {
	font-family: 'ForkAwesome';
	src:	url('/recruit/assets/fonts/forkawesome/fonts/forkawesome-webfont.eot?v=1.2.0');
	src:	url('/recruit/assets/fonts/forkawesome/fonts/forkawesome-webfont.eot?#iefix&v=1.2.0') format('embedded-opentype'), 
			url('/recruit/assets/fonts/forkawesome/fonts/forkawesome-webfont.woff2?v=1.2.0') format('woff2'), 
			url('/recruit/assets/fonts/forkawesome/fonts/forkawesome-webfont.woff?v=1.2.0') format('woff'), 
			url('/recruit/assets/fonts/forkawesome/fonts/forkawesome-webfont.ttf?v=1.2.0') format('truetype'), 
			url('/recruit/assets/fonts/forkawesome/fonts/forkawesome-webfont.svg?v=1.2.0#forkawesomeregular') format('svg');
	font-style: normal;
	font-weight: normal;
	font-display: swap;
}






:root {
	--color_ctc-blue: 0 92 202;
	--color_ctc-deep-blue: 0 61 134;

	--color_white: 255 255 255;
	--color_gray: 102 102 102;
	--color_black: 0 0 0;

	--color_light-neon-blue: 163 255 255;
	--color_pale-blue: 36 168 255;
	--color_light-blue: 0 153 255;
	--color_bright-blue: 0 136 255;

	--color_newgrads_orange: 255 102 102;
	--color_newgrads_pink: 255 102 255;
	--color_newgrads_purple: 115 101 255;

	--color_deep-purple: 86 18 175;

	--device-w-sp-small: 400px;
	--device-w-sp: 767px;

	--device-w-tb-min: 768px;
	--device-w-tb: 1279px;

	--device-w-pc: 1280px;

	--inner-w-pc: 1200px;

	--font-anton: "Anton", sans-serif;
	--font-antonio: "Antonio", sans-serif;
	--font-icon: 'ForkAwesome';
}





html {
	font-size: 16px;
}
/*
@media screen and (min-width: 768px) {
	html {
		font-size: 16px;
	}
}
	*/
@media screen and (min-width: 1280px) {
	html {
		font-size: 18px;
	}
}


body {
}

p, h1, h2, h3, h4, h5, h6, li {
	font-family: "M PLUS 1", sans-serif;
	text-align: justify;
	letter-spacing: .05em;
	-webkit-font-smoothing: antialiased;
	transform: rotate(0.05deg);
}

p, li {
}




a {
	text-decoration: none;
}

ul {
	list-style: none;

	li {
		display: block;
	}
}




.font-icon::before,
.font-icon[target='_blank']::after,
.font-icon[href$='pdf']::after,
a[target='_blank'] .font-icon::after {
	display: inline-block;
	font: normal normal normal 0.85em / 1 ForkAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}





header {
	display: block;
	position: fixed;
	width: calc(100% - 0.8dvw - 0.8dvw);
	min-height: calc(40px + 1.6dvw + 1.6dvw);
	margin: 0.8dvw 0 0 0.8dvw;
	padding: 2.4dvw 1.6dvw 1.6dvw 3.2dvw;
	border-radius: 5px;
	z-index: 10;

	.inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(100% - 1.4dvw - 24dvw - 5dvw - 40px - 5dvw - 1.6dvw - 1.6dvw);
		margin-left: calc(1.4dvw + 24dvw + 5dvw);
		position: absolute;
		transition: margin-left 0.5s cubic-bezier(.19, 1, .22, 1);
		z-index: 10;

		& > div {
			width: 100%;
			/*max-width: 266px;*/
			display: flex;
			flex-wrap: wrap;
			align-items: self-end;

			h1.title.on_mobile {
				color: rgb(var(--color_ctc-blue));
				font-size: min(5.5dvw, 28px);
				/*font-family: var(--font-anton);*/
				font-family: var(--font-antonio);
				font-weight: 700;
				text-align: left;
				line-height: 1;
				/*margin-top: 1dvw;*/
			}
		}
	}
}





/* 文字、改行　表示・非表示 --------------------------------------------- */


br.mobile_tiny,
br.mobile_small,
br.mobile_medium,
br.mobile_large
br.landscape_small,
br.on_pc {
		display: none;
}


@media screen and (min-width: 0px) {
	header {
		.inner {
			& > div {
				.logo_ctcf_header {
					/*margin-top: 2dvw;*/
				}
			}
		}
	}

	#area_helo {
		#area_blue-belt {
			.logo_ctcf_blue-belt {
				display: none;
			}

			.title.on_pc {
				display: none;
			}
		}
	}
}


@media screen and (max-width: 319px) {
	header {
		.inner {
			& > div {
				.logo_ctcf_header {
					min-width: 100%;
				}
			}
		}
	}
}


@media screen and (min-width: 320px) {
	header {
		.inner {
			& > div {
				.logo_ctcf_header {
					display: block;
					width: 100%;
					height: auto;
				}

				h1.title.on_mobile {
					font-size: clamp(14px, 10cqw, 15px);
				}
			}
		}
	}

	.drawer--top.drawer-open header,
	.drawer--top header.header_bg {
		.inner {
			/*margin-top: 1.25dvw;*/

			figure {
				width: calc(100% * 0.6782);
			}
		}
	}


	#area_helo {
		#area_blue-belt {
			.logo_ctcf_blue-belt {
				display: none;
			}

			.title.on_pc {
				display: none;
			}
		}
	}


	br.mobile_tiny {
		display: inline-block;
	}

}


@media screen and (min-width: 339px) {
	.drawer--top.drawer-open header,
	.drawer--top header.header_bg {
		.inner {
			/*margin-top: 2.5dvw;*/
		}
	}
}


@media screen and (min-width: 320px) {
	header {
		& .inner {
			& > div {
				h1.title.on_mobile {
					margin-top: 1dvw;
				}
			}
		}
	}
}


@media screen and (min-width: 375px) {
	header {
		.inner {
			& > div {
				.logo_ctcf_header {
					display: block;
					width: 100%;
					max-width: 200px;
					height: auto;
					/*margin-top: 0.5dvw;*/
				}

				h1.title.on_mobile {
					font-size: clamp(14px, 10cqw, 17px);
					font-weight: 900;
				}
			}
		}
	}

	.drawer--top.drawer-open header,
	.drawer--top header.header_bg {
		.inner {
			/*margin-top: calc(((40px - 20.94px) / 2) - 0.75dvw);*/
		}
	}


	#area_helo {
		#area_blue-belt {
			.logo_ctcf_blue-belt {
				display: none;
			}

			.title.on_pc {
				display: none;
			}
		}
	}
}


@media screen and (min-width: 551px) {
	header {
		.inner {
			& > div {
				.logo_ctcf_header {
					margin-right: 0.6rem;
				}
			}
		}
	}
}


@media screen and (min-width: 567px) {
	.drawer--top header,
	.drawer--top.drawer-open header,
	.drawer--top header.header_bg {
		.inner {
			/*margin-top: calc(((40px - 20.94px) / 2) - 1dvw);*/
		}
	}
}


@media screen and (min-width: 640px) {
	header {
		.inner {
			top: 1.6dvw;

			& > div {
				max-width: none;

				.logo_ctcf_header {
					display: block;
					max-width: 270px;
					height: auto;
					/*margin-top: 0.5dvw;*/
					margin-right: 1.25rem;
				}

				h1.title.on_mobile {
					font-size: clamp(16px, 10cqw, 26px);
					/*margin-top: 0.75dvw;*/
				}
			}
		}
	}

	header:not(:has(.header_bg)) {
		.inner {
			top: 0.1dvw;
		}
	}

	.drawer--top.drawer-open header,
	.drawer--top header.header_bg {
		.inner {
			/*margin-top: calc(((40px - 20.94px) / 2) - 0.2dvw);*/
		}
	}


	#area_helo {
		#area_blue-belt {
			.logo_ctcf_blue-belt {
				display: none;
			}

			.title.on_pc {
				display: none;
			}
		}
	}


	br.mobile_small {
		display: inline-block;
	}
}


@media screen and (min-width: 721px) {
	br.mobile_medium {
		display: inline-block;
	}
}


@media screen and (min-width: 768px) {
	header {
		.inner {

			& > div {
				max-width: none;
				container-type: inline-size;

				.logo_ctcf_header {
					display: block;
					max-width: 68%;
					height: auto;
					margin-top: 0;
					margin-right: 1.0rem;
				}

				h1.title.on_mobile {
					/*font-size: clamp(16px, 10cqw, 28px);*/
					font-size: clamp(16px, 10cqw, 24px);
					display: inline;
					font-weight: 900;
				}
			}
		}
	}

	.drawer--top header {
		.inner {
			/*margin-top: calc(((40px - 20.94px) / 2) + 0.5dvw)	!important;*/
		}
	}


	.drawer--top.drawer-open header,
	.drawer--top header.header_bg {
		.inner {
			/*margin-top: calc(((40px - 20.94px) / 2) + 0.25dvw)	!important;*/

			figure {
				width: calc(100% * 0.4283);
			}
		}
	}


	/* ページ最上部（#area_helo）から 下方スクロールされた場合 */
	/*
	.drawer--top header {
		&.header_bg {
			.inner {
				figure {
						width: calc((100% - 1.4dvw - 24dvw - 6dvw) - 40px - 6dvw)	!important;
				}
			}
		}
	}
	*/


	#area_helo {
		#area_blue-belt {
			display: block;
			margin: 0 1.5dvw;
			/*padding-top: 0.75dvw;*/

			.title.on_pc {
				display: none;
			}
		}
	}


	br.mobile_large {
		display: inline-block;
	}

}


@media screen and (min-width: 880px) {
	header {
		& .inner {
			& > div {
				h1.title.on_mobile {
					font-size: clamp(16px, 20cqw, 29px);
				}
			}
		}
	}
}


@media screen and (min-width: 1000px) {
	header {
		& .inner {
			& > div {
				h1.title.on_mobile {
					font-size: clamp(16px, 20cqw, 33px);
				}
			}
		}
	}
}



@media screen and (min-width: 1280px) {
	header {
		& .inner {
			/*width: calc((100% - 3dvw - 3dvw - 6dvw + 18px + 18px) * 0.4)	!important;*/
			width: 35dvw	!important;
			height: 34px;
			margin-left: 0;
			position: absolute;
			/*top: calc(50px + 4.5px);*/
			top: 18px		!important;
			/*left: calc(6dvw - 18px + 22.5px);*/
			/*left: calc(3.2dvw * 0.75);*/
			left: 0;
			z-index: 2;

			& > div {
				transition: display 1.5s ease-in-out;

				.logo_ctcf_header {
					display: none;
				}

				h1.title.on_mobile {
					display: none;
				}
			}
		}

		/* ページ最上部（area_helo）からスクロールされた場合 */
		&.header_bg {
			& .inner {
				& > div {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: center;

					.logo_ctcf_header {
						display: inline;
						width: 270px	!important;
						height: auto;
						margin-top: 0.125rem;
						margin-right: 0.75rem	!important;
					}

					h1.title.on_mobile {
						display: inline;
						width: auto;
						margin-top: 0;
						margin-bottom: 4px;
						font-size: clamp(16px, 6cqw, 24px)	!important;
					}
				}
			}
		}
	}



	#area_helo {
		#area_blue-belt {
			.logo_ctc {
				max-width: 200px;
				margin-right: auto;
				margin-left: auto;
			}

			.logo_ctcf_blue-belt {
				display: block;
				max-width: 270px;
				margin: 10px auto 0;
			}


			.title.on_pc {
				display: block;
			}
		}
	}
}






@media (orientation: landscape) {
	br.mobile_tiny,
	br.mobile_small,
	br.mobile_medium,
	br.mobile_large,
	br.landscape_small {
			display: none	!important;
	}


	#area_catch-copy > div {
		& > div {
			h3, h3 + p {
				font-size: clamp(13.5px, 10.5vmin, 90px)	!important;
				line-height: 1.1							!important;

				strong {
					font-size: clamp(18px, 14vmin, 120px)	!important;
					line-height: 1.1						!important;
				}
			}
		}
	}


	.en-catch-copy {
		font-size: clamp(14px, 10cqw, 44px)				!important;
		padding-top: calc(1em + 0.65em + 5px)			!important;
	}

}


@media screen and (orientation: landscape) and (max-width: 1279px) {
	.en-catch-copy {
		font-size: clamp(14px, 10cqw, 28px)				!important;
	}
}


@media screen and (orientation: landscape) and (max-width: 1729px) {
	br.mobile_tiny,
	br.mobile_small,
	br.mobile_medium,
	br.mobile_large {
			display: none		!important;
	}


	br.landscape_small {
		display: inline-block	!important;
	}
}


/* end 文字、改行　表示・非表示 -------------------------------- */






/* ▼ グローバルナビゲーション ========================================== */
/* ページ最上部（#area_helo）の場合 */
.drawer--top nav.drawer-nav {
	top: calc(40px + 1.6dvw + 1.6dvw);
	left: initial;
	right: calc(-100% - 0.8dvw - 0.8dvw);
	width: calc(100% + 0.8dvw);
	height: auto;
	min-height: 306px;
	/*
	max-height: 100%;
	background-color: rgb(var(--color_white) / 0.9);
	*/
	border-radius: 5px 0 0 5px;
	-webkit-transition: right .75s cubic-bezier(.19, 1, .22, 1);
	transition: right .5s cubic-bezier(.19, 1, .22, 1);
	z-index: 10;

	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		/*box-shadow: inset 0 0 40px rgb(var(--color_white));*/
	}



	/* リキッドグラス背景 */
	&.glass-card {
		background: rgb(var(--color_white) / 0.5);
		backdrop-filter: blur(13px) saturate(71%);
		-webkit-backdrop-filter: blur(13px) saturate(71%);
		border: solid 0px rgb(var(--color_white) / 0.85);
		box-shadow: 4px 4px 7px 0 rgb(0 61 134 / 0.5),
					inset 0px 0px 4px 1px rgb(var(--color_white) / 0.7);
		overflow: hidden;

		/* 反射のハイライト（2層オーバーレイ） */
		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			border-radius: inherit;

			/* 面取り反射 */
			background: linear-gradient(
				to right bottom,
				rgb(var(--color_white) / 0.8) 0%,
				rgb(var(--color_white) / 0.5) 15%,
				rgb(var(--color_white) / 0.3) 50%,
				rgb(var(--color_white) / 0.3) 75%,
				rgb(var(--color_white) / 0.6) 100%
			);
			z-index: 1;
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			border-radius: inherit;
		
			/* 微かな上から下への光沢 */
			background: linear-gradient(
				to bottom,
				rgb(var(--color_white) / 0.75) 0%,
				rgb(var(--color_white) / 0.3) 25%,
				rgb(var(--color_white) / 0.2) 35%,
				rgb(var(--color_white) / 0.15) 55%,
				rgb(var(--color_white) / 0.25) 75%,
				rgb(var(--color_white) / 0.65) 100%
			);
			z-index: 1;
		}
	}
	/* end リキッドグラス背景 */



	.menu {
		display: block;
		width: 100%;
		position: absolute;
		z-index: 3;
	}



	ul {
		list-style: none;
		margin: 30px;

		li {
			font-size: 1.125rem;
			font-weight: 600;
			margin-bottom: 25px;

			a {
				display: inline-block;
				color: rgb(var(--color_ctc-blue));

				&[target='_blank'] {
					.font-icon::after {
						content: '\f08e';
						margin-left: 0.5em;
					}
				}

				&.font-icon {
					&::before {
						content: '\f063';
						display: inline-block;
						margin-right: 0.5em;
					}
				}

				&.btn-newgrads,
				&.btn-career {
					display: block;
					width: 80%;
					margin: 0 auto;
					border-radius: 5px;
					text-align: center;
					font-weight: 500;

					span.font-icon {
						display: inline-block;

						&::before {
							content: '\f061';
							margin-right: 0.5em;
						}
					}

				}

				&.btn-newgrads {
					color: rgb(var(--color_white));
					font-size: 1rem;
					text-shadow: 2px 2px 1px rgb(var(--color_deep-purple) / 0.7);
					height: 40px;
					padding-top: 6px;
					background: linear-gradient(
						-45deg,
						rgb(var(--color_newgrads_orange) / 0.6) 10%,
						rgb(var(--color_newgrads_pink) / 0.6) 50%,
						rgb(var(--color_newgrads_purple) / 0.6) 90%
					);
					transition: opacity 0.7s;

					&:hover {
						opacity: 0.7;
					}
				}

				&.btn-career {
					color: rgb(var(--color_ctc-blue));
					font-size: 0.75rem;
					background-color: rgb(var(--color_white));
					box-shadow: 0 0 10px rgb(var(--color_ctc-white));					height: 25px;
					border: solid 1px rgb(var(--color_ctc-blue));
					padding-top: 2px;
					transition: background-color 0.7s;

					&:hover {
						background-color: rgb(var(--color_light-neon-blue) / 0.4);
					}
				}

			}

			&:nth-of-type(1),
			&:nth-of-type(2) {
				text-shadow: 1px 1px 0 rgb(var(--color_white) / 0.7);
				padding-left: 10px;
				padding-bottom: 20px;
				border-bottom: solid 1px #CCC;

				a {
					transition: color 0.5s;

					&:hover {
						color: rgb(var(--color_light-blue));
					}
				}
			}

			&:nth-of-type(1),
			&:nth-of-type(2) {
					font-weight: 700;
			}

			&:nth-of-type(1) {
				margin-bottom: 20px;
			}

			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}
	}
}
/* end ページ最上部（#area_helo）の場合 */




@media screen and (min-width: 640px) {
	.drawer--top nav.drawer-nav {
		ul {
			li {
				a {
					&.btn-newgrads, &.btn-career {
						width: 50%;
						min-width: 300px;
					}
				}
			}
		}
	}
}



/* グローバルナビゲーション　ページトップ ハンバーガーOPEN＆スクロール　変化 */
.drawer--top.drawer-open header,
.drawer--top header.header_bg {
		/*background-color: rgb(var(--color_white) / 0.85);*/
		background: rgb(var(--color_white) / 0.15);
		backdrop-filter: blur(13px) saturate(71%);
		-webkit-backdrop-filter: blur(13px) saturate(71%);
		border: solid 0px rgb(var(--color_white) / 0.85);
		box-shadow: 4px 4px 7px 0 rgb(0 61 134 / 0.5),
					inset 0px 0px 4px 1px rgb(var(--color_white) / 0.50);

		/* 反射のハイライト（2層オーバーレイ） */
		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			border-radius: inherit;

			/* 面取り反射 */
			background: linear-gradient(
				135deg,
				rgb(var(--color_white) / 0.8) 0%,
				rgb(var(--color_white) / 0.8) 30%,
				rgb(var(--color_white) / 0.4) 50%,
				rgb(var(--color_white) / 0.5) 55%,
				rgb(var(--color_white) / 0.7) 85%,
				rgb(var(--color_white) / 0.3) 100%
			);
			z-index: 1;
		}

		/*
		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			border-radius: inherit;
		
			background: linear-gradient(
				to bottom,
				rgb(var(--color_white) / 0.1) 0%,
				rgb(var(--color_white) / 0.4) 25%,
				rgb(var(--color_white) / 0.6) 35%,
				rgb(var(--color_white) / 0.6) 55%,
				rgb(var(--color_white) / 0.4) 65%,
				rgb(var(--color_white) / 0) 100%
			);
			z-index: 1;
		}
		*/

			.inner {
				width: calc(100% - 40px - 5dvw - 1.6dvw);
				margin-left: 0;
	
				figure {
					/*max-width: calc(60% * 1.0915);*/
					margin-top: 0;
					margin-right: 0.6rem;
				}
			}
	}



/* グローバルナビゲーション　スクロールで変化 */
.drawer--top header {
	/*background-color: rgb(var(--color_white) / 0);*/
	transition: right .75s cubic-bezier(.19, 1, .22, 1), background 1.5s ease-in-out, border 1.5s ease-in-out, box-shadow 1.5s ease-in-out, backdrop-filter 1.5s ease-in-out, width 0.4s ease-in-out;
	;

}
/* end グローバルナビゲーション　スクロールで変化 */



.drawer--top.drawer-open .drawer-nav {
	top: calc(40px + 0.8dvw + 5dvw);
	right: -0.8dvw;
}


@media screen and (min-width: 640px) {
	.drawer--top nav.drawer-nav {
		.menu {
			width: 75%;
			left: 12.5%;
		}
	}
}


@media screen and (min-width: 768px) {
	.drawer--top nav.drawer-nav {
		.menu {
			width: 50%;
			left: 25%;
		}
	}
}


@media screen and (max-width: 1279px) {
	div.drawer-overlay {
		background-color: rgb(var(--color_black) / 0.6) !important;
		z-index: 2;
	}
}


/* PC版 ------------------------------------------------------------ */
@media screen and (min-width: 1280px) {
	#area_blue-belt {
		z-index: 2;
	}

	/* PC版：ページ最上部の場合 */
	.drawer--top {
		header {
			width: calc((100% - 3dvw - 3dvw - 6dvw + 18px + 18px) / 2);
			top: 50px;
			left: calc(6dvw - 18px);
			height: 70px;
			margin: 0;
			padding: 0 18px 0 0;

			&.header_bg {
				background: none;
				backdrop-filter: inherit;
				-webkit-backdrop-filter: inherit;
				border: none;
				box-shadow: none;

				&::before, &::after {
					display: none;
				}
			}
		}

		nav.drawer-nav {
			width: calc(100% - 3dvw - 24dvw - 6dvw - 6dvw + 18px + 18px);
			height: 70px;
			min-height: 70px;
			top: 50px;
			right: calc(6dvw - 22px);
			border-radius: 5px;
			background-color: rgb(var(--color_white) / 0);
			/*transition: background 3s ease-in-out;*/
			z-index: 1;

			/* リキッドグラス背景 */
			&.glass-card {
				background: rgb(250 250 250 / 0);
				border: solid 0px rgb(var(--color_white) / 0);
				box-shadow: 4px 4px 10px 0 rgb(0 61 134 / 0),
							inset 0px 0px 4px 4px rgb(var(--color_white) / 0);
				backdrop-filter: inherit;
				-webkit-backdrop-filter: inherit;
				transition: background 0.75s ease-in-out, 
							border 0.75s ease-in-out, 
							box-shadow 0.75s ease-in-out, 
							backdrop-filter 0.75s ease-in-out, 
							width 0.4s ease-in-out;

				&::before {
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					pointer-events: none;
					border-radius: inherit;
					background: linear-gradient(
						to left bottom, 
						rgb(var(--color_white) / 0) 0%, 
						rgb(var(--color_white) / 0) 50%);
					z-index: 1;
				}

				&::after {
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					pointer-events: none;
					border-radius: inherit;
					background: linear-gradient(
						to bottom, 
						rgb(var(--color_white) / 0) 0%, 
						rgb(var(--color_white) / 0) 25%, 
						rgb(var(--color_white) / 0) 35%, 
						rgb(var(--color_white) / 0) 55%, 
						rgb(var(--color_white) / 0) 65%, 
						rgb(var(--color_white) / 0) 100%);
					z-index: 1;
				}
			}
			/* end リキッドグラス背景 */


			br.on_pc {
				display: inline-block;
			}



			&::before {
				display: none;
			}

			.menu {
				position: relative;
				z-index: 100;
				width: 100%;
				height: 70px;
				left: 0;
			}


			ul {
				margin: 18px 22.5px;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				align-items: center;

				position: absolute;
				top: 0;
				right: 0;

				li {
					display: inline-block;
					margin-bottom: 0;

					&:nth-of-type(1), &:nth-of-type(2) {
						font-size: 1rem;
						border-bottom: none;
						margin-bottom: 0;
						padding-bottom: 0;
						padding-left: 0;
					}

					&:has(a.font-icon) + &:has(a.font-icon),
					&:has(a.font-icon) + &:has(a.btn-newgrads) {
							margin-left: 30px;
					}

					&:has(a.btn-newgrads),
					&:has(a.btn-career) {
							margin-left: 15px;
					}

					a {
						&.btn-newgrads, &.btn-career {
							margin: 0;
						}

						&.btn-newgrads {
							width: 170px;
							min-width: inherit;
							height: 34px;
							font-size: 0.833rem;
							font-weight: 400;
						}

						&.btn-career {
							width: 100px;
							height: 34px;
							font-size: 0.611rem;
							font-weight: 400;
							padding-top: 3.5px;

							span.font-icon {
								padding-left: 1.25em;
								text-align: left;
								line-height: 1.1em;
								position: relative;

								&::before {
									position: absolute;
									display: block;
									top: 0.75em;
									left: 0.125em;
								}

								&::after {
									margin-left: 0.25em;
								}
							}
						}
					}
				}
			}
		}

	}
	/* end PC版：ページ最上部の場合 */



	/* PC版：ページ最上部（area_helo）からスクロールされた場合 */
	.drawer--top .header_bg nav.drawer-nav {
		width: calc(100% - 3dvw - 3dvw - 6dvw + 18px + 18px + 18px + 8px);
		/*background-color: rgb(var(--color_white) / 0.9);*/

		/* リキッドグラス背景 */
		&.glass-card {
			background: rgb(var(--color_white) / 0.3);
			backdrop-filter: blur(13px) saturate(71%);
			-webkit-backdrop-filter: blur(13px) saturate(71%);
			border: solid 0px rgb(var(--color_white) / 0.85);
			box-shadow: 4px 4px 7px 0 rgb(0 61 134 / 0.5),
						inset 0px 0px 4px 1px rgb(var(--color_white) / 0.50);
			overflow: hidden;

			/* 反射のハイライト（2層オーバーレイ） */
			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				border-radius: inherit;
			
				/* 面取り反射 */
				background: linear-gradient(
					135deg,
					rgb(var(--color_white) / 0.7) 0%,
					rgb(var(--color_white) / 0.7) 30%,
					rgb(var(--color_white) / 0.4) 50%,
					rgb(var(--color_white) / 0.5) 55%,
					rgb(var(--color_white) / 0.7) 85%,
					rgb(var(--color_white) / 0.3) 100%
				);
				z-index: 1;
			}

			/*&::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				border-radius: inherit;

				background: linear-gradient(
					to bottom,
					rgb(var(--color_white) / 0.1) 0%,
					rgb(var(--color_white) / 0.4) 25%,
					rgb(var(--color_white) / 0.5) 35%,
					rgb(var(--color_white) / 0.5) 65%,
					rgb(var(--color_white) / 0.4) 75%,
					rgb(var(--color_white) / 0) 100%
				);
				z-index: 1;
			}*/
		}
		/* end リキッドグラス背景 */

	}
	/* end PC版：ページ最上部（area_helo）からスクロールされた場合 */

}
/* end PC版 ------------------------------------------------------------ */



/* ハンバーガーメニュー */
.drawer-hamburger {
	width: 40px;
	height: 40px;
	padding: 10.5px 10px;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: rgb(var(--color_ctc-blue) / 0.75);
	position: absolute;
	top: calc(1.6dvw + 0.2dvw);
	right: calc(1.6dvw + 0.2dvw)	!important;

	z-index: 100;

	cursor: pointer;

	&:hover {
		background: rgb(var(--color_ctc-blue) / 0.75);
	}

	div {
		width: 100%;
		height: 100%;
		position: relative;

		span {
			display: block;
			width: 100%;
			height: 3px;
			background-color: rgb(var(--color_white));
			border-radius: 2px;
			position: absolute;
			left: 0;

			&:nth-of-type(1) {	top: 0; }
			&:nth-of-type(2) {	top: calc(50% - 1.5px); }
			&:nth-of-type(3) {	bottom: 0; }

		}
	}
}

.header_bg .drawer-hamburger {
}



@media screen and (min-width: 1280px) {
	.drawer-hamburger,
	.header_bg .drawer-hamburger {
		display: none;
	}
}


/*
.drawer--top,
.drawer--top.drawer-open {
	.drawer-hamburger {
		top: calc(1.6dvw + 0.2dvw);
		right: calc(1.6dvw + 0.2dvw);
	}
}


.drawer--top .header_bg,
.drawer--top.drawer-open .header_bg {
	.drawer-hamburger {
		top: calc(1.6dvw + 0.2dvw);
		right: calc(1.6dvw + 0.2dvw);
	}
}
	*/


.drawer-close {
	.drawer-hamburger {
		span {
			transition: all .5s;
		}
	}
}


.drawer-open {
	.drawer-hamburger {
		span {
			transition: all .5s;
			width: 20px;

			&:nth-of-type(1) {
				top: -11px;
				-webkit-transform: translateY(20px) rotate(-45deg);
				transform: translateY(20px) rotate(-45deg);
			}

			&:nth-of-type(2) {
				opacity: 0;
			}

			&:nth-of-type(3) {
				bottom: -13px;
				-webkit-transform: translateY(-20px) rotate(45deg);
 				transform: translateY(-20px) rotate(45deg);
			}
		}
	}
}




/*
.drawer-open .drawer-hamburger {
	div {
		span {
			&:nth-of-type(1) {	top: -85%; }
			&:nth-of-type(3) {	bottom: -65%; }
		}
	}
}
*/




/* =========================================
	header ロゴ＋h1：親幅追従の可変（メディアクエリ最小化）
	home.css の末尾に追記
========================================= */

/* ロゴ＋h1を包む要素を「コンテナ」にする（cqwが常に有効になる） */
header .inner > div{
	width: 100% !important;
	max-width: none !important;
	container-type: inline-size;
	container-name: header_brand;
	min-width: 0; /* ここ大事：狭い時のはみ出し防止 */
}

/* ロゴ（img）側：親幅に応じて可変 */
header .inner > div .logo_ctcf_header{
	width: clamp(270px, 65cqw, 400px)	!important; /* ←好みで数値調整OK */
	max-width: none !important;		/* 既存の max-width 200/300/60% を無効化 */
	height: auto;
}

/* img 自体は要素幅にフィット */
header .inner > div .logo_ctcf_header img{
	width: 100%;
	height: auto;
	display: block;
}

/* h1：親幅に応じて文字サイズ可変 */
header .inner > div h1.title.on_mobile{
	font-size: clamp(14px, 10cqw, 32px) !important; /* ←ここが「無限メディアクエリ回避」の核 */
	line-height: 1;
}

/* スクロール時（header_bg）に固定幅270px !important が入っているので、同じく上書き */
header.header_bg .inner > div .logo_ctcf_header{
	width: clamp(160px, 55cqw, 320px) !important;
}

header.header_bg .inner > div h1.title.on_mobile{
	font-size: clamp(14px, 8cqw, 24px) !important; /* スクロール時だけ少し抑えたい場合 */
}

/* PCサイズ フォントサイズ固定 */
@media screen and (min-width: 1280px) {
	header.header_bg .inner > div h1.title.on_mobile{
		font-size: clamp(14px, 8cqw, 24px) !important;
	}
}



/* =====================================
   header 内 縦センター統一
===================================== */

header {
	display: flex;
	align-items: center; /* ←これが基準 */
  }
  
  header .inner {
	position: relative !important;
	top: 0 !important;
	display: flex;
	align-items: center;
	height: 100%;
  }
  
  header .inner > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
  }



/* 〜400px：サイズを「最上部基準」で固定 ------------- */
  @media screen and (max-width: 400px){

	/* ロゴサイズ固定 */
	header .logo_ctcf_header{
	  width: 200px !important;
	  max-width: none !important;
	}
  
	/* h1サイズ固定 */
	header h1.title.on_mobile{
	  font-size: 16px !important;
	}
  
	/* スクロール後も変えない */
	header.header_bg .logo_ctcf_header{
	  width: 200px !important;
	}
  
	header.header_bg h1.title.on_mobile{
	  font-size: 16px !important;
	}
  
	/* ハンバーガー縦センター */
	.drawer-hamburger{
	  top: 50% !important;
	  transform: translateY(-50%);
	}
  
  }



/* 640px以上：ロゴのトップ位置を固定 ------------- */
@media screen and (min-width: 640px){

	header .logo_ctcf_header{
	  margin-top: 0 !important;
	}
  
	header.header_bg .logo_ctcf_header{
	  margin-top: 0 !important;
	}
  
  }



/* 640px以上：ロゴのトップ位置を固定 ------------- */
@media screen and (min-width: 768px){

	header .inner > div{
	  flex-direction: row;
	  align-items: center;  /* ←3者縦センター統一 */
	  gap: 1rem;
	}
  
	header .logo_ctcf_header{
	  margin: 0 !important;
	}
  
	header h1.title.on_mobile{
	  margin: 0 !important;
	}
  
  }



/* =========================================================
   header：ロゴ/h1/ハンバーガーの整列・間隔調整パッチ
   ※home.css の一番最後に追記
========================================================= */

/* 1) 縦積み表示（=ヘッダー内でロゴ+h1がwrapして2段になる想定）
   940px未満は左揃えに統一 */
   @media screen and (max-width: 939px){
	header .inner > div{
	  align-items: flex-start !important; /* ←縦積みの横揃えを左に */
	  justify-content: flex-start;
	}
  }
  
  /* 2) 768px以上 & 940px未満：h1の上の空き過多を抑える
	 （既存の margin-top: 0.75dvw 等が強すぎるので上書き） */
  @media screen and (min-width: 768px) and (max-width: 939px){
	header .inner > div h1.title.on_mobile{
	  margin-top: clamp(2px, 0.6dvw, 6px) !important;
	}
	header .inner > div .logo_ctcf_header{
	  margin-top: -0.60dvw !important; /* 余計に下がる場合の抑止 */
	}
  }
  
  /* 3) 530px未満：ロゴ/h1 がハンバーガーに近い・重なるのを防ぐ
	 - .inner の右側に「ハンバーガー分の余白」を確保する
	 - 余白量は “5dvw + ボタン幅40px” を基準（既存計算に合わせる）
  */
  @media screen and (max-width: 529px){
  
	/* .inner を「左～右」指定にして、右側を必ず空ける */
	header .inner{
	  left: calc(1.4dvw + 24dvw + 5dvw) !important;
	  right: calc(40px + 5dvw + 1.6dvw) !important; /* ←ハンバーガー左側の逃げ */
	  width: auto !important; /* 既存の width: calc(...) を無効化して安定させる */
	}
  
	/* 念のため：ロゴ/h1ブロックが右へ伸びすぎないように */
	header .inner > div{
	  max-width: 100% !important;
	  min-width: 0;
	}
  }
  
  /* 4) ロゴとh1が横並び表示のとき：縦センターを揃える（共通） */
  @media screen and (min-width: 940px){
	header .inner > div{
	  flex-direction: row !important;
	  align-items: center !important;
	  gap: 1rem;
	}
	header .inner > div .logo_ctcf_header,
	header .inner > div h1.title.on_mobile{
	  margin-top: 0 !important;
	  margin-bottom: 0 !important;
	}
  }
  
  /* 5) header.header_bg（スクロール時）で横並びになったロゴ+h1は左寄せ */
  @media screen and (min-width: 940px){
	header.header_bg .inner{
	  justify-content: flex-start !important;
	}
  }
  
  /* 6) header.header_bg の padding-top を 1.8dvw に固定（要求通り） */
  header.header_bg{
	padding-top: 1.8dvw !important;
  }



/* =========================================================
   header brand fix: <530 overlap / 460+ header_bg row / 768+ spacing
   ※ home.css の末尾に追記
========================================================= */

/* --------------------------
   1) 530px未満：.inner の left を 0 に固定し、右側にハンバーガー分の逃げを作る
   さらにロゴ/h1を「可変」に戻す（固定値に負けないよう !important で勝たせる）
-------------------------- */
@media screen and (max-width: 529px){

	/* “箱”を画面幅いっぱいに取り、右側だけ逃がす（重なり防止） */
	header .inner{
	  left: 0 !important;
	  right: 0 !important;
	  width: auto !important;
  
	  /* ハンバーガーの左に必ず空きを作る：40px（ボタン想定）＋余白 */
	  padding-right: calc(40px + 5dvw + 1.6dvw) !important;
  
	  /* ロゴ・h1を左揃えに見せる（inner自体は0、見た目の余白はpaddingで調整） */
	  padding-left: 5dvw !important;
	}
  
	/* ロゴ+h1ブロックは左揃え */
	header .inner > div{
	  align-items: flex-start !important;
	  min-width: 0;
	  max-width: 100% !important;
	  container-type: inline-size; /* cqw を確実に効かせる */
	}
  
	/* ロゴ：親幅に追従して可変（小さすぎ・大きすぎ防止） */
	header .inner > div .logo_ctcf_header{
	  width: clamp(160px, 60cqw, 240px) !important;
	  max-width: none !important;
	  margin: 0 !important;
	}
	header .inner > div .logo_ctcf_header img{
	  width: 100%;
	  height: auto;
	  display: block;
	}
  
	/* h1：ロゴと“同じくらいの存在感”になるよう可変で底上げ */
	header .inner > div h1.title.on_mobile{
	  font-size: clamp(18px, 10cqw, 26px) !important;
	  line-height: 1.05;
	  margin-top: 4px !important;
	}
  
	/* スクロール時もサイズを変えない（最上部を正にする） */
	header.header_bg .inner > div .logo_ctcf_header{
	  width: clamp(160px, 60cqw, 240px) !important;
	}
	header.header_bg .inner > div h1.title.on_mobile{
	  font-size: clamp(18px, 10cqw, 26px) !important;
	}
  }
  
  
  /* --------------------------
	 2) 460px以上：header.header_bg のときだけ「縦積み→横並び」にする
	 （940未満でも、スクロール時だけ横並びにしたい要件）
  -------------------------- */
  @media screen and (min-width: 460px) and (max-width: 939px){
	header.header_bg .inner > div{
	  flex-direction: row !important;
	  align-items: center !important;
	  gap: 1rem;
	}
	header.header_bg .inner > div h1.title.on_mobile{
	  margin-top: 0 !important;
	}
  }
  
  
  /* --------------------------
	 3) 768px以上：h1上の間隔を「現状の半分程度」に
	 （前回提示の clamp をさらに詰める）
  -------------------------- */
  @media screen and (min-width: 768px){
	header .inner > div h1.title.on_mobile{
		/*margin-top: clamp(1px, 0.18dvw, 3px) !important;*/
	}
  }



/* =========================================================
   Header brand + Drawer nav patch (append to end of home.css)
========================================================= */

/* 共通：ヘッダー高さを「変数」で統一（drawer-navのtopと同期させる） */
header{
	--hdrH: calc(40px + 0.8dvw + 5dvw); /* 既存でnavのtopに使っている値と同じ */
  }
  
  /* drawer-open時のnavは「必ず header の下」から出す（重なり防止の核） */
  .drawer--top.drawer-open .drawer-nav{
	top: var(--hdrH) !important;
  }
  
  /* ---------------------------------------------------------
	 1) 400px以下（最上部）：ロゴ/h1 がハンバーガーに近い/重なる
	 → inner を画面幅いっぱいにして、右側にハンバーガー分の余白を確保
  --------------------------------------------------------- */
  @media screen and (max-width: 400px){
	header .inner{
	  left: 0 !important;
	  right: 0 !important;
	  width: auto !important;
  
	  /* ハンバーガーの左側スペースを確保（近すぎ・重なり防止） */
	  padding-right: calc(44px + 5dvw + 1.6dvw) !important; /* 40px想定 + 余白 */
	  padding-left: 5dvw !important;
	}
  
	header .inner > div{
	  align-items: flex-start !important;
	  min-width: 0;
	  max-width: 100%;
	  container-type: inline-size;
	}
  
	/* ロゴ・h1 を可変に戻す（固定値に負けない） */
	header .inner > div .logo_ctcf_header{
	  width: clamp(160px, 62cqw, 240px) !important;
	  max-width: none !important;
	  display: block !important;
	  flex: 0 0 auto;
	}
	header .inner > div .logo_ctcf_header img{
	  width: 100%;
	  height: auto;
	  display: block;
	}
	header .inner > div h1.title.on_mobile{
	  font-size: clamp(18px, 10cqw, 26px) !important;
	  line-height: 1.05;
	  margin-top: 4px !important;
	}
  
	/* 最上部基準でサイズ固定（スクロール時も変えない） */
	header.header_bg .inner > div .logo_ctcf_header{
	  width: clamp(160px, 62cqw, 240px) !important;
	}
	header.header_bg .inner > div h1.title.on_mobile{
	  font-size: clamp(18px, 10cqw, 26px) !important;
	}
  }
  
  /* ---------------------------------------------------------
	 2) 460px以上 & 530px未満：header_bg時にロゴが消える／h1上余白が残る
	 → header_bg時の横並び＋ロゴを shrink させない＋h1のmargin-topをゼロ
  --------------------------------------------------------- */
  @media screen and (min-width: 460px) and (max-width: 529px){
	header.header_bg .inner > div{
	  flex-direction: row !important;
	  align-items: center !important;
	  justify-content: flex-start !important;
	  gap: 0.25rem;
	}
	header.header_bg .inner > div .logo_ctcf_header{
	  display: block !important;
	  flex: 0 0 auto !important;  /* ←これが“消える/潰れる”対策 */
	  min-width: 160px;
	  width: clamp(160px, 38cqw, 240px) !important;
	  max-width: none !important;
	}
	header.header_bg .inner > div h1.title.on_mobile{
	  margin-top: 0 !important;
	}
  }
  
  /* ---------------------------------------------------------
	 3) 530px以上 & 768px未満：drawer-nav と header が重なる
	 → nav の top を header 高さ変数に完全同期（上の共通指定で効く）
	 念のため header 自体の高さも変数に寄せてズレを減らす
  --------------------------------------------------------- */
  @media screen and (min-width: 530px) and (max-width: 767px){
	header{
	  height: var(--hdrH) !important;      /* 見かけの高さとnavのtopを一致させる */
	  align-items: center;
	}
  }
  
  /* ---------------------------------------------------------
	 4) 768px以上：h1上の間隔が空きすぎ → 現状の半分程度へ
  --------------------------------------------------------- */
  @media screen and (min-width: 768px){
	header .inner > div h1.title.on_mobile{
	  /*margin-top: clamp(1px, 0.18dvw, 3px) !important;*/ /* 前よりさらに詰める */
	}
  }
  
  /* ---------------------------------------------------------
	 5) 940px以上：header_bg時（横並び）で左揃えにならない
  --------------------------------------------------------- */
  @media screen and (min-width: 940px){
	header.header_bg .inner{
	  justify-content: flex-start !important;
	}
	header.header_bg .inner > div{
	  justify-content: flex-start !important;
	}
  }
  
  /* ---------------------------------------------------------
	 6) 1280px以上：横並びロゴ&h1の縦センターを nav.drawer-nav の縦センターに合わせる
	 → header_bg の余計な上下ズレ要因（padding-top）を打ち消してセンター一致を優先
  --------------------------------------------------------- */
  @media screen and (min-width: 1280px){
	header.header_bg{
	  display: flex;
	  align-items: center;
  
	  /* センター揃えを最優先（padding-top があるとセンターがズレる） */
	  padding-top: 0 !important;
	}
	header.header_bg .inner{
	  display: flex;
	  align-items: center;
	}
	header.header_bg .inner > div{
	  align-items: center !important;
	}
  }



/* =========================================================
   Header brand / drawer overlap / baseline alignment patch
   ※ home.css の末尾に追記
========================================================= */

/* 0) 共通：指定されたヘッダー高さ上限（40px + 2.4dvw + 1.6dvw）を変数化 */
header{
	--hdrH-limit: calc(40px + 2.4dvw + 1.6dvw);
	--hdrH-limit-s: calc(40px + 1.6dvw + 1.6dvw);
	--hdrH-limit-adjust: calc((40px + 1.6dvw + 1.6dvw) * 1.375);
  }
  
  /* =========================================================
	 1) 380px以下（最上部）：ロゴ&h1 と ハンバーガーの間隔を最低1rem確保
  ========================================================= */
  @media screen and (max-width: 380px){
  
	/* 最上部（header_bg ではない時）だけ強制 */
	header:not(.header_bg) .inner{
	  left: 0 !important;
	  right: 0 !important;
	  width: auto !important;
  
	  /* 右：ハンバーガー(40px想定) + 余白 + 最低1rem を確保 */
	  padding-right: calc(40px + 5dvw + 1.6dvw + 1rem) !important;
	  padding-left: 5dvw !important;
	}
  
	/* 念のため：ブランド側が伸びすぎない */
	header:not(.header_bg) .inner > div{
	  max-width: 100% !important;
	  min-width: 0;
	}
  }
  
  /* =========================================================
	 2) 530px以上 & 768px未満（最上部）：drawer-nav と header の重なり防止
	 → headerの高さを上限内に収め、drawer-navのtopを同じに同期
  ========================================================= */
  @media screen and (min-width: 530px) and (max-width: 767px){
  
	.drawer--top header,
	.drawer--top.drawer-open header,
	.drawer--top header.header_bg{
	  height: var(--hdrH-limit) !important;
	  max-height: var(--hdrH-limit) !important;
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	}

	.drawer--top.drawer-open header .inner {
		top: -0.5dvw !important;
	}


	/* drawer-open時、navは必ず header の下から開始 */
	.drawer--top.drawer-open .drawer-nav{
	  top: var(--hdrH-limit-adjust) !important;
	}
  }
  
  /* =========================================================
	 3) 768px以上：最上部だけ h1 の line-height を 0.25 に
  ========================================================= */
  @media screen and (min-width: 768px){
	header:not(.header_bg) h1.title.on_mobile{
	  line-height: 0.25 !important;
	}
  }
  
  /* =========================================================
	 4) 940px以上 & 955px未満（最上部）：左揃え + ベースライン揃え
  ========================================================= */
  @media screen and (min-width: 940px) and (max-width: 954px){
  
	/* 最上部だけ */
	header:not(.header_bg) .inner{
	  justify-content: flex-start !important;
	}
  
	/* ロゴとh1を横並びにして baseline を揃える */
	header:not(.header_bg) .inner > div{
	  flex-direction: row !important;
	  justify-content: flex-start !important;
	  align-items: baseline !important;
	  gap: 1rem;
	}
  
	/* h1の“ベースライン寄せ”を微調整（必要最小限） */
	header:not(.header_bg) h1.title.on_mobile{
	  margin-top: 0 !important;
	  margin-bottom: 0 !important;
	}
  }
  
  /* =========================================================
	 5) 1280px以上：ベースライン微調整 + header_bg時は高さ70px固定で縦センター一致
  ========================================================= */
  @media screen and (min-width: 1280px){
  
	/* header_bg と inner を 70px 固定（要求通り） */
	header.header_bg{
	  height: 70px !important;
	  max-height: 70px !important;
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	}
	header.header_bg .inner{
	  height: 70px !important;
	  display: flex;
	  align-items: center;
	}
  
	/* ロゴ&h1 を nav（=70px帯）に対して縦センター */
	header.header_bg .inner > div{
	  display: flex;
	  flex-direction: row !important;
	  align-items: center !important;
	  gap: 1rem;
	}
  
	/* ベースラインを“見た目で”合わせるための微調整（必要なら数値だけ調整） */
	header.header_bg h1.title.on_mobile{
	  margin-top: 2px !important;
	  margin-bottom: 0 !important;
	  line-height: 1 !important; /* header_bg時は潰さない */
	}
  }



/* =========================================================
   Header brand fine-tune patch (append to end of home.css)
========================================================= */

/* ---------------------------------------------------------
   1) 380px以下・最上部：ブランド（ロゴ&h1）とハンバーガー間を最低1rem確保
   ※「近すぎ/重なる」の最短解は inner の右paddingを増やす
--------------------------------------------------------- */
@media screen and (max-width: 380px){
	header:not(.header_bg) .inner{
	  /* 右：ボタン幅(40px想定)+既存余白+最低1rem */
	  padding-right: calc(40px + 5dvw + 1.6dvw + 1rem) !important;
	}
  }
  
  /* ---------------------------------------------------------
	 2) 530px以上 & 768px未満・最上部：
		drawer-nav（グロナビ）オープン時に header の上に被る
		→ navオープン時（= body.drawer-open）だけ
		  ロゴ&h1 を「横並び」にして header の占有高さを抑える
  --------------------------------------------------------- */
  @media screen and (min-width: 530px) and (max-width: 767px){
	body.drawer-open header .inner > div{
	  flex-direction: row !important;
	  align-items: center !important;
	  justify-content: flex-start !important;
	  gap: 1rem;
	}
	body.drawer-open header .inner > div h1.title.on_mobile{
	  margin-top: 0 !important;
	}
  }
  
  /* ---------------------------------------------------------
	 3) 955px以上・最上部：ロゴとh1のベースラインを揃えたい
		→ baseline 揃え + h1の上下marginで微調整
  --------------------------------------------------------- */
  @media screen and (min-width: 955px){
	header:not(.header_bg) .inner > div{
	  flex-direction: row !important;
	  align-items: baseline !important;
	  justify-content: flex-start !important;
	  gap: 1rem;
	}
  
	/* “最上部だけ”の微調整（まずは控えめな値） */
	header:not(.header_bg) h1.title.on_mobile{
	  margin-top: 0 !important;
	  margin-bottom: 2px !important; /* ←ここで見た目のベースラインを合わせる */
	  line-height: 1 !important;
	}
  }
  
  /* ---------------------------------------------------------
	 4) 1280px以上：
		- h1がロゴより下がって見える → margin-bottom: 6px で持ち上げる
		- header.header_bg .inner の top を -0.7dvw 固定
  --------------------------------------------------------- */
  @media screen and (min-width: 1280px){
	header.header_bg .inner > div h1.title.on_mobile {
	  margin-top: 0 !important;
	  margin-bottom: 3px !important; /* ←指定どおり */
	  line-height: 1 !important;
	}
  
	header.header_bg .inner{
	  top: -0.7dvw !important; /* ←指定どおり */
	}
  }



/* =========================================================
   Header brand extra patch (append to end of home.css)
========================================================= */

/* ---------------------------------------------------------
   1) 360px以下・最上部：ブランド（ロゴ&h1）とハンバーガー間を最低1rem確保
   → inner の右paddingをさらに増やす（最短・確実）
--------------------------------------------------------- */
@media screen and (max-width: 360px){
	header:not(.header_bg) .inner{
	  padding-right: calc(40px + 5dvw + 1.6dvw + 1rem) !important;
	}

	header .inner > div .logo_ctcf_header {
		max-width: 130px	!important;
	}

	header .inner > div h1.title.on_mobile {
		font-size: clamp(14px, 10cqw, 26px) !important;
	}
  }
  
  /* ---------------------------------------------------------
	 2) 530px以上 & 768px未満・最上部：
		drawer open（body.drawer-open）時は横並びにしつつ、
		横幅不足で潰れないようロゴ側を shrink させない + clampで幅を確保
  --------------------------------------------------------- */
  @media screen and (min-width: 530px) and (max-width: 767px){
  
	body.drawer-open header .inner > div{
	  flex-direction: row !important;
	  align-items: center !important;
	  justify-content: flex-start !important;
	  gap: 1rem;
	  min-width: 0;
	}
  
	/* ロゴの潰れ防止（要望の flex + clamp） */
	body.drawer-open header .inner > div .logo_ctcf_header{
	  flex: 0 0 auto !important;
	  width: clamp(250px, 32cqw, 240px) !important;
	  max-width: none !important;
	  display: block !important;
	  margin-top: 0.25dvw	!important;
	}
	body.drawer-open header .inner > div .logo_ctcf_header img{
	  width: 100%;
	  height: auto;
	  display: block;
	}
  
	/* h1は残り幅で折り返し/縮小しやすくする */
	body.drawer-open header .inner > div h1.title.on_mobile{
	  margin-top: 0 !important;
	  min-width: 0;
	  font-size: clamp(14px, 10cqw, 22px) !important;
	}

	header:not(.header_bg) h1.title.on_mobile {
		margin-top: clamp(1px, 1.18dvw, 6px) !important;
	}
  }
  
  /* ---------------------------------------------------------
	 3) 955px以上：
		「ページ最上部 & drawer-nav open」のときだけ、
		header .inner をスクロール時（header_bg時）と同じ見た目に寄せる
		→ drawer-open時に .inner の幅/位置を header_bg の設定に合わせる
  --------------------------------------------------------- */
  @media screen and (min-width: 955px){
  
	/* 既存の header.header_bg .inner の値に“合わせる”ため、
	   drawer-open時は header_bg と同じ幅計算を採用 */
	body.drawer-open header .inner{
		width: calc(100% - (1.4dvw + 24dvw + 5dvw)) !important;
		/*margin-left: calc(1.4dvw + 24dvw + 5dvw) !important;*/
		margin-left: 0 !important;

	  /* スクロール時に寄せたいので、余計な top を持っていれば消す */
	  top: -0.5dvw !important;
	}
  }








/* ▲ eng グローバルナビゲーション ==================================== */





/* ▼ #area_helo =================================================== */
#area_helo {
	width: 100%;
	height: 100svh;
	container-type: inline-size;
	container-name: container_helo;
	position: relative;

	/* 背景画像 */
	&::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100svh;
		background: url(/recruit/assets/images/hero_bg_sp.png) no-repeat center;
		background-size: cover;
	}

}
/* ▲ end #area_helo =================================================== */




/* 初期は青オビエリア、キャッチコピーエリアはページ外や透明 */
#area_blue-belt{
	opacity: 0;
	transform: translateY(-120vh); /* ページ外上部 */
	will-change: transform, opacity;
}

#area_catch-copy > div{
	opacity: 0;
	will-change: opacity;
}



/* 発火クラス：初回アクセス時のみアニメーション */
body.intro-start #area_blue-belt{
	animation: blueBeltDrop .9s cubic-bezier(.19,1,.22,1) forwards;
	animation-delay: .2s; /* 0.2秒待って開始 */
}

body.intro-start #area_catch-copy > div{
	animation: catchFade 2.5s ease-out forwards;
	animation-delay: 1.1s; /* blue-belt終了後に開始 */
}



/* ▼ area_helo内：左カラム：青オビエリア ================================ */
#area_blue-belt {
	width: 24dvw;
	/* max-width: 400px; */
	height: 98dvh;
	position: absolute;
	top: 0;
	left: 3dvw;
	z-index: 1;

	/*
	background: url(/recruit/assets/images/blue-belt.svg) no-repeat 0 100%;
	background-size: cover;
	*/

	& > div {
		width: 100%;
		height: 100%;


		/* 青オビ ------------------------------- */
		background: linear-gradient(
			180deg,
			rgb(var(--color_ctc-deep-blue) / 1) 0%,
			rgb(var(--color_ctc-deep-blue) / 1) 20%,
			rgb(var(--color_ctc-blue) / 0.8) 60%,
			rgb(var(--color_ctc-blue) / 0.7) 100%
	
		);
	  
		/* 外部SVGでマスク */
		mask-image: url('/recruit/assets/images/blue-belt_mask.svg');
		-webkit-mask-image: url('/recruit/assets/images/blue-belt_mask.svg'); /* Safari用 */
	
	
		/* マスクの設定 */
		mask-size: cover;
		mask-repeat: no-repeat;
		mask-position: 50% 100%;
		-webkit-mask-size: cover;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: 50% 100%;

		position: relative;

		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background: url(/recruit/assets/images/blue-belt_inline.svg) no-repeat 50% 100%;
			background-size: cover;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		/* end 青オビ ------------------------------- */




		.title.on_pc {
			position: absolute;
			width: calc(100% - 1.5dvw - 1.5dvw);
			top: calc(50% - 11dvh);
			left: 1.5dvw;
			container-type: inline-size;

			h1, h2 {
				color: rgb(var(--color_white));
				text-align: center;
			}

			h1 {
				font-size: clamp(48px, 17cqw, 65px);
				font-family: var(--font-antonio);
				font-weight: 900;
				letter-spacing: 0.025em;
			}

			h2 {
				font-size: clamp(16px, 6cqw, 32px);
				font-weight: 400;
				margin-top: 1.75rem;
			}

		}



		& > div {
			width: 100%;
			height: 100%;
			padding: 1rem 1.5dvw 1.5dvw;
			container-type: inline-size;
			container-name: container_blue-belt_inline;
			position: relative;


			/* Scroll アニメーション --------------------------- */
			a.scroll {
				display: block;
				width: 40px;
				height: 65px;
				position: absolute;
				bottom: 1rem;
				left: calc(50% - 20px);
				animation: none;
				z-index: 3;
				cursor: pointer;

				p {
					color: rgb(var(--color_white));
					font-size: 0.625rem;
					font-family: var(--font-antonio);
					font-weight: 600;
					text-align: center;
					letter-spacing: 0.2em;
					margin: 0 0 5px;
					animation: none;
					transform: none;
				}

				div.arrow-wrap {
					position:relative;
					width: 1.25rem;
					height: 30px;
					margin-right: auto;
					margin-left: auto;
					animation: none;

					div.arrow {
						position: absolute;
						width: 100%;
						height: 3px;
						border-radius: 3px;

						opacity: 0;
						transform: translateY(0) scale(.7);

						animation: move 4.5s ease-out infinite;

						&:nth-of-type(1) {
							animation-delay: 0s;
						}

						&:nth-of-type(2) {
							animation-delay: 1.5s;
						}

						&:nth-of-type(3) {
							animation-delay: 3s;
						}
						
						&::before,
						&::after {
							content: ' ';
							position: absolute;
							top: 0;
							height: 100%;
							width: 51%;
							background: rgb(var(--color_white));
						}
						
						&::before {
							left: 0;
							transform: skew(0deg, 30deg);
						}
						
						&::after {
							right: 0;
							width: 50%;
							transform: skew(0deg, -30deg);
						}
						
					}
				}
			}

		}


	}


}



@keyframes arrowmove {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(5px); }
	100% { transform: translateY(0); }
}


@keyframes move{
	/* 上で出現（小さめ・薄め） */
	0%{
	  opacity: 0;
	  transform: translateY(0) scale(.7);
	}
	10%{
	  opacity: .3;
	  transform: translateY(0) scale(.7);
	}
  
	/* 中で最大（全表示） */
	35%{
	  opacity: 1;
	  transform: translateY(13px) scale(1);
	}
  
	/* 下で消える（少し小さめ・60%でフェードアウト） */
	70%{
	  opacity: .6;
	  transform: translateY(26px) scale(.85);
	}
	100%{
	  opacity: 0;
	  transform: translateY(26px) scale(.85);
	}
}
/* end Scroll アニメーション --------------------------- */



/* 青オビ アニメーション ------------------------------- */
@keyframes blueBeltDrop{
	from{
		opacity: 0;
		/*transform: translateY(-120vh);*/
		transform: translateY(-80vh);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
  /* end 青オビ アニメーション ------------------------------- */



/* ▲ end area_helo内：左カラム：青オビエリア ================================ */





/* ▼ area_helo内：右カラム：キャッチコピーエリア ============================= */
#area_catch-copy {
	width: calc(100% - 3dvw - 24dvw - 6dvw - 6dvw);
	height: calc(100dvh - (1.6dvw + 1.6dvw + 40px));
	position: absolute;
	top: calc(1.6dvw + 1.6dvw + 40px);
	right: 6dvw;
	display: flex;
	flex-wrap: wrap;
	align-items: center;


	& > div {
		width: 100%;
		position: relative;

		h3, p {
			text-align: center;
		}

		& > div {
			width: 100%;
			container-type: inline-size;	/* 親をコンテナとして定義 */
			position: relative;

			h3, h3 + p, strong {
				line-height: 1.25em;
			}

			h3, h3 + p {
				width: 100%;
				font-size: clamp(16px, 22.5cqw, 112.5px);
				text-align: center;

				strong {
					font-weight: 700;
					font-size: clamp(21.333px, 30cqw, 150px);
				}
			}

			h3 {
				font-weight: 500;
				background:linear-gradient(
					135deg,
					rgb(var(--color_pale-blue)) 0%,
					rgb(var(--color_pale-blue)) 5%,
					rgb(var(--color_ctc-blue)) 17%,
					rgb(var(--color_ctc-deep-blue)) 34%,
					rgb(var(--color_ctc-blue)) 50%,
					rgb(var(--color_pale-blue)) 62%,
					rgb(var(--color_pale-blue)) 67%,
					rgb(var(--color_ctc-blue)) 83%,
					rgb(var(--color_ctc-deep-blue)) 100%
				);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			h3 + p {
				color: rgb(var(--color_white));
				text-shadow: 
					1px 1px 2px rgb(var(--color_white)), 
					-1px 1px 2px rgb(var(--color_white)), 
					1px -1px 2px rgb(var(--color_white)), 
					-1px -1px 2px rgb(var(--color_white));
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

		}

	}

}





.en-catch-copy {
	color: rgb(var(--color_bright-blue));
	font-size: clamp(14px, 10cqw, 18px);
	font-family: var(--font-antonio);
	font-weight: 700;
	/*padding-top: calc(1.875rem + 1.875rem + 3px);*/
	padding-top: calc(1em + 1em + 3px);
	position: relative;

	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 3px;
		background: linear-gradient(
			90deg, 
			rgb(var(--color_light-blue) / 0.2) 0%, 
			rgb(var(--color_ctc-blue) / 0.7) 30%, 
			rgb(var(--color_ctc-blue) / 0.7) 70%, 
			rgb(var(--color_light-blue) / 0.2) 100%
		);
		position: absolute;
		/*top: 1.75rem;*/
		top: 1em;
		left: 0;
	}
}




/* キャッチコピーエリア内　文字サイズ調整 ------------------------------ */
@media screen and (min-width: 375px) and (max-width: 639px) {
	#area_catch-copy {
		& > div {
			& > div {
				h3, h3 + p, strong {
					letter-spacing: 0.0125em;
					line-height: 1.15em;
				}

				h3, h3 + p {
					/*font-size: min(calc(16.6dvw * .79), 2.484375rem);*/
					font-size: clamp(16px, 22.5cqw, 112.5px);

					strong {
						/*font-size: min(16.6dvw, 3.3125rem);*/
						font-size: clamp(21.333px, 30cqw, 150px);
					}
				}
			}
		}

		.en-catch-copy {
			font-size: clamp(18px, 10cqw, 22px);
		}
	}
}


@media screen and (min-width: 640px) {
	#area_catch-copy {
		& > div {
			& > div {
				h3, h3 + p, strong {
					letter-spacing: 0.0125em;
					line-height: 1.15em;
				}

				h3, h3 + p {
					/*font-size: min(calc(16.6dvw * .79), 4.828125rem);*/
					font-size: clamp(16px, 22.5cqw, 112.5px);

					strong {
						/*font-size: min(16.6dvw, 6.4375rem);*/
						font-size: clamp(21.333px, 30cqw, 150px);
					}
				}
			}

			.en-catch-copy {
				font-size: clamp(18px, 10cqw, 38px);
			}
		}
	}
}


@media screen and (min-width: 768px) {
	#area_catch-copy {
		& > div {
			& > div {
				h3, h3 + p, strong {
					letter-spacing: 0.025em;
					line-height: 1.15em;
				}

				h3, h3 + p {
					/*font-size: min(calc(16.6dvw * .79), 3.890625rem);*/
					font-size: clamp(16px, 21cqw, 112.5px);

					strong {
						/*font-size: min(16.6dvw, 5.1875rem);*/
						font-size: clamp(21.333px, 28cqw, 150px);
					}
				}
			}

			.en-catch-copy {
				font-size: clamp(18px, 10cqw, 38px);
			}
		}
	}
}


@media screen and (min-width: 1280px) {
	#area_catch-copy {
		& > div {
			& > div {
				h3, h3 + p {
					/*font-size: min(calc(16.6dvw * .79), 3.890625rem);*/
					line-height: 1.35em;
					font-size: clamp(16px, 22.5cqw, 112.5px);
	
					strong {
						/*font-size: min(16.6dvw, 5.1875rem);*/
						font-size: clamp(21.333px, 30cqw, 150px);
					}
				}
			}

			.en-catch-copy {
				font-size: clamp(18px, 10cqw, 38px);

				&::before {
					height: 5px;
				}
			}
		}
	}
}





/* キャッチコピー アニメーション ------------------------------- */
@keyframes catchFade{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/* end キャッチコピー アニメーション ------------------------------- */


/* ▲ end area_helo内：右カラム：キャッチコピーエリア ============================= */















/* ▼ 共通：新卒・キャリア採用 =================================================== */
#newgrads, #career {
	overflow: hidden;
	padding: 10dvw 10dvw 2.5rem;
	position: relative;


	& > div:nth-of-type(1) {
		h2 {
			color: rgb(var(--color_white));
			font-size: 2rem;
			font-weight: 600;
			text-align: center;
			letter-spacing: 0.1em;
			margin-bottom: 5dvw;
			padding-top: 3.0rem;
			padding-bottom: calc(1.25rem + 2px);
			position: relative;
			z-index: 2;

			span {
				display: block;
				color: rgb(var(--color_white) / 0.12);
				font-size: 3.1em;
				font-family: "Antonio", sans-serif;
				font-optical-sizing: auto;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0;
				text-align: center;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				/*margin-top: -3.125rem;*/
			}

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 2px;
				background: linear-gradient(
					90deg,
					transparent 0%,
					rgb(var(--color_white) / 1) 50%,
					transparent 100%
				);
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
			}
		}


		ul {
			li {
				width: 100%;
				height: calc((100dvw - 10dvw - 10dvw) * 0.982);
				margin-top: 10dvw;
				border-radius: 10px;
				overflow: hidden;


				a {
					display: block;
					width: 100%;
					height: 100%;
					position: relative;
					transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
					z-index: 3;


					div {
						width: 100%;
						height: 100%;
						position: relative;

						/* 文字裏グラデーション */
						&::after {
							content: '';
							display: block;
							width: 100%;
							height: 100%;
							opacity: 1;
							transition: opacity 1s ease;
							z-index: 1;

							position: absolute;
							top: 0;
							left: 0;
						}

						img {
							position: absolute;
							top: 0;
							left: 0;
							display: block;
							width: 100%;
							height: auto;
							transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
						}
					}


					p.font-icon {
						color: rgb(var(--color_white));
						font-size: min(5.25dvw, 18px);
						font-weight: 400;
						text-shadow: 2px 2px 2px rgba(var(--color_black) / .75);
						text-indent: -0.55em;
						letter-spacing: 0.075em;
						padding-left: 1em;
						position: absolute;
						top: 74%;
						left: 1.125rem;
						z-index: 2;

						&::before {
							content: '\f061';
							font-size: 0.85em;
							vertical-align: 0.045em;
							margin-right: 0.5em;
						}
					}

					&:hover {
						div {
							&::after {
								opacity: 0.5;
							}
						}

						img {
							transform: scale(1.12);
						}
					}
				}

			}
		}


		.btn_w {
			width: 75%;
			margin: 2.5rem auto 0;
			text-align: center;

			em {
				display: block;
				font-style: normal;
			}

			a, em {
				display: block;
				background-color: rgb(var(--color_white));
				border-radius: 10px;
				padding: 0.5em 0 0;
				height: 40px;
				transition: background-color 0.75s ease;

				span.font-icon {
					font-size: 1.125rem;
					font-weight: 600;
					letter-spacing: 0.1em;
					line-height: 1;							

					&::before {
						content: '\f061';
						font-size: 0.85em;
						vertical-align: 0.085em;
						margin-right: 0.5em;
					}

					small {
						font-weight: 400;
					}
				}
			}

			a {
				&:hover {
					background-color: rgb(var(--color_light-neon-blue));
				}
			}

		}

	}


	& > div:nth-of-type(2) {
		width: 100dvw;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;

		&::before, &::after {
			display: block;
			position: absolute;
		}
	}


}




@media screen and (min-width: 640px) {
	#newgrads, #career {
		padding-bottom: 10dvw;

		& > div:nth-of-type(1) {
			& h2 {
				padding-top: 0		!important;

				span {
					font-size: clamp(2.23em, 10cqw, 6.25rem)	!important;
					bottom: 0rem	!important;
					line-height: 1	!important;
				}
			}
		}
	}
}




@media screen and (min-width: 768px) {
	#newgrads, #career {
		& > div:nth-of-type(1) {
			& h2 {
				padding-top: 0		!important;

				span {
					font-size: clamp(2.23em, 14cqw, 6.25rem)	!important;
					bottom: 0rem;
				}
			}

			& ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				li {
				}
			}

			.btn_w {
				width: calc(100% / 2);
				margin-top: 5dvw;
				line-height: 1;

				a, em {
					height: 3.125rem;
					padding-top: calc((3.125rem - (1.125rem * 1.1)) / 2);
				}
			}
		}
	}
}


@media screen and (min-width: 768px) and (max-width: 1279px) {
	#newgrads, #career {
		& > div:nth-of-type(1) {
			& ul {
				li {
					width: calc((100% - 5dvw) / 2);
					height: calc((100dvw - 10dvw - 10dvw) * 0.982 * 0.485);
					margin-top: 5dvw;

					&:nth-of-type(1), &:nth-of-type(2) {
						margin-top: 0;
					}
				}
			}
		}
	}
}


@media screen and (min-width: 1280px) {
	#newgrads, #career {
		padding: 160px 0 80px;

		& > div:nth-of-type(1) {
			width: var(--inner-w-pc);
			margin-right: auto;
			margin-left: auto;

			& ul {
				li {
					width: calc((1200px - (40px * 3)) / 4);
					height: calc(((1200px - (40px * 3)) / 4) * 1.037);
					margin-top: 0;

				}


			}

			& .btn_w {
				a,em {
					width: 400px;
					height: 50px;
					margin: 0 auto;
					padding-top: calc((50px - (1.125rem * 0.99)) / 2);
				}

			}
		}
	}
}


@media screen and (max-width: 339px) {
	#newgrads, #career {
		& > div:nth-of-type(1) {
			& ul {
				& li {
					& a {
						p.font-icon {
							letter-spacing: 0;
						}
					}
				}
			}
		}
	}
}


@media screen and (min-width: 435px) and (max-width: 767px) {
	br.LineBreak-adjustment {
		display: none;
	}

	#newgrads, #career {
		& > div:nth-of-type(1) {
			& ul {
				& li {
					& a {
						p.font-icon {
							top: inherit;
							bottom: 2.25rem;
						}
					}
				}
			}
		}
	}

}

/* ▲ end 共通：新卒・キャリア採用 =================================================== */





#newgrads {

	& > div:nth-of-type(1) {
		h2 {
			padding-top: 4.5rem;

			span {
				font-size: 2.23em;
				line-height: 0.745em;
				bottom:calc(5dvw / 2);
			}
		}

		ul {
			li {
				box-shadow: 5px 5px 8px rgb(var(--color_black) / .35);

				a {
					div {
						/* 文字裏グラデーション */
						&::after {
							background-image: linear-gradient(
								0deg,
								rgb(var(--color_ctc-deep-blue) / 0.9) 0%,
								rgb(var(--color_ctc-deep-blue) / 0.75) 15%,
								transparent 55%,
								transparent 100%
							);
						}
					}
				}
			}
		}

		.btn_w {
			a {
				box-shadow: 5px 5px 8px rgb(var(--color_black) / .35);
			}

			span.font-icon {
				color: rgb(var(--color_ctc-blue));
			}
		}

		p.btn_w:not(:has(a)) {
			em {
				background-color: rgb(var(--color_white) / .7);

				span.font-icon {
					color: rgb(var(--color_ctc-blue) / 0.6);
				}
			}
		}
	}


	& > div:nth-of-type(2) {
		background-color: rgb(var(--color_ctc-blue));

		/* 背景：円形グラデーション */
		&::before {
			content: '';
			display: block;
			width: 200dvw;
			height: 200dvw;
			background-image: radial-gradient(
				circle,
				rgb(var(--color_white)) 0,
				rgb(0 124 225) 46%,
				rgb(var(--color_ctc-blue)) 70%,
				transparent 100%
			);
			position: absolute;
			top: calc(50% - 100dvw);
			left: -100dvw;
			z-index: -2;
		}

		/* 背景：モチーフ画像 */
		&::after {
			content: '';
			display: block;
			width: 200%;
			height: 100%;
			background: url(/recruit/assets/images/newgrads_bg_motif_pc.png) no-repeat 0 0;
			background-size: 200% 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

	}

}



@media screen and (min-width: 455px) {
	#newgrads {
		& > div:nth-of-type(1) {
			h2 {
				padding-top: 3.0rem;
			}
		}
	}
}




#career {
	& > div:nth-of-type(1) {
		ul {
			li {
				box-shadow: 5px 5px 8px rgb(var(--color_black) / .55);

				a {
					div {
						/* 文字裏グラデーション */
						&::after {
							background-image: linear-gradient(
								0deg,
								rgb(var(--color_ctc-deep-blue) / 0.9) 0%,
								rgb(var(--color_ctc-deep-blue) / 0.85) 15%,
								transparent 55%,
								transparent 100%
							);
						}
					}
				}
			}
		}

		.btn_w {
			a {
				box-shadow: 5px 5px 8px rgb(var(--color_black) / .55);
			}

			span.font-icon {
				color: rgb(var(--color_ctc-deep-blue));
			}
		}

		p.btn_w:not(:has(a)) {
			em {
				background-color: rgb(var(--color_white) / .7);

				span.font-icon {
					color: rgb(var(--color_ctc-deep-blue) / 0.6);
				}
			}
		}
	}


	& > div:nth-of-type(2) {
		background-color: rgb(var(--color_ctc-deep-blue));

		/* 背景：円形グラデーション */
		&::before {
			content: '';
			display: block;
			width: 200dvw;
			height: 200dvw;
			background-image: radial-gradient(
				circle,
				rgb(var(--color_white) / 0.85) 0,
				rgb(0 124 210) 46%,
				rgb(var(--color_ctc-deep-blue)) 70%,
				transparent 100%
			);
			position: absolute;
			top: calc(50% - 100dvw);
			right: -100dvw;
			z-index: -2;
		}

		/* 背景：モチーフ画像 */
		&::after {
			content: '';
			display: block;
			width: 200%;
			height: 100%;
			background: url(/recruit/assets/images/career_bg_motif_pc.png) no-repeat 100% 0;
			background-size: 200% 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}


	}

}



@media screen and (min-width: 1280px) {
	#newgrads, #career {
		& > div:nth-of-type(1) {
			h2 {
				font-size: 2.333rem;
				letter-spacing: 0.125em;

				span {
					font-size: 8.333rem		!important;
					bottom: 2px		!important;
				}
			}
		}

		& > div:nth-of-type(2) {
			&::before {
				width: 100dvw;
				height: 100dvw;
				top: calc(50% - 50dvw);
				left: calc(50% - 50dvw);
				opacity: 0.6;
			}

			&::after {
				width: 100%	;
				background-size: cover;
				background-position: center;
			}
		}
	}
}










#pagetop, #pagetop a {
	width: 40px;
	height: 40px;
	display: block;
	padding: 0;
}


#pagetop {
	position: fixed;
	right: 1.6dvw;
	/* bottom: 180px; */
	bottom: 1.6dvw;
	z-index: 1000;

	a {
		background-color: rgb(var(--color_white) / 0.75);
		border-radius: 5px;
		padding: 8.5px 11px 0;
		box-shadow: 0 0 7px rgb(var(--color_ctc-blue));
		transition: background-color 0.75s ease;

		div {
			width: 18px;
			height: 22.4199px;
			background-color: rgb(var(--color_ctc-blue));
			-webkit-mask-image: url('/recruit/assets/images/arrow_pagetop.svg');
			mask-image: url('/recruit/assets/images/arrow_pagetop.svg');
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			transition: background-color 0.75s ease;
		}

		&:hover {
			background-color: rgb(var(--color_ctc-blue) / 0.75);

			div {
				background-color: rgb(var(--color_white) / 0.5);
			}
		}
	}

}



footer {
	padding: 11dvw 10dvw 10dvw;
	background: linear-gradient(
		180deg,
		rgb(154 195 255 / 1) 0%,
		rgb(240 240 240 / 1)  100%
	);

	div {
		figure {
			display: block;
			max-width: 406px;

			a {
				img {
					filter: invert(43%) sepia(2%) saturate(0%) hue-rotate(210deg) brightness(90%) contrast(92%);
					transition: filter 1s ease;
				}

				&:hover {
					filter: invert(20%) sepia(44%) saturate(6343%) hue-rotate(204deg) brightness(91%) contrast(101%);
				}
			}
		}

		ul {
			margin: 1.5rem 0 1rem;

			li {
				font-size: 0.875rem;
				font-weight: 500;
				margin-top: 0.5em;

				a.font-icon {
					color: rgb(var(--color_gray));
					transition: filter 1s ease;

					&::before {
						content: '\f061';
						font-size: 0.85em;
						vertical-align: 0.085em;
						margin-right: 0.5em;
					}

					&[target='_blank'] {
						&::after {
							content: '\f08e';
							margin-left: 0.5em;
							vertical-align: 0.1em;
						}
					}

					&[href$='pdf'] {
						&::after {
							content: '\f1c1';
							margin-left: 0.5em;
							vertical-align: 0.1em;
						}
					}

					&:hover {
						color: rgb(var(--color_ctc-blue));
					}
				}
			}
		}

		small {
			display: block;
			color: rgb(var(--color_gray));
			font-size: 0.6875rem;
			color: rgb(var(--color_gray));
			font-family: "Antonio", sans-serif;
			font-optical-sizing: auto;
			font-weight: 200;
			letter-spacing: 0.075em;
			padding-top: 1rem;
			border-top: solid 1px rgb(var(--color_gray) / 0.3);
		}
	}
}




@media screen and (min-width: 768px) {
	footer {
		padding: 7dvw 10dvw 8dvw;

		& > div {
			width: fit-content;
			margin-right: auto;
			margin-left: auto;

			figure {
				max-width: 470px;
				margin-right: auto;
				margin-left: auto;
			}

			& > div {
				ul {
					margin-right: 2rem;
					margin-left: 2rem;
					text-align: end;

					li {
						display: inline-block;
						font-size: 0.9375rem;

						& + li {
							margin-left: 2em;
						}
					}
				}

				small {
					display: block;
					width: 100%;
					font-size: 0.8125rem;
					letter-spacing: 0.1em;
					text-align: center;
				}

			}
		}

	}
}




@media screen and (min-width: 1280px) {
	footer {
		padding: 80px 0;

		& > div {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			width: 960px;
			margin: 0 auto;

			figure {
				width: 406px;
				height: auto;
			}

			& > div {
				width: 474px;

				ul {
					margin: 0 0 0.833rem;

					li {
						display: inline-block;
						margin-top: 0;
					}

					li + li {
						margin-left: 30px;
					}
				}

				small {
					display: block;
					width: 100%;
					padding-top: 0.833rem;
					padding-left: 0.25rem;
					font-size: 0.722rem;
					letter-spacing: 0.1em;
					text-align: left;
					border-top: solid 1px rgb(var(--color_gray) / 0.3);
				}
			}

		}


	}
}