@charset "utf-8";

.wrap404{
    text-align: center;
    background: #fff;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
@media(max-width: 500px){
    .wrap404{
        margin: 0 10px;
    }
}
/*Not Foundメッセージ*/
.message404{
    margin: 50px 0;
}
.message404 h2{
    font-size: 20px;
    border-bottom: none;
    margin: 0;
    padding: 0;
}
.text404{
    margin: 20px 0;
}
.toplink404{
    background: #F82038;
    border: 2px solid #F82038;
    display: inline-block;
}
.toplink404 a{
    display: block;
    text-decoration: none;
    padding: 15px 40px;
    color: #fff;
}
.toplink404:hover{
    background: #fff;
}
.toplink404:hover a{
    color: #F82038;
}

/*アニメーション上部の背景画*/
.border404{
    height: 30px;
    background: #C7D527;
    z-index: 100000;
}
.kumo{
    position: relative;
    height: 350px;
    overflow: hidden;
}
.kumo0{
    position: absolute;
    background: #C7D527;
    border-radius: 50%;
    z-index: 10000;
}
.kumo1{
    width: 150px;
    height: 140px;
    top: -80px;
    left: 0;
}
.kumo2{
    width: 100px;
    height: 100px;
    top: -60px;
    left: 150px;
}
.kumo3{
    width: 150px;
    height: 140px;
    top: -80px;
    left: 250px;
}
.kumo5{
    width: 100px;
    height: 100px;
    top: -60px;
    left: 400px;
}
.kumo6{
    width: 150px;
    height: 140px;
    top: -80px;
    right: 0px;
}
.kumo7{
    width: 100px;
    height: 100px;
    top: -60px;
    right: 150px;
}
.kumo8{
    width: 150px;
    height: 140px;
    top: -80px;
    right: 250px;
}
.kumo9{
    width: 100px;
    height: 100px;
    top: -60px;
    right: 400px;
}


/*雨画像の大きさ、向き*/
.rainny img{
    width: 60px;
}
.sakana1 img,.sakana4 img{
    transform: scale(-1, 1);
}
.sakana2 img,.sakana4 img{
    width: 50px;
}
.namakubi1 img,.namakubi3 img{
    width: 40px;
}
.namakubi2 img,.namakubi4 img{
    width: 35px;
}
/*上から来るぞ*/
.rainny{
    height: 360px;
}
.sakana1{
    animation: s1 2s ease-in 0s infinite normal;
}
.sakana4{
    animation: s1 2.8s ease-in 0s infinite normal;
}
@keyframes s1{
    0%{
        top: 0%;
    }
    100%{
        top: 100%;
    }
}
.sakana2{
    animation: s2 2s ease-in 0s infinite normal;
}
@keyframes s2{
    0%{
        top: -10%;
    }
    100%{
        top: 120%;
    }
}
.sakana3{
    animation: s3 3s ease-in 0s infinite normal;
}
.sakana5{
    animation: s3 1.5s ease-in 0s infinite normal;
}
@keyframes s3{
    0%{
        top: -20%;
    }
    100%{
        top: 100%;
    }
}
.namakubi1{
    animation: n1 2s ease-in 0s infinite normal;
}
.namakubi3{
    animation: n1 3s ease-in 0s infinite normal;
}
@keyframes n1{
    0%{
        top: -10%;
    }
    100%{
        top: 100%;
    }
}
.namakubi2{
    animation: n1 4s ease-in 0s infinite normal;
}
.namakubi4{
    animation: n1 5s ease-in 0s infinite normal;
}
@keyframes n1{
    0%{
        top: -20%;
    }
    100%{
        top: 110%;
    }
}

/*背景画像の位置*/
.rainny{
    position: relative;
}
.rain{
    position: absolute;
    z-index: 1000;
}
.sakana1{
    top: -0px;
    left: 50px;
}
.sakana2{
    top: -0px;
    left: 250px;
}
.sakana3{
    top: -0px;
    left: 480px;
}
.sakana4{
    top: -0px;
    right: 50px;
}
.sakana5{
    top: -0px;
    right: 230px;
}
.namakubi1{
    top: 0;
    left: 150px;
}
.namakubi2{
    top: 0;
    left: 370px;
}
.namakubi3{
    top: 0;
    right: 140px;
}
.namakubi4{
    top: 0;
    right: 340px;
}

/*背景画像の大きさ、向き*/
.character img{
    width: 100px;
}
.sugi2 img{
    width: 80px;
}
.fuki1 img{
    width: 60px;
}
.inu1 img{
    width: 80px;
    transform: scale(-1, 1);
}
/*背景画像の位置*/
.character{
    position: relative;
}
.chara{
    position: absolute;
}
.sugi1{
    top: -110px;
    left: 6%;
}
.sugi2{
    top: -90px;
    left: 14%;
}
.fuki1{
    top: -50px;
    left: 30%;
}
.inu1{
    top: -70px;
    right: 40%
}
.inu2{
    top: -90px;
    right: 30%;
}
.inu2:hover{
    cursor: pointer;
}
.inu2:active{
    top: -190px;
    right: 80%;
    transform: rotate(10deg);
}
.sugi3{
    top: -105px;
    right: 6%;
}
@media(max-width: 500px){
    .sugi2,.inu1{
        display: none;
    }
}

/*背景スクロール*/
.back400{
    border-bottom: 20px solid #C7D527;
    position: relative;
}


/*なまはげ移動*/
.road{
    position: relative;
}
.namahage img{
    width: 130px;
    transform: scale(-1, 1);
}
.namahage{
    position: absolute;
    top: -171px;
    left: 30px;
    animation: namahage 12s ease-in 0s infinite normal forwards;
}
@keyframes namahage{
    0%{
        left: -50%;
    }
    30%{
        left: 8%;
    }
    50%{
        left: 150%;
        transform: scale(1, 1);
    }
    51%{
        left: 150%;
        transform: scale(-1, 1);
    }
    80%{
        left: 92%;
    }
    100%{
        left: -50%;
        transform: scale(-1, 1);
    }
}

/*nav*/
.nav404{
    padding: 30px 10px;
    background: #C7D527;
    display: flex;
}
.search-category404{
    flex: 0 1 60%;
    margin-right: 1%;
    position: relative;
}
.share-blog404{
    flex: 0 1 38%;
    margin-left: 1%;
}
.search-category404,.share-blog404{
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.nav404 h3{
    position: absolute;
    text-align: left;
    font-size: 16px;
    background: #7f880c;
    color: #fff;
    width: 100%;
    top: 0;
    left: 0;
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 30px
}
@media(max-width: 500px){
    .nav404{
        display: block;
    }
    .search-category404{
        margin: 0;
        margin-bottom: 20px;
    }
    .share-blog404{
        margin: 0;
    }
}

/*検索*/
.search404{
    width: 100%;
    margin-top: 40px;
    margin-bottom: 15px
}
.search404-box{
    background: #fff;
    border: 2px solid #7f880c;
    width: 80%;
    padding: 5px 8px;
    color: #7f880c;
}
.search404-btn{
    color: #fff;;
    background: #F82038;
    padding: 5px;
}
/*カテゴリー*/
.category404{
    display: flex;
    justify-content: space-between;
    border-top: 3px solid #C7D527;
    margin-bottom: 15px;
}

.category404 li{
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    background: #C7D527;
    flex-grow: 1;
    border-right: 1px solid #fff;
    border-bottom: 3px solid #C7D527;
    position: relative;
    z-index: 1000;
}
.category404 li:first-child{
    border-left: 1px solid #C7D527;
}
.category404 li:last-child{
    border-right: 1px solid #C7D527;
}
.category404 li a{
    color: #fff;
    display: block;
    padding: 10px 0;
}
.category404 li:hover{
    background: #fff;
}
.category404 li:hover a{
    color: #C7D527;
}
/*カテゴリーアニメーション*/
.search-category404{
    height: 300px;
}
.cate-sakana{
    display: none;
    width: 40px;
    position: absolute;
    top: 4px;
    left: 5px;
}
.cate-owan{
    display: none;
    width: 30px;
    position: absolute;
    top: 3px;
    left: 5px;
}
.cate-osake{
    display: none;
    width: 28px;
    position: absolute;
    top: 2px;
    left: 5px;
}
.cate-inaho{
    display: none;
    width: 30px;
    position: absolute;
    top: 1px;
    left: 5px;
}
.sakana404:hover .cate-sakana{
    display: block;
    animation: catSakana 3s ease-in 0s 1 normal forwards;
}
@keyframes catSakana{
    0%{
        top: 4px;
        left: 5px;
    }
    50%{
        top: 200px;
        left: 5px;
    }
    100%{
        top: 200px;
        left: 450%;
    }
}
.owan404:hover .cate-owan{
    display: block;
    animation: catOwan 3s ease-in 0s 1 normal forwards;
}
@keyframes catOwan{
    0%{
        top: 3px;
        left: 5px;
    }
    50%{
        top: 195px;
        left: 5px;
    }
    100%{
        top: 195px;
        left: 450%;
    }
}
.osake404:hover .cate-osake{
    display: block;
    animation: catOsake 3s ease-in 0s 1 normal forwards;
}
@keyframes catOsake{
    0%{
        top: 2px;
        left: 5px;
    }
    50%{
        top: 195px;
        left: 5px;
    }
    100%{
        top: 195px;
        left: -450%;
    }
}
.inaho404:hover .cate-inaho{
    display: block;
    animation: catInaho 3s ease-in 0s 1 normal forwards;
}
@keyframes catInaho{
    0%{
        top: 1px;
        left: 5px;
    }
    50%{
        top: 192px;
        left: 5px;
    }
    100%{
        top: 192px;
        left: -450%;
    }
}

.cate-namahage img{
    width: 300px;
    position: absolute;
    top: 100%;
}
.search-category404:hover img{
    animation: catHage 5s ease-in 0s 1 normal forwards;
}
@keyframes catHage{
    0%{
        top: 100%;
    }
    28%{
        top: 38%;
    }
    60%{
        top: 38%;
    }
    100%{
        top: 100%;
    }
}
/*シェア*/
.share-blog404{
    height: 300px;
}
.share404{
    margin-top: 40px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.share404 li{
    display: inline-block;
    box-sizing: border-box;
    flex-grow: 1;
}
.share404 .fab{
    font-size: 50px;
    background: #fff
}
.fa-twitter-square{
    color: #55acee;
    border: 2px solid #fff;
    border-top: none;
}
.fa-facebook-square{
    color: #3b5998;
    border: 2px solid #fff;
    border-top: none;
}
.fa-line{
    color: #00b900;
    border: 2px solid #fff;
    border-top: none;
}
.fa-twitter-square:hover{
    color: #fff;
    background: #55acee;
    border: 2px solid #55acee;
    border-top: none;
}
.fa-facebook-square:hover{
    color: #fff;
    background: #3b5998;
    border: 2px solid #3b5998;
    border-top: none;
}
.fa-line:hover{
    color: #fff;
    background: #00b900;
    border: 2px solid #00b900;
    border-top: none;
}
/*ブログ404*/
.blog404{
}
.blog404 a{
    position: relative;
}
.blog404 img{
    max-width: 250px;
    object-fit: contain;
}
.blog404 i{
    display: none;
    position: absolute;
    bottom: 8px;
    right: 8px;
    transform:rotate(-30deg);
    font-size: 40px;
    color: #F82038;
    text-shadow: 0px 4px 1px #fff;
}
.blog404 :hover{
    opacity: 0.8;
}
.blog404 :hover i{
    display: block;
}
/*フッター404*/
.footer404{
    padding: 0;
    margin: 0;
    
}
.footer-inner404{
    background:#fa223a;
    padding: 30px 0;
}
.footer-item404{
    color: #fff;
    padding: 10px 0;
    list-style: none;
    text-align: center;
}
.footer-item404 li{
    text-align: center;
    display: inline-block;
}
.footer-item404 li a{
    color: #fff;
    padding: 3px 10px;
}
.footer-item404 li a:hover{
    text-decoration: underline;
}
.copyright404{
    color: #fff;
    text-align: center;
    padding: 0;
    margin: 0;
}
@media(max-width: 500px){
    .footer-item404 li{
        display: block;
        margin: 4px 0;
        padding-bottom: 18px;
    }
}