/* Reset ----------------------------- */
ul, li{vertical-align:top; margin:0;padding:0;border:0; outline:0; font-size:100%; }
header,#header,footer,#footer,.sns {line-height:1;}
header h1 { float:left; margin-top:19px; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, dl, dt, dd, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, footer, header, menu, nav, section { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:top; background:transparent; }
body { line-height:1; font-family: meiryo, 'Meiryo W53 Regular', Arial, Helvetica, Verdana, sans-serif; -webkit-text-size-adjust:none; min-width:320px;}
article, footer, header, nav, section { display:block; }
ul { list-style:none; }
a { margin:0; padding:0; border:0; font-size:100%; vertical-align:top; background:transparent; }
table { border-collapse:collapse; border-spacing:0; width:100%; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:0; padding:0; }
input, select { vertical-align:middle; }
img { vertical-align:bottom; }
.cf:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
/* Reset ----------------------------- */

/*
.sns{
	display: none;
}

#main{
	margin-top: 80px;
}
*/

.clearfix:before,
.clearfix:after{
  content: " ";
  display: table;
}

.clearfix:after{
  clear: both;
}

.process #main.clearfix:before,
.process #main.clearfix:after{
	display: none;
}

.caution { display:none; }

html{
  font-size: 62.5%;
}

body{
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.8;
  background-color: #fff;
  color: #333;
}

@media screen and (min-width:768px){
a:hover{
  opacity: 0.7;
}
}

video{
	display: none;
}

.btn img{
  vertical-align: bottom;
}

.btn_prev{
	display: none;
}


.restart{
	width: 145px;
	height: 35px;
	margin: 0 auto;
}

.restart img{
	display: none;
}

.restart img:hover{
	cursor: pointer;
	opacity: 0.8;
}

.wrapper{
  padding-left: 20px;
  padding-right: 20px;
}

.inner{
  max-width: 1100px;
  margin: 0 auto;
}

#main{
  background-color: #000;
  height: 750px;
}

#main.secondary{
  height: 160px;
}

#main .inner{
  background: url('../img/main_img.jpg') no-repeat right top;
  height: 750px;
  color: #fff;
  padding-top: 125px;
  padding-left: 20px;
  box-sizing: border-box;
}

#main.secondary .inner{
  padding-top: 34px;
  height: 160px;
  background-position: right center;
}

#process2 #main.secondary .inner{
  background-image: url('../img/hd_bg02.jpg');
}
#process3 #main.secondary .inner{
  background-image: url('../img/hd_bg03.jpg');
}
#process4 #main.secondary .inner{
  background-image: url('../img/hd_bg04.jpg');
}
#process5 #main.secondary .inner{
  background-image: url('../img/hd_bg05.jpg');
}
#process6 #main.secondary .inner{
  background-image: url('../img/hd_bg06.jpg');
}
#process7 #main.secondary .inner{
  background-image: url('../img/hd_bg07.jpg');
}

#main .inner h2{
  margin-bottom: 50px;
}

#main.secondary .inner h2{
  margin-bottom: 0;
}


#main .inner p{
  width: 450px;
  line-height: 2;
  margin-bottom: 100px;
}

#main .btn_start{
  display: block;
  margin: 0 auto;
  width: 205px;
}


nav#navi{
  background: url('../img/nav_bg.png') #2a2a2a;
  height: 82px;
  padding-top: 15px;
  padding-bottom: 15px;
  box-sizing: border-box;
  position: relative;
}

nav#navi ul{
  padding: 0;
  list-style: none;
  margin: 0;
  display: table;
  width: 100%;
  background-color: #fff;
  height: 46px;
}

nav#navi li{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  font-size: 1.4rem;
  font-weight: bold;
}

nav#navi li.current{
  background-color: #ea7f00;
  color: #fff;
}

nav#navi li a{
  text-decoration: none;
  color: #666;
  display: block;
  height: 46px;
  line-height: 46px;
  padding-left: 20px;
}

nav#navi li.current a{
  color: #fff;
/*   height: auto; */
/*   line-height: 46px; */
}

nav#navi li a:hover{
  opacity: 0.7;
}

nav#navi li:after{
  content: "";
  background: url('../img/nav_arrow_wh.png') no-repeat right;
  width: 25px;
  height: 46px;
  display: block;
  position: absolute;
  right: -25px;
  top: 0;
  z-index: 99;
}

nav#navi li.current:after{
  background: url('../img/nav_arrow_og.png') no-repeat right;
}

nav#navi li:last-child:after{
  content: none;
}

nav#navi li div{
  display: table;
  position: absolute;
    bottom: -9px;
    left: 0;
    width: 100%;
}

