@charset "UTF-8";

/*--- アクティブナビゲーション ---*/
.navi-sdgs a {
  font-weight: bold;
  color: #2680E8;
  pointer-events: none;
}

/*--- ページタイトル ---*/
.page-ttl {
  background-image: url("../img/bg_sdgs.jpg");
  &::after { /* ページタイトル英語表記 */
    /*content: "SDGs";*/
    content: "Sustainable Development Goals";
  }
}

/*--- パンくずリスト---*/
.breadcrumb-list {
  margin-bottom: 2rem;
}

/*--- SDGsポスター---*/
.sdgs-poster {
  width: 90%;
  margin: 0 auto;
  & > img {
    width: 100%;
  }
}

@media (min-width: 768px) { /* タブレット向け（画面幅 768px 以上）*/
}

@media (min-width: 1024px) { /* パソコン向け（画面幅 1024px 以上）*/
  .sdgs-poster {
    width: 80%;
  }
}

/*--- 目標リスト ---*/
.goals-list {
  /*margin-top: 30px;*/
  & > li.goals-list-item { /* 目標アイテム */
    display: flex;
    &:not(:last-of-type) { /* 最後以外 */
      margin-bottom: 1.5rem;
    }
    & > img {
      width: 110px;
      height: 110px;
    }
  }
}

.item-ttl-txt { /* .goals-list > .goals-list-item > .item-ttl-txt */
  margin-left: 0.5rem;
  & > h3 {
    line-height: 1.3rem;
  }
  & > p {
    line-height: 1.3rem;
    font-size: var(--font-size-12);
    &:not(:last-of-type) { /* 最後以外 */
      margin-bottom: 0.7em;
    }
  }
}

@media (min-width: 768px) { /* タブレット向け（画面幅 768px 以上）*/
  .goals-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 200px以上のサイズを保ちつつ、親の幅に合わせて自動で列数を増減 */
    gap: 20px; /* 子要素どうしの隙間（縦・横ともに20px）*/
    & > li.goals-list-item {
      padding: 20px;
      background-color: #f0f0f0;
      border-radius: 8px;
      display: block; /* flex解除 */
      & > img {
        margin-bottom: 0.7rem;
      }
    }
  }
  .item-ttl-txt { /* .goals-list > .goals-list-item > .item-ttl-txt */
    margin: 0;
    & > p:not(:last-of-type) { /* 最後以外 */
      margin-bottom: 0.7em;
    }
  }
}

@media (min-width: 1024px) { /* パソコン向け（画面幅 1024px 以上）*/
}

/* コンテンツ リスト */
.sec-cont > ul {
  padding: 0 10px;
  line-height: 1.5;
  list-style-position: inside;
}