/* -----------------------------------------------------------
    feature
-------------------------------------------------------------- */

#feature .feature-area .u-title {
	background: url("../img/icon-feature.svg") no-repeat center top;
	background-size: auto 41px;
	text-align: center;
	padding: 60px 0 30px;
	margin: 60px 0 0;
}

#feature .feature-area .t-txt {
	text-align: center;
	padding: 0 0 60px;
}

#feature .feature-box01 .inner div h4 ,
#feature .feature-box02 h4 ,
#feature .feature-box03 .inner div h4 {
	color: #00b050;
	font-family: 'Noto Sans JP';
    font-size: 2.2rem;
    line-height: 1.5;
}

#feature .feature-box01 span ,
#feature .feature-box02 span ,
#feature .feature-box03 span {
	font-weight: bold;
}

#feature .feature-box01 {
	background-image: url("../img/bg-title-kazari-feature.png") , url("../img/bg-top-feature-pc.jpg") ;
	background-position: left 20px top , left 20px top;
	background-repeat: no-repeat;
	background-size: auto , 100% 600px;
}

#feature .feature-box01 .box {
	background-image: url("../img/bg-top-leaf01-pc.png") , url("../img/bg-feature-photo01.jpg");
	background-position: left 20px bottom 70px , right top;
	background-repeat: no-repeat;
	background-size: auto ;
	padding: 45px 0;
}

#feature .feature-box01 .inner div {
	box-shadow: 0px 0px 15px -5px #a3a3a3;
	background: #fff;
	width: 900px;
	border-radius: 20px;
	/*
	padding: 60px 175px 40px 50px;
	*/
	padding: 60px 70px 50px 70px;
}

#feature .feature-box01 .inner div h4 {
	padding: 0 0 30px;
}

#feature .feature-box01 .inner div p {
	padding: 0 0 20px;
}

#feature .feature-box02 {
	text-align: center;
	padding: 80px 0 80px;
}
#feature .feature-box02 .u-title {
	background: none;
	padding: 0 0 0;
	margin: 0 0 0;
}

#feature .feature-box02 .txt {
	padding: 30px 0 40px;
}

#feature .feature-box02 ul {
	display: flex;
	justify-content: space-between;
}

#feature .feature-box02 ul li {
	width: 375px;
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding: 160px 0 0;
}

#feature .feature-box02 ul .point01 {
	background-image: url("../img/bg-feature-photo02.jpg");
}

#feature .feature-box02 ul .point02 {
	background-image: url("../img/bg-feature-photo03.jpg");
}

#feature .feature-box02 ul .point03 {
	background-image: url("../img/bg-feature-photo04.jpg");
}

#feature .feature-box02 ul li h5 {
	background-position: center top;
	background-size: 90px auto;
	background-repeat: no-repeat;
	padding: 80px 0 0;
	font-size: 1.8rem;
	line-height: 1.5;
}

#feature .feature-box02 ul .point01 h5 {
	background-image: url("../img/bg-feature-point01.png");
}

#feature .feature-box02 ul .point02 h5 {
	background-image: url("../img/bg-feature-point02.png");
}

#feature .feature-box02 ul .point03 h5 {
	background-image: url("../img/bg-feature-point03.png");
}

#feature .feature-box02 ul li p {
	text-align: left;
	padding: 20px 0 0;
}

#feature .feature-box03 {
	background-image: url("../img/bg-title-kazari-feature-right.png") , url("../img/bg-top-feature-pc.jpg") ;
	background-position: right 20px top , right 20px top;
	background-repeat: no-repeat;
	background-size: auto , 100% 600px;
}

#feature .feature-box03 .box {
	background-image: url("../img/bg-top-leaf02-pc.png") , url("../img/bg-feature-photo05.jpg");
	background-position: right 20px bottom 70px , left top;
	background-repeat: no-repeat;
	background-size: auto ;
	padding: 45px 0 0;
}

#feature .feature-box03 .inner div {
	box-shadow: 0px 0px 15px -5px #a3a3a3;
	background: #fff;
	width: 900px;
	border-radius: 20px;
	padding: 60px 70px 50px 70px;
	margin: 0 0 0 auto;
}

#feature .feature-box03 .inner div h4 {
	padding: 0 0 30px;
}

#feature .feature-box03 .inner div p {
	padding: 0 0 20px;
}

#feature .feature-box03 .inner div ul {
	padding: 0 0 20px;
}

#feature .feature-box03 .inner div ul li {
	font-weight: bold;
	line-height: 1.5;
	background: url("../img/bg-disc.jpg") no-repeat left center;
	padding: 0 0 0 16px;
}


