@charset "UTF-8";

/* TABLE OF CONTENTS
------------------------------------------------------------
* VARIABLE - 変数
* COMMON - 基本
* MAIN - メイン
* lp-btn-area
* MV
* ABOUT
* section01 - TROUBLE
* section02 - FEATURE
* section03 - SOLUTION
* section04 - SERVICE
* section05 - CLIENT
* section06 - FLOW
------------------------------------------------------------ */

/*==================================================================================================

	* VARIABLE - 変数

==================================================================================================*/
:root {
	--px: min(1px, (1 / 1300) * 100vw);
	--sp: calc((1 / 750) * 100vw);
	--px-vh: min(1px, (1 / 1300) * 100vh);
	--sp-vh: calc((1 / 750) * 100vh);
}





/*==================================================================================================

	* COMMON - 基本

==================================================================================================*/
.pc {
	display: block;
}

@media only screen and (max-width: 750px) {
	.pc {
		display: none;
	}
}

.sp {
	display: none;
}

@media only screen and (max-width: 750px) {
	.sp {
		display: block;
	}
}

.visuallyhidden {
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
}



/*==================================================================================================

	* MAIN - メイン

==================================================================================================*/
.lp-ec-support {
	width: 100%;
	margin: 0 auto;
	color: #191919;
	font-feature-settings: "palt";
}

.inner-width {
	width: 100%;
	max-width: calc(var(--px) * 1300);
	margin: 0 auto;
	padding-inline: calc(var(--px) * 50);
}

@media screen and (max-width: 750px) {
	.inner-width {
		padding-inline: calc(var(--sp) * 20);
	}
}

.sec {
	position: relative;
	overflow: hidden;

	& .sec_ttl {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: calc(var(--px) * 80);
		font-size: calc(var(--px) * 30);
		font-weight: bold;
		text-align: center;
		line-height: 2.65;
		letter-spacing: 0.1em;

		& span {
			display: inline-block;
			font-size: calc(var(--px) * 20);
			font-weight: 900;
			line-height: 1.8;

			&::after {
				content: "";
				display: block;
				border-bottom: 1px dashed #191919;
			}
		}
	}
}

@media screen and (max-width: 750px) {
	.sec {

		& .sec_ttl {
			margin-bottom: calc(var(--sp) * 50);
			font-size: calc(var(--sp) * 40);
			line-height: 1.75;

			& span {
				margin-bottom: .7em;
				font-size: calc(var(--sp) * 24);
				line-height: 1.6;
			}
		}
	}
}




/*==================================================================================================

	* lp-btn-area

==================================================================================================*/
.lp-btn-area {
	display: flex;
	justify-content: center;
	column-gap: calc(var(--px) * 60);
	padding-block: calc(var(--px) * 90);
	background-color: #f7f7f7;

	& .lp-btn {
		width: 100%;
		max-width: calc(var(--px) * 450);

		& img {
			transition: .3s;
		}
	}
}

@media (hover: hover) and (pointer: fine) {
	.lp-btn-area {
		& .lp-btn {
			&:hover img {
				transform: scale(1.05);
			}
		}
	}
}

@media screen and (max-width: 750px) {
	.lp-btn-area {
		flex-direction: column;
		row-gap: calc(var(--sp) * 60);
		padding-block: calc(var(--sp) * 80);

		& .lp-btn {
			max-width: calc(var(--sp) * 560);
			margin: 0 auto;
		}
	}
}





/*==================================================================================================

	* MV

==================================================================================================*/
.lp-mv {
	position: relative;
	width: 100%;
	margin: calc(var(--px) * 70) auto calc(var(--px) * 40);
	padding-inline: 20px;

	& .lp-mv--inner {
		background: url(images/mv_bg.jpg) no-repeat center center / cover;
		border-radius: calc(var(--px) * 50);
	}
	
	& .inner-width {
		position: relative;
		min-height: calc(var(--px) * 700);
	}

	& .lp-mv__txt {
		position: absolute;
		bottom: calc(var(--px) * 50);
		left: calc(var(--px) * 50);
		width: 100%;
		max-width: calc(var(--px) * 635);
		max-width: 48.847%;
	}

	& .lp-mv__model {
		position: absolute;
		bottom: calc(var(--px) * -10);
		right: calc(var(--px) * 60);
		width: 100%;
		max-width: calc(var(--px) * 556);
		max-width: 42.77%;
	}
}

