@charset "utf-8";



#main_box { line-height: 2.0; }



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

#side_box .side_menu .menu_grp_c.grp24 {

}



#side_box .side_menu .menu_grp_d.grp246 {

  display: block;

}



li.btn247 {

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

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

}

li.btn247 > a {

  pointer-events:none;

  cursor: auto;

}

#side_box .side_menu .menu_grp_d > li.btn247 > a::after {

  display: none;

}



#side_box .side_menu .menu_grp_c.grp24._close .btn246 {

    display: none;

}



/* contents ---- */

#main_box .img01 {

    float: right;

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

    margin-left: 20px;

    margin-bottom: 20px;

    margin-top: 20px;

}



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

#main_box .img01 {

    width: 130px;

    margin-left: 10px;

    margin-bottom: 10px;

    margin-top: 10px;

}

}



.box01 .education_box {

  position: relative;

  display: flex;

  justify-content: center;

}

.box01 .education_box .education_box01,

.box01 .education_box .education_box03 {

  display: flex;

  width: 50%;

}

.box01 .education_box .education_box02,

.box01 .education_box .education_box04 {

  display: flex;

  justify-content: center;

  position: absolute;

  left: 50%;

  width: 100%;

}

.box01 .education_box .education_box01 {

  justify-content: flex-end;

  margin-right: 14px;

}

.box01 .education_box .education_box02 {

  top: 0;

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

}

.box01 .education_box > .education_box03 {

  margin-left: 14px;

}

.box01 .education_box .education_box04 {

  top: 55.5%;

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

}



.box01 .education_box .title_outer {

  position: relative;

  width: 100%;

  max-width: 170px;

}

.box01 .education_box .education_box04 .title_outer {

  display: flex;

  justify-content: center;

}



.box01 .education_box .title {

  position: relative;

  width: 100%;

  padding-top: 100%;

  border-radius: 50%;

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

}

.box01 .education_box > .education_box01 .title,

.box01 .education_box > .education_box03 .title {

  margin-top: 100%;

}

.box01 .education_box > .education_box01 .title {

}

.box01 .education_box > .education_box02 .title {

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

}

.box01 .education_box > .education_box03 .title {

  background-color: rgb(226,240,217);

}

.box01 .education_box > .education_box04 .title {

  width: 106px;

  padding-top: 106px;

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

  background-color: rgb(91,156,214);

  color: rgb(255,255,255);

}

.box01 .education_box .title > span {

  display: flex;

  justify-content: center;

  align-items: center;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  line-height: 1.2;

  font-size: 75%;

  text-align: center;

}

.box01 .education_box > .education_box04 .title > span {

  font-size: 100%;

}



.box01 .education_box .title > span > span {

  display: block;

  width: 60%;

}

.box01 .education_box .title > span > span > span {

  color: rgb(250,0,0);

}



.box01 .education_box .comment {

  position: absolute;

  width: calc(50% - 170px);

  font-size: 87.5%;

  line-height: 1.5;

  color: rgb(255,255,255);

}

.box01 .education_box > .education_box01 .comment {

  top: 32%;

  left: 0;

  background-color: rgb(206,168,38);

}

.box01 .education_box > .education_box02 .comment {

  top: 0;

  right: 0;

  background-color: rgb(91,156,214);

}

.box01 .education_box > .education_box03 .comment {

  top: 38%;

  right: 0;

  background-color: rgb(107,167,67);

}

.box01 .education_box > .education_box04 .comment {

  top: -100%;

  left: 0;

  background-color: rgb(32,56,100);

}



.box01 .education_box .comment::before,

.box01 .education_box .comment::after {

  position: absolute;

  height: 1px;

  content: '';

}

.box01 .education_box > .education_box01 .comment::before {

  top: 49px;

  right: -90px;

  width: 70px;

  background-color: rgb(206,168,38);

  transform: rotate(65deg);

}

.box01 .education_box > .education_box01 .comment::after {

  top: 17px;

  right: -40px;

  width: 45px;

  background-color: rgb(206,168,38);

}

