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

/* ====================
   What we can do
==================== */
.what-we-can{
	background: #F0F4FA;
	border-radius: 50px;
}
.what-we-can .inner{
	max-width: 1366px;
	padding: 80px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap:130px;
}
.what-we-can .inner .intro{
	display: flex;
	gap:60px;
}
.what-we-can .inner .intro h3{
	width: 40%;
	font-family: 'Montserrat', sans-serif;
	font-size: 40px;
	font-weight: 500;
	color:#1266E5;
}
.what-we-can .inner .intro div{
	width: 60%;
}
.what-we-can .inner .intro p{
	font-size: 18px;
	text-align: justify;
}
.what-we-can .inner .box-wrap{
	display: flex;
	flex-wrap:wrap;
	flex-direction: column;
	gap:80px;
}
.what-we-can .inner .box-wrap .box{
	display: flex;
	flex-wrap:nowrap;
	flex: 1;
	gap:40px;
	align-items: center;
}
.what-we-can .inner .box-wrap .box2{
	flex-direction: row-reverse
}
.what-we-can .inner .box-wrap .box div{
	width: 60%;
}
.what-we-can .inner .box-wrap .box .number{
	color:#1266E5;
	font-family: 'Montserrat', sans-serif;
	font-size: 40px;
	margin-top: 10px;
}
.what-we-can .inner .box-wrap .box .number::after{
	content:'';
	display: block;
	background:url("../comon/img/number-line.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 40px;
	height:6px;
}
.what-we-can .inner .box-wrap .box h4{
	font-size: 32px;
	font-weight: 700;
	margin: 40px 0 20px 0;
}
.what-we-can .inner .box-wrap .box p{
	text-align: justify;
}
.what-we-can .inner .box-wrap .box img{
	border-radius: 20px;
	filter: drop-shadow(20px 20px 20px rgba(55, 80, 121, 0.16));
}

/* タブレット（What we can do） */
@media screen and (max-width:1024px){
	.what-we-can .inner{
		padding: 50px;
		gap:60px;
	}
	.what-we-can .inner .intro{
		flex-direction: column;
		gap:20px;
	}
	.what-we-can .inner .intro h3{
		width: 100%;
	}
	.what-we-can .inner .intro div{
		width: 100%;
	}
	.what-we-can .inner .box-wrap{
		gap:40px;
	}
	.what-we-can .inner .box-wrap .box h4{
		font-size:24px;
	}
	.what-we-can .inner .box-wrap .box div{
		width: 50%;
	}
	.what-we-can .inner .box-wrap .box img{
		width: 50%;
	}
}

/* スマホ（What we can do） */
@media screen and (max-width:600px){
	.what-we-can .inner{
		padding: 60px 30px;
		flex-wrap: wrap;
	}
	.what-we-can .inner .intro h3{
		font-size: 32px;
	}
	.what-we-can .inner .intro h4{
		font-size: 24px;
	}
	.what-we-can .inner .box-wrap{
		flex-direction: column;
	}
	.what-we-can .inner .box-wrap .box{
		flex-direction: column;
		gap:10px;
	}
	.what-we-can .inner .box-wrap .box div,
	.what-we-can .inner .box-wrap .box img{
		width: 100%;
	}
}


/* ====================
   技術者保有資格
==================== */
.license{
	max-width: 1366px;
	padding:130px 80px 65px 80px;
	margin: 0 auto;
}
.license h3{
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 80px 0;
}
.license-wrap{
	display: flex;
	flex-wrap: wrap;
	gap:60px;
}
.license-wrap .license-box{
	background: #F0F4FA;
	padding:0 50px 50px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap:10px;
}
.license-wrap .license-box.box1,
.license-wrap .license-box.box2{
	width: calc(50% - 30px);
}
.license-wrap .license-box.box3{
	width: 100%;
}
.license-wrap .license-box.box1 div{
	display: flex;
}
.license-wrap .license-box.box1 div ul{
	width: 50%;
}
.license-wrap .license-box h4{
	width: 100%;
	font-size: 24px;
	font-weight: 600;
	color:#fff;
	background: #375079;
	border-radius: 100px;
	padding: 6px;
	margin: -28px 0 28px 0;
	text-align: center;
}
.license-wrap .license-box h5{
	width: 100%;
	font-size: 18px;
	font-weight: 600;
	color:#375079;
	background: #fff;
	border:1px solid #375079;
	border-radius: 100px;
	padding: 8px;
	text-align: center;
}
.license-wrap .license-box ul{
	text-align: center;
}
.license-wrap .license-box p{
	text-align: center;
}

/* タブレット（技術者保有資格） */
@media screen and (max-width:1024px){
	.license{
		padding:50px;
	}
	.license-wrap{
		grid-column-gap:20px;
		grid-row-gap: 50px;
	}
	.license-wrap .license-box.box1,
	.license-wrap .license-box.box2{
		width: calc(50% - 10px);
	}
	.license-wrap .license-box{
		padding:0 20px 20px;
	}
	.license-wrap .license-box.box1 div{
		flex-direction: column;
	}
	.license-wrap .license-box.box1 div ul{
		width: 100%;
	}
}

/* スマホ（技術者保有資格） */
@media screen and (max-width:600px){
	.license{
		padding:60px 30px;
	}
	.license h3{
		font-size: 24px;
	}
	.license-wrap{
		flex-direction: column;
		gap:30px;
	}
	.license-wrap .license-box.box1,
	.license-wrap .license-box.box2{
		width:100%;
	}
	.license-wrap .license-box h4{
		font-size: 18px;
		margin: -18px 0 18px 0;
	}
	.license-wrap .license-box h5{
		font-size: 16px;
	}
}


/* ====================
   スタッフ事例
==================== */
.staff{
	max-width: 1366px;
	padding:65px 80px 65px 80px;
	margin: 0 auto;
}
.staff h3{
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 80px 0;
}
.staff ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:20px;
	
}
.staff ul li{
	width:calc(25% - 20px);
	display:inline-block;
	background: #F0F4FA;
	padding:16px 10px;
	border-radius: 50px;
	font-size: 14px;
}
.staff ul li:before{
	content:'';
	display: inline-block;
	background:url("../comon/img/staff-icon.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height:20px;
	vertical-align: middle;
	margin-right: 4px;
}

/* タブレット（スタッフ事例） */
@media screen and (max-width:1024px){
	.staff{
		padding:50px;
	}
	.staff h3{
		margin-bottom: 40px;
	}
	.staff ul{
		gap:10px;
	}
	.staff ul li{
		width:32%;
		font-size: 12px;
	}
	.staff ul li:before{
		width: 14px;
		height:14px;
	}
	.staff ul li:last-child{
		margin-right: auto;
	}
}

/* スマホ（スタッフ事例） */
@media screen and (max-width:600px){
	.staff{
		padding:30px 30px 60px 30px;
	}
	.staff h3{
		font-size: 24px;
	}
	.staff ul li{
		width: 100%;
		font-size: 14px;
	}
	.staff ul li:before{
		width: 18px;
		height:18px;
	}
}



/* ====================
   ITソリューションページ下部　提供サービス
==================== */
.service{
	background-image: url("../comon/img/bg01.svg");
	background-position:top center;
	background-repeat: no-repeat;
	background-size:110%;
}
.service .inner{
	padding: 65px 80px 200px 80px;
	max-width: 1366px;
	margin: 0 auto;
}
.service h3{
	font-size: 32px;
	font-weight: 700;
	margin: 0 auto;
	margin-bottom: 40px;
}
.service .flex-container{
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	gap:80px;
}
.service .flex-container .flex-item {
	width: 36%;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	align-content: flex-start;
}
.service .flex-container .flex-item img{
	margin-bottom: -20px;
}
.service .flex-container .flex-item .service-card{
	position: relative;
	z-index: 10;
	padding: 30px;
	border:1px solid #E1E9F5;
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap:20px;
	background: #FFFFFF99;
}
.service .flex-container .flex-item .service-card a{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	position: relative;
	width: 100%;
	transition: 0.5s;
}
.service .flex-container .flex-item .service-card a span{
	display: block;
	padding-right: 30px;
}
.service .flex-container .flex-item .service-card a:hover{
	opacity: 0.7;
}
.service .flex-container .flex-item .service-card a::after {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	background: url("../comon/img/btn-icon.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	top:50%;
	right:0;
	transform: translateY(-50%);
}
.service .flex-container .flex-item .service-card p{
	color:#121212;
	font-size: 15px;
	text-align: justify;
}
.service .flex-container .flex-item1 div h4{
	font-size: 32px;
	font-weight: 700;
}
.service .flex-container .flex-item2,
.service .flex-container .flex-item4{
	padding-top: 40px;
}
.service .flex-container .flex-item3{
	margin-left: auto;
}

/* タブレット（提供サービス） */
@media screen and (max-width:1024px){
	.service{
		padding: 100px 50px 100px 50px;
	}
	.service .inner{
		padding: 0;
	}
	.service .flex-container{
		gap:40px;
}
	.service .flex-container .flex-item {
		width: 46%;
	}
	.service .flex-container .flex-item .service-card a span{
		padding-right: 24px;
	}
	.service .flex-container .flex-item .service-card a::after {
		width: 24px;
		height: 24px;
	}
	.service .flex-container .flex-item .service-card p{
		font-size: 14px;
	}
	.service .flex-container .flex-item1 div h4{
		font-size: 24px;
	}
}

/* スマホ（提供サービス） */
@media screen and (max-width:600px){
	.service{
		padding: 60px 30px 60px 30px;
		background-size:cover;
	}
	.service h3{
		font-size: 24px;
		margin-bottom: 40px;
	}
	.service .flex-container{
		flex-direction: column;
		gap:40px;
}
	.service .flex-container .flex-item {
		width:100%;
	}
	.service .flex-container .flex-item2,
	.service .flex-container .flex-item4{
		padding-top:0px;
	}
	.service .flex-container .flex-item .service-card a{
		font-size: 16px;
	}
	.service .flex-container .flex-item .service-card a span{
		font-size: 20px;
	}
}

/* ====================
   提供サービスページ
==================== */
#detail-body{
	max-width: 1366px;
	margin: 0 auto;
	padding:150px 80px;
	display: flex;
	flex-wrap: nowrap;
	grid-gap: 60px;
	align-items: flex-start;
}
#detail-body .title-box{
	width: 40%;
	position: sticky;
	top:100px;
}
#detail-body .title-box img{
	position: absolute;
	width: 30px;
}
#detail-body .title-box h2{
	padding-left: 50px;
	font-size: 40px;
	font-weight: 600;
}
#detail-body .title-box h3{
	padding-left: 50px;
	font-size: 18px;
	font-weight: 600;
}
#detail-body .service-box{
	width: 60%;
	display: flex;
	flex-direction: column;
	grid-row-gap: 60px;
}
#detail-body .service-box section{
	display: flex;
	flex-direction: column;
	align-items:center;
	grid-row-gap: 20px;
	padding: 80px;
	border-radius: 20px;
	width: 100%;
	color:#fff;
}
#detail-body .service-box section img{
	width: 80%;
}
#detail-body .service-box h4{
	text-align: center;
	font-size: 36px;
	font-weight: 600;
	color:#fff;
}
#detail-body .service-box h5{
	text-align: left;
	font-size:26px;
	font-weight: 600;
	color:#fff;
}
#detail-body .service-box .sub{
	font-weight: 500;
	text-align: center;
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
	color:#fff;
}
#detail-body .service-box p{
	color:#fff;
}
#Maintenance-Service{
	background: #8E99E6;
}
#Network-Monitoring-Service{
	background: #1266E5CC;
}
#Help-Service{
	background: #0091DECC;
}
#System-Development-Support{
	background: #12B0C4CC;
}

