/* ==========================================
   HOME PAGE SPECIFIC STYLES
========================================== */

/* ==========================================
   Header / Hero Section
========================================== */
.hero {
	position: relative;
	height: calc(810px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

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

.hero-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 calc(80px * var(--scale-factor)) calc(80px * var(--scale-factor));
	z-index: 5;
}

.hero-text {
	max-width: calc(720px * var(--scale-factor));
}

.hero-description {
	font-size: var(--text-base);
	color: var(--color-white);
	margin-top: calc(24px * var(--scale-factor));
	font-weight: 800;
	line-height: 1.5;
}

.hero-social {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: calc(16px * var(--scale-factor));
}

.logo {
	width: calc(230px * var(--scale-factor));
	height: auto;
}

/* ==========================================
   Books Section
========================================== */
.books {
	position: relative;
	background-color: var(--color-off-white);
	padding: var(--padding-section-large) 0;
	min-height: calc(1247px * var(--scale-factor));
	overflow: visible;
}

.books .section-title {
	left: 0;
	top: calc(-52px * var(--scale-factor));
	width: calc(840px * var(--scale-factor));
}

.books .decoration {
	position: absolute;
	bottom: calc(-400px * var(--scale-factor));
	width: calc(1444px * var(--scale-factor));
	z-index: 0;
	pointer-events: none;
	display: block;
	clip-path: inset(0 0 calc(400px * var(--scale-factor)) 0);
}

.books .container {
	position: relative;
	z-index: 5;
}

.books-title {
	font-size: var(--text-lg);
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
	color: var(--color-black);
	margin-bottom: calc(40px * var(--scale-factor));
}

.books-content {
	display: flex;
	gap: calc(32px * var(--scale-factor));
	align-items: flex-start;
	margin-bottom: calc(40px * var(--scale-factor));
}

.book-info {
	flex: 1;
}

.book-title {
	font-size: var(--text-md);
	line-height: 1.2;
	letter-spacing: calc(-0.48px * var(--scale-factor));
	color: var(--color-red);
	font-weight: 800;
	margin-bottom: calc(24px * var(--scale-factor));
}

.book-description {
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-black);
	margin-bottom: calc(32px * var(--scale-factor));
}

.book-description p {
	margin-bottom: calc(8px * var(--scale-factor));
}

.book-description ul {
	margin: calc(8px * var(--scale-factor)) 0;
}

.book-description li {
	font-weight: 800;
	margin-bottom: calc(8px * var(--scale-factor));
}

.book-image {
	width: calc(480px * var(--scale-factor));
	align-self: stretch;
}

.book-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.book-promotion {
	text-align: center;
}

.book-promotion h4 {
	font-size: var(--text-md);
	font-weight: 800;
	color: var(--color-black);
	margin-bottom: calc(24px * var(--scale-factor));
}

.promotion-images {
	display: flex;
	gap: calc(36px * var(--scale-factor));
	width: 100%;
}

.promotion-item {
	flex: 1;
	min-width: 0;
	max-width: 100%;
}

.placeholder-image {
	aspect-ratio: 437/246;
	background-color: #d9d9d9;
	border-radius: var(--text-base);
	margin-bottom: calc(24px * var(--scale-factor));
}

.promotion-item p {
	font-size: var(--text-base);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: calc(-0.24px * var(--scale-factor));
	word-wrap: break-word;
	word-break: break-all;
	white-space: normal;
}

/* ==========================================
   Services Section
========================================== */
.services {
	position: relative;
	height: calc(1026px * var(--scale-factor));
	overflow: visible;
}

.services .section-title {
	left: 0;
	top: calc(-60px * var(--scale-factor));
	width: calc(1160px * var(--scale-factor));
	z-index: 2;
}

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



.services .container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: var(--padding-section-large);
	position: relative;
	z-index: 5;
}

.service-content {
	max-width: calc(560px * var(--scale-factor));
	color: var(--color-white);
}

.service-title {
	font-size: var(--text-lg);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
	margin-bottom: calc(24px * var(--scale-factor));
}

.service-description {
	font-size: var(--text-base);
	line-height: 1.5;
	margin-bottom: calc(24px * var(--scale-factor));
}

.service-video {
	aspect-ratio: 560/315;
	background-color: #d9d9d9;
	margin-bottom: calc(24px * var(--scale-factor));
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	/* 16:9 ratio */
}

