@charset "utf-8";



#main_box { line-height: 2.0; }



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

li.btn013 {

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

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

}

li.btn013 > a {

  pointer-events: none;

  cursor: auto;

}

#side_box .side_menu li.btn013 > a::after { display: none; }







/* contents ---- */



/* -- box01 ------ */



.box01 {

  

}



.box01 .philosophy {

}

.box01 .philosophy > h5 {

  display: block;

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

  padding: 7px;

  font-size: 24px;

  font-weight: 700;

}

.box01 .philosophy > .text {

  font-size: 24px;

  font-weight: 700;

  line-height: 1.5;

}



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

  .box01 .philosophy > h5 {

    font-size: 18px;

  }

  .box01 .philosophy > .text {

    font-size: 18px;

    letter-spacing: -1px;

  }

}





.box01 .model_box_wrap {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.box01 .model_box {

  position: relative;

  width: 100%;

  border: 2px rgb(218,218,218) solid;

}

.box01 .model_box01 {

  width: calc((100% - 10px) * (330 / 784));

}

.box01 .model_box02 {

  width: calc((100% - 10px) * (454 / 784));

}

.box01 .model_box03 {

  margin-top: 80px;

}

.box01 .model_box04 {

  border-style: none;

}



.box01 .model_box > .title {

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

  padding: 7px;

  font-size: 18px;

  font-weight: 700;

  text-align: center;

}

.box01 .model_box01 .item {

  width: 80%;

  margin-right: auto;

  margin-left: auto;

  padding-top: calc(26 / 326 * 100%);

  padding-bottom: calc(20 / 326 * 100%);

}

.box01 .model_box01 .item > li {

  position: relative;

  line-height: 1.33;

}

.box01 .model_box01 .item > li:nth-child(1),

.box01 .model_box01 .item > li:nth-child(3) {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 69px;

  border-radius: 12px;

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

  padding: 4px;

}

.box01 .model_box01 .item > li:nth-child(1)::after,

.box01 .model_box01 .item > li:nth-child(3)::before {

  position: absolute;

  left: 50%;

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

  content: '';

}

.box01 .model_box01 .item > li:nth-child(1)::after {

  bottom: -62px;

  border-top: 44px rgb(191,191,191) solid;

  border-right: 44px transparent solid;

  border-left: 44px transparent solid;

}

.box01 .model_box01 .item > li:nth-child(3)::before {

  top: -62px;

  border-bottom: 44px rgb(191,191,191) solid;

  border-right: 44px transparent solid;

  border-left: 44px transparent solid;

}

.box01 .model_box01 .item > li:nth-child(2) {

  margin-top: 80px;

  margin-bottom: 80px;

  background-color: transparent;

  font-size: 21px;

  font-weight: 700;

}



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

}



.box01 ._x {

  position: absolute;

  top: calc(50% + 20px);

  left: calc(-39 / 454 * 100% - 7px);

  transform: translate3d(0, -50%, 0) rotate(-45deg);

  width: calc(78 / 454 * 100%);

  padding-top: calc(78 / 454 * 100%);

}

.box01 ._x::before,

.box01 ._x::after {

  position: absolute;

  top: 50%;

  left: 50%;

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

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

  content: '';

}

.box01 ._x::before {

  width: calc(25 / 78 * 100%);

  height: 100%;

}

.box01 ._x::after {

  width: 100%;

  height: calc(25 / 78 * 100%);

}



.box01 .model_box03::before {

  position: absolute;

  top: -60px;

  left: 50%;

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

  border-top: 40px rgb(218,218,218) solid;

  border-right: 94px transparent solid;

  border-left: 94px transparent solid;

  content: '';

}



.box01 .model_box03 > .title {

  font-size: 24px;

}

.box01 .model_box03 > .slogan {

  font-size: 24px;

  font-weight: 700;

  letter-spacing: -2px;

  text-align: center;

  line-height: 1.25;

}