nav#navi li div a{
  table-layout: fixed;
  height: 3px !important;
  display: table-cell;
  background-color: #ccc;
  border-top: 3px solid #2a2a2a;
  border-right: 2px solid #2a2a2a;
  border-bottom: 3px solid #2a2a2a;
}

nav#navi ul li:last-child div a:last-child{
  border-right: none;
}

nav#navi li div a.current{
  background-color: #ea7f00;
}

nav#navi .sp_navi{
  display: none;
}

#contents{
  padding-top: 30px;
  padding-bottom: 100px;
  background-color: #f3f3f3;
  position: relative;
  overflow: hidden;
}

#process8 #contents{
  background-image: url('../img/last_bg.jpg');
  background-size: cover;
  min-height: 550px;
  background-position: left center;
  background-repeat: no-repeat;
}

#process8 #contents .inner .txt{
	position: relative;
  max-width: 50%;
  float: right;
  /*margin-top: 160px;*/
}

#process8 #contents .inner .txt p{
  margin: 20px 0 30px;
  font-size: 1.6rem;
}

#contents .hd{
  margin-bottom: 30px;
}

#contents .hd .number{
  font-weight: 700;
  font-size: 6.8rem;
  color: #ea7f00;
  float: left;
  font-family: 'Open Sans', sans-serif;
  line-height: 58px;
  margin-right: 25px;
  padding-left: 16px;
  background: url('../img/hd_number_img.png') no-repeat 0px 4px;
  background-size: 12px 52px;
}

#contents .hd .right{
  overflow: hidden;
}

#contents .hd .process{
  color: #ea7f00;
  border-bottom: 1px solid #ff9019;
  line-height: 20px;
  font-size: 1.4rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

#contents .hd .title{
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 46px;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

#contents .body{
  padding-left: 118px;
}

#contents .body .left{
  padding-right: 70px;
}

#contents .body .right{
  width: 404px;
  width: 502px;
  float: right;
}

#contents .body video{
  width: 410px;
  height: 290px;
  vertical-align: bottom;
  margin-bottom: 30px;
}

#contents .body .restart{
  text-align: center;
}

#process8 #contents .body .restart{
  text-align: left;
  margin: 0;
}

#process8 #contents .body{
	padding-left: 0;
	height: auto;
}

#process8 #contents .body .left{
	padding-right: 0;
}

#contents .body p{
  margin: 0;
  min-height: 75px;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

#contents .body .machine{
/*   min-height: 195px; */
  margin-bottom: 20px;
}

#contents .body .machine h4{
  margin: 0;
  margin-bottom: 7px;
  color: #506e9b;
  font-size: 1.3rem;
  padding-left: 8px;
  border-left: 3px solid #506e9b;
  line-height: 18px;
}

#contents .control{
  text-align: right;
  font-size: 0;
  margin-top: 10px;
}

#contents .control a{
  margin-left: 10px;
}

#contents .inner{
  min-height: 442px;
  position: relative;
  overflow: hidden;
  height: 100%;
}

#contents .inner.control{
  min-height: inherit;
}

.view{
/*   display: none; */
	position: absolute;
	top: 0;
	left: 0;
}

/*
.view .body .left{
	position: absolute;
	top: 107px;
	left: 118px;
}
*/

.view .hd,
.view .body .right{
  opacity: 0;
}

.fl{
  float: left;
}

.fr{
  float: right;
}

@media (max-width: 767px) and (orientation: portrait) {
  .fl, fr{
    float: none;
  }
}

@media (min-width: 768px) {
.only_mb{
  display: none !important;
}
}
@media (max-width: 767px) {
.only_pc{
  display: none !important;
}
}

.ft{
  background: url('../img/nav_bg.png') #2a2a2a;
  height: 30px;
}

.ft.fixed{
  position: fixed;
  bottom: 60px;
  width: 100%;
}

footer.fixed{
  position: fixed;
  bottom: 0;
}


@media screen and (max-width:1140px){
  #contents .body{
    padding-left: 0;
  }
  
  #contents .body .left{
    width: 40%;
    padding-right: 7%;
  }
  #contents .body .right{
    width: 53%;
  }
  
}

@media screen and (max-width:979px){
  #main.primary .inner{
    padding-left: 30px;
  }
  
  nav#navi li{
    font-size: 1.2rem;
  }
  
  #contents .body .left{
    width: 44%;
    padding-right: 3%;
  }

  #contents .body video{
    width: 100%;
    height: auto;
  }
  
  #contents .body .machine img{
    max-width: 100%;
    height: auto;
  }
  
  #contents .body p{
    min-height: inherit;
  }
  
  #process8 #contents{
    background-position: -120px center;
  }
  
  #process8 #contents .inner .txt video{
    width: 100%;
  }
}

