/* -----------------------------------------------------------
    aboutus
-------------------------------------------------------------- */

#aboutus .about-area {
	text-align: center;
	padding: 70px 0 0;
}

#aboutus .about-area .t-txt {
	padding: 0 0 55px;
}

#aboutus .about-area .point-box {
	display: flex;
	justify-content: space-between;
}

#aboutus .about-area .point-box li {
	border-right: #fff solid 2px;
	padding: 50px 20px 45px;
	width: 100%;
}

#aboutus .about-area .point-box .point-01 {
	background-color: #f7fafb;
}

#aboutus .about-area .point-box .point-02 {
	background-color: #ecf7fb;
}

#aboutus .about-area .point-box .point-03 {
	background-color: #e5f7fd;
	border-right: none;
}

#aboutus .about-area .point-box li .icon {
	/*
	background: #fff;
	min-height: 200px;
	border-radius: 20px;
	position: relative;
	max-width: 325px;
	margin: 0 auto;
	*/
	text-align: center;
	position: relative;
}
#aboutus .about-area .point-box li .icon img {
	width: 100%;
	max-width: 600px;
	border-radius: 20px;
}
/*
#aboutus .about-area .point-box li .icon img {
	width: 90px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	right: 0;
}
#aboutus .about-area .point-box .point-03 .icon img {
	width: 44px;
}
*/

#aboutus .about-area .point-box li .icon::before {
	color: #00b050;
	font-family: 'Quicksand', sans-serif;
	font-weight: bold;
	font-size: 2.0rem;
	letter-spacing: 0.1em;
	position: absolute;
	bottom: -8px;
	left: 50%;
    transform: translate(-50% , 0);
	border-radius: 50px;
}

#aboutus .about-area .point-box .point-01 .icon::before {
	content: "01";
}

#aboutus .about-area .point-box .point-02 .icon::before {
	content: "02";
}

#aboutus .about-area .point-box .point-03 .icon::before {
	content: "03";
}

#aboutus .about-area .point-box li h4 {
    font-family: 'Noto Sans JP';
    font-size: 2.2rem;
	line-height: 1.5;
	padding: 30px 0 25px;
}


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

	#aboutus .about-area {
		padding: 35px 0 0;
	}

	#aboutus .about-area .t-txt {
		padding: 0 20px 20px;
		text-align: left;
	}

	#aboutus .about-area .point-box {
		display: block;
		justify-content: flex-start;
	}

	#aboutus .about-area .point-box li {
		border-right: none;
		border-bottom: #fff solid 2px;
		padding: 30px 20px 25px;
	}

	#aboutus .about-area .point-box .point-03 {
		border-bottom: none;
	}

	/*
	#aboutus .about-area .point-box li .icon {
		min-height: 140px;
		border-radius: 10px;
		max-width: 100%;
	}
	#aboutus .about-area .point-box li .icon img {
		width: 60px;
	}
	#aboutus .about-area .point-box .point-03 .icon img {
		width: 35px;
	}
	*/

	#aboutus .about-area .point-box li .icon {
	}
	#aboutus .about-area .point-box li .icon img {
		max-width: 480px;	}
	
	#aboutus .about-area .point-box li .icon::before {
		font-size: 1.5rem;
		/*
		left: 15px;
		top: 15px;
		*/
		bottom: -25px;
	}

	#aboutus .about-area .point-box li h4 {
		font-size: 1.8rem;
		padding: 30px 0 5px;
	}

}


/* -----------------------------------------------------------
    aboutus
-------------------------------------------------------------- */

#aboutus .message-area {
	padding: 80px 0;
}

#aboutus .message-area .u-title {
	text-align: center;
	padding: 0 0 60px;
}

#aboutus .message-area div {
	border: #d8d8d8 solid 1px;
	border-top: none;
	background: url("../img/bg-aboutus-photo-pc.jpg") no-repeat center top;
	padding: 430px 80px 50px; 
	position: relative;
}

#aboutus .message-area div::before ,
#aboutus .message-area div::after {
	content: "";
	width: 1px;
	height: 210px;
	background: #fff;
	position: absolute;
	top: 0;
	display: block;
}

#aboutus .message-area div::before {
	left: -1px;
}

#aboutus .message-area div::after {
	right: -1px;
}

#aboutus .message-area div p {
	padding: 0 0 30px;
}

#aboutus .message-area div .en {
	color: #00b050;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
	padding: 30px 0 0;
}

#aboutus .message-area .copy {
    font-family: 'Noto Sans JP';
    font-size: 2.4rem;
    letter-spacing: 0.05em;
	line-height: 1.5;
	padding: 5px 0 25px
}

@media screen and (max-width: 768px){
	
	#aboutus .message-area {
		padding: 45px 10px;
	}

	#aboutus .message-area .u-title {
		padding: 0 0 30px;
	}

	#aboutus .message-area div {
		background: url("../img/bg-aboutus-photo01-sp.jpg") no-repeat center top;
		background-size: auto 200px;
		padding: 200px 20px 20px; 
	}

	#aboutus .message-area div::before ,
	#aboutus .message-area div::after {
		height: 80px;
	}

	#aboutus .message-area div p {
		padding: 0 0 15px;
	}

	#aboutus .message-area div .sp-photo {
		background: url("../img/bg-aboutus-photo02-sp.jpg") no-repeat center top 20px;
		background-size: auto 200px;
		padding: 240px 0 15px; 
	}

	#aboutus .message-area div .en {
		letter-spacing: 0.1em;
		padding: 30px 0 0;
	}
	
	#aboutus .message-area .copy {
		font-size: 2rem;
		padding: 5px 0 20px;
	}


}