@charset "UTF-8";

@counter-style circled-decimal {
  system: fixed;
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳;
  suffix: "  ";
}

.fix-circled {
  list-style: none;
  counter-reset: my-counter;

}

.fix-circled li {
  counter-increment: my-counter !important;
}

.fix-circled li::before {
  content: counter(my-counter, circled-decimal) !important;
}

[id^="sustainability-"] .lead {
  padding-top: 8.5rem;
}

@media (max-width: 750px) {
  [id^="sustainability-"] .lead {
    padding-top: 6rem;
  }
}

.flex-center {
  display: flex;
  justify-content: center;
}

#sustainability-top .lead {
  padding-top: 2.9rem;
}

#sustainability-top .lead .media-object .buttons {
  display: flex;
  gap: 3rem;
  margin-top: var(--spacing-48);
}

@media (max-width: 1300px) {
  #sustainability-top .lead .media-object .buttons {
    flex-direction: column;
    gap: 1.4rem;
  }

  #sustainability-top .lead .media-object .button-1 {
    width: 100%;
  }
}

@media (min-width: 751px) {
  #sustainability-top .lead .media-object {}

  #sustainability-top .lead .media-object .buttons>* {
    flex: 1 1 50%;
    min-width: 0;
  }

  #sustainability-top .lead .media-object .text {
    margin-top: 0;
  }
}

@media (max-width: 750px) {
  #sustainability-top .lead {
    padding-top: 2rem;
  }

  #sustainability-top .lead .media-object .buttons {
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 3.3rem;
  }
}


#sustainability-top .case {
  padding-top: 10.6rem;
  padding-bottom: 11.7rem;
}


#sustainability-top .case .buttons {
  display: flex;
  justify-content: center;
  margin-top: 6.5rem;
}

@media (max-width: 750px) {
  #sustainability-top .case {
    padding-top: 5.5rem;
    padding-bottom: 7.7rem;
  }
}

#sustainability-top .case .media-object-list {
  margin-top: 6.5rem;
}

@media (max-width: 750px) {
  #sustainability-top .case .media-object-list {
    margin-top: 4.7rem;
  }
}

#sustainability-top .case .media-object.stack {
  padding-bottom: 5.4rem;
  border-bottom: 1px solid var(--gray-dark);
}

#sustainability-top .case .link-images {
  display: flex;
  flex-wrap: wrap;
  max-width: 118.3rem;
  gap: 2.6rem;
  list-style: none;
  margin-top: 7.9rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 751px) {
  #sustainability-top .case .link-images li {
    flex: 1 1 0;
  }
}

#sustainability-top .case .link-images a {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

#sustainability-top .case .link-images img {
  transition: transform 0.4s ease;
}

#sustainability-top .case .link-images+p {
  margin-top: 6.5rem;
}

@media (max-width: 750px) {
  #sustainability-top .case .link-images+p {
    margin-top: 3.9rem;
  }
}

#sustainability-top .goals {
  padding-top: 12.7rem;
  padding-bottom: 11.7rem;
}

@media (max-width: 750px) {
  #sustainability-top .goals {
    padding-top: 5.6rem;
    padding-bottom: 7.7rem;
  }
}

#sustainability-top .goals .inner {
  max-width: 117.4rem;
}

#sustainability-top .goals .buttons {
  display: flex;
  justify-content: center;
  margin-top: 6.5rem;
}

#sustainability-top .goals .button-1 .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: var(--spacing-8);
  width: 2.4rem;
  aspect-ratio: 1;
  fill: #fff;
}

#sustainability-top .goals .button-1 .icon svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

@media (max-width: 750px) {
  #sustainability-top .goals .button-1 {
    width: 100%;
  }
}

/* トップメッセージ */
#sustainability-commitment .h1-1.lead-heading {
  position: relative;
  display: flex;
  justify-content: center;
  background: none;
  padding-bottom: 1.5rem;
  text-align: center;
  letter-spacing: 0.1em;
}

@media (max-width: 750px) {
  #sustainability-commitment .h1-1.lead-heading {
    font-size: 2.8rem;
  }
}

#sustainability-commitment .h1-1.lead-heading::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  translate: -50% 0%;
  width: 6.6rem;
  height: 1px;
  background-image: linear-gradient(90deg, var(--green-base) 0 50%, var(--green-light) 50%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: bottom;
}

@media (max-width: 750px) {
  #sustainability-commitment .h1-1.lead-heading::after {
    width: 10rem;
  }
}

#sustainability-commitment .lead .media-object {
  margin-top: 8rem;
  padding-bottom: 8rem;
}

@media (max-width: 750px) {
  #sustainability-commitment .lead .media-object {
    flex-direction: column-reverse;
  }
}

#sustainability-commitment .lead .media-object .body {
  margin-top: 0;
}

#sustainability-commitment .lead .media-object .body .text {
  margin-top: 0;
}

#sustainability-commitment .lead .media-object .media .caption {
  text-align: right;
}

