@charset "UTF-8";

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

/* コンテナのスタイル */
.container {
    display: grid;
    grid-template-areas: 
        "header header"
        "aside family"
        "aside selfintro"
        "footer footer" ;
    grid-template-columns: 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;
}

selfintro {
    grid-area: selfintro;
    background-color: #f5efe0; 
}

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"
            "family"
	     "selfintro"
	     "aside"
            "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;
}