@charset "UTF-8";
/* CSS Document */
/* ブログ一覧・記事詳細（home.php / archive.php / single.php）専用。
   TOPのブログ枠（style.css #top .blog）と同じ赤枠・角カット・縦書きタイトルのトンマナで構成 */

/* ----▼---▼▼--▼▼▼-▼▼▼▼- page base -▼▼▼▼-▼▼▼--▼▼---▼---- */

.page{
	margin-left: 140px;
	border-right: solid 2px var(--main-c);
	box-sizing: border-box;
	color: var(--side-c);
}
.page a{
	color: inherit;
}
.page ion-icon{
	flex: none;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- blog list -▼▼▼▼-▼▼▼--▼▼---▼---- */

#blog .list{
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	border-left: solid 2px var(--main-c);
	border-right: solid 2px var(--main-c);
	color: var(--main-c);
	box-sizing: border-box;
	min-height: calc(100vh - 90px);
}
#blog .title{
	width: 33.333%;
	border-right: solid 2px var(--main-c);
	box-sizing: border-box;
}
#blog .title dl{
	position: sticky;
	top: 0;
	writing-mode: vertical-rl;
	height: 70vh;
	min-height: 520px;
	padding: 80px;
	box-sizing: border-box;
	justify-content: center;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
	overflow: hidden;
}
#blog .title dl::before{
	content: '';
	position: absolute;
	top: 60px;
	right: -60px;
	width: 200px;
	aspect-ratio: 12/5;
	background: url(../image/icon4.png) center/cover;
	mix-blend-mode: multiply;
	z-index: -1;
}
#blog .title dt{
	font-size: 4.2rem;
	font-weight: bold;
}
#blog .title dd{
	font-size: 10rem;
	letter-spacing: 0.1em;
	line-height: 1;
}
#blog.is-archive .title dd{
	font-size: 5.6rem;
	letter-spacing: 0.05em;
}
#blog .title a{
	justify-content: space-between;
	height: 90px;
	border-top: 2px solid var(--main-c);
	padding: 16px;
	box-sizing: border-box;
	color: var(--main-c);
	transition: all ease 0.4s;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#blog .title a:hover{
	background: var(--main-c);
	color: var(--base-c);
}
#blog .title a p{
	font-size: 2.1rem;
	font-weight: bold;
}
#blog .title a ion-icon{
	font-size: 3.2rem;
}
#blog .title .cats a{
	height: 64px;
	padding: 12px 16px;
}
#blog .title .cats a p{
	font-size: 1.6rem;
}
#blog .title .cats a ion-icon{
	font-size: 2.4rem;
}
#blog .content{
	flex: 1;
}
#blog .posts article a{
	border-bottom: solid 2px var(--main-c);
	padding: 20px;
	box-sizing: border-box;
	gap: 60px;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
	transition: background-color .3s;
}
#blog .posts article a:hover{
	background-color: var(--sab-c);
}
#blog .posts figure{
	width: 33.333%;
	flex: none;
	overflow: hidden;
}
#blog .posts img{
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .6s ease;
}
#blog .posts article a:hover img{
	transform: scale(1.04);
}
#blog .posts article a>div{
	justify-content: center;
	gap: 20px;
	flex: 1;
	min-width: 0;
}
#blog .posts span{
	gap: 16px;
	font-size: 1.3rem;
}
#blog .posts em{
	font-style: normal;
	border: solid 1px var(--main-c);
	padding: 2px 10px;
	line-height: 1.4;
	font-size: 1.2rem;
}
#blog .posts h2{
	color: var(--main-c);
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
}
#blog .posts p{
	color: var(--side-c);
	font-size: 1.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#blog .posts .empty{
	padding: 60px 20px;
	color: var(--side-c);
}

/* ページ送り */
#blog .pagination{
	border-top: solid 2px var(--main-c);
	margin-top: auto;
}
#blog .pagination h2{
	display: none;
}
#blog .pagination .nav-links{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 24px 20px;
	font-family: "Afacad", sans-serif;
	font-size: 1.8rem;
}
#blog .pagination .page-numbers{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	border: solid 2px var(--main-c);
	border-radius: 44px;
	color: var(--main-c);
	gap: 4px;
	transition: all .3s;
}
#blog .pagination .page-numbers.current,
#blog .pagination a.page-numbers:hover{
	background: var(--main-c);
	color: var(--base-c);
}
#blog .pagination .dots{
	border: none;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- single -▼▼▼▼-▼▼▼--▼▼---▼---- */

