@font-face {
        font-family: 'Font';
        src: url('ShimbashiGothic-Regular.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }
        body {
            margin: 0;
            background-color:#163c60;
            font-family: 'Font', sans-serif;
        }

.site {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    display: flow-root;
}

.header {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

}


.header nav {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    font-size: 35px;

    color: #b0aaa1;
}


.header a {

    color: inherit;

    text-decoration: none;

    transition: opacity 0.2s;
}


.header a:hover {

    opacity: 0.55;
}

.about img,
.profile img,
.sns img,
.distribute img,
.works img {

    display: block;

    width: 100%;
    height: auto;

}

.about {

    position: absolute;

    left: 150px;
    top: 120px;

    width: 520px;
    height: auto;
}

.about-text {
    position: absolute;

    left: 50px;
    top: 65px;

    width: 420px;

    color: #06476a;

    font-size: 18px;
    line-height: 1.4;
}

.profile {

    position: absolute;

    left: 680px;
    top: 130px;

    width: 400px;
    height: auto;
}

.sns {

    position: absolute;

    left: 150px;
    top: 590px;

    width: 520px;
    height: auto;
}

.sns-links {
    position: absolute;

    left: 60px;
    right: 60px;
    bottom: 30px;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 40px;
}

.sns-links img {
    display: block;

    width: 75px;
    height: auto;
}


.sns-links a:hover {

    transform: translateY(-4px);

}

.distribute {

    position: absolute;

    left: 700px;
    top: 420px;

    width: 190px;
    height: auto;

    display: block;

    transition:
        transform 0.25s;
}


.distribute:hover {

    transform:
        rotate(-2deg)
        scale(1.05);
}

.works {

    position: absolute;

    left: 930px;
    top: 520px;

    width: 200px;
    height: auto;

    display: block;

    transition:
        transform 0.25s;
}


.works:hover {

    transform:
        rotate(2deg)
        scale(1.05);
}

.footer {
    position: relative;

    width: 100%;

    margin-top: 780px;
    padding-bottom: 25px;

    text-align: center;

    color: #b0aaa1;
    font-size: 15px;
}

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

    .site {
        width: 100%;
    }

    .header {
        left: 0;
        width: 100%;
    }

    .header nav {
        font-size: 25px;
        gap: 10px;
    }

    .about {

        left: 20px;
        top: 100px;

        width: 90%;

    }

    .profile {

        left: 20px;
        top: 90px;

        width: 90%;

    }

    .about{

        left: 20px;
        top: 330px;

        width: 90%;

    }

    .about-text {

        left: 20px;
        top: 40px;
        font-size: 13px;

        width: calc(100% - 40px);

    }

    .sns {

        left: 20px;
        top: 670px;

        width: 90%;

    }

    .sns-links {

        left: 20px;
        right: 20px;
        bottom: 20px;
        gap: 20px;

    }

    .sns-links img{
        
        width: 60px;

    }

    .distribute {

        left: 20px;
        top: 790px;

        width: 40%;

    }

    .works {

        left: 200px;
        top: 880px;

        width: 40%;

    }

    .footer {
        font-size: 13px;
        margin-top: 1080px;
    }

}