@charset "UTF-8"; /* CSS Document */


#contents {
	font-size: 1rem;
}
#contents section p {
	margin: 1.5rem 0;
}

#contents #serviceMainVisual {
	background: url("/assets/images/service/datacenter2025/main_bg.jpg") no-repeat center center;
	background-size: cover;
}
#contents #serviceMainVisual #breadcrumb {
	display: none;
}
#contents #serviceMainVisual .block {
	height: 320px;
}

#contents #service .secTitle {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}
#contents #service .secTitle .en {
	display: block;
	font-size: 1.5rem;
	color: #006ab7;
	padding-bottom: 1rem;
}
#contents #service h3 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
}
#contents #service h4 {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
}
#contents #service h5 {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
}

#contents #service #beginning .txt {
	margin: 2rem 3rem;
}
#contents #service #beginning .txt a {
	text-decoration: underline;
}

#contents #service #about {
	padding: 2rem 0 3rem;
	background: #e5f0f8;
}
#contents #service #about .main {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: .875rem 1.25rem;
}
#contents #service #about .main .item {
	padding: 1rem 1.5rem;
	background: #fff;
}
#contents #service #about .main .item .icon {
	font-size: 2.5rem;
	line-height: 1;
	color: #006ab7;
	margin-bottom: .75rem;
	text-align: center;
}
#contents #service #about .main .item h3 {
	font-size: 1.25rem;
	text-align: center;
}
#contents #service #about .main .item p {
	font-feature-settings: "palt" on;
	font-size: .9375rem;
	margin: .5rem 0 0;
}

#contents #service #type {
	padding: 2rem 0 3rem;
}
#contents #service #type .main table {
	width: 100%;
	border-collapse: collapse;
}
#contents #service #type .main th,
#contents #service #type .main td {
	font-feature-settings: "palt" on;
	padding: 1rem;
	border: 1px solid #ccc;
	text-align: center;
}
#contents #service #type .main thead th {
	width: 20%;
	font-weight: bold;
	color: #fff;
	background: #005592;
}
#contents #service #type .main tbody th {
	background: #e5f0f8;
}

#contents #service #assignment {
	padding: 2rem 0 3rem;
	background: #e6f0f9;
}
#contents #service #assignment .main {
	background: #005592;
}
#contents #service #assignment .main .txt li {
	position: relative;
	line-height: 1.5;
	color: #fff;
	margin: .5rem 0;
	padding-left: 1.25em;
}
#contents #service #assignment .main .txt li::before {
	position: absolute;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: #ffd43b;
	content: "\f14a";
}

#contents #service #achievementsList {
	padding: 2rem 0 3rem;
}
#contents #service #achievementsList .main table {
	width: 100%;
	border-collapse: collapse;
}
#contents #service #achievementsList .main th,
#contents #service #achievementsList .main td {
	font-feature-settings: "palt" on;
	padding: 1rem;
	border: 1px solid #ccc;
}
#contents #service #achievementsList .main thead th {
	font-weight: bold;
	color: #fff;
	background: #005592;
}
#contents #service #achievementsList .main tbody th {
	background: #e5f0f8;
}
#contents #service #achievementsList .main .cell1 {
	text-align: center;
	white-space: nowrap;
}
#contents #service #achievementsList .main .cell2 {
	font-weight: bold;
	white-space: nowrap;
}
#contents #service #achievementsList .main .cell4 {
	text-align: center;
	white-space: nowrap;
}
#contents #service #achievementsList .main .cell5 {
	text-align: right;
	white-space: nowrap;
}
#contents #service #achievementsList .main th.cell5 {
	text-align: center;
}

#contents #service #achievements {
	padding: 2rem 0 3rem;
	background: #e6f0f9;
}
#contents #service #achievements .main {
	padding: 2.5rem;
	background: #fff;
}
#contents #service #achievements .main .achievement+.achievement {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid #ccc;
}
#contents #service #achievements .main .achievement .txt h3 {
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0 0 1rem;
}
#contents #service #achievements .main .achievement .txt p {
	margin: 0;
}
#contents #service #achievements .main .achievement .txt ul.basic {
	font-size: .875rem;
	margin: 1rem 0 0;
}
#contents #service #achievements .main .achievement .txt ul.basic li {
	margin: 0;
}

