/* ==== part:news3 start ==== */

/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news3-parts * {margin: 0;padding: 0;}

/*日付*/
dl.news3-parts dt {
	display: flex;
	padding: 1rem 1rem 0 1rem;	/*日付内の余白。上、右、下、左への順番。*/
}

/*テキストブロック*/
dl.news3-parts dd {
	padding: 0 1rem 1rem 1rem;	/*日付内の余白。上、右、下、左への順番。*/
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/
dl.news3-parts dt:nth-of-type(odd),
dl.news3-parts dd:nth-of-type(odd) {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){

	dl.news3-parts {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
		align-items: start;
	}

	/*日付*/
	dl.news3-parts dt {
		align-self: stretch;
		padding: 0.5rem 1rem;	/*日付内の余白。上下、左右への順番。*/
	}

	/*テキストブロック*/
	dl.news3-parts dd {
		padding: 0.5rem 1rem;	/*日付内の余白。上下、左右への順番。*/
	}

	}/*追加指定ここまで*/

/* ==== part:news3 end ==== */


/* ==== part:news2 start ==== */

/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news2-parts * {margin: 0;padding: 0;}

/*日付*/
dl.news2-parts dt {
	display: flex;
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){

	dl.news2-parts {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
		gap: 0 2rem;	/*2remが、日付とテキストとの間に空けるスペース。お好みで。*/
		align-items: start;
	}

	}/*追加指定ここまで*/

/* ==== part:news2 end ==== */


/* ==== part:news1 start ==== */

/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news1-parts * {margin: 0;padding: 0;}

/*日付*/
dl.news1-parts dt {
	display: flex;
}

/*アイコン*/
dl.news1-parts dt span {
	display: inline-block;
	line-height: 1;
	width: 6rem;	/*幅*/
	padding: 0.3rem 0;	/*上下に0.3文字分、左右に0の余白*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;
	transform: scale(0.8);	/*サイズを80%に*/
	border-radius: 3px;		/*角を少し丸く*/
}
/*アイコン（primary背景色の上でアイコンが同化しないように）*/
.bg1-primary-parts dl.news1-parts dt span {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*アイコンを目立たせる場合（accent-color）*/
dl.news1-parts dt span.accent-color {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
/*アイコンを目立たせる場合（accent背景色の上でアイコンが同化しないように）*/
.bg1-accent-parts dl.news1-parts dt span.accent-color {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){

	dl.news1-parts {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
		align-items: start;
	}

	}/*追加指定ここまで*/

/* ==== part:news1 end ==== */