@charset "utf-8";

.materiality__list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}
@media screen and (min-width: 768px) {
    .materiality__list {
        margin-top: 30px;
    }
}
.materiality__listItem {
    padding-block: 15px;
    width: calc(50% - 15px / 2);
    border-radius: 8px;
    border: 1px solid #eaeaea;
    background-color: #f6f6f6;
}
@media screen and (min-width: 768px) {
    .materiality__listItem {
        padding-block: 16px;
        border-radius: 16px;
        width: calc(20% - 15px * 4 / 5);
    }
}
.materiality__listImg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    width: 75px;
    height: 75px;
    border-radius: 50%;
}
.materiality__listImg.materiality__listImg--green {
    background-color: #98e28c;
}
.materiality__listImg.materiality__listImg--pink {
    background-color: #ffadc0;
}
.materiality__listImg.materiality__listImg--orange {
    background-color: #f3cf88;
}
.materiality__listImg.materiality__listImg--lightBlue {
    background-color: #97e2e7;
}
.materiality__listImg.materiality__listImg--blue {
    background-color: #9ec7f7;
}
.materiality__listLabel {
    margin-top: 6px;
    line-height: 1.5;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}
@media screen and (min-width: 1024px) {
    .materiality__listLabel {
        margin-top: 14px;
        font-size: 2.2rem;
    }
}
.materiality__step {
    display: flex;
    flex-direction: column;
    row-gap: 71px;
    margin-top: 20px;
    padding: 0;
}
@media screen and (min-width: 768px) {
    .materiality__step {
        row-gap: 48px;
        margin-top: 24px;
    }
}
.materiality__stepItem {
    display: flex;
    column-gap: 16px;
}
@media screen and (min-width: 1024px) {
    .materiality__stepItem {
        align-items: flex-start;
        column-gap: 34px;
    }
}
.materiality__stepItem--img {
    display: block;
    text-align: center;
}
.materiality__stepHead {
    display: flex;
    flex-direction: column;
    row-gap: 6px;
    flex-shrink: 0;
    padding: 8px;
    max-width: 104px;
    width: 100%;
    background-color: #e6e6e6;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .materiality__stepHead {
        padding: 10px;
        row-gap: 7px;
        max-width: 130px;
        width: 100%;
    }
}
.materiality__stepLabel,
.materiality__stepTitle {
    line-height: 1.75;
    font-weight: 900;
    font-size: 1.3rem;
    color: #b8272c;
}
@media screen and (min-width: 768px) {
    .materiality__stepLabel,
    .materiality__stepTitle {
        line-height: 1.5;
        font-size: 1.6rem;
        letter-spacing: 0.1em;
    }
}
.materiality__stepText {
}
.materiality__stepItem {
    position: relative;
}
.materiality__stepItem:not(:last-child):not(:nth-child(3))::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 40px;
    width: 16px;
    height: 16px;
    background-color: #b8272c;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
@media screen and (min-width: 768px) {
    .materiality__stepItem:not(:last-child):not(:nth-child(3))::after {
        bottom: -36px;
        width: 20px;
        height: 20px;
    }
}
@media screen and (min-width: 1024px) {
    .materiality__stepItem:not(:last-child):not(:nth-child(3))::after {
        left: 54px;
    }
}
.materiality__stepImg {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .materiality__stepImg {
    margin-inline: auto;
    width: calc(480 / 1100 * 100%);
  }
}
.materiality__profile {
    margin-top: 30px;
}
.materiality__profileList {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 17px;
}
@media screen and (min-width: 768px) {
    .materiality__profileList {
        flex-direction: row;
        gap: 0 40px;
    }
}
.materiality__profileItem {
    display: flex;
    align-items: center;
    column-gap: 8px;
}
@media screen and (min-width: 768px) {
    .materiality__profileItem {
        column-gap: 12px;
        width: calc(33.3% - 40px * 2 / 3);
    }
}
.materiality__profileImg {
    flex-shrink: 0;
    max-width: 100px;
    width: 100%;
}
@media screen and (min-width: 1024px) {
    .materiality__profileImg {
        max-width: 112px;
    }
}
.materiality__profileName {
    font-size: 1.4rem;
    font-weight: bold;
}
@media screen and (min-width: 768px) {
    .materiality__profileName {
        font-size: 1.6rem;
    }
}
.materiality__profileJob {
    font-size: 1.3rem;
}


.p-materiality-graph {
  margin-top: 60px;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph {
    margin-top: 46px;
  }
}

.p-materiality-graph__scroll {
  display: none;
}
@media screen and (max-width: 1024px) {
  .p-materiality-graph__scroll {
    display: flex !important;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    gap: 0 5px;
    color: #b8272c;
  }
}
@media screen and (max-width: 767px) {
  .p-materiality-graph__scroll svg {
    width: 16.5px;
  }
}

