@media screen and (min-width: 730px) {
  * {
    font-family: "Noto Sans JP", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  }

  .meiryo,
  header#header > h4.title div.head2 *,
  textArea#chordArea {
    font-family: "Meiryo", "Noto Sans JP", sans-serif, "Meiryo UI" !important;
  }

  div.container {
    /*width: 70%;*/
  }

  span.forMuse {
    margin:auto 10px;
  }

  div.head3 {
    text-align: right;
  }

  .mobileOrTablet {
    display: none;
  }
}

@media screen and (max-width: 729px) {
  div.head3 {
    text-align: center;
  }

  .pcOnly {
    display: none;
  }

  div.head3 {
    padding-top: 0;
    padding-bottom: 5px;
  }
}

header#header {
  padding: 20px;
  background-color: navy;
}

header#header > h4,
header#header > h4 > span {
  color:white !important;
  /* color:#cfffcf !important; */
  /* color:#051060 !important; */
}

#howToUseButton {
    position: absolute;
    right: 10px;
    top: 100px;
  /*float: right;*/
  /*margin: 10px;*/
}

section {
  background-color: #fafffa;
}

/* 半音上行 */
/*.C, .Bs {color:#e83f2f}*/
/*.Cs, .Db {color:#f2a534}*/
/*.D {color:#f1ec3c}*/
/*.Ds, .Eb {color:#c9db33}*/
/*.E, .Fb {color:#64b62f}*/
/*.F, .Es {color:#60be91}*/
/*.Fs, .Gb {color:#66c6d4}*/
/*.G {color:#459fdb}*/
/*.Gs, .Ab {color:#1d4fa2}*/
/*.A {color:#744d9c}*/
/*.As, .Bb {color:#b562a3}*/
/*.B, .Cb {color:#e24193}*/

/* 五度圏＃ */
.C, .Bs {color:#e83f2f}
.G {color:#f2a534}
.D {color:#f1ec3c}
.A {color:#c9db33}
.E, .Fb {color:#64b62f}
.B, .Cb {color:#60be91}
.Fs, .Gb {color:#66c6d4}
.Cs, .Db {color:#459fdb}
.Gs, .Ab {color:#1d4fa2}
.Ds, .Eb {color:#744d9c}
.As, .Bb {color:#b562a3}
.F, .Es {color:#e24193}

/* 五度圏ｂ */
/*.C, .Bs {color:#e83f2f}*/
/*.F, .Es {color:#f2a534}*/
/*.As, .Bb {color:#f1ec3c}*/
/*.Ds, .Eb {color:#c9db33}*/
/*.Gs, .Ab {color:#64b62f}*/
/*.Cs, .Db {color:#60be91}*/
/*.Fs, .Gb {color:#66c6d4}*/
/*.B, .Cb {color:#459fdb}*/
/*.E, .Fb {color:#1d4fa2}*/
/*.A {color:#744d9c}*/
/*.D {color:#b562a3}*/
/*.G {color:#e24193}*/

#estimatedKey {
  font-size: 0.7rem;
  display: block;
  height: 0px;
  color: gray;
  font-weight: bold;
  white-space: nowrap;
}

.section {
  padding: 24px;
}

.columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: -0.75rem;
    margin-bottom: 0 !important;
}

#chordArea {
  min-height: 460px;
  border-style: none;
  box-shadow: none;
  resize: none;
  font-size:0.9em;
  /* padding:0; */
  color: black;
  line-height: 1.7;
}

#chordSampleButton {
    /*margin-top: -4px;*/
    /*!* margin-right: 0; *!*/
    /*margin-left: 10px;*/
    /*padding: 3px 8px;*/
    /*font-size: 0.9rem;*/
    font-weight: bold;
    /*color: gray;*/
    /*height: min-content;*/
    border-radius: 5px;
    vertical-align: text-bottom;
}
.abcPreview {
    color: #f2a534;
    font-weight: bolder;
    /*background-color: white;*/
}
input[type="checkbox"]#abcPreview {
    margin-left: 6px;
    accent-color: #da7c01;
}

.abcjs-inline-audio {
    height: 30px !important;
    background-color: #f5b76a !important;
}
.abcjs-midi-progress-background {
    background-color: #de8e2b !important;
}

#previewArea {
  font-weight: bold;
  min-height: 490px;
  max-height: 600px;
  overflow-y: overlay;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
}

#previewArea p {
  margin-top: 0;
}

#previewArea .root,
#previewArea .on-chord,
#previewArea .chord-type {
    white-space: nowrap;
}

#previewArea .root {
    font-size: 1.5em;
}

#previewArea .root:not(:first-child):before {
    content: " ";
    letter-spacing: .65em;
}

#previewArea .on-chord {
    font-size: 1.2em;
}

#previewArea .chord-type {
    color: #777;
}

#previewArea .resume,
#previewArea .stop,
#previewArea .streak {
    color: #888;
    white-space: nowrap;
}

#previewArea .streak {
    font-size: inherit;
}

#previewArea .resume+.resume:before,
#previewArea .separator+.root:not(:first-child):before,
#previewArea .space+.root:not(:first-child):before,
#previewArea .stop+.stop:before,
#previewArea .streak+.streak:before {
    content: "" !important;
}

#previewArea .separator {
    opacity: .6;
    margin-right: 1.1em;
    vertical-align: text-bottom;
}

#previewArea .separator:not(:first-of-type):before {
    content: " ";
    letter-spacing: .65em;
}

#previewArea .comment {
    color: gray;
    /* background-color: whitesmoke; */
    display: inline-block;
    margin-top: 4px;
    font-size: 0.9em;
    font-weight: 100;
    font-family: Ubuntu;
}

#previewArea .vocalRange {
    color: gray;
    background-color: antiquewhite;
    display: inline-block;
    margin-top: 7px;
    font-size: 0.9em;
}

#previewArea .invalid {
  color: #f44 !important;
  border: 1px solid #faa;
  background-color: #fee;
  padding: 0 .2em;
}

output.note-status-output {
  display: none !important;
}

.center {
  text-align: center;
}

footer.footer {
    background-color: rgba(175, 241, 197, 0.65);
    color: dimgray;
    padding: 3rem 1.5rem 6rem;
}