#sustainability-materiality .h1-1.lead-heading {
  position: relative;
  display: flex;
  justify-content: center;
  background: none;
  padding-bottom: 1.5rem;
  text-align: center;
  letter-spacing: 0.1em;
}

@media (max-width: 750px) {
  #sustainability-materiality .h1-1.lead-heading {
    font-size: 2.8rem;
  }
}

#sustainability-materiality .h1-1.lead-heading::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  translate: -50% 0%;
  width: 6.6rem;
  height: 1px;
  background-image: linear-gradient(90deg, var(--green-base) 0 50%, var(--green-light) 50%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: bottom;
}

@media (max-width: 750px) {
  #sustainability-materiality .h1-1.lead-heading::after {
    width: 10rem;
  }
}

#sustainability-materiality .lead .image-1 {
  margin-top: 5.4rem;
}

#sustainability-materiality .lead .hgroup .text-1 {
  margin-top: 7.6rem;
}

@media (max-width: 750px) {
  #sustainability-materiality .lead .image-1 {
    margin-top: 5.4rem;
  }

  #sustainability-materiality .lead .hgroup .text-1 {
    margin-top: 3.2rem;
  }
}

#sustainability-materiality .materialitys {
  padding-top: 11.8rem;
  padding-bottom: 5.4rem;
}

@media (max-width: 750px) {
  #sustainability-materiality .materialitys {
    padding-top: 6rem;
  }
}

#sustainability-materiality .materialitys .media-objects {
  margin-top: 5.9rem;
}

@media (max-width: 750px) {
  #sustainability-materiality .materialitys .media-objects {
    margin-top: 3.2rem;
  }
}

#sustainability-materiality .materialitys .media-objects>*+* {
  margin-top: var(--spacing-56);
}

#sustainability-materiality .materialitys .media-objects .links a {
  display: inline-flex;
  gap: 1.2rem;
  color: var(--green-base);
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.1;
  text-decoration: underline;
}

#sustainability-materiality .materialitys .media-objects .links a::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--green-base);
  margin-block-start: calc(((1lh - 1em) / 2) + .5em);
  translate: 0 -50%;
}

@media (max-width: 750px) {
  #sustainability-materiality .materialitys .media-objects {
    gap: 3.8rem;
  }
}

#sustainability-materiality .materialitys .media-objects .body {
  margin-top: 0;
}

#sustainability-materiality .materialitys .media-objects .heading {
  font-size: 2rem;
  color: var(--green-base);
  font-weight: 700;
}

#sustainability-materiality .materialitys .media-objects .text {
  margin-top: 2rem;
}

#sustainability-materiality .materialitys .media-objects .heading::after {
  display: none;
}

#sustainability-materiality .materialitys .media-objects .media {
  flex: 0 0 26.8%;
}

#sustainability-materiality .materialitys .media-objects .media .icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

@media (max-width: 750px) {
  #sustainability-materiality .materialitys .media-objects .media .icons {
    gap: var(--spacing-16);
  }
}

#sustainability-materiality .materialitys .media-objects .media .icons+.icons {
  margin-top: 2rem;
}

@media (max-width: 750px) {
  #sustainability-materiality .materialitys .media-objects .media .icons+.icons {
    gap: var(--spacing-16);
  }
}

#sustainability-materiality .materialitys .media-objects .media .icons>* {
  flex: 0 1 calc((100% - 4rem) / 3);
  min-width: 0;
}

@media (max-width: 750px) {
  #sustainability-materiality .materialitys .media-objects .media .icons>* {
    flex: 0 1 calc((100% - var(--spacing-32)) / 3);
  }
}

#sustainability-materiality .materialitys .media-objects .media .icons>*:first-child {
  margin-left: auto;
}

/* SDGsマンガ */
#sustainability-sdgs_manga .lead .text-1 span {
  font-size: 1.4rem;
}

@media (max-width: 750px) {
  #sustainability-sdgs_manga .lead .text-1 {
    line-height: 1.6;
  }
}

#sustainability-sdgs_manga .lead .card-list {
  margin-top: 8rem;
  padding-bottom: 8rem;
}

@media (max-width: 750px) {
  #sustainability-sdgs_manga .lead .card-list {
    margin-top: 5rem;
  }
}

/* 水素社会実現に向けた取組 */

#sustainability-hydrogen .lead {
  padding-bottom: 8rem;
}

#sustainability-hydrogen .lead .text-1 {
  margin-top: var(--spacing-72)
}

#sustainability-hydrogen .lead .text-1.mt00 {
  margin-top: 0;
}

#sustainability-hydrogen .lead .image-1 {
  margin-top: var(--spacing-48)
}

#sustainability-hydrogen .lead .flex-center {
  margin-top: var(--spacing-48)
}

/* 地域・社会への貢献 */

#sustainability-community .icons-sdgs-section .icons-sdgs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  justify-content: center;
}