#contents #service #constructionSupport {
	padding: 2rem 0 3rem;
}
#contents #service #constructionSupport .main .fig {
	position: relative;
	font-feature-settings: "palt" on;
}
#contents #service #constructionSupport .main .fig::after {
	position: absolute;
	top: 0;
	left: 57px;
	display: inline-block;
	width: 6px;
	height: 100%;
	content: "";
	background: #006ab7;
	z-index: 1;
}
#contents #service #constructionSupport .main .fig .block {
	display: flex;
}
#contents #service #constructionSupport .main .fig .block .head {
	position: relative;
	display: flex;
	align-items: center;
	width: 140px;
}
#contents #service #constructionSupport .main .fig .block .head h3 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
	margin: 0;
	background: #006ab7;
	border-radius: 50%;
	text-align: center;
	z-index: 5;
}
#contents #service #constructionSupport .main .fig .block .head h3 span.sub {
	font-size: 1.25rem;
}
#contents #service #constructionSupport .main .fig .block .head h3::before {
	position: absolute;
	top: -20px;
	left: calc(50% - 10px);
	display: inline-block;
	width: 20px;
	height: 20px;
	content: "";
	background: #fff;
	z-index: 2;
}
#contents #service #constructionSupport .main .fig .block .head h3::after {
	position: absolute;
	top: -20px;
	left: calc(50% - 10px);
	display: inline-block;
	width: 20px;
	height: 20px;
	content: "";
	background: #006ab7;
	clip-path: content-box polygon(0 0, 100% 0, 50% 100%);
	z-index: 3;
}
#contents #service #constructionSupport .main .fig .block:first-child .head::before {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 100%;
	height: 50%;
	content: "";
	background: #fff;
	z-index: 4;
}
#contents #service #constructionSupport .main .fig .block:first-child .head h3::before,
#contents #service #constructionSupport .main .fig .block:first-child .head h3::after {
	display: none;
}
#contents #service #constructionSupport .main .fig .block:last-child .head::before {
	position: absolute;
	top: 50%;
	left: 0;
	display: inline-block;
	width: 100%;
	height: 50%;
	content: "";
	background: #fff;
	z-index: 4;
}
#contents #service #constructionSupport .main .fig .block .body {
	flex: 1;
	padding: 1.25rem;
	background: #e5f0f8;
	border-radius: .5rem;
}
#contents #service #constructionSupport .main .fig .block .body h4 {
	font-size: 1.25rem;
	line-height: 1.3;
	color: #005592;
	margin: 0 0 1rem;
}
#contents #service #constructionSupport .main .fig .block .body .col {
	position: relative;
	padding: 1rem;
	background: #fff;
	border: 1px solid #99bbd3;
	border-radius: .25rem;
}
#contents #service #constructionSupport .main .fig .block .body .col h5 {
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0 0 .25rem;
}
#contents #service #constructionSupport .main .fig .block .body .col h5 .no {
	display: inline-block;
	width: 1.125rem;
	line-height: 1.125rem;
	font-size: .75rem;
	color: #fff;
	margin-right: .25rem;
	background: #006ab7;
	border-radius: 50%;
	text-align: center;
	vertical-align: .1em;
}
#contents #service #constructionSupport .main .fig .block .body .col ul.basic {
	font-size: .875rem;
	line-height: 1.5;
}
#contents #service #constructionSupport .main .fig .block .body .col ul.basic li {
	margin: 0;
	padding-left: .75em;
}
#contents #service #constructionSupport .main .fig .block .body .col ul.basic li::before {
	position: absolute;
	top: .6rem;
	left: 0;
	width: .4rem;
	height: .4rem;
	content: "";
	background: #006ab7;
	border-radius: 50%;
}
#contents #service #constructionSupport .main .fig .connection {
	position: relative;
	font-size: 2rem;
	font-weight: bold;
	color: #ed6c00;
	margin-left: 140px;
	padding: 1rem 0;
	text-align: center;
}
#contents #service #constructionSupport .main .fig .connection::after {
	position: absolute;
	top: 0;
	left: calc(50% - 1.25rem);
	display: inline-block;
	width: 2.5rem;
	height: 1.25rem;
	content: "";
	background: #e5f0f8;
	clip-path: content-box polygon(0 0, 100% 0, 50% 100%);
}
#contents #service #constructionSupport .main p.note {
	font-size: .875rem;
	margin: 1rem 0 0;
	padding-left: 1.25em;
	text-indent: -1.25em;
}


