@charset "UTF-8";


#Area_services_intro {
	padding: 4em 2em;
	box-sizing: border-box;
}


/* h2 文字色（ブロック毎） */
#Area_services_intro h2 {
	color: #7fa327;
	background: -moz-linear-gradient(left,  #7fa327 0%, #bfb91d 45%, #dbc319 100%);
	background: -webkit-linear-gradient(left,  #7fa327 0%,#bfb91d 45%,#dbc319 100%);
	background: linear-gradient(to right,  #7fa327 0%,#bfb91d 45%,#dbc319 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* h3 span 文字色（ブロック毎） */
#Area_services_intro h3 span {
	color: #7EA528;
	font-weight: bold;}




#Area_services_intro {
	background-image: url("../img/grow-recruit.png");
	background-blend-mode: lighten;

	background-position: top;
	background-size: 100%;
	background-repeat: no-repeat;
}



#Area_services_btn {
	margin-bottom: 5em;
	padding: 0 2em;
	box-sizing: border-box;
}

.Box-each-services-contents {
	padding: 2em 0 3em;
	box-sizing: border-box;
}

#Area_services_2 {
	background: #fff2e9;
	background: -moz-linear-gradient(left,  #fff2e9 0%, #fffbf2 50%, transparent 100%);
	background: -webkit-linear-gradient(left,  #fff2e9 0%,#fffbf2 50%, transparent 100%);
	background: linear-gradient(to right,  #fff2e9 0%,#fffbf2 50%, transparent 100%);
}

#Area_services_4 {
	background-image: url("../img/bg-services-business-salon-SP.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-color: rgba(255,255,255,0.3);
	background-blend-mode: lighten;
}


#Area_services_btn .Bg-services-list-item {
	position: relative;
}
	#Area_services_btn .Bg-services-list-item a {
		display: block;
		position: absolute;
		top: 0;

		width: 100%;
		height: 100%;
	}

#Area_services_btn .Outer-services-list-item {
	position: relative;

	padding:  1em 0;
	border-top: 2px solid #b7b7b7;
	box-sizing: border-box;

	vertical-align: middle;
}

	.Box-each-services-contents .Outer-services-list-item {
		padding: 0 2em;
		box-sizing: border-box;
	}

	.Box-each-services-contents .Outer-services-list-item > img {
		width: 100%;
	}
		.Box-each-services-contents .Outer-services-list-item > img~img {
			margin-top: 2em;
		}


	#Area_services_btn .Bg-services-list-item:nth-child(5) .Outer-services-list-item {
		border-bottom: 2px solid #b7b7b7;
	}

	#Area_services_btn .Outer-services-list-item::before {
		display: block;
        position: absolute;
        right: 0.8em;
        top: 0;
        bottom: 0;

        width: 25px;
        height: 21.25px;

        margin: auto;

        content: "";

    	background-image: url("../img/services-arrow.png");
    	background-size: 125px 21.25px;
    	background-repeat: no-repeat;

    	transform: rotate(270deg);
	}
		#Area_services_btn .Bg-services-list-item:nth-child(1) .Outer-services-list-item::before {
			background-position: 0 0;
		}
		#Area_services_btn .Bg-services-list-item:nth-child(2) .Outer-services-list-item::before {
			background-position: -25px 0;
		}
		#Area_services_btn .Bg-services-list-item:nth-child(3) .Outer-services-list-item::before {
			background-position: -50px 0;
		}
		#Area_services_btn .Bg-services-list-item:nth-child(4) .Outer-services-list-item::before {
			background-position: -75px 0;
		}
		#Area_services_btn .Bg-services-list-item:nth-child(5) .Outer-services-list-item::before {
			background-position: -100px 0;
		}


		.services-icon-title {
			display: flex;

			height: 65px;

			justify-content: flex-start;
		}
		.Box-each-services-contents .services-icon-title {
			height: 75px;

			margin-bottom: 1em;
		}

		.Box-each-services-contents p {
			margin-bottom: 2em;

			font-size: 15px;
			line-height: 2.3;
		}


			.services-icon-title div {
				display: flex;

				margin-left : 2em;

				flex-direction: column;
				justify-content: center;
			}

				.services-icon-title div span {
					display: block;

					font-weight: bold;
				}

				.Box-each-services-contents .services-icon-title div span {
					font-size: 20px;
				}


				.services-icon-title div span.services-name-en {
					margin-bottom: 0.5em;
					padding-bottom: 0.2em;
					box-sizing: border-box;

					font-family: 'Poppins';
					letter-spacing: 1px;
					font-weight: normal;
				}
					.Bg-services-list-item:nth-child(1) .services-name-en,
					#Area_services_1 .services-name-en {
						color: #7c9e25;
						background: -moz-linear-gradient(left,  #7c9e25 0%, #ebc411 100%);
						background: -webkit-linear-gradient(left,  #7c9e25 0%,#ebc411 100%);
						background: linear-gradient(to right,  #7c9e25 0%,#ebc411 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.Bg-services-list-item:nth-child(2) .services-name-en,
					#Area_services_2 .services-name-en {
						color: #fe7f1e;
						background: -moz-linear-gradient(left,  #fe7f1e 0%, #fcb132 100%);
						background: -webkit-linear-gradient(left,  #fe7f1e 0%,#fcb132 100%);
						background: linear-gradient(to right,  #fe7f1e 0%,#fcb132 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.Bg-services-list-item:nth-child(3) .services-name-en,
					#Area_services_3 .services-name-en {
						color: #449eda;
					}
					.Bg-services-list-item:nth-child(4) .services-name-en,
					#Area_services_4 .services-name-en {
						color: #7ea526;
					}
					.Bg-services-list-item:nth-child(5) .services-name-en,
					#Area_services_5 .services-name-en {
						color: #ff758f;
					}


.Box-services-4-img img {
	width: 100%;
}
	.Box-services-4-img img~img {
		margin-top: 1em;
	}




/* ■□■――――――――――――――――■□■
            ＳＰーＰＣ ①
■□■―――――――――――――――――■□■ */
@media screen and (min-width:800px) {

}/* @media screen and (min-width:800px) */



/* ■□■――――――――――――――――■□■
            ＳＰーＰＣ ②
■□■―――――――――――――――――■□■ */
@media screen and (min-width:1000px) {


#Area_services_intro {
	padding: 6em 2em 5em;
}
#Area_services_btn {
	margin-bottom: 0;
	padding: 0 2em 5em;
}

#Area_services_btn .Outer-services-list-item {
	position: relative;

	padding:  1em 0 3em;
	border-top: none;

	vertical-align: middle;
}

	#Area_services_btn .Bg-services-list-item:nth-child(5) .Outer-services-list-item {
		border-bottom: none;
	}

