@charset "UTF-8";
/* CSS Document */





	
	
/* pagetitle
--------------------- */
#pagetitle.strengths {
	background: url("../img/strengths/pagetitle_pht.jpg") no-repeat center / cover;
}
#pagetitle.possibility {
	background: url("../img/possibility/pagetitle_pht.jpg") no-repeat center / cover;
}






	
	
/* strengths-area
--------------------- */
.strengths-area {
	width: 100%;
	padding: 0 0 150px 0;
	overflow: hidden;
}
	.strengths-area .title-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("../img/strengths/text_bg.svg") repeat-x center bottom;
		height: 300px;
		text-align: center;
		position: relative;
	}
	.strengths-area .title-box:before {
		content: "";
		width: 3px;
		height: 40px;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -1.5px;
	}
	.strengths-area .title-box:after {
		content: "";
		width: 3px;
		height: 40px;
		background: #FDCD00;
		position: absolute;
		bottom: -40px;
		left: 50%;
		margin-left: -1.5px;
	}
		.strengths-area .title-box h2 {
			font-size: 5.0rem;
			font-weight: 600;
			line-height: 1.4em;
			margin-bottom: 6px;
		}
		.strengths-area .title-box .en {
			font-size: 2.2rem;
			font-weight: 600;
			line-height: 1;
		}


	.strengths-area .txtbg01:before {
		content: "TOP COMPANY IN THE INDUSTRY　TOP COMPANY IN THE INDUSTRY　TOP COMPANY IN THE INDUSTRY";
		animation: flowimg-left 30s linear infinite;
	}
	.strengths-area .txtbg02:before {
		content: "AEON GROUP COMPANIES　AEON GROUP COMPANIES";
		animation: flowimg-right 30s linear infinite;
	}
	.strengths-area .txtbg03:before {
		content: "INCREASED TRANSACTIONS　INCREASED TRANSACTIONS";
		animation: flowimg-left 30s linear infinite;
	}
	.strengths-area .txtbg04:before {
		content: "HUMAN RESOURCES AND NETWORKS　HUMAN RESOURCES AND NETWORKS";
		animation: flowimg-right 30s linear infinite;
	}
	.strengths-area .txtbg05:before {
		content: "GLOBAL EXPANSION　GLOBAL EXPANSION　GLOBAL EXPANSION";
		animation: flowimg-left 30s linear infinite;
	}
	.strengths-area .txtbg06:before {
		content: "EXPAND A WIDE RANGE OF SERVICES　EXPAND A WIDE RANGE OF SERVICES";
		animation: flowimg-right 30s linear infinite;
	}
	.strengths-area .txtbg07:before {
		content: "BUSINESS STABILITY　BUSINESS STABILITY";
		animation: flowimg-left 30s linear infinite;
	}


	.strengths-area .txtbg01 .txt span {
		font-size: 1.2rem;
	}


	.strengths-area ul.listbox {
		margin-top: 70px;
	}
		.strengths-area ul.listbox li {
			width: 48%;
			border: solid 1px #ddd;
			padding: 60px 20px;
			text-align: center;
			position: relative;
		}
			.strengths-area ul.listbox li dl {
				width: 100%;
				line-height: 1;
				font-weight: 600;
				position: absolute;
				top: -15px;
				left: 0;
			}
				.strengths-area ul.listbox li dl dt {
					display: inline-block;
					font-size: 2.6rem;
					padding: 0 15px;
					background: #fff;
					margin-bottom: 8px;
				}
				.strengths-area ul.listbox li dl dd {
					font-size: 1.2rem;
					letter-spacing: 0;
				}

			.strengths-area ul.listbox li .number {
				font-size: 4.0rem;
				font-weight: 600;
				line-height: 1;
				letter-spacing: 0;
				color: #FDCD00;
			}
				.strengths-area ul.listbox li .number .en {
					font-size: 9.0rem;
				}

			.strengths-area ul.listbox li time {
				display: block;
				padding-top: 10px;
				font-size: 1.2rem;
				line-height: 1;
			}






	
	