/* ----------------------------------------------
   Media Queries
------------------------------------------------ */
@media (min-width: 768px) {
	
	#contents section .intro {
		margin: 0 3rem 2.5rem;
	}
	
	#contents #service #beginning .txt p {
		text-align: center;
	}
	
	#contents #service #assignment .main {
		display: flex;
	}
	#contents #service #assignment .main .img {
		width: 280px;
		padding-top: 40px;
		text-align: center;
	}
	#contents #service #assignment .main .img img {
		width: 200px;
	}
	#contents #service #assignment .main .txt {
		flex: 1;
		display: flex;
		align-items: center;
	}
	#contents #service #assignment .main .txt li {
		font-size: 1.125rem;
	}
	
	#contents #service #achievements .main .achievement {
		display: flex;
		justify-content: space-between;
	}
	#contents #service #achievements .main .achievement:nth-child(2n) {
		flex-direction: row-reverse;
	}
	#contents #service #achievements .main .achievement .img {
		width: 400px;
	}
	#contents #service #achievements .main .achievement .txt {
		width: 480px;
	}
	
	#contents #service #constructionSupport .main .fig .block .body .cols {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20px;
	}
	#contents #service #constructionSupport .main .fig .block .body .col::before {
		position: absolute;
		top: calc(50% - 10px);
		left: -15px;
		display: inline-block;
		width: 10px;
		height: 20px;
		content: "";
		background: #99bbd3;
		clip-path: content-box polygon(0 0, 100% 50%, 0 100%);
	}
	#contents #service #constructionSupport .main .fig .block .body .col:first-child::before {
		display: none;
	}
	
}

