/* コンテナ全体の余白 */
.report-archive-wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 100px 20px;
}

/* Flexコンテナの設定 */
.report-flex-container {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 25px;       /* アイテム間の隙間 */
    justify-content: flex-start; /* 左寄せ（中央寄せならcenter） */
}

/* 各カードの幅設定 */
.report-flex-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s ease;
    display: flex; /* カード内もFlexにすると高さが揃いやすい */
    
    /* PC: 3カラム（隙間を計算） */
    width: calc((100% - 50px) / 3); 
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    .report-flex-item { width: calc((100% - 25px) / 2); } /* タブレット: 2カラム */
}
@media (max-width: 600px) {
    .report-flex-item { width: 100%; } /* スマホ: 1カラム */
}

/* カードの中身を整える */
.report-card-link { text-decoration: none; color: inherit; width: 100%; }
.report-card-thumb { position: relative; height: 160px; overflow: hidden; }
.report-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.venue-tag {
    position: absolute; bottom: 8px; left: 8px;
    background: #333; color: #fff; font-size: 11px;
    padding: 3px 10px; border-radius: 4px;
}

.report-card-body { padding: 15px; }
.user-info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.u-avatar img { border-radius: 50%; }
.u-name { font-weight: bold; font-size: 13px; display: block; }
.u-comp { font-size: 11px; color: #777; display: block; }

.report-excerpt { 
    font-size: 14px; line-height: 1.6; height: 4.8em; 
    overflow: hidden; margin-bottom: 10px; color: #444;
}

.report-card-footer { 
    display: flex; justify-content: space-between; 
    font-size: 12px; color: #999; border-top: 1px solid #f0f0f0; padding-top: 10px;
}

.report-flex-item:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.08); }



/* --- 詳細ページ全体のレイアウト調整 --- */
.single_page {
    max-width: 850px;
    margin: -60px auto 100px; /* ループテキストに少し重ねて奥行きを出す */
    background: #fff;
    padding: 50px 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    position: relative;
    z-index: 10;
}

/* ヒーロー画像（アイキャッチ） */
.single_img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 35px;
    object-fit: cover;
}

/* --- タイトルエリア --- */
.report-label {
    font-size: 11px;
    font-weight: bold;
    color: #888;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
}

.single_title h2 {
    font-size: 32px;
    line-height: 1.4;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.report-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #999;
}

.venue-name-tag {
    background: #333;
    color: #fff;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 12px;
}

/* --- コンテンツエリア --- */
.single_content {
    margin: 40px 0;
    font-size: 17px;
    line-height: 1.9;
    color: #333;
}

/* --- 投稿者（会員）プロフィールカード --- */
.report-author-card {
    margin-top: 60px;
    padding: 35px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #eee;
}

.author-card-inner {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.author-avatar img {
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.author-role {
    font-size: 10px;
    font-weight: 900;
    color: #bbb;
    display: block;
    margin-bottom: 5px;
}

.author-name {
    font-size: 22px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.author-comp {
    font-size: 13px;
    color: #666;
    font-weight: normal;
    margin-top: 5px;
}

.author-intro {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

.author-profile-link {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    border-bottom: 2px solid #333;
    padding-bottom: 2px;
    transition: all 0.3s;
}

.author-profile-link:hover {
    color: #888;
    border-color: #888;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .single_page {
        margin: -30px 15px 60px;
        padding: 30px 20px;
    }
    .author-card-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .single_title h2 {
        font-size: 24px;
    }
}


/* --- シェアエリア全体 --- */
.report-share-area {
    margin: 60px 0; /* 本文とプロフィールカードの間の余白 */
    text-align: center;
    padding: 30px;
    background: #fdfdfd; /* ほんのりグレーの背景 */
    border-radius: 12px;
    border: 1px solid #eee;
}

/* ラベル：＼ このマッチングを... ／ */
.share-label {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    margin-bottom: 25px; /* ボタンとの間隔 */
    letter-spacing: 0.1em;
}

/* ボタンコンテナ */
.share-buttons {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 15px; /* ボタン間の隙間 */
    flex-wrap: wrap; /* スマホで折り返す */
}

/* --- 共通ボタンスタイル --- */
.share-btn {
    display: flex; /* アイコンとテキストを横並び */
    align-items: center;
    justify-content: center;
    gap: 8px; /* アイコンとテキストの間隔 */
    padding: 12px 24px;
    border-radius: 25px; /* 楕円形 */
    color: #fff !important; /* テキスト色は白 */
    text-decoration: none !important; /* 下線を消す */
    font-size: 15px;
    font-weight: bold;
    transition: all 0.3s ease; /* アニメーション */
    box-shadow: 0 4px 6px rgba(0,0,0,0.06); /* ほんのり影 */
}

/* ホバー時（マウスが乗った時） */
.share-btn:hover {
    transform: translateY(-2px); /* 少し上に浮く */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* 影を強く */
}

/* クリック時 */
.share-btn:active {
    transform: translateY(1px); /* 少し下に沈む */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 影を弱く */
}

/* Dashicons（アイコン）のサイズ調整 */
.share-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* --- 各SNS固有のカラースタイル --- */

/* X (Twitter) - 黒 */
.x-btn {
    background: #000;
}

/* Facebook - 青 */
.fb-btn {
    background: #1877F2;
}

/* LINE - 緑 */
.line-btn {
    background: #06C755;
    /* LINEアイコンがない場合の余白調整 */
    padding-left: 30px;
    padding-right: 30px;
}
/* もしLINEのDashiconsがない場合、テキストだけでバランスを取る */
.line-btn::before {
    content: "●"; /* アイコンの代わりに丸を置く（お好みで消してください） */
    font-size: 10px;
    opacity: 0.5;
    margin-right: 8px;
}

/* --- レスポンシブ --- */
@media (max-width: 600px) {
    .share-buttons {
        flex-direction: column; /* スマホでは縦並び */
        width: 100%;
    }
    .share-btn {
        width: 100%; /* スマホではボタンを全幅に */
    }
}