.box01 .model_box03 > .mission_box_wrap {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  width: calc(730 / 790 * 100%);

  margin-right: auto;

  margin-left: auto;

}

.box01 .model_box03 > .mission_box_wrap .mission_box {

  width: calc(347 / 730 * 100%);

  margin-bottom: 32px;

}

.box01 .model_box03 > .mission_box_wrap .mission_box .title {

  padding: 13px 0 13px 24px;

  background-color: rgb(247,176,0);

  font-size: 22px;

  line-height: 1.25;

  font-weight: 700;

  letter-spacing: -1px;

  color: rgb(255,255,255);

}

html[lang="en"] .box01 .model_box03 > .mission_box_wrap .mission_box .title {

  font-size: 20px;

}

.box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt {

  position: relative;

  padding-left: calc(56 / 347 * 100%);

  line-height: 1.56;

}

.box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt::before {

  position: absolute;

  top: -10px;

  left: 0;

  width: calc(48 / 347 * 100%);

  padding-top: calc(48 / 347 * 100%);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

  content: '';

}

.box01 .model_box03 > .mission_box_wrap .mission_box01 .mission_txt::before {

  background-image: url(../../images/icon01.svg);

}

.box01 .model_box03 > .mission_box_wrap .mission_box02 .mission_txt::before {

  background-image: url(../../images/icon02.svg);

}

.box01 .model_box03 > .mission_box_wrap .mission_box03 .mission_txt::before {

  background-image: url(../../images/icon03.svg);

}

.box01 .model_box03 > .mission_box_wrap .mission_box04 .mission_txt::before {

  background-image: url(../../images/icon04.svg);

}

.box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt .sttl {

  margin-top: 16px;

  font-weight: 700;

  letter-spacing: -.5px;

}

.box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt .sttl > span {

  display: inline;

  border-bottom: 1px solid;

  padding-bottom: 1px;

}

.box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt .text {

  margin-top: 8px;

}



.box01 .model_box04 > .text {

  position: relative;

  line-height: 1.4;

  font-size: 24px;

  letter-spacing: -1.5px;

  font-weight: 700;

  text-align: center;

}

.box01 .model_box04 > .text::before,

.box01 .model_box04 > .text::after {

  position: absolute;

  left: 50%;

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

  border-right: 94px transparent solid;

  border-left: 94px transparent solid;

  content: '';

}

.box01 .model_box04 > .text::before {

  top: -50px;

  border-bottom: 40px rgb(218,218,218) solid;

}

.box01 .model_box04 > .text::after {

  bottom: -50px;

  border-top: 40px rgb(218,218,218) solid;

}

.box01 .model_box04 > .image {

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

  margin-right: auto;

  margin-left: auto;

}





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

  .box01 .model_box01 {

    width: calc(550 / 686 * 100%);

    min-width: 275px;

    margin-right: auto;

    margin-left: auto;

  }

  .box01 .model_box > .title {

    font-size: 16px;

  }

  

  .box01 .model_box01 .item > li:nth-child(2) {

    font-size: 18px;

  }

  .box01 .model_box01 .item > li:nth-child(1),

  .box01 .model_box01 .item > li:nth-child(3) {

    height: 57px;

  }

  

  .box01 .model_box02 {

    width: 100%;

    margin-top: 80px;

  }

  .box01 ._x {

    top: -70px;

    left: 50%;

    transform: translate3d(-50%, 0, 0) rotate(-45deg);

  }

  

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

  }

  

  .box01 .model_box03 {

    margin-top: 48px;

    border-style: none;

  }

  .box01 .model_box03::before {

    top: -40px;

    border-top-width: 29px;

    border-right-width: 69px;

    border-left-width: 69px;

  }

  .box01 .model_box03 > .slogan {

    font-size: 18px;

    letter-spacing: -.7px;

  }

  

  .box01 .model_box03 > .mission_box_wrap .mission_box {

    width: 100%;

    margin-bottom: 16px;

  }

  .box01 .model_box03 > .mission_box_wrap .mission_box .title {

    max-width: 223px;

    font-size: 16px;

  }

  html[lang="en"] .box01 .model_box03 > .mission_box_wrap .mission_box .title {

    max-width: 275px;

    font-size: 16px;

  }

  .box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt .sttl {

    font-size: 16px;

  }

  .box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt {

    padding-left: 77px;

  }

  .box01 .model_box03 > .mission_box_wrap .mission_box .mission_txt::before {

    width: 48px;

    height: 48px;

    left: 8px;

  }

  

  .box01 .model_box04 > .text {

    font-size: 18px;

    letter-spacing: -.7px;

  }

  .box01 .model_box04 > .text::before,

  .box01 .model_box04 > .text::after {

    border-right-width: 69px;

    border-left-width: 69px;

  }

  .box01 .model_box04 > .text::before {

    top: -36px;

    border-bottom-width: 29px;

  }

  .box01 .model_box04 > .text::after {

    bottom: -36px;

    border-top-width: 29px;

  }

  .box01 .model_box04 > .image {

    width: 100%;

  }

  

}