@media screen and (max-width:767px){

	#main.primary{
	height: calc(100% - 75px);
	padding: 0;
	overflow: hidden;
	}
	
/* 	div#main{
		margin-top: 36px;
	} */
	
/* 	.display div#main{
		margin-top: 111px;
	} */
	
/* 	#top #main.primary,
	#process8 #main{
		margin-top: 75px;
	} */
	
	#main.primary > div.inner{
	padding-top: 0;
	padding-left: 30px;
	padding-right: 30px;
/* 	height: 530px; */
	background-size: 100% auto;
	background-position: right -100px center;
	height: 100%;
	display: table;
	}
	
	#main.primary > div.inner >div{
	display: table-cell;
	vertical-align: middle;
	}
	
	#main.primary .inner h2{
	margin-bottom: 10px;
	}
	
	#main.primary .inner h2 img{
	width: 360px;
	max-width: 100%;
	height: auto;
	}
	
	#main.primary .inner p{
	width: 100%;
	font-size: 1.2rem;
	margin-bottom: 20px;
	line-height: 1.5;
	}
	
	#main.secondary{
	height: 80px;
	padding-right: 0;
	/* 	width: 100%; */
	/* 	margin-bottom: 10px; */
	/* margin-top: -24px; */
	}
	
	.diplay #main.secondary{
		margin-top: 0;
	}
	
	#main.secondary .inner{
	padding-top: 10px;
	padding-left: 0;
	background-position: right center;
	background-size: 80% auto;
	height: 80px;
	}
	
	#main.secondary .inner h2{
	margin: 0;
	}
	
	#main.secondary .inner h2 img{
	width: 220px;
	}
	
	
	nav#navi{
		/* position: fixed; */
		height: auto;
		padding: 0px;
		width: 100%;
/* 		top: 0;
		left: 0; */
		z-index: 51;
/* 		margin-top: 75px; */
		transition: .3s;
		position: sticky;
		top: 209px;
		height: 36px;
	}

	.hide nav#navi{
		top: 100px;
	}

/* 	.display nav#navi{
		margin-top: 75px;
	}	 */
	
	/*
	.hide nav#navi{
	margin-top: 0;
	}
	*/
	
	nav#navi ul{
	height: 36px;
	}
	
	nav#navi li{
	display: none;
	padding-left: 0;
	font-size: 1.6rem;
	}
	
	nav#navi li.current{
	display: table-cell;
	}
	
	nav#navi li.current:after{
	content: none;
	}
	
	nav#navi li a{
	padding-left: 0;
	height: 36px;
	line-height: 36px;
	}
	
	nav#navi li div{
	display: none;
	}
	
	nav#navi .sp_navi{
	display: block;
	position: absolute;
	width: 100%;
	top: 0;
	pointer-events: none;
	}
	
	nav#navi .sp_navi a{
	display: block;
	background-size: 8px 26px;
	background-repeat: no-repeat;
	background-position: center center;
	width: 40px;
	height: 36px;
	pointer-events: painted;
	}
	
	nav#navi .sp_navi .next{
	float: right;
	background-image: url('../img/sp_navi_arrow_r.png');
	}
	
	nav#navi .sp_navi .prev{
	float: left;
	background-image: url('../img/sp_navi_arrow_l.png');
	}
	
	#process1 nav#navi .sp_navi .prev{
		display: none;
	}

	.wrapper{
	padding-left: 15px;
	padding-right: 15px;
	}
	
	#contents{
	padding-top: 10px;
	padding-bottom: 20px;
	/* position: sticky;
	top: 136px; */
	}

	#contents .hd{
	margin-bottom: 10px;
/* 	height: 75px; */
	}

	#contents .hd .number{
	font-size: 3.2rem;
	line-height: 30px;
	margin-right: 10px;
	padding-left: 0;
	background: none;
	text-align: center;
	}

	#contents .hd .number:before{
	content: "Process";
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	display: block;
	line-height: 16px;
	}  
	
	#contents .hd .process{
	font-size: 1.2rem;
	line-height: 1.1;
	padding: 2px 0;
	}
	
	#contents .hd .title{
	font-size: 1.6rem;
	line-height: 1.1;
	padding: 7px 0;
	}
	
	#contents .body .left{
		width: 40%;
	}
	
	#contents .body .right{
		width: 57%;
	}
	
	#contents .body p{
		font-size: 1.2rem;
		line-height: 1.4;
	}
	
	#contents .body .machine{
		overflow: hidden;
		margin-bottom: 0;
	}
	
	#contents .body .machine h4{
		
	}
	
	#contents .body .machine img{
		width: 80%;
	}
		
	#contents .body video{
		margin-bottom: 10px;
	}
	
	#contents .control{
		display: none;
	}
	
	#contents .inner{
		min-height: auto;
	}
	
	.restart{
		width: 100%;
/* 		height: auto; */
	}

	.restart img{
		width: 40%;
		margin: 0 auto;
	}

}


