@charset "UTF-8";

/* 基本設定　ここから */
#topics {
  .topicsWrap {
    background: #f5f5f5;
    margin-bottom: 0 !important;
    padding-bottom: 200px;
  }

  .topics_inner {
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
    padding: 100px 0;
  }

  .topics_list_inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    padding: 100px 0;
  }

  .topics_inner>a {
    padding: 30px 0;
    border-top: 1px solid #a4a4a4;
    border-bottom: 1px solid #a4a4a4;
    display: block;
  }

  .topicsWrap time {
    font-size: 1.8rem;
    color: #808080;
    font-weight: 600;
  }

  .topicsWrap h3.title {
    font-size: 3.0rem;
    font-weight: 600;
    color: #3e3e3e;
    border-bottom: solid 1px #000;
    padding-bottom: 0.5em;
    margin-top: 0.2em;
  }

  .topicsWrap>figure {
    /* margin-top: 50px; */
    /* max-width: 600px; */
    /* max-height: 600px; */
    margin: 50px auto 100px;
  }

  .topicsWrap figure img {
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    object-fit: contain;
    margin: auto;
  }

  .topicsWrap figure.sdgs_bnr {
    padding: 30px 0;
    border-bottom: 1px solid #a4a4a4;
    border-top: 1px solid #a4a4a4;
    margin: 0;
  }

  .topicsWrap figure.sdgs_bnr img {
    width: 100%;
    height: 100%;
    max-width: inherit;
    max-height: inherit;
    object-fit: contain;
    margin: auto;
  }

  .topicsWrap p {
    font-size: 1.8rem;
    line-height: 1.7;
    text-align: justify;
  }

  .topicsWrap p a {
    font-size: 1.8rem;
    line-height: 1.7;
    text-align: justify;
    color:#0072b0;
    text-decoration: underline
  }

  .topicsWrap p+p {
    margin-top: 1em;
    font-size: inherit!important;
  }

  .topicsWrap .link_btn {
    margin: 50px auto 0;
  }

  .top_topics {
    /* margin-top: 30px; */
  }

  .top_topics li {}

  .top_topics li a {
    width: 100%;
    display: flex;
    padding: 30px 0;
    border-bottom: 1px solid #a4a4a4;
  }

  .top_topics li a time {
    color: #808080;
    font-weight: 600;
    font-size: 1.8rem;
  }

  .top_topics h3 {
    padding: 0 5em;
    color: #3e3e3e;
  }

  .pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    justify-content: center;
    margin: 50px auto 0;
  }

  .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0;
    text-decoration: none;
    color: #008a75;
    /* background-color: white; */
    /* border: 1px solid #dee2e6; */
    transition: all 0.2s ease;
    font-size: 1.8rem;
    font-weight: 600;
    text-decoration: underline;
  }

  .pagination a:first-child {
    /* border-radius: 4px 0 0 4px; */
  }

  .pagination a:last-child {
    border-radius: 0 4px 4px 0;
  }

  .pagination a:hover:not(.active):not(.disabled) {
    background-color: #f8f9fa;
    color: #0d6efd;
    border-color: #dee2e6;
  }

  .pagination a.active {
    /* background-color: #0d6efd; */
    /* border-color: #0d6efd; */
    color: #aeaeae;
    pointer-events: none;
    z-index: 1;
    text-decoration: none;
  }

  .pagination a.disabled {
    color: #aeaeae;
    /* background-color: white; */
    /* border-color: #dee2e6; */
    pointer-events: none;
    cursor: not-allowed;
  }

  .pagination .arrow {
    font-size: 1.8rem;
    text-decoration: none;
  }

  .topicsWrap .link_btn.short {
    margin: 0px auto 0;
  }

  .link_btn_left p::before,
  .link_btn p::before {
    background: #f5f5f5;
  }

  .arrow figure img {
    position: relative;
    top: 2px;
  }

  .topics_inner>figure {
    width: 100%;
    margin: 30px auto 50px;
  }

  @media screen and (max-width: 768px) {

    .topics_list_inner {
      padding: 50px 0;
      width: 86%;
    }

    .top_topics li a {
      flex-direction: column;
    }

    .top_topics h3 {
      padding: 0;
      font-size: 1.8rem;
    }

    .topicsWrap {
      padding-bottom: 100px;
    }

    .topics_inner {
      padding: 50px 0;
    }

    .topics_inner {
      width: 86%;
    }

    .topicsWrap h3.title {
      font-size: 2.4rem;
      margin-bottom: 30px;
    }

    .topics_inner>figure {
      width: 80%;
      margin: 0 auto 50px;
    }

    .topicsWrap .link_btn.short {
      width: 320px;
    }

    .breadcrumbs ol {
      flex-wrap: wrap;
    }

  }
}