* {box-sizing:border-box;}
body , html {width:100%; height:100%; margin:0; padding:0;	font-family: 'Noto Sans JP', sans-serif;}
img {border:none; vertical-align:bottom;}


/*****************************
		layout
*****************************/

#wrapper {
	width:100%;
	text-align:center;
	letter-spacing:1px;
	color:#565656;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
}


@media screen and (max-width:979px){
	#wrapper {
		font-size:14px;
		line-height:1.6;
	}
	
}

@media screen and (min-width:980px){
	#wrapper {
		font-size:16px;
		line-height:1.8;
	}
	
	
}


.serviceDesc {
	margin:0 auto;
	text-align:center;
	color:#fff;
}
 
.serviceDesc dt div{
	position:relative;
    line-height:5!important;
    border-radius:50%;
    margin:0 auto;
    background:rgba(226,78,66,.9);
    color:#fff;
}

.serviceDesc dt div strong {
	position:absolute;
	top:-30px;
	left:0;
	width:100%;
	text-align:center;
}

.serviceDesc dt div strong img {
	display:block;
	width:240px!important;
	margin: 0 auto;
} 

.serviceDesc dt div em{
	display:block;
	padding-top:70px;
	font-size:400%;
	font-family: 'Dancing Script', cursive;
	transform: rotate(-180deg);
}

.serviceDesc dt div em:after {
	content:' kg';
	font-family: 'Noto Sans JP', sans-serif;
	font-size:24px;
}


.serviceDesc dd div ul li p {
	text-align:left;
}

.serviceDesc dd div ul li img{
	border-radius:10px;
}

.serviceDesc dd h2 {
	display:inline-block;
	transform:rotate(-7deg);
	padding:5px 20px!important;
	z-index:2;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
}

@media screen and (max-width:979px){
  .serviceDesc dt div{
        width:280px;
	    height:280px;
    }  
}

@media screen and (min-width:980px){
   .serviceDesc dt div{
        width:300px;
	    height:300px;
    }   
}
	
#foodlossDesc {
	z-index:9999;
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:url('img/parts/0cb351c2.png');
	width:100%;
	height:100vh!important;
	color:#444;
	ext-align:center;
}
				
#foodlossDesc .popUpClose {
	position:absolute;
	right:20px;
	top:20px;
}
				
#foodlossDesc .popUpClose {background:rgba(0,0,0,.7); padding:8px 7px 0; border-radius:50%; }
				
#foodlossDesc .popUpClose em:first-child , #foodlossDesc .popUpClose em:last-child{
	background:#fff;
}


				
.foodlossWrap {
	overflow:scroll;
	text-align:center;
	padding:100px 0 50px!important;
	height:100vh;
}
				
.foodloss-inner {
	text-align:center;
	max-width:1024px;
	margin:0 auto 40px;
	padding:0 20px;
}


				
.foodloss-inner figure {
	text-align:center;
}
				
.foodloss-inner figure img{
	max-width:1000px;
	margin:0 auto;
}

.foodloss-inner p {
	text-align:left;
}

.foodloss-inner .lastBlock{
	margin-bottom:40px!important;
}
				
.foodlossClose span{display:inline-block; cursor:pointer;}

.foodlossClose figcaption {max-width:800px;}

.foodloss-inner h3 {
	display:inline-block;
	margin:0 0 25px!important;
	padding:10px 20px!important;
	text-align:center;
	border-bottom:solid 2px #772500;
	border-top:solid 2px #772500;
	font-weight:700;
	color:#772500;
}


@media screen and (max-width:979px){
	.serviceDesc dt {
		margin-bottom:50px;
	}
	
	.serviceDesc dd div ul li .linkBtn {
		margin-top:20px;
	}
	
	.serviceDesc dd div ul li p {
		margin-top:15px;
		font-size:110%;
	}
    
    .serviceDesc dt div{
	    padding:70px 0 100px;
	    z-index:5;
    }
	
	.foodloss-inner h3 {
		font-size:140%;
	}
}	
	
