@import url("about.css");
.flowimage{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
#section1 >p{
	text-align:center;
	line-height: 2em;
}
#section1 .flow h4{
	text-align:center;
}
#section1 .flow p{
	text-align:center;
}
.flow li:first-of-type h4{
	margin-top:0;
}
#section1 .flow h4{
	text-align:center;
	font-size:2em;
}
#section2 .produce{
	position:relative;
}
#section2 .produce:before{
	content:"";
	display:block;
	background:#76b2d5;
	width:1px;
	height:calc(100% - 5px);
	position:absolute;
	top:0;
	bottom:0;
	left:14px;
	margin:auto;
}
#section2 .produce li{
	display:flex;
	position:relative;
}
#section2 .produce li:last-child{
	margin-bottom:0;
}
#section2 .produce .num{
	display:block;
	color:#ffffff;
	font-size:1.176em;
	font-weight:300;
	background:#76b2d5;
	text-align:center;
	line-height:1;
	width:30px;
	padding-top:5px;
	padding-bottom:5px;
	align-self: flex-start;
}
#section2 .produce .caption{
	letter-spacing: 0.08em;
	align-self: center;
}
#section2 >p{
	text-align:center;
	font-size:2em;
	padding-bottom:calc((340 / 1040) * 100%);
	background:url(../image/image1.jpg) no-repeat center bottom /100% auto;
}
/*PC
----------------------------------------------------*/
@media screen and (min-width:1081px),print{
	.section:not(:last-of-type){
		margin-bottom:80px;
	}
	.section:last-of-type{
		margin-bottom:60px;
	}
	.section p{
		font-size:0.941em;
	}
	#section1 >p{
		margin-bottom:70px;
	}
	.flowimage{
		margin-bottom:-40px;
		margin-top:40px;
	}
	.flowimage li{
		margin-bottom:40px;		
	}
	.flow h4{
		margin-top:60px;
		margin-bottom:30px;
	}
	.column2 li{
		width:500px;
	}
	.column3 li{
		width:320px;
	}
	.produce{
		width:680px;
		margin-right:auto;
		margin-left:auto;
	}
	#section2 .produce .caption{
		margin-left:55px;
	}
	
	#section2 .produce li{
		margin-bottom:35px;
	}
	#section2 >p{
		margin-top:85px;
	}
}
/*PC and Tablet
----------------------------------------------------*/
@media screen and (min-width:751px),print{
}
/*Tablet
----------------------------------------------------*/
@media screen and (min-width:751px) and (max-width:1080px){
	.flowimage.column3 li{
		width:30%;
	}
}
/*Tablet und Phone
----------------------------------------------------*/
@media screen and (max-width:1080px){
	.flowimage li{
		width:48.5%;
	}
	.section:not(:last-of-type){
		margin-bottom:7%;
	}
	.section:last-of-type{
		margin-bottom:5%;
	}
	#section1 >p{
		margin-bottom:5%;
	}
	.flowimage{
		margin-top:5%;
		margin-bottom:-1em;
	}
	.flowimage li{
		margin-bottom:1em;
	}
	.flow h4{
		margin-top:7%;
		margin-bottom:3%;
	}
	#section2 .produce{
		margin-right:5%;
		margin-left:5%;
		margin-bottom:7%;
	}
	#section2 .produce li{
		margin-bottom:5%;
	}
	#section2 .produce .caption{
		width:calc(100% - (33px + 3%));
		margin-left:3%;
	}
}
/*Phone
----------------------------------------------------*/
@media screen and (max-width:750px){
	#section2 >p{
		font-size:1.412em;
	}

}