@charset "UTF-8";
/**
 * TFIRM ブログ用スタイル
 *
 * テーマ（BusinessPress）のスタイルを土台にし、本プラグインで追加した
 * 「新着情報（お知らせ／ブログ 左右 2 カラム）」まわりだけを定義する。
 */

/* --------------------------------------------------
 * 新着情報：お知らせ／ブログ 左右 2 カラム
 *
 * レイアウトは参考サイト（https://sionas.co.jp/）の新着セクションに準拠。
 * 見出しは英字ラベル + 日本語見出しの中央寄せ、各項目は日付・タイトルの縦積み。
 * -------------------------------------------------- */
.tfirm-latest {
	box-sizing: border-box;
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	margin-left: auto;
	margin-right: auto;
	max-width: 1120px;
	padding-bottom: 60px;
	padding-left: 20px;
	padding-right: 20px;
}

/* テーマのブレークポイント（980px）で左右 2 カラムに切り替える。
   これ未満は縦積みのまま。 */
@media screen and (min-width: 980px) {
	.tfirm-latest {
		gap: 60px;
		grid-template-columns: 1fr 1fr;
		padding-left: 40px;
		padding-right: 40px;
	}
}

.tfirm-latest__col {
	/* グリッド内で長いタイトルがはみ出さないようにする。 */
	min-width: 0;
}

.tfirm-latest__head {
	text-align: center;
}

.tfirm-latest__label {
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	margin: 0;
}

.tfirm-latest__heading {
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 0 30px;
}

.tfirm-latest__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tfirm-latest__item {
	border-bottom: 1px solid #4693f5;
	margin: 0 0 20px;
	padding: 0 0 10px;
}

.tfirm-latest__link {
	display: block;
	text-decoration: none;
}

.tfirm-latest__date {
	color: #222;
	display: block;
	font-size: 1rem;
	margin-bottom: 0.2em;
}

.tfirm-latest__text {
	color: #222;
	display: block;
	font-size: 1.1rem;
	line-height: 1.5;
}

.tfirm-latest__link:hover .tfirm-latest__text {
	color: #4693f5;
}

.tfirm-latest__more {
	margin: 0;
	padding-top: 0.5rem;
	text-align: right;
}

.tfirm-latest__more a::after {
	content: " \25B6";
	font-size: 0.75em;
}

.tfirm-latest__empty {
	color: #999;
	padding: 0.9rem 0;
}

/* --------------------------------------------------
 * ブログ一覧・カテゴリー一覧
 *
 * お知らせ一覧（/news/）と同じタイトル帯を出すため、#content の幅制限を
 * 解除して中身側で幅を戻す。帯の背景画像はテーマのカスタムヘッダー画像が
 * 自動的に使われる（テーマの inc/customizer-css.php が .jumbotron に設定）。
 * -------------------------------------------------- */
.post-type-archive-blog .site-header,
.tax-blog_category .site-header {
	/* 帯をヘッダー直下に密着させる。 */
	margin-bottom: 0;
}

.post-type-archive-blog .site-content,
.tax-blog_category .site-content {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.post-type-archive-blog .content-area,
.tax-blog_category .content-area {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5rem;
}

@media screen and (min-width: 782px) {
	.post-type-archive-blog .content-area,
	.tax-blog_category .content-area {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* --------------------------------------------------
 * 一覧のリスト（お知らせ／ブログ／ブログカテゴリー 共通）
 *
 * 日付とタイトルを同じ行に並べ、その下に抜粋を置く 1 カラム。
 * -------------------------------------------------- */
.tfirm-list {
	margin-bottom: 3rem;
}

.tfirm-list__item {
	border-bottom: 1px dashed #4693f5;
	/* テーマの .hentry の下マージンを打ち消す。 */
	margin: 0 0 20px;
	padding: 0 0 16px;
}

.tfirm-list__link {
	display: block;
	text-decoration: none;
}

.tfirm-list__head {
	align-items: baseline;
	display: flex;
}

.tfirm-list__date {
	color: #666;
	/* 日付欄の幅を固定し、タイトルの開始位置を全行で揃える。 */
	flex: none;
	font-size: 0.95rem;
	width: 6.2em;
}

.tfirm-list__title {
	color: #222;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	padding-left: 14px;
	position: relative;
}

/* タイトル頭のアクセント。 */
.tfirm-list__title::before {
	background-color: #4693f5;
	content: "";
	height: 1.1em;
	left: 0;
	position: absolute;
	top: 0.22em;
	width: 4px;
}

.tfirm-list__excerpt {
	color: #666;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0.5em 0 0;
	/* 狭い画面では深いインデントを付けない。 */
	padding-left: 14px;
}

/* 広い画面では抜粋の左端をタイトルに揃える。 */
@media screen and (min-width: 782px) {
	.tfirm-list__excerpt {
		padding-left: calc(6.2em + 14px);
	}
}

.tfirm-list__link:hover .tfirm-list__title {
	color: #4693f5;
}