#single article{
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 80px 40px 60px;
	box-sizing: border-box;
}
#single .head{
	position: relative;
	padding: 0 0 32px;
	margin-bottom: 40px;
	border-bottom: solid 2px var(--main-c);
	color: var(--main-c);
}
#single .head .back{
	font-size: 1.8rem;
	font-weight: bold;
	gap: 2px;
	width: fit-content;
	margin-bottom: 24px;
	letter-spacing: 0.1em;
}
#single .head .back:hover{
	opacity: .7;
}
#single .head span{
	gap: 16px;
	font-size: 1.4rem;
	margin-bottom: 16px;
}
#single .head span a{
	border: solid 1px var(--main-c);
	padding: 2px 12px;
	line-height: 1.4;
	font-size: 1.2rem;
	transition: all .3s;
}
#single .head span a:hover{
	background: var(--main-c);
	color: var(--base-c);
}
#single .head h1{
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.06em;
}
#single .eyecatch{
	margin-bottom: 48px;
	overflow: hidden;
}
#single .eyecatch img{
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 本文（AutoAIO生成のHTML＝h2/h3/p/ul/ol/table/blockquote/img/a を想定） */
#single .entry{
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: 0.06em;
}
#single .entry>*+*{
	margin-top: 1.6em;
}
#single .entry h2{
	position: relative;
	margin-top: 3em;
	padding: 14px 20px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--main-c);
	border-top: solid 2px var(--main-c);
	border-bottom: solid 2px var(--main-c);
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
}
#single .entry h3{
	margin-top: 2.4em;
	padding-left: 16px;
	border-left: solid 4px var(--main-c);
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
}
#single .entry h4{
	margin-top: 2em;
	font-size: 1.7rem;
	font-weight: bold;
	color: var(--main-c);
}
#single .entry h2+*,
#single .entry h3+*,
#single .entry h4+*{
	margin-top: 1em;
}
#single .entry a{
	display: inline;
	color: var(--main-c);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
#single .entry a:hover{
	opacity: .7;
}
#single .entry strong{
	font-weight: bold;
	background: linear-gradient(transparent 62%, #FFE68F 62%);
}
#single .entry .bm-em{
	font-weight: bold;
	color: var(--main-c);
	text-decoration: underline;
	text-decoration-color: var(--main-c);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}
#single .entry .bm-faq-q strong,
#single .entry .bm-faq-q .bm-em,
#single .entry th strong{
	background: none;
	color: inherit;
	text-decoration: none;
}
#single .entry ul,
#single .entry ol{
	padding: 20px 24px 20px 44px;
	background: var(--sab-c);
}
#single .entry ul li{
	list-style: disc;
}
#single .entry ol li{
	list-style: decimal;
}
#single .entry li+li{
	margin-top: 0.4em;
}
#single .entry li::marker{
	color: var(--main-c);
}
#single .entry blockquote{
	padding: 20px 24px;
	border-left: solid 4px var(--main-c);
	background: var(--sab-c);
	font-family: 'Shippori Mincho', serif;
}
#single .entry img{
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
#single .entry figure{
	margin: 2em 0;
}
#single .entry figcaption{
	font-size: 1.2rem;
	text-align: center;
	color: #777;
	margin-top: 0.6em;
}
#single .entry table{
	width: 100%;
	border-collapse: collapse;
	font-size: 1.4rem;
	line-height: 1.6;
}
#single .entry th,
#single .entry td{
	border: solid 1px var(--main-c);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
#single .entry th{
	background: var(--main-c);
	color: var(--base-c);
	font-weight: bold;
}
#single .entry tr:nth-child(even) td{
	background: var(--sab-c);
}
#single .entry .wp-block-table,
#single .entry .table-scroll{
	overflow-x: auto;
}
#single .entry hr{
	border: none;
	border-top: solid 2px var(--main-c);
	margin: 3em 0;
}
#single .entry iframe,
#single .entry video{
	max-width: 100%;
}
#single .tags{
	gap: 8px;
	margin-top: 40px;
}
#single .tags a{
	font-size: 1.3rem;
	border: solid 1px var(--main-c);
	color: var(--main-c);
	padding: 4px 12px;
	transition: all .3s;
}
#single .tags a:hover{
	background: var(--main-c);
	color: var(--base-c);
}

