@charset 'UTF-8';

/*グリーンのテーブル*/
.kn-tbl-g {
  width: 100%;
  margin: 1.5em 0 0;
  border-collapse: collapse;
  background-color: #fff;
}

.kn-tbl-g:first-child {
  margin-top: 0;
}

.kn-tbl-g>thead>tr>th,.kn-tbl-g>tbody>tr>th,.kn-tbl-g>tbody>tr>td {
  line-height: 1.7;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #d1f0b5;
}

.kn-tbl-g>colgroup.-purple,.kn-tbl-g>colgroup>col.-purple,.kn-tbl-g>thead>tr.-purple,.kn-tbl-g>tbody>tr.-purple,.kn-tbl-g>tbody>tr>td.-purple {
  background-color: #f5ffeb;
}

.kn-tbl-g>colgroup.-bluegreen,.kn-tbl-g>colgroup>col.-bluegreen,.kn-tbl-g>thead>tr.-bluegreen,.kn-tbl-g>tbody>tr.-bluegreen,.kn-tbl-g>tbody>tr>td.-bluegreen {
  background-color: #e9f7fa;
}

.kn-tbl-g>colgroup.-green,.kn-tbl-g>colgroup>col.-green,.kn-tbl-g>thead>tr.-green,.kn-tbl-g>tbody>tr.-green,.kn-tbl-g>tbody>tr>td.-green {
  background-color: #f5ffeb;
}

.kn-tbl-g>colgroup.-pink,.kn-tbl-g>colgroup>col.-pink,.kn-tbl-g>thead>tr.-pink,.kn-tbl-g>tbody>tr.-pink,.kn-tbl-g>tbody>tr>td.-pink {
  background-color: #fff3f5;
}

.kn-tbl-g>colgroup.-orange,.kn-tbl-g>colgroup>col.-orange,.kn-tbl-g>thead>tr.-orange,.kn-tbl-g>tbody>tr.-orange,.kn-tbl-g>tbody>tr>td.-orange {
  background-color: #fff1e8;
}

.kn-tbl-g>colgroup.-hilight,.kn-tbl-g>colgroup>col.-hilight,.kn-tbl-g>thead>tr.-hilight,.kn-tbl-g>tbody>tr.-hilight,.kn-tbl-g>tbody>tr>td.-hilight {
  background-color: #ffdc57;
}

.kn-tbl-g>thead>tr>th.-purple,.kn-tbl-g>tbody>tr>th.-purple {
  background-color: #f5ffeb!important;
}

.kn-tbl-g>thead>tr>th.-bluegreen,.kn-tbl-g>tbody>tr>th.-bluegreen {
  background-color: #e9f7fa!important;
}

.kn-tbl-g>thead>tr>th.-green,.kn-tbl-g>tbody>tr>th.-green {
  background-color: #f5ffeb!important;
}

.kn-tbl-g>thead>tr>th.-pink,.kn-tbl-g>tbody>tr>th.-pink {
  background-color: #fff3f5!important;
}

.kn-tbl-g>thead>tr>th.-orange,.kn-tbl-g>tbody>tr>th.-orange {
  background-color: #fff1e8!important;
}

.kn-tbl-g>thead>tr>th.-hilight,.kn-tbl-g>tbody>tr>th.-hilight {
  background-color: #ffdc57!important;
}

.kn-tbl-g>thead>tr.-purple>th,.kn-tbl-g>thead>tr.-bluegreen>th,.kn-tbl-g>thead>tr.-green>th,.kn-tbl-g>thead>tr.-pink>th,.kn-tbl-g>thead>tr.-orange>th,.kn-tbl-g>thead>tr.-hilight>th,.kn-tbl-g>tbody>tr.-purple>th,.kn-tbl-g>tbody>tr.-bluegreen>th,.kn-tbl-g>tbody>tr.-green>th,.kn-tbl-g>tbody>tr.-pink>th,.kn-tbl-g>tbody>tr.-orange>th,.kn-tbl-g>tbody>tr.-hilight>th {
  background-color: transparent;
}

.kn-tbl-g>thead>tr>th {
  text-align: center;
  color: #fff;
  background-color: #61a624;
}