#Area_services_btn .inner-1300box {
	display: flex;

	flex-wrap: no-wrap;
	justify-content: space-between;
	align-items: stretch;
}

#Area_services_btn .Bg-services-list-item {
	flex-basis: 20%;
}

	#Area_services_btn .Outer-services-list-item::before {
        right: 0;
        left: 0;
        bottom: -10em;

        margin: auto;

    	transform: rotate(0deg);
	}

		#Area_services_btn .services-icon-title {
			display: flex;

			height: 100%;

			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

			#Area_services_btn .services-icon-title > img {
				width: 80px;

				margin-bottom: 1em;
			}

			#Area_services_btn  .services-icon-title div {
				margin-left : 0;

				font-size: 15px;
				text-align: center;
			}


.Box-each-services-contents {
	padding-top: 3em;
}


	.Box-each-services-contents .Outer-services-list-item {
		display: flex;

		flex-wrap: no-wrap;
		justify-content: space-between;
		align-content: space-between;
	}
		#Area_services_2 .Outer-services-list-item,
		#Area_services_4 .Outer-services-list-item {
			flex-direction: row-reverse;
		}

		.Box-each-services-contents .Outer-services-list-item > img {
			width: 50%;
			height: 100%;
		}

		#Area_services_1 .Inner-services-list-item,
		#Area_services_3 .Inner-services-list-item,
		#Area_services_5 .Inner-services-list-item {
			margin-right: 2em;
		}
		#Area_services_2 .Inner-services-list-item,
		#Area_services_4 .Inner-services-list-item {
			margin-left: 2em;
		}

			.Box-each-services-contents .services-icon-title {
				margin-bottom: 2em;
			}

				.Box-each-services-contents .services-icon-title div span {
					font-size: 23px;
				}

				.Box-each-services-contents .Inner-services-list-item p {
					font-size: 18px;
				}




#Area_services_4 {
	background-image: url("../img/bg-services-business-salon-PC.png");
	background-size: auto 100%;
	background-position: cover;
}

	#Area_services_4 .Inner-services-list-item {
		flex-basis: 50%;
	}

		.Box-services-4-img {
			width: 50%;
		}




}/* @media screen and (min-width:1000px) */



/* ■□■――――――――――――――――■□■
            ＰＣ
■□■―――――――――――――――――■□■ */
@media screen and (min-width:1000px) {


}/* @media screen and (min-width:1000px) */