@charset "UTF-8";
/* setting
----------------------------------------------- */
.bg-gray {
  background: #f2f2f2; }

.text-center {
  text-align: center; }

/* pc tablet
----------------------------------------------- */
@media print, screen and (min-width: 741px) {

  #stability .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex; }
      #stability .flex.s-around {
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-justify-content: -webkit-space-around;
        justify-content: -webkit-space-around;
        justify-content: -moz-space-around;
        -ms-flex-pack: -ms-space-around;
        justify-content: -ms-space-around; }
      #stability .flex.s-between {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-justify-content: -webkit-space-between;
        justify-content: -webkit-space-between;
        justify-content: -moz-space-between;
        -ms-flex-pack: -ms-space-between;
        justify-content: -ms-space-between; }
      #stability .flex.center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-justify-content: -webkit-center;
        justify-content: -webkit-center;
        justify-content: -moz-center;
        -ms-flex-pack: -ms-center;
        justify-content: -ms-center; }
      #stability .flex.wrap {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap; }
    #stability .fs-16 {
      font-size: 1.3em;
      line-height: 1.4;
      padding-bottom: 23px;}
    #stability .sla_info {
      font-size: 12px;
      line-height: 1.4em;
      margin-left: auto;
      margin-right: auto;
      width: 40%;
      margin-top: -125px;
    }
    #stability .sla_info p:nth-child(2) {
      padding-bottom: 5px;
    }
    #stability .sla_info ul {
      padding-left: 27px;
      list-style: outside;
    }
    #stability .sla_info li {
      padding : 3px 0;
    }
    #stability .copy {
      padding: 55px 0;
      max-width: 910px;
      margin: 0 auto; }
    #stability .copy p {
        font-size: 1.2em; }
    #stability .sta_percent_circle_area {
      max-width: 1150px;
      padding: 50px 0;
      margin: 0 auto; }
    #stability .sta_percent_circle_area .year-ttl {
      font-size: 1.6em;
      margin-bottom: 30px; }
    #stability .sta_percent_circle_area .sta_percent_box {
      width: 400px;
      margin: 0 auto 44px;
      padding: 20px 0;
      position: relative; }
    #stability .sta_percent_circle_area .sta_percent_box:before, #stability .sta_percent_circle_area .sta_percent_box:after {
      content: '';
      width: 350px;
      height: 20px;
      position: absolute;
      display: ; }
    #stability .sta_percent_circle_area .sta_percent_box:before {
      border-right: 1px solid #b2b2b2;
      border-top: 1px solid #b2b2b2;
      top: 0;
      right: 0; }
    #stability .sta_percent_circle_area .sta_percent_box:after {
      border-left: 1px solid #b2b2b2;
      border-bottom: 1px solid #b2b2b2;
      bottom: 0;
      left: 0; }
    #stability .sta_percent_circle_area .sta_percent_box .stability_percentage {
      font-size: 2.2em;
      padding-right: 50px; }
    #stability .sta_percent_circle_area .sta_percent_box .sta_percent_num {
      color: #3cabc1;
      font-size: 2.2em; }
    #stability .sta_percent_circle_area .sta_percent_box .sta_percent_num.big {
        font-size: 3.8em; }
    #stability .sta_percent_circle_area .sta_circle_inner {
      margin: 0 65px; }
    #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box {
      margin-bottom: 50px;
      position: relative; }
    #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box canvas {
      width: 150px;
      height: 150px; }
    #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .month {
      font-size: 1.0em; }
    #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .count {
      position: absolute;
      width: 80px;
      top: 85px;
      left: 0;
      right: 0;
      margin: 0 auto; }
    #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .stability_value {
      display: block;
      text-align: center;
      font-size: 1.6em;
      color: #666666; }
    #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .stability_value .stability_value_small {
      font-size: 18px; }

     /***過去の稼働率***/
    #stability .past_sta_area {
      padding: 70px 0 100px; }
      #stability .past_sta_area .past_sta_area_inner {
        max-width: 1000px;
        margin: 0 auto;
       }
        #stability .past_sta_area .past_sta_area_inner .past-stability-ttl {
          font-size: 2.7em;
          margin-bottom: 30px; }

         /***過去の稼働率テーブル***/
        #stability .past_sta_area .past_sta_area_inner .past-stability-table {
          width: 333px;
          margin: 0 auto; }
          #stability .past_sta_area .past_sta_area_inner .past-stability-table th, #stability .past_sta_area .past_sta_area_inner .past-stability-table td {
            font-size: 1.2em;
            padding: 2.2% 0;
            border-bottom: 1px solid #e0e0e0;
            text-align: center; }
          #stability .past_sta_area .past_sta_area_inner .past-stability-table th.thead-th {
            border-top: 1px solid #e0e0e0;
            background: #f5f0f0; }
          #stability .past_sta_area .past_sta_area_inner .past-stability-table .past-sta {
            display: inline-block;
            padding-left: 2em; }
          #stability .past_sta_area .past_sta_area_inner .past-stability-table .past-sta:not(.under100) {
            display: inline-block;
            padding-left: 3em; }

    /***過去の稼働率３列***/
    #stability .past_sta_area3 {
      padding: 70px 0 100px; }
      #stability .past_sta_area3 .past_sta_area_inner {
        max-width: 1000px;
        margin: 0 auto;
        /***過去の稼働率テーブル***/ }
        #stability .past_sta_area3 .past_sta_area_inner .past-stability-ttl {
          font-size: 2.7em;
          margin-bottom: 30px; }
        #stability .past_sta_area3 .past_sta_area_inner .past-stability-table {
          width: 333px; }
          #stability .past_sta_area3 .past_sta_area_inner .past-stability-table th, #stability .past_sta_area3 .past_sta_area_inner .past-stability-table td {
            font-size: 1.2em;
            padding: 2.2% 0;
            border-bottom: 1px solid #e0e0e0;
            text-align: center; }
          #stability .past_sta_area3 .past_sta_area_inner .past-stability-table th:not(.noBorder), #stability .past_sta_area3 .past_sta_area_inner .past-stability-table td:not(.noBorder) {
            border-right: 1px solid #e0e0e0; }
          #stability .past_sta_area3 .past_sta_area_inner .past-stability-table th.thead-th {
            border-top: 1px solid #e0e0e0;
            background: #f5f0f0; }
          #stability .past_sta_area3 .past_sta_area_inner table.past-stability-table {
              border-left: solid 1px #e0e0e0;
          }
          #stability .past_sta_area3 .past_sta_area_inner .past-stability-table .past-sta {
            display: inline-block;
            padding-left: 2em; }
          #stability .past_sta_area3 .past_sta_area_inner .past-stability-table .past-sta:not(.under100) {
            display: inline-block;
            padding-left: 3em; }
 }