/* -- box02 ------ */

.box02 {

  

}

.box02 .process_box > li {

  position: relative;

  margin-bottom: 44px;

  border: 1px rgb(218,218,218) solid;

}

.box02 .process_box > li:last-child {

  border-style: none;

  margin-bottom: 0;

}

.box02 .process_box > li::after {

  position: absolute;

  left: 50%;

  bottom: -35px;

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

  border-top: 24px rgb(218,218,218) solid;

  border-right: 58px transparent solid;

  border-left: 58px transparent solid;

  content: '';

}

.box02 .process_box > li:last-child::after {

  display: none;

}

.box02 .process_box > li > .title {

  padding: 7px;

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

  text-align: center;

  line-height: 1.67;

  font-size: 18px;

  font-weight: 700;

}

.box02 .process_box > li > .text {

  padding: 17px 7px;

  line-height: 1.56;

  text-align: center;

}



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

  .box02 .process_box > li > .title {

    padding: 9px 6px;

    font-size: 16px;

    line-height: 1.2;

  }

  .box02 .process_box > li > .text {

    padding: 9px 6px;

  }

}









/* -- box03 ------ */



.box03 .materiality_box {

  position: relative;

}



.box03 .materiality_box .hex_panels {

  position: relative;

  width: 100%;

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

  z-index: 90;

}

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

}



.box03 .materiality_box .hex_panels > .hex01 {

  top: 0;

  left: -6px;

}

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

}

.box03 .materiality_box .hex_panels > .hex02 {

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

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

}

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

}



.box03 .materiality_box .hex_panels > .hex03 {

  top: 0;

  left: calc(7.14% * 3);

}

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

}

.box03 .materiality_box .hex_panels > .hex04 {

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

  left: calc(7.14% * 4.75);

}

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

}

.box03 .materiality_box .hex_panels > .hex05 {

  top: 0;

  left: calc(7.14% * 6.5);

}

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

}

.box03 .materiality_box .hex_panels > .hex06 {

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

  left: calc(7.14% * 8.25);

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

}

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

}

.box03 .materiality_box .hex_panels > .hex07 {

  top: 0;

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

}

.box03 .materiality_box .hex_panels > .hex08 {

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

  left: calc(7.14% * 12.5);

}

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

}



.box03 .missions {

  position: relative;

  display: flex;

  justify-content: space-between;

  z-index: 80;

}

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

}

.box03 .missions > li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 50%;

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

  content: '';

}

.box03 .missions > li::after {

  position: absolute;

  top: 0;

  right: -3px;

  width: 1px;

  height: 100%;

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

  content: '';

}

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

  display: none;

}

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

}

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

}

.box03 .missions > li > .text {

  position: relative;

  padding: 8px;

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

  font-size: 87.5%;

}