/* 前後の記事 */
#single .post-nav{
	border-top: solid 2px var(--main-c);
	border-bottom: solid 2px var(--main-c);
	color: var(--main-c);
}
#single .post-nav>*{
	flex: 1;
	padding: 24px 28px;
	box-sizing: border-box;
	gap: 6px;
	justify-content: center;
	transition: all .3s;
	min-width: 0;
}
#single .post-nav a:hover{
	background: var(--main-c);
	color: var(--base-c);
}
#single .post-nav .next{
	text-align: right;
	border-left: solid 2px var(--main-c);
}
#single .post-nav .index{
	flex: none;
	width: 90px;
	justify-content: center;
	font-size: 2.8rem;
	border-left: solid 2px var(--main-c);
}
#single .post-nav span{
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#single .post-nav p{
	font-size: 1.4rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 関連記事 */
#single .related{
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 40px 100px;
	box-sizing: border-box;
	color: var(--main-c);
}
#single .related h2{
	gap: 16px;
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 32px;
}
#single .related h2 span{
	font-size: 3.2rem;
	letter-spacing: 0.1em;
}
#single .related .posts{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
#single .related article a{
	flex-direction: column;
	gap: 12px;
	border: solid 2px var(--main-c);
	padding: 12px;
	box-sizing: border-box;
	height: 100%;
	background-image: linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
	transition: background-color .3s;
}
#single .related article a:hover{
	background-color: var(--sab-c);
}
#single .related figure{
	overflow: hidden;
}
#single .related img{
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
#single .related article a>div{
	gap: 6px;
}
#single .related time{
	font-size: 1.2rem;
}
#single .related h3{
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.5;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- responsive -▼▼▼▼-▼▼▼--▼▼---▼---- */

