@charset "utf-8";



#main_box { line-height: 2.0; }



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



li.btn011 {

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

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

}

li.btn011 > a {

  pointer-events: none;

  cursor: auto;

}

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



/* contents ---- */

.chart_box {

  

}



.chart_box .box_t1 {

  position: relative;

  padding: 12px;

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

  font-weight: 700;

  font-size: 125%;

}

.chart_box .box_t2 {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: flex-start;

  position: relative;

  margin-top: 48px;

  margin-left: 48px;

  border-width: 2px;

  border-style: solid;

  padding: 12px;

}

.chart_box .box_t2._cat01 {

  border-color: rgb(251,211,117);

  background-color: rgb(254,247,220);

}

.chart_box .box_t2._cat02 {

  border-color: rgb(183,207,153);

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

}

.chart_box .box_t2._cat03 {

  border-color: rgb(109,195,198);

  background-color: rgb(235,245,248);

}

.chart_box .box_t2._cat04 {

  border-color: rgb(238,163,150);

  background-color: rgb(252,239,237);

}

.chart_box .box_t2._cat05 {

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

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

}

.chart_box .box_t2._cat01 .title {

  color: rgb(247,175,13);

}

.chart_box .box_t2._cat02 .title {

  color: rgb(112,159,52);

}

.chart_box .box_t2._cat03 .title {

  color: rgb(60,175,179);

}

.chart_box .box_t2._cat04 .title {

  color: rgb(223,86,62);

}

.chart_box .box_t2._cat05 .title {

  color: rgb(178, 178, 178);

}

.chart_box .box_t2 .title {

  position: absolute;

  top: -32px;

  left: 0;

  font-weight: 700;

  font-size: 112.5%;

}

.chart_box .box_t3 {

  position: relative;

  width: calc(50% - 16px);

  margin-right: 32px;

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

  padding: 6px 0;

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

  text-align: center;

  font-weight: 700;

}

.chart_box .box_t3 > span {

  display: block;

}

.chart_box .box_t4,

.chart_box .box_t5 {

  position: relative;

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

  padding: 8px;

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

  line-height: 1.3;

  font-size: 87.5%;

}

.chart_box .box_t4 {

  width: calc(50% - 16px);

}

.chart_box .box_t4 > li,

.chart_box .box_t6 li {

  margin-bottom: .5em;

}

.chart_box .box_t5 {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: flex-start;

  width: 100%;

}

.chart_box .box_t5 .box_t6:first-of-type {

  width: calc(45% - 12px);

}

.chart_box .box_t5 .box_t6:last-of-type {

  width: 55%;

}

.chart_box .cat_title {

  width: 100px;

  padding: 2px 12px;

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

  color: rgb(255,255,255);

  text-align: center;

}

.chart_box .cat_title.w2 {

  width: 160px;

}

.chart_box .box_t4 .cat_title {

  margin-bottom: 0;

}

.chart_box .box_t6 .cat_title {

  margin-bottom: .33em;

}



.chart_box .box_t4_dw {

  width: calc(100% - 16px);

  position: relative;

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

  padding: 8px;

  margin-left: 16px;

  margin-bottom: 8px;

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

  line-height: 1.6;

}





.chart_box .box_t1::after {

}

.chart_box .box_t2::after {

  display: block;

  position: absolute;

  left: -32px;

  bottom: -2px;

  width: 48px;

  height: calc(100% + 52px);

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

  content: '';

}

.chart_box .box_t2:last-child::after {

  display: none;

}

.chart_box .box_t2 .box_t3::before {

  display: block;

  position: absolute;

  left: -46px;

  bottom: 50%;

  width: 44px;

  height: 1px;

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

  content: '';

}

.chart_box .box_t2._cat01 .box_t3::after,

.chart_box .box_t2._cat04 .box_t3::after {

  display: block;

  position: absolute;

  left: calc(100% + 2px);

  bottom: 50%;

  width: 42px;

  height: 1px;

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

  content: '';

}

