/***** 下線 *****/
/* 黄色 */
mark.style-yuline,
.haup-item-style-yuline
{
	background: linear-gradient(transparent 70%, #FFFF33 75%);
	color: unset;
}

/* 黄色（濃） */
mark.style-dyuline,
.haup-item-style-dyuline
{
	background: linear-gradient(transparent 70%, #FFEE00 75%);
	color: unset;
}

/* 青色 */
mark.style-buline,
.haup-item-style-buline
{
	background: linear-gradient(transparent 70%, #33CCFF 75%);
	color: unset;
}

/* 青色（濃） */
mark.style-dbuline,
.haup-item-style-dbuline
{
	background: linear-gradient(transparent 70%, #0099CC 75%);
	color: unset;
}

/* 赤色 */
mark.style-ruline,
.haup-item-style-ruline
{
	background: linear-gradient(transparent 70%, #FF3333 75%);
	color: unset;
}

/* 赤色（濃） */
mark.style-druline,
.haup-item-style-druline
{
	background: linear-gradient(transparent 70%, #CC0000 75%);
	color: unset;
}

/* 緑色 */
mark.style-guline,
.haup-item-style-guline
{
	background: linear-gradient(transparent 70%, #99FF33 75%);
	color: unset;
}

/* 緑色（濃） */
mark.style-dguline,
.haup-item-style-dguline
{
	background: linear-gradient(transparent 70%, #33FF00 75%);
	color: unset;
}

/***** マーカー *****/
/* 黄色 */
mark.style-ymark,
.haup-item-style-ymark
{
	background: linear-gradient(transparent 0%,#FFFF33 0%);
	color: unset;
	padding: 0px 4px;
}

/* 黄色（濃） */
mark.style-dymark,
.haup-item-style-dymark
{
	background: linear-gradient(transparent 0%,#FFEE00 0%);
	color: unset;
	padding: 0px 4px;
}

/* 青色 */
mark.style-bmark,
.haup-item-style-bmark
{
	background: linear-gradient(transparent 0%,#33CCFF 0%);
	color: unset;
	padding: 0px 4px;
}

/* 青色（濃） */
mark.style-dbmark,
.haup-item-style-dbmark
{
	background: linear-gradient(transparent 0%,#0099CC 0%);
	color: unset;
	padding: 0px 4px;
}

/* 赤色 */
mark.style-rmark,
.haup-item-style-rmark
{
	background: linear-gradient(transparent 0%,#FF3333 0%);
	color: unset;
	padding: 0px 4px;
}

/* 赤色（濃） */
mark.style-drmark,
.haup-item-style-drmark
{
	background: linear-gradient(transparent 0%,#CC0000 0%);
	color: unset;
	padding: 0px 4px;
}

/* 緑色 */
mark.style-gmark,
.haup-item-style-gmark
{
	background: linear-gradient(transparent 0%,#99FF33 0%);
	color: unset;
	padding: 0px 4px;
}

/* 緑色（濃） */
mark.style-dgmark,
.haup-item-style-dgmark
{
	background: linear-gradient(transparent 0%,#33FF00 0%);
	color: unset;
	padding: 0px 4px;
}

/***** 文字拡大 *****/
/* 1.2倍 */
.large-font-two,
.large-font-one-two,
.haup-item-large-font-one-two
{
	font-size: 1.2rem;
}

/* 1.5倍 */
.large-font-five,
.large-font-one-five,
.haup-item-large-font-one-five
{
	font-size: 1.5rem;
}

/* 2倍 */
.large-font-two,
.haup-item-large-font-two
{
	font-size: 2rem;
}

/* 4倍 */
.large-font-four,
.haup-item-large-font-four
{
	font-size: 4rem;
}

/*** エディター側 ***/
/* 候補リストを左寄せ */
button.components-button.components-dropdown-menu__menu-item.is-next-40px-default-size.has-icon {
	justify-content: left;
}

.components-toolbar.haup-decoration-group {
	min-width: 48px;
}

/* 1. ツールバー内のグループコンテナの初期状態 */
.components-toolbar .haup-decoration-group {
	width: 36px; /* 代表アイコンの幅に合わせる */
	transition: width 0.25s ease-out;
	background: transparent;
	position: relative;
}

/* 2. ツールバーの代表アイコン (::before) の見た目 (CSSで描画) */
.components-toolbar .haup-decoration-group::before {
	/* ★★★ ここに親の共通アイコンコードを指定する ★★★ */
    /* 例: アイコンコード \e93e を使用（ご自身のフォントに合わせて変更してください） */
	content: "\e90b"; 
	font-family: hauicon; /* 適切なフォントファミリーを指定 */
	font-size: 20px;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 100%;

	position: absolute;
	left: 30%;
	opacity: 1;
	cursor: pointer;
	pointer-events: auto; /* クリックイベントは受け付けないが、ホバーのトリガーになる */
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* 3. 各カテゴリードロップダウンボタンの初期状態 (非表示) */
/* DropdownMenu のコンテナをターゲット */
.components-toolbar .haup-decoration-group .components-dropdown-menu {
	opacity: 0;
	pointer-events: none; /* クリックやホバーを完全に無効化 */
	transition: opacity 0.25s ease-out;
	position: absolute; /* 親アイコンの背後に隠す */
	left: 0;
}

/* 4. ホバー時の親ボタンコンテナの状態 */
.components-toolbar .haup-decoration-group:hover {
	width: auto; /* 幅を開放し、ボタンが展開できるようにする */
	z-index: 1000;
	background: #b3c3f8; /* 背景色はお好みで */
	border: 1px solid; /* 枠線もお好みで */
}

/* 5. ホバー時に代表アイコン（::before）を移動させて隠す */
.components-toolbar .haup-decoration-group:hover::before {
	opacity: 0;
	pointer-events: none;
	transform: translateX(28px); /* アイコンの幅分移動させて隠す */
}

/* 6. ホバー時に各カテゴリードロップダウンボタンを展開 */
.components-toolbar .haup-decoration-group:hover .components-dropdown-menu {
	opacity: 1;
	pointer-events: auto;
	position: relative; /* 重要: ホバー時は相対位置に戻して横に並ぶようにする */
	left: unset;
}

/* 7. 横並びの調整（最初のボタンの重なりを解消） */
.components-toolbar .haup-decoration-group:hover 
.components-dropdown-menu:first-child {
	margin-left: -2px;
}

.haup-decoration-group button.components-button.components-dropdown-menu__toggle.has-icon:hover {
	background: #737ea2;
	color: #fff;
}