@charset "utf-8";



#main_box { line-height: 2.0; }



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

li.btn005 {

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

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

}

li.btn005 > a {

  pointer-events: none;

  cursor: auto;

}

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







/* contents ---- */

.box0_01 {

    margin: 35px auto 0;

    padding: 25px 15px;

    border: 4px #b6b2b2 solid;

    border-radius: 25px;

    text-align: center;

    line-height: 1.2;

    font-size: 26px;

    font-weight: 700;

}



#main_box .box0 .box0_02 .mission_box .ttl_s2 {

  position: relative;

  display: inline-block;

  border-left-style: none;

  background-color: transparent;

  font-size: 20px;

}

.box0 .box0_02 .mission_box .ttl_s2::before,

.box0 .box0_02 .mission_box .ttl_s2::after {

  position: absolute;

  display: block;

  width: 10px;

  height: 18px;

  content: '';

}

.box0 .box0_02 .mission_box .ttl_s2::before {

  top: 0;

  left: 0;

  border-top: 3px #f7af0d solid;

  border-left: 3px #f7af0d solid;

}

.box0 .box0_02 .mission_box .ttl_s2::after {

  bottom: 0;

  right: 0;

  border-bottom: 3px #f7af0d solid;

  border-right: 3px #f7af0d solid;

}



.box0 .box0_02 .mission_txt {

    padding-left: 80px;

    margin-top: 15px;

    background-repeat: no-repeat;

    background-size: 64px 56px;

    background-position: left center;

}

.box0 .box0_02 .box0_02_01 .mission_txt {

    background-image: url(../images/icon01.png?ud=190121);

}

.box0 .box0_02 .box0_02_02 .mission_txt {

    background-image: url(../images/icon02.png?ud=190121);

}

.box0 .box0_02 .box0_02_03 .mission_txt {

    background-image: url(../images/icon03.png?ud=190121);

}

.box0 .box0_02 .box0_02_04 .mission_txt {

    background-image: url(../images/icon04.png?ud=190121);

}

.box0 .box0_02 .sttl {

    font-size: 18px;

    font-weight: bold;

    display: inline;

    border-bottom: 1px solid;

    padding-bottom: 2px;

}

.box0 .box0_02 .text {

    margin-top: 10px;

    font-size: 14px;

}





.box01 .portfolio_box {

  display: block;

  position: relative;

}

.box01 .portfolio_box > li {

  display: flex;

  flex-direction: row;

  align-items:center;

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

  margin-bottom: 4px;

}

.box01 .portfolio_box > li > span {

  display: block;

}

.box01 .portfolio_box > li > .text {

  width: 65%;

}

.box01 .portfolio_box > li > .text > span {

  display: block;

  position: relative;

  padding: 16px 48px 16px 16px;

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

  line-height: 1.5;

}

.box01 .portfolio_box > li > .text > span::before,

.box01 .portfolio_box > li > .text > span::after {

  display: block;

  position: absolute;

  right: -32px;

  top: 0;

  width: 32px;

  height: 100%;

  content: '';

}

.box01 .portfolio_box > li > .text > span::before {

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

}

.box01 .portfolio_box > li > .text > span::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%;

}

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

  border-color: rgb(102,153,51);

}

.box01 .portfolio_box > li:nth-child(3) > .text > span {

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

}

.box01 .portfolio_box > li:nth-child(3) > .text > span::after {

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

}

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

  border-color: rgb(102,51,204);

}

.box01 .portfolio_box > li:nth-child(4) > .text > span {

  background-color: rgb(239,227,253);

}

.box01 .portfolio_box > li:nth-child(4) > .text > span::after {

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

}





.box01 .portfolio_box > li > .text > span .title {

  display: block;

  font-size: 137.5%;

  font-weight: 700;

}

.box01 .portfolio_box > li > .text > span .text_body {

  display: block;

  margin-top: 8px;

  padding-left: 2em;

}

