body,html{
    margin:0;
    font-size: 16px;
    overflow-x: hidden;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

header{
    width:100%;
    height:80px;
    background-color: white;
    text-align:right;
}
a{
    display:inline-block;
}
.myself{
    width: 50px;
    height: 50px;
    padding:20px;
}
.headerhome{
    position:relative;
    bottom:40px;
}

.konnichiha{
    height: 37.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.konnichiha video{
    position: fixed;
    width: 105%;
    opacity:0.5;
    z-index: -1;
    transform: translateY(0);
    will-change: transform;
}
@keyframes parallax{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-300px);
    }

}
.konnichiha video{
    animation: parallax linear;
    animation-timeline: scroll();
}
.konnichiha h1{
    position: absolute;
    font-size: 4rem;
    z-index: 1;
}
.konnichiha p{
    position:absolute;
    font-size: 1.7rem;
    margin-top: 9rem;
    z-index: 1;
}
.first span{
    display:inline-block;
}
.second span{
    display: inline-block;
}

.youkoso{
    text-align: center;
    background-color: white;
    padding-top:80px;
    padding-bottom: 60px;
}
.first{
    font-size:1.2rem;
}
.second{
    padding-top:50px;
    font-size: 0.8rem;
    color:gray;
}

.linkgallery{
    background-color: white;
    width:100%;
    text-align: center;
}
.linkgallery button{
    margin: 20px 50px;
    width: 340px;
    height: 210px;
    font-size:1.8rem;
    color:white;
    text-shadow: 1px 1px 2px black;
    border:2px solid rgb(144, 144, 144);
}
.sosakulink{
    background-image: url(sozai/sosakubg.JPG);
    position: relative;
    background-size: 350px;
    background-position: 0 -20px;
}
.sosakulink:before{
    position:absolute;
    content: '';
    left: 0;
    top:0;
    width:100%;
    height: 100%;
    opacity:0.2;
    background-color: rgb(12, 7, 30);
    z-index: 1;
}
.sosakulink:hover::before{
    opacity:0.5;
}
.sosakulink span{
    position:relative;
    z-index: 2;
}
.charalink{
    background-image: url(sozai/charabg.JPG);
    position: relative;
    background-size: 350px;
    background-position: -5px -10px;
}
.charalink:before{
    position:absolute;
    content: '';
    left: 0;
    top:0;
    width:100%;
    height: 100%;
    opacity:0.2;
    background-color: rgb(12, 7, 30);
    z-index: 1;
}
.charalink:hover::before{
    opacity:0.5;
}
.charalink span{
    position:relative;
    z-index: 2;
}

.outlinks{
    background-color: white;
    width:100%;
    text-align: center;
    padding:4rem 0 3rem 0;
}
h2{
    font-size: 1.6rem;
    font-weight: lighter;
    color: rgb(103, 103, 103);
    margin:0;
    padding:2rem;
}
.outlinkbutton{
    display: inline-block;
    margin: 0 1rem;
}
.outlinks button{
    margin: 1rem;
    height: 7rem;
    width: 14rem;
    border:2px solid rgb(144, 144, 144);
}
.outlinks p{
    margin:0 0 2rem 0;
}
.outli:before{
    position:absolute;
    content: '';
    left: 0;
    top:0;
    width:100%;
    height: 100%;
    opacity:0;
    background-color: rgb(12, 7, 30);
    z-index: 1;
}
.outli:hover::before{
    opacity:0.2;
}
.xlink{
    background-image: url(sozai/xlink.JPG);
    background-size: 100%;
    position: relative;
}
.pixivlink{
    background-image: url(sozai/pixivlink.JPG);
    background-size: 100%;
    position: relative;
}

.specialthanks{
    background-color: white;
    width:100%;
    text-align: center;
    padding:4rem 0 1rem 0;
}
.specialthanks h2{
    padding-bottom: 0.5rem;
}
.specialthanks p{
    margin:0 3rem 4rem 3rem;
}
.specialthanks img{
    height: 55px;
}
.bannerbutton{
    display: inline-block;
    margin: 0 5rem;
}
.bannerli{
    background-size: 100%;
    position: relative;
}

footer{
    background-color: white;
    height: 100px;
    font-size:1rem;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 40px;
}
footer img{
    text-align: center;
    height: 55px;
}

@media (max-width:1000px){
    .konnichiha {
        height: 28rem;
    }
    .linkgallery button{
        height: 150px;
        width:280px;
        margin:0 20px;
    }
    .charalink{
        background-position: -35px -20px;
    }
}

@media (max-width:730px){
    body,html{
        font-size: 14px;
    }

    .konnichiha {
        height: 18rem;
    }
    .konnichiha video{
        position: absolute;
        width:110%;
        height:110%;
    }
    @keyframes parallax{
        from{
            transform:translateY(0);
        }
        to{
            transform:translateY(-100px);
        }
     }
     .konnichiha h1{
        font-size:3rem;
     }
     .konnichiha p{
        font-size: 1.3rem;
     }
    
    .youkoso{
        padding: 40px 30px;
    }
    .first{
        font-size: 1rem;
    }
    .konnichiha p{
        margin-top: 100px;
    }

    .linkgallery button{
        height: 100px;
        width:220px;
        margin:20px 20px;
    }
    .sosakulink{
        background-size: 300px;
        background-position: 0 -30px;
    }
    .charalink{
        background-size: 300px;
        background-position: -40px -20px;
    }
}