@charset 'UTF-8';
/* ==========================================
   テーブルコンポーネント
   ========================================== */
/* --- テーブル (bl_table) --- */
.bl_table
{
    width: 100%;

    table-layout: auto;
    border-collapse: collapse;

    border: solid 1px #c4c4c4;

    margin-block: min(calc(16 / 1440 * 100vw), 16px) min(calc(24 / 1440 * 100vw), 24px);
}
.bl_table-head
{
    font-size: min(calc(14 / 1440 * 100vw), 14px);
    font-weight: 500;
    line-height: 1.4;

    padding: min(calc(16 / 1440 * 100vw), 16px); 

    text-align: left;
    vertical-align: top;

    border: solid 1px #c4c4c4;
    background: #f8f8f8;
}
.bl_table-data
{
    font-size: min(calc(14 / 1440 * 100vw), 14px);
    line-height: 1.65;

    padding: min(calc(16 / 1440 * 100vw), 16px); 

    vertical-align: top;

    border: solid 1px #c4c4c4;
}
.bl_table-data p:not(:first-of-type)
{
    margin-top: min(calc(12 / 1440 * 100vw), 12px);
}

/* ==========================================
   レスポンシブ（SP）
   ========================================== */
@media only screen and (max-width: 767px)
{
    .bl_table
    {
        display: block;
        overflow-x: auto;

        margin-block: calc(8 / 390 * 100vw) calc(16 / 390 * 100vw);
        -webkit-overflow-scrolling: touch;
    }
    .bl_table-head
    {
        font-size: calc(14 / 390 * 100vw);

        padding: calc(16 / 390 * 100vw);

        white-space: nowrap;

        border-top: none;
        border-right: none; 
        border-left: none;
    }
    .bl_table-data
    {
        font-size: calc(14 / 390 * 100vw);

        padding: calc(16 / 390 * 100vw);

        border-top: none;
        border-right: none; 
        border-left: none;
    }
}