<style type="text/css">


/* ========================================
   全体
======================================== */

.toryo {
    width:100%;
    margin:0;
    padding:0;
    text-align:left;
    box-sizing:border-box;
}


/* ========================================
   説明文
======================================== */

.toryo .text {
    font-weight:bold;
    color:#140847fb;
    font-size:small;
}


/* ========================================
   見出し
======================================== */

.toryo .title {
    margin-top:15px;
    margin-bottom:5px;
    text-align:left;
    font-size:large;
    font-weight:bold;
}


/* ========================================
   メーカー画像
======================================== */

.toryo .maker {
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    box-sizing:border-box;
}

.toryo .maker a {
    display:block;
    text-decoration:none;
}

.toryo .maker img {
    display:block;
    width:100%;
    height:auto;
    border:0;
}


/* ========================================
   カラーチャート表
======================================== */

.toryo .toryo-table {
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.toryo .toryo-table table {
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}


/* ========================================
   表の枠線
======================================== */

.toryo .toryo-table th,
.toryo .toryo-table td {
    border:1px solid #d3d3d3;
    padding:5px;
    box-sizing:border-box;
}


/* ========================================
   THEAD
   th・tdを約1.5倍の高さ
======================================== */

.toryo .toryo-table thead th,
.toryo .toryo-table thead td {
    height:1.5em;
    padding-top:10px;
    padding-bottom:10px;
    vertical-align:middle;
}


/* ========================================
   THEAD内のth
======================================== */

.toryo .toryo-table thead th {
    text-align:left;
    font-size:large;
    font-weight:bold;
    color:#fff;
    background:#191970;
}


/* ========================================
   THEAD内のtd
======================================== */

.toryo .toryo-table thead td {
    background:#e6eaf3;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:break-word;
}


/* ========================================
   TBODY
   データ行は元の高さ
   背景なし・太字なし
======================================== */

.toryo .toryo-table tbody td {
    background:none;
    font-weight:normal;
    text-align:center;
    vertical-align:middle;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:break-word;
    padding-top:5px;
    padding-bottom:5px;
}


/* 左から2番目のセル
   左寄せ・改行なし */

.toryo .toryo-table tbody td:nth-child(2) {
    text-align:left;
    white-space:nowrap;
}


/* ========================================
   色見本画像
======================================== */

.toryo .toryo-table tbody td img {
    width:50px;
    max-width:50px;
    height:auto;
    display:block;
    margin:0 auto;
}


/* ========================================
   表内リンク
======================================== */

.toryo .toryo-table a {
    text-decoration:none;
}


/* ========================================
   右3セルのリンク
   赤文字＋下線
======================================== */

.toryo .toryo-table tbody td:nth-child(5) a,
.toryo .toryo-table tbody td:nth-child(6) a,
.toryo .toryo-table tbody td:nth-child(7) a {
    color:red;
    text-decoration:underline;
}


/* ========================================
   ページトップ
======================================== */

.toryo .top {
    margin-top:2px;
    margin-bottom:5px;
    text-align:right;
    font-size:small;
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width:767px) {

    /* メーカー画像：2列 */

    .toryo .maker {
        grid-template-columns:repeat(2,1fr);
        gap:5px;
    }


    /* 表の基本余白 */

    .toryo .toryo-table th,
    .toryo .toryo-table td {
        padding:4px;
    }


    /* THEAD */

    .toryo .toryo-table thead th,
    .toryo .toryo-table thead td {
        padding-top:10px;
        padding-bottom:10px;
        vertical-align:middle;
    }


    /* TBODY */

    .toryo .toryo-table tbody td {
        padding-top:4px;
        padding-bottom:4px;
    }


    /* 色見本 */

    .toryo .toryo-table tbody td img {
        width:30px;
        max-width:30px;
    }
}


</style>