@charset "utf-8";
:root {
	--black: #343434;
	--gray-700: #949494;
	--gray-900: #7A7A7A;
	--white: #FFF;
	--blue-50: #F0F8FF;
	--blue-200: #C0DDF9;
	--blue-300: #A8D1F7;
	--blue-600: #60A9EE;
	--blue-700: #408CD4;
	--blue-900: #00529F;
	--text-grad: linear-gradient(95deg, #00529F -0.02%, #60A9EE 49.98%, #4296E5 99.98%);
	--hover-grad: linear-gradient(95deg, var(--blue-700) -0.02%, var(--blue-300) 49.98%, var(--blue-600) 99.98%);
	--light-green:#D5FAFF;
}

.soukanzu {
	padding:clamp(20px, 5.3vw, 40px);
}

.soukanzu__wrap {
	border: 1px solid var(--blue-200);
	padding: clamp(12px, 3.2vw, 24.5px);
}

.service-group {
	border: 1px solid var(--blue-600);
	background: var(--blue-50);
	padding: clamp(12px, 3.2vw, 24.5px);
}

.service-group__title {
	font-size: clamp(18px, 4.8vw, 36px);
	font-weight: 700;
	color: var(--blue-900);
	line-height: 1.3;
	text-align: center;
	padding-bottom: clamp(8px, 2.1vw, 16px);
}

.service {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: clamp(8px, 2.1vw, 16px);
	background: var(--white);
	border: 1px solid var(--blue-600);
	padding: clamp(12px, 3.2vw, 24.5px);
	position: relative;
}

.service__logo {
	width: 100%;
}

.service__logo img {
	width: 100%;
}

.service__text {
	font-size: clamp(12px, 3.2vw, 24px);
}

.staff-link {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(8px, 2.1vw, 16px);
	color: var(--blue-900);
}

.staff-link__img {
	width: clamp(56px, 15vw, 114px);
	aspect-ratio: 1 / 1;
	position: relative;
}

.staff-link__img img {
	width: 100%;
	border-radius: 50%;
}

.staff-link__img::before {
	content: "";
	background: url(/img/soukanzu/external-link-icon_round.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: clamp(20px, 5.3vw, 40px);
	height: clamp(20px, 5.3vw, 40px);
	vertical-align: middle;
	position: absolute;
	top: -0.2em;
	right: -0.2em;
}

.staff-link__text {
	font-size: clamp(12px, 3.2vw, 24px);
}

.konkatsu-sub-group1 {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 2.1vw, 16px);
	padding-bottom: clamp(20px, 5.3vw, 40px);
	border-bottom: 1px solid var(--blue-600);
}

.konkatsu-sub-group2 {
	display: flex;
	flex-direction: column;
	padding-top: clamp(20px, 5.3vw, 40px);
}

.service--small {
	flex-direction: row;
	align-items: center;
}

.service--small .service__logo {
	width: 50%;
}

.service__name {
	font-size: clamp(16px, 4.2vw, 32px);
	line-height: 1.3;
	font-weight: 700;
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.service__sub-name {
	line-height: 1.3;
	font-weight: 700;
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: clamp(8px, 2.1vw, 16px);
	padding-top: clamp(16px, 4.2vw, 32px);
	border-top: 1px solid var(--blue-600);
	width: 100%;
	text-align: center;
}

.service__text--left-align {
	width: 100%;
}

.tyokuei-sub-group .service--small {
	border-top: none;
}

.service--small .service__logo {
	flex: 0.9;
}

.service--small .service__text {
	flex: 1.1;
}

.flow {
	display: block;
	position: relative;
	height: clamp(40px, 10.6vw, 80px);
	width: 2px;
	margin: 0 auto;
	background-color: var(--blue-600);
}

.flow--up::before {
	display: block;
	content: "";
	width: 0.6em;
	height: 0.4em;
	background-color: var(--blue-600);
	clip-path: polygon(50% 0%, 0% 0.4em, 0.6em 0.4em);
	position: absolute;
	top: 0;
	left: 50%;
  transform: translateX(-50%);
}

.flow--down::after {
	display: block;
	content: "";
	width: 0.6em;
	height: 0.4em;
	background-color: var(--blue-600);
	clip-path: polygon(50% 0.4em, 0% 0%, 0.6em 0%);
	position: absolute;
	bottom: 0;
	left: 50%;
  transform: translateX(-50%);
}

.flow-pc {
	display: none;
}

.flow--long {
	height: auto;
	margin: 0;
}

.mid-point {
	display: flex;
	gap: clamp(20px, 5.3vw, 40px);
}

.married-couple {
	flex: 1;
	position: relative;
}

.married-couple img {
	width: 100%;
	border: 1px solid var(--blue-600);
	border-radius: 50%;
	position: relative;
	z-index: 2;
	margin-top: clamp(40px, 10.6vw, 80px);
}

.functional-group {
	flex: 3;
}

.functional-group .service__name {
	padding: clamp(8px, 2.1vw, 16px) 0;
}

.service__people {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(12px, 3.2vw, 24px);
	width: 100%;
}

.to-life-design {
	display: flex;
	gap: 0.2em;
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 100%;
}

.flow-description {
	display: flex;
	color: var(--blue-600);
	padding-top: 8.5em;
	width: 2em;
}

.flow-description span {
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.life-design-group {
	background: #FAF7E0;
}

.life-design-left-column,
.life-design-right-column {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 2.1vw, 16px);
}

.life-design-left-column {
	padding-bottom: clamp(8px, 2.1vw, 16px);
}

.clerical-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, calc(50% - clamp(8px, 2.1vw, 16px) / 2));
	gap: clamp(8px, 2.1vw, 16px) 0;
	justify-content: space-between;
	background: #FAE8EC;
	margin-top: clamp(40px, 10.6vw, 80px);
}

