/* https://www.tam-tam.co.jp/tipsnote/html_css/post12703.html */
body {
    margin: 0;
    padding: 0;
}

.grid_container {
    display: -ms-grid;
    display: grid;/* グリッドコンテナであることを定義 */
    grid-template-areas: 'header'/* 1行目 */
                         'nav'/* 2行目 */
                         'main'/* 3行目 */
                         'footer'/* 5行目 */;
    -ms-grid-rows: 60px 50px 1fr 60px;
    grid-template-rows: 60px 50px 1fr 60px;/* 行の高さ */
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;/* 列の幅 */
    grid-row-gap: 0; /*行と行の間の余白 */
}

.grid_header {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: header;
}
.grid_footer {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    grid-area: footer;
}
.grid_main {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: main;
}
.grid_nav {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: nav;
}

header {
    background-color: #F7B3F9;
}
footer {
    background-color: #C9F4FF;
}
main {
    background-color: #BAFCDE;
}
nav {
    background-color: #FDFFCC;
}

h1{
    color:#333333;
    font-size:14pt;
    font-style:italic;
}
h2{
    color:#333333;
    font-size:12pt;
    font-style:normal;
}
header,footer,main,nav {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

#menu-y {
    list-style:  none;
    margin:  6px;
    padding: 0;
}

#footer-list {
    list-style: none;
}
 
#footer-list li {
    width: 250px;
    text-align: center;
    background-color: #333;
    display: inline-block;
}
 
#footer-list li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.margin-right12 {
    margin-right: 12px;
}


header {
    background-color: #F7B3F9;
}
footer {
    background-color: #C9F4FF;
}
main {
    background-color: #BAFCDE;
}
nav {
    background-color: #FDFFCC;
}
aside {
    background-color: #FFDE99;
}

#list {
    display: -ms-grid;
    display: grid;
    grid-auto-flow: column;
    -ms-grid-rows: 24px;
    grid-template-rows: 24px;
    -ms-grid-columns: 40px 90px 1fr 60px 80px;
    grid-template-columns: 40px 90px 1fr 60px 80px;
    list-style: none;
}

#list.li {
    background:#ffcc99;
}