@charset "utf-8";
/* CSS Document */
body,html { margin: 0; height: 100%;background-color: #000;}
        /*.i4 body { background-color: #000;}*/
        .intro body { background-image: url("../iframe/img/4.svg"); background-repeat: no-repeat; background-size: cover;}
        
        .play body { background-color: #FFF;}
        #slide { height: 100%; filter: sepia(30%);
        position:fixed; top:50%; left: 50%; transform: translate(-50%,-50%);
            width: 100%; z-index: 1; opacity: 0; /*overflow: hidden;*/}
        .play #slide { opacity: 1;transition: all .4s ease-in-out 1s;}
        iframe { position: absolute; border: none; opacity: 0; background-color: transparent;
            width: 100%;
            height: 100%;
            transition: opacity 1s ease-in-out;}
        .i4 iframe { opacity: 0!important;}
        #i4 {}
        .i4 #i4,.i5 #i5 { opacity: 1!important;/*transition: opacity 1s ease-in-out 2s;*/}
        
        #slide iframe { transform: scale(1); }
        #slide iframe.show { /*animation: iframe 10s ease 0s;*/ }
        
        @keyframes iframe {
to {transform: scale(2);}
}
        
        #i4,#i5 { position:fixed; top:50%; left: 50%; transform: translate(-50%,-50%); height: 100%;}
        #i5 { transition: none;}
        
        #play {}

   
       
        
        #rain { width: 100%; height: 100%; position: fixed; top:0; left: 0; display: flex; justify-content: space-around; opacity: 0;transition: all .4s ease 0s;}
        .i4 #rain { display: flex; opacity: 1; }
        #rain div { height: 100%; width: calc( 100% / 40 ); background-color: #FFF;}
        .play #rain { transform: scale(200);opacity: 1; transition: all 4s ease 0s;}
        
        #rain div span { display: block; width: 100%; height: 100%; background-color: rgba(222,0,3,1.00); transform: scaleY(0); transform-origin: 50% 0;}
        .i4 #rain div span { transform: scaleY(1);}
        
        .i4 #rain div:nth-child(1) span{ transition: transform 8s ease 8s;}
        .i4 #rain div:nth-child(2) span{ transition: transform 15s ease 8.2s;}
        .i4 #rain div:nth-child(3) span{ transition: transform 8s ease 8.1s;}
        .i4 #rain div:nth-child(4) span{ transition: transform 7.8s ease 8.2s;}
        .i4 #rain div:nth-child(5) span{ transition: transform 12s ease 8s;}
        .i4 #rain div:nth-child(6) span{ transition: transform 8.2s ease 8.2s;}
        .i4 #rain div:nth-child(7) span{ transition: transform 11s ease 8.1s;}
        .i4 #rain div:nth-child(8) span{ transition: transform 8.1s ease 8.1s;}
        .i4 #rain div:nth-child(9) span{ transition: transform 13s ease 8.3s;}
        .i4 #rain div:nth-child(10) span{ transition: transform 7.4s ease 8.3s;}
        .i4 #rain div:nth-child(11) span{ transition: transform 7.4s ease 8s;}
        
        #start { width: 100%; text-align: center; position: fixed; top:50%; left: 0; transform: translateY(-50%); z-index: 2; display: none;}
        #start h1 {font-family: 'RocknRoll One', sans-serif; color: #FFF; font-size: 12vw; font-weight: normal;}
        #start h1 span { display: block; font-size: 40%;}
        .intro #start { display: block;}
        
        
       

        .buble1 { background-color:rgba(255,13,17,.1); width:90vw; height: 90vw; position: fixed; bottom:-20vw; border-radius: 50%; left: -25vw; }
        .buble2 { background-color:rgba(255,240,0,.1); width:30vw; height: 30vw; position: fixed; bottom:70vw; border-radius: 50%; left: 15vw; }
         .buble3 { background-color:rgba(0,113,255,.1); width:80vw; height: 80vw; position: fixed; top:-10vw; border-radius: 50%; right: -15vw; }
        .buble { opacity: 0; }
        .play .buble { opacity: 1; z-index: 3;transition: all .4s ease-in-out 2s;}
        
        #close { width: 60px; height: 60px; cursor: pointer; position: fixed; top:0; right: 0; z-index: 9; background-color: rgba(0,0,0,.5); background-image: url("../img/close.svg"); background-repeat: no-repeat; background-size: 35px; background-position: center;}
        .intro #close {  display: none;}
        
        #play { box-sizing:border-box; display: inline-block; font-family: Arial, Helvetica, "sans-serif"; font-size:3vw; 
	
    cursor: pointer;
	margin: 0 auto; 
	
	padding:1em 4em; color:#fff; text-decoration:none; text-align:center; border-radius:.3em;  line-height:1; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffdf92+0,e1ad2f+100 */
/*background:#628684;*/ /* Old browsers */ border: 2px solid #fff;}

#log { position: fixed; top:0; left: 0; padding: 2vw;color: rgba(27,223,3,1.00); font-size: 8vw; z-index: 2;
font-family: 'Noto Sans JP', sans-serif;}
        
        @media screen and (orientation: landscape) {
           #slide { height: 100%;
            width: 100vh;}
           #i5 { width: 150%; height: 150vw;}
           #rain { width: 100vh; height: 100%; left: 50%; transform: translateX(-50%);}
            
            .buble1 { width:45vw; height: 45vw;bottom:-10vw;left: -12vw; }
        .buble2 { width:15vw; height: 15vw; bottom:35vw; left: 7vw; }
         .buble3 {  width:40vw; height: 40vw; top:-5vw; right: -7vw; }
            #play { font-size:1.75vw; }
            #start h1 { font-size: 6vw;}
            #log {padding: 1vw;font-size: 4vw;}
        }
        
        #pro { width: 100%; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); text-align: center; color: #aaa; font-size: 70%; opacity: 0;}
        #pro:before { content: ""; display: block; width: 60px; height: 60px; background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-size: contain; margin-bottom: 1em; margin-left: auto; margin-right: auto;}
