@charset "utf-8";

/* ==========================================
事業内容：コンテンツ幅・上下余白
========================================== */

.p-service__intro {
	--section-space-top: 12.5rem;
	--section-space-bottom: 11.8rem;
	--content-width: 122rem;
	--content-gutter: 4.8rem;
	--content-padding: 0rem;
}

.p-service__business-section {
	--section-space-top: 0rem;
	--section-space-bottom: 0rem;
	--content-width: 1320px;
	--content-gutter: 8rem;
	--content-padding: 0rem;
}

.p-service__faq {
	--section-space-top: 12rem;
	--content-width: 148rem;
	--content-gutter: 4.8rem;
	--content-padding: 13rem;
}

/* ==========================================
事業内容：ページ基本
========================================== */

.p-service {
	width: 100%;
	max-width: none;
	background: var(--white);
	isolation: isolate;
}

/* ==========================================
事業内容：導入
========================================== */

.p-service__intro {
	position: relative;
	text-align: center;
}

.p-service__intro::before {
	position: absolute;
	z-index: -1;
	top: 3rem;
	left: 50%;
	width: 60.6rem;
	max-width: 100%;
	aspect-ratio: 1;
	background: url("/wp-content/uploads/deco-gradient.png") center / contain no-repeat;
	opacity: 0.35;
	transform: translateX(-50%);
	content: "";
}

.p-service__lead {
	line-height: 1.8;
	letter-spacing: 0.10em;
}

.p-service__intro-text {
	margin-top: 2.6rem;
}

.p-service__intro-text + .p-service__intro-text {
	margin-top: 2.3rem;
}

/* ==========================================
事業内容：サービス紹介
========================================== */

.p-service__business-section .l-container {
	--content-width: 1320px;
}

.p-service__project {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 11rem;
	padding-block: 8rem;
}

.p-service__project::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 1220px;
	max-width: 100%;
	margin-inline: auto;
	height: 0.1rem;
	background: var(--primary01);
	content: "";
}

.p-service__project:first-child {
	grid-template-columns: minmax(0, 55fr) minmax(0, 61fr);
	gap: 11rem;
	padding-top: 0;
}

.p-service__project:first-child .p-service__body {
	margin-left: 0;
	padding-right: 0;
}

.p-service__project:nth-child(2) {
	grid-template-columns: minmax(0, 61fr) minmax(0, 60fr);
}

.p-service__project:nth-child(2) .p-service__body {
	order: 2;
}

.p-service__project:nth-child(3) {
	grid-template-columns: minmax(0, 65fr) minmax(0, 61fr);
}

.p-service__project:nth-child(3) .p-service__body {
	margin-left: 0;
}

.p-service__body,
.p-service__media {
	min-width: 0;
}

.p-service__heading {
	display: flex;
	align-items: baseline;
	gap: 2.4rem;
	margin-bottom: 3.6rem;
}

.p-service__number {
	font-family: var(--font-family01);
	font-weight: 400;
	font-size: 2.4rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.p-service__number span {
    font-size: 143.55%;
}

.p-service__name {
	letter-spacing: 0.045em;
}

.p-service__catch {
	font-weight: 500;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 2.4rem;
	padding: 1rem 2.6rem;
	border-radius: 1.8rem 0 0 0;
	background: var(--gradation-primary);
	line-height: 1.7333;
	letter-spacing: 0.07em;
}

.p-service__text {
	overflow-wrap: anywhere;
}

/* ==========================================
事業内容：よくあるご質問
========================================== */

.p-service__faq-heading {
	margin-bottom: 8rem;
	text-align: center;
}

.p-service__faq-title {
	position: relative;
	display: table;
	margin-inline: auto;
	line-height: 1.4;
	letter-spacing: 0;
}

.p-service__faq-subtitle {
	letter-spacing: 0.12em;
}

.p-service__faq-panel {
	padding-block: 8rem 11rem;
	border-radius: 2.2rem 0 0 0;
	background: #FFE4CB;
}

.p-service__faq-item + .p-service__faq-item {
	margin-top: 5.4rem;
}

.p-service__faq-item summary {
	line-height: 1.44em;
	display: flex;
	align-items: center;
	color: var(--primary02);
	font-size: max(1.8rem, 1.125em);
	font-weight: 700;
	position: relative;
	min-height: 4.4rem;
	padding: 1rem 4.5rem 1rem 6rem;
	border-bottom: 0.1rem solid var(--primary02);
	list-style: none;
	cursor: pointer;
	overflow-wrap: anywhere;
	transition: opacity .3s ease;
}

.p-service__faq-item summary:hover {
	opacity: .6;
}

.p-service__faq-item summary::-webkit-details-marker {
	display: none;
}

.p-service__faq-item summary::marker {
	content: "";
}

.p-service__faq-item summary::before {
	font-family: var(--font-family01);
	font-weight: 400;
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 3.2rem;
	height: 2.8rem;
	display: grid;
	place-items: center;
	font-size: 2.4rem;
	line-height: 1;
	transform: translateY(-50%);
	content: "Q";
}

.p-service__faq-item summary::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 2rem;
	height: 2rem;
	color: var(--primary02);
	background: linear-gradient(currentColor, currentColor) center / 100% 0.2rem no-repeat, linear-gradient(currentColor, currentColor) center / 0.2rem 100% no-repeat;
	transition: background-size 0.5s ease, color 0.5s ease;
	transform: translateY(-50%);
	content: "";
}

/* ==========================================
事業内容：FAQ開閉アニメーション（JS補完）
========================================== */

.p-service__faq-item[open]:not(.is-animating) summary::after,
.p-service__faq-item.is-open summary::after {
	color: var(--base-font-color);
	background-size: 100% 0.2rem, 0.2rem 0%;
}

