@charset "UTF-8";

/* 共通 */

.title-col {
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
	margin-top: 134px;
	max-width: 1168px;
}

.title-col::after {
	content: "";
	position: absolute;
	top: -409px;
	right: -316px;
	background: url(../img/circle-g.webp) no-repeat;
	background-size: contain;
	width: 852px;
	height: 827px;
	z-index: -1;
}

.title-col h1 {
	background: linear-gradient(90deg, #619E14 0%, #C8C82E 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: flex;
	flex-flow: column;
	flex-shrink: 0;
	font-size: 50px;
	line-height: 1;
	letter-spacing: .08em;
	max-width: max-content;
}

.title-col h1 br.adjust {
	display: none;
}

.title-col span {
	line-height: 1;
}

.title-col svg {
	margin-top: 25px;
}

.anchor {
	margin: 38px auto 20px;
	width: 90%;
	max-width: 1168px;
}

.anchor span {
	color: #508F02;
}

.anchor .col {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 28px;
}

.anchor .col .adjust {
	max-width: 768px;
}

.anchor .btn {
	background: linear-gradient(to right, #F8F846, #A1C574);
	border-radius: 10px;
	display: block;
	padding: 2px;
	width: max-content;
	transition: .3s;
}

.anchor .btn a {
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
	color: #508F02;
	display: inline-block;
	padding: 12px 90px;
	transition: .3s;
}

.anchor .btn a span {
	padding-left: 18px;
	position: relative;
}

.anchor .btn a span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #508F02;
	border-radius: 50%;
	width: 8px;
	height: 8px;
}

.anchor .btn:hover {
	background: url(../img/noise-btn.webp);
	background-size: contain;
}

.anchor .btn:hover a {
	background: transparent;
}

.anchor .btn:hover a span {
	color: #fff;
}

.anchor .btn:hover a span::before {
	background: #fff;
}

.anchor-links {
	border-bottom: 1px solid #508F02;
	display: flex;
	gap: 10px 20px;
	flex-wrap: wrap;
	padding-bottom: 13px;
	margin-top: 38px;
}

.anchor-links a {
	color: #508F02;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.68;
	padding-right: 28px;
	position: relative;
	max-width: max-content;
}

.anchor-links a::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 0;
	background: url(../img/anchor.svg) no-repeat;
	background-size: contain;
	width: 23px;
	height: 23px;
	transition: .3s;
}

.anchor-links .btn a::after {
	content: none;
}

.anchor-links a:hover::after {
	background: url(../img/anchor-hover.svg) no-repeat;
	background-size: contain;
}

section h2 {
	color: #508F02;
	display: flex;
	flex-flow: column;
	position: relative;
	padding-left: 28px;
}

section h2 span {
	line-height: 1 !important;
}

section h2::before {
	content: "";
	background: linear-gradient(180deg, #A8D66D 0%, #F8F846 100%);
	border-radius: 18px 18px 0 0;
	position: absolute;
	left: 0;
	width: 18px;
	height: 35px;
}

.section-wrap {
	margin: 0 auto;
	width: 90%;
	max-width: 1168px;
}

.section-wrap section {
	display: flex;
	align-items: flex-end;
	gap: 56px;
	padding-top: 80px;
	position: relative;
}

.section-wrap section:nth-child(even) {
	flex-flow: row-reverse;
}

.section-wrap section img {
	flex-shrink: 0;
	width: 100%;
	max-width: 344px;
}

.section-wrap section>div {
	width: 100%;
	max-width: 768px;
}

.section-wrap section p {
	background: #fff;
	border-radius: 20px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 2.5;
	margin-top: 40px;
	position: relative;
	width: 100%;
}

.section-wrap section p:first-child {
	margin-top: 56px;
}

.section-wrap section p span {
	color: #508F02;
}

.section-wrap section p.problem {
	padding: 26px 80px 22px 48px;
}

.section-wrap section p.problem::after {
	content: "";
	position: absolute;
	top: -13px;
	left: 0;
	background: url(../img/problem-text.svg) no-repeat;
	background-size: contain;
	width: 104px;
	height: 36px;
}

.section-wrap section p.service {
	padding: 38px 48px 34px 48px;
}

.section-wrap section p.service::after {
	content: "";
	position: absolute;
	top: -13px;
	left: 0;
	background: url(../img/service-text.svg) no-repeat;
	background-size: contain;
	width: 126px;
	height: 36px;
}

/* 税務サービス */

.section-wrap section#audit::after {
	content: "";
	position: absolute;
	top: 80px;
	left: -563px;
	background: url(../img/circle-y.webp) no-repeat;
	background-size: contain;
	width: 1162px;
	height: 1128px;
	z-index: -1;
}

.section-wrap section#advice img {
	margin-bottom: 33px;
}