@media screen and (max-width:1670px){
	.page{
		margin-left: 120px;
	}
	#blog .list{
		max-width: none;
		border: none;
	}
}
@media screen and (max-width:1440px){
	.page{
		margin-left: 100px;
	}
	#blog .list{
		min-height: calc(100vh - 70px);
	}
	#blog .title dl{
		padding: 4vw;
	}
	#blog .title dt{
		font-size: 3vw;
	}
	#blog .title dd{
		font-size: 8vw;
	}
	#blog.is-archive .title dd{
		font-size: 4.4vw;
	}
	#blog .title dl::before{
		width: 14vw;
		top: 3vw;
		right: -3vw;
	}
	#blog .title a{
		height: 6vw;
	}
	#blog .title a p{
		font-size: 1.6vw;
	}
	#blog .title a ion-icon{
		font-size: 3vw;
	}
	#blog .title .cats a{
		height: 4.6vw;
	}
	#blog .title .cats a p{
		font-size: 1.2vw;
	}
	#blog .title .cats a ion-icon{
		font-size: 2vw;
	}
	#blog .posts article a{
		gap: 2vw;
		padding: 1.4vw;
	}
	#blog .posts article a>div{
		gap: 0.6vw;
	}
	#blog .posts h2{
		font-size: 1.6vw;
	}
	#blog .posts span{
		font-size: 1vw;
	}
	#blog .posts p{
		font-size: 1.2vw;
	}
}
@media screen and (max-width:1024px){
	.page{
		margin-left: 90px;
	}
	#blog .title dl,
	#blog .title a,
	#blog .posts article a,
	#single .entry h2,
	#single .related article a{
		background-image: linear-gradient(135deg, var(--main-c) 0.9vw, transparent 0), linear-gradient(-45deg, var(--main-c) 0.9vw, transparent 0);
	}
	#blog .posts span{
		font-size: 1.2vw;
	}
	#blog .posts figure{
		width: 40%;
	}
	#blog .posts h2{
		font-size: 2vw;
	}
	#blog .posts p{
		font-size: 1.6vw;
	}
	#single article{
		padding: 60px 30px 40px;
	}
	#single .head h1{
		font-size: 2.6rem;
	}
	#single .related{
		padding: 60px 30px 80px;
	}
}
@media screen and (max-width:768px){
	.page{
		margin: 0;
	}
	#blog .list{
		min-height: 0;
	}
	#single .related .posts{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width:599px){
	.page{
		border-right: none;
	}
	#blog .list{
		flex-direction: column;
	}
	#blog .title{
		width: 100%;
		border: none;
		border-bottom: solid 2px var(--main-c);
		overflow: hidden;
	}
	#blog .title dl{
		position: static;
		writing-mode: initial;
		flex-direction: column-reverse;
		height: auto;
		min-height: 0;
		padding: 40px 20px;
	}
	#blog .title dt{
		font-size: 2.1rem;
		margin-left: 6px;
	}
	#blog .title dd{
		font-size: 5rem;
	}
	#blog.is-archive .title dd{
		font-size: 2.8rem;
	}
	#blog .title dl::before{
		width: 50vw;
		top: 50%;
		transform: translateY(-50%);
	}
	#blog .title a{
		height: 60px;
		padding: 10px 20px;
		background: none;
		border: none;
		border-top: 2px solid var(--main-c);
	}
	#blog .title a p{
		font-size: 1.6rem;
	}
	#blog .title a ion-icon{
		font-size: 2.4rem;
	}
	#blog .title .cats{
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0 20px 20px;
	}
	#blog .title .cats a{
		height: auto;
		border: solid 1px var(--main-c);
		padding: 4px 12px;
		gap: 4px;
	}
	#blog .title .cats a p{
		font-size: 1.3rem;
	}
	#blog .title .cats a ion-icon{
		font-size: 1.6rem;
	}
	#blog .posts article a{
		padding: 20px;
		gap: 14px;
		background: none;
	}
	#blog .posts figure{
		width: 100px;
	}
	#blog .posts img{
		aspect-ratio: 1 / 1;
	}
	#blog .posts article a>div{
		gap: 8px;
	}
	#blog .posts span{
		font-size: 10px;
		gap: 8px;
	}
	#blog .posts em{
		font-size: 10px;
		padding: 0 6px;
	}
	#blog .posts h2{
		font-size: 1.3rem;
	}
	#blog .posts p{
		font-size: 1.1rem;
	}
	#single article{
		padding: 40px 20px 30px;
	}
	#single .head h1{
		font-size: 2.1rem;
	}
	#single .entry{
		font-size: 1.5rem;
		line-height: 1.9;
	}
	#single .entry h2{
		font-size: 1.9rem;
		padding: 10px 14px;
		background: none;
	}
	#single .entry h3{
		font-size: 1.7rem;
	}
	#single .entry ul,
	#single .entry ol{
		padding: 16px 16px 16px 36px;
	}
	#single .post-nav>*{
		padding: 16px 12px;
	}
	#single .post-nav .index{
		width: 56px;
		font-size: 2.2rem;
	}
	#single .post-nav span{
		font-size: 1.4rem;
	}
	#single .post-nav p{
		font-size: 1.2rem;
	}
	#single .related{
		padding: 40px 20px 60px;
	}
	#single .related h2{
		font-size: 1.8rem;
	}
	#single .related h2 span{
		font-size: 2.4rem;
	}
	#single .related .posts{
		grid-template-columns: 1fr;
		gap: 16px;
	}
	#single .related article a{
		flex-direction: row;
		background: none;
	}
	#single .related figure{
		width: 100px;
		flex: none;
	}
	#single .related img{
		aspect-ratio: 1 / 1;
	}
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- 記事パーツ（article-tool 出力用） -▼▼▼▼-▼▼▼--▼▼---▼---- */
/* 生成記事が使うクラス: bm-point / bm-toc / bm-fig / bm-note / bm-check / bm-steps / bm-case / bm-cta / bm-author */

#single .entry .bm-label{
	display: inline-block;
	font-family: "Afacad", sans-serif;
	font-size: 1.3rem;
	letter-spacing: 0.16em;
	line-height: 1;
	padding: 6px 12px;
	color: var(--base-c);
	background: var(--main-c);
}

/* 要点（冒頭） */
#single .entry .bm-point{
	position: relative;
	padding: 28px 28px 24px;
	border: solid 2px var(--main-c);
	background: #fff;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
#single .entry .bm-point .bm-label{
	position: absolute;
	top: -1px;
	left: -1px;
}
#single .entry .bm-point-t{
	font-size: 1.7rem;
	font-weight: bold;
	color: var(--main-c);
	margin-top: 12px;
}
#single .entry .bm-point ul{
	margin-top: 12px;
	padding: 0;
	background: none;
}
#single .entry .bm-point li{
	list-style: none;
	position: relative;
	padding-left: 30px;
	line-height: 1.7;
}
#single .entry .bm-point li::before{
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 8px;
	height: 14px;
	border-right: solid 3px var(--main-c);
	border-bottom: solid 3px var(--main-c);
	transform: rotate(45deg);
}

