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

html, body{
	height:auto;
}

body#workflow_page{
	background: url("../../images/bg_slide/bg_3.png") no-repeat fixed center top #000;
}
body#workflow_page #wrapper{
	background-color:rgba(0,0,0,0.2) !important;
}
body#workflow_page #menu{
	display:block;
	opacity:1;
}
body#workflow_page #sg_footer{
	background-color:#111;
}
body#workflow_page .title {
}


#bg_fix{
    z-index                 : -1;
    background-color        : #000;
    background-image        : url('../../images/bg_slide/bg_3_sp.png');
    background-repeat       : no-repeat;
	background-size:100% auto;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 25px;
}
#bg_fix_tb{
    background-image        : url('/business/technology/product/mizuchi/images/bg_slide/bg_3.png');
	display:none;
}


/*******  workflow  *******************************************************/
#workflow{
	width:100%;
	margin:0 auto;
	padding-top:70px;
}

section{
	max-width:1000px;
	width:90%;
	margin:0 auto;
	float:none !important;
}
section .workflow-content p a{
	color:#70c4d6;
}
section .workflow-content p a:hover{
	text-decoration:underline;
}

body#workflow_page .sub_title {
	margin:0 auto;
	margin-top:80px;
	margin-bottom:50px;
	font-size:20px;
}
body#workflow_page .sub_title span{
	padding:5px 40px;
	border-bottom:1px #CCCCCC solid;
}
.title_line{
	margin-top:85px;
	margin-bottom:80px;
}

.title_line.end{
	margin-bottom: 0;
}
#workflow1 .title_line{
	margin-top:20px;
	width:100%;
}
#workflow1 img,#workflow2 img{
	width: 100%;
	margin-top: 50px;
}
.workflow-content{
	text-align:left;
	font-size:16px;
	max-width:900px;
	margin:0 auto;
}
.workflow-anime.tb,
.workflow-anime2.tb,
.workflow-anime3.tb,
.workflow-anime4.tb,
.workflow-anime.sp,
.workflow-anime2.sp,
.workflow-anime3.sp,
.workflow-anime4.sp{
	display:none;
}
.workflow-anime.tb img,
.workflow-anime2.tb img,
.workflow-anime3.tb img,
.workflow-anime4.tb img,
.workflow-anime.sp img,
.workflow-anime2.sp img,
.workflow-anime3.sp img,
.workflow-anime4.sp img{
	width:100%;
}
@media only screen and (max-width: 810px) {
.workflow-anime.pc,
.workflow-anime2.pc,
.workflow-anime3.pc,
.workflow-anime4.pc{
	display:none;
}
.workflow-anime.tb,
.workflow-anime2.tb,
.workflow-anime3.tb,
.workflow-anime4.tb{
	display:block;
	width:100%;
	margin-top:20px;
}
}
@media only screen and (max-width: 600px) {
.workflow-anime.tb,
.workflow-anime2.tb,
.workflow-anime3.tb,
.workflow-anime4.tb{
	display:none;
}
.workflow-anime.sp,
.workflow-anime2.sp,
.workflow-anime3.sp,
.workflow-anime4.sp{
	display:block !important;
	width:100%;
	margin-top:20px;
}
}


.workflow-pic{
	max-width:660px;
	width:90%;
	margin:0 auto;
	margin-top:20px;
	margin-bottom:80px;
}
#workflow2 .workflow-pic{
	margin-bottom:45px;
}
#workflow3 .workflow-pic{
	margin-bottom:60px;
}
.workflow-pic img{
	width:100%;
}
.workflow-bg{
	background-image:url(../images/workflow-bg.png);
	margin-top:25px;
}
.workflow-anime{
	text-align:left;
	width:670px;
	margin:0 auto;
	margin-top:45px;
}
.workflow1-1{
	width:660px;
	margin:0 auto;
}
.workflow1-2{
	width:359.8px;
	position:absolute;
	margin-top:150px;
	margin-left:-670px;
	opacity:0;
}
.workflow1-3{
	width:288.6px;
	position:absolute;
	margin-top:150px;
	margin-left:-330px;
	opacity:0;
}
.workflow1-4{
	width:288px;
	position:absolute;
	margin-top:150px;
	margin-left:-315px;
	opacity:0;
}
.workflow-anime2{
	text-align:left;
	width:670px;
	margin:0 auto;
}
.workflow2-1,
.workflow2-2,
.workflow2-3,
.workflow2-4,
.workflow2-5,
.workflow2-a1,
.workflow2-a2,
.workflow2-a3{
	position:absolute;
	opacity:0;
}
.workflow2-1{
	margin-top:75px;
	margin-left:-398px;
}
.workflow2-2{
	margin-top:120px;
	margin-left:-398px;
}
.workflow2-3{
	margin-top:186px;
	margin-left:-398px;
}
.workflow2-4{
	margin-top:233px;
	margin-left:-398px;
}
.workflow2-5{
	margin-top:200px;
	margin-left:-161px;
}
.workflow2-a1{
	margin-top:82px;
	margin-left:-490px;
}
.workflow2-a2{
	margin-top:127px;
	margin-left:-490px;
}
.workflow2-a3{
	margin-top:240px;
	margin-left:-250px;
}

