@charset "utf-8";

/* 縦タイトル */

.block-top-vert-ttl-content {
  position: relative;
}

.block-top-vert-ttl-content h2 {
  margin: 0;
  padding: 0;
  font-family: var(--ff-serif);
  font-weight: 400;
}

@media all and (min-width: 768px) {
  .block-top-vert-ttl-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .block-top-vert-ttl-content h2 {
    display: flex;
    align-items: flex-end;
    width: 100px;
    font-size: 2.8rem;
    line-height: 1;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .block-top-vert-ttl-content .block-top-vert-ttl-content-body + h2 {
    align-items: flex-start;
  }

  .block-top-vert-ttl-content-body {
    width: calc(100% - 100px);
    padding-top: 40px;
  }
}

@media all and (max-width: 767px) {
  .block-top-vert-ttl-content h2 {
    font-size: 2rem;
    text-align: center;
  }

  .block-top-vert-ttl-content-body {
    margin-top: 32px;
  }
}

.block-recipe-detail {
  h1 {
    font-family: var(--ff-serif);
    font-weight: 400;
  }
}

/* レシピ詳細 */

.block-recipe-detail-time_calorie {
  font-family: var(--ff-num);

  .list-time,
  .list-calorie {
    display: flex;
    align-items: center;
    position: relative;
    height: 21px;
    padding-left: 22px;
    line-height: 1;

    > span + span {
      margin-left: 8px;
    }
  }

  .list-time::before,
  .list-calorie::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .list-time::before {
    width: 14px;
    height: 14px;
    margin-top: -8px;
    background-image: url(../../img/recipe/icon_time.png);
  }

  .list-calorie::before {
    width: 12px;
    height: 16px;
    margin-top: -9px;
    background-image: url(../../img/recipe/icon_calorie.png);
  }

  .list-time::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -17px;
    width: 1px;
    height: 16px;
    margin-top: -8px;
    background-color: var(--cl-gr-1);
  }
}

.block-recipe-detail-main-left {
  .main-img img {
    display: block;
    width: 100%;
    height: auto;
  }

  .main-comment {
    margin-top: 32px;
    font-size: 1.8rem;
    line-height: 1.666;
  }

  .main-stars {
    margin-top: 33px;
    padding-top: 38px;
    border-top: 1px solid var(--cl-gr-1);
  }

  .main-stars-item {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    line-height: 1.1;

    dd {
      letter-spacing: 0.2em;
      color: #eaeaea;
    }

    dd[data-rate="5"] span,
    dd[data-rate="4"] span:nth-child(-n + 4),
    dd[data-rate="3"] span:nth-child(-n + 3),
    dd[data-rate="2"] span:nth-child(-n + 2),
    dd[data-rate="1"] span:nth-child(-n + 1) {
      color: #f2e11a;
    }
  }
}

.block-recipe-detail-main-right {
  .main-ingredients {
    background-color: var(--cl-gn-bg);

    .main-ingredients-ttl {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 1;

      div:first-child {
        font-size: 2.4rem;
        font-weight: 700;
      }

      div.servings {
        display: flex;
        align-items: center;
        position: relative;
        height: 24px;
        font-size: 1.8rem;
        font-family: var(--ff-num);
      }

      div.servings::before {
        content: "";
        display: inline-block;
        position: relative;
        width: 17px;
        height: 19px;
        margin-right: 10px;
        background-image: url(../../img/recipe/icon_servings.png);
        background-position: center left;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }

    .main-ingredients-list {
      .main-ingredients-list-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid var(--cl-gr-1);
        line-height: 1.333;
      }

      dt {
        flex-shrink: 0;

        .tag-allergy {
          display: inline-block;
          position: relative;
          height: 23px;
          margin-left: 10px;
          padding: 0 5px 0 6px;
          border: 1px solid #999999;
          background-color: #ffffff;
          color: var(--cl-gr-txt);
          font-size: 1.3rem;
          line-height: 23px;
          letter-spacing: 0.04em;
        }
      }

      dd {
        flex-shrink: 1;
        padding-left: 16px;
        /* 早原追加分 */
        /* font-family: var(--ff-num); */
      }
    }

    .main-ingredients-allergy {
      background-color: #f7f8f7;
      mix-blend-mode: multiply;

      .ttl {
        font-size: 1.8rem;
        text-align: center;
        line-height: 1.1;
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: 8px -10px 0 0;

        li {
          margin: 10px 10px 0 0;
          display: inline-block;
          position: relative;
          height: 23px;
          margin-left: 10px;
          padding: 0 5px 0 6px;
          border: 1px solid #999999;
          background-color: #ffffff;
          color: var(--cl-gr-txt);
          font-size: 1.3rem;
          line-height: 23px;
          letter-spacing: 0.04em;

          span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 23px;
            padding: 0 5px 0 6px;
            border: 1px solid #999999;
            background-color: #ffffff;
            color: var(--cl-gr-txt);
            font-size: 1.3rem;
            line-height: 1;
            letter-spacing: 0.04em;
          }
        }
      }
    }
  }
}

