/* ==========================================================
   Information (Archive / Single / Category) Styling
   ========================================================== */

/* 1. 全体の背景と最小高さ */
.l-main-info,
.info-archive-container,
.info-detail-container {
    background-color: #222222 !important; 
    padding-top: 0;
}

/* 2. セクション全体の余白 */
.p-info-archive {
    width: 1200px;  
    margin: 80px auto; 
    padding: 50px 0; 
    background: #f2f2f2;
}

/* 3. 全体の枠 */
.p-info-archive__inner {
    width: 80%;  
    margin: 0 auto; 
    padding: 0;
}

/* 4. ヘッダー（見出し）のデザイン */
.p-info-archive__header,
.archive-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
}

/* 「INFORMATION LIST」の文字 */
.p-info-archive__title,
.archive-title {
    color: #333;      
    font-family: Arial;
    font-size: 28px;   
    font-weight: 700;
    margin-bottom: 10px; 
}

.p-info-archive__title-line {
    width: 40px;      
    height: 5px;          
    background: var(--color-blue); 
}

/* 5. コンテンツエリア */
.p-info-archive__content,
.info-list {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0 80px;
    background-color: transparent;
    position: relative;
    color: #333;
}

/*  詳細ページ専用 */
/* --- 詳細ページ専用：コンテンツ配置の最適化 --- */

/* archiveのリストと同じ左右10pxの余白を持たせる */
.p-info-detail__container {
    padding: 0 10px;
}

/* 1. メインのサムネイル画像（1枚目）の中央寄せ */
.p-info-detail__thumbnail {
    text-align: center;
    margin-bottom: 40px;
}

.p-info-detail__thumbnail img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

/* 2. 本文内の画像や動画の配置設定 */
.p-info-detail__body {
    text-align: left;        /* 文章は常に左寄せ */
}

/* エディタでの配置指示を最優先し、それ以外は中央に並べる */
/* 写真が含まれる段落(p)やブロック(figure)の基本を中央寄せにする */
.p-info-detail__body p:has(img),
.p-info-detail__body figure {
    text-align: center;
    margin-bottom: 30px;
}

.p-info-detail__body img {
    max-width: 100%;         /* 枠からはみ出さないガード */
    height: auto;            /* 比率維持 */
    display: inline-block;   /* 横並びを許可 */
    margin: 5px;             /* 写真同士の隙間 */
    vertical-align: bottom;
}

/* WordPressのエディタでの個別設定（配置）を復活させる */
.p-info-detail__body .aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

.p-info-detail__body .alignleft {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.p-info-detail__body .alignright {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
}

/* 動画(video)やYouTube(iframe)は1枚で中央配置を維持 */
.p-info-detail__body iframe,
.p-info-detail__body video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    max-width: 100%;
}

/* float解除（回り込みでレイアウトが崩れるのを防止） */
.p-info-detail__body::after {
    content: "";
    display: block;
    clear: both;
}

.p-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 6. リストアイテムのデザイン */
.p-info-list__item {
    border-bottom: 1px solid #aaa;
}

.p-info-list__link {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    gap: 50px;
    text-decoration: none;
}

.p-info-list__date {
    color: #666; 
    font-size: 14px;
    font-weight: 700; 
    flex-shrink: 0;
}

.p-info-list__title {
    font-size: 16px; 
    color: #333;
    flex: 1;
}

/* 7. 矢印アイコン */
.p-info-list__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 8. ページネーション */
.p-info-pagination {
    margin-top: 50px; /* 上余白 */
}

.p-info-pagination ul {
    display: flex;
    justify-content: center;
    gap: 15px;    /* 項目間の距離調整 */
    align-items: center; 
    flex-wrap: wrap;
}

.p-info-pagination li a,
.p-info-pagination li span {
    display: block;
    padding: 2px 4px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background-color: transparent;
    line-height: 1; /* 行の高さを揃える */
}

/* 矢印（< >）の四角を消す
.p-info-pagination li a.prev,
.p-info-pagination li a.next {
    border: none;     
}
*/

.p-info-pagination li span.current {
    color: var(--color-blue);
    border-bottom: 2px solid var(--color-blue) !important;
    padding-bottom: 0;
}

.p-info-pagination li span.dots {
    color: #333;
    font-weight: 700;
}

