#about-us {
}

.w1080 {
  max-width: 108rem;
}


.overview-section,
.report-section {
  background-color: #f6f6f6;
  padding: 9.5rem 0;


  @media screen and (max-width: 767px) {
    padding: 4rem 0;
  }
}

.overview-section {
    padding: 10.5rem 0 5.5rem;
    @media screen and (max-width: 767px) {
      padding: 3.5rem 0 5.5rem; 
    }
}

.overview-container {
  @media screen and (max-width: 767px) {
  }
}

.about-us-heading {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;

  
  @media screen and (max-width: 767px) {
    margin-bottom: 0;
  }
}

.about-us-jp-heading {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 3.2rem;
  letter-spacing: 0.04em;
  color: #000000;
  border-left: 4px solid #0f2350;
  padding-left: 1.5rem;
  margin-bottom: 3rem;

  @media screen and (max-width: 767px) {
    font-size: 1.8rem;
    line-height: 1.6;
    padding-left: 1rem;
    margin-bottom: 2rem;
  }
}

.overview-content,
.progress-content,
.project-content,
.prevention-content {
  display: flex;
  flex-direction: column;

    /* @media screen and (max-width: 767px) {
        font-size: 1.4rem;
    } */
}

.overview-content-des,
.progress-content-des,
.project-content-des,
.prevention-content-des {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 3.2rem;
  letter-spacing: 0.04em;
  color: #000000;
  margin-bottom: 3rem;

  @media screen and (max-width: 767px) {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 1rem;
  }
}

.pdf-btn {
  font-size: 1.6rem;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px;
  width: 28.7rem;
  height: 4.8rem;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 33px;
  text-align: center;
  justify-content: center;
  position: relative;
  gap: 1rem;
  transition: 200ms;

  &:hover {
    background-color: black;
    color: white;
  }

}






.rules-section,
.progress-section,
.project-section {
  padding: 9.5rem 0;

  @media screen and (max-width: 767px) {
    padding: 4rem 0;
  }
}






.report-section {
    background-color: #f6f6f6;
}

.report-section2 {
    background-color: white;
}

.report-section2 .progress-box {
  margin-bottom: 12rem;
  padding: 6rem 1rem;
  @media screen and (max-width: 767px) {
      margin-bottom: 4rem; 
    }
}

.activity-pdf-btn,
.prevention-pdf-btn {
  border: 1px solid #ccc;
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  text-align: center;
  position: relative;
  transition: 200s opacity;
  font-weight: 400;
  line-height: 1;

  &:hover {
    opacity: 0.5;
  }

    @media screen and (max-width: 767px) {
        font-size: 1.4rem;
    }
}

.report-box,
.progress-box {
  background: #fff;
  /* border: 1px solid #ddd; */
  border-radius: 10px;
  padding: 6rem 8rem;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */
  position: relative;
  @media screen and (max-width: 767px) {
    padding: 0;
  }
}

.toggle-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.4rem;
    gap: 1rem;
    padding: 1.75rem 0 1.75rem;
    border-bottom: 1px solid #ccc;

    @media screen and (max-width: 767px) {
      padding: 2rem 1rem;
  }
}

.toggle-header a {
  display: flex;
  align-items: center;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-size: 2rem;
  line-height: 32px;
  letter-spacing: 0.04em;
  color: #000000;

    @media screen and (max-width: 767px) {
      font-size: 1.6rem;
    }
}

.toggle-header .toggle-icon {
  font-size: 1.8rem;
  user-select: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 11px;
  position: absolute;
  right: 8rem;
  color: #ccc;

  
  @media screen and (max-width: 767px) {
    right: 1rem;
    padding: 6px;
    font-size: 1.2rem;
  }
}

.toggle-content {
    margin-top: 3rem;
    display: none;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.7rem;
    letter-spacing: 0.04em;
    color: #000000;

    @media screen and (max-width: 767px) {
      padding: 0 1rem;
    }
}