.box01 .portfolio_box > li > .per {

  width: 20%;

  padding-right: 6px;

  color: rgb(247,175,11);

  font-size: 137.5%;

    text-align: center;

}

.box01 .portfolio_box > li:nth-child(3) > .per {

  color: rgb(102,153,51);

}

.box01 .portfolio_box > li:nth-child(4) > .per {

  color: rgb(102,51,204);

}

.box01 .portfolio_box > li > .per2 {

  position: relative;

  width: 15%;

    text-align: center;

    white-space: nowrap;

}

.box01 .portfolio_box > li > .per > span {

  font-size: 200%;

  font-weight: 700;

}

.box01 .portfolio_box > li > .per2 > span::before,

.box01 .portfolio_box > li > .per2 > span::after {

  display: block;

  position: absolute;

  left: -12px;

  top: calc(50% + 4px);

  width: 12px;

  height: 50%;

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

  content: '';

}

.box01 .portfolio_box > li > .per2 > span::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%;

}

.box01 .portfolio_box > li:nth-child(3) > .per2 > span::after {

  background:

    linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(228,252,202) 50.5%) no-repeat top left/100% 50%,

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

}

.box01 .portfolio_box > li:nth-child(4) > .per2 > span::after {

  background:

    linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(239,227,253) 50.5%) no-repeat top left/100% 50%,

    linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(239,227,253) 50.5%) no-repeat bottom right/100% 50%;

}



.box01 .portfolio_box > li.per_title {

  display: flex;

  flex-direction: row;

  justify-content: center;

  flex-wrap: wrap;

  width: 35%;

  margin-bottom: 8px;

  margin-left: auto;

  border-style: none;

  line-height: 1.2;

  font-size: 13px;

}

.box01 .portfolio_box > li.per_title > div {

  width: 100%;

  border-radius: 32px;

  padding: 8px 12px;

  background-color: #f4f4f4;

  text-align: center;

}

.box01 .portfolio_box > li.per_title > .year {

  display: flex;

  width: 100%;

  margin-top: 5px;

}

.box01 .portfolio_box > li.per_title > .year > li {

  width: 50%;

}

.box01 .portfolio_box > li.per_title > .year > li > span {

  display: block;

  width: 90%;

  border-radius: 32px;

  padding: 8px 12px;

    margin-left: 5%;

    margin-right: 5%;

  background-color: #f4f4f4;

  text-align: center;

  font-size: 12px;

  line-height: 1;

}



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

  .box01 .portfolio_box > li.per_title {

    min-width: 200px;

  }

  .box01 .portfolio_box > li > .text {

    width: calc(100% - 120px);

  }

  .box01 .portfolio_box > li > .text > span {

    padding: 8px 12px 8px 8px;

  }

  .box01 .portfolio_box > li > .text > span .title {

    font-size: 100%;

  }

  .box01 .portfolio_box > li > .text > span .text_body {

    padding-left: 1em;

  }

  .box01 .portfolio_box > li > .per {

    width: 120px;

  }

}



.box01 .strategy_box {

  display: flex;

  flex-wrap: wrap;

}

.box01 .strategy_box > .j1 {

  position: relative;

  width: 32px;

}

.box01 .strategy_box > .j1::before {

  position: absolute;

  top: 48px;

  left: 50%;

  width: 8px;

  height: calc(100% - 80px);

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

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

  content: '';

}

.box01 .strategy_box > .j1::after {

  position: absolute;

  top: 32px;

  left: 50%;

  border-left: 12px solid transparent;

  border-right: 12px solid transparent;

  border-bottom: 16px solid rgb(152, 152, 152);

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

  content: '';

}

.box01 .strategy_box > .j1 > div {

  position: absolute;

  left: 50%;

  width: 20px;

  text-align: center;

}

.box01 .strategy_box > .j1 > .j1_1 {

  top: 0;

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

}

.box01 .strategy_box > .j1 > .j1_2 {

  top: 50%;

  padding: 8px 0;

  line-height: 1;

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

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

}