.box01 .education_box > .education_box02 .comment::before {

  top: 35px;

  left: -107px;

  width: 72px;

  background-color: rgb(91,156,214);

  transform: rotate(-30deg);

}

.box01 .education_box > .education_box02 .comment::after {

  top: 17px;

  left: -40px;

  width: 45px;

  background-color: rgb(91,156,214);

}

.box01 .education_box > .education_box03 .comment::before {

  top: 37px;

  left: -78px;

  width: 56px;

  background-color: rgb(107,167,67);

  transform: rotate(-45deg);

}

.box01 .education_box > .education_box03 .comment::after {

  top: 17px;

  left: -30px;

  width: 30px;

  background-color: rgb(107,167,67);

}

.box01 .education_box > .education_box04 .comment::before {

  top: 86px;

  right: -163px;

  width: 161px;

  background-color: rgb(32,56,100);

  transform: rotate(58deg);

}

.box01 .education_box > .education_box04 .comment::after {

  top: 17px;

  right: -40px;

  width: 45px;

  background-color: rgb(32,56,100);

}



.box01 .education_box .comment > ul {

  padding: 10px 4px;

}

.box01 .education_box .comment > ul > li {

  text-indent: -1em;

  padding-left: 1em;

}







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

  .box01 .education_box .comment {

    font-size: calc(0.8333vw + 3.3333px);

  }

}

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

  .box01 .education_box .comment {

    font-size: 87.5%;

  }

}



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

  .box01 .education_box .education_box04 {

    top: 43.5%;

  }

  .box01 .education_box .title_outer {

    max-width: 120px;

  }

  .box01 .education_box > .education_box01 .title,

  .box01 .education_box > .education_box03 .title {

    margin-bottom: 60%;

  }

  .box01 .education_box > .education_box04 .title {

    width: 70px;

    padding-top: 70px;

  }

  .box01 .education_box .title > span {

    font-size: 10px;

  }

  .box01 .education_box > .education_box04 .title > span {

    font-size: 12px;

  }

  .box01 .education_box .title > span > span {

    width: 68%;

  }

  

  .box01 .education_box .comment {

    width: calc(50% - 70px);

    font-size: 10px;

  }

  .box01 .education_box .comment > ul {

    padding: 8px 4px;

  }

  

  .box01 .education_box > .education_box01 .comment,

  .box01 .education_box > .education_box03 .comment {

    width: 45%;

    top: 78%;

  }

  .box01 .education_box > .education_box01 .comment {

  }



  .box01 .education_box > .education_box01 .comment::before {

    top: -27px;

    right: 99px;

    width: 35px;

    transform: rotate(-45deg);

  }

  .box01 .education_box > .education_box01 .comment::after {

    top: -6px;

    right: 120px;

    width: 18px;

    transform: rotate(90deg);

  }

  .box01 .education_box > .education_box02 .comment::after {

    top: 10px;

    left: -10px;

    width: 10px;

  }

  .box01 .education_box > .education_box02 .comment::before {

    top: 17px;

    left: -38px;

    width: 30px;

  }

  .box01 .education_box > .education_box03 .comment::before {

    top: -24px;

    left: 92px;

    width: 40px;

    transform: rotate(45deg);

  }

  .box01 .education_box > .education_box03 .comment::after {

    top: -4px;

    left: 121px;

    width: 10px;

    transform: rotate(90deg);

  }

  .box01 .education_box > .education_box04 .comment::before {

    top: 78px;

    right: -52px;

    width: 52px;

    transform: rotate(50deg);

  }

  .box01 .education_box > .education_box04 .comment::after {

    top: 58px;

    right: -9px;

    width: 10px;

  }

}









.box01 .roadmap_box {

  display: block;

  position: relative;

  max-width: 700px;

  margin-right: auto;

  margin-left: auto;

}

