Cocoonアイコンボックスを簡単カスタマイズ！サイドバーで複数デザインを切り替える方法

/*スタイル 2*/
.wp-block-cocoon-blocks-icon-box{
	padding: 1.5em 1.5em 1.5em 4em; /* 内側余白（上・右・下・左） */
	border-radius:0;/* 角を四角く */
	border-width: 0;/* 外枠なし */
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
}

/*モバイル調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;/*縦の中央揃え*/
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
	
	.wp-block-cocoon-blocks-icon-box::before{
		border-right: 1px solid;/*アイコン横の線を追加*/
	}
}

/*スタイル 3*/
.wp-block-cocoon-blocks-icon-box{
	border-radius:0;/* 角を四角く */
	border-width: 2px;/* 外枠の太さ*/
	padding: 1.5em 1.5em 1.5em 4em; /* 内側余白（上・右・下・左） */
	background-color:initial;/*背景色なし*/
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
}

/*モバイル調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;/*縦の中央揃え*/
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
	
	.wp-block-cocoon-blocks-icon-box::before{
		border-right: 1px solid;/*アイコン横の線を追加*/
	}
}

/*スタイル 4*/
.wp-block-cocoon-blocks-icon-box{
	padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
	border-radius:0;/* 角を四角く */
	border-width: 5px;/* 線の太さ */
	border-right:none;
	border-left:none;
	border-bottom:none;
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
	border-right: 0;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
}

/*スタイル 5*/
.wp-block-cocoon-blocks-icon-box{
	padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
	border-radius:0;/* 角を四角く */
	border-width: 5px;/* 線の太さ */
	border-top:none;
	border-right:none;
	border-bottom:none;
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:1em;/* アイコンのサイズ */
	border-right: 0;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
}

/* スタイル 7: アイコンボックス全体のスタイル */
.wp-block-cocoon-blocks-icon-box {
	background-color: initial; /* 背景色をなしに設定 */
	border-width: 2px; /* 外枠の太さを2pxに設定 */
	border-radius: 0; /* 外枠の角を四角く設定 */
	padding: 1.5em 1.5em 1em; /* 内側余白を上下1.5em、左右1.5emに設定 */
}

/* アイコンの基本スタイル */
.wp-block-cocoon-blocks-icon-box::before {
	top: -1em; /* アイコンをボックスの上に1em浮かせる */
	left: 0.75em; /* 左からの位置 */
	display:grid; /* アイコンを中央揃え */
	place-content:center; /* アイコンの配置を中央揃え */
	margin: 0; /* 余白なし */
	padding:0; /* パディングなし */
	width: 2em; /* アイコンの幅 */
	height:2em; /* アイコンの高さ */
	border-right: 0; /* 右側のボーダーなし */
	border-radius: 99px; /* アイコン背景の角を丸く */
	font-size: .9em; /* アイコンのフォントサイズ */
	color: #fff; /* アイコンの色 */
	box-shadow: 0 0 0 2px;
}

/* アイコンの背景色変更: 状況に応じてアイコンの背景色を設定 */

/* 情報 (i): 水色の背景色 */
.information-box::before {
	background-color: #87cefa;
}

/* 質問 (?): ゴールドの背景色 */
.question-box::before {
	background-color: gold;
}

/* アラート (!): 薄赤色の背景色 */
.alert-box::before {
	background-color: #f3aca9;
}

/* メモ: 緑色の背景色 */
.memo-box::before {
	background-color: #7ad0b6;
}

/* コメント: 灰色の背景色 */
.comment-box::before {
	background-color: #999;
}

/* OK: 青色の背景色 */
.ok-box::before {
	background-color: #3cb2cc;
}

/* NG: 赤色の背景色 */
.ng-box::before {
	background-color: #dd5454;
}

/* GOOD: 緑色の背景色 */
.good-box::before {
	background-color: #98e093;
}

/* BAD: ピンク色の背景色 */
.bad-box::before {
	background-color: #eb6980;
}

/* プロフィール: 灰色の背景色 */
.profile-box::before {
	background-color: #999;
}