@charset "UTF-8";

.is-active#aarea {
	display:none;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	#main {
		display: block;
		padding-top: 64px;
		position: relative;
		overflow: hidden;
	}
	.top {
		width: 100%;
		height: 80vh;
		position: relative;
	}
		.top .txt-area {
			text-align: center;
			width: 100%;
			height: 100%;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.top .txt-area h1{
				font-size: 50px;
				line-height: 1.4;
				font-weight: normal;
				letter-spacing: 0.2em;
			}
			.top .txt-area h2{
				font-size: 26px;
				line-height: 1.4;
				font-weight: normal;
				letter-spacing: 0.2em;
				margin-top: 30px;
			}
			.top .txt-area p{
				font-size: 16px;
				line-height: 2.125;
				font-weight: normal;
				letter-spacing: 0.14em;
				margin-top: 60px;
			}
		.top .img-box {
			position: absolute;
			z-index: -1;
		}
			.top .img-box.ph01 {
				width: 18.8%;
				top: 0;
				right: 35.8%;
			}
			.top .img-box.ph02 {
				width: 35.8%;
				top: 0;
				right: 0;
			}
			.top .img-box.ph03 {
				width: 46%;
				top: 44.5%;
				left: 0;
			}
			.top .img-box.ph04 {
				width: 23.3%;
				bottom: -3.5vw;
				right: 0;
			}
	.sec.people {
		background-color: #f1f1f1;
		position: relative;
		z-index: -10;
		padding-top: 185px;
		padding-bottom: 190px;
	}
		.people ul {
			width: 1040px;
			margin: auto;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
			.people ul li{
				max-width: 325px;
				box-sizing: border-box;
				background-color: #ffffff;
				border: solid 2px #00b176;
				position: relative;
				width: 33.3%;
				margin: auto;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 32px 0 30px;
			}
			.people ul li:nth-child(n + 4){
				margin-top: 50px;
			}
			/*	凹んでる部分*/
			.people ul li:nth-child(3n-1){
				margin-top: 100px;
			}
				.people .num {
					position: absolute;
					top: -25px;
					right: -2px;
					text-align: center;
					width: 120px;
					height: 25px;
					background-color: #00b176;
					color: white;
/*					padding: 0 30px;*/
				}
					.people .num > * {
						display: inline;
					}
					.people .num .img-box {
						max-height: 100%;
					}
						.people .num .img-box img {
							max-height: 100%;
						}
				.people ul li .ph-box {
					padding: 0 30px;
					position: relative;
					text-align: center;
					width: 100%;
/*					padding-top: 20px;*/
				}
					.people ul li .ph-box p{
						position: absolute;
						width: 180px;
						top: 0;
						left: 0;
						right: 0;
						margin: auto;
						font-size: 12px;
					}
					.people ul li .ph-box img{
						max-width: 160px;
					}
				.people li .name-box {
					margin-top: 15px;
					font-weight: 400;
/*					max-width: 170px;*/
					padding: 0 30px;
					text-align: center;
				}
				.people li .txt-box {
					width: 100%;
					box-sizing: border-box;
					padding: 0 30px;
					position: relative;
					margin-top: 30px;
/*					padding-top: 50px;*/
				}
					.people li .txt-box >div{
						position: absolute;
						top: 0;
						left: 0;
						font-size: 16px;
						font-weight: 400;
					}
						.people li .txt-box>div::before{
							content: "";
							display: block;
							width: 35px;
							height: 8px;
							position: absolute;
							top: -8px;
							right: -35px;
						}
					.people li .txt-box p{
						text-align: justify;
						line-break: strict;
						word-wrap: break-word;
						overflow-wrap: break-word;
					}
	
/*	green*/
	.people .green {
		border: solid 2px #00b176;
	}
	.people .green .num {
		background-color: #00b176;
	}
	.people .green .ph-box p{
		color: #00b176;
	}
	.people .green .txt-box  >div::before{
		background-color: #f06400
	}
	.people .green .txt-box >div{
		color: white;
		background-color: #00b176;
		padding: 0 8px 0 32px;
	}
/*	yellow*/
	.people .yellow {
		border: solid 2px #f06400;
	}
	.people .yellow .num {
		background-color: #f06400;
	}
	.people .yellow .ph-box p{
		color: #f06400;
	}
	.people .yellow .txt-box  >div::before{
		background-color: #0a9bcd
	}
	.people .yellow .txt-box >div{
		color: white;
		background-color: #f06400;
		padding: 0 8px 0 32px;
	}
/*	purple*/
	.people .purple {
		border: solid 2px #6e3cbe;
	}
	.people .purple .num {
		background-color: #6e3cbe;
	}
	.people .purple .ph-box p{
		color: #6e3cbe;
	}
	.people .purple .txt-box  >div::before{
		background-color: #00b176
	}
	.people .purple .txt-box>div{
		color: white;
		background-color: #6e3cbe;
		padding: 0 8px 0 32px;
	}
	
	
	
	
	
	
	

			.top .deco01 {
				top: 5%;
				left: 0%;
			}
			.top .deco02 {
				top: 12%;
				left: 0%;
			}
			.top .deco03 {
				top: calc(12% + 28px);
				left: 12vw;
			}
			.top .deco04 {
				top: calc(44.5% + 13.2vw);
				left: 0;
			}
			.top .deco05 {
				bottom: 23px;
				left: 25%;
			}
			.top .deco06 {
				bottom: 3.3vw;
				right: 23.3%;
			}
			.top .deco07 {
				top: calc(47% - 12px);
				right: 12vw;
			}
			.top .deco08 {
				top: 47%;
				right: 0%;
			}
			.people .deco01 {
				top: 0;
				left: 0%;
			}
			.people .deco02 {
				top: 17px;
				left: 7vw;
			}
			.people .deco03 {
				top: 247px;
				left: 0;
			}
			.people .deco04 {
				top: 63%;
				right: 0;
			}
			.people .deco05 {
				bottom: 5%;
				left: 14%;
			}
			.people .deco06 {
				bottom: calc(5% - 12px);
				left: calc(14% - 4vw);
			}
			.people .deco07 {
				bottom: calc(4% + 27px);
				right: 12vw;
			}
			.people .deco08 {
				bottom: 4%;
				right: 0%;
			}
	
/*
			.deco span {
				position: absolute;
				height: 12px;
				top: 0;
				width: 0;
			}
			.deco.m span{
				height: 23px;
			}
			.deco.l span{
				height: 28px;
			}
			.on .deco span {
				width: 0 !important;
			}
*/
			.top .deco01 span {
				left: 0;
				background-color: #00b176;
				transition: 0.3s 0.9s;
			}
			.top .deco02 span {
				right: 0;
				background-color: #f06400;
				transition: 0.3s 1.5s;
			}
			.top .deco03 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.7s;
			}
			.top .deco04 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 2.1s;
			}
			.top .deco05 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 1.3s;
			}
			.top .deco06 span {
				right: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.9s;
			}
			.top .deco07 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.5s;
			}
			.top .deco08 span {
				left: 0;
				background-color: #00b176;
				transition: 0.3s 0.600s;
			}
			.people .deco01 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.9s;
			}
			.people .deco02 span {
				right: 0;
				background-color: #00b176;
				transition: 0.3s 1.5s;
			}
			.people .deco03 span {
				left: 0;
				background-color: #ffffff;
				transition: 0.3s 0.7s;
			}
			.people .deco04 span {
				right: 0;
				background-color: #ffffff;
				transition: 0.3s 2.1s;
			}
			.people .deco05 span {
				left: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.3s;
			}
			.people .deco06 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.9s;
			}
			.people .deco07 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.5s;
			}
			.people .deco08 span {
				left: 0;
				background-color: #00b176;
				transition: 0.3s 0.6s;
			}
	
