/**
 * 注記・アラートのボックス（追加 CSS クラス notice-box）。Figma 1709:46975。
 *
 * グループ（中に段落）にも段落にも直接付けられる。どちらでも同じ見た目。
 * 中の段落の上下マージンは 0（1行ずつ段落でも、1段落の中の改行でも行の間隔が同じ）。
 *
 * 幅は inline-size で最大 800px。1カラムの本文の直下ブロックに付く
 * max-width: calc(100% - molecule/rg * 2)（テーマ content.css、こちらより詳細度が高い）と
 * 両方が効くように max-width は使わない。
 * 中央揃えはボックスの中の文字だけ。
 */

.notice-box {
	box-sizing: border-box;
	inline-size: min(100%, 50rem);
	margin-inline: auto;
	padding: var(--wp--custom--molecule--rg);
	border: var(--wp--custom--border-width--thin) dashed var(--wp--preset--color--state-alert);
	background-color: var(--wp--preset--color--bg-yellow);
	color: var(--wp--preset--color--state-alert);
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 2.5;
	text-align: center;
}

/*
 * グループ（constrained）に付く has-global-padding の左右 padding を打ち消す。
 * テーマ content.css の .content .has-global-padding（padding-inline: 0、後から読まれる）より詳細度を上げる。
 */
.wp-block-group.notice-box.has-global-padding {
	padding-inline: var(--wp--custom--molecule--rg);
}

.notice-box > p {
	margin-block: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.notice-box a,
.notice-box a:hover {
	color: inherit;
	text-decoration: underline;
}