/* possibility-area
--------------------- */
.possibility-area {
	width: 100%;
	padding: 150px 0 0 0;
	overflow: hidden;
}
.possibility03 {
	padding: 150px 0;
}
	.possibility-area .text {
		max-width: 1000px;
		margin: 0 auto 60px auto;
	}
		.possibility-area .text h3 {
			font-size: 3.4rem;
			font-weight: 600;
			line-height: 1.4em;
			margin-bottom: 20px;
			padding-left: 40px;
			position: relative;
		}
		.possibility-area .text h3:before {
			content: "";
			width: 30px;
			height: 3px;
			background: #FDCD00;
			position: absolute;
			top: 23px;
			left: 0;
		}


	.possibility-area .pht {
		width: -webkit-calc(100% - 100px);
		width: calc(100% - 100px);
	}
	.possibility02 .pht {
		margin-left: 100px;
	}







/* 1300px */
@media screen and (max-width: 1300px) {






	
	
/* possibility-area
--------------------- */
.possibility-area .pht {
	width: 95%;
}
.possibility02 .pht {
	margin-left: 5%;
}
	

}








/* 1024px */
@media screen and (max-width: 1024px) {






	
	
/* strengths-area
--------------------- */
.strengths-area {
	padding: 0 0 80px 0;
}
	.strengths-area .title-box {
		height: 220px;
	}
	.strengths-area .title-box:before {
		width: 2px;
		height: 30px;
		margin-left: -1px;
	}
	.strengths-area .title-box:after {
		width: 2px;
		height: 30px;
		bottom: -30px;
		margin-left: -1px;
	}
		.strengths-area .title-box h2 {
			font-size: 3.8rem;
		}
		.strengths-area .title-box .en {
			font-size: 1.8rem;
		}


	.strengths-area .txtbg01 .txt span {
		font-size: 1.0rem;
	}


	.strengths-area ul.listbox {
		margin-top: 40px;
	}
		.strengths-area ul.listbox li {
			padding: 40px 10px;
		}
			.strengths-area ul.listbox li dl {
				top: -11px;
			}
				.strengths-area ul.listbox li dl dt {
					font-size: 2.2rem;
					margin-bottom: 6px;
				}
				.strengths-area ul.listbox li dl dd {
					font-size: 1.0rem;
				}

			.strengths-area ul.listbox li .number {
				font-size: 3.0rem;
			}
				.strengths-area ul.listbox li .number .en {
					font-size: 7.0rem;
				}

			.strengths-area ul.listbox li time {
				font-size: 1.0rem;
			}






	
	
/* possibility-area
--------------------- */
.possibility-area {
	padding: 100px 0 0 0;
}
.possibility03 {
	padding: 100px 0;
}
	.possibility-area .text {
		margin: 0 auto 40px auto;
	}
		.possibility-area .text h3 {
			font-size: 3.0rem;
		}
		.possibility-area .text h3:before {
			top: 21px;
		}





}

	







/* max 768px */
@media screen and (max-width: 768px) {






	
	
/* strengths-area
--------------------- */
.strengths-area .title-box {
	height: 170px;
}
.strengths-area .title-box:before {
	height: 20px;
}
.strengths-area .title-box:after {
	height: 20px;
	bottom: -20px;
}
	.strengths-area .title-box h2 {
		font-size: 2.8rem;
		line-height: 1.2em;
		margin-bottom: 8px;
	}
	.strengths-area .title-box .en {
		font-size: 1.4rem;
	}


.strengths-area ul.listbox {
	display: block;
	margin-top: 0;
}
	.strengths-area ul.listbox li {
		width: 100%;
		margin-top: 36px;
		padding: 40px 10px 30px 10px;
	}
		.strengths-area ul.listbox li .number {
			font-size: 2.4rem;
		}
			.strengths-area ul.listbox li .number .en {
				font-size: 6.0rem;
			}






	
	
/* possibility-area
--------------------- */
.possibility-area {
	padding: 80px 0 0 0;
}
.possibility03 {
	padding: 80px 0;
}
	.possibility-area .text {
		margin: 0 auto 30px auto;
	}
		.possibility-area .text h3 {
			font-size: 2.4rem;
			padding-left: 30px;
			margin-bottom: 12px;
		}
		.possibility-area .text h3:before {
			width: 20px;
			top: 15px;
			height: 2px;
		}


}