@charset "UTF-8";
/* CSS Document */
/* desc01 */
.contentArea .desc01 .inner h1:before {
	content: url("../img/top/about_ttl.svg");
	width: 342px;
}
/* desc02 */
.aboutArea .desc02 .inner {
	padding: 40px 20px 50px;
}
.aboutArea .desc02 .inner .sub_txt {
	padding-bottom: 30px;
}
.aboutArea .desc02 .inner .sub_txt p {
	line-height: 2;
}
.aboutArea .desc02 .inner .constList {

}
.aboutArea .desc02 .inner .constList li {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 15px;
	background-color: #E9E9E9;
	border-radius: 30px 30px 0 0;
}
.aboutArea .desc02 .inner .constList li .left .img {
	height: 234px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 30px 30px 0 0;
}
.aboutArea .desc02 .inner .constList li .left {
	width: 40%;
}
.aboutArea .desc02 .inner .constList li:first-of-type .left .img {
	background-image: url(../img/about/constList01.webp);
}
.aboutArea .desc02 .inner .constList li:nth-of-type(2) .left .img {
	background-image: url(../img/about/constList02.webp);
}
.aboutArea .desc02 .inner .constList li:nth-of-type(3) .left .img {
	background-image: url(../img/about/constList03.webp);
}
.aboutArea .desc02 .inner .constList li:last-of-type .left .img {
	background-image: url(../img/about/constList04.webp);
}
.aboutArea .desc02 .inner .constList li .right {
	width: 60%;
	padding: 0 4rem;
}
.aboutArea .desc02 .inner .constList li .right .txt {
	position: relative;
}
.aboutArea .desc02 .inner .constList li .right .txt:before {
	position: absolute;
	content: "";
	top: -50px;
	width: 100%;
	height: 48px;
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}
.aboutArea .desc02 .inner .constList li:first-of-type .right .txt:before {
	background-image: url(../img/about/number01.webp);
}
.aboutArea .desc02 .inner .constList li:nth-of-type(2) .right .txt:before {
	background-image: url(../img/about/number02.webp);
}
.aboutArea .desc02 .inner .constList li:nth-of-type(3) .right .txt:before {
	background-image: url(../img/about/number03.webp);
}
.aboutArea .desc02 .inner .constList li:last-of-type .right .txt:before {
	background-image: url(../img/about/number04.webp);
}
.aboutArea .desc02 .inner .constList li .right .txt p {
	font-size: 30px;
	font-weight: bold;
	color: #1348B4;
}

