#MoL{
    opacity:0.97;/*★必須。スポットライト以外を隠す。1～0.1の間で指定。1で完全に隠す。0は指定しない*/
    transition:opacity 1s ease-out;/*★必須。透過の変化時間。1sは１秒。指定方法はお好みで*/
    width: 100%;
    height:100%;
}    
    
    /*★ここからスポットライト・ボタン指定。*/
#control{
    position:absolute;/*★固定位置指定。お好みで*/
    height:200px;
    width:200px;
    background-image: url("button.png");
    background-color: rgba(0,0,0,0);
    border: rgba(0,0,0,0);
    color:rgb(226, 223, 255);
    bottom:50px; right:50px;/*★位置指定。お好みで*/
    z-index:201;/*★必須。マウスストーカー領域(JavaScriptでz-index:200;が指定済み)の上に表示*/
}
#control:hover{
    background-image: url("button1.png");
    color: rgb(65, 46, 38);
}
#defaultCanvas0{
    position: fixed; /*canvasを固定*/
    top: 0; /*canvasを上に固定*/
    z-index: -1;
}


#loading {
  width: 100vw;
  height: 100vh;
  transition-delay: 2.5s;
  transition-duration:1s;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.loaded {
    opacity: 0;
    visibility: hidden;
  }
.explain{
    position:fixed;
    width: 100vw;
    text-align: center;
    height: auto;
    color: #fff;
    font-family: sans-serif;
    font-size: 150%;
    top:40vh;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);  
}
.eye1 {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 100%;
  animation: flash-eye 2.0s infinite ease-in-out;
  top:48vh;
  left: 50%;
  margin-left:21px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.eye2 {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100%;
    animation: flash-eye 2.0s infinite ease-in-out;
    top:48vh;
    left: 50%;
    margin-left:-21px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.iris1 {
    position: fixed;
    width: 18px;
    height: 18px;
    background-color: #000;
    border-radius: 100%;
    animation: flash-eye 2.0s infinite ease-in-out;
    top:48vh;
    left: 50%;
    margin-left:21px;
    margin-top:1px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.iris2 {
    position: fixed;
    width: 18px;
    height: 18px;
    background-color: #000;
    border-radius: 100%;
    animation: flash-eye 2.0s infinite ease-in-out;
    top:48vh;
    left: 50%;
    margin-left:-21px;
    margin-top:1px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.high1 {
    position: fixed;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-radius: 100%;
    animation: flash-eye 2.0s infinite ease-in-out;
    top:48vh;
    left: 50%;
    margin-left:24px;  
    margin-top:3px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.high2 {
    position: fixed;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-radius: 100%;
    animation: flash-eye 2.0s infinite ease-in-out;
    top:48vh;
    left: 50%;
    margin-left:-18px;
    margin-top:3px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}  

/* ローディングアニメーション */
@keyframes flash-eye {
  0%,8%,16%, 25%,40%,100%{
    opacity: 1;
  }
  9%,15%,26%, 39%{
    opacity: 0;
  }
}

span{
    display: inline-block;
}
body{
    overflow:hidden;
    font-family:'Zen Maru Gothic', sans-serif;
    text-align: left;
    background-color: rgb(18,19,34);
    color:#fff;
    font-size: 1.3vw;
    margin:0px;
    padding:0px;
}
main{
    height:90vh;
}
footer{
    position:absolute;
    font-size: 80%;
    margin-left:3vw;
    bottom:2vh;
}
.s{
    display: none;
}
.logo{
    height:2vw;
    width:auto;
    margin-right:25px;
}

#left{
    width:33vw;
    position:absolute;
    left: 0;
}
.discription{
    font-size: 110%;
    color: rgb(195, 195, 195);
    margin-left:3vw;
    margin-top: 22vh;
}
.e1{
    font-size: 140%;
    color:rgb(148, 168, 255);
    transition: .3s;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.e1:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
.e2{
    font-size: 140%;
    transition: all .3s;
    color:rgb(149, 204, 124);
}
.e2:hover {
    -webkit-animation: zoom .3s;
    animation: zoom .3s;
  }
  @-webkit-keyframes zoom {
    50% {
      -webkit-transform: scale(1.2);
    }
  }
  @keyframes zoom {
    50% {
      transform: scale(1.2);
    }
}
.e3{
    font-size: 140%;
    transition: all .3s;
    color:rgb(149, 204, 124);
}
.e3:hover{
    color:rgb(255, 239, 94);
    font-weight: bold;
}
.e4{
    font-size: 140%;
    color:rgb(245, 124, 190);
    transition: .3S;
}
.e4:hover{
    transform:rotate(6deg);
}
.e5{
    font-size: 140%;
    color:rgb(255, 214, 81);
    transition: .5s;
    border-radius:0 30% 30% 0;
}
.e6{
    background: linear-gradient(90deg,rgba(0,0,0,0));
    border-radius: 20% 0 0 20%;
    transition:.5s;
}
.e6:hover{
    background: linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 220, 155), rgba(0,0,0,0));
    color:rgb(18, 19, 34);
}
.e6:hover .e5{
    color:rgb(18, 19, 34);
}


#center{
    width:33vw;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.title{
    font-family: 'Stick', sans-serif;
    color:rgb(255,255,255);
    margin-top: 5vh;
    font-size: 420%;
    line-height: 100%;
    margin-bottom:8vh;
}
.o{
    transition:all .2S;
}
.o:hover{
    color: rgb(235, 209, 95);
}
.ba{
    transition:all .2S;
}
.ba:hover{
    color: rgb(250, 124, 223);
}
.ke{
    transition:all .2S;
}
.ke:hover{
    color: rgb(101, 142, 255);
}
.mi{
    transition:all .2S;
}
.mi:hover{
    color: rgb(255, 157, 91);
}
.tu{
    transition:all .2S;
}
.tu:hover{
    color: rgb(133, 216, 100);
}
.k{
    transition:all .2S;
}
.k:hover{
    color: rgb(187, 115, 255);
}
.o2{
    transition:all .2S;
}
.o2:hover{
    color: rgb(235, 209, 95);
}
.t2{
    padding-left: 5vw;
}
.theme1{
    font-size: 200%;
    margin-top: 10vh;
    margin-bottom: 5vh;
    padding-left: 2.5vw;
    color: rgb(18, 19, 34);
    font-weight: bold;
    background: linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 220, 155), rgba(0,0,0,0));
    border-radius: 20% 0 0 20%;
    background-size: 200% auto;
    background-position: right center;
    transition: all .5s;
}
.theme1:hover{
    background-position: left center;
}
.theme2{
    font-size: 200%;
    margin-bottom:5vh;
    padding-left:19vw;
    color: rgb(18, 19, 34);
    font-weight: bold;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 220, 155), rgb(255,255,255));
    border-radius: 0 20% 20% 0;
    background-size: 200% auto;
    transition: all .5s
}
.theme2:hover{
    background-position: right center;
}
#right{
    width:33vw;
    position: absolute;
    right:0;
}
.date{
    font-size: 150%;
    margin-top: 10vh;
    margin-left:20px;
    line-height: 120%;
    margin-bottom: 10vh;
}
.d2{
    margin-left: 8vw;
}
.strong{
    font-size: 200%;
    transition: all .3s;
}
.strong:hover {
    -webkit-animation: zoom .3s;
    animation: zoom .3s;
  }
  @-webkit-keyframes zoom {
    50% {
      -webkit-transform: scale(1.2);
    }
  }
  @keyframes zoom {
    50% {
      transform: scale(1.2);
    }
}

