@charset "utf-8";



#main_box {

  line-height: 2.0;

}



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

li.btn231 {

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

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

}

li.btn231 > a {

  pointer-events:none;

  cursor: auto;

}

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

  display: none;

}





/* contents ---- */













.box02_01 {

  border: 3px solid #dbdbdb;

  padding: 20px;

}

.box02_01 > div {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  margin-bottom: 16px;

}

.box02_01 > div > .title {

  color: rgb(255,255,255);

  font-size: 18px;

  font-weight: 700;

  padding: 16px 32px;

  text-align: center;

}

.box02_01 > .box02_01_01 > .title {

  width: 210px;

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

}

.box02_01 > .box02_01_02 > .title {

  position: relative;

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

  margin-left: 200px;

  padding: 8px 32px;

  line-height: 1;

}

.box02_01 > .box02_01_02 > .title::before {

  position: absolute;

  top: 50%;

  left: -130px;

  content: '';

  display: block;

  border-top: 16px rgb(166,166,166) solid;

  border-right: 32px transparent solid;

  border-left: 32px transparent solid;

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

}

.box02_01 > .box02_01_03 > .title {

  width: 210px;

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

}

.box02_01 > div > .text {

  width: calc(100% - 240px);

  padding-left: 16px;

  line-height: 1.3;

}

.box02_01 > .box02_01_02 > .text {

  width: auto;

  font-weight: 700;

  color: rgb(208,18,27);

}



.image_box {

  

}

.image_box > ul {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

.image_box > .image_list {

  padding-right: 10px;

  padding-left: 10px;

  font-size: 12px;

  line-height: 1.3;

}

.image_box > .image_list > li {

  width: 33%;

}

.image_box > .image_list > li > span {

  display: block;

}

.image_box > .flow_list {

}

.image_box > .flow_list > li {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  position: relative;

  color: rgb(0,0,0);

  line-height: 1.2;

  height: 64px;

  overflow: hidden;

}

.image_box > .flow_list > li > span {

  display: block;

}

.image_box > .flow_list > li > .arrow {

  position: absolute;

  top: 0;

  right: 0;

  width: 20px;

  height: 100%;

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

}

.image_box > .flow_list > li > .arrow::before,

.image_box > .flow_list > li > .arrow::after {

  display: block;

  position: absolute;

  top: 50%;

  content: '';

  border-top: 32px transparent solid;

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

  border-bottom: 32px transparent solid;

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

}

.image_box > .flow_list > li > .arrow::before {

  right: 0;

  border-top-color: rgb(252,188,84);

  border-bottom-color: rgb(252,188,84);

}

.image_box > .flow_list > li > .arrow::after {

  left: 0;

  border-left-color: rgb(255,226,162);

}

.image_box > .flow_list > li:nth-child(1) {

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

  width: 67%;

}

.image_box > .flow_list > li:nth-child(2) {

  background-color: rgb(252,188,84);

  width: calc(33% - 4em);

}

.image_box > .flow_list > li:nth-child(2) > span:first-child {

  padding-right: 10px;

}

.image_box > .flow_list > li:nth-child(2) > .arrow::before {

  border-top-color: rgb(255,61,16);

  border-bottom-color: rgb(255,61,16);

}

.image_box > .flow_list > li:nth-child(2) > .arrow::after {

  border-left-color: rgb(252,188,84);

}

.image_box > .flow_list > li:nth-child(3) {

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

  width: 4em;

}

.image_box > .flow_list > li:nth-child(3) > .arrow::before {

  display: none;

}







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

  .box02_01 {

    padding: 8px;

  }

  .box02_01 > .box02_01_01 > .title {

    width: 130px;

  }

  .box02_01 > .box02_01_02 > .title {

    margin-left: 110px;

    padding: 8px;

  }

  .box02_01 > .box02_01_02 > .title::before {

    left: -80px;

  }

  .box02_01 > .box02_01_03 > .title {

    width: 130px;

  }

  .box02_01 > div > .title {

    font-size: 14px;

    padding: 16px 0;

  }

  .box02_01 > div > .text {

    width: calc(100% - 130px);

  }

  

  .image_box > .image_list {}

  .image_box > .flow_list {

    font-size: 13px;

    line-height: 1.3;

  }

  .image_box > .flow_list > li:nth-child(2) {

    width: calc(33% - 2.5em);

  }

  .image_box > .flow_list > li:nth-child(3) {

    width: 2.5em;

  }

  .image_box > .flow_list > li:nth-child(2) > span:first-child {

    padding-right: 20px;

    font-size: 12px

  }

}