/*@charset "utf-8";*/
/*==========================================================================
    共通
==========================================================================*/
* {
    font-family: 'Noto Sans JP';
    cursor: none;
}

h1 {
    text-align: center;
    font-style: italic;
}

a {
    text-decoration: none;
    color: black;
}

.contents1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .contents1 h1 {
        font-family: Oooh Baby,cursive;
        font-weight:400;
        font-size:5rem;
    }

    .contents1 h2 {
        font-family: Oooh Baby,cursive;
        font-weight:400;
        font-size:3rem;
    }


.contents2 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #808080;
}

    .contents2 h2 {
        position: absolute;
        left: 0;
        transform: rotate(-90deg);
        z-index: 2;
        /*margin:10px;*/
    }

.about_img {
    position: absolute;
    /*left:0;*/
    height: auto;
    width: 50%;
    z-index: 1;
    opacity: 0.8;
}

img {
    height: 100%;
    width: 100%;
}

.about_txt {
    position: absolute;
    right: 0;
    width: 50%;
}

.contents3 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*マウスカーソル*/
.cursor {
    position: fixed;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
    transform: translate(0, 0);
    pointer-events: none;
}
/*マウスカーソル_追従用*/
.stalker {
    pointer-events: none;
    position: fixed;
    top: -24px;
    left: -24px;
    width: 48px;
    height: 48px;
    border-style: solid;
    border-color: rgba(0,0,0,0.3);
    border-width: 1px;
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 9999;
}
    /*aタグにホバーした時に見た目変化*/
    .stalker.cursor--hover {
        background: rgba(0,0,0,0.1);
    }

#particles-js {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/*==========================================================================
    アニメーション
==========================================================================*/
.blur {
    animation-name: blurAnime;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

.blur2 {
    animation-name: blurAnime;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
    }

    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}

.blurTrigger {
    opacity: 0;
}



/*==========================================================================
    レスポンシブ
==========================================================================*/
@media screen and (max-width: 900px) {
    * {
        cursor: auto;
    }

    .cursor, .stalker {
        display: none;
    }
}