/*■■■以下は各ページにほぼ共通するクラス。■■■*/

/*
もし、別途cssシートを用意するほどでもないが、
限定的に新しい指定が必要となったら、そのページのheadでstyleを指定する。
ただし、下の2例目のようなレスポンシブ指定は、headに書かない方がいいかも。
「767」という数字を書き換えたくなった場合、統一的に全ページを書き換えなければならなくなるからである。
「all and」は、この場合は正しい書法で、省略可能だが、次の括弧は必要。
例：
<style>
  .textlink div:first-child {width: 6rem;}
  .textlink *:last-child {width: fit-content;}
</style>
<style media="all and (max-width: 767px)">
    #cr div {
    margin-left: -1em;
}
</style>
*/

/*bodyの改行幅とマージン*/
.bodycommon {
  line-height: 1.6;
  margin: 3.2rem 8%;
  /*font-family:monospace;*/
}
.bodylineh {
  line-height: 1.6;
}

/*ページの総タイトル*/
h1.title {
  line-height: 1.2;
}

/*著者ほか*/
.authoretc {
  text-align: right;
  margin-bottom: 3.2rem;
}

/*緒言*/
.prolusion {
  margin: 0 1rem 1.6rem 1rem;
}
/*緒言内注釈*/
.prolusioncmt {
  font-size: 90%;
  margin-bottom: 0.6em;
  margin-left: 3em;
  text-indent: -1em;
}

/*底本タイトル*/
.copytextcaption {
  font-weight : bolder;
  margin: 1.6rem 1rem;
}

/*引用等の注意、底本*/
.citationlinkreprint, 
.copytext {
  margin-bottom: 2.4rem;
}