@media all and (min-width: 768px) {
  .block-recipe-detail {
    padding-top: 90px;

    h1 {
      font-size: 3.4rem;
      line-height: 1.33;
    }
  }

  .block-recipe-detail-time_calorie {
    display: flex;
    align-items: center;
    margin-top: 12px;

    .list-calorie {
      margin-left: 33px;
    }
  }

  .block-recipe-detail-main {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
  }

  .block-recipe-detail-main-left {
    width: 726px;

    .main-stars {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .main-stars-item {
      width: 50%;

      &:not(:nth-child(-n + 2)) {
        margin-top: 18px;
      }

      dt {
        width: 120px;
      }

      dd {
        width: calc(100% - 120px);
      }
    }
  }

  .block-recipe-detail-main-right {
    width: 490px;

    .main-ingredients {
      padding: 40px;

      .main-ingredients-list {
        margin-top: 24px;
      }

      .main-ingredients-allergy {
        margin-top: 40px;
        padding: 24px;
      }
    }
  }
}

@media all and (max-width: 767px) {
  .block-recipe-detail {
    padding-top: 38px;

    h1 {
      font-size: 2.8rem;
      line-height: 1.214;
    }
  }

  .block-recipe-detail-time_calorie {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 14px;

    .list-calorie {
      margin-top: 3px;
    }
  }

  .block-recipe-detail-main {
    margin-top: 32px;
  }

  .block-recipe-detail-main-left {
    .main-img {
      /* margin: 0 -20px; */
      /* 早原追加分 */
      width: 100%;
      margin: 0;
    }

    .main-stars-item {
      &:not(:nth-child(-n + 1)) {
        margin-top: 17px;
      }

      dt {
        width: 137px;
      }

      dd {
        width: calc(100% - 137px);
      }
    }
  }

  .block-recipe-detail-main-right {
    margin: 40px -20px 0;

    .main-ingredients {
      padding: 32px 20px 20px;

      .main-ingredients-list {
        margin-top: 10px;
      }

      .main-ingredients-allergy {
        margin-top: 30px;
        padding: 16px 10px;
      }
    }
  }
}

.block-recipe-detail-howtocook-list {
  font-size: 1.8rem;
  line-height: 1.666;

  ul {
    counter-reset: listnum;

    li {
      /* 早原追加分 */
      /* display: flex; */
      align-items: center;
      min-height: 40px;
      position: relative;
      padding-left: 56px;
    }

    li::before {
      content: counter(listnum);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      padding-left: 2px;
      border-radius: 40px;
      background-color: var(--cl-gn);
      color: #ffffff;
      font-size: 1.8rem;
      font-family: var(--ff-num);
      font-weight: 600;
      text-align: center;
      line-height: 1;
      letter-spacing: 0.04em;
      counter-increment: listnum;
    }
  }
}

.block-recipe-detail-howtocook-point {
  border: 1px solid var(--cl-gr-1);

  dt {
    font-size: 2rem;
  }

  dd {
    position: relative;
    font-size: 1.8rem;
  }
}

@media all and (min-width: 768px) {
  .block-recipe-detail-howtocook {
    margin-top: 100px;
  }

  .block-recipe-detail-howtocook-list {
    li + li {
      margin-top: 25px;
    }
  }

  .block-recipe-detail-howtocook-point {
    display: flex;
    align-items: center;
    margin-top: 80px;
    padding: 40px 40px 40px 80px;

    dt {
      flex-shrink: 0;
      padding-right: 80px;
    }

    dd {
      flex-shrink: 1;
      padding-left: 80px;
      line-height: 1.666;

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background-color: var(--cl-gr-1);
      }
    }
  }
}

@media all and (max-width: 767px) {
  .block-recipe-detail-howtocook {
    margin-top: 80px;
  }

  .block-recipe-detail-howtocook-list {
    line-height: 1.4444;

    li + li {
      margin-top: 20px;
    }
  }

  .block-recipe-detail-howtocook-point {
    margin-top: 40px;
    padding: 23px;

    dt {
      flex-shrink: 0;
      padding-bottom: 15px;
    }

    dd {
      padding-top: 14px;
      border-top: 1px solid var(--cl-gr-1);
      line-height: 1.444;
    }
  }
}

@media all and (min-width: 768px) {
  .block-recipe-detail-new_recipe {
    margin-top: 100px;

    .ttl-h2 {
      margin-bottom: 44px;
    }

    .block-recipe-list {
      margin-top: 0;
    }
  }
}

@media all and (max-width: 767px) {
  .block-recipe-detail-new_recipe {
    margin-top: 80px;

    .ttl-h2 {
      margin-bottom: 37px;
    }

    .block-recipe-list {
      margin-top: 0;
    }
  }
}

.block-recipe-detail-category-list-items {
  li {
    border-bottom: 1px solid var(--cl-gr-1);

    a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      font-size: 1.8rem;

      .list-img {
        width: 80px;
        overflow: hidden;

        img {
          display: block;
          width: 100%;
          height: auto;
        }
      }

      .list-ttl {
        width: calc(100% - 104px);
      }
    }
  }
}

@media all and (min-width: 768px) {
  .block-recipe-detail-category {
    margin-top: 100px;

    .ttl-h2 {
      margin-bottom: 44px;
    }
  }

  .block-recipe-detail-category-list-items {
    display: flex;

    li {
      width: calc((100% - 84px) / 4);
      border-top: 1px solid var(--cl-gr-1);

      a {
        .list-img {
          img {
            transition: transform 0.3s;
          }
        }
      }

      a:hover {
        .list-img {
          img {
            transform: scale(1.07);
          }
        }
      }
    }

    li:not(:nth-child(4n)) {
      margin-right: 28px;
    }
  }
}

@media all and (max-width: 767px) {
  .block-recipe-detail-category {
    margin-top: 80px;

    .ttl-h2 {
      margin-bottom: 37px;
    }
  }

  .block-recipe-detail-category-list-items {
    border-top: 1px solid var(--cl-gr-1);
  }
}

/* 早原追加分 */
.main-img {
  width: 80%;
  margin: 0 10%;
}

@media all and (max-width: 767px) {
}