@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;

    scroll-behavior: auto;
    font-weight: 600;
    line-height: 1;
}

:root {
    --c0: #111;
    --c1: #222;
    --c2: #333;
    --c3: #eee;
    --c4: #444;

    --f0: 1.5dvw;
    --f1: 1dvw;
    --f0d5: 0.5dvw;
    --f0d5m: -0.5dvw;
    --f2: 2dvw;
    --f2d5: 2.5dvw;
    --f3: 3dvw;
    --f4: 4dvw;
    --f4s: 4dvw;
    --up: 4.35dvw;
    --gup: 6.25dvw;
    --hs: 40dvw;
    --bbau: 15dvw;
    --dc: 5.25dvw;
    --f30: 30dvw;

    --gcw: 46dvw;
    --gch: 20dvw;
    --i16: 16dvw;
}

body {
    background-color: var(--c1);
    color: var(--c3);
    margin: 0;
    padding: 0;
    font-size: var(--f0);
}

li {
    list-style-type: none;
}

a {
    cursor: pointer;
    text-decoration: none;
    text-decoration-color: none;
    color: var(--c3);
}

a:hover,
a:visited {
    color: var(--c3);
}

strong {
    font-weight: 700;
}

/* WEBKIT SCROLLBAR */
::-webkit-scrollbar {
    width: var(--f0d5);
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--c0);
}
  
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--c3);
    width: 1dvw;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    cursor: grab;
}

.logo {
    width: var(--f3);
}

header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    animation: ha 1s ease-in-out;
    opacity: 1;
    z-index: 3;

    border-radius: var(--f0d5);
    background-color: #11111155;
    backdrop-filter: blur(0.2dvw);
    padding: var(--f0d5);
    position: fixed;
    top: var(--f0d5);
    left: var(--f0);
    right: var(--f0);

    & a {
        font-weight: 400;
        font-size: var(--f0);
        padding: var(--f0d5);
    }
    & .hh {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;

        & p {
            font-weight: 400;
        }
    }
}

.dropdown-content {
    display: none;
    position: absolute;
    top: var(--dc);
    right: 0;
    padding: 0;
    background-color: #11111155;
    backdrop-filter: blur(0.2dvw);
    z-index: 1;
    border-radius: var(--f0d5);

    & a {
        color: var(--c3);
        padding: var(--f0d5);
        text-decoration: none;
        display: block;
        font-size: var(--f0);
        color: var(--c3);
        text-align: right;

        &:hover {
            background-color: #333333aa;
            border-radius: 0.5vh;
        }
    }
}

footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    z-index: 2;

    background-color: var(--c0);
    padding: var(--f1);
    box-shadow: #111 1dvw 1dvw 1dvw 2dvw;

    & p.left {
        width: 50%;
        font-weight: 300;
        font-size: var(--f1);
    }
}

