/* ================================================================
   JSから分離したサイト共通コンポーネント用CSS
   ================================================================ */

/* --- 記事ヘッダーエリア（個別記事の上部） --- */
.p-article-header-container {
    margin-bottom: 25px;
}
.p-article-title {
    margin-bottom: 10px;
    font-size: 1.8em;
    color: #333;
}
.p-article-meta {
    font-size: 14px;
    color: #808080;
    line-height: 1.5;
}
.p-article-meta-update {
    margin-left: 5px;
}

/* --- 検索モーダル周りの調整 --- */
#p-search-query {
    color: #191970;
    font-weight: bold;
}
.p-search-modal-scroll {
    overflow-y: auto;
    flex: 1;
}
.p-pagination-area {
    background: #fff;
    padding: 10px 0;
    border-top: 1px solid #eee;
}

/* --- サイドバー：ランダム記事ボタンの余白調整 --- */
.p-sidebar-random {
    margin-bottom: 45px;
}

/* --- サイドバー：最新の記事エリア --- */
.p-sidebar-latest-area {
    margin-top: 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}
.p-sidebar-latest-title {
    font-size: 13px;
    font-weight: bold;
    margin: 0 10px 8px;
    border-left: 3px solid #283b73;
    padding-left: 8px;
    color: #333;
}
.p-sidebar-latest-list {
    padding: 0 10px;
}
.p-sidebar-latest-item {
    text-decoration: none;
    display: block;
    padding: 8px 0;
}
.p-sidebar-latest-item-title {
    font-size: 12px;
    color: #191970;
    font-weight: bold;
    display: block;
    line-height: 1.4;
}
.p-sidebar-latest-item-title:hover {
    text-decoration: underline;
}
.p-sidebar-latest-item-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}
.p-sidebar-latest-item-date {
    font-size: 10px;
    color: #888;
}
/* 最新記事同士を区切る細線 */
.p-sidebar-latest-divider {
    border-top: 1px solid #ddd;
    margin: 2px 0;
}



/* ---2 検索システム：タグ一覧の全幅化（#だけで検索したとき） --- */


/* --- 検索システム：タグ一覧の全幅化（#だけで検索したとき） --- */
.p-all-tags-fullwidth {
    grid-column: 1 / -1;
}

/* --- 検索システム：関連タグエリアの枠線と余白 --- */
.p-related-tag-wrap {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* --- 検索システム：ヒットしなかったときのメッセージ --- */
.p-search-no-results {
    grid-column: 1 / -1;
    padding: 80px;
    text-align: center;
    color: #666;
    font-size: 15px;
}



/* --- 3画像拡大モーダル（デフォルトは非表示） --- */


/* --- 画像拡大モーダル（デフォルトは非表示） --- */
#myModal {
    display: none; /* 最初は非表示 */
    /* ※もしすでにCSS側で #myModal のスタイル（positionやbackgroundなど）が
       手書きされている場合は、ここの display: none; だけを既存の場所に合流させてもOK */
}

/* ★ JSで「is-active」クラスがついた時だけ画面に表示させる */
#myModal.is-active {
    display: flex;
}




/* ================================================================
   4会社別・種類別ページ用コンポーネントCSS
   ================================================================ */
/* --- 通常モードの記事一覧グリッド --- */
.p-article-list-normal {
    display: grid !important; /* JSでの干渉を防ぐため強制適用 */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* --- 車内紹介モード（ブロック縦並び） --- */
.p-article-list-inside {
    display: block !important;
}

/* 車内紹介：形式ごとの見出し */
.p-inside-series-title {
    text-align: left;
    font-weight: 900; 
    color: #071265; 
    margin: 35px 0 15px; 
    border-left: 7px solid #283b73; 
    padding-left: 12px; 
    font-size: 1.1em;
    line-height: 1.3;
}

/* 車内紹介：形式ごとの2列カードグリッド */
.p-inside-series-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 40px;
}

/* ページネーションエリアの表示切り替え */
.p-pagination-area.is-hidden {
    display: none !important;
}
.p-pagination-area.is-flex {
    display: flex !important;
}

/* 📱 スマホ対応 */
@media screen and (max-width: 768px) {
    .p-article-list-normal,
    .p-inside-series-grid {
        grid-template-columns: 1fr !important;
    }
}




/* ================================================================
   セクション5〜8（タブ、埋め込み、タグ等）用追加CSS
   ================================================================ */

/* --- 7. 会社別ページ：横並びカテゴリタブコンテナ --- */
.p-category-tabs-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 20px auto 40px;
    border: 1px solid #191970;
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

/* カテゴリタブ：個々のボタン */
.p-category-tab-btn {
    flex: 1;
    justify-content: center;
    padding: 0 5px;
    cursor: pointer;
    border: none;
    border-right: 1px solid #191970;
    background: transparent;
    font-weight: bold;
    font-size: 14px;
    color: #191970;
    transition: background 0.1s, color 0.1s;
    letter-spacing: 0.05em;
    height: 34px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 0;
}

