﻿/* フローチャート >> */
#smartwizard.sw-theme-arrows .sw-container {
  min-height: 200px
}
#smartwizard.sw-theme-arrows .step-content {
  padding: 10px 0;
  border: 0 solid #d4d4d4;
  background-color: #FFF;
  text-align: left
}
#smartwizard.sw-theme-arrows .sw-toolbar {
  background: #fff;
  border-radius: 0!important;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0!important
}
#smartwizard.sw-theme-arrows .sw-toolbar-top {
  border-bottom-color: #fff!important
}
#smartwizard.sw-theme-arrows .sw-toolbar-bottom {
  border-top-color: #fff!important;
  border-bottom-color: #ddd!important
}
#smartwizard.sw-theme-arrows>ul.step-anchor {
  display: block;
  border: 0 solid #ccc!important;
  padding: 0;
  /*
  background: #f5f5f5;  
  */
  border-radius: 5px;
  list-style: none;
  overflow: hidden;
  margin-top: 20px
}
#smartwizard.sw-theme-arrows>ul.step-anchor li+li:before {
  padding: 0
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li {
  float: left
}


#smartwizard.sw-theme-arrows>ul.step-anchor>li>span {
  color: #bbb;
  text-decoration: none;
  position: relative;
  display: block;
  float: left;
  border-radius: 0;
  outline-style: none;
  background: #ddd;
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li>span:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  top: 50px;
  margin-top: -50px;
  position: absolute;
  left: 100%;
  z-index: 2
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li>span:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  top: 50px;
  margin-top: -50px;
  position: absolute;
  margin-left: 1px;
  left: 100%;
  z-index: 1
}

@media (min-width: 481px) {
    #smartwizard.sw-theme-arrows > ul.step-anchor > li > span {
      padding: 10px 0 10px 45px;
    }

    #smartwizard.sw-theme-arrows>ul.step-anchor>li>span {
      font-size: 30px;
    }
    #smartwizard.sw-theme-arrows>ul.step-anchor>li>span:after {
      border-top: 31px solid transparent;
      border-bottom: 31px solid transparent;
      border-left: 20px solid #ddd;
      top: 50px;
      margin-top: -50px;
    }
    #smartwizard.sw-theme-arrows>ul.step-anchor>li>span:before {
      border-top: 31px solid transparent;
      border-bottom: 31px solid transparent;
      border-left: 20px solid white;
      top: 50px;
      margin-top: -50px;
    }
    #smartwizard.sw-theme-arrows>ul.step-anchor>li:first-child>span {
      padding-left: 15px
    }

}


@media (max-width: 480px) {
    #smartwizard.sw-theme-arrows > ul.step-anchor > li > span {
      padding: 2px 0 0 12px;
    }

    #smartwizard.sw-theme-arrows>ul.step-anchor>li>span {
      font-size: 14px;
    }
    #smartwizard.sw-theme-arrows>ul.step-anchor>li>span:after {
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
      border-left: 10px solid #ddd;
      top: 50px;
      margin-top: -50px;
    }
    #smartwizard.sw-theme-arrows>ul.step-anchor>li>span:before {
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
      border-left: 10px solid white;
    }
    #smartwizard.sw-theme-arrows>ul.step-anchor>li:first-child>span {
      padding-left: 5px
    }
}

/*
#smartwizard.sw-theme-arrows>ul.step-anchor>li>span:hover {
  color: #bbb;
  text-decoration: none;
  outline-style: none;
  background: #ffc107;
  border-color: #ffc107
}

#smartwizard.sw-theme-arrows>ul.step-anchor>li>span:hover:after {
  border-left-color: #ffc107
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li.clickable>span:hover {
  color: #4285f4!important;
  background: #46b8da!important
}
*/
#smartwizard.sw-theme-arrows>ul.step-anchor>li.done>span {
  border-color: #449d44!important;
  color: #fff!important;
  background: #449d44!important
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li.done>span:after {
  border-left-color: #449d44!important
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li.current>span {
  border-color: #dc3545!important;
  color: #fff!important;
  background: #dc3545!important
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li.current>span:after {
  border-left-color: #dc3545!important
}
#smartwizard.sw-theme-arrows>ul.step-anchor>li.disabled>span, .sw-theme-arrows>ul.step-anchor>li.disabled>span:hover {
  color: #eee!important
}
/* フローチャート << */