.box03 .slogan {

  position: relative;

  margin-top: 64px;

  font-weight: 700;

  font-size: 125%;

  line-height: 1.2;

  text-align: center;

}

.box03 .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) {

  .box03 .materiality_box {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

  }

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

  }

  

  .box03 .materiality_box .hex_panels > li {

    position: relative;

    margin-top: 25px;

  }

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

    margin-left: 41px;

  }

  .box03 .materiality_box .hex_panels > .hex01 {

    top: 0;

    left: 0;

    margin-top: 34px;

  }

  .box03 .materiality_box .hex_panels > .hex02 {

    top: 0;

    left: 0;  }

  .box03 .materiality_box .hex_panels > .hex03 {

    top: 0;

    left: 0;

  }

  .box03 .materiality_box .hex_panels > .hex04 {

    top: 0;

    left: 0;

    margin-top: 54px;

  }

  .box03 .materiality_box .hex_panels > .hex05 {

    top: 0;

    left: 0;

    margin-top: 54px;

  }

  .box03 .materiality_box .hex_panels > .hex06 {

    top: 0;

    left: 0;

    margin-top: 72px;

  }

  .box03 .materiality_box .hex_panels > .hex07 {

    top: 0;

    left: 0;

    margin-top: 106px;

  }

  .box03 .materiality_box .hex_panels > .hex08 {

    top: 0;

    left: 0;

  }

  .materiality_box .hex_panels > li > span > span {

    width: 100%;

  }



  

  .box03 .materiality_box .missions {

    width: calc(100% - 128px);

    flex-direction: column;

  }

  .box03 .missions > li {

    width: 100%;

    margin-top: 5px;

    padding-top: 0;

  }

  .box03 .missions > li::before {

    display: none;

  }

  .box03 .missions > li::after {

    right: 0;

    top: -3px;

    width: calc(100% + 128px);

    height: 1px;

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

    content: '';

  }

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

    display: none;

  }

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

    display: block;

  }

  .box03 .missions > li > .sub_tit {

    min-height: 30px;

  }

  .box03 .materiality_box .materiality_box .slogan {

    width: 100%;

  }

  .box03 .missions > li > .text {

    min-height: 120px;

  }

}





/* -- box04 ------ */



.box04 .strategy {

  width: 100%;

  border-right: 1px rgb(153,153,153) solid;

  border-bottom: 1px rgb(153,153,153) solid;

}

.box04 .strategy .cell01 { width: calc(96 / 793 * 100%); }

.box04 .strategy .cell02 { width: calc(126 / 793 * 100%); }

.box04 .strategy .cell03 { width: calc(215 / 793 * 100%); }

.box04 .strategy .cell04 { width: calc(173 / 793 * 100%); }

.box04 .strategy .cell05 { width: calc(183 / 793 * 100%); }

.box04 .strategy th,

.box04 .strategy td {

  border-top: 1px rgb(153,153,153) solid;

  border-left: 1px rgb(153,153,153) solid;

}



.box04 .strategy thead th,

.box04 .strategy tbody .bg_gray th,

.box04 .strategy tbody .bg_gray td {

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

}

.box04 .strategy thead th {

  padding-top: 20px;

  padding-bottom: 10px;

  line-height: 1.25;

  text-align: center;

  vertical-align: top;

}

.box04 .strategy tbody th,

.box04 .strategy tbody td {

  padding: 8px 0 8px 8px;

  font-size: 10px;

  line-height: 1.4;

}

.box04 .strategy tbody th {

  text-align: left;

}

.box04 .strategy tbody th.cell02 {

  border-left-style: dashed;

}

.box04 .strategy tbody .kpi td {

  text-align: center;

  padding: 8px 0;

}

.box04 .strategy tbody th > span {

  font-size: 12px;

  line-height: 1.67;

}

.box04 .strategy tbody td li {

  padding-left: 1em;

  text-indent: -1em;

}

.box04 .strategy .panel {

  display: flex;

  justify-content: center;

}