/* 最後のボタンは右線を消す */
.p-category-tab-btn.is-last {
    border-right: none;
}

/* アクティブ（現在選択中）なタブの配色 */
.p-category-tab-btn.is-active {
    background: #191970;
    color: #fff;
}

/* スマホ対応：タブ内の文字サイズ調整 */
@media screen and (max-width: 480px) {
    .p-category-tab-btn {
        font-size: 12px;
        letter-spacing: 0;
    }
}

/* --- 8. 記事内コンポーネント用スタイル --- */

/* 記事内のタグエリア用SVGアイコン */
.p-tag-svg-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 5px;
}

/* 記事が見つからないときの埋め込みエラー表示 */
.p-embed-error {
    font-size: 12px;
    color: #dc3545;
    font-weight: bold;
    padding: 10px;
    border: 1px dashed #dc3545;
    background-color: #fff5f5;
    border-radius: 4px;
}




/* ================================================================
   更新履歴アーカイブページ（A.js）用スタイル
   ================================================================ */

/* 年別ボタンを囲むコンテナ */
.p-year-filters-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* 年別フィルターボタンの通常時 */
.p-year-filter-btn {
    padding: 0 15px;
    height: 40px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 15px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* 年別フィルターボタンの選択中（アクティブ） */
.p-year-filter-btn.is-active {
    background: #191970;
    color: #fff;
    border-color: #191970;
}

/* 更新情報がない時のエラーテキスト */
.p-archive-empty-msg {
    text-align: center;
    padding: 40px;
    color: #666;
    font-weight: bold;
}







/* 文字調節 */

h1 {
    /* 色の指定：ヘッダーと同じ濃いネイビーグレー */
    color: #2D3748;

    /* 文字を太くする（重厚感） */
    font-weight: bold;

    /* 文字のサイズ（必要に応じて調整） */
    font-size: 34px;

    /* 少し文字の間を詰めると鉄道の銘板っぽくなります */
    letter-spacing: -0.02em;

    /* 下のコンテンツとの隙間 */
    margin-bottom: 20px;
}


.moji2{
    font-size:  12px;    /* フォントサイズ=2のやつ */
}

.moji3{
    font-size:  16px;    /* サイドバーのやつ */
    color:black;
}

.moji4{
    font-size:  20px;    /* サイドバーのやつ */
    color:black;
}


.moji5{
    font-size:  16px;    /* 文字を灰色に */
    color:#606060;
}

.moji6{
    font-size:  16px;    /* タイトルの日付のやつ */
    color:#17184b;
}

.moji7{
    font-size:  16px;    /* 青文字 */
    color:#18077B;
}






/* 画像モーダルの説明文だよ */
.img-caption1 {
    color: #606060;   /* 文字色 */
    font-size: 0.9em; /* 少し小さめに */
    margin: 5px 0 15px; /* 上下に隙間を作る */
    display: block;   /* 改行を確実にする */
}







/* 改行調節 */

.pre-line {
  white-space: pre-line;
  color: #2D3436;
  font-weight: 400;
  line-height: 1.7;
}


/* 線を引くよ */



p.sen2 {
   border-bottom: 1px solid black;
}


/* ページの幅を変えるよ */



.幅狭 {
  margin-left: 0px;
  margin-right: 0px;
}




/* サブタイトル、線、フッター、メニュー */



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

/* --- 見出し（moji1）のスタイル --- */
.moji1 {
    font-size: 1.5em; /* 少し大きめのフォント */
    font-weight: bold;
    color: #2D3748; /* 強調色（例：青系） */
    padding-bottom: 1.0px;      /* ★ここで文字と線の隙間を0.1px単位で調整可能 */
    border-bottom: 2px solid #0369A1; /* 線の太さと色 */
    margin-bottom: 15px;
}


/* h2.クラス名 という書き方にする */
h2.moji1 {
    font-size: 1.5em;
    font-weight: bold;
    color: #2D3748;
    padding-bottom: 1.0px;
    border-bottom: 2px solid #0369A1;
    margin-bottom: 15px;
}



/* --- 区切り線（p.sen1）のスタイル --- */
/* 空のpタグを線として表示させる */
.sen5 {
display: 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-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px; /* 少しだけ余白を広げると綺麗です */
  border: 2px solid #191970;
  border-radius: 6px;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
  vertical-align: middle; /* 文中での浮き上がり防止 */
}

/* アイコンのスタイル */
.tag-icon svg {
  width: 1.1em; /* 文字の大きさに連動 */
  height: 1.1em;
  display: block;
  stroke: #191970;
}

.text-content {
  color: #191970;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: bold;
}

.framed-text-link:hover {
  background-color: rgba(25, 25, 112, 0.1);
}





@media (max-width: 767px) {

.幅狭 {
  margin-left: 0px;
  margin-right: 0px;
}