@charset "UTF-8";

/*
	共通
-----------------------------------------------------------------------------------------------*/
.serviceOut{
	background-color:#222222;
}
#olistPan li{
	color:rgba(255,255,255,0.35);
}
#olistPan li a{
	color:rgba(255,255,255,0.6);
}
#olistPan li::after{
	border-color:rgba(255,255,255,0.6);
}
#lead{
	padding:15px 0 30px 0;
	text-align:center;
}

#titServiceIdx{
	width:308px;
	height:99px;
	margin:40px auto 0 auto;
	background:url(../images/tit_service_idx.png) left top no-repeat;
}
.serviceIdxTitArea{
	padding:0 0 30px 0;
	margin:-30px 0 0 0;
}
.serviceIdxTitArea p{
	padding:40px 0 0 10px;
	color:#FFFFFF;
	float:left;
}
.listServiceLineUp{
	display:flex;
	margin:0 0 -40px 0;
	flex-wrap:wrap;
}
.listServiceLineUp li figure{
	padding:30px 0 0 0;
	text-align:center;
	position:relative;
}
.listServiceLineUp li figcaption{
	padding:0 0 15px 0;
	font-size:1.2rem;
	color:#FFFF00;
	letter-spacing:0.05em;
	white-space:nowrap;
	background:url(../images/bg_service_comment_pc.png) center bottom no-repeat;
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
}
.listServiceLineUp .tit{
	padding:0 0 10px 0;
	font-size:2.0rem;
	font-weight:bold;
	color:#FFFF00;
	text-align:center;
}


/*
	デザイン
-----------------------------------------------------------------------------------------------*/
#designOut{
	background:radial-gradient(ellipse at center, #ec7b98 60%,#e46171 95%);
}
#titDesign{
	min-height:116px;
	padding:30px 0 0 168px;
	font-family:'Yu Mincho',YuMincho,'游明朝','ヒラギノ明朝 Pro W3',Hiragino Mincho Pro,'ＭＳ Ｐ明朝',MS PMincho,serif;
	font-size:5.2rem;
	color:#0069b1;
	background:url(../images/tit_service_des_en_pc.png) 172px bottom no-repeat,url(../images/bg_service_design.png) left top no-repeat;
	float:left;
}
#titDesign span:nth-of-type(1){
	color:#C4272D;
}
#titDesign span:nth-of-type(2){
	color:#6A408A;
}
#titDesign span:nth-of-type(3){
	color:#006837;
}
.listServiceLineUp.design li{
	width:calc((100% - 90px)/4);
	margin:0 30px 40px 0;
}
.listServiceLineUp.design li:nth-of-type(4n){
	margin:0 0 40px 0;
}


/*
	システム
-----------------------------------------------------------------------------------------------*/
#systemOut{
	background:radial-gradient(ellipse at center, #0097B5 60%,#0084A4 95%);
}
#systemOut .serviceIdxTitArea{
	margin:-42px 0 0 0;
}
#titSystem{
	min-height:128px;
	padding:42px 0 0 168px;
	font-family:'Yu Mincho',YuMincho,'游明朝','ヒラギノ明朝 Pro W3',Hiragino Mincho Pro,'ＭＳ Ｐ明朝',MS PMincho,serif;
	font-size:5.2rem;
	color:#96DE1E;
	background:url(../images/tit_service_sys_en_pc.png) 172px bottom no-repeat,url(../images/bg_service_system.png) left bottom no-repeat;
	float:left;
}
#systemOut .serviceIdxTitArea p{
	padding:52px 0 0 10px;
}
#titSystem span:nth-of-type(1){
	color:#FF798F;
}
#titSystem span:nth-of-type(2){
	color:#80D4E1;
}
#titSystem span:nth-of-type(3){
	color:#EC881E;
}
.listServiceLineUp{
	justify-content:center;
}
.listServiceLineUp.system li{
	width:350px;
	margin:0 30px 40px 0;
}
.listServiceLineUp.system li:last-of-type{
	margin:0 0 40px 0;
}
a.btnCanals{
	display:block;
	width:590px;
	height:80px;
	margin:30px auto 0 auto;
	font-size:1.6rem;
	font-weight:bold;
	line-height:64px;
	text-align:center;
	color:#000000;
	border-radius:40px;
	background:url(../images/ico_window.png) right 25px center no-repeat,url(../images/bg_gauss.png) left top repeat #FFFF00;
	border:8px solid #FFFFFF;
	box-shadow:0 0 20px rgba(0,75,104,0.8);
	transition:box-shadow 0.2s,transform 0.2s;
}
a.btnCanals:hover{
	box-shadow:0 0 10px rgba(0,75,104,0);
	transform:translateY(2px);
}
.btnCanals img{
	padding:0 10px 0 0;
	vertical-align:middle;
	position:relative;
	top:-2px;
}




