html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ==========================================================================
   フッター最下部固定の完全版スタイル（site.css に直接記述）
   ========================================================================== */

/* 1. 画面全体の高さを100%に強制固定 */
html, body {
    height: 100% !important;
    margin: 0 !important;
}

/* 2. bodyを縦並びのFlexboxコンテナにする */
body {
    background-color: #F8F9FA; /* --clean-bg の代わり */
    color: #2D3748;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. 【大本命】新設した透明なラッパーを縦に限界まで引き伸ばす */
.content-wrapper {
    flex: 1 0 auto !important;
}

/* 4. フッターが潰れるのを防ぎ、最下部に留める */
.footer {
    flex-shrink: 0 !important;
    background-color: #fff !important;
    border-top: 1px solid #e5e5e5 !important;
    line-height: 60px !important;
    width: 100% !important;
    /* ⚠️ 過去の絶対配置の残骸を完全に上書き消去 */
    position: static !important;
    bottom: auto !important;
}

/* 📖 左メニューの目次テキストを綺麗に2行に折り返すための設定 */
.aside .btn,
aside a {
    /* はみ出たときに単語の途中でも綺麗に折り返す */
    word-break: break-all;
    white-space: normal !important;
    display: flex;
    align-items: flex-start !important; /* アイコンと文字の頭を揃える */
}

aside span {
    font-size: 0.85rem; /* 文字サイズを少しだけ引き締める（お好みで調整してください） */
    line-height: 1.3; /* 2行になった時の行間を少し詰めてスマートに */
    text-align: left;
}