@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0;}
        body { background-color: #0B1014; transition: all .5s ease 0s;font-family: 'BIZ UDMincho', serif;}
        
        #wrap { width: 100%; height: 100%; transform: scale(.6);}


        
        
        @media (orientation: landscape) {
            #wrap { transform: scale(.3);}
        }
        
        .circle { width: 71.47058823529412vw; height: 69.55882352941176vw; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%) rotate(0deg); background-color: #CA0123; opacity: .7; transition: all .5s ease 0s;
        }
        .play .circle {animation: rotate .05s linear 0s infinite;}
        .circle:before { content: ""; display:block; width: 60vw; height: 40vw; position: absolute; top:0; left: -20vw; background-color: #CA0123; opacity: .7; transition: all .5s ease 0s; transition: all .5s ease 0s}
        .circle:after { content: ""; display:block; width: 60vw; height: 40vw; position: absolute; bottom:0; right: -20vw; background-color: #CA0123; opacity: .7; transition: all .5s ease 0s; transition: all .5s ease 0s}
        .black { width: 47.79411764705882vw; height: 46.17647058823529vw;background-color: #0B1014; position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%) rotate(0deg); z-index: 1; transition: all .5s ease 0s; transition: all .5s ease 0s}
        .black:before { content: ""; display:block; width: 40vw; height: 20vw; position: absolute; top:0; left: -5vw; background-color: #0B1014; transition: all .5s ease 0s}
        .black:after { content: ""; display:block; width: 40vw; height: 20vw; position: absolute; bottom:0; right: -5vw; background-color: #0B1014; transition: all .5s ease 0s}


.play .black {}
        
        .c1 .black {width: 27.79411764705882vw; height: 26.17647058823529vw;}
        .c1 .black:before {  width: 30vw; height: 10vw; left: -2vw;}
        .c1 .black:after {  width: 30vw; height: 10vw; right: -2vw;}
        
        .c2 .black {width: 37.79411764705882vw; height: 36.17647058823529vw;}
        
        .c2 .circle { background-color: #FDF3E9;}
        .c2 .circle:before { background-color: #FDF3E9;}
        .c2 .circle:after { background-color: #FDF3E9;}


        
        .c3 body { background-color: #FDF3E9; }

#angles { position: fixed; top:2vw; left: 2vw; font-size: 2vw; color: #CA0123; line-height: 1; font-family: Arial, Helvetica, "sans-serif"; margin: 0;}
.c3 #angles { color: #0B1014;}
.c2 #angles { color: #FDF3E9;}
        
        .c3 .circle { background-color: #0B1014;}
        .c3 .circle:before { background-color: #0B1014;}
        .c3 .circle:after { background-color: #0B1014;}
        .c3 .black { background-color: #FDF3E9;width: 57.79411764705882vw; height: 56.17647058823529vw;}
        .c3 .black:before {  background-color: #FDF3E9;}
        .c3 .black:after {  background-color: #FDF3E9;}

 .line .circle,.line .circle:before,.line .circle:after,.line .black,.line .black:before,.line .black:after { background-color: transparent; border:1vw solid #CA0123;}
.c2 .line .circle,.c2 .line .circle:before,.c2 .line .circle:after,.c2 .line .black,.c2 .line .black:before,.c2 .line .black:after { background-color: transparent; border:1vw solid #FDF3E9; }
.c3 .line .circle,.c3 .line .circle:before,.c3 .line .circle:after,.c3 .line .black,.c3 .line .black:before,.c3 .line .black:after { background-color: transparent; border:1vw solid #0B1014;}

/*.line .black,.line .black:before,.line .black:after { border-color:#0B1014;}
.c2 .line .black,.c2 .line .black:before,.c2 .line .black:after { border-color:#0B1014;}
.c3 .line .black,.c3 .line .black:before,.c3 .line .black:after { border-color:#FDF3E9;}*/
        
        
        .play .circle.c2s { animation: rotate .03s linear 0s infinite;}
        .play .circle.c3s { animation: rotate .02s linear 0s infinite;}
        .play .circle.c4s { animation: rotate .01s linear 0s infinite;}
        .play .circle.c5s { animation: rotate .005s linear 0s infinite;}
        .play .circle.c6s { animation: rotate .004s linear 0s infinite;}
        .play .circle.c7s { animation: rotate .003s linear 0s infinite;}
        .play .circle.c8s { animation: rotate .002s linear 0s infinite;}
        .play .circle.c9s { animation: rotate .001s linear 0s infinite;}
        
        
        @keyframes rotate {
to { transform: translate(-50%,-50%) rotate(360deg); }
}

@keyframes black {
0% { top: 50%;
    left: 50%; }
50% { top: 10%;
    left: 50%; }
100% { top: 50%;
    left: 10%; }
}
        

        
        .start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; }
#start { width:100%; height:100%; /*background-color:#FFF;*/ position:fixed; top:0; left:0; display:none;}
.intro #start { z-index:9;display:block; }
h1 { width: 100%;  color: #FFF; font-size: 14vw; text-align: center; margin: 0; font-weight: 500;margin-bottom: .5em;}

.intro h1#h1 { opacity: 0; z-index: -1;}
h1#h1 { position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); margin: 0; z-index: 1;
transition: opacity 1s ease 1s;}

          #playButton {  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;

	}
        #close { width:60px; height:60px; position:fixed; top:0; right:0; cursor:pointer; background-image:url("../img/close.svg") ;background-repeat:no-repeat;background-size: 20px; background-position:center; z-index: 10; }
.intro #close { display:none; }
        
         @media (orientation: landscape){
            #start h1 { font-size: 5vw;}
          #playButton { font-size:1.75vw; }
        }