@charset "utf-8";

/* 管理画面にCSSを適用 */

:root {
	--font: #444;
	--bg: #faf8f4;
	--bg_secondary: #f0ebe1;
	--main: #399d26;
	--border: #d9cfba;
	--pink: #f45161;
	--shadow: 0 0 15px 0 rgba(40,90,31,.2);
}

/* トップページ
======================================== */

/* kv */

#editor .kv {
	position: relative;
}

#editor .kv_txt {
	position: absolute;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	z-index: 1;
}

#editor .kv_scroll {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	font-weight: bold;
	color: #fff;
	text-align: center;
	z-index: 1;
}

/* 見出し */

.tit_area {
	text-align: center;
}

.tit_area_en {
	font-weight: bold;
	color: var(--main);
}

/* 見出し */

.edit-post-visual-editor h2:not(.no_style):not(.tit_area.wp-block-group h2) {
	padding-left: 10px;
	line-height: 1.5;
	font-size: 24px;
	font-weight: bold;
	border-left: 2px solid var(--main);
}

.edit-post-visual-editor h3:not(.no_style):not(.tit_area.wp-block-group h3) {
	position: relative;
	padding-left: 22px;
	line-height: 1.5;
	font-size: 20px;
	font-weight: bold;
}
.edit-post-visual-editor h3:not(.no_style):not(.tit_area.wp-block-group h3)::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(50% - 1.5px);
	width: 14px;
	height: 3px;
	background: var(--main);
}

.edit-post-visual-editor h4:not(.no_style):not(.tit_area.wp-block-group h4) {
	padding: 0 0 4px;
	line-height: 1.5;
	font-size: 18px;
	font-weight: bold;
}

/* 引用 */

.wp-block-quote,
.bg_text_area {
	position: relative;
	margin: 30px 0;
	padding: 28px min(35px, 5%);
	border-radius: 16px;
	background: var(--bg_secondary);
}

.wp-block-quote::before,
.wp-block-quote::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 30px;
	background: url(assets/img/ico_quote.svg) 50% 50% / contain no-repeat;
}
.wp-block-quote::before {
	left: -1%;
	top: -10px;
}
.wp-block-quote::after {
	right: -1%;
	bottom: -10px;
	transform: rotate(180deg);
}
@media screen and (max-width: 767.9px) {
	.wp-block-quote::before,
	.wp-block-quote::after {
		width: 32px;
		height: 24px;
	}
}

/* ブログカード */

.article_box_in {
	display: inline-flex;
	border-radius: 16px;
	background: var(--bg);
	border: 2px solid var(--border);
	text-decoration: none;
	overflow: hidden;
}

.article_box_in .img {
	flex-shrink: 0;
	width: 30%;
	max-width: 300px;
}

.article_box_in .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article_box_in .txt_area {
	align-self: center;
	padding: 16px 5%;
}

.article_box_catch {
	display: inline-block;
	padding: 1px 5px;
	margin-bottom: 5px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	background: var(--main);
}

/* 汎用スタイル
======================================== */

.btn {
	text-align: center;
}

.btn a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-decoration: none;
}

.btn a::after {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	margin-left: 30px;
	border-radius: 50%;
	background: url(assets/img/ico_arw.svg) 50% 50% / 8px auto no-repeat var(--bg_secondary);
	border: 2px solid var(--border);
	transition: transform .3s, background .3s, border .3s;
}

.btn.secondary a::after {background-color: #fff;}

.btn.cv a::after {
	background-image: url(assets/img/ico_cv.svg);
	background-size: 22px auto;
	background-position: 45% 52%;
}

.arw a {
	padding-left: 1em;
	background: url(assets/img/ico_arw.svg) 0 .3em / auto .8em no-repeat;
}

.blank a {
	padding-left: 1em;
	background: url(assets/img/ico_blank.svg) 0 .4em / auto .8em no-repeat;
}
span.blank {margin-left: .2em;}

.tal {text-align: left!important;}
.tac {text-align: center!important;}
.tar {text-align: right!important;}

@media screen and (max-width: 767.9px) {
	.sp_tal {text-align: left!important;}
	.sp_tac {text-align: center!important;}
	.sp_tar {text-align: right!important;}
}

/* プロフィール SNSアイコン */

#your-profile .smart-cf-upload-image img {
	min-width: 100px;
}