/*
--------------------------------------
common elements
--------------------------------------
*/

.section-category {
	padding: calc(40px + (80 - 40) * ((100vw - 320px) / (1920 - 320))) calc(20px + (0 - 20) * ((100vw - 320px) / (1920 - 320)));

	.section-category__title-text {
		font-family: var(--e-global-typography-primary-font-family);
		font-size: calc(25px + (60 - 25) * ((100vw - 320px) / (1920 - 320)));
		font-weight: 700;
		color: var(--e-global-color-primary);
		line-height: calc(28px + (68 - 28) * ((100vw - 320px) / (1920 - 320)));
		letter-spacing: -1px;

	}

	.section-category__description,
	.section-category__description p {
		font-family: var(--e-global-typography-text-font-family);
		font-size: 16px;
		font-weight: 500;
		color: var(--e-global-color-primary);
		line-height: 26px;
		margin-top:10px;
	}

	.section-category__image {
		position: relative;
	}

	.section-category__image .section-category__image-shape-top-corner {
		position: absolute;
		left: calc(-10px + (-50 - -10) * ((100vw - 320px) / (1920 - 320)));
		top: calc(0px + (-50 - 0) * ((100vw - 320px) / (1920 - 320)));
	}

}

.section-w-inner {
	.section-category-inner {
		display: flex;
		align-items: center;
		column-gap: calc(20px + (200 - 20) * ((100vw - 320px) / (1920 - 320)));
		max-width: 1330px;
		margin: auto;
	}
}

/*
--------------------------------------
section text only
--------------------------------------
*/

.section-category.section-category-text-only .section-category-inner {
	max-width: 1140px;
	margin: auto;
}

/*
--------------------------------------
section 1/4 : img/text
--------------------------------------
*/

.section-category-element {
	display: grid;
	grid-template-columns: 1fr;


	.section-category__image {
		position: relative;
		display: flex;
		justify-content: center;
		width: 100%;
		height: 0;
		padding-bottom: 100%;
	}

	.section-category__image-category {
		object-fit: cover;
		width: calc(300px + (510 - 300) * ((100vw - 320px) / (1920 - 320)));
		height: calc(310px + (510 - 310) * ((100vw - 320px) / (1920 - 320)));
	}
	.section-category__title {
		padding-left: calc(20px + (120 - 20) * ((100vw - 320px) / (1920 - 320)));
	}

	.section-category__title .section-category__title-text {
		position: relative;
		z-index: 1;
	}

	.section-category__description {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		padding-top: calc(20px + (0 - 20) * ((100vw - 320px) / (1920 - 320)));
	}

}

/*
--------------------------------------
section 2 : text/img
--------------------------------------
*/

.section-category.section-category-two {
	background: #F3F3F7;

	.section-category__content {
		max-width: 630px;
		padding-bottom: calc(45px + (0 - 45) * ((100vw - 320px) / (1920 - 320)));
	}

	.section-category__image .section-category__image-category {
		object-fit: cover;
		width: calc(300px + (510 - 300) * ((100vw - 320px) / (1920 - 320)));
		height: calc(310px + (610 - 310) * ((100vw - 320px) / (1920 - 320)));
	}

}

/*
--------------------------------------
section : text only
--------------------------------------
*/

.section-category.section-category-text-only {

	.section-category__title {
		text-align: center;
		max-width: 85%;
		margin: auto;
	}

	.section-category__description {
		text-align: center;
		max-width: 90%;
		padding-top: calc(18px + (38 - 18) * ((100vw - 320px) / (1920 - 320)));
		margin: auto;
	}

}

/*
--------------------------------------
section 4 : img/text on blue BG
--------------------------------------
*/

.section-category.section-category-four {

	max-width: 1330px;
	margin: auto;

	.section-category__title .section-category__title-text {
		color: #fff;
	}

	.section-category__description {
		justify-content: flex-end;
	}

	.section-category__description,
	.section-category__description h2,
	.section-category__description p {
		color: #fff;
		opacity: 0.8;
	}

}

/*
--------------------------------------
section 5 : text only
--------------------------------------
*/

.section-category-five .section-category__description {
	padding-top: calc(18px + (48 - 18) * ((100vw - 320px) / (1920 - 320)));
}

/*
--------------------------------------
section 6 : text only
--------------------------------------
*/

.section-category.section-category-six {

	background: var( --e-global-color-primary );

	.section-category__title * {
		color: #fff;
	}

	.section-category__description * {
		color: #fff;
		opacity: 0.8;
	}
}