.kn-tbl-g>tbody>tr>th {
  font-weight: 400;
  background-color: #f5ffeb;
}

.kn-tbl-g>caption {
  line-height: 1.7;
  margin-bottom: 5px;
  text-align: left;
}

.kn-tbl-g>caption.title {
  font-size: .16rem;
  font-weight: 700;
  line-height: 1.6125;
}

.kn-tbl-g>caption.note {
  text-align: right;
}

.kn-tbl-g>caption.-bottom {
  margin: 10px 0 0;
  caption-side: bottom;
}

.kn-tbl-g.-middle td,.kn-tbl-g.-middle th {
  vertical-align: middle;
}

.kn-tbl-g+.-tablecaption {
  margin-top: .5em;
}

.kn-tbl-g.-stripe>tbody>tr:nth-child(even) {
  background-color: #f5ffeb;
}

.kn-tbl-g.-stripe>tbody>tr>th {
  background-color: transparent;
}

.kn-tbl-g-wrapper {
  position: relative;
  margin: 1.5em 0 0;
}

.kn-tbl-g-wrapper:first-child {
  margin-top: 0;
}

.kn-tbl-g-wrapper.-scrolling .kn-scroll-block>.control.-next {
  display: none;
}

.kn-tbl-g-wrapper.-scrolling-end .kn-scroll-block>.control.-prev {
  display: block;
}

.kn-tbl-g-wrapper .kn-tbl-g {
  margin: 0;
}

  .kn-tbl-g-wrapper .kn-scroll-block>.control {
    display: none;
  }

/*ピンクのテーブル*/
.kn-tbl-p {
  width: 100%;
  margin: 1.5em 0 0;
  border-collapse: collapse;
  background-color: #fff;
}

.kn-tbl-p:first-child {
  margin-top: 0;
}

.kn-tbl-p>thead>tr>th,.kn-tbl-p>tbody>tr>th,.kn-tbl-p>tbody>tr>td {
  line-height: 1.7;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #f8cfd3;
}

.kn-tbl-p>colgroup.-purple,.kn-tbl-p>colgroup>col.-purple,.kn-tbl-p>thead>tr.-purple,.kn-tbl-p>tbody>tr.-purple,.kn-tbl-p>tbody>tr>td.-purple {
  background-color: #fff3f5;
}

.kn-tbl-p>colgroup.-bluegreen,.kn-tbl-p>colgroup>col.-bluegreen,.kn-tbl-p>thead>tr.-bluegreen,.kn-tbl-p>tbody>tr.-bluegreen,.kn-tbl-p>tbody>tr>td.-bluegreen {
  background-color: #e9f7fa;
}

.kn-tbl-p>colgroup.-green,.kn-tbl-p>colgroup>col.-green,.kn-tbl-p>thead>tr.-green,.kn-tbl-p>tbody>tr.-green,.kn-tbl-p>tbody>tr>td.-green {
  background-color: #fff3f5;
}

.kn-tbl-p>colgroup.-pink,.kn-tbl-p>colgroup>col.-pink,.kn-tbl-p>thead>tr.-pink,.kn-tbl-p>tbody>tr.-pink,.kn-tbl-p>tbody>tr>td.-pink {
  background-color: #fff3f5;
}

.kn-tbl-p>colgroup.-orange,.kn-tbl-p>colgroup>col.-orange,.kn-tbl-p>thead>tr.-orange,.kn-tbl-p>tbody>tr.-orange,.kn-tbl-p>tbody>tr>td.-orange {
  background-color: #fff1e8;
}

.kn-tbl-p>colgroup.-hilight,.kn-tbl-p>colgroup>col.-hilight,.kn-tbl-p>thead>tr.-hilight,.kn-tbl-p>tbody>tr.-hilight,.kn-tbl-p>tbody>tr>td.-hilight {
  background-color: #ffdc57;
}

.kn-tbl-p>thead>tr>th.-purple,.kn-tbl-p>tbody>tr>th.-purple {
  background-color: #fff3f5!important;
}

.kn-tbl-p>thead>tr>th.-bluegreen,.kn-tbl-p>tbody>tr>th.-bluegreen {
  background-color: #e9f7fa!important;
}