.box04 .usage_guide {

  display: flex;

  justify-content: space-between;

}

.box04 .usage_guide > .title {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

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

  letter-spacing: -.5px;

  font-weight: 700;

  text-align: center;

}

.box04 .usage_guide > .title::before,

.box04 .usage_guide > .title::after {

  position: absolute;

  top: 0;

  width: 18px;

  height: 100%;

  border-top: 1px rgb(153,153,153) solid;

  border-bottom: 1px rgb(153,153,153) solid;

  content: '';

}

.box04 .usage_guide > .title::before {

  left: 0;

  border-left: 1px rgb(153,153,153) solid;

}

.box04 .usage_guide > .title::after {

  right: 0;

  border-right: 1px rgb(153,153,153) solid;

}



.box04 .usage_guide > .panel {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

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

}

.box04 .usage_guide .panel05,

.box04 .usage_guide .panel06 {

  width: calc(206 / 582 * 100%);

}

.box04 .usage_guide .panel01,

.box04 .usage_guide .panel04 {

  width: calc(187 / 582 * 100%);

}

.box04 .usage_guide .panel02,

.box04 .usage_guide .panel03 {

  width: calc(159 / 582 * 100%);

}

.box04 .usage_guide .panel02,

.box04 .usage_guide .panel04,

.box04 .usage_guide .panel06 {

  margin-top: 17px;

}

.box04 .usage_guide > .panel > li {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  font-size: 12px;

  line-height: 1.17;

}

.box04 .usage_guide > .panel > li .text {

  width: calc(100% - 43px);

}

.box04 .usage_guide .panel .hex {

  margin-right: 9px;

}

.box04 .panel .hex {

  position: relative;

  display: block;

  width: 34px;

  height: 30px;

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

}

.box04 .panel .panel01 .hex {

  background-image: url(../images/icon8_01.svg);

}

.box04 .panel .panel02 .hex {

  background-image: url(../images/icon8_02.svg);

}

.box04 .panel .panel03 .hex {

  background-image: url(../images/icon8_03.svg);

}

.box04 .panel .panel04 .hex {

  background-image: url(../images/icon8_04.svg);

}

.box04 .panel .panel05 .hex {

  background-image: url(../images/icon8_05.svg);

}

.box04 .panel .panel06 .hex {

  background-image: url(../images/icon8_06.svg);

}

.box04 .panel .panel07 .hex {

  background-image: url(../images/icon8_07.svg);

}

.box04 .panel .panel08 .hex {

  background-image: url(../images/icon8_08.svg);

}



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

  .box04 ._scroll_x_box {

    position: relative;

  }

  .box04 ._scroll_x_box::after {

    position: absolute;

    top: 0;

    right: 0;

    width: 51px;

    height: 51px;

    background-repeat: no-repeat;

    background-position: center center;

    background-image: url(../images/icon_scroll_x.svg);

    background-size: contain;

    content: '';

  }

  .box04 ._scroll_x {

    position: relative;

    width: 100%;

    height: 460px;

    overflow-x: scroll;

  }

  html[lang="en"] .box04 ._scroll_x {

    height: 570px;

  }

  .box04 ._scroll_x_inner {

    position: relative;

    width: 814px;

    padding-right: 20px;

  }

  .box04 .strategy.mg-t25 {

    margin-top: 0;

  }

}







.box04 .initiatives {

}

.box04 .initiatives_box {

  position: relative;

}

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

}

.box04 .initiatives_box04 .title_hex {

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

}

.box04 .initiatives_box06 .title_hex {

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

}

.box04 .initiatives_box07 .title_hex {

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

}

.box04 .initiatives_box08 .title_hex {

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

}

.box04 .initiatives_box .title_hex > span {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 115px;

  height: 101px;

  text-align: center;

}

.box04 .initiatives_box .title_hex > span {

  font-size: 11px;

  letter-spacing: -.33px;

  line-height: 1.4;

  color: rgb(255,255,255);

}

