/*
 * Site Internal Links 同梱の最小CSS（設定で読み込みを止められます）。
 * 色と角丸は CSS 変数で変更できます。class 名は sil- で始まる BEM 形式です。
 */
.sil-slot {
	--sil-border: #d9d9d9;
	--sil-bg: #fafafa;
	--sil-accent: currentColor;
	--sil-muted: #666;
	--sil-radius: 6px;
	--sil-gap: 1em;
	margin: 1.5em 0;
}

.sil-block + .sil-block {
	margin-top: var(--sil-gap);
}

.sil-block p {
	margin: 0 0 0.4em;
}

.sil-block__heading {
	font-weight: bold;
}

.sil-block__lead,
.sil-block__trail {
	color: var(--sil-muted);
	font-size: 0.95em;
}

/* 文字リンク */
.sil-block--text .sil-block__text {
	margin: 0;
}

/* カード */
.sil-block--card .sil-block__link {
	display: flex;
	gap: 1em;
	align-items: center;
	padding: 0.75em;
	border: 1px solid var(--sil-border);
	border-radius: var(--sil-radius);
	background: var(--sil-bg);
	text-decoration: none;
	color: inherit;
}

.sil-block--card .sil-block__image {
	flex: 0 0 30%;
	max-width: 200px;
}

.sil-block__image {
	display: block;
}

.sil-block__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--sil-radius) - 2px);
}

.sil-block__body {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
}

.sil-block__title {
	font-weight: bold;
	color: var(--sil-accent);
	text-decoration: underline;
}

.sil-block__desc {
	font-size: 0.9em;
	color: var(--sil-muted);
}

/* バナー風 */
.sil-block--banner .sil-block__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--sil-radius);
	text-decoration: none;
	color: #fff;
}

.sil-block--banner .sil-block__image img {
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	border-radius: 0;
}

.sil-block--banner .sil-block__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.75em 1em;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

.sil-block--banner .sil-block__title,
.sil-block--banner .sil-block__desc {
	color: #fff;
	text-decoration: none;
}

.sil-block--banner .sil-block__title::after {
	content: " \203A";
}

/* スマホ幅では縦に積む */
@media (max-width: 600px) {
	.sil-block--card .sil-block__link {
		flex-direction: column;
		align-items: stretch;
	}

	.sil-block--card .sil-block__image {
		max-width: none;
	}
}

/*
 * 1.4.0：カード形式（ラベル付きカード）。文字リンク・バナー風と、画像のないバナー風の格下げ表示は上のルール（1.3.0）のまま。
 * 色・角丸・余白は、設定「共通デザイン」の値が CSS 変数として下に出力されます（既定値は参考画像の値）。
 */
.sil-card {
	--sil-card-label-bg: #785145;
	--sil-card-label-fg: #fff;
	--sil-card-bg: #fbf8f8;
	--sil-card-border: #cca89e;
	--sil-card-radius: 4px;
	--sil-card-pad: 24px;
	--sil-card-pt: var(--sil-card-pad);
	--sil-card-over: 26px;
	box-sizing: border-box;
	margin-top: var(--sil-card-over);
	padding: var(--sil-card-pt) var(--sil-card-pad) var(--sil-card-pad);
	border: 1px solid var(--sil-card-border);
	border-radius: var(--sil-card-radius);
	background: var(--sil-card-bg);
}

.sil-block + .sil-card {
	margin-top: calc(var(--sil-gap) + var(--sil-card-over));
}

.sil-card.sil-card--nolabel {
	margin-top: 0;
}

.sil-block + .sil-card.sil-card--nolabel {
	margin-top: var(--sil-gap);
}

/* ラベル：本文の流れの中に置き、枠の上へはみ出して重ねる。長い文言は折り返して全文を出し、下の画像・本文を押し下げる。 */
.sil-card .sil-card__label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	min-height: 39px;
	margin: calc(-1 * var(--sil-card-pt) - var(--sil-card-over)) 0 11px;
	padding: 6px 14px 6px 13px;
	border-radius: 4px;
	background: var(--sil-card-label-bg);
	color: var(--sil-card-label-fg);
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
}

/* アイコンは1行目の高さの中央（上の余白＝（行の高さ − アイコンの高さ）÷ 2）。 */
.sil-card .sil-card__icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3.5px;
	fill: currentColor;
}

.sil-card .sil-card__label-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sil-card .sil-block__lead {
	margin: 0 0 0.6em;
}

.sil-card .sil-block__trail {
	margin: 0.6em 0 0;
}

.sil-card .sil-card__link {
	display: flex;
	gap: 19px;
	align-items: flex-start;
	color: inherit;
	text-decoration: none;
}