@media screen and (max-width:767px) and (orientation: portrait){
	
	#main.primary{
		height: calc(100% - 139px);
	}
	
	#main.primary > div.inner{
		background-size: auto 100%;
	}
	
/* 	.display div#main{
		margin-top: 111px;
	} */
	
/* 	#top #main.primary,
	#process8 #main{
		margin-top: 109px;
	} */
	
	#contents .hd{
	/* 	margin-bottom: 10px; */
	height: 75px;
	}
	
	#process8 #contents{
	background-position: left top;
	min-height: auto;
	background-size: 700px auto;
	background-image: none;
	}
	
	#process8 #contents .inner .txt{
	max-width: 100%;
	/*margin-top: 270px;*/
	float: none;
	}
	
	#process8 #contents .inner .txt{
	
	}  
	
	#process8 #contents .inner .txt .restart,
	.goto_top{
		text-align: center;
		margin: 0 auto;
	}
	
	#contents .body .left{
	width: 100%;
	margin-right: 0;
	margin-bottom: 30px;
	}
	
	#contents .body .right{
	width: 100%;
	float: none;
	}
	
	
	#contents .body .machine{
	height: auto;
	}
	
/*
	#contents .control{
	text-align: center;
	}
	
	#top #contents .control a{
	margin: 0 10px;
	}
*/
	
	#contents .control.inner{
	position: absolute;
	bottom: 0;
	padding-bottom: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 100;
	}
	
/*
	nav#navi{
		margin-top: 109px;	
	}
*/

/* 	.display nav#navi{
		margin-top: 139px;
	} */
	
	#contents .body .machine img{
		width: 100%;
	}
	
	.restart{
		margin-bottom: 5px;
	}

	.restart img{
		width: 40%;
	}
	
	#contents .hd .title{
	font-size: 1.8rem;
	}

	
}


@media screen and (max-width:767px) and (orientation: landscape){
	
	#main.secondary{
/* 		height: 75px; */
		margin-top: 0;
	}
	
/* 	#main.secondary .inner{
		height: 75px;
	} */
	
	nav#navi{
		/* position: absolute; */
		/* height: 100%; */
		background: #F3F3F3;
		z-index: 0;
		/* top: 80px; */
		transition: inherit;
		overflow: hidden;
	}
	
/*
	nav#navi ul{
		z-index: 51;
	}
*/
	
	nav#navi .inner,
	nav#navi .sp_navi{
		height: 100%;
		position: relative;
	}
	
	.process nav#navi .sp_navi a{
		position: absolute;
		top: -36px;
		bottom: 0;
		margin: auto 0;
		z-index: 51;
		background-color: #ea7f00;
	}
	
	nav#navi .sp_navi a.prev{
		left: 0;
	}
	
	nav#navi .sp_navi a.next{
		right: 0;
	}
	
	.process #contents{
		width: calc(100% - 120px);
		margin: 36px auto 0;
		height: calc(100% - 56px)!important;
		padding: 10px 20px;
/* 		position: absolute; */
	}
	
/* 	.display nav#navi{
		margin-top: 75px;
	}
	
	.display div#main{
		margin-top: 75px;
	} */
	
	#process8 #contents{
		min-height: inherit;
	}
	
	#process8 #contents{
		background-position: inherit;
		padding: 20px 50px;
	}
	
	#process8 #contents .inner .txt{
		width: 100%;
		max-width: inherit;
		overflow: hidden;
	}
	
	#process8 #contents .body .left{
		width: 100%;
		position: relative;
	}
	
	#process8 #contents .inner .txt video{
		width: 40%;
	}
	
	#process8 #contents .body .restart{
		width: 40%;
		height: auto;
	}

	#process8 #contents .inner .txt p{
		width: 50%;
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 0;
		font-size: 1.4rem;
	}
	
	#process8 #contents .inner .txt .goto_top{
		position: absolute;
		bottom: 0;
		right: 0;
	}

}

@media screen and (max-width:360px){
  #main.primary .inner p{
    line-height: 1.8;
  }
}

.view1{
	z-index: 50;
}

.view2{
	z-index: 40;
}

.view3{
	z-index: 30;
}

.view4{
	z-index: 20;
}

.view5{
	z-index: 10;
}