.box04 .initiatives_box .title_hex > span ._ls1 {

  letter-spacing: -1px;

}

.box04 .initiatives_box .title_text {

  min-height: 95px;

  padding-left: 125px;

  line-height: 1.56;

}

.box04 .initiatives_box._hide .title_text {

  min-height: 0;

}

.box04 .initiatives_box04._hide .title_text {

  min-height: 95px;

}

.box04 .initiatives_box .title_text > span {

  letter-spacing: -.5px;

}

.box04 .initiatives_box .box_gray {

}

#main_box ._hide .box_gray {

  background-color: transparent;

}

#main_box .initiatives_box04._hide .box_gray {

  background-color: #f4f4f4;

}

.box04 .initiatives_box .box_gray .box_allshow,

.box04 .initiatives_box .box_gray .box_variable {

  padding: 10px;

}

.box04 .initiatives_box._hide .box_gray .box_variable {

  display: none;

}

.box04 .initiatives_box .box_gray h6 {

  font-weight: 700;

}

.box04 .initiatives_box .box_gray .linkbox_gray {

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

}



.box04 .initiatives_box .box_gray .btn_opne_close {

  position: relative;

  display: block;

  width: 347px;

  height: 40px;

  margin-top: 20px;

  margin-right: auto;

  margin-bottom: 20px;

  margin-left: auto;

  border-radius: 5px;

  border: 1px rgb(0,0,0) solid;

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

  cursor: pointer;

}

.box04 .initiatives_box .box_gray .btn_opne_close:hover {

  border-color: rgb(208,18,27);

  color: rgb(208,18,27);

}

._csstrans .box04 .initiatives_box .box_gray .btn_opne_close,

._csstrans .box04 .initiatives_box .box_gray .btn_opne_close::before {

    transition: all .4s cubic-bezier(.165, .84, .44, 1);

}

.box04 .initiatives_box .box_gray .btn_opne_close > span {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 100%;

  height: 100%;

  font-size: 18px;

  line-height: 1.4;

}

.box04 .initiatives_box._hide .box_gray .btn_opne_close {

  margin-top: 0;

  margin-bottom: 0;

}

.box04 .initiatives_box04._hide .box_gray .btn_opne_close {

  margin-top: 20px;

  margin-bottom: 20px;

}

.box04 .initiatives_box .box_gray .btn_opne_close::before {

  position: absolute;

  display: block;

  right: 20px;

  top: 50%;

  width: 16px;

  height: 13px;

  background-image: url(/common/images/arrow_bottom.svg);

  background-repeat: no-repeat;

  background-size: contain;

  transform: translate3d(0, -50%, 0) rotate(180deg);

  content: '';

}

.box04 .initiatives_box .box_gray .btn_opne_close:hover::before {

  background-image: url(/common/images/arrow_bottom_r.svg);

}

.box04 .initiatives_box._hide .box_gray .btn_opne_close::before {

  top: calc(50% + 2px);

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

}

.box04 .initiatives_box .box_gray .btn_opne_close > span::before {

  position: absolute;

  top: 50%;

  left: 50%;

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

  display: block;

  width: 80%;

  text-align: center;

  content: '閉じる';

}

.box04 .initiatives_box._hide .box_gray .btn_opne_close > span::before {

  content: '取り組みを表示する';

}

html[lang="en"] .box04 .initiatives_box .box_gray .btn_opne_close > span::before {

  font-size: 16px;

  content: 'close';

}

html[lang="en"] .box04 .initiatives_box._hide .box_gray .btn_opne_close > span::before {

  content: 'Display Corporate Initiatives';

}





.box04 .banner {

  width: 100%;

  max-width: 786px;

  margin-right: auto;

  margin-left: auto;

}

