@charset "utf-8";



#main_box { line-height: 2.0; }



.text_left {

    text-align: left;

}



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

li.btn107 {

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

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

}

li.btn107 > a {

  pointer-events:none;

  cursor: auto;

}

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

  display: none;

}







/* contents ---- */

.box01 .linkbox_gray::after {

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

}



.box02 table {

    width: 100%;

}

.box02 thead th {

    background-color: #7f7f7f;

    color: #fff;

    font-weight: 700;

    white-space: nowrap;

}

.box02 tr {

    padding-bottom: 1px;

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

/*  

    background-image: linear-gradient(to right, #999999, #999999 2px, transparent 1px, transparent 4px);

    background-size: 4px 1px;

    background-position: bottom;

    background-repeat: repeat-x;

  */

}

.box02 th,

.box02 td {

    padding: 10px;

  vertical-align: middle;

}

.box02 td {

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

}

.box02 tr.d_line {

    border-bottom: 1px rgb(162,162,162) dotted;

}

.box02 td div {

    clear: both;

    text-indent: -1.5rem;

    padding-left: 1.5rem;

}

.box02 td span {

    display: block;

    float: left;

}

.box02 td span.value {

    float: right;

}



.box02 table td strong {

    font-weight: 700;

}

.linkbox_gray._lead3 {

    font-size: 16px;

}



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

.linkbox_gray._lead3 {

    font-size: 12px;

}

}



/* 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;

}

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

}



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

}





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

  }

}



.box02 .roadmap {

  position: relative;

}

.box02 .roadmap > li {

  display: block;

  position: relative;

}

.box02 .roadmap > li.background {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  position: absolute;

  left: 0;

  top: 10px;

  width: 100%;

  height: 80%;

}

.box02 .roadmap > li.background > div {

  width: 27%;

  border-left: 1px rgb(230,230,230) dashed;

}

.box02 .roadmap > li.background > div:last-child {

  width: 19%;

}



.box02 .roadmap > li.year {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

}

.box02 .roadmap > li.year > div {

  width: 27%;

}

.box02 .roadmap > li.year > div:last-child {

  width: 19%;

}

.box02 .roadmap > li.year > div > span {

  display: inline-block;

  padding: 0 8px;

  border: 1px rgb(247,175,11) solid;

  line-height: 1.5;

}



.box02 .roadmap > li.image_box {

  position: relative;

  width: 100%;

  font-size: 14px;

}

.box02 .roadmap > li.image_box .image {

  position: relative;

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

  background-image: url(/corporate/group_mission/images/img04.svg?ud=220126);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

}

.box02 .roadmap > li.image_box .image > div {

  position: absolute;

  left: 84%;

  font-size: 13px;

  line-height: 1.5;

}

.box02 .roadmap > li.image_box .image > .text01 {

  color: rgb(247,175,11);

  top: 0;

}

.box02 .roadmap > li.image_box .image > .text02 {

  color: rgb(120,120,120);

  top: 72%;

}



.box02 .roadmap > li.image_box .image_text {

  position: absolute;

  top: 36%;

  left: 5%;

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

  padding-right: 4px;

  padding-left: 4px;

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

  line-height: 1.5;

}

.box02 .roadmap > li.image_box .image_text::after {

  display: block;

  position: absolute;

  bottom: -30px;

  left: 50%;

  width: 1px;

  height: 30px;

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

  content: '';

}





.box02 .roadmap > li.title {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

}

.box02 .roadmap > li.title > div {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  width: 27%;

  padding-right: 12px;

  padding-left: 12px;

  background-image: url(/corporate/group_mission/images/bg_arrow.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

  font-size: 14px;

  line-height: 1.2;

}

.box02 .roadmap > li.title > div > span {

  display: inline-block;

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

}

.box02 .roadmap > li.title > div > span:first-child {

  padding-left: 4px;

}

.box02 .roadmap > li.title > div > span:last-child {

  padding-right: 4px;

}



.box02 .roadmap > li.year_box {

  display: flex;

  flex-direction: row;

}

.box02 .roadmap > li.year_box > div {

  width: 27%;

  line-height: 1.2;

  color: rgb(77,77,77);

  text-align: center;

  font-size: 12px;

}



.box02 .roadmap > li.text_box {

  display: flex;

  flex-direction: row;

}



.box02 .roadmap > li.text_box .text_body {

  display: flex;

  flex-direction: column;

  width: 27%;

  position: relative;

  padding: 16px 24px 16px 8px; 

  background-color: rgb(249,237,215);

  font-size: 81.25%;

}

.box02 .roadmap > li.text_box .text_body::before,

.box02 .roadmap > li.text_box .text_body::after {

  display: block;

  position: absolute;

  right: 0;

  top: 0;

  width: 16px;

  height: 100%;

  content: '';

}

.box02 .roadmap > li.text_box .text_body::before {

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

}

.box02 .roadmap > li.text_box .text_body::after {

  background:

    linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(249,237,215) 50.5%) no-repeat top left/100% 50%,

    linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(249,237,215) 50.5%) no-repeat bottom right/100% 50%;

}



.box02 .roadmap > li.text_box .text_body > li {

  line-height: 1.5;

  margin-bottom: 1em;

}



.box02 .roadmap > li.text_box .slogan {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 19%;

  height: auto;

  line-height: 1.5;

  font-weight: 700;

}



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

  .box02 .roadmap > li.image_box .image_text {

    top:inherit;

    bottom:60%;

    font-size: 10px;

  }

  .box02 .roadmap > li.image_box .image_text::after {

    bottom: -40px;

    height: 40px;

  }

  .box02 .roadmap > li.text_box .text_body {

    padding: 8px 16px 8px 2px;

  }

}