@charset "UTF-8";


/* ------------------------------------------------------
 TOP
------------------------------------------------------ */

/*----------
	group
----------*/
.p-group {
	padding: 30px 0 120px;
	position: relative;
	z-index: 2;
	overflow-x: clip;
}
.p-group::before {
	--size: 1200px;
	content: '';
	aspect-ratio: 2898 / 2542;
	width: var(--size);
	background: url(/product/assets/images/bg_01.png) center / contain no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	top: -90px;
	margin: auto;
	margin-left: calc(50% - var(--size)/2);
	z-index: -1;
	transform: translateX(-5%);
	pointer-events: none;
}
.p-group__inner {
	max-width: 1280px;
	width: calc(100% - 30px);
	margin-inline: auto;
}
.p-group__title {
	font-size: clamp(1.5rem, 3.6vw ,2.625rem);
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 90px;
}
.p-group__title--l {
	font-size: clamp(2.3rem, 6.5vw ,4.5rem);
}
.p-group__title--c {
	color: #DE5252;
}
.p-group__main {
	position: relative;
}
.p-group__main-box {
	position: absolute;
	left: 0;
	top: 0;
	width: 55.8%;
	border-top: var(--color-main) solid 2px;
}
.p-group__main-box--2 {
	left: auto;
	top: auto;
	right: 0;
	bottom: 0;
	border-top: none;
	border-bottom: var(--color-sub2) solid 2px;
}
.p-group__main-text {
	font-size: clamp(1rem, 2vw ,1.625rem);
	font-weight: 700;
	padding: 8px 0 0 5px;
	margin: 0;
}
.p-group__main-text--2 {
	padding: 0 5px 8px 0;
	text-align: right;
}
.p-group__image {
	max-width: 755px;
	margin-inline: auto;
	position: relative;
	z-index: 2;
}
.p-group__image::before {
	content: '';
	aspect-ratio: 1707 / 1691;
	max-width: 854px;
	width: 113.1%;
	position: absolute;
	left: -6%;
	top: -4%;
	z-index: -3;
	background: url(/product/assets/images/group_02.png) center /contain no-repeat;
}
.p-group__link {
	aspect-ratio: 300 / 262;
	width: 39.735%;
	background-color: #FFF;
	font-size: 0;
	display: block;
	position: absolute;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	--imgH: 787;
	--imgW: 755;
	opacity: 0;
	transition: opacity .2s;
}
.p-group__link:hover {
	opacity: .1;
}
.p-group__link--1 {
	top: 0;
	left: calc(226 / var(--imgW) * 100%);
}
.p-group__link--2 {
	top: calc(132 / var(--imgH) * 100%);
	left: 0;
}
.p-group__link--3 {
	top: calc(132 / var(--imgH) * 100%);
	right: 0;
}
.p-group__link--4 {
	bottom: calc(132 / var(--imgH) * 100%);
	left: 0;
}
.p-group__link--5 {
	bottom: calc(132 / var(--imgH) * 100%);
	right: 0;
}
.p-group__link--6 {
	bottom: 0;
	left: calc(226 / var(--imgW) * 100%);
}

@media (min-width: 768px), print {
	.p-group {
		padding: 90px 0 220px;
	}
	.p-group::before {
		--size: 2898px;
		left: 0;
		right: 0;
		top: -116px;
		transform: translateX(-7%);
	}
	.p-group__main-text {
		padding: 10px 0 0 24px;
	}
	.p-group__main-text--2 {
		padding: 0 24px 10px 0;
	}
}

