@charset "utf-8";
/* ============================================================
 * /assets/css/block-editor-frontend.css（Frontend / Cocoiro Theme）
 * ------------------------------------------------------------
 * ▼ 概要
 *   フロント表示時に、Gutenbergブロックのデザインを再現する。
 *   編集画面と同一トーンを保ち、出力HTMLに直接適用される。
 *
 * ▼ 特徴
 *   - .wp-block 系クラスを中心に定義。
 *   - .editor-styles-wrapper など管理画面専用要素は含まない。
 *   - theme.json の color / typography を参照。
 * ============================================================ */


 /* # ============================================================
#### 編集画面（エディタ）でのみ、中身が空のブロックを可視化する
# ============================================================ */
.is-root-container .wp-block-paragraph:empty::before,
.is-root-container .wp-block-group:empty::before,
.is-root-container [data-empty="true"]::before {
	content: "Empty Block";
	display: block;
	padding: 10px;
	background: rgba(255, 0, 0, 0.05); /* 薄い赤色 */
	border: 1px dashed #ffbaba;      /* 赤い点線 */
	color: #ff0000;
	font-size: 10px;
	text-align: center;
	border-radius: 4px;
	pointer-events: none; /* クリックの邪魔をしない */
}
/* * フォーカスされている時は邪魔なので消す、
 * または色を変えるなど、お好みで調整可能
 */
.wp-block-paragraph:focus:empty::before {
	opacity: 0.3;
}


/* # ============================================================
#### 基本ブロック
# ============================================================ */
.wp-block{
	margin-bottom : 2em;
	line-height : 1.8;
	color : var(--wp--preset--color--text-color, #1D1D1D);
	font-family : "Noto Sans JP", "Hiragino Sans", sans-serif;
}


/* # ============================================================
#### 段落・リスト・画像・見出し
# ============================================================ */
.wp-block-paragraph{
	margin-bottom : 1.8em;
}
ul, ol{
	margin : 1.5em 0 1.5em 1.5em;
}
ul li, ol li{
	margin-bottom : 0.4em;
}
.wp-block-image img{
	border-radius : 8px;
	height : auto;
	display : block;
	margin : 0 auto;
}
h2{
	color : var(--wp--preset--color--key-color, #005BAC);
	margin-top : 2.5em;
	margin-bottom : 1em;
	border-bottom : 2px solid var(--wp--preset--color--key-color, #005BAC);
	padding-bottom : 0.2em;
	font-size : 1.5em;
	font-weight : 600;
}
h3{
	color : #333;
	margin-top : 2em;
	margin-bottom : 0.8em;
	font-size : 1.3em;
	font-weight : 600;
}


/* # ============================================================
#### 引用・ボタン・テーブル
# ============================================================ */
.wp-block-quote{
	padding : 1.5em;
	background : var(--wp--preset--color--sub-gray, #f6f6f6);
	border-left : 4px solid var(--wp--preset--color--key-color, #005BAC);
	margin : 2em 0;
}
.wp-block-quote p{ margin : 0; }
.wp-block-button__link{
	background : var(--wp--preset--color--key-color, #005BAC);
	color : #fff;
	padding : 0.75em 1.5em;
	border-radius : 4px;
	text-decoration : none;
	display : inline-block;
	font-weight : 600;
	transition : background 0.3s ease;
}
.wp-block-button__link:hover{
	background : #004080;
}
.wp-block-table{
	width : 100%;
	border-collapse : collapse;
	margin : 2em 0;
}
.wp-block-table th,
.wp-block-table td{
	border : 1px solid #ccc;
	padding : 0.75em;
}


/* # ============================================================
#### 区切り線・レスポンシブ
# ============================================================ */
hr{
	border : none;
	border-top : 1px solid #ccc;
	margin : 3em 0;
}
@media (max-width: 782px){
	.wp-block{ font-size : 15px; }
}