@charset "UTF-8";

/* p-service-intro */
.p-service-intro {
	padding-inline: 50.3rem 13.3rem;
	margin-bottom: 9.5rem;
}
.p-service-intro .head {
	font-size: 2.8rem;
	line-height: 6rem;
	letter-spacing: .1em;
	margin-bottom: 6rem;
	transition: 1s all ease-in-out;
}
.p-service-intro .txt {
	font-size: 1.6rem;
	line-height: 4.8rem;
	letter-spacing: .05em;
	transition: 1s all ease-in-out;
}
.p-service-intro .head:not(.is-complete),
.p-service-intro .txt:not(.is-complete) {
	translate: 0 4rem;
	opacity: 0;
}
@media screen and (max-width: 768px) {
	.p-service-intro {
		padding-inline: 2.8rem;
		margin-bottom: 4.6rem;
	}
	.p-service-intro .head {
		font-size: 2.5rem;
		line-height: 2;
	}
	.p-service-intro .txt {
		font-size: 1.5rem;
		line-height: 4.2rem;
	}
}

/* p-service-sidenav */
.p-service-sidenav {
	position: relative;
	left: 13.3rem;
	background: #EAEAF1;
	border-radius: 5.5rem;
	padding: 5rem 6rem 12.1rem 5rem;
	z-index: 10;
	overflow: hidden;
}
.p-service-sidenav::before {
	content: "";
	display: block;
	width: 24.2rem;
	height: 13.5rem;
	border-radius: 50%;
	background: #FFFFFF;
	position: absolute;
	bottom: -6.2rem;
	left: calc(50% - 12.1rem);
}
.p-service-sidenav::after {
	content: "";
	display: block;
	width: 8.3rem;
	height: 5.7rem;
	background: url(../img/service/service-sidenav_img.svg) no-repeat center top / contain;
	position: absolute;
	bottom: 2.8rem;
	left: calc(50% - 4.15rem);
}
.p-service-sidenav ul {
	display: flex;
	flex-direction: column;
	row-gap: 3rem;
}
.p-service-sidenav a {
	position: relative;
	display: block;
	font-size: 1.4rem;
	color: #73738E;
	z-index: 1;
}
.p-service-sidenav a:hover,
.p-service-sidenav a.is-active {
	color: #070203;
	opacity: 1;
}
/* .p-service-sidenav a::before {
	content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  top: 50%;
  left: -1.2rem;
  transform: translateY(-50%) scale(0.3);
  opacity: 0;
  z-index: -1;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.p-service-sidenav a:hover::before,
.p-service-sidenav a.is-active::before {
  transform: translateY(-50%) scale(1);
  opacity: 1;
} */
 /* インジケーター */
.p-service-sidenav__indicator {
  position: absolute;
  left: 3.8rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  top: 0;
  opacity: 0;
  z-index: -1;
  transition:
    top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s;
}
@media screen and (max-width: 768px) {
	.p-service-sidenav {
		left: 0;
		width: 26.3rem;
		margin: 0 auto 5.1rem;
	}
	.p-service-sidenav a {
		color: #070203;
	}
	.p-service-sidenav a::before {
		content: "";
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		background: #FFFFFF;
		position: absolute;
		top: calc(50% - 1rem);
		left: -1.2rem;
		z-index: -1;
	}
	.p-service-sidenav__indicator {
		display: none !important;
	}
}

/* p-service-content */
.p-service-content {
	padding-inline: 50.3rem 13.3rem;
}
.p-service-content__item {
	border-bottom: .1rem dotted #070203;
	padding: 6rem 0 8rem;
	transition: 1s all ease-in-out;
}
.p-service-content__item:not(.is-complete) {
	translate: 0 4rem;
	opacity: 0;
}
.p-service-content__item__ttl {
	font-size: 2.4rem;
	display: flex;
	align-items: center;
	margin-bottom: 5rem;
}
.p-service-content__item__ttl .en {
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	font-family: var(--ChakraPetch);
	line-height: 1;
	margin: .5rem 2.5rem 0 0;
}
.p-service-content__item__ttl .en em {
	font-size: 1.8rem;
	font-style: normal;
	padding: 0 2.5rem 0 1.2rem;
	border-right: .1rem dashed #070203;
}
.p-service-content__item__inner {
	display: flex;
	justify-content: space-between;
}
#website .p-service-content__item__img {
	width: 29.1rem;
}
#banner .p-service-content__item__img {
	width: 31.9rem;
}
#lp .p-service-content__item__img {
	width: 28.3rem;
}
#separation .p-service-content__item__img {
	width: 30.3rem;
}
#graphic .p-service-content__item__img {
	width: 29.9rem;
}
#ec .p-service-content__item__img {
	width: 30.1rem;
}
.p-service-content__item__txt {
	width: 35.6rem;
}
.p-service-content__item__txt p {
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: 0.1em;
	margin-bottom: 6rem;
}
.c-btn-detail {
	margin: 0 0 0 auto;
}
@media screen and (max-width: 768px) {
	.p-service-content {
		padding-inline: 2.8rem;
	}
	.p-service-content__item__ttl {
		font-size: 2.2rem;
		margin-bottom: 4.3rem;
	}
	.p-service-content__item__ttl .en {
		margin: .5rem 2.25rem 0 0;
	}
	.p-service-content__item__ttl .en span {
		display: none;
	}
	.p-service-content__item__ttl .en em {
		padding: 0 2.25rem 0 0;
	}
	.p-service-content__item__inner {
		flex-direction: column;
		row-gap: 4.7rem;
	}
	.p-service-content__item__img {
		margin: 0 auto;
	}
	#website .p-service-content__item__img {
		width: 24.7rem;
	}
	#banner .p-service-content__item__img {
		width: 28rem;
	}
	#lp .p-service-content__item__img {
		width: 23.6rem;
	}
	#separation .p-service-content__item__img {
		width: 21.4rem;
	}
	#graphic .p-service-content__item__img {
		width: 27.1rem;
	}
	#ec .p-service-content__item__img {
		width: 27.9rem;
	}
	.p-service-content__item__txt {
		width: 100%;
	}
	.p-service-content__item__txt p {
		margin-bottom: 0;
	}
}