/* ==========================================
   CSS Reset & Base Styles
========================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--font-hiragino);
	line-height: 1.5;
	color: var(--color-black);
	overflow-x: hidden;
	background-color: var(--color-black);
}

img {
	height: auto;
	display: block;
	opacity: 0;
	transition: opacity 0.5s ease;
}

img.loaded,
img.hero-bg,
img.logo,
img.footer-logo,
img.profile-bg,
img.services-bg,
img.consultation-bg,
img.cta-bg {
	opacity: 1;
}

a {
	text-decoration: none;
	color: inherit;
}

button {
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
}

ul {
	list-style: none;
}

/* ==========================================
   Design Tokens & Responsive Scaling
========================================== */


/* ==========================================
	Local Webfont (Dela Gothic One)
	Google Fonts を使わず、同梱の TTF を利用
========================================== */
@font-face {
	font-family: 'Dela Gothic One';
	src: url('../fonts/DelaGothicOne-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Base reference screen width */
	--base-width: 1280px;

	/* Dynamic scaling factor (calculated via JavaScript) */
	--scale-factor: 1;

	/* Colors */
	--color-white: #FFFFFF;
	--color-black: #222222;
	--color-red: #C9171E;
	--color-off-white: #EFEFEF;
	--color-main-navy: #0F2350;
	--color-light-navy: #1A3266;
	--color-yellow: #E0C257;
	--color-dark-yellow: #C1A85C;

	/* Typography */
	--font-dela: 'Dela Gothic One', sans-serif;
	--font-hiragino: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;

	/* Base Sizes (at 1280px width) */
	--base-text-xl: 96px;
	--base-text-lg: 64px;
	--base-text-md: 48px;
	--base-text-sm: 32px;
	--base-text-base: 24px;
	--base-text-xs: 18px;
	--base-text-xxs: 16px;

	--base-container-max: 1280px;
	--base-padding-global: 64px;
	--base-padding-section: 80px;
	--base-padding-section-large: 112px;

	--base-radius-sm: 12px;
	--base-radius-lg: 32px;
	--base-radius-xl: 40px;

	/* Scaled Sizes */
	--text-xl: calc(var(--base-text-xl) * var(--scale-factor));
	--text-lg: calc(var(--base-text-lg) * var(--scale-factor));
	--text-md: calc(var(--base-text-md) * var(--scale-factor));
	--text-sm: calc(var(--base-text-sm) * var(--scale-factor));
	--text-base: calc(var(--base-text-base) * var(--scale-factor));
	--text-xs: calc(var(--base-text-xs) * var(--scale-factor));
	--text-xxs: calc(var(--base-text-xxs) * var(--scale-factor));

	--container-max: calc(var(--base-container-max) * var(--scale-factor));
	--padding-global: calc(var(--base-padding-global) * var(--scale-factor));
	--padding-section: calc(var(--base-padding-section) * var(--scale-factor));
	--padding-section-large: calc(var(--base-padding-section-large) * var(--scale-factor));

	--radius-sm: calc(var(--base-radius-sm) * var(--scale-factor));
	--radius-lg: calc(var(--base-radius-lg) * var(--scale-factor));
	--radius-xl: calc(var(--base-radius-xl) * var(--scale-factor));
}

/* ==========================================
   Typography
========================================== */
.main-title {
	font-family: var(--font-dela);
	font-size: calc(56px * var(--scale-factor));
	line-height: 1.2;
	letter-spacing: calc(-0.56px * var(--scale-factor));
	color: var(--color-white);
	font-weight: 400;
}

.section-title {
	position: absolute;
	display: block;
	pointer-events: none;
	z-index: 1;
	height: auto;
}

/* セクションタイトルをリンクでラップした場合にクリック可能にする */
.indie-games a .section-title,
.services a .section-title,
.books a .section-title,
.contents a .section-title {
	pointer-events: auto;
}

/* ==========================================
   Layout Components
========================================== */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--padding-global);
}

