@charset "utf-8";

/* -------------------------------------------------- */
/* PC*/
/* -------------------------------------------------- */
#serviceTop {
	padding-top: 80px;
	padding-bottom: 30px;
	position: relative;
}

.serviceTopBg {
	position: absolute;
}

#serviceTopBg01 {
	top: 30%;
	left: 0;
}

#serviceTop .inner {
	position: relative;
}

#serviceList {
	display: flex;
	flex-direction: column;
	row-gap: 70px;
}

.serviceListItem a {
	padding: 40px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 50px;
	background: linear-gradient(to right, #fbf4fd 0 calc(100% - 76px), transparent calc(100% - 76px) 100%),
		linear-gradient(to bottom, #fbf4fd 0 calc(100% - 79px), transparent calc(100% - 79px) 100%);
	border-radius: 25px;
}

.serviceListItem a::after {
	content: "";
	width: 76px;
	height: 79px;
	position: absolute;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: right 1px bottom 3px, left top;
	background-size: 48px, contain;
	background-image: url(../../img/common/icon_arrow_circle.svg), url(../../img/common/link_deco_corner.svg);
	z-index: -1;
}

.serviceListImg {
	width: 260px;
	border-radius: 15px;
	overflow: hidden;
}

.serviceListImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

.serviceListContent {
	width: calc(100% - 260px - 50px);
}

.serviceListBottom {
	width: 100%;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid #efe4ee;
}

.serviceListTitle {
	margin-bottom: 15px;
	font-size: 2.8rem;
	font-weight: 700;
	font-family: "Zen Maru Gothic", serif;
}

.serviceListTitleLabel {
	width: 90px;
	height: 90px;
	margin-right: 20px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 1.6rem;
	color: #ab61a7;
	background-color: #ffffff;
	border: 1px solid #ab61a7;
	border-radius: 50%;
}

.serviceListTextList {
	width: fit-content;
}

.serviceListTextList.col2 {
	column-count: 2;
	column-gap: 20px;
}

.serviceListTextList.col3 {
	column-count: 3;
	column-gap: 70px;
}

.serviceListTextList li {
	padding-left: 1em;
	font-size: 1.6rem;
	line-height: 1.8;
	text-indent: -1em;
}

.serviceListItem:nth-child(1) .serviceListTitle {
	display: flex;
	align-items: center;
}

/* サービスページ 共通パーツ
------------------------------------ */
/* 〇〇とは？ */
.serviceAboutWrap {
	display: flex;
	gap: 40px;
}

.serviceAboutContent {
	flex-grow: 1;
}

.serviceAboutText {
	line-height: 1.89;
}

.serviceAboutText.list {
	padding-block: 12px;
}

.serviceAboutText.list li {
	position: relative;
	padding-left: 1em;
	font-weight: 700;
	line-height: 1.56;
}

.serviceAboutText.list li + li {
	margin-top: 0.3em;
}

.serviceAboutText.list li::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	position: absolute;
	top: 0.5em;
	left: 0;
	background-color: #ab61a7;
	border-radius: 50%;
}

.serviceAboutImg {
	width: 40.5%;
	text-align: center;
	flex-shrink: 0;
}

/* メリット */
.serviceMerit {
	padding-top: 70px;
}

.serviceMeritList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
}

.serviceMeritListItem {
	padding: 20px 25px 30px;
	background-color: #ffffff;
	border-radius: 20px;
}

.serviceMeritList.col3 .serviceMeritListItem {
	width: 31%;
}

.serviceMeritList.col4 .serviceMeritListItem {
	width: 22.7%;
	padding-inline: 10px;
}

.serviceMeritListLabel {
	width: 77px;
	height: 77px;
	margin: 0 auto 15px;
	padding-top: 18px;
	font-size: 1.6rem;
	font-weight: 700;
	font-family: "Zen Maru Gothic", serif;
	letter-spacing: -0.15em;
	line-height: 1.2;
	text-align: center;
	color: #ffffff;
	background-color: #ab61a7;
	border-radius: 50%;
}

.serviceMeritListLabel .num {
	display: block;
	font-size: 1.375em;
	font-weight: 400;
	font-family: "Oswald", sans-serif;
	letter-spacing: 0;
}

.serviceMeritListText {
	font-size: 1.6rem;
	line-height: 1.625;
}

.serviceMeritListText.center {
	text-align: center;
}

.serviceMeritListText .textLg {
	font-size: 2.3rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.8;
	background-image: linear-gradient(#efe0ee, #efe0ee);
	background-size: 100% 30%;
	background-position: 0 100%;
	background-repeat: no-repeat;
}

.serviceMeritListText .textMd {
	font-size: 2rem;
}

/* 料金案内 */
.servicePrice {
	padding-top: 70px;
}

.servicePrice .priceCaption {
	bottom: calc(100% + 15px);
}

/* その他の業務 */
.serviceOtherBox {
	margin-top: 80px;
	border-radius: 20px;
	overflow: hidden;
}

.serviceOtherBoxTitle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 25px;
	font-size: 2.2rem;
	font-family: "Zen Maru Gothic", serif;
	background-color: #fef290;
}

