html{
    overflow: hidden;
}

body{
    font-family: sans-serif;
    background-color: #fff;
    overflow: hidden;
}


/*========ハンバーガーメニュー================*/
/* ハンバーガーアイコン */
/*.hamburger {
    border: solid 1px #000;
    position: absolute;
    margin: 0 auto;
    bottom: 100px;
    width: 100%;
    height: 50px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    z-index: 999999999999999999999;
    text-align: center;
}
*/
.hamburger__line {
    position: absolute;
    height:100%;
    width: 5px;
    background-color: #fff;
    transition: all 0.5s;
}
.hamburger__line--2 {
    top: 5px;
    filter: drop-shadow(-0px -1px 5px #000a);
}
/*ハンバーガーがクリックされたら*/
.open .hamburger__line--2 {
    filter: drop-shadow(-0px 0px 3px #000);
    height: 50px;
    background-color: #000;
    transform: rotate(1440deg);
}
/* ナビパネル */
.sp-nav {
    /*filter: drop-shadow(-0px -10px 1px #0005);*/
    position: fixed;/*ハンバーガーがクリックされる前はWindow上側に隠す*/
    top: -80px;
    width: 100%; /* 出てくるスライドメニューの幅 */
    height: 70px;
    background-color: #fff0;
    transition: all 0.5s;
    z-index: 9999999999;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
    text-align: center;
}
/*ハンバーガーがクリックされたら上からスライド*/
.open .sp-nav {
    width: 100%;
    top: 18%;
}
/* メニュー解除パネル1 */
.black-bg {
    /*border: solid 10px #00f;*/
    position: fixed;
    width: 100%;
    height: 65%;
    top: 35%;
    background-color: #0000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    cursor: pointer;
}
/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
    opacity: 0.3;
    visibility: visible;
    z-index: 9999999999;
}

/*============Menu1===============*/
#menu1{
    /*border: solid 1px #f00;*/
    display: flex;
    position: relative;
    z-index: 123456789999999;
    margin-top: 40px;
    width: 100%;
    filter: drop-shadow(-0px -1px 1px #000);
    justify-content: space-evenly;
    text-align: center;
    letter-spacing: 0.3em;
    height: 50px;
    font-size: 90%;
}
#btn_music{
    margin-left: 14%;
    cursor: pointer;
}
#btn_art{
    cursor: pointer;
}
#btn_projects{
    margin-right: 6%;
    cursor: pointer;
}


/*=============Menu2================*/
#menu2 img{
    width: 59%;
    filter: drop-shadow(-0px -3px 1px #0003);
}
#menu2 h1{
    filter: drop-shadow(-0px -3px 1px #0005);
    color: #fff;
    font-size: 50%;
    font-weight: lighter;
    position: relative;
    margin-top: 2%;
}
/*===Menu2 Music===*/
#menu2_music{
    position: absolute;
    z-index: 12345678999999999;
    display: inline;
    text-align: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#menu2_music div{
    width: 25%;
    height: 15%;
    text-align: center;
    position: fixed;
}
#youtube{
    top: 30%;
    left: 13%;
}
#youtube_music{
    top: 45%;
    left: 13%;
    text-align: center;
}
#spotify{
    top: 30%;
    right: 13%;
}
#apple_music{
    top: 30%;
    left: 38%;
}
#itunes_store{
    top: 45%;
    left: 38%;
    text-align: center;
}
#amazon{
    top: 45%;
    right: 13%;
    text-align: center;
}
#shazam{
    top: 60%;
    left: 13%;
}
#deezer{
    top: 60%;
    left: 38%;
    text-align: center;
}
#soundcloud{
    top: 60%;
    right: 13%;
    text-align: center;
}
/*===Menu2 Art===*/
#menu2_art{
    position: absolute;
    z-index: 12345678999999999;
    display: inline;
    text-align: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#menu2_art div{
    width: 25%;
    height: 15%;
    text-align: center;
    position: fixed;
}
#opensea{
    top: 30%;
    left: 21%;
}
#base{
    top: 30%;
    right: 21%;
}
/*===Menu2 Projects===*/
#menu2_projects{
    position: absolute;
    z-index: 12345678999999999;
    display: inline;
    text-align: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#menu2_projects div{
    width: 25%;
    height: 10%;
    text-align: center;
    position: fixed;
}
#portfolio{
    top: 30%;
    left: 15%;
}
#tour{
    top: 30%;
    left: 38%;
}


