/* ==========================================================
   layout.css
   ----------------------------------------------------------
   役割：
   ・本文の余白と幅
   ・トップページのアークリアクターの位置
   ========================================================== */


/* ==========================================================
   本文（layouts/app の <main class="site-main">）
   ========================================================== */

.site-main {
    padding: 28px 32px 64px;
}

@media (max-width: 768px) {

    .site-main {
        padding: 20px 16px 48px;
    }

}


/* ==========================================================
   アークリアクター（トップページ）の位置
   ----------------------------------------------------------
   大きさと色は reactor/reactor.css で管理する。
   トップページの並べ方は T3-2 で作る。
   ========================================================== */

.site-main > .reactor {
    margin: 8px auto 32px;
}


/* ==========================================================
   画面の中の場所へ移動したとき（例：ページの中の見出しへのリンク）、
   上に残るヘッダーとメニューバーで、移動先の頭が隠れないようにする（D-56）
   ========================================================== */

[id] {
    scroll-margin-top: 120px;
}