@charset "utf-8";


/**************************************************50
 * reuse
 **************************************************/
#reuse{
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	text-align: center;
}
#reuse:before{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#reuse.lazyloaded:before{
	background-image: url("https://noukuru.com/images/user/icon/reuse.webp");
}
#reuse p{
}
#reuse p strong {
	color: #B40F35;
}
@media screen and (max-width:767px){
	#reuse{
		background-position: center -webkit-calc(6.25% + 58px);
		background-position: center calc(6.25% + 58px);
		margin-bottom: 12.5%;
		padding-top: -webkit-calc(12.5% + 116px);
		padding-top: calc(12.5% + 116px);
		padding-bottom: 6.25%;
	}
	#reuse:before{
		margin-top: 6.25%;
		height: 116px;
		top: 58px;
		width: 116px;
	}
	#reuse.lazyloaded{
		background-image: url("https://noukuru.com/images/user/first/reuse/back_013.webp");
	}
	#reuse p{
		margin-top: 3.125%;
		padding: 0 3.125%;
		text-align: left;
	}
}
@media screen and (min-width:768px){
	#reuse{
		background-position: center 166px;
		margin-bottom: 100px;
		padding-top: 232px;
		padding-bottom: 100px;
	}
	#reuse:before{
		height: 132px;
		top: 166px;
		width: 132px;
	}
	#reuse p{
		margin-top: 50px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#reuse.lazyloaded{
		background-image: url("https://noukuru.com/images/user/first/reuse/back_012.webp");
	}
	#reuse p{
		font-size: 137.5%;
	}
}
@media screen and (min-width:940px){
	#reuse p{
		font-size: 150%;
	}
}
@media screen and (min-width:940px) and (max-width:1333px){
	#reuse.lazyloaded{
		background-image: url("https://noukuru.com/images/user/first/reuse/back_011.webp");
	}
}
@media screen and (min-width:1334px){
	#reuse.lazyloaded{
		background-image: url("https://noukuru.com/images/user/first/reuse/back_010.webp");
	}
}


/**************************************************50
 * additional
 **************************************************/
#additional{
	text-align: center;
}
#additional h2{
}
#additional h2 img{
}
#additional figure{
	background-color: #CCE9C0;
}
#additional figure picture{
}
#additional figure picture:before{
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
#additional.lazyloaded #tidy-up picture:before{
	background-image: url("https://noukuru.com/images/user/first/additional/badge_010.svg");
}
#additional.lazyloaded #bring picture:before{
	background-image: url("https://noukuru.com/images/user/first/additional/badge_020.svg");
}
#additional figure picture img{
	width: 100%;
}
#additional figure figcaption{
	text-align: left;
}
#additional figure figcaption h3{
	margin-bottom: 1.5em;
}
#additional figure figcaption strong{
	display: block;
	margin-bottom: 1em;
}
#additional figure figcaption p{
}
@media screen and (max-width:319px){
	#additional figure figcaption h3 img{
		height: 20px;
	}
}
@media screen and (min-width:320px) and (max-width:359px){
	#additional figure figcaption h3 img{
		height: 28px;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	#additional figure figcaption h3 img{
		height: 32px;
	}
}
@media screen and (max-width:767px){
	#additional{
		margin-bottom: 12.5%;
	}
	#additional h2{
		margin-bottom: 6.25%;
	}
	#additional h2 img{
		height: 48px;
	}
	#additional > p{
		padding: 0 3.125%;
		text-align: left;
	}
	#additional figure{
		background: -webkit-linear-gradient(top, #005F4B 0, #005F4B 8px, #CCE9C0 8px, #CCE9C0 100%);
		background: linear-gradient(to bottom, #005F4B 0, #005F4B 8px, #CCE9C0 8px, #CCE9C0 100%);
		border-radius: 0 0 12px 12px;
		margin: 6.25% auto 0;
		padding: -webkit-calc(6.25% + 8px) 3.125% 6.25%;
		padding: calc(6.25% + 8px) 3.125% 6.25%;
		width: 93.75%;
	}
	#additional figure picture{
		margin-top: -webkit-calc(6.875% + 0.5em);
		margin-top: calc(6.875% + 0.5em);
		width: 100%;
		max-width: 442px;
	}
	#additional figure picture:before{
		height: 148px;
		-ms-transform: translate(-12.5%, -12.5%);
		-webkit-transform: translate(-12.5%, -12.5%);
		transform: translate(-12.5%, -12.5%);
		width: 27.5%;
		max-width: 148px;
	}
}
@media screen and (min-width:768px){
	#additional{
		margin-bottom: 100px;
	}
	#additional h2{
		margin-bottom: 50px;
	}
	#additional h2 img{
		height: 128px;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#additional figure{
		background: -webkit-linear-gradient(top, #005F4B 0, #005F4B 16px, #CCE9C0 16px, #CCE9C0 100%);
		background: linear-gradient(to bottom, #005F4B 0, #005F4B 16px, #CCE9C0 16px, #CCE9C0 100%);
		border-radius: 0 0 25px 25px;
		margin-top: 50px;
		padding-top: 16px;
		padding-bottom: 2em;
	}
	#additional figure picture{
		margin-top: 37px;
		width: 442px;
	}
	#additional figure picture:before{
		height: 148px;
		-ms-transform: translate(-25%, -25%);
		-webkit-transform: translate(-25%, -25%);
		transform: translate(-25%, -25%);
		width: 148px;
	}
	#additional figure figcaption{
		padding: 1.5em 2em 1em;
	}
}
@media screen and (max-width:1023px){
	#additional figure picture{
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	#additional figure figcaption h3{
		text-align: center;
	}
}
@media screen and (min-width:1024px){
	#additional figure{
		background: -webkit-linear-gradient(left, #005F4B 0, #005F4B 16px, #CCE9C0 16px, #CCE9C0 100%);
		background: linear-gradient(to right, #005F4B 0, #005F4B 16px, #CCE9C0 16px, #CCE9C0 100%);
		border-collapse: separate;
		border-spacing: 3em 2em;
		border-radius: 0 25px 25px 0;
		display: table;
		position: relative;
		table-layout: fixed;
		width: 100%;
	}
	#additional figure picture{
		display: table-cell;
		vertical-align: middle;
		width: 36.5%;
	}
	#additional figure figcaption{
		display: table-cell;
		vertical-align: top;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#additional figure figcaption h3 img{
		height: 52px;
	}
}
@media screen and (min-width:1024px) and (max-width:1439px){
	#additional figure{
		margin-top: 110px;
	}
	#additional figure picture:before{
		height: 120px;
		-ms-transform: translate(-20%, -50%);
		-webkit-transform: translate(-20%, -50%);
		transform: translate(-20%, -20%);
		width: 120px;
	}
}
@media screen and (min-width:1200px){
	#additional figure figcaption h3 img{
		height: 64px;
	}
}
@media screen and (min-width:1440px){
	#additional figure{
		margin-top: 128px;
	}
	#additional figure picture:before{
		height: 148px;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 148px;
	}
}