/* tablet
12個並んだ時の円グラフの並び方スタイル
----------------------------------------------- */
@media print, screen and (min-width: 1030px) {
  #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box.show-for-middle {
    display: none; } }

@media print, screen and (min-widh: 741px) and (max-width: 1029px) {
  #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box.show-for-middle {
    display: block; 
  } 
  }

/* mobile
----------------------------------------------- */
@media print, screen and (max-width: 740px) {

    #stability .show-for-medium {
      display: none; }
    #stability .show-for-large {
      display: none; }

     /***flex-box***/
    #stability .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex; }
      #stability .flex.s-around {
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-justify-content: -webkit-space-around;
        justify-content: -webkit-space-around;
        justify-content: -moz-space-around;
        -ms-flex-pack: -ms-space-around;
        justify-content: -ms-space-around; }
      #stability .flex.s-between {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-justify-content: -webkit-space-between;
        justify-content: -webkit-space-between;
        justify-content: -moz-space-between;
        -ms-flex-pack: -ms-space-between;
        justify-content: -ms-space-between; }
      #stability .flex.center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-justify-content: -webkit-center;
        justify-content: -webkit-center;
        justify-content: -moz-center;
        -ms-flex-pack: -ms-center;
        justify-content: -ms-center; }
      #stability .flex.wrap {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap; }
      #stability .fs-16 {
        font-size: 1.3em;
        line-height: 1.4;
        padding-bottom: 23px;}
      #stability .sla_info {
        font-size: 12px;
        line-height: 1.4em;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        margin-top: -140px;
      }
      #stability .sla_info p:nth-child(2) {
        padding-bottom: 5px;
      }
      #stability .sla_info ul {
        padding-left: 27px;
        list-style: outside;
      }
      #stability .sla_info li {
        padding : 3px 0;
      }
    #stability .copy {
      padding: 55px 0 30px;
      max-width: 910px;
      margin: 0 25px; }
    #stability .copy p {
      font-size: 1.2em;
      line-height: 1.5; }
    #stability .sta_percent_circle_area {
      max-width: 1150px;
      padding: 50px 0;
      margin: 0 20px; }
    #stability .sta_percent_circle_area .year-ttl {
      font-size: 1.2em;
      margin-bottom: 30px; }
    #stability .sta_percent_circle_area .sta_percent_box {
      width: 280px;
      margin: 0 auto 30px;
      padding: 20px 0;
      position: relative; }
      #stability .sta_percent_circle_area .sta_percent_box:before, #stability .sta_percent_circle_area .sta_percent_box:after {
        content: '';
        width: 250px;
        height: 20px;
        position: absolute;
        display: inline-block; }
      #stability .sta_percent_circle_area .sta_percent_box:before {
        border-right: 1px solid #b2b2b2;
        border-top: 1px solid #b2b2b2;
        top: 0;
        right: 0; }
      #stability .sta_percent_circle_area .sta_percent_box:after {
        border-left: 1px solid #b2b2b2;
        border-bottom: 1px solid #b2b2b2;
        bottom: 0;
        left: 0; }
      #stability .sta_percent_circle_area .sta_percent_box .stability_percentage {
        font-size: 1.5em;
        padding-right: 50px; }
      #stability .sta_percent_circle_area .sta_percent_box .sta_percent_num {
        color: #3cabc1;
        font-size: 1.5em; }
      #stability .sta_percent_circle_area .sta_percent_box .sta_percent_num.big {
          font-size: 1.5em; }
      #stability .sta_percent_circle_area .sta_circle_inner {
        margin: 0 auto; }
      #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box {
        margin-bottom: 50px;
        width: 48%;
        position: relative; }
      #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box canvas {
        width: 150px;
        height: 150px; }
      #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .month {
        font-size: 1.1em; }
      #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .count {
        position: absolute;
        width: 137px;
        top: 50%;
        left: 0;
        right: 0;
        margin: 0 auto; }
      #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .stability_value {
        display: block;
        text-align: center;
        font-size: 2.2em;
        color: #666666; }
      #stability .sta_percent_circle_area .sta_circle_inner .sta_circle_box .stability_value .stability_value_small {
        font-size: 18px; }

      /***過去の稼働率***/
      #stability .past_sta_area {
        padding: 50px 0; }
        #stability .past_sta_area .past_sta_area_inner {
          max-width: 690px;
          margin: 0 25px;
          /***過去の稼働率テーブル***/ }
          #stability .past_sta_area .past_sta_area_inner .past-stability-ttl {
            font-size: 1.5em;
            margin-bottom: 30px; }
          #stability .past_sta_area .past_sta_area_inner .past-stability-table {
            width: 100%; }
            #stability .past_sta_area .past_sta_area_inner .past-stability-table th, #stability .past_sta_area .past_sta_area_inner .past-stability-table td {
              font-size: 1.2em;
              padding: 2.2% 0;
              border-bottom: 1px solid #e0e0e0;
              text-align: center; }
            #stability .past_sta_area .past_sta_area_inner .past-stability-table th.thead-th {
              border-top: 1px solid #e0e0e0;
              background: #f5f0f0; }
            #stability .past_sta_area .past_sta_area_inner .past-stability-table .past-sta {
              display: inline-block;
              padding-left: 2em; }
            #stability .past_sta_area .past_sta_area_inner .past-stability-table .past-sta:not(.under100) {
              display: inline-block;
              padding-left: 3em; }

      /***過去の稼働率3***/
      #stability .past_sta_area3 {
        padding: 50px 0; }
        #stability .past_sta_area3 .past_sta_area_inner {
          max-width: 690px;
          margin: 0 25px;
          /***過去の稼働率テーブル***/ }
          #stability .past_sta_area3 .past_sta_area_inner .past-stability-ttl {
            font-size: 1.5em;
            margin-bottom: 30px; }
          #stability .past_sta_area3 .past_sta_area_inner .past-stability-table {
            width: 100%; }
            #stability .past_sta_area3 .past_sta_area_inner .past-stability-table th, #stability .past_sta_area3 .past_sta_area_inner .past-stability-table td {
              font-size: 1.2em;
              padding: 2.2% 0;
              border-bottom: 1px solid #e0e0e0;
              text-align: center; }
            #stability .past_sta_area3 .past_sta_area_inner .past-stability-table th.thead-th {
              border-top: 1px solid #e0e0e0;
              background: #f5f0f0; }
            #stability .past_sta_area3 .past_sta_area_inner .past-stability-table .past-sta {
              display: inline-block;
              padding-left: 2em; }
            #stability .past_sta_area3 .past_sta_area_inner .past-stability-table .past-sta:not(.under100) {
              display: inline-block;
              padding-left: 3em; }
}
@media print, screen and (max-width: 1024px) and (min-width: 879px) {
  #stability .sla_info {
    margin-top: 1px;
  }
}