@charset "UTF-8";
div.intro{
  width: min(1120px,100%);
  padding: 0 16px;
  margin-inline: auto;
  margin-bottom: 40px;

  div.textContent{
    width: min(720px,100%);
    padding: 0 16px;
    padding-top: 48px;
    margin-inline: auto;

    p.heading{
      margin-bottom: 24px;

      font-size: 24px;
      font-family: 'LINE Seed JP_OTF Bold';
      color: #1359E8;
      text-align: center;
    }
    p.text{
      line-height: 1.6;
    }
  }
}
.intro-text{
  width: min(1120px,100%);
  padding: 0 16px;
  margin-inline: auto;
  margin-bottom: 80px;
}
.intro-eyecatch{
  padding-top: 16px;
  margin-bottom: 104px;

  picture,img{
    width: 100%;
    max-width: none;
  }
}
.sidebar-layout{
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 144px;
  container-type: inline-size;

  div.sidebar{
    width: calc(50cqw - 560px);
    min-width: 280px;
    padding-top: 160px;
    padding-left: 72px;

    div.sticky{
      position: sticky;
      position: -webkit-sticky;
      top: 300px;

      ul.stickyLinks{
        font-size: 25px;
        font-family: 'LINE Seed JP_OTF Bold';
        color: var(--tc);
        >*+*{
          margin-block-start: 18px;
        }
        li a{
          display: inline-flex;
          gap: 8px;
          color: #bbb;
          transition: 0.3s all linear;
        }
        li a.active{
          color: var(--tc);
          transition: 0.3s all linear;
        }
        li a:not(.active){
          svg path{
            fill: #bbb;
          }
        }
      }
    }
  }
}
div.contents{
  padding-top: 88px;
  padding-left: 88px;
  padding-bottom: 104px;
  
  background: #fff;

  >*+*{
    margin-block-start: 104px;
  }
  section{
    width: min(1016px,100%);

    h3{
      margin-bottom: 16px;

      font-size: 32px;
      color: #1359E8;
      font-family: 'LINE Seed JP_OTF Bold';
    }
    >.text{
      margin-bottom: 40px;

      line-height: 1.6;
    }
    div.text-wrap{
      display: grid;
      grid-template-columns: 1fr auto;
      column-gap: 8px;
      margin-bottom: 40px;
    }
    div.sdgs-intro{
      display: flex;
      flex-direction: column;
      align-items: center;

      width: min(720px,100%);
      margin-inline: auto;
      margin-bottom: 80px;
    }
    ul.sdgs-tag{
      margin-bottom: 80px;
      >*+*{
        margin-block-start: 48px;
      }
      >li{
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 24px;
        p.title{
          margin-bottom: 16px;

          font-size: 20px;
          font-family: 'LINE Seed JP_OTF Bold';
        }
        ul{
          margin-left: 24px;
          list-style-type: disc;
        }
      }
    }
    ul.sdgs-textList{
      >*+*{
        margin-block-start: 32px;
      }
      p.title{
        font-size: 17px;
        font-family: 'LINE Seed JP_OTF Bold';
      }
    }
  }
}
@media (min-width : 1200px){
  div#access{
    ul.access-link{
      li a:hover{
        opacity: 0.8;
        transition: 0.3s all linear;
      }
    }
  }
  div#access ul.placeCON{
    .google-link:hover{
        a:hover{
          text-decoration: underline;
      }
    }
  }
}
@media (max-width : 1200px){
  .sidebar-layout{
    display: block;
    margin-bottom: 0;
  
    div.sidebar{
      display: none;
    }
  }
  div.contents{
    padding: 80px 16px 120px;
  }
}
@media (max-width : 599px){
  div.intro{
    padding: 0 3.2dvw;
    margin-bottom: 8dvw;
  
    div.textContent{
      padding: 0 3.2dvw;
      padding-top: 9.6dvw;
  
      p.heading{
        margin-bottom: 4.8dvw;
  
        font-size: 4.8dvw;
      }
    }
  }
  .intro-text{
    padding: 0 3.2dvw;
    margin-bottom: 9.8dvw;
  }
  .intro-eyecatch{
    padding-top: 3.2dvw;
    margin-bottom: 20dvw;
  }
  div.contents{
    padding: 16dvw 3.2dvw 24dvw;
  
    >*+*{
      margin-block-start: 20dvw;
    }
    section{
      h3{
        margin-bottom: 3.2dvw;
  
        font-size: 6.4dvw;
      }
      >.text{
        margin-bottom: 8dvw;
      }
      div.text-wrap{
        column-gap: 1.6dvw;
        margin-bottom: 8dvw;
      }
    }
  }
}