@charset "utf-8";

.section {
	padding: 0 0 80px;
}

/*================================================================
# intro
================================================================ */
.intro {
	padding: 24px 0 64px;
}

.intro .intro__head {
	display: block;
}

.intro .intro__media {
	width: 100%;
	margin-top: 40px;
	position: relative;
	aspect-ratio: 1.618 / 1;
}

.intro .intro__media::before {
	width: 64px;
	height: 64px;
	opacity: 0.2;
	background: var(--primary);
	position: absolute;
	content: "";
	right: -24px;
	bottom: -24px;
	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: 56px;
	background: var(--gray03);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
}

.intro .intro__nav .item {
	min-height: 144px;
	padding: 24px 20px;
	background: var(--white);
	position: relative;
	display: flex;
	flex-direction: column;
}

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

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

.intro .intro__nav .en {
	margin-top: 6px;
	padding-right: 16px;
	font-family: var(--text-en);
	font-size: 9px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--primary);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

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

/* summary
------------------------------------------------------ */
.service .service__summary,
.service.service--reverse .service__summary {
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.service .service__summary .media,
.service.service--reverse .service__summary .media {
	width: calc(100% + 16vw);
	height: auto;
	margin-left: -8vw;
	overflow: hidden;
	order: 1;
	aspect-ratio: 4 / 3;
}

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

.service .service__summary .body,
.service.service--reverse .service__summary .body {
	margin-top: 48px;
	order: 2;
}

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

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

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

.service .service__summary .text01 {
	margin-top: 32px;
}

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

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

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

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

/* main work list
------------------------------------------------------ */
.service .list {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

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

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

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

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

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

/* strength
------------------------------------------------------ */
.service .strength .feature-list {
	margin-top: 40px;
	border-top: 1px solid var(--border03);
	display: block;
}

.service .strength .feature-list .item {
	padding: 28px 8px;
	border-bottom: 1px solid var(--border03);
	display: block;
}

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

.service .strength .feature-list dd {
	margin: 8px 0 0;
	padding: 16px 0 0;
	border-top: 2px dotted var(--border02);
	border-left: 0;
	font-size: 13px;
	line-height: 1.9;
}

/* card type strength: telecommunications / security
------------------------------------------------------ */
#telecommunications .strength .feature-list,
#security .strength .feature-list {
	width: 100%;
	margin: 40px 0 0;
	border: 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 12px;
}

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

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

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

/* future
------------------------------------------------------ */
.service .future .future__inner {
	margin-top: 40px;
	display: block;
}

.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-top: 32px;
}

.service .simple-list li {
	padding: 18px 8px 18px 28px;
	border-bottom: 1px solid var(--gray03);
	position: relative;
	font-size: 13px;
	line-height: 1.8;
}

.service .simple-list li:first-child {
	border-top: 1px solid var(--gray03);
}

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

/*================================================================
# civil
================================================================ */
#civil {
	padding-bottom: 0;
}

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

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

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

.service .importance__content {
	width: 100%;
	max-width: none;
	margin-top: 40px;
	display: block;
}

.service .importance__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.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: 16px;
	bottom: 16px;
	font-family: var(--text-en);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--white);
	text-align: right;
	letter-spacing: 0.1em;
	z-index: 2;
}

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

.service .importance__body .item {
	padding: 28px 24px;
	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: 40px;
	background: var(--white);
	position: absolute;
	content: "";
	top: 28px;
	left: 0;
}

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

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

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

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

/* local safety
------------------------------------------------------ */
#security .security-area {
	margin-top: 72px;
	background: var(--primary);
	display: block;
	color: var(--white);
}

#security .security-area .media {
	min-height: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

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

#security .security-area .body {
	padding: 40px 24px 48px;
	display: block;
}

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

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

#security .security-area .text01 {
	margin-top: 32px;
}

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