@charset "utf-8";

/**************************************************************************************

--------------------------------------------------------------------------------------
サラシア加工とは
***************************************************************************************/

#main #process {
}

/* サラシア抽出エキス末の製造方法
========================================== */

#main #process ul.flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: -30px;
}
#main #process ul.flow li {
	width: 214px;
	margin-top: 60px;
	text-align: center;
	position: relative;
}
#main #process ul.flow li:nth-of-type(8) {
	width: 500px;
}
#main #process ul.flow li::after {
	content: "";
	display: block;
	position: absolute;
}
#main #process ul.flow li .flow-item {
	width: 100%;
	height: 214px;
	border-radius: 50vh;
	border: 7px solid #fff;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	background-color: #fff;
}
#main #process ul.flow li:nth-of-type(2) .flow-item {background-color: #89b529;}
#main #process ul.flow li:nth-of-type(3) .flow-item {background-color: #7caa2f;}
#main #process ul.flow li:nth-of-type(4) .flow-item {background-color: #709e35;}
#main #process ul.flow li:nth-of-type(5) .flow-item {background-color: #63933c;}
#main #process ul.flow li:nth-of-type(6) .flow-item {background-color: #568842;}
#main #process ul.flow li:nth-of-type(7) .flow-item {background-color: #4a7c48;}
#main #process ul.flow li:nth-of-type(8) .flow-item {background-color: #3d714e; padding-left: 160px;}

#main #process ul.flow li .flow-item span {
	background-color: #fff;
	border-radius: 50vh;
	font-size: 27px;
	line-height: 1;
	padding: 7px 20px;
}
#main #process ul.flow li:nth-of-type(2) .flow-item span {color: #89b529;}
#main #process ul.flow li:nth-of-type(3) .flow-item span {color: #7caa2f;}
#main #process ul.flow li:nth-of-type(4) .flow-item span {color: #709e35;}
#main #process ul.flow li:nth-of-type(5) .flow-item span {color: #63933c;}
#main #process ul.flow li:nth-of-type(6) .flow-item span {color: #568842;}
#main #process ul.flow li:nth-of-type(7) .flow-item span {color: #4a7c48;}
#main #process ul.flow li:nth-of-type(8) .flow-item span {color: #3d714e; padding: 7px 35px;}

#main #process ul.flow li .flow-item em {
	width: 100%;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	margin-top: 20px;
}
#main #process ul.flow li:nth-of-type(8) .flow-item img {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}
#main #process ul.flow li:nth-of-type(1) .flow-item + p {
	position: absolute;
	right: 50%;
	bottom: -35px;
	transform: translateX(50%);
}
@media only screen and (min-width: 641px) {
	#main #process ul.flow li:nth-of-type(1) {order: 1;}
	#main #process ul.flow li:nth-of-type(2) {order: 2;}
	#main #process ul.flow li:nth-of-type(3) {order: 3;}
	#main #process ul.flow li:nth-of-type(4) {order: 6;}
	#main #process ul.flow li:nth-of-type(5) {order: 5;}
	#main #process ul.flow li:nth-of-type(6) {order: 4;}
	#main #process ul.flow li:nth-of-type(7) {order: 7;}
	#main #process ul.flow li:nth-of-type(8) {order: 8;}
	
	#main #process ul.flow li:nth-of-type(1)::after,
	#main #process ul.flow li:nth-of-type(2)::after,
	#main #process ul.flow li:nth-of-type(7)::after {
		background: url("../img/salacia/ic_arrow1.png") center / cover no-repeat;
		width: 62px;
		height: 42px;
		top: 50%;
		right: -70px;
		transform: translateY(-50%);
	}
	#main #process ul.flow li:nth-of-type(4)::after,
	#main #process ul.flow li:nth-of-type(5)::after {
		background: url("../img/salacia/ic_arrow1.png") center / cover no-repeat;
		width: 62px;
		height: 42px;
		top: 50%;
		left: -70px;
		transform: translateY(-50%) rotate(180deg);
	}
	#main #process ul.flow li:nth-of-type(3)::after,
	#main #process ul.flow li:nth-of-type(6)::after {
		background: url("../img/salacia/ic_arrow2.png") center / cover no-repeat;
		width: 42px;
		height: 41px;
		right: 50%;
		bottom: -50px;
		transform: translateX(50%);
	}
}
@media only screen and (max-width: 640px) {
	#main #process ul.flow {
		display: block;
	}
	#main #process ul.flow li {
		width: 100%!important;
	}
	#main #process ul.flow li:nth-of-type(2) {
		margin-top: 90px;
	}
	#main #process ul.flow li:not(:last-of-type)::after {
		background: url("../img/salacia/ic_arrow2.png") center / cover no-repeat;
		width: 42px;
		height: 41px;
		right: 50%;
		bottom: -50px;
		transform: translateX(50%);
	}
	#main #process ul.flow li:nth-of-type(1)::after {
		bottom: -80px;
	}
	#main #process ul.flow li .flow-item {
		height: auto;
		display: block;
		padding: 10px;
	}
	#main #process ul.flow li:first-of-type .flow-item {
		width: 214px;
		height: 214px;
		padding: 0;
		margin-left: auto;
		margin-right: auto;
	}
	#main #process ul.flow li:nth-of-type(8) .flow-item {
		padding-top: 15px;
		padding-left: 10px;
		border-radius: 30px;
	}
	#main #process ul.flow li .flow-item span {
		font-size: 18px;
		padding: 5px 15px!important;
		display: inline-block;
	}
	#main #process ul.flow li .flow-item em {
		display: inline-block;
		line-height: 1;
		font-size: 22px;
		width: auto;
		margin-top: 0;
		margin-left: 15px;
	}
	#main #process ul.flow li:first-of-type .flow-item img {
		width: 200px;
		height: 200px;
	}
	#main #process ul.flow li:nth-of-type(8) .flow-item img {
		position: static;
		transform: none;
		display: block;
		margin: 15px auto 0;
	}
}

