/* 媒体ヘッダー部分 */
.media-header {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    margin: 10px;
}

.media-icon {
    width: 40px; /* アイコンの幅 */
    height: 40px; /* アイコンの高さ */
    background-color:var(--bg-color);
    margin-right: 10px; /* アイコンと媒体名の間のスペース */
    flex-shrink: 0;
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center center; /* 画像を水平・垂直方向の中央に配置 */
    background-size: contain; /* 画像を要素内に収まるように調整（必要に応じて） */
    border-radius: 50%; /* これを追加して要素を真円にする */
    overflow: hidden; /* 背景画像や要素の内容がはみ出すのを防ぐ（念のため） */
}

.media-name {
    font-size: medium;
    font-weight: bold;
    margin: 0;
}

/* 記事リスト部分 */
.article-list {
    display: flex;
    flex-direction: column; /* 記事アイテムを縦に並べる */
    gap: 5px; /* 記事アイテム間のスペースを調整 */
    width: 100%; /* モバイルでは横幅いっぱい */
}

.article-item {
    display: flex; /* 画像と記事内容を横並びにする */
    align-items: center; /* 記事画像とタイトルを垂直方向中央揃え */
    background-color: #fff;
    padding: 10px; /* パディングを調整 */
}

.article-image {
    width: 100px; /* 画像の幅をモバイル向けに調整 */
    height: 75px; /* 画像の高さ (4:3のアスペクト比を想定) */
    background-color: #000080; /* 濃い青色 */
    margin-right: 15px; /* 画像とタイトルの間のスペース */
    flex-shrink: 0; /* 画像が縮まないようにする */
	background-size:cover;
    object-fit: cover; /* 画像がBoxを埋めるようにする (もしimgタグを使うなら) */
}

.article-content {
    flex-grow: 1; /* タイトル部分が残りのスペースを埋めるようにする */
    display: flex; /* タイトルを垂直中央にするためにFlexboxを使用 */
    align-items: center; /* 垂直方向中央揃え */
    /* ここでは高さ固定をしないことで、タイトル行数によって自動調整されるようにする */
    height: auto;
    min-height: 75px; /* 画像の高さに合わせて最低限の高さを設定 */
}

.article-title {
    font-size: 18px; /* 記事タイトルのフォントサイズ */
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    color: #333;
    /* text-align: center; は不要（中央寄せにする必要がなければ） */
}