.kn-tbl-p>thead>tr>th.-green,.kn-tbl-p>tbody>tr>th.-green {
  background-color: #fff3f5!important;
}

.kn-tbl-p>thead>tr>th.-pink,.kn-tbl-p>tbody>tr>th.-pink {
  background-color: #fff3f5!important;
}

.kn-tbl-p>thead>tr>th.-orange,.kn-tbl-p>tbody>tr>th.-orange {
  background-color: #fff1e8!important;
}

.kn-tbl-p>thead>tr>th.-hilight,.kn-tbl-p>tbody>tr>th.-hilight {
  background-color: #ffdc57!important;
}

.kn-tbl-p>thead>tr.-purple>th,.kn-tbl-p>thead>tr.-bluegreen>th,.kn-tbl-p>thead>tr.-green>th,.kn-tbl-p>thead>tr.-pink>th,.kn-tbl-p>thead>tr.-orange>th,.kn-tbl-p>thead>tr.-hilight>th,.kn-tbl-p>tbody>tr.-purple>th,.kn-tbl-p>tbody>tr.-bluegreen>th,.kn-tbl-p>tbody>tr.-green>th,.kn-tbl-p>tbody>tr.-pink>th,.kn-tbl-p>tbody>tr.-orange>th,.kn-tbl-p>tbody>tr.-hilight>th {
  background-color: transparent;
}

.kn-tbl-p>thead>tr>th {
  text-align: center;
  color: #fff;
  background-color: #e86875;
}

.kn-tbl-p>tbody>tr>th {
  font-weight: 400;
  background-color: #fff3f5;
}

.kn-tbl-p>caption {
  line-height: 1.7;
  margin-bottom: 5px;
  text-align: left;
}

.kn-tbl-p>caption.title {
  font-size: .16rem;
  font-weight: 700;
  line-height: 1.6125;
}

.kn-tbl-p>caption.note {
  text-align: right;
}

.kn-tbl-p>caption.-bottom {
  margin: 10px 0 0;
  caption-side: bottom;
}

.kn-tbl-p.-middle td,.kn-tbl-p.-middle th {
  vertical-align: middle;
}

.kn-tbl-p+.-tablecaption {
  margin-top: .5em;
}

.kn-tbl-p.-stripe>tbody>tr:nth-child(even) {
  background-color: #fff3f5;
}

.kn-tbl-p.-stripe>tbody>tr>th {
  background-color: transparent;
}

.kn-tbl-p-wrapper {
  position: relative;
  margin: 1.5em 0 0;
}

.kn-tbl-p-wrapper:first-child {
  margin-top: 0;
}

.kn-tbl-p-wrapper.-scrolling .kn-scroll-block>.control.-next {
  display: none;
}

.kn-tbl-p-wrapper.-scrolling-end .kn-scroll-block>.control.-prev {
  display: block;
}

.kn-tbl-p-wrapper .kn-tbl-p {
  margin: 0;
}

  .kn-tbl-p-wrapper .kn-scroll-block>.control {
    display: none;
  }


/*オレンジのテーブル*/
.kn-tbl-o {
  width: 100%;
  margin: 1.5em 0 0;
  border-collapse: collapse;
  background-color: #fff;
}

.kn-tbl-o:first-child {
  margin-top: 0;
}

.kn-tbl-o>thead>tr>th,.kn-tbl-o>tbody>tr>th,.kn-tbl-o>tbody>tr>td {
  line-height: 1.7;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #ffdbc3;
}

.kn-tbl-o>colgroup.-purple,.kn-tbl-o>colgroup>col.-purple,.kn-tbl-o>thead>tr.-purple,.kn-tbl-o>tbody>tr.-purple,.kn-tbl-o>tbody>tr>td.-purple {
  background-color: #fff1e8;
}

.kn-tbl-o>colgroup.-bluegreen,.kn-tbl-o>colgroup>col.-bluegreen,.kn-tbl-o>thead>tr.-bluegreen,.kn-tbl-o>tbody>tr.-bluegreen,.kn-tbl-o>tbody>tr>td.-bluegreen {
  background-color: #e9f7fa;
}

