@charset "UTF-8";

.signature-lead_section {
	overflow: hidden;
}

.signature-lead_container {
	position: relative;
	display: grid;
	grid-template-areas: 'stack';
	min-height: 100vh;
}

.signature-lead_container > * {
	grid-area: stack;
}

.signature-lead_container .background {
	position: relative;
	z-index: 0;
}

.signature-lead_container .background .thumbnail,
.signature-lead_container .background .thumbnail img {
	width: 100%;
	height: 100%;
}

.signature-lead_container .background .thumbnail img {
	object-fit: cover;
	object-position: center bottom;
	display: block;
}

.signature-lead_wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(32px, 5vw, 64px);
	width: min(1100px, 92%);
	margin: 0 auto;
	padding: clamp(40px, 6vh, 80px) 0;
}

.signature-lead_content {
	max-width: 580px;
	padding: 1.5em;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(2px);
	border-radius: 8px;
}

.signature-lead_content .title {
	font-size: clamp(22px, 2.5vw, 32px);
	line-height: 1.4;
	margin-bottom: 1em;
}

.signature-lead_content .text {
	font-size: clamp(14px, 1.2vw, 18px);
	line-height: 2;
	margin-bottom: 1.5em;
}

.signature-lead_thumbnail img {
	width: clamp(280px, 30vw, 440px);
	height: auto;
	display: block;
}

@media screen and (max-width: 768px) {
	.signature-lead_wrapper {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media screen and (max-width: 500px) {
	.signature-lead_container {
		min-height: 70vh;
	}
	.signature-lead_logo {
		display: none;
	}

	.signature-lead_wrapper {
		flex-direction: column;
		align-items: center;
		gap: var(--space-md);
		padding: var(--space-lg) 0;
	}

	.signature-lead_content {
		padding: 1em;
	}

	.signature-lead_thumbnail {
		display: block;
		margin-top: var(--space-md);
	}

	.signature-lead_thumbnail img {
		width: 220px;
		margin: 0 auto;
	}
}

/* signature-container */

.signature-content_section {
	position: relative;
}
.signature-container {
	position: relative;
	overflow: hidden;
	height: 100vh;
}

.signature-container .background {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.signature-container .background,
.signature-container .background .thumbnail,
.signature-container .background img {
	height: 100%;
}

.signature-container .background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.signature-content {
	position: absolute;
	z-index: 1;
	max-width: 720px;
	color: var(--akamaru-color-white);
}

.signature-container01 .signature-content,
.signature-container03 .signature-content {
	bottom: 5.9027vw;
	right: 5.208vw;
}

.signature-container02 .signature-content,
.signature-container04 .signature-content {
	top: 5.555vw;
	left: 5.208vw;
}

.signature-container05 .signature-content {
	max-width: 520px;
	padding: 2em;
	color: var(--akamaru-color-dark01);
	right: clamp(48px, 6vw, 96px);
	bottom: clamp(56px, 7vw, 120px);
}

.signature-container05 .signature-content::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(2px);
	z-index: -1;
	border-radius: 16px;
}

.signature-content .title {
	font-size: var(--fz-36);
	line-height: 1.4;
	margin-bottom: clamp(10px, 1.4vw, 20px);
}

.signature-content .text {
	font-size: var(--fz-20);
	line-height: 2;
}

@media screen and (min-width: 1620px) {
	.signature-container {
		max-height: 70vh;
	}
}

@media screen and (max-width: 1024px) {
	.signature-container {
		max-height: 60vh;
	}

	.signature-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		z-index: 2;
		max-width: min(640px, 70vw);
		padding: 2em 2.2em;

		color: var(--akamaru-color-dark01);
		text-align: left;
	}

	.signature-container:nth-child(odd) .signature-content,
	.signature-container:nth-child(even) .signature-content {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
	}

	.signature-content::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.65);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		border-radius: 0 !important;
		z-index: -1;
	}

	.signature-content .title {
		font-size: clamp(24px, 3vw, 30px);
		margin-bottom: 16px;
	}

	.signature-content .text {
		font-size: 15px;
		line-height: 2;
		text-align: justify;
	}
}

@media screen and (max-width: 768px) {
	.signature-container {
		height: 40vh;
	}
	.signature-container:nth-child(odd) .signature-content,
	.signature-container:nth-child(even) .signature-content {
		width: 80%;
		text-align: center;
	}

	.signature-content .title {
		font-size: clamp(22px, 3.6vw, 26px);
		margin-bottom: 14px;
	}

	.signature-content .text {
		font-size: 15px;
		line-height: 2;
	}
}

@media screen and (max-width: 500px) {
	.signature-container {
		height: 50vh;
	}

	.signature-container:nth-child(odd) .signature-content,
	.signature-container:nth-child(even) .signature-content {
		width: 90%;
		max-width: none;
	}

	.signature-content .title {
		font-size: 18px;
		line-height: 1.45;
		margin-bottom: 10px;
	}

	.signature-content .text {
		font-size: 13px;
	}
}