/* タブレット（提供サービスページ） */
@media screen and (max-width:1024px){
	#detail-body{
		padding:150px 50px;
		grid-gap: 30px;
	}
	#detail-body .service-box section{
		padding: 40px;
	}
	#detail-body .title-box img{
		width: 24px;
	}
	#detail-body .title-box h2{
		font-size:4.8vw;
		padding-left: 30px;
	}
	#detail-body .title-box h3{
		padding-left: 30px;
	}
	#detail-body .service-box h4{
		font-size: 28px;
	}
	#detail-body .service-box h5{
		font-size:22px;
	}
}
/* スマホ（提供サービスページ） */
@media screen and (max-width:600px){
	#detail-body{
		padding:150px 30px;
		flex-direction: column
	}
	#detail-body .title-box{
		width:100%;
		position:relative;
		top:0px;
	}
	#detail-body .title-box img{
		display: none;
	}
	#detail-body .title-box h2{
		font-size:7.4vw;
		padding-left: 0;
	}
	#detail-body .title-box h3{
		font-size: 12px;
		padding-left: 0;
	}
	#detail-body .service-box{
		width: 100%;
	}
	#detail-body .service-box section{
		padding:40px 20px;
	}
	#detail-body .service-box h4{
		font-size:7vw;
	}
	#detail-body .service-box h5{
		font-size:6vw;
	}
	#detail-body .service-box .sub{
		font-size: 12px;
	}
}