@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.grp243 {

  display: block;

}



li.btn245 {

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

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

}

li.btn245 > a {

  pointer-events:none;

  cursor: auto;

}

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

  display: none;

}



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

    display: none;

}



/* contents ---- */



.box01 .promotion_box > ul {

  display: flex;

  justify-content: space-between;

  text-align: center;

}

.box01 .promotion_box > ul > li {

  position: relative;

  width: calc(100% / 3);

  padding-bottom: 30px;

}

.box01 .promotion_box .outer_box {

  position: absolute;

  width: 200%;

  height: 100%;

  border: 3px solid transparent;

}

.box01 .promotion_box01 .outer_box {

  top: 0px;

  left: 0;

  border-color: rgb(112,48,160);

}

.box01 .promotion_box03 .outer_box {

  top: 25px;

  right: 0;

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

}

.box01 .promotion_box .outer_box .title {

  position: absolute;

  padding: 5px 15px;

  border-radius: 6px;

  color: rgb(255,255,255);

  font-size: 87.5%;

}

.box01 .promotion_box01 .outer_box .title {

  left: -3px;

  top: -19px;

  background-color: rgb(112,48,160);

}

.box01 .promotion_box03 .outer_box .title {

  right: -3px;

  top: -38px;

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

}

.box01 .promotion_box03 .item_arrow {

  position: absolute;

  left: -100%;

  top: 50%;

  font-size: 81.25%;

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

}

.box01 .promotion_box03 .item_arrow::before {

  position: absolute;

  right: 1px;

  top: 50%;

  height: 66px;

  width: 1px;

  border-left: 1px dotted rgb(24,24,24);

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

  content: '';

}

.box01 .promotion_box03 .item_arrow::after {

  position: absolute;

  right: -21px;

  top: 50%;

  width: 46.7px;

  height: 46.7px;

  border-top: 1px dotted rgb(24,24,24);

  border-right: 1px dotted rgb(24,24,24);

  transform: translate3d(0,-50%,0) rotate(45deg);

  content: '';

}

.box01 .promotion_box03 .item_arrow > span {

  display: block;

  position: relative;

  padding: 4px 0 4px 6px;

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

  border-right-color: transparent;

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

}



.box01 .promotion_box .inner_box {

  padding-top: 40px;

  padding-bottom: 10px;

  font-size: 81.25%;

}

.box01 .promotion_box .inner_box .title {

  display: inline-block;

  min-width: 100px;

  border: 1px solid rgb(52,49,142);

  padding: 0 15px;

}

.box01 .promotion_box03 .inner_box .title {

  width: 70%;

}



.box01 .promotion_box .inner_box .icon_box {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  margin-right: auto;

  margin-left: auto;

}

.box01 .promotion_box02 .inner_box .icon_box {

  width: 100px;

  padding-top: 15px;

}

.box01 .promotion_box03 .inner_box .icon_box {

  width: 150px;

  padding-top: 15px;

}



.box01 .promotion_box .inner_box .icon_person {

  display: block;

  position: relative;

  width: 28px;

  height: 14px;

  margin: 48px 6px 0;

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

}

.box01 .promotion_box .inner_box .icon_person::before,

.box01 .promotion_box .inner_box .icon_person::after {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 28px;

  height: 28px;

  border-radius: 14px;

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

  content: '';

}

.box01 .promotion_box .inner_box .icon_person::before {

  bottom: 28px;

}

.box01 .promotion_box .inner_box .icon_red .icon_person,

.box01 .promotion_box .inner_box .icon_red .icon_person::before,

.box01 .promotion_box .inner_box .icon_red .icon_person::after {

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

}

.box01 .promotion_box .inner_box .icon_yellow .icon_person,

.box01 .promotion_box .inner_box .icon_yellow .icon_person::before,

.box01 .promotion_box .inner_box .icon_yellow .icon_person::after {

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

}

.box01 .promotion_box .inner_box .icon_blue .icon_person,

.box01 .promotion_box .inner_box .icon_blue .icon_person::before,

.box01 .promotion_box .inner_box .icon_blue .icon_person::after {

  background-color: rgb(68,115,197);

}

.box01 .promotion_box .inner_box .icon_green .icon_person,

.box01 .promotion_box .inner_box .icon_green .icon_person::before,

.box01 .promotion_box .inner_box .icon_green .icon_person::after {

  background-color: rgb(146,209,79);

}



.box01 .promotion_box > ul > li > .text {

  position: absolute;

  bottom: 10px;

  left: 50%;

  width: 100%;

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

  text-decoration: underline;

  font-size: 81.25%;

}



.box01 .promotion_box .note {

  width: 70%;

  margin-top: 40px;

  padding: 5px 10px;

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

  font-size: 87.5%;

  line-height: 1.5;

}



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

  .box01 .promotion_box {

    margin-top: 50px;

  }

  .box01 .promotion_box > ul > li {

    padding-bottom: 40px;

  }

  

  .box01 .promotion_box .outer_box .title {

    padding: 5px 8px;

    line-height: 1.5;

  }

  .box01 .promotion_box01 .outer_box .title {

    top: -28px;

  }

  .box01 .promotion_box03 .outer_box .title {

    top: -47px;

  }

  

  .box01 .promotion_box .inner_box .title {

    min-width: 75px;

    padding: 0;

    font-size: 10px;

  }

  .box01 .promotion_box02 .inner_box .icon_box {

    width: 67px;

  }

  .box01 .promotion_box03 .inner_box .icon_box {

    width: 100px;

  }

  .box01 .promotion_box .inner_box .icon_person {

    width: 18px;

    height: 9px;

    margin-top: 30px;

  }

  .box01 .promotion_box .inner_box .icon_person::before, .box01 .promotion_box .inner_box .icon_person::after {

    width: 18px;

    height: 18px;

  }

  .box01 .promotion_box .inner_box .icon_person::before {

    bottom: 18px;

  }

  

  .box01 .promotion_box03 .item_arrow {

    top: 45%;

  }

  .box01 .promotion_box03 .item_arrow > span {

    padding: 0;

    font-size: 10px;

    line-height: 16px;

    letter-spacing: -0.5px;

  }

  .box01 .promotion_box03 .item_arrow::before {

    height: 30px;

  }

  .box01 .promotion_box03 .item_arrow::after {

    right: -10px;

    width: 21px;

    height: 21px;

  }

  

  .box01 .promotion_box > ul > li > .text {

    line-height: 1.5;

  }

  .box01 .promotion_box .note {

    width: 100%;

  }

}









#main_box .img01 {

    

}



#main_box .img02 {

    float: right;

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

    margin-left: 20px;

    margin-bottom: 20px;

    margin-top: 20px;

}