@charset "utf-8";

/* ==========================================================================
   クラシックエディター ビジュアルエディタ用スタイルシート (editor-style.css)
   ========================================================================== */

body#tinymce {
	position: relative;
	box-sizing: border-box;
	max-width: 950px;
	padding: 1em !important;
	margin: 1em !important;
	font-family: "メイリオ", Meiryo, sans-serif;
	line-height: 1.8;
	color: #333;
	letter-spacing: 0.045em;
	background-color: #fff;
	background-image: none;
	border: 1px dashed #ccc;
}

body#tinymce.wp-editor::before {
	background: none;
}

/* 本文エリア共通設定 */
.editor-blk *,
body#tinymce * {
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ----------------------
   見出しスタイル（クラシックエディター標準見出し）
   ---------------------- */

/* 見出し2 (h2) ＝ 塗りつぶし（大見出し） */
.editor-blk h2,
body#tinymce h2 {
	position: relative;
	width: 100%;
	padding: 10px 20px;
	margin: 40px 0 20px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: #0075d2; /* ブランドカラーの青 */
	border-radius: 4px;
}

/* 見出し3 (h3) ＝ 左縦線（中見出し） */
.editor-blk h3,
body#tinymce h3 {
	position: relative;
	padding-left: 16px;
	margin: 30px 0 15px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.4;
	color: #333;
	border-left: 5px solid #0075d2; /* ブランドカラーの青 */
}

/* 見出し4 (h4) ＝ 左丸ドット（小見出し） */
.editor-blk h4,
body#tinymce h4 {
	position: relative;
	padding-left: 20px;
	margin: 24px 0 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #333;
}

.editor-blk h4::before,
body#tinymce h4::before {
	position: absolute;
	top: 50%;
	left: 4px;
	width: 8px;
	height: 8px;
	content: "";
	background: #0075d2; /* ブランドカラーの青 */
	border-radius: 50%;
	transform: translateY(-50%);
}

/* ----------------------
   標準要素スタイル
   ---------------------- */

/* 段落 */
.editor-blk p,
body#tinymce p {
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1.8;
}

/* 画像 */
.editor-blk img,
body#tinymce img {
	max-width: 100% !important;
	height: auto !important;
	margin: 10px 0;
}

/* 引用 (blockquote) */
.editor-blk blockquote,
body#tinymce blockquote {
	position: relative;
	padding: 15px 20px;
	margin: 24px 0;
	font-style: italic;
	color: #555;
	background-color: #f4f8fc; /* 薄い青背景 */
	border-left: 4px solid #0075d2; /* ブランドカラーの青 */
}

.editor-blk blockquote p,
body#tinymce blockquote p {
	padding: 0 !important;
	margin-bottom: 0;
}

.editor-blk blockquote cite,
body#tinymce blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 0.85rem;
	font-style: normal;
	color: #666;
	text-align: right;
}

/* リンク */
.editor-blk a,
body#tinymce a {
	color: #0075d2; /* ブランドカラーの青 */
	text-decoration: underline;
}

.editor-blk a:hover,
body#tinymce a:hover {
	color: #005a9e; /* ホバー時の青 */
	text-decoration: none;
}

/* リスト */
.editor-blk ul,
body#tinymce ul,
.editor-blk ol,
body#tinymce ol {
	padding-left: 24px;
	margin: 20px 0;
}

.editor-blk ul {
	list-style-type: disc;
}

.editor-blk ol {
	list-style-type: decimal;
}

.editor-blk li,
body#tinymce li {
	margin-bottom: 8px;
	font-size: 16px;
}

/* 水平線 */
.editor-blk hr,
body#tinymce hr {
	margin: 30px 0;
	border: none;
	border-top: 1px solid #b8dfff; /* 薄い青の境界線 */
}

/* テーブル */
.editor-blk table,
body#tinymce table {
	width: 100%;
	margin: 30px 0;
	border-spacing: 0;
	border-collapse: collapse;
}

.editor-blk table th,
body#tinymce table th,
.editor-blk table td,
body#tinymce table td {
	padding: 12px 16px;
	font-size: 15px;
	text-align: left;
	border: 1px solid #b8dfff;
}

.editor-blk table th,
body#tinymce table th {
	font-weight: 600;
	color: #fff;
	background: #0075d2;
}

/* キャプション */
.editor-blk .wp-caption,
body#tinymce .wp-caption {
	max-width: 100%;
	padding: 6px;
	text-align: center;
	background-color: #f9f9f9;
	border: 1px solid #e5e5e5;
}

.editor-blk .wp-caption-text,
body#tinymce .wp-caption-text {
	margin: 6px 0 0;
	font-size: 13px;
	color: #666;
}

/* ==========================================================================
   レスポンシブ表示（エディタ内表示調整）
   ========================================================================== */
@media (width <= 767px) {
	body#tinymce {
		padding: 0.5em !important;
		margin: 0.5em !important;
	}

	body#tinymce h2 {
		padding: 8px 12px;
		font-size: 20px;
	}

	body#tinymce h3 {
		font-size: 18px;
	}

	body#tinymce h4 {
		font-size: 16px;
	}

	body#tinymce table th,
	body#tinymce table td {
		display: block;
		width: 100% !important;
	}
}