/* 目次 */
#single .entry .bm-toc{
	padding: 24px 28px 28px;
	border: solid 1px var(--main-c);
	background: var(--sab-c);
}
#single .entry .bm-toc-title{
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--main-c);
}
#single .entry .bm-toc-title::before{
	content: "CONTENTS";
	font-family: "Afacad", sans-serif;
	font-size: 2.2rem;
	letter-spacing: 0.1em;
	font-weight: normal;
}
#single .entry .bm-toc ol{
	margin-top: 12px;
	padding: 0 0 0 4px;
	background: none;
	counter-reset: toc;
	columns: 2;
	column-gap: 32px;
}
#single .entry .bm-toc li{
	list-style: none;
	counter-increment: toc;
	position: relative;
	padding-left: 34px;
	line-height: 1.6;
	break-inside: avoid;
	margin: 0 0 8px;
}
#single .entry .bm-toc li::before{
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: "Afacad", sans-serif;
	font-size: 1.6rem;
	color: var(--main-c);
}
#single .entry .bm-toc a{
	text-decoration: none;
	color: inherit;
}
#single .entry .bm-toc a:hover{
	color: var(--main-c);
	text-decoration: underline;
}

/* 図版 */
#single .entry .bm-fig img{
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* 補足・注意 */
#single .entry .bm-note{
	position: relative;
	padding: 22px 24px 20px 64px;
	border-radius: 8px;
	background: var(--sab-c);
	font-size: 1.5rem;
}
#single .entry .bm-note::before{
	content: "!";
	position: absolute;
	left: 22px;
	top: 20px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--main-c);
	color: var(--base-c);
	font-family: "Afacad", sans-serif;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 26px;
}
#single .entry .bm-note>*+*{
	margin-top: 0.6em;
}

/* チェックリスト */
#single .entry ul.bm-check{
	padding: 20px 24px;
	background: #fff;
	border: solid 1px var(--main-c);
}
#single .entry ul.bm-check li{
	list-style: none;
	position: relative;
	padding-left: 34px;
}
#single .entry ul.bm-check li+li{
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: dashed 1px var(--sab-c);
}
#single .entry ul.bm-check li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 18px;
	height: 18px;
	border: solid 2px var(--main-c);
	box-sizing: border-box;
	background: #fff;
}
#single .entry ul.bm-check li::after{
	content: "";
	position: absolute;
	left: 6px;
	top: 0.5em;
	width: 5px;
	height: 10px;
	border-right: solid 2px var(--main-c);
	border-bottom: solid 2px var(--main-c);
	transform: rotate(45deg);
}

/* 手順 */
#single .entry ol.bm-steps{
	padding: 8px 0 0;
	background: none;
	counter-reset: step;
}
#single .entry ol.bm-steps li{
	list-style: none;
	counter-increment: step;
	position: relative;
	padding: 0 0 20px 56px;
	margin: 0;
}
#single .entry ol.bm-steps li::before{
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--main-c);
	color: var(--base-c);
	font-family: "Afacad", sans-serif;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	line-height: 38px;
}
#single .entry ol.bm-steps li:not(:last-child)::after{
	content: "";
	position: absolute;
	left: 18px;
	top: 42px;
	bottom: 4px;
	border-left: dashed 2px var(--main-c);
}
#single .entry ol.bm-steps li strong{
	background: none;
	display: block;
	font-size: 1.7rem;
	line-height: 38px;
	color: var(--main-c);
}

/* 事例 */
#single .entry .bm-case{
	position: relative;
	padding: 30px 28px 24px;
	border-left: solid 6px var(--main-c);
	background: #fff;
	box-shadow: 6px 6px 0 var(--sab-c);
}
#single .entry .bm-case .bm-label{
	position: absolute;
	top: -10px;
	left: 20px;
}
#single .entry .bm-case-t{
	font-size: 1.7rem;
	font-weight: bold;
	margin-bottom: 0.4em;
}
#single .entry .bm-case>*+*{
	margin-top: 0.6em;
}

/* CTA */
#single .entry .bm-cta{
	position: relative;
	padding: 40px 36px 36px;
	border: solid 2px var(--main-c);
	background: #fff;
	text-align: center;
	clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