.box04 .banner > a {

  display: block;

  border: 1px #ccc solid;

}



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

  .box04 .initiatives_box.mg-t30 {

    margin-top: 10px;

  }

  .box04 .initiatives_box .title_hex {

    position: relative;

    top: auto;

    left: auto;

  }

  .box04 .initiatives_box .title_text {

    min-height: 0;

    padding-left: 0;

    margin-bottom: 5px;

  }

  .box04 .initiatives_box04._hide .title_text {

    min-height: 0;

    margin-bottom: 5px;

  }

  

  .box04 .initiatives_box .box_gray .box_allshow,

  .box04 .initiatives_box .box_gray .box_variable {

    padding: 0;

  }

  

  .box04 .initiatives_box .box_gray .btn_opne_close {

    max-width: 323px;

    width: 100%;

  }

  .box04 .initiatives_box04._hide .box_gray .btn_opne_close {

    margin-top: 5px;

    margin-bottom: 5px;

  }

  .box04 .initiatives_box .box_gray .btn_opne_close > span::before {

    font-size: 14px;

  }

  .box04 .initiatives_box .box_gray .btn_opne_close:hover {

    border-color: rgb(0,0,0);

    color: rgb(0,0,0);

  }

  .box04 .initiatives_box .box_gray .btn_opne_close:hover::before {

    background-image: url(/common/images/arrow_bottom.svg);

  }

}







/* co2target_box ------- */

.co2target_box {

  display: flex;

  justify-content: space-between;

}

.co2target_box > li {

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

  border: 2px rgb(137,200,16) solid;

  border-radius: 16px;

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

}

.co2target_box > li > .title {

  width: 126px;

  height: 57px;

  margin: -33px auto 0;

  background-image: url(/sustainability/images/ttl_goal.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

}

html[lang="en"] .co2target_box > li > .title {

  background-image: url(/en/sustainability/images/ttl_goal.svg);

}

.co2target_box > li > .image {

  width: 100%;

  height: 1px;

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

}

.co2target_box > .goal01 > .image {

  background-image: url(/sustainability/images/img_goal01.svg);

  padding-top: calc(222 / 255 * 100%);

}

.co2target_box > .goal02 > .image {

  background-image: url(/sustainability/images/img_goal02.svg);

  padding-top: calc(222 / 255 * 100%);

}

.co2target_box > .goal03 > .image {

  background-image: url(/sustainability/images/img_goal03.svg);

  padding-top: calc(204 / 255 * 100%);

}



html[lang="en"] .co2target_box > .goal01 > .image {

  background-image: url(/en/sustainability/images/img_goal01.svg);

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

}

html[lang="en"] .co2target_box > .goal02 > .image {

  background-image: url(/en/sustainability/images/img_goal02.svg);

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

}

html[lang="en"] .co2target_box > .goal03 > .image {

  background-image: url(/en/sustainability/images/img_goal03.svg);

  padding-top: calc(250 / 255 * 100%);

}



.co2target_box > li > .note {

  font-size: 10px;

  padding: 8px;

}

.co2target_box > li > .note > li {

  padding-left: 1em;

  text-indent: -1em;

  line-height: 1.2;

  margin-top: 4px;

}

.co2target_box > li > .note > li._idt2 {

  padding-left: 2em;

  text-indent: -2em;

}

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

  .co2target_box {

    flex-wrap: wrap;

  }

  .co2target_box > li {

    width: 100%;

    margin-bottom: 40px;

  }

  .co2target_box > li:last-child {

    margin-bottom: 24px;

  }

}





/* prioritygoals_box ------- */

.prioritygoals_box {

  display: flex;

  justify-content: space-between;

}

.prioritygoals_box > li {

  position: relative;

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

  border: 2px rgb(137,200,16) solid;

  border-radius: 16px;

  padding-top: 18px;

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

}

.prioritygoals_box > li > .title {

  position: absolute;

  top: -8px;

  left: 50%;

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

  width: 120px;

  margin-top: -16px;

  border-radius: 50%;

  background-color: rgb(137,200,16);

  font-weight: 700;

  color: rgb(255,255,255);

  padding: 5px 8px;

  text-align: center;

}

