/**
 *
 * page-service-detail.scss
 *
 */
.service-infrastructure-main {
	--backdrop-color: var( --color-backdrop );
	--backdrop-gradation: var( --color-backdrop-gradation );
}

.service-electrical-main {
	--backdrop-color: var( --color-backdrop2 );
	--backdrop-gradation: var( --color-backdrop2-gradation );
}

.service-solution-main {
	--backdrop-color: var( --color-backdrop3 );
	--backdrop-gradation: var( --color-backdrop3-gradation );
}

.service-rental-main {
	--backdrop-color: var( --color-backdrop4 );
	--backdrop-gradation: var( --color-backdrop4-gradation );
}

.service-security-main {
	--backdrop-color: var( --color-backdrop5 );
	--backdrop-gradation: var( --color-backdrop5-gradation );
}

/* ------------------------------------------------------------
 service-wrapper
------------------------------------------------------------ */
.service-wrapper {
	position: relative;
	background-color: var(--backdrop-color);
}

@media screen and (min-width: 1024px) {
	.service-wrapper {
		padding: 0 0 16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-wrapper {
		padding: 0 0 6rem ;
	}
}

.service-wrapper::before {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 100%;
	background: var(--backdrop-gradation);
}

@media screen and (min-width: 1024px) {
	.service-wrapper::before {
		height: 6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-wrapper::before {
		height: 4rem ;
	}
}

.service-main {
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.service-main {
		padding: 12rem 0 ;
	}
}

@media screen and (max-width: 1023px) {
	.service-main {
		padding: 6rem 0 4rem ;
	}
}

/* ------------------------------------------------------------
 service-intro
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.service-intro__flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-top: 10.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-intro__flex {
		margin-top: 4rem ;
	}
}

@media screen and (min-width: 1024px) {
	.service-intro__txt {
		width: 45.71759vw;
	}
}

@media screen and (min-width: 1024px) {
	.service-intro__figure {
		width: 41.43519vw;
		max-height: 68.88rem ;
		margin-right: calc( ( var(--outside-lg) - var(--outside-sm) )* -1);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

@media screen and (max-width: 1023px) {
	.service-intro__figure {
		max-height: 36.16rem ;
		margin-top: 4rem ;
	}
}

.service-intro__figure::after {
	content: '';
	display: block;
}

@media screen and (min-width: 1024px) {
	.service-intro__figure::after {
		padding-top: 68.71508%;
	}
}

@media screen and (max-width: 1023px) {
	.service-intro__figure::after {
		padding-top: 68.48485%;
	}
}

/* ------------------------------------------------------------
 service-comic
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.service-comic {
		margin-top: 12rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic {
		margin-top: 8rem ;
	}
}

.service-comic__inner {
	position: relative;
	width: var(--contents-sm);
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.service-comic__inner {
		max-width: 106.6rem ;
	}
}

.service-comic__inner a {
	border: var(--solid-medium-comic);
	background-color: var(--color-comic);
	color: var(--color-txt2);
}

@media screen and (min-width: 1024px) {
	.service-comic__inner a {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic__inner a {
		display: block;
	}
}

/* ---------- service-comic__figure ---------- */
.service-comic__figure {
	position: relative;
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.service-comic__figure {
		width: 50%;
	}
}

.service-comic__figure__inner {
	opacity: .9;
	mix-blend-mode: lighten;
}

@media screen and (min-width: 1024px) {
	.service-comic__figure__inner {
		height: 100%;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.service-comic__figure__inner {
		height: 37.76rem ;
	}
}

@media screen and (max-width: 560px) {
	.service-comic__figure__inner {
		height: 23.6rem ;
	}
}

/* ---------- service-comic__contents ---------- */
@media screen and (min-width: 1024px) {
	.service-comic__contents {
		flex: 1;
		min-width: 1px;
		padding: 3.2rem 5.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic__contents {
		padding: 3rem 1.6rem 2.6rem ;
	}
}

.service-comic__title {
	width: 16.9rem ;
	border-bottom: var(--solid-current);
	padding: 0.6rem 0.3rem 0.9rem 0 ;
}

.service-comic__txt {
	position: relative;
	z-index: 10;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	font-weight: 700;
}

@media screen and (min-width: 1024px) {
	.service-comic__txt {
		background-color: var(--color-comic);
		white-space: nowrap;
		font-size: var(--font-size48);
		line-height: calc( 68 / 48 * 1em);
		margin-top: 0.7rem ;
		padding-right: 2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic__txt {
		font-size: var(--font-size36);
		line-height: calc( 44 / 36 * 1em);
		margin-top: 2rem ;
	}
}

.service-comic__button {
	margin-top: 4.2rem ;
}

/* ----------------------------------------
 service-comic__illust
---------------------------------------- */
.service-comic__illust {
	position: absolute;
	pointer-events: none;
}

@media screen and (min-width: 1024px) {
	.service-comic__illust {
		width: 20.6rem ;
		height: 23.4rem ;
		right: -2.5rem ;
		bottom: -1.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic__illust {
		width: 15.7rem ;
		height: 17.7rem ;
		right: -1.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic__illust {
		top: 23rem ;
	}
}

@media screen and (max-width: 560px) {
	.service-comic__illust {
		top: 8rem ;
	}
}

.service-comic__illust__balloon {
	position: absolute;
	top: 0;
	right: 0;
}

@media screen and (min-width: 1024px) {
	.service-comic__illust__balloon {
		width: 13.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic__illust__balloon {
		width: 10.2rem ;
	}
}

.service-comic__illust__character {
	position: absolute;
	left: 0;
	bottom: 0;
}

@media screen and (min-width: 1024px) {
	.service-comic__illust__character {
		width: 10.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-comic__illust__character {
		width: 8.8rem ;
	}
}

/* ------------------------------------------------------------
 service-business
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.service-business {
		margin-top: 20rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-business {
		margin-top: 12rem ;
	}
}

@media screen and (min-width: 1024px) {
	.service-business__list {
		margin-top: 4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-business__list {
		margin-top: 3rem ;
	}
}

/* ----------------------------------------
 service-comic__illust
---------------------------------------- */
.service-business__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--color-gradation3);
	color: var(--color-txt2);
}

@media screen and (min-width: 1024px) {
	.service-business__item {
		height: 36rem ;
		padding: 4rem 4rem 6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-business__item {
		height: 24rem ;
		padding: 2rem 1rem 3rem ;
	}
}

.service-business__item::before {
	content: '';
	display: block;
	background-image: url("../img/common/logo_symbol2.svg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
	opacity: .2;
	mix-blend-mode: overlay;
}

@media screen and (min-width: 1024px) {
	.service-business__item::before {
		width: 31.3rem ;
		height: 28.3rem ;
		top: -4rem ;
		right: -2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-business__item::before {
		width: 16.6rem ;
		height: 15rem ;
		right: -2.5rem ;
		bottom: 2.4rem ;
	}
}

/* ---------- service-business__item__title ---------- */
.service-business__item__title {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem ;
}

@media screen and (min-width: 1024px) {
	.service-business__item__title {
		justify-content: flex-end;
	}
}

.service-business__item__title span {
	display: block;
	font-family: var(--font-sans-serif);
	line-height: var(--line-height-noraml);
}

@media screen and (min-width: 1024px) {
	.service-business__item__title span {
		font-size: var(--font-size16);
	}
}

@media screen and (max-width: 1023px) {
	.service-business__item__title span {
		font-size: var(--font-size13);
	}
}

.service-business__item__title span:nth-of-type(2) {
	letter-spacing: var(--letter-spacing-_rg);
}

/* ---------- service-business__item__txt ---------- */
.service-business__item__txt {
	position: relative;
	z-index: 1;
	line-height: var(--line-height-noraml);
}

@media screen and (min-width: 1024px) {
	.service-business__item__txt {
		font-size: 2.31481vw;
		letter-spacing: var(--letter-spacing-_rg);
	}
}

@media screen and (min-width: 1728px) {
	.service-business__item__txt {
		font-size: var(--font-size40);
	}
}

@media screen and (max-width: 1023px) {
	.service-business__item__txt {
		font-size: var(--font-size18);
		letter-spacing: var(--letter-spacing-_xl);
	}
}

/* ------------------------------------------------------------
 service-feature
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.service-feature {
		margin-top: 20rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature {
		margin-top: 12rem ;
	}
}

.service-feature__list {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.service-feature__list {
		margin-top: 1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__list {
		margin-top: 3rem ;
	}
}

.service-feature__list::before {
	content: '';
	display: block;
	height: 100%;
	border-radius: var(--radius-3xs);
	background-color: var(--color-bg7);
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.service-feature__list::before {
		width: 95.37037vw;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__list::before {
		width: 100%;
	}
}

/* ----------------------------------------
 service-feature__item
---------------------------------------- */
.service-feature__item {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.service-feature__item {
		display: flex;
		justify-content: space-between;
		padding: 8rem 0 ;
	}
	.service-feature__item:nth-of-type(2n-1) {
		flex-direction: row-reverse;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item {
		padding: 6rem var(--outside);
	}
}

.service-feature__item + .service-feature__item {
	border-top: var(--solid4);
}

/* ---------- service-feature__item__figure ---------- */
.service-feature__item__figure {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.service-feature__item__figure {
		width: 41.89815vw;
	}
}

.service-feature__item__figure figure {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1023px) {
	.service-feature__item__figure figure {
		max-height: 54.18rem ;
	}
	.service-feature__item__figure figure::after {
		content: '';
		display: block;
		padding-top: 133.44828%;
	}
}

.service-feature__item__illust {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

@media screen and (min-width: 1024px) {
	.service-feature__item__illust:has([src*="character_9.svg"]) {
		width: 15.7rem ;
		right: 2.4rem ;
		bottom: -1.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__illust:has([src*="character_9.svg"]) {
		width: 10.5rem ;
		right: -1rem ;
		bottom: -1.2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.service-feature__item__illust:has([src*="character_10.svg"]) {
		width: 23.5rem ;
		left: 4.7rem ;
		bottom: -2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__illust:has([src*="character_10.svg"]) {
		width: 15.7rem ;
		left: -1rem ;
		bottom: -1rem ;
	}
}

@media screen and (min-width: 1024px) {
	.service-feature__item__illust:has([src*="character_3.svg"]) {
		width: 15rem ;
		right: 3rem ;
		bottom: -2.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__illust:has([src*="character_3.svg"]) {
		width: 10.5rem ;
		right: 0 ;
		bottom: -1.1rem ;
	}
}

/* ---------- service-feature__item__contents ---------- */
@media screen and (min-width: 1024px) {
	.service-feature__item__contents {
		display: flex;
		flex-direction: column;
		width: 41.89815vw;
		min-height: 100.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__contents {
		margin-top: 4rem ;
	}
}

/* ----- service-feature__item__title ----- */
.service-feature__item__title {
	display: flex;
	align-items: center;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	background-color: var(--color-bg8);
}

@media screen and (min-width: 1024px) {
	.service-feature__item__title {
		padding: 0.8rem 2.3rem 0.8rem 2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__title {
		padding: 0.6rem 1.2rem 0.6rem 1rem ;
	}
}

.service-feature__item__title::before {
	content: '';
	display: block;
	background-image: url("../img/common/illust/character_8.svg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 1024px) {
	.service-feature__item__title::before {
		width: 3.9rem ;
		height: 4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__title::before {
		width: 2.4rem ;
		height: 2.4rem ;
	}
}

.service-feature__item__title span {
	display: block;
}

.service-feature__item__title__ja {
	line-height: var(--line-height-noraml);
	letter-spacing: var(--letter-spacing-_rg);
}

@media screen and (min-width: 1024px) {
	.service-feature__item__title__ja {
		font-size: var(--font-size16);
		margin-left: 1.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__title__ja {
		font-size: var(--font-size12);
		margin-left: 1rem ;
	}
}

.service-feature__item__title__num {
	font-family: var(--font-sans-serif);
	line-height: var(--line-height-noraml);
	letter-spacing: var(--letter-spacing-_rg);
	margin-left: 0.5rem ;
}

@media screen and (min-width: 1024px) {
	.service-feature__item__title__num {
		font-size: var(--font-size24);
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__title__num {
		font-size: var(--font-size18);
	}
}

/* ----- service-feature__item__catch ----- */
.service-feature__item__catch {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

@media screen and (min-width: 1024px) {
	.service-feature__item__catch {
		margin-top: auto;
		font-size: 3.24074vw;
		line-height: calc( 92 / 56 * 1em);
		text-underline-offset: 2.5rem ;
	}
}

@media screen and (min-width: 1728px) {
	.service-feature__item__catch {
		font-size: var(--font-size56);
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__catch {
		font-size: var(--font-size26);
		line-height: calc( 42 / 26 * 1em);
		text-underline-offset: 1rem ;
		margin-top: 1.5rem ;
	}
}

/* ----- service-feature__item__detail ----- */
@media screen and (min-width: 1024px) {
	.service-feature__item__detail {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-top: 12.4rem ;
	}
}

@media screen and (min-width: 1024px) {
	.service-feature__item__figure2 {
		max-width: 24rem ;
		width: 33.33333%;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__figure2 {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.service-feature__item__txt {
		flex: 1;
		margin-left: 11.11111%;
	}
}

@media screen and (max-width: 1023px) {
	.service-feature__item__txt {
		margin-top: 3rem ;
	}
}

/* ------------------------------------------------------------
 service-gallery
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.service-gallery {
		margin-top: 16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-gallery {
		margin-top: 6rem ;
	}
}

/* ------------------------------------------------------------
 service-pagination
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.service-pagination {
		margin-top: 16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination {
		margin-top: 6rem ;
	}
}

.service-pagination__inner {
	background-color: var(--color-bg9);
}

@media screen and (min-width: 1024px) {
	.service-pagination__inner {
		padding: 8rem 0 ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__inner {
		padding: 4rem 0 ;
	}
}

/* ----------------------------------------
 service-pagination__item
---------------------------------------- */
.service-pagination__item a {
	--color-hover-bg: var( --color-hover-bg2 );
	display: flex;
	align-items: center;
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.service-pagination__item a {
		gap: 3rem ;
		padding: 1rem 4rem 1rem 1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__item a {
		gap: 1.5rem ;
		padding: 0.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__item .c-arrow2 {
		display: none;
	}
}

/* ---------- service-pagination__item__figure ---------- */
@media screen and (min-width: 1024px) {
	.service-pagination__item__figure {
		width: 12rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__item__figure {
		width: 8rem ;
	}
}

/* ---------- service-pagination__item__contents ---------- */
.service-pagination__item__contents {
	position: relative;
	flex: 1;
	margin-top: 0.4rem ;
}

@media screen and (min-width: 1024px) {
	.service-pagination__item__contents {
		padding-left: 4.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__item__contents {
		padding-left: 3.3rem ;
	}
}

.service-pagination__item__num {
	position: absolute;
	top: -0.3rem ;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("../img/common/icon/title_symbol.svg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-txt2);
	font-family: var(--font-sans-serif);
}

@media screen and (min-width: 1024px) {
	.service-pagination__item__num {
		width: 3.4rem ;
		height: 3rem ;
		font-size: var(--font-size14);
		padding-top: 0.4rem ;
		padding-right: 0.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__item__num {
		width: 2.3rem ;
		height: 2rem ;
		font-size: var(--font-size11);
		font-size: 1.1rem ;
		padding-top: 0.2rem ;
		padding-right: 0.1rem ;
	}
}

@media screen and (min-width: 1024px) {
	.service-pagination__item__ja {
		font-size: var(--font-size24);
		--line-height: 1.25;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__item__ja {
		font-size: var(--font-size16);
		--line-height: 1.25;
	}
}

.service-pagination__item__en {
	font-family: var(--font-sans-serif);
	line-height: var(--line-height-noraml);
}

@media screen and (min-width: 1024px) {
	.service-pagination__item__en {
		font-size: var(--font-size15);
		margin-top: 1.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.service-pagination__item__en {
		font-size: var(--font-size11);
		margin-top: 0.8rem ;
	}
}
/*# sourceMappingURL=sourcemaps/page-service-detail.css.map */