.toggle-content p {
  margin-bottom: 2rem;
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.7rem;
    letter-spacing: 0.04em;
    color: #000000;

    @media screen and (max-width: 767px) {
        font-size: 1.4rem;
    }
}

.toggle-content strong {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.7rem;
  letter-spacing: 0.04em;
  color: #000000;

    @media screen and (max-width: 767px) {
        font-size: 1.4rem;
    }
}

.toggle-content-des {
  display: flex;
  margin-left: 2rem;
}

.toggle-content .show {
  display: block;
  /* animation: slideDown 0.4s ease; */
}




.progress-content-des li,
.project-content-des li {
  margin-left: 3rem;
  list-style: disc;
}

.project-section {
  margin-bottom: 5rem;
  background: #F6F6F6;

  @media screen and (max-width: 767px) {
    margin-bottom: 0;
  }

}

.project-img {
  display: flex;
  justify-content: center;
  padding-bottom: 1rem;
}

.anni-proj-title {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  position: relative;
}

.anni-proj-title img {
  width: 1.4rem;
    @media screen and (max-width: 767px) {
        position: absolute;
        top: 1.2rem;
    }
}

.anni-proj-title span {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 500;
    font-size: 2rem;
    line-height: 3.2rem;
    letter-spacing: 0.04em;

    @media screen and (max-width: 767px) {
        font-size: 1.6rem;
        padding-left: 2.2rem;
    }
}

table.kyoukaihou {
	width: 100%;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-spacing:0;
  margin-bottom: 3rem;
  table-layout: fixed;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: 0.04em;

    @media screen and (max-width: 767px) {
        font-size: 1.2rem;
    }
}

table.kyoukaihou tr td a {
  text-decoration: underline;
  transition: 0.3s opacity;

  &:hover {
    opacity: 0.5;
  }
}
table.kyoukaihou tr th,table.kyoukaihou tr td {
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	padding: 2rem;
  line-height: 3.2rem;
  font-size: 1.8rem;

    @media screen and (max-width: 767px) {
        padding: 0.7rem;
        line-height: 2.2rem;
        font-size: 1.4rem;
    }
}
table.kyoukaihou tr td {
  background-color: white;
}
table.kyoukaihou tr th {
	background: #F6F6F6;
}

table.kyoukaihou tr th:first-child {
  /* 館園名 */
  width: 22rem;
  text-align: left;
  @media screen and (max-width: 767px) {
    width: 12rem;
  }
}
table.kyoukaihou tr th:nth-child(2) {
  /* 展示事業名 */
  width: 43.8rem;
  text-align: left;
  @media screen and (max-width: 767px) {
    width: 21rem;
  }
}
table.kyoukaihou tr th:nth-child(3) {
  /* 所在地域 */
  width: 12.4rem;
  text-align: left;
  @media screen and (max-width: 767px) {
    width: 5.4rem;
  }
}
table.kyoukaihou tr th:last-child {
  /* 会期 */
  width: 30.2rem;
  text-align: left;
  @media screen and (max-width: 767px) {
    width: 12.2rem;    
  }
}
table.none {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-spacing:0;
}
table.none tr th,table.none tr td {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	padding: 1px 1em;
}

.johbun {

    @media screen and (max-width: 767px) {
        line-height: 1.6;
        font-size: 1.4rem;
        margin-left: 2rem;
    }
}

.prevention-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.4rem;
  gap: 1rem;
}

.prevention-header span {
  display: flex;
  gap: 1rem;
  transition: 0.3s opacity;

  &:hover {
    opacity: 0.5;
  }
}

.prevention-header span p {
  display: flex;
  align-items: center;
  text-decoration: underline;
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  color: #000000;
}


.prevention-content-des h3 {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}


