/* 媒体ブランドカラー */
:root {
    --MA-brand-color: #000000;
    --MA-brand-text-color: #ffffff;
    --MA-brand-sub-color: #83adc8;

    --JC-brand-color: #075c91;
    --JC-brand-text-color: #ffffff;
    --JC-brand-sub-color: #83adc8;
    
    --JT-brand-color: #000000;
    --JT-brand-text-color: #ffffff;
    --JT-brand-sub-color: #83adc8;
    
    --II-brand-color: #000000;
    --II-brand-text-color: #ffffff;
    --II-brand-sub-color: #83adc8;
    
    --IA-brand-color: #000000;
    --IA-brand-text-color: #ffffff;
    --IA-brand-sub-color: #83adc8;
    
    --IR-brand-color: #000000;
    --IR-brand-text-color: #ffffff;
    --IR-brand-sub-color: #83adc8;
    
    --GD-brand-color: #000000;
    --GD-brand-text-color: #ffffff;
    --GD-brand-sub-color: #83adc8;
    
    --SK-brand-color: #000000;
    --SK-brand-text-color: #ffffff;
    --SK-brand-sub-color: #83adc8;
    
    --KD-brand-color: #000000;
    --KD-brand-text-color: #ffffff;
    --KD-brand-sub-color: #83adc8;
}
    
/* 媒体ヘッダー部分 */
.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; は不要（中央寄せにする必要がなければ） */
}