@charset "UTF-8";

.mb15{margin-bottom: 15px!important;}
.mb20{margin-bottom: 20px!important;}
.pr20{padding-right: 20px!important;}

@media print, screen and (min-width: 768px) {
	.grid.grid--is3 .img_Liquid--pc{
		min-width: 205px !important;
		vertical-align: top;
	}

	.grid.grid--is2 .img_Liquid--pc{
		min-width: 0 !important;
	}
	
	.txt_Lead {
		color: #666;
		font-size: 1.375rem;
	}


	a:hover img{
		opacity: 0.7;	
	}
	
	.table--lineup{
		width: 100%;
		font-size: 1.375rem;
		text-align: center;
	}
	.table--lineup tr{
		border-bottom: 1px solid #cccccc;
	}
	
	.table--lineup td, .table--lineup th{
		padding: 10px 0;
	}
	.table--lineup th{
		color: #fff;
		background: #00a8a9;
		font-weight: normal;
	}
	.table--lineup tr:nth-child(2n){
		background: #f5f5f5;
	}
	.table--lineup tr td, .table--lineup tr th{border-right: 1px dotted #ddd;}
	.table--lineup tr td:first-child,
	.table--lineup tr th:first-child
	{border-left: 1px dotted #ddd;}
	
	.top--column--2{
		min-width: 1000px;
		max-width: 1600px;
		margin: 0 auto;
	}
	
	/*                            LINEUP edit(PC)
	-----------------------------------------------*/
	
	.pers{
		margin-top: -24px;
		width: 100%;
		background: url(/products/johkasou/lineup/img/bg_pers.jpg) repeat;
		text-align: center;
		padding-bottom:45px;
	}

	.pers img{
		margin-top:50px;
	}
	
	/*                        BUSINESS OVERVIEW edit(PC)
	-----------------------------------------------*/
	.bis--main{
		padding-bottom: 70px;
		margin-bottom: 35px;
		border-bottom: 2px solid #008486;
		width: 100%;
		margin-left: 0px;
	}
	
	/*                    basics edit
	-----------------------------------------------*/
	aside.blueprint{
		background: #f0f8f9;
		position: relative;
		height: 660px;
	}
	
	aside.blueprint h3{
		position: relative;
		text-align: center;
		padding-top: 35px;
	}
	aside.blueprint h3:after{
		content: "";
		position: absolute;
		background: #008486;
		width: 125px;
		height: 1px;
		top: 110px;
		left:50%;
		margin-left: -64.5px;
	}
	
	aside.blueprint figure{
		position: relative;
		margin-top: 150px;
	}
	aside.blueprint figure img:first-child{
		position: absolute;
		left:0;
		top:0;
	}


	aside.blueprint figure img:last-child{
		position: absolute;
		left:95px;
		top:45px;
	}
	
	aside.blueprint dl{
		margin-top: 50px;
		position: absolute;
		width: 170px;
	}
	
	aside.blueprint dl dt{
		font-size: 14px;
		font-weight: bold;
	}
	
	aside.blueprint dl:nth-child(1) dt{color: #008486;}
	aside.blueprint dl:nth-child(2) dt{color: #c67bdc;}
	aside.blueprint dl:nth-child(3) dt{color: #e19d34;}
	aside.blueprint dl:nth-child(4) dt{color: #eb537a;}
	aside.blueprint dl:nth-child(5) dt{color: #4870c5;}
	
	aside.blueprint > div dl:nth-child(1){left: 40px; top: 100px;}
	aside.blueprint > div dl:nth-child(2){left: 15px; top: 460px;}
	aside.blueprint > div dl:nth-child(3){left: 200px; top: 460px;}
	aside.blueprint > div dl:nth-child(4){left: 380px; top: 460px; width: 280px;}
	aside.blueprint > div dl:nth-child(5){left: 485px; top: 145px;}

	aside.blueprint dl dd{
		font-size: 12px;
	}

	/*               our technology edit(PC)
	-----------------------------------------------*/
	.moving_bed h1 + p{
		margin-bottom: 60px;
	}

	.moving_bed .border{
		padding-top: 15px;
		border-bottom: 1px solid #ccc;
		width: 100%;
		height: 1px;
		display: block;
	}
	
	.moving_bed ul.parts{
		width: 595px;
		margin: 25px auto 50px;
	}
	
	.moving_bed ul.parts li{
		color: #333;
		padding-left: 280px;
		padding-right: 20px;
		margin-bottom: 10px;
		width: 595px;
		font-size: 0.8em;
		position: relative;
		display:table;
	}
	
	.moving_bed ul.parts li span{
		display: table-cell;
		width:280px;
		vertical-align:middle;
		height: 100%;
	}
	
	.moving_bed ul.parts li:nth-child(1){
		background: url(/products/johkasou/technology/img/parts_01.jpg) no-repeat #d8dae4;
		height: 173px;
	}
	
	.moving_bed ul.parts li:nth-child(2){
		background: url(/products/johkasou/technology/img/parts_02.jpg) no-repeat #d8dae4;
		height: 173px;
	}

	.moving_bed ul.parts li:nth-child(3){
		background: url(/products/johkasou/technology/img/parts_03.jpg) no-repeat #d8dae4;
		height: 223px;
	}

	.membrane dl{
		margin-top:30px;
		width: 380px;
		display: inline-block;
		margin-right: 30px;
		margin-bottom: 60px;
	}

	.membrane dl dt{
		color: #008486;
		font-weight: bold;
		vertical-align: top;
		font-size: 1.375rem;
	}
	
	.membrane dl + div{
		margin-top:30px;
		margin-bottom: 60px;
		display: inline-block;
		width: 250px;
		vertical-align: top;
	}
	
	.membrane dl dd{
		margin-bottom: 40px;
		font-size: 1.375rem;

	}
	
	/*              after service edit
	-----------------------------------------------*/
	.after_service .before_use dl:nth-child(2n) dd,
	.after_service .before_use dl:nth-child(2n-1) dt{float:left; display: table-cell; vertical-align: middle; height: 100%;}
	
	.after_service .before_use dl:nth-child(2n) dt,
	.after_service .before_use dl:nth-child(2n-1) dd{float:right; display: table-cell; vertical-align: middle; height: 100%;}

	.after_service .before_use > dl:last-child dd{float: right;}
	.after_service .before_use > dl:last-child dt{float: left;}

	.after_service .before_use dl{ padding:15px 0; border-bottom: 1px solid #ccc;}
	.after_service .before_use dl h3{color: #008486;}
	.after_service .before_use .continue dl:not(:last-child){ padding-bottom:15px; border-bottom: none;}
	
	.after_service .before_use dl dd{width: 240px;}
	.after_service .before_use dl dt{width: 420px;}

	/*              application edit
	-----------------------------------------------*/
	.application dl{
		letter-spacing: -10px;
		margin-bottom: 40px;
	}

	.application dl dt, .application dl dd{
		display: inline-block;
		position: relative;
		letter-spacing: normal;
		vertical-align: top;
	}

	.application dl dt{
		width: 300px;
		z-index: 10;
	}
	
	.application dl dd h3{
		margin:-4px 0 0 25px;
		color: #008486;
		font-size: 36px;
		line-height: 1.1;
		padding-bottom: 15px;
		letter-spacing: 1px;
		font-weight: normal;
	}
	
/*	.application dl dd h3 span:before{
		content: "use in ";
		font-weight: normal;
	}*/
	.application dl dd h3 span{
		display: block;
		font-size: 16px;
		color: #666;
		font-weight: bold;
		letter-spacing: 0;
	}
	.application dl dd {
		margin-left: -1px;
		width: 367px;
		z-index: 5;
	}
	.application dl dd p{
		border-top: 1px solid #ccc;
		margin: 0 0 20px 25px;
		padding-top: 11px;
	}


	.application dl dd h4{
		color: #008486;
	}
	
	p.icon img{
		margin-top: 10px;
		text-align: center;
		display: inline;
	}

	p.icon img:first-child{
		margin-right: 5px;
	}

	/*                  TOP edit
	-----------------------------------------------*/

	.column--2{
		width:49%;
		display: inline-block;
		min-width:0;
	}
	
	.column--2 .grid > *{
		display: inline-block;
		vertical-align: top;
	}

	.column--2 .grid > .media{
		width: 55%;	
	}

	.column--2 .grid > .media_Img{
		width: 45%;
	}

	.column--2 .grid > .media_Img img{
		max-width: 100%;
		min-width: 0!important;
	}
	
	.basics .media > *{
		display: inline-block;	
	}
	
	.basics > .media > div{
		width: 60%;	
	}

	
	.basics > .media .dl_Basic{
		width: 36.5%;
		margin-left: 3%;
	}

	.basics .media_Img img{
		max-width: 100%;
		min-width: 0!important;
	}
	
		.basics .media ,  .column--2 .media{
			margin-top: 0 !Important;
		}

}

/*                     SP mode edit
-----------------------------------------------*/

@media print, screen and (max-width: 767px) {
	img{
		max-width: 100%;
	}

	/*                   lineup edit(SP)
	-----------------------------------------------*/

	.table--lineup{
		width: 100%;
		text-align: center;
		font-size: 0.7em;
		overflow-x: scroll;
	}
	.table--lineup tr{
		border-bottom: 1px solid #cccccc;
	}
	
	.table--lineup td, .table--lineup th{
		padding: 10px 0;
	}
	.table--lineup th{
		color: #fff;
		background: #00a8a9;
		font-weight: normal;
		line-height: 1.2;
	}
	.table--lineup tr:nth-child(2n){
		background: #f5f5f5;
	}
	
	.table--lineup tr td:not(.bg_02){
		padding: 0.25em;
	}
	
	.pers{
		margin-top: -24px;
		width: 100%;
		background: url(/products/johkasou/lineup/img/bg_pers.jpg) repeat;
		text-align: center;
		padding-bottom:45px;
	}

	.pers img{
		width: 90%;
		margin-top:50px;
	}

	
	.block_Paragraph{
		width:50%!important;
		display:inline-block;
	}
	
	p.icon img{
		margin-top: 10px;
	}

	/*              application edit(SP)
	-----------------------------------------------*/
	.application dl{
		letter-spacing: -10px;
		margin-bottom: 40px;
	}

	.application dl dt, .application dl dd{
		display: inline-block;
		position: relative;
		letter-spacing: normal;
		vertical-align: middle;
	}

	.application dl dt{
		width: 100%;
		z-index: 10;
	}
	
	.application dl dt img{
		width: 100%;
	}
	
	.application dl dd h3{
		margin:20px 0px 0;
		color: #008486;
		font-size: 2.5em;
		line-height: 1.1;
		padding-bottom: 10px;
		letter-spacing: 1px;
		font-weight: normal;
	}
	
/*	.application dl dd h3 span:before{
		content: "use in ";
		font-weight: normal;
	}*/
	.application dl dd h3 span{
		display: block;
		font-size: 0.35em;
		color: #666;
		font-weight: bold;
		letter-spacing: 0;
	}
	.application dl dd {
		margin-left: -1px;
		width: 100%;
		z-index: 5;
	}
	.application dl dd p{
		border-top: 1px solid #ccc;
		margin: 0 0px 20px;
		padding-top: 10px;
	}

/*	.application dl dd {
		background: #f5f5f5;
 	}*/

/*	.application dl:nth-child(2n-1) dd {
		border: 1px solid #d4d4d4;
 	}*/

	.application dl dd h4{
		color: #008486;
	}

	/*                    basics edit(SP)
	-----------------------------------------------*/
	aside.blueprint{
		background: #f0f8f9;
		position: relative;
		padding-bottom: 2.0em;
	}
	
	aside.blueprint h3{
		position: relative;
		text-align: center;
		padding-top: 35px;
		width: 80%;
		margin: 0 auto;
	}
	aside.blueprint h3:after{
		content: "";
		position: absolute;
		background: #008486;
		width: 20%;
		height: 1px;
		top: 6.0em;
		left:40%;
	}
	
	aside.blueprint figure{
		margin-top: 4.5em;
	}
	aside.blueprint figure img:first-child{
		position: relative;
		left:0;
		top:0;
	}


	aside.blueprint dl{
		margin: 1.0em auto 0;
		position: relative;
		width: 80%;
	}
	
	aside.blueprint dl dt{
		font-size: 14px;
		font-weight: bold;
	}
	
	aside.blueprint dl:nth-child(1) dt{color: #008486;}
	aside.blueprint dl:nth-child(2) dt{color: #c67bdc;}
	aside.blueprint dl:nth-child(3) dt{color: #e19d34;}
	aside.blueprint dl:nth-child(4) dt{color: #eb537a;}
	aside.blueprint dl:nth-child(5) dt{color: #4870c5;}

	aside.blueprint dl dd{
		font-size: 12px;
	}

/*                 membrane edit
-----------------------------------------------*/
	.membrane dl + div{
		margin-top: 2.0em;
		text-align: center;
	}
	
	/*             business overview edit
	-----------------------------------------------*/
	.business .grid.grid--is3 li {
		width: 46%!important;
		margin: 0 2%;
		text-align: center;
	}

	.business .grid.grid--is3 li:last-child {
		width: 100%!important;
		text-align: center;
	}

	.business .grid.grid--is3 li:last-child img{
		width: 46%;
	}
	
	.business .grid.grid--is3{
		padding-bottom: 2.0em;
		border-bottom: 2px solid #008486;
		margin-bottom: 2.0em;
	}
	
	/*           After-Sales service edit
	-----------------------------------------------*/
	.after_service .media.media--Table--imgSmall >*{
		display: block;
	}

	.after_service .before_use dl h3{
		color: #008486;
	}
	
	.after_service .before_use dd{
		text-align: center;
	}

	/*            our technology edit(SP)
	-----------------------------------------------*/
	.moving_bed h1 + p{
		margin-bottom: 60px;
	}
	

	.moving_bed ul.parts li{
		color: #333;
		padding-top:193px;
		margin-bottom: 20px;
		width: 100%;
		overflow-x: hidden;
	}
	
	.moving_bed ul.parts li:nth-child(1){
		background: url(/products/johkasou/technology/img/parts_01.jpg) no-repeat;
		min-height: 173px;
	}
	
	.moving_bed ul.parts li:nth-child(2){
		background: url(/products/johkasou/technology/img/parts_02.jpg) no-repeat;
		min-height: 173px;
	}

	.moving_bed ul.parts li:nth-child(3){
		background: url(/products/johkasou/technology/img/parts_03.jpg) no-repeat ;
		min-height: 173px;
		padding-top:243px;
	}

	.membrane dl{
		margin-top:30px;
		width: 100%;
		display: inline-block;
		margin-bottom: 0px;
	}

	.membrane dl dt{
		color: #008486;
		font-weight: bold;
		vertical-align: top;
	}
	
	.membrane dl + div{
		display: inline-block;
		width: 100%;
		margin: 0 auto 50px;
		vertical-align: top;
		text-align: center;
	}
	
	.membrane dl dd{
		margin-bottom: 40px;
	}
	
	
	/*                 TOP edit
	-----------------------------------------------*/
	.column--2 .grid > .media_Img{
		width: 100%;
		text-align: center;	
	}
	
	.key_lead span{
		color: #008486;
		line-height:1.4;
		display: block;
	}

	.key_lead02 span{
		color: #008486;
		line-height: 1.4;
		font-weight: normal;
		font-size: 1.4em;
		display: block;
	}
}


sup{top:0!important;}