.pic-title{
	margin-top:45px;
	margin-bottom:20px;
	font-weight:bold;
}
.workflow3-1,
.workflow3-2,
.workflow3-3,
.workflow3-4,
.workflow3-5,
.workflow3-6,
.workflow3-7,
.workflow3-a1,
.workflow3-a2,
.workflow3-a3,
.workflow3-a4,
.workflow3-a4_,
.workflow3-a5,
.workflow3-a6{
	position:absolute;
	opacity:0;
}
.workflow3-1{
	margin-top:75px;
	margin-left:-530px;
}
.workflow3-2{
	margin-top:170px;
	margin-left:-530px;
}
.workflow3-3{
	margin-top:75px;
	margin-left:-340px;
}
.workflow3-4{
	margin-top:120px;
	margin-left:-340px;
}
.workflow3-5{
	margin-top:195px;
	margin-left:-340px;
}
.workflow3-6{
	margin-top:240px;
	margin-left:-340px;
}
.workflow3-7{
	margin-top:120px;
	margin-left:-150px;
}
.workflow3-a1{
	margin-top:63px;
	margin-left:-570px;
}
.workflow3-a2{
	margin-top:74px;
	margin-left:-570px;
}
.workflow3-a3{
	margin-top:203px;
	margin-left:-570px;
}

.workflow3-a4{
	margin-top:83px;
	margin-left:-390px;
}
.workflow3-a4_{
	margin-top:128px;
	margin-left:-390px;
}
.workflow3-a5{
	margin-top:153px;
	margin-left:-390px;
}
.workflow3-a6{
	margin-top:160px;
	margin-left:-200px;
}
.workflow-anime4{
	margin-top:45px;
}
.workflow4-1,
.workflow4-2,
.workflow4-3,
.workflow4-4,
.workflow4-5,
.workflow4-6,
.workflow4-a1,
.workflow4-a2,
.workflow4-a3,
.workflow4-a4{
	position:absolute;
	opacity:0;
}

.workflow4-1{
	margin-top:70px;
	margin-left:-520px;
}
.workflow4-2{
	margin-top:75px;
	margin-left:-400px;
}
.workflow4-3{
	margin-top:120px;
	margin-left:-400px;
}
.workflow4-4{
	margin-top:286px;
	margin-left:-376px;
}
.workflow4-5{
	margin-top:85px;
	margin-left:-160px;
}
.workflow4-6{
	margin-top:273px;
	margin-left:-160px;
}
.workflow4-a1{
	margin-top:82px;
	margin-left:-530px;
}
.workflow4-a2{
	margin-top:128px;
	margin-left:-530px;
}
.workflow4-a3{
	margin-top:82px;
	margin-left:-241px;
}
.workflow4-a4{
	margin-top:165px;
	margin-left:-241px;
}

.orochi{
	width:640px;
	padding:40px;
	margin:0 auto;
	font-size:13px;
	background-color:rgba(0,0,0,0.5);
	margin-top:60px;
}
.orochi .content-L{
	float:left;
	width:300px;
	line-height:1.5;
	text-align:left;
}
.orochi a:hover{
	color:#eb6100;	
}
.orochi a:hover .content-R p{
	text-decoration:underline;
}
.orochi .content-R{
	float:right;
	width:300px;
	color:#eb6100;
}
.orochi .content-R img{
	width:100%;
	margin-bottom:10px;
}

@media only screen and (max-width: 1000px) {
body#workflow_page .section {	
	padding: 0 5% 70px 5%;
}
#workflow{
	padding-top:130px;
}
	
}
@media only screen and (max-width: 810px) {
#menu #mizuchi_logo {
	position:relative;
	margin:0 auto;
	margin-top:15px;
}
.orochi{
	width:90%;
	padding:5%;
}

.orochi .content-L{
	float:left;
	width:47.5%;
}
.orochi .content-R{
	float:right;
	width:47.5%;
}
}
@media only screen and (max-width: 600px) {
body#workflow_page{
	background:none;
}
body#workflow_page #menu{
	display:none;
}

#workflow{
	padding-top:70px;
}
.orochi{
	width:90%;
	padding:5%;
	margin-top:80px;
}
.orochi .content-L{
	float:left;
	width:100%;
}
.orochi .content-R{
	float:right;
	width:100%;
}
.orochi .content-R img{
	width:70%;
	margin-bottom:10px;
	margin-top:20px;
}
body#workflow_page .sub_title,
body#workflow_page .sub-title{
	text-align:left;
	line-height:2;
}
body#workflow_page .sub_title span{
	padding:5px 0;
	border-bottom:none;
}

	
}