@charset "utf-8";

/*================================================================
# intro
================================================================ */
.intro .intro__head {
	display: flex;
	gap: 64px;
}

.intro .intro__media {
	width: 400px;
	position: relative;
	aspect-ratio: 1.618 / 1;
}

.intro .intro__media::before {
	width: 96px;
	height: 96px;
	opacity: 0.2;
	background: var(--primary);
	position: absolute;
	content: "";
	right: -40px;
	bottom: -40px;
	z-index: 0;
}

.intro .intro__media img {
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
	object-fit: cover;
	z-index: 1;
	object-position: center center;
}

/* intro nav
------------------------------------------------------ */
.intro .intro__nav {
	margin-top: 64px;
	background: var(--gray03);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
}

.intro .intro__nav .item {
	padding: 32px 28px;
	background: var(--white);
	position: relative;
	display: flex;
	flex-direction: column;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.intro .intro__nav .number {
	font-family: var(--text-en);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--primary);
	letter-spacing: 0.08em;
	transition: color 0.3s ease;
}

.intro .intro__nav .en {
	margin-top: 16px;
	font-family: var(--text-en);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--primary);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.intro .intro__nav .ja {
	margin-top: 8px;
	font-family: var(--text-mincho);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.intro .intro__nav .arrow {
	width: 8px;
	height: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	position: absolute;
	right: 28px;
	bottom: 34px;
	transform: rotate(45deg);
}

@media (hover: hover) {
	.intro .intro__nav .item:hover {
		background: var(--primary);
		color: var(--white);
	}

	.intro .intro__nav .item:hover .number,
	.intro .intro__nav .item:hover .en {
		color: var(--white);
	}
}

/*================================================================
# service common
================================================================ */
.service {
	scroll-margin-top: 80px;
}

/* summary
------------------------------------------------------ */
.service .service__summary {
	width: calc(100% + max(8vw, calc((100vw - 1000px) / 2)));
	margin-left: calc(-1 * max(8vw, calc((100vw - 1000px) / 2)));
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 80px;
}

.service.service--reverse .service__summary {
	margin-left: 0;
	grid-template-columns: 300px minmax(0, 1fr);
}

.service.service--reverse .service__summary .media {
	order: 2;
}

.service.service--reverse .service__summary .body {
	order: 1;
}

.service .service__summary .media {
	height: 64vh;
}

.service .service__summary .media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}

.service .service__summary .number {
	font-family: var(--text-en);
	font-size: 72px;
	font-weight: 600;
	line-height: 0.85;
	color: rgba(9, 80, 210, 0.12);
	letter-spacing: 0.02em;
}

.service .service__summary .en {
	margin: 64px 0 0;
	font-family: var(--text-en);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--primary);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.service .service__summary h2 {
	margin-top: 12px;
	font-family: var(--text-mincho);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.service .service__summary .text01 {
	margin: 64px 0 0;
}

.service .service__summary .text01 p {
	line-height: 2.2;
}

/* group heading
------------------------------------------------------ */
.service .group {
	margin-top: 100px;
}

.service .group>h3 {
	position: relative;
	font-family: var(--text-mincho);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.05em;
}

.service .group>h3::after {
	width: 48px;
	height: 2px;
	margin: 16px auto 0;
	background: var(--primary);
	content: "";
	display: block;
}

/* main work list
------------------------------------------------------ */
.service .list {
	margin: 64px 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.service .list .item {
	padding: 32px 48px;
	background: var(--white);
}

.service.bg01 .list .item {
	background: var(--bg02);
}

.service .list .item h4 {
	padding-left: 18px;
	position: relative;
	font-family: var(--text-mincho);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.service .list .item h4::before {
	width: 8px;
	height: 8px;
	background: var(--primary);
	position: absolute;
	content: "";
	top: 0.8em;
	left: 0;
	transform: translateY(-50%) rotate(45deg);
}

.service .list .item p {
	margin-top: 16px;
	font-size: 13px;
	line-height: 2;
}

/* strength
------------------------------------------------------ */
.service .strength .feature-list {
	margin: 64px 0 0;
	border-top: 1px solid var(--border03);
	display: grid;
	align-items: center;
	grid-template-columns: 1fr;
}

.service .strength .feature-list .item {
	padding: 40px 56px;
	border-bottom: 1px solid var(--border03);
	display: grid;
	align-items: center;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 64px;
}

.service .strength .feature-list dt {
	font-family: var(--text-mincho);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--primary);
	letter-spacing: 0.04em;
}

.service .strength .feature-list dd {
	padding-left: 64px;
	border-left: 1px dotted var(--border02);
	font-size: 14px;
	line-height: 2;
}

/* card type strength: telecommunications / security
------------------------------------------------------ */
#telecommunications .strength .feature-list,
#security .strength .feature-list {
	margin: 64px auto 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

#telecommunications .strength .feature-list .item,
#security .strength .feature-list .item {
	min-width: 0;
	height: auto;
	padding: 32px 24px;
	border: 1px solid var(--border03);
	display: block;
	text-align: center;
}

#telecommunications .strength .feature-list dt,
#security .strength .feature-list dt {
	padding: 0;
	font-size: 24px;
	line-height: 1.6;
}