@media screen and (min-width:980px){
	.serviceDesc div{
		/*max-width:1000px;*/
	}
	
	.serviceDesc dl {
		display:table;
		width:100%;
	}
	.serviceDesc dt {
		position:absolute;
		display:table-cell;
		width:30%;
		vertical-align:middle;
	}
	
	.serviceDesc dt div{
		position:absolute;
		top:-20px;
		left:0px;
		margin:20px 40px;
		z-index:2;
	}

	.serviceDesc dd {
		position:relative;
		display:table-cell;
		width:70%;
		text-align:left;
		vertical-align:middle;
	}
	
	.serviceDesc dd h2 {
		position:absolute;
		top:-30px;
		left:30px;
	}
	
	.serviceDesc dd div ul{
		display:table;
		margin-top:20px;
		width:100%;
		text-align:left;
	}
	
	.serviceDesc dd div ul li{
		display:table-cell;
		vertical-align:top;
		width:50%;
	}
	
	.serviceDesc dd div ul li{
		position:relative;
		display:table-cell;
		vertical-align:top;
		width:50%;
	}
	
	.serviceDesc dd div ul li p {
		padding:20px;
		font-size:120%;
	}
	
	.serviceDesc dd div ul li .linkBtn {
		position:absolute;
		bottom:0;
		right:0;
	}
    .serviceDesc dt div{
	    padding:70px 0 100px;
	    z-index:5;
    }
	
	.foodloss-inner h3 {
		font-size:180%;
	}
}	


.merit h2 {
	color:rgba(119,37,0,1);
}

.charactor {
	text-align:center;
}

.charactor span {
	position:relative;
	display:inline-block;
	width:60px;
	margin:0 auto;
}

.charactor span.userHand strong{
	position:absolute;
	bottom:15px;
	left:-20px;
	display:inline-block;
	width:18px;
	animation: userHand 1s ease-in-out 0s infinite normal;
}

@keyframes userHand{
  0%{
    transform:rotate(0);
	transform-origin: right bottom;
  }
  50%{
    transform:rotate(-10deg);
	transform-origin: right bottom;
  }
  100%{
    transform:rotate(0);
	transform-origin: right bottom;
  }
}

.charactor span.shopHand strong{
	position:absolute;
	bottom:30px;
	right:-30px;
	display:inline-block;
	width:20px;
	animation: shopHand 1s ease-in-out 0s infinite normal;
}

@keyframes shopHand{
  0%{
    transform:rotate(5deg);
	transform-origin: left bottom;
  }
  50%{
    transform:rotate(15deg);
	transform-origin: left bottom;
  }
  100%{
    transform:rotate(5deg);
	transform-origin: left bottom;
  }
}


.howToUse {
	text-align:center;
}


.howToUse li p{
	text-align:left;
}

.howToUse li dl dt p {
	overflow: hidden;
	text-align:center;
}

.howToUse li dl dt p img {
	margin:0 auto;
	/*transform: rotate(10deg);
	animation:2s ease-in 1s infinite alternate forwards running expansion;*/
}

@keyframes expansion{
  0%{
    transform: rotate(10deg);
  }
  100%{
    transform: rotate(-10deg);
  }
}

.howToUse li dl dd p {
	padding:1em;
	line-height:1.6;
	max-width:300px;
	margin:0 auto;
	color:#A15E00;
}


@media screen and (max-width:979px){
	.howToUse li {
		margin-bottom:20px;
	}
	.howToUse li div {
		padding:0;
	}
	.howToUse li dl dt p img {
		max-width:200px;
	}
}

@media screen and (min-width:980px){
	.howToUse li div {
	}
	.howToUse li dl dt p img {
		max-width:300px;
	}
}

.boxTxt li dl img {

}


.seaviceArea ul{
	overflow:hidden;
	padding-top:30px;
}

.seaviceArea ul li{
	float:left;
	text-align:center;
}

.seaviceArea ul li p {
	padding:5px;
	text-align:center;
	font-size:12px;
}

.seaviceArea ul li p img{
	max-width:80px;
	margin:0 auto;
	
}

.seaviceArea ul li p strong {
	display:block;
	margin-top:10px;
	line-height:1.6;
}


@media screen and (max-width:979px){
	.seaviceArea ul li{
		width:25%;
	}
}

@media screen and (min-width:980px){
	.howToUse ul{
		display:table;
		width:100%;
	}
	
	.howToUse li{
		display:table-cell;
		width:33.333%;
	}
	
	.seaviceArea ul li{
		width:10%;
	}
}