@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/

/*animation*/
.titleanimation{
}

.titleanimation .maintitle > span{
	overflow: hidden;
}
.titleanimation .maintitle .animation{
	transform: translateY(100%);
	transition-duration: 1.0s;
	transition-timing-function: ease;
}
.titleanimation .maintitle .en .animation{
	transition-delay: 0.2s;
}
.titleanimation .maintitle .ja .animation{
	transition-delay: 0.4s;
}

.titleanimation.on .maintitle .animation{
	transform: translateY(0);
}



/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	
	/*---------------------------------------------------------------
	
	京セラドキュメントソリューションズの仕事
	
	----------------------------------------------------------------*/	

	h1,h2,h3{
		font-weight: 500;
	}
	#main{
		padding-top: 64px;
		padding-bottom: 200px;
		overflow: hidden;
		position: relative;
		
	}
	#main:after{
		content: '';
		display: block;
		position: absolute;
		background:#f1f1f1 url("../img/work/bg.png") no-repeat top center;
		background-size: 100% auto;
		top: 64px;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	#maintitleArea{		
		position: relative;
		padding: 140px 0 170px;
		color: #fff;
	}
		#maintitleArea:after{
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 228px;
			top: 0;
			left: 0;
			z-index: -1;
		}

		#maintitleArea .maintitle{
			text-align: center;			
			margin-bottom: 50px;
		}
			#maintitleArea .maintitle span{
				display: block;
			}
				#maintitleArea .maintitle .en{
					font-size: 50px;
					line-height: 1em;
					letter-spacing: 0.2em;
					font-weight: normal;
					margin-bottom: 10px;
				}
				#maintitleArea .maintitle .ja{
					font-size: 26px;
					font-feature-settings: "palt";
					letter-spacing: 0.3em;
				}
	#maintitleArea .lead{
		text-align: center;
		font-size: 16px;
		line-height: 2;
		margin-top: 50px;
		font-weight: 400;
	}
		#maintitleArea .anc_link{
			display: block;		
			position: relative;			
			color: #fff;
			font-weight: 400;
			height: 65px;
			line-height: 65px;
			width: 270px;
			margin: 60px auto 0;
			text-align: center;
			font-size: 20px;
		}
				#maintitleArea .anc_link .inner{
					width: 100%;
					height: 100%;
					background-color: #000;
					position: relative;
					overflow: hidden;
				}
					#maintitleArea .anc_link:after,
					#maintitleArea .anc_link .inner:after{
						content: '';
						display: block;
						position: absolute;		
						width: 28px;
						height: 9px;
						transform: rotate(90deg);
						right: 0;
						left: 0;
						bottom: -5px;
						margin: 0 auto;
						transition: 0.4s;
					}
					#maintitleArea .anc_link:after{
						background: url("../../common/img/arrow_b.svg") no-repeat center;
						background-size: auto 100%;
						z-index: 0;
					}
					#maintitleArea .anc_link .inner:after{
						background: url("../../common/img/arrow.svg") no-repeat center;
						background-size: auto 100%;
						z-index: 1;
					}
						#maintitleArea .anc_link:hover:after,
						#maintitleArea .anc_link:hover .inner:after{
							bottom: -12px;
						}

	
	#about.work .sec{
		position: relative;
	}
	#about.work .sec + .sec{
		padding-top: 130px;
	}
	#about.work .sec .wrap{
		position: relative;
	}
	
	
	
	/* fig_Area
	---------------------------------*/
	#about.work #fig_Area{
		
	}
		#about.work #fig_Area .fig{
			position: relative;
		}
			#about.work #fig_Area .img_box{
				position: relative;
			}
			#about.work #fig_Area .link_list{

			}
				#about.work #fig_Area .link_list li{
					position: absolute;
					width: 155px;
					height: 51px;
				}
					#about.work #fig_Area .link_list li.dev{
						width: 149px;
						top: 240px;
						left: 20px;
					}
					#about.work #fig_Area .link_list li.quo{
						width: 144px;
						top: 240px;
						left: 192px;
					}
					/*#about.work #fig_Area .link_list li{
						width: 160px;
						top: 240px;
						right: 50%;
					}*/
					#about.work #fig_Area .link_list li.mark{
						top: 337px;
						left: 20px;
					}
					#about.work #fig_Area .link_list li.dev2{
						top: 337px;
						left: 185px;
					}
					#about.work #fig_Area .link_list li.make{
						top: 337px;
						right: calc(50% + 15px);
					}
					#about.work #fig_Area .link_list li.legal{
						width: 486px;
						top: 407px;
						left: 20px;
					}
					#about.work #fig_Area .link_list li.staff{
						width: 999px;
						bottom: 26px;
						left: 19px;
					}
					#about.work #fig_Area .link_list li.sol{
						height: 122px;
						bottom: 95px;
						left: calc(50% + 13px);
					}
					#about.work #fig_Area .link_list li.tec{
						height: 122px;
						bottom: 95px;
						left: calc(50% + 178px);
					}
					#about.work #fig_Area .link_list li.cust{
						height: 122px;
						bottom: 95px;
						right: 22px;
					}
						#about.work #fig_Area .link_list li a{
							display: block;
							position: relative;
							text-align: center;
							width: 100%;
							height: 100%;
							color: transparent;
							background-color: #fff;
							opacity: 0;
						}
						#about.work #fig_Area .link_list li a:hover{
							opacity: 0.6;
						}

	
		
	/* work_list
	---------------------------------*/
	#about.work #work_list{
	}
		#about.work #work_list ul{
			position: relative;
		}
	
		#about.work #work_list ul li{
			position: relative;
			width: 484px;
			float: left;
			margin-top: -64px;
			padding-top: 64px;
		}
		#about.work #work_list ul li:nth-of-type(2n){
			float: right;
		}
		#about.work #work_list ul li:nth-of-type(n + 3){
			margin-top: 16px;/* 80px - hedderHeight */
		}
	
			#about.work #work_list ul li h2{
				position: relative;
				margin-top: -38px;
			}
				#about.work #work_list ul li h2 span.line{
					display: inline-block;
					color: #fff;
					padding: 0 8px 0 10px;
					box-sizing: border-box;
					font-size: 24px;
					background-color: #0a9bcd;
					line-height: 38px;
					height: 38px;
					font-feature-settings: "palt";
					letter-spacing: 0.15em;
				}
				#about.work #work_list ul li:nth-of-type(2n):not(:nth-of-type(4n)) h2 span.line,
				#about.work #work_list ul li:nth-of-type(4n - 1) h2 span.line{
					background-color: #6e3cbe;
				}
			#about.work #work_list ul li .txt_box{
				text-align: justify;
				line-break: strict;
				word-wrap: break-word;
				overflow-wrap: break-word;
				line-height: 2.2;
				letter-spacing: 0.08em;
				margin-top: 20px;
			}
	
	
	
	/* mat
	---------------------------------*/
	#about.work #mat{		
	}
		#about.work #mat h3{
			position: relative;
			text-align: center;
			margin-bottom: 40px;
			font-size: 20px;		
		}
			#about.work #mat h3:after{
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 7px;
				background-color: #fff;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto 0;
				z-index: 0;
			}
			#about.work #mat h3 span{
				display: inline-block;
				padding: 0 10px;
				background-color: #f1f1f1;
				position: relative;
				z-index: 1;
				font-feature-settings: "palt";
				letter-spacing: 0.2em;
			}
	
	#about.work #mat table{
		width: 100%;
		margin: 40px 0 0;
		border-collapse: collapse;
	}
		#about.work #mat table thead{

		}
			#about.work #mat table thead th{
				background-color: #000;
				border-left: 1px solid #fff;
			}
				#about.work #mat table thead th:first-of-type{
					background-color: #f1f1f1;
					border-left: none;
				}	
		#about.work #mat table th{
			color: #fff;
			padding: 10px 5px;
			font-feature-settings: "palt";
			letter-spacing: 0.2em;
		}
			#about.work #mat table tbody th{
				background-color: #6e3cbe;
				border-top: 1px solid #fff;
				text-align: left;
				padding: 5px 10px;
			}
				#about.work #mat table tbody tr:first-of-type th{
					border-top: none;
				}
		#about.work #mat table tbody td{
			background-color: #fff;
			border-bottom: 1px solid #c8c8c8;
			border-right: 1px solid #c8c8c8;
			box-sizing: border-box;
			width: 115px;
		}
			#about.work #mat table tbody tr:last-of-type td{
				border-bottom: none;
			}
			#about.work #mat table tbody tr td:last-of-type{
				border-right: none;
			}
				#about.work #mat .true,
				#about.work #mat .true2{
					position: relative;
					display: block;
					width: 15px;
					height: 15px;
					border-radius: 15px;
					margin: 0 auto;
					border: 2px solid #6e3cbe;
				}
				#about.work #mat .true2:after{
					content: '';
					display: block;
					position: absolute;
					width: 7px;
					height: 7px;
					border-radius: 15px;
					border: 2px solid #6e3cbe;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			#about.work #mat .sample{
				margin-top: 20px;		
			}
				#about.work #mat .sample p{
					padding-left: 20px;
					position: relative;
				}
					#about.work #mat .sample .true,
					#about.work #mat .sample .true2{
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}
	
	
	

	/*deco*/
	#about.work #maintitleArea .deco01{
		top: 80px;
		left: 30%;
	}
	#about.work #maintitleArea .deco02{
		top: 50%;
		left: 4vw;
	}
	#about.work #maintitleArea .deco03{
		top: calc(50% + 12px);		
		left: 0;
	}
	#about.work #maintitleArea .deco04{
		bottom: 227px;
		right: 12vw;
	}
	#about.work #maintitleArea .deco05{
		bottom: 200px;
		right: 0;
	}
	/*#work_list*/
	#about.work #work_list .deco{
	}
	#about.work #work_list > .deco01{
		left: -2vw;
		top: 800px;
	}	
	#about.work #work_list > .deco02{
		left: 2vw;
		top: 812px;
	}
	#about.work #work_list > .deco03{
		right: 50%;
		top: 830px;
		z-index: 2;
	}
	#about.work #work_list > .deco04{
		right: 0;
		bottom: 1200px;
	}
	#about.work #work_list > .deco05{
		bottom: 427px;
		right: 12vw;
	}
	#about.work #work_list > .deco06{
		bottom: 400px;
		right: 0;
	}
	#about.work #work_list > .deco07{
		bottom: 300px;
		right: 300px;
	}
	#about.work #work_list > .deco08{
		bottom: 100px;
		right: 100px;
	}

	#about.work #work_list .wrap .deco01{
		left: -4vw;
		top: 307px;
	}	
	#about.work #work_list .wrap .deco02{
		right: -4vw;
		top: 52px;
	}
	#about.work #work_list .wrap .deco03{
		left: -4vw;
		top: 307px;
	}
	#about.work #work_list .wrap .deco04{
		right: -4vw;
		top: 52px;
	}
	#about.work #work_list .wrap .deco05{
		left: -4vw;
		top: 307px;
	}
	

	
	

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	
	/*---------------------------------------------------------------
	
	京セラドキュメントソリューションズの仕事
	
	----------------------------------------------------------------*/	

	h1,h2,h3{
		font-weight: 500;
	}
	#main{
		padding-top: 64px;
		padding-bottom: 60px;
		overflow: hidden;
		position: relative;
		
	}
	#main:after{
		content: '';
		display: block;
		position: absolute;
		background:#f1f1f1 url("../img/work/bg_sp.png") no-repeat top center;
		background-size: 100% auto;
		top: 64px;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	#maintitleArea{		
		position: relative;
		padding: 40px 0 80px;
		color: #fff;
	}
		#maintitleArea:after{
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 228px;
			top: 0;
			left: 0;
			z-index: -1;
		}

		#maintitleArea .maintitle{
			text-align: center;
		}
			#maintitleArea .maintitle span{
				display: block;
			}
				#maintitleArea .maintitle .en{
					font-size: 7vw;
					line-height: 1em;
					letter-spacing: 0.1em;
					font-weight: normal;
					margin-bottom: 5px;
				}
				#maintitleArea .maintitle .ja{
					font-size: 16px;
					font-feature-settings: "palt";
					letter-spacing: 0.3em;
					line-height: 1.5;
				}
	#maintitleArea .lead{
		line-height: 2;
		margin-top: 20px;
		font-weight: 400;
		padding: 0 5%;
		text-align: justify;
		line-break: strict;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
		#maintitleArea .anc_link{
			display: block;		
			position: relative;			
			color: #fff;
			font-weight: 400;
			height: 40px;
			line-height: 40px;
			width: 270px;
			margin: 20px auto 0;
			text-align: center;
			font-size: 16px;
		}
				#maintitleArea .anc_link .inner{
					width: 100%;
					height: 100%;
					background-color: #000;
					position: relative;
					overflow: hidden;
				}
					#maintitleArea .anc_link:after,
					#maintitleArea .anc_link .inner:after{
						content: '';
						display: block;
						position: absolute;		
						width: 14px;
						height: 5px;
						transform: rotate(90deg);
						right: 0;
						left: 0;
						bottom: -5px;
						margin: 0 auto;
						transition: 0.4s;
					}
					#maintitleArea .anc_link:after{
						background: url("../../common/img/arrow_b.svg") no-repeat center;
						background-size: auto 100%;
						z-index: 0;
					}
					#maintitleArea .anc_link .inner:after{
						background: url("../../common/img/arrow.svg") no-repeat center;
						background-size: auto 100%;
						z-index: 1;
					}
						#maintitleArea .anc_link:hover:after,
						#maintitleArea .anc_link:hover .inner:after{
							bottom: -12px;
						}

	
	#about.work .sec{
		position: relative;
	}
	#about.work .sec + .sec{
		padding-top: 80px;
	}
	#about.work .sec .wrap{
		position: relative;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	
	
	/* fig_Area
	---------------------------------*/
	#about.work #fig_Area{
		
	}
		#about.work #fig_Area .fig{
			position: relative;
			
		}
			#about.work #fig_Area .img_box{
				position: relative;
				width: 1040px;
			}
			#about.work #fig_Area .link_list{

			}
				#about.work #fig_Area .link_list li{
					position: absolute;
					width: 155px;
					height: 51px;
				}
					#about.work #fig_Area .link_list li.dev{
						width: 149px;
						top: 240px;
						left: 20px;
					}
					#about.work #fig_Area .link_list li.quo{
						width: 144px;
						top: 240px;
						left: 192px;
					}
					/*#about.work #fig_Area .link_list li{
						width: 160px;
						top: 240px;
						right: 50%;
					}*/
					#about.work #fig_Area .link_list li.mark{
						top: 337px;
						left: 20px;
					}
					#about.work #fig_Area .link_list li.dev2{
						top: 337px;
						left: 185px;
					}
					#about.work #fig_Area .link_list li.make{
						top: 337px;
						right: calc(50% + 15px);
					}
					#about.work #fig_Area .link_list li.legal{
						width: 486px;
						top: 407px;
						left: 20px;
					}
					#about.work #fig_Area .link_list li.staff{
						width: 999px;
						bottom: 26px;
						left: 19px;
					}
					#about.work #fig_Area .link_list li.sol{
						height: 122px;
						bottom: 95px;
						left: calc(50% + 13px);
					}
					#about.work #fig_Area .link_list li.tec{
						height: 122px;
						bottom: 95px;
						left: calc(50% + 178px);
					}
					#about.work #fig_Area .link_list li.cust{
						height: 122px;
						bottom: 95px;
						right: 22px;
					}
						#about.work #fig_Area .link_list li a{
							display: block;
							position: relative;
							text-align: center;
							width: 100%;
							height: 100%;
							color: transparent;
							background-color: #fff;
							opacity: 0;
						}

	
		
	/* work_list
	---------------------------------*/
	#about.work #work_list{
	}
		#about.work #work_list ul{
			position: relative;
		}
	
		#about.work #work_list ul li{
			position: relative;
			width: 100%;
			margin-top: -50px;
			padding-top: 50px;
		}
		#about.work #work_list ul li:nth-of-type(2n){
		}
		#about.work #work_list ul li + li{
			margin-top: 10px;/* 40px - hedderHeight */
		}
	
			#about.work #work_list ul li h2{
				position: relative;
				margin-top: -38px;
			}
				#about.work #work_list ul li h2 span.line{
					display: inline-block;
					color: #fff;
					padding: 0 8px 0 10px;
					box-sizing: border-box;
					font-size: 18px;
					background-color: #0a9bcd;
					line-height: 38px;
					height: 38px;
					font-feature-settings: "palt";
					letter-spacing: 0.15em;
				}
				#about.work #work_list ul li:nth-of-type(2n):not(:nth-of-type(4n)) h2 span.line,
				#about.work #work_list ul li:nth-of-type(4n - 1) h2 span.line{
					background-color: #6e3cbe;
				}
			#about.work #work_list ul li .txt_box{
				text-align: justify;
				line-break: strict;
				word-wrap: break-word;
				overflow-wrap: break-word;
				line-height: 2.2;
				letter-spacing: 0.08em;
				margin-top: 20px;
			}
	
	
	
	/* mat
	---------------------------------*/
	#about.work #mat{		
	}
		#about.work #mat h3{
			position: relative;
			text-align: center;
			margin-bottom: 40px;
			font-size: 20px;		
		}
			#about.work #mat h3:after{
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 7px;
				background-color: #fff;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto 0;
				z-index: 0;
			}
			#about.work #mat h3 span{
				display: inline-block;
				padding: 0 10px;
				background-color: #f1f1f1;
				position: relative;
				z-index: 1;
				font-feature-settings: "palt";
				letter-spacing: 0.2em;
			}
	#about.work #mat .table{
		padding-bottom: 40px;
	}
	#about.work #mat table{
		width: 560px;
		border-collapse: collapse;
		font-size: 12px;
	}
		#about.work #mat table thead{

		}
			#about.work #mat table thead th{
				background-color: #000;
				border-left: 1px solid #fff;
			}
				#about.work #mat table thead th:first-of-type{
					background-color: #f1f1f1;
					border-left: none;
				}	
		#about.work #mat table th{
			color: #fff;
			padding: 5px;
			font-feature-settings: "palt";
			letter-spacing: 0.2em;
			line-height: 1.5;
		}
			#about.work #mat table tbody th{
				background-color: #6e3cbe;
				border-top: 1px solid #fff;
				text-align: left;
				padding: 5px 10px;
				width: 250px;
			}
				#about.work #mat table tbody tr:first-of-type th{
					border-top: none;
				}
		#about.work #mat table tbody td{
			background-color: #fff;
			border-bottom: 1px solid #c8c8c8;
			border-right: 1px solid #c8c8c8;
			box-sizing: border-box;
			width: 115px;
			padding: 10px 0!important;
		}
			#about.work #mat table tbody tr:last-of-type td{
				border-bottom: none;
			}
			#about.work #mat table tbody tr td:last-of-type{
				border-right: none;
			}
				#about.work #mat .true,
				#about.work #mat .true2{
					position: relative;
					display: block;
					width: 15px;
					height: 15px;
					border-radius: 15px;
					margin: 0 auto;
					border: 2px solid #6e3cbe;
				}
				#about.work #mat .true2:after{
					content: '';
					display: block;
					position: absolute;
					width: 7px;
					height: 7px;
					border-radius: 15px;
					border: 2px solid #6e3cbe;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			#about.work #mat .sample{
				margin-top: 20px;		
			}
				#about.work #mat .sample p{
					padding-left: 20px;
					position: relative;
				}
					#about.work #mat .sample .true,
					#about.work #mat .sample .true2{
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
					}
	
	
	

	/*deco*/
	#about.work #maintitleArea .deco01{
		top: 0;
		left: 5%;
	}
	#about.work #maintitleArea .deco02{
		top: 100px;
		left: 7vw;
	}
	#about.work #maintitleArea .deco03{
		top: 107px;
		left: 0;
	}
	#about.work #maintitleArea .deco04{
		top: 100px;
		right: 16vw;
	}
	#about.work #maintitleArea .deco05{
		top: 107px;
		right: 0;
	}
	/*#work_list*/
	#about.work #work_list .deco{
	}
	#about.work #work_list > .deco01{
		left: 0;
		top: 20px;
	}	
	#about.work #work_list > .deco02{
		right: 0;
		top: 40px;
	}
	#about.work #work_list > .deco03{
		display: none;
	}
	#about.work #work_list > .deco04{
		display: none;
	}
	#about.work #work_list > .deco05{
		bottom: 0;
		right: 16vw;
	}
	#about.work #work_list > .deco06{
		bottom: -15px;
		right: 0;
	}
	#about.work #work_list > .deco07{
		bottom: -30px;
		left: 3vw;
	}
	#about.work #work_list > .deco08{
		bottom: -37px;
		left: 10vw;
	}

	#about.work #work_list .wrap .deco01{
		left: -7vw;
		top: calc(45.2vw + 40px);
	}	
	#about.work #work_list .wrap .deco02{
		right: -7vw;
		top: 33px;
	}
	#about.work #work_list .wrap .deco03{
		left: -7vw;
		top: calc(45.2vw + 40px);
	}
	#about.work #work_list .wrap .deco04{
		right: -7vw;
		top: 33px;
	}
	#about.work #work_list .wrap .deco05{
		left: -7vw;
		top: calc(45.2vw + 40px);
	}
	
	
	
	

}