@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
施術案内 詳細
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ページヘッダー
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.service-header {
	--content-width: var(--content-width_large);
	padding-top: var(--padding-block);
}

.service-header .post-heading {
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: var(--letter-spacing);
}

@media (min-width: 768px) {
.service-header .post-heading {
	font-size: 64px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- About
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.service-about {
	padding-bottom: initial;
}

.service-about .section-intro {
	margin-bottom: initial;
	grid-template-columns: auto 61%;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- こんなお悩みにおすすめ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.service-issue {
	padding-bottom: initial;
}

.service-issue-ul {
	display: flex;
	gap: 10px;
	flex-flow: wrap;
}

.service-issue-li {
	padding: 0.5em 1.4em;
	border: 1px solid;
	border-radius: 100vw;
}

@media (min-width: 768px) {
.service-issue-ul {
	gap: 20px;
}

.service-issue-li {
	padding-inline: 2.4em;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 料金
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.service-price {
	padding-bottom: initial;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 施術の流れ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.service-flow-li {
	display: grid;
	margin-bottom: 40px;
	counter-increment: number;
	gap: 0.7em 7%;
}

.service-flow-li:last-child {
	margin-bottom: initial;
}

.service-flow-li .heading {
	position: relative;
	padding: 0.7em 0 0.7em 3.9em;
	font-size: 20px;
}

.service-flow-li .heading::before {
	display: flex;
	position: absolute;
	inset: 0 auto auto 0;
	width: 2.5em;
	border-radius: 50%;
	background: var(--color_white);
	color: var(--color_main);
	font-size: 1.2em;
	font-family: var(--font_en);
	content: counter(number, decimal-leading-zero);
	aspect-ratio: 1;
	justify-content: center;
	align-items: center;
}

.service-flow-li .description a {
	text-decoration: underline;
}

.service-flow-li .description a:hover {
	color: var(--color_main);
	text-decoration-color: transparent;
}

@media (min-width: 768px) {
.service-flow-li {
	margin-bottom: 50px;
	grid-template-columns: auto 62%;
}

.service-flow-li .description {
	padding-top: 1.1em;
}
}