body {
    margin: 0;
    line-height: 1.5;
    font-family: "Noto Sans JP", sans-serif;
    > header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        display: flex;
        > nav {
            display: flex;
            margin: auto;
            > ul {
                display: flex;
                list-style: none;
                padding: 0;
                gap: 0.5em;
                margin: 0;
                > li {
                    a {
                        display: block;
                        color: #000;
                        font-weight: 600;
                        text-decoration: none;
                        padding: 2em 0.8em;
                    }
                }
            }
        }
    }
    > section {
        &#hero {
            background: url("/assets/images/hero.jpg");
            background-position: center;
            display: flex;
            min-height: 50vh;
            padding: 40px 20px;
            box-sizing: border-box;
            background-size: cover;
            > div {
                margin: auto;
                text-align: center;
                text-shadow: 0.1em 0.1em 0.1em #fff;
                > h1 {
                    margin: 0;
                    font-style: italic;
                    font-size: 3em;
                }
                > p {
                    margin: 0.5em 0 0;
                    font-size: 1.3em;
                    font-weight: bold;
                }
            }
        }
        &#service {
            position: relative;
            display: flex;
            > .onboard {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                > div {
                    text-shadow: 0.1em 0.1em 0.1em #000;
                    color: #fff;
                    text-align: center;
                    margin: auto;
                    > h2 {
                        font-size: 2em;
                        margin: 0;
                    }
                    > p {
                        letter-spacing: 0.25em;
                        font-size: 1.3em;
                        margin: 0;
                        font-weight: bold;
                    }
                }
            }
            > ul {
                display: flex;
                list-style: none;
                padding: 0;
                margin: 0;
                width: 100%;
                overflow: hidden;
                > li {
                    height: 50vh;
                    width: 100%;
                    display: flex;
                    flex-grow: 1;
                    overflow: hidden;
                    background-size: cover;
                    background-position: center;
                    &:nth-child(1) {
                        background-image: url("/assets/images/service-1.jpg");
                        --accent: #2abe7a;
                    }
                    &:nth-child(2) {
                        background-image: url("/assets/images/service-2.jpg");
                        --accent: #2abbd7;
                    }
                    &:nth-child(3) {
                        background-image: url("/assets/images/service-3.jpg");
                        --accent: #f35f82;
                    }
                    > span {
                        display: block;
                        flex-shrink: 0;
                        text-align: center;
                        padding: 10px;
                        font-size: 0.9em;
                        margin-top: auto;
                        width: 100%;
                        box-sizing: border-box;
                        background: var(--accent);
                        color: #fff;
                    }
                }
            }
        }
        &#news {
            padding: 8em 0 10em;
            max-width: 80%;
            width: 100rem;
            margin: 0 auto;
            box-sizing: border-box;
            > .heading {
                display: flex;
                line-height: 1;
                > h2 {
                    margin: 0;
                    font-size: 2em;
                }
                > p {
                    margin: auto 0 0 1em;
                    letter-spacing: 0.5em;
                    font-weight: bold;
                }
            }
            > table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 2em;
                > tbody {
                    > tr {
                        &:nth-of-type(even) {
                            background: #f4f4f4;
                        }
                        > th {
                            padding: 1em 2em;
                        }
                        > td {
                            padding: 1em 3em 1em 0;
                            &:nth-child(2) {
                                > span {
                                    display: block;
                                    color: #fff;
                                    text-align-last: justify;
                                    width: calc(4em + calc(0.75em * 2));
                                    padding: 0.25em 0.75em;
                                    font-size: 0.9em;
                                    box-sizing: border-box;
                                    &.media {
                                        background: #f26c8d;
                                    }
                                    &.announce {
                                        background: #036eb8;
                                    }
                                    &.anniversary {
                                        background: #f1aa46;
                                    }
                                }
                            }
                            &:nth-child(3) {
                                > a {
                                    color: #000;
                                }
                            }
                        }
                    }
                }
            }
            > .links {
                display: flex;
                margin-top: 10px;
                > .button {
                    margin-left: auto;
                }
            }
        }
        &#about {
            min-height: 50vh;
            padding: 40px 20px;
            background: url("/assets/images/about.jpg");
            background-position: center;
            background-size: cover;
            color: #fff;
            display: flex;
            > div {
                max-width: 80%;
                width: 100em;
                margin: auto;
                > .heading, > p {
                    text-shadow: 0.1em 0.1em 0.1em #000;
                }
                > .heading {
                    > h2 {
                        margin: 0;
                        font-size: 2em;
                    }
                    > p {
                        margin: 0;
                        font-size: 1.1em;
                        letter-spacing: 0.25em;
                        font-weight: bold;
                    }
                }
                > p {
                    font-size: 0.9em;
                    margin: 20px 0 40px;
                }
                > .links {
                    display: flex;
                }
            }
        }
        &#recruit {
            min-height: 50vh;
            padding: 0 20px;
            display: flex;
            > div {
                max-width: 80%;
                width: 100em;
                margin: 0 auto;
                position: relative;
                padding: 60px 0;
                display: flex;
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 20%;
                    width: 80%;
                    height: 100%;
                    z-index: -1;
                    background: url("/assets/images/recruit.jpg");
                    background-position: center bottom;
                    background-size: cover;
                    border-bottom-left-radius: 100em;
                    filter: blur(0.2rem) grayscale(100%);
                    opacity: 0.25;
                }
                > div {
                    > .heading {
                        > h2 {
                            margin: 0;
                            font-size: 2em;
                        }
                        > p {
                            margin: 0;
                            font-size: 1.1em;
                            letter-spacing: 0.25em;
                            font-weight: bold;
                        }
                    }
                    > p {
                        font-size: 0.9em;
                        margin: 30px 0;
                    }
                    > .links {
                        display: flex;
                    }
                }
            }
        }
        &#contact {
            min-height: 40vh;
            padding: 60px 20px;
            background: url("/assets/images/contact.jpg");
            background-position: center;
            background-size: cover;
            color: #fff;
            display: flex;
            > div {
                max-width: 80%;
                width: 50em;
                margin: auto;
                > .heading {
                    text-align: center;
                    > h2 {
                        margin: 0;
                        font-size: 2em;
                    }
                    > p {
                        margin: 0;
                        font-size: 1.1em;
                        letter-spacing: 0.25em;
                        font-weight: bold;
                    }
                }
                > form {
                    display: flex;
                    width: 100%;
                    gap: 1em;
                    margin-top: 40px;
                    > .customer {
                        width: 50%;
                        display: flex;
                        flex-direction: column;
                        gap: 1em;
                        > div {
                            display: flex;
                            background: #fff;
                            > label {
                                display: flex;
                                width: 11em;
                                color: #000;
                                font-weight: bold;
                                padding: 0.5em 0.75em;
                                margin: auto 0;
                                font-size: 0.9em;
                            }
                            > input {
                                border: none;
                                outline: 0;
                                width: 100%;
                                padding: 10px;
                                background: #c1d4f6;
                            }
                        }
                    }
                    > .content {
                        width: 50%;
                        display: flex;
                        flex-direction: column;
                        > label {
                            background: #fff;
                            width: 100%;
                            color: #000;
                            font-weight: bold;
                            padding: 0.5em 0.75em;
                            font-size: 0.9em;
                            box-sizing: border-box;
                        }
                        > textarea {
                            height: 100%;
                            width: 100%;
                            border: none;
                            background: #c1d4f6;
                            box-sizing: border-box;
                        }
                    }
                }
            }
        }
    }
    > footer {
        padding: 2em;
        font-size: 0.8em;
        text-align: center;
    }
    .button {
        display: flex;
        background: #eb4d0b;
        color: #fff;
        padding: 0.75em 1.25em;
        font-size: 0.9em;
        text-decoration: none;
    }
}