/*===Name上===*/
/*#ura1{
    position: absolute;
    z-index: 1234567899;
    background-color: #f0f;
    padding: 6% 30%;
    top: 100%;
}
#ura2{
    position: absolute;
    z-index: 1234567899;
    background-color: #0afc;
    padding: 6% 20%;
    right: 0;
    top: 100%;
}*/

/*===白パネル===*/
#siro_panel{
    /*border: solid 1px red;*/
    position: fixed;
    z-index: 1234567891;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-color: #fff;
}
/*===映画黒帯===*/
#name{
    color: #fff;
    font-size: 5%;
    font-weight: 700;
    display: block;
    position: relative;
    z-index: 123456789999999;
    top: 25%;
    padding-left: 2%;
    text-align: center;
}
#kuro_ue{
    /*border: solid 1px red;*/
    position: fixed;
    z-index: 12345678999;
    width: 100%;
    top: -20px;
    height: 100px;
    background-color: #000;
    text-align: center;
}
#kuro_sita{
    /*border: solid 1px red;*/
    position: fixed;
    z-index: 12345678999;
    width: 100%;
    height: 70px;
    bottom: -20px;
    background-color: #000;
}
#ins{
    display: block;
    position: relative;
    z-index: 123456789999999;
    text-align: center;
    margin-top: 5%;
}
#warning{
    /*border: solid 1px red;*/
    position: fixed;
    z-index: 123456;
    width: 100%;
    height: 100%;
    bottom: -50%;
    background-color: #fff0;
}
#title_h1{
    /*border: solid 1px red;*/
    z-index: 2;
    position: relative;
    margin: 5% auto;
    font-size: 150%;
    text-align: center;
    font-size: 150%;
    filter: drop-shadow(-0px -1px 10px #000);
    color: #fff;
    font-weight: 100;
}
#load_h1{
    /*border: solid 1px red;*/
    z-index: 2;
    position: relative;
    margin: 0 auto;
    text-align: center;
    font-size: 100%;
    font-size: 300%;
    filter: drop-shadow(-0px -1px 10px #000);
    color: #000;
    font-weight: 100;
}

/*===Youtube====*/
#video-background,
#video-overlay {
  position: fixed;
  top: -100px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}
#video-background {
  z-index: 1;
}
#video-overlay {
  z-index: 2;
}

/*====呼吸====*/
#kaoru{
    /*border: solid 1px red;*/
    width: 100%;
    z-index: 1234567899;
    position: absolute;
    right: -0.5%;
    top: 35%;
    transition: all .2s ease-out;
    /*filter: drop-shadow(-1px 5px 1px #0004);*/
    /*animation: updown 4s alternate infinite ease-in-out, zoom 4s alternate infinite ease-in-out, revolve 200s infinite linear;*/
    animation: updown 30s alternate infinite ease-in-out, zoom 3s alternate infinite ease-in-out, revolve 100s infinite linear, side infinite ease-in-out ;/*animationの複数指定はコレ*/
}
@keyframes updown{
    0%{
        top: 25%;
    }
    100%{
        top: 15%;
    } 
}
    
@keyframes zoom{
    0%{
        width: 100%;
    }
    100%{
        width: 110%;
    }
} 

@keyframes revolve{
    0%{
        transform: rotate(135deg);
    }
    100%{
        transform: rotate(495deg);
    }
} 
/*
@keyframes side{
    0%{
        right: 10%;
    }
    100%{
        left: 10%;
    }
} 
*/
/*
@keyframes updown{
    0%{
        top: 26%;
    }
    100%{
        top: 25%;
    }
}

@keyframes zoom{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.05);
    }
}
*/