@charset "utf-8";

#sec_crosstalk .firstContainer::after{
	background-image: url("../img/icon_firstcontainer.svg");
	max-width: 300px;
	width: 25%;
	aspect-ratio: 300/203;
	top: calc(100% - 30%);
	left: 0;
}

#sec_crosstalk .firstContainer .ttl::before{
	background-image: url("../img/p_crosstalk.svg");
	max-width: 220px;
	width: 53%;
	aspect-ratio: 220/138;
	bottom: calc(100% - 10px);
	left: -100px;
}

.container1 .figBox .figure1::after{
	content: "";
	display: block;
	width: 47%;
	max-width: 181px;
	aspect-ratio: 181/142;
	background: url("../img/icon_monitor.svg") no-repeat center / contain;
	position: absolute;
	top: -85px;
	right: -97px;
}

.container1 .figBox .figure3::after{
	content: "";
	display: block;
	width: 36%;
	max-width: 66px;
	aspect-ratio: 1/1;
	background: url("../img/icon_light.svg") no-repeat center / contain;
	position: absolute;
	top: -50px;
	right: 7px;
}

@media screen and (max-width: 1280px){
	#sec_crosstalk .firstContainer .ttl::before{
		max-width: 170px;
		bottom: 100%;
		left: -30px;
	}
	.container1 .figBox .figure1::after{
		max-width: 110px;
		top: -45px;
		right: -7px;
	}
}
@media screen and (max-width: 1024px){
	.container1 .figBox .figure2,
	.container1 .figBox .figure3{
		width: 46%;
	}
	.container1 .figBox .figure3::after{
		max-width: 53px;
		top: -40px;
		right: -6px;
	}
}
@media screen and (max-width: 767px){
	#sec_crosstalk .firstContainer .ttl::before{
		right: calc(100% - 72px);
		left: auto;
		max-width: 125px;
	}
}
@media screen and (max-width: 374px){
	#sec_crosstalk .firstContainer .ttl::before{
		right: calc(100% - 92px);
	}
}

/* ------------------------------------------------------------------------ */

/*  container2

/* ------------------------------------------------------------------------ */

.container2 .figBox{
	justify-content: flex-end;
}
	.container2 .figure1::after{
		content: "";
		display: block;
		width: 49%;
		max-width: 187px;
		aspect-ratio: 187/222;
		background: url("../img/icon_about_03.svg") no-repeat center / contain;
		position: absolute;
		top: 90%;
		left: -100px;
		z-index: 1;
	}
	.container2 .figBox .shadow::before{
		background: #FFED6C;
		top: 10px;
		right: -10px;
		left: auto;
		z-index: -1;
	}

.container2 .figBox .figure1{
	z-index: 10;
}
.container2 .figBox .figure4{
	z-index: 1;
}

@media screen and (max-width: 1200px){
	.container2 .figure1::after{
		left: -15px;
	}
}
@media screen and (max-width: 1024px){
	.container2 .figure1::after{
		max-width: 145px;
		width: 43%;
		z-index: 5;
	}
}
@media screen and (max-width: 880px){
	.container2 .figBox .shadow::before{
		top: 7px;
		right: -7px;
	}
}
/* ------------------------------------------------------------------------ */

/*  container3

/* ------------------------------------------------------------------------ */
.container3{
	padding-top: 135px;
}
	.container3 .figBox figure:first-child::before{
		content: "";
		display: block;
		width: 27%;
		max-width: 103px;
		aspect-ratio: 103/73;
		background: url("../img/icon_talk.svg") no-repeat center / contain;
		position: absolute;
		top: -47px;
		left: -53px;
		z-index: 1;
	}
	.container3 figure:nth-child(2)::before{
		content: "";
		display: block;
		width: 64%;
		max-width: 145px;
		aspect-ratio: 145/91;
		background: url("../img/icon_book.svg") no-repeat center / contain;
		position: absolute;
		top: -32px;
		left: 100%;
		z-index: 1;
	}
	.container3 figure:nth-child(2)::after{
		content: "";
		display: block;
		width: 64%;
		max-width: 46px;
		aspect-ratio: 46/66;
		background: url("../img/icon_star.svg") no-repeat center / contain;
		position: absolute;
		right: -26px;
		bottom: 0;
		z-index: 1;
	}
	.container3 .figBox figure:last-child{
		margin: 0 0 0 auto;
	}
		.container3 figure:last-child::after{
			content: "";
			display: block;
			width: 64%;
			max-width: 80px;
			aspect-ratio: 1/1;
			background: url("../img/icon_memo.svg") no-repeat center / contain;
			position: absolute;
			top: 0;
			right: 120%;
			z-index: 1;
		}

