/* =========================================================
   1. 運搬機コンテンツ全体（cssは草刈り機と同じ
   ========================================================= */

.unpan-content {
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    margin: 0;
}


/* =========================================================
   2. 運搬機用タイトル
   ★幅から探す
   ★メーカーから探す
   ========================================================= */

.unpan-content .unpan-title {
    width: 100%;
    box-sizing: border-box;

    font-size: large;
    line-height: 1.5;

    color: #000;

    border-bottom: 3px solid #000;

    padding-bottom: 5px;

    margin-top: 10px;
    margin-bottom: 10px;

    scroll-margin-top: 150px;
}


/* =========================================================
   3. メーカー名・幅タイトル
   ========================================================= */

.unpan-content .unpan-maker {
    width: 100%;
    box-sizing: border-box;

    font-size: large;
    line-height: 1.5;

    color: #000;

    border-bottom: 1px solid #000;

    padding-bottom: 5px;

    margin-top: 15px;
    margin-bottom: 10px;

    scroll-margin-top: 150px;
}



/* =========================================================
   5. 運搬機テーブル
   PC：最大700px
   ========================================================= */

.unpan-content .unpan-table {
    width: 100%;
    max-width: 700px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* テーブル本体 */

.unpan-content .unpan-table table {
    width: 100%;
    max-width: 700px;

    margin: 0;
    padding: 0;

    border-collapse: collapse;
    border-spacing: 0;

    table-layout: auto;

    box-sizing: border-box;
}


/* =========================================================
   6. テーブル
   枠とセルの間をグレーの細い線
   テキストは折り返す
   ========================================================= */

.unpan-content .unpan-table th,
.unpan-content .unpan-table td {
    border: 1px solid #ccc;

    padding: 6px 5px;

    vertical-align: middle;

    white-space: normal;

    overflow-wrap: break-word;
    word-wrap: break-word;

    box-sizing: border-box;
}


/* =========================================================
   7. thead
   背景：#000080
   文字：白
   ========================================================= */

.unpan-content .unpan-table thead th {
    background-color: #0b308e;
    color: #fff;

    text-align: center;

    font-weight: bold;

    white-space: normal;

    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* =========================================================
   8. tbody
   一番左のセルだけ左寄せ
   ========================================================= */

.unpan-content .unpan-table tbody td:first-child {
    text-align: left;
}


/* =========================================================
   9. tbody
   左端以外は中央寄せ
   ========================================================= */

.unpan-content .unpan-table tbody td:not(:first-child) {
    text-align: center;
}


/* =========================================================
   10. 表内リンク
   長い文字も折り返す
   ========================================================= */

.unpan-content .unpan-table td a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* =========================================================
   11. メーカー画像
   PC：4列
   ========================================================= */

.unpan-content .unpan-img {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* HTML内にある <br> を無効化 */

.unpan-content .unpan-img br {
    display: none;
}


/* メーカー画像のリンク */

.unpan-content .unpan-img a {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* メーカー画像 */

.unpan-content .unpan-img img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* 商品リンクを赤色にする（マウスオーバーしたときも） */

.unpan-content .unpan-table a,
.unpan-content .unpan-table a:visited,
.unpan-content .unpan-table a:hover,
.unpan-content .unpan-table a:active {
    color: #ff0000;
}



/* =========================================================
   12. スマートフォン
   767px以下
   ========================================================= */

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

    /* -----------------------------------------
       コンテンツ
       ----------------------------------------- */

    .unpan-content {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       タイトル
       ----------------------------------------- */

    .unpan-content .unpan-title {
        width: 100%;

        font-size: large;

        margin-top: 10px;
        margin-bottom: 10px;

        padding-bottom: 5px;

        scroll-margin-top: 75px;
    }


    /* -----------------------------------------
       メーカー名
       ----------------------------------------- */

    .unpan-content .unpan-maker {
        width: 100%;

        font-size: large;

        margin-top: 15px;
        margin-bottom: 10px;

        padding-bottom: 5px;

        scroll-margin-top: 70px;
    }


    /* -----------------------------------------
       パターン画像
       ----------------------------------------- */

    .unpan-content .pattern img {
        width: 95px;
        max-width: 95px;
        height: auto;
    }


    /* -----------------------------------------
       メーカー画像
       スマホ：2列
       ----------------------------------------- */

    .unpan-content .unpan-img {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;

        width: 100%;
    }


    /* -----------------------------------------
       表
       ----------------------------------------- */

    .unpan-content .unpan-table {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }


    .unpan-content .unpan-table table {
        width: 100%;
        max-width: 100%;

        table-layout: auto;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       表セル
       ----------------------------------------- */

    .unpan-content .unpan-table th,
    .unpan-content .unpan-table td {

        padding: 5px 4px;

        font-size: 14px;

        line-height: 1.4;

        white-space: normal;

        overflow-wrap: break-word;
        word-wrap: break-word;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       thead
       ----------------------------------------- */

    .unpan-content .unpan-table thead th {
        background-color: #000080;
        color: #fff;

        text-align: center;

        white-space: normal;

        overflow-wrap: break-word;
        word-wrap: break-word;
    }


    /* -----------------------------------------
       tbody 左端
       ----------------------------------------- */

    .unpan-content .unpan-table tbody td:first-child {
        text-align: left;
    }


    /* -----------------------------------------
       tbody その他
       ----------------------------------------- */

    .unpan-content .unpan-table tbody td:not(:first-child) {
        text-align: center;
    }

}


/* =========================================================
   13. 小型スマートフォン
   480px以下
   ========================================================= */

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

    /* -----------------------------------------
       タイトル
       ----------------------------------------- */

    .unpan-content .unpan-title {
        font-size: large;

        scroll-margin-top: 65px;
    }


    /* -----------------------------------------
       メーカー名
       ----------------------------------------- */

    .unpan-content .unpan-maker {
        font-size: large;

        scroll-margin-top: 65px;
    }


    /* -----------------------------------------
       メーカー画像
       ----------------------------------------- */

    .unpan-content .unpan-img {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 6px;
    }


    /* -----------------------------------------
       表
       ----------------------------------------- */

    .unpan-content .unpan-table th,
    .unpan-content .unpan-table td {

        padding: 4px 3px;

        font-size: 13px;

        line-height: 1.35;
    }

}