@charset "UTF-8";

/* ページタイトル */
.l-page-ttl {
	background-image: url(../img/service_list/list_page-ttl.webp);
}


/* リード文 */
.p-lead {
	font-size: clamp(16px, calc(24 / 768 * 100vw), 24px);
    line-height: 1.5;
    font-weight: var(--fw_jp_bold);
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--color01);
    margin: 80px auto;
}

/* サービス */
.p-service__content {
    display: flex;
    justify-content: space-between;
    gap: 24px 6%;
}
.p-service__content--primary {
    flex-direction: row;
}
.p-service__content--secondary {
    flex-direction: row-reverse;
}

.p-service__img {
	width: calc(50% + calc(50vw - 50%));
	height: 560px;
}
.p-service__content--primary .p-service__img {
	margin-left: calc(50% - 50vw);
}
.p-service__content--secondary .p-service__img {
	margin-right: calc(50% - 50vw);
}


.p-service__body {
	width: 44%;
    position: relative;
    z-index: 2;
    padding: 80px 0;
}
.p-service__body::before {
	content: "";
	position: absolute;
	bottom: 0;
	width: calc(100% + calc(50vw - min(calc(var(--content_w_lg) / 2), 45vw)));
	height: 1px;
	background-color: var(--color02);
}
.p-service__content--primary .p-service__body::before {
	left: 0;
}
.p-service__content--secondary .p-service__body::before {
	right: 0;
}
.p-service__body::after {
	content: "";
    position: absolute;
    bottom: 0;
    z-index: 1;
	font-family: var(--ff_jp_serif);
	font-weight: var(--fw_jp_serif_normal);
	font-size: clamp(32px, calc(64 / 1280 * 100vw), 64px);
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--color05);
}
.p-service-corporate .p-service__body::after {
	content: "Service 01";
    left: 0;
}
.p-service-stock .p-service__body::after {
	content: "Service 02";
    right: 0;
}
.p-service-succession .p-service__body::after {
	content: "Service 03";
    left: 0;
}
.p-service-temples .p-service__body::after {
	content: "Service 04";
    right: 0;
}

.p-service__body-inner {
    position: relative;
    z-index: 2;
}

.p-service__ttl {
	font-size: clamp(20px, calc(32 / 768 * 100vw), 32px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	color: var(--color02);
}

.p-service__desc {
	margin-top: 24px;
}



/* スマートフォン用 */
@media screen and (max-width: 768px) {

    /* リード文 */
    .p-lead {
        letter-spacing: 0;
        margin: 40px auto;
    }

    /* サービス */
    .p-service__content--primary {
        flex-direction: column;
    }
    .p-service__content--secondary {
        flex-direction: column;
    }

    .p-service__img {
        width: calc(100% + calc(50vw - 50%));
        height: 240px;
    }

    .p-service__body {
        width: 100%;
        padding: 0 0 80px;
    }

    .p-service__desc {
        margin-top: 16px;
    }

}