:root {
	--base-color: #165CCC;
	--text-color: #fff;
	--text-sub-color: #094AB1;
	/* ====== SP(375-677) =======*/
	--size-52: clamp(3.25rem, 1.552rem + 6.93vw, 6.633rem); /* 52px → 106.3px */
  --size-48: clamp(3rem, 1.432rem + 6.4vw, 6.133rem); /* 48px → 98.1px */
  --size-40: clamp(2.5rem, 1.194rem + 5.33vw, 5.111rem); /* 40px → 81.8px */
	--size-38: clamp(2.375rem, 1.133rem + 5.06vw, 4.86rem); /* 38px → 77.7px */
	--size-32: clamp(2rem, 0.955rem + 4.27vw, 4.089rem);        /* 32px → 65.4px */
	--size-24: clamp(1.5rem, 0.716rem + 3.2vw, 3.067rem); /* 24px → 49.1px */
  --size-20: clamp(1.25rem, 0.597rem + 2.67vw, 2.556rem); /* 20px → 40.9px */
  --size-16: clamp(1rem, 0.477rem + 2.13vw, 2.045rem); /* 16px → 32.7px */
  --size-14: clamp(0.875rem, 0.417rem + 1.87vw, 1.789rem); /* 14px → 28.6px */
  --size-12: clamp(0.75rem, 0.358rem + 1.6vw, 1.534rem); /* 12px → 24.5px */
  --size-10: clamp(0.625rem, 0.298rem + 1.33vw, 1.278rem); /* 10px → 20.4px */
  --size-8: clamp(0.5rem, 0.239rem + 1.07vw, 1.023rem); /* 8px → 16.4px */
  --size-4: clamp(0.25rem, 0.119rem + 0.53vw, 0.511rem); /* 4px → 8.2px */
  --size-2: clamp(0.125rem, 0.06rem + 0.27vw, 0.256rem); /* 2px → 4.1px */
	/* ====== PC(678-1280) =======*/
	--size-64-pc: clamp(3.392rem, 0.812rem + 4.28vw, 4rem); /* 54.3px → 64px */
	--size-52-pc: clamp(2.756rem, 0.659rem + 3.48vw, 3.25rem); /* 44.1px → 52px */
	--size-40-pc: clamp(2.12rem, 0.507rem + 2.68vw, 2.5rem); /* 33.9px → 40px */
  --size-32-pc: clamp(1.696rem, 0.406rem + 2.14vw, 2rem); /* 27.1px → 32px */
	--size-28-pc: clamp(1.484rem, 0.355rem + 1.87vw, 1.75rem);/* 23.7px → 28px */
  --size-24-pc: clamp(1.272rem, 0.304rem + 1.61vw, 1.5rem); /* 20.4px → 24px */
	--size-22-pc: clamp(1.166rem, 0.279rem + 1.47vw, 1.375rem);/* 18.7px → 22px */
  --size-20-pc: clamp(1.060rem, 0.254rem + 1.34vw, 1.25rem); /* 17.0px → 20px */
	--size-18-pc: clamp(0.954rem, 0.228rem + 1.20vw, 1.125rem); /* 15.3px → 18px */
  --size-16-pc: clamp(0.848rem, 0.203rem + 1.07vw, 1rem); /* 13.6px → 16px */
  --size-14-pc: clamp(0.742rem, 0.178rem + 0.94vw, 0.875rem);/* 11.9px → 14px */
  --size-12-pc: clamp(0.636rem, 0.152rem + 0.8vw, 0.75rem); /* 10.2px → 12px */
	--size-8-pc: clamp(0.424rem, 0.102rem + 0.53vw, 0.5rem); /* 6.8px → 8px */
	--size-4-pc: clamp(0.212rem, 0.051rem + 0.27vw, 0.25rem); /* 3.4px → 4px */
  --size-2-pc: clamp(0.106rem, 0.025rem + 0.13vw, 0.125rem); /* 1.7px → 2px */
}

html {
	scroll-behavior: smooth;
	margin-top: 0;
}

body {
	font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
	font-size: var(--size-14);
	line-height: 1.7;
	color: var(--text-color);
	background-color: var(--base-color);
	background: url(/img/new-grad/noise.webp) repeat;
	background-size: 160px 160px;
}