.service-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.services .service-content a.btn.btn-primary,
.consultation .consultation-content a.btn.btn-secondary {
	width: calc(192px * var(--scale-factor));
}

/* ==========================================
   Consultation Section
========================================== */
.consultation {
	position: relative;
	height: calc(591px * var(--scale-factor));
	overflow: hidden;
}

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

.consultation .container {
	display: flex;
	padding-top: var(--padding-section-large);
	position: relative;
	z-index: 5;
	height: 100%;
}

.consultation-content {
	max-width: calc(560px * var(--scale-factor));
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--scale-factor));
}

.consultation-title {
	font-family: var(--font-dela);
	font-size: calc(64px * var(--scale-factor));
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
	color: var(--color-main-navy);
}

.consultation-description {
	font-size: var(--text-base);
	font-weight: 800;
	line-height: 1.5;
	color: var(--color-black);
}

.consultation-image {
	position: absolute;
	right: calc(80px * var(--scale-factor));
	top: calc(58px * var(--scale-factor));
	width: calc(437px * var(--scale-factor));
	height: calc(655px * var(--scale-factor));
	border-radius: var(--radius-xl);
	overflow: hidden;
}

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

/* ==========================================
   Indie Games Section
========================================== */
.indie-games {
	position: relative;
	background-color: var(--color-yellow);
	padding: var(--padding-section-large) 0;
	overflow: visible;
}

.indie-games .section-title {
	left: 0;
	top: calc(-62px * var(--scale-factor));
	width: calc(1280px * var(--scale-factor));
	z-index: 2;
}



.indie-games .container {
	position: relative;
	z-index: 5;
	text-align: center;
	overflow: hidden;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--padding-global);
}

.games-title {
	font-family: var(--font-dela);
	font-size: var(--text-xl);
	line-height: 1.2;
	letter-spacing: calc(-0.96px * var(--scale-factor));
	color: var(--color-black);
	margin-bottom: calc(24px * var(--scale-factor));
}

.games-description {
	font-size: var(--text-base);
	font-weight: 800;
	line-height: 1.5;
	color: var(--color-black);
	margin-bottom: calc(80px * var(--scale-factor));
	max-width: calc(768px * var(--scale-factor));
	margin-left: auto;
	margin-right: auto;
}

.games-banner {
	margin-bottom: calc(48px * var(--scale-factor));
	display: flex;
	justify-content: center;
}

.games-banner img {
	width: calc(800px * var(--scale-factor));
	height: calc(200px * var(--scale-factor));
	object-fit: cover;
}

.games-grid {
	display: grid;
	grid-template-columns: calc(580px * var(--scale-factor)) calc(580px * var(--scale-factor));
	gap: calc(20px * var(--scale-factor));
	margin-bottom: calc(48px * var(--scale-factor));
	justify-content: center;
}

.game-card {
	background-color: var(--color-dark-yellow);
	padding: calc(32px * var(--scale-factor)) calc(24px * var(--scale-factor));
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(24px * var(--scale-factor));
}

.game-header {
	display: flex;
	align-items: center;
	gap: calc(16px * var(--scale-factor));
	height: calc(120px * var(--scale-factor));
	width: 100%;
}

.game-icon {
	width: calc(120px * var(--scale-factor));
	height: calc(120px * var(--scale-factor));
	object-fit: cover;
	border-radius: calc(8px * var(--scale-factor));
}

.game-logo {
	height: 100%;
	max-width: calc(284px * var(--scale-factor));
	object-fit: contain;
}

.game-description {
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-black);
	text-align: left;
	width: 100%;
}

.game-screenshots {
	display: flex;
	gap: calc(16px * var(--scale-factor));
	height: calc(290px * var(--scale-factor));
	width: 100%;
	justify-content: space-between;
	overflow: hidden;
}

.game-screenshots img {
	flex: 1;
	height: 100%;
	object-fit: cover;
	border-radius: calc(8px * var(--scale-factor));
	max-width: calc(174px * var(--scale-factor));
}

/* 1つ目のゲームのみ：スクショを縦並び（高さは既存の .game-screenshots 高さ設定を利用） */
.game-screenshots--stacked {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* 2枚を上下に配置し間隔を均等化 */
}

.game-screenshots--stacked img {
	flex: 0 0 auto;
	height: auto;
	max-height: 46%;
	max-width: 100%;
	width: auto;
}

