@charset "utf-8";

/*==================================================================
    IPすまいる2026 ／ news.css
    お知らせ 一覧（home.php） 専用スタイル

    カードの見た目はトップページ #archive（css/front.css）と同じにしている。
    デザインを変える場合は両方に反映すること
==================================================================*/

/*------------------------------------------------------------------
    #archive ／ 記事一覧
------------------------------------------------------------------*/
#archive {
	padding-block: var(--m6) var(--m4);
	background: var(--light-gray);
}
#archive .row {
	width: 960px;
	max-width: 100%;
	margin-inline: auto;
	padding: var(--m4) var(--m4) var(--m3);
	background: #fff;
	border-radius: 12px;
}
#archive .block {
	display: flex;
	gap: var(--m2);
	padding-block: var(--m);
}
#archive .block time {
	flex: none;
	width: calc(105 * var(--px));
	font-size: calc(var(--regular-size) * 0.75);
	color: #777;
}
#archive .block h2 {
	padding-inline-start: var(--m2);
	border-inline-start: 1px solid var(--border);
	font-size: var(--regular-size);
	font-weight: 700;
	line-height: 1.7;
}

#archive .empty {
	padding-block: var(--m6);
	text-align: center;
	color: #777;
}

@media screen and (max-width: 767px) {
	#archive {
		padding-block: var(--m3) var(--m2);
	}
	#archive .row {
		padding: var(--m2);
	}
	#archive .block {
		flex-direction: column;
		gap: 0.2lh;
	}
	#archive .block h2 {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}