.section-wrap section#advice::after {
	content: "";
	position: absolute;
	bottom: -336px;
	right: -364px;
	background: url(../img/circle-g.webp) no-repeat;
	background-size: contain;
	width: 618px;
	height: 600px;
	z-index: -1;
}

.section-wrap section#option {
	align-items: center;
}

.section-wrap section#option::after {
	content: "";
	position: absolute;
	bottom: -855px;
	left: -780px;
	background: url(../img/circle-y.webp) no-repeat;
	background-size: contain;
	width: 948px;
	height: 920px;
	z-index: -1;
}

/* 事業継承 */

.section-wrap section#succession,
.section-wrap section#inheritance {
	align-items: flex-start;
}

.section-wrap section#succession img {
	margin-top: 96px;
}

.section-wrap section#succession::after {
	content: "";
	position: absolute;
	top: -191px;
	left: -641px;
	background: url(../img/circle-y.webp) no-repeat;
	background-size: contain;
	width: 1162px;
	height: 1128px;
	z-index: -1;
}

.section-wrap section#inheritance img {
	margin-top: 128px;
}

.section-wrap section#inheritance::after {
	content: "";
	position: absolute;
	bottom: -523px;
	right: -286px;
	background: url(../img/circle-g.webp) no-repeat;
	background-size: contain;
	width: 618px;
	height: 600px;
	z-index: -1;
}

.section-wrap section#simulation img {
	margin-bottom: 27px;
}

.section-wrap section#will img {
	max-width: 200px;
}

.section-wrap section#will::after {
	content: "";
	position: absolute;
	bottom: -905px;
	left: -780px;
	background: url(../img/circle-y.webp) no-repeat;
	background-size: contain;
	width: 940px;
	height: 920px;
	z-index: -1;
}

.flow {
	position: relative;
	margin: 150px auto 200px;
	width: 90%;
	max-width: 1008px;
}

.flow ol {
	counter-reset: counter;
}

.flow ol > li {
	counter-increment: counter;
	background: #fff;
	border-radius: 50px;
	display: flex;
	align-items: center;
	gap: 102px;
	padding: 36px 40px 48px;
	position: relative;
	margin-top: 32px;
}

.flow ol > li:first-child {
	margin-top: 53px;
}

.flow ol > li h3::before {
	content: counter(counter);
	background: linear-gradient(180deg, #9BCA5F 0%, #F1F12B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 50px;
	font-weight: bold;
	line-height: 1;
}

.flow ol > li::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -21px;
	background: url(../img/succession/arrow.svg) no-repeat;
	width: 56px;
	height: 21px;
}

.flow ol > li:last-child::after {
	content: none;
}

.flow h2 {
	margin: 0 auto;
    max-width: max-content;
}

.flow h2::before {
	height: 46px;
}

.flow h3 {
	box-sizing: border-box;
	color: #508F02;
	display: flex;
	align-items: center;
	gap: 34px;
	position: relative;
	white-space: nowrap;
	min-width: 378px;
}

.flow div {
	display: flex;
    flex-flow: column;
    justify-content: center;
	position: relative;
	min-height: calc(1em * 1.7 * 2);
}

.flow div::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80px;
	background: #A1C574;
	width: 1px;
	height: 100%;
}

.flow p span {
	color: #FF4613;
}

.flow strong {
	background: #FF6137;
	border-radius: 10px;
	box-sizing: border-box;
	color: #fff;
	display: block;
	font-weight: normal;
	padding: 3px 7px;
	margin: 3px 0 7px;
	max-width: max-content;
}

/* DX */
.section-wrap section#paperless img {
	max-width: 233px;
}

.section-wrap section#paperless::after {
	content: "";
	position: absolute;
	top: -60px;
	left: -641px;
	background: url(../img/circle-y.webp) no-repeat;
	background-size: contain;
	width: 1162px;
	height: 1128px;
	z-index: -1;
}

.section-wrap section#generation::after {
	content: "";
	position: absolute;
	top: 77px;
	right: -286px;
	background: url(../img/circle-g.webp) no-repeat;
	background-size: contain;
	width: 618px;
	height: 600px;
	z-index: -1;
}

.section-wrap section#start-up img {
	margin-bottom: 33px;
}

.section-wrap section#electronic img {
	margin-bottom: 40px;
}

.section-wrap section.adjust {
	margin-bottom: 200px;
}

/* 料金 */
.fee {
	position: relative;
	padding-top: 80px;
	margin: 70px auto 200px;
	width: 90%;
	max-width: 848px;
}

.fee::after {
	content: "";
	position: absolute;
	bottom: -275px;
	right: -516px;
	background: url(../img/circle-g.webp) no-repeat;
	background-size: contain;
	width: 487px;
	height: 472px;
	z-index: -1;
}