.intros #pro { opacity: 1;}
        
        .intros #wrap { opacity: 0;}
        
        #slide div { width: 100%; height: 100%; position: absolute; top:0; left: 0;
       /* Permalink - use to edit and share this gradient. パーマリンク - このグラデーションの編集や共有に使用します: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0+54,1+100 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 54%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

/* ここに他のスタイルがあると想定 */

#release {
    height: 60px; width: 60px; text-indent: -9999px; background-color: rgba(255,255,255,.5); 
    line-height: 50px;
    color: #FFF;
    position: absolute;
    top: 0;
    right: 60px;
    cursor: pointer; z-index: 9;background-image: url("../img/help.svg"); background-repeat: no-repeat; background-size: 35px; background-position: center;
}
.intro #release { display: none;}

 /* モーダルのスタイル */
.modal {font-family: 'Noto Sans JP', sans-serif;
  opacity: 0;
  position: fixed;
  z-index: 9;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); transition: opacity .5s ease 0s; transform: scale(0);
}

.modal-content { opacity: 0; transition: all .5s ease .2s;
  background-color: #262932;
  color: #fff;
  margin: 0% auto;
  padding: 20px;
  border: 1px solid #6BC6CC;
  max-width: 80%; height: 70%; overflow: auto; position: absolute; top:50%; left: 50%; transform: translate(-50%,-40%) scale(1); transform-origin: 50% 100%;
}

.close {
  color: #fff;
  float: right;
  font-size: 150%; line-height: 1;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #6BC6CC;
}

/* モーダルを表示するクラス */
.modal-show {
  opacity: 1; transform: scale(1);
}
.modal-show .modal-content {
    opacity: 1; transform: translate(-50%,-50%) scale(1);
}
#modal a {
    color: #6BC6CC;
    text-decoration: none;
    display: block;
    word-wrap: break-word;
}