@media screen and (max-width: 880px){
	.container3 {
		padding-top: 60px;
	}
	.container3 .figBox{
		position: relative;
	}
	.container3 .figBox::before{
		content: "";
		display: block;
		width: 64%;
		max-width: 67px;
		aspect-ratio: 67/47;
		background: url("../img/icon_book.svg") no-repeat center / contain;
		position: absolute;
		bottom: -20px;
		left: -8px;
		z-index: 10;
	}
	.container3 .figBox .figure4{
		width: 47%;
	}
	
	.container3 .figBox figure:first-child::before{
		max-width: 82px;
		top: -19px;
		left: 12px;
	}
	.container3 figure:nth-child(2)::before,
	.container3 figure:nth-child(2)::after,
	.container3 figure:last-child::after{
		content: none;
	}
}



/* ------------------------------------------------------------------------ */

/*  imageBox

/* ------------------------------------------------------------------------ */

@media screen and (max-width: 1200px){
	#sec_crosstalk .imageBox figure::before{
		right: 0;
	}
}
@media screen and (max-width: 1024px){
	#sec_crosstalk .imageBox{
		padding: 14.845% 0 12.11%;
	}
	#sec_crosstalk .imageBox figure::before{
		width: 38%;
	}
}
@media screen and (max-width: 880px){
	#sec_crosstalk .imageBox figure::before{
		max-width: 128px;
		bottom: 91.5%;
	}
}




/* ------------------------------------------------------------------------ */

/*  container4

/* ------------------------------------------------------------------------ */
.container4{
	padding-bottom: 49px;
}
	.container4 .figBox{
		padding-bottom: 31%;
		position: relative;
	}
		.container4 .figBox::after{
			content: "";
			display: block;
			width: 99%;
			max-width: 379px;
			aspect-ratio: 379/354;
			background: url("../img/icon_about_02.svg") no-repeat center / contain;
			position: absolute;
			right: -37%;
			bottom: 0;
			z-index: 1;
		}
		.container4 .figBox .shadow::before{
			top: 9px;
			right: -9px;
			left: auto;
		}


@media screen and (max-width: 1200px){
	.container4 .figBox::after{
		right: 0;
	}
}
@media screen and (max-width: 880px){
	.container4{
		padding-bottom: 100px;
	}
	.container4 .figBox{
		justify-content: flex-end;
		padding-bottom: 0;
	}
	.container4 .figBox::after{
		content: none;
	}
	.container4 .figBox figure:last-child::after{
		content: "";
		display: block;
		width: 58%;
		max-width: 200px;
		aspect-ratio: 200/187;
		background: url("../img/icon_about_02.svg") no-repeat center / contain;
		position: absolute;
		left: -30px;
		bottom: calc(100% + -30px);
		z-index: 1;
		transform: scale(-1,1);
	}
}
@media screen and (max-width: 767px){
	.container4{
		padding-bottom: 60px;
	}
}


/* ------------------------------------------------------------------------ */

/*  container5

/* ------------------------------------------------------------------------ */
.container5{
	padding-bottom: 145px;
}
	.container5 .figBox{
		padding-bottom: 8.5%;
		position: relative;
	}
		.container5 .figBox::before{
			content: "";
			display: block;
			width: 99%;
			max-width: 190px;
			aspect-ratio: 190/237;
			background: url("../img/icon_about_04.svg") no-repeat center / contain;
			position: absolute;
			right: 20px;
			bottom: 0;
			z-index: 5;
		}
		.container5 .figBox .shadow::before{
			background: #FFED6C;
		}

@media screen and (max-width: 880px){
	.container5 .figBox{
		justify-content: flex-end;
		padding-bottom: 40px;
	}
	.container5 .figBox::before{
		max-width: 165px;
		width: 48%;
		right: auto;
		left: -15px;
	}
	.container5 .figBox .figure4{
		max-width: 205px;
		width: 61%;
	}
}

@media screen and (max-width: 767px){
	.container5{
		padding-bottom: 60px;
	}
}