.serviceOtherBoxTitle::before {
	content: "";
	width: 100px;
	height: 90px;
	margin-top: auto;
	flex-shrink: 0;
	display: inline-block;
	background: url(../../img/service/company_other_illust.png) no-repeat center top 18px / 100px;
}

.serviceOtherBoxContent {
	padding: 30px 20px;
	background-color: #ffffff;
}

.serviceOtherBoxText {
	width: fit-content;
	margin-inline: auto;
}

.serviceOtherBoxText.col2 {
	column-count: 2;
	column-gap: 80px;
}

.serviceOtherBoxText li + li {
	margin-top: 0.4em;
}

/* 家族信託
------------------------------------ */
#serviceFamily {
	padding-top: 290px;
	position: relative;
	background-image: url(../../img/common/section_deco_top-wave.png), linear-gradient(to bottom, #ffffff, #ffffff 500px, #faf7fa 500px, #faf7fa);
	background-repeat: no-repeat;
	background-position: center top, center center;
}

@media screen and (min-width: 1750px) {
	#serviceFamily {
		background-size: 100%;
	}
}

.serviceFamilyBg {
	position: absolute;
}

#serviceFamilyBg01 {
	bottom: 16%;
	right: 0;
}

#serviceFamily .inner {
	position: relative;
}

#serviceFamilyImg {
	margin-top: 30px;
	padding: 30px 30px 50px;
	text-align: center;
	background-color: #ffffff;
	border-radius: 25px;
}

/* 会社設立
------------------------------------ */
#serviceCompany {
	padding-top: 140px;
	position: relative;
	background-color: #faf7fa;
}

.serviceCompanyBg {
	position: absolute;
}

#serviceCompanyBg01 {
	bottom: 14%;
	left: 0;
}

#serviceCompany .inner {
	position: relative;
}

.serviceType {
	padding-top: 70px;
}

.serviceTypeListWrap {
	display: flex;
	justify-content: space-between;
}

.serviceTypeList {
	display: flex;
	flex-direction: column;
	row-gap: 25px;
}

.serviceTypeListItem {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 15px;
}

.serviceTypeListRequest {
	font-size: 2rem;
}

.serviceTypeListRequest span {
	display: inline-block;
}

.serviceTypeListArrow img {
	vertical-align: middle;
}

.serviceTypeListAnswer {
	width: fit-content;
	margin-left: auto;
	padding: 8px 20px;
	font-size: 2rem;
	font-weight: 700;
	font-family: "Zen Maru Gothic", serif;
	color: #fff;
	background-color: #af79ac;
	border-radius: 5px;
}

/* 建設業許可
------------------------------------ */
#serviceConstruction {
	padding-top: 140px;
	position: relative;
	background-color: #faf7fa;
}

/* その他
------------------------------------ */
#serviceOther {
	padding-top: 140px;
	padding-bottom: 40px;
	position: relative;
	background-color: #faf7fa;
}

.serviceOtherBg {
	position: absolute;
}

#serviceOtherBg01 {
	top: 14%;
	right: 0;
}

#serviceOther .inner {
	position: relative;
}

.serviceOtherItem:not(:last-child) {
	margin-bottom: 40px;
}

.serviceOtherTitle {
	margin-bottom: 15px;
	padding-bottom: 10px;
	font-size: 2rem;
	font-weight: 700;
	border-bottom: 1px solid #af79ac;
}

.serviceOtherText {
	font-size: 1.6rem;
	line-height: 1.625;
}

.serviceOtherText li {
	padding-left: 1em;
	text-indent: -1em;
}

/* ------------------------------------ */
/* ホバーエフェクト */
/* ------------------------------------ */
@media screen and (min-width: 1025px) {
	.serviceListItem a {
		transition: all 0.3s ease 0s;
	}

	.serviceListItem a:hover {
		opacity: 0.7;
	}
}

/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
	#serviceTop {
		padding-bottom: 40px;
	}

	.serviceAboutWrap {
		flex-direction: column;
		gap: 20px;
	}

	.serviceAboutImg {
		width: 100%;
		order: -1;
	}

	.serviceMeritListText .textLg {
		font-size: 2rem;
	}

	.serviceMeritListText .textMd {
		font-size: 1.7rem;
	}

	#serviceFamily {
		padding-top: 200px;
		background-image: url(../../img/common/section_deco_top-wave.png), linear-gradient(to bottom, #ffffff, #ffffff 200px, #faf7fa 200px, #faf7fa);
		background-position: center top -60px, center center;
	}

	.serviceTypeListWrap {
		flex-direction: column;
		row-gap: 25px;
	}

	#serviceTopBg01 {
		width: 26.439vw;
	}

	#serviceFamilyBg01 {
		width: 27.415vw;
	}

	#serviceCompanyBg01 {
		width: 26.341vw;
	}

	#serviceOtherBg01 {
		width: 27.512vw;
	}
}


