@charset "UTF-8";

/* =========================================================================
   news-inline.css — 新着情報の日付とタイトルを 1 行に並べる追加分
   -------------------------------------------------------------------------
   旧テーマ由来の layout.css / layout_tb.css / layout_sp.css /
   information.css は <dt>（日付）と <dd>（タイトル）を block のまま
   置いているため、1 件が 2 行になり縦に間延びする。
   ここでは <dl> を「日付 / タイトル」の 2 列グリッドにするだけで、
   色・文字サイズ・日付バッジの見た目は旧テーマのまま触っていない。

   grid を使うのは、1 件 = 1 行を確実に保つため。
   flex + flex-wrap では dd が最小幅まで縮んで折り返しが起きず、
   全件が横一列に並んでしまう。

   1 列目の幅は max-content にして、旧テーマが dt に与えている幅
   （トップ PC 150px / タブレット・SP 100px、一覧は 150px）に
   自動で追従させる。ここで px を決め打ちすると、SP の一覧ページ
   （information.css に dt の上書きが無く 150px のまま）で
   バッジが列からはみ出してタイトルに重なる。

   読み込むページ:
     /              トップページの新着情報（.information_column）
     /information/  新着情報一覧（.news_list）
   ========================================================================= */


/* --- 日付とタイトルを 1 行に ---------------------------------------------
   1 列目に dt（日付）、2 列目に dd（タイトル）。
   dt / dd は HTML 上で交互に並ぶので、自動配置で 1 件 1 行になる。
   2 列目の minmax(0, 1fr) は、長いタイトルが列をはみ出さないため。 */
.information_column .article_contents dl,
.news_list dl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 14px;
	align-items: baseline;
}

/* 行間はグリッドの row-gap で取るため、旧テーマの margin は打ち消す。 */
.information_column .article_contents dl dt,
.news_list dl dt {
	margin-bottom: 0;
}
.information_column .article_contents dl dd,
.news_list dl dd {
	margin-bottom: 0;
}


/* --- タブレット・スマートフォンは間隔だけ詰める -------------------------- */
@media all and (max-width: 1200px) {
	.information_column .article_contents dl,
	.news_list dl {
		column-gap: 12px;
		row-gap: 8px;
	}
}