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

/* サイト名: 見本は 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}