@charset "utf-8";

/* ------------------- fv ------------------- */
#fv {
	background: url(../images/business/fv.jpg) no-repeat center top/cover;
	margin: 0 30px;
	padding: 270px 0;
	border-radius: 20px;
}


/* ------------------- business ------------------- */
#business {
	margin: 100px auto 0;
}

#business .intro {
	position: relative;
	font-size: 26px;
	text-align: center;
	line-height: 160%;
	letter-spacing: 2px;
	margin: 0 auto 110px;
}

#business .intro::before {
	position: absolute;
	content: "";
	right: -255px;
	top: -120px;
	width: 73px;
	height: 74px;
	background: url(../images/business/business_ac_01.png) no-repeat center center;
}

#business .intro::after {
	position: absolute;
	content: "";
	left: -130px;
	bottom: -210px;
	width: 178px;
	height: 158px;
	background: url(../images/business/business_ac_02.png) no-repeat center center;
}


#business .articles {
	position: relative;
	z-index: -2;
	background: url(../images/common/pattern_01.gif) repeat left top;
	padding: 150px 0 100px;
}

#business .articles article {
	position: relative;
	float: left;
	width: 510px;
	min-height: 480px;
	background: #fff;
	margin: 0 0 50px 80px;
	padding: 40px 50px;
	box-sizing: border-box;
}

#business .articles article:nth-of-type(2n+1) {
	clear: both;
	margin: 0 0 50px;
}

#business .articles article::before {
	position: absolute;
	content: "";
	right: -15px;
	bottom: -15px;
	z-index: -1;
	width: 510px;
	height: 450px;
	background: linear-gradient(145deg,rgba(242,70,108,0.38),rgba(255,246,178,0.38));
}

#business .articles article h3 {
	font-size: 30px;
	text-align: center;
	padding: 130px 0 0;
	margin: 0 auto 25px;
}

#business .articles .a1 h3 {
	background: url(../images/business/icn_01.png) no-repeat center top/92px;
}

#business .articles .a2 h3 {
	background: url(../images/business/icn_02.png) no-repeat center top/92px;
}

#business .articles .a3 h3 {
	background: url(../images/business/icn_03.png) no-repeat center top/93px;
}

#business .articles .a4 h3 {
	background: url(../images/business/icn_04.png) no-repeat center top/93px;
}

#business .articles .a5 h3 {
	background: url(../images/business/icn_05.png) no-repeat center top/93px;
}

#business .articles article ul li {
	position: relative;
	font-size: 18px;
	margin: 0 0 15px;
	padding: 0 0 0 25px;
}

#business .articles article ul li::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 14px;
	height: 14px;
	background: #f69a9f;
	border-radius: 50%;
}

#business .articles article p {
	font-size: 18px;
	line-height: 190%;
}







/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {

/* ------------------- fv ------------------- */
#fv {
	background: url(../images/business/fv.jpg) no-repeat center top/cover;
	margin: 0 5%;
	padding: 70px 5%;
	border-radius: 10px;
}

/* ------------------- business ------------------- */
#business {
	margin: 50px auto 0;
}

#business .intro {
	font-size: 18px;
	text-align: left;
	line-height: 170%;
	letter-spacing: 2px;
	margin: 0 auto 60px;
}

#business .intro::before {
	right: 0;
	top: -60px;
	width: 40px;
	height: 41px;
	background: url(../images/business/business_ac_01.png) no-repeat center center/40px;
}

#business .intro::after {
	left: 0px;
	bottom: -120px;
	width: 100px;
	height: 90px;
	background: url(../images/business/business_ac_02.png) no-repeat center center/100px;
}


#business .articles {
	background: url(../images/common/pattern_01.gif) repeat left top;
	padding: 100px 0 50px;
}

#business .articles article {
	float: none;
	width: 95%;
	min-height: inherit;
	margin: 0 auto 50px 0;
	padding: 30px 15px;
}

#business .articles article:nth-of-type(2n+1) {
	clear: inherit;
	margin: 0 auto 50px 0;
}

#business .articles article::before {
	right: -5%;
	bottom: -5%;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg,rgba(242,70,108,0.38),rgba(255,246,178,0.38));
}

#business .articles article h3 {
	font-size: 20px;
	text-align: center;
	padding: 80px 0 0;
	margin: 0 auto 20px;
}

#business .articles .a1 h3 {
	background: url(../images/business/icn_01.png) no-repeat center top/60px;
}

#business .articles .a2 h3 {
	background: url(../images/business/icn_02.png) no-repeat center top/60px;
}

#business .articles .a3 h3 {
	background: url(../images/business/icn_03.png) no-repeat center top/60px;
}

#business .articles .a4 h3 {
	background: url(../images/business/icn_04.png) no-repeat center top/60px;
}

#business .articles .a5 h3 {
	background: url(../images/business/icn_05.png) no-repeat center top/70px;
}

#business .articles article ul li {
	font-size: 16px;
	line-height: 140%;
	margin: 0 0 10px;
	padding: 0 0 0 18px;
}

#business .articles article ul li::before {
	position: absolute;
	content: "";
	left: 0;
	top: 6px;
	bottom: inherit;
	width: 10px;
	height: 10px;
}

#business .articles article p {
	font-size: 16px;
	line-height: 170%;
}


}