/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 13 2026 | 02:04:24 */
@charset "UTF-8";

:root {
  --text: #333333;
  --white: #ffffff;
  --item-bg: #f8efd9;

  --our-head: #46a2b2;
  --our-bg: #e2f4f1;
  --our-line: #3ca1b1;
  --our-text: #00a5b5;

  --other-head: #aaaaaa;
  --other-bg: #f7f7f7;

  --grid: #ffffff;
}


/* =========================================
   基本設定
========================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;

  font-family: "Noto Sans JP", sans-serif;
  color: var(--text);
  background: #ffffff;
}


.comparison-table-wrap {
  width: 100%;
  overflow-x: auto;
}


.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;

  font-family: "Noto Sans JP", sans-serif;
}


/* =========================================
   PC カラム幅
========================================= */

.col-item {
  width: 18%;
}

.col-our {
  width: 41%;
}

.col-other {
  width: 41%;
}


/* =========================================
   共通セル
========================================= */

.comparison-table th,
.comparison-table td {
  border-right: 5px solid var(--grid);
  border-bottom: 5px solid var(--grid);
  vertical-align: middle;
}


/* 左端 */
.comparison-table tr > *:first-child {
  border-left: 5px solid var(--grid);
}


/* 上端 */
.comparison-table thead tr:first-child > * {
  border-top: 5px solid var(--grid);
}


/* =========================================
   ヘッダー
========================================= */

.comparison-table thead th {
  padding: 18px 12px;

  text-align: center;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
}


/* 左ヘッダー */
.head-item {
  background: var(--item-bg);
  color: var(--text);
}


/* 中央ヘッダー */
.head-our {
  background: var(--our-head);
  color: var(--white);

  border-left: 5px solid var(--our-line) !important;
  border-right: 5px solid var(--our-line) !important;
  border-top: 5px solid var(--our-line) !important;

  border-bottom: 0 !important;

  box-shadow: inset 0 -5px 0 #ffffff;
}


/* 右ヘッダー */
.head-other {
  background: var(--other-head);
  color: var(--white);
}


/* =========================================
   左列
========================================= */

.comparison-table tbody th {
  background: var(--item-bg);

  padding: 18px 12px;

  text-align: center;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}


/* =========================================
   中央列
========================================= */

.our-cell {
  background: var(--our-bg);

  text-align: center;

  padding: 16px 18px 18px;

  border-left: 5px solid var(--our-line) !important;
  border-right: 5px solid var(--our-line) !important;

  border-bottom: 0 !important;

  box-shadow: inset 0 -5px 0 #ffffff;
}


/* 中央列 最終行 */
.comparison-table tbody tr:last-child .our-cell {
  border-bottom: 5px solid var(--our-line) !important;
  box-shadow: none;
}


/* =========================================
   右列
========================================= */

.other-cell {
  background: var(--other-bg);

  text-align: center;

  padding: 16px 18px 18px;
}


/* =========================================
   ○ ◎ △
========================================= */

.rating {
  margin-bottom: 7px;
  line-height: 1;
}


.rating-circle,
.rating-double {
  color: var(--our-text);

  font-size: 39px;
  font-weight: 400;
}


.rating-triangle {
  color: #333333;

  font-size: 33px;
  font-weight: 400;
}


/* =========================================
   中央テキスト
========================================= */

.our-text {
  color: var(--our-text);

  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
}


/* =========================================
   右テキスト
========================================= */

.other-text {
  color: var(--text);

  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
}


/* =========================================
   スマホ
========================================= */

@media (max-width: 767px) {

  .comparison-table-wrap {
    overflow-x: visible;
  }


  /* -------------------------
     カラム幅
     添付デザインに合わせて
     中央の緑列を広く変更
  ------------------------- */

  .col-item {
    width: 20%;
  }

  .col-our {
    width: 40%;
  }

  .col-other {
    width: 40%;
  }


  /* 白い区切り */

  .comparison-table th,
  .comparison-table td {
    border-right-width: 3px;
    border-bottom-width: 3px;
  }


  .comparison-table tr > *:first-child {
    border-left-width: 3px;
  }


  .comparison-table thead tr:first-child > * {
    border-top-width: 3px;
  }


  /* ヘッダー */

  .comparison-table thead th {
    padding: 10px 5px;

    font-size: 11px;
    line-height: 1.45;
  }


  /* 中央ヘッダー */

  .head-our {
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-top-width: 3px !important;

    border-bottom: 0 !important;

    box-shadow: inset 0 -3px 0 #ffffff;
  }


  /* 左列 */

  .comparison-table tbody th {
    padding: 10px 4px;

    font-size: 11px;
    line-height: 1.45;
  }


  /* 中央列 */

  .our-cell {
    padding: 9px 6px 10px;

    border-left-width: 3px !important;
    border-right-width: 3px !important;

    border-bottom: 0 !important;

    box-shadow: inset 0 -3px 0 #ffffff;
  }


  /* 中央列最終行 */

  .comparison-table tbody tr:last-child .our-cell {
    border-bottom: 3px solid var(--our-line) !important;
    box-shadow: none;
  }


  /* 右列 */

  .other-cell {
    padding: 9px 5px 10px;
  }


  /* 記号 */

  .rating {
    margin-bottom: 4px;
  }


  .rating-circle,
  .rating-double {
    font-size: 24px;
  }


  .rating-triangle {
    font-size: 21px;
  }


  /* テキスト */

  .our-text {
    font-size: 11px;
    line-height: 1.45;
  }


  .other-text {
    font-size: 11px;
    line-height: 1.45;
  }
}


/* =========================================
   390px以下
========================================= */

@media (max-width: 390px) {

  .comparison-table thead th {
    font-size: 10px;
  }


  .comparison-table tbody th {
    font-size: 9px;
  }


  .our-text {
    font-size: 9px;
  }


  .other-text {
    font-size: 8.5px;
  }
}