@charset "UTF-8";

#Area_about_us {
	padding: 6em 2em;
	box-sizing: border-box;
}

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

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



/* ボタン（ブロック毎） */
.btn-readmore-1,
.btn-readmore-2 {
	display: block;
	position: relative;

	width: 100%;
	max-width: 430px;

	margin: 1em auto 0;
	padding: 1.3em 0;
	box-sizing: border-box;

	font-family: 'Poppins';
	color: #fafafa;
	letter-spacing: 3px;
	text-align: center;

	box-shadow: 4px 4px 4px #999;
}
	.btn-readmore-1 {
		background: #ff911e;
		background: -moz-linear-gradient(left,  #ff911e 0%, #f7be15 100%);
		background: -webkit-linear-gradient(left,  #ff911e 0%,#f7be15 100%);
		background: linear-gradient(to right,  #ff911e 0%,#f7be15 100%);
	}
	.btn-readmore-2 {
		background: #80a426;
		background: -moz-linear-gradient(left,  #80a426 0%, #d4c218 100%);
		background: -webkit-linear-gradient(left,  #80a426 0%,#d4c218 100%);
		background: linear-gradient(to right,  #80a426 0%,#d4c218 100%);
	}

		.btn-readmore-1:hover::before,
		.btn-readmore-2:hover::before {
			display: block;
			position: absolute;
			top: 2px;
			left: 2px;

			width: calc(100% - 4px);
			height: calc(100% - 4px);

			background-color: #fff;

			content: "READ MORE";
			line-height: 3.3em;
		}
			.btn-readmore-1:hover::before {
				color: #ff8e1e;
			}
			.btn-readmore-2:hover::before {
				color: #7fa426;
			}


/* h2 文字色（ブロック毎） */
#Area_about_us h2 {
	color: #ff911e;
	background: -moz-linear-gradient(left,  #ff911e 0%, #f7be15 100%);
	background: -webkit-linear-gradient(left,  #ff911e 0%,#f7be15 100%);
	background: linear-gradient(to right,  #ff911e 0%,#f7be15 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#Area_services h2 {
	color: #7ea526;
	background: -moz-linear-gradient(left,  #7ea526 0%, #abb521 100%);
	background: -webkit-linear-gradient(left,  #7ea526 0%,#abb521 100%);
	background: linear-gradient(to right,  #7ea526 0%,#abb521 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#Area_recruit h2 {
	color: #86a724;
	background: -moz-linear-gradient(left,  #86a724 0%, #c1bb1d 100%);
	background: -webkit-linear-gradient(left,  #86a724 0%,#c1bb1d 100%);
	background: linear-gradient(to right,  #86a724 0%,#c1bb1d 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


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


/* キャッチコピー画像（ブロック毎） */
#Area_about_us > img,
#Area_recruit .Inner-recruit > img {
	display: block;

	width: 100%;

	margin: 0 auto 2em;
}



/* 背景画像（ブロック毎） */
#Area_about_us,
#Area_recruit {
	background-size: cover;
	background-position: center center;
	background-blend-mode: lighten;
}
	#Area_about_us {
		background-image: url("../img/bg-index-aboutus.jpg");
		background-color: rgba(255,255,255,0.8);
	}
	#Area_recruit {
		background-image: url("../img/bg-index-recruit.png");
		background-color: rgba(255,255,255,0.6);
	}


/* メインビジュアルのアニメーション */
#img_index_mainvisual_text01,
#img_index_mainvisual_text02,
#img_index_mainvisual_text03 {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	width: 390px;

	margin: auto;

	z-index: 1;
}
	#img_index_mainvisual_text01 {
		animation: catchA 0.3s linear;
		animation-fill-mode: forwards;
	}

	#img_index_mainvisual_text02,
	#img_index_mainvisual_text03 {
		top: -200px;

		opacity: 0;

		animation: catchB 0.2s linear;
		animation-delay: 0.3s;
		animation-fill-mode: forwards;
	}
		#img_index_mainvisual_text03 {
			top: -50px;

			animation-delay: 0.5s;
		}

#Box_index_mainvisual_text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	margin: auto;

	opacity: 0;

	animation: text 1s linear;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;

	z-index: 1;
}


@keyframes catchA {
	0%
	{
		top: -410px;
		opacity: 0;
	}
	100%
	{
		top: -345px;
		opacity: 1;
	}
}
@keyframes catchB {
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@keyframes text {
	0%
	{
		top: 400px;
		opacity: 0;
	}
	100%
	{
		top: 420px;
		opacity: 1;
	}
}


#Box_index_mainvisual_bg {
	opacity: 0;

	animation: allBg 0.2s linear;
	animation-delay: 1.8s;
	animation-fill-mode: forwards;
}
@keyframes allBg {
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}


.Outer-square,
.Outer-circle,
.Outer-triangle {
	position: absolute;
}
	.Inner-square,
	.Inner-circle,
	.Inner-triangle {
		width: calc(100% - 3px);
		height: calc(100% - 3px);

		margin-top: 1.5px;
		margin-left: 1.5px;

		background-color: #fff;
	}
		.Outer-circle,
		.Inner-circle {
			border-radius: 50%;
			background-color: transparent;
		}


	.index-anime-parts-01 {
		left: 23%;
		bottom: 38%;

		width: 120px;
		height: 120px;

		background-color: #ff911e;
		background: -moz-linear-gradient(left,  #ff911e 0%, #f7be15 100%);
		background: -webkit-linear-gradient(left,  #ff911e 0%,#f7be15 100%);
		background: linear-gradient(to right,  #ff911e 0%,#f7be15 100%);

		z-index: -1;
		animation: rotate01 3s linear infinite, blink 3s linear infinite;
	}

	.index-anime-parts-02 {
		top: 25%;
		left: 68%;

		width: calc(80px * 1); /* width, height の左辺を同じ数値にすれば正三角形 */
		height: calc(80px * 0.86); /* width, height の左辺を同じ数値にすれば正三角形 */

		background: #80a426;
		background: -moz-linear-gradient(left,  #80a426 0%, #d4c218 100%);
		background: -webkit-linear-gradient(left,  #80a426 0%,#d4c218 100%);
		background: linear-gradient(to right,  #80a426 0%,#d4c218 100%);

		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		transform-origin: center 65%;

		z-index: -1;
		animation: rotate02 5s linear infinite, blink 5s linear infinite;
	}
		.index-anime-parts-02 .Inner-triangle {
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		}

	.index-anime-parts-03 {
		right: -10%;
		bottom: -2%;

		width: 180px;
		height: 180px;

	    border: 2px solid #ff768d;

		z-index: -1;
		animation: blink 3s linear infinite;
	}

	.index-anime-parts-04 {
		top: 0%;
		right: -25%;

		width: calc(200px * 1); /* width, height の左辺を同じ数値にすれば正三角形 */
		height: calc(200px * 0.86); /* width, height の左辺を同じ数値にすれば正三角形 */

		background: #49a2da;
		background: -moz-linear-gradient(left,  #49a2da 0%, #8cb9da 50%, #b0c5d8 100%);
		background: -webkit-linear-gradient(left,  #49a2da 0%,#8cb9da 50%,#b0c5d8 100%);
		background: linear-gradient(to right,  #49a2da 0%,#8cb9da 50%,#b0c5d8 100%);

		clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		transform-origin: center 65%;

		z-index: -1;
		transform: rotate(40deg);
		animation: blink 7s linear infinite;
	}
		.index-anime-parts-04 .Inner-triangle {
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		}

	.index-anime-parts-05 {
		left: 8%;
		bottom: 55%;

		width: 100px;
		height: 100px;

		background: #80a426;
		background: -moz-linear-gradient(left,  #80a426 0%, #d4c218 100%);
		background: -webkit-linear-gradient(left,  #80a426 0%,#d4c218 100%);
		background: linear-gradient(to right,  #80a426 0%,#d4c218 100%);

		z-index: -1;
		animation: blink 2s linear infinite;
	}
		.index-anime-parts-05 .Inner-circle {
			width: calc(100% - 2px);
			height: calc(100% - 2px);

			margin-top: 1px;
			margin-left: 1px;

			background-color: #fff;
		}

	.index-anime-parts-06 {
		left: -10%;
		bottom: 15%;

		width: 90px;
		height: 90px;

		background: #49a2da;
		background: -moz-linear-gradient(left,  #49a2da 0%, #8cb9da 50%, #b0c5d8 100%);
		background: -webkit-linear-gradient(left,  #49a2da 0%,#8cb9da 50%,#b0c5d8 100%);
		background: linear-gradient(to right,  #49a2da 0%,#8cb9da 50%,#b0c5d8 100%);

		z-index: -1;
		transform: rotate(40deg);
		animation: blink 8s linear infinite;
	}

		.index-anime-parts-01,
		.index-anime-parts-02,
		.index-anime-parts-03,
		.index-anime-parts-04,
		.index-anime-parts-05,
		.index-anime-parts-06 {
			animation-delay: 1.5s;
		}



@keyframes rotate01 {
	0%
	{
		transform: rotate(0deg);
	}
	25%
	{
		transform: rotate(0deg);
	}
	50%
	{
		transform: rotate(180deg);
	}
	65%
	{
		transform: rotate(-60deg);
	}
	90%
	{
		transform: rotate(540deg);
	}
	100%
	{
		transform: rotate(630deg);
	}
}
@keyframes rotate02 {
	0%
	{
		transform: rotate(0deg);
	}
	20%
	{
		transform: rotate(-90deg);
	}
	40%
	{
		transform: rotate(-90deg);
	}
	65%
	{
		transform: rotate(60deg);
	}
	90%
	{
		transform: rotate(-540deg);
	}
	100%
	{
		transform: rotate(-720deg);
	}
}
@keyframes blink {
	0%
	{
		opacity: 1;
	}
	10%
	{
		opacity: 0;
	}
	20%
	{
		opacity: 1;
	}
	30%
	{
		opacity: 0;
	}
	40%
	{
		opacity: 1;
	}
	50%
	{
		opacity: 1;
	}
	75%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}






#services_list {
	margin-top: 2em;
}

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

		width: 100%;
		height: 100%;
	}

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

	padding:  2.2em 1.5em;
	border: 2px solid transparent;
	box-sizing: border-box;
}
	.Outer-services-list-item::before,
	.Outer-services-list-item::after {
        display: block;
        position: absolute;

       	height: 2px;

        background-color: #545448;

        content: "";
	}
		.Outer-services-list-item::before {
            right: 1em;
	        bottom: 1.5em;

            width: 3em;
		}
		.Outer-services-list-item::after {
	        right: 0.8em;
	        bottom: 1.8em;

	        width: 1em;
	        transform: rotate(45deg);
		}
			.Bg-services-list-item:nth-child(1) .Outer-services-list-item::before,
			.Bg-services-list-item:nth-child(1) .Outer-services-list-item::after {
		        background-color: #9eb54f;
			}
			.Bg-services-list-item:nth-child(2) .Outer-services-list-item::before,
			.Bg-services-list-item:nth-child(2) .Outer-services-list-item::after {
		        background-color: #ff801e;
			}
			.Bg-services-list-item:nth-child(3) .Outer-services-list-item::before,
			.Bg-services-list-item:nth-child(3) .Outer-services-list-item::after {
		        background-color: #449eda;
			}
			.Bg-services-list-item:nth-child(4) .Outer-services-list-item::before,
			.Bg-services-list-item:nth-child(4) .Outer-services-list-item::after {
		        background-color: #7fa426;
			}
			.Bg-services-list-item:nth-child(5) .Outer-services-list-item::before,
			.Bg-services-list-item:nth-child(5) .Outer-services-list-item::after {
		        background-color: #ff768d;
			}

	.Bg-services-list-item:nth-child(1) .Outer-services-list-item {
		border-color: #bed092;
		border-bottom-width: 1px;
	}
	.Bg-services-list-item:nth-child(2) .Outer-services-list-item {
		border-color: #fbc57d;
		border-top-width: 1px;
		border-bottom-width: 1px;
	}
	.Bg-services-list-item:nth-child(3) .Outer-services-list-item {
		border-color: #98caeb;
		border-top-width: 1px;
		border-bottom-width: 1px;
	}
	.Bg-services-list-item:nth-child(4) .Outer-services-list-item {
		border-color: #b7cd85;
		border-top-width: 1px;
		border-bottom-width: 1px;
	}
	.Bg-services-list-item:nth-child(5) .Outer-services-list-item {
		border-color: #feb4c1;
		border-top-width: 1px;
	}

	.Bg-services-list-item:nth-child(1):hover .Outer-services-list-item {
		background: #ecf1df;
		background: -moz-linear-gradient(left,  #ecf1df 0%, #fcf7dc 100%);
		background: -webkit-linear-gradient(left,  #ecf1df 0%,#fcf7dc 100%);
		background: linear-gradient(to right,  #ecf1df 0%,#fcf7dc 100%);
	}
	.Bg-services-list-item:nth-child(2):hover .Outer-services-list-item {
		background: #ffecdd;
		background: -moz-linear-gradient(left,  #ffecdd 0%, #fdf7dc 100%);
		background: -webkit-linear-gradient(left,  #ffecdd 0%,#fdf7dc 100%);
		background: linear-gradient(to right,  #ffecdd 0%,#fdf7dc 100%);
	}
	.Bg-services-list-item:nth-child(3):hover .Outer-services-list-item {
		background-color: #f1f8fc;
	}
	.Bg-services-list-item:nth-child(4):hover .Outer-services-list-item {
		background-color: #f5f8ee;
	}
	.Bg-services-list-item:nth-child(5):hover .Outer-services-list-item {
		background-color: #fff5f6;
	}

		.Inner-services-list-item > p {
			text-align: center;
			line-height: 2;
		}

		.services-icon-title {
			display: flex;

			height: 100px;

			margin-bottom: 1em;

			justify-content: center;
		}

			.services-icon-title > img {
				width: 90px;
			}

			.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;
				}

				.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 {
						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 {
						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 {
						color: #449eda;
					}
					.Bg-services-list-item:nth-child(4) .services-name-en {
						color: #7ea526;
					}
					.Bg-services-list-item:nth-child(5) .services-name-en {
						color: #ff758f;
					}


#Area_recruit .Inner-recruit {
	width: 100%;

	padding: 1.5em 2em;
	box-sizing: border-box;

	background-color: rgba(255, 255, 255, 0.7);
}

	#Area_recruit .Inner-recruit img {
		width: 100%;
	}





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

#Area_about_us > img,
#Area_recruit .Inner-recruit > img {
	width: 538px;
}

	.index-anime-parts-01 {
		width: 150px;
		height: 150px;
	}

	.index-anime-parts-02 {
		width: calc(100px * 1); /* width, height の左辺を同じ数値にすれば正三角形 */
		height: calc(100px * 0.86); /* width, height の左辺を同じ数値にすれば正三角形 */
	}

	.index-anime-parts-03 {
		width: 210px;
		height: 210px;
	}

	.index-anime-parts-04 {
		right: -11%;
	}

	.index-anime-parts-05 {
		width: 120px;
		height: 120px;
	}

	.index-anime-parts-06 {
		left: -4%;
	}







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



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

#services_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

	.Bg-services-list-item:nth-child(1),
	.Bg-services-list-item:nth-child(2) {
		flex-basis: 50%;
	}
	.Bg-services-list-item:nth-child(3),
	.Bg-services-list-item:nth-child(4),
	.Bg-services-list-item:nth-child(5) {
		flex-basis: 33.33333%;
	}

		.Outer-services-list-item {
			height: 100%;
		}

		.Bg-services-list-item:nth-child(1) .Outer-services-list-item {
			border-right-width: 1px;
			border-bottom-width: 1px;
		}
		.Bg-services-list-item:nth-child(2) .Outer-services-list-item {
			border-left-width: 1px;
			border-bottom-width: 1px;
		}
		.Bg-services-list-item:nth-child(3) .Outer-services-list-item {
			border-top-width: 1px;
			border-right-width: 1px;
		}
		.Bg-services-list-item:nth-child(4) .Outer-services-list-item {
			border-top-width: 1px;
			border-left-width: 1px;
			border-right-width: 1px;
		}
		.Bg-services-list-item:nth-child(5) .Outer-services-list-item {
			border-top-width: 1px;
			border-left-width: 1px;
		}

			.Bg-services-list-item:nth-child(3) .Inner-services-list-item,
			.Bg-services-list-item:nth-child(4) .Inner-services-list-item,
			.Bg-services-list-item:nth-child(5) .Inner-services-list-item {
				font-size: 16px;
			}

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



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

#img_index_mainvisual_text02,
#img_index_mainvisual_text03 {
	top: -305px;
}
	#img_index_mainvisual_text03 {
		top: -155px;
	}

@keyframes catchA {
	0%
	{
		top: -515px;
		opacity: 0;
	}
	100%
	{
		top: -450px;
		opacity: 1;
	}
}
@keyframes catchB {
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@keyframes text {
	0%
	{
		top: 420px;
		opacity: 0;
	}
	100%
	{
		top: 490px;
		opacity: 1;
	}
}



.index-anime-parts-01 {
	width: 180px;
	height: 180px;
}

.index-anime-parts-02 {
	width: calc(130px * 1); /* width, height の左辺を同じ数値にすれば正三角形 */
	height: calc(130px * 0.86); /* width, height の左辺を同じ数値にすれば正三角形 */
}

.index-anime-parts-03 {
	right: 3%;

	width: 240px;
	height: 240px;
}

.index-anime-parts-04 {
	top: 5%;
	right: -6%;
}

.index-anime-parts-05 {
	width: 150px;
	height: 150px;
}

.index-anime-parts-06 {
	left: -1%;

	width: 130px;
	height: 130px;
}

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