@charset "utf-8";



#main_box { line-height: 2.0; }



/* side_menu ----------------- */

#side_box .side_menu .menu_grp_c.grp24 {

}

li.btn241 {

  background-color: rgb(218,218,218);

  border-bottom-color: rgb(204,204,204) !important;

}

li.btn241 > a {

  pointer-events:none;

  cursor: auto;

}

#side_box .side_menu .menu_grp_c > li.btn241 > a::after {

  display: none;

}

#side_box .side_menu .menu_grp_d.grp241 {

  display: block;

}

#side_box .side_menu .menu_grp_c.grp24._close .btn242 {

    display: none;

}



/* contents ---- */

#main_box .box_gray24 li {

	padding-bottom: 0.5em;

	padding-left: 1em;

	text-indent: -1em;

	font-size: 1.14em;

	line-height: 2.0;

}



#main_box .box01 {

  display: flex;

  justify-content: space-between;

}

.box01 .text {

  width: calc((394 / 794 * 100%) - 20px);

  margin-bottom: 20px;

}

.box01 .img01 {

  width: calc(400 / 794 * 100%);

  margin-bottom: 20px;

}



#main_box .box02 .img01 {

  width: calc(330 / 794 * 100%);

  max-width: 330px;

}

@media screen and (max-width:767px) {

  #main_box .box01 {

    display: block;

  }

  .box01 .text,

  .box01 .img01 {

    width: 100%;

  }

  .box01 .img01 {

    max-width: 360px;

    margin-right: auto;

    margin-left: auto;

  }

  

  #main_box .box02 .img01 {

    width: 100%;

  }

}







.box01 .materiality_box {

  position: relative;

  margin-top: 20px;

  margin-bottom: 8px;

}

.box01 .materiality_box .hex_panels_bg {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate3d(-50%, -50%, 0);

  width: calc(358 / 450 * 100%);

  height: calc(318 / 418* 100%);

  background: linear-gradient(to bottom, rgb(229,229,229) 50%, rgb(191,191,191) 50%);

  clip-path: polygon(0% 100%, 21.8% 0%, 78.2% 0%, 100% 100%);

}

.box01 .materiality_box .hex_panels_bg > li {

  position: absolute;

  left: 50%;

  width: 100%;

  text-align: center;

  font-size: 21px;

}

.box01 .materiality_box .hex_panels_bg > li:nth-child(1) {

  top: 25%;

  transform: translate3d(-50%, -50%, 0);

}

.box01 .materiality_box .hex_panels_bg > li:nth-child(2) {

  bottom: 25%;

  transform: translate3d(-50%, 50%, 0);

}

.box01 .materiality_box .hex_panels {

  position: relative;

  width: 96%;

  max-width: 346px;

  margin-right: auto;

  margin-left: auto;

  padding-top: 418px;

}

.box01 .materiality_box .hex_panels > li {

  position: absolute;

  width: calc(56 / 346 * 100%);

}

.box01 .materiality_box .hex_panels > .hex05 {

  top: 0;

  left: calc(28 / 346 * 100%);

}

.box01 .materiality_box .hex_panels > .hex01 {

  top: 0;

  left: 50%;

  transform: translate3d(-50%, 0 , 0);

}

.box01 .materiality_box .hex_panels > .hex03 {

  top: 0;

  right: calc(28 / 346 * 100%);

}

.box01 .materiality_box .hex_panels > .hex06 {

  top: 50%;

  left: calc(28 / 346 * 100%);

  transform: translate3d(0, -50%, 0);

}

.box01 .materiality_box .hex_panels > .hex04 {

  top: 50%;

  left: 50%;

  transform: translate3d(-50%, -50%, 0);

}

.box01 .materiality_box .hex_panels > .hex02 {

  top: 50%;

  right: calc(28 / 346 * 100%);

  transform: translate3d(0, -50%, 0);

}

.box01 .materiality_box .hex_panels > .hex07 {

  bottom: 0;

  right: calc(50% + (28 / 346 * 100%) + 3px);

}

.box01 .materiality_box .hex_panels > .hex08 {

  bottom: 0;

  left: calc(50% + (28 / 346 * 100%) + 3px);

}



@media screen and (max-width: 767px) {

  .box01 .materiality_box .hex_panels {

    padding-top: 347px;

  }

  .box01 .materiality_box .hex_panels > li > span {

    padding-top: calc(1.732 * 100%);

  }

  .box01 .materiality_box .hex_panels > li > span > span {

    width: 166%;

  }

}





.materiality_box .hex_panels > li {

  width: calc(100% / 14);

  background-color: rgb(89,89,89);

}

