@charset "utf-8";



#main_box { line-height: 2.0; }



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





/* contents ---- */



.box01 .img02,

.box01 .img03,

.box01 .img04,

.box01 .img05,

.box01 .img06,

.box01 .img07 {

  width: calc(320 / 656 * 100%);

  margin-left: 20px;

}





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

}









.backnumber_list .d02 {

  display: none;

}









/* Material ---- */

.box01 .materiality_box {

  position: relative;

}



.box01 .materiality_box .hex_panels {

  position: relative;

  width: 100%;

  padding-top: calc(1.732 * 1.5 * 7.14%);

  z-index: 90;

}

.box01 .materiality_box .hex_panels > li {

  position: absolute;

}



.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);

}



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

  top: 0;

  left: -6px;

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

}

.materiality_box .hex_panels > li:nth-child(1) p > span,

.materiality_box .hex_panels > li:nth-child(1)::before,

.materiality_box .hex_panels > li:nth-child(1)::after {

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

}

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

  top: calc(100% / 3 + 3px);

  left: calc(7.14% * 1.5 - 3px);

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

}

.materiality_box .hex_panels > li:nth-child(2) p > span,

.materiality_box .hex_panels > li:nth-child(2)::before,

.materiality_box .hex_panels > li:nth-child(2)::after {

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

}



.box01 .materiality_box .hex_panels > li:nth-child(3) {

  top: 0;

  left: calc(7.14% * 3);

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

}

.materiality_box .hex_panels > li:nth-child(3) p > span,

.materiality_box .hex_panels > li:nth-child(3)::before,

.materiality_box .hex_panels > li:nth-child(3)::after {

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

}

.box01 .materiality_box .hex_panels > li:nth-child(4) {

  top: calc(100% / 3 + 3px);

  left: calc(7.14% * 4.75);

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

}

.materiality_box .hex_panels > li:nth-child(4) p > span,

.materiality_box .hex_panels > li:nth-child(4)::before,

.materiality_box .hex_panels > li:nth-child(4)::after {

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

}

.box01 .materiality_box .hex_panels > li:nth-child(5) {

  top: 0;

  left: calc(7.14% * 6.5);

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

}

.materiality_box .hex_panels > li:nth-child(5) p > span,

.materiality_box .hex_panels > li:nth-child(5)::before,

.materiality_box .hex_panels > li:nth-child(5)::after {

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

}

.box01 .materiality_box .hex_panels > li:nth-child(6) {

  top: calc(100% / 3 + 3px);

  left: calc(7.14% * 8.25);

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

}

.materiality_box .hex_panels > li:nth-child(6) p > span,

.materiality_box .hex_panels > li:nth-child(6)::before,

.materiality_box .hex_panels > li:nth-child(6)::after {

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

}

.box01 .materiality_box .hex_panels > li:nth-child(7) {

  top: 0;

  left: calc(7.14% * 11 - 3px);

}

.box01 .materiality_box .hex_panels > li:nth-child(8) {

  top: calc(100% / 3 + 3px);

  left: calc(7.14% * 12.5);

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

}

.materiality_box .hex_panels > li:nth-child(8) p > span,

.materiality_box .hex_panels > li:nth-child(8)::before,

.materiality_box .hex_panels > li:nth-child(8)::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;

}



.box01 .missions {

  position: relative;

  display: flex;

  justify-content: space-between;

  z-index: 80;

}

.box01 .missions > li {

  position: relative;

  width: calc((100% - 15px) / 4);

  margin-top: calc(-1.732 * 1.5 * 7.14%);

  padding-top: calc(1.732 * 1.5 * 7.14% + 20px);

}

.box01 .missions > li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 50%;

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

  content: '';

}

.box01 .missions > li::after {

  position: absolute;

  top: 0;

  right: -3px;

  width: 1px;

  height: 100%;

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

  content: '';

}

.box01 .missions > li:last-child::after {

  display: none;

}

.box01 .missions > li > .title {

  position: relative;

  padding-top: 8px;

  padding-bottom: 8px;

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

  text-align: center;

  font-weight: 700;

  line-height: 1.5;

}

.box01 .missions > li > .sub_tit {

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  min-height: 90px;

  text-decoration: underline;

  padding: 8px;

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

  line-height: 1.5;

  font-weight: 700;

}

.box01 .missions > li > .text {

  position: relative;

  padding: 8px;

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

  font-size: 87.5%;

}



.box01 .slogan {

  position: relative;

  margin-top: 64px;

  font-weight: 700;

  font-size: 125%;

  line-height: 1.2;

  text-align: center;

}

.box01 .slogan::before {

  position: absolute;

  top: -30px;

  left: 50%;

  width: 140px;

  height: 30px;

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

  background: linear-gradient(to top right, rgba(255,255,255,0) 50%, rgb(202,202,202) 50%) no-repeat top left/50% 100%,linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(202,202,202) 50%) no-repeat bottom right/50% 100%;

  content: '';

}





@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 {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

  }

  .box01 .materiality_box .hex_panels {

    width: 120px;

    padding-top: 0;

  }

  

  .materiality_box .hex_panels > li {

    width: calc(100% / 1.5);

  }

  .materiality_box .hex_panels > li > span {

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

  }

  

  .box01 .materiality_box .hex_panels > li {

    position: relative;

    margin-top: 25px;

  }

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

    margin-left: 41px;

  }

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

    top: 0;

    left: 0;

    margin-top: 34px;

  }

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

    top: 0;

    left: 0;  }

  .box01 .materiality_box .hex_panels > li:nth-child(3) {

    top: 0;

    left: 0;

  }

  .box01 .materiality_box .hex_panels > li:nth-child(4) {

    top: 0;

    left: 0;

    margin-top: 54px;

  }

  .box01 .materiality_box .hex_panels > li:nth-child(5) {

    top: 0;

    left: 0;

    margin-top: 54px;

  }

  .box01 .materiality_box .hex_panels > li:nth-child(6) {

    top: 0;

    left: 0;

    margin-top: 72px;

  }

  .box01 .materiality_box .hex_panels > li:nth-child(7) {

    top: 0;

    left: 0;

    margin-top: 106px;

  }

  .box01 .materiality_box .hex_panels > li:nth-child(8) {

    top: 0;

    left: 0;

  }

  .materiality_box .hex_panels > li > span > span {

    width: 100%;

  }



  

  .box01 .materiality_box .missions {

    width: calc(100% - 128px);

    flex-direction: column;

  }

  .box01 .missions > li {

    width: 100%;

    margin-top: 5px;

    padding-top: 0;

  }

  .box01 .missions > li::before {

    display: none;

  }

  .box01 .missions > li::after {

    right: 0;

    top: -3px;

    width: calc(100% + 128px);

    height: 1px;

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

    content: '';

  }

  .box01 .missions > li:first-child::after {

    display: none;

  }

  .box01 .missions > li:last-child::after {

    display: block;

  }

  .box01 .missions > li > .sub_tit {

    min-height: 30px;

  }

  .box01 .materiality_box .materiality_box .slogan {

    width: 100%;

  }

  .box01 .missions > li > .text {

    min-height: 120px;

  }

}