@charset "UTF-8";
.bg_recipe02 .photo {
  float: left;
  width: 564px;
}
.bg_recipe02 .photo img {
  width: 100%;
  height: auto;
}
.bg_recipe02 .bg_memo01 {
  float: right;
  width: 425px;
  font-size: 1.125rem;
  line-height: 1.9em;
}
.bg_recipe02 .photo,
.bg_recipe02 .bg_memo01 {
  margin-bottom: 2.5em;
}
.bg_recipe02 .title {
  display: none;
}

.step01 {
  clear: both;
  float: right;
  width: 400px;
  background-color: #eee8e0;
  padding: 2.5em 2em 2.5em;
}
.step01 .line {
  display: none;
}
.step01 .material {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.step01 .material h4 {
  font-size: 1.125rem;
  font-weight: bold;
  text-align: center;
  background-color: transparent;
  padding: 0;
  margin-bottom: 1.2em;
}
.step01 .material table {
  margin-bottom: 0;
  border: none;
}
.step01 .material table th, .step01 .material table td {
  border: none;
  padding: 0;
  display: inline;
  font-size: 1rem;
}
.step01 .material table tr {
  padding: 1em 0;
}
.step01 .material table tr td:last-child:before {
  content: "... ";
}

.step01 + br {
  display: none;
}

.step01 + br + .line {
  display: none;
}

.step02 {
  float: left;
  width: 565px;
}
.step02 h4 {
  font-size: 1.25rem;
  font-weight: normal;
  border-top: 1px dotted #888;
  border-bottom: 1px dotted #888;
  background-color: transparent;
  padding: 0.6em 0;
  margin-bottom: 1.7em;
}
.step02 ol {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.step02 ol li {
  font-size: 1.125rem;
}
.step02 ol li:before {
  font-weight: normal;
}

.step01,
.step02 {
  margin-bottom: 3em;
}

#conts .step02 ol li {
  margin-bottom: 1em;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.8em;
}
#conts .step02 ol li:before {
  content: counter(orderd_num) ". ";
  font-weight: normal;
}

.commodity {
  clear: both;
  background: url(../img/bg_cloth.jpg) repeat center top;
  padding: 3em 0 1.5em;
}
.commodity h4 {
  font-size: 1.625rem;
  font-weight: normal;
  background-color: transparent;
  padding: 0;
  line-height: 1;
  margin-bottom: 1.2em;
}

#conts .commodity ul {
  letter-spacing: -.4em;
  width: -webkit-calc(1024px + 3%);
  width: calc(1024px + 3%);
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#conts .commodity ul li {
  letter-spacing: normal;
  display: inline-block;
  width: 33.3333333;
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
  padding: 0 1.5%;
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 2em;
}
#conts .commodity ul li img {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 0.7em;
}
#conts .commodity ul li:before {
  display: none;
}

@media screen and (max-width: 768px) {
  .bg_recipe02 .photo {
    width: 45%;
  }
  .bg_recipe02 .bg_memo01 {
    width: 53%;
  }

  .step01 {
    float: none;
    width: 100%;
    max-width: 370px;
    margin: 0 auto 2em;
  }

  .step02 {
    float: none;
    width: auto;
    margin-bottom: 2em;
  }

  .commodity {
    margin-left: -15px;
    margin-right: -15px;
  }

  #conts .commodity ul {
    width: 97%;
  }
  #conts .commodity ul li {
    width: 50%;
    margin-bottom: 1.5em;
  }
  #conts .commodity ul li img {
    margin-bottom: 0.3em;
  }
}
@media screen and (max-width: 540px) {
  .bg_recipe02 .photo {
    float: none;
    width: auto;
    margin-bottom: 1em;
  }
  .bg_recipe02 .bg_memo01 {
    float: none;
    width: auto;
  }
}

/*# sourceMappingURL=recipe_inner.css.map */