.prevention-content-des-span {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.prevention-content-des-span a {
  transition: 0.3s opacity;

  &:hover {
    opacity: 0.5;
  }
}


.prevention-content-des-span-2 {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;



}

.prevention-content-des-span-2 div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1.5rem;

      @media screen and (max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
}

.prevention-content-des-span-2 div a {
  display: flex;
  align-items: center;
  transition: 0.3s opacity;

  &:hover {
    opacity: 0.5;
  }

  @media screen and (max-width: 767px) {
      margin-bottom: 1rem;
  }
}

.prevention-content-des-span-2 div span {
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.6rem;
  letter-spacing: 0.04em;
  color: #000000;

    @media screen and (max-width: 767px) {
        font-size: 1.4rem;
    }
}




.dli-chevron-round-right {
  display: flex;
  text-align: center;
  align-items: center;
  vertical-align: right;
  color: #000;
  line-height: 1;
  position: absolute;
  right: 2rem;
  width: 1rem;
  height: 1rem;
  transform: translateX(-25%) rotate(45deg);
}

.dli-chevron-round-right::before,
.dli-chevron-round-right::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
  transition: 0.3s;
}

.pdf-btn:hover .dli-chevron-round-right::before,
.pdf-btn:hover .dli-chevron-round-right::after {
  background-color: white;
}

.dli-chevron-round-right::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}

.dli-chevron-round-right::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}

.table-scroll-sp {
  overflow: scroll;
  margin: 0 2rem;
}
#footer {
  margin-top: 10rem;
  @media screen and (max-width: 767px) {
     margin-top: 4rem; 
    }
}

.prevention-content-des h3 {
  font-size: 2rem;
  font-weight: 600;
  @media screen and (max-width: 767px) {
    font-size: 1.6rem;
  }
}

.heading-icon-title {
    padding-left: 6.5rem;
    border-left: inherit;
    @media screen and (max-width: 767px) {
      padding-left: 3.5rem;   
    }
} 

.heading-icon-title01,
.heading-icon-title02,
.heading-icon-title03 {
  position: relative;
}

.heading-icon-title01::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0;
  width: 5.2rem;
  height: 6.8rem;
  background: url(../../img/about-us/about-us-icon01.png) no-repeat;
  background-size: 100%;
  bottom: 0;
  margin: auto;
}

.heading-icon-title02::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0;
  width: 6.1rem;
  height: 5.3rem;
  background: url(../../img/about-us/about-us-icon02.png) no-repeat;
  background-size: 100%;
  bottom: 0;
  margin: auto;
}

.heading-icon-title03::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0;
  width: 5.8rem;
  height: 5.2rem;
  background: url(../../img/about-us/about-us-icon03.png) no-repeat;
  background-size: 100%;
  bottom: 0;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .heading-icon-title01::before {
    width: 3rem;
    height: 3.8rem;
  }    
  .heading-icon-title02::before {
    width: 3.1rem;
    height: 2.8rem;
  }    
  .heading-icon-title03::before {
    width: 3.8rem;
    height: 3.6rem;
  }
  .heading-icon-title03 {
    margin-top: 5rem;
  }
}

.activity-report-nav {
  border-bottom: #CCCCCC 1px solid;
  display: flex;
}

.activity-report-nav button {
  all: unset;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  height: 6.3rem;
  font-style: normal;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.7rem;
  text-align: center;
  letter-spacing: 0.04em;
  color: #CCCCCC;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  transition: background 0.2s, color 0.2s;
  transform: translateY(0.1rem);
      border-bottom: 2px solid transparent;
  @media screen and (max-width: 767px) {
    width: 14rem;
    height: 5.25rem;
    font-size: 1.2rem;      
  }
}
button.selected {
  border-top: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  border-bottom: 2px solid white;
  border-radius: 0.6rem 0.6rem 0 0;
  color: #000000;
}

@media (max-width: 767px) {
  #overview, 
  #disaster-prevention, 
  #hundred-year-project {
    scroll-margin-top: 10rem !important;
  }
}