/* ベース設定 */
body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
}

/* ヘッダー */
header {
    background: linear-gradient(135deg, #1a0b2e, #4a148c);
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #ff00ff;
}
header h1 {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
}
.beta { font-size: 0.8rem; background: #ff00ff; padding: 2px 5px; border-radius: 4px; margin-left: 5px; }
header p { margin: 5px 0 0; font-size: 0.8rem; color: #ccc; }

/* フィルターボタン */
.filter-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.filter-btn {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: #555;
}

.filter-btn.active {
    background-color: #ff00ff;
    border-color: #ff00ff;
    color: #fff;
    font-weight: bold;
}

/* タイムライン（メイン） */
/* タイムラインの親枠を縦並びに固定 */
#timeline {
    display: flex;           /* フレックスボックス化 */
    flex-direction: column;  /* 【重要】ここをcolumnにすると縦になります */
    gap: 20px;               /* カードとカードの間隔 */
    width: 100%;             /* 幅を最大に */
    max-width: 800px;        /* スマホ/PCで見やすい幅制限 */
    margin: 0 auto;          /* 中央寄せ */
}

/* カードデザイン */
.card {
    display: flex;           /* 画像とテキストを横に並べる魔法 */
    flex-direction: row;     /* 横方向へ */
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #333;
}

.card-img-wrapper {
    width: 35%;
    display: flex;
    flex-direction: column;
    background-color: #000;
    flex-shrink: 0;
}

.card-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    flex-grow: 1;
}

.ad-container {
    width: 100%;
    display: none;
    background-color: #000;
    text-align: center;
    overflow: hidden;
}

.card-content {
    width: 65%;          /* 残りの65%を使う */
    padding: 10px 12px;      /* 中の余白 */
    display: flex;
    flex-direction: column;  /* 中身は縦並び */
    justify-content: space-between; /* 上下のバランスを取る */
    overflow: hidden;        /* はみ出し防止 */
}

/* アカウント名と日付 */
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 5px;
}

/* アカウント名の強調 */
.account-name {
    color: #ff00ff;
    font-weight: bold;
    white-space: nowrap;     /* 長い名前でも折り返さない */
    overflow: hidden;
    text-overflow: ellipsis; /* はみ出たら...にする */
    max-width: 65%;          /* 名前が長すぎるときの制限 */
}

.tag {
    color: #00ffff;
    font-weight: bold;
}

.card-text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ddd;
    margin: 0 0 8px 0;
}

.btn-sub {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #444;
    color: #fff;
    text-decoration: none;
    padding: 6px 0;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.btn-sub:hover {
    background-color: #666;
}

.btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    padding: 6px 0;          /* 少しスリムに */
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.btn:hover {
    background-color: #ff00ff;
}

/* フッター */
footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: #666;
}

/* FANZAバナーのコンテナ */
.fan-banner-slot {
    width: 100%;
    max-width: 800px;      /* 投稿カードと同じ幅に制限 */
    margin: 25px auto;     /* 上下の余白と中央寄せ */
    text-align: center;    /* iframeを中央に寄せる */
    overflow: hidden;      /* 念のためのはみ出し防止 */
}

/* iframe自体のレスポンシブ調整 */
.fan-banner-slot iframe {
    /* 元のwidth=640pxを、親要素に合わせて縮小させる */
    max-width: 100%;
    height: 200px;
    display: block;        /* 中央寄せのためにブロック要素化 */
    margin: 0 auto;        /* 中央寄せ */
}

/* メディアクエリ（iPhoneサイズ以下） */
@media (max-width: 600px) {
    #timeline {
        width: 80%;
    }

    /* カードのレイアウトを縦並びに変更 */
    .card {
        flex-direction: column;
    }

    /* 画像ラッパーの幅を50%にし、中央寄せ */
    .card-img-wrapper {
        width: 50%;
        margin: 0 auto;
    }

    /* コンテンツを幅100%に */
    .card-content {
        width: 100%;
    }

    /* アカウント名の最大幅を少し緩める（必要なら） */
    .account-name {
        max-width: 80%;
    }

    .fan-banner-slot iframe {
        /* 640pxバナーを画面幅いっぱいに小さく表示 */
        width: 100%; 
    }
}
/* ...existing code... */

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more-btn {
    background: none;
    border: none;
    color: #ff00ff;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-bottom: 8px;
    text-decoration: underline;
    display: none; /* Initially hidden, shown by JS if needed */
}

/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ff00ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}

#back-to-top:hover {
    background-color: #e600e6;
}

/* Footer Ad Responsive */
.footer-ad-container {
    max-width: 100%;
    overflow: hidden;
}

.footer-ad-container ins,
.footer-ad-container iframe {
    max-width: 100%;
}