.fee>div {
	background: #508F02;
	border-radius: 50px;
	box-sizing: border-box;
	margin-top: 30px;
	padding: 40px 48px 48px;
	position: relative;
	text-align: center;
}

.fee h2 {
	margin: 0 auto;
	max-width: max-content;
}

.fee h2::before {
	height: 46px;
}

.fee h3 {
	color: #fff;
	font-weight: 500;
	margin-top: 48px;
}

.fee h3:first-child {
	margin: 0;
}

.fee .unit {
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	position: absolute;
	top: 46px;
	right: 38px;
}

.fee .pc {
	display: table;
}

.fee table {
	color: #508F02;
	border: 1px solid #508F02;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 20px;
	overflow: hidden;
	table-layout: fixed;
	margin-top: 16px;
	width: 100%;
}

.fee table th,
.fee table td {
	border-bottom: 1px solid #508F02;
	border-left: 1px solid #508F02;
}

.fee table tr:first-child th {
	height: 160px;
}

.fee table tr:last-child th,
.fee table tr:last-child td {
	border-bottom: none;
}

.fee table tr th:first-child,
.fee table tr td:first-child {
	border-left: none;
	box-sizing: border-box;
	width: 288px;
}

.fee table th {
	background: #DFEAD2;
	font-weight: 500;
	padding: 19px 14px;
}

.fee table td {
	background: #fff;
	padding: 18px 17px;
}

.fee br.adjust {
	display: none;
}

/* 事業継承 料金 */

.fee.succession-fee {
	margin: 20px auto 0;
}

.succession-fee th[rowspan] {
	border-right: 1px solid #508F02;
	border-bottom: none;
}

.succession-fee td.adjust {
	border-left: none;
}

/* タブレット */
@media screen and (max-width: 1140px) {

	/* 共通 tab */

	.title-col h1 br.adjust {
		display: block;
	}
	.title-col::after {
		top: -287px;
		right: -231px;
		width: 638px;
		height: 619px;
	}

	.anchor {
		margin-top: 28px;
	}

	.anchor .col p {
		line-height: 1.68;
	}

	.anchor-links {
		margin-top: 28px;
	}

	.section-wrap section,
	.section-wrap section:nth-child(even) {
		align-items: center !important;
		flex-flow: column-reverse;
		gap: 40px;
	}

	.section-wrap section p.problem {
		padding: 26px 1em 26px 48px;
	}

	.section-wrap section p.service {
		padding: 38px 17px 34px 48px;
	}

	.section-wrap section img {
		margin: 0 !important;
	}

	/* 税務サービス tab */
	.section-wrap section#audit::after {
		top: 266px;
		left: -474px;
		width: 787px;
		height: 764px;
	}

	.section-wrap section#advice::after {
		bottom: auto;
		top: -353px;
		right: -249px;
	}

	.section-wrap section#option::after {
		bottom: auto;
		top: -346px;
		left: -334px;
		width: 680px;
		height: 660px;
	}

	/* 事業継承 tab */

	.flow {
		margin: 100px auto 280px;
	}

	.flow br.adjust {
		display: none;
	}

	.flow ol > li {
		flex-flow: column;
		gap: 28px;
		padding: 13px 60px 37px;
	}

	.flow h3 {
		flex-flow: column;
		gap: 7px;
	}

	.flow div {
		width: 100%;
	}

	.flow div::after {
		top: -14px;
		left: 0;
		width: 100%;
		height: 1px;
	}

	/* 料金 tab */
	.fee {
		margin: 20px auto 280px;
	}

	.fee::after {
		bottom: -72px;
		right: -298px;
		width: 638px;
		height: 619px;
	}

	.fee .pc {
		display: none;
	}

	.fee .sp {
		display: table !important;
	}

	.fee>div {
		border-radius: 30px;
		padding: 23px 40px 43px;
	}

	.fee .unit {
		position: relative;
		top: auto;
		right: auto;
	}

	.fee h3 {
		margin: 40px auto;
	}

	.fee table {
		margin-top: 18px;
	}

	.fee table tr th:first-child,
	.fee table tr td:first-child {
		width: auto;
	}

	.fee table tr td[rowspan] {
		border-bottom: none;
	}

	.fee table th,
	.fee table td {
		padding: 12px 14px;
	}

	.fee.succession-fee table tr:first-child th,
	.fee.succession-fee table th {
		height: 64px;
		padding: 0;
	}
}

