@charset "utf-8";

.abs{position: absolute; display: block;}
.rel{position: relative; display: block;}

.block{width: 1100px; margin: auto; padding: 40px; box-sizing: border-box; overflow: hidden;}

#intro-wrapper{clear: both;}
#intro-wrapper{margin: 0 auto; width: 1100px;}
#content-wrapper{width: 100%; font-family:Eurostile, Arial, Helvetica, sans-serif; color: #595757; line-height: 1.4; -webkit-text-size-adjust: 100%;}
#footer-wrapper{width:100%;height:80px; background:#fff;}

#intro-wrapper #intro{height: 475px; background: url("../img/anim/bg01.png") no-repeat; overflow: hidden;}
#intro-wrapper #intro .slide{width: 100%; height: 100%; display: block; opacity: 0;}
#intro-wrapper #intro .top_printer{
	top: 38px; left: 387px; opacity: 0;
}
#intro-wrapper #intro .top_printer01{opacity: 1;}
#intro-wrapper #intro .top_printer03{opacity: 0;}

#intro-wrapper #intro #slide01_sub{
	background: url("../img/anim/bg03.png") no-repeat;
}
#intro-wrapper #intro #slide_overlay{
	background: url("../img/anim/bg02.png") no-repeat;
}

#intro-wrapper #intro #slide02{
	background: url("../img/anim/bg04.png") no-repeat;
}

#intro-wrapper #intro #slide03 .middle_printer{
	left: 435px; top: 101px; opacity: 1;
}

#intro-wrapper #intro #slide_white{
	background: #ffffff;
}


#intro-wrapper #intro #slide03 .middle_copy01{
	left: 65px; top: 154px;
	height:128px;
}

#intro-wrapper #intro #slide03 .middle_copy02{
	left: 66px; top: 212px;
	height: 131px;
}

#intro-wrapper #intro #slide03 .middle_copy{
	 width: 0; 
}
#intro-wrapper #intro #slide03 .middle_copy .rel{
	overflow: hidden;
}

#intro-wrapper #intro #slide03 .middle_copy .flash{
	z-index: 2; opacity: 0;
	background: url("../img/anim/flash.png") no-repeat;
	width: 541px; height: 226px; right: -300px; bottom: -60px;
}

#intro-wrapper #intro .slide:after,
.clearBlock:after{
	clear: both;
	content: "";
	display: block;
}



#intro-wrapper #intro #slide04 .lineup_printer{opacity: 0;}
#intro-wrapper #intro #slide04 .lineup_printer01{
	left: 23px; top: 155px;
}
#intro-wrapper #intro #slide04 .lineup_printer02{
	left: 254px; top: 157px;
}
#intro-wrapper #intro #slide04 .lineup_printer03{
	left: 368px; top: 151px;
}
#intro-wrapper #intro #slide04 .lineup_printer04{
	left: 575px; top: 151px;
}
#intro-wrapper #intro #slide04 .lineup_printer05{
	left: 691px; top: 153px;
}
#intro-wrapper #intro #slide04 .lineup_printer06,
#intro-wrapper #intro #slide04 .lineup_printer06_flash,
#intro-wrapper #intro #slide04 .lineup_printer06_back_flash{
	left: 869px; top: 163px; opacity: 0;
}





.back-el{
	background-image: url("../img/anim/main_copy.png") !important;
	background-repeat: no-repeat !important;
	height: 100%;
	float: left;
	z-index: 1;
	position: relative;
	display: none;
	padding: 0; margin: 0; opacity: 0;
}
#mainText{width: 1100px; height: 134px; top: 25px; left: 0; z-index: 9;}


#slide05 .overlay{width: 1100px; height: 475px; z-index: 2;
margin: auto;
	left: 0;
	top: 0;
	display: none;
}
.toBeMasked{width: 1100px; height: 475px; z-index: 3;
margin: auto;
	left: 0;
	top: 0;
}
.toBeMasked .abs{display: none;}
.toBeMasked .e01{left: 27px; top: 132px;}
.toBeMasked .e02{left: 249px; top: 142px;}
.toBeMasked .e03{left: 404px; top: 136px;}
.toBeMasked .e04{left: 644px; top: 135px;}
.toBeMasked .e05{left: 773px; top: 131px;}

.dot{
  width:10px;
  height:10px;
  position:absolute;
  background-color:#000000;
  border-radius: 50%;
  z-index:2;
	opacity: 0.7;
	box-shadow: 0 0 10px #ffffff;
}
.dot.animDot{
	-webkit-animation: shine 3.0s;
	animation: shine 3.0s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

/**************/

#content-wrapper section{
	width: 100%;
}