@media screen and (max-width: 750px) {
	.lp-mv {
		position: relative;
		width: 100%;
		margin: calc(var(--sp) * 10) auto 0;
		padding-inline: calc(var(--sp) * 10);

		& .lp-mv--inner {
			background: url(images/mv_sp.jpg) no-repeat center center / cover;
			border-radius: 0;
		}
		
		& .inner-width {
			position: relative;
			min-height: calc(var(--sp) * 1060);
		}

		& .lp-mv__txt,
		& .lp-mv__model {
			position: absolute;
			clip: rect(1px 1px 1px 1px);
			clip: rect(1px, 1px, 1px, 1px);
			-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
			clip-path: inset(0px 0px 99.9% 99.9%);
			overflow: hidden;
			height: 1px;
			width: 1px;
			padding: 0;
			border: 0;
		}
	}
}





/*==================================================================================================

	* ABOUT

==================================================================================================*/
.about {
	width: 100%;
	max-width: calc(var(--px) * 1300);
	margin: 0 auto;
	padding-block: calc(var(--px) * 100);

	& .about__ttl {
		margin-bottom: 0.5em;
		font-size: calc(var(--px) * 46);
		font-weight: bold;
		text-align: center;
		line-height: 1.63;
		letter-spacing: 0.1em;
	}

	& .about__sub-ttl {
		position: relative;
		display: table;
		margin: 0 auto 1em;
		font-size: calc(var(--px) * 30);
		font-weight: bold;
		text-align: center;
		line-height: 1.5;
		letter-spacing: 0.1em;
		z-index: 1;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			display: block;
			width: 100%;
			height: calc(var(--px) * 15);
			background-color: #ffee5c;
			z-index: -1;
		}
	}

	& .about__txt {
		font-size: calc(var(--px) * 16);
		font-weight: 500;
		text-align: center;
		line-height: 2.125;
		letter-spacing: 0.1em;
	}
}

@media screen and (max-width: 750px) {
	.about {
		width: 100%;
		padding-block: calc(var(--sp) * 40) calc(var(--sp) * 140);

		& .about__ttl {
			font-size: calc(var(--sp) * 54);
			line-height: 1.38;
		}

		& .about__sub-ttl {
			font-size: calc(var(--sp) * 28);
			line-height: 1.5;

			&::after {
				height: calc(var(--sp) * 15);
			}
		}

		& .about__txt {
			font-size: calc(var(--sp) * 22);
			line-height: 2.7;
		}
	}
}








/*==================================================================================================

	* section01 - TROUBLE

==================================================================================================*/
.sec-trouble {
	padding-block: calc(var(--px) * 120);
	background-color: #ebf3fa;

	& .sec_ttl span {
		color: #4f7da5;

		&::after {
			border-color: #4f7da5;
		}
	}

	& .sec-trouble__img {
		width: 100%;
		max-width: calc(var(--px) * 1178);
		margin: 0 auto;
	}
}

@media screen and (max-width: 750px) {
	.sec-trouble {
		padding-block: calc(var(--sp) * 120) 0;

		& .sec-trouble__img {
			max-width: calc(var(--sp) * 728);
		}
	}
}







