@charset "utf-8";
/*
Theme Name: Nonotory
Author: PRETAKE
Version: 1.0.0
*/
/********************************************************
投稿ページ
********************************************************/
#post h1 {
  font-size: 2.4rem;
  font-weight: bold!important;
}
@media screen and (min-width:768px) {
  .recipe_title {
    background-color: #b61119;
    color: #fff;
    font-weight: bold;
    margin-top: 2em;
    padding: 0.6em 0.8em 0.4em;
  }
  .recipe_box {
    margin-bottom: 5rem;
  }
  .recipe_box .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .recipe_box .flex .left {
    float: left;
    width: 50%;
    padding-right: 2%;
    box-sizing: border-box;
  }
  .recipe_box .flex .left.border {
    border-right: 1px dotted #ccc;
  }
  .recipe_box .flex .right {
    float: right;
    width: 50%;
    padding-left: 2%;
    box-sizing: border-box;
  }
  .recipe_box p {
    margin: 0;
    padding: 0;
    line-height: 2;
  }
  .recipe_box .image img {
    width: 100%;
    height: auto;
  }
  .recipe_box table {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #ccc;
  }
  .recipe_box th,
  .recipe_box td {
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid #ccc;
  }
  .recipe_box th {
    text-align: left;
  }
  .recipe_box td {
    text-align: right;
  }
  .recipe_box ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* .recipe_box li {
    width: 23.5%;
    margin: 0;
    margin-right: 2%;
    padding: 0;
  }
  .recipe_box li:nth-child(4n) {
    margin-right: 0;
  }
  .recipe_box li:nth-child(n+5) {
    margin-top: 3rem;
  } */
  .recipe_box li h4:after {
    content: "STEP.1";
    color: #b61119;
  }
  .recipe_box li:nth-child(2) h4:after {
    content: "STEP.2";
  }
  .recipe_box li:nth-child(3) h4:after {
    content: "STEP.3";
  }
  .recipe_box li:nth-child(4) h4:after {
    content: "STEP.4";
  }
  .recipe_box li:nth-child(5) h4:after {
    content: "STEP.5";
  }
  .recipe_box li:nth-child(6) h4:after {
    content: "STEP.6";
  }
  .recipe_box li:nth-child(7) h4:after {
    content: "STEP.7";
  }
  .recipe_box li:nth-child(8) h4:after {
    content: "STEP.8";
  }
  .recipe_box li:nth-child(9) h4:after {
    content: "STEP.9";
  }
  .recipe_box li:nth-child(10) h4:after {
    content: "STEP.10";
  }
  .recipe_box li:nth-child(11) h4:after {
    content: "STEP.11";
  }
  .recipe_box li:nth-child(12) h4:after {
    content: "STEP.12";
  }
  .recipe_box li:nth-child(13) h4:after {
    content: "STEP.13";
  }
  .recipe_box li:nth-child(14) h4:after {
    content: "STEP.14";
  }
  .recipe_box li:nth-child(15) h4:after {
    content: "STEP.15";
  }
  .recipe_box li:nth-child(16) h4:after {
    content: "STEP.16";
  }
  .recipe_box li:nth-child(17) h4:after {
    content: "STEP.17";
  }
  .recipe_box li:nth-child(18) h4:after {
    content: "STEP.18";
  }
  .recipe_box li:nth-child(19) h4:after {
    content: "STEP.19";
  }
  .recipe_box li:nth-child(20) h4:after {
    content: "STEP.20";
  }
  .recipe_btn {
    text-align: center;
  }
  .recipe_btn a {
    position: relative;
    display: inline-block;
    width: 360px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 6rem;
    background: #b61119;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .recipe_btn a:hover {
    opacity: .7;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .recipe_btn a:after {
    position: absolute;
    font-family: 'Font Awesome 5 Free' !important;
    content: "\f054";
    font-weight: 900;
    top: 50%;
    right: 2em;
    margin-top: -.5em;
    line-height: 1;
  }
}
@media screen and (max-width:767px) {
  .recipe_box {
    margin-bottom: 3rem;
  }
  .recipe_box .flex .left {
    margin-bottom: 1rem;
  }
  .recipe_box .flex .right {
    margin-bottom: 1rem;
  }
  .recipe_box p {
    margin: 0;
    padding: 0;
    line-height: 2;
  }
  .recipe_box .image img {
    width: 100%;
    height: auto;
  }
  .recipe_box table {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #ccc;
  }
  .recipe_box th,
  .recipe_box td {
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid #ccc;
  }
  .recipe_box th {
    text-align: left;
  }
  .recipe_box td {
    text-align: right;
  }
  .recipe_box ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* .recipe_box li {
    margin: 0;
    padding: 0;
  }
  .recipe_box li:nth-child(n+2) {
    margin-top: 3rem;
  } */
  .recipe_box li h4:after {
    content: "STEP.1";
    color: #b61119;
  }
  .recipe_box li:nth-child(2) h4:after {
    content: "STEP.2";
  }
  .recipe_box li:nth-child(3) h4:after {
    content: "STEP.3";
  }
  .recipe_box li:nth-child(4) h4:after {
    content: "STEP.4";
  }
  .recipe_box li:nth-child(5) h4:after {
    content: "STEP.5";
  }
  .recipe_box li:nth-child(6) h4:after {
    content: "STEP.6";
  }
  .recipe_box li:nth-child(7) h4:after {
    content: "STEP.7";
  }
  .recipe_box li:nth-child(8) h4:after {
    content: "STEP.8";
  }
  .recipe_box li:nth-child(9) h4:after {
    content: "STEP.9";
  }
  .recipe_box li:nth-child(10) h4:after {
    content: "STEP.10";
  }
  .recipe_box li:nth-child(11) h4:after {
    content: "STEP.11";
  }
  .recipe_box li:nth-child(12) h4:after {
    content: "STEP.12";
  }
  .recipe_box li:nth-child(13) h4:after {
    content: "STEP.13";
  }
  .recipe_box li:nth-child(14) h4:after {
    content: "STEP.14";
  }
  .recipe_box li:nth-child(15) h4:after {
    content: "STEP.15";
  }
  .recipe_box li:nth-child(16) h4:after {
    content: "STEP.16";
  }
  .recipe_box li:nth-child(17) h4:after {
    content: "STEP.17";
  }
  .recipe_box li:nth-child(18) h4:after {
    content: "STEP.18";
  }
  .recipe_box li:nth-child(19) h4:after {
    content: "STEP.19";
  }
  .recipe_box li:nth-child(20) h4:after {
    content: "STEP.20";
  }
  .recipe_btn {
    text-align: center;
  }
  .recipe_btn a {
    display: inline-block;
    width: 80%;
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 6rem;
    background: #b61119;
  }
  .recipe_btn a:after {
    position: absolute;
    content: "\f105";
    font-family: "FontAwesome";
    top: 50%;
    right: 2em;
    margin-top: -.5em;
    line-height: 1;
  }
}