/*
 *
 * page-environment.scss
 *
 */
:root {
	--z-index-: -1;
}

/* ------------------------------------------------------------
 pg-env
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-env {
		margin-bottom: 24.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env {
		margin-bottom: 19.2rem;
	}
}

/* ------------------------------------------------------------
 pg-env-programs
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-env-programs {
		margin-top: 18.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs {
		padding: 0 var(--contents-outside-vw);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-env-programs {
		margin-top: 12rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-env-programs {
		margin-top: 8.2rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__list {
		margin-top: 6.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__list {
		margin-top: 5.5rem;
	}
}

/* ----------------------------------------
 pg-env-programs__card
---------------------------------------- */
.pg-env-programs__card {
	position: relative;
	--slope-height: calc( var( --width ) * var( --slope-tan ) );
	--slope-radius: var( --radius-size20 );
	--shadow-radius: var( --radius-size20 );
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card {
		--shadow-width: calc( ( 284 / 318 ) * 100%);
		--shadow-top: 3.4rem;
		--shadow-left: 3.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card {
		--shadow-width: calc( ( 117 / 144 ) * 100%);
		--shadow-top: 2rem;
		--shadow-left: 1.7rem;
	}
}

.pg-env-programs__card__inner {
	background-color: var(--color-txt);
	color: var(--color-txt2);
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__inner {
		padding: calc( var( --slope-height ) + 2.0rem) 2.8rem calc( var( --slope-height ) + 1.6rem);
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__inner {
		padding: calc( var( --slope-height ) + 1.4rem) 0 calc( var( --slope-height ) + 7.3rem);
	}
}

.pg-env-programs__card__inner::before {
	font-weight: 500;
	letter-spacing: calc( 80 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__inner::before {
		font-size: var(--font-size16);
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__inner::before {
		font-size: var(--font-size12);
		margin-left: 1.8rem;
	}
}

.pg-env-programs__card__title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: 700;
	letter-spacing: calc( 60 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__title {
		height: 3.8em;
		font-size: var(--font-size22);
		--line-height: calc( 30 / 22 );
		margin-top: 1.7rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__title {
		height: 3.5em;
		text-align: center;
		--line-height: calc( 18 / 15 );
		margin-top: 1.8rem;
	}
}

@media screen and (max-width: 560px) and (min-width: 561px) {
	.pg-env-programs__card__title {
		font-size: var(--font-size18);
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__title {
		font-size: var(--font-size15);
	}
}

.pg-env-programs__card__icon {
	bottom: calc( var( --slope-height ) + var( --icon-bottom ) * 0.1rem);
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__icon {
		width: calc( ( var( --icon-width ) / 320 ) * 100%);
		left: auto;
		right: calc( ( var( --icon-right ) / 320 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__icon {
		max-width: calc( var( --icon-width ) * 0.6379 * 0.1rem);
		width: calc( ( var( --icon-width ) * 0.6379 / 144 ) * 100%);
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

.pg-env-programs__card__icon img {
	width: 100%;
}

.pg-env-programs__card__icon.-unique-1 {
	--icon-width: 58;
	--icon-right: 32;
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__icon.-unique-1 {
		--icon-bottom: 25;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__icon.-unique-1 {
		--icon-bottom: 16;
	}
}

.pg-env-programs__card__icon.-unique-2 {
	--icon-width: 70;
	--icon-right: 26;
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__icon.-unique-2 {
		--icon-bottom: 19;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__icon.-unique-2 {
		--icon-bottom: 14;
	}
}

.pg-env-programs__card__icon.-unique-3 {
	--icon-width: 59;
	--icon-right: 32;
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__icon.-unique-3 {
		--icon-bottom: 22;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__icon.-unique-3 {
		--icon-bottom: 16;
	}
}

.pg-env-programs__card__icon.-unique-4 {
	--icon-width: 56;
	--icon-right: 33;
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__icon.-unique-4 {
		--icon-bottom: 21;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__icon.-unique-4 {
		--icon-bottom: 17;
	}
}

.pg-env-programs__card__icon.-unique-5 {
	--icon-width: 76;
	--icon-right: 28;
}

@media screen and (min-width: 1024px) {
	.pg-env-programs__card__icon.-unique-5 {
		--icon-bottom: 17;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-programs__card__icon.-unique-5 {
		--icon-bottom: 14;
	}
}

/* ------------------------------------------------------------
 pg-env-training
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-env-training {
		margin-top: 12.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-training {
		padding: 0 var(--contents-outside-vw);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-env-training {
		margin-top: 12rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-env-training {
		margin-top: 8.5rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-env-training__list {
		margin-top: 6.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-training__list {
		margin-top: 5.7rem;
	}
}

/* ----------------------------------------
 pg-env-training__card
---------------------------------------- */
.pg-env-training__card {
	position: relative;
	--slope-radius: var( --radius-size20 );
	--shadow-radius: var( --radius-size20 );
}

@media screen and (min-width: 1024px) {
	.pg-env-training__card {
		--shadow-width: calc( ( 284 / 318 ) * 100%);
		--shadow-top: 3.4rem;
		--shadow-left: 3.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-training__card {
		--shadow-width: calc( ( 268 / 300 ) * 100%);
		--shadow-top: 2rem;
		--shadow-left: 3.2rem;
	}
}

/* ---------- pg-env-training__card__contents ---------- */
.pg-env-training__card__contents {
	position: relative;
	background-color: var(--color-bg4);
	color: var(--color-txt2);
}

@media screen and (min-width: 1024px) {
	.pg-env-training__card__contents {
		padding: 5.6rem 2.8rem 6.1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-training__card__contents {
		padding: 3.3rem 2.6rem 4.3rem;
	}
}

.pg-env-training__card__contents::before {
	position: absolute;
	font-weight: 500;
	letter-spacing: calc( 80 / 1000 * 1em);
	-webkit-transform: var(--slope--positive);
	transform: var(--slope--positive);
}

@media screen and (min-width: 1024px) {
	.pg-env-training__card__contents::before {
		font-size: var(--font-size40);
		top: 1.6rem;
		right: 2.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-training__card__contents::before {
		font-size: var(--font-size22);
		top: 1.5rem;
		right: 1.8rem;
	}
}

.pg-env-training__card__title {
	font-weight: 700;
	letter-spacing: calc( 60 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-env-training__card__title {
		font-size: var(--font-size22);
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-training__card__title {
		font-size: var(--font-size18);
	}
}

.pg-env-training__card__txt {
	font-weight: 700;
	letter-spacing: calc( 60 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-env-training__card__txt {
		font-size: var(--font-size13);
		margin-top: 1.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-env-training__card__txt {
		font-size: var(--font-size12);
		margin-top: 1.2rem;
	}
}