.chart_box .box_t2._cat02 .box_t5::before {

  display: block;

  position: absolute;

  left: -46px;

  top: 24px;

  width: 44px;

  height: 1px;

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

  content: '';

}

.chart_box .box_t2._cat05 .box_t3::after {

  display: block;

  position: absolute;

  left: -46px;

  bottom: 50%;

  width: 44px;

  height: calc(100% + 52px);

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

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

  content: '';

}



.chart_box .box_t2._cat01 .box_t4 li.first_dw{

    position: relative;

    width: calc(100% - 16px);

}



.chart_box .box_t2._cat01 .box_t4 li.first_dw::after{

    display: block;

    position: absolute;

    left: calc(100% + 2px);

    bottom: 50%;

    width: 42px;

    height: 1px;

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

    content: '';

    left: 9px;

    top: calc(100% + 2px);

    width: 42px;

    height: 26px;

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

  }



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

  .chart_box .box_t1 {

    font-size: 16px;

  }

  .chart_box .box_t2 {

    flex-wrap: wrap;

    margin-left: 32px;

  }

  .chart_box .box_t2._cat03 .title {

    font-size: 15px;

  }

  .chart_box .box_t3 {

    width: calc(100% - 12px);

  }

  .chart_box .box_t4 {

    width: calc(100% - 24px);

    margin-top: 24px;

    margin-left: 24px;

  }

  

  .chart_box .cat_title {

    width: 76px;

  }

  .chart_box .box_t2::after {

    left: -20px;

  }

  .chart_box .box_t2 .box_t3::before {

    left: -34px;

    width: 32px;

  }

  .chart_box .box_t2._cat02 .box_t5::before {

    left: -34px;

    width: 32px;

  }

  .chart_box .box_t2._cat05 .box_t3::after {

    left: -34px;

    width: 32px;

  }

  .chart_box .box_t2._cat01 .box_t3::after,

  .chart_box .box_t2._cat04 .box_t3::after {

    left: 9px;

    top: calc(100% + 2px);

    width: 42px;

    height: 56px;

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

  }

}









.chart02_box {

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;

  font-size: 112.5%;

  font-weight: 700;

  color: rgb(51,51,51);

}

.chart02_box .box_t11 {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  width: 45%;

  padding-right: 48px;

}

.chart02_box .box_t11 > li {

  position: relative;

  width: 40px;

  height: 180px;

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

  padding: 6px 0;

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

  text-align: center;

}

.chart02_box .box_t11 > li:nth-of-type(2) {

  margin-top: 224px;

}

.chart02_box .box_t11 > li > span {

  display: block;

  position: absolute;

  top: 50%;

  left: 50%;

  width: 20px;

  line-height: 1;

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

}

.chart02_box .box_t11 > li:nth-of-type(4) > span {

  line-height: 2;

}

.chart02_box .box_t12 {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 55%;

  height: 100%;

}

.chart02_box .box_t12 > li {

  position: relative;

  padding: 2px;

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

  text-align: center;

}

.chart02_box .box_t12 > li:nth-of-type(n+2) {

  margin-top: 48px;

}



.chart02_box .box_t11 > li::before {

  display: block;

  position: absolute;

  border-width: 1px;

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

  content: '';

}

.chart02_box .box_t11 > li:nth-of-type(1)::before,

.chart02_box .box_t11 > li:nth-of-type(3)::before,

.chart02_box .box_t11 > li:nth-of-type(4)::before {

  left: calc(100% + 2px);

  top: 50%;

  width: 25px;

  height: 1px;

  border-bottom-style: solid;

}

.chart02_box .box_t11 > li:nth-of-type(1)::before {

  width: 120px;

}

.chart02_box .box_t11 > li:nth-of-type(3)::before {

  width: 48px;

}

.chart02_box .box_t11 > li:nth-of-type(2)::before {

  left: 50%;

  bottom: calc(100% + 2px);

  width: 24px;

  height: calc(50% + 46px);

  border-left-style: solid;

}