@media screen and (max-width: 1024px) {
  .p-materiality-graph__body {
    margin-top: 16px;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.p-materiality-graph-cont {
  width: 1100px;
}

.p-materiality-graph-cont-head {
  display: grid;
  color: var(--color_primary_white);
  background-color: #b9b9b9;
  grid-template-columns: 84px 200px 215px 200px 200px 200px;
}

.p-materiality-graph-cont-head__blc {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #777;
  padding: 10px 0;
}
.p-materiality-graph-cont-head__blc:not(:last-child) {
    border-right: 1px solid var(--color_primary_white);
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-head__blc {
    padding: 5px;
  }
}
.p-materiality-graph-cont-head__txt {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-head__txt {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}
.p-materiality-graph-cont__body {
  display: grid;
  background-color: #b9b9b9;
  position: relative;
  border: 1px solid #b9b9b9;
  border-left: none;
  z-index: 1;
  grid-auto-flow: column;
  grid-template-columns: 42px 41px 201px 88px 1fr;
  grid-template-rows: repeat(13, auto);
}
.p-materiality-graph-cont__body > * {
  background-color: #fff;
}
.p-materiality-graph-cont__body::before {
  content: "";
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 82px;
  height: calc(100% + 1px);
  z-index: -1;
}
.p-materiality-graph-cont-classification {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--color_primary_white);
}
.p-materiality-graph-cont-classification--1, .p-materiality-graph-cont-classification--3 {
  background-color: #6baccb;
  grid-column: 2/3;
  border-left: 1px solid var(--color_primary_white);
}
.p-materiality-graph-cont-classification--1 {
  grid-row: 1/7;
}
.p-materiality-graph-cont-classification--3 {
  grid-row: 8/12;
}
.p-materiality-graph-cont-classification--2 {
  background-color: #d7acbf;
  grid-column: 1/2;
  grid-row: 7/14;
  border-right: none;
}

.p-materiality-graph-cont-classification__txt {
  letter-spacing: 0.25em;
  font-size: 1.6rem;
  writing-mode: vertical-lr;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-classification__txt {
    font-size: 1.2rem;
  }
}

.p-materiality-graph-cont-materiality {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 12px;
  border-right: 1px solid #b9b9b9;
  grid-column: 3/4;
}
.p-materiality-graph-cont-materiality {
    border-bottom: 1px solid #b9b9b9;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality {
    padding: 15px 10px;
  }
}
.p-materiality-graph-cont-materiality--1 {
  grid-row: span 5;
}
.p-materiality-graph-cont-materiality--2, .p-materiality-graph-cont-materiality--4 {
  grid-row: span 2;
}
.p-materiality-graph-cont-materiality--3 {
  grid-row: span 1;
}
.p-materiality-graph-cont-materiality--5 {
  grid-row: span 3;
  border-bottom: none;
}

.p-materiality-graph-cont-materiality__circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(28px, 
      28px + 28 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 56px);
  height: clamp(28px, 
      28px + 28 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 56px);
  margin: 0 auto;
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__circle {
    width: 56px;
    height: 56px;
  }
}
.p-materiality-graph-cont-materiality__circle--1 {
  background-color: #98e28c;
}
.p-materiality-graph-cont-materiality__circle--2 {
  background-color: #ffadc0;
}
.p-materiality-graph-cont-materiality__circle--3 {
  background-color: #f3cf88;
}
.p-materiality-graph-cont-materiality__circle--4 {
  background-color: #97e2e7;
}
.p-materiality-graph-cont-materiality__circle--5 {
  background-color: #9ec7f7;
}

.p-materiality-graph-cont-materiality__icn--1 {
  width: clamp(18.835px, 
      18.835px + 18.835 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 37.67px);
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__icn--1 {
    width: 38.89px;
  }
}
.p-materiality-graph-cont-materiality__icn--2 {
  width: clamp(17.33px, 
      17.33px + 17.33 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 34.66px);
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__icn--2 {
    width: 34.66px;
  }
}
.p-materiality-graph-cont-materiality__icn--3 {
  width: clamp(19.405px, 
      19.405px + 19.405 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 38.81px);
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__icn--3 {
    width: 38.805px;
  }
}
.p-materiality-graph-cont-materiality__icn--4 {
  width: clamp(18.28px, 
      18.28px + 18.28 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 36.56px);
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__icn--4 {
    width: 36.555px;
  }
}
.p-materiality-graph-cont-materiality__icn--5 {
  width: clamp(12.055px, 
      12.055px + 12.055 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 24.11px);
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__icn--5 {
    width: 25.665px;
  }
}

.p-materiality-graph-cont-materiality__name {
  margin-top: 8px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__name {
    font-size: 1.2rem;
  }
}