.sil-card .sil-card__link:hover,
.sil-card .sil-card__link:focus {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

.sil-card .sil-card__image {
	flex: 0 0 min(240px, 34%);
	max-width: 240px;
}

.sil-card .sil-card__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

.sil-card .sil-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sil-card .sil-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: -1px 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
}

.sil-card .sil-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
}

.sil-card.sil-card--noimage .sil-card__link {
	display: block;
}

/*
 * 1.7.0：スマホの文字の大きさ（共通デザイン「文字の大きさ（スマホ）」）は、同梱CSSのインラインの .sil-card{…} に出す CSS変数で変わる。
 *   ラベル（横並び・縦積みの両方）：--sil-sp-label-fs・--sil-sp-label-lh・--sil-sp-label-min・--sil-sp-icon・--sil-sp-icon-mt
 *   タイトル・説明文（コンパクト横並びだけ）：--sil-sp-title-fs・--sil-sp-desc-fs
 * 変数がないとき（1.6.0 の移行が済んでいない間・同梱CSSのインラインを出さない場合）は、1.6.0 と同じ大きさ（＝「標準」）。
 * 変数は 600px 以下の規則でだけ使う。PC（601px 以上）・内部コピー・外部コピー・縦積みのタイトルと説明文には使わない。
 */
/* 600px 以下では、画像→タイトル→説明文の縦積み（画像はカード幅いっぱい）。 */
@media (max-width: 600px) {
	.sil-card {
		--sil-card-pt: min(var(--sil-card-pad), 22px);
		--sil-card-over: 22px;
		padding: var(--sil-card-pt) min(var(--sil-card-pad), 16px) min(var(--sil-card-pad), 18px);
	}

	.sil-card .sil-card__label {
		min-height: var(--sil-sp-label-min, 33px);
		margin-bottom: 10px;
		padding: 5px 12px;
		font-size: var(--sil-sp-label-fs, 15px);
		line-height: var(--sil-sp-label-lh, 23px);
	}

	.sil-card .sil-card__icon {
		width: var(--sil-sp-icon, 17px);
		height: var(--sil-sp-icon, 17px);
		margin-top: var(--sil-sp-icon-mt, 3px);
	}

	.sil-card .sil-card__link {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.sil-card .sil-card__image {
		flex: none;
		width: 100%;
		max-width: none;
	}

	.sil-card .sil-card__title {
		margin-bottom: 6px;
		font-size: 17px;
	}

	.sil-card .sil-card__desc {
		font-size: 14.5px;
	}
}

/*
 * 1.6.0：スマホでのカード表示「コンパクト横並び」。画面幅 600px 以下で、sil-card--sp-compact が付いたカードだけ。
 * 左に画像（幅 112px・16:9）、右にタイトル（3行まで）と説明文（2行まで）。PC（601px 以上）には何もしない。
 * 「大きく縦積み」のカードにはクラスが付かず、上の 600px 以下の規則（1.4.0〜1.5.1 の見た目）のままです。
 * 縦積みのカードだけを指定するときは .sil-card:not(.sil-card--sp-compact) を使います。
 */
@media (max-width: 600px) {
	.sil-card.sil-card--sp-compact {
		padding: var(--sil-card-pt) min(var(--sil-card-pad), 14px) min(var(--sil-card-pad), 14px);
	}

	.sil-card.sil-card--sp-compact .sil-card__link {
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
	}

	.sil-card.sil-card--sp-compact .sil-card__image {
		flex: 0 0 112px;
		width: 112px;
		max-width: 112px;
	}

	.sil-card.sil-card--sp-compact .sil-card__title {
		-webkit-line-clamp: 3;
		margin: -2px 0 4px;
		font-size: var(--sil-sp-title-fs, 15px);
		line-height: 1.5;
	}

	.sil-card.sil-card--sp-compact .sil-card__desc {
		-webkit-line-clamp: 2;
		font-size: var(--sil-sp-desc-fs, 13px);
		line-height: 1.6;
	}

	.sil-card.sil-card--sp-compact .sil-block__lead {
		margin-bottom: 8px;
		font-size: 13px;
	}

	.sil-card.sil-card--sp-compact .sil-block__trail {
		margin-top: 8px;
		font-size: 13px;
	}
}

/*
 * 1.5.0：外部コピー（slot に1回。外部・前は最初のカードの前、外部・後は最後のカードの後）。
 * 太字・中央寄せ・16px。文字色はテーマの本文の色を継承します。
 */
.sil-slot__outer {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.sil-slot__outer--after {
	margin: 8px 0 0;
}

/* ラベルが上にはみ出すカードの直前に外部・前があるとき、ラベルと重ならないよう余白を足す */
.sil-slot__outer--before + .sil-card:not(.sil-card--nolabel) {
	margin-top: calc(var(--sil-card-over, 26px) + 8px);
}