img {
	max-width: 100%;
	height: auto;
}

.header {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	padding: var(--size-12);
} 

.inner {
	max-width: 1280px;
	margin: 0 auto;
}

.hero {
	position: relative;
	background: rgba(50, 122, 237, 0.6);
}

.hero__img {
	mix-blend-mode: overlay;
}

.hero__img img {
	width: 100%;
}

.hero__content {
	width: 100%;
	position: absolute;
	top: 72%;
	left: 50%;
	transform: translate(-50%, -72%);
	display: grid;
	place-items: center;
	gap: var(--size-4);
}

.primary-btn {
	border-radius: calc(infinity * 1px);
	background: linear-gradient(115deg,#0B2041 0%, #1F4F9B 25%, #0B2041 50%, #9FC5FF 75%, #B3D0FF 87.5%, #C8DDFE 100%);
	background-size: 200% 100%;
	background-position: 0% 0%;
	transition: opacity 0.8s ease;
	box-shadow: 0 0 16px 0 rgba(255, 255, 255, 0.50);
	padding: 1em 2em;
	font-size: var(--size-16);
	line-height: 1.5;
	font-weight: 700;
	color: var(--text-color);
	text-align: center;
	animation: flicker 7s linear infinite;
}

@keyframes flicker {
	0% {
		background-position: 0% 0%;
	}

	50% {
		background-position: 30% 0%;
	}

	100% {
		background-position: 0% 0%;
	}
}

.primary-btn--floating {
	position: fixed;
	bottom: var(--size-12);
	margin: 0 var(--size-20);
	left: 0;
	right: 0;
	z-index: calc(infinity);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
	opacity: 0;
	transform: translateY(100px) scale(0.8);
}

.primary-btn--floating.visible {
	opacity: 1;
  transform: translateY(0) scale(1);
	animation: fadeInUp 0.4s ease-out, flicker 7s linear infinite;
}

.primary-btn--floating.hidden {
	opacity: 0;
	transform: translateY(100px) scale(0.8);
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(200px) scale(0.7);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.br-pc {
	display: none;
}

.container {
	padding: var(--size-40) var(--size-20) 0;
	display: flex;
	flex-direction: column;
	gap: var(--size-52);
}

.section-title {
	font-size: var(--size-38);
	font-weight: 700;
	line-height: 1.3;
	background:linear-gradient(90deg, #E1EFFF 50%, #5DA9FF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	width: fit-content;
	padding-bottom: var(--size-16);
}

.section-title--m {
	font-size: var(--size-32);
}

.section-title--s {
	font-size: var(--size-20);
}

.section-text--emphasis {
	font-weight: 700;
}

.reference-btn {
	display: flex;
	align-items: center;
	font-weight: 700;
	line-height: 1.5;
	padding-top: var(--size-16);
	transition: all 0.4s ease;
	width: fit-content;
}

.reference-btn--white::before {
	content: "";
	display: inline-block;
	width: var(--size-32);
	height: var(--size-32);
	background: url(../img/new-grad/icon_fili-circle-arrow_white.svg) no-repeat center center;
	background-size: contain;
	margin-right: var(--size-8);
}

.reference-btn--blue {
	padding-top: var(--size-8);
}

.reference-btn--blue::before {
	content: "";
	display: inline-block;
	width: var(--size-32);
	height: var(--size-32);
	background: url(../img/new-grad/icon_fili-circle-arrow_blue.svg) no-repeat center center;
	background-size: contain;
	margin-right: var(--size-8);
}

.section-text {
	padding-bottom: var(--size-20);
}

/* --------- メッセージ -----------*/
.massage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--size-24) var(--size-12);
}

.massage__voice {
	display: flex;
	flex-direction: column;
	gap: var(--size-12);
	grid-column: 1;
  grid-row: 1;
}

.massage__quote {
	font-size: var(--size-16);
	font-weight: 700;
	position: relative;
}

.massage__quote::before {
	content: "“";
}

.massage__quote::after {
	content: "”";
}

.massage__name {
	font-size: var(--size-12);
	opacity: 0.8;
}

.massage__company {
	display: flex;
	flex-direction: column;
	gap: var(--size-12);
	grid-column: 1 / 3;
  grid-row: 2;
}

.massage__img {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
}

.massage__text--large {
	font-size: var(--size-16);
	font-weight: 700;
}

/* ---------クロストーク -----------*/
.cross-talk__cards {
	display: flex;
	flex-direction: column;
	gap: var(--size-16);
}

.cross-talk__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.cross-talk__combo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: linear-gradient(135deg, #0B2041 0%, rgba(11, 32, 65, 0.20) 50%, #0B2041 100%);
	position: relative;
	transition: all 0.8s ease;
}

.cross-talk__combo::after {
	content: "";
	background: url(../img/new-grad/icon_circle-arrow.svg) no-repeat center center;
	background-size: contain;
	position: absolute;
	width: var(--size-32);
	height: var(--size-32);
	bottom: 0;
	right: 0;
}

.cross-talk__combo--reverse {
	background: linear-gradient(45deg, #0B2041 0%, rgba(11, 32, 65, 0.20) 50%, #0B2041 100%);
}

.cross-talk__img {
	width: 100%;
}

.cross-talk__text {
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: var(--size-2);
	text-align: center;
	font-size: var(--size-10);
	line-height: 1.3;
}

.cross-talk__name {
	font-size: var(--size-16);
	font-weight: 700;
}

.cross-talk__generation {
	font-size: var(--size-12);
	font-weight: 700;
}

.cross-talk__symbol {
	font-size: var(--size-16);
	font-weight: 700;
}

/* ---------IBJの魅力 -----------*/
.charm__examples {
	display: flex;
	flex-direction: column;
	gap: var(--size-24);
}

.charm__sub-title {
	font-size: var(--size-16);
	padding-bottom: var(--size-12);
	font-weight: 700;
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: var(--size-4);
}

.charm__sub-title::before {
	content: "";
	display: block;
	width: var(--size-24);
	height: var(--size-24);
	background: url(../img/new-grad/icon_double-arrow.svg) no-repeat center center;
	background-size: contain;
	line-height: 1.3;
}

.charm__img {
	width: 100%;
}

/* --------- キャリアの構築 -----------*/
.job-rotation__img {
	width: 100%;
}

/* --------- キャリア事例 -----------*/
.career-case__thumbnails {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--size-4);
	margin-bottom: var(--size-16);
	padding-right: var(--size-20);
}

.career-case__thumbnail {
	cursor: pointer;
	transition: all 0.8s ease;
	position: relative;
}

.career-case__thumbnail-image {
	aspect-ratio: 1;
	transition: all 0.8s ease;
	background: rgba(255, 255, 255, 0.15);
	width: 100%;
}

.career-case__thumbnail--active .career-case__thumbnail-image {
	background: rgba(121, 250, 255, 0.41);
}

.career-case__thumbnail-label {
	font-size: var(--size-10);
	text-align: center;
	line-height: 1.3;
	padding-top: var(--size-4);
}

.career-case__name {
	font-size: var(--size-12);
}

.career-case__navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--size-20);
}