@media (max-width: 767px) {
	
	#contents .wrap {
		margin: 1rem;
	}
	#contents section .intro {
		margin: 0 0 1.5rem;
	}
	#contents section .intro br {
		display: none;
	}
	#contents #service h3 {
		font-size: 1.125rem;
	}
	#contents #service p {
		margin: 1rem 0;
	}
	#contents #service .secTitle {
		font-size: 1.375rem;
		line-height: 1.5;
		margin: 0 1rem 1rem;
		text-align: left;
	}
	
	#contents #serviceMainVisual {
		background-image: url("/assets/images/service/datacenter2025/main_bg_sp.jpg");
	}
	#contents #serviceMainVisual .block {
		height: 180px;
	}
	
	#contents #service #beginning .txt {
		margin: 1.5rem 0;
	}
	
	#contents #service #about {
		padding: 1.5rem 0 1rem;
	}
	#contents #service #about .main {
		grid-template-columns: 1fr 1fr;
		gap: 5px;
	}
	#contents #service #about .main .item {
		padding: .875rem;
	}
	#contents #service #about .main .item .icon {
		font-size: 1.5rem;
		margin-bottom: .5rem;
	}
	#contents #service #about .main .item h3 {
		font-size: 1.125rem;
	}
	#contents #service #about .main .item p {
		font-size: .875rem;
		line-height: 1.5;
	}
	
	#contents #service #type {
		padding: 1.5rem 0 1rem;
	}
	#contents #service #type .main .tableScroll {
		overflow-x: scroll;
	}
	#contents #service #type .main table {
		display: block;
		white-space: nowrap;
	}
	#contents #service #type .main tr *:first-child {
		position: sticky;
		left: 1px;
	}
	#contents #service #type .main tr *:first-child::before {
		position: absolute;
		top: 0;
		left: -1px;
		right: -1px;
		height: 100%;
		content: "";
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	#contents #service #type .main th,
	#contents #service #type .main td {
		font-size: .875rem;
		padding: .75rem;
	}
	
	#contents #service #assignment {
		padding: 1.5rem 0 1rem;
	}
	#contents #service #assignment .main {
		padding: 1rem;
	}
	#contents #service #assignment .main .img {
		margin-bottom: 1rem;
		text-align: center;
	}
	#contents #service #assignment .main .img img {
		height: 120px;
	}
	
	#contents #service #achievementsList {
		padding: 1.5rem 0 1rem;
	}
	#contents #service #achievementsList .main .tableScroll {
		overflow-x: scroll;
	}
	#contents #service #achievementsList .main table {
		display: block;
		white-space: nowrap;
	}
	#contents #service #achievementsList .main th,
	#contents #service #achievementsList .main td {
		font-size: .875rem;
		padding: .75rem;
	}
	#contents #service #achievementsList .main .cell1 {
		position: sticky;
		left: 1px;
	}
	#contents #service #achievementsList .main .cell1::before {
		position: absolute;
		top: 0;
		left: -1px;
		right: -1px;
		height: 100%;
		content: "";
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	
	#contents #service #achievements {
		padding: 1.5rem 0 1rem;
	}
	#contents #service #achievements .main {
		padding: 1.25rem;
	}
	#contents #service #achievements .main .achievement .txt h3 {
		font-size: 1.125rem;
		margin: 1rem 0 .75rem;
	}
	#contents #service #achievements .main .achievement .txt p {
		display: inline;
	}
	#contents #service #achievements .main .achievement+.achievement {
		margin-top: 1.25rem;
		padding-top: 1.25rem;
	}
	
	#contents #service #constructionSupport {
		padding: 1.5rem 0 .5rem;
	}
	#contents #service #constructionSupport .secTitle {
		font-size: 1.25rem;
	}
	#contents #service #constructionSupport .main .fig::after {
		left: 36px;
		width: 8px;
	}
	#contents #service #constructionSupport .main .fig .block .head {
		align-items: flex-start;
		width: 95px;
	}
	#contents #service #constructionSupport .main .fig .block .head h3 {
		width: 80px;
		height: 80px;
		font-size: 1rem;
	}
	#contents #service #constructionSupport .main .fig .block .head h3 span.sub {
		font-size: .75rem;
	}
	#contents #service #constructionSupport .main .fig .block:first-child .head::before {
		display: none;
	}
	#contents #service #constructionSupport .main .fig .block .head h3::before {
		top: -35px;
		left: calc(50% - 15px);
		width: 30px;
		height: 35px;
	}
	#contents #service #constructionSupport .main .fig .block .head h3::after {
		top: -35px;
		left: calc(50% - 15px);
		width: 30px;
		height: 35px;
		clip-path: content-box polygon(0 0, 100% 0, 50% 60%);
	}
	#contents #service #constructionSupport .main .fig .block:last-child .head::before {
		top: 0;
		height: 100%;
	}
	#contents #service #constructionSupport .main .fig .block .body {
		padding: 1rem;
	}
	#contents #service #constructionSupport .main .fig .block .body h4 {
		font-size: 1.125rem;
		text-align: center;
	}
	#contents #service #constructionSupport .main .fig .block .body .col {
		padding: .75rem;
	}
	#contents #service #constructionSupport .main .fig .block .body .col h5 {
		font-size: 1rem;
	}
	#contents #service #constructionSupport .main .fig .block .body .col+.col {
		margin-top: 20px;
	}
	#contents #service #constructionSupport .main .fig .block .body .col::before {
		position: absolute;
		top: -16px;
		left: calc(50% - 10px);
		display: inline-block;
		width: 20px;
		height: 10px;
		content: "";
		background: #99bbd3;
		clip-path: content-box polygon(0 0, 100% 0, 50% 100%);
	}
	#contents #service #constructionSupport .main .fig .block .body .col:first-child::before {
		display: none;
	}
	#contents #service #constructionSupport .main .fig .connection {
		font-size: 1.25rem;
		margin-left: 95px;
		padding: .75rem 0;
	}
	#contents #service #constructionSupport .main .fig .connection::after {
		left: calc(50% - 1rem);
		width: 2rem;
		height: 1rem;
	}
	
}