html,body{
	overflow-x: hidden;
}
p{
	margin: 0;
}
.kv{
	background: #000;
    line-height: 0;
    video{
        width: 100%;
    }
}
.sec01{
    background: #000;
    padding: 50px 0 60px;
    margin-top: -1px;
    .img01{
        margin-bottom: 50px;
        @media(min-width:750px){
            margin-top: 30px;
        }
    }
    .img02{
        margin-bottom: 20px;
        @media(min-width:750px){
            margin: 70px auto 0;
        }
    }
    .img03{
        margin-bottom: 50px;
        @media(min-width:750px){
            margin-top: 50px;
        }
    }
    .img04{
        @media(min-width:750px){
            margin-top: 50px;
        } 
    }
}
.sec02{
    position: relative;
    background: url(/template/default/img/sp/ersl/sec02_bg_rev.jpg) no-repeat center top;
    background-size: 100% auto;
    aspect-ratio: 748/1790;
    padding: 30px 0 0;
        @media(min-width:750px){
            padding: 50px 0 0;
        }
    .img01{
        margin: 0 0 15px;
        @media(min-width:750px){
			width: 80%;
            margin: 0 auto 20px;
        }
    }
    .img02{

        @media(min-width:750px){
			width: 90%;
            margin: 0 auto;
        }
    }
    .img03{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 50px;
        @media(min-width:750px){
            margin: 0 auto 10px;
        }
    }
}
.sec03{
    background: #000;

    .top{
        padding: 40px 0;
        @media(min-width:750px){
            padding: 80px 0;
        }
    }
    .content{
	    position: relative;
    }
    .img02{
	    position: absolute;
	    top: 50px;
        @media(min-width:750px){

        }
    }
    .img03{
        margin-top: -34vw;
        @media(min-width:750px){
            margin: -260px auto 0;
        }
    }
	
}
.sec04{
	background: #000;
	.top{
		padding: 40px 0 30px;
		@media(min-width:750px){
		padding: 80px 0 60px;
		}
	}
	.inner{
    background: url(/template/default/img/sp/ersl/sec04_bg.jpg) no-repeat center center;
    background-size: 100% auto;
    padding: 40px 0;
    @media(min-width:750px){
	    padding: 90px 0;
    }
	}
	.img03{
		padding: 40px 0;
		 @media(min-width:750px){
	    padding: 80px 0;
    }
	}
}
.sec05{
	background: #000;
	.top{
	display: flex;
	align-items: center;
	justify-content: center;
    background: url(/template/default/img/sp/ersl/sec05_bg01.jpg) no-repeat center center;
    aspect-ratio:75/20;
    background-size: cover;		
	}
	.title{
		padding: 30px 0;
		@media(min-width:750px){
			padding: 60px 0;
		}
	}
	.box{
    background: url(/template/default/img/sp/ersl/sec05_bg02.jpg) no-repeat center center;
    aspect-ratio:750/723;
    background-size: cover;			
    padding: 30px 0;
    .list{
	    width: 94%;
    }
    .item:nth-child(2){
	    margin: 30px 0;
	    @media(min-width:750px){
			    margin: 50px 0;
		    }
    }
	}
	.note{
		padding: 20px 0 40px;
		@media(min-width:750px){
			padding: 40px 0 70px;
		}
	}
}
.sec06{
	background: #000;
	.top{
	display: flex;
	align-items: center;
	justify-content: center;
    background: url(/template/default/img/sp/ersl/sec06_bg01.jpg) no-repeat center center;
    aspect-ratio:75/20;
    background-size: cover;	
	
	}
	.title{
		padding: 30px 0;
		@media(min-width:750px){
	    padding: 60px 0;
    }
	}
	.box{
    background: url(/template/default/img/sp/ersl/sec06_bg02.jpg) no-repeat center center;
    aspect-ratio:750/723;
    background-size: cover;			
    padding: 30px 0;
        .list{
	    width: 94%;
	    margin: 0 0 0 auto;
    }
	    .item:nth-child(2){
		    margin: 30px 0;
		    @media(min-width:750px){
			    margin: 50px 0;
		    }
	    }
	}
	.note{
		padding: 20px 0 40px;
		@media(min-width:750px){
			padding: 40px 0 70px;
		}		
	}
}
.sec07{
	background: #000;
	padding: 0 0 50px;
	margin: -30px 0 0;
	@media(min-width:750px){
		padding: 0 0 100px;
	}
	.top{
    background: url(/template/default/img/sp/ersl/sec07_bg.jpg) no-repeat center center;
	background-size: 100% auto;
	padding: 40px 0 30px;
	@media(min-width:750px){
			padding: 70px 0;
			margin: 0;
	}
	}
	.video{
		text-align: center;	
		margin: auto;	
	}
	video{
		width: 85%;
		margin: auto;
		aspect-ratio:6:4;
	}
}
.sec08{
	background: url(/template/default/img/sp/ersl/sec08_bg.jpg) no-repeat center top;
	background-size:100% auto;
	padding: 0 0 70px;
	.title{
		margin: 0 0 50px;
		@media(min-width:750px){
		margin: 0 0 90px;
	}
	}
	.content{
		.list{
			
		}
		.item{
			position: relative;
		}
		.item:nth-child(1){
			aspect-ratio:750/655;
			.item-text{
				top: -30px;
			}
		}
		.item:nth-child(2){
			top: -62px;
		}
		.item:nth-child(3){
			aspect-ratio:750/550;
			margin-top: -60px;
			.item-text{
				top: 70px;
			}
		}
		.item:nth-child(4){
			top: -48px;
			@media(min-width:750px){
				top: -90px;
			}
		}				
		.item-text{
			position: absolute;
			z-index: 2;
		}
		.item-img{
			position: absolute;
		}		
	}
}
.sec09{
	background: #000;
	padding: 0 0 40px;
	margin-top: -30px;
	@media(min-width:750px){
		padding: 0 0 90px;
	}
	.top{
		margin: 0 0 40px;
		 @media(min-width:750px){
			 margin: 0 0 80px;
			 padding: 0;
		 }
	}
	.content{
		width: 90%;
		margin: auto;
	}
	.item{
		margin-bottom: 20px;
		@media(min-width:750px){
			margin-bottom: 40px;
		}
	}
}
.faq{
	background: #000;
	padding: 0 0 50px;
	.top{
		margin: 0 0 50px;
	}
	.content{
		color: #fff;
		width: 90%;
		margin: auto;
	}
	.faq_head{
		display: flex;
		font-weight: bold;
		font-size: 1.7rem;
		margin-bottom: 30px;
		padding: 0 15px;
		@media(min-width:750px){
			align-items: center;
			font-size: 2.7rem;
			margin-bottom: 60px;
		}
	}
	.faq_head .icon{
		content:"";
		flex-shrink: 0;
		background: url(/template/default/img/sp/ersl/faq_g.png) no-repeat center top;
		background-size: 100% auto;
		aspect-ratio:1/1;
		width: 40px;
		display: block;
		margin-right: 10px;
		@media(min-width:750px){
			width: 80px;
		}
	}
	.faq_body{
		border-radius:10px;
		background: #262626;
		display: flex;
		font-size: 1.7rem;
		padding: 15px;
		margin:-10px 0 30px;
		@media(min-width:750px){
			font-size: 2.7rem;
			padding: 20px;
		}
		p{
			margin-bottom: 10px;
		}
	}
	.faq_body .icon{
		content:"";
		flex-shrink: 0;
		background: url(/template/default/img/sp/ersl/faq_a.png) no-repeat center top;
		background-size: 100% auto;
		aspect-ratio:1/1;
		width: 40px;
		display: block;
		margin-right: 10px;
				@media(min-width:750px){
			width: 80px;
		}
	}
}
.howto{
	background: #000;
	.top{
		margin: 0 0 50px;
	}
	.img01{
		margin: 0 0 20px;
	}
	.content{
		width: 90%;
		margin: auto;
	}
	.desc{
		color: #eee;
		font-size: 1.7rem;
		@media(min-width:750px){
			font-size: 2.7rem;
		}
	}
	.note{
		color: #eee;	
		font-size: 1.1rem;
		@media(min-width:750px){
			font-size: 2rem;
		}	
	}

	.accordion_header {
		text-align: center;
		font-weight: bold;
		background: #EEBCBB;
		background: linear-gradient(0deg, rgba(238, 188, 187, 1) 0%, rgba(255, 235, 235, 1) 50%, rgba(238, 188, 187, 1) 100%);
		border-radius: 10px;
	  position: relative;
	  font-size: 1.7rem;
	  padding: 12px 0;
	  margin: 0 0 15px;
	  @media(min-width:750px){
			font-size: 3rem;
			padding: 20px 0;
		}
	}
	.accordion_content {
		display: none;
		color: #eee;
		border-radius:10px;
		background: #262626;
		display: flex;
		font-size: 1.4rem;
		padding: 15px;
		margin: 0 0 20px;
		@media(min-width:750px){
			font-size: 2.4rem;
		}
	}
	.accordion_header:nth-child(n + 1) {
	  margin-top: 20px;
	}
	.accordion_header::before{
	  position: absolute;
	  content: '';
	  top: 50%;
	  right: 25px;
	  width: 20px;
	  height: 1px;
	  background-color:#000;
	  transform: rotate(90deg);
	  transition: all .3s ease-in-out;
	}
	.accordion_header::after{
	  position: absolute;
	  content: '';
	  top: 50%;
	  right: 25px;
	  width: 20px;
	  height: 1px;
	  background-color:#000;
	  transition: all .3s ease-in-out;
	}
	.accordion_header.open::before {
	  transform: rotate(180deg);
	}
	.accordion_header.open::after {
	  opacity:0;
	}
	.list {
	  list-style: none;
	  counter-reset: custom-counter;
	  padding-left: 0;
	}
	
	.list li {
	  margin-bottom: 10px;
	  position: relative; 
	  padding-left: 20px; 
	  @media(min-width:750px){
		  padding-left: 40px;
	  }
	}
	
	.list li::before {
	  counter-increment: custom-counter;
	  content: counter(custom-counter);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 15px;       
	  height: 15px;     
	  background-color: #efc2c1; 
	  color: #262626;           
	  border-radius: 50%;   
	  font-weight: bold;
	  position: absolute;
	  left: 0;
	  top: 4px; 
	  @media(min-width:750px){
		  width: 30px;
		  height: 30px;
	}
	}
}
.ingredient{
	background: #000;
	padding: 50px 0 50px;
	.top{
		margin: 0 0 50px;
	}	
	.content{
		width: 90%;
		margin: auto;
	}
	.desc{
		color: #eee;
		font-size: 1.3rem;
		@media(min-width:750px){
			font-size: 2rem;
		}
	}	
}

.cta{
    background: #000;
    padding: 0 0 60px;
    .top{
        padding: 40px 0;
        @media(min-width:750px){
            padding: 80px 0;
        }
    }
    .img01{
        @media(min-width:750px){
			width: 90%;
            margin: 0 auto 0;
        }
    }
    .img02{
        margin-top: -37vw;
        @media(min-width:750px){
			width: 80%;
            margin: -280px auto 0;
        }
    }
    .button-group{
        margin: 40px 0 0;
        .btn-main{
            width: 80%;
            margin: 0 auto 10px;
        @media(min-width:750px){
			width: 70%;
			margin: 0 auto 20px;

        	}
        }
        .btn-sub{
            width: 80%;
            margin: 0 auto; 
            }
    }
}
@media(min-width:750px){
    .ersl{
        width: 750px;
        margin: auto;
        box-shadow: 0px 0px 15px -5px #4d4d4d;
        margin-bottom: 60px;
        overflow-y: hidden;
    }

}    



.fadeInRight,
.fadeInLeft,
.fadeIn {
	animation-duration:3s;

}
.fadeInRight {
    -webkit-animation-name: fadeInRight2;
    animation-name: fadeInRight2;
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft2;
    animation-name: fadeInLeft2;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}