@keyframes spa {
    from {
        opacity: 0;
        scale: 0.8;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes ha {
    from {
        opacity: 0;
        transform: translateY(-4dvw);
    }
    to {
        opacity: 1;
        transform: translateY(0dvw);
    }
}

.ton2b {
    display: block;
    position: fixed;
    bottom: var(--f0d5m);
    height: var(--f0d5);
    width: 100%;
    background-color: var(--c0);
    box-shadow: #111 1dvw 1dvw 1dvw 2dvw;
    filter: blur(0.3vh);
    z-index: 3;
    content: '　';
}

.lih {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1600px) {
    :root {
        --f0: 1.75dvw;
        --f1: 1.25dvw;
        --f0d5: 0.75dvw;
        --f2: 2.25dvw;
        --f2d5: 2.75dvw;
        --f3: 3.25dvw;
        --f4: 4.25dvw;
        --f4s: 4.25dvw;
        --up: 5.45dvw;
        --hs: 45dvw;
        --bbau: 17.5dvw;
        --dc: 6.25dvw;
    }
}
@media screen and (max-width: 1400px) {
    :root {
        --f0: 2dvw;
        --f1: 1.5dvw;
        --f0d5: 1dvw;
        --f2: 2.5dvw;
        --f2d5: 3dvw;
        --f3: 3.5dvw;
        --f4: 4.5dvw;
        --f4s: 4.5dvw;
        --up: 6.65dvw;
        --hs: 50dvw;
        --bbau: 20dvw;
        --dc: 7.5dvw;

        --gup: 7.5dvw;
    }
}
@media screen and (max-width: 1200px) {
    :root {
        --f0: 2.25dvw;
        --f1: 1.75dvw;
        --f0d5: 1.25dvw;
        --f2: 2.75dvw;
        --f2d5: 3.25dvw;
        --f3: 3.75dvw;
        --f4: 4.75dvw;
        --f4s: 4.75dvw;
        --up: 8.05dvw;
        --hs: 55dvw;
        --bbau: 22.5dvw;
        --dc: 9dvw;
        --f30: 35dvw;

        --gcw: 56dvw;
        --gch: 30dvw;
        --gup: 9dvw;
        --i16: 18dvw;
    }
}
@media screen and (max-width: 1100px) {
    :root {
        --f0: 2.5dvw;
        --f1: 2dvw;
        --f0d5: 1.5dvw;
        --f2: 3dvw;
        --f2d5: 3.5dvw;
        --f3: 4dvw;
        --f4: 5dvw;
        --f4s: 5.25dvw;
        --up: 9.45dvw;
        --gup: 10.5dvw;
        --hs: 60dvw;
        --bbau: 25dvw;
        --dc: 10.25dvw;
    }
    footer {
        flex-direction: column;
        & p.left {
            width: 75%;
            margin: var(--f0d5);
        }
    }
}
@media screen and (max-width: 1000px) {
    :root {
        --f0: 2.75dvw;
        --f1: 2.25dvw;
        --f0d5: 1.75dvw;
        --f2: 3.25dvw;
        --f2d5: 3.75dvw;
        --f3: 4.25dvw;
        --f4: 5.25dvw;
        --f4s: 5.75dvw;
        --up: 11dvw;
        --hs: 65dvw;
        --bbau: 26dvw;
        --dc: 12dvw;
        --f30: 40dvw;

        --gcw: 61dvw;
        --gch: 35dvw;
        --gup: 12dvw;
        --i16: 20dvw;
    }
}
@media screen and (max-width: 900px) {
    :root {
        --f0: 3dvw;
        --f1: 2.5dvw;
        --f0d5: 2dvw;
        --f2: 3.5dvw;
        --f2d5: 4dvw;
        --f3: 4.5dvw;
        --f4: 5.5dvw;
        --f4s: 6.75dvw;
        --up: 14dvw;
        --hs: 80dvw;
        --bbau: 32.5dvw;
        --dc: 15dvw;
        --f30: 42.5dvw;

        --gcw: 72dvw;
        --gch: 40dvw;
        --gup: 16dvw;
        --i16: 22dvw;
    }
}
@media screen and (max-width: 800px) {
    :root {
        --f0: 3.25dvw;
        --f1: 2.75dvw;
        --f0d5: 2.25dvw;
        --f2: 3.75dvw;
        --f2d5: 4.25dvw;
        --f3: 4.75dvw;
        --f4: 5.75dvw;
        --f4s: 7.5dvw;
        --up: 16dvw;
        --hs: 90dvw;
        --bbau: 35.5dvw;
        --dc: 17dvw;

        --gcw: 78dvw;
        --gch: 46dvw;
        --gup: 17dvw;
        --i16: 24dvw;
    }
}
@media screen and (max-width: 700px) {
    :root {
        --f0: 3.5dvw;
        --f1: 3dvw;
        --f0d5: 2.5dvw;
        --f2: 4dvw;
        --f2d5: 4.5dvw;
        --f3: 5dvw;
        --f4: 6dvw;
        --f4s: 7.75dvw;
        --up: 17dvw;
        --hs: 100dvw;
        --bbau: 40dvw;
        --dc: 18dvw;
        --f30: 46dvw;

        --gcw: 80dvw;
        --gch: 46dvw;
        --gup: 19dvw;
        --i16: 24dvw;
    }
}
@media screen and (max-width: 600px) {
    :root {
        --f0: 3.75dvw;
        --f1: 3.25dvw;
        --f0d5: 2.75dvw;
        --f2: 4.25dvw;
        --f2d5: 4.75dvw;
        --f3: 5.25dvw;
        --f4: 6.25dvw;
        --f4s: 8dvw;
        --up: 19dvw;
        --gup: 21dvw;
        --hs: 105dvw;
        --bbau: 42.5dvw;
        --dc: 20dvw;
        --f30: 48dvw;
    }
}
@media screen and (max-width: 500px) {
    :root {
        --f0: 4dvw;
        --f1: 3.5dvw;
        --f0d5: 3dvw;
        --f2: 4.5dvw;
        --f2d5: 5dvw;
        --f3: 5.5dvw;
        --f4: 6.5dvw;
        --f4s: 9dvw;
        --up: 21dvw;
        --gup: 22dvw;
        --hs: 105dvw;
        --bbau: 40.5dvw;
        --dc: 48dvw;
        --f30: 49dvw;
    }
    .lih {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
    }
}
@media screen and (max-width: 400px) {
    :root {
        --f0: 4.5dvw;
        --f1: 4dvw;
        --f0d5: 3.5dvw;
        --f2: 5dvw;
        --f2d5: 5.5dvw;
        --f3: 6dvw;
        --f4s: 10dvw;
        --up: 24dvw;
        --gup: 26dvw;
        --hs: 120dvw;
        --bbau: 47.5dvw;
        --dc: 48dvw;
        --f30: 55dvw;
    }
}
@media (height: 600px) and (max-width: 1024px) {
    :root {
        --f0: 1.75dvw;
        --f1: 1.25dvw;
        --f0d5: 0.75dvw;
        --f2: 2.25dvw;
        --f2d5: 2.75dvw;
        --f3: 3.25dvw;
        --f4: 4.25dvw;
        --f4s: 4.75dvw;
        --up: 6dvw;
        --hs: 45dvw;
        --bbau: 17.5dvw;
        --dc: 12dvw;
        --f30: 30dvw;
    }
}