@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: 100%;
  margin: 0 auto;
  padding-top: 50px;
}

.second__visual h1 {
  width: 100%;
}

.second__visual h1 img {
  width: 100%;
  height: auto;
}

#contents {
  background-color: #fffdfc;
  /* overflow:hidden でブロック整形コンテキストを確保し、直下要素の margin-top が
     マージン相殺で親(.global-bg、緑背景)へ突き抜けて緑帯が透けて見える不具合を防ぐ */
  overflow: hidden;
}

#contents .area__contents,
#contents .txt_section {
  color: var(--main_c);
}

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

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

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

    &:hover {
      opacity: 0.7;
    }
  }
}

.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 div {
    margin-right: 10px;
    position: relative;
  }

  .area__contents--ttl-blk img {
    width: 100%;
    max-width: 650px;
    height: auto;
  }

}

.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;
  }

  .ttl_img img {
    /* PC時はカラム幅を超えて拡大表示（中央寄せは維持） */
    width: 150%;
    max-width: 1500px;
    height: auto;
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    @media (max-width: 900px) {
      width: 100%;
      max-width: 100%;
      left: 0;
      transform: none;
    }

    /* スマホ時は約1.8倍で表示（中央寄せ） */
    @media (max-width: 600px) {
      width: 180%;
      max-width: 700px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

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

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

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

    @media (max-width: 600px) {
      padding: 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);
  background-image: url(../images/common/bg_kumo_left.svg), url(../images/common/bg_kumo_right.svg);
  background-repeat: no-repeat, repeat-y;
  background-position: left -250px center, right -125px top;
  background-size: 400px auto, 400px auto;
  position: relative;
  padding-top: 60px;

  @media (max-width: 896px) {
    background-position: left -125px center, right -125px top;
    background-size: 200px auto, 200px auto;
  }

  @media (max-width: 600px) {
    padding-top: 30px;
    background-position: left -120px center, right -90px top;
    background-size: 150px auto, 150px auto;
  }
}

.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;
  position: relative;
  z-index: 3;

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

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

.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;
  flex-wrap: wrap;

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

  & li {
    width: 43%;
    text-align: center;

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

    & 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 {
    &:hover {
      opacity: 0.7;
    }
  }
}

.btn_company {
  padding: 80px 0 0;

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

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

    @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 {
    opacity: 0.7;
  }
}

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

  @media (max-width: 622px) {
    padding: 20px 0;
    margin-top: 20px;
  }
}

.area__challenge-book-link {
  display: block;
  position: relative;
}

.area__challenge-book-link img {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 170px;

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

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

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

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

.area__challenge-book-block h3 {
  font-weight: 900;
  font-size: clamp(2.5rem, 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);
    }
  }
}

/* 「他の省資源への試みをみてみよう！」バナー下のキャプション */
/* ============================================ */
.common-link-caption {
  margin: 20px 0 0;
  color: var(--main_c);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 600px) {
  .common-link-caption {
    font-size: 1.6rem;
    margin-top: 12px;
  }
}

/* 「戦国時代の戦術」導入セクション（タイトル+本文+キャラクター） */
/* foodloss/packaging/plastic 共通レイアウト */
/* ============================================ */
.hero-ttl-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 20px 30px 12%;
  box-sizing: border-box;
}

@media (max-width: 896px) {
  .hero-ttl-flex {
    padding: 30px 20px 20px 6%;
  }
}

@media (max-width: 600px) {
  .hero-ttl-flex {
    flex-direction: column;
    padding: 40px 20px 30px;
  }
}

.hero-ttl-textcol {
  flex: 0 1 640px;
  text-align: left;
}

.hero-ttl-blk-outer {
  text-align: left;
  max-width: none;
  width: auto;
  margin: 0 0 30px;
}

.hero-ttl-blk {
  justify-content: flex-start;
}

.hero-txt {
  text-align: left;
  color: var(--main_c);
}

.hero-char {
  flex: 0 0 auto;
  width: 50%;
  max-width: 780px;
  height: auto;
}

@media (max-width: 600px) {
  .hero-ttl-textcol {
    flex: 1 1 auto;
    text-align: center;
  }

  .hero-ttl-blk-outer {
    text-align: center;
    margin: 0 0 20px;
  }

  .hero-ttl-blk {
    justify-content: center;
  }

  .hero-txt {
    text-align: justify;
  }

  .hero-char {
    width: 55%;
    margin: 0 auto;
    padding-right: 30px;
  }
}

/* エコセクション各カードのキャラクター画像 */
/* foodloss/packaging/plastic 共通 */
/* ============================================ */
.eco-section::after {
  /* float(.eco-char)の高さをクリアするためのclearfix。
     overflow:hiddenは.ttl_img画像の拡大表示(PC時2倍)を切り取ってしまうため使わない */
  content: "";
  display: block;
  clear: both;
}

.eco-section .eco-char {
  float: right;
  width: 35%;
  max-width: 310px;
  height: auto;
  margin: -100px 0 20px 40px;
  display: block;
  position: relative;
  z-index: 4;
}

@media (max-width: 600px) {
  .eco-section .eco-char {
    float: none;
    /* スマホ時は元の約半分のサイズに縮小 */
    width: 35%;
    max-width: 160px;
    margin: -50px auto 10px;
    display: block;
  }
}

/* plastic ページ固有 */
/* ============================================ */

body.page-plastic .common-ttl {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

body.page-plastic .common-ttl img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}