.game-screenshots--stacked img:first-child {
	align-self: flex-start;
}

.game-screenshots--stacked img:last-child {
	align-self: flex-end;
}

/* ボタン幅を狭く（視覚上） */
.indie-games .games-grid .btn-game {
	/* デフォルトの 32px 横パディングを少し縮小 */
	padding-left: calc(20px * var(--scale-factor));
	padding-right: calc(20px * var(--scale-factor));
}

.contents-grid .btn {
	/* コンテンツ内ボタンも横パディングを縮小 */
	padding-left: calc(20px * var(--scale-factor));
	padding-right: calc(20px * var(--scale-factor));
}

/* 外部リンクアイコンは共通ユーティリティ .btn--external で付与（style.css参照） */

/* ==========================================
   Contents Section
========================================== */
.contents {
	position: relative;
	background-color: var(--color-off-white);
	padding: var(--padding-section-large) 0;
	height: calc(886px * var(--scale-factor));
	overflow: visible;
}

.contents .section-title {
	left: 0;
	top: calc(-44px * var(--scale-factor));
	width: calc(1200px * var(--scale-factor));
	z-index: 2;
}



.contents .container {
	position: relative;
	z-index: 5;
	text-align: center;
}

.contents-title {
	font-size: var(--text-lg);
	line-height: 1.2;
	letter-spacing: calc(-0.64px * var(--scale-factor));
	color: var(--color-black);
	margin-bottom: calc(80px * var(--scale-factor));
	max-width: calc(768px * var(--scale-factor));
	margin-left: auto;
	margin-right: auto;
}

.contents-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(48px * var(--scale-factor));
}

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

.content-image {
	aspect-ratio: 394.667/240;
	overflow: hidden;
	position: relative;
	width: 100%;
}

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

.content-image iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.content-info {
	display: flex;
	flex-direction: column;
	gap: calc(16px * var(--scale-factor));
	text-align: center;
}

.content-info h4 {
	font-size: var(--text-sm);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: calc(-0.32px * var(--scale-factor));
	color: var(--color-black);
}

.content-info p {
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-black);
}

/* ==========================================
   CTA Section
========================================== */
.cta {
	position: relative;
	padding: var(--padding-section-large) var(--padding-global);
	overflow: hidden;
}

.cta-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 80%;
	z-index: -2;
}

.cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: -1;
}

.cta .container {
	position: relative;
	z-index: 5;
	text-align: center;
}

.cta-content {
	max-width: calc(768px * var(--scale-factor));
	margin: 0 auto;
	color: var(--color-white);
}

.cta-title {
	font-size: var(--text-md);
	line-height: 1.2;
	letter-spacing: calc(-0.48px * var(--scale-factor));
	margin-bottom: calc(24px * var(--scale-factor));
}

.cta-description {
	font-size: var(--text-xs);
	line-height: 1.5;
	font-weight: 400;
	margin-bottom: calc(32px * var(--scale-factor));
}

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

