@charset "UTF-8";
/*
  /rakurakucloud/jugyoinportal/asset/css/object/module/m-compare.css
  比較表モジュール用CSS（SPは横スクロール、強調列あり）
*/
.m-compare__help-text {
  color: var(--rcloud-bg-main-02);
  font-weight: 700;
}
.m-compare__scroll {
  @media screen and (max-width: 600px) {
    margin: 5px 0 0;
    overflow-x: auto;
  }
}
.m-compare-table {
  width: 100%;
  background-color: var(--white);
  table-layout: fixed;
  @media screen and (max-width: 600px) {
    width: 800px;
  }
}
.m-compare-table__head-cell,
.m-compare-table__category,
.m-compare-table__data {
  padding: 10px 12px;
  border: 1px solid var(--gray-08);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
}
.m-compare-table__head-cell {
  font-weight: 500;
  background-color: var(--gray-bg-02);
  &.m-compare-table__head-cell--highlight {
    width: 22%;
    background-color: var(--rcloud-bg-main);
    color: var(--white);
  }
}
.m-compare-table__category {
  height: 67px;
  @media screen and (max-width: 600px) {
    height: 54px;
  }
}
/* アイソレーション込みの枠（PC 高さ60px／SP 高さ37px）に収まる高さ */
/* セルが狭い画面幅でも、ロゴがセルのpadding内に収まり罫線がアイソレーションに入らないようにする */
.m-compare-table__logo {
  width: auto;
  max-width: 100%;
  height: 36px;
  @media screen and (max-width: 600px) {
    height: 22px;
  }
  /* 楽楽自動応対：SVGの上下余白が少なく横長のため、枠（182×60px）に収まる高さに調整 */
  &.m-compare-table__logo--rjidootai {
    height: 32px;
    @media screen and (max-width: 600px) {
      height: 20px;
    }
  }
  /* 楽楽メールマーケティング：さらに横長のため、枠（223×45px）に収まる高さに調整 */
  &.m-compare-table__logo--rmailmarketing {
    height: 23px;
    @media screen and (max-width: 600px) {
      height: 14px;
    }
  }
}
.m-compare-table__data {
  &.m-compare-table__data--highlight {
    background-color: var(--rcloud-bg-sub-03);
    color: var(--rcloud-bg-main-02);
    font-size: 20px;
  }
}