/* ==========================================
   Buttons
========================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(16px * var(--scale-factor)) calc(32px * var(--scale-factor));
	border-radius: var(--radius-sm);
	font-size: var(--text-base);
	font-weight: 800;
	font-family: var(--font-hiragino);
	transition: all 0.3s ease;
	cursor: pointer;
	gap: calc(8px * var(--scale-factor));
}

.btn-primary {
	background-color: var(--color-white);
	color: var(--color-black);
	border: calc(2px * var(--scale-factor)) solid var(--color-black);
}

.btn-primary:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}

.btn-secondary {
	background-color: var(--color-white);
	color: var(--color-black);
	border: calc(1px * var(--scale-factor)) solid var(--color-black);
}

.btn-secondary:hover {
	background-color: var(--color-off-white);
}

.btn-game {
	background-color: var(--color-white);
	color: var(--color-black);
	border: calc(1px * var(--scale-factor)) solid var(--color-black);
	padding: calc(16px * var(--scale-factor)) calc(32px * var(--scale-factor));
}

.btn-game:hover {
	background-color: var(--color-off-white);
}

/* ==========================================
   External link icon (共通ユーティリティ)
   任意のボタン/リンクに .btn--external を付けると、右側に外部リンクアイコンを表示
========================================== */
.btn--external::after {
	content: '';
	display: inline-block;
	width: calc(28px * var(--scale-factor));
	height: calc(28px * var(--scale-factor));
	margin-left: calc(8px * var(--scale-factor));
	background: url('../images/external_link.png') no-repeat center center / contain;
}

/* ==========================================
   Navigation (共通)
========================================== */
.nav {
	position: fixed;
	top: calc(28px * var(--scale-factor));
	right: calc(40px * var(--scale-factor));
	z-index: 1000;
	padding-bottom: calc(8px * var(--scale-factor));
}

.nav::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: calc(-2em * var(--scale-factor));
	right: calc(-80px * var(--scale-factor));
	height: calc(2px * var(--scale-factor));
	background-color: var(--color-white);
	box-shadow: 0 0 calc(4px * var(--scale-factor)) rgba(34, 34, 34, 0.5);
}

.nav ul {
	display: flex;
	gap: calc(36px * var(--scale-factor));
}

.nav a {
	color: var(--color-white);
	font-size: var(--text-base);
	font-weight: 600;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
	font-family: var(--font-hiragino);
	letter-spacing: calc(2px * var(--scale-factor));
}

.nav a:hover {
	opacity: 0.8;
}

/* ==========================================
   Common Social Links (共通)
========================================== */
.social-links {
	display: flex;
	gap: calc(12px * var(--scale-factor));
}

.social-link {
	display: block;
	width: calc(48px * var(--scale-factor));
	height: calc(48px * var(--scale-factor));
	transition: opacity 0.3s ease;
}

.social-link:hover {
	opacity: 0.8;
}

.social-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* ==========================================
   Footer
========================================== */
.footer {
	background-color: var(--color-main-navy);
	color: var(--color-white);
	padding: calc(80px * var(--scale-factor)) var(--padding-global);
}

.footer-content {
	display: flex;
	justify-content: space-between;
	margin-bottom: calc(80px * var(--scale-factor));
	gap: calc(80px * var(--scale-factor));
}

.footer-main {
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--scale-factor));
}

.footer-name {
	font-family: var(--font-dela);
	font-size: var(--text-md);
	line-height: 1.5;
	font-weight: 400;
	white-space: nowrap;
}

.footer-logo {
	width: calc(229px * var(--scale-factor));
	height: calc(49px * var(--scale-factor));
}

.footer-links {
	display: flex;
	gap: calc(60px * var(--scale-factor));
}

.footer-column ul {
	display: flex;
	flex-direction: column;
}

.footer-column a {
	font-size: var(--text-base);
	font-weight: 600;
	padding: calc(8px * var(--scale-factor)) 0;
	display: block;
	transition: opacity 0.3s ease;
	white-space: nowrap;
}

.footer-column a:hover {
	opacity: 0.8;
}

.footer-column .btn {
	text-align: center;
	justify-content: center;
}

.footer-message {
	margin-bottom: calc(32px * var(--scale-factor));
}

.footer-message h2 {
	font-family: var(--font-dela);
	font-size: calc(74px * var(--scale-factor));
	line-height: 1.2;
	color: var(--color-light-navy);
	font-weight: 400;
	white-space: nowrap;
}