.box01 .strategy_box > .j1 > .j1_3 {

  bottom: 0;

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

}



.box01 .strategy_box > .strategy_items,

.box01 .strategy_box > .j2 {

  width: calc(100% - 32px);

}

.box01 .strategy_box > .j2 {

  display: flex;

  justify-content: space-between;

  position: relative;

  width: 100%;

  margin-left: 32px;

}

.box01 .strategy_box > .j2::before {

  position: absolute;

  right: 48px;

  top: 50%;

  width: calc(100% - 80px);

  height: 8px;

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

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

  content: '';

}

.box01 .strategy_box > .j2::after {

  position: absolute;

  right: 32px;

  top: 50%;

  border-top: 12px solid transparent;

  border-bottom: 12px solid transparent;

  border-left: 16px solid rgb(152, 152, 152);

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

  content: '';

}

.box01 .strategy_box > .j2 > div {

  position: relative;

}



@media all and (-ms-high-contrast:none){

  *::-ms-backdrop, .box01 .strategy_box > .j2 .j2_1 {

  position:absolute;

}/* IE11 */

  *::-ms-backdrop,  .box01 .strategy_box > .j2 .j2_3 {

  position:absolute;

  right: 0;

}

}





.box01 .strategy_box > .j2 > .j2_2 {

  padding: 0 8px;

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

}



.strategy_items > ul {

  display: flex;

  position: relative;

}

.strategy_items > ._h2::before {

  display: block;

  position: absolute;

  bottom: 8px;

  left: 0;

  width: 100%;

  height: 1px;

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

  content: '';

  z-index: 130;

}

.strategy_items > ._h3::after,

.strategy_items > ._h2::after {

  display: block;

  position: absolute;

  top: 0;

  left: 50%;

  width: 1px;

  height: 100%;

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

  content: '';

  z-index: 90;

}



.strategy_items > ._h1 > li {

  position: relative;

  width: 50%;

  padding: 8px 20px;

  text-align: center;

  font-weight: 700;

  color: rgb(208,18,27);

  line-height: 1.2;

  z-index: 120;

}

.strategy_items > ._h1 > li::before {

  position: absolute;

  left: 10px;

  top: 0;

  width: calc(100% - 20px);

  height: 100%;

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

  content: '';

}

.strategy_items > ._h1 > li > span {

  position: relative;

}



.strategy_items > ._h2 > li,

.strategy_items > ._h3 > li {

  position: relative;

  width: 25%;

  padding: 8px 8px 24px 8px;

  z-index: 80;

}



.strategy_items > ._h2 > li {

  background-color: rgb(239,227,253);

  padding-top: 60px;

}



.strategy_items > ._h2 > ._h2_1 {

  width: calc(25% - 8px);

  margin-right: 8px;

  border-radius: 8px;

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

}

.strategy_items > ._h2 > ._h2_2 {

  border-radius: 8px 0 0 0;

  z-index: 100;

}

.strategy_items > ._h2 > ._h2_4 {

  border-radius: 0 8px 0 0;

}



.strategy_items > ._h3 > li {

  padding-bottom: 60px;

}

.strategy_items > ._h3 > ._h3_2 {

  border-radius: 0 0 0 8px;

  padding-top: 16px;

  background-color: rgb(239,227,253);

  z-index: 110;

}

.strategy_items > ._h3 > ._h3_3 {

  border-radius: 0 0 8px 0;

  padding-top: 16px;

  background-color: rgb(239,227,253);

}

.strategy_items > ._h3 > ._h3_4 {

  width: calc(25% - 8px);

  margin-top: 8px;

  margin-left: 8px;

  border-radius: 8px;

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

}



.strategy_items > ul > li > ._tit {

  position: absolute;

  line-height: 1.2;

  color: rgb(255,255,255);

  border-radius: 4px;

  padding: 6px;

  font-size: 87.5%;

}