#telecommunications .strength .feature-list dd,
#security .strength .feature-list dd {
	width: 100%;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px dotted var(--border02);
	border-left: 0;
	font-size: 13px;
	line-height: 1.9;
}

#telecommunications .strength .feature-list {
	width: 88%;
}

#telecommunications .strength .feature-list .item {
	width: calc((100% - 32px) / 3);
}

#security .strength .feature-list {
	width: 80%;
}

#security .strength .feature-list .item {
	width: calc((100% - 16px) / 2);
}

/* future
------------------------------------------------------ */
.service .future .future__inner {
	margin: 80px 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 56px;
}

.service .future .future__media {
	width: 100%;
	aspect-ratio: 1.618 / 1;
}

.service .future .future__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}

.service .future .simple-list {
	margin: 0;
}

.service .simple-list li {
	padding: 20px 20px 20px 44px;
	border-bottom: 1px solid var(--gray03);
	position: relative;
	font-size: 14px;
	line-height: 1.8;
}

.service .simple-list li::before {
	width: 8px;
	height: 8px;
	background: var(--primary);
	position: absolute;
	content: "";
	top: 29px;
	left: 20px;
}

/*================================================================
# civil
================================================================ */
/* importance
------------------------------------------------------ */
.service .importance {
	width: 100vw;
	margin: 100px 0 0 calc(50% - 50vw);
	padding: 100px 0;
	background: var(--primary);
	color: var(--white);
}

.service .importance>h3 {
	padding-top: 24px;
	position: relative;
	font-family: var(--text-mincho);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--white);
	text-align: center;
	letter-spacing: 0.06em;
}

.service .importance>h3::before {
	width: 1px;
	height: 100px;
	background: rgba(255, 255, 255, 0.6);
	position: absolute;
	content: "";
	top: -100px;
	left: 50%;
}

.service .importance__content {
	width: calc(100% - 16vw);
	max-width: 1000px;
	margin: 40px auto 0;
	display: grid;
	align-items: stretch;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 48px;
}

.service .importance__media {
	position: relative;
	overflow: hidden;
}

.service .importance__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}

.service .importance__media::after {
	width: 100%;
	height: 40%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
	position: absolute;
	content: "";
	right: 0;
	bottom: 0;
	left: 0;
}

.service .importance__media .caption {
	position: absolute;
	right: 24px;
	bottom: 24px;
	font-family: var(--text-en);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--white);
	text-align: right;
	letter-spacing: 0.12em;
	z-index: 2;
}

.service .importance__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service .importance__body .item {
	padding: 40px 48px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	position: relative;
	color: var(--white);
}

.service .importance__body .item::before {
	width: 3px;
	height: 48px;
	background: var(--white);
	position: absolute;
	content: "";
	top: 40px;
	left: 0;
}

.service .importance__body .head {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.service .importance__body h4 {
	font-family: var(--text-mincho);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--white);
	letter-spacing: 0.05em;
}

.service .importance__body .text {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px dotted rgba(255, 255, 255, 0.35);
}

.service .importance__body .text p {
	font-size: 14px;
	line-height: 2.1;
	color: var(--white);
}

/*================================================================
# civil
================================================================ */
#civil {
	padding: 100px 0 0;
}

/*================================================================
# security
================================================================ */
#security .service__summary .lead {
	margin: 64px 0 0;
	font-family: var(--text-mincho);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

/* local safety
------------------------------------------------------ */
#security .security-area {
	margin-top: 96px;
	background: var(--primary);
	display: grid;
	align-items: stretch;
	color: var(--white);
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

#security .security-area .media {
	min-height: 480px;
	overflow: hidden;
}

#security .security-area .media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}

#security .security-area .body {
	padding: 64px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

#security .security-area .en {
	font-family: var(--text-en);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

#security .security-area h3 {
	margin-top: 20px;
	font-family: var(--text-mincho);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.06em;
}

#security .security-area .text01 {
	margin: 64px 0 0;
}

#security .security-area .text01 p {
	font-size: 14px;
	line-height: 2.2;
}