/**************************************************50
 * flow
 **************************************************/
#flow{
	background-color: #CCE9C0;
	margin-top: -1px;
	text-align: center;
}
#flow_progress{
}
#flow_progress > li{
	background-color: #005F4B;
	color: #FFFFFF;
	display: inline-block;
	line-height: 1.5;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	position: relative;
	vertical-align: top;
}
#flow_progress > li:before,
#flow_progress > li:after{
	border-style: solid;
	content: "";
	display: block;
	position: absolute;
	height: 0;
	width: 0;
}
#flows{
}
#flows > li{
	background-color: #FFFFFF;
	position: relative;
}
#flows > li:not(:first-child):before{
	border-color: #005F4A transparent transparent transparent;
	border-style: solid;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	top: 0;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 0;
}
#flows > li picture{
	position: relative;
}
#flows > li picture img{
}
#flows > li picture img[src$=".webp"]{
	width: 100%;
}
#flows > li picture img[src$=".svg"]{
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 47.5%;
}
#flows > li picture img[src$="010.svg"]{
	margin-top: 3.5%;
	left: 8%;
}
#flows > li picture img[src$="020.svg"]{
	margin-top: 2.5%;
	left: 44.5%;
}
#flows > li picture img[src$="030.svg"]{
	margin-top: 47%;
	left: 9%;
}
#flows > li h3{
	background-color: #005F4B;
	color: #FFFFFF;
}
#flows > li .flow_box{
}
#flows > li[id^="flow_"]:not(#flow_entry) .flow_box:after{
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
}
#flows > li .flow_box p{
	margin-top: 0.5em;
}
#flows > li .flow_box > p:not(#flow_line){
	text-align: left;
}
#flows > li #flow_line{
	text-align: center;
}
#flows > li .flow_box address{
	text-align: center;
}
#flows > li .flow_box a{
}
#flows > li .flow_box a img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.2s ease-out 0s;
}
#flows > li .flow_box a:hover img{
	opacity: 0.7;
}
@media screen and (min-width:320px) and (max-width:359px){
	#flows > li h3{
		font-size: 125%;
	}
}
@media screen and (min-width:360px) and (max-width:374px){
	#flows > li h3{
		font-size: 137.5%;
	}
}
@media screen and (min-width:375px) and (max-width:767px){
	#flows > li h3{
		font-size: 150%;
	}
}
@media screen and (max-width:767px){
	#flow{
		padding-bottom: 12.5%;
	}
	#flow{
	}
	#flow_progress{
		display: none;
	}
	#flows > li{
		border-radius: 12px;
		margin-left: auto;
		margin-right: auto;
		width: 93.75%;
	}
	#flows > li:not(:first-child){
		margin-top: -webkit-calc((6.25% * 2) + 39px);
		margin-top: calc((6.25% * 2) + 39px);
	}
	#flows > li:not(:first-child):before{
		border-width: 39px 24px 0 24px;
		margin-top: -webkit-calc(-6.25% - (39px / 2));
		margin-top: calc(-6.25% - (39px / 2));
	}
	#flows > li h3{
		border-radius: 7px;
		cursor: pointer;
		position: relative;
	}
	#flows > li h3:after{
		font-family: "Material Design Icons";
		font-size: 150%;
		font-weight: normal;
		line-height: 1;
		position: absolute;
		top: 50%;
		right: 0.25em;
		-ms-transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}
	#flows > li h3:not(.active):after{
		content: "\F0140";
	}
	#flows > li h3.active:after{
		content: "\F0143";
	}
	#flows > li .flow_box{
		display: none;
		padding: 0.5em -webkit-calc(1.785714285714286% + 0.5em) 0.5em;
		padding: 0.5em calc(1.785714285714286% + 0.5em) 0.5em;
	}
}
@media screen and (min-width:768px){
	#flow{
		padding-bottom: 100px;
	}
	#flow_progress{
		margin-bottom: 30px;
	}
	#flow_progress > li{
		margin-bottom: 20px;
		width: -webkit-calc((100% - (0.5em * 2)) / 3);
		width: calc((100% - (0.5em * 2)) / 3);
	}
	#flow_progress > li:first-child{
		border-radius: 1000px 0 0 1000px;
	}
	#flow_progress > li:not(:first-child){
		padding-left: 1.73125em;
	}
	#flow_progress > li:last-child{
		border-radius: 0 1000px 1000px 0;
	}
	#flow_progress > li:not(:last-child){
		margin-right: 0.5em;
	}
	#flow_progress > li:before,
	#flow_progress > li:after{
		border-width: 1em 0 1em 1.73125em;
		top: 50%;
	}
	#flow_progress > li:not(:first-child):before{
		border-color: transparent transparent transparent #CCE9C0;
		-ms-transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		left: 0;
		z-index: 1;
	}
	#flow_progress > li:not(:last-child):after{
		border-color: transparent transparent transparent #005F4B;
		-ms-transform: translate(100%, -50%);
		-webkit-transform: translate(100%, -50%);
		transform: translate(100%, -50%);
		right: 0;
		z-index: 2;
	}
	#flow_progress > li:first-child:before,
	#flow_progress > li:last-child:after{
		display: none;
	}
	#flows > li{
		border-radius: 25px;
		padding: 4%;
	}
	#flows > li:not(:first-child){
		margin-top: -webkit-calc((50px * 2) + 52px);
		margin-top: calc((50px * 2) + 52px);
	}
	#flows > li:not(:first-child):before{
		border-width: 52px 32px 0 32px;
		margin-top: -webkit-calc(-50px - (52px / 2));
		margin-top: calc(-50px - (52px / 2));
	}
	#flows > li h3{
		border-radius: 1000px;
		font-size: 200%;
	}
	#flows > li .flow_box{
		display: block !important;
	}
	#flows > li #flow_line{
		margin-bottom: 50px;
	}
}
@media screen and (max-width:1023px){
	#flows > li picture{
		margin: 0.5em auto 0;
		width: 100%;
		max-width: 574px;
	}
	#flows > li #flow_line2{
		margin-bottom: 1em;
	}
}
@media screen and (min-width:1024px){
	#flows > li:after{
		clear: both;
		content: "";
		display: block;
	}
	#flows > li[id^="flow_"] .flow_box:after{
		height: 210px;
	}
	#flows > li picture{
		float: left;
		margin-right: 4.347826086956522%;
		width: 50%;
	}
	#flows > li#flow_entry picture{
		margin-bottom: 50px;
	}
	#flows > li h3,
	#flows > li .flow_box p{
		margin-left: auto;
		width: 45.65217391304348%;
	}
	#flows > li .flow_box address:before{
		clear: both;
		content: "";
		display: block;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#flow_progress{
		font-size: 125%;
	}
}
@media screen and (min-width:1200px){
	#flow_progress{
		font-size: 150%;
	}
}


