@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
ご注文から納品までの流れ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- メイン
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.howtoorder-main {
	--content-width: var(--content-width_medium);
	padding-bottom: initial;
}

.howtoorder-li {
	position: relative;
	counter-increment: number;
}

.howtoorder-li:not(:last-child) {
	margin-bottom: 60px;
}

.howtoorder-li:nth-child(-n+4)::after {
	position: absolute;
	inset: auto 0 -40px;
	width: 1.3em;
	height: 1.1em;
	margin: auto;
	background: var(--color_sub);
	content: "";
	-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.howtoorder-li .heading {
	display: flex;
	margin-bottom: 1em;
	font-size: 20px;
	column-gap: 0.6em;
	align-items: end;
}

.howtoorder-li .heading::before {
	color: var(--color_white);
	font-weight: 900;
	font-size: 48px;
	font-family: var(--font_english);
	line-height: 0.7;
	text-shadow: var(--text-shadow);
  -webkit-text-stroke: var(--text-stroke);
	content: counter(number, decimal-leading-zero);
}

.howtoorder-li .img {
	width: 100%;
	border-radius: var(--border-radius);
}

@media (min-width: 768px) {
.howtoorder-li {
	display: grid;
	grid-template-columns: 45% auto;
	column-gap: 40px;
}

.howtoorder-li .heading {
	font-size: 24px;
	grid-column: 2;
}

.howtoorder-li .heading::before {
	font-size: 68px;
}

.howtoorder-li .img {
	height: 244px;
	object-fit: cover;
	grid-row: 1 / 3;
}
}

@media (max-width: 767.9px) {
.howtoorder-li .description {
	margin-top: 1em;
}
}