@charset "utf-8";



#main_box { line-height: 2.0; }



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

#side_box .side_menu .menu_grp_c.grp33 {

}

.btn323.btn_toggle .btn_toggle_act::after {

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

}

li.btn323 {

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

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

}

li.btn323 > a {

  pointer-events:none;

  cursor: auto;

}

#side_box .side_menu li.btn323 > a::after {

  display: none;

}







/* contents ---- */

#main_box .img-label > img {

  width: 115px;

  height: 30px;

}

html[lang='en'] #main_box .img-label > img {

  width: 235px;

}

.box00 .lede {

  font-size: 125%;

  font-weight: 700;

}



/*

.box00_01 {

  display: flex;

  justify-content: space-between;

}

.box00_01 > .box00_01_01 {

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

}

.box00_01 > .box00_01_02 {

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

  margin-top: -16px;

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

  border-radius: 16px;

  padding: 16px 10px;

}

.box00_01 > .box00_01_02 h5 {

  font-weight: 700;

  line-height: 1.2;

}

*/







.box00_01 {

  display: flex;

  flex-direction: row;

  justify-content: center;

  border: 3px solid rgb(247,176,0);

  border-radius: 8px;

  padding-bottom: 16px;

}

.box00_01 > div {

  width: 50%;

}

.box00_01 .box00_01_01 {

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

  padding-right: calc( 16 / 788 * 100% );

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

}

.box00_01 .box00_01_01 > p:first-child {

  position: relative;

}

.box00_01 .box00_01_01 > p:first-child::before {

  display: block;

  position: absolute;

  top: -56px;

  left: 50%;

  width: 58px;

  height: 36px;

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

  background-repeat: no-repeat;

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

  content: '';

}

.box00_01 .box00_01_01 > p:first-child::after {

  display: block;

  position: absolute;

  top: -20px;

  left: 50%;

  width: 40px;

  height: 4px;

  background: linear-gradient(90deg, rgb(247, 176, 0) 0%, rgb(247, 176, 0) 50%,rgb(208, 17, 27) 50%,rgb(208, 17, 27) 100%);

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

  content: '';

}



.box00_01 .box00_01_02 {

  text-align: center;

  padding-right: calc( 14 / 788 * 100% );

}

.box00_01 .box00_01_02 > h5 {

  display: inline-block;

  padding-right: 4px;

  padding-left: 4px;

  border-bottom: 4px solid rgb(251,215,127);

  line-height: 1.1;

  font-size: 16px;

  font-weight: 700;

}

.box00_01 .box00_01_02 img {

  max-width: 380px;

}

.box00_01 > .box00_01_02 .linkbox_gray {

  height: auto;

  font-size: 85%;

  line-height: 1.4;

  padding: 8px 20px;

}

.box00_01 > .box00_01_02 .linkbox_gray::after {

  right: 8px;

  height: 12px;

}





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

  .box00_01 .img_box .link_btn > span {

    font-size: calc(0.7435vw + 4.7063px);

  }

}

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

  .box00_01 .img_box .link_btn > span {

    font-size: calc(0.9434vw + 4.7547px)

  }

}

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

  .box00_01 {

    flex-direction: column;

  }

  .box00_01 > div {

    width: 100%;

    max-width: 100%;

  }

  .box00_01 .box00_01_01 {

    padding-top: 40px;

    padding-right: 8px;

    padding-left: 8px;

  }

  .box00_01 .box00_01_01 > p:first-child::before {

    top: -24px;

    width: 29px;

    height: 18px;

    background-size: 29px 18px;

    content: '';

  }

  .box00_01 .box00_01_01 > p:first-child::after {

    top: -6px;

    width: 20px;

    height: 2px;

  }

  .box00_01 .img_box {

    margin-top: 8px;

    padding: 0 8px;

  }

  

  .box00_01 .img_box .link_btn > span {

    font-size: 12px;

  }

  

  .box00_01 > .box00_01_02 {

    padding-right: 0;

    max-width: 380px;

    margin-right: auto;

    margin-left: auto;

  }

  .box00_01 > .box00_01_02 .linkbox_gray {

    max-width: 300px;

  }

}











































.box01 .img02 {

  width: 100%;

  max-width: 760px;

  margin-right: auto;

  margin-left: auto;

}



.box02_00 {

    display: block;

    position: relative;

    width: 180px;

    height: 125px;

    margin-right: auto;

    margin-left: auto;

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

}

.box02_00::before,

.box02_00::after {

  position: absolute;

  display: block;

  bottom: 0;

  width: 90px;

  height: 90px;

  content: '';

}

