/*===============================================================================
全ページ共通
================================================================================*/
.service__head{
	margin-bottom: var(--g-sec--lg);
}
.service__body{
	margin-bottom: var(--g-sec--lg);
}
/* テキスト */
.service__text{
	max-width: fit-content;
	margin-inline: auto;
}
.service__text > *{
	display: block;
}
.service__text.--sp-row > *{
	display: inline;
}
@media (min-width: 600px){
	.service__text > *{
		display: inline;
	}
	.service__text.--sp-row > *{
		display: block;
	}
}


/*===============================================================================
ページタイトル
================================================================================*/
.service-heading__title{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--g-sec--sm);
	text-align: center;
	font-size: clamp(1.5rem, 0.786rem + 1.9vw, 2.5rem);
	font-weight: var(--fw-md);
	color: var(--c-main);
}
.service-heading__title.--fz-lg{
	font-size: clamp(2rem, 2.29vw + 1.44rem, 3.5rem);
}
/*===============================
* メッセージ
* =================================*/
.service-heading__message:not(:last-child){
	margin-bottom: var(--g-sec--lg);
}
.service-heading__message{
	max-width: fit-content;
	margin-inline: auto;
}
/* .service-heading__message p {
display: flex;
flex-direction: column;
}
@media (min-width: 600px){
.service-heading__message p {
flex-direction: row;
}
} */

/*===============================
* リスト
* =================================*/
.service-heading__list:not(:last-child){
	margin-bottom: var(--g-sec--lg);
}
.service-heading__list{
	--count: 1;
	--gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem var(--gap);
}
@media (min-width: 600px){
	.service-heading__list{
		--count: 2;
	}
}
@media (min-width: 960px){
	.service-heading__list{
		--count: 3;
	}
}
/* アイテム */
.service-heading__list-item{
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.service-heading__list-item:not(:first-of-type){
	position: relative;
}
/* 区切り線 */
.service-heading__list-item:not(:first-of-type)::before{
	--line-weight: 1px;
	--line-color: var(--c-gray);
	position: absolute;
	top: calc( 1.5rem / -2 );
	left: 0;
	transform: translate(0%,0%);
	content: "";
	width: 100%;
	height: var(--line-weight);
	background: var(--line-color);
}
@media (min-width: 600px){
	.service-heading__list-item:nth-of-type(2)::before{
		top: 50%;
		left: calc( var(--gap) / -2 );
		transform: translate(-50%,-50%);
		width: var(--line-weight);
		height: 100%;
	}
}
@media (min-width: 960px){
	.service-heading__list-item:not(:first-of-type)::before{
		top: 50%;
		left: calc( var(--gap) / -2 );
		transform: translate(-50%,-50%);
		width: var(--line-weight);
		height: 100%;
	}
}
/* リード */
.service-heading__list-lead{
	margin-bottom: 1rem;
	text-align: left;
	font-size: clamp(1.5rem, 1.321rem + 0.48vw, 1.75rem);
	font-weight: var(--fw-lg);
}
@media (min-width: 600px){
	.service-heading__list-lead{
		text-align: center;
	}
}
/* 下線 */
.service-heading__list-lead span{
	--line-heght: .75rem;
	display: inline;
	background: linear-gradient(transparent calc(100% - var(--line-heght)), #FFF7B8 var(--line-heght));
}

/*===============================
* スクロールボタン
* =================================*/
.service-heading__scroll{
	text-align: center;
}



/*===============================================================================
よくあるご質問
================================================================================*/
.service-faq{
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: var(--g-sec--lg);
}



/*===============================================================================
各ページへのボタン：サービスページ（親）でのみ使用
================================================================================*/
.service__navs{
	--count: 1;
	--gap: 0rem;
	position: relative;
	left: calc( 50% - 50vw );
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	max-width: 100vw;
	width: 100vw;
}
@media (min-width: 960px){
	.service__navs{
		--count: 2;
	}
}

/* 各サービス */
.service-nav{
	position: relative;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: var(--g-sec--lg) var(--swl-pad_container,0);
}

/* 背景色 */
.service-nav::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	content: "";
	width: 100%;
	height: 100%;
}
.service-nav.--souzoku::before{
	background: var(--c-green--light);
}
.service-nav.--seizen::before{
	background: var(--c-act03);
}
.service-nav.--syukatu::before{
	background: var(--c-light);
}
.service-nav.--fudosan::before{
	background: var(--c-blue--light);
}
.service-nav.--zeirisi::before{
	background: var(--c-light);
}
.service-nav.--koushou::before{
	background: var(--c-blue--light);
}
@media (min-width: 960px){
	.service-nav.--fudosan::before{
		background: var(--c-light);
	}
	.service-nav.--zeirisi::before{
		background: var(--c-blue--light);
	}
}

.service-nav__inner{
	max-width: 30rem;
	margin-inline: auto;
}

.service-nav__head{
	text-align: center;
	font-weight: var(--fw-lg);
}
.service-nav__title{
	margin-bottom: var(--g-sec--sm);
}
.service-nav__description{
	margin-bottom: var(--g-sec--sm);
}
.service-nav__items{
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
}

/* ボタン */
.service-nav__items .c-largeBtn span{
	font-size: .75em;
}



/*===============================================================================
料金
================================================================================*/
.service-price{
	--section-bgc: var(--c-green--light);
	--font-color: var(--c-green--dark);
	position: relative;
	padding: var(--g-sec--lg) 0;
}
:is(.yuigon, .zouyo, .shintaku, .sigojimu ) .service-price{
	--section-bgc: var(--c-act03);
	--font-color: var(--c-act01--dark);
}
:is(.syukatu, .fudosan, .zeirisi, .koushou ) .service-price{
	--section-bgc: #E0EDFA;
	--font-color: var(--c-act02--dark);
}
/*===============================
* 背景色
* =================================*/
.service-price::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
	content: "";
	max-width: 1200px;
	width: 105vw;
	height: 100%;
	background: var(--section-bgc);
	border-radius: var(--bd-r--lg);
	overflow: hidden;
}
.service-price__inner{
	max-width: var(--width-sm);
	margin-inline: auto;
}
/* セクション：タイトル */
.service-price__head{
	margin-bottom: var(--g-sec--md);
}
.service-price__title{
	color: var(--c-dark);
}

