/* ==========================================
   PROFILE PAGE SPECIFIC STYLES
========================================== */



/* ==========================================
   Profile Hero Section
========================================== */
.profile-hero {
	position: relative;
	height: calc(889px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #f5f5f5;
	background-image: url('../images/profile_hero.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.profile-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.profile-hero-content {
	position: relative;
	height: 100%;
	z-index: 5;
}

.profile-hero-title {
	position: absolute;
	left: calc(80px * var(--scale-factor));
	top: calc(482px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	gap: calc(10px * var(--scale-factor));
	align-items: center;
	justify-content: center;
}

.profile-main-title {
	font-family: 'Dela Gothic One', sans-serif;
	line-height: 1.2;
	font-weight: normal;
	color: #02060b;
	margin: 0;
	letter-spacing: calc(-1.28px * var(--scale-factor));
	white-space: nowrap;
	-webkit-text-stroke: calc(2px * var(--scale-factor)) white;
	text-shadow:
		calc(-1px * var(--scale-factor)) calc(-1px * var(--scale-factor)) 0 white,
		calc(1px * var(--scale-factor)) calc(-1px * var(--scale-factor)) 0 white,
		calc(-1px * var(--scale-factor)) calc(1px * var(--scale-factor)) 0 white,
		calc(1px * var(--scale-factor)) calc(1px * var(--scale-factor)) 0 white;
}

.profile-title-p {
	font-size: calc(128px * var(--scale-factor));
}

.profile-title-rofile {
	font-size: calc(96px * var(--scale-factor));
}

.profile-features {
	position: absolute;
	right: 0;
	top: calc(238px * var(--scale-factor));
	width: calc(548px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	gap: calc(16px * var(--scale-factor));
	padding-right: 0;
}

.profile-name {
	color: white;
	margin-bottom: 0;
	font-family: 'Hiragino Kaku Gothic StdN', sans-serif;
	font-weight: 800;
	line-height: 1.5;
}

.profile-name h2 {
	font-size: calc(48px * var(--scale-factor));
	margin: 0;
}

.profile-name p {
	font-size: calc(32px * var(--scale-factor));
	margin: 0;
}

.profile-name p .small {
	font-size: calc(16px * var(--scale-factor));
}

.profile-feature-item {
	background-color: white;
	padding: calc(12px * var(--scale-factor)) calc(80px * var(--scale-factor)) calc(12px * var(--scale-factor)) calc(24px * var(--scale-factor));
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-right: calc(-80px * var(--scale-factor));
}

.profile-feature-item p {
	font-family: 'Hiragino Kaku Gothic StdN', sans-serif;
	font-size: calc(32px * var(--scale-factor));
	font-weight: 800;
	color: #222222;
	margin: 0;
	white-space: nowrap;
	line-height: 1.5;
}

/* ==========================================
   Biography Section
========================================== */
.biography {
	position: relative;
	background-color: #0f2350;
	padding: var(--padding-section-large) 0;
	color: white;
}


.biography .section-title {
	left: 0;
	top: calc(-62px * var(--scale-factor));
	width: calc(1300px * var(--scale-factor));
	z-index: 1;
}



.biography .container {
	position: relative;
	z-index: 2;
}

.biography-title {
	font-size: calc(64px * var(--scale-factor));
	font-weight: 800;
	color: white;
	margin: 0 0 calc(80px * var(--scale-factor));
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
}

.biography-content {
	display: flex;
	gap: calc(80px * var(--scale-factor));
	align-items: flex-start;
}

.biography-text {
	flex: 1;
	max-width: calc(778px * var(--scale-factor));
}

.biography-item {
	margin-bottom: calc(24px * var(--scale-factor));
}

.biography-main-text {
	font-family: 'Hiragino Kaku Gothic StdN', sans-serif;
	font-size: calc(32px * var(--scale-factor));
	font-weight: 800;
	color: white;
	margin: 0;
	line-height: 1.5;
}

.biography-sub-text {
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	font-size: calc(24px * var(--scale-factor));
	font-weight: 600;
	color: white;
	line-height: 1.5;
	margin: 0;
}

.biography-note {
	margin-top: calc(40px * var(--scale-factor));
}

.biography-note p {
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	font-size: calc(20px * var(--scale-factor));
	font-weight: 600;
	color: white;
	line-height: 1.5;
	margin: 0;
}

.biography-images {
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--scale-factor));
	align-items: center;
}

.biography-main-image {
	width: calc(422px * var(--scale-factor));
	height: calc(640px * var(--scale-factor));
	border-radius: calc(24px * var(--scale-factor));
	overflow: hidden;
}

.biography-main-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.biography-sub-images {
	display: flex;
	gap: calc(12px * var(--scale-factor));
	width: calc(422px * var(--scale-factor));
}

.biography-sub-images img {
	width: calc(132px * var(--scale-factor));
	height: calc(132px * var(--scale-factor));
	border-radius: calc(8px * var(--scale-factor));
	object-fit: cover;
}

/* ==========================================
   Works Section
========================================== */
.works {
	position: relative;
	background-color: #efefef;
	padding: var(--padding-section-large) 0;
}


.works .section-title {
	left: 0;
	top: calc(-52px * var(--scale-factor));
	width: calc(826px * var(--scale-factor));
	z-index: 1;
}



.works .container {
	position: relative;
	z-index: 2;
}

.works-title {
	font-size: calc(64px * var(--scale-factor));
	font-weight: 800;
	color: black;
	margin: 0 0 calc(80px * var(--scale-factor));
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
}

.works-content {
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--scale-factor));
	margin-bottom: calc(80px * var(--scale-factor));
}

