/*---------------------------------------------
	h1
---------------------------------------------*/
.h1-box:before{
	background-image: url(../../../_images/company/flow/h1-bg.jpg);
	background-position: left 50%;
}
@supports (background-image: url('image.webp')) {
	.h1-box:before {
		background-image: url(../../../_images/company/flow/h1-bg.webp);
	}
}

/*流れと強み-flow*/
.flow .h1-box h1:before{
	content: "FLOW";
}


/*---------------------------------------------
	コンテンツ一覧
---------------------------------------------*/
main section.main-content .main-box{
	width: 100%;
	max-width: 100%;
	margin-top: 50px;
}

/*----仕事の流れ----*/
.main-box .working-box{
	background-image: url(../../../_images/common/bg-gray-bottom1.jpg);
	background-repeat: no-repeat;
	background-position: center 30%;
	background-size: contain;
	margin: 10px auto 100px;
	opacity: 0;
	animation: fade-move .4s ease forwards;
}
@supports (background-image: url('image.webp')) {
	.main-box .working-box {
		background-image: url(../../../_images/common/bg-gray-bottom1.webp);
	}
}

.main-box .working-box > picture{
	display: block;
	max-width: 1280px;
	margin: 0 auto 80px;
}

/*ステップ横*/
.main-box .working-box .working-step{
	max-width: 1280px;
	margin: auto;
}
.main-box .working-box .working-step h2{
	font-size: 2.6rem;
	letter-spacing: 0.08em;
	background-image: url(../../../_images/company/flow/workingflow-title-bg.gif);
	background-repeat: no-repeat;
	background-position: 320px 50%;
}
.main-box .working-box .working-step .inner{
	display: block;
	padding: 20px 0;
}
.main-box .working-box .working-step .inner img {
	max-width: 2020px;
}


/*----強み----*/
.main-box .strength-box{
	background-image: url(../../../_images/common/bg-gray-bottom2.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	margin: 10px auto 100px;
}
@supports (background-image: url('image.webp')) {
	.main-box .strength-box {
		background-image: url(../../../_images/common/bg-gray-bottom2.webp);
	}
}

/**/
.main-box .strength-box ol.point-list{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px;
	width: 95%;
	max-width: 1280px;
	margin: 80px auto 150px;
	counter-reset: point;
}
.main-box .strength-box ol.point-list > li{
	width: calc((100% / 3) - 35px);
	padding: 10px;
	text-align: center;
	border-radius: 8px;
	position: relative;
	counter-increment: point;
	opacity: 0;
	transition: all .3s ease;
	transform: translateY(20px);
}
.main-box .strength-box ol.point-list > li:before{
	content: counter(point,decimal-leading-zero)".";
	display: block;
	width: fit-content;
	margin: 0 auto 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 3.3rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1em;
	letter-spacing: 0.08em;
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	z-index: 10;
}
.main-box .strength-box ol.point-list > li a{
	display: block;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center 92%;
	padding: 30px 30px 180px;
	border-radius: 8px;
	position: relative;
}
.main-box .strength-box ol.point-list > li a:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top: 33px solid #ccc;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -90px;
	margin: auto;
	transition: all .3s ease;
}
.main-box .strength-box ol.point-list > li p{
	padding-bottom: 5px;
	font-size: 1.1rem;
	font-weight: 600;
	font-style: italic;
	line-height: 1.5em;
	border-bottom: 1px solid #333;
}
.main-box .strength-box ol.point-list > li p span{
	display: block;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.2em;
}
/**/
.main-box .strength-box ol.point-list > li:nth-of-type(1){
	background-color: #ffdada;
	box-shadow: 0 0 5px rgba(255,38,35, 0.3);
}
.main-box .strength-box ol.point-list > li:nth-of-type(1) a{
	box-shadow: 0 0 5px rgba(255,38,35, 0.3);
	background-image: url(../../../_images/company/flow/point01-pict.jpg);
}
.main-box .strength-box ol.point-list > li:nth-of-type(1):before,
.main-box .strength-box ol.point-list > li:nth-of-type(1) p{
	color: #ff2623;
}
.main-box .strength-box ol.point-list > li:nth-of-type(1) a:after{
	border-top-color: #ff2623;
}
/**/
.main-box .strength-box ol.point-list > li:nth-of-type(2){
	background-color: #daebff;
	box-shadow: 0 0 5px rgba(45,114,196, 0.3);
}
.main-box .strength-box ol.point-list > li:nth-of-type(2) a{
	box-shadow: 0 0 5px rgba(45,114,196, 0.3);
	background-image: url(../../../_images/company/flow/point02-pict.jpg);
}
.main-box .strength-box ol.point-list > li:nth-of-type(2):before,
.main-box .strength-box ol.point-list > li:nth-of-type(2) p{
	color: #0e70e5;
}
.main-box .strength-box ol.point-list > li:nth-of-type(2) a:after{
	border-top-color: #0e70e5;
}
/**/
.main-box .strength-box ol.point-list > li:nth-of-type(3){
	background-color: #e7daff;
	box-shadow: 0 0 5px rgba(131,72,240, 0.3);
}
.main-box .strength-box ol.point-list > li:nth-of-type(3) a{
	box-shadow: 0 0 5px rgba(131,72,240, 0.3);
	background-image: url(../../../_images/company/flow/point03-pict.jpg);
}
.main-box .strength-box ol.point-list > li:nth-of-type(3):before,
.main-box .strength-box ol.point-list > li:nth-of-type(3) p{
	color: #8348f0;
}
.main-box .strength-box ol.point-list > li:nth-of-type(3) a:after{
	border-top-color: #8348f0;
}