.p-materiality-graph-cont-materiality__txt {
  margin-top: 12px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-materiality__txt {
    margin-top: 0;
  }
}

.p-materiality-graph-cont-sdgs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  border-right: 1px solid #b9b9b9;
  border-bottom: 1px solid #b9b9b9;
  grid-column: 4/5;
}
.p-materiality-graph-cont-sdgs--10 {
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-sdgs {
    padding: 10px 0;
  }
}
.p-materiality-graph-cont-sdgs--1, .p-materiality-graph-cont-sdgs--2, .p-materiality-graph-cont-sdgs--7 {
  grid-row: span 2;
}
.p-materiality-graph-cont-sdgs--3, .p-materiality-graph-cont-sdgs--4, .p-materiality-graph-cont-sdgs--5, .p-materiality-graph-cont-sdgs--6 {
  grid-row: span 1;
}

.p-materiality-graph-cont-sdgs__txt {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-sdgs__txt {
    line-height: 1.25;
    font-size: 1.2rem;
  }
}

.p-materiality-graph-cont-sdgs__body {
  margin-top: 6px;
}
.p-materiality-graph-cont-sdgs__body:has(:nth-child(2)) {
  display: grid;
  justify-content: center;
  gap: 4px;
  grid-template-columns: repeat(2, auto);
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-sdgs__body:has(:nth-child(2)) {
    gap: 3px;
  }
}

.p-materiality-graph-cont-sdgs__img {
  display: block;
  width: clamp(16px, 
      16px + 16 *
        (var(--vw, 1vw) * 100 - 767px) / 227
    , 32px);
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-sdgs__img {
    width: clamp(25px, 
      25px + 12.5 *
        (var(--vw, 1vw) * 100 - 399px) / 368
    , 37.5px);
  }
}

.p-materiality-graph-cont-sdgs__additional {
  margin-top: 5px;
  font-weight: 400;
  text-align: center;
}

.p-materiality-graph-cont-detail {
  display: grid;
  background-color: #b9b9b9;
  gap: 1px;
  grid-column: 5/13;
  grid-template-columns: 24px 101px 1fr;
}
.p-materiality-graph-cont-detail:not(:last-child) {
    border-bottom: 1px solid #b9b9b9;
}
.p-materiality-graph-cont-detail > * {
  background-color: #fff;
}

.p-materiality-graph-cont-detail__count {
  padding: 10px 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph-cont-detail__count {
    padding: 5px;
  }
}

.p-materiality-graph-cont-detail__body {
  display: grid;
  background-color: #b9b9b9;
  gap: 1px;
}

.p-materiality-graph-cont-detail__row {
  display: grid;
  gap: 1px;
  grid-template-columns: 199px 199px 200px;
}
.p-materiality-graph-cont-detail__row > * {
  background-color: #fff;
}
.p-materiality-graph-cont-detail__row:not(:has(.p-materiality-graph-cont-detail__kpi)) .p-materiality-graph-cont-detail__action {
  grid-column: span 2;
}
.p-materiality-graph-cont-detail__row:has(.p-materiality-graph-cont-detail__additional) {
  position: relative;
  gap: 0 1px;
}
.p-materiality-graph-cont-detail__row:has(.p-materiality-graph-cont-detail__additional) .p-materiality-graph-cont-detail_achievement {
  grid-column: 3/4;
  grid-row: 1/3;
}

.p-materiality-graph-cont-detail__additional {
  position: relative;
  padding-top: 0;
  z-index: 1;
  grid-column: 1/3;
}
.u-materiality-graph-txt {
    line-height: 1.5;
    font-size: 1.3rem;
}
@media screen and (max-width: 767px) {
    .u-materiality-graph-txt {
        font-size: 1.2rem;
    }
}
.u-materiality-graph-txt a {
    display: inline-block;
    font-size: 1.3rem;
    color: var(--color_secondary_red) !important;
    text-decoration: underline !important;
}
@media screen and (max-width: 767px) {
    .u-materiality-graph-txt a {
        font-size: 1.2rem;
    }
}
@media (hover: hover) and (pointer: fine) {
    .u-materiality-graph-txt a:hover {
        text-decoration: none !important;
    }
}
.p-materiality-graph-cont-detail__additional .u-materiality-graph-txt {
  background-color: #f6f6f6;
  padding: 6px;
}
.p-materiality-graph__notice {
  margin-top: 14px;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-materiality-graph__notice {
    margin-top: 8px;
  }
}
.u-materiality-graph-padding {
  padding: 10px 12px;
}
@media screen and (max-width: 767px) {
  .u-materiality-graph-padding {
    padding: 5px 10px;
  }
}

.listStyle {
  margin-left: 10px;
}
.listStyle li {
  position: relative;
}
.listStyle li::after {
  content: "・";
  position: absolute;
  top: 0;
  left: -1em;
}