.kn-tbl-o>colgroup.-green,.kn-tbl-o>colgroup>col.-green,.kn-tbl-o>thead>tr.-green,.kn-tbl-o>tbody>tr.-green,.kn-tbl-o>tbody>tr>td.-green {
  background-color: #fff1e8;
}

.kn-tbl-o>colgroup.-pink,.kn-tbl-o>colgroup>col.-pink,.kn-tbl-o>thead>tr.-pink,.kn-tbl-o>tbody>tr.-pink,.kn-tbl-o>tbody>tr>td.-pink {
  background-color: #fff3f5;
}

.kn-tbl-o>colgroup.-orange,.kn-tbl-o>colgroup>col.-orange,.kn-tbl-o>thead>tr.-orange,.kn-tbl-o>tbody>tr.-orange,.kn-tbl-o>tbody>tr>td.-orange {
  background-color: #fff1e8;
}

.kn-tbl-o>colgroup.-hilight,.kn-tbl-o>colgroup>col.-hilight,.kn-tbl-o>thead>tr.-hilight,.kn-tbl-o>tbody>tr.-hilight,.kn-tbl-o>tbody>tr>td.-hilight {
  background-color: #ffdc57;
}

.kn-tbl-o>thead>tr>th.-purple,.kn-tbl-o>tbody>tr>th.-purple {
  background-color: #fff1e8!important;
}

.kn-tbl-o>thead>tr>th.-bluegreen,.kn-tbl-o>tbody>tr>th.-bluegreen {
  background-color: #e9f7fa!important;
}

.kn-tbl-o>thead>tr>th.-green,.kn-tbl-o>tbody>tr>th.-green {
  background-color: #fff1e8!important;
}

.kn-tbl-o>thead>tr>th.-pink,.kn-tbl-o>tbody>tr>th.-pink {
  background-color: #fff3f5!important;
}

.kn-tbl-o>thead>tr>th.-orange,.kn-tbl-o>tbody>tr>th.-orange {
  background-color: #fff1e8!important;
}

.kn-tbl-o>thead>tr>th.-hilight,.kn-tbl-o>tbody>tr>th.-hilight {
  background-color: #ffdc57!important;
}

.kn-tbl-o>thead>tr.-purple>th,.kn-tbl-o>thead>tr.-bluegreen>th,.kn-tbl-o>thead>tr.-green>th,.kn-tbl-o>thead>tr.-pink>th,.kn-tbl-o>thead>tr.-orange>th,.kn-tbl-o>thead>tr.-hilight>th,.kn-tbl-o>tbody>tr.-purple>th,.kn-tbl-o>tbody>tr.-bluegreen>th,.kn-tbl-o>tbody>tr.-green>th,.kn-tbl-o>tbody>tr.-pink>th,.kn-tbl-o>tbody>tr.-orange>th,.kn-tbl-o>tbody>tr.-hilight>th {
  background-color: transparent;
}

.kn-tbl-o>thead>tr>th {
  text-align: center;
  color: #fff;
  background-color: #ff6e0c;
}

.kn-tbl-o>tbody>tr>th {
  font-weight: 400;
  background-color: #fff1e8;
}

.kn-tbl-o>caption {
  line-height: 1.7;
  margin-bottom: 5px;
  text-align: left;
}

.kn-tbl-o>caption.title {
  font-size: .16rem;
  font-weight: 700;
  line-height: 1.6125;
}

.kn-tbl-o>caption.note {
  text-align: right;
}

.kn-tbl-o>caption.-bottom {
  margin: 10px 0 0;
  caption-side: bottom;
}

.kn-tbl-o.-middle td,.kn-tbl-o.-middle th {
  vertical-align: middle;
}

.kn-tbl-o+.-tablecaption {
  margin-top: .5em;
}

.kn-tbl-o.-stripe>tbody>tr:nth-child(even) {
  background-color: #fff1e8;
}

.kn-tbl-o.-stripe>tbody>tr>th {
  background-color: transparent;
}

.kn-tbl-o-wrapper {
  position: relative;
  margin: 1.5em 0 0;
}

.kn-tbl-o-wrapper:first-child {
  margin-top: 0;
}

.kn-tbl-o-wrapper.-scrolling .kn-scroll-block>.control.-next {
  display: none;
}

