#wrap {
    display: flex;
    justify-content: center;
}
#ctrl_1 {
    height: 600px;
    width: 300px;
    padding: 3px 0;
    border: 1px solid #BBB;
}
#ctrl_2, #ctrl_2_2 {
    height: 600px;
    width: 200px;
    border: 1px solid #BBB;
    padding: 3px 10px;
}
#ctrl_1 p, #ctrl_2 p, #ctrl_2_2 p {
    margin: 10px 0;
    height: 25px;
}
input[type='range'] {
    width: 128px;
    height: 16px;
}
#ctrl_3 {
    margin-top: 20px;
    text-align: center;
}
#ctrl_3 button {
    padding: 10px 15px;
}
#waveform_wrap {
    display: flex;
    justify-content: center;
}
#waveform {
    border: 1px solid #BBB;
}
#tone_info {
    text-align: center;
}
#keyboard {
    display: flex;
    justify-content: center;
}
.key {
    border: 1px solid #BBB;
    border-bottom: solid 4px #BBB;
    position: relative;
    border-radius: 2px;
    user-select: none;
}
.wk {
    background-color: #fff;
    height: 100px;
    width: 30px;
    z-index: 1;
    color: #111;
}
.bk {
    background-color: #111;
    height: 60px;
    width: 20px;
    z-index: 2;
    margin-left: -11px;
    margin-right: -11px;
    color: #FFF;
}
#k_C3, #k_C4, #k_C5 {
    font-weight: bold;
    color: darkred;
}
.pressed {
    border-bottom: solid 4px red;
}
.klabel {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.5em;
    text-align: center;
    display: block;
}
#notice {
    border: solid 1px #BBB;
    padding: 10px;
    width: 700px;
    margin-top: 50px;
    margin-left: calc(50% - 350px);
}
#delay_effect, #chorus_effect, #oscillator {
    border-top: dashed 1px #BBB;
    padding: 0 10px;
}
#oscillator {
    border: none;
}