@charset "utf-8";


/* -----------------------
   比較表
----------------------- */

.comparison-section{
    max-width:800px;
    margin:auto;
    padding:60px 10px 60px;
}

.comparison-section h2{
    text-align:center;
    color:#214776;
    margin-bottom:30px;
    font-weight:bold;
    font-size:clamp(22px,3vw,36px);
}

.comparison-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    background:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}




.comparison-table col:nth-child(1){
    width:37%;
}

.comparison-table col:nth-child(2),
.comparison-table col:nth-child(3),
.comparison-table col:nth-child(4){
    width:15%;
}

.comparison-table col:nth-child(5){
    width:18%;
}




.comparison-table th,
.comparison-table td{
    border:1px solid #ddd;
    text-align:center;
    vertical-align:middle;

    font-size:clamp(8px,1.2vw,16px);

    padding:
        clamp(4px,0.8vw,14px)
        clamp(2px,0.4vw,8px);

    word-break:break-word;
    line-height:1.4;
}

.comparison-table thead th{
    background:#214776;
    color:#fff;
    font-weight:bold;
}

.comparison-table tbody th{
    background:#f8f8f8;
    text-align:left;
    font-weight:bold;
}

.comparison-table small{
    display:block;
    margin-top:3px;
    color:#666;

    font-size:clamp(7px,0.9vw,13px);
}

.recommend{
    background:#eef8ff;
    font-weight:bold;
}

thead .recommend{
    background:#0d6efd;
    color:#fff;
}

.ok{
    color:red;
    font-weight:bold;
    font-size:clamp(12px,2vw,28px);
}

.ng{
    color:#888;
    font-weight:bold;
    font-size:clamp(12px,2vw,28px);
}

.triangle{
    color:#f5a000;
    font-weight:bold;
    font-size:clamp(12px,2vw,28px);
}

.comparison-table tbody tr:hover{
    background:#f8fbff;
}