@charset 'UTF-8';
/* ==========================================
   著者コンポーネント (bl_post-author)
   ========================================== */
/* --- 著者ボックス (bl_post-author) --- */
.bl_post-author
{
    display: grid;

    margin-top: min(calc(64 / 1440 * 100vw), 64px); 
    padding: min(calc(24 / 1440 * 100vw), 24px);

    border: solid 1px #c4c4c4;
    border-radius: min(calc(8 / 1440 * 100vw), 8px);

    grid-template: 'img name' auto 'img text' auto/min(calc(80 / 1440 * 100vw), 80px) 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: min(calc(24 / 1440 * 100vw), 24px);
       -moz-column-gap: min(calc(24 / 1440 * 100vw), 24px);
            column-gap: min(calc(24 / 1440 * 100vw), 24px);
    row-gap: min(calc(8 / 1440 * 100vw), 8px);
}
.bl_post-author-img
{
    width: min(calc(80 / 1440 * 100vw), 80px); 

    grid-area: img;
}
.bl_post-author-img img
{
    display: block;

    width: 100%;

    border-radius: min(calc(8 / 1440 * 100vw), 8px);
}
.bl_post-author-name
{
    font-weight: bold;
    line-height: 1.4; 

    grid-area: name;
}
.bl_post-author-text
{
    font-size: min(calc(16 / 1440 * 100vw), 16px); 
    line-height: 1.5;

    grid-area: text;
}

/* ==========================================
   レスポンシブ（SP）
   ========================================== */
@media only screen and (max-width: 767px)
{
    .bl_post-author
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        margin-top: calc(40 / 390 * 100vw); 
        padding: calc(24 / 390 * 100vw);

        border-radius: calc(8 / 390 * 100vw);

        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: calc(16 / 390 * 100vw);
    }
    .bl_post-author-img
    {
        width: calc(64 / 390 * 100vw);
    }
    .bl_post-author-img img
    {
        border-radius: calc(8 / 390 * 100vw);
    }
    .bl_post-author-text
    {
        font-size: calc(16 / 390 * 100vw);

        width: 100%;
    }
}