/*本文直前のタイトル。著書の扉ページ。*/
h2.titlepage{
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.titleauthor {
  font-weight: bolder;
  text-align: right;
  margin-bottom: 2rem;
}

/*pdfなどへのリンク。*/
.textlink {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0.2rem 5rem;
}

/*普通の1字下げ本文ブロック（body text）。*/
.bt16 {
  text-indent: 1rem;
  margin: 0 0 1.6rem 0;
}
.bt32 {
  text-indent: 1rem;
  margin: 0 0 3.2rem 0;
}

/*
注釈部分。
翻訳ページなどで下に注釈がまとめてある場合に使用。
注釈が本文中に分散している場合は各ページごとに作ること。
*/
/*
フォントサイズは最初に単独で指定する。
divの終点がすごく離れてしまうが、各クラスに単独で指定するより修正が楽になる。
*/
.cmtfs {
  font-size: 90%;
}
.cmttitle {
  text-indent: -1em;
  font-weight: bolder;
  margin: 1.6em 1em;
}
.cmtprolusion {
  text-indent: -1em;
  margin: 0 0 1.6em 1em;
}
.cmtprolusion > div:nth-child(n+2) {
  text-indent: 1em;
}
.cmtprolusionchild {
  text-indent: -1em;
  margin: 0 0 0 2em;
}
/*
各注釈項目。2段落以上連続する場合はdivでネストすること。
第2段落以降は普通のインデントとする。
途中引用などが挟まって連続しない場合は、
そこで切って別のスタイルを当てる。
*/
.cmt {
  text-indent: -1.5em;
  margin: 0 0 1.6em 2em;
}
.cmt > div:nth-child(n+2) {
  text-indent: 1em;
}
/*注釈内段落。*/
.cmtinnerp {
  text-indent: 1em;
  margin: 0 0 1.6em 2em;
}
/*注釈内補遺。*/
.cmtcodicil {
  margin: 0 1.5em 1.6em 4em;
  text-indent: -1em;
}

/*訳者コメント欄。*/
.cmtimp {
  text-indent: -1em;
  margin: 0 0 0 1em;
}

/*リンク部分*/
/*以下はamenichiと同じなので、完全にamebaseに移行するまではそちらにも同じものを書き込んでおくこと。編集はこちらで、向こうにはコピペ。*/
.amelink {
  margin: 2.4rem 0 0 0;
}
.amelink .alcont {
  text-align: left;
  line-height: 1.25;
  width: fit-content;
  margin: 0 auto 0.6rem;
}
/*小記事のリンク部分*/
.amelinksmall {
  margin: 2.4rem 0;
}
.amelinksmall .alconts {
  text-align: left;
  line-height: 1.25;
  width: fit-content;
  margin: 0 auto 0.6rem;
}
/*「小記事」の下は少し開ける。*/
.amelinksmall .alconts:first-child {
  margin-bottom: 1.2rem;
}
/*「ホーム」とその一つ上の間は少し開ける。*/
.amelinksmall .alconts:nth-last-child(2) {
  margin-bottom: 2.2rem;
}

/*最下の「ご意見・ご教示」「copyright」*/
.linkaddress {
  display: block;
  font-size: 90%;
  line-height: 1.25;
  width: fit-content;
  margin : 0 0 0 auto;
  padding: 0.5em;
}


/*■■■以下は部品。■■■

「値1、3、4は使っているが、2は使っていない」というようなケースであっても、
「2」もそのままリストに含めている。
いざ「2」を使うときに書き足すのが面倒だからである。
………………………………………………………………………………………………………
適用する要素に同じプロパティが指定されていた場合、
新しい値を上書きしなければならないが、
このcssシートは基本シートゆえ先に読み込ませるつもりなので、
「記載順を後にする」ことによる上書きはしづらい。
しかし、importantも非推奨となると、別の小技を使わねばならない。

詳細度（Specificity、優先度のこと）は、0-1-0のように3次元で表現する。
左ほど重く、右の数字がいくら大きくても左に1でも入っていれば優先される。
:not(#fakeID)は詳細度を上げるためのダミー。
idは最も重く1-0-0になるので、classの0-1-0よりも優先される。よって、
:not(#fakeID) .hoge {}
などとしておけば、
hogeのみでは0-1-0なのに対し、1-1-0とぐっと優先度が上げられ、
importantを使ったときのようにclassの上書きが容易になる。
ちなみに普通のタグ（p、div等）の優先順位はいちばん下（右）。
「コロンの左側に何も書かなくても大丈夫なのか？」と思ったが、
これでもちゃんと動くし、css検証も通る。
この書き方は、「要素の何も対象としないけれども、
とにかくidの重みだけは加える」という効果があるらしく、
従ってid名は実際に存在するidであってもまったく問題ない。
もし本当にfakeIDというid名を持つ要素を除外したければ、実験したところ、
.hoge:not(#fakeID) {}
とオーソドックスに書けば利くようだ。
下記の参考サイトにある例
:not(#fakeID#fakeID#fakeID) p {}
などとすれば3-0-1になるが、3まで上げる必要はないと思われる。
参考：
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
https://developer.mozilla.org/ja/docs/Web/CSS/:not
*/

/*右寄せ、中央寄せ。*/
:not(#fakeID) .txtr {
  text-align: right;
}
:not(#fakeID) .txtc {
  text-align: center;
}
:not(#fakeID) .contr {
  margin-left: auto;
}
:not(#fakeID) .contc {
  margin-right: auto;
  margin-left: auto;
}

/*字下げ。*/
:not(#fakeID) .txtnoind {
  text-indent: 0;
}
:not(#fakeID) .txtindrem {
  text-indent: 1rem;
}
:not(#fakeID) .txtindrem05 {
  text-indent: 0.5rem;
}
:not(#fakeID) .txtindremmn05 {
  text-indent: -0.5rem;
}
:not(#fakeID) .txtindremmn {
  text-indent: -1rem;
}
:not(#fakeID) .txtindremmn2 {
  text-indent: -2rem;
}
:not(#fakeID) .txtindem {
  text-indent: 1em;
}
:not(#fakeID) .txtindem2 {
  text-indent: 2em;
}
:not(#fakeID) .txtindem05 {
  text-indent: 0.5em;
}
:not(#fakeID) .txtindemmn05 {
  text-indent: -0.5em;
}
:not(#fakeID) .txtindemmn {
  text-indent: -1em;
}
:not(#fakeID) .txtindemmn2 {
  text-indent: -2em;
}
:not(#fakeID) .txtindemmn4 {
  text-indent: -4rem;
}
:not(#fakeID) .txtleft1indremmn {
  margin-left: 1rem;
  text-indent: -1rem;
}
:not(#fakeID) .txtleft1indemmn {
  margin-left: 1em;
  text-indent: -1em;
}

/*上の空白。*/
:not(#fakeID) .topnone {
  margin-top: 0;
}
:not(#fakeID) .toprem1 {
  margin-top: 1rem;
}
:not(#fakeID) .toprem16 {
  margin-top: 1.6rem;
}
:not(#fakeID) .toprem24 {
  margin-top: 2.4rem;
}
:not(#fakeID) .topem16 {
  margin-top: 1.6rem;
}

/*下の空白。*/
:not(#fakeID) .botnone {
  margin-bottom: 0;
}
:not(#fakeID) .botrem1 {
  margin-bottom: 1rem;
}
:not(#fakeID) .botrem16 {
  margin-bottom: 1.6rem;
}
:not(#fakeID) .botrem24 {
  margin-bottom: 2.4rem;
}
:not(#fakeID) .botrem32 {
  margin-bottom: 3.2rem;
}
:not(#fakeID) .botrem48 {
  margin-bottom: 4.8rem;
}
:not(#fakeID) .botem1 {
  margin-bottom: 1em;
}
:not(#fakeID) .botem16 {
  margin-bottom: 1.6em;
}
:not(#fakeID) .botem24 {
  margin-bottom: 2.4em;
}
:not(#fakeID) .botem32 {
  margin-bottom: 3.2em;
}
:not(#fakeID) .botem48 {
  margin-bottom: 4.8em;
}

/*左の空白。*/
:not(#fakeID) .leftnone {
  margin-left: 0;
}
:not(#fakeID) .leftrem05 {
  margin-left: 0.5rem;
}
:not(#fakeID) .leftrem1 {
  margin-left: 1rem;
}
:not(#fakeID) .leftrem2 {
  margin-left: 2rem;
}
:not(#fakeID) .leftrem3 {
  margin-left: 3rem;
}
:not(#fakeID) .leftrem4 {
  margin-left: 4rem;
}
:not(#fakeID) .leftrem5 {
  margin-left: 5rem;
}
:not(#fakeID) .leftrem6 {
  margin-left: 6rem;
}
:not(#fakeID) .leftremmn1 {
  margin-left: -1rem;
}
:not(#fakeID) .leftremmn2 {
  margin-left: -2rem;
}
:not(#fakeID) .leftem05 {
  margin-left: 0.5em;
}
:not(#fakeID) .leftem1 {
  margin-left: 1em;
}
:not(#fakeID) .leftem2 {
  margin-left: 2em;
}
:not(#fakeID) .leftem3 {
  margin-left: 3em;
}
:not(#fakeID) .leftem4 {
  margin-left: 4em;
}
:not(#fakeID) .leftem5 {
  margin-left: 5em;
}
:not(#fakeID) .leftem6 {
  margin-left: 6em;
}
:not(#fakeID) .leftemmn2 {
  margin-left: -2em;
}

/*右の空白。名前違いのafsp(r)emは「！」「？」等で使う。*/
:not(#fakeID) .rightrem1,
:not(#fakeID) .afsprem {
  margin-right: 1rem;
}
:not(#fakeID) .rightrem2 {
  margin-right: 2rem;
}
:not(#fakeID) .rightrem3 {
  margin-right: 3rem;
}
:not(#fakeID) .rightrem4 {
  margin-right: 4rem;
}
:not(#fakeID) .rightem1,
:not(#fakeID) .afspem {
  margin-right: 1em;
}
:not(#fakeID) .rightem2 {
  margin-right: 2em;
}
:not(#fakeID) .rightem8 {
  margin-right: 8em;
}
:not(#fakeID) .rightemmn05 {
  margin-right: -0.5em;
}

/*アンダーライン。*/
:not(#fakeID) .undln {
  text-decoration: underline;
}

/*フォント。*/
:not(#fakeID) .fs100 {
  font-size: medium;
}
:not(#fakeID) .fs90 {
  font-size: 90%;
}
:not(#fakeID) .fs80 {
  font-size: 80%;
}
:not(#fakeID) .fsrem1 {
  font-size: 1rem;
}
:not(#fakeID) .fwb {
  font-weight: bold;
}
:not(#fakeID) .fwn {
  font-weight: normal;
}
:not(#fakeID) .fsi {
  font-style: italic;
}

/*色*/
:not(#fakeID) .clrblue {
  color: blue;
}
:not(#fakeID) .clrred {
  color: red;
}
:not(#fakeID) .clrcrimson {
  color: crimson;
}
:not(#fakeID) .clrcyan {
  color: cyan;
}

/*分離禁止だが、text-indent分の影響が出るので一時的に0にする。*/
:not(#fakeID) .nosep {
  display: inline-block;
  text-indent: 0;
}

/*
水平線の線種変更。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
を参考に装飾したが、ここ↑には真ん中に文字を入れる例がある。
border-topだけを表示させてそれを修飾する。
まずすべてのborderの値をリセットするが、
borderの初期値はnoneなので入れなくてもよい気がする。
が、上の例でもほかのサイトでもnone（または0）を入れているので入れておく。
hrタグにはborderが設定されているのだろうか？
borderの太さは、thin、medium、thickまたは具体的な数値で指定。
*/
:not(#fakeID) .hrdot {
  border: none;
  border-top: medium dotted;
}

/*
画像の横幅を最大100%とする。
これは全ページに適用でよいが、もし変更したければタグ内のstyleで設定する。
*/
img {
  max-width: 100%;
  height: auto;
}

/*
文字列をブロックにして中央寄せ、右寄せ。
これで文字列は左揃えのまま、文字列の箱が中央寄せとなる。
*/
.txtbkc {
  text-align: left;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}
.txtbkr {
  text-align: left;
  width: fit-content;
  margin-left: auto;
}
/*
こちらの方が確実か？
二重に囲む必要があり、改行に<br>が必要そうだが。
*/
.txtlc {
	text-align: center;
	display: block;
}
.txtrc {
	text-align: right;
	display: block;
}
.txtlc .txt,
.txtrc .txt {
  text-indent: 0;
	text-align: left;
	display: inline-block;
}

/*
画像のキャプション。
capは文字列を単純に中央寄せしてフォントサイズと改行幅を指定しただけ。
txtbkcapはtxtbkrに文字縮小と改行幅を加えたもので、
文字を中央に寄せず、文字は左寄せのままそのかたまりを中央に配置。
imgはインライン要素なのでtext-alignで中央に寄せるが、
それがキャプション文字列に影響すると2行以上になったとき不自然になる。
よって、text-alignを打ち消してから中央寄せとする。
cmtは、注釈や解説部分でのキャプション用。
font-size90％が継承乗算されないようにする。
*/
.cap,
.capcmt {
  font-size: 90%;
  line-height: 1.4;
  text-align: center;
}
.txtbkcap,
.txtbkcapcmt {
  font-size: 90%;
  text-align: left;
  line-height: 1.4;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}
.capcmt, .txtbkcapcmt {
  font-size: 1em;
}

/*改行を小画面のみ適用。respの方では値が「block」で、有効となる。*/
.bronoff {
  display: none;
}

/******************************************************************************/