@import url(./common/_variable.css);

/* 下層共通 */
/* ============================================ */

main {
  overflow: hidden;

  @media (max-width: 800px) {
    background-color: var(--main_c);
  }
}

.global-bg {
  background-color: var(--main_c);
}

.second__visual {
  width: 90%;
  margin: 0 auto;
  padding-top: 100px;

  @media (max-width: 480px) {
    padding-top: 80px;
  }
}

#contents {
  padding-bottom: 160px;

  @media (max-width: 600px) {
    padding-bottom: 50px;
  }
}

.area__contents {
  padding: 0 20px;
  box-sizing: border-box;
  color: #FFF;
  width: 80%;
  margin: 0 auto;

  @media (max-width: 600px) {
    padding: 0px;
    width: 90%;
  }

  a {
    color: var(--main_c);
    border-bottom: var(--main_c) solid 1px;

    &:hover {
      color: var(--hover_c);
      border-bottom: var(--hover_c) solid 1px;
      opacity: 1;
    }
  }
}

.area__contents--ttl {
  text-align: center;
  max-width: 500px;
  width: 80%;
  margin: 80px auto 60px;

  @media (max-width: 600px) {
    margin: 80px auto 30px;
  }

  .area__contents--ttl-blk {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
  }

  .area__contents--ttl-blk::before {
    content: "";
    background-image: url(../images/foodloss/cloud_left.png);
    width: 300px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -20%;
    left: -70%;

    @media (max-width: 896px) {
      width: 200px;
      top: -40%;
      left: -30%;
      z-index: -1;
    }

    @media (max-width: 600px) {
      width: 100px;
    }
  }

  .area__contents--ttl-blk::after {
    content: "";
    background-image: url(../images/foodloss/cloud_right.png);
    width: 300px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -50%;
    right: -70%;
    z-index: -1;

    @media (max-width: 896px) {
      width: 200px;
      bottom: -90%;
      right: -30%;

    }

    @media (max-width: 600px) {
      width: 100px;
    }

    @media (max-width: 480px) {
      bottom: -190%;
    }
  }

  .area__contents--ttl-blk div {
    margin-right: 10px;
    position: relative;

    &::before {
      content: "";
      background-image: url(../images/foodloss/ttl_wh_rub.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 100px;
      height: 50px;
      position: absolute;
      top: -25%;
      left: 50%;
      transform: translateX(-50%);

      @media (max-width: 600px) {
        top: -30%;
        width: 80px;
      }
    }
  }

}

.area__contents--section {
  /* padding: 40px 0 0; */
  /* width: 80%;
  margin: 0 auto; */

  @media (max-width: 896px) {
    padding: 0;
  }

  .ttl_img {
    position: relative;
    z-index: 3;
  }

  .txt_section {
    /* width: 90%; */
    margin: auto;
    font-size: 2.3rem;
    line-height: 1.7em;
    text-align: justify;
    padding: 40px 0 0;

    @media (max-width: 1281px) {
      font-size: clamp(1.4rem, 1.875vw, 2.4rem);
    }

    @media (max-width: 896px) {
      width: 100%;
      padding: 20px 0 0;
    }
  }

  .kome_content {
    width: 60%;
    margin: auto;
    text-align: right;
    font-size: 1.1rem;
    padding: 5px 0 0;
    line-height: 1.5em;

    @media (max-width: 896px) {
      width: 80%;
    }

    .kome_kome {
      display: inline-block;
      text-align: left;
      text-indent: -1em;
      padding: 0 0 0 1em;
    }
  }
}

/* エコ時代の暮らし */
.area__eco {
  background-color: var(--point_c);
  position: relative;
  padding-bottom: 100px;

  @media (max-width: 600px) {
    padding-bottom: 60px;
  }
}

.area__eco::before {
  content: "";
  background-color: var(--main_c);
  background-image: url(../images/foodloss/weavw_yellow.png);
  width: 100%;
  height: 140px;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: -6%;
  left: 50%;
  transform: translateX(-50%);

  @media (max-width: 600px) {
    height: 100px;
    top: -9%;
  }
}

.eco-ttl {
  @media (max-width: 600px) {
    /* margin-bottom: 60px; */
  }
}

.eco-ttl::before {
  top: -80% !important;

  @media (max-width: 480px) {}

}

.eco-ttl::after {
  bottom: -50% !important;

  @media (max-width: 480px) {
    bottom: -220% !important;
  }

}

.eco-ttl img:first-child {
  margin-right: 10px;
  bottom: 0 !important;
}

.eco-txt {
  color: var(--main_c) !important;
  width: 100% !important;

  /* @media (max-width: 600px) {
    width: 100% !important;
  } */
}

.eco-section {
  padding: 0 0 60px 0 !important;
  position: relative;
  z-index: 3;

  @media (max-width: 600px) {
    padding: 0 0 30px 0 !important;
  }
}

/* 共通セクション */
.area__common {
  background-color: #fff;
  position: relative;

  &::after {
    content: "";
    background-image: url(../images/foodloss/weavw_wh.png);
    width: 100%;
    height: 140px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -17%;
    left: 50%;
    transform: translateX(-50%);

    @media (max-width: 600px) {
      height: 100px;
      top: -4%;
    }
  }
}

.common-ttl {
  position: relative;
  z-index: 3;
  padding-top: 100px;
  width: 80%;
  margin: 0 auto;

  @media (max-width: 600px) {
    padding-top: 50px;
    width: 100%;
  }
}

.area__common-link {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  @media (max-width: 600px) {
    flex-direction: column;
  }

  & li {
    width: 43%;

    @media (max-width: 600px) {
      width: 70%;
      margin-bottom: 40px;
    }

    & a {
      border-bottom: unset;

      &:hover {
        border-bottom: unset;
        opacity: 0.7;
      }
    }
  }
}




.area__sponsor {
  background-color: #FFF;
  text-align: center;
  padding: 0 20px;
}

.block__sponsor {
  padding: 80px 0 0;

  @media (max-width: 896px) {
    padding: 30px 0 0;
  }

  .ttl_sponsor {
    font-size: 5rem;
    line-height: 1.3em;
    font-weight: 900;
    color: var(--main_c);

    @media (max-width: 1281px) {
      font-size: clamp(3rem, 3.9vw, 5rem);
    }
  }

  .txt_sponsor {
    font-size: 2rem;
    line-height: 1.7em;
    padding: 20px 0 0;

    @media (max-width: 1281px) {
      font-size: clamp(1.6rem, 1.56vw, 2rem);
    }
  }
}

.btn_company {
  a {
    background-color: #D82B18;
    color: var(--point_c);

    &:hover {
      background-color: var(--hover_c);
      opacity: 1;
    }
  }
}

.btn_company {
  padding: 80px 0 0;

  @media (max-width: 896px) {
    padding: 30px 0 0;
  }

  @media (max-width: 480px) {
    padding: 80px 0 0;
  }

  a {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px;

    @media (max-width: 480px) {
      text-align: left;
    }

    .box_txt {
      font-size: 3.6rem;
      line-height: 1.4em;
      font-weight: 700;
      display: inline-block;

      @media (max-width: 1281px) {
        font-size: clamp(1.8rem, 1.875vw, 2.4rem);
      }
    }

    .box_mark {
      width: 100px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;

      @media (max-width: 1280px) {
        width: 80px;
        right: 5px;
      }

    }

    .box_mark02 {
      width: 250px;
      position: absolute;
      top: -50%;
      left: -30px;

      @media (max-width: 1280px) {
        width: 180px;
        left: -15px;
      }

      @media (max-width: 480px) {
        width: 120px;
        left: -15px;
        top: -80%;
      }
    }
  }

  a:hover {
    background-color: var(--point_c);
    color: #d82b18;
    opacity: 1;
  }
}

.area__challenge-book {
  background: var(--point_c);
  padding: 40px 0;
  position: relative;
  margin-top: 40px;
}

.area__challenge-book a {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);


  @media (max-width: 622px) {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 5%;
    transform: translate(-50%, 0);
  }
}

.area__challenge-book a img {
  width: 170px;

  @media (max-width: 956px) {
    width: 130px;
  }

  @media (max-width: 622px) {
    width: 170px;
  }
}

.area__challenge-book-block {
  color: var(--main_c);
  text-align: center;

  @media (max-width: 622px) {
    margin-bottom: 250px;
  }
}

.area__challenge-book-block h3 {
  font-weight: 900;
  font-size: clamp(3rem, 3.59vw, 4.6rem);
  line-height: 1.4;
  margin-bottom: 20px;
}

.area__challenge-book-block p {
  font-weight: 900;
  font-size: clamp(1.6rem, 1.5vw, 2rem);
}

.btn__link--sponsor {
  padding: 50px 0 0;

  @media (max-width: 896px) {
    padding: 30px 0 0;
  }

  a {
    display: block;
    text-align: center;
    padding: 20px;
    background-color: var(--point_c);
    color: #FFF;
    font-size: 2.4rem;
    line-height: 1.4em;
    font-weight: 700;
    display: block;

    @media (max-width: 1281px) {
      font-size: clamp(1.8rem, 1.875vw, 2.4rem);
    }

    &:hover {
      background-color: var(--main_c);
    }
  }
}