/*目次リンク。*/
.bgcontents {
  margin: 1.6rem 0 1.6rem 1rem;
}
/*グレの歌の歌詞の部分。*/
.bgversetitle {
  font-size: 150%;
  margin-bottom: 0.4em;
}
.bgverseauthor {
  font-size: 110%;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
.bgversesubtitle {
  font-size: 110%;
  margin-left: 4em;
}
.bgversepart {
  font-size: 140%;
  margin-left: 5em;
}
/*歌詞の中のオーケストラのみの部分。*/
.bgverseinst {
  margin-left: 5rem;
}
.bgversenumber {
  float: left;
  width: 6rem;
  height: 1rem;
}
.bgverseparagraph {
  margin-left: 3rem;
  margin-bottom: 1.6rem;
}
/*原注。注は歌詞部分からすでに付けている。*/
.bgorgnote,
.bgorgnotenomark {
  text-indent: -2em;
  font-size: 90%;
  margin: 0 2em 0 4em;
}
/*訳注。*/
.bgtransnote {
  font-size: 90%;
  text-indent: -2em;
  margin : 0 2em 0 4em;
}
.bgtransnote div:not(:first-child) {
  text-indent: 1em;
}
/*
画像のサイズについての注意。
amebaseでimg全体に「max-width: 100%; height: auto;」を設定しているので、高さを上書きするためには、こちらで具体的な数値を設定するか、タグ内のstyleに設定する。タグの属性に指定する方法もあるが、優先させるにはstyleでなければダメなので注意。
例：○style="height: 140px;"　×height="140"
*/
/*中・丸括弧。太さは一定とする。。*/
.bgblanketwidth {
  width: 12px;
}
/*歌詞の最終合唱部分。中括弧が入るのでflexboxで処理。*/
.bgverselastchorus {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.bgverselastchorus div:first-child {
  width: 3rem;
}
.bgverselastchorus div:nth-child(2) {
  padding-right: 0.4rem;
}
.bgverselastchorus div:nth-child(3),
.bgverselastchorus div:last-child {
  display: flex;
  width: fit-content;
  flex-direction: column;
  justify-content: center;
}
.bgverselastchorus div:nth-child(3) {
  padding-right: 0.4rem;
}

/*配役。*/
.bgcast {
  font-size: 150%;
  margin-top: 1em;
  margin-bottom: 0.4em;
}
/*配役の幅は48remとする。木管の右側が最長で、それが24remになるため。*/
/*配役。カテゴリー。*/
.bgcastcategory {
  font-size: 130%;
  text-align:  center;
  max-width: 48rem;
    /*background-color: lightblue;*/
}
/*配役。横方向への汎用flexコンテナ。*/
.bgcastflex {
  display: flex;
  flex-wrap: wrap;
}
/*独唱者の幅。左のみ。右はfit-contentの方がよい。*/
.bgcastsolo > div:first-child {
  width: 24rem;
}
/*合唱。ここはアイテムが一つなので独自設定。*/
.bgcastflexchorus {
  display: flex;
  flex-wrap: wrap;
  max-width: 48rem;
  justify-content: center;
}
/*木管。左右の枠。*/
.bgcastwwfamily {
  display: flex;
  flex-wrap: wrap;
}
/*木管。楽器名枠の寸法。14+1+9=24rem。*/
.bgcastwwfamily div:first-child {
  width: 14rem;
}
/*木管。中括弧列、楽器属の総数列。上下中央に置くため縦のflexを使う。*/
.bgcastwwfamily div:nth-child(2), 
.bgcastwwfamily div:nth-child(3) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/*木管。中括弧の幅。*/
.bgcastwwfamily div:nth-child(2) {
  width: 1rem;
}
/*木管。「8フルート」「5オーボエ」「7 クラリネットA管」の幅。*/
.bgcastwwfamily div:nth-child(3) {
  width: 9rem;
} 
/*金管、打楽器。これらも幅は左側のみ設定。*/
.bgcastbwperc {
  width: 24rem;
}
/*弦楽器。中央に置くため、全体をflexboxに。*/
.bgcaststr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 48rem;
}
/*
弦楽器は左右に分かれないので、大枠だけほかのものに合わせておけば、中のボックスの幅はそれ以下になりさえすればOK。
*/
/*弦楽器。楽器名の幅。*/
.bgcaststr > div.bgcastflex > div:first-child {
  width: 9rem;
}
/*弦楽器。「～部に分割される」の数字とその右側の分割設定。*/
.bgcaststr > div.bgcastflex > div:nth-child(2) {
  display:flex;
}
/*弦楽器。数字。*/
.bgcaststr > div.bgcastflex > div:nth-child(2) > div:first-child {
  text-align: right;
  width: fit-content;
    /*background-color: lightcyan;*/
}
/*弦楽器。「部に分割される」「〃」。*/
.bgcaststr > div.bgcastflex > div:nth-child(2) > div:last-child {
  text-align:center;
  width: 7.5rem;
}
/*弦楽器。中括弧と「数倍の奏者で」。上下中央に置くため縦のflexを使う。*/
.bgcaststr > div.bgcastflex > div:nth-child(3),
.bgcaststr > div.bgcastflex > div:nth-child(4) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/*弦楽器。中括弧の幅。*/
.bgcaststr > div.bgcastflex > div:nth-child(3) {
  width: 1rem;
}
/*弦楽器。「数倍の奏者で」の幅。*/
.bgcaststr > div.bgcastflex > div:nth-child(4) {
  width: fit-content;
}
/*中括弧右側文字列のレスポンシブ設定。こちらでは何もしない。*/
.bgcastrespr {
}

/*以下本文。*/
/*「第～部」の部分。*/
.bgpart {
  font-size: 150%;
  text-align:  center;
  margin: 1.6rem 0;
}
/*文章中の縦長部分。和音構成音など。*/
.bginlinetable {
  display: inline-table;
  border-collapse: collapse;
  vertical-align: middle;
}
.bginlinetable td {
  text-align: center;
  line-height: 120%;
  padding: 0;
}
/*譜例。上マージンのみ設定。*/
.bgexp {
  margin: 1rem 0 0;
}
/*譜例下の訳注テーブル。*/
.bgexptransnotetable {
  border-collapse: collapse;
  margin: 0 auto 1rem;
}
/*譜例下の訳注文字列。*/
.bgexptransnote {
  font-size: 90%;
  color: darkgreen;
}
/*原注内の、枠囲み数字（小節番号）説明部分flex版。*/
.bgorgnoteflexcontainer {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  align-items: center;
  font-size: 90%;
  margin: 0 auto;
  padding: 0 1em 0 2.5em;
}
.bgorgnoteflexcontainer div {
  padding: 0 0.1em;
}
/*原注内の、枠囲み数字（小節番号）説明部分縦並び用flex。*/
.bgorgnoteflexcontainercol {
  display: flex;
  flex-direction: column;
}

/*譜例横並び用flex。主として小ガイドで使用。大ガイドでは一箇所のみ。*/
.bgexpflexcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/*譜例縦並び用flex。*/
.bgexpflexcontainercol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*オーディオファイル枠。*/
.bgaudio {
  text-align: center;
  text-indent: 0;
  margin: 1em 0 0 0;
}
/*各歌曲タイトル。*/
.bgliedtitle {
  text-align: center;
  font-size: 120%;
  font-weight: bold ;
  margin-bottom: 1.2rem;
}
/*数式入りテーブル。大ガイド第1部第8歌曲。*/
.bgformulatable {
  border-collapse: collapse;
  margin: 0 auto 1rem;
  margin-bottom: 1rem;
}
/*ボックス数字入りテーブル。大ガイド第1部第9歌曲。*/
.bgninthsongtable {
  border-collapse: collapse;
}
/*その表の余白を3点リーダーで埋めるため、文字列と3点リーダーを左右に寄せる。*/
.bgspacebetween {
  display: flex;
  justify-content: space-between;
}
/*第1部第9歌曲最初の表のためのflex設定。*/
.bg1-9flexcontainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.bg1-9flexcontainer .rowbetween {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bg1-9flexcontainer .col {
  display: flex;
  flex-direction: column;
}
.bg1-9flexcontainer > div:first-child {
  width: 5rem;
}
.bg1-9flexcontainer > div:nth-child(2) {
  width: 1rem;
  /*padding-right: 0.4rem;*/
}
.bg1-9flexcontainer > div:nth-child(3) {
  width: 23rem;
}
.bg1-9flexcontainer > div:nth-child(4) {
  width: 2rem;
}
/*第1部第9歌曲最初の表転記用クラス。ラベルのみで、中身なし。*/
.a, .b1, .b2 {}

/*上傍線部のある歌詞引用部分。*/
.bgwordsflexcontainer {
  display: flex;
  flex-wrap: wrap;
}
.bgwordsflexcontainer .col {
  display: flex;
  flex-direction: column;
  padding: 0 0 0.8em 0;
}
.bgwordsflexcontainer .item {
  padding: 0.2em 0.4em 0 0;
}
.bgupperline {
  border-top: solid 0.3em;
}
/*訳注中の引用など。*/
.bgtransnotequot {
  font-size: 90%;
  margin: 0 2em 0 6em;
}
/*「真昼」の引用用テーブル。*/
.bgmittagtable {
  border-collapse: collapse;
  margin: 0 auto;
}
.bgmittagtable td {
  text-align: left;
}

/*小版タイトル。*/
.bgktitle {
  font-size: 150%;
  font-weight:bold ;
  text-align: center;
  margin: 0 0 1.6rem 0;
}
/*小ガイドの譜例中の文字列用。*/
.bgexpwords {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  margin: auto 1rem;
  line-height: 1.2;
}

/*解説部分の見出し。*/
.bgcmttitle {
  color: navy;
  font-weight : bolder;
  margin: 2rem 0rem 0.5rem;
}
/*解説部分の囲み。*/
.bgcmtborder {
  border: solid;
  border-color: skyblue;
  border-width: 0.1em;
  margin: 1em 0;
  padding: 1em 3em;
}
/*解説部分の囲み内の表。*/
.bgcmtborderintable {
  margin: 0 auto 1em;
  line-height: 130%;
}
/*解説内の訳注。*/
.bgcmttransnote {
  color : blue;
  text-indent : -2em;
  margin: 0 1em 0 3em;
}
/*解説内の自注や引用等。*/
.bgcmtquot {
  text-indent: 1em;
  margin: 0 2em;
}
/*ヘッダーメニュー。*/
.bgheader_menu { 
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  font-size: 80%;
  z-index: 10;
  background-color: navy;
  width: 100%;
  line-height: 1.5;
}
/*ヘッダ内の表示文字列はすべて横並び。floatを使う。*/
.bgheader_menu .a {
  float: left;
  color: white;
  margin: 0 1em 0 0;
}
.bgheader_menu .cp {
  float: left;
  color: yellow;
  margin: 0 1em 0 0;
}
/*clearfix。aもcpもfloatで高さが認識されないため、必要となる。定番。*/
.bgheader_menu .a::after, 
.bgheader_menu .cp::after {
  display: block; /*ブロック要素に。*/
  clear: both;    /*float解除。これでほかの要素が潜り込まなくなる。*/
  content: "";    /*疑似要素afterを実体にする。*/
}

/*以下は上括弧ほかこのページ独自の本文装飾。*/
/*上括弧共通部分。クラス名数字にはパディングの0を付けないこと。*/
.bgu1, .bgu2, .bgu3, .bgu4, .bgu5, .bgu7, .bgu9, .bgu12 {
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  height: 1em;
  vertical-align: 0;
  margin: 0em 0.2em;
}
/*上括弧の各画像URLと幅。*/
.bgu1 {
  background-image: url("./bgimg/area_bracket01.svg");
  width: 1.4em;
}
.bgu2 {
  background-image: url("./bgimg/area_bracket02.svg");
  width: 2.1em;
}
.bgu3 {
  background-image: url("./bgimg/area_bracket03.svg");
  width: 4.2em;
}
.bgu4 {
  background-image: url("./bgimg/area_bracket04.svg");
  width: 5.6em;
}
.bgu5 {
  background-image: url("./bgimg/area_bracket05.svg");
  width: 7.0em;
}
.bgu7 {
  background-image: url("./bgimg/area_bracket07.svg");
  width: 9.8em;
}
.bgu9 {
  background-image: url("./bgimg/area_bracket09.svg");
  width: 12.6em;
}
.bgu12 {
  background-image: url("./bgimg/area_bracket12.svg");
  width: 15.4em;
}
/*上括弧の疑似要素共通部分。*/
.bgu1::after, .bgu2::after, .bgu3::after, .bgu4::after,
.bgu5::after, .bgu7::after, .bgu9::after, .bgu12::after {
  position: absolute;
  content: attr(data-text);
  text-indent: 0;
  top: 80%;
}
/*上括弧の疑似要素各leftとtransform。*/
.bgu1::after, .bgu2::after {
  left: 50%;
  transform: translate(-50%, -50%);
}
.bgu3::after {
  left: 20%;
  transform: translate(-5%, -50%);
}
.bgu4::after {
  left: 30%;
  transform: translate(-10%, -50%);
}
.bgu5::after {
  left: 15%;
  transform: translate(-7.5%, -50%);
}
.bgu7::after {
  left: 5%;
  transform: translate(5%, -50%);
}
.bgu9::after {
  left: 20%;
  transform: translate(-12.5%, -50%);
}
.bgu12::after {
  left: 10%;
  transform: translate(-5%, -50%);
}

/*囲み小節番号とその右側の小数字。*/
.bgsqborder {
  border: solid 1px;
  margin: 0 0.2em;
  padding: 0em 0.4em;
}
.bgsqborderplus {
  border: solid 1px;
  margin: 0 0.1em 0 0.2em;
  padding: 0 0.4em;
}
.bgsqplusmini {
  font-size: 90%;
  margin: 0 0.2em 0 0;
}
/*ペダルマーク。1個と2個共通部分。*/
.bgpedal1, .bgpedal2 {
  position: relative;
  text-indent: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: -0.1em;
  height: 1.1em;
  margin: 0em 0.2em;
}
/*ペダルマーク。1個と2個各画像URLと幅。*/
.bgpedal1 {
  background-image: url("./bgimg/pedal1.svg");
  width: 1.1em;
}
.bgpedal2 {
  background-image: url("./bgimg/pedal2.svg");
  width: 2.2em;
}
/*和音記号用下付き数字。*/
.bgsubscript {
  vertical-align: baseline;
  font-size: smaller;
  margin-right: 0.1em;
}
/*和音記号用上付き下付き数字。*/
/*以下の三つはセットで使う。小数字を上下に並べる。*/
.bgsupersubscript {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  text-indent: 0;
  margin-right: 0.2em;
}
.bgsupersubscript span:nth-of-type(1) {
  font-size:smaller;
  margin: -1.2em 0 -0.7em;
}
.bgsupersubscript span:nth-of-type(2) {
  font-size: smaller;
  margin: 0 0 -1em;
}
/*分数、セットで使う。*/
.bgfraction {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-indent: 0;
  line-height: 110%;
  margin: 0 0.2em;
}
.bgfraction span:nth-of-type(1) {
  display: block;
  padding: 0 0.2em;
}
.bgfraction span:nth-of-type(2) {
  display: block;
  border-top: solid 2px;
  margin-top: -0.1em;
}
/*分数で、分子が上括弧付きの場合。u2は分子が2文字の場合。*/
.bgfraction_u1, .bgfraction_u2 {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 110%;
}
.bgfraction_u1 .t, .bgfraction_u2 .t {
  display: block;
  text-indent: 0;
  padding: 0 0 0.4em 0;
}
.bgfraction_u1 .b{
  border-top: solid 2px;
  padding: 0 0.4em;
}
.bgfraction_u2 .b{
  border-top: solid 2px;
  padding: 0 0.6em;
}
/*分数の線が無いもの。*/
.bgfractionnoline_u1 {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 100%;
}
.bgfractionnoline_u1 .t {
  display: block;
  text-indent: 0;
  padding: 0;
}
.bgfractionnoline_u1 .b {
  padding: 0;
}