.materiality_box .hex_panels > li::before,

.materiality_box .hex_panels > li::after {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgb(89,89,89);

  z-index: 0;

  content: '';

}

.materiality_box .hex_panels > li::before {

  transform: rotate(60deg);

}

.materiality_box .hex_panels > li::after {

  transform: rotate(-60deg);

}



.materiality_box .hex_panels > .hex01,

.materiality_box .hex_panels > .hex01 p > span,

.materiality_box .hex_panels > .hex01::before,

.materiality_box .hex_panels > .hex01::after {

  background-color: rgb(255,102,0);

}

.materiality_box .hex_panels > .hex02,

.materiality_box .hex_panels > .hex02 p > span,

.materiality_box .hex_panels > .hex02::before,

.materiality_box .hex_panels > .hex02::after {

  background-color: rgb(255,80,80);

}



.materiality_box .hex_panels > .hex03,

.materiality_box .hex_panels > .hex03 p > span,

.materiality_box .hex_panels > .hex03::before,

.materiality_box .hex_panels > .hex03::after {

  background-color: rgb(112,48,160);

}

.materiality_box .hex_panels > .hex04,

.materiality_box .hex_panels > .hex04 p > span,

.materiality_box .hex_panels > .hex04::before,

.materiality_box .hex_panels > .hex04::after {

  background-color: rgb(84,130,53);

}

.materiality_box .hex_panels > .hex05,

.materiality_box .hex_panels > .hex05 p > span,

.materiality_box .hex_panels > .hex05::before,

.materiality_box .hex_panels > .hex05::after {

  background-color: rgb(255,153,0);

}

.materiality_box .hex_panels > .hex06,

.materiality_box .hex_panels > .hex06 p > span,

.materiality_box .hex_panels > .hex06::before,

.materiality_box .hex_panels > .hex06::after {

  background-color: rgb(0,112,192);

}

.materiality_box .hex_panels > .hex08,

.materiality_box .hex_panels > .hex08 p > span,

.materiality_box .hex_panels > .hex08::before,

.materiality_box .hex_panels > .hex08::after {

  background-color: rgb(255,192,0);

}



.materiality_box .hex_panels > li > span {

  display: block;

  position: relative;

  padding-top: calc(1.732 * 100%);

  z-index: 100;

}

.materiality_box .hex_panels > li > span > span {

  display: flex;

  justify-content: center;

  align-items: center;

  position: absolute;

  top: 0;

  left: 50%;

  width: 166%;

  height: 100%;

  font-size: 11px;

  /* font-weight: 700; */

  line-height: 1.3;

  color: rgb(255,255,255);

  transform: translate3d(-50%, 0, 0);

  text-align: center;

}



@media screen and (max-width: 980px) {

  .materiality_box .hex_panels > li > span > span {

    font-size: calc(1.6949vw - 5.6102px);

  }

}

@media screen and (max-width: 920px) {

  .materiality_box .hex_panels > li > span > span {

    font-size: 10px;

  }

}

@media screen and (max-width: 767px) {

  .box01 .materiality_box .hex_panels_bg > li {

    font-size: 16px;

  }

  .materiality_box .hex_panels > li {

    width: calc(100% / 1.5);

  }

  .materiality_box .hex_panels > li > span {

    padding-top: calc((1 / 1.732) * 100%);

  }

  

  .materiality_box .hex_panels > li > span > span {

    width: 100%;

  }

}





.box02 .initiatives {

}

.box02 .initiatives_box {

  position: relative;

}

.box02 .initiatives_box .title_hex {

  position: absolute;

  top: 0;

  left: 0;

  width: 122px;

  height: 107px;

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

}

.box02 .initiatives_box06 .title_hex {

  background-image: url(../images/bg_icon06.png);

}

.box02 .initiatives_box .title_hex > span {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 115px;

  height: 101px;

  text-align: center;

}

.box02 .initiatives_box .title_hex > span {

  font-size: 11px;

  letter-spacing: -.33px;

  line-height: 1.4;

  color: rgb(255,255,255);

}

.box02 .initiatives_box .title_hex > span ._ls1 {

  letter-spacing: -1px;

}

.box02 .initiatives_box .title_text {

  min-height: 95px;

  padding-left: 125px;

  line-height: 1.56;

}

.box02 .initiatives_box._hide .title_text {

  min-height: 0;

}

.box02 .initiatives_box .title_text > span {

  letter-spacing: -.5px;

}

.box02 .initiatives_box .box_gray .box_variable {

  padding: 10px;

}

.box02 .initiatives_box .box_gray h6 {

  font-weight: 700;

}