@media screen and (max-width:667px){
	/*
		共通
	-----------------------------------------------------------------------------------------------*/
	#lead{
		padding:10px 0 20px 0;
		text-align:center;
	}
	#titServiceIdx{
		width:154px;
		height:49px;
		margin:10px auto 0 auto;
		background-size:154px 49px;
	}
	.serviceIdxTitArea{
		padding:10px 0 30px 0;
		margin:0;
	}
	.serviceIdxTitArea p{
		padding:10px 0 0 0;
		float:none;
	}
	.listServiceLineUp{
		margin:0 0 -40px 0;
	}
	.listServiceLineUp li figure{
	padding:30px 0 0 0;
	text-align:center;
	position:relative;
	}
	.listServiceLineUp li figcaption{
		font-size:1.0rem;
		background:url(../images/bg_service_comment_sp.png) center bottom no-repeat;
		background-size:172px 8px;
	}
	.listServiceLineUp .tit{
		padding:0 0 5px 0;
		font-size:1.6rem;
	}
	/* 長体 */
	.listServiceLineUp .tit.ratio85{
		width:calc(100%/0.85);
		transform-origin:top left;
		transform:scale(0.85,1)
	}
	.listServiceLineUp .tit.ratio75{
		width:calc(100%/0.75);
		transform-origin:top left;
		transform:scale(0.75,1)
	}
	.listServiceLineUp li p{
		font-size:1.2rem;
	}
	
	/*
		デザイン
	-----------------------------------------------------------------------------------------------*/
	#titDesign{
		min-height:58px;
		padding:0 0 0 90px;
		font-size:3.6rem;
		background:url(../images/tit_service_des_en_sp.png) 92px bottom no-repeat,url(../images/bg_service_design.png) left top no-repeat;
		background-size:40px 12px,81px 58px;
		float:none;
	}
	.listServiceLineUp.design li{
		width:calc((100% - 20px)/2);
		margin:0 20px 40px 0;
	}
	.listServiceLineUp.design li:nth-of-type(2n){
		margin:0 0 40px 0;
	}
	
	
	/*
		システム
	-----------------------------------------------------------------------------------------------*/
	#systemOut .serviceIdxTitArea{
		margin:0;
	}
	#titSystem{
		min-height:57px;
		padding:0 0 0 90px;
		font-size:3.6rem;
		background:url(../images/tit_service_sys_en_sp.png) 92px bottom no-repeat,url(../images/bg_service_system.png) left bottom no-repeat;
		background-size:41px 11px,76px 57px;
		float:none;
	}
	#systemOut .serviceIdxTitArea p{
		padding:10px 0 0 0;
	}
	.listServiceLineUp.system li{
		width:calc((100% - 20px)/2);
		margin:0 20px 40px 0;
	}
	.listServiceLineUp.system li:nth-of-type(2n){
		margin:0 0 40px 0;
	}
	.listServiceLineUp.system li:last-of-type .tit{
		padding:10px 0 14px 0;
	}
	a.btnCanals{
		display:block;
		width:100%;
		height:auto;
		padding:14px 10px 10px 10px;
		margin:30px auto 0 auto;
		font-size:1.4rem;
		line-height:145%;
		border-radius:10px;
		background:url(../images/ico_window.png) right 12px center no-repeat,url(../images/bg_gauss.png) left top repeat #FFFF00;
		background-size:13px 13px,250px 250px;
		border:6px solid #FFFFFF;
		box-shadow:0 0 20px rgba(0,75,104,0.8);
		transition:box-shadow 0.2s,transform 0.2s;
	}
	.btnCanals img{
		width:122px;
		padding:0 0 8px 0;
		vertical-align:middle;
		position:static;
		top:auto;
	}
}