/* desc03 */
.aboutArea .desc03 .inner h2 {
	background: linear-gradient(90deg, rgba(0,144,200,1) 0%, rgba(20,67,178,1) 50%, rgba(20,42,76,1) 100%);
	color: #fff;
	font-size: 24px;
	display: inline-block;
	padding: 5px 45px;
	border-radius: 25px;
}
.aboutArea .desc03 .inner {
	padding: 40px 20px 50px;
}
.aboutArea .desc03 .aboutBgArea {
	max-width: 1400px;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 1400px;
	background-image: url(../img/about/about_bg.webp);
}
.aboutArea .desc03 .aboutBgArea .inner {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.aboutArea .desc03 .aboutBgArea .inner .right {
	width: 50%;
	margin: 190px 0 0 auto;
	background-color: #FFF;
	border-radius: 30px;
}
.aboutArea .desc03 .aboutBgArea .inner .left {
	width: 50%;
	margin: 460px auto 0 0;
	background-color: #FFF;
	border-radius: 30px;
}
.aboutArea .desc03 .aboutBgArea .inner .txt {
	padding: 50px 70px;
}
.aboutArea .desc03 .aboutBgArea .inner .txt .txt01 {
	line-height: 2;
}
.aboutArea .desc03 .aboutBgArea .inner .right .txt p.tit {
	padding-bottom: 30px;
	font-size: 24px;
	font-weight: bold;
	color: transparent;
	background-image: linear-gradient(90deg, rgba(0,144,200,1) 0%, rgba(20,67,178,1) 50%, rgba(20,42,76,1) 100%);
	-webkit-background-clip: text;
	line-height: 1.3;
}

/* desc04 */
.aboutArea .desc04 {
	background-color: #E9E9E9;
}
.aboutArea .desc04 .inner {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 70px 20px 150px;
}
.aboutArea .desc04 .inner .left {
	width: 40%;
}
.aboutArea .desc04 .inner .left .img {
	height: 500px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-image: url(../img/about/about_01.webp);
	border-radius: 25px;
}
.aboutArea .desc04 .inner .right {
	width: 60%;
}
.aboutArea .desc04 .inner .right .txt {
	padding: 25px 30px 0;
}
.aboutArea .desc04 .inner .right .txt h2 {
	background: linear-gradient(90deg, rgba(0,144,200,1) 0%, rgba(20,67,178,1) 50%, rgba(20,42,76,1) 100%);
	color: #fff;
	font-size: 24px;
	display: inline-block;
	padding: 5px 45px;
	border-radius: 25px;
	margin-bottom: 20px;
}
.aboutArea .desc04 .inner .right .txt p {
	line-height: 2;
}

@media screen and (max-width: 1000px) {
/* desc01 */
	.contentArea .desc01 .inner h1:before {
		width: 220px;
	}
/* desc02 */
	.aboutArea .desc02 .inner .constList li .right {
    padding: 0 3rem;
	}
	.aboutArea .desc02 .inner .constList li .right .txt p {
		font-size: 24px;
	}
	.aboutArea .desc02 .inner .constList li .right .txt:before {
		top: -40px;
		height: 38px;
	}
	.aboutArea .desc03 .inner h2 {
    font-size: 22px;
	}
	
/* desc03 */
	.aboutArea .desc03 .aboutBgArea {
		background-size: cover;
	}
	.aboutArea .desc03 .aboutBgArea .inner .txt {
    padding: 40px 50px;
	}
	.aboutArea .desc03 .aboutBgArea .inner .right {
		width: 60%;
    margin: 130px 0 0 auto;
	}
	.aboutArea .desc03 .aboutBgArea .inner .right .txt p.tit {
    font-size: 22px;
	}
	.aboutArea .desc03 .aboutBgArea .inner .left {
    width: 60%;
    margin: 250px auto 0 0;
	}
	
/* desc04 */
	.aboutArea .desc04 .inner .right .txt h2 {
    font-size: 22px;
	}
}	

@media screen and (max-width: 767px) {
	/* desc02 */
	.aboutArea .desc02 .inner {
		padding: 0 6vw 40px;
	}
	.aboutArea .desc02 .inner .sub_txt p {
		line-height: inherit;
	}
	.aboutArea .desc02 .inner .constList li .left {
		width: 100%;
	}
	.aboutArea .desc02 .inner .constList li .right {
		width: 100%;
		padding: 0px 2rem;
	}
	.aboutArea .desc02 .inner .constList li .right .txt {
		padding-top: 60px;
		padding-bottom: 25px;
	}
	.aboutArea .desc02 .inner .constList li .right .txt::before {
		top: 30px;
		height: 30px;
	}
	.aboutArea .desc02 .inner .constList li .right .txt p {
		font-size: 22px;
	}
		
	/* desc03 */
	.aboutArea .desc03 .inner {
		padding: 30px 6vw;
	}
	.aboutArea .desc03 .inner h2 {
		font-size: 20px;
	}
	.aboutArea .desc03 .aboutBgArea .inner .txt {
    padding: 30px;
	}
	.aboutArea .desc03 .aboutBgArea .inner .right {
		width: 70%;
    margin: 50px 0 0 auto;
	}
	.aboutArea .desc03 .aboutBgArea .inner .right .txt p.tit {
    font-size: 20px;
	}
	.aboutArea .desc03 .aboutBgArea .inner .left {
		width: 70%;
    margin: 100px auto 0 0;
	}

	/* desc04 */
	.aboutArea .desc04 .inner {
		padding: 60px 6vw;
	}
	.aboutArea .desc04 .inner .left {
		width: 100%;
	}
	.aboutArea .desc04 .inner .left .img {
		height: 350px;
	}
	.aboutArea .desc04 .inner .right {
		width: 100%;
		padding-bottom: 25px;
	}
	.aboutArea .desc04 .inner .right .txt {
		padding: 0;
	}
	.aboutArea .desc04 .inner .right .txt h2 {
		font-size: 20px;
	}
	.aboutArea .desc04 .inner .right .txt p {
		line-height: inherit;
	}
}	

@media screen and (max-width: 600px) {
/* desc01 */
	.contentArea .desc01 .inner h1:before {
		width: 180px;
	}
	
/* desc02 */
	.aboutArea .desc02 .inner .constList li .right {
    padding: 0px 1rem;
	}
	.aboutArea .desc02 .inner .constList li .right .txt p {
    line-height: 1.3;
	}
	
/* desc03 */
	.aboutArea .desc03 .inner h2 {
    padding: 5px 40px;
	}
	.aboutArea .desc03 .aboutBgArea .inner .right,
	.aboutArea .desc03 .aboutBgArea .inner .left {
		width: 100%;
    margin: 30px auto;
	}
}	

@media screen and (max-width: 400px) {
}