/**************************************************50
 * suppliers
 **************************************************/
#valuation{
	background-color: #EFE4D1;
	padding-bottom: 1px;
	text-align: center;
}
#valuation_line{
	background-color: #FFFFFF;
	display: inline-block;
	position: relative;
}
#valuation_line:after{
	border-color: #005F4A transparent transparent transparent;
	border-style: solid;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	bottom: 0;
	left: 50%;
	-ms-transform: translate(-50%, 50%);
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
	width: 0;
}
#valuation_line > strong{
	background-color: #00B900;
	color: #FFFFFF;
	display: block;
	line-height: 1.5;
	position: absolute;
	top: 0;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 0.25em;
}
#valuation_line > strong span{
}
#valuation_line > strong b{
	color: #FFFF00;
	font-size: 150%;
	line-height: 1.25;
}
#valuation_line img{
	vertical-align: middle;
}
#valuation_line img[src$="bnr_010.svg"]{
	width: 93.75%;
	max-width: 480px
}
#valuation_line a img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.2s ease-out 0s;
}
#valuation_line a:hover img{
	opacity: 0.7;
}
@media screen and (max-width:319px){
	#valuation_line{
		margin-top: -webkit-calc(62px / 2);
		margin-top: calc(62px / 2);
		padding: -webkit-calc(3.125% + (62px / 2)) 3.125% 3.125%;
		padding: calc(3.125% + (62px / 2)) 3.125% 3.125%;
	}
}
@media screen and (min-width:320px) and (max-width:359px){
	#valuation_line{
		margin-top: -webkit-calc(78px / 2);
		margin-top: calc(78px / 2);
		padding: -webkit-calc(3.125% + (78px / 2)) 3.125% 3.125%;
		padding: calc(3.125% + (78px / 2)) 3.125% 3.125%;
	}
	#valuation_line > strong{
		font-size: 125%;
	}
}
@media screen and (min-width:360px) and (max-width:413px){
	#valuation_line{
		margin-top: -webkit-calc(93px / 2);
		margin-top: calc(93px / 2);
		padding: -webkit-calc(3.125% + (93px / 2)) 3.125% 3.125%;
		padding: calc(3.125% + (93px / 2)) 3.125% 3.125%;
	}
	#valuation_line > strong{
		font-size: 137.5%;
	}
}
@media screen and (min-width:414px) and (max-width:767px){
	#valuation_line{
		margin-top: -webkit-calc(85px / 2);
		margin-top: calc(85px / 2);
		padding: -webkit-calc(3.125% + (85px / 2)) 3.125% 3.125%;
		padding: calc(3.125% + (85px / 2)) 3.125% 3.125%;
	}
	#valuation_line > strong{
		font-size: 150%;
	}
}
@media screen and (max-width:767px){
	#valuation{
		padding-top: 12.5%;
	}
	#valuation_line{
		border-radius: 12px;
		margin-bottom: -webkit-calc((6.25% * 2) + 39px + (80px / 2));
		margin-bottom: calc((6.25% * 2) + 39px + (80px / 2));
		width: 93.75%;
	}
	#valuation_line:after{
		border-width: 39px 24px 0 24px;
		margin-bottom: -webkit-calc(-6.25% - (39px / 2));
		margin-bottom: calc(-6.25% - (39px / 2));
	}
	#valuation_line > strong{
		border-radius: 7px;
		width: 90%;
		max-width: 320px;
	}
	#valuation_line img{
		margin: 0 1.5625% 3.125%;
	}
}
@media screen and (min-width:768px){
	#valuation{
		padding-top: 100px;
	}
	#valuation_line{
		border-radius: 25px;
		margin-top: 38px;
		margin-bottom: -webkit-calc((50px * 2) + 52px + (72px / 2));
		margin-bottom: calc((50px * 2) + 52px + (72px / 2));
	}
	#valuation_line:after{
		border-width: 52px 32px 0 32px;
		margin-bottom: -webkit-calc(-50px - (52px / 2));
		margin-bottom: calc(-50px - (52px / 2));
	}
	#valuation_line > strong{
		border-radius: 15px;
		font-size: 200%;
		width: 660px;
	}
	#valuation_line img[src^="data:image"]{
		margin-right: 30px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#valuation_line{
		padding: 58px 20px 20px;
		width: 700px;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#valuation_line{
		padding: 68px 30px 30px;
		width: 730px;
	}
}
@media screen and (min-width:1024px){
	#valuation_line{
		padding: 88px 50px 50px;
		width: 750px;
	}
}