/*
			.on .deco span {
				width: 100% !important;
			}
*/
/*
			.deco.on span {
				width: 100% !important;
			}
*/
}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	#main {
		display: block;
		padding-top: 64px;
		position: relative;
		overflow: hidden;
	}
	.top {
		width: 100%;
		height: 83vh;
		position: relative;
	}
		.top .txt-area {
			text-align: center;
			width: 100%;
			height: 100%;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.top .txt-area .txt-box{
			margin-bottom: 15px;
		}
			.top .txt-area h1{
				font-size: 24px;
				line-height: 1.4;
				font-weight: normal;
				letter-spacing: 0.2em;
			}
			.top .txt-area h2{
				font-size: 16px;
				line-height: 1.4;
				font-weight: normal;
				letter-spacing: 0.2em;
				margin-top: 8px;
			}
			.top .txt-area p{
/*				font-size: 16px;*/
				line-height: 1.6;
				font-weight: normal;
				letter-spacing: 0.14em;
				margin-top: 22px;
			}
		.top .img-box {
			position: absolute;
			z-index: -1;
		}
			.top .img-box.ph01 {
				width: 26.5%;
				top: 0;
				right: 50%;
			}
			.top .img-box.ph02 {
				width: 50%;
				top: 0;
				right: 0;
			}
			.top .img-box.ph03 {
				width: 50%;
				bottom: 7%;
				left: 0;
			}
			.top .img-box.ph04 {
				width: 40%;
				bottom: -6vw;
				right: 0;
			}
	.sec.people {
		background-color: #f1f1f1;
		position: relative;
		z-index: -10;
		padding-top: 100px;
		padding-bottom: 120px;
	}
		.people ul {
			width: 100%;
			padding: 0 5%;
			box-sizing: border-box;
			margin: auto;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
			.people ul li{
				max-width: 325px;
				box-sizing: border-box;
				background-color: #ffffff;
				border: solid 2px #00b176;
				position: relative;
				margin: auto;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 18px 0 25px;
			}
	.people ul li+li{
		margin-top: 45px;
	}
				.people .num {
					position: absolute;
					top: -25px;
					right: -2px;
					text-align: center;
/*					width: 120px;*/
					height: 25px;
					background-color: #00b176;
					color: white;
					padding: 0 10px;
				}
					.people .num > * {
						display: inline;
					}
					.people .num .img-box {
						max-height: 100%;
					}
						.people .num .img-box img {
							max-height: 100%;
						}
				.people ul li .ph-box {
					padding: 0 30px;
					position: relative;
					text-align: center;
					width: 100%;
					padding-top: 20px;
				}
					.people ul li .ph-box p{
						position: absolute;
						width: 180px;
						top: 0;
						left: 0;
						right: 0;
						margin: auto;
						font-size: 12px;
					}
					.people ul li .ph-box img{
						max-width: 160px;
					}
				.people li .name-box {
					margin-top: 15px;
					font-weight: 400;
/*					letter-spacing: 0.125em;*/
/*					max-width: 170px;*/
					padding: 0 20px;
					text-align: center;
				}
				.people li .txt-box {
					padding: 0 20px;
					position: relative;
					margin-top: 25px;
/*					padding-top: 45px;*/
				}
					.people li .txt-box >div{
						position: absolute;
						top: 0;
						left: 0;
						font-size: 16px;
						font-weight: 400;
					}
						.people li .txt-box>div::before{
							content: "";
							display: block;
							width: 35px;
							height: 8px;
							position: absolute;
							top: -8px;
							right: -35px;
						}
					.people li .txt-box p{
						text-align: justify;
						line-break: strict;
						word-wrap: break-word;
						overflow-wrap: break-word;
					}
	
/*	green*/
	.people .green {
		border: solid 2px #00b176;
	}
	.people .green .num {
		background-color: #00b176;
	}
	.people .green .ph-box p{
		color: #00b176;
	}
	.people .green .txt-box  >div::before{
		background-color: #f06400
	}
	.people .green .txt-box >div{
		color: white;
		background-color: #00b176;
		padding: 0 8px 0 32px;
	}
/*	yellow*/
	.people .yellow {
		border: solid 2px #f06400;
	}
	.people .yellow .num {
		background-color: #f06400;
	}
	.people .yellow .ph-box p{
		color: #f06400;
	}
	.people .yellow .txt-box  >div::before{
		background-color: #0a9bcd
	}
	.people .yellow .txt-box >div{
		color: white;
		background-color: #f06400;
		padding: 0 8px 0 32px;
	}
/*	purple*/
	.people .purple {
		border: solid 2px #6e3cbe;
	}
	.people .purple .num {
		background-color: #6e3cbe;
	}
	.people .purple .ph-box p{
		color: #6e3cbe;
	}
	.people .purple .txt-box  >div::before{
		background-color: #00b176
	}
	.people .purple .txt-box>div{
		color: white;
		background-color: #6e3cbe;
		padding: 0 8px 0 32px;
	}
	
	
	
	


	

			.top .deco01 {
				top: 5%;
				left: 0%;
			}
			.top .deco02 {
				top: 12%;
				left: 0%;
			}
			.top .deco03 {
				top: calc(12% - 12px);
				left: 32vw;
			}
			.top .deco04 {
				bottom: 5%;
				left: 0;
			}
			.top .deco05 {
				bottom: 16px;
				right: 40%;
			}
			.top .deco06 {
				bottom: 55%;
				right: 0;
			}
			.top .deco07 {
				bottom: calc(17% + 12px);
				right: 32vw;
			}
			.top .deco08 {
				bottom: 17%;
				right: 0%;
			}
			.people .deco01 {
				top: 0;
				left: 0%;
			}
			.people .deco02 {
				top: 10px;
				left: 12vw;
			}
			.people .deco03 {
				top: 247px;
				left: -5px;
			}
			.people .deco04 {
				top: 63%;
				right: -5px;
			}
			.people .deco05 {
				bottom: 1.2%;
				left: 14%;
			}
			.people .deco06 {
				bottom: calc(1.2% - 7px);
				left: calc(14% - 7vw);
			}
			.people .deco07 {
				bottom: calc(0.6% + 15px);
				right: 16vw;
			}
			.people .deco08 {
				bottom: 0.6%;
				right: 0%;
			}

				.top .deco01 span {
					left: 0;
					background-color: #00b176;
					transition: 0.3s 0.9s;
				}
				.top .deco02 span {
					right: 0;
					background-color: #f06400;
					transition: 0.3s 1.5s;
				}
				.top .deco03 span {
					left: 0;
					background-color: #f06400;
					transition: 0.3s 0.7s;
				}
				.top .deco04 span {
					right: 0;
					background-color: #0a9bcd;
					transition: 0.3s 2.1s;
				}
				.top .deco05 span {
					left: 0;
					background-color: #f06400;
					transition: 0.3s 1.3s;
				}
				.top .deco06 span {
					right: 0;
					background-color: #6e3cbe;
					transition: 0.3s 1.9s;
				}
				.top .deco07 span {
					left: 0;
					background-color: #f06400;
					transition: 0.3s 0.5s;
				}
				.top .deco08 span {
					left: 0;
					background-color: #00b176;
					transition: 0.3s 0.5s;
				}
				.people .deco01 span {
					left: 0;
					background-color: #f06400;
					transition: 0.3s 0.9s;
				}
				.people .deco02 span {
					right: 0;
					background-color: #00b176;
					transition: 0.3s 1.5s;
				}
				.people .deco03 span {
					left: 0;
					background-color: #ffffff;
					transition: 0.3s 0.7s;
				}
				.people .deco04 span {
					right: 0;
					background-color: #ffffff;
					transition: 0.3s 2.1s;
				}
				.people .deco05 span {
					left: 0;
					background-color: #6e3cbe;
					transition: 0.3s 1.3s;
				}
				.people .deco06 span {
					right: 0;
					background-color: #0a9bcd;
					transition: 0.3s 1.9s;
				}
				.people .deco07 span {
					left: 0;
					background-color: #f06400;
					transition: 0.3s 0.5s;
				}
				.people .deco08 span {
					left: 0;
					background-color: #00b176;
					transition: 0.3s 0.5s;
				}
	
}