.service-price__body{
	display: flex;
	flex-direction: column;
	gap: var(--g-sec--md);
}
.service-price__message{
	max-width: fit-content;
	margin-inline: auto;
	font-weight: var(--fw-lg);
}
.service-price__message>*{
	margin-bottom: 1em;
}
/* 注釈エリア */
.service-price__noteArea{
	padding: clamp(1.25rem, 0.357rem + 2.38vw, 2.5rem) clamp(1rem, 0.643rem + 0.95vw, 1.5rem);
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	font-weight: var(--fw-lg);
}
.service-price__noteArea > *:not(:last-child){
	margin-bottom: clamp(1rem, 0.643rem + 0.95vw, 1.5rem);
}

/*===============================
* リスト
* =================================*/
.service-price__list:not(:last-of-type){
	margin-bottom: 2rem;
}
.service-price__list{
	--list-fz: clamp(1.4rem, 1.15rem + 0.67vw, 1.75rem);
	--list-lh: 1.6;
	font-weight: var(--fw-lg);
}
.service-price__list.--main{
	--list-fz: clamp(1.75rem, 1.214rem + 1.43vw, 2.5rem);
}
/* リスト */
.service-price__list li:not(:last-of-type){
	margin-bottom: clamp(1.5rem, 1.143rem + 0.95vw, 2rem);
}
.service-price__list li{
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem 1em;
	padding-left: 1em;
	font-size: var(--list-fz);
	line-height: var(--list-lh);
}
/* ・マーク */
.service-price__list li::before{
	position: absolute;
	top: calc( (var(--list-fz) * var(--list-lh)) / 2 );
	left: .5em;
	transform: translate(-50%, -50%);
}
/* ※印リスト */
.service-price__list li:not(.--note)::before{
	content: "";
	width: .25em;
	min-width: .25em;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--c-dark);
}
.service-price__list li.--note::before{
	content: "※";
}
/* アイコン無し */
.service-price__list li.--noicon{
	padding-left: 0;
}
.service-price__list li.--noicon::before{
	content: none;
}

