
/* pages/_company.css */
.c-page-coloriuris__wrap,
.c-page-coloriuris__pictures {
	margin-top: 80px;
}

@media ( min-width: 600px ) {
	.c-page-coloriuris__pictures {
		display: flex;
		gap: 20px;
	}
}

@media ( min-width: 1000px ) {
	.c-page-coloriuris__wrap {
		display: flex;
		gap: 100px;
	}
	.c-page-coloriuris__text {
		width: 50%;
	}
	.c-page-coloriuris__pictures {
		width: 50%;
		margin-top: 0;
		display: block;
		gap: initial;
	}
}
@media ( min-width: 1200px ) {

	.c-page-coloriuris__text {
		width: calc( 100% * 5 / 12 );
		padding-right: 60px;
		line-height: 1.8;

	}
	.c-page-coloriuris__pictures {
		width: calc( 100% * 7 / 12 );
	}
}

.c-page-coloriuris__pictures img {
	aspect-ratio: 4 / 3;
}

.c-page-coloriuris__pictures .c-image--decorated::before,
.c-page-coloriuris__pictures .c-image--decorated::after {
	background-color: var(--color-blue);
}

.c-page-coloriuris__timeline-title {
	font-size: calc( 1rem * 30 / 20 );
	line-height: calc( 100% * 32 / 30 );
	letter-spacing: -0.02em;
	font-family: var(--font-serif);
	font-weight: 400;
}
@media ( min-width: 1000px ) {
	.c-page-coloriuris__timeline-title {
		font-size: calc( 1rem * 64 / 16 );
		line-height: calc( 100% * 80 / 64 );	
		text-align: center;
		max-width: 1200px;
	}
}

.c-page-coloriuris__timeline {
	position: relative;
	padding-top: 60px;
}

.c-page-coloriuris__timeline::before {
	position: absolute;
	content: "";
	display: block;
	background-color: var(--color-white);
	width: 100vw;
	height: 100%;
	left: calc( -50vw + 50% );
	top: 0;
	z-index: -1;
}

@media ( min-width: 600px ) {
	.c-page-coloriuris__timeline {
		max-width: 1200px;
		margin-inline: auto;
		border-radius: 20px;
		padding: 120px;
	}
	.c-page-coloriuris__timeline::before {
		display: none;
	}
	.c-page-coloriuris__timeline img {
		width: 100%;
		height: auto;
	}

}

.c-page-coloriuris__timeline__graph--mobile {
	max-width: 400px;
}
.c-page-coloriuris__timeline__graph--desktop {
	display: none;
}
@media ( min-width: 800px ) {
	.c-page-coloriuris__timeline__graph--mobile {
		display: none;
	}
	.c-page-coloriuris__timeline__graph--desktop {
		display: block;
	}
}