.kn-tbl-o-wrapper.-scrolling-end .kn-scroll-block>.control.-prev {
  display: block;
}

.kn-tbl-o-wrapper .kn-tbl-o {
  margin: 0;
}

  .kn-tbl-o-wrapper .kn-scroll-block>.control {
    display: none;
  }


@media screen and (max-width:767px) {
  body {
    min-width: 320px;
  }

/*グリーンのテーブル*/
  .kn-tbl-g.-transform {
    display: block;
    border-bottom: 1px solid #d1f0b5;
  }

  .kn-tbl-g.-transform>thead {
    display: none;
  }

  .kn-tbl-g.-transform>caption,.kn-tbl-g.-transform>tbody,.kn-tbl-g.-transform>tbody>tr,.kn-tbl-g.-transform>tbody>tr>th,.kn-tbl-g.-transform>tbody>tr>td {
    display: block;
  }

  .kn-tbl-g.-transform>tbody>tr>th[data-label],.kn-tbl-g.-transform>tbody>tr>td[data-label] {
    background-color: #fff;
  }

  .kn-tbl-g.-transform>tbody>tr>th[data-label]:before,.kn-tbl-g.-transform>tbody>tr>td[data-label]:before {
    font-weight: 700;
    display: block;
    margin: -8px -10px 8px;
    padding: inherit;
    content: attr(data-label);
    text-align: center;
    color: #fff;
    background-color: #61a624;
  }

  .kn-tbl-g.-transform>tbody>tr>* {
    border-bottom: 0;
  }

  .kn-tbl-g.-transform.-b>tbody>tr>[data-label] {
    position: relative;
    display: table;
    width: 100%;
    padding: 0;
    border-spacing: 8px 10px;
    border-collapse: separate;
    background-image: linear-gradient(to right,#f5ffeb 0,#f5ffeb 50%,transparent 50%);
    background-size: 100% calc(100%);
  }

  .kn-tbl-g.-transform.-b>tbody>tr>[data-label]:before {
    font-weight: 400;
    position: relative;
    z-index: 1;
    display: table-cell;
    width: 51.25%;
    padding-right: 10px;
    content: attr(data-label);
    text-align: left;
    vertical-align: top;
    color: #fff;
    color: #333;
    border-right: none;
    background: none;
  }

  .kn-tbl-g.-transform.-b>tbody>tr>[data-label]:after {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 50%;
    content: '';
    border-right: 1px solid #d1f0b5;
  }

  .kn-tbl-g.-transform.-b>tbody>tr>th[data-label] {
    border-top: 2px solid #61a624;
  }

  .kn-tbl-g.-transform.-b>tbody>tr>th:not([data-label]) {
    font-weight: 700;
    width: auto;
    text-align: left!important;
    color: #fff;
    background-color: #61a624;
  }

  .kn-tbl-g.-transform.-b>tbody>tr>td {
    width: 100%;
  }

  .kn-tbl-g-wrapper .kn-scroll-block>.control {
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 40px;
    cursor: pointer;
  }

  .kn-tbl-g-wrapper .kn-scroll-block>.control:after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    content: '';
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #61a624;
  }

  .kn-tbl-g-wrapper .kn-scroll-block>.control.-prev {
    left: 0;
    display: none;
    background-image: linear-gradient(to left,transparent,rgba(51,51,51,.25));
  }

  .kn-tbl-g-wrapper .kn-scroll-block>.control.-prev:after {
    left: 15px;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }

  .kn-tbl-g-wrapper .kn-scroll-block>.control.-next {
    right: 0;
    background-image: linear-gradient(to right,transparent,rgba(51,51,51,.25));
  }

  .kn-tbl-g-wrapper .kn-scroll-block>.control.-next:after {
    right: 15px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  .kn-tbl-g-wrapper .kn-tbl-g {
    width: 200%;
  }

/*ピンクのテーブル*/
  .kn-tbl-p.-transform {
    display: block;
    border-bottom: 1px solid #f8cfbd;
  }

  .kn-tbl-p.-transform>thead {
    display: none;
  }

  .kn-tbl-p.-transform>caption,.kn-tbl-p.-transform>tbody,.kn-tbl-p.-transform>tbody>tr,.kn-tbl-p.-transform>tbody>tr>th,.kn-tbl-p.-transform>tbody>tr>td {
    display: block;
  }

  .kn-tbl-p.-transform>tbody>tr>th[data-label],.kn-tbl-p.-transform>tbody>tr>td[data-label] {
    background-color: #fff;
  }

  .kn-tbl-p.-transform>tbody>tr>th[data-label]:before,.kn-tbl-p.-transform>tbody>tr>td[data-label]:before {
    font-weight: 700;
    display: block;
    margin: -8px -10px 8px;
    padding: inherit;
    content: attr(data-label);
    text-align: center;
    color: #fff;
    background-color: #e86875;
  }

  .kn-tbl-p.-transform>tbody>tr>* {
    border-bottom: 0;
  }

  .kn-tbl-p.-transform.-b>tbody>tr>[data-label] {
    position: relative;
    display: table;
    width: 100%;
    padding: 0;
    border-spacing: 8px 10px;
    border-collapse: separate;
    background-image: linear-gradient(to right,#fff3f5 0,#fff3f5 50%,transparent 50%);
    background-size: 100% calc(100%);
  }

  .kn-tbl-p.-transform.-b>tbody>tr>[data-label]:before {
    font-weight: 400;
    position: relative;
    z-index: 1;
    display: table-cell;
    width: 51.25%;
    padding-right: 10px;
    content: attr(data-label);
    text-align: left;
    vertical-align: top;
    color: #fff;
    color: #333;
    border-right: none;
    background: none;
  }

  .kn-tbl-p.-transform.-b>tbody>tr>[data-label]:after {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 50%;
    content: '';
    border-right: 1px solid #f8cfbd;
  }

  .kn-tbl-p.-transform.-b>tbody>tr>th[data-label] {
    border-top: 2px solid #e86875;
  }

  .kn-tbl-p.-transform.-b>tbody>tr>th:not([data-label]) {
    font-weight: 700;
    width: auto;
    text-align: left!important;
    color: #fff;
    background-color: #e86875;
  }

  .kn-tbl-p.-transform.-b>tbody>tr>td {
    width: 100%;
  }

  .kn-tbl-p-wrapper .kn-scroll-block>.control {
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 40px;
    cursor: pointer;
  }

  .kn-tbl-p-wrapper .kn-scroll-block>.control:after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    content: '';
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #e86875;
  }

  .kn-tbl-p-wrapper .kn-scroll-block>.control.-prev {
    left: 0;
    display: none;
    background-image: linear-gradient(to left,transparent,rgba(51,51,51,.25));
  }

  .kn-tbl-p-wrapper .kn-scroll-block>.control.-prev:after {
    left: 15px;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }

  .kn-tbl-p-wrapper .kn-scroll-block>.control.-next {
    right: 0;
    background-image: linear-gradient(to right,transparent,rgba(51,51,51,.25));
  }

  .kn-tbl-p-wrapper .kn-scroll-block>.control.-next:after {
    right: 15px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  .kn-tbl-p-wrapper .kn-tbl-p {
    width: 200%;
  }


/*オレンジのテーブル*/
  .kn-tbl-o.-transform {
    display: block;
    border-bottom: 1px solid #ffdbc3;
  }

  .kn-tbl-o.-transform>thead {
    display: none;
  }

  .kn-tbl-o.-transform>caption,.kn-tbl-o.-transform>tbody,.kn-tbl-o.-transform>tbody>tr,.kn-tbl-o.-transform>tbody>tr>th,.kn-tbl-o.-transform>tbody>tr>td {
    display: block;
  }

  .kn-tbl-o.-transform>tbody>tr>th[data-label],.kn-tbl-o.-transform>tbody>tr>td[data-label] {
    background-color: #fff;
  }

  .kn-tbl-o.-transform>tbody>tr>th[data-label]:before,.kn-tbl-o.-transform>tbody>tr>td[data-label]:before {
    font-weight: 700;
    display: block;
    margin: -8px -10px 8px;
    padding: inherit;
    content: attr(data-label);
    text-align: center;
    color: #fff;
    background-color: #ff6e0c;
  }

  .kn-tbl-o.-transform>tbody>tr>* {
    border-bottom: 0;
  }

  .kn-tbl-o.-transform.-b>tbody>tr>[data-label] {
    position: relative;
    display: table;
    width: 100%;
    padding: 0;
    border-spacing: 8px 10px;
    border-collapse: separate;
    background-image: linear-gradient(to right,#fff1e8 0,#fff1e8 50%,transparent 50%);
    background-size: 100% calc(100%);
  }

  .kn-tbl-o.-transform.-b>tbody>tr>[data-label]:before {
    font-weight: 400;
    position: relative;
    z-index: 1;
    display: table-cell;
    width: 51.25%;
    padding-right: 10px;
    content: attr(data-label);
    text-align: left;
    vertical-align: top;
    color: #fff;
    color: #333;
    border-right: none;
    background: none;
  }

  .kn-tbl-o.-transform.-b>tbody>tr>[data-label]:after {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 50%;
    content: '';
    border-right: 1px solid #ffdbc3;
  }

  .kn-tbl-o.-transform.-b>tbody>tr>th[data-label] {
    border-top: 2px solid #ff6e0c;
  }

  .kn-tbl-o.-transform.-b>tbody>tr>th:not([data-label]) {
    font-weight: 700;
    width: auto;
    text-align: left!important;
    color: #fff;
    background-color: #ff6e0c;
  }

  .kn-tbl-o.-transform.-b>tbody>tr>td {
    width: 100%;
  }

  .kn-tbl-o-wrapper .kn-scroll-block>.control {
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 40px;
    cursor: pointer;
  }

  .kn-tbl-o-wrapper .kn-scroll-block>.control:after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    content: '';
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #ff6e0c;
  }

  .kn-tbl-o-wrapper .kn-scroll-block>.control.-prev {
    left: 0;
    display: none;
    background-image: linear-gradient(to left,transparent,rgba(51,51,51,.25));
  }

  .kn-tbl-o-wrapper .kn-scroll-block>.control.-prev:after {
    left: 15px;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }

  .kn-tbl-o-wrapper .kn-scroll-block>.control.-next {
    right: 0;
    background-image: linear-gradient(to right,transparent,rgba(51,51,51,.25));
  }

  .kn-tbl-o-wrapper .kn-scroll-block>.control.-next:after {
    right: 15px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  .kn-tbl-o-wrapper .kn-tbl-o {
    width: 200%;
  }
}

@media screen and (max-width:767px) and (max-width:767px) {
  .kn-grid.-columnreverse-sp>[class*=col-]-sp {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

/*グリーンのテーブル*/
  .kn-tbl-g.-transform.-b.-th-s-sp>tbody>tr>[data-label] {
    background-image: linear-gradient(to right,#f5ffeb 0,#f5ffeb 33.33333%,transparent 33.33333%);
  }

  .kn-tbl-g.-transform.-b.-th-s-sp>tbody>tr>[data-label]:before {
    width: 34.58333%;
  }

  .kn-tbl-g.-transform.-b.-th-s-sp>tbody>tr>[data-label]:after {
    width: 33.33333%;
  }

/*ピンクのテーブル*/
  .kn-tbl-p.-transform.-b.-th-s-sp>tbody>tr>[data-label] {
    background-image: linear-gradient(to right,#fff3f5 0,#fff3f5 33.33333%,transparent 33.33333%);
  }

  .kn-tbl-p.-transform.-b.-th-s-sp>tbody>tr>[data-label]:before {
    width: 34.58333%;
  }

  .kn-tbl-p.-transform.-b.-th-s-sp>tbody>tr>[data-label]:after {
    width: 33.33333%;
  }


/*オレンジのテーブル*/
  .kn-tbl-o.-transform.-b.-th-s-sp>tbody>tr>[data-label] {
    background-image: linear-gradient(to right,#fff1e8 0,#fff1e8 33.33333%,transparent 33.33333%);
  }

  .kn-tbl-o.-transform.-b.-th-s-sp>tbody>tr>[data-label]:before {
    width: 34.58333%;
  }

  .kn-tbl-o.-transform.-b.-th-s-sp>tbody>tr>[data-label]:after {
    width: 33.33333%;
  }
}