/*hover*/
.main-box .strength-box ol.point-list > li:hover{
	background-color: #ffb06c ;
}
.main-box .strength-box ol.point-list > li a:hover:after{
	transform: translateY(10px);
}
.main-box .strength-box ol.point-list > li a:hover:after{
	border-top-color: #ff7701 ;
}


/**/
.main-box .strength-box ol.point-list.show > li:nth-of-type(1){
	animation: fade-move .4s ease forwards;
	animation-delay: .1s;
}
.main-box .strength-box ol.point-list.show > li:nth-of-type(2){
	animation: fade-move .4s ease forwards;
	animation-delay: .3s;
}
.main-box .strength-box ol.point-list.show > li:nth-of-type(3){
	animation: fade-move .4s ease forwards;
	animation-delay: .5s;
}

/*----*/
.main-box .strength-box h2{
	display: block;
	max-width: 1280px;
	color: #6e6e6e;
	margin: auto;
	padding: 20px 15px;
	padding-left: 260px;
	font-size: 3rem;
	line-height: 1.5em;
	letter-spacing: 0.08em;
	position: relative;
}
.main-box .strength-box h2:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to bottom, #ff2523 0%, #ff7701 100%);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.main-box .strength-box.show h2:before{
	animation: shrink-width5 .4s ease forwards;
}

