html {
    scroll-behavior: smooth;
}

body {
    background: #F8F8F8;
    letter-spacing: 0.08em;
    font-family: 'Noto Sans JP', sans-serif;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

img {
    width: 100%;
    height: 100%;
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* フェードイン表示
.fade-in {
    opacity: 0;
    transition-duration: 1000ms;
    transition-property: opacity, transform;
}
  
.fade-in-up {
    transform: translate(0, 50px);
}

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}
*/

div#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 22.22vw;
    width: 100vw;
    background: #2D2C2C;
    display: block;
}

div#sidebar div.logo {
    width: 6.99vw;
    height: 2.96vw;
    margin-top: 16.43vw;
    margin-left: 5.59vw;
    opacity: 1;
}

div#sidebar ul.menu {
    margin-top: 8.8vw;
    margin-left: 5.56vw;
    list-style: none;;
    font-size: 1.11vw;
    letter-spacing: 0.08em;
    opacity: 1;
}

div#sidebar ul.menu .small {
    font-size: 0.90vw;
}

div#sidebar ul.menu li:not(:first-child) {
    margin-top: 1.39vw;
}

div#sidebar ul.menu li a {
    color: white;
    text-decoration: none;
}
div#sidebar ul.menu li a:hover {
    color: #BD1E2F;
}

div#sidebar a.privacy {
    display: inline-block;
    color: white;
    text-decoration: none;
    margin-left: 5.56vw;
    margin-top: 3vw;
    opacity: 0;
}

header#header {
    display: none;
}

main#main {
    margin-left: 22.22vw;
    padding-top: 8.33vw;
    position: relative;
    z-index: 0;
    background: white;
    width: 77.78%;
    display: block;
    overflow-x: hidden;
}

footer#footer {
    display: none;
}


@media screen and (max-width: 780px) {

    html {
        scroll-behavior: auto;
    }

    .pc {
        display: none;
    }
    
    .sp {
        display: block;
    }

    div#sidebar {
        display: none;
    }

    header#header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 18.67vw;
        z-index: 2;
        background: white;
    }

    header#header .menu {
        width: 86.13vw;
        height: 5.33vw;
        margin-left: 7.2vw;
        margin-top: 6.67vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    header#header .menu .logo {
        width: 10.67vw;
        height: 5.33vw;
    }

    main#main {
        margin-left: 0;
        width: 100vw;
        padding-top: 27.47vw;
    }

    footer#footer {
        display: block;
        width: 100vw;
        background: #2D2C2C;
        padding-top: 10.67vw;
        padding-bottom: 3.73vw;
    }

    footer#footer .logo {
        width: 21.33vw;
        height: 9.03vw;
        margin: 0 auto;
    }

    footer#footer .privacy {
        margin-top: 10.7vw;
        color: white;
        text-align: center;
    }

    footer#footer .privacy a {
        text-decoration: none;
        color: white;
    }

    footer#footer .copyright {
        border-top: 1px solid #6F6B6C;
        width: 100vw;
        margin-top: 16vw;
        font-size: 2.67vw;
        color: #6F6B6C;
        text-align: center;
        padding-top: 3.73vw;
    }
}