/*----------
	sysytem
----------*/
.p-system {
	position: relative;
	z-index: 3;
	overflow-x: clip;
}
.p-system::before {
	--size-bg2: 3723px;
	content: '';
	aspect-ratio: 3723 / 3130;
	width: var(--size-bg2);
	background: url(/product/assets/images/bg_02.png) center /contain no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	top: 247px;
	margin: auto;
	margin-left: calc(33% - var(--size-bg2)/2);
	z-index: -1;
	pointer-events: none;
}
.p-system::after {
	--size-bg3: 3723px;
	content: '';
	aspect-ratio: 3723 / 3208;
	width: var(--size-bg3);
	background: url(/product/assets/images/bg_03.png) center /contain no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1232px;
	margin: auto;
	margin-left: calc(62% - var(--size-bg3)/2);
	z-index: -2;
	pointer-events: none;
}
.p-system__inner {
	max-width: 1386px;
	width: calc(100% - 30px);
	margin-inline: auto;
}
.p-panelSecton--bg {
	position: relative;
}
.p-system__title {
	text-align: center;
}
.p-system__title-main {
	font-size: clamp(1.75rem, 4vw ,3.125rem);
	font-weight: 700;
	margin-bottom: 0;
}
.p-system__title-main--c1 {
	color: #264C98;
}
.p-system__title-main--c2 {
	color: var(--color-sub);
}
.p-system__title-sub {
	font-size: clamp(1.125rem, 2vw ,1.875rem);
	font-weight: 700;
	margin-top: 10px;
	margin-bottom: 0;
}
.p-system__iconList {
	display: flex;
	justify-content: center;
	gap: 80px;
	margin-top: 120px;
}
.p-system__iconList-item {
	aspect-ratio: 1;
	width: 196px;
	border-radius: 100%;
	background: linear-gradient(180deg,rgba(64, 125, 248, 1) 0%, rgba(38, 76, 152, 1) 100%);
	display: grid;
	place-content: center;
	padding-bottom: 10px;
	position: relative;
}
.p-system__iconList-item:not(:last-child)::after {
	content: '';
	aspect-ratio: 67 / 7;
	width: 67px;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transform: translateX(110%);
	background: url(/product/assets/images/parts_01.svg) center / contain no-repeat;
}
.p-system__iconList-text {
	font-size: 1.4375rem;
	color: #FFF;
	font-weight: 700;
	text-align: center;
	margin-bottom: 10px;
}
.p-system__iconList-icon {
	display: grid;
	place-content: center;
	height: 84px;
}
@media (max-width: 1100px), print {
	.p-system__iconList {
		gap: 60px;
	}
	.p-system__iconList-item {
		width: 140px;
	}
	.p-system__iconList-item:not(:last-child)::after {
		content: '';
		aspect-ratio: 67 / 7;
		width: 67px;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		transform: translateX(110%);
		background: url(/product/assets/images/parts_01.svg) center / contain no-repeat;
	}
	.p-system__iconList-text {
		font-size: 1.125rem;
		margin-bottom: 8px;
	}
	.p-system__iconList-icon {
		width: 50px;
		height: 50px;
		position: relative;
		margin-inline: auto;
	}
	.p-system__iconList-icon img{
		position: absolute;
		width: 100%;
		height: 100%;
	}
}
@media (max-width: 767px), print {
	.p-system__iconList {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		margin-top: 40px;
	}
	.p-system__iconList-item:not(:last-child)::after {
		width: 67px;
		left: 0;
		top: auto;
		bottom: 0;
		margin: auto;
		transform: translateY(110%) rotate(90deg);
		z-index: -1;
	}
}

