-MediaQuery-L1-

-HTML-

-CSS-

* {
        margin: 0;
        padding: 0;
    }
    
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    ul {
        list-style: none;
    }
    
    #wrap {
        width: 100%;
        font-family: 'Cormorant Garamond','Noto Serif SC';
    }
    
    /* header */
    header {
        height: 50vh;
        background: url(images/headerImg.jpg)no-repeat center 50px / cover;
        position: relative;
    }
    header h1 {
        line-height: 70px;
        background: white;
        text-align: center;
        font-size: 10vw;
    }
    header nav:before {
        content: "Menu";
        display: block;
        width: 50px;
        line-height: 50px;
        border: solid 1px black;
        border-radius: 50%;
        text-align: center;
        font-size: 18px;
        position: absolute;
        top: 10px;
        right: 5px;
    }
    header nav ul {
        display: none;
    }
    
    /* main */
    main h2 {
        padding: 50px 0 10px;
        text-align: center;
        font-weight: normal;
        font-size: 7vw;
    }
    main p:first-of-type {
        width: 98%;
        margin: 0 auto;
        max-width: 500px;
    }
    main p:last-of-type {
        padding: 10px 0 30px;
        text-align: center;
        font-size: 14px;
    }
    
    /* footer */
    footer {
        padding: 20px 0 5px;
        background: black;
        text-align: center;
        font-size: 14px;
        color: white;
    }
    footer p:first-of-type span {
        display: block;
        padding-top: 5px;
    }
    
    /* @media 980px以上 */
    @media screen and (min-width:980px) {
        header {
            min-height: 500px;
            background-position: center -5px;
        }    
        header h1 {
            padding-top: 15px;
            text-align: left;
            font-size: 5vw;
        }
        header nav {
            position: absolute;
            top: 25px;
            right: 20px;
        }
        header nav:before {
            display: none;
        }
        header nav ul {
            display: flex;
        }
        header nav li {
            width: 100px;
            text-align: center;
            font-size: 30px;
        }
        
        main h2 {
            font-size: 3vw;
        }
        
        footer p:first-of-type {
            padding-bottom: 7px;
        }
        footer p:first-of-type span {
            display: inline;
        }
        footer p:last-of-type {
            font-size: 36px;
        }
    }