@charset "utf-8";
/* CSS Document */
body {
            background: #f0f0f0;
             font-family: "New Tegomin", serif;
  font-weight: 400;
  font-style: normal;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0px; margin: 0;
        }
        .controls {
            margin: 0px;
            padding: 20px;
            text-align: center;
            width: 100%; position: fixed; bottom: 0; left: 0; box-sizing: border-box;
        }
        button {
            margin: 5px;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background 0.3s;font-family: "New Tegomin", serif;
  font-weight: 400;
  font-style: normal; font-size: 100%;
        }
        button:hover {
            background: #45a049;
        }
		button:disabled { display: none;}
		
		#movement-controls button { display: block; border-radius: 0; width: 100%; background-color: rgba(0,0,0,.1); text-align: left;}
        #current-movement {
            margin: 10px;
            font-size: 1.2em;
            color: #333; display: none;
        }
        #movement-controls {
            margin: 15px 0;
        }
        #instructions {
            margin-top: 10px;
            font-size: 0.9em;
            color: #666;
        }
        .progress-container {
            width: 100%;
            height: 5px;
            background: #eee;
            border-radius: 2.5px;
            margin: 15px 0;
            overflow: hidden;
            position: relative;
        }
        .progress-bar {
            width: 0%;
            height: 100%;
            background-color:#FF1185;
            transition: width 0.1s linear;
        }
        .progress-text {
            position: absolute;
            width: 100%;
            text-align: center;
            line-height: 20px;
            color: #333;
            font-size: 0.8em;
            mix-blend-mode: difference;
            color: white;
        }
		canvas { display: block; filter: contrast(150%); position: fixed; z-index: -1; }
		#movement-controls button.active {
    background-color: rgba(255,255,255,.2); /* 現在の楽章の色 */
    color: white;
}
		
		#playButton,#stopButton { width: 80px; height: 80px; padding: 0; border-radius: 50%; background-color: transparent; text-indent: -9999px; background-repeat: no-repeat; background-position: center; background-size: 50px;}
		#playButton { background-image: url("../img/play.svg");}
		#stopButton { background-image: url("../img/pause.svg");}
		
		h1 {color:#fff; margin-bottom: 1em; font-weight: 400;}

#book { width: 70px; height: 70px; position: fixed; top:0; right: 0; background-image: url("../img/book.svg"); background-repeat: no-repeat; background-position: center; background-size: 30px; cursor: pointer;}
#modal { width: 100%; height: 100svh; background-color: #FFF; border-radius: 0em; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; opacity: 0; transition: all .4s ease 0s;}
.open #modal { z-index: 99; opacity: 1; }
#modal #close { width: 60px; height: 60px; position: absolute; top:0; right: 0; cursor: pointer; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-position: center; background-size: 25px;}
#modal .inner { width: 100%; position: absolute; top:60px; height: calc( 100% - 60px );}
#modal .inner iframe { width: 100%; height: 100%; border: none;}
#overlay { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.6); z-index: -1; opacity: 0; transition: all .4s ease 0s;}
.open #overlay { opacity: 1; z-index: 99;}