.topText{width: 981px; padding: 50px 0 60px; overflow: inherit !important;}
.topText p{font-size: 22px; opacity: 0;}
.topText p span{display: inline-block; position: relative; color: #ffffff; font-weight: bold;}
.topText p span:after{position: absolute; top: 0; left: 0; font-size: 22px;
width: 100%; height: 100%; text-align: center; color: #595757;
transition : all .1s linear;  font-weight: normal;
}

.topText p span.word01:after{content: "customizable solutions";}
.topText p span.word02:after{content: "simplify complex tasks";}
.topText p span.word03:after{content: "managing diverse information";}
.topText p span.word04:after{content: "efficiently and safely to maximize your productivity"; text-align: left;}
.topText p span.word04{font-weight: normal;}
.topText p span.word05:after{content: "green objectives";}

.topText p span.moved.word04{
	font-weight: bold;
}

.topText p span.moved:after{
	opacity: 0;
}


.floatLeft{float: left; width: 500px;}
.floatRight{float: Right; width: 500px;}
.textFloat{width: 480px;}
.honbun{font-size: 18px; line-height: 1.5; opacity: 0;}
.caption{font-size: 16px; line-height: 1.3;}

.bgGrey{background: #eeeeee;}
.block h2{
	 overflow: hidden;
	width: 0px;
}

.block h2:after{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: block;
	content: '';
	width: 25px;
	height: 100%;
}


#technologyforeveryworkplace h2:after{
	background: -webkit-linear-gradient(left, rgba(255,126,0,0) 30%, rgba(255,126,0,1) 100%);
	background: linear-gradient(to right, rgba(255,126,0,0) 30%, rgba(255,126,0,1) 100%);
}

#customizableSolutions h2:after{
	background: -webkit-linear-gradient(left, rgba(255,0,0,0) 30%, rgba(255,0,0,1) 100%);
	background: linear-gradient(to right, rgba(255,0,0,0) 30%, rgba(255,0,0,1) 100%);
}
#simplifyComplexTasks h2:after{
	background: -webkit-linear-gradient(left, rgba(0,36,184,0) 30%, rgba(0,36,184,1) 100%);
	background: linear-gradient(to right, rgba(0,36,184,0) 30%, rgba(0,36,184,1) 100%);
}

#managingDiverseInformation h2:after{
	background: -webkit-linear-gradient(left, rgba(107,8,188,0) 30%, rgba(107,8,188,1) 100%);
	background: linear-gradient(to right, rgba(107,8,188,0) 30%, rgba(107,8,188,1) 100%);
}

#efficientlySafely h2:after{
	background: -webkit-linear-gradient(left, rgba(0,158,255,0) 30%, rgba(0,158,255,1) 100%);
	background: linear-gradient(to right, rgba(0,158,255,0) 30%, rgba(0,158,255,1) 100%);
}

#efficientlySafely h2:after{
	background: -webkit-linear-gradient(left, rgba(0,158,255,0) 30%, rgba(0,158,255,1) 100%);
	background: linear-gradient(to right, rgba(0,158,255,0) 30%, rgba(0,158,255,1) 100%);
}

#greenObjectives h2:after{
	background: -webkit-linear-gradient(left, rgba(85,223,74,0) 30%, rgba(85,223,74,1) 100%);
	background: linear-gradient(to right, rgba(85,223,74,0) 30%, rgba(85,223,74,1) 100%);
}

#lineup h2:after{
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
}


.moved h2:after{
	-webkit-animation: shine 1.5s forwards;
	animation: shine 1.5s forwards;
}
@-webkit-keyframes shine {
	50% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}
@keyframes shine {
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.imgOuter{width: 500px; height: 325px; overflow: hidden; z-index: 2;}
.imgOuter img{top: 0; left: 0;}
.imgBg{
	width: 0;
	height: 325px;
	z-index: 1;
}
#technologyforeveryworkplace .imgOuter,
#customizableSolutions .imgOuter,
#simplifyComplexTasks .imgOuter,
#managingDiverseInformation .imgOuter,
#efficientlySafely .imgOuter{width: 0;}

#greenObjectives .imgBg{
	height: 477px;
}
#greenObjectives .imgOuter{
	width: 0; height: 477px;
}

#technologyforeveryworkplace .caption{
	font-size: 18px; font-weight: 500; margin-bottom: 3px;
	color: #ff7e00;
}

#technologyforeveryworkplace .img3Block .blockImg{
	overflow: hidden;
}

#technologyforeveryworkplace .imgBg{
	background: -webkit-linear-gradient(left, rgba(255,126,0,0) 30%, rgba(255,126,0,1) 100%);
	background: linear-gradient(to right, rgba(255,126,0,0) 30%, rgba(255,126,0,1) 100%);
}

#customizableSolutions .imgBg{
	background: -webkit-linear-gradient(left, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
	background: linear-gradient(to right, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
}
#simplifyComplexTasks .imgBg{
	background: -webkit-linear-gradient(left, rgba(0,36,184,0) 0%, rgba(0,36,184,1) 100%);
	background: linear-gradient(to right, rgba(0,36,184,0) 0%, rgba(0,36,184,1) 100%);
}
#managingDiverseInformation .imgBg{
	background: -webkit-linear-gradient(left, rgba(107,8,188,0) 0%, rgba(107,8,188,1) 100%);
	background: linear-gradient(to right, rgba(107,8,188,0) 0%, rgba(107,8,188,1) 100%);
}
#efficientlySafely .imgBg{
	background: -webkit-linear-gradient(left, rgba(0,158,255,0) 0%, rgba(0,158,255,1) 100%);
	background: linear-gradient(to right, rgba(0,158,255,0) 0%, rgba(0,158,255,1) 100%);
}