.service__name--xsmall {
	font-size: clamp(14px, 3.7vw, 28px);
	color: var(--blue-900);
	background: none;
	-webkit-text-fill-color: var(--blue-900);
}

@media only screen and (min-width: 768px) {
	@media (hover: hover) {
		.staff-link:hover {
			color: var(--blue-600);
		}
		.staff-link:hover .staff-link__img {
			scale: 0.95;
		}
	}

	.soukanzu {
		padding: clamp(36px, 4.7vw, 90px) 0 clamp(48px, 6.4vw, 120px);
    max-width: 1920px;
    margin: 0 auto;
	}

	.soukanzu__wrap {
		padding: clamp(14.4px, 1.875vw, 36px);
	}

	.service-group {
		padding: clamp(14.4px, 1.875vw, 36px);
	}

	.service-group__title {
		font-size: clamp(24px, 3.125vw, 60px);
		padding-bottom: 0.5em;
	}

	.service {
		gap: 0.75em;
		padding: clamp(12px, 1.6vw, 30px);
		width: calc(50% - 0.5em);
	}

	.service__text {
		font-size: clamp(10px, 1.25vw, 24px);
	}

	.service__sub-name {
		font-size: clamp(12px, 1.6vw, 30px);
	}

	.staff-link {
		gap: 0.5em;
		transition: 0.5s;
	}

	.staff-link__img {
		width: clamp(48px, 6.25vw, 120px);
		transition: 0.5s;
	}

	.staff-link__img::before {
		content: "";
		background: url(/img/soukanzu/external-link-icon_round.svg) no-repeat center center;
		background-size: contain;
		display: block;
		width: 1.5em;
		height: 1.5em;
		vertical-align: middle;
		position: absolute;
		top: -0.2em;
		right: -0.2em;
	}

	.staff-link__text {
		font-size: clamp(10px, 1.25vw, 24px);
	}

	.konkatsu-sub-group1 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1em;
		padding-bottom: 1.5em;
		border-bottom: 1px solid var(--blue-600);
	}

	.konkatsu-sub-group2 {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 1em;
		padding-top: 1.5em;
	}

	.service__logo {
		display: block;
		width: 90%;
	}

	.service--small {
		flex-direction: row;
		align-items: center;
		height: fit-content;
	}

	.service--small .service__logo {
		flex: 1;
	}

	.service--small .service__logo img {
		width: 80%;
		display: block;
		margin: 0 auto;
	}

	.service__name {
		font-size: clamp(12px, 1.6vw, 30px);
	}

	.tyokuei-sub-group {
		width: calc(50% - 0.5em);
		order: 1;
		position: relative;
	}

	.tyokuei-sub-group .service {
		width: 100%;
	}

	.konkatsu-sub-group2__half {
		width: calc(50% - 0.5em);
		order: 2;
	}

	.konkatsu-sub-group2__half .service {
		width: 100%;
	}

	.flow {
		height: clamp(48px, 6.25vw, 120px);
	}

	.flow--sp {
		display: none;
	}

	.flow-horizontal {
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		width: calc(50% + 1em);
		height: 2px;
		margin-left: auto;
		background-color: var(--blue-600);
	}

	.flow-horizontal::after {
		display: block;
		content: "";
		width: 0.4em;
		height: 0.6em;
		background-color: var(--blue-600);
		clip-path: polygon(0.4em 50%, 0% 0%, 0% 0.6em);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.flow-pc {
		display: block;
	}

	.mid-point {
		gap: 1em;
	}

	.married-couple {
		flex: 1;
	}

	.married-couple img {
		width: clamp(48px, 9.4vw, 180px);
		aspect-ratio: 1 / 1;
		display: block;
		margin: clamp(36px, 4.7vw, 90px) auto 0;
	}

	.flow-description {
		padding-top: 12em;
	}

	.functional-group {
		flex: 1;
	}

	.functional-group .service {
		width: 100%;
	}

	.functional-group .service__name {
		padding: 0.5em 0;
	}

	.service__people {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.8em;
	}

	.service__people .staff-link {
		width: calc(50% - 0.8em);
		justify-content: flex-start;
	}

	.flow--long {
		height: auto;
		margin: 0;
	}

	.life-design-group__wrap {
		display: flex;
		gap: 1em;
	}

	.life-design-left-column,
	.life-design-right-column {
		width: calc(50%);
	}

	.life-design-left-column {
		padding-bottom: 0;
	}

	.life-design-group .service {
		width: 100%;
	}

	.clerical-group {
		display: grid;
		grid-template-columns: repeat(auto-fit, calc(100% / 4 - 0.75em));
		gap: 0;
		justify-content: space-between;
		background: #FAE8EC;
		margin-top: clamp(48px, 6.25vw, 120px);
	}

	.clerical-group .service {
		width: 100%;
	}

	.service__name--xsmall {
		font-size: clamp(11px, 1.4vw, 27px);
	}


}