/*===============================================================================
　サービスページ
================================================================================*/
.service__inner {
	position: relative;
    padding-bottom: var(--g-sec--md);
}
.service__bg {
	position: absolute;
    content: "";
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	background: linear-gradient(#f5fbfe, #ffffff 50%, #f5fbfe);
	z-index: -1000;
}

.service__card-container {
	--count: 1;
    --gap: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    margin-inline: auto;
	margin-bottom: var(--g-sec--md);
}
.service__card {
	background: var(--c-light);
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	max-width: 36.25rem;
	border-radius: 16px;
	box-shadow: 0 0 16px 0 rgba(14, 90, 167, .1);
}
@media (min-width: 960px) {
	.service__card-container {
		--count: 2;
	}
}

.service__img-wrap {
	overflow: hidden;
}
.service__img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 16.25rem;
	object-fit: cover;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	clip-path: ellipse(120% 100% at 50% 0%);
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}

.service__text-container {
	padding: 0 1.75rem clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.service__ttl {
	text-align: center;
}
.service__ttl h2 {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
	color: var(--c-light);
	padding: .25rem clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	background: var(--c-blue--dark);
	border-radius: 100vmax;
	margin-bottom: 1.25rem;
}
.service__text {
	font-weight: var(--fw-md);
	line-height: var(--lh-xl);
	margin-bottom: clamp(1.5rem, .76vw + 1.31rem, 2rem);
}

.service__btn-container {
	--count: 1;
    --gap: .75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    margin-inline: auto;
	text-align: center;
}
.service__btn {
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
}
@media (min-width: 600px) {
	.service__btn-container {
		--count: 2;
	}
}



/*===============================================================================
　サービス詳細ページ
================================================================================*/


/*===================================
　共通
=====================================*/
/* パンくず下の余白を背景で埋める設定 */
.toilettumari__inner {
	position: relative;
}
.s-service__inner-bgi {
	position: absolute;
    content: "";
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	background: var(--c-blue--light);
	z-index: -10000;
}

.s-service__container {
	padding: var(--g-sec--md) 0;
	position: relative;
}
.s-service__container.--first {
	padding: 0 0 var(--g-sec--md) 0;
}
/* セクション内に「波」がある部分で使用中 */
.s-service__container.--padding-lg {
	padding: var(--g-sec--md) 0 clamp(8rem, 6.86vw + 6.33rem, 12.5rem);
}

/* 背景色 */
.s-service__bgi {
	position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    z-index: -1000;
    max-width: 100vw;
    width: 100vw;
    height: 100%;
}
.s-service__bgi.--s-bgi--pattern2 {
	transform: rotate(180deg);
    transform-origin: center;
}
.s-service__bgi.--s-bgi--pattern3 {
	background: linear-gradient(180deg, var(--c-blue--light) 0%, #EAF8FF 50%, var(--c-blue--light) 100%);
}
.s-service__bgi.--s-bgi--pattern4 {
	background: linear-gradient(180deg, var(--c-blue--light) 0%, var(--c-light) 50%, var(--c-blue--light) 100%);
}

/* スクロール */
.s-service__scroll {
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 1;
}

/* 波 */
.s-service__nami {
	position: absolute;
    bottom: 0;
    left: calc(50% - 50vw);
    z-index: -900;
    transform: rotateY(180deg);
    width: 100vw;
}
.s-service__nami.--reverse {
	transform: unset;
}

/*===================================
　最初のセクション
=====================================*/
.s-service__desc-sec {
	--count: 2;
	--gap: clamp(2.5rem, .714rem + 4.76vw, 5rem);
	gap: var(--gap);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--g-sec--md);
}
@media (min-width: 768px) {
	.s-service__desc-sec {
		--count: 2;
		flex-wrap: nowrap;
		margin-inline: calc(50% - 50vw);
		justify-content: flex-end;
	}
}
/* テキストコンテンツ */
.s-service__text-content {
	width: 100%;
}
@media (min-width: 768px) {
	.s-service__text-content {
		max-width: 37.5rem;
		margin-top: 1rem;
		margin-left: var(--swl-pad_container, 0);
	}
}
.s-service__desc-ttl {
	color: var(--c-main);
	font-weight: var(--fw-xl);
	font-size: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__desc-text:not(:last-of-type) {
	margin-bottom: clamp(1rem, .38vw + .91rem, 1.25rem);
}
.s-service__desc-text p {
	font-weight: var(--fw-md);
	line-height: var(--lh-xl);
}
/* SP時のみ縦並びになるテキスト */
.s-service__desc-text-column {
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	.s-service__desc-text-column {
		display: block;
	}
}
/* img */
.s-service__img-content {
	display: flex;
}
.s-service__img {
	flex-grow: 1;
	object-fit: cover;
	aspect-ratio: 16/9;
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	border-radius: 8px;
}
@media (min-width: 768px) {
	.s-service__img {
		max-width: 40rem;
		min-height: 22.5rem;
		border-radius: unset;
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}
}


/*===================================
　CTA
=====================================*/
.s-service__cta-sec {
	margin-bottom: var(--g-sec--md);
}


/*===================================
　お悩み
=====================================*/
.s-service__trouble-box {
	position: relative;
	max-width: 60rem;
    margin-inline: auto;
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	padding-top: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	background: var(--c-blue--dark);
	border-radius: 20px;
	overflow: hidden;
}
@media (min-width: 768px) {
	.s-service__trouble-box {
		border-radius: 40px;
	}
}
/*===============
* ヘッド
* ===============*/
.s-service__trouble-head {
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__trouble-title {
	color: var(--c-light);
	font-weight: var(--fw-xl);
	font-size: clamp(1.5rem, .38vw + 1.41rem, 1.75rem);
	text-align: center;
}
/*===============
* 波
* ===============*/
.s-service__trouble-nami{
	position: relative;
	top: 1px;
}
.s-service__trouble-nami svg{
	width: 100%;
}
/*===============
* ボディ
* ===============*/
.s-service__trouble-body{
	padding: 1rem 1.25rem clamp(1.75rem, 2.67vw + 1.1rem, 3.5rem);
	background: linear-gradient(180deg, #C7DBED 0%, #9EBDD8 100%);
}
.s-service__trouble-list-wrap{
	max-width: 816px;
	margin-inline: auto;
}
.s-service__trouble-list {
	--circle-width: calc(1em + var(--over-fz)); /* ｱｲｺﾝｻｲｽﾞ */
	--over-fz: 0.25em; /* ｱｲｺﾝをﾌｫﾝﾄｻｲｽﾞより大きくする値 */
	--check-long: calc(var(--circle-width) * 0.75); /* ﾁｪｯｸｱｲｺﾝの長辺 */
	--check-color: Var(--c-light);
	--check-weight: 2px; /*ﾁｪｯｸｱｲｺﾝの太さ  */
	--count: 1;
	--gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 768px){
	.s-service__trouble-list{
		--count: 2;
	}
}
.s-service__trouble-list > li {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .5em;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: 1.5rem .5rem;
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	font-weight: var(--fw-xl);
	color: var(--c-main);
}
/* サークル */
.s-service__trouble-list-icon {
	position: relative;
	top: var(--over-fz); /* ｱｲｺﾝとﾃｷｽﾄの高さを揃える */
	display: inline-block;
	min-width: var(--circle-width);
	aspect-ratio: 1;
	background: Var(--c-main);
	border-radius: 50%;
}
/* チェックアイコン */
.s-service__trouble-list-icon::before {
	position: absolute;
	top: 15%;
	left: 20%;
	transform: rotate(-45deg);
	content: "";
	display: inline-block;
	width: var(--check-long);
	aspect-ratio: 2 / 1;
	border-left: var(--check-weight) solid var(--check-color);
	border-bottom: var(--check-weight) solid var(--check-color);
}
/* トラブル下 テキスト */
@media (min-width: 768px) {
	.s-service__trouble-text {
		text-align: center;
	}
}
.s-service__trouble-text p {
	line-height: var(--lh-xl);
	font-weight: var(--fw-lg);
}


/*===================================
　放置する危険性
=====================================*/
.s-service__risk-sec {
	max-width: 60rem;
	margin-inline: auto;
}
.s-service__risk-ttl {
	text-align: center;
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__risk-ttl.--margin-lg {
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
}
/* トイレつまりでのみ使用 */
.s-service__risk-desc {
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
@media (min-width: 768px) {
	.s-service__risk-desc {
		text-align: center;
	}
}
.s-service__risk-desc p {
	line-height: var(--lh-xl);
	font-weight: var(--fw-md);
}

.s-service__risk-container {
	--count: 1;
    --gap: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap);
    margin-inline: auto;
}
.s-service__risk-content {
	display: flex;
    flex-direction: column;
	gap: clamp(.75rem, .38vw + .66rem, 1rem);
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
}
@media (min-width: 768px) {
	.s-service__risk-container {
		--count: 2;
	}
}

.s-service__risk-img {
	border-radius: 8px;
	aspect-ratio: 460/259;
	object-fit: cover;
}
.s-service__risk-subttl {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, .38vw + .41rem, .75rem);
	color: var(--c-main);
	font-size: 1.25rem;
	margin-bottom: .5rem;
}
.s-service__risk-subttl-icon {
	display: flex;
	width: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
}
.s-service__risk-text {
	font-weight: var(--fw-md);
}


/*===================================
　選ばれる理由
=====================================*/
.s-service__reason-sec {
	max-width: 60rem;
	margin-inline: auto;
}
.s-service__reason-ttl {
	text-align: center;
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
}

.s-service__reason-content {
	--count: 1;
    --gap: clamp(1.25rem, 1.9vw + .79rem, 2.5rem);
    display: flex;
    flex-wrap: wrap-reverse;
    gap: var(--gap);
    margin-inline: auto;
}
.s-service__reason-content:not(:last-of-type) {
	padding-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	border-bottom: 1px dashed var(--c-blue);
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
@media (min-width: 768px) {
	.s-service__reason-content {
		--count: 2;
        flex-wrap: nowrap;
	}
	.s-service__reason-content:nth-child(even) {
		flex-direction: row-reverse;
	}
}

@media (min-width: 768px) {
	.s-service__reason-textcontent {
		width: 100%;
		max-width: 32.5rem;
		padding-top: .5rem;
	}
}
.s-service__reason-subttl {
	display: flex;
	align-items: end;
	gap: clamp(.75rem, .38vw + .66rem, 1rem);
	margin-bottom: 1rem;
}
.s-service__reason-number {
	font-size: .75rem;
	font-weight: var(--fw-xl);
    line-height: var(--lh-xs);
    color: var(--c-main);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.s-service__reason-number span:last-of-type {
	font-size: 2.5rem;
}
.s-service__reason-subttl h3 {
	color: var(--c-main);
	font-weight: var(--fw-xl);
	font-size: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
}
.s-service__reason-subttl h3 span {
	display: inline;
	background: linear-gradient(transparent 70%, rgba(199, 219, 237, .5) 0%);
}
.s-service__reason-text p {
	font-weight: var(--fw-md);
	line-height: var(--lh-xl);
}
.s-service__reason-img {
	border-radius: 8px;
	aspect-ratio: 400/225;
	object-fit: cover;
    width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
}
@media (min-width: 768px) {
	.s-service__reason-img {
		max-width: 25rem;
	}
}


/*===================================
　原因
=====================================*/
.s-service__cause-sec {
	max-width: 60rem;
	margin-inline: auto;
}
.s-service__cause-ttl {
	text-align: center;
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
}
.s-service__cause-ttl.--margin-sm {
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__cause-desc {
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__cause-desc p {
	line-height: var(--lh-xl);
    font-weight: var(--fw-lg);
}
@media (min-width: 768px) {
	.s-service__cause-desc {
		text-align: center;
	}
}

.s-service__cause-container.--kyutouki {
	margin-bottom: var(--g-sec--md);
}
.s-service__cause-content {
	position: relative;
    padding: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
    background: var(--c-light);
    border-radius: 16px;
    outline: 1px solid var(--c-blue);
    outline-offset: -.5rem;
    box-shadow: 0 0 16px rgba(14, 90, 167, .1);
    z-index: 0;
	/* レイアウト */
	--count: 1;
    --gap: clamp(1rem, 2.29vw + .44rem, 2.5rem);
    display: flex;
    flex-wrap: wrap-reverse;
    gap: var(--gap);
    margin-inline: auto;
}
.s-service__cause-content:not(:last-of-type) {
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__cause-textcontent {
	width: 100%;
}
@media (min-width: 768px) {
	.s-service__cause-content {
		--count: 2;
        flex-wrap: nowrap;
	}
	.s-service__cause-textcontent {
		max-width: 27.5rem;
	}
}
.s-service__cause-subttl {
	color: var(--c-main);
	font-weight: var(--fw-xl);
	font-size: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
	padding-bottom: clamp(.5rem, .76vw + .31rem, 1rem);
	border-bottom: 1px dashed var(--c-blue);
	margin-bottom: clamp(.5rem, .76vw + .31rem, 1rem);
}
.s-service__cause-text:not(:last-child) {
	margin-bottom: 1rem;
}
.s-service__cause-text p {
	font-weight: var(--fw-md);
}
.s-service__cause-dl dt {
	font-weight: var(--fw-lg);
}
.s-service__cause-dl dd {
	position: relative;
	padding-left: 1em;
	font-size: 1rem;
	font-weight: var(--fw-md);
	line-height: var(--lh-md);
}
.s-service__cause-dl dd::before {
	content: "・";
	position: absolute;
	top: calc((1rem * var(--lh-md)) / 2);
	left: 0;
	transform: translateY(-50%);
	display: inline-block;
	font-size: inherit;
}

.s-service__cause-img {
	border-radius: 8px;
	aspect-ratio: 400/225;
	object-fit: cover;
    width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
}
@media (min-width: 768px) {
	.s-service__cause-img {
		max-width: 25rem;
		max-height: 225px;
	}
}

.s-service__cause-number {
	position: absolute;
	left: clamp(.75rem, .38vw + .66rem, 1rem);
	bottom: clamp(.75rem, .38vw + .66rem, 1rem);
	z-index: -1;
}
.s-service__cause-number span {
	font-size: clamp(2.75rem, 1.9vw + 2.29rem, 4rem);
	font-weight: var(--fw-xl);
	line-height: var(--lh-xs);
	color: var(--c-blue);
	opacity: .2;
}


/*===================================
　料金
=====================================*/
.s-service__price-sec {
	max-width: 60rem;
	margin-inline: auto;
}
.s-service__price-ttl-container {
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
}
.s-service__price-ttl-container div:not(:last-of-type) {
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__price-ttl {
	text-align: center;
}
.s-service__price-desc p {
	line-height: var(--lh-xl);
    font-weight: var(--fw-md);
}
@media (min-width: 768px) {
	.s-service__price-desc {
		text-align: center;
	}
}

.s-service__price-container {
	margin-bottom: var(--g-sec--md);
}
.s-service__price-content:not(:last-of-type) {
	padding-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	border-bottom: 1px dashed var(--c-blue);
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}

/* 水滴とサブタイトル */
.s-service__price-subttl {
	display: flex;
    align-items: center;
    gap: clamp(.5rem, .38vw + .41rem, .75rem);
    margin-bottom: clamp(1.5rem, .38vw + 1.41rem, 1.75rem);
}
.s-service__price-subttl img {
	width: 1rem;
}
.s-service__price-subttl h3 {
	color: var(--c-main);
    font-weight: var(--fw-xl);
	font-size: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
}
.s-service__price-subttl span {
	display: inline;
    background: linear-gradient(transparent 70%, rgba(199, 219, 237, .5) 0%);
}

/* ドット付きのサブタイトル */
@media (min-width: 768px) {
	.s-service__price-dl {
		padding-left: 1.75rem;
	}
}
.s-service__price-dl-content:not(:last-of-type) {
	margin-bottom: clamp(1.5rem, .38vw + 1.41rem, 1.75rem);
}
.s-service__price-dt {
	display: flex;
	gap: .25rem;
	align-items: center;
	color: var(--c-main);
	font-size: clamp(1rem, .38vw + .91rem, 1.25rem);
	font-weight: var(--fw-xl);
	margin-bottom: .5rem;
}
.s-service__price-dt span {
	display: inline-block;
	width: .5rem;
	height: .5rem;
	aspect-ratio: 1;
	background: var(--c-gradient--dark);
	border-radius: 100vmax;
}
.s-service__price-dt.--kyutouki {
	font-size: 1rem;
	color: unset;
	margin-bottom: unset;
}

.s-service__price-dd {
	padding-left: .75rem;
	font-weight: var(--fw-md);
}

.s-service__price-dd-dot-content {
	display: flex;
	flex-direction: column;
	margin: .5rem 0;
}
.s-service__price-dd-dot {
	position: relative;
    padding-left: 1em;
	font-size: 1rem;
    font-weight: var(--fw-md);
    line-height: var(--lh-md);
}
.s-service__price-dd-dot::before {
	content: "・";
    position: absolute;
    top: calc((1rem * var(--lh-md)) / 2);
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    font-size: inherit;
}

/* 料金表 */
.s-service__price-table-desc {
	font-weight: var(--fw-md);
	margin-bottom: clamp(1.5rem, .38vw + 1.41rem, 1.75rem);
}
@media (min-width: 768px) {
	.s-service__price-block {
		padding-left: 1.75rem;
	}
}
.s-service__price-table {
	width: fit-content;
	padding: clamp(1.25rem, 1.14vw + .97rem, 2rem);
	background: var(--c-light);
	box-shadow: 0 0 16px 0 rgba(14, 90, 167, .1);
	border-radius: 8px;
	font-weight: var(--fw-md);
}
.s-service__price-table dl {
	display: inline-grid;
	column-gap: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	row-gap: clamp(.5rem, .38vw + .41rem, .75rem);
	padding-bottom: clamp(1rem, .38vw + .91rem, 1.25rem);
	border-bottom: 1px dashed var(--c-blue);
	margin-bottom: clamp(1rem, .38vw + .91rem, 1.25rem);
}
.s-service__price-table div {
	display: contents;
}
.s-service__price-table dt {
	grid-column: 1;
}
.s-service__price-table dd {
	grid-column: 2;
	margin: 0;
	text-align: right;
}

/* 料金表下の注釈文 */
.s-service__price-note {
	display: flex;
}
.s-service__price-note::before {
	content: "※";
	font-size: clamp(.75rem, .38vw + .66rem, 1rem);
}
.s-service__price-table-text {
	display: flex;
	flex-direction: column;
	font-size: clamp(.75rem, .38vw + .66rem, 1rem);
}

/*====================
* トイレ交換 メーカー
* ====================*/
.s-service__price-maker-container {
	margin-bottom: clamp(.75rem, .38vw + .66rem, 1rem);
}
.s-service__price-maker-desc {
	font-weight: var(--fw-xl);
	margin-bottom: clamp(.75rem, .38vw + .66rem, 1rem);
}
.s-service__price-maker-content {
	--count: 2;
    --gap: .75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap);
    margin-inline: auto;
}
.s-service__price-maker {
	display: flex;
	flex-direction: column;
	gap: clamp(.75rem, .38vw + .66rem, 1rem);
	align-items: center;
	padding: clamp(1.25rem, 1.14vw + .97rem, 2rem) clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	background: var(--c-light);
	border: 1px solid var(--c-blue);
	border-radius: 8px;
}
.s-service__price-maker img {
	width: clamp(5rem, 3.81vw + 4.07rem, 7.5rem);
}
.s-service__price-maker p {
	font-size: clamp(.75rem, .38vw + .66rem, 1rem);
	font-weight: var(--fw-md);
}
@media (min-width: 768px) {
	.s-service__price-maker-content {
		--count: 3;
	}
}

/*====================
* 料金表セクションの背景イメージ
* ====================*/
.s-service__price-bg {
	position: relative;
}
.s-service__price-bg::before {
	position: absolute;
	content: "";
	bottom: 0;
	right: clamp(-10rem, -8.38vw - 2.46rem, -4.5rem);
	background: url(/wp-content/uploads/s-service-price1.png);
	background-size: cover;
	width: clamp(15rem, 22.86vw + 9.43rem, 30rem);
	height: clamp(10rem, 15.24vw + 6.29rem, 20rem);
	z-index: -1;
}
/*====================
* 各ページの背景イメージ
* ====================*/
/* トイレつまり */
.s-service__price-bg.--toilettumari::before {
	background: unset;
}
.s-service__price-bg.--toilettumari-02::before {
	bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	background: url(/wp-content/uploads/s-service-price2.png);
	background-size: cover;
	width: clamp(15rem, 15.24vw + 11.29rem, 25rem);
	height: clamp(9.5rem, 9.14vw + 7.27rem, 15.5rem);
	opacity: .4;
}
@media (min-width: 768px) {
	.s-service__price-bg.--toilettumari::before {
		bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
		background: url(/wp-content/uploads/s-service-price3.png);
		background-size: cover;
		width: 9.5rem;
		height: 19.5rem;
	}
	.s-service__price-bg.--toilettumari-02::before {
		opacity: unset;
	}
}
/* お風呂 */
.s-service__price-bg.--bath::before {
	bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	background: url(/wp-content/uploads/s-service-price4.png);
	background-size: cover;
	width: clamp(10rem, 11.43vw + 7.21rem, 17.5rem);
	height: clamp(15rem, 17.14vw + 10.82rem, 26.25rem);
	opacity: .4;
}
@media (min-width: 768px) {
	.s-service__price-bg.--bath::before {
		opacity: unset;
	}	
}
/* キッチン */
.s-service__price-bg.--kitchen::before {
	bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	background: url(/wp-content/uploads/s-service-price5.png);
	background-size: cover;
	width: clamp(12.5rem, 19.05vw + 7.86rem, 25rem);
	height: clamp(10rem, 9.9vw + 7.59rem, 16.5rem);
	opacity: .4;
}
@media (min-width: 768px) {
	.s-service__price-bg.--kitchen::before {
		opacity: unset;
	}	
}
/* 洗面所 */
.s-service__price-bg.--senmenjo::before {
	bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	background: url(/wp-content/uploads/s-service-price6.png);
	background-size: cover;
	width: clamp(12.5rem, 19.05vw + 7.86rem, 25rem);
	height: clamp(7.75rem, 11.05vw + 5.06rem, 15rem);
	opacity: .4;
}
@media (min-width: 768px) {
	.s-service__price-bg.--senmenjo::before {
		opacity: unset;
	}	
}
/* 給湯器 */
.s-service__price-bg.--kyutouki::before {
	bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	background: url(/wp-content/uploads/s-service-price7.png);
	background-size: cover;
	width: clamp(12.5rem, 19.05vw + 7.86rem, 25rem);
	height: clamp(11rem, 20.57vw + 5.99rem, 24.5rem);
	opacity: .4;
}
@media (min-width: 768px) {
	.s-service__price-bg.--kyutouki::before {
		opacity: unset;
	}	
}


/*===================================
　他者との違い・給湯器の寿命は何年？
=====================================*/
.s-service__support {
	position: relative;
    padding: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem) 1.75rem;
    background: var(--c-light);
    border-radius: 16px;
    outline: 1px solid var(--c-blue);
    outline-offset: -.5rem;
    max-width: 60rem;
    margin-inline: auto;
    box-shadow: 0 0 16px rgba(14, 90, 167, .1);
    z-index: 0;
}
.s-service__support-ttl {
	position: relative;
    padding: clamp(.75rem, .76vw + .56rem, 1.25rem) 0 clamp(.25rem, .38vw + .16rem, .5rem);
    z-index: 0;
    color: var(--c-main);
    text-align: center;
    margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__support-ttl::before {
	position: absolute;
    content: "DIFFERENCE";
    color: var(--c-blue);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(3.25rem, 2.67vw + 2.6rem, 5rem);
    font-weight: var(--fw-xl);
    line-height: var(--lh-xs);
    opacity: .3;
    z-index: -1;
}
.s-service__support-ttl.--kyutouki::before {
	content: "LIFESPAN";
}
.s-service__support-content {
	--count: 1;
    --gap: clamp(1.25rem, .76vw + 1.06rem, 1.75rem);
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: var(--gap);
	max-width: 52.5rem;
    margin-inline: auto;
}
.s-service__support-text div:not(:last-of-type) {
	margin-bottom: clamp(1rem, .38vw + .91rem, 1.25rem);
}
.s-service__support-text p,
.s-service__support-text li {
	line-height: var(--lh-xl);
	font-weight: var(--fw-md);
}
.s-service__support-img {
	object-fit: cover;
	aspect-ratio: 332/187;
	border-radius: 8px;
	height: fit-content;
    width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
}
@media (min-width: 768px) {
	.s-service__support-content {
		--count: 2;
        flex-wrap: nowrap;
	}
	.s-service__support-text {
		max-width: 30rem;
	}
	.s-service__support-img {
		max-width: 20.75rem;
	}
}


/*===================================
　施工事例
=====================================*/
.s-service__works-sec {
	max-width: 60rem;
	margin-inline: auto;
}
.s-service__works-ttl {
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	text-align: center;
}
/* レイアウト */
.s-service__works-container {
	background: var(--c-light);
	border-radius: 16px;
	padding: clamp(1.25rem, 1.9vw + .79rem, 2.5rem);
	box-shadow: 0 0 16px 0 rgba(14, 90, 167, .1);
}
.s-service__works-container:not(:last-of-type) {
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__works-content {
	--count: 1;
    --gap: clamp(1.25rem, 1.9vw + .79rem, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-inline: auto;
}
@media (min-width: 768px) {
	.s-service__works-content {
		--count: 2;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}
.s-service__works-block:not(:last-of-type) {
	padding-bottom: clamp(1.25rem, .76vw + 1.06rem, 1.75rem);
	border-bottom: 1px dashed var(--c-blue);
	margin-bottom: clamp(1.25rem, .76vw + 1.06rem, 1.75rem);
}
.s-service__works-text {
	width: 100%;
}
/* 住所｜作業名 */
.s-service__works-address {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, .38vw + .41rem, .75rem);
	font-weight: var(--fw-lg);
	color: var(--c-blue--dark);
	margin-bottom: clamp(.75rem, .76vw + .56rem, 1.25rem);
}
.s-service__works-address img {
	width: clamp(1rem, .38vw + .91rem, 1.25rem);
}
/* タイトル */
.s-service__works-subttl {
	color: var(--c-main);
	font-weight: var(--fw-xl);
	font-size: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
	margin-bottom: clamp(1.25rem, .76vw + 1.06rem, 1.75rem);
}
/* 3項目 */
.s-service__works-date {
	width: 100%;
	background: rgba(199, 219, 237, .2);
	padding: clamp(.75rem, .76vw + .56rem, 1.25rem);
	border-radius: 8px;
}
.s-service__works-dl {
	display: inline-grid;
	grid-template-columns: auto auto;
	gap: .5rem;
}
.s-service__works-dl div {
	display: contents;
	font-weight: var(--fw-lg);
	color: var(--c-blue--dark);
}
.s-service__works-dl dt {
	text-align: right;
}
.s-service__works-dl dd {
	margin: 0;
	text-align: left;
}
/* 写真 */
.s-service__works-img {
	object-fit: cover;
	aspect-ratio: 420/246;
	border-radius: 8px;
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
}
@media (min-width: 768px) {
	.s-service__works-img {
		max-width: 26.25rem;
	}
}
/* 担当者のコメント */
.s-service__works-comentcontent {
	display: flex;
	gap: clamp(1rem, .76vw + .81rem, 1.5rem);
	font-weight: var(--fw-md);
}
.s-service__works-manager {
	display: inline-flex;
	align-items: center;
	flex-direction: column;
	gap: .25rem;
}
.s-service__works-manager img {
	min-width: 3rem;
	width: clamp(3rem, .76vw + 2.81rem, 3.5rem);
}
.s-service__works-manager figcaption {
	color: var(--c-blue--dark);
	font-size: .75rem;
	font-weight: var(--fw-md);
}

/* 準備中のページ */
.s-service__works-junbi {
    text-align: center;
    font-size: 1.25rem;
    font-weight: var(--fw-lg);
    color: var(--c-blue--dark);
}

/*===================================
　よくある質問
=====================================*/
.s-service__faq-ttl {
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	text-align: center;
}


/*===================================
　お客様の声（トイレつまり）
=====================================*/
.s-service__voice-ttl {
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	text-align: center;
}

.s-service__voice-container {
	--count: 1;
    --gap: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    margin-inline: auto;
}
.s-service__voice-content {
	max-width: 23.75rem;
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	padding: clamp(1.25rem, .38vw + 1.16rem, 1.5rem);
	background: var(--c-light);
	border-radius: 8px;
	box-shadow: 0 0 16px 0 rgba(14, 90, 167, .1);
}
@media (min-width: 768px) {
	.s-service__voice-container {
		--count: 3;
		justify-content: space-between;
	}
}

.s-service__voice-img {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	font-weight: var(--fw-lg);
	color: var(--c-blue--dark);
	margin-bottom: 1rem;
}
.s-service__voice-img img {
	width: clamp(7rem, .76vw + 6.81rem, 7.5rem);
}
.s-service__voice-review {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: var(--fw-xl);
	color: var(--c-act01);
	margin-bottom: .5rem;
}
.s-service__voice-review img {
	width: clamp(5.75rem, .38vw + 5.66rem, 6rem);
}
.s-service__voice-text {
	font-weight: var(--fw-md);
}


/*===================================
　流れ（トイレつまり）
=====================================*/
.s-service__flow-ttl {
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	text-align: center;
}
.s-service-flow-img {
	opacity: unset !important;
}

.s-service__flow-container {
	--count: 2;
    --gap: .75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	column-gap: var(--gap);
	row-gap: 1.75rem;
    margin-inline: auto;
}
.s-service__flow-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(.5rem, .76vw + .31rem, 1rem);
	background: var(--c-light);
	border-radius: 8px;
	box-shadow: 0 0 16px 0 rgba(14, 90, 167, .1);
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	padding: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem) 1rem 2.5rem;
	margin-top: 1rem;
}
@media (min-width: 768px) {
	.s-service__flow-container {
		--count: 5;
	}
	.s-service__flow-content {
		max-width: 14.5rem;
	}
	.s-service__flow-content:not(:last-of-type)::before {
		position: absolute;
		content: "";
		width: var(--gap);
		height: .5rem;
		right: -.75rem;
		top: 50%;
		transform: translateY(-50%);
		background: var(--c-blue--dark);
	}
}
.s-service__flow-content h3 {
	font-size: 1.25rem;
	font-weight: var(--fw-xl);
	color: var(--c-main);
}
.s-service__flow-content p {
	font-weight: var(--fw-md);
}
.s-service__flow-number {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	padding: .25rem 0;
	color: var(--c-light);
    background: var(--c-gradient--dark);
	width: 6rem;
	text-align: center;
	font-weight: var(--fw-xl);
    border-radius: 100vmax;
}


/*===================================
　対応エリア
=====================================*/
.s-service__area-ttl {
	text-align: center;
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__area-desc {
	text-align: center;
	font-weight: var(--fw-md);
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}

.s-service__area-fukidashi {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: .5rem;
}
.s-service__area-fukidashi p {
	display: inline-block;
	font-weight: var(--fw-lg);
	color: var(--c-light);
	background: var(--c-blue--dark);
	padding: .25rem 2rem;
	border-radius: 100vmax;
}
.s-service__area-fukidashi span {
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	width: .75rem;
	height: .5rem;
	background: var(--c-blue--dark);
}

.s-service__area-text {
	text-align: center;
	font-weight: var(--fw-md);
}
.s-service__area-text p:not(:last-of-type) {
	margin-bottom: 1rem;
}
.s-service__area-name {
	font-weight: var(--fw-xl);
	font-size: clamp(1rem, .38vw + .91rem, 1.25rem);
	color: var(--c-blue--dark);
	margin-bottom: 1rem;
}


/*===================================
　最後の一押し
=====================================*/
.s-service__coment-bg {
	position: relative;
}
.s-service__coment-bg::before {
	position: absolute;
	content: "";
	background: url(/wp-content/uploads/mascot.png);
	background-size: cover;
	width: clamp(5.75rem, 6.48vw + 4.17rem, 10rem);
	height: clamp(7.75rem, 10.29vw + 5.24rem, 14.5rem);
	bottom: clamp(-2.5rem, -2.29vw - .44rem, -1rem);
    right: clamp(-4.5rem, -5.33vw - -.3rem, -1rem);
    z-index: -2;
	opacity: .3;
}
.s-service__coment-bg.--toilettumari::before {
	width: clamp(5.75rem, 14.1vw + 2.31rem, 15rem);
	height: clamp(7.75rem, 21.33vw + 2.55rem, 21.75rem);
	bottom: clamp(-3.5rem, -3.43vw - .41rem, -1.25rem);
    right: clamp(-3.5rem, -3.81vw - -.07rem, -1rem);
	
}
.s-service__coment-ttl {
	text-align: center;
	margin-bottom: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__coment-text {
	font-weight: var(--fw-md);
	line-height: var(--lh-xl);
}
.s-service__coment-text:not(:last-of-type) {
	margin-bottom: clamp(1rem, .38vw + .91rem, 1.25rem);
}
@media (min-width: 768px) {
	.s-service__coment-bg::before {
		opacity: 1;
	}
	.s-service__coment-text {
		text-align: center;
	}
}



/*===============================================================================
　住まいの修理・交換サービス
================================================================================*/
.s-service__card-ttl {
	text-align: center;
	margin-bottom: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
}

.s-service__card-container {
	--count: 1;
    --gap: clamp(1.25rem, 1.14vw + .97rem, 2rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    margin-inline: auto;
}
.s-service__card-content {
	background: var(--c-light);
	border-radius: 8px;
	box-shadow: 0 0 16px 0 rgba(14, 90, 167, .1);
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	max-width: 22.5rem;
}
@media (min-width: 768px) {
	.s-service__card-container {
		--count: 2;
		justify-content: unset;
	}
	.s-service__card-container.--garasu {
		justify-content: center;
	}
	.s-service__card-content {
		max-width: unset;
	}
}
@media (min-width: 960px) {
	.s-service__card-container {
		--count: 3;
	}
}

.s-service__card-img {
	object-fit: cover;
	width: 100%;
	aspect-ratio: 380/214;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.s-service__card-block {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
	padding: clamp(1.25rem, .38vw + 1.16rem, 1.5rem) clamp(1.25rem, .38vw + 1.16rem, 1.5rem) clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
}
.s-service__card-subttl {
	display: inline-block;
	padding: .25rem clamp(1.5rem, .38vw + 1.41rem, 1.75rem);
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
	color: var(--c-light);
	background: var(--c-blue--dark);
    border-radius: 100vmax;
}