/**
 * SEO Simple — Decorations (block styles)
 * リスト・段落・グループを囲むボックス装飾と、h1〜h5用の見出し装飾。
 *
 * 使い方:
 *   1) ブロックエディタでブロックを選択 →「スタイル」から選ぶ（推奨・簡単）
 *   2) または「高度な設定 → 追加CSSクラス」に is-style-xxx を入力
 *
 * カラーはテーマのアクセントカラー等を使用。var(--x, fallback) 形式で
 * エディタ内プレビューでも崩れないようフォールバック値を持たせている。
 */

/* =========================================================
   エディタの本文カラム幅を実表示（1180px）にそろえる
   -----------------------------------------------------------
   このテーマは theme.json を持たない classic テーマのため、標準では
   ブロックエディタの本文カラム幅（既定 約840px）と、フロントの本文幅
   （1180px）が食い違い、中央寄せ／幅広ブロックの横位置がズレて見える。
   下記の .editor-styles-wrapper 系セレクタはエディタ内でのみ一致するので、
   フロントに読み込まれても影響しない。
   ========================================================= */
.editor-styles-wrapper .wp-block {
	max-width: 1180px;
}

.editor-styles-wrapper .wp-block[data-align="wide"] {
	max-width: 1180px;
}

.editor-styles-wrapper .wp-block[data-align="full"] {
	max-width: none;
}

/* =========================================================
   ボックス装飾（リスト / 段落 / グループ / 引用 などを囲む）
   ========================================================= */

/* --- 共通ベース --- */
.is-style-box-tape,
.is-style-box-sticky,
.is-style-box-soft,
.is-style-box-accent,
.is-style-box-frame,
.is-style-box-line {
	position: relative;
	margin-block: 2em;
	padding: 1.5em 1.6em;
	/* テープや影がはみ出て見えるように */
	overflow: visible;
}

/* ボックスを直接リストに適用したとき、マーカーが枠内に収まるよう左余白を確保 */
ul[class*="is-style-box-"],
ol[class*="is-style-box-"] {
	padding-left: 2.9em;
}

/* ボックス内の最初/最後の要素の余白を詰めて、枠との間隔を均一に */
[class*="is-style-box-"] > :first-child {
	margin-top: 0;
}
[class*="is-style-box-"] > :last-child {
	margin-bottom: 0;
}

/* --- 1. マスキングテープでメモを貼った風 --- */
.is-style-box-tape {
	background: #fffef7;
	border: 1px solid #ece7d5;
	border-radius: 3px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.is-style-box-tape::before,
.is-style-box-tape::after {
	content: "";
	position: absolute;
	top: -13px;
	width: 92px;
	height: 27px;
	background: rgba(150, 190, 150, 0.42);
	border-left: 1px dashed rgba(0, 0, 0, 0.06);
	border-right: 1px dashed rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.is-style-box-tape::before {
	left: 22px;
	transform: rotate(-5deg);
}

.is-style-box-tape::after {
	right: 22px;
	transform: rotate(4deg);
}

/* --- 2. 付箋メモ（少し傾き＋めくれた角） --- */
.is-style-box-sticky {
	background: linear-gradient(180deg, #fff9c4, #fff1a8);
	border-radius: 2px;
	box-shadow: 2px 5px 14px rgba(0, 0, 0, 0.14);
	transform: rotate(-1deg);
}

.is-style-box-sticky::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	border-width: 0 0 24px 24px;
	border-style: solid;
	border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
	border-bottom-right-radius: 2px;
}

/* --- 3. やわらかカード（角丸＋ふんわり影） --- */
.is-style-box-soft {
	background: var(--color-bg-alt, #f6f7f9);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

/* --- 4. 左アクセントバー（お知らせ・ポイント向け） --- */
.is-style-box-accent {
	padding-left: 1.5em;
	background: #f4f7ff;
	background: color-mix(in srgb, var(--color-accent, #2563eb) 7%, #fff);
	border-left: 5px solid var(--color-accent, #2563eb);
	border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}

ul.is-style-box-accent,
ol.is-style-box-accent {
	padding-left: 3em;
}

/* --- 5. 上品な二重枠 --- */
.is-style-box-frame {
	padding: 1.7em 1.8em;
	background: #fff;
	border: 1px solid var(--color-accent, #2563eb);
	border-radius: var(--radius, 8px);
}

.is-style-box-frame::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid color-mix(in srgb, var(--color-accent, #2563eb) 40%, #fff);
	border-radius: calc(var(--radius, 8px) - 3px);
	pointer-events: none;
}

ul.is-style-box-frame,
ol.is-style-box-frame {
	padding-left: 3.1em;
}

/* --- 6. 囲み線＋外側の影（シンプルなコンテンツ枠） --- */
.is-style-box-line {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: var(--radius, 8px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   見出し装飾（h1〜h5 共通・ブロックスタイル）
   em 基準なので各見出しサイズに追従する。
   ========================================================= */

/* --- 1. 左バー＋下線（王道・読みやすい） --- */
.is-style-head-bar {
	padding: 0.05em 0 0.3em 0.7em;
	border-left: 6px solid var(--color-accent, #2563eb);
	border-bottom: 2px solid var(--color-border, #e5e7eb);
}

/* --- 2. アクセント下線（短い色線＋全幅の細線） --- */
.is-style-head-underline {
	position: relative;
	padding-bottom: 0.35em;
	border-bottom: 3px solid var(--color-border, #e5e7eb);
}

.is-style-head-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 2.4em;
	height: 3px;
	background: var(--color-accent, #2563eb);
}

/* --- 3. リボン（塗りつぶし・立体感） --- */
.is-style-head-ribbon {
	display: inline-block;
	padding: 0.35em 1em;
	color: #fff;
	background: var(--color-accent, #2563eb);
	border-radius: 4px;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}

.is-style-head-ribbon a {
	color: #fff;
}

/* --- 4. 隅かぎ括弧（和モダン・お洒落） --- */
.is-style-head-brackets {
	position: relative;
	padding: 0.4em 0.9em;
}

.is-style-head-brackets::before,
.is-style-head-brackets::after {
	content: "";
	position: absolute;
	width: 0.7em;
	height: 0.7em;
	border-color: var(--color-accent, #2563eb);
	border-style: solid;
}

.is-style-head-brackets::before {
	top: 0;
	left: 0;
	border-width: 2px 0 0 2px;
}

.is-style-head-brackets::after {
	right: 0;
	bottom: 0;
	border-width: 0 2px 2px 0;
}

/* --- 5. ドット下線（やわらかい印象） --- */
.is-style-head-dotted {
	padding-bottom: 0.35em;
	border-bottom: 3px dotted color-mix(in srgb, var(--color-accent, #2563eb) 60%, #fff);
}

/* --- 6. ドットバッジ（先頭に丸＋ハロー） --- */
.is-style-head-badge {
	position: relative;
	padding-left: 1.1em;
}

.is-style-head-badge::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--color-accent, #2563eb);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent, #2563eb) 20%, #fff);
}