.box02_00::before {

  left: 0;

  background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%,rgba(208, 17, 27,0) 50%,rgba(208, 17, 27,0) 100%);

}

.box02_00::after {

  right: 0;

  background: linear-gradient(-45deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%,rgba(208, 17, 27,0) 50%,rgba(208, 17, 27,0) 100%);

}

.box02_00 > h6 {

  position: relative;

  display: block;

  padding-top: 10px;

  text-align: center;

  color: rgb(255,255,255);

  font-size: 18px;

  line-height: 1.67;

  font-weight: 700;

}



.box_effort {

    position: relative;

    border-radius: 8px;

    padding: 3px;

    background: linear-gradient(90deg, rgb(247, 176, 0) 0%, rgb(247, 176, 0) 50%,rgb(208, 17, 27) 50%,rgb(208, 17, 27) 100%);

}



.box_effort::before {

  display: block;

  position: absolute;

  top: -33px;

  left: 50%;

  width: 58px;

  height: 36px;

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

  background-repeat: no-repeat;

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

  content: '';

}

.box_effort > div {

  border-radius: 5px;

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

  padding: 14px;

}



.box_effort .ttl_effort {

  font-size: 175%;

  font-weight: 700;

  padding: 16px 32px 32px;

  text-align: center;

  line-height: 1.4;

}

.box_effort .ttl_effort ._ef1 {

  color: rgb(113,171,3);

}

.box_effort .ttl_effort ._ef2 {

  color: rgb(208,17,27);

}



.box_effort .co2emi {

  width: 280px;

  margin-right: auto;

  margin-left: auto;

  border: 3px rgb(113,171,3) solid;

  border-radius: 8px;

  padding: 4px 0;

  line-height: 1.4;

  font-weight: 700;

  text-align: center;

}

html[lang="en"] .box_effort .co2emi {

  margin-bottom: 25px;

}



.box_effort .item {

  display: flex;

  justify-content: space-between;

}

.box_effort .item > .image {

  width: 50%;

}

.box_effort .item > .data {

  width: 50%;

}



.box_effort .linkbox_gray {

  max-width: 480px;

  height: auto;

  font-size: 85%;

  line-height: 1.4;

  padding: 8px 20px;

}

.box_effort .linkbox_gray::after {

  right: 8px;

  height: 12px;

}







.box_target {

  max-width: 740px;

  width: calc(740 / 780 * 100%);

  margin-right: auto;

  margin-left: auto;

  text-align: center;

}

.box_target p {

  display: inline-block;

  padding: 0 32px;

  font-size: 77%;

  text-align: left;

}











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

  .box00_01 {

    flex-wrap: wrap;

  }

  .box00_01 > .box00_01_01 {

    width: 100%;

  }

  

  .box_effort .ttl_effort {

    font-size: 125%;

    padding-top: 0;

    padding-right: 0;

    padding-left: 0;

  }

  .box_effort .item > .image {

    width: 33.3%;

  }

  .box_effort .item > .data {

    width: 66.6%;

  }

}









/* block04 */

.box04 .link_btn_l {

  position: relative;

  display: block;

  margin-top: 96px;

  border: 2px solid rgb(208,17,27);

  border-radius: 8px;

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

  color: rgb(255,255,255);

  transition: color .2s cubic-bezier(.165, .84, .44, 1), background-color .2s .1s, border-color .2s .1s;

}

.box04 .link_btn_l:hover {

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

  color:  rgb(208,17,27);

}

.box04 .link_btn_l:hover::after {

  position: absolute;

  display: block;

  bottom: -16px;

  right: -80px;

  width: 266px;

  height: 216px;

  background-image: url(../images/img_thum.png?ud=220509);

  background-repeat: no-repeat;

  content: '';

}

.box04 .link_btn_l > span {

  display: block;

  text-align: center;

  font-size: 18px;

  font-weight: 700;

  line-height: 66px;

}









/* flow_map animation */

.box01 .box_flow {

  max-width: 760px;

  margin-right: auto;

  margin-left: auto;

  overflow: hidden;

}

.box01 .box_flow .flow_map {

  position: relative;

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

}

.flow_map .flow_map_p1 {

  position: absolute;

  top: calc( 84 / 466 * 100% );

  left: calc( 310 / 766 * 100% );

  width: calc( 72 / 766 * 100%);

  height: calc( 72 / 466 * 100%);

  background-color: rgb(196,227,135);

  border-radius: 50%;

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

}

.flow_map .flow_map_p2 {

  position: absolute;

  top: calc( 84 / 466 * 100% );

  left: calc( 310 / 766 * 100% );

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

}

