/***** デスクトップ表示 *****/
@media(min-width:780px){
    .main-container{
        display: grid;
        column-gap: 32px;
        grid-template-columns: 3fr 1fr;
        /* grid-template-columns: repeat(4, 1fr); */
    }
    .footer-widget{
        display: grid;
        /* grid-auto-flow: dense; */
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .main-column{
        grid-column: 1 / 2;
        
        /* htmlタグ内に style="width: 1200px"　などのインラインスタイルがあった場合 gridだと溢れてしまう */
        /* min-width: 0;　に設定する事で修正 */
        /* https://css-tricks.com/preventing-a-grid-blowout/ */
        min-width: 0;
    }
    .sub-column-1{
        grid-column: 2 / 3;
        grid-row: 1;
    }
}

/* ↓　縮小するとなぜか横に溢れてしまう。 */
/* パーセンテージを使っているので gap のぶんだけ溢れる？ */
/* @media(min-width:780px){
    main{
        display: grid;
        gap: 24px;
        grid-template-columns: 75% 25%;
    }
    .footer-widget{
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .main-column{
        grid-column: 1 / 2;
    }
    .sub-column-1{
        grid-column: 2 / 3;
    }
} */