body {
    margin: 0;
    padding: 0;
}

.header {
    margin: 0 0 1svw 0;
    padding: 1svw 0 0 0;
    position: fixed;
    background: #ffffff;
    z-index: 100;
}

.header span {
    font-size: 3svw;
    margin: 4svw;
}

.header div {
    border-bottom: solid 0.1svw #717171;
    margin: 0 2svw;
    width: 96svw;
}

.leftBox {
    margin: 0;
    padding: 0 0 2svw 0;
    position: fixed;
    top: 7.5svw;
}

.rightBox {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 9svw;
    left: 55svw;
}

.topImageBox {
    width: 32svw;
    height: 24svw;
    border: solid 0.25svw #717171;
    border-radius: 1svw;
    margin: 2.5svw 5svw;
}


/*#topImage1st {
    background-image: url('image/top1.jpg');
    display: block;
}

#topImage2nd {
    background-image: url('image/top2.jpg');
}

#topImage3rd {
    background-image: url('image/top3.jpg');
}*/

#topImage1st,
#topImage2nd,
#topImage3rd {
    position: absolute;
    margin: 2svw;
    width: 28svw;
    height: 21svw;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeRotate 15s infinite;
}

#topImage1st {
    background-image: url('image/top1.jpg');
    animation-delay: 0s;
}

#topImage2nd {
    background-image: url('image/top2.jpg');
    animation-delay: 5s;
}

#topImage3rd {
    background-image: url('image/top3.jpg');
    animation-delay: 10s;
}

@keyframes fadeRotate {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.snsIconSet {
    margin-left: 8.5svw;
    margin-top: 3svw;
    width: 34svw;
}

.snsIconBox {
    width: 25svw;
    margin: 2svw 0;
    border-bottom: solid 0.1svw #717171;
}

.snsIconBox a {
    text-decoration: none;
    color: #000000;
}

.snsIcon {
    margin-left: 1svw;
    width: 2.5svw;
}

.snsIconText {
    font-size: 1.75svw;
    margin: 0 0 0 3svw;
}

.introPartBox span {
    font-size: 2svw;
}

@keyframes barAnimation {
    0% {
        width: 0svw;
    }

    100% {
        width: 30svw;
    }
}

.introPartBoxBar {
    width: 0svw;
    border: solid 0.05svw #717171;
    animation: barAnimation 1s forwards;
}

.delay1 {
    animation-delay: 0.25s;
}

.delay2 {
    animation-delay: 0.35s;
}

.delay3 {
    animation-delay: 0.40s;
}

.delay4 {
    animation-delay: 0.45s;
}

.introPartBoxText {
    width: 30svw;
}

.footer {
    margin-top: 5svw;
    width: 30svw;
    text-align: right;
}

.footerText {
    margin-right: 0svw;
}

.overflowLeftBox {
    position: absolute;
    left: 30svw;
}

.overflowRightBox {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 36.25svw;
    top: 55svw;
}

/* スマホ表示時は縦並び */
@media screen and (max-width: 768px) {
    html {
        margin: 0;
    }

    .header span {
        font-size: 8svw;
        margin: 4svw;
    }

    .leftBox {
        position: absolute;
        top: 15svw;
        left: 5svw;
    }

    .rightBox {
        position: absolute;
        top: 130svw;
        left: 15svw;
    }

    .topImageBox {
        width: 80svw;
        height: 60svw;
        border: solid 0.5svw #717171;
        border-radius: 3svw;
        margin: 5svw 5svw;
    }

    #topImage1st,
    #topImage2nd,
    #topImage3rd {
        position: absolute;
        margin: 4svw;
        width: 72svw;
        height: 54svw;
    }

    .snsIconSet {
        margin-left: 15svw;
        margin-top: 3svw;
    }

    .snsIconBox {
        width: 60svw;
        margin: 2svw 0;
        border-bottom: solid 0.1svw #717171;
    }

    .snsIconBox a {
        text-decoration: none;
        color: #000000;
    }

    .snsIcon {
        margin-left: 1svw;
        width: 7.5svw;
    }

    .snsIconText {
        font-size: 5svw;
        margin: 0 0 0 9svw;
    }

    .introPartBox {
        margin-bottom: 10svw;
    }

    .introPartBox span {
        font-size: 6svw;
    }

    @keyframes barAnimation {
        0% {
            width: 0svw;
        }

        100% {
            width: 70svw;
        }
    }

    .introPartBoxText {
        width: 70svw;
    }

    .footer {
        margin-top: 5svw;
        width: 80svw;
        text-align: right;
    }
}