@charset "UTF-8";

/* ベーススタイル */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* 背景色を設定（任意） */
}

/* コンテナのスタイル */
.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "aside family family"
        "aside page page"
        "footer footer footer" ;
    grid-template-columns: 1fr 1fr 3fr;  /*メインとサイドの比率 */
	 /*gap: 20px;
        padding: 20px;*/
     /* 横幅を固定し、中央に配置 */
    max-width: 1000px;
    margin: 0 auto; /* ページ中央に配置 */
    background-color: white; /* 背景色を白に */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 薄い影を追加（任意） */
    border-radius: 8px; /* 角を丸くする（任意） */
}

/* 各セクションのスタイル */
header {
    grid-area: header;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px 8px 0 0; /* 上部の角を丸くする（任意） */
}

family {
    grid-area: family;
    background-color: #f5efe0; /*#e8e8ff;*/
    padding: 20px;
}

page {
    grid-area: page;
    background-color: #f5efe0;
    padding: 20px;    
}

aside {
    grid-area: aside;
    background-color: #fff3e8;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 0 0 8px 8px; /* 下部の角を丸くする（任意） */
}

/* スマホ向けのスタイル */
@media (max-width: 768px) {
    .container {
        grid-template-areas: 
            "header header"
            "family family"
	     "page page"
	     "aside aside"
            "footer footer";
        grid-template-columns: 1fr; /* 1列にする */
    }
}


.menu {
display: flex;
list-style: none;
padding: 0;
width: 100%;
/+background: #01558d;*/
color: white;
}
.menu li {
width: 100%;
text-align: center;
padding: 10px 0;
}