@charset "UTF-8";



/* ------------------------------------------------------------
	CONTENTS
------------------------------------------------------------ */
/* ABOUT */
.l-about {
	padding: 220px 0 120px;
}
.l-about-text ul {
	margin-top: 25px;
	margin-bottom: 25px;
	counter-reset: number 0;
}
.l-about-text ul > * {
	font-size: 18px;
	font-weight: bold;
	line-height: 36px;
	background: #fff;
	border: 2px solid #4ba674;
	border-radius: 4px;
	margin-bottom: 25px;
	padding: 0 0.5em;
	width: 33.3%;
	min-width: 164px;
}
.l-about-text ul > *:last-child {
	margin-bottom: 0;
}
.l-about-text ul > *:before {
	counter-increment: number 1;
	content: counter(number, decimal-leading-zero);
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 23px;
	font-weight: bold;
	color: #4ba674;
	vertical-align: middle;
	margin-right: 0.5em;
}


/* POINT */
.l-point {
	margin-top: 40px;
	margin-bottom: 50px;
	padding: 35px 35px 30px 35px;
	position: relative;
}
.l-point-title {
	font-size: 20px;
	color: #fff;
	line-height: 48px;
	display: inline-block;
	background: #4ba674;
	border-radius: 0 24px 24px 0;
	padding: 0 27px 0 15px;
	position: absolute;
	left: 19px;
	top: -32px;
}
.l-point-text {
	font-size: 18px;
	line-height: 1.4;
	text-align: justify;
	letter-spacing: 0;
}

/* LIST */
.l-list > *:nth-child(1){
	width: 22%;
}
.l-list > *:nth-child(2){
	width: 48%;
}
.l-list > *:nth-child(3){
	width: 30%;
}
.l-list-text {
	font-size: 14px;
	line-height: 1.6;
	background: #edf6f1;
	border-radius: 7px;
	padding: 20px;
	position: relative;
}
.l-list-text:before {
	content: "";
	display: inline-block;
  border-style: solid;
  border-width: 11px 20px 11px 0;
  border-color: transparent #edf6f1 transparent transparent;
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%)
}


/* FLOW */
.l-flow {
	gap: 35px;
	margin-top: 40px;
	counter-reset: number 0;
}
.l-flow > * {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
	padding: 30px 10px 15px;
	background: #e4f2ea;
	position: relative;
}
.l-flow > *:before {
	counter-increment: number 1;
	content: counter(number) " ";
	display: inline-block;
	width: 42px;
	height: 42px;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: #fff;
	line-height: 42px;
	text-align: center;
	background: #4ba674;
	border-radius: 50%;
	position: absolute;
	top: -21px;
	left: 50%;
	transform: translateX(-50%);
}
.l-flow > *:after {
	content: "";
	display: inline-block;
  border-style: solid;
  border-width: 11px 0 11px 16px;
  border-color: transparent transparent transparent #ea613b;
	position: absolute;
	right: -23px;
	top: calc(50% - 8px);
	transform: translateX(-50%);
}
.l-flow > *:last-child:after {
	display: none;
}
.l-flow > *:nth-child(1) {
	width: 25%;
}
.l-flow > *:nth-child(2) {
	width: 19%;
}
.l-flow > *:nth-child(3) {
	width: 16%;
}
.l-flow > *:nth-child(4) {
	width: 25%;
}
.l-flow > *:nth-child(5) {
	width: 16%;
}


/* MERIT */
.l-merit {
	counter-reset: number 0;
	gap: 55px 0;
}
.l-merit > * {
	position: relative;
}
.l-merit > *:not(:nth-child(3n)) {
	border-right: 1px solid #808080;
}
.l-merit-title {
	margin-bottom: 10px;
	position: relative;
}
.l-merit-title:before {
	counter-increment: number 1;
	content: "MERIT." counter(number, decimal-leading-zero);
	display: block;
	width: 100%;
	font-family: 'Inter', sans-serif;
	font-size: 19px;
	font-weight: normal;
	letter-spacing: 0.16em;
	line-height: 42px;
	text-align: center;
	color: #fff;
	background: #4ba674;
	margin-bottom: 15px;
}
.l-merit > * .l-merit-title span {
	font-size: 19px;
	font-weight: bold;
	line-height: 1.3;
	color: #4ba674;
	position: relative;
}
.l-merit > *:nth-child(1) .l-merit-title span {
	text-align: left;
	display: block;
	padding-left: 86px;
}
.l-merit > *:nth-child(1) .l-merit-title span:before {
	content: "";
	display: inline-block;
	width: 66px;
	height: 66px;
	background: url(../image/method/icon_merit_01.png) no-repeat center/ contain;
	position: absolute;
	top: -0.5em;
	left: 10px;
}
.l-merit-text {
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: -.05em;
	margin-bottom: 10px;
}


/* YOUTUBE */
.l-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.l-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


@media screen and (min-width:320px) and ( max-width:767px) {


/* ------------------------------------------------------------
	CONTENTS
------------------------------------------------------------ */
/* ABOUT */
	.l-about {
		/*padding: 110px 0 80px;*/
		padding: 130px 0 80px;
	}
	.l-about-inner.u-inner {
		padding: 0 4%;
	}
	.l-about-text ul {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.l-about-text ul > * {
		font-size: 16px;
		margin: 0 auto 20px;
		width: 50%;
	}
	.l-about-text ul > *:before {
		font-size: 19px;
	}


/* POINT */
	.l-point {
		width: 110%;
    margin-right: -5%;
    margin-left: -5%;
		margin-top: 50px;
		margin-bottom: 10%;
		padding: 10% 7% 7%;
	}
	.l-point-title {
		font-size: 15px;
		line-height: 40px;
		left: 3.5%;
		top: -25px;
		padding: 0 1em 0 0.75em;
	}
	.l-point-text {
		font-size: 14px;
	}


/* LIST */
	.l-list-text {
		font-size: 13px;
		padding: 7% 7%;
	}
	.l-list-text:before {
		border-width: 0 11px 20px 11px;
		border-color: transparent transparent #edf6f1 transparent;
		left: 50%;
		top: -15px;
		transform: translate(-50%, 0);
	}


/* FLOW */
	.l-flow > * {
		font-size: 13px;
		margin-bottom: 45px;
		padding: 30px 7% 7%;
	}
	.l-flow > *:last-child {
		margin-bottom: 0;
	}
	.l-flow > *:after {
		border-width: 14px 15px 0 15px;
		border-color: #ea613b transparent transparent transparent;
    right: calc(50% - 30px);
    top: 100%;
    transform: translateX(-50%);
	}


/* MERIT */
	.l-merit > *:not(:nth-child(3n)) {
		border-right: none;
	}
	.l-merit > *:not(:last-child) {
		border-bottom: 1px solid #808080;
		padding-bottom: 20px;
	}
	.l-merit-title {
		font-size: 17px;
	}
	.l-merit-title:before {
		font-size: 15px;
		line-height: 38px;
	}
	
/* YOUTUBE */	
}