/*
 * Ron Elementor Custom Widgets - 共通CSS
 * 今後、他のカスタムウィジェット用スタイルもここに追記していきます。
 */

/* ============================
   カード比較表（参考サイト風＋列幅そろえ）
   ============================ */

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

/* テーブル本体 */
.ron-comparison-table {
    width: 100%;
    min-width: 760px;               /* 横スクロール前提で少し広め */
    border-collapse: separate;      /* separate + 右側ボーダー */
    border-spacing: 0;
    border-right: 1px solid #e7e7e7;
    font-size: 13px;
    background-color: #ffffff;
    table-layout: fixed;            /* ★各列の幅を均等にするために fixed を使用 */
}

/* ヘッダー行（8列すべて同じ幅） */
.ron-comparison-table thead th {
    background-color: #fcfdfd;                 /* やや白に近いグレー */
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    padding: 0 4px;
    height: 48px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;

    width: 12.5%;                 /* ★8列なので 100 / 8 = 12.5% で揃える */
}

/* ヘッダー右端に右ボーダー */
.ron-comparison-table thead th:last-child {
    border-right: 1px solid #e7e7e7;
}

/* 1列目（順位）ヘッダーも sticky にする場合 */
.ron-comparison-table .ron-col-rank {
    position: sticky;
    left: 0;
    z-index: 3;
}

/* ボディセル共通 */
.ron-comparison-table tbody td {
    border-bottom: 1px solid #e7e7e7;
    padding: 10px 12px;
    vertical-align: top;
    background-color: #fcfdfd;  /* 参考サイトと同系色 */
}

/* 偶数行でうっすら色を変える（ストライプ） */
.ron-comparison-table tbody tr:nth-child(even) td {
    background-color: #ffffff;
}

/* 左端（順位）列：sticky＋境界線 */
.ron-comparison-table .ron-cell-rank {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fcfdfd;
    border-left: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
    text-align: center;
    font-weight: 600;
}

/* 商品名セル */
.ron-comparison-table .ron-cell-product {
    text-align: left;
}

/* 画像セル */
.ron-comparison-table .ron-cell-image {
    text-align: center;
}

.ron-comparison-table .ron-cell-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* リンクセル */
.ron-comparison-table .ron-cell-link {
    text-align: center;
}

/* ポイント・詳細列のテキストを読みやすく */
.ron-comparison-table .ron-cell-point,
.ron-comparison-table .ron-cell-detail {
    line-height: 1.5;
    text-align: left;
}

/* 3行で省略（高さをある程度そろえる効果もあり） */
.ron-comparison-table .ron-cell-point,
.ron-comparison-table .ron-cell-detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 商品名・サブタイトル */
.ron-product-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.ron-product-sub {
    font-size: 12px;
    color: #666666;
}

/* ============================
   ボタン（参考サイトの色に寄せる）
   ============================ */

/* 公式サイトへ・申込みボタンなど */
.ron-table-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;                            /* 列いっぱいに表示 */
    min-height: 40px;

    padding: 12px 8px 16px;                 /* 上12 / 横8 / 下16 */

    background-color: #0eb03a;              /* グリーン系 */
    color: #ffffff;
    border-radius: 4px;
    border: none;

    box-shadow: inset 0px -4px 0px rgba(0,0,0,0.1); /* 下側に影 */

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* ホバー時 */
.ron-table-link:hover {
    background-color: #0a8f2e;
}

/* スコア列（おすすめスコア・こだわりスコア） */
.ron-comparison-table .ron-cell-recommend,
.ron-comparison-table .ron-cell-kodawari {
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .ron-comparison-table {
        font-size: 12px;
        min-width: 640px;
    }

    .ron-comparison-table thead th,
    .ron-comparison-table tbody td {
        padding: 8px;
    }

    .ron-table-link {
        font-size: 12px;
        padding: 10px 6px 12px;
    }
}