.prioritygoals_box > li > .title::before {

  position: absolute;

  top: -32px;

  left: 50%;

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

  width: 58px;

  height: 36px;

  background-image: url(/sustainability/eco/concepts/images/icon_eco.png);

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center top;

  content: '';

}

html[lang="en"] .prioritygoals_box > li > .title {

  

}

.prioritygoals_box > li > .image {

  width: 100%;

  height: 1px;

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

}

.prioritygoals_box > .goal01 > .image {

  background-image: url(/sustainability/images/img_prioritygoal01.svg);

  padding-top: calc(222 / 255 * 100%);

}

.prioritygoals_box > .goal02 > .image {

  background-image: url(/sustainability/images/img_prioritygoal02.svg);

  padding-top: calc(222 / 255 * 100%);

}

.prioritygoals_box > .goal03 > .image {

  background-image: url(/sustainability/images/img_prioritygoal03.svg);

  padding-top: calc(204 / 255 * 100%);

}



html[lang="en"] .prioritygoals_box > .goal01 > .image {

  background-image: url(/en/sustainability/eco/concepts/images/img01.png);

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

}

html[lang="en"] .prioritygoals_box > .goal02 > .image {

  background-image: url(/en/sustainability/eco/concepts/images/img02.png);

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

}

html[lang="en"] .prioritygoals_box > .goal03 > .image {

  background-image: url(/en/sustainability/eco/concepts/images/img03.png);

  padding-top: calc(250 / 255 * 100%);

}



.prioritygoals_box > li > .note {

  font-size: 10px;

  padding: 8px;

}

.prioritygoals_box > li > .note > li {

  padding-left: 1em;

  text-indent: -1em;

  line-height: 1.2;

  margin-top: 4px;

}

.prioritygoals_box > li > .note > li._idt2 {

  padding-left: 2em;

  text-indent: -2em;

}

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

  .prioritygoals_box {

    flex-wrap: wrap;

  }

  .prioritygoals_box.mg-t60 {

    margin-top: 60px;

  }

  .prioritygoals_box > li {

    width: 100%;

    margin-bottom: 60px;

    padding-bottom: 16px;

  }

  .prioritygoals_box > li:last-child {

    margin-bottom: 0;

  }

  

}





/* sdg_box ------- */

.sdg_box {

  max-width: 794px;

  margin-right: auto;

  margin-left: auto;

  border: 5px solid rgb(204,204,204);

  border-radius: 32px;

  padding: calc( 24 / 760 * 100%) 0 calc( 16 / 760 * 100%);

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

}

.sdg_box .sdg_item {

  display: flex;

  flex-direction: row;

  justify-content: center;

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

  max-width: 760px;

  margin-right: auto;

  margin-left: auto;

  margin-bottom: 8px;

}

.sdg_box .sdg_item .image {

  width: 126px;

}

.sdg_box .sdg_item .note {

  width: calc( 100% - 126px );

  padding-left: calc( 40 / 760 * 100% );

  padding-right: calc( 24 / 760 * 100% );

}

.sdg_box .sdg_item .note h5 {

  width: 100%;

  font-size: 16px;

  font-weight: 700;

  margin-top: -4px;

  margin-bottom: 4px;

}

.sdg_box .sdg_item .text {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  flex-wrap: wrap;

  width: 100%;

}

.sdg_box .sdg_item .text .sdg_num {

  display: block;

  width: 43px;

}

.sdg_box .sdg_item .text .sdg_text {

  display: block;

  width: calc( 100% - 44px );

}





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

  .sdg_box {

    border-radius: 16px;

    border-width: 3px;

  }

  .sdg_box .sdg_item .image {

    width: 63px;

  }

  .sdg_box .sdg_item .note {

    width: calc( 100% - 63px );

    padding-left: calc( 16 / 760 * 100% );

    padding-right: calc( 12 / 760 * 100% );

  }

  .sdg_box .sdg_item .note h5 {

    font-size: 14px;

  }

}