.footer-bottom {
	padding-top: calc(16px * var(--scale-factor));
	border-top: calc(2px * var(--scale-factor)) solid rgba(255, 255, 255, 0.2);
}

.footer-credits {
	display: flex;
	gap: calc(24px * var(--scale-factor));
	font-size: var(--text-xxs);
	font-weight: 300;
}

/* ==========================================
	Profile Section (共通)
========================================== */
.profile {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.profile-bg {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* デスクトップ用画像をデフォルト表示 */
.profile-bg-desktop {
	display: block;
}

.profile-bg-mobile {
	display: none;
}

.profile .container {
	display: flex;
	align-items: center;
	gap: calc(48px * var(--scale-factor));
}

.profile-image {
	max-width: calc(437px * var(--scale-factor));
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* ==========================================
   Responsive Design - 共通レスポンシブ
========================================== */
@media (max-width: 600px) {
	:root {
		--padding-global: calc(50px * var(--scale-factor));
		--text-xl: calc(54px * var(--scale-factor));
		--text-lg: calc(42px * var(--scale-factor));
		--text-md: calc(30px * var(--scale-factor));
		--text-base: calc(24px * var(--scale-factor));
		--text-sm: calc(20px * var(--scale-factor));
		--text-xs: calc(18px * var(--scale-factor));
	}

	/* コンテナ幅を720pxベースに調整 */
	.container {
		max-width: calc(560px * var(--scale-factor));
		width: 100%;
		padding: 0 calc(20px * var(--scale-factor));
	}

	.main-title {
		font-size: calc(32px * var(--scale-factor));
	}

	/* ナビゲーション - 共通 */
	.nav {
		position: fixed;
		top: calc(16px * var(--scale-factor));
		right: calc(16px * var(--scale-factor));
		padding: calc(8px * var(--scale-factor)) calc(12px * var(--scale-factor)) calc(8px * var(--scale-factor)) calc(12px * var(--scale-factor));
		z-index: 1000;
	}

	.nav::after {
		left: calc(-1em * var(--scale-factor));
		right: calc(-16px * var(--scale-factor));
	}

	.nav ul {
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: calc(24px * var(--scale-factor));
	}

	/* フッター - 共通 */
	.footer {
		padding: calc(60px * var(--scale-factor)) 0 calc(40px * var(--scale-factor));
	}

	.footer-content {
		max-width: calc(720px * var(--scale-factor));
		flex-direction: column;
		gap: calc(40px * var(--scale-factor));
		text-align: left;
	}

	.footer-section {
		width: 100%;
	}

	.footer-main {
		gap: calc(20px * var(--scale-factor));
	}

	.footer-name {
		font-size: calc(40px * var(--scale-factor));
		white-space: normal;
		text-align: left;
	}

	.footer-logo {
		width: calc(180px * var(--scale-factor));
		height: calc(38px * var(--scale-factor));
		align-self: flex-start;
	}

	.footer-links {
		justify-content: flex-start;
		gap: calc(70px * var(--scale-factor));
		flex-wrap: wrap;
	}

	.footer-column {
		min-width: calc(120px * var(--scale-factor));
		text-align: left;
	}

	.footer-column a {
		font-size: var(--text-base);
		white-space: normal;
		text-align: left;
	}

	.social-links {
		justify-content: flex-start;
		gap: calc(16px * var(--scale-factor));
	}

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

	.footer-message h2 {
		font-size: calc(36px * var(--scale-factor));
		line-height: 1.2;
		white-space: normal;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	.footer-credits {
		flex-direction: column;
		gap: calc(12px * var(--scale-factor));
		align-items: flex-start;
	}

	/* プロフィールセクション - 共通 */
	.profile {
		padding: 0;
		height: auto;
	}

	/* モバイルで画像を切り替え */
	.profile-bg-desktop {
		display: none;
	}

	.profile-bg-mobile {
		display: block;
	}

	.profile .container {
		flex-direction: column;
		text-align: center;
		gap: calc(30px * var(--scale-factor));
	}

	.profile-image {
		max-width: calc(250px * var(--scale-factor));
		margin: 0 auto;
	}
}