.strategy_items > ul > ._h2_1 > ._tit {

  top: 4px;

  left: 4px;

  width: calc(100% - 8px);

  background-color: rgb(102,153,51);

  z-index: 100;

}

.strategy_items > ul > ._h2_2 > ._tit {

  top: 4px;

  left: 4px;

  width: 220px;

  background-color: rgb(102,51,204);

  z-index: 100;

}

.strategy_items > ul > ._h3_4 > ._tit {

  bottom: 4px;

  right: 4px;

  width: calc(100% - 8px);

  background-color: rgb(247,175,11);

  z-index: 100;

}

.strategy_items > ul > li > .item {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  border: 1px rgb(122,122,122) dotted;

  padding: 20px 8px 8px 8px;

}

.strategy_items > ul > ._h2_4 > .item,

.strategy_items > ul > ._h3_4 > .item {

  border-style: none;

}

.strategy_items > ul > ._h2_2 > .item::before {

  position: absolute;

  bottom: -6px;

  right: -4px;

  width: calc(200% + 32px);

  height: calc(100% + 82px);

  border: 1px rgb(208,18,27) solid;

  content: '';

}

.strategy_items > ul > ._h3_4 > .item::before {

  position: absolute;

  bottom: 0;

  right: 0;

  width: 100%;

  height: calc(200% + 42px);

  border: 1px rgb(122,122,122) dotted;

  content: '';

}



.strategy_items > ul > li > .item > ._tit {

  font-weight: 700;

  line-height: 1.2;

}

.strategy_items > ul > li > .item > ._txt {

  display: flex;

  align-items: center;

  height: 64px;

  line-height: 1.5;

  font-size: 87.5%;

  padding-left: 1em;

  text-indent: -1em;

  max-width: 100%;

}



.strategy_items > ._h3 > li > .note {

  position: absolute;

  right: 16px;

  bottom: 16px;

  font-size: 87.5%;

}

.strategy_items > ._h3 > li > .note ._n {

  color: rgb(255,255,255);

}



.strategy_items > ul > li ._arrow {

  position: absolute;

  width: 24px;

  height: 32px;

  z-index: 150;

}

.strategy_items > ul > li ._arrow::before,

.strategy_items > ul > li ._arrow::after {

  position: absolute;

  content: '';

}

.strategy_items > ul > li ._arrow::before {

  left: 0;

  top: 50%;

  width: 9px;

  height: 18px;

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

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

}

.strategy_items > ul > li ._arrow::after {

  right: 0;

  top: 0;

  border-top: 16px solid transparent;

  border-bottom: 16px solid transparent;

  border-left: 16px solid rgb(208,18,27);

}



.strategy_items > ._h3 > li > .note ._arrow {

  left: 0;

  bottom: 0;

}

.strategy_items > ul > ._h2_1 ._arrow,

.strategy_items > ul > ._h2_2 ._arrow,

.strategy_items > ul > ._h3_2 ._arrow {

  right: -12px;

  bottom: 50%;

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

}

.strategy_items > ul > ._h2_4 ._arrow {

  right: 16px;

  top: -16px;

  transform: rotate(-45deg);

}

.strategy_items > ul > ._h3_3 ._arrow,