#single .entry .bm-cta::before{
	content: "CONSULTATION";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Afacad", sans-serif;
	font-size: 1.3rem;
	letter-spacing: 0.2em;
	line-height: 1;
	padding: 6px 16px;
	color: var(--base-c);
	background: var(--main-c);
}
#single .entry .bm-cta-h{
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--main-c);
	margin-top: 8px;
}
#single .entry .bm-cta-b{
	font-size: 1.4rem;
	margin-top: 0.8em;
}
#single .entry .bm-cta-btn{
	margin-top: 1.4em;
}
#single .entry .bm-cta-btn a{
	display: inline-block;
	min-width: 320px;
	padding: 16px 36px;
	border-radius: 999px;
	background: var(--main-c);
	color: var(--base-c);
	font-size: 1.7rem;
	font-weight: bold;
	text-decoration: none;
	transition: all .3s;
}
#single .entry .bm-cta-btn a::after{
	content: "→";
	margin-left: 10px;
}
#single .entry .bm-cta-btn a:hover{
	opacity: 1;
	background: #fff;
	color: var(--main-c);
	box-shadow: inset 0 0 0 2px var(--main-c);
}

/* この記事を書いた人 */
#single .entry .bm-author{
	position: relative;
	display: flex;
	gap: 28px;
	align-items: flex-start;
	padding: 36px 32px 30px;
	margin-top: 4em;
	border: solid 2px var(--main-c);
	background: var(--sab-c);
	box-shadow: 8px 8px 0 #fff, 8px 8px 0 2px var(--main-c);
}
#single .entry .bm-author::before{
	content: "WRITER";
	position: absolute;
	top: -12px;
	left: 24px;
	font-family: "Afacad", sans-serif;
	font-size: 1.3rem;
	letter-spacing: 0.2em;
	line-height: 1;
	padding: 6px 12px;
	color: var(--base-c);
	background: var(--main-c);
}
#single .entry .bm-author-ic{
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: solid 2px var(--main-c);
	background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.2rem;
	font-weight: bold;
	color: var(--main-c);
}
#single .entry .bm-author-ic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}
#single .entry .bm-author-body{
	flex: 1;
	min-width: 0;
}
#single .entry .bm-author-name{
	font-size: 1.9rem;
	font-weight: bold;
	line-height: 1.4;
}
#single .entry .bm-author-name a{
	text-decoration: none;
}
#single .entry .bm-author-role{
	font-size: 1.3rem;
	color: #777;
	margin-top: 4px;
}
#single .entry .bm-author-bio{
	font-size: 1.4rem;
	line-height: 1.8;
	margin-top: 12px;
}
#single .entry .bm-author-link{
	margin-top: 12px;
	font-size: 1.4rem;
}

@media screen and (max-width:767px){
	#single .entry .bm-toc ol{
		columns: 1;
	}
	#single .entry .bm-cta{
		padding: 36px 20px 28px;
	}
	#single .entry .bm-cta-h{
		font-size: 1.8rem;
	}
	#single .entry .bm-cta-btn a{
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
	#single .entry .bm-author{
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 36px 20px 24px;
	}
	#single .entry .bm-author-ic{
		width: 80px;
		height: 80px;
	}
	#single .entry .bm-case,
	#single .entry .bm-point{
		padding: 26px 18px 20px;
	}
}

/* よくある質問（Q/Aカード） */
#single .entry .bm-faq{
	margin-top: 1.2em;
}
#single .entry .bm-faq-item{
	border: solid 2px var(--main-c);
	background: #fff;
	overflow: hidden;
}
#single .entry .bm-faq-item+.bm-faq-item{
	margin-top: 20px;
}
#single .entry h3.bm-faq-q{
	position: relative;
	margin: 0;
	padding: 16px 20px 16px 62px;
	border: 0;
	background: var(--main-c);
	color: var(--base-c);
	font-size: 1.7rem;
	line-height: 1.5;
}
#single .entry h3.bm-faq-q::before{
	content: "Q";
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Afacad", sans-serif;
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1;
}
#single .entry .bm-faq-a{
	position: relative;
	margin: 0;
	padding: 18px 20px 20px 62px;
	font-size: 1.5rem;
}
#single .entry .bm-faq-a::before{
	content: "A";
	position: absolute;
	left: 20px;
	top: 16px;
	font-family: "Afacad", sans-serif;
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1;
	color: var(--main-c);
}
#single .entry .bm-faq-a>*+*{
	margin-top: 0.6em;
}
@media screen and (max-width:767px){
	#single .entry h3.bm-faq-q{
		padding: 14px 16px 14px 52px;
		font-size: 1.6rem;
	}
	#single .entry .bm-faq-a{
		padding: 16px 16px 18px 52px;
	}
	#single .entry h3.bm-faq-q::before,
	#single .entry .bm-faq-a::before{
		left: 16px;
	}
}