/* 複数のHTMLファイルに跨り設定されていると思われる(#作成初期に設定した) */

/* /myblog/templates/myblog/blog-index.html */
/* /myblog/templates/myblog/blog-detail.html */
/* /myblog/templates/myblog/blog-category-posts.html */

/* ==========================
   カード全体のスタイル
========================== */
.card {
    border: 1px solid #efe1e1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%; /* カードの横幅を親要素に合わせる */
    /* 左右の間隔を調整する */
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0.5px; /* 上部の余白を削除 */
    /* 横幅を制限(#PC画面 Carousel と幅を合わせる) */
    max-width: 800px;
    margin: 0 auto; /* 中央寄せ */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
/* ==========================
   カード画像のスタイル
========================== */
.card-img-top {
    height: 300px; /* 画像エリアの高さを固定 */
    width: 100%; /* カード幅に合わせる */
    overflow: hidden; /* 画像がエリアからはみ出ないようにする */
}
.card-img-top img {
    height: 100%; /* 高さを親要素に合わせる */
    width: 100%; /* 幅を親要素に合わせる */
    object-fit: cover; /* アスペクト比を維持しながら画像をフィット */
    object-position: center; /* 中心部分を表示'center', 'contain' */
}
/* ==========================
   カードボディ部分
========================== */
.card-body {
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* ==========================
   タイトルのスタイル
========================== */
.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}
.card-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}
.card-title a:hover {
    color: #007bff;
}
/* ==========================
   メタ情報のスタイル
========================== */
.text-muted {
    font-size: 0.875rem; /* 小さめのフォントサイズ */
    color: #6c757d !important;
    margin: 0; /* 上下の余白を0に設定 */
    padding: 0px 0; /* 上下にわずかなパディング */
    text-align: end; /* メタ情報を右揃え */
}
/* ==========================
   ボタンのスタイル
========================== */
.btn-primary {
    margin-top: auto;
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* ==========================
   レスポンシブ調整
========================== */
/* タブレット画面: 768px～991px */
@media (min-width: 768px) and (max-width: 991px) {
    .card {
        max-width: 600px; /* 横幅を 600px 固定 */
    }
    .card-body {
        padding: 5px; /* 余白を調整 */
    }
    .card-title {
        font-size: 1.1rem; /* タブレット用に少し小さく */
        text-align: center; /* 中央揃え */
    }
    .card-img-top {
        height: 200px; /* 画像の高さを少し小さく */
    }
    /* 現在の時刻の表示を中央揃え */
    #RealtimeClockArea2 {
        text-align: center;
    }
}
/* スマホ対応: max-width: 767px */
@media (max-width: 767px) {
    .card {
        max-width: 600px; /* スマホ 横幅を 600px 固定 */
    }
    .card-body {
        padding: 5px; /* スマホ用に余白をさらに調整 */
    }
    .card-title {
        font-size: 1.1rem; /* スマホ用にさらに小さく */
        text-align: center; /* スマホでは中央揃え */
    }
    .text-muted {
        font-size: 0.75rem; /* メタ情報をさらに小さく */
        text-align: right; /* スマホでは右揃え */
    }
    .card-img-top {
        height: 300px; /* スマホ用に画像の高さを小さく */
    }
    /* myblog/templates/myblog/blog-index.html */
    /* デザイン向上のため、スマホ画面では表示しない {id="XXXX"} */
    .carousel-container {
        display: none;
    }
    #weather-forecast #social-links {
        display: none;
    }
}