@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
施術案内 一覧
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ページヘッダー
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.page-header-img {
	object-position: center top;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- カテゴリ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.service-category {
	padding-bottom: initial;
}

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

.service-category-li a {
	display: grid;
	padding: 0.4em 1.5em;
	border: 1px solid var(--color_text);
	border-radius: 100vw;
	background: var(--color_white);
	font-size: 14px;
	grid-template-columns: auto auto;
	column-gap: 0.8em;
	align-items: center;
}

.service-category-li a:hover {
	background: var(--color_text);
	color: #fff;
}

.service-category-li a::after {
	width: 0.5em;
	height: 0.5em;
	border-right: 1px solid;
	border-bottom: 1px solid;
	content: "";
	transform: rotate(45deg);
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- メイン
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.service-main {
	padding-top: initial;
}

.service-li {
	padding-top: var(--padding-block);
}

.service-li .heading {
	margin-bottom: 0.7em;
	font-size: 36px;
}

.service-li .heading-en {
	margin-bottom: 0.2em;
}

.service-li .heading-ja {
	font-size: 16px;
}

.service-li .content {
	display: grid;
	row-gap: 30px;
}

.service-li .img {
	width: calc(100% - var(--padding-inline));
	border-radius: 0 100vw 100vw 0;
}

.service-eye .img {
	object-position: center 40%;
}

.service-nose .img {
	object-position: center 70%;
}

.service-skin .img {
	object-position: center 10%;
}

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

.service-post-li {
	margin-bottom: initial;
}

.service-post-li .button {
	margin-top: initial;
}

@media (min-width: 768px) {
.service-li .heading {
	margin-bottom: 1em;
}

.service-li .content {
	display: grid;
	grid-template-columns: calc(50% - 150px) minmax(auto, 780px);
}

.service-li .img {
	width: 100%;
	height: 366px;
	object-fit: cover;
}

.service-li .text {
	padding-left: 10%;
}

.service-post-ul {
	column-gap: 20px;
}
}

@media (max-width: 767.9px) {
.service-post-li .button {
	min-width: initial;
	padding-inline: 1.5em 3.2em;
	font-size: 13px;
}
}