/*==================================================================================================

	* section02 - FEATURE

==================================================================================================*/
.sec-feature {
	padding-bottom: calc(var(--px) * 120);
	background-color: #fff4f9;

	& .sec_ttl span {
		color: #f483b6;

		&::after {
			border-color: #f483b6;
		}
	}

	/* 帯タイトル */
	& .sec-feature__lead {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		min-height: calc(var(--px) * 100);
		margin-bottom: calc(var(--px) * 120);
		font-size: calc(var(--px) * 28);
		font-weight: bold;
		color: #fff;
		line-height: 1;
		letter-spacing: 0.1em;
		background: linear-gradient(to right, #e88ff3 0%,#ff7d68 100%);

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			display: block;
			width: 0;
			height: 0;
			margin: 0 auto;
			border-style: solid;
			border-right: 8px solid transparent;
			border-left: 8px solid transparent;
			border-top: 14px solid #f486ad;
			border-bottom: 0;
			transform: translateY(100%);
		}
	}

	/* ポイント */
	& .sec-feature__list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		column-gap: calc(var(--px) * 20);
		row-gap: calc(var(--px) * 20);

		& .sec-feature__item {
			display: flex;
			flex-direction: column;
			width: 100%;
			max-width: calc(var(--px) * 285);
			padding: calc(var(--px) * 30)  calc(var(--px) * 18);
			background-color: #fff;
			border-radius: calc(var(--px) * 20);
		}

		& .sec-feature__item-detail {
			display: contents;
		}

		& .sec-feature__item-num {
			margin-bottom: .7em;
			font-size: calc(var(--px) * 20);
			font-weight: 900;
			font-style: italic;
			text-align: center;
			line-height: 1;
			letter-spacing: 0.1em;
			background: linear-gradient(to right, #e88ff3 0%,#ff7d68 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			order: 1;

			& span {
				font-size: calc(var(--px) * 30);
				padding-left: .25em;
			}
		}

		& .sec-feature__item-img {
			order: 2;
		}

		& .sec-feature__item-ttl {
			order: 3;
			padding-block: .5em 1em;
			font-size: calc(var(--px) * 18);
			font-weight: bold;
			line-height: 1.8;
			letter-spacing: 0.1em;
		}

		& .sec-feature__item-txt{
			order: 4;
			font-size: calc(var(--px) * 16);
			font-weight: 500;
			line-height: 2;
			letter-spacing: 0.1em;
		}

		/* ポイント1のみ */
		@media screen and (min-width: 751px) {
			& .sec-feature__item--01 {
				flex-direction: row;
				align-items: center;
				column-gap: calc(var(--px) * 30);
				max-width: 100%;
				padding-inline: calc(var(--px) * 40);

				& .sec-feature__item-detail {
					display: block;
					order: 3;
				}

				& .sec-feature__item-num {
					text-align: left;
				}

				& .sec-feature__item-img {
					width: 100%;
					max-width: calc(var(--px) * 242);
				}
			}
		}
	}
}

@media screen and (max-width: 750px) {
	.sec-feature {
		padding-bottom: calc(var(--sp) * 100);

		/* 帯タイトル */
		& .sec-feature__lead {
			min-height: calc(var(--sp) * 110);
			margin-bottom: calc(var(--sp) * 80);
			font-size: calc(var(--sp) * 31);

			&::after {
				border-right: calc(var(--sp) * 8) solid transparent;
				border-left: calc(var(--sp) * 8) solid transparent;
				border-top: calc(var(--sp) * 14) solid #f486ad;
			}
		}

		/* ポイント */
		& .sec-feature__list {
			display: flex;
			flex-direction: column;
			row-gap: calc(var(--sp) * 40);

			& .sec-feature__item {
				display: flex;
				flex-direction: column;
				width: 100%;
				max-width: 100%;
				padding: calc(var(--sp) * 40);
				background-color: #fff;
				border-radius: calc(var(--sp) * 20);
			}

			& .sec-feature__item-img {
				margin-bottom: calc(var(--sp) * 20);
			}

			& .sec-feature__item-detail {
				display: block;
				padding: calc(var(--sp) * 20) calc(var(--sp) * 10);
				order: 2;
			}

			& .sec-feature__item-num {
				margin-bottom: .25em;
				font-size: calc(var(--sp) * 26);
				text-align: left;

				& span {
					font-size: calc(var(--sp) * 40);
					padding-left: .25em;
				}
			}

			& .sec-feature__item-ttl {
				padding-block: .5em;
				font-size: calc(var(--sp) * 26);
			}

			& .sec-feature__item-txt{
				font-size: calc(var(--sp) * 22);
			}
		}
	}
}