/* -------------------------------------------------- */
/* TAB(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	#serviceList {
		row-gap: 50px;
	}

	.serviceListItem a {
		padding: 30px 25px;
		column-gap: 30px;
	}

	.serviceListImg {
		width: 240px;
	}

	.serviceListContent {
		width: calc(100% - 240px - 30px);
	}

	.serviceListTitle {
		font-size: 2.6rem;
	}

	.serviceListTextList.col3 {
		column-gap: 30px;
	}

	.serviceListTextList li {
		font-size: 1.4rem;
	}

}

/* -------------------------------------------------- */
/* SP(調整) */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
	#serviceTop {
		padding-top: 40px;
	}

	#serviceList {
		row-gap: 40px;
	}

	.serviceListItem a {
		padding: 20px;
		flex-direction: column;
		row-gap: 20px;
		background: linear-gradient(to right, #fbf4fd 0 calc(100% - 60px), transparent calc(100% - 60px) 100%),
			linear-gradient(to bottom, #fbf4fd 0 calc(100% - 62px), transparent calc(100% - 62px) 100%);
	}

	.serviceListItem a::after {
		width: 60px;
		height: 62px;
		background-size: 36px, contain;
	}
	.serviceListImg {
		width: 100%;
	}

	.serviceListContent {
		width: 100%;
	}

	.serviceListTitle {
		font-size: 2.3rem;
		line-height: 1.3;
	}

	.serviceListTitleLabel {
		width: 60px;
		height: 60px;
		margin-right: 10px;
		display: flex;
		font-size: 1.2rem;
	}

	.serviceListBottom {
		margin-top: 0;
	}

	.serviceListTextList.col2,
	.serviceListTextList.col3 {
		column-count: auto;
	}

	.serviceListTextList li {
		font-size: 1.5rem;
	}

	/* サービスページ 共通パーツ
	------------------------------------ */
	/* メリット */
	.serviceMerit {
		padding-top: 50px;
	}

	.serviceMeritList.col3 .serviceMeritListItem {
		width: 100%;
	}

	.serviceMeritList.col4 .serviceMeritListItem {
		width: 48%;
	}

	.serviceMeritListLabel {
		width: 60px;
		height: 60px;
		margin-bottom: 10px;
		font-size: 1.2rem;
		padding-top: 15px;
	}

	.serviceMeritListText {
		font-size: 1.5rem;
	}

	/* 料金案内 */
	.servicePrice {
		padding-top: 50px;
	}

	/* その他の業務 */
	.serviceOtherBox {
		margin-top: 50px;
		border-radius: 15px;
	}

	.serviceOtherBoxTitle {
		padding-right: 20px;
		padding-left: 10px;
		gap: 20px;
		font-size: 1.8rem;
	}

	.serviceOtherBoxTitle::before {
		width: 80px;
		height: 80px;
		background-position: center top 20px;
		background-size: 80px;
	}

	.serviceOtherBoxContent {
		padding: 20px;
	}

	.serviceOtherBoxText {
		width: auto;
	}

	.serviceOtherBoxText.col2 {
		column-count: auto;
	}

	/* 家族信託
	------------------------------------ */
	#serviceFamily {
		padding-top: 100px;
		background-size: 100%;
		background-position: center top 0px, center center;
		background-image: url(../../img/common/section_deco_top-wave.png), linear-gradient(to bottom, #ffffff, #ffffff 13.333vw, #faf7fa 13.333vw, #faf7fa);
	}

	.serviceAboutText {
		text-align: justify;
	}

	#serviceFamilyImg {
		margin-top: 20px;
		padding: 15px 15px 20px;
		border-radius: 20px;
	}

	/* 会社設立
	------------------------------------ */
	#serviceCompany {
		padding-top: 80px;
	}

	.serviceType {
		padding-top: 50px;
	}

	.serviceTypeListWrap {
		row-gap: 15px;
	}

	.serviceTypeList {
		row-gap: 15px;
	}

	.serviceTypeListItem {
		gap: 10px;
	}

	.serviceTypeListRequest {
		font-size: 1.5rem;
	}

	.serviceTypeListArrow {
		width: 15px;
	}

	.serviceTypeListAnswer {
		padding: 6px 8px;
		font-size: 1.5rem;
		letter-spacing: -0.025em;
	}

	/* 建設業許可
	------------------------------------ */
	#serviceConstruction {
		padding-top: 80px;
	}

	/* その他
	------------------------------------ */
	#serviceOther {
		padding-top: 80px;
		padding-bottom: 0;
	}

	.serviceOtherItem:not(:last-child) {
		margin-bottom: 30px;
	}

	.serviceOtherTitle {
		margin-bottom: 10px;
		padding-bottom: 8px;
		font-size: 1.8rem;
	}

	.serviceOtherText {
		font-size: 1.5rem;
	}
}