@import url("root.css");
.detail_date {
	text-align: right;
	font-size: clamp(16px, 1.77vw, 20px);
}

.page_wrap {
	background: #fafbf6;
	position: relative;
	padding: clamp(15px, 3.5vw, 40px);
	margin-bottom: clamp(40px, 8.88vw, 100px);
}

.box {
	background: #fff;
	padding: 20px;
}

.detail_text {
	margin-top: clamp(10px, 3.5vw, 40px);
}

.blog_list {
	background: #fff;
	padding: 40px 0 0;
}

@media (min-width: 768px) {
	.item_list figure {
		height: 200px;
	}
	.item_list figure img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
}

/*
記事詳細
*/

.detail_img_box img {
	width: 100%;
	height: auto;
	aspect-ratio: 5/3;
	object-fit: cover;
}
.toc_wrap { margin: clamp(25px, 7.5vw, 50px) auto 0; }
.toc_wrap ul {
	list-style-type: none;
	padding: 1em;
	border: 2px solid var(--base-color01);
	counter-reset: li;
}

.toc_wrap ul li {
	display: flex;
	align-items: center;
	padding: .3em;
	width: 100%;
	padding-bottom: .25em;
	border-bottom: 2px dotted var(--base-color01);
	margin-bottom: 0.25em;
}
.toc_wrap ul li a:hover {
	color: var(--base-color01);
}
.toc_wrap ul li::before {
	display: inline-block;
	min-width: 1.7em;
	margin-right: 5px;
	border-radius: 50%;
	background-color: var(--base-color01);
	color: #fff;
	font-weight: bold;
	font-size: .75em;
	line-height: 1.7em;
	text-align: center;
	content: counter(li);
	counter-increment: li;
}
div[id^="midashi"] {
  padding-top: 2.5em;
}

h3.detail_midashi {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    margin-top: 0;
    background-color: #fff;
    color: #333;
}

h3.detail_midashi::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: var(--base-color01);
    content: '';
}

.detail_article {
	line-height: 1.7;
	padding-left: calc(5px + .5em);
	padding-right: calc(5px + .5em);
}
.detail_article img {
	display: block;
	width: min(100%, 480px);
	margin: 1em auto;
}