#greenObjectives .imgBg{
	background: -webkit-linear-gradient(left, rgba(85,223,74,0) 0%, rgba(85,223,74,1) 100%);
	background: linear-gradient(to right, rgba(85,223,74,0) 0%, rgba(85,223,74,1) 100%);
}


.img3Block{width: 100%;}
.img3Block .blockImg{float: left; margin-right: 22.5px; opacity: 0;}
.img3Block .blockImg:last-child{margin-right: 0 !important;}
#simplifyComplexTasks .img3Block .blockImg{margin-right: 45px;}

#simplifyComplexTasks .img3Block .blockImg{width: 310px; word-break: break-all; word-wrap: break-word;}
#simplifyComplexTasks .img3Block .blockImg .blockImgInner{margin-bottom: 10px;}
#simplifyComplexTasks .caption{opacity: 0; position: relative; display: inline-block; font-size: 18px;}

.managingDiverseInformationAnim{width: 882px; height: 206px; margin-left: 35px; overflow: hidden;}
.managingDiverseInformationAnim div{display: none;}
.managingDiverseInformationAnim .block03_img01{left: 0; top: 26px;}
.managingDiverseInformationAnim .block03_img02{left: 791px; top: 17px;}
.managingDiverseInformationAnim .block03_img03{left: 405px; top: 0; z-index: 1;}
.managingDiverseInformationAnim .block03_img04{left: 201px; top: 31px; width: 557px; height: 101px;}
.managingDiverseInformationAnim .block03_img05{left: 156px; top: 11px;}
.managingDiverseInformationAnim .block03_img06{left: 633px; top: 11px;}
.managingDiverseInformationAnim .block03_img07{left: 289px; top: 121px;}


.efficientlySafelyAnim{
	float: left; width: 620px; height: 190px; background: #eeeeee; overflow: hidden; display: none; opacity: 0;
}
.efficientlySafelyAnim .abs{display: none; opacity: 0;}
.efficientlySafelyAnim .animMfp{left:302px; top: 0;}
.efficientlySafelyAnim .handSp{left: 119px; top: 50px; width: 125px; height: 131px; /*left:255px; top:55px;*/}
.efficientlySafelyAnim .handSp img{top: 0; left: 0;}
.efficientlySafelyAnim .handSp .handSp01{display: block; opacity: 1;}
.efficientlySafelyAnim .animEf{left: 407px; top: 55px;}
.efficientlySafelyAnim .animDisplay{left: 427px; top: 52px;}
.efficientlySafelyAnim .animText{left: 23px; top: 27px;}

.efficientlySafelyAnimRight{
	float: right; width: 352px; height: 150px; padding-top: 40px;
	overflow: hidden;
}
.efficientlySafelyAnimRight .rel{opacity: 0;}

#greenObjectives .block05_img01{display: none;}
#greenObjectives .caption{display: none;}

#lineup{margin-bottom: 10px;}
.lineupList{width: 100%; height: 400px; margin-left: auto; margin-right: auto; overflow: hidden; text-align: center;}
.lineupList li{position: relative; text-align: center; display: none; margin-bottom: 30px; float: left; margin-right: 15px;}
.lineupList li:nth-child(3n+3){margin-right: 0;}
.lineupList li a{display: block; width: 100%; height: 100%;}
.lineupList li.lineupLi01{width:260px;}
.lineupList li.lineupLi02{width:380px;}
.lineupList li.lineupLi02 a img:first-child{
	margin-left: 15px;
}

.lineupList li.lineupLi03{width:350px;}
.lineupList li.lineupLi04{width:260px;}
.lineupList li.lineupLi05{width:380px;}
.lineupList li.lineupLi06{width:250px;}
.lineupList li img{display: block;}
.lineupList li .imgmap{display: none; position: absolute; top: 25px; right: 0;}
.lineupList li .new_mark{top: 25px; left: 95%; opacity: 0;}

#bannerBlock{padding:50px 0 70px; width: 980px;}
#bannerBlock a{width:475px; height: 120px; background: #eeeeee; overflow: hidden; display: none;}
#bannerBlock a.bannerGlobal{float: left;}
#bannerBlock a.bannerTogether{float: right;}

#bannerBlock a.bannerTogether .bannerOn{top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
#bannerBlock a.bannerGlobal .bannerOn{right: 0; top: 0;}
#bannerBlock a.bannerGlobal .bannerText{left: 30px; top: 50px;}

.mb15{margin-bottom: 15px !important;}
.mb25{margin-bottom: 25px !important;}
.mb30{margin-bottom: 30px !important;}