.p-system__titleLine {
	margin-bottom: 26px;
	text-align: center;
}
.p-system__titleLine-main {
	--line-color: #1d4f9f;
	--line-height: 4px;
	--line-gap: 52px;
	--line-v-size: 50px;

	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	margin-bottom: 0;
	padding-bottom: var(--line-v-size);
	font-size: 1.875rem;
	font-size: clamp(1.25rem, 2.4vw ,1.875rem);
	font-weight: 700;
	line-height: 1.5;
}
.p-system__titleLine-main--c2 {
	--line-color: var(--color-sub);
}
.p-system__titleLine-main::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -20px;
	height: var(--line-v-size);
	background:
		linear-gradient(
			to right,
			var(--line-color) 0 calc(50% - var(--line-gap) / 2),
			transparent calc(50% - var(--line-gap) / 2) calc(50% + var(--line-gap) / 2),
			var(--line-color) calc(50% + var(--line-gap) / 2) 100%
		)
		top center / 100% var(--line-height) no-repeat;
}
.p-system__titleLine-main::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 7px;
	width: 40px;
	height: 40px;
	border-left: var(--line-height) solid var(--line-color);
	border-bottom: var(--line-height) solid var(--line-color);

	transform: translateX(-50%) rotate(-45deg);
	transform-origin: center;
}
.p-system__panel-link {
	display: grid;
	place-content: center;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	color: #FFF;
	padding: 40px 20px;
	transition: opacity .3s;
}
.p-system__panel-link:hover {
	opacity: .7;
}
.p-system__panel-image {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.p-system__panel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale .3s;
}
a:hover .p-system__panel-image img {
	scale: 1.1;
}
.p-system__panel-image::after {
	content: '';
	inset: 0;
	position: absolute;
	background: rgba(0,0,0,.3);
}
.p-system__panel-link .btn {
	height: auto;
	max-width: 200px;
	margin: 30px auto 0;
	pointer-events: none;
}
/* .p-system__panel-link .btn:hover > span, .p-system__panel-link .btn:hover::before {
	opacity: 1;
} */
.p-system__panel-lead {
	font-size: clamp(1.25rem, 3.5vw ,2.25rem);
	text-align: center;
	font-weight: 700;
}
.p-system__panel-text {
	font-size: clamp(1rem, 2.5vw ,1.4375rem);
	text-align: center;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 0;
}
.p-system__panelList {
		--_column-width-calculated: calc((100% - var(--_gap) * (var(--_column-max-count) - 1)) / var(--_column-max-count));
    --_column-width: min(100%, max(var(--_column-min-width), var(--_column-width-calculated)));
    display: block grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--_column-width), 1fr));
    gap: var(--_gap);
    --_gap: 70px;
		--_column-max-count: 2;
		--_column-min-width: 540px;
		margin-top: 64px;
		row-gap: 40px;
}
.p-system__panel-inner--2 {
	display: flex;
	flex-direction: column;
	gap: 60px;
}
.p-system__panel-block__lead {
	width: fit-content;
	margin: 0 auto 16px;
	background-color: var(--color-sub);
	color: #FFF;
	border: #FFF solid 1px;
	font-size: clamp(1.125rem, 3vw ,1.8125rem);
	font-weight: 700;
	padding: 4px 16px 5px;
	line-height: 1.2;
}
.p-system__panel-blck__text {
	margin-bottom: 0;
	font-size: clamp(.9375rem, 2.5vw ,1.5rem);
	font-weight: 700;
	text-align: center;
}
.p-system__panel-link--2 .btn {
	margin-top: 20px;
}
@media (max-width: 767px), print {
	.p-system__panel-link--2 {
		aspect-ratio: 657 / 900;
		width: 100%;
		min-height: 520px;
		max-height: 700px;
	}
}
@media (min-width: 768px), print {
	.p-system__inner {
		width: calc(100% - 58px);
	}
	.p-system__panel-link {
		min-height: 520px;
		padding: 20px;
	}
	.p-system__panel-link .btn {
		max-width: 286px;
		height: 62px;
		border-radius: 60px;
		margin-top: 40px;
	}
	.p-system__panel-image--2::after {
		opacity: .2;
	}
}
@media (min-width: 768px) and (max-width: 1199px), print {
	.p-system__panel-link--2 {
		min-height: 620px;
		padding: 100px 40px;
	}
}
@media (min-width: 1200px), print {
	.p-system__panelList {
		align-items: stretch;
		row-gap: 40px;
	}
	.p-system__panelList-item {
		display: grid;
		grid-template-rows: auto 1fr;
	}
	.p-system__titleLine {
		margin-bottom: 26px;
	}
	.p-system__panelList-item > .p-system__panel-link {
		min-height: 520px;
		height: 100%;
	}
	.p-system__panel-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
	.p-system__panel-inner--2 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 0;
		height: 400px;
	}
	.p-system__panel-block2 {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

.p-panelSecton {
	margin-top: 80px;
}
.p-panelSecton .p-system__title {
	margin-bottom: 50px;
}
@media (min-width: 768px), print {
	.p-panelSecton {
		margin-top: 145px;
	}
	.p-panelSecton .p-system__title {
		margin-bottom: 90px;
	}
}

/* エコムって何者？ */
.p-bnr {
	margin-top: 50px;
	position: relative;
	z-index: 3;
}
.p-bnr::before {
	content: '';
	display: block;
	width: 2px;
	height: 50px;
	background-color: var(--color-main);
	margin: 0 auto 30px;
}
.p-bnr__lead {
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.9;
	margin-bottom: 30px;
	width: calc(100% - 30px);
	margin-inline: auto;
}
.p-bnr__inner {
	background-color: #FFF;
}
.p-bnr__inner {
	overflow: clip;
}
.p-bnr__link {
	display: block;
	position: relative;
}
.p-bnr__link img {
	transition: scale .3s;
}
.p-bnr__link:hover img {
	scale: 1.1;
}
.p-bnr__parts {
	width: 7.5%;
	min-width: 70px;
	position: absolute;
	right: 3%;
	top: 5%;
}
@media (min-width: 768px), print {
	.p-bnr {
		margin-top: 100px;
	}
	.p-bnr::before {
		height: 72px;
		margin-bottom: 64px;
	}
	.p-bnr__lead {
		margin-bottom: 50px;
		font-size: clamp(1.125rem, 2.5vw ,1.5rem);
	}
	.p-bnr__parts {
		right: 30px;
	}
}

/* 関連情報 */
.p-relate {
	background-color: #D5D5D5;
	padding: 72px 0;
}
.p-relate__inner {
	max-width: 1200px;
	width: calc(100% - 30px);
	margin-inline: auto;
}
.p-relate__title {
	font-size: clamp(1.5rem, 3.25vw ,2rem);
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
}
.p-relate__list {
	--_column-width-calculated: calc((100% - var(--_gap) * (var(--_column-max-count) - 1)) / var(--_column-max-count));
	--_column-width: min(100%, max(var(--_column-min-width), var(--_column-width-calculated)));
	display: block grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--_column-width), 1fr));
	gap: var(--_gap);
	--_gap: 20px;
	--_column-max-count: 2;
	--_column-min-width: 160px;
}
.p-relate__item-link {
	background-color: #FFF;
	height: 100%;
	color: var(--color-txt);
	text-align: center;
	display: block;
}
.p-relate__item-main {
	position: relative;
	min-height: 120px;
	display: grid;
	place-content: center;
	padding: 20px 16px 25px;
}
.p-relate__item-main::after {
	content: '';
	width: 14px;
	aspect-ratio: 9 / 14;
	background: url(/product/assets/images/arrow_s.svg) center /contain no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	margin: auto;
	transition: transform .2s;
}
a:hover .p-relate__item-main::after {
	transform: translateY(5px);
}
.p-relate__item-text {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	transition: opacity .3s;
}
a:hover .p-relate__item-text {
	opacity: .7;
}
.p-relate__item-image {
	overflow: clip;
}
.p-relate__item-image img {
	transition: scale .3s;
}
.p-relate__item-link:hover .p-relate__item-image img {
	scale: 1.1;
}

@media (min-width: 768px), print {
	.p-relate__inner {
		width: calc(100% - 58px);
	}
	.p-relate__title {
		margin-bottom: 80px;
	}
	.p-relate__list {
		--_gap: 25px;
		--_column-max-count: 5;
		--_column-min-width: 200px;
	}
}


.l-mainfooter {
	margin-top: 0;
}