/* ================================================================
   1. サイト共通：土台（ワイド設計）
   ================================================================ */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1600px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    min-height: 100vh;
}

.content {
    flex: 1;
    min-width: 0;
    padding: 0 20px 40px;
    box-sizing: border-box;
}

main.幅狭 {
    max-width: none;
    width: 100%;
}

/* ================================================================
   2. 自動生成カード（JS連動：スマホ2列 / 上画像・下文字）
   ================================================================ */
.content .p-search-results-body, 
.content #js-article-list, 
.content #js-top-latest-cards, 
.content #js-cat-article-list, 
.content #js-related-list, 
.content #js-recommend-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 0;
    width: 100%;
    align-items: start;
}

.p-item-card {
    display: flex;
    flex-direction: column; 
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    height: auto; 
    min-height: 280px;
    box-sizing: border-box;
}

.p-item-image { 
    width: 100%;
    aspect-ratio: 3 / 2; 
    object-fit: cover;
    display: block;
}

.p-item-content {
    padding: 12px 10px 15px; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 5px;
}

.p-tag-container {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.p-category-tag {
    background-color: #e0e0e0;
    color: #333;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
}

.p-item-title {
    margin: 0;
    font-size: 15px;
    color: #191970;
    font-weight: bold;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-item-dates {
    font-size: 11px;
    color: #888;
    margin-top: auto;
    line-height: 1.2;
    text-align: right;
}

.p-date-upd {
    color: #d9534f;
    font-weight: bold;
}

/* ================================================================
   3. PC表示：横長スイッチ ＆ 検索モーダル4列（769px以上）
   ================================================================ */
@media screen and (min-width: 769px) {
    /* 通常ページの自動生成カード（2列・横長） */
    .p-item-card {
        flex-direction: row;
        height: auto; 
        min-height: 120px;
        align-items: stretch;
    }

    .p-item-image {
        width: 180px;
        height: auto; 
        aspect-ratio: 3 / 2;
        flex-shrink: 0;
    }

    .p-item-content {
        flex: 1;
        padding: 12px 15px;
        justify-content: center;
    }

    /* 検索モーダル内：強制4列 ＆ 枠ゾーン余白 */
    .p-search-modal-content #p-search-results-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        box-sizing: border-box;
    }

    /* 検索結果カードだけを縦並びに戻す */
    #p-search-results-list .p-item-card {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    #p-search-results-list .p-item-image {
        width: 100%;
        aspect-ratio: 3 / 2;
    }

    #p-search-results-list .p-item-title {
        font-size: 17px;
line-height: 1.5;
        /* タイトル2行分の高さをしっかり確保 */
        height: 3em; 
        /* ★ここで日付との間に隙間を作る（15px〜20px程度でお好みで） */
        margin-bottom: 15px;
    }
}

/* ================================================================
   4. 記事内パーツ（item-list / cc-item-list / white-frame）
   ================================================================ */
.cc-container {
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 15px;
}

.item-list, 
.cc-item-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.item-card, 
.cc-item-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.item-image, 
.cc-item-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.item-content, 
.cc-item-content {
    padding: 15px;
    flex-grow: 1;
}

.item-title, 
.cc-item-title {
    font-size: 20px;
    color: #191970;
    margin-bottom: 8px;
}

/* 記事内パーツのレスポンシブ */
@media (max-width: 1024px) {
    .item-list, 
    .cc-item-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .item-list, 
    .cc-item-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* 車内記事上部の概要・画像横並び */
.white-frame {
    background-color: #f1f1f1;
    display: flex;
    gap: 10px;
    align-items: center;
}

.frame-image {
    flex-basis: 310px;
    width: 310px;
    flex-shrink: 0;
}

.frame-image img {
    max-width: 100%;
    height: auto;
    margin-left: auto;
}

@media (max-width: 768px) {
    .white-frame {
        flex-direction: column;
    }
    .frame-content {
        order: 2;
        width: 100%;
    }
    .frame-image {
        order: 1;
        width: 100%;
        text-align: center;
    }
}


.c-new-badge {
    background-color: #d9534f;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}



/* 手動のコンテンツ枠 */




/* 埋め込みカードを包むコンテナ */
.p-embed-container {
    display: grid;
    /* 1枚のときは左寄せ、2枚以上なら並べる */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 20px;
    margin: 20px 0;
    max-width: 1000px; /* PCで長くなりすぎないよう全体の最大幅を制限 */
}

/* カード自体のスタイル修正 */
.p-embed-container .p-item-card {
    /* 1枚の時の最大幅を、下の2枚並びと同じくらいに制限 */
    max-width: 461px; 
    width: 100%;
    margin-right: auto; /* 左寄せを維持 */
}

/* スマホ表示（画面幅が500px以下の時） */
@media (max-width: 500px) {
    .p-embed-container .p-item-card {
        max-width: 100%; /* スマホでは画面幅いっぱいに（でも巨大化はしない） */
    }
    .p-embed-container {
        grid-template-columns: 1fr; /* スマホは強制1列 */
    }
}



.r-photo-metadata-inline {
    display: flex;
    align-items: center; /* これが重要！上下の中央で揃えます */
    gap: 10px;
    margin-bottom: 12px;
    line-height: 1;      /* 行間の影響をなくす */
}

.r-meta-item {
    display: flex;
    align-items: center; /* 項目内（ラベルと値）も中央揃え */
    font-size: 14px;     /* 全体のサイズ感はお好みで */
    color: #475569;
}

.r-meta-label {
    font-size: 12px;
    color: #94a3b8;
    margin-right: 6px;
    font-weight: bold;
    /* 漢字の「沈み」がどうしても気になる場合は以下を微調整 */
    /* transform: translateY(-1px); */
}

.r-meta-sep {
    color: #cbd5e1;
    font-size: 13px;
}



/* パンくずリスト全体のスタイル */
.p-breadcrumb {
    padding: 10px 0;
    font-size: 15px; /* 普通の文字サイズ */
    margin-left: 10px; /* 左端の余白（moji1に合わせる） */
    margin-top: 15px; /* 左端の余白（moji1に合わせる） */
    margin-bottom: 15px; /* 左端の余白（moji1に合わせる） */

}

/* リンクの設定 */
.p-breadcrumb a {
    color: #666666;
    text-decoration: none;
    transition: 0.2s;
}

/* ホバーした時だけ少し濃くする */
.p-breadcrumb a:hover {
    color: #333;
    text-decoration: underline;
}

/* 区切り文字「＞」の間隔 */
.p-breadcrumb span {
    margin: 0 2px;
    color: #ccc; /* 記号はさらに薄く */
}

/* 今いるページ（一番右端） */
.p-breadcrumb .p-current {
    color: #666666;
}