@font-face {
    font-family: title;
    src: url(./public/bold.woff2);
}
@font-face {
    font-family: regular;
    src: url(./public/regular.woff2);
}
:root {
    --index: calc(1vw + 1vh);
}
body {
    margin: 0;
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden !important;
    background-color: #fff;
}
.first {
    min-height: 100vh;
}
.title{
    font-family: title;
    margin: 16vh auto 0px auto;
    width: min-content;
    text-align: center;
    text-align: left;
    line-height: calc(var(--index) * 3 + 6px);
    color: #000000;
    font-size: calc(var(--index) * 3 + 6px);
}
.bold {
    color: #2b3541;
}
.text {
    font-size: calc(var(--index) * 0.9 + 6px);
    font-family: regular;
    color: #5c6575;
    z-index: 10;
    width: calc(100vw - 100px);
    max-width: 700px;
    text-align: center;
    margin: 15vh auto 0 auto;
}
.scroll {
    margin: 10vh 0;
    display: flex;
    justify-content: center;
    overflow-x: auto;
}
.scroll img {
    width: 20vw;
    min-width: 150px;
    max-width: 230px;
}
.subtitle{
    font-family: regular;
    text-align: center;
    margin: 0 20px 16px 20px;
    font-size: calc(var(--index) * 1.3 + 10px);
    color: #5c6575;
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.5s, filter 0.5s;
}
.center {
    display: flex;
    justify-content: center;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
button {
    background: #3c87ff;
    padding: calc(var(--index) * 0.3 + 5px) calc(var(--index) * 0.6 + 8px);
    border-radius: 100px;
    border: none;
    color: #fff;
    font-family: regular;
    margin: 0;
    font-size: calc(var(--index) * 0.55 + 10px);
    cursor: pointer;
    transition: .12s;
    margin: 4px 4px;
}
button:hover {
    background: #256cdd;
}
.second {
    min-height: 100vh;
    margin: 0;
    padding: 32px 0 0 0;
}
.footer {
    width: calc(100vw - 50px);
    max-width: 700px;
    margin: auto;
    border-top: #d2d2d2 2px solid;
}
.footer ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    padding: 0;
}
.footer ul li img {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
}
.footer li a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}footer li {
    background: #f6f6f6;
    padding: calc(var(--index) * 0.2 + 2px) calc(var(--index) * 0.5 + 6px);
    border-radius: 100px;
    margin: 8px 8px 0 0;
    transition: .12s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.footer li:hover {
    background: #e8e8e8;
}
.footer li p {
    font-family: regular;
    color: #000;
    text-decoration: none;
    margin: 0;
    font-size: calc(var(--index) * 0.5 + 8px);
}