/* ブロックエディターの編集画面のcss */
/* 表示側とできるだけ見た目をあわせる */

/* .editor-styles-wrapper.body.article {
	color: var(--skin-grayish-site-name-txt);
} */

/* .editor-styles-wrapper {
	color: var(--skin-grayish-site-name-txt);
} */

.editor-styles-wrapper .editor-post-title__input {
	color: var(--skin-grayish-site-name-txt);
}

.editor-styles-wrapper :where(p,
	h1, h2, h3, h4, h5, h6,
	ul, ol, li,
	blockquote,
	code, pre,
	a,
	table, th, td, details, summary) {
	color: var(--skin-grayish-site-name-txt);
}

.editor-styles-wrapper .article h4::before {
	display: block;
	content: "";
	background-image: url("images/svg-icon/mat-check.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	filter: invert(74%) sepia(7%) saturate(50%) hue-rotate(349deg) brightness(88%) contrast(91%);
	width: 0.9em;
	height: 0.9em;
	position: absolute;
	top: 1em;
	left: 0;
	z-index: 1;
}


/* ------------------------------------------------------------------------ */
/*  ランキング エディタでアイコンが消えるため追加                                  */
/* ------------------------------------------------------------------------ */
.editor-styles-wrapper .ranking-box :is(.g-crown, .s-crown, .c-crown)::before {
	background-image: url("images/svg-icon/crown.svg");
}

/* ------------------------------------------------------------------------ */
/*  タブbox                                                              */
/* ------------------------------------------------------------------------ */
/* タブbox */
/* タブ見出しBOX */

.editor-styles-wrapper .blank-box.bb-tab {
	--cocoon-custom-border-color: var(--LtBlue_S30);
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: 0 !important;
	padding: 3em 1em 1.4em !important;
}

.editor-styles-wrapper .tab-caption-box {
	position: relative !important;
}

.editor-styles-wrapper .blank-box.bb-tab::before {
	--cocoon-custom-text-color: var(--white);
	--cocoon-custom-background-color: var(--LtBlue_S30);
	position: absolute !important;
	font-size: 12px !important;
	top: 0 !important;
	line-height: 1.8 !important;
	left: 0 !important;
	border-radius: 0 !important;
	padding: 0.2em 1.2em 0.2em 0.8em !important;
}

/* WP6.7以降で見出し色に影響あり */
/* .editor-styles-wrapper .tab-caption-box-label {
	--cocoon-custom-text-color: var(--white);
	color: var(--cocoon-custom-text-color);
	background-color: var(--cocoon-custom-border-color);
} */

/* タイムラインBoxの中にアイコンリスト使用すると、アイコンが表示されないことの対応 */
.editor-styles-wrapper .timeline-box li {
	overflow: unset !important;
}

/* ------------------------------------------------------------------------ */
/*  Profileボックス  :where(.main, .content-bottom) ver                                                       */
/* ------------------------------------------------------------------------ */
.editor-styles-wrapper .author-box {
	place-content: center !important;
	grid-template-rows: auto auto !important;
	grid-template-columns: minmax(auto, 150px) 1fr !important;
	row-gap: 0 !important;
	-moz-column-gap: 2.5em !important;
	     column-gap: 2.5em !important;
	background-color: var(--white) !important;
	width: 100% !important;
	padding: 2em !important;
	margin-bottom: 0 !important;
}

.editor-styles-wrapper .author-box::before, .author-box::after {
	display: block !important;
	content: "" !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	position: absolute !important;
	z-index: 1 !important;
}

.editor-styles-wrapper .author-box::before {
	border-left: solid 1px var(--LtGray_T30) !important;
	border-top: solid 1px var(--LtGray_T30) !important;
	top: 0 !important;
	left: 0 !important;
}

.editor-styles-wrapper .author-box::after {
	border-right: solid 1px var(--LtGray_T30) !important;
	border-bottom: solid 1px var(--LtGray_T30) !important;
	bottom: 0 !important;
	right: 0 !important;
}


.editor-styles-wrapper .author-box p {
	padding: 0 0 1.5em 0 !important;
}

.editor-styles-wrapper .author-box .author-follows {
	padding-left: 2rem !important;
	border-left: 1px dashed var(--skin-grayish-site-main-hover) !important;
	/* grid-row-start: 4 !important;
	grid-row-end: 5 !important; */
	grid-row: 3 !important;
	grid-column: 2 !important;
}

.editor-styles-wrapper .author-box .author-widget-name {
	/* grid-row: 1/3 !important; */
	grid-column: 1 !important;
	align-self: flex-start !important;
	margin-top: 0 !important;
	padding-top: 0px !important;
	grid-row: 2 / span 1 !important;
}

.editor-styles-wrapper .author-box .author-thumb {
	width: 100px !important;
	float: none !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	/* grid-row: 1/3 !important; */
	grid-row: 1 !important;
	grid-column: 1 !important;
	justify-self: center !important;
	align-self: flex-start !important;
}

.editor-styles-wrapper .author-box .author-content .author-name {
	align-self: flex-start !important;
	/* grid-row: 1/3 !important; */
	grid-row: 1 !important;
	grid-column: 1 !important;
	text-align: center !important;
	margin-bottom: 0px !important;
	padding-top: 120px !important;
}

.editor-styles-wrapper .author-box .author-name a {
	color: var(--skin-grayish-site-sub-color) !important;
	font-weight: normal !important;
	text-decoration: none !important;
}

.editor-styles-wrapper .author-box .author-name a:hover {
	color: var(--skin-grayish-site-main-hover) !important;
	text-decoration: underline !important;
}


.editor-styles-wrapper .author-box .author-content .author-description {
	color: var(--skin-grayish-author-description-txt) !important;
	font-size: 14px !important;
	text-align: justify !important;
	border-top: none !important;
	border-left: 1px dashed var(--skin-grayish-site-main-hover) !important;
	margin: 0px !important;
	padding-left: 2rem !important;
	/* grid-row: 1 !important; */
	grid-row: 1/3 !important;
	grid-column: 2 !important;
	position: relative !important;
}


/* ----------- レスポンシブ -----------*/
/*834px以下*/
@media screen and (width <=834px) {

	/* ------------------------------------------------------------------------ */
	/*  Profileボックス  :where(.main, .content-bottom) ver                                                       */
	/* ------------------------------------------------------------------------ */
	.editor-styles-wrapper .author-box {
		grid-template-rows: 100px auto auto auto !important;
		grid-template-columns: 1fr !important;
		padding: 2em 1em !important;
		-moz-column-gap: 0em !important;
		     column-gap: 0em !important;
	}

	.editor-styles-wrapper .author-box .author-content .author-name {
		grid-row: 2 !important;
		grid-column: 1 !important;
		align-self: flex-start !important;
		justify-self: center !important;
		padding-top: 0 !important;
		padding-bottom: 1em !important;
		text-align: center !important;
		width: 100% !important;
	}

	.editor-styles-wrapper .author-box .author-name a {
		display: block !important;
		width: 100% !important;
	}

	.editor-styles-wrapper .author-box .author-thumb {
		grid-row: 1 !important;
		grid-column: 1 !important;
		justify-self: center !important;
		width: 80px !important;
	}

	.editor-styles-wrapper .author-box .author-content .author-description {
		grid-row: 4 !important;
		grid-column: 1 !important;
		margin-top: .5em !important;
		padding: 1em 0 0 0 !important;
		border-left: 0px !important;
		border-top: 1px dashed var(--skin-grayish-site-main-hover) !important;
	}

	.editor-styles-wrapper .author-box .author-widget-name {
		grid-row: 3 !important;
		grid-column: 1 !important;
		align-self: center !important;
		justify-self: center !important;
		margin-top: -1em !important;
		padding-top: 0em !important;
		padding-bottom: 1.2em !important;
	}

	.editor-styles-wrapper .author-box .author-follows {
		grid-row: 5 !important;
		grid-column: 1 !important;
		justify-self: center !important;
		border-left: 0px !important;
		padding-left: 0rem !important;
	}

}