@charset "UTF-8";
html {
    font-size: 62.5%;
}
body {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template: 
        ".....  header header header" auto
        ".....  .....  .....  ..... " 3rem
        ".....  .....  main   ..... " auto
        ".....  .....  .....  ..... " 5rem
        ".....  footer footer footer" auto/
         20rem   8rem    1fr    8rem ;
    
    font-family: "Noto Sans JP", sans-serif;
}
.background {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(61, 61, 61, 0.685);
    z-index: 4;
    width: 100%;
    height: 100vh;
}
.scroll {
    width: 4rem;
    height: 4rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: rgba(255, 51, 0, 0.884);
    padding:0.7rem 1.4rem 0 1.6rem;
    border-radius: 0.5rem;
    z-index: 1;
}
.scroll div {
    width: 1rem;
    height: 1rem;
    border-top: 0.3rem solid white;
    border-right: 0.3rem solid white;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media (max-width: 1010px){
    body {
        display: grid;
        grid-template: 
            "header header header" auto
            ".....  .....  ..... " 3rem
            ".....  main   ..... " auto
            ".....  .....  ..... " 5rem
            "footer footer footer" auto/
            4rem    1fr    4rem ;
    }
}
@media (max-width: 420px){
    html {
        font-size: 62.5%;
    }
}