.strategy_items > ul > ._h3_4 ._arrow {

  right: 16px;

  top: -16px;

  transform: rotate(-90deg);

}



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

  .strategy_items > ul > li > .item > ._tit {

    font-size: calc(5.0847vw - 33.8305px);

  }

  .strategy_items > ul > li > .item > ._txt {

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

  }

}

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

  .strategy_items > ul > li > .item > ._tit {

    font-size: 14px;

  }

  .strategy_items > ul > li > .item > ._txt {

    font-size: 14px;

  }

}

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

  .box01 .strategy_box > .j1 {

    width: 16px;

  }

  .box01 .strategy_box > .strategy_items,

  .box01 .strategy_box > .j2 {

    width: calc(100% - 16px);

  }

  .strategy_items > ._h1 > li {

    font-size: 12px;

  }

  .strategy_items > ._h2 > li,

  .strategy_items > ._h3 > li {

    padding: 4px 4px 12px 4px;

  }

  .strategy_items > ._h2 > li {

    padding-top: 64px;

  }

  .strategy_items > ._h2 > ._h2_1 {

    width: calc(25% - 4px);

    margin-right: 4px;

  }

  .strategy_items > ._h3 > ._h3_4 {

    width: calc(25% - 4px);

    margin-top: 4px;

    margin-left: 4px;

  }

  .strategy_items > ul > li > ._tit {

    padding: 2px;

  }

  .strategy_items > ul > li > .item {

    padding: 10px 0 4px;

  }

  .strategy_items > ._h3 > li {

    padding-bottom: 48px;

  }

  .strategy_items > ul > ._h3_4 > .item::before {

    height: calc(200% + 24px);

  }

  

  .strategy_items > ul > li > .item > ._tit {

    font-size: 10px;

  }

  .strategy_items > ul > li > .item > ._txt {

    height: 46px;

    font-size: 10px;

    line-height: 1.1;

    padding-left: .5em;

    text-indent: -.5em;

  }

  .strategy_items > ul > ._h2_2 > ._tit {

    width: 190px;

  }

  .strategy_items > ul > ._h2_2 > .item::before {

    bottom: -3px;

    right: -4px;

    width: calc(200% + 17px);

    height: calc(100% + 88px);

  }

  

  .strategy_items > ._h3 > li > .note {

    top: 8px;

    right: auto;

    bottom: auto;

    left: 8px;

    font-size: 10px;

  }

  

  .strategy_items > ul > li ._arrow {

    width: 12px;

    height: 16px;

  }

  .strategy_items > ul > li ._arrow::before {

    width: 5px;

    height: 9px;

  }

  .strategy_items > ul > li ._arrow::after {

    border-top: 8px solid transparent;

    border-bottom: 8px solid transparent;

    border-left: 8px solid rgb(208,18,27);

  }

  

  .strategy_items > ._h3 > li > .note ._arrow {

    top: 2px;

    left: 4px;

    bottom: auto;

  }

  

  .box01 .strategy_box > .j1,

  .box01 .strategy_box > .j2 {

    font-size: 12px;

  }

}









.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(../images/img04.svg?ud=250226);

  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: 40%;

  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(../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:50%;

    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;

  }

  html[lang="en"] .box02 .roadmap > li.image_box {

    font-size: 11px;

  }

  html[lang="en"] .box02 .roadmap > li.title > div {

    font-size: 11px;

  }

  html[lang="en"] .box02 .roadmap > li.text_box .slogan {

    font-size: 11px;

  }

  html[lang="en"] .box02 .roadmap > li.text_box .text_body {

    padding-left: 0;

    font-size: 10px;

  }

}









.box04 .jinzai {

  

}

.box04 .jinzai > li {

  display: block;

  position: relative;

}

.box04 .jinzai > li > .title {

  position: relative;

  z-index: 120;

  width: 190px;

  margin-left: 32px;

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

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

  text-align: center;

  font-weight: 700;

}

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

  width: 290px;

  line-height: 1.3;

  padding-top: 6px;

  padding-bottom: 6px;

}



.box04 .jinzai > li > .text {

  position: relative;

  z-index: 100;

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

  padding-left: 64px;

  padding-top: 24px;

  padding-right: 120px;

  margin-top: -16px;

  min-height: 124px;

  background-repeat: no-repeat;

  background-position: right center;

}

.box04 .jinzai > li.item01 > .text {

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

}

.box04 .jinzai > li.item02 > .text {

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

}

.box04 .jinzai > li.item03 > .text {

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

}

.box04 .jinzai > li > .text > li {

  line-height: 1.5;

}



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

  .box04 .jinzai > li > .title {

    margin-left: 20px;

  }

  .box04 .jinzai > li > .text {

    padding-top: 20px;

    padding-left: 20px;

    padding-bottom: 10px;

  }

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

    width: 80%;

    max-width: 280px;

    text-align: left;

    padding-left: 6px;

  }



}





