#tumblr {
	width:auto;	/* ブロック横幅 */ 
	height:600px;　/* ブロック縦幅 */ 
	overflow: auto;   /* スクロール表示 */ 

	/* 上記でもスクロールが表示されない場合は、上記oveflow指定をhtmlのtumblr部分に直接書く（参考：埼玉国際） */
 
	padding:10px;
	font-size:14px;
	line-height:140%;
	border:1px #DDD solid;
	text-align:left;
	margin:0px auto 8px auto;
}


#tumblr img{
	width:100%;	/* 画像あり投稿の場合のサムネイルサイズ */ 
}

#tumblr strong{
	color:rgb(0, 0, 0);	/* tumblr側で太字にした場合に、サイト側で何色にするかの設定 */ 
}

#tumblr .post{
	color:#3F4E74;
	font-weight:bold;	/* 日付とタイトル */ 
	list-style:none;
}

#tumblr a{
	color:#3F4E74;	/* タイトル */ 
}

#tumblr .post_c{
	border-bottom:1px dotted;	/* 本文 */ 
	margin-bottom:15px;
}

/* --------------------------------
 * News Section
 * -------------------------------- */

/* 全体を囲むコンテナ */
.news-container {
    width: 100%;
    max-width: 1500px; /* コンテンツの最大幅を指定 */
    margin: 50px auto; /* 上下に50pxの余白、左右はautoで中央揃え */
    padding: 0 5px;   /* スマホ表示などで左右に余白を確保 */
    box-sizing: border-box;
	overflow: hidden;
}

/* NewsBoxとImageBoxを囲むラッパー */
.news-wrapper {
    display: flex;          /* Flexboxを有効にして子要素を横並びに */
    gap: 30px;              /* NewsBoxとImageBoxの間に30pxの余白を作成 */
    align-items: stretch;   /* 子要素の高さを最も高いものに自動で合わせる */
}

/* ニュースボックスのスタイル */
.news-box3 {
    flex: 3; /* ImageBoxに対して3倍の幅を持つように設定 */
    padding: 2%;
    background: url(../../../images/top/bg_news.jpg) no-repeat center center/cover; /* ご指定の背景画像 */
    
    /* 中身を縦並び・中央揃えにするための設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	font-size: 1.2rem;
}

.news-box3 ul {width: 80%;}
.news-box3 ul li {border-bottom: 1px solid #CCCCCC; padding: 10px; margin-top: 0px;  display: flex; align-items: baseline; }

.news-box3 a {text-decoration: none; color: #000;}
.news-box3 .date {margin-right: 1em;}


/* 画像ボックスのスタイル */
.image-box {
    flex: 2; /* NewsBoxに対して1倍の幅を持つように設定 */
	justify-content: center;
    align-items: center;
	
}

.image-box a,
.image-box img {
    display: block;  /* 画像の下にできる余分な隙間をなくす */
    width: 100%;     /* 親要素の幅いっぱいに広がる */
    height: 100%;    /* 親要素の高さ(NewsBoxの高さ)いっぱいに広がる */
    object-fit: cover; /* アスペクト比を保ったまま、親要素を埋め尽くすように表示 */
}

/* --------------------------------
 * Responsive (任意)
 * 画面幅が768px以下になったら縦積みにする設定
 * -------------------------------- */
@media (max-width: 980px) {
    .news-wrapper {
        flex-direction: column; /* 横並びを解除して縦積みにする */
    }

    /* 縦積みにした際に画像ボックスに適切な高さを設定 */
	.image-box {
		width: 100%;        /* news-box3のulと幅を合わせる */
		max-width: 355px;   /* PC版の元画像サイズを最大幅に設定 */
		margin: 0 auto;     /* 中央揃え */
		min-width: 0;
	}

	.image-box img {
    object-fit: contain; /* 画像全体が見えるように調整 */
    height: auto;        /* 高さを自動調整に */
	}
    /* スマホ表示の際にニュースボックスの見た目を調整 */
    .news-box3 {
        font-size: 1rem;  /* 文字サイズを少し小さくする (例: 1.1rem → 1rem) */
        padding: 15px;    /* ボックス内の余白を固定値にして調整 */
    }

    /* スマホの時はリストの幅をもう少し広げる */
    .news-box3 ul {
        width: 80%;
    }

    /* 各ニュース項目の余白を少し詰める */
    .news-box3 ul li {
        padding: 8px; /* (例: 10px → 8px) */
    }
}