.flow_map .flow_map_p3 {

  position: absolute;

  top: 0;

  left: 0;

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

}

.flow_map .flow_map_p4 {

  position: absolute;

  top: 0;

  right: 0;

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

}

.flow_map .flow_map_p5 {

  position: absolute;

  top: 0;

  right: 0;

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

}

.flow_map .flow_map_p6 {

  position: absolute;

  bottom: 0;

  left: 0;

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

}

.flow_map .flow_map_p7 {

  position: absolute;

  bottom: calc( 16 / 466 * 100% );

  right: 0;

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

}

.flow_map .flow_map_p8 {

  position: absolute;

  top: calc( 245 / 466 * 100% );

  left: 0;

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

}



.box_flow .flow_map_p1 {

  transition: 

    opacity .3s cubic-bezier(.165, .84, .44, 1),

    width .3s cubic-bezier(.165, .84, .44, 1),

    height .3s cubic-bezier(.165, .84, .44, 1);

}

.box_flow .flow_map_p3 {

  transition: 

    opacity .3s cubic-bezier(.165, .84, .44, 1),

    left .3s cubic-bezier(.165, .84, .44, 1),

    width .3s cubic-bezier(.165, .84, .44, 1);

}

.box_flow .flow_map_p4 {

  transition: 

    opacity .3s cubic-bezier(.165, .84, .44, 1),

    right .5s cubic-bezier(0.17, 0.84, 0.5, 1.41);

}

.box_flow .flow_map_p5 {

  transition: 

    opacity .3s cubic-bezier(.165, .84, .44, 1),

    width .3s cubic-bezier(.165, .84, .44, 1);

}

.box_flow .flow_map_p6 {

  transition: 

    opacity .3s cubic-bezier(.165, .84, .44, 1),

    bottom .3s cubic-bezier(.165, .84, .44, 1);

}

.box_flow .flow_map_p7 {

  transition: 

    opacity .3s cubic-bezier(.165, .84, .44, 1),

    right .3s cubic-bezier(.165, .84, .44, 1),

    width .3s cubic-bezier(.165, .84, .44, 1);

}

.box_flow .flow_map_p8 {

  transition: 

    opacity .3s cubic-bezier(.165, .84, .44, 1),

    top .3s cubic-bezier(.165, .84, .44, 1),

    left .3s cubic-bezier(.165, .84, .44, 1),

    width .3s cubic-bezier(.165, .84, .44, 1);

}

.box_flow._ready .flow_map_p1,

.box_flow._ready .flow_map_p3,

.box_flow._ready .flow_map_p4,

.box_flow._ready .flow_map_p5,

.box_flow._ready .flow_map_p6,

.box_flow._ready .flow_map_p7,

.box_flow._ready .flow_map_p8 {

  opacity: 0;

}

.box_flow._ready .flow_map_p1._start,

.box_flow._ready .flow_map_p3._start,

.box_flow._ready .flow_map_p4._start,

.box_flow._ready .flow_map_p5._start,

.box_flow._ready .flow_map_p6._start,

.box_flow._ready .flow_map_p7._start,

.box_flow._ready .flow_map_p8._start {

  opacity: 1;

}

.box_flow._ready .flow_map_p1 {

  width: 0;

  height: 0;

}

.box_flow._ready .flow_map_p1._start {

  width: calc( 72 / 766 * 100%);

  height: calc( 72 / 466 * 100%);

}

.box_flow._ready .flow_map_p3 {

  width: 0;

  left: calc( 290 / 760 * 100% );

}

.box_flow._ready .flow_map_p3._start {

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

  left: 0;

}

.box_flow._ready .flow_map_p4 {

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

}

.box_flow._ready .flow_map_p4._start {

  right: 0;

}

.box_flow._ready .flow_map_p5 {

  width: 0;

}

.box_flow._ready .flow_map_p5._start {

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

}

.box_flow._ready .flow_map_p6 {

  bottom: -30%;

}

.box_flow._ready .flow_map_p6._start {

  bottom: 0;

}

.box_flow._ready .flow_map_p7 {

  right: calc( 359 / 760 * 100% );

  width: 0;

}

.box_flow._ready .flow_map_p7._start {

  right: 0;

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

}

.box_flow._ready .flow_map_p8 {

  top: calc( 365 / 466 * 100% );

  left: calc( 280 / 760 * 100% );

  width: 0;

}

.box_flow._ready .flow_map_p8._start {

  top: calc( 245 / 466 * 100% );

  left: 0;

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

}