/* sp */
@media screen and (max-width: 767px) {

	/* 共通 sp */

	.title-col h1 {
		font-size: 30px;
		letter-spacing: .08em;
		line-height: 1.2;
	}
	
	.title-col::after {
		top: -90px;
		right: -58px;
		width: 244px;
		height: 237px;
	}

	.anchor-links {
		flex-flow: column;
		padding-bottom: 26px;
	}

	.anchor .btn {
		margin-top: 20px;
	}

	.section-wrap section,
	.section-wrap section:nth-child(even) {
		padding-top: 75px;
		gap: 32px;
	}

	.section-wrap section p {
		line-height: 1.68;
	}

	.section-wrap section p.problem {
		padding: 26px 24px 21px 30px;
	}

	.section-wrap section p.service {
		padding: 30px 24px 19px 30px;
	}

	.section-wrap section img {
		width: 80%;
	}

	/* 税務サービス sp */
	.section-wrap section#audit::after {
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		top: auto;
		bottom: -86px;
		left: -62px;
		width: 205px;
		height: 200px;
	}

	.section-wrap section#in-house::after {
		content: "";
		position: absolute;
		bottom: 130px;
		right: -118px;
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		width: 244px;
		height: 237px;
		z-index: -1;
	}

	.section-wrap section#tax img {
		max-width: 220px;
	}

	.section-wrap section#tax::after {
		content: "";
		position: absolute;
		top: 222px;
		left: -72px;
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		width: 205px;
		height: 200px;
		z-index: -1;
	}

	.section-wrap section#advice::after {
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		top: 89px;
		right: -122px;
		width: 244px;
		height: 237px;
	}

	.section-wrap section#expert::after {
		content: "";
		position: absolute;
		top: -33px;
		left: -58px;
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		width: 205px;
		height: 200px;
		z-index: -1;
	}

	.section-wrap section#option img {
		max-width: 210px;
	}

	.section-wrap section#option::after {
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		top: auto;
		bottom: -124px;
		left: -68px;
		width: 205px;
		height: 200px;
	}

	/* 事業継承 sp */

	.section-wrap section#succession img {
		max-width: 270px;
	}

	.section-wrap section#succession::after {
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		top: 166px;
		left: -58px;
		width: 205px;
		height: 200px;
	}

	.section-wrap section#succession::before {
		content: "";
		position: absolute;
		bottom: 232px;
		right: -131px;
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		width: 244px;
		height: 237px;
	}

	.section-wrap section#inheritance::after {
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		right: auto;
		bottom: auto;
		top: 151px;
		left: -48px;
		width: 205px;
		height: 200px;
	}

	.section-wrap section#inheritance::before {
		content: "";
		position: absolute;
		bottom: 60px;
		right: -121px;
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		width: 244px;
		height: 237px;
	}

	.section-wrap section#simulation::after {
		content: "";
		position: absolute;
		top: 416px;
		left: -58px;
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		width: 205px;
		height: 200px;
		z-index: -1;
	}

	.section-wrap section#will::before {
		content: "";
		position: absolute;
		top: 218px;
		right: -131px;
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		width: 244px;
		height: 237px;
	}

	.section-wrap section#will::after {
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		bottom: -280px;
		left: -48px;
		width: 205px;
		height: 200px;
	}

	.flow ol > li:nth-of-type(2):before {
		content: "";
		position: absolute;
		top: 62px;
		right: -141px;
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		width: 244px;
		height: 237px;
		z-index: -1;
	}

	.flow ol > li:nth-of-type(5):before {
		content: "";
		position: absolute;
		top: -38px;
		left: -62px;
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		width: 205px;
		height: 200px;
		z-index: -1;
	}

	/* DX sp */

	.section-wrap section#paperless img {
		max-width: 190px;
	}

	.section-wrap section#paperless::after {
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		top: auto;
		bottom: 191px;
		left: -62px;
		width: 205px;
		height: 200px;
	}

	.section-wrap section#start-up img {
		max-width: 280px;
	}

	.section-wrap section#start-up::after {
		content: "";
		position: absolute;
		top: 237px;
		right: -115px;
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		width: 244px;
		height: 237px;
		z-index: -1;
	}

	.section-wrap section#electronic::after {
		content: "";
		position: absolute;
		top: 58px;
		left: -65px;
		background: url(../img/circle-g.webp) no-repeat;
		background-size: contain;
		width: 205px;
		height: 200px;
		z-index: -1;
	}

	.section-wrap section#generation img {
		max-width: 230px;
	}

	.section-wrap section#generation::after {
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		top: -80px;
		right: -121px;
		width: 244px;
		height: 237px;
	}

	/* 料金 sp */

	.fee::after {
		background: url(../img/circle-y.webp) no-repeat;
		background-size: contain;
		bottom: auto;
		top: 614px;
		right: -94px;
		width: 244px;
		height: 237px;
	}

	.fee br.adjust {
		display: block;
	}

	.fee>div {
		padding: 23px 16px 16px;
	}

	.fee table th {
		padding: 11px 0;
	}

	.fee table td {
		padding: 22px 0;
	}

	.fee table tr th:first-child {
		white-space: nowrap;
		width: 88px;
	}
}