.chart02_box .box_t12 > li::before,

.chart02_box .box_t12 > li::after {

  display: block;

  position: absolute;

  left: -24px;

  width: 24px;

  height: calc(50% + 24px);

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

  content: '';

}

.chart02_box .box_t12 > li::before {

  top: 50%;

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

}

.chart02_box .box_t12 > li::after {

  bottom: 50%;

}

.chart02_box .box_t12 > li:first-of-type::after,

.chart02_box .box_t12 > li:last-of-type::before {

  border-left-style: none;

}



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

  .chart02_box {

    font-size: 13px;

    max-width: 400px;

  }

  .chart02_box .box_t11 {

    width: 50%;

    padding-right: 24px;

  }

  .chart02_box .box_t11 > li {

    width: calc(24 / 132 * 100%);

    max-width: 40px;

    height: 120px;

  }

  .chart02_box .box_t11 > li:nth-of-type(2) {

    margin-top: 140px;

  }

  .chart02_box .box_t12 {

    width: 50%;

  }

  .chart02_box .box_t12 > li {

    line-height: 1.4;

  }

  .chart02_box .box_t12 > li:nth-of-type(n+2) {

    margin-top: 32px;

  }

  

  .chart02_box .box_t11 > li:nth-of-type(1)::before {

    width: 100px;

  }

  .chart02_box .box_t11 > li:nth-of-type(3)::before {

    width: 46px;

  }

  .chart02_box .box_t11 > li:nth-of-type(4)::before {

    width: 13px;

  }

  .chart02_box .box_t12 > li::before,

  .chart02_box .box_t12 > li::after {

    left: -12px;

    width: 12px;

  }

  .chart02_box .box_t11 > li:nth-of-type(2)::before {

    height: calc(50% + 22px);

  }

}



html[lang="en"] .chart02_box {

  align-items: flex-start;

}

.chart02_box .box_t13 {

  display: block;

    width: 60%;

  padding-right: 48px;

}

.chart02_box .box_t13 > li {

  position: relative;

  width: calc((100% - 48px) / 3 * 2 + 48px);

  margin-left: auto;

  margin-bottom: 24px;

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

  padding: 6px 0;

  line-height: 1.3;

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

  text-align: center;

}

.chart02_box .box_t13 > li:nth-of-type(2) {

  width: calc((100% - 48px) / 3 * 2);

  margin-right: auto;

  margin-left: 0;

}

html[lang="en"] .chart02_box .box_t12 {

  width: 40%;

}

html[lang="en"] .chart02_box .box_t12 > li {

  margin-top: 32px;

  line-height: 1.3;

}



.chart02_box .box_t13 > li::before,

.chart02_box .box_t13 > li::after {

  display: block;

  position: absolute;

  border-width: 1px;

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

  content: '';

}

.chart02_box .box_t13 > li:nth-of-type(2)::before,

.chart02_box .box_t13 > li:nth-of-type(2)::after {

  left: calc(100% + 2px);

  width: 24px;

  height: calc(50% + 26px);

  border-right-style: solid;

}

.chart02_box .box_t13 > li:nth-of-type(2)::before {

  bottom: 50%;

  border-bottom-style: solid;

}

.chart02_box .box_t13 > li:nth-of-type(2)::after {

  top: 50%;

}

.chart02_box .box_t13 > li:nth-of-type(3)::after {

  top: calc(100% + 2px);

  left: 50%;

  width: 1px;

  height: 24px;

  border-right-style: solid;

}

.chart02_box .box_t13 > li:nth-of-type(4)::after {

  top: calc(100% + 2px);

  left: 50%;

  width: calc(50% + 26px);

  height: 24px;

  border-left-style: solid;

  border-bottom-style: solid;

}

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

  .chart02_box .box_t13 {

    padding-right: 24px;

  }

  .chart02_box .box_t13 > li:nth-of-type(4)::after {

    width: calc(50% + 14px);

  }

}