/* ホバーした時に少し薄くする演出（操作感のため） */
.p-info-pagination li a:hover {
    background-color: #eee;
    opacity: 0.7;
}

/* --- 詳細ページ専用：前後記事（PREV / NEXT）ナビゲーションの配置
.p-info-detail__navigation {
    display: flex;
    justify-content: center;
    gap: 20px;              // 前後リンクの間の広めのスペース
    margin-top: 80px;       // 投稿記事との余白
    padding-top: 30px;
    border-top: 1px solid #333; // 記事本文との区切り線
}
*/

/* --- 詳細ページ専用：前後記事ナビゲーションの廃止 --- */
/* ① ページネーション（PREV/NEXT）を非表示 */
.p-info-detail__navigation {
    display: none; 
}

/* 投稿詳細ページ（.p-info-detail）の時だけ、フッターに区切り線を表示する */
.p-info-detail .p-info-archive__footer {
    border-top: 1px solid #333; /* 記事本文との区切り線 */
    margin-top: 100px;            /* 本文との余白 */
    padding-top: 50px;           /* 線とボタンの間の余白 */
    display: flex;
    justify-content: center;     /* ② ボタンを中央寄せ */
}

.p-info-detail__nav-prev a,
.p-info-detail__nav-next a {
    color: #333;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.p-info-detail__nav-prev a:hover,
.p-info-detail__nav-next a:hover {
    opacity: 0.7;
}

/* 9. 「BAck」デザイン */
.p-info-archive__footer {
}

.c-btn-back {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-top: 0;               /* 上のfooterで調整するため0 */
    margin-right: 12px;          /* 中央寄せのためリセット */
    /*
     margin-top: 50px;
    margin-right: 12px;
    */
    background-color: transparent !important;
    color: #333;
    font-family: Arial;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    width: auto;
    min-width: 0;
    height: auto;
}

.c-btn-back span {
    /* border-bottom: 2px solid #019BD8; */
    position: relative;
    padding-left: 10px;
    padding-right: 40px;
    margin-right: -30px;
    margin-bottom: -3px;
    display: inline-block;
}

/* 常に表示されるベースの線（薄い青） */
.c-btn-back span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;                 
    background-color: var(--color-blue); /* ベースの線 */
}

/* ヘッダーのメニューと同様のアニメーション（左から右へ動く青線）
.c-btn-back span::after {
    content: "";
    position: absolute;
    bottom: 0;                   // 線の位置
    left: 0;
    width: 0;                    // 初期状態は幅0
    height: 2px;                 // ヘッダー(style.css:131行目)と同じ太さ
    background-color: var(--color-blue); // 変数を使用
    transition: width 0.4s ease-in-out; // アニメーションの速度
}
*/

/* マウスホバー時に線が伸びる/
.c-btn-back:hover span::after {
    width: 100%;
}
*/

/* ホバー設定を維持 */
.c-btn-back:hover {
    opacity: 0.7;
}

/* お知らせがない時のメッセージ (通常版) */
.no-posts {
    text-align: center;
    padding: 100px 0;
    font-size: 16px;
    color: #333;
    width: 100%;
}

/* ==========================================================
   Responsive (1250px基準)
   ========================================================== */
@media (max-width: 1250px) {
    .p-info-archive,
    .c-cta__inner {
        width: 90%;
    }
}

/* ==========================================================
   Responsive (834px基準)
   ========================================================== */
@media (max-width: 834px) {
    .p-info-archive {
        padding: 0 20px 80px;
        width: 90%;           /* 1250pxからの継承を維持 */
    }

    .p-info-archive__inner {
        width: 100%;          /* 二重に幅制限をかけないよう100%に */
        padding: 0;
    }

    .p-info-archive__content {
        padding: 20px;
    }

    .p-info-list__link {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 15px 0;
    }
    
    .p-info-list__title {
        display: block;
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .p-info-list__arrow {
        display: none;
    }

    .no-posts {
        padding: 60px 0;
        font-size: 15px;
    }
    
    .p-info-archive__footer {
        margin-right: 0;
        justify-content: flex-end; /* モバイルでも右寄せを維持 */
        align-items: center;
    }

    /* モバイル時も詳細ページのみ中央寄せを適用 */
    .p-info-detail .p-info-archive__footer {
        justify-content: center;
    }
}