.box05 .materiality_box {

  position: relative;

}



.box05 .materiality_box .hex_panels {

  position: relative;

  width: 100%;

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

  z-index: 90;

}

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

}



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

}

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

}



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

}

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

}

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

}

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

}

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

  top: 0;

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

}

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

}



.box05 .missions {

  position: relative;

  display: flex;

  justify-content: space-between;

  z-index: 80;

}

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

}

.box05 .missions > li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 50%;

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

  content: '';

}

.box05 .missions > li::after {

  position: absolute;

  top: 0;

  right: -3px;

  width: 1px;

  height: 100%;

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

  content: '';

}

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

  display: none;

}

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

}

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

}

.box05 .missions > li > .text {

  position: relative;

  padding: 8px;

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

  font-size: 87.5%;

}



.box05 .slogan {

  position: relative;

  margin-top: 64px;

  font-weight: 700;

  font-size: 125%;

  line-height: 1.2;

  text-align: center;

}

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

  .box05 .materiality_box {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

  }

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

  }

  

  .box05 .materiality_box .hex_panels > li {

    position: relative;

    margin-top: 25px;

  }

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

    margin-left: 41px;

  }

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

    top: 0;

    left: 0;

    margin-top: 34px;

  }

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

    top: 0;

    left: 0;  }

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

    top: 0;

    left: 0;

  }

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

    top: 0;

    left: 0;

    margin-top: 54px;

  }

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

    top: 0;

    left: 0;

    margin-top: 54px;

  }

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

    top: 0;

    left: 0;

    margin-top: 72px;

  }

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

    top: 0;

    left: 0;

    margin-top: 106px;

  }

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

    top: 0;

    left: 0;

  }

  .materiality_box .hex_panels > li > span > span {

    width: 100%;

  }



  

  .box05 .materiality_box .missions {

    width: calc(100% - 128px);

    flex-direction: column;

  }

  .box05 .missions > li {

    width: 100%;

    margin-top: 5px;

    padding-top: 0;

  }

  .box05 .missions > li::before {

    display: none;

  }

  .box05 .missions > li::after {

    right: 0;

    top: -3px;

    width: calc(100% + 128px);

    height: 1px;

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

    content: '';

  }

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

    display: none;

  }

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

    display: block;

  }

  .box05 .missions > li > .sub_tit {

    min-height: 30px;

  }

  .box05 .materiality_box .materiality_box .slogan {

    width: 100%;

  }

  .box05 .missions > li > .text {

    min-height: 120px;

  }

}



.box06 .ttl_ss2 {

  display: flex;

  align-items: flex-start;

  margin-bottom: 12px;

}

.box06 .ttl_ss2 > span {

  display: block;

  width: calc(100% - 92px);

  font-weight: 700;

  line-height: 1.5;

}

.box06 .ttl_ss2 > .tit {

  display: block;

  width: 92px;

  border-left: 6px #f7af0d solid;

  padding-left: 6px;

}

.box06 .ttl_ss2 > span > .note {

  font-weight: 400;

  font-size: 87.5%;

}



.box06 .box06_01 ._l {

  display: flex;

  justify-content: center;

  font-size: 125%;

  font-weight: 700;

  line-height: 1.3;

    text-align: center;

}

.box06 .box06_02 ._l {

  font-size: 150%;

  font-weight: 700;

  line-height: 1;

}

.box06 .box06_02 .note {

  font-size: 12px;

  line-height: 1.5;

}

.box06 .box06_02 .note > li {

  margin-top: 5px;

  padding-left: calc(20px + 2em);

  text-indent: -2em;

}

.box06 .box06_03 ._l {

  font-size: 175%;

  font-weight: 700;

  line-height: 1;

}

.box06 .box06_03 ._s {

  font-size: 87.5%;

}