@media screen and (max-width: 768px){
	
	#feature .feature-area .u-title {
		background-size: auto 30px;
		padding: 40px 0 15px;
		margin: 30px 0 0;
	}

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

	#feature .feature-box01 .inner div h4 ,
	#feature .feature-box02 h4 ,
	#feature .feature-box03 .inner div h4 {
		font-size: 1.8rem;
		text-align: center;
	}

	#feature .feature-box01 {
		background-image: url("../img/bg-top-feature-sp.jpg") ;
		background-position: center top;
		background-size: auto;
	}

	#feature .feature-box01 .box {
		background-image: url("../img/bg-top-leaf02-sp.png") , url("../img/bg-feature-photo01.jpg");
		background-position: left 20px bottom 10px , center top;
		background-size: auto , 100% auto;
		padding: 200px 10px 50px;
	}

	#feature .feature-box01 .inner div {
		width: 100%;
		border-radius: 10px;
		padding: 30px 20px;
	}

	#feature .feature-box01 .inner div h4 {
		padding: 0 0 15px;
	}

	#feature .feature-box01 .inner div p {
		padding: 0 0 10px;
	}

	#feature .feature-box02 {
		padding: 40px 20px 0;
	}
	#feature .feature-box02 .u-title {
		padding: 0 0 0;
		margin: 0 0 0;
	}
	#feature .feature-box02 .txt {
		padding: 15px 0;
	}

	#feature .feature-box02 ul {
		display: block;
		justify-content: flex-start;
	}

	#feature .feature-box02 ul li {
		width: 100%;
		background-position: center top;
		background-size: auto 180px;
		padding: 140px 0 40px;
	}

	#feature .feature-box02 ul li p {
		text-align: left;
		padding: 15px 0 0;
	}

	#feature .feature-box03 {
		background-image: url("../img/bg-top-feature-sp.jpg") ;
		background-position: center top;
		background-size: auto;
	}

	#feature .feature-box03 .box {
		background-image: url("../img/bg-top-leaf02-sp.png") , url("../img/bg-feature-photo05.jpg");
		background-position: left 20px bottom 10px , center top;
		background-size: auto , 100% auto;
		padding: 200px 10px 50px;
	}

	#feature .feature-box03 .inner div {
		width: 100%;
		border-radius: 10px;
		padding: 30px 20px;
		margin: 0 auto;
	}

	#feature .feature-box03 .inner div h4 {
		padding: 0 0 15px;
	}

	#feature .feature-box03 .inner div p {
		padding: 0 0 10px;
	}

	#feature .feature-box03 .inner div ul {
		padding: 0 0 10px;
	}

	#feature .feature-box03 .inner div ul li {
		background: url("../img/bg-disc.jpg") no-repeat left top 8px;
		background-size: 3px;
		padding: 0 0 0 8px;
	}
}


/* -----------------------------------------------------------
    flow
-------------------------------------------------------------- */

#feature .flow-area {
	padding: 80px 0;
}

#feature .flow-area .u-title {
	text-align: center;
	padding: 0 0 50px;
}

#feature .flow-area .inner {
	border: #d8d8d8 solid 1px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto 70px;
}

#feature .flow-area .inner li {
	border-right: #d8d8d8 solid 1px;
	padding: 30px 50px 50px 50px;
}

#feature .flow-area .inner .flow03 {
	border-right: none;
}

#feature .flow-area .inner li .icon {
	height: 84px;
	text-align: center;
	position: relative;
	padding: 40px 0 0;
	box-sizing: content-box;
}

#feature .flow-area .inner li .icon img {
	height: 100%;
}

#feature .flow-area .inner li .icon::before {
	color: #00b050;
	font-family: 'Quicksand', sans-serif;
	font-weight: bold;
	font-size: 2.0rem;
	letter-spacing: 0.1em;
	position: absolute;
	left: 0;
	top: 0;
}

#feature .flow-area .inner .flow01 .icon::before {
	content: "01";
}

#feature .flow-area .inner .flow02 .icon::before {
	content: "02";
}

#feature .flow-area .inner .flow03 .icon::before {
	content: "03";
}

#feature .flow-area .inner li h4 {
	text-align: center;
	font-size: 2.0rem;
	font-weight: bold;
	padding: 50px 0 25px;
}


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

	#feature .flow-area {
		padding: 40px 20px;
	}

	#feature .flow-area .u-title {
		text-align: center;
		padding: 0 0 30px;
	}

	#feature .flow-area .inner {
		display: block;
		justify-content: flex-start;
		margin: 0 auto 40px;
	}

	#feature .flow-area .inner li {
		border-right: none;
		border-bottom: #d8d8d8 solid 1px;
		padding: 20px;
	}

	#feature .flow-area .inner .flow03 {
		border-bottom: none;
	}

	#feature .flow-area .inner li .icon {
		height: 60px;
		padding: 10px 0 0;
	}

	#feature .flow-area .inner li .icon::before {
		font-size: 1.8rem;
	}

	#feature .flow-area .inner li h4 {
		font-size: 1.8rem;
		padding: 20px 0 15px;
	}
}