body {
    margin: 0;
    font-family: 'Noto Serif JP';
    > header {
        background-color: #4B6E2D;
        padding: 1em 0;
        display: flex;
        > img {
            height: 2em;
            margin: 0 auto;
        }
    }
    > section {
        &#hero {
            padding: 4em;
            background-image: url('/assets/img/unsplash/_EMTtTEioWo.jpg');
            background-size: cover;
            background-position: center;
            height: 80vh;
            > h1 {
                font-size: 1.75em;
                font-weight: 500;
                max-width: 30em;
                margin: 0 auto;
            }
        }
        &#about {
            display: block;
            background-image: url('/assets/img/unsplash/t2kAfymBHGY.jpg');
            background-size: cover;
            background-position: center;
            background-blend-mode: multiply;
            background-color: #0008;
            color: #fff;
            text-align: center;
            padding: 4em;
            > h2 {
                font-size: 1em;
                font-weight: 700;
                max-width: 30em;
                margin: 0 auto 1em;
                text-shadow: 0.1rem 0.1rem 0.4rem #212121;
                > span {
                    display: block;
                    &:first-child {
                        font-style: italic;
                        margin-bottom: 0.5em;
                    }
                    &:last-child {
                        font-size: 1.75em;
                    }
                }
            }
            > p {
                line-height: 3;
                margin: 0 auto;
                font-size: 0.825em;
                font-weight: 700;
                text-shadow: 0.1rem 0.1rem 0.4rem #212121;
            }
            > .buttons {
                display: flex;
                margin-top: 5em;
                > .button {
                    display: block;
                    margin: 0 auto;
                    color: #fff;
                    letter-spacing: 0.15em;
                    font-size: 0.825em;
                    text-decoration: none;
                    border: solid 1px #fff;
                    padding: 0.75em 1.5em;
                    min-width: 10em;
                    text-align: center;
                }
            }
        }
        &#products {
            display: flex;
            &:after {
                content: '';
                display: block;
                width: 50%;
                background-image: url('/assets/img/unsplash/v1OW17UcR-Q.jpg');
                background-size: cover;
                background-position: center;
            }
            > :first-child {
                position: relative;
                background-color: #4b6e2dee;
                color: #fff;
                text-align: center;
                width: 50%;
                padding: 4em;
                box-sizing: border-box;
                &:before {
                    content: '';
                    position: absolute;
                    --margin: 6em;
                    top: var(--margin);
                    left: var(--margin);
                    width: calc(100% - var(--margin) * 2);
                    height: calc(100% - var(--margin) * 2);
                    box-sizing: border-box;
                    background-image: url('/assets/img/bg_umaemon.svg');
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    z-index: -1;
                }
                > h2 {
                    font-size: 1em;
                    font-weight: 700;
                    max-width: 30em;
                    margin: 0 auto 1em;
                    text-shadow: 0.1rem 0.1rem 0.4rem #212121;
                    > span {
                        display: block;
                        &:first-child {
                            font-style: italic;
                            margin-bottom: 0.5em;
                        }
                        &:last-child {
                            font-size: 1.75em;
                        }
                    }
                }
                > p {
                    line-height: 3;
                    margin: 0 auto;
                    font-size: 0.825em;
                    font-weight: 700;
                    text-shadow: 0.1rem 0.1rem 0.4rem #212121;
                }
                > .buttons {
                    display: flex;
                    margin-top: 5em;
                    > .button {
                        display: block;
                        margin: 0 auto;
                        color: #fff;
                        letter-spacing: 0.15em;
                        font-size: 0.825em;
                        text-decoration: none;
                        border: solid 1px #fff;
                        padding: 0.75em 1.5em;
                        min-width: 10em;
                        text-align: center;
                    }
                }
            }
        }
        &#shop-event {
            display: block;
            background-image: url('/assets/img/unsplash/UgojrqCaNu0.jpg');
            background-size: cover;
            background-position: center;
            color: #fff;
            text-align: center;
            padding: 4em;
            > h2 {
                font-size: 1em;
                font-weight: 700;
                max-width: 30em;
                margin: 0 auto 1em;
                text-shadow: 0.1rem 0.1rem 0.4rem #212121;
                > span {
                    display: block;
                    &:first-child {
                        font-style: italic;
                        margin-bottom: 0.5em;
                    }
                    &:last-child {
                        font-size: 1.75em;
                    }
                }
            }
            > p {
                line-height: 3;
                margin: 0 auto;
                font-size: 0.825em;
                font-weight: 700;
                text-shadow: 0.1rem 0.1rem 0.4rem #212121;
            }
            > .buttons {
                display: flex;
                margin-top: 16em;
                > .button {
                    display: block;
                    margin: 0 auto;
                    color: #fff;
                    letter-spacing: 0.15em;
                    font-size: 0.825em;
                    text-decoration: none;
                    border: solid 1px #fff;
                    padding: 0.75em 1.5em;
                    min-width: 10em;
                    text-align: center;
                }
            }
        }
    }
    > footer {
        background-color: #4B6E2D;
        color: #fff;
        text-align: center;
        padding: 1.5em;
        font-size: 0.75em;
        font-weight: 700;
        > p {
            margin: 0;
        }
    }
}