@charset "UTF-8";
/* =====================================
  function
===================================== */
/* =====================================
  keyframes
===================================== */
@-webkit-keyframes reveal-down {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes reveal-down {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@-webkit-keyframes reveal-wipe {
  0% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes reveal-wipe {
  0% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
/* =====================================
  contents
===================================== */
/* =====================================
  layout
===================================== */
/* =====================================
  font
===================================== */
/* =====================================
  animation
===================================== */
/* =====================================
  .l-sustainability
===================================== */
.l-sustainability__header {
  padding: 90px 0 80px;
  border-bottom: none;
}
.l-sustainability__header .l-section__header {
  margin-right: -31px;
  padding-left: 62px;
  font-family: "TazuganeGothicForKodansha", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
  font-size: 2.6211381392rem;
  font-weight: normal;
  font-weight: bold;
  line-height: 1.43;
}
body.is-en .l-sustainability__header .l-section__header {
  font-family: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
  font-size: 3.2917677241rem;
  line-height: 1.3;
  line-height: 1.3;
}
.l-sustainability__header .l-section__content {
  padding-right: 62px;
  font-family: "TazuganeGothicForKodansha", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
  font-size: 2.0710227273rem;
  line-height: 1.43;
}
body.is-en .l-sustainability__header .l-section__content {
  font-family: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
  font-size: 2.5254339072rem;
  line-height: 1.3;
  line-height: 1.3;
}

/* =====================================
  .l-grid-wrap
===================================== */
.l-grid-wrap {
  -ms-grid-columns: 37.2297297297% 11.7567567568% 51.0135135135%;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 37.2297297297% 11.7567567568% 51.0135135135%;
}
.l-grid-wrap__item {
  padding: 90px 31px;
}
.l-grid-wrap__item--1 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column-end: 3;
  grid-column-start: 1;
  padding-left: 62px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
.l-grid-wrap__item--2 {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column-end: 4;
  grid-column-start: 3;
  padding-right: 62px;
  border-top: 1px solid #000;
}
.l-grid-wrap__item--3 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column-end: 2;
  grid-column-start: 1;
  padding-left: 62px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
.l-grid-wrap__item--4 {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column-end: 4;
  grid-column-start: 2;
  padding-right: 62px;
  border-top: 1px solid #000;
}
.l-grid-wrap__item--5 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column-end: 3;
  grid-column-start: 1;
  padding-left: 62px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
.l-grid-wrap__item--6 {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column-end: 4;
  grid-column-start: 3;
  padding-right: 62px;
  border-top: 1px solid #000;
}
.l-grid-wrap__item--7 {
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column-end: 4;
  grid-column-start: 1;
  border-top: 1px solid #000;
  padding-right: 62px;
  padding-left: 62px;
}
.l-grid-wrap__item--7a {
  padding: 0;
}

/* =====================================
  .l-sec-activity
===================================== */
.l-sec-activity__item--type-2 {
  --_padding: 32px;
  padding-block: var(--_padding) 0;
  padding-inline: var(--_padding);

  &:not(:first-child) {
    border-block-start: 1px solid #000;
  }
}

.l-sec-activity__title {
  margin-bottom: 1em;
  font-family: "TazuganeGothicForKodansha", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
  font-size: 3.3173779574rem;
  line-height: 1.43;
}
body.is-en .l-sec-activity__title {
  font-family: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
  font-size: 4.2906427756rem;
  line-height: 1.3;
  line-height: 1.3;
}
.l-sec-activity:not(.l-grid-wrap__item--7) .l-sec-activity__title {
  -webkit-transition:
    opacity 0.3s ease 0s,
    -webkit-transform 0.5s ease 0s;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  opacity: 0;
  transition:
    opacity 0.3s ease 0s,
    -webkit-transform 0.5s ease 0s;
  transition:
    opacity 0.3s ease 0s,
    transform 0.5s ease 0s;
  transition:
    opacity 0.3s ease 0s,
    transform 0.5s ease 0s,
    -webkit-transform 0.5s ease 0s;
}
.l-sec-activity__text {
  font-family: "TazuganeGothicForKodansha", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
  font-size: 2.0710227273rem;
  line-height: 1.43;
}
body.is-en .l-sec-activity__text {
  font-family: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
  font-size: 2.5254339072rem;
  line-height: 1.3;
  line-height: 1.3;
}
.l-sec-activity:not(.l-grid-wrap__item--7) .l-sec-activity__text {
  -webkit-transition:
    opacity 0.3s ease 0.1s,
    -webkit-transform 0.5s ease 0.1s;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  opacity: 0;
  transition:
    opacity 0.3s ease 0.1s,
    -webkit-transform 0.5s ease 0.1s;
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.5s ease 0.1s;
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.5s ease 0.1s,
    -webkit-transform 0.5s ease 0.1s;
}
.l-sec-activity__item h4 {
  margin-bottom: 1em;
  font-family: "TazuganeGothicForKodansha", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
  font-size: 2.3299005682rem;
  line-height: 1.43;
}
body.is-en .l-sec-activity__item h4 {
  font-family: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
  font-size: 2.8832519531rem;
  line-height: 1.3;
  line-height: 1.3;
}
.l-sec-activity__item h4 a {
  text-decoration: underline;
}
.l-sec-activity__item p {
  font-family: "TazuganeGothicForKodansha", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
  font-size: 2.0710227273rem;
  line-height: 1.43;
}
body.is-en .l-sec-activity__item p {
  font-family: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
  font-size: 2.5254339072rem;
  line-height: 1.3;
  line-height: 1.3;
}
.l-sec-activity__item p + p {
  margin-top: 1em;
}
.l-sec-activity__item p a {
  text-decoration: underline;
}
.l-sec-activity__item ul {
  margin: 1em 0;
}
.l-sec-activity__item li {
  font-family: "TazuganeGothicForKodansha", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
  font-size: 2.0710227273rem;
  line-height: 1.43;
}
body.is-en .l-sec-activity__item li {
  font-family: "Maax", "Century Gothic", "Futura", helvetica, arial, sans-serif;
  font-size: 2.5254339072rem;
  line-height: 1.3;
  line-height: 1.3;
}
.l-sec-activity__item__img {
  margin: 31px 0;
}
:not(.l-sus-col2) .l-sec-activity__item__img {
  -webkit-transition:
    opacity 0.3s ease 0.1s,
    -webkit-transform 0.5s ease 0.1s;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  opacity: 0;
  transition:
    opacity 0.3s ease 0.1s,
    -webkit-transform 0.5s ease 0.1s;
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.5s ease 0.1s;
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.5s ease 0.1s,
    -webkit-transform 0.5s ease 0.1s;
}
.l-sec-activity__item__img:first-child {
  margin-top: 0;
}
.l-sec-activity__item:not(.l-sus-col2) h4,
.l-sec-activity__item:not(.l-sus-col2) p,
.l-sec-activity__item:not(.l-sus-col2) li {
  -webkit-transition:
    opacity 0.3s ease 0s,
    -webkit-transform 0.5s ease 0s;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  opacity: 0;
  transition:
    opacity 0.3s ease 0s,
    -webkit-transform 0.5s ease 0s;
  transition:
    opacity 0.3s ease 0s,
    transform 0.5s ease 0s;
  transition:
    opacity 0.3s ease 0s,
    transform 0.5s ease 0s,
    -webkit-transform 0.5s ease 0s;
}
:not(.l-sus-col2) .l-sec-activity.is-appear .l-sec-activity__title,
:not(.l-sus-col2) .l-sec-activity.is-appear .l-sec-activity__text {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
:not(.l-sus-col2) .l-sec-activity.is-appear .l-sec-activity__item h4,
:not(.l-sus-col2) .l-sec-activity.is-appear .l-sec-activity__item p,
:not(.l-sus-col2) .l-sec-activity.is-appear .l-sec-activity__item li,
:not(.l-sus-col2) .l-sec-activity.is-appear .l-sec-activity__item__img {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.l-sec-activity__header {
  margin-bottom: 40px;
}

.l-sus-col2 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-bottom: 45px;
}
.l-sus-col2--last {
  margin-block-end: 0;
}
.l-sus-col2__text {
  -webkit-box-flex: 1;
  -ms-flex: 1 5 837px;
  -webkit-transition-delay: 0.1s;
  flex: 1 5 837px;
  transition-delay: 0.1s;
}
.l-sus-col2__img {
  -webkit-box-flex: 0;
  -ms-flex: 0 4 489px;
  -webkit-transition-delay: 0.1s;
  flex: 0 4 489px;
  margin-right: 31px;
  transition-delay: 0.1s;
  width: 160px;
}
@media only screen and (max-width: 768px) {
  .l-sustainability__header .l-section__header {
    font-size: 1.8409090909rem;
  }
  body.is-en .l-sustainability__header .l-section__header {
    font-size: 2.1796931235rem;
  }
  .l-sustainability__header .l-section__content {
    font-size: 1.4545454545rem;
  }
  body.is-en .l-sustainability__header .l-section__content {
    font-size: 1.6722537502rem;
  }
  .l-sustainability__header {
    padding: 34px 0 20px;
  }
  .l-sustainability__header .l-section__header,
  .l-sustainability__header .l-section__content {
    padding: 0 23px;
  }
  .l-sustainability__header .l-section__header {
    margin-bottom: 1em;
  }
  .l-grid-wrap {
    display: block;
  }
  .l-grid-wrap__item {
    padding: 46px 23px !important;
  }
  .l-grid-wrap__item--1 {
    border-right: none;
  }
  .l-grid-wrap__item--3 {
    border-right: none;
  }
  .l-grid-wrap__item--5 {
    border-right: none;
  }
  .l-grid-wrap__item--7a {
    padding: 0 !important;
  }
  .l-sec-activity__title {
    font-size: 2.0710227273rem;
  }
  body.is-en .l-sec-activity__title {
    font-size: 2.4885246204rem;
  }
  .l-sec-activity__text {
    font-size: 1.4545454545rem;
  }
  body.is-en .l-sec-activity__text {
    font-size: 1.6722537502rem;
  }
  .l-sec-activity__item h4 {
    font-size: 1.6363636364rem;
  }
  body.is-en .l-sec-activity__item h4 {
    font-size: 1.9091883092rem;
  }
  .l-sec-activity__item p {
    font-size: 1.4545454545rem;
  }
  body.is-en .l-sec-activity__item p {
    font-size: 1.6722537502rem;
  }
  .l-sec-activity__item li {
    font-size: 1.4545454545rem;
  }
  body.is-en .l-sec-activity__item li {
    font-size: 1.6722537502rem;
  }
  .l-sec-activity__item__img {
    margin: 23px 0;
  }
  .l-sus-col2 {
    display: block;
  }
  .l-sus-col2__img {
    margin: 23px 0 0;
    width: auto;
  }
}

/**
 * =========================================
 * 2024年3月更新にかかる追記スタイル
 * =========================================
 */

:root {
  /**
   * Reference Tokens
   */
  --color-black: #000;
  --color-white: #fff;
  --color-kodansha-pink: #f67599;
  --color-kodansha-red: #f5333f;
  --color-kodansha-orange: #ff9f37;
  --color-kodansha-yellow: #ffe600;
  --color-kodansha-green: #14bfa1;
  --color-kodansha-blue: #3cc8e1;
  --color-kodansha-navy: #001a70;
  --color-kodansha-purple: #c964cf;

  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
  --layer-important: 2147483647;

  /**
   * Semantic Tokens
   */
  --color-primary: var(--color-black);
  --color-background: var(--color-white);
  --color-foreground: var(--color-black);
  --color-foreground-inverted: var(--color-white);

  --size-padding-content: 62px;
  --size-width-breakpoint: 768px;
  --size-anchor-nav-height: 77px;
  --size-header-height: 80px;
  --size-scroll-offset: calc(var(--size-anchor-nav-height) + var(--size-header-height) - 2px);

  --font-size-paragraph: 2.0710227273rem;
  --font-size-paragraph-small: 1.6363636364rem;
  --font-size-heading: 3.3173779574rem;
  --line-height-default: 1.43;
  --font-default: "Maax", "Century Gothic", "Futura", helvetica, arial, TazuganeGothicForKodansha, sans-serif;
}

* {
  scroll-padding-top: var(--size-scroll-offset);
}

/**
 * Object Layer
 */

.o-trim > *:first-child {
  margin-top: 0;
}

.o-trim-all *:first-child {
  margin-top: 0;
}

.o-layout {
  --_gap: 1em;
  display: flex;
  gap: var(--_gap);
  list-style: none;
  padding-left: 0;
}

.o-layout--column {
  flex-direction: column;
}

.o-layout > * {
  flex: 0 1 auto;
  max-width: 100%;
}

.o-layout--fill,
.o-layout--fill-equal {
  align-items: stretch;
}

.o-layout--fill > * {
  flex: 1 1 auto;
}

.o-layout--fill-equal > * {
  flex: 1 1 0%;
}

.o-layout--gap-none {
  --_gap: 0;
}

.o-layout--gap-large {
  --_gap: 2em;
}

.o-layout--gap-small {
  --_gap: 0.25em;
}

.o-layout--inline {
  display: inline-flex;
}

.o-layout--wrap {
  flex-wrap: wrap;
}

.o-layout--main-axis-center {
  justify-content: center;
}

.o-layout--main-axis-end {
  justify-content: flex-end;
}

.o-layout--main-axis-space-between {
  justify-content: space-between;
}

.o-layout--main-axis-space-around {
  justify-content: space-around;
}

.o-layout--main-axis-space-evenly {
  justify-content: space-evenly;
}

.o-layout--cross-axis-start {
  align-items: flex-start;
}

.o-layout--cross-axis-center {
  align-items: center;
}

.o-layout--cross-axis-end {
  align-items: flex-end;
}

.o-layout--cross-axis-baseline {
  align-items: baseline;
}

.o-layout--cross-axis-stretch {
  align-items: stretch;
}

.o-layout--cross-axis-stretch > * {
  display: flex;
}

.o-layout--row-reverse {
  flex-direction: row-reverse;
}

.o-layout--text {
  flex-wrap: wrap;
  margin: 0 0 0 -0.4em;
}

.o-layout--text > * {
  padding: 0 0 0 0.4em;
}

.o-items-clip {
  overflow: hidden;
}

.o-size-hug {
  flex: 0 0 auto;
}

.o-size-fill {
  flex: 1 1 auto;
}

.o-order-top {
  order: -1;
}

.o-items-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.o-items-fill-vertical {
  display: flex;
  flex-direction: column;
}

.o-items-fill-vertical > * {
  flex: 1;
}

.o-text-center {
  text-align: center;
}

.o-text-left {
  text-align: left;
}

.o-text-right {
  text-align: right;
}

.o-space {
  margin-top: 1em;
}

.o-space--small {
  margin-top: 0.5em;
}

.o-space--large {
  margin-top: 2em;
}

.o-spacer {
  display: block;
  width: 1em;
  height: 1em;
}

.o-spacer--small {
  width: 0.5em;
  height: 0.5em;
}

.o-spacer--large {
  width: 1.5em;
  height: 1.5em;
}

.o-spacer--large-2 {
  width: 2em;
  height: 2em;
}

.o-font-inherit {
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.o-nowrap {
  white-space: nowrap;
}

.o-control-text-wrap {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.o-separator {
  border-top: 1px solid var(--color-primary);
  height: 0;
}

/**
 * 余白を持たせる Object クラス
 */
.o-layout-block {
  padding: var(--size-padding-content);
}

.o-normalize-html {
  font-family: var(--font-default);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-default);
}

.o-normalize-html :is(p, ul, ol, h1, h2, h3, h4, h5) {
  margin-top: 1em;
}

.o-normalize-html :is(ul li, ol li) {
  list-style: disc;
  margin-left: 1em;
}

/**
 * Component Layer
 */

/**
 * 頭にリストマークを持つ Component クラス
 */

.c-has-list-mark {
  position: relative;
  padding-inline-start: 1.5em;
}

.c-has-list-mark__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

/**
 * ボーダーを持った箱 Component クラス
 */
.c-layout-box {
  background-color: var(--color-background);
  border: 1px solid var(--color-primary);
  margin: -1px 0 0 -1px;
  border-width: 1px 0 0 1px;
  position: relative;
}

.c-layout-box--step {
  --_length-coefficient: 1;
  --_length: calc(var(--size-padding-content) * var(--_length-coefficient) * 0.7);
  --_left: calc(var(--size-padding-content) + 1.5em);
  --_stroke-width: 1px;
  --_offset-y: 0.3em;

  padding-top: calc(var(--size-padding-content) * var(--_length-coefficient));
  padding-bottom: calc(var(--size-padding-content) * var(--_length-coefficient));
}

.c-layout-box--step + .c-layout-box--step::before {
  border-left: var(--_stroke-width) solid var(--color-primary);
  content: "";
  display: block;
  height: var(--_length);
  left: var(--_left);
  position: absolute;
  top: calc(var(--_length) / -2);
  width: 0;
  translate: 0 var(--_offset-y);
}

.c-layout-box--step + .c-layout-box--step::after {
  border-color: var(--color-primary);
  border-style: solid;
  border-width: 0 0 var(--_stroke-width) var(--_stroke-width);
  content: "";
  display: block;
  height: 1em;
  left: calc(var(--_left) - var(--_stroke-width) / 2);
  position: absolute;
  rotate: -45deg;
  top: calc(var(--_length) / 2 - 1em + 1.14px);
  transform-origin: 1px calc(100% - 1px);
  width: 1em;
  translate: 0 var(--_offset-y);
}

.c-sticky {
  position: sticky;
  top: calc(var(--size-scroll-offset) + 2em);
}

.c-heading {
  font-size: var(--font-size-heading);
  font-weight: bold;
  display: flex;
  gap: 0.25em 0.5em;
  align-items: start;
}

.c-heading--process-step {
  font-size: var(--font-size-paragraph);
}

.c-heading--layout-vertical {
  flex-direction: column;
}

.c-heading__label {
  font-size: 0.8em;
  padding: 0 0.5em;
  display: inline-flex;
  color: var(--color-foreground-inverted);
  background-color: var(--color-kodansha-green);
  text-transform: uppercase;
}

.c-process-content {
  font-size: var(--font-size-paragraph-small);
}

.c-layout-box__numbering {
  background-color: var(--color-kodansha-blue);
  color: var(--color-foreground-inverted);
  display: inline-flex;
  font-size: 1.2em;
  left: calc(var(--size-padding-content) * -1);
  padding: 0 0.45em;
  position: absolute;
  top: calc(var(--size-padding-content) * -1);
}

.c-sustainability-process-layout {
  --_gap: 0;
  display: grid;
  grid-template-columns: 1fr min(40%, 520px);
  gap: var(--_gap);
}

.c-sustainability-process-layout--type-2 {
  grid-template-columns: 1fr 1fr;
}

.c-sustainability-process-layout__matrix {
  padding: 0.5em;
}

.c-sustainability-materiality-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.c-sdgs-icon {
  width: 64px;
  aspect-ratio: 1;
}

.c-figure {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.c-figure__caption {
  font-weight: bold;
  display: flex;
  justify-content: center;
}

.c-materiality-map-layout {
  gap: 2em;
}

.c-heralbony-thumb {
  object-fit: contain;
  aspect-ratio: 3/2;

  @media (max-width: 480px) {
    aspect-ratio: auto;
  }
}

.c-link {
  text-decoration: underline;
}

/**
 * Layout Layer
 */

.l-sub-header__img {
  aspect-ratio: 1345/364;
  overflow: hidden;
  position: relative;
}

.l-sub-header__img img {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  top: 55%;
  scale: 1;
}

.l-menu-anc {
  position: sticky;
  top: calc(var(--size-header-height) - 2px);
  z-index: var(--layer-1);
  background-color: var(--color-background);
}

.l-menu-anc__menu--flexible {
  list-style: none;
}

.l-menu-anc__menu--flexible li::marker {
  content: none;
}

.l-menu-anc__menu--flexible {
  margin: -1px 0 0 -1px;
}

.l-menu-anc__menu--flexible li,
.l-menu-anc__menu--flexible li:nth-child(even) {
  border: 1px solid var(--color-primary);
  flex-basis: auto;
  flex: auto 1 1;
  height: auto;
  margin-left: 0;
}

.l-menu-anc__menu--flexible li a:nth-child(n) {
  font-family: var(--font-default);
  padding: 0.75em 1em;
  white-space: normal;
}

.l-menu-anc__menu--flexible li a::after {
  margin-right: 0;
}

.l-sustainability__header .l-section__header--single-line {
  padding-bottom: 0;
  padding-right: 0;
  margin: 0;
}

.l-sustainability__header .l-section__content {
  margin-top: 1em;
  padding-left: var(--size-padding-content);
}

.l-section__wrap--materiality,
.l-section__wrap--activities {
  max-width: 50vw;
}

.l-sustainability__header-accented {
  --_photo-url: url(/img/sustainability/photo.jpg);

  border-color: var(--color-primary);
  border-style: solid;
  border-width: 2px 0 1px;
  display: grid;
  grid-template-columns: minmax(35%, auto) 1fr;
  margin-top: -2px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.l-sustainability__header-accented::before {
  background-image: url(/img/sustainability/kodansha-logo-symbol-white-for-background.svg), var(--_photo-url);
  background-position:
    45% 65%,
    50% 50%;
  background-repeat: no-repeat;
  background-size: cover, cover;
  content: "";
  display: block;
  grid-area: 1 / 2 / 2 / 3;
}

.l-sustainability__header-accented::after {
  aspect-ratio: 54.329686 / 100;
  background-color: var(--color-background);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  content: "";
  display: block;
  grid-area: 1 / 2 / 2 / 3;
  height: 110%;
  justify-self: start;
  left: -1px;
  position: absolute;
  width: auto;
}

.l-sustainability__header-accented > * {
  margin: 0;
  order: 1;
  padding: 90px 0 80px;
}

.l-sustainability__header-accented--photo-2 {
  --_photo-url: url(/img/sustainability/photo-2.jpg);
}

.l-sustainability__header-accented--photo-3 {
  --_photo-url: url(/img/sustainability/photo-3.jpg);
}

.l-sustainability__header-accented--photo-4 {
  --_photo-url: url(/img/sustainability/photo-4.webp);
}

.st-wrapper {
  overflow: visible;
}

@media (max-width: 1302px) {
  :root {
    --size-header-height: 52px;
  }

  [id] {
    scroll-padding-top: var(--size-scroll-offset);
  }
}

@media (max-width: 1100px) {
  .l-menu-anc__menu--flexible {
    flex-wrap: wrap;
  }
}

@media (max-width: 960px) {
  .c-materiality-map-layout {
    flex-direction: column;
  }

  .c-materiality-map-layout > * {
    width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --size-padding-content: 23px;
    --font-size-paragraph: 1.4545454545rem;
    --font-size-heading: 2.0710227273rem;
    --size-scroll-offset: var(--size-header-height);
  }

  .c-layout-box--step {
    --_length-coefficient: 1.5;
  }

  .c-sustainability-process-layout {
    grid-template-columns: 1fr;
  }

  .c-sustainability-materiality-layout {
    grid-template-columns: 1fr;
  }

  .c-layout-box--has-numbering {
    padding-left: calc(var(--size-padding-content) * 2.8);
  }

  .c-layout-box__numbering {
    left: calc(var(--size-padding-content) * -2.8);
    font-size: 1.5em;
  }

  .l-menu-anc {
    position: static;
  }

  .l-menu-anc__menu--flexible li a::after {
    margin-left: 1em !important;
  }

  .l-section__wrap--activities {
    max-width: 100%;
    padding: 0 0 3em;
  }

  .l-sustainability__header-accented--vertical-photo-on-mobile-size {
    grid-template-columns: 1fr;
  }
  .l-sustainability__header-accented--vertical-photo-on-mobile-size::before,
  .l-sustainability__header-accented--vertical-photo-on-mobile-size::after {
    grid-area: 1 / 1 / 2 / 2;
  }

  .l-sustainability__header-accented--vertical-photo-on-mobile-size::before {
    height: 30vw;
    width: 100%;
  }

  .l-sustainability__header-accented--vertical-photo-on-mobile-size::after {
    width: 100%;
    aspect-ratio: 100 / 25;
    scale: 1 -1;
    height: auto;
    left: 0;
    bottom: -1px;
  }

  .l-sub-header__img img {
    top: 52%;
    scale: 2;
  }
}

.l-sec-heralbony {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1em;
}