/* ==========================================
事業内容：よくあるご質問
========================================== */

.p-service__faq-item summary:focus-visible {
	outline: 0.2rem solid var(--base-font-color);
	outline-offset: 0.4rem;
}

.p-service__answer {
	line-height: 1.5em;
	font-weight: 500;
	position: relative;
	margin-top: 1.8rem;
	padding-left: 6rem;
	overflow-wrap: anywhere;
}

.p-service__answer::before {
	font-family: var(--font-family01);
	font-weight: 400;
	position: absolute;
	top: -0.4rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 4rem;
	aspect-ratio: 1;
	border-radius: 50%;
	color: var(--primary01);
	background: var(--white);
	font-size: 2.4rem;
	line-height: 1;
	content: "A";
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ==========================================
事業内容：レスポンシブ（1024px以下）
========================================== */

@media screen and (width <= 1024px) {
	.p-service__intro {
		--section-space-top: 7.2rem;
		--section-space-bottom: 7.2rem;
	}

	.p-service__business-section {
		--content-gutter: 6.4rem;
	}

	.p-service__project,
	.p-service__project:first-child,
	.p-service__project:nth-child(2),
	
	.p-service__project:nth-child(3) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.2rem;
	}

	.p-service__project:first-child .p-service__body,
	
	.p-service__project:nth-child(3) .p-service__body {
		margin-left: 0;
		padding-right: 0;
	}

	.p-service__heading {
		flex-wrap: wrap;
		gap: 0.4rem 1.2rem;
		margin-bottom: 2rem;
	}

	.p-service__number {
		font-size: 1.6rem;
	}

	.p-service__faq {
		--content-padding: 4.8rem;
	}

	.p-service__faq-panel {
		padding-block: 4.8rem;
	}

	.p-service__catch.jp-title24 {
    	font-size: 2rem;
	}
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ==========================================
事業内容：レスポンシブ（768px以下）
========================================== */

@media screen and (width <= 768px) {
	.p-service__project,
	.p-service__project:first-child,
	.p-service__project:nth-child(2),
	
	.p-service__project:nth-child(3) {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.8rem;
		padding-block: 4.8rem;
	}

	.p-service__project:first-child {
		padding-top: 0;
	}

	.p-service__body,
	
	.p-service__project:nth-child(2) .p-service__body {
		order: 2;
	}

	.p-service__intro-text br,
	
	.p-service__answer br {
		display: none;
	}

	.p-service__intro-text {
        max-width: 64rem;
        margin-inline: auto;
        text-align: left;
    }

	.p-service__faq {
		--content-padding: 3.2rem;
	}

	.p-service__faq-panel {
		padding-block: 3.2rem;
	}
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ==========================================
事業内容：レスポンシブ（576px以下）
========================================== */

@media screen and (width <= 576px) {
	.p-service :where(.p-service__name, .p-service__faq-subtitle) {
		font-size: max(2.6rem, 1.5em);
	}

	.p-service__lead {
		font-size: max(2.2rem, 1.2em);
		text-wrap: balance;
	}

	.p-service__lead br {
		display: none;
	}

	.p-service__lead :where(strong) {
		font-size: 116.67%;
	}

	.p-service__catch {
		font-size: max(1.8rem, 1.1em);
		/* text-wrap: balance; */
	}

	.p-service__faq-title {
		font-size: max(4rem, 2em);
	}

	.p-service__number {
		font-size: 1em;
	}

	.p-service__faq-item summary {
		font-size: 1.125em;
	}

	.p-service__intro {
		--section-space-top: 5.6rem;
		--section-space-bottom: 6.4rem;
		--content-gutter: 4rem;
	}

	.p-service__lead {
		letter-spacing: 0.03em;
	}

	.p-service__business-section {
		--content-gutter: 4rem;
	}

	.p-service__catch {
		padding: 1rem 1.6rem;
	}

    .p-service__catch.jp-title24 {
        font-size: 1.8rem;
    }

	.p-service__faq {
		--section-space-top: 6.4rem;
		--section-space-bottom: 6.4rem;
		--content-gutter: 2.4rem;
		--content-padding: 1.8rem;
	}

	.p-service__faq-heading {
		margin-bottom: 3.2rem;
	}

	.p-service__faq-panel {
		padding-block: 2.4rem 3.6rem;
	}

	.p-service__faq-item summary {
		padding: 1.2rem 2.5rem 1.2rem 4.4rem;
	}

	.p-service__faq-item summary::before {
		left: 0.2rem;
		width: 2.4rem;
		font-size: 2rem;
	}

	.p-service__answer {
		margin-top: 1.6rem;
		padding-left: 4.4rem;
	}

	.p-service__answer::before {
		top: 0;
		width: 3.2rem;
		font-size: 1.7rem;
	}
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ==========================================
事業内容：レスポンシブ（375px以下）
========================================== */

@media screen and (width <= 375px) {
	.p-service__catch {
		text-wrap: balance;
	}
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ==========================================
事業内容：FAQ開閉アニメーション（対応ブラウザ）
========================================== */

@supports (interpolate-size: allow-keywords) and selector(::details-content) and (transition-behavior: allow-discrete) {
	.p-service__faq-item {
		interpolate-size: allow-keywords;
	}

	.p-service__faq-item::details-content {
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition: height 0.5s ease, opacity 0.5s ease, content-visibility 0.5s allow-discrete;
	}

	.p-service__faq-item[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

/* ==========================================
事業内容：FAQ開閉アニメーション（JS補完）
========================================== */

.p-service__faq-item.is-animating {
	overflow: hidden;
}