.main-box .strength-box h2 span{
	display: block;
	width: fit-content;
	height: fit-content;
	background-image: linear-gradient(to right, #ff7800 0, #ff2323 100%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	font-family: 'Oswald', sans-serif;
	font-size: 2.5rem;
	line-height: 1em;
	letter-spacing: 0.08em;
	padding: 0 30px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

/**/
.main-box .strength-box{
	counter-reset: box;
}
.main-box .strength-box > section{
	background-image: url(../../../_images/common/bg-gray-bottom2.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	margin: 100px auto;
	position: relative;
	counter-increment: box;
}
.main-box .strength-box > section > .inner{
	display: flex;
	width: 95%;
	max-width: 1280px;
	height: auto;
	margin: auto;
	position: relative;
}
.main-box .strength-box > section > .inner:before{
	content: counter(box,decimal-leading-zero)".";
	display: block;
	width: fit-content;
	color: #8a8a8a;
	font-family: 'Oswald', sans-serif;
	font-size: 8.5rem;
	line-height: 1em;
	text-shadow:
	2px  2px 1px #ffffff,
	-2px  2px 1px #ffffff,
	 2px -2px 1px #ffffff,
	-2px -2px 1px #ffffff,
	 2px  0px 1px #ffffff,
	 0px  2px 1px #ffffff,
	-2px  0px 1px #ffffff,
	 0px -2px 1px #ffffff;
	position: absolute;
	top: 0;
}

.main-box .strength-box > section h3{
	display: block;
	width: 50%;
	height: fit-content;
	color: #fff;
	font-size: 3rem;
	line-height: 1.5em;
	letter-spacing: 0.08em;
	position: absolute;
	top: 20%;
}
.main-box .strength-box > section h3 span{
	display: inline-block;
	margin: 10px 0;
	padding: 0 15px;
	opacity: 0;
	word-break: keep-all;
	position: relative;
}
.main-box .strength-box > section h3 span:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	right: 0;
	top: 0;
}

.main-box .strength-box > section .img-text{
	max-width: 1040px;
}
.main-box .strength-box > section picture{
	display: inline-block;
	background-color: #e9ebed;
	border-radius: 20px;
	overflow: hidden;
}
.main-box .strength-box > section:nth-of-type(1) picture{
	padding: 20px;
}
.main-box .strength-box > section .img-text > p{
	margin-top: 10px;
	font-size: 1.6rem;
	line-height: 1.8em;
}


/*奇数コンテンツ*/
.main-box .strength-box > section:nth-of-type(odd){
	background-image: url(../../../_images/common/bg-gray-bottom1.jpg);
}
@supports (background-image: url('image.webp')) {
	.main-box .strength-box > section:nth-of-type(odd){
		background-image: url(../../../_images/common/bg-gray-bottom1.webp);
	}
}
.main-box .strength-box > section:nth-of-type(odd) .inner{
	justify-content: flex-end;
}
.main-box .strength-box > section:nth-of-type(odd) .inner:before{
	left: 0;
}
.main-box .strength-box > section:nth-of-type(odd) h3{
	left: 0;
}

/*偶数コンテンツ*/
.main-box .strength-box > section:nth-of-type(even){
	background-image: url(../../../_images/common/bg-gray-bottom2.jpg);
}
@supports (background-image: url('image.webp')) {
	.main-box .strength-box > section:nth-of-type(even){
		background-image: url(../../../_images/common/bg-gray-bottom2.webp);
	}
}
.main-box .strength-box > section:nth-of-type(even) .inner{
	justify-content: flex-start;
}
.main-box .strength-box > section:nth-of-type(even) .inner:before{
	right: 0;
}
.main-box .strength-box > section:nth-of-type(even) h3{
	right: 0;
	text-align: right;
}

/**/
.main-box .strength-box > section:nth-of-type(1) h3 span{
	background-image: linear-gradient(to right, #ff7800 0, #ff2423 100%);
}
.main-box .strength-box > section:nth-of-type(2) h3 span{
	background-image: linear-gradient(to right, #0ec5f3 0, #0d70e5 100%);
}
.main-box .strength-box > section:nth-of-type(3) h3 span{
	background-image: linear-gradient(to right, #f0489b 0, #8348f0 100%);
}


/**/
.main-box .strength-box > section.show h3 span{
	animation: fade-in .4s ease forwards;
}
.main-box .strength-box > section.show h3 span:nth-of-type(1){
	animation-delay: .1s;
}
.main-box .strength-box > section.show h3 span:nth-of-type(2){
	animation-delay: .3s;
}
.main-box .strength-box > section.show h3 span:nth-of-type(3){
	animation-delay: .5s;
}

.main-box .strength-box > section.show h3 span:before{
	animation: shrink-width .4s ease forwards;
}
.main-box .strength-box > section.show h3 span:nth-of-type(1):before{
	animation-delay: .6s;
}
.main-box .strength-box > section.show h3 span:nth-of-type(2):before{
	animation-delay: .7s;
}
.main-box .strength-box > section.show h3 span:nth-of-type(3):before{
	animation-delay: .8s;
}



@media screen and ( max-width: 1200px ){
	/*----仕事の流れ----*/
	.main-box .working-box > picture{
		width: 95%;
	}

	/*ステップ横*/
	.main-box .working-box .working-step{
		width: 95%;
	}
	.main-box .working-box .working-step h2{
		background-position: right 50%;
	}
	.main-box .working-box .working-step h2 span{
		display: inline-block;
		background-image: linear-gradient(to right, #fff 90%, transparent 100%);
		padding-right: 15px;
	}


	/*----強み----*/
	/**/
	.main-box .strength-box ol.point-list{
		gap: 30px;
		margin: 60px auto 140px;
	}
	.main-box .strength-box ol.point-list > li{
		width: calc((100% / 3) - 20px);
	}
	.main-box .strength-box ol.point-list > li:before{
		font-size: 3.2rem;
		top: -20px;
	}
	.main-box .strength-box ol.point-list > li a{
		background-position: center 92%;
		padding: 30px 20px 180px;
	}
	.main-box .strength-box ol.point-list > li p{
		font-size: 1.05rem;
	}
	.main-box .strength-box ol.point-list > li p span{
		font-size: 2.2rem;
	}

	/**/
	.main-box .strength-box h2{
		width: 95%;
		padding-left: 240px;
		font-size: 2.8rem;
	}
	.main-box .strength-box h2 span{
		font-size: 2.3rem;
	}
	
	
	/**/
	.main-box .strength-box > section{
		margin: 100px auto;
	}
	.main-box .strength-box > section > .inner:before{
		font-size: 8rem;
	}
	
	.main-box .strength-box > section h3{
		font-size: 2.7rem;
	}

	.main-box .strength-box > section .img-text{
		width: 90%;
	}
	.main-box .strength-box > section .img-text > p{
		font-size: 1.6rem;
		line-height: 1.8em;
	}

}


@media screen and ( max-width: 1000px ){
	/*----仕事の流れ----*/
	.main-box .working-box{
		margin-bottom: 80px;
	}
	/*ステップ横*/
	.main-box .working-box .working-step h2{
		background-size: auto 80%;
		font-size: 2.4rem;
	}
	.main-box .working-box .working-step .inner img {
		max-width: 1800px;
	}

	/*----強み----*/
	/**/
	.main-box .strength-box ol.point-list{
		gap: 20px;
		margin: 50px auto 110px;
	}
	.main-box .strength-box ol.point-list > li{
		width: calc((100% / 3) - 10px);
	}
	.main-box .strength-box ol.point-list > li:before{
		font-size: 3.0rem;
		top: -18px;
	}
	.main-box .strength-box ol.point-list > li a{
		background-position: center 92%;
		background-size: auto 120px;
		padding: 30px 10px 140px;
	}
	.main-box .strength-box ol.point-list > li a:after{
		border: 25px solid transparent;
		border-top: 28px solid #ccc;
		bottom: -80px;
	}
	.main-box .strength-box ol.point-list > li p{
		font-size: 1rem;
	}
	.main-box .strength-box ol.point-list > li p span{
		font-size: 1.8rem;
	}

	/**/
	.main-box .strength-box h2{
		padding: 15px 15px;
		padding-left: 240px;
		font-size: 2.4rem;
	}
	.main-box .strength-box h2 span{
		font-size: 2.2rem;
	}
	
	/**/
	.main-box .strength-box > section{
		margin: 80px auto;
	}
	.main-box .strength-box > section > .inner:before{
		font-size: 6rem;
		top: 3%;
	}
	
	.main-box .strength-box > section h3{
		width: 70%;
		max-width: 700px;
		font-size: 2.5rem;
		top: 22%;
	}
	.main-box .strength-box > section h3 span{
		margin: 5px 0;
	}

	.main-box .strength-box > section .img-text{
		width: 90%;
	}
	.main-box .strength-box > section .img-text > p{
		font-size: 1.4rem;
		line-height: 1.7em;
	}
}


@media screen and ( max-width: 810px ){
	/*----仕事の流れ----*/
	.main-box .working-box{
		margin-bottom: 60px;
	}
	/*ステップ横*/
	.main-box .working-box .working-step .inner img {
		max-width: 1800px;
	}

	.main-box .working-box .working-step h2{
		font-size: 2.0rem;
	}
	.main-box .working-box .working-step .inner img {
		max-width: 1600px;
	}


	/*----強み----*/
	/**/
	.main-box .strength-box ol.point-list{
		gap: 15px;
		margin: 40px auto 100px;
	}
	.main-box .strength-box ol.point-list > li{
		width: calc((100% / 3) - 10px);
		padding: 6px;
	}
	.main-box .strength-box ol.point-list > li:before{
		font-size: 2.5rem;
		top: -13px;
	}
	.main-box .strength-box ol.point-list > li a{
		background-position: center 92%;
		background-size: auto 80px;
		padding: 30px 10px 100px;
	}
	.main-box .strength-box ol.point-list > li a:after{
		border: 20px solid transparent;
		border-top: 23px solid #ccc;
		bottom: -65px;
	}
	.main-box .strength-box ol.point-list > li p{
		font-size: 0.85rem;
	}
	.main-box .strength-box ol.point-list > li p span{
		font-size: 1.25rem;
	}
	.main-box .strength-box ol.point-list > li p span br{
		display: none;
	}

	/**/
	.main-box .strength-box h2{
		padding: 10px 15px;
		font-size: 2.0rem;
	}
	.main-box .strength-box h2 span{
		margin: 0 0 5px;
		padding: 0;
		font-size: 1.8rem;
		position: static;
	}
	
	/**/
	.main-box .strength-box > section{
		margin: 50px auto;
	}
	.main-box .strength-box > section > .inner:before{
		font-size: 3.5rem;
		top: 0;
	}
	
	.main-box .strength-box > section h3{
		width: 95%;
		max-width: 400px;
		font-size: 1.7rem;
		top: 15%;
	}
	.main-box .strength-box > section h3 span{
		margin: 3px 0;
	}

	.main-box .strength-box > section .img-text{
		width: 90%;
	}
	.main-box .strength-box > section .img-text > p{
		font-size: 1.2rem;
		line-height: 1.7em;
	}
}


@media screen and ( max-width: 480px ){
	/*----仕事の流れ----*/
	.main-box .working-box{
		margin-bottom: 50px;
	}
	/*ステップ横*/
	.main-box .working-box .working-step h2{
		font-size: 1.8rem;
	}
	.main-box .working-box .working-step .inner img {
		max-width: 1300px;
	}

	/*----強み----*/
	/**/
	.main-box .strength-box ol.point-list{
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 30px;
		margin: 30px auto 80px;
	}
	.main-box .strength-box ol.point-list > li{
		width: 95%;
		padding: 5px;
	}
	.main-box .strength-box ol.point-list > li:before{
		font-size: 2.3rem;
		top: -10px;
	}
	.main-box .strength-box ol.point-list > li a{
		background-position: 98% 50%;
		background-size: 100px auto;
		padding: 30px 110px 10px 10px;
	}
	.main-box .strength-box ol.point-list > li a:after{
		border: 15px solid transparent;
		border-top: 18px solid #ccc;
		left: auto;
		right: -25px;
		top: 15px;
		bottom: 0;
	}

	/**/
	.main-box .strength-box h2{
		padding: 5px 15px;
		font-size: 1.8rem;
	}
	.main-box .strength-box h2 span{
		font-size: 1.6rem;
	}
	
	/**/
	.main-box .strength-box > section{
		margin: 50px auto;
	}
	.main-box .strength-box > section .inner{
		padding-top: 5%;
	}
	.main-box .strength-box > section > .inner:before{
		font-size: 2.8rem;
		top: 4%;
	}
	
	.main-box .strength-box > section h3{
		width: 95%;
		max-width: 350px;
		font-size: 1.3rem;
		top: 18%;
	}
	.main-box .strength-box > section h3 span{
		margin: 2px 0;
	}
	.main-box .strength-box > section .img-text{
		width: 90%;
	}
	.main-box .strength-box > section .img-text > p{
		font-size: 1rem;
		line-height: 1.7em;
	}
	.main-box .strength-box > section:nth-of-type(1) picture{
		padding: 10px;
	}
}