/*
z-indexメモ
z-index: 2;@media ( max-width : 768px ).date.header.cal.side//style.css
z-index: 1;.more.less button//addbutton.css
z-index: 1;.item//muuri.css
z-index: 3;.item.muuri-item-dragging//muuri.css
z-index: 2;.item.muuri-item-releasing//muuri.css
z-index: 1 ; #backToTheTop.visible
z-index: 1;div.cal_wrapper table.cal tr td div span//cal.css
z-index: 1;.menu li ul//menu.css
z-index: 1;.mitome-item//mitomeMuuri.css
*/
html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Verdana;
    font-size: 12px;
    margin: 0 auto;
}

.container {
    margin: 0 auto;
    display: grid;
    width: 100%;
    min-height: 100%;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 5fr;
    gap: 3px 5px;
    grid-template-areas: 'side main'
                         'footer footer';
    align-items: baseline;
}
.side {
    position: sticky;
    top: 0;
    grid-area: side;
    display: grid;
    width: auto;
    height: auto;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: 'header'
                         'cal'
                         'date'
                         'menu';
}
.main {
    grid-area: main;
}
.footer {
    width: 100%;
    grid-area: footer;
    background: aliceblue;
}
.header {
    grid-area: header;
}
.cal {
    grid-area: cal;
}
.date {
    grid-area: date;
}
.menu {
    grid-area: menu;
}
.large {
    list-style-type: none;
    text-align: center;
    color: white;
    font-size: 15px;
    background: cornflowerblue;
    margin: 1% 2% 1% 2%;//上右下左
    padding: 10px;
}

.large li {
    padding: 9px;
}
.middle {
    list-style-type: none;
    text-align: center;
    color: white;
    font-size: 13px;
    background: lightsteelblue;
    margin: 0.1% 5% 0.1% 5%;//上右下左
    padding: 10px;
}
.middle li {
    padding: 9px;
}
.img{
    text-align: center;
    padding: 9px;
}
.text {
    padding: 0 15% 0 15%;
}

@media ( max-width : 768px ){
.container {
    margin: 0 auto;
    width: 100svw;
    min-height: 100svh;
    grid-template-rows: auto auto auto;
    gap: 0px 0px;
    grid-template-columns: 1fr;
    grid-template-areas: 'side'
                         'main'
                         'footer';
}
.side {
    margin: 0 auto;
    top: 0svh;
    grid-area: side;
    background: aliceblue;
    z-index: 2;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'header cal date'
                         'header cal menu';
    align-items: stretch;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
    background: aliceblue;
}

.header {
    grid-area: header;
}
.cal {
    grid-area: cal;
}
.date {
    grid-area: date;
}
.menu {
    grid-area: menu;
}
.anchor {
    display: block;
    padding-top: 150px;
    margin-top: -150px;
}
img{
    width: 60%;
    height: 60%;
}
}