.service-price__name > span:not(:first-of-type){
	font-size: clamp(1.25rem, 1.071rem + 0.48vw, 1.5rem);
}
.service-price__name > *{
	display: inline-block;
}

/* 金額 */
.service-price__list-number{
	margin-left: auto;
	text-align: right;
	color: var(--font-color);
}


/*===============================
* ラベル
* =================================*/
.service-price__label-outer{
	--color-light: rgba(62, 140, 19, 0.2);
	--color-dark: var(--c-green--dark);
}
:is(.yuigon) .service-price__label-outer{
	--color-light: rgba(220, 124, 16, 0.2);
	--color-dark: var(--c-act01--dark);
}
.service-price__label:not(:last-child){
	margin-bottom: 1em;
}
.service-price__label{
	--count: 1;
	--gap: clamp(1rem, 0.821rem + 0.48vw, 1.25rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 768px){
	.service-price__label{
		--count: 2;
	}
}

.service-price__label-item{
	display: flex;
    flex-direction: column;
	flex-grow: 1;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	border: 2px solid var(--color-dark);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	font-weight: var(--fw-lg);
}
.service-price__label-top, .service-price__label-bottom{
	display: flex;
}
.service-price__label-top{
	flex-grow: 1;
	border-bottom: 2px solid var(--color-dark);
}

.service-price__label-head, .service-price__label-body{
	padding: clamp(0.875rem, 0.696rem + 0.48vw, 1.125rem);
	align-content: center;
}
.service-price__label-head{
	width: 8.5rem;
	min-width: 8.5rem;
	text-align: center;
	background: var(--color-light);
	color: var(--color-dark);
}
.service-price__label-body{
	flex-grow: 1;
	background: var(--c-light);
}

.service-price__label-message{
	font-weight: var(--fw-lg);
	color: var(--color-dark);
}

/*===============================
* ボタン型アコーディオン
* =================================*/
.service-price__accordion{
	--gap: .25em;
	--current-color: var(--c-light);
	display: block;
	width: 100%;
}

/* 質問 */
.service-price__accordion-head{
	display: flex;
	gap: var(--gap);
	margin-inline: auto;
	padding: clamp(1rem, 0.643rem + 0.95vw, 1.5rem) calc(var(--icon-size) + 0.4em * 1);
}
/* アニメーション */
.service-price__accordion[open] .service-price__accordion-head{
	margin-bottom: var(--g-sec--sm);
}
.service-price__accordion-headInner{
	flex-grow: 1;
}

/* 回答 */
.service-price__accordion-body{
	display: flex;
	gap: var(--gap);
	margin-top: var(--g-20);
}
/* アニメーション */
.service-price__accordion[open] .service-price__accordion-body {
	animation: fadein 0.5s ease;
}
@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.service-price__accordion-bodyInner{
	flex-grow: 1;
}

/* 開閉アイコン */
.service-price__accordion-toggle{
	--toggle-size: .75em;
	--toggle-weight: 2px;
	position: relative;
	display: inline-block;
	align-self: center;
	margin-left: var(--gap);
	width: var(--toggle-size);
	min-width: var(--toggle-size);
	aspect-ratio: 1;
}
.service-price__accordion-toggle::before,
.service-price__accordion-toggle::after{
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	width: var(--toggle-size);
	height: var(--toggle-weight);
	background: var(--current-color);
	transition: var(--ani-t--normal) ease-out;
}
.service-price__accordion-toggle::before{transform: translate(-50%, -50%) rotate(90deg);}
.service-price__accordion-toggle::after{transform: translate(-50%, -50%) rotate(0deg);}

/* アニメーション */
.service-price__accordion[open] .service-price__accordion-toggle::before{transform: translate(-50%, -50%) rotate(180deg);}
.service-price__accordion[open] .service-price__accordion-toggle::after{
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 既存のマーカー */
.service-price__accordion-head {
	list-style: none;
}
.service-price__accordion-head::-webkit-details-marker {
	display: none;
}