.box01 .roadmap_box > ul {

  display: flex;

  justify-content: flex-end;

  background-image: url(../../images/education/bg_arrow01.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

}

.box01 .roadmap_box > ul > li {

  position: relative;

  width: calc((100% - 75px) / 3);

  padding-top: calc(360 / 700 * 100%);

  margin-right: 15px;

}

.box01 .roadmap_box > ul > li:last-child {

  margin-right: 0;

}

.box01 .roadmap_box > ul > li .inner_box {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  line-height: 1.5;

}



.box01 .roadmap_box > ul > li .inner_box .year {

  position: absolute;

  width: 100%;

}

.box01 .roadmap_box > ul > .roadmap_box01 .inner_box .year {

  top: 31%;

  left: 22%;

}

.box01 .roadmap_box > ul > .roadmap_box02 .inner_box .year {

  top: 16%;

  left: 7%;

}

.box01 .roadmap_box > ul > .roadmap_box03 .inner_box .year {

  top: 7.5%;

  left: -20%;

}



.box01 .roadmap_box > ul > li .inner_box .year::after {

  position: absolute;

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

  content: '';

}

.box01 .roadmap_box > ul > .roadmap_box01 .inner_box .year::after {

  top: 140%;

  left: 15%;

  width: 10px;

  height: 10px;

  border-radius: 5px;

  background-color: rgb(241,124,46);

}

.box01 .roadmap_box > ul > .roadmap_box02 .inner_box .year::after {

  top: 130%;

  left: 5%;

  width: 16px;

  height: 16px;

  border-radius: 8px;

  background-color: rgb(83,130,52);

}

.box01 .roadmap_box > ul > .roadmap_box03 .inner_box .year::after {

  top: 124%;

  left: 9%;

  width: 22px;

  height: 22px;

  border-radius: 11px;

  background-color: rgb(250,0,0);

}





.box01 .roadmap_box > ul > li .inner_box .title {

  position: absolute;

  width: 100%;

}

.box01 .roadmap_box > ul > .roadmap_box01 .inner_box .title {

  top: 41.5%;

  left: 26%;

}

.box01 .roadmap_box > ul > .roadmap_box02 .inner_box .title {

  top: 30%;

  left: 0%;

}

.box01 .roadmap_box > ul > .roadmap_box03 .inner_box .title {

  top: 21%;

  left: -4%;

}



.box01 .roadmap_box > ul > li .inner_box .comment_box {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 18px 4px;

  font-size: 75%;

}

.box01 .roadmap_box > ul > li .inner_box .comment_box .border {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.roadmap_box .inner_box .comment_box .border_hukidashi {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

}

.roadmap_box .roadmap_box01 .inner_box .comment_box .border_hukidashi {

  padding-top: calc(126 / 208 * 100%);

}

.roadmap_box .roadmap_box02 .inner_box .comment_box .border_hukidashi {

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

}

.roadmap_box .roadmap_box03 .inner_box .comment_box .border_hukidashi {

  padding-top: calc(72 / 208 * 100%);

}

.roadmap_box .inner_box .comment_box .border::before,

.roadmap_box .inner_box .comment_box .border_hukidashi::after {

  position: absolute;

  content: '';

}

.box01 .roadmap_box > ul > li .inner_box .comment_box .border::before {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 1px solid rgb(241,124,46);

}

.box01 .roadmap_box > ul > .roadmap_box01 .inner_box .comment_box .border_hukidashi::after {

  top: -11.5%;

  left: 17%;

  width: 22%;

  padding-top: 13.5%;

  border-top: 1px solid rgb(241,124,46);

  border-right: 1px solid rgb(241,124,46);

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

  transform: rotate(-45deg) matrix(1, 0, -0.6, 1, 0, 0);

}





.box01 .roadmap_box > ul > .roadmap_box02 .inner_box .comment_box {

  bottom: auto;

  top: 50%;

}

.box01 .roadmap_box > ul > .roadmap_box02 .inner_box .comment_box .border::before {

  border-color: rgb(83,130,52);

}

.box01 .roadmap_box > ul > .roadmap_box02 .inner_box .comment_box .border_hukidashi::after {

  top: -17.5%;

  left: 17%;

  width: 23%;

  padding-top: 15%;

  border-top: 1px solid rgb(83,130,52);

  border-right: 1px solid rgb(83,130,52);

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

  transform: rotate(-40deg) matrix(1, 0, -0.3, 1, 0, 0);

}



.box01 .roadmap_box > ul > .roadmap_box03 .inner_box .comment_box {

  bottom: auto;

  top: 35%;

}

.box01 .roadmap_box > ul > .roadmap_box03 .inner_box .comment_box .border::before {

  border-color: rgb(250,0,0);

}

.box01 .roadmap_box > ul > .roadmap_box03 .inner_box .comment_box .border_hukidashi::after {

  top: -33.5%;

  left: 23%;

  width: 14%;

  padding-top: 23%;

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

  border-right: 1px solid rgb(250,0,0);

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

  transform: rotate(-60deg) matrix(1, 0, 0, 1, 0, 0);

}





.box01 .roadmap_box > ul > li .inner_box .comment_box .text {

  position: relative;

}



.box01 .roadmap_box > .note {

  position: absolute;

  right: 0;

  bottom: 0;

  width: 60%;

  padding: 5px 10px;

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

  font-size: 87.5%;

  line-height: 1.5;

}



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

  .box01 .roadmap_box > ul > li .inner_box .comment_box {

    padding: calc(3.3333vw - 24.6667px) 4px;

    font-size: calc(0.5556vw + 4.8889px);

  }

}

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

  .box01 .roadmap_box > ul > li .inner_box .comment_box {

    padding: 18px 4px;

    font-size: 75%;

  }

}





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

  .box01 .roadmap_box > ul {

    background-position: center top;

  }

  .box01 .roadmap_box > ul > li {

    width: calc((100% - 30px) / 3);

    padding-top: 80%;

  }

  

  .box01 .roadmap_box > ul > .roadmap_box01 .inner_box .year {

    top: 20%;

    left: 20%;

  }

  .box01 .roadmap_box > ul > .roadmap_box01 .inner_box .year::after {

    top: 110%;

    left: 21%;

  }

  .box01 .roadmap_box > ul > .roadmap_box02 .inner_box .year {

    top: 8%;

  }

  .box01 .roadmap_box > ul > .roadmap_box02 .inner_box .year::after {

    top: 100%;

    width: 14px;

    height: 14px;

    border-radius: 7px;

  }

  .box01 .roadmap_box > ul > .roadmap_box03 .inner_box .year {

    top: 2.5%;

  }

  .box01 .roadmap_box > ul > .roadmap_box03 .inner_box .year::after {

    top: 94%;

    width: 18px;

    height: 18px;

  }

  

  .box01 .roadmap_box > ul > li .inner_box .title {

    font-size: 11px;

  }

  .box01 .roadmap_box > ul > .roadmap_box01 .inner_box .title {

    top: 31.5%;

    left: 5%;

  }

  .box01 .roadmap_box > ul > .roadmap_box02 .inner_box .title {

    top: 22%;

  }

  .box01 .roadmap_box > ul > .roadmap_box03 .inner_box .title {

    top: 17%;

  }

  

  .box01 .roadmap_box > ul > li .inner_box .comment_box {

    padding: 12px 4px;

    font-size: 10px;

  }

  

  .box01 .roadmap_box > ul > .roadmap_box01 .inner_box .comment_box .border::after {

    top: -5.5%;

  }

  

  .box01 .roadmap_box > ul > .roadmap_box02 .inner_box .comment_box {

    top: 38%;

  }

  .box01 .roadmap_box > ul > .roadmap_box02 .inner_box .comment_box .border::after {

    top: -6.5%;

  }

  

  .box01 .roadmap_box > ul > .roadmap_box03 .inner_box .comment_box {

    top: 30%;

  }

  .box01 .roadmap_box > ul > .roadmap_box03 .inner_box .comment_box .border::after {

    top: -14.5%;

  }

  

  .box01 .roadmap_box > .note {

    position: relative;

    right: auto;

    bottom: auto;

    width: 100%;

    margin-top: 20px;

  }

}