@font-face {
	font-family: 'local noto sans jp';
	src: local('noto sans jp');
}

.post-content .micron-flow {
	padding-block: 16px;
}

.post-content .micron-flow ul,
.post-content .micron-flow ol {
	margin-block: 0;
	padding-inline-start: 0;
	list-style-type: '';
}

.post-content .micron-flow p {
	font-weight: 700;
}

.post-content .micron-flow > ol {
	display: grid;
}

.post-content .micron-flow > ol > li > p {
	padding-block: 16px;
	color: #fff;
	background-color: #293855;
	text-align: center;
}

.post-content .micron-flow > ol > li .micron-flow-content {
	padding-block: 24px;
	padding-inline: 16px;
	background-color: #f1f1f1;
}

.post-content .micron-flow > ol > li .micron-flow-content > *:first-child {
	padding-block-start: 0;
}

.post-content .micron-flow > ol > li .micron-flow-content > *:last-child {
	padding-block-end: 0;
}

.post-content .micron-flow > ol > li .micron-flow-content > ul {
	display: grid;
	row-gap: 8px;
}

.post-content .micron-flow > ol > li .micron-flow-content > ul > li {
	line-height: 1.5714285714;
	font-size: 0.875rem;
}

@media screen and (max-width: 1024px) {

	.post-content .micron-flow p {
		line-height: 1.375;
		font-size: 1rem;
	}

	.post-content .micron-flow > ol > li:not(:last-child)::after {
		content: '';
		margin-block: 16px;
		margin-inline: auto;
		display: block;
		width: 64px;
		height: 23px;
		background-color: #293855;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}
}

@media screen and (min-width: 1025px) {

	.post-content .micron-flow p {
		line-height: 1.3888888889;
		font-size: 1.125rem;
	}

	.post-content .micron-flow > ol {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.post-content .micron-flow > ol > li {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		row-gap: 0;
	}

	.post-content .micron-flow > ol > li > p {
		padding-inline: 16px 0;
		min-height: 2.56lh;
		display: grid;
		grid-template-columns: auto 31px;
		align-items: center;
		-moz-column-gap: 16px;
		column-gap: 16px;
	}

	.post-content .micron-flow > ol > li > p::after {
		content: '';
		align-self: stretch;
		margin-block: -16px;
		width: 31px;
		clip-path: polygon(8px 0, 31px 50%, 8px 99%, 0% 100%, 23px 50%, 0% 0%);
		background-color: #fff;
	}

	.post-content .micron-flow > ol > li:last-child > p {
		grid-template-columns: auto 25px;
		-moz-column-gap: 14px;
		column-gap: 14px;
		background: linear-gradient(90deg, #293855 0%, #293855 calc(100% - 23px), transparent calc(100% - 23px), transparent 100%);
		position: relative;
		z-index: 1;
	}

	.post-content .micron-flow > ol > li:last-child > p::before {
		content: '';
		position: absolute;
		top: 0;
		right: 23px;
		bottom: 0;
		left: 0;
		z-index: -1;
		background-color: #293855;
	}

	.post-content .micron-flow > ol > li:last-child > p::after {
		width: 25px;
		clip-path: polygon(0% 0%, 8% 0, 100% 50%, 8% 100%, 0% 100%);
		background-color: #293855;
	}
}

@media print {

	.post-content .micron-flow p {
		line-height: 1.3888888889;
		font-size: 1.125rem;
	}

	.post-content .micron-flow > ol {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.post-content .micron-flow > ol > li {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		row-gap: 0;
	}

	.post-content .micron-flow > ol > li > p {
		padding-inline: 16px 0;
		min-height: 2.56lh;
		display: grid;
		grid-template-columns: auto 31px;
		align-items: center;
		-moz-column-gap: 16px;
		column-gap: 16px;
	}

	.post-content .micron-flow > ol > li > p::after {
		content: '';
		align-self: stretch;
		margin-block: -16px;
		width: 31px;
		clip-path: polygon(8px 0, 31px 50%, 8px 99%, 0% 100%, 23px 50%, 0% 0%);
		background-color: #fff;
	}

	.post-content .micron-flow > ol > li:last-child > p {
		grid-template-columns: auto 25px;
		-moz-column-gap: 14px;
		column-gap: 14px;
		background: linear-gradient(90deg, #293855 0%, #293855 calc(100% - 23px), transparent calc(100% - 23px), transparent 100%);
		position: relative;
		z-index: 1;
	}

	.post-content .micron-flow > ol > li:last-child > p::before {
		content: '';
		position: absolute;
		top: 0;
		right: 23px;
		bottom: 0;
		left: 0;
		z-index: -1;
		background-color: #293855;
	}

	.post-content .micron-flow > ol > li:last-child > p::after {
		width: 25px;
		clip-path: polygon(0% 0%, 8% 0, 100% 50%, 8% 100%, 0% 100%);
		background-color: #293855;
	}
}