body.home {
  .slides {
    width: 100%;
    height: calc(100vh - 200px);
    position: relative;
    @media only screen and (max-width: 800px) {
      height: calc(100vh - 164px);
    }
    > div {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      &:nth-child(1) {
        background-image: url('../../image/top/slide/1.jpg');
      }
      &:nth-child(2) {
        background-image: url('../../image/top/slide/2.jpg');
      }
    }
    &:after {
      content: '';
      display: block;
      width: 455px;
      height: 220px;
      background-image: url("../../image/top/lead.png");
      background-size: 455px 220px;
      background-position: center;
      background-repeat: no-repeat;
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        background-image: url("../../image/top/lead@2x.png");
      }
      position: absolute;
      bottom: 46px;
      right: 0;
      z-index: 5;
      @media only screen and (max-width: 800px) {
        width: 234px;
        height: 138px;
        background-image: url('../../image/top/lead-sp@2x.png');
        background-size: 234px 138px;
        bottom: 0;
        right: 0;
      }
    }
  }
  .latest_news {
    background: var(--gray);
    color: white;
    height: 120px;
    display: flex;
    align-items: center;
    padding-left: 57px;
    padding-right: 38px;
    /* transition-duration: 0.1s */
    &:hover {
      background: var(--black);
      /* transition-duration: 0.1s */
    }
    &:after {
      content: 'READ MORE >';
      margin-left: auto;
      font-size: 12px;
      letter-spacing: 0.081em;
      margin-left: 30px;
      width: 120px;
      @media only screen and (max-width: 800px) {
        margin-left: 0;
        width: auto;
      }
    }
    @media only screen and (max-width: 800px) {
      display: block;
      padding: 15px;
      height: auto;
    }
    .label {
      border-right: 1px solid white;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      font-weight: 900;
      width: 75px;
      margin-right: 35px;
      @media only screen and (max-width: 800px) {
        font-size: 13px;
        width: auto;
        padding-right: 15px;
        margin-right: 10px;
        height: 15px;
        line-height: 15px;
        display: inline-block;
      }
    }
    .date {
      width: 100px;
      margin-right: 30px;
      @media only screen and (max-width: 800px) {
        font-size: 13px;
      }
    }
    .label,
    .date {
      letter-spacing: 0.1em;
    }
    .title {
      line-height: 1.5em;
      letter-spacing: 0.03em;
      width: calc(100% - 385px);
      @media only screen and (max-width: 800px) {
        font-size: 12px;
        display: block;
        margin: 10px 0;
        width: auto;
      }
    }
  }
  section.about {
    padding: 76px;
    background: var(--yellow);
    @media only screen and (max-width: 800px) {
      padding: 15px;
    }
    .wrap {
      max-width: 960px;
      margin: 0 auto;
      /* 旧 `@extend .clf`（clearfix）をインライン展開。:after はブロック末尾に置いてある */
      min-height: 1px;
      position: relative;
      background-image: url("../../image/top/scene.png");
      background-size: 643px auto;
      background-position: left 0 top 0;
      background-repeat: no-repeat;
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        background-image: url("../../image/top/scene@2x.png");
      }
      @media only screen and (max-width: 1000px) {
        background: none;
      }
      >img {
        display: none;
        @media only screen and (max-width: 1000px) {
          display: block;
          width: 100%;
          height: auto;
          vertical-align: top;
        }
      }
      article {
        z-index: 2;
        background: white;
        color: var(--dark-gray);
        padding: 50px 54px;
        width: 432px;
        float: right;
        margin-top: 100px;
        @media only screen and (max-width: 1190px) {
          margin-top: 300px;
        }
        @media only screen and (max-width: 1000px) {
          margin-top: 0;
          width: auto;
        }
        @media only screen and (max-width: 800px) {
          width: auto;
          padding: 20px;
          margin-top: 15px;
        }
        h2 {
          font-size: 21px;
          letter-spacing: 0.07em;
          padding: 0;
          text-align: left;
          margin-bottom: 32px;
          @media only screen and (max-width: 800px) {
            font-size: 20px;
            margin-top: 7px;
            margin-bottom: 25px;
          }
        }
        p {
          font-size: 14px;
          letter-spacing: 0.08em;
          line-height: 28px;
          @media only screen and (max-width: 800px) {
            font-size: 12px;
            line-height: 2em;
          }
        }
        .button {
          margin-top: 32px;
          padding: 27px 31px;
          @media only screen and (max-width: 800px) {
            margin-top: 14px;
          }
          &:hover {
            background-color: var(--dark-gray);
          }
          .arrow {
            float: right;
          }
        }
      }
      &:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        font-size: 0.1em;
        line-height: 0;
      }
    }
  }
  section.recipe {
    min-height: 300px;
    padding-bottom: 100px;
    @media only screen and (max-width: 800px) {
      padding-bottom: 15px;
    }
    .wrap {
      background: white;
      max-width: 840px;
      margin: 0 auto;
      padding: 60px;
      @media only screen and (max-width: 800px) {
        margin: 0 15px;
        padding: 20px;
      }
      p {
        font-size: 18px;
        letter-spacing: 0.005em;
        line-height: 2.2em;
        color: var(--dark-gray);
        margin-bottom: 50px;
        @media only screen and (max-width: 800px) {
          font-size: 12px;
          line-height: 2em;
          margin-bottom: 20px;
        }
      }
      .button {
        font-size: 21px;
        letter-spacing: 0.025em;
        text-align: center;
        padding: 44px;
        &:hover {
          background-color: var(--dark-gray);
        }
        @media only screen and (max-width: 800px) {
          padding: 28px;
          >img {
            height: 14px;
            width: auto;
          }
        }
      }
    }
  }
}