/* ==========================================
   HOME PAGE RESPONSIVE DESIGN
========================================== */
@media (max-width: 600px) {

	/* ヒーローセクション - 縦レイアウト */
	.hero {
		height: calc(640px * var(--scale-factor));
		padding: calc(60px * var(--scale-factor)) 0;
	}

	.hero-content {
		flex-direction: column;
		gap: calc(30px * var(--scale-factor));
		padding: calc(80px * var(--scale-factor)) var(--padding-global) calc(20px * var(--scale-factor));
		align-items: stretch;
		text-align: left;
		position: relative;
	}

	.hero-text {
		order: 2;
		max-width: 100%;
	}

	.hero-social {
		order: 3;
		flex-direction: row;
		align-items: center;
		align-self: flex-end;
		gap: calc(20px * var(--scale-factor));
	}

	.logo {
		width: calc(200px * var(--scale-factor));
		height: auto;
	}

	.hero-image {
		order: 1;
		max-width: calc(300px * var(--scale-factor));
		align-self: center;
	}

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

	.hero-description {
		font-size: var(--text-base)
	}

	/* 書籍セクション */
	.books {
		padding: calc(60px * var(--scale-factor)) 0;
		min-height: auto;
	}

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

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

	.books-title {
		font-size: var(--text-xl);
	}

	.book-title {
		font-size: var(--text-lg);
	}

	.book-image {
		position: static;
		width: 100%;
		max-width: calc(300px * var(--scale-factor));
		margin: 0 auto;
	}

	.book-promotion {
		margin-top: calc(40px * var(--scale-factor));
		width: 100%;
		overflow: hidden;
	}

	.promotion-images {
		flex-direction: column;
		gap: calc(24px * var(--scale-factor));
		width: 100%;
	}

	.promotion-item {
		width: 100%;
		max-width: 100%;
	}

	/* サービスセクション */
	.services {
		padding: calc(60px * var(--scale-factor)) 0;
	}

	.services .section-title {
		top: calc(-56px * var(--scale-factor));
		width: calc(1000px * var(--scale-factor));
	}

	.services-bg {
		object-position: 30% center;
	}

	.service-title {
		font-size: var(--text-xl);
	}

	.services-grid {
		grid-template-columns: 1fr;
		gap: calc(30px * var(--scale-factor));
	}

	/* 相談セクション */
	.consultation {
		height: calc(1083px * var(--scale-factor));
		padding: 0;
	}

	.consultation .container {
		flex-direction: column;
		gap: calc(80px * var(--scale-factor));
		padding: calc(112px * var(--scale-factor)) calc(60px * var(--scale-factor)) 0;
		max-width: calc(720px * var(--scale-factor));
		align-items: flex-end;
		justify-content: flex-start;
		height: 100%;
	}

	.consultation-content {
		max-width: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: calc(32px * var(--scale-factor));
	}

	.consultation-title {
		font-size: calc(72px * var(--scale-factor));
		color: var(--color-main-navy);
		line-height: 1.2;
		letter-spacing: calc(-0.96px * var(--scale-factor));
	}

	.consultation-description {
		color: var(--color-black);
		font-size: calc(24px * var(--scale-factor));
		font-weight: 800;
		line-height: 1.5;
	}

	.consultation-image {
		position: static;
		width: calc(437px * var(--scale-factor));
		height: calc(655px * var(--scale-factor));
		border-radius: var(--radius-xl);
		overflow: hidden;
		margin-top: calc(32px * var(--scale-factor));
	}

	/* ボタン幅の統一 */
	.services .btn,
	.consultation .btn {
		min-width: fit-content;
		white-space: nowrap;
	}

	/* ゲームセクション - 縦並び、高さ調整 */
	.indie-games {
		padding: calc(112px * var(--scale-factor)) 0;
	}

	.indie-games .section-title {
		top: calc(-52px * var(--scale-factor));
		width: calc(1080px * var(--scale-factor));
	}

	.indie-games .container {
		max-width: calc(540px * var(--scale-factor));
	}

	.games-banner {
		width: 100%;
	}

	.games-banner img {
		width: 100%;
		height: auto;
		max-width: calc(720px * var(--scale-factor));
	}

	.games-grid {
		grid-template-columns: 1fr;
		gap: calc(40px * var(--scale-factor));
		max-width: calc(540px * var(--scale-factor));
		margin: 0 auto;
	}


	.game-screenshots {
		height: calc(270px * var(--scale-factor));
	}

	/* コンテンツセクション - 縦並び */
	.contents {
		height: auto;
		padding: calc(80px * var(--scale-factor)) 0;
	}

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

	.contents-grid {
		display: flex;
		flex-direction: column;
		gap: calc(40px * var(--scale-factor));
		max-width: calc(600px * var(--scale-factor));
		margin: 0 auto;
	}

	.content-card {
		width: 100%;
	}

	.game-card {
		padding: calc(24px * var(--scale-factor));
		gap: calc(20px * var(--scale-factor));
		width: calc(540px * var(--scale-factor));
	}

	.game-header {
		height: auto;
	}

	.game-icon {
		width: calc(96px * var(--scale-factor));
		height: calc(96px * var(--scale-factor));
	}

	.game-logo {
		height: calc(80px * var(--scale-factor));
	}

	.game-description {
		text-align: center;
		font-size: var(--text-base);
		line-height: 1.6;
	}

	.games-grid .btn-game,
	.contents-grid .btn {
		width: auto;
		display: inline-flex;
		padding-left: calc(16px * var(--scale-factor));
		padding-right: calc(16px * var(--scale-factor));
		align-self: center;
	}

	.cta-title {
		font-size: var(--text-md);
		text-align: left;
	}

	.cta-description {
		font-size: var(--text-sm);
		text-align: left;
	}
}