.place{
    margin-top:5vh;
    font-size: 130%;
    margin-left:2vw;
    font-weight: bold;
}
.e{
    font-size: 50%;
}
.detail{
    margin-left:2vw;
}
.location{
    margin-top:8vh;
    font-size:90%;
    margin-left:2vw;
    color: rgb(226, 226, 226);
}
@media screen and (max-height:630px){
    /*★ここからスポットライト・ボタン指定。*/
    #control{
        position:fixed;/*★固定位置指定。お好みで*/
        height:15vh;
        width:20vw;
        background-image: none;
        background: linear-gradient(90deg, rgb(155, 216, 170), rgb(245, 236, 186));
        border: rgba(0,0,0,0);
        color:rgb(0, 0, 0);
        top:80vh; left:75vw;/*★位置指定。お好みで*/
        z-index:201;/*★必須。マウスストーカー領域(JavaScriptでz-index:200;が指定済み)の上に表示*/
    }
    #control:hover{
        background-image: none;
        background: linear-gradient(90deg, rgb(199, 186, 245), rgb(216, 155, 178));
        color:blueviolet;
    }
        
}
@media screen and (max-width:750px){
    #MoL{
        display: none;
    }

    #control{
        display: none;
    }
    #control:hover{
        display: none;
    }

    .explain{
        display: none;
    }
    body{
        font-size:2.5vw;
        overflow-y: scroll;
        overflow-x: hidden;
        margin:0;
    }
    footer{
        bottom:auto;
        margin: 0;
        width:80vw;
        padding-bottom:11vh;
        top:268vh;
        font-size: 2vh;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        text-align: center;
    }
    .s{
        display: inline;
    }
    .last{
        line-height: 250%;
    }    
    .logo{
        height:5vw;
        width:auto;
    }
    #center{
        width:80vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        text-align: center;
    }
    .title{
        font-size: 10vh;
    }
    .t2{
        padding:0;
    }
    .theme1{
        text-align: left;
        font-size: 5vh;
        margin-top: 12vh;
        padding-left: 4vw;
    }
    .theme2{
        font-size: 5vh;
        padding-left: 30vw;
    }
    #left{
        width: 80vw;
        top:75vh;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        text-align: center;
    }
    .discription{
        font-size: 3vh;
    }
    #right{
        width:80vw;
        top:165vh;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        font-size: 120%;
        text-align: center;
    }
    .date{
        line-height: 180%;
        font-size: 4vh;
        margin-left: 0;
    }
    .place{
        font-size: 3.5vh;
    }
    .detail{
        font-size: 2.8vh;
    }
    .e{
        display: none;
    }
    .location{
        font-size: 2.5vh;
    }
    .align{
        text-align: left;
    }
}