#main{position:relative;}
#main img{width:100%;}

#bg{position:fixed; top:0; left:0; width:100%; height:110vh; background:#000; margin:0 auto; z-index:2;}
#bg::before,
#bg::after{
display:block;
position:fixed;
content:"";
top:0;
left:0;
width:100%;
height:100%;
background-position:top 55% center;
background-repeat:no-repeat;
z-index:2;}
#bg::before{background-image:url(../img/bg.jpg); animation:10s fuwafuwa infinite;}
#bg::after{background-image:url(../img/bg_pat.webp); mix-blend-mode:screen;}
@media screen and (max-width:980px){#bg::before,#bg::after{background-size:1300px auto; background-position:top 105% center;}}
@media screen and (max-width:420px){#bg::before,#bg::after{background-size:1000px auto; background-position:top -200px center;}}

#main > #main-inner{display:flex; position:relative; justify-content:center; align-items:center; padding:100px 0; z-index:3;}
@media screen and (max-width:640px){#main > #main-inner{padding:50px 0;}}

#main > #main-inner .logo{position:relative; width:100%; max-width:1100px; margin:0 auto;}
#main > #main-inner .logo > p{position:relative;}
#main > #main-inner .logo > div{position:absolute; width:100%; top:0; left:0;}

#info{width:80%; max-width:800px; margin:100px auto; box-shadow:0 0 10px #0082ff ,0 0 20px #0082ff;}
@media screen and (max-width:420px){#info{margin:50px auto;}}

a#share{display:block; width:80px; margin:0 auto; transition:all .2s ease;}
a#share:hover{filter:drop-shadow(0 0 10px #0082ff) drop-shadow(0 0 5px #0082ff);}
@media screen and (max-width:640px){a#share{width:60px;}}

/*アニメーション*/
@keyframes fuwafuwa{
  0%, 100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-30px);
  }
}