/*==================================================================================================

	* section03 - SOLUTION

==================================================================================================*/
.sec-solution {
	padding-block: calc(var(--px) * 120);

	& .sec_ttl span {
		color: #70dfa4;

		&::after {
			border-color: #70dfa4;
		}
	}

	/* コンテンツ */
	& .sec-solution__cont {
		margin-bottom: calc(var(--px) * 160);
		text-align: center;

		& .sec-solution__cont-ttl {
			margin-bottom: calc(var(--px) * 60);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: calc(var(--px) * 50);
			padding-inline: 2em;
			font-size: calc(var(--px) * 20);
			font-weight: bold;
			color: #fff;
			text-align: center;
			line-height: 1;
			letter-spacing: 0.1em;
			border-radius: 50vw;
			background: linear-gradient(to right, #70dfa4 0%,#43be7d 100%);
		}
	}

	/* コンテンツ - リスト */
	& .sec-solution__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: calc(var(--px) * 60);
	}

	& .sec-solution__item {
		position: relative;
		width: 100%;
		padding: calc(var(--px) * 30);
		background-color: #fff;
		border-radius: calc(var(--px) * 30);

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			border-radius: calc(var(--px) * 30);
			box-shadow: 0 0 15px 4px #d6d6d6;
		}

		& .sec-solution__item-ttl {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: calc(var(--px) * 50);
			margin-block: calc(var(--px) * 20);
			font-size: calc(var(--px) * 20);
			font-weight: bold;
			text-align: center;
			color: #fff;
			line-height: 1;
			letter-spacing: 0.1em;
			background: linear-gradient(to right, #70dfa4 0%,#43be7d 100%);
		}

		& .sec-solution__item-txt {
			font-size: calc(var(--px) * 16);
			font-weight: 500;
			text-align: center;
			line-height: 2.125;
			left: 0.1em;
		}
	}

	/* 対応可能 */
	& .sec-solution__box {
		& .sec-solution__box-ttl {
			margin-bottom: 0.5em;
			font-size: calc(var(--px) * 26);
			font-weight: bold;
			text-align: center;
			line-height: 1;
			letter-spacing: 0.1em;
		}

		& .sec-solution__box-txt {
			margin-bottom: calc(var(--px) * 55);
			font-size: calc(var(--px) * 16);
			font-weight: 500;
			text-align: center;
			line-height: 1.83;
			letter-spacing: 0.1em;
		}
	}

	/* 対応可能一例 */
	& .sec-solution__pick {
		position: relative;
		display: flex;
		align-items: center;
		border-radius: calc(var(--px) * 20);

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			box-shadow: 0 0 15px 4px #d6d6d6;
			border-radius: calc(var(--px) * 20);
		}

		&:nth-of-type(n + 2) {
			margin-top: calc(var(--px) * 40);
		}

		& .sec-solution__pick-ttl {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 11%;
			min-height: calc(var(--px) * 80);
			font-size: calc(var(--px) * 20);
			font-weight: bold;
			color: #fff;
			text-align: center;
			line-height: 1;
			letter-spacing: 0.1em;
			border-radius: calc(var(--px) * 20) 0 0 calc(var(--px) * 20);
			background-color: #6ede76;

			&.sec-solution__pick-ttl--02 {
				background-color: #53d599;
			}

			&.sec-solution__pick-ttl--03 {
				background-color: #44b5bf;
			}
		}

		& .sec-solution__pick-txt {
			width: 89%;
			padding-left: calc(var(--px) * 25);
			font-size: calc(var(--px) * 16);
			font-weight: bold;
			line-height: 1;
			letter-spacing: 0.1em;

			& span {
				&:nth-of-type(n + 2) {
					margin-left: 1em;
				}
			}
		}
	}
}

