@charset "utf-8";
.news-list-item {
            color: #333; /* 文字色を少し濃くする */
            text-decoration: none; /* 下線を削除 */
            border-bottom: 1px solid #dee2e6; /* 区切り線を再設定 */
            transition: background-color 0.2s ease-in-out;
        }

        .news-list-item:last-child {
            border-bottom: 0;
        }
        
        .news-list-item:hover {
            background-color: #f8f9fa; /* ホバー時の背景色 */
        }

        /* New icon style */
        .news-icon {
            background-color: #f1f1f1; /* 薄いグレーの背景 */
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            flex-shrink: 0; /* アイコンが縮まないようにする */
        }

        .news-list-item .date {
            color: #6c757d; /* 日付の文字色を少し薄くする */
            font-weight: 500;
            min-width: 100px; /* 日付の幅を固定してレイアウト崩れを防ぐ */
        }
        
        .news-list-item .news-title {
            font-weight: 600;
            color:#2d5a88;
        }
        
        /* Pagination Style Overrides */
        .pagination .page-link {
            border: 1px solid #dee2e6; /* 枠線を追加 */
            color: #6c757d;
            background-color: transparent;
            border-radius: 50% !important; /* 円形にする */
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 4px;
            transition: all 0.2s ease-in-out;
        }

        .pagination .page-link:hover {
            background-color: #f8f9fa;
            color: #333;
        }
        
        .pagination .page-item.active .page-link {
            background-color: #f1f1f1; /* アイコン背景色と同じ */
            border-color: #f1f1f1;
            color: #333;
            font-weight: 700;
        }

        /* 最後の「ラ」のスタイル調整 */
        .pagination .page-item:last-child .page-link {
            border: none;
        }
        .pagination .page-item:last-child .page-link:hover {
            background-color: transparent;
        }

        .list-group-item {
          background-color: transparent;
        }

        .news-header {
            display: flex;
            align-items: center; /* PCでは垂直中央揃え */
            gap: 2rem; /* アイコンとメタ情報の間のスペース */
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 3rem;
            margin-bottom: 3rem;
        }
        
        .news-icon-wrapper {
            flex-shrink: 0; /* アイコンが縮まないようにする */
        }

        .news-icon {
            background-color: #f1f1f1;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
        }

        .news-meta {
            display: flex;
            align-items: baseline; /* テキストのベースラインで揃える */
            gap: 1rem; /* 日付とタイトルの間のスペース */
            flex-wrap: wrap; /* 画面が狭くなった場合に折り返す */
        }
        
        .date {
            color: #6c757d;
            font-size: 0.9rem;
            white-space: nowrap;
            min-width: 95px; /* 日付用に固定幅を確保してレイアウトを安定させる */
        }
        
        .news-title {
            font-weight: 700;
            font-size: 1.3rem;
            line-height: 1.5;
            color:#2d5a88;
        }
        
        .news-content {
            /* PCではタイトルと開始位置を正確に合わせる */
            padding-left: calc(32px + 1rem + 115px + 1rem); /* icon + gap + date-width + gap */
            line-height: 1.8;
        }

        /* Navigation Button Styles */
        .news-nav a {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease-in-out;
            padding: 0.5rem 1.5rem;
            border-radius: 999px;
            border: 1px solid transparent;
        }
        
        .news-nav .back-to-list {
            border-color: #6c757d;
            background-color: #2d5a88;
            color:#fff;
            font-weight:700;
        }
        .news-nav .back-to-list:hover {
             background-color: #00376e;
        }

        .news-nav .nav-arrow-btn {
            background-color: #f1f1f1;
        }
        .news-nav .nav-arrow-btn:hover {
            opacity: 0.8;
        }

        /* --- Responsive Styles for Mobile --- */
        @media (max-width: 767px) {
            .news-header {
                align-items: flex-start; /* スマホでは上揃え */
                padding-bottom:1rem;
                margin-bottom:1rem;

            }

            .news-meta {
                /* 日付とタイトルを縦に並べる */
                flex-direction: column;
                align-items: flex-start; /* 左揃えにする */
                gap: 0.25rem;
            }
            
            .date {
                min-width: 0; /* スマホでは固定幅を解除 */
            }

            .news-title {
                font-size: 1.2rem;
            }
            
            .news-content {
                padding-left: 0; /* スマホではインデントを解除 */
            }
        }

        @media screen and (max-width:599px)  {

            .con-title-box {
        z-index: 1;
        top: 3rem;
    }

    .con-main-con {
      padding-top:1rem;
    } 
        }