/**************************************************************************************

--------------------------------------------------------------------------------------
各種サプリメントの製造
***************************************************************************************/

#main #supplement {
	background: url("../img/salacia/bg_supplement.jpg") center / cover no-repeat;
	height: 770px;
	margin-top: 140px;
	padding-top: 80px;
	padding-bottom: 30px;
}
#main #supplement h3 {
	font-size: 30px;
	color: #89b529;
	font-weight: bold;
	text-align: center;
	width: 100%;
	max-width: 680px;
	border-radius: 24px;
	padding: 13px 15px;
	background-color: #fff;
	margin: 0 auto;
}
#main #supplement ul.manufacture {
	margin-top: 90px;
}
#main #supplement ul.manufacture > li {
	position: relative;
}
#main #supplement ul.manufacture > li p.start {
	width: 100%;
	max-width: 550px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 8px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #89b529;
	padding: 3px 5px;
}
#main #supplement ul.manufacture > li > ul {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: 80px;
}
#main #supplement ul.manufacture > li > ul > li {
	margin: 0 25px;
}
#main #supplement ul.manufacture > li > ul > li figure {
	position: relative;
}
#main #supplement ul.manufacture > li > ul > li figure figcaption {
	position: absolute;
	bottom: 30px;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #89b529;
}
#main #supplement ul.manufacture > li > ul > li ul {
	margin-top: 60px;
	position: relative;
}
#main #supplement ul.manufacture > li > ul > li ul li {
	text-align: center;
	margin-top: 20px;
}
#main #supplement ul.manufacture > li > ul > li ul li em {
	display: inline-block;
	background-color: #fff;
	border-radius: 8px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #89b529;
	padding: 10px 20px;
}
#main #supplement ul.manufacture > li > ul > li:last-of-type ul li em {
	padding: 10px 15px;
}
#main #supplement ul.manufacture > li + li::before,
#main #supplement ul.manufacture > li > ul > li ul::before {
	content: "";
	display: block;
	position: absolute;
	top: -60px;
	right: 50%;
	transform: translateX(50%);
	border-top: 28px solid #fff;
	border-right: 16px solid transparent;
	border-left: 16px solid transparent;
}
#main #supplement ul.manufacture > li > ul > li ul::before {
	top: -45px;
}
@media only screen and (max-width: 640px) {
	#main #supplement {
		height: auto;
		margin-top: 50px;
		padding-top: 30px;
	}
	#main #supplement h3 {
		font-size: 22px;
	}
	#main #supplement ul.manufacture {
		margin-top: 40px;
		margin-left: -5px;
		margin-right: -5px;
	}
	#main #supplement ul.manufacture > li > ul > li {
		margin: 0 5px;
	}
	#main #supplement ul.manufacture > li > ul > li figure figcaption {
		position: static;
		font-size: 14px;
		color: #fff;
		margin-top: 15px;
	}
}