@media screen and (max-width: 750px) {
	.sec-solution {
		padding-block: calc(var(--sp) * 140);

		/* コンテンツ */
		& .sec-solution__cont {
			margin-bottom: calc(var(--sp) * 120);

			& .sec-solution__cont-ttl {
				width: 100%;
				max-width: calc(var(--sp) * 600);
				min-height: calc(var(--sp) * 80);
				margin-bottom: calc(var(--sp) * 60);
				padding-block: .6em;
				font-size: calc(var(--sp) * 26);
				line-height: 1.3;
			}

			& .sec-solution__cont-img {
				width: 100%;
				max-width: calc(var(--sp) * 650);
				margin: 0 auto;
			}
		}

		/* コンテンツ - リスト */
		& .sec-solution__list {
			display: grid;
			grid-template-columns: 1fr;
			row-gap: calc(var(--sp) * 60);
			padding-inline: calc(var(--sp) * 55);

		}

		& .sec-solution__item {
			padding: calc(var(--sp) * 30);
			background-color: #fff;
			border-radius: calc(var(--sp) * 30);

			&::after {
				border-radius: calc(var(--sp) * 30);
				box-shadow: 0 0 calc(var(--sp) * 15) calc(var(--sp) * 4) #d6d6d6;
			}

			& .sec-solution__item-ttl {
				min-height: calc(var(--sp) * 60);
				margin-block: calc(var(--sp) * 20);
				font-size: calc(var(--sp) * 24);
			}

			& .sec-solution__item-txt {
				margin-top: .25em;
				font-size: calc(var(--sp) * 24);
				line-height: 1.8;
			}
		}

		/* 対応可能 */
		& .sec-solution__box {
			& .sec-solution__box-ttl {
				margin-bottom: 0.8em;
				font-size: calc(var(--sp) * 34);
			}

			& .sec-solution__box-txt {
				margin-bottom: calc(var(--sp) * 55);
				font-size: calc(var(--sp) * 24);
			}
		}

		/* 対応可能一例 */
		& .sec-solution__pick {
			border-radius: calc(var(--sp) * 20);

			&::after {
				box-shadow: 0 0 calc(var(--sp) * 15) calc(var(--sp) * 4) #d6d6d6;
				border-radius: calc(var(--sp) * 20);
			}

			&:nth-of-type(n + 2) {
				margin-top: calc(var(--sp) * 40);
			}

			& .sec-solution__pick-ttl {
				width: 25.354%;
				min-height: calc(var(--sp) * 300);
				font-size: calc(var(--sp) * 24);
				border-radius: calc(var(--sp) * 20) 0 0 calc(var(--sp) * 20);
			}

			& .sec-solution__pick-txt {
				width: 74.646%;
				padding-left: calc(var(--sp) * 25);
				font-size: calc(var(--sp) * 22);
				line-height: 1.8;

				& span {
					display: block;

					&:nth-of-type(n + 2) {
						margin-left: 0;
					}
				}
			}
		}
	}
}







/*==================================================================================================

	* section04 - SERVICE

==================================================================================================*/
.sec-service {
	padding-block: calc(var(--px) * 120);
	background-color: #cdf1f3;

	& .sec_ttl span {
		color: #51b1b6;

		&::after {
			border-color: #51b1b6;
		}
	}

	& .sec-service__list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		column-gap: calc(var(--px) * 15);
		row-gap: calc(var(--px) * 15);
	}

	& .sec-service__item {
		position: relative;

		& .sec-service__item-name {
			position: absolute;
			bottom: 1.3em;
			left: 0;
			right: 0;
			margin: auto;
			font-size: calc(var(--px) * 16);
			font-weight: 600;
			text-align: center;
			line-height: 1;
			letter-spacing: 0.1em;
		}
	}
}

@media screen and (max-width: 750px) {
	.sec-service {
		padding-block: calc(var(--sp) * 100);

		& .sec-service__list {
			grid-template-columns: repeat(3, 1fr);
			column-gap: calc(var(--sp) * 14);
			row-gap: calc(var(--sp) * 14);
		}

		& .sec-service__item {

			& .sec-service__item-name {
				bottom: 1.1em;
				font-size: calc(var(--sp) * 20);
			}
		}
	}
}







/*==================================================================================================

	* section05 - CLIENT

==================================================================================================*/
.sec-client {
	padding-block: calc(var(--px) * 160);

	& .sec_ttl span {
		color: #f9bb00;

		&::after {
			border-color: #ff7d68;
		}
	}

	& .sec-client__list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		column-gap: calc(var(--px) * 20);
		row-gap: calc(var(--px) * 20);
	}
}

@media screen and (max-width: 750px) {
	.sec-client {
		padding-block: calc(var(--sp) * 120);

		& .sec-client__list {
			grid-template-columns: repeat(3, 1fr);
			column-gap: calc(var(--sp) * 20);
			row-gap: calc(var(--sp) * 20);
		}
	}
}






/*==================================================================================================

	* section06 - FLOW

==================================================================================================*/
.sec-flow {
	padding-block: calc(var(--px) * 120);
	background-color: #fffaf8;

	& .sec_ttl span {
		color: #ff7d68;

		&::after {
			border-color: #ff7d68;
		}
	}

	& .sec-flow__img {
		width: 100%;
		max-width: calc(var(--px) * 1200);
		margin: 0 auto;
	}
}

@media screen and (max-width: 750px) {
	.sec-flow {
		padding-block: calc(var(--sp) * 120);

		& .sec-flow__img {
			max-width: calc(var(--sp) * 582);
		}
	}
}