/* 共通の土台レイアウト（旧 css/base.css から、実際に使われているルールだけを移したもの）。
   login.php・register.php・account/・edit.php・各読み物ページなどが main.css より先に読み込む。
   view.php と admin/ は読み込まない（view.php は必要な分を main.css 側に持たせている）。 */
body{
    margin: 0;
}
.main {
    /* .main_contents/.contents で内部だけスクロールさせる画面（edit.php・view.php・account/index.php）は、
       .main の高さが画面ちょうどに固定されている（height）ことが前提（top_bar等は常に表示されたまま、
       .contents側だけが内部スクロールする）。そのため既定はheightのまま。
       index.php・login.php・plan.php等、.main_contentsを持たない「ページ全体がスクロールしてよい」
       画面では、下の.main_flowを<div class="main">に追加して使う（お知らせ・記事などで中身が
       1画面を超えても.mainごと伸びて、通常のページスクロールで続きを見られるようにするため）。 */
    width: 100%;
    height: calc(100% - 2px);
    background: #f3ecfb;
    display: flex;
    flex-flow: column;
}
.main.main_flow {
    height: auto;
    min-height: calc(100% - 2px);
}
.top_bar{
    border-bottom: 1px solid #efefef;
    padding-left: 10px;
    padding-right: 16px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}
.top_bar h1{
    color:#7c3aed;
    font-weight: 400;
    margin: 0;
}
.main_contents{
    width:100%;
    display: flex;
    flex-grow: 1;
    min-height: 0; /* .top_bar の上や間に他の要素（お知らせ等）が増えても、決め打ちのheight計算に頼らず
                       残りの高さぶんだけを自動で占めるようにする（flexアイテムの縮小を許可するために必須） */
}
.main_contents .contents{
    flex-grow: 1;
    min-height: 0;
    overflow: scroll;
}
.contents{
    padding: 0 16px;
}