img{
  max-width: 100%;
  height: auto;
}

p,span{
  font-size: 1.5rem;
  line-height: 1.533;
}

@media screen and (max-width: 767px) {
  p, span,li,figcaption{
    font-size: 1.4rem;
  }
}

.recipeContentInner{
  max-width: 1110px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .recipeContentInner{
    max-width: 86.66%;
  }
}

.kv img{
  width: 100%;
}

.recipeContainer{
  margin-top: 113px;
  padding-bottom: 80px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .recipeContainer{
    margin-top: 85px;
    padding-bottom: 35px;
    position: relative;
  }
}

.recipeContainer.first{
  margin-top: 90px;
}

@media screen and (max-width: 767px) {
  .recipeContainer.first{
    margin-top: 45px;
  }
}

.recipeContainer::after{
  content: '';
  display: block;
  width: 100%;
  height: 79%;
  position: absolute;
  top: 21%;
  background-color: #f4f3f0;
  z-index: -1;
}

@media screen and (max-width: 767px){
  .recipeContainer::after{
    top: 45vw;
    height: calc(100% - 45vw);
  }
}

.recipeInfoWrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 767px){
  .recipeInfoWrap{
    flex-direction: column-reverse;
    margin-top: 30px;
  }
}

.recipeContainer.first .recipeTitle{
  margin-bottom: -35px;
}

@media screen and (max-width: 767px) {
  .recipeContainer.first .recipeTitle{
    margin-bottom: auto;
    text-align: center;
  }
  .recipeTitle{
    text-align: center;
  }
  .recipeContainer .recipeTitle img{
    width: auto;
    height: 6vw;
  }
}

.recipeInfoMaterial{
  padding-top: 60px;
  max-width: 425px;
  margin-right: 20px;
}

@media screen and (max-width: 767px){
  .recipeInfoMaterial{
    margin-right: 0;
    padding-top: 35px;
  }
}

.recipeContainer.first .recipeInfoMaterial{
  padding-top: 100px;
}

@media screen and (max-width: 767px){
  .recipeContainer.first .recipeInfoMaterial{
    padding-top: 35px;
  }
}

.dotLine{
  flex: 1;
  display: block;
  position: relative;
  margin: 0 10px;
}

.dotLine::after{
  content: '';
  width: 100%;
  height: 1px;
  background: url(../img/dot.png);
  background-repeat: repeat-x;
  position: absolute;
  top: 50%;
}

.recipeInfoList{
  margin: 10px auto 15px;
  padding-left: 10px;
}
.recipeInfoList:nth-of-type(2){
  margin: 0 auto 20px;
}

@media screen and (max-width: 767px) {
  .recipeInfoList{
    margin: 15px auto;
  }
}

.recipeInfoItem{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.recipeInfoItem span{
  line-height: 1.8;
}

.recipeInfoGroup{
  font-weight: 600;
}

.recipeHowto{
  margin-top: 47px;
}

@media screen and (max-width: 767px) {
  .recipeHowto{
    margin-top: 20px;
  }
}

.recipeSubtitle{
  display: block;
}

.recipeStepsListWrap{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

@media screen and (max-width: 767px){
  .recipeStepsListWrap{
    display: block;
  }
}

.recipeStepsList{
  width: 50%;
  padding-left: 2rem;
  padding-right: 40px;
}

.recipeStepsList:nth-of-type(2n){
  margin-left: 20px;
}

@media screen and (max-width: 767px){
  .recipeStepsList{
    width: 100%;
    padding-left: 2rem;
    padding-right: 0;
    margin-left: auto;
  }
  .recipeStepsList:nth-of-type(2n){
    margin-left: 0;
  }
}

.recipeStepsList.full{
  width: 100%;
}
.recipeStepsList:nth-of-type(2){
  padding-right: 0;
}

.recipeStepsItem{
  text-indent: -2rem;
  margin-bottom: 5px;
}

.recipeStepsItem img{
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  margin-top: 4px;
}

@media screen and (max-width: 767px) {
  .recipeStepsItem img{
    width: 14px;
    height: 14px;
  }
}

.recipeStepsFigWrap.column2,
.recipeStepsFigWrap.column3,
.recipeStepsFigWrap.column4{
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 44px;
}

.recipeStepsFigWrap.column2 .recipeStepsFig{
  margin-right: 8.31%;
}
.recipeStepsFigWrap.column2 .recipeStepsFig:nth-child(2){
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .recipeStepsFigWrap.column2 .recipeStepsFig{
    margin-right: auto;
  }
}

.recipeStepsFigWrap.column3{
  padding: 0 4.5%;
}

.recipeStepsFigWrap.column3 .recipeStepsFig{
  margin-right: 8.31%;
}

.recipeStepsFigWrap.column3 .recipeStepsFig:nth-child(3){
  margin-right: 0;
}


@media screen and (max-width: 767px) {
  .recipeStepsFigWrap.column3 .recipeStepsFig{
    margin-right: auto;
  }
}

@media screen and (max-width: 767px) {
  .recipeStepsFigWrap.column3{
    padding: 0 3%;
  }
}

.recipeStepsFigWrap.column4{
  padding: 0 2.7%;
}

.recipeStepsFigWrap.column4 .recipeStepsFig{
  margin-right: 4%;
}
.recipeStepsFigWrap.column4 .recipeStepsFig:last-child{
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .recipeStepsFigWrap.column4 .recipeStepsFig{
    margin-right: auto;
  }
}

.recipeStepsFig{
  position: relative;
}

@media screen and (max-width: 767px) {
  .recipeStepsFig{
    display: flex;
    align-items: center;
  }
  .recipeStepsFig img{
    width: 50%;
    margin-right: 5%;
  }
}

.recipeStepsFigWrap.column3 .recipeStepsFig{
  max-width: 280px;
}

.recipeStepsFigWrap.column4 .recipeStepsFig{
  max-width: 229px;
}


@media screen and (max-width: 767px) {
  .recipeStepsFigWrap.column3 .recipeStepsFig{
    max-width: 100%;
  }
  .recipeStepsFigWrap.column4 .recipeStepsFig{
    max-width: 100%;
  }
  
}

.recipeStepsFig::before{
  content: '';
  position: absolute;
  top: -7%;
  left: -6%;
  width: 93px;
  height: 95px;
}

@media screen and (max-width: 767px){
  .recipeStepsFig::before{
    top: -7%;
    left: -6%;
    width: 60px;
    height: 60px;
  }
}

.recipeStepsFig:nth-of-type(1):before{
  background: url(../img/point01.png);
  background-size: 100%;
}
.recipeStepsFig:nth-of-type(2):before{
  background: url(../img/point02.png);
  background-size: 100%;
}
.recipeStepsFig:nth-of-type(3):before{
  background: url(../img/point03.png);
  background-size: 100%;
}
.recipeStepsFig:nth-of-type(4):before{
  background: url(../img/point04.png);
  background-size: 100%;
}
.recipeStepsFig:nth-of-type(5):before{
  background: url(../img/point05.png);
  background-size: 100%;
}

.recipeStepsFig figcaption{
  margin-top: 8px;
}

@media screen and (max-width: 767px) {
  .recipeStepsFig figcaption{
    margin-top: 0;
  }
}

.recipePointWrap{
  width: 55%;
  margin: 40px auto 0;
}

@media screen and (max-width: 767px) {
  .recipePointWrap{
    width: 90%;
  }
}

/* utility */
.u-mb0{
  margin-bottom: 0;
}

/* .u-alignStart{
  align-items: flex-start;
} */