/* ===========================
   Work
=========================== */
#work{
  margin-bottom: 80px;
  padding-top: 30px;
  margin-top: 90px;
}
.work-timeline {
   position: relative;
   margin: 0 auto;
}
.work-timeline::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 4px;
   background: var(--MS_blue);
   transform: translateX(-50%);
}
.work-timeline::before {
   left: 20px;
}
.work-step {
   width: 100%;
   left: 0;
   text-align: left;
}
.work-step {
   position: relative;
   margin: 40px 0;
   width: 50%;
}
.work-box {
   background: white;
   padding: 25px;
   border-radius: 15px;
   border: 1px solid var(--gray300);
   position: relative;
   color: var(--gray600);
   font-size: 14px;
}
.work-number {/*
   position: absolute;
   transform: translateY(-50%);*/
   font-size: 12px;
   width: 65px;
   height: 65px;
   background: var(--MS_blue);
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   text-align: center;
   line-height: 1.2;
}
.work-number span{
   font-size: 11px;
}
.work-number span.right::after {
   content: '';
   position: absolute;
   left: -20px;
   top: 296px;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background-color: var(--MS_blue);
   z-index: 2;
}
.work-title {
   font-size: 18px;
   color: var(--MS_blue);
   margin-bottom: 10px;
   font-weight: bold;
}
.work-img {
   margin-top: 10px;
}
.work-step{
   width: 100%;
   display: flex;
    gap: 20px;
}
.work-step .work-number-wrap{
   margin-left: -12px;
   position: relative;
}
.work-step.odd-04 .work-number-wrap::after {
   content: '';
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
   background-color: #fff;
   align-items: flex-start;
   position: absolute;
   bottom: ;
   }/*
.work-step:nth-child(even) .work-number {
    left: -15px;
}
.work-step:nth-child(odd) .work-number {
    left: -15px;
}
   .work-step:last-child{
      background: #fff;
        margin-left: -5px;
        padding-left: 65px !important;
   }*/
/* work-end */
#work .speech-bubble{
   background-color: #F0F9FF;
   padding: 30px;
   font-size: 15px;
    color: var(--MS_blue);
   font-weight: bold;
   border-radius: 12px;
   position: relative;
   margin-bottom: 20px;
}
#work .speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 240px;
  border-width: 30px 30px 0;
  border-style: solid;
  border-color: #F0F9FF transparent transparent transparent;
  transform: rotate(135deg);
}
#work .bubble-img {
    display: flex;
   flex-direction: column;
    align-items: center;
    font-size: 18px;
    color: var(--MS_blue);
    font-weight: bold;
      gap: 20px;
      z-index: 9;
}
#work .bubble-img img{
   max-width: 186px;
}
@media (min-width: 768px) {
   .work-end{
      max-width: 734px;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
   }
   .speech-bubble{
      font-size: 16px;
      max-width: 625px;
   }
   .speech-bubble::after {
    left: 350px;
  transform: rotate(235deg);
  }
   .bubble-img{
   flex-direction: row-reverse;
    align-items: flex-end;
   }
   .bubble-img img{
   max-width: 38%;
   margin-top: -60px;
   }
}
@media (min-width: 1050px) {
   .work-end{
      margin: 0;
   }
   .work-timeline::before {
      left: 50%;
   }
   .work-box {
      font-size: 16px;
   }
   .work-title {
      font-size: 22px;
   }
   .work-step {
      position: relative;
      margin: 40px 0;
      width: 50%;
      max-width: 466px;
      padding-left: 0;
   }
   .work-step .work-number-wrap{
   margin-left: 0;
   }
   .work-step .work-number {
      font-size: 14px;
   }
   
  .work-step .work-number-wrap {
    position: absolute;
    width: calc(100vw - 40px - 200%);
    left: calc(200% - 100vw + 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .work-step:nth-child(even) .work-number-wrap{
    width: calc(100vw - 40px - 200%);
    right: calc(200% - 100vw + 40px);
    left: auto;
  }
  .work-step .work-number-wrap .work-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(50% - 32.5px);
    gap: 0;
  }
  .work-step:nth-child(even) .work-number-wrap .work-line{
   flex-direction: row-reverse;
  }
  .work-step .work-line::before {
    content: '';
    position: relative;
    width: 100%;
    height: 1px;
    background-color: var(--MS_blue);
    z-index: 1;
  }
  .work-step .work-line::after {
    content: '';
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--MS_blue);
    z-index: 2;
  }
  .work-step .work-number {
    font-size: 14px;
    width: 65px;
    height: 65px;
    background: var(--MS_blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    z-index: 3;
  }
  .work-step:nth-child(even) .work-line:last-child::before,
  .work-step:nth-child(even) .work-line:last-child::after,
  .work-step:nth-child(odd) .work-line:first-child::before,
  .work-step:nth-child(odd) .work-line:first-child::after{
   display: none;
  }
  .work-step.even-01 .work-number-wrap{
      margin-top: 130px;
   }
   .work-step.even-02 .work-number-wrap{
      margin-top: 200px;
   }
   .work-step.even-03 .work-number-wrap{
      margin-top: 220px;
   }
   .work-step.odd-03 .work-number-wrap{
      margin-top: 30px;
   }
   .work-step.even-04 .work-number-wrap{
      margin-top: 280px;
   }
   .work-step.odd-04 .work-number-wrap{
      margin-top: 280px;
      z-index: 9;
   }
   .work-step.odd-04 .work-number-wrap::after {
      height: 180px;
      position: absolute;
      bottom: -160px;
    }

   .work-step:nth-child(even){
      left: 0 !important;
      padding-right: 0 !important;
      margin-top: -400px;
   }
   .work-step:nth-child(odd) {
      left: calc(100% - 466px);
   }
   .work-step.odd-01{
      margin-top: -60px;
   }
   .work-step.even-02{
      margin-top: -450px;
   }
   .work-step.odd-02{
      margin-top: -40px;
   }
   .work-step.even-03{
      margin-top: -470px;
   }
   .work-step.odd-03{
      margin-top: -20px;
   }
   .work-step.even-04{
      margin-top: -280px;
   }
   .work-step.odd-04{
      margin-top: -230px;
      position: relative;
   }
   .work-img{
      flex-direction: row-reverse;
      align-items: flex-end;
   }
   /* work-end */
   #work .work-end{
      max-width: 734px;
      display: flex;
      flex-direction: column;
      margin-top: -100px;
      z-index: 99;
      position: relative;
      max-width: 52%;
   }
   #work .speech-bubble{
      font-size: 16px;
      max-width: 625px;
   }
   #work .speech-bubble::after {
    left: 350px;
  transform: rotate(235deg);
  }
  #work .bubble-img{
   flex-direction: row-reverse;
   align-items: flex-end;
  }
  #work .bubble-img img {
    max-width: 290px;
    margin-right: -100px;
}
}
  @media (min-width:1240px) {
    .work-step .work-number-wrap {
      width: calc(1240px - 200%);
      left: calc(200% - 1240px);
    }
   .work-step:nth-child(even) .work-number-wrap{
         width: calc(1240px - 200%);
         right: calc(200% - 1240px);
         left: auto;
   }
  }