@charset "UTF-8";
/* ブロックパーツ用 接頭辞『b-』 */
/* テキスト */
.b-text ul {
  padding-left: 1.5em;
  list-style-type: disc;
}
.b-text ol {
  padding-left: 1.5em;
  list-style-type: decimal;
}
/* 見出し */
.b-title {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.25;
}

.b-title-border-left__inner {
  display: inline-block;
  padding-left: 18px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  position: relative;
}
.b-title-border-left__inner::before {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background-color: #7f7f7f;
  position: absolute;
  top: calc((24px * 1.16) / 2);
  left: 0;
}

.b-title-border-bottom__inner {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.25;
  padding: 0 0.5em 0 5%;
  position: relative;
}
.b-title-border-bottom__inner::before {
  content: "";
  width: 0;
  height: 1px;
  display: block;
  background-color: #ff0000;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.8s ease;
}
.b-title-border-bottom.is-active .b-title-border-bottom__inner::before {
  width: 100%;
}
.b-title-border-bottom__link {
  padding-right: 1.5em;
  color: #ff0000;
  position: relative;
  transition: 0.3s;
}
.b-title-border-bottom__link::after {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url(../img/sustainability/icon_link.svg) center / contain
    no-repeat;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.b-title-border-bottom__link:hover {
  opacity: 0.6;
}

.b-title-bg {
}
.b-title-bg__inner {
  display: inline-block;
  padding: 4px 1.2em;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  background-color: #ff0000;
  position: relative;
}
.b-title-bg--black .b-title-bg__inner {
  background-color: #000;
}

/* テキスト */
.b-text p {
  font-size: 14px;
}
.b-text a {
  font-size: 14px;
  color: #ff0000;
  text-decoration: underline;
  transition: 0.3s;
}
.b-text a:hover {
  opacity: 0.6;
}

/* 画像 */
.b-image {
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
[data-block="img"] {
  display: block;
}

/* メディア */
.b-media {
  display: flex;
  align-items: center;
  gap: 16px;
}
.b-media__image {
  width: 30%;
}
.b-media__text {
  width: 70%;
}
.b-media--reverse {
  flex-direction: row-reverse;
}

/* リスト */
.b-list__item {
  padding-left: 1.8em;
  position: relative;
}
.b-list__item::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #ff0000;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.b-list__text,
.b-list__link {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  transition: 0.2s;
}
.b-list__link:hover {
  opacity: 0.6;
}
.b-list__link--pdf {
  padding-right: 1.8em;
}
.b-list__link--pdf::after {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background: url(../img/sustainability/icon_pdf.svg) center / contain no-repeat;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* 表組 */
.b-table {
  min-width: 800px;
  table-layout: fixed;
  border-collapse: collapse;
  white-space: nowrap;
}
.b-table--2col {
  width: 100%;
  min-width: auto;
  table-layout: auto;
}
.b-table__wrap {
  overflow-x: auto;
}
.b-table__wrap--2col {
  overflow-x: inherit;
}
.b-table__head {
  border: 2px solid #ff0000;
}
.b-table__row--2col:not(:last-of-type) .b-table__title--2col {
  border-bottom-color: #fff;
}
.b-table__title {
  padding: 5px 15px;
  font-weight: bold;
  text-align: center;
  border: 1px solid;
}
.b-table__title--vl {
  color: #fff;
  border-color: #fff;
  background-color: #ff0000;
  line-height: 1.5;
  vertical-align: middle;
}
.b-table__title--hl {
  border-color: #ff0000;
  background-color: #fff;
}
.b-table__title--2col {
  min-width: 30%;
  color: #fff;
  border-color: #ff0000;
  background-color: #ff0000;
  vertical-align: middle;
}
.b-table__cont {
  padding: 5px 15px;
  text-align: center;
  border: 1px solid #ff0000;
  background-color: #fff;
}
.b-table__cont--2col {
  width: auto;
  text-align: left;
}

/* グラフ */
.b-chart__wrap {
}
.b-chart__inner {
  width: 100%;
  position: relative;
}
.b-chart__inner--bar {
  aspect-ratio: 16 / 9;
}
.b-chart__inner--doughnut {
  width: 50%;
  margin: 0 auto;
}
.b-chart--bar {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

[data-block="tit-bg"],
[data-block="txt"],
[data-block="img"],
[data-block="cont"] {
  width: 90%;
  margin: 0 auto;
}

/* パーツ間の余白 */
[data-block^="ttl"] + [data-block^="ttl"] {
  padding-top: 50px;
}
[data-block="ttl-lg"] + [data-block="ttl-sm"] {
  padding-top: 30px;
}
[data-block="ttl-md"] + [data-block="ttl-sm"] {
  padding-top: 30px;
}
[data-block^="ttl"] + [data-block="txt"] {
  padding-top: 30px;
}
[data-block^="ttl"] + [data-block="img"] {
  padding-top: 30px;
}
[data-block^="ttl"] + [data-block="cont"] {
  padding-top: 30px;
}

[data-block="txt"] + [data-block^="ttl"] {
  padding-top: 50px;
}
[data-block="txt"] + [data-block="txt"] {
  padding-top: 20px;
}
[data-block="txt"] + [data-block="img"] {
  padding-top: 20px;
}
[data-block="txt"] + [data-block="cont"] {
  padding-top: 20px;
}

[data-block="img"] + [data-block^="ttl"] {
  padding-top: 50px;
}
[data-block="img"] + [data-block="txt"] {
  padding-top: 20px;
}
[data-block="img"] + [data-block="img"] {
  padding-top: 20px;
}
[data-block="img"] + [data-block="cont"] {
  padding-top: 20px;
}

[data-block="cont"] + [data-block^="ttl"] {
  padding-top: 50px;
}

[data-block="cont"] + [data-block="txt"] {
  padding-top: 20px;
}

[data-block="cont"] + [data-block="img"] {
  padding-top: 20px;
}

[data-block="cont"] + [data-block="cont"] {
  padding-top: 30px;
}

@media all and (max-width: 767px) {
  /* 見出し */
  .b-title {
    font-size: 20px;
  }
  .b-title-border-left__inner {
    font-size: 18px;
  }
  .b-title-border-left__inner::before {
    top: calc(18px / 2);
  }

  /* テキスト */
  .b-text br {
    display: none;
  }

  /* 画像 */
  .b-image {
    width: 100%;
  }

  /* メディア */
  .b-media {
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  .b-media__image {
    width: 100%;
  }
  .b-media__text {
    width: 100%;
  }
  .b-media--reverse {
    flex-direction: row;
  }

  /* リスト */
  .b-list__item + .b-list__item {
    margin-top: 10px;
  }
  .b-list__text,
  .b-list__link {
    font-size: 14px;
  }

  /* 表組 */
  .b-table__row--2col {
    display: flex;
    flex-wrap: wrap;
  }
  .b-table__row--2col:not(:last-of-type) .b-table__title--2col {
    border-bottom-color: #ff0000;
  }
  .b-table__row--2col + .b-table__row--2col {
    margin-top: 10px;
  }
  .b-table__title--2col {
    width: 100%;
  }
  .b-table__cont--2col {
    width: 100%;
    min-width: none;
  }

  /* グラフ */
  .b-chart__inner--bar {
    aspect-ratio: 4 / 3;
  }
  .b-chart__inner--doughnut {
    width: 100%;
  }

  /* パーツ間の余白 */
  [data-block^="ttl"] + [data-block^="ttl"] {
    padding-top: 30px;
  }

  [data-block="ttl-lg"] + [data-block="ttl-sm"] {
    padding-top: 15px;
  }

  [data-block="ttl-md"] + [data-block="ttl-sm"] {
    padding-top: 15px;
  }

  [data-block^="ttl"] + [data-block="txt"] {
    padding-top: 15px;
  }

  [data-block^="ttl"] + [data-block="img"] {
    padding-top: 15px;
  }

  [data-block^="ttl"] + [data-block="cont"] {
    padding-top: 15px;
  }

  [data-block="txt"] + [data-block^="ttl"] {
    padding-top: 30px;
  }

  [data-block="txt"] + [data-block="txt"] {
    padding-top: 10px;
  }

  [data-block="txt"] + [data-block="img"] {
    padding-top: 10px;
  }

  [data-block="txt"] + [data-block="cont"] {
    padding-top: 10px;
  }

  [data-block="img"] + [data-block^="ttl"] {
    padding-top: 30px;
  }

  [data-block="img"] + [data-block="txt"] {
    padding-top: 10px;
  }

  [data-block="img"] + [data-block="img"] {
    padding-top: 10px;
  }

  [data-block="img"] + [data-block="cont"] {
    padding-top: 10px;
  }

  [data-block="cont"] + [data-block^="ttl"] {
    padding-top: 30px;
  }

  [data-block="cont"] + [data-block="txt"] {
    padding-top: 10px;
  }

  [data-block="cont"] + [data-block="img"] {
    padding-top: 10px;
  }

  [data-block="cont"] + [data-block="cont"] {
    padding-top: 30px;
  }
}