@charset "utf-8";

main{
  width:800px;
  margin:auto;
}

main section:last-of-type{
  margin-bottom:100px;
}

main section .flex{
  justify-content: space-between;
  align-items: center;
}
main section .flex p{
  width:369px;
  height:300px;
  border-radius: 20px;
  display:flex;
  align-items: centerc;
  overflow:hidden;
}

main section .flex p img{
  width:100%;
  object-fit: cover;
}

main section .flex .container{
  animation-delay: 0.8s;
}
main section .flex .container .bg_h4{
  width:392px;
  height:72px;
  background-size:contain;
  display:flex;
  justify-content: center;
  text-align: center;
}
main .jelly .flex .container .bg_h4{
  background-image:url(../recipe/images/bg_h4_or.svg);
}
main .mushipan .flex .container .bg_h4{
  background-image:url(../recipe/images/bg_h4_yl.svg);
}

main section .flex .container .bg_h4 h4{
  font-size:25px;
  color:#FCFBF4;
  border-bottom:2px dotted #FCFBF4;
  padding:10px;
  height:28px;
  margin-top:4px;
}

main section .flex .container .bg_material{
  margin-top:30px;
  height:200px;
  display:flex;
}
main .jelly .flex .container .bg_material{
  background-color:rgba(241,155,80,.2);
}
main .mushipan .flex .container .bg_material{
  background-color:rgba(241,204,80,.2);
}
main section .flex .container .bg_material .material{
  margin:10px;
  border:2px solid #FCFBF4;
  width: 93.7%;
  padding:10px 20px;
}
main section .flex .container .bg_material .material h5{
  color:#F19B50;
  margin:5px 0;
  font-family:'ryo-gothic-plusn';
  font-size:15px;
}
main section .flex .container .bg_material .material h5 span:first-of-type{
  font-size:21px;
}
main section .flex .container .bg_material .material h5 span:first-of-type::before{
  content:"[";
  font-size:23px;
  padding-right:5px;
}
main section .flex .container .bg_material .material h5 span:first-of-type::after{
  content:"]";
  font-size:23px;
  padding:0 5px;
}
main section .flex .container .bg_material .material h5 span:last-of-type::before{
  content:"(";
  padding-right:5px;
}
main section .flex .container .bg_material .material h5 span:last-of-type::after{
  content:")";
  padding-left:5px;
}
main section .flex .container .bg_material .material dl{
  font-size:16px;
}
main section .flex .container .bg_material .material dl dt{
  float:left;
  clear: both;
  font-family:'ryo-gothic-plusn';
  color:#573D24;
  line-height:2em;
  font-size:14px;
}
main section .flex .container .bg_material .material dl dt::before{
  content:"■";
  font-size:11px;
  padding-right:5px;
}
main section .flex .container .bg_material .material dl dd{
  font-family:'ryo-gothic-plusn';
  color:#573D24;
  text-align: right;
  line-height:2em;
  font-size:14px;
}
main section .flex .container .bg_material .material dl dd::before{
  content:"・・・";
}

main section .howto{
  display:flex;
  width:100%;
  margin-top:42px;
}

main section .howto p{
  font-size:20px;
  color:#99BF8C;
  width:107px;
}
main section .howto p::before{
  content:"[";
  font-size:23px;
  padding-right:5px;
}
main section .howto p::after{
  content:"]";
  font-size:23px;
  padding-left:5px;
  margin-right:12px;
}

main section .howto dl dt{
  float:left;
  clear: both;
  width:36px;
  height:36px;
  background-color:#99BF8C;
  color:#FCFBF4;
  border-radius:50%;
  text-align: center;
  line-height: 36px;
  font-size:19px;
  padding-left:7px;
  padding-top:1px;
  box-sizing: border-box;
  margin-bottom:14px;
}
main section .howto dl dd::before{
  content:"";
  display: inline-block;
  background-color:#99BF8C;
  height:1px;
  width:64px;
  margin-right:8px;
  margin-bottom: 4px;
}

main section .howto dl dd{
  line-height: 36px;
  margin-bottom:14px;
  font-family:'ryo-gothic-plusn';
  font-size:14px;
  width:110%;
}

main .bgStripe2{
  background-image:url(../images/bg_stripe.svg);
  background-size:10%;
  height:20px;
  width:100%;
  margin:100px 0;
}

/* responsive */

@media screen and (max-width:768px) {
  main{
    width:90%;
  }

  img{
    max-width: 100%;;
  }
  main section .flex{
    display: block;
    width:100%;
    margin:auto;
  }
  main section .flex p{
    width:100%;
  }
  main section .flex .container .bg_h4{
    width:90%;
    margin:auto;
    background-position: center;
    background-size:contain;
    background-repeat: no-repeat;
    margin-top: 10px;
  }
  main section .flex .container .bg_material{
    height:100%;
    margin-top:10px;
  }
  main section .flex .container .bg_material .material dl dt{
    float:none;
    line-height: 0.8em;
  }
  main section .flex .container .bg_material .material dl{
    margin-top:16px;
  }
  
  main section .howto dl dd{
    width:100%;
  }
  main section .howto{
    display:block;
    margin-top:22px;
  }
  main section .howto p{
    margin-bottom:8px;
  }
  main section .howto dl dt{
    margin-right:10px;
  }
  main section .howto dl dd{
    line-height:1.6em;
    margin-bottom: 10%;
  }
  main section .howto dl dd::before{
    display:none;
  }

  main .bgStripe2{
    margin:15vw 0;
  }
}