.career-case__nav-button {
	width: 24px;
	height: 24px;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.career-case__nav-button:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.career-case__nav-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.career-case__nav-button svg {
	width: 16px;
	height: 16px;
	fill: white;
}

.career-case__counter {
	font-size: var(--size-14);
	font-weight: bold;
}

.career-case__main-content {
	overflow: hidden;
	position: relative;
}

.career-case__main-image-container {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
	position: relative;
	width: 100%; /* 明示的にコンテナ幅を設定 */
	max-width: calc(100vw - var(--size-20)); /* ビューポート幅を超えないように */
	scroll-behavior: smooth;
}

.career-case__main-image-container::-webkit-scrollbar {
	height: 8px;
}

.career-case__main-image-container::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}

.career-case__main-image-container::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
}

.career-case__main-image {
	height: calc(var(--size-32) * 4);
	object-fit: contain;
	display: block;
	min-width: fit-content;
	transition: opacity 0.4s ease;
	max-width: none;
	width: auto; /* 画像の自然な幅を使用 */
}

.career-case__main-info {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.career-case__profile-image {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, 0.3);
}

.career-case__profile-info {
	flex: 1;
}

.career-case__profile-name {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

.career-case__career-timeline {
	display: flex;
	align-items: center;
	gap: 20px;
}

.career-case__career-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.career-case__career-year {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

.career-case__career-department {
	background: rgba(255, 255, 255, 0.2);
	padding: 8px 12px;
	border-radius: 20px;
	font-size: 14px;
	text-align: center;
	min-width: 120px;
}

.career-case__career-arrow {
	width: 40px;
	height: 2px;
	background: white;
	position: relative;
	margin: 0 10px;
}

.career-case__career-arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: -4px;
	width: 0;
	height: 0;
	border-left: 8px solid white;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.scroll {
  position: relative;
	font-size: var(--size-12);
	margin-top: var(--size-4);
}

/* 線のアニメーション部分 */
.scroll::before {
  animation: scrollHorizontal 2s infinite;
  background-color: #fff;
  left: 3em;
  content: "";
  width: calc(var(--size-20) * 8);
  top: 0;
  margin: auto;
  position: absolute;
  bottom: 0;
  height: 1px;
}

/* 横スクロールの線のアニメーション */
@keyframes scrollHorizontal {
  0% {
    transform: scale(0, 1);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scale(0, 1);
    transform-origin: 100% 0;
  }
}

/* --------- 社内制度 -----------*/
.general-list {
	background: linear-gradient(91deg, #D6E9FF 0%, #BFD7FF 50%, #D6E9FF 100%);
	padding: var(--size-20);
	display: flex;
	flex-direction: column;
	gap: var(--size-20);
	color: var(--text-sub-color);
}

.general-list__title {
	font-size: var(--size-16);
	font-weight: 700;
	padding-bottom: var(--size-4);
	line-height: 1.3;
}

/* --------- 行動指針 -----------*/
.credo__list {
	display: flex;
	flex-direction: column;
	gap: var(--size-8);
}

.credo__item {
	background: linear-gradient(91deg, #D6E9FF 0%, #BFD7FF 50%, #D6E9FF 100%);
	padding: var(--size-8);
	color: var(--text-sub-color);
	display: flex;
	align-items: center;
	gap: var(--size-8);
	font-weight: 700;
}

.credo__item::before {
	content: " ";
	display: inline-block;
	width: var(--size-12);
	height: var(--size-12);
	min-width: var(--size-12);
	background: url(../img/new-grad/new-grad/icon_check.svg) no-repeat center center;
	background-size: contain;
}

/* --------- フッター --------- */
.footer {
  padding: var(--size-32) var(--size-20) calc(var(--size-40) * 2);
	border-top: 1px solid #fff;
	margin-top: var(--size-52);
}

.footer__main {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--size-24);
	line-height: 1.5;
}

.footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--size-8);
}

.footer__link {
  color: var(--text-color);
  font-weight: 700;
}

.footer__external-links {
  display: flex;
	align-items: center;
	flex-wrap: wrap;
  gap: var(--size-12) var(--size-16);
}

.footer__external-link {
	display: flex;
	align-items: center;
	font-size: var(--size-12);
}

.footer__introduction-link {
		font-size: var(--size-12);
}

.footer__external-link::after {
	content: "";
	background: url(../img/new-grad/new-grad/icon_open.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: var(--size-16);
	height: var(--size-16);
	margin-left: var(--size-4);
}

.footer__sns {
  border-radius: 8px;
	background: rgba(255, 255, 255, 0.8);
  padding: var(--size-8) var(--size-16);
  display: flex;
  gap: var(--size-16);
  align-items: center;
  justify-content: flex-start;
}

.footer__sns img {
  display: block;
}

.footer__copyright {
  font-size: var(--size-12);
  opacity: 0.8;
}

.attention {
  font-size: var(--size-12);
  opacity: 0.8;
  padding-top: var(--size-16);
}

@media (min-width: 678px) {
	body {
		font-size: var(--size-18-pc);
	}

	.br-sp {
		display: none;
	}

	.br-pc {
		display: block;
	}

	.container {
		padding: calc(var(--size-20-pc) * 4) 0 0;
		gap: calc(var(--size-40-pc) * 3);
	}

	.inner {
		width: 100%;
		max-width: 1080px;
		padding: 0 var(--size-40-pc);
	}

	.primary-btn {
		font-size: var(--size-22-pc);
		padding: var(--size-20-pc) var(--size-40-pc);
		max-width: calc(var(--size-20-pc) * 15);
		margin: 0 auto;
	}

	.primary-btn--floating {
		width: calc(var(--size-40-pc) * 4.5);
		height: calc(var(--size-40-pc) * 4.5);
		padding: var(--size-32-pc) 0 0; 
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: var(--size-8-pc);
		right: var(--size-40-pc);
		left: auto;
		bottom: var(--size-40-pc);
		margin: 0;
		font-size: var(--size-18-pc);
		letter-spacing: 0.04em;
	}

	.primary-btn--floating::after {
		content: "";
		display: block;
		width: var(--size-32-pc);
		height: var(--size-32-pc);
		background: url(../img/new-grad/icon_double-arrow.svg) no-repeat center center;
		background-size: contain;
	}

	.section-title {
		font-size: var(--size-64-pc);
		padding-bottom: var(--size-40-pc);
	}

	.section-title--m {
		font-size: var(--size-40-pc);
	}

	.section-text {
		padding-bottom: var(--size-40-pc);
	}

	.reference-btn {
		font-size: var(--size-24-pc);
		padding-top: var(--size-40-pc);
	}

	.reference-btn--blue {
		padding-top: var(--size-8-pc);
		font-size: var(--size-18-pc);
	}

	.reference-btn--blue::before {
		width: calc(var(--size-24-pc) * 2);
		height: calc(var(--size-24-pc) * 2);
		margin-right: var(--size-8-pc);
	}
	
	.reference-btn--white::before {
		width: calc(var(--size-32-pc) * 2);
		height: calc(var(--size-32-pc) * 2);
	}

	.general-list {
		padding: var(--size-32-pc);
		gap: var(--size-20-pc);
	}

	.general-list__title {
		font-size: var(--size-20-pc);
		padding-bottom: var(--size-4-pc);
	}

	.general-list__text {
		font-size: var(--size-16-pc);
	}

	.header {
		max-width: 1280px;
		padding: var(--size-28-pc);
	}

	.header__logo {
		width: calc(var(--size-40-pc) * 5);
	}

	.hero__img {
		display: block;
		margin: 0 auto;
		max-width: 840px;
	}

	.hero__copy {
		width: 100%;
		max-width: 650px;
	}

	.hero__content {
		top: 80%;
		left: 50%;
		transform: translate(-50%, -80%);
		gap: 0;
	}

	.massage {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(2, auto);
		gap: var(--size-24-pc) var(--size-12-pc);
	}

	.massage__voice {
		grid-area: 1 / 1 / 2 / 8;
		gap: var(--size-8-pc);
	}

	.massage__quote {
		font-size: var(--size-28-pc);
	}

	.massage__name {
		font-size: var(--size-16-pc);
	}

	.massage__company {
		grid-area: 2 / 1 / 3 / 8;
		gap: var(--size-16-pc);
	}

	.massage__text--large {
		font-size: var(--size-20-pc);
	}

	.massage__img {
		grid-area: 1 / 9 / 3 / 13;
	}

	/* ========= クロストーク ======== */
	.cross-talk__cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--size-40-pc);
	}

	.cross-talk__combo::after {
		width: var(--size-40-pc);
		height: var(--size-40-pc);
	}

	.cross-talk__combo--reverse {
		order: 2;
		background: linear-gradient(135deg, #0B2041 0%, rgba(11, 32, 65, 0.20) 50%, #0B2041 100%);
	}

	.cross-talk__text {
		font-size: var(--size-14-pc);
	}

	.cross-talk__name {
		font-size: var(--size-24-pc);
	}
	.cross-talk__generation {
		font-size: var(--size-18-pc);
	}

	.cross-talk__symbol {
		font-size: var(--size-24-pc);
	}

	.cross-talk__img--reverse {
		order: 1;
	}

	/* ========= 数字でわかるIBJの魅力 ======== */
	.charm__examples {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--size-40-pc);
	}

	.charm__example {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		gap: 0;
		align-items: end;
	}

	.charm__sub-title {
		font-size: var(--size-20-pc);
	}

	.charm__sub-title::before {
		width: var(--size-32-pc);
		height: var(--size-32-pc);
		gap: var(--size-4-pc);
	}

	/* ========= 新卒キャリア事例 ======== */
	.career-case {
		display: flex;
		flex-direction: column;
	}

	.career-case__title {
		order: 1;
	}
	
	.career-case__thumbnails {
		grid-template-columns: repeat(10, 1fr);
		gap: var(--size-8-pc);
		order: 3;
		margin-bottom: var(--size-4-pc);
		padding-right: 0;
	}

	.career-case__navigation {
		order: 2;
		gap: var(--size-16-pc);
		justify-content: flex-start;
		padding-bottom: var(--size-16-pc);
	}

	.career-case__counter {
		font-size: var(--size-14-pc);
	}

	.career-case__main-content {
		order: 4;
	}

	.reference-btn--order {
		order: 5;
	}

	.career-case__thumbnail-label {
		font-size: var(--size-12-pc);
	}

	.career-case__name {
		font-size: var(--size-16-pc);
	}

	.career-case__main-image {
		height: calc(var(--size-40-pc) * 6);
	}

	.scroll {
		position: relative;
		font-size: var(--size-16-pc);
		margin-top: var(--size-12-pc);
	}

	.scroll::before {
		width: calc(var(--size-64-pc) * 4);
	}

	/* ========= 行動指針 ======== */
	.credo__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--size-20-pc);
	}

	.credo__item {
		padding: var(--size-12-pc);
		font-size: var(--size-16-pc);
		gap: var(--size-12-pc);
	}

	.credo__item::before {
		width: var(--size-12-pc);
		height: var(--size-12-pc);
		min-width: var(--size-12-pc);
	}

	/* ========= フッター ======== */
	.footer {
		padding: calc(var(--size-20-pc) * 3) 0 calc(var(--size-40-pc) * 2);
	}

	.footer__main {
		max-width: 1080px;
		padding: 0 40px;
		gap: var(--size-32-pc);
	}

	.footer__logo {
		width: calc(var(--size-20-pc) * 7);
	}

	.footer__links {
		display: flex;
		flex-direction: row;
		gap: var(--size-16-pc);
	}

	.footer__link {
		font-size: var(--size-16-pc);
	}

	.footer__external-links {
		gap: var(--size-12-pc) var(--size-16-pc);
	}

	.footer__external-link {
		font-size: var(--size-14-pc);
	}

	.footer__introduction-link {
		font-size: var(--size-14-pc);
	}

	.footer__external-link::after {
		width: var(--size-16-pc);
		height: var(--size-16-pc);
		margin-left: var(--size-4-pc);
	}

	.footer__sns {
		gap: var(--size-16-pc);
		padding: var(--size-12-pc);
	}

	.footer__copyright {
		font-size: var(--size-12-pc);
	}

	.attention {
		font-size: var(--size-12-pc);
		padding-top: var(--size-40-pc);
	}
}

/* --------- アニメーション --------- */
.boom.active {
	animation: heroExplosive 0.8s cubic-bezier(0.25,1,0.5,1) 0.1s forwards;
}

@keyframes heroExplosive {
	0% {
		opacity: 0;
		transform: scale(2) rotate(-10deg);
	}

	50% {
		opacity: 0.9;
		transform: scale(0.98) rotate(0deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.smooth {
  clip-path: inset(0 100% 0 0);
  transition: 0.6s cubic-bezier(.49,.11,.53,.84);
  transition-property: clip-path;
}
.smooth.active {
  clip-path: inset(0);
}

/* --------- ホバーエフェクト --------- */
@media (any-hover: hover) {
	.primary-btn:hover {
		opacity: 0.6;
	}

	.primary-btn--floating:hover {
		opacity: 0.6;
		transform: scale(1.05);
	}

	.cross-talk__combo:hover {
		opacity: 0.6;
	}

	.career-case__thumbnail:hover .career-case__thumbnail-image {
		background: rgba(121, 250, 255, 0.41);
	}

	.reference-btn:hover {
		padding-left: 0.2em;
		opacity: 0.8;
	}
}