.work-item {
	background-color: white;
	display: flex;
	gap: calc(16px * var(--scale-factor));
	align-items: stretch;
	overflow: hidden;
}

.work-image {
	width: calc(362px * var(--scale-factor));
	height: calc(180px * var(--scale-factor));
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.work-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	min-height: 100%;
}

.work-body {
	flex: 1;
	padding: calc(20px * var(--scale-factor)) calc(16px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	gap: 0;
	justify-content: center;
	min-height: calc(120px * var(--scale-factor));
}

.work-body h3 {
	font-size: calc(32px * var(--scale-factor));
	font-weight: 800;
	color: #1e1e1e;
	margin: 0;
	line-height: 1.4;
}

.work-body p {
	font-size: calc(24px * var(--scale-factor));
	font-weight: 600;
	color: #1e1e1e;
	margin: 0;
	line-height: 1.4;
	flex-grow: 1;
}

.work-date {
	font-size: calc(16px * var(--scale-factor));
	font-weight: 300;
	color: #757575;
	line-height: 1.4;
	text-align: right;
	align-self: flex-end;
}

.works-summary {
	margin-top: calc(80px * var(--scale-factor));
}

.works-summary p {
	font-size: calc(24px * var(--scale-factor));
	font-weight: 600;
	color: black;
	line-height: 1.2;
	letter-spacing: calc(-0.24px * var(--scale-factor));
	margin: 0;
}

/* ==========================================
   Skills Section
========================================== */
.skills {
	position: relative;
	background-color: #0f2350;
	padding: var(--padding-section-large) 0;
	z-index: 1;
}

.skills .section-title {
	left: 0;
	top: calc(-58px * var(--scale-factor));
	width: calc(1040px * var(--scale-factor));
	z-index: 1;
}

.skills .container {
	position: relative;
	z-index: 2;
}

.skills-title {
	font-size: calc(64px * var(--scale-factor));
	font-weight: 800;
	color: white;
	margin: 0 0 calc(80px * var(--scale-factor));
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
}

.skills-content {
	display: flex;
	flex-direction: column;
	gap: calc(80px * var(--scale-factor));
}

.skills-row {
	display: flex;
	gap: calc(40px * var(--scale-factor));
}

.skill-card {
	flex: 1;
	position: relative;
	width: calc(620px * var(--scale-factor));
	height: calc(480px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(40px * var(--scale-factor)) 0;
	overflow: hidden;
}

.skill-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.skill-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(10px * var(--scale-factor));
	width: 100%;
	max-width: calc(576px * var(--scale-factor));
}

.skill-heading {
	height: calc(80px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: calc(10px * var(--scale-factor));
}

.skill-heading h3 {
	font-size: var(--text-sm);
	font-weight: 800;
	color: white;
	margin: 0;
	line-height: 1.2;
	letter-spacing: calc(-0.32px * var(--scale-factor));
	text-align: center;
	white-space: nowrap;
}

.skill-tags {
	display: flex;
	gap: calc(8px * var(--scale-factor));
	align-items: flex-start;
	justify-content: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
}

.skill-tag {
	padding: calc(4px * var(--scale-factor)) calc(8px * var(--scale-factor));
	font-size: calc(22px * var(--scale-factor));
	color: white;
	background-color: rgba(255, 255, 255, 0.2);
	letter-spacing: calc(-0.18px * var(--scale-factor));
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================
   Policy Section
========================================== */
.policy {
	position: relative;
	background-color: var(--color-off-white);
	padding: var(--padding-section-large) 0 calc(200px * var(--scale-factor));
	overflow: visible;
	z-index: 2;
}


.policy .section-title {
	left: 0;
	top: calc(-62px * var(--scale-factor));
	width: calc(1290px * var(--scale-factor));
	z-index: 12;
}

.policy-decoration {
	position: absolute;
	bottom: calc(-200px * var(--scale-factor));
	left: 0;
	width: calc(1440px * var(--scale-factor));
	height: calc(786px * var(--scale-factor));
	object-fit: cover;
	z-index: 13;
	pointer-events: none;
	clip-path: inset(0 0 calc(200px * var(--scale-factor)) 0);
}

.policy .container {
	position: relative;
	z-index: 15;
}

.policy-title {
	font-size: calc(64px * var(--scale-factor));
	font-weight: 800;
	color: black;
	margin: 0 0 calc(80px * var(--scale-factor));
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
}

.policy-content {
	display: flex;
	flex-direction: column;
	gap: calc(80px * var(--scale-factor));
}

.policy-item {
	display: flex;
	gap: calc(45px * var(--scale-factor));
	align-items: flex-start;
	position: relative;
	z-index: 16;
}

.policy-number {
	font-family: 'Dela Gothic One', sans-serif;
	font-size: calc(179px * var(--scale-factor));
	font-weight: normal;
	color: #d4d4d4;
	line-height: 1;
	flex-shrink: 0;
	width: calc(213px * var(--scale-factor));
}

.policy-text {
	flex: 1;
	padding-top: calc(20px * var(--scale-factor));
}

.policy-text h3 {
	font-size: calc(48px * var(--scale-factor));
	font-weight: 800;
	color: #222222;
	margin: 0 0 calc(16px * var(--scale-factor));
	line-height: 1.2;
}

.policy-divider {
	width: 100%;
	height: calc(1px * var(--scale-factor));
	background-color: #ddd;
	margin-bottom: calc(16px * var(--scale-factor));
}

.policy-text p {
	font-size: calc(24px * var(--scale-factor));
	font-weight: 600;
	color: #444444;
	line-height: 1.5;
	margin: 0 0 calc(32px * var(--scale-factor));
}

.policy-image {
	display: flex;
	justify-content: center;
	margin-top: calc(32px * var(--scale-factor));
}

.policy-image img {
	width: calc(714px * var(--scale-factor));
	height: calc(331px * var(--scale-factor));
	object-fit: cover;
	border-radius: calc(24px * var(--scale-factor));
}

.policy-item:nth-child(2) .policy-image img {
	width: 100%;
	height: calc(279px * var(--scale-factor));
}

/* ==========================================
   Vision Section
========================================== */
.vision {
	position: relative;
	width: 100%;
	height: calc(1368px * var(--scale-factor));
	z-index: 2;
	padding-top: var(--padding-section-large);
}

.vision-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.vision .section-title {
	left: 0;
	top: calc(-58px * var(--scale-factor));
	width: calc(1193px * var(--scale-factor));
	z-index: 3;
}

.vision-content {
	position: relative;
	z-index: 2;
	height: 100%;
}

.vision-text-block {
	position: absolute;
	padding: calc(20px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	gap: calc(20px * var(--scale-factor));
}

.vision-text-1 {
	left: calc(729px * var(--scale-factor));
	top: calc(184px * var(--scale-factor));
}

.vision-text-2 {
	left: calc(729px * var(--scale-factor));
	top: calc(760px * var(--scale-factor));
}

.vision-text-block p {
	font-family: var(--font-hiragino);
	font-size: calc(24px * var(--scale-factor));
	line-height: 1.4;
	color: white;
	margin: 0;
	letter-spacing: calc(-0.24px * var(--scale-factor));
	white-space: normal;
}

/* ==========================================
   Responsive Design
========================================== */



/* モバイル（タブレット含む） */
@media (max-width: 600px) {
	.profile-hero {
		height: calc(1087px * var(--scale-factor));
	}

	.profile-hero-title {
		left: calc(40px * var(--scale-factor));
		top: 35%;
	}

	.profile-title-p {
		font-size: calc(80px * var(--scale-factor));
	}

	.profile-title-rofile {
		font-size: calc(60px * var(--scale-factor));
	}

	.profile-main-title {
		letter-spacing: calc(-0.8px * var(--scale-factor));
	}

	.profile-features {
		position: absolute;
		width: calc(720px * var(--scale-factor));
		left: calc(80px * var(--scale-factor));
		top: calc(520px * var(--scale-factor));
		gap: calc(12px * var(--scale-factor));
		padding-right: 0;
	}

	.profile-name h2 {
		font-size: calc(36px * var(--scale-factor));
	}

	.profile-name p {
		font-size: calc(24px * var(--scale-factor));
	}

	.profile-feature-item {
		margin-right: 0;
		padding: calc(12px * var(--scale-factor)) calc(24px * var(--scale-factor));
	}

	.profile-feature-item p {
		font-size: calc(24px * var(--scale-factor));
	}

	.biography {
		padding: calc(80px * var(--scale-factor)) 0;
	}

	/* タブレット設定をモバイルに統合 */
	.biography .section-title {
		top: calc(-48px * var(--scale-factor));
		width: calc(960px * var(--scale-factor));
	}

	.biography-content {
		flex-direction: column;
		gap: calc(40px * var(--scale-factor));
	}

	.biography-images {
		align-self: center;
	}

	.works .section-title {
		top: calc(-48px * var(--scale-factor));
		width: calc(780px * var(--scale-factor));
	}

	.works-content .work-item {
		flex-direction: row;
		gap: 0;
		align-items: stretch;
	}

	.work-image {
		width: calc(180px * var(--scale-factor));
		height: auto;
		min-height: calc(100px * var(--scale-factor));
	}

	.work-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100px * var(--scale-factor));
	}

	.skills .section-title {
		top: calc(-54px * var(--scale-factor));
		width: calc(940px * var(--scale-factor));
	}

	.skills-content {
		gap: calc(40px * var(--scale-factor));
	}

	.skill-heading h3 {
		font-size: var(--text-md);
	}

	.skills-row {
		flex-direction: column;
		gap: calc(40px * var(--scale-factor));
	}

	.skill-card {
		width: calc(520px * var(--scale-factor));
		height: calc(480px * var(--scale-factor));
	}

	.skills .skill-tag {
		font-size: calc(21px * var(--scale-factor));
		padding: calc(4px * var(--scale-factor)) calc(6px * var(--scale-factor));
	}

	.policy .section-title {
		top: calc(-50px * var(--scale-factor));
		width: calc(1020px * var(--scale-factor));
	}

	.policy-item {
		gap: calc(8px * var(--scale-factor));
		text-align: left;
	}

	.policy-number {
		align-self: flex-start;
		font-size: calc(160px * var(--scale-factor));
		width: calc(96px * var(--scale-factor));
	}

	.policy-text {
		width: calc(240px * var(--scale-factor));
		padding-top: 0;
	}

	.policy-image img {
		width: calc(400px * var(--scale-factor)) !important;
		height: auto;
	}

	.policy-item:nth-child(2) .policy-image img {
		width: calc(544px * var(--scale-factor)) !important;
		height: calc(144px * var(--scale-factor)) !important;
	}

	.biography-title,
	.works-title,
	.skills-title,
	.policy-title,
	.vision-title {
		font-size: calc(48px * var(--scale-factor)) !important;
	}



	.biography-content {
		gap: calc(32px * var(--scale-factor));
	}

	.biography-images {
		align-items: center;
		margin: 0 auto;
		margin-top: calc(80px * var(--scale-factor));
	}

	.biography-main-image {
		width: calc(422px * var(--scale-factor));
		height: calc(640px * var(--scale-factor));
	}

	.biography-sub-images {
		width: calc(422px * var(--scale-factor));
		gap: calc(12px * var(--scale-factor));
	}

	.biography-sub-images img {
		width: calc(132px * var(--scale-factor));
		height: calc(132px * var(--scale-factor));
	}

	.work-body h3 {
		font-size: calc(24px * var(--scale-factor));
	}

	.work-body p {
		font-size: calc(18px * var(--scale-factor));
	}

	.work-date {
		font-size: calc(14px * var(--scale-factor));
	}

	.skill-content {
		max-width: calc(544px * var(--scale-factor));
	}

	.policy-number {
		font-size: calc(80px * var(--scale-factor));
	}

	.policy-text h3 {
		font-size: calc(32px * var(--scale-factor));
	}

	.policy-text p {
		font-size: var(--text-sm);
	}

	/* Vision Section - Mobile */
	.vision .section-title {
		top: calc(-56px * var(--scale-factor));
		width: calc(1093px * var(--scale-factor));
	}

	.vision-text-1 {
		left: calc(178px * var(--scale-factor));
		top: calc(64px * var(--scale-factor));
	}

	.vision-text-2 {
		left: calc(178px * var(--scale-factor));
		top: calc(560px * var(--scale-factor));
	}

	.vision-text-block p {
		font-size: calc(22px * var(--scale-factor));
	}
}