/* ============================================================
   manual.css
   説明書共通CSS
============================================================ */

body{
    margin:0;
    padding:0;

    font-family:
        "Noto Serif JP",
        serif;

    line-height:1.9;

    color:#333;

    background:#f5f7fa;
}

.manual-wrap{

    max-width:1000px;

    margin:0 auto;

    padding:30px 20px 80px;

    box-sizing:border-box;
}

h1{

    margin:0 0 30px;

    padding:18px 24px;

    background:#e3f0ff;

    border-left:8px solid #3b82f6;

    font-size:32px;
}

h2{

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

    padding-bottom:8px;

    border-bottom:2px solid #3b82f6;

    font-size:24px;
}

h3{

    margin-top:30px;

    color:#1d4ed8;

    font-size:20px;
}

p{

    margin:12px 0;
}

ul{

    padding-left:24px;
}

li{

    margin-bottom:8px;
}

.section{

    background:#fff;

    padding:20px;

    margin-bottom:18px;

    border-radius:12px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
}

.sample{

    background:#f8fafc;

    border:1px solid #dbe4ef;

    border-radius:8px;

    padding:14px;

    margin:12px 0;

    font-family:monospace;

    white-space:pre-line;
}

.note{

    background:#fff8dd;

    border-left:5px solid #f2c94c;

    padding:14px;

    margin:16px 0;
}

.table-guide{

    width:100%;

    border-collapse:collapse;

    margin-top:12px;
}

.table-guide th{

    background:#e3f0ff;

    padding:10px;

    border:1px solid #d0d8e4;
}

.table-guide td{

    padding:10px;

    border:1px solid #d0d8e4;
}

@media (max-width:700px){

    h1{
        font-size:24px;
    }

    h2{
        font-size:20px;
    }

    h3{
        font-size:18px;
    }

    .manual-wrap{
        padding:20px 12px 60px;
    }
}