@media (max-width: 750px) {
  #sustainability-community .icons-sdgs-section .icons-sdgs ul {
    gap: var(--spacing-16);
  }
}

#sustainability-community .icons-sdgs-section .icons-sdgs li {
  width: 6rem;
  height: 6rem;
}

@media (max-width: 750px) {
  #sustainability-community .icons-sdgs-section .icons-sdgs li {
    width: calc((100% - (var(--spacing-16) * 4)) / 5);
    height: auto
  }
}

#sustainability-community .icons-sdgs-section {
  margin-top: var(--spacing-48);
}

#sustainability-community .icons-sdgs-section .icons-sdgs .text-1 {
  margin-top: var(--spacing-48);
}

#sustainability-community .icons-sdgs-section .icons-sdgs .text-1+.text-1 {
  margin-top: var(--spacing-24);
}

#sustainability-community .sec-campaign {
  margin-top: var(--spacing-64);
}

#sustainability-community .sec-campaign:last-child {
  padding-bottom: 8rem;
}

#sustainability-community .sec-campaign .text-1 {
  margin-top: var(--spacing-48);
}

#sustainability-community .text-1 .red {
  color: var(--red-base);
}

#sustainability-community .sec-campaign .text-1.mt20 {
  margin-top: 2rem;
}

#sustainability-community .sec-campaign .list-ol-1.mt20 {
  margin-top: 2rem;
}

#sustainability-community .sec-campaign .list-ul-1.mt20 {
  margin-top: 2rem;
}

#sustainability-community .sec-campaign .text-1.mt0 {
  margin-top: 0 !important;
}

#sustainability-community .sec-campaign .text-1.mt08 {
  margin-top: var(--spacing-8);
}

#sustainability-community .sec-campaign .text-1+.text-1 {
  margin-top: var(--spacing-24);
}

#sustainability-community .sec-campaign .list-ol-1+.text-1 {
  margin-top: var(--spacing-24);
}

#sustainability-community .sec-campaign .text-1 .note {
  font-size: 1.4rem;

}

#sustainability-community .sec-campaign .text-1 .span-01 {
  font-size: 1.4rem;
  margin-block: 2rem;
  display: inline-block;
}

#sustainability-community .sec-campaign .image-list {
  margin-top: var(--spacing-48);
}

@media (max-width: 750px) {
  #sustainability-community .sec-campaign .image-list.column-3 p {
    width: 100%;
  }
}



#sustainability-community .sec-campaign .image-1 {
  margin-top: var(--spacing-48);
}

#sustainability-community .sec-campaign .image-1.fix-width {
  width: 800px;
}

#sustainability-community .sec-campaign .image-1.fix-width02 {
  width: 350px;
}


#sustainability-community .sec-campaign .h4-1 {
  margin-top: var(--spacing-48);
}

#sustainability-community .sec-campaign .linktext-1 {
  margin-top: var(--spacing-24);
  display: inline-block;
}

#sustainability-community .sec-campaign .linktext-1.mt0 {
  margin-top: 0;
}

#sustainability-community .sec-campaign .h3-1 {
  margin-top: var(--spacing-32);
}

#sustainability-community .sec-campaign .media-object.flex-center {
  align-items: center;
}

#sustainability-community .sec-campaign .media-object .body .text.mt16 {
  margin-top: var(--spacing-16);
}

#sustainability-community .sec-campaign .pos01 svg {
  bottom: 1rem;
}

#sustainability-community .sec-campaign .table-1 {
  table-layout: fixed;
}

#sustainability-community .h4-heading {
  font-size: 2rem;
  color: var(--green-base);
  font-weight: 700;
}

#sustainability-community .h4-heading.mt48 {
  margin-top: var(--spacing-48);
}

@media (max-width: 750px) {
  #sustainability-community .sec-campaign .media-object.flex-center.flex-rev {
    flex-direction: column-reverse;
    margin-top: var(--spacing-32);
  }

  #sustainability-community .sec-campaign .media-object.flex-center.mt48 {
    margin-top: var(--spacing-48);
  }

  #sustainability-community .sec-campaign .image-1.fix-width {
    width: 100%;
  }

  #sustainability-community .sec-campaign .image-1.fix-width02 {
    width: 100%;
  }
}

.working-flex {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.working-flex.mt0 {
  margin-top: 0rem;
}

.working-flex th[rowspan] {
  vertical-align: middle;
}

.working-flex .flex-0 {
  flex-shrink: 0;
  width: 3rem;
}

.working-flex .flex-1 {
  flex-shrink: 0;
  width: 11rem;
}

.working-flex .list-ul-1 li {
  padding-left: var(--spacing-16);
}

.working-flex .list-ul-1 li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--black-base);
}

.working-flex .table-1 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 750px) {
  .working-flex {
    gap: 0.5rem;

  }
}

.text-1.flex-note {
  display: flex;
  justify-content: end;
  font-size: 1.4rem;
}