/* 雲居の文庫のヘッダー・トップの、Bootstrap のクラスだけでは書けない所 (Bootstrap 5.3 の見本「Blog」の blog.css と nav-scroller に当たる)。
   色は Bootstrap の変数とクラスに任せ、ここでは大きさと並べ方だけを書く (ダークモードでも読めるように) */

/* 変体仮名 (𛁈 など)。端末にフォントの無いことが多いので、変体仮名だけの部分フォントを配る (vendor/noto-serif-hentaigana)。
   unicode-range で変体仮名に限っているので、ほかの字はこれまでどおり端末の字体で出て、フォントは変体仮名を含むページでだけ読み込まれる */
@font-face{font-family:"Kumoi Hentaigana";src:url(vendor/noto-serif-hentaigana/NotoSerifHentaigana-400.woff2) format("woff2");unicode-range:U+1B000-1B16F;font-display:swap}
body{font-family:"Kumoi Hentaigana",var(--bs-body-font-family)}

/* サイト名: 見本は Playfair Display だが、外のフォントは読まないので、端末にある明朝で古典らしく見せる。スマホでは小さくして 1 行に収める */
.blog-header-logo{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-size:1.35rem}
.blog-header-logo rt{font-size:.45em;line-height:1;letter-spacing:.1em}
/* ルビ (.45em) の分だけ名前の箱は上に高い。横に並べたロゴとバッジを同じだけ下げて、名前の文字の高さの中央にそろえる (em はサイト名の字の大きさ) */
.blog-header-logo .rt-pad{margin-top:.45em}
/* バッジはサイト名の字の大きさに引きずられないよう、本文の字体・Bootstrap のバッジの大きさに戻す */
.blog-header-logo .badge{font-family:var(--bs-body-font-family);font-size:.75rem}
@media (min-width:768px){.blog-header-logo{font-size:2rem}}

/* 分類のナビ: 見本の nav-scroller。折り返さずに 1 行に並べ、入りきらない幅 (スマホ) では横にスクロールさせる。
   スクロールバーは下の余白 (padding-bottom) に押し出し、高さを切って隠す */
/* スマホの幅 (md 未満) では、横スクロールに気づかれにくいので、分類だけを折り返して全部見せる (ページの入口はヘッダー右上のメニューへ。common.js) */
.nav-scroller{position:relative;z-index:2}
.nav-scroller .nav{margin-top:-1px;text-align:center;white-space:nowrap}
@media (min-width:768px){
  .nav-scroller{height:2.75rem;overflow-y:hidden}
  .nav-scroller .nav{flex-wrap:nowrap;padding-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* 指で押しやすい大きさ (44px 角) を、見た目の小さいリンク・アイコンにも持たせる */
.tap{min-width:2.75rem;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center}


/* PC の幅では、分類とページの入口を全部見せる。分類が増えても右端 (和歌を探す・利用と修正案) が隠れないよう:
   - 中身の幅が広い xl (1200px〜) 以上は、字と間隔を少し詰めて 1 行に収める (xl .9rem・xxl 1rem)
   - それより狭い幅 (768〜1199px) では、字を小さくしすぎず (.9rem)、分類とページの入口の 2 行に分ける (1 行で横にスクロールさせると右端が隠れるため) */
@media (min-width:768px) and (max-width:1199.98px){
  .nav-scroller{height:auto;overflow-y:visible}
  .nav-scroller .nav{flex-wrap:wrap;justify-content:center!important;padding-bottom:0;overflow-x:visible}
  .nav-scroller .nav a{font-size:.9rem;padding-left:.35rem!important;padding-right:.35rem!important}
  /* 区切りの縦線の所で改行し、1 行目に分類、2 行目にページの入口を並べる */
  .nav-scroller .nav .vr{flex-basis:100%;height:0;min-height:0;margin:0!important;opacity:0}
}
@media (min-width:1200px){.nav-scroller .nav a{font-size:.9rem;padding-left:.2rem!important;padding-right:.2rem!important}}
@media (min-width:1400px){.nav-scroller .nav a{font-size:1rem;padding-left:.25rem!important;padding-right:.25rem!important}}