<style>
/*
  KK81TRAIN フッター/ナビゲーション スタイル
  提供されたHTMLの一部を元に、モダンで整理されたデザインを適用
*/


/* --- 各セクションのスタイル --- */
.footer-section {
    margin-bottom: 25px; /* セクション間の下余白 */
}

/* --- 見出し（moji1）のスタイル --- */
.moji1 {
    font-size: 1.5em; /* 少し大きめのフォント */
    font-weight: bold;
    color: #191970; /* 強調色（例：青系） */
    margin-bottom: 10px; /* 見出しの下の余白 */
    padding-bottom: 5px; /* 下線とテキストの間の余白 */
}

/* --- 区切り線（p.sen1）のスタイル --- */
/* 空のpタグを線として表示させる */
.sen5 {
    height: 2px; /* 線の高さ */
    background-color: black; /* 線の色 */
    margin-bottom: 20px; /* 線の下の余白 */
    margin-top: 0; /* 見出しのすぐ下なので上余白はなし */
    padding: 0; /* パディングもなし */
    border: none; /* 不要なボーダーをリセット */
}



/* --- リンク全般のスタイル --- */
/* ボタン化されたリンクと区別するため、より一般的なスタイルを定義 */
.footer-container a {
    color: #191970; /* リンクの基本色 */
    text-decoration: none; /* デフォルトの下線を消す */
    transition: color 0.3s ease; /* ホバー時の色変化を滑らかに */
}

.footer-container a:hover {
    color: #0056b3; /* ホバー時の色 */
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* --- 「前の記事」ラベル（bタグ）のスタイル --- */
.footer-container b {
    display: block; /* ブロック要素にして上下余白を制御可能に */
    margin-bottom: 8px; /* ラベルの下の余白 */
    font-weight: bold; /* 太字を維持 */
    color: #555; /* 少し控えめな色 */
}

/* --- メニューリンクブロック（通常のパンくず部分）のスタイル --- */
.menu-links {
    margin-bottom: 15px; /* メニューリンクブロック全体の下余白（ボタンコンテナとの間に） */
    line-height: 1.6; /* 行間を調整 */
}

/* --- ボタン化するリンクを囲むコンテナのスタイル --- */
.button-links-container {
    margin-top: 15px; /* メニューリンク（パンくず）との間に余白 */
    /* もしボタンを横並びにして隙間を自動調整したい場合は以下を追加 */
    /* display: flex; */
    /* gap: 10px; /* ボタン間の隙間 */ */
    /* flex-wrap: wrap; /* 狭い画面で折り返す場合 */ */
}

/* --- ボタン風リンク（.buttonクラスを持つaタグ）のスタイル --- */
.button-links-container .button {
    display: inline-block; /* インライン要素だけど幅やpaddingを設定可能に */
    background-color: #191970; /* ボタンの背景色 */
    color: white; /* ボタンのテキスト色 */
    padding: 8px 15px; /* 上下・左右の余白（ボタンの大きさ） */
    border: none; /* デフォルトのボーダーを消す */
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none; /* 下線を消す */
    font-weight: normal; /* 太字をリセット */
    margin-right: 10px; /* ボタン同士の右側の余白 */
    cursor: pointer; /* マウスカーソルを指の形に */
    transition: background-color 0.3s ease; /* ホバー時の背景色変化を滑らかに */
    text-align: center; /* テキストを中央寄せ */
    /* 必要に応じてフォントサイズ調整: font-size: 0.9em; */
}

/* --- ボタンのホバー時のスタイル --- */
.button-links-container .button:hover {
    background-color: #0056b3; /* ホバー時の背景色（少し濃くする） */
    color: white; /* ホバー時もテキストは白を維持 */
    text-decoration: none; /* ホバー時も下線は表示しない */
}


/* --- hrタグ（区切り線）のスタイル --- */
.footer-container hr {
    border: none; /* デフォルトのボーダーを消す */
    height: 1px; /* 線の高さ */
    background-color: #ccc; /* 線の色 */
    margin: 25px 0; /* 上下余白、左右なし */
}

/* --- コピーライト表示（moji2）のスタイル --- */
.moji2 {
    font-size: 0.85em; /* 少し小さめのフォント */
    color: #666; /* 控えめな色 */
    text-align: left; /* 中央寄せ */
    margin-top: 20px; /* 上余白 */
}

/*
  注意：元のHTMLにあった <br><br> タグは、CSSのmarginやpaddingで余白を制御する方が柔軟でおすすめです。
  上記のCSSは、<br><br>がHTMLに残っていても破綻しないように配慮していますが、
  より厳密なレイアウト制御にはHTMLからの<br>削除とCSSによる余白設計が推奨されます。
*/




.framed-text-link {
  display: inline-block; /* インライン要素として、テキストの幅に合わせて調整 */
  padding: 2px 3px; /* 枠と文字の間の余白 */
  border: 2px solid #191970; /* 枠のスタイルと色 */
  border-radius: 5px; /* 角を丸くする */
  text-decoration: none; /* 下線を消す */
  background-color: transparent; /* 背景を透明に設定 */
  cursor: pointer; /* マウスオーバー時にカーソルをポインターにする */
}

.text-content {
  color: #191970; /* 文字色 */
  font-family: sans-serif; /* お好みのフォントを指定 */
  font-size: 15px; /* お好みのフォントサイズを指定 */
}

/* ホバー時のスタイル（任意） */
.framed-text-link:hover {
  background-color: rgba(25, 25, 112, 0.1); /* ホバー時に少し背景色をつける */
}

</style>