@charset "utf-8";
.PC{display:none;}

body{
	background: #e3f4ff;}

/*--------------------------------------------------------------
HEAD
--------------------------------------------------------------*/
header{
 background-color:#fff;
 border-bottom: 1px solid #dedede;
 margin-bottom:10px;
 padding:7px 0 9px 6px;
}
header div{ height:38px;}

header div#LogoH{
 line-height:0;
 text-indent:-9999px;
 background: url("../images/header/soft99.gif") 0 0 no-repeat;
 background-size:70px 38px;
}

 header div#LogoH a{
 display:block;
 width:70px;
 height:38px;
}

/*--------------------------------------------------------------
MAIN
--------------------------------------------------------------*/
#Main{
 margin:auto 10px;
}

#Main h1{
 line-height:0;
 text-indent:-9999px;
 background: url(../images/sp/main_img.jpg) 0 0 no-repeat;
 background-size: contain;
 padding-top: 108%;
}

#Main img{ width: 100%;}

/*--------------------------------------------------------------
contents
--------------------------------------------------------------*/
.FL{}
.FR{}
.PC { display: none;}
.SP_BR { display: none;}

article{
 background-color:#fff;
 margin:auto 10px;
 margin-bottom:20px;
 padding:20px 10px;
}

.mB10 {margin-bottom: 10px;}
.mB20 {margin-bottom: 20px;}
.mB40 {margin-bottom: 30px;}


section {}
section p{
 font-size:1.6em;
 line-height:150%;
}



/*--------------------------------------------------------------
Content0
--------------------------------------------------------------*/

section.Content0 div.guidance{
 margin-bottom: 20px;
}

.maehuri img { width:100%;}

.guidance p.guidance_1 {
 background: url(../images/sp/guidance_img.gif) no-repeat center center;
 background-size:contain;
 height: 0;
 padding-top: 139.8%;/*calc(100%*783/560)*/
 text-indent: -9999px;
}

.blue_arrow {
 display: block;
 margin: 0 auto 20px auto;
}



/*--------------------------------------------------------------
Content1
--------------------------------------------------------------*/
section.Content1 h2 {
 background: url(../images/sp/content1_tit.gif) no-repeat center center #201fa7;
 background-size:contain;
 text-indent: -9999px;
 height: 82px;
}

section.Content1 .Case {
 background-color: #f6fbff;
 border: 3px solid #c0e6ff;
 border-top: none;
 padding: 27px 10px 0 10px;
 margin-bottom: 15px;
}

/*--------------------------------------------------------------
Case
--------------------------------------------------------------*/

.Content1 .Case .Case1 h3,
.Content1 .Case .Case1 h4.caseA p,
.Content1 .Case .Case2 h3,
.Content1 .Case .Case2 h4.attention_3,
.Content1 .Case .Case3 h3
 { text-indent: -9999px;}

.Content1 .Case .Case1 .txt_right_box .comment_1,
.Content1 .Case .Case1 .txt_left_box .comment_2,
.Content1 .Case .Case2 .txt_right_box .comment_1,
.Content1 .Case .Case3 .txt_right_box .comment_1,
.Content1 .Case .Case3 .txt_left_box .comment_2 { width: 358px;}

.Content1 .Case .txt_right_box,
.Content1 .Case .txt_left_box {
 border-top: 1px solid #ccc;
 padding-top: 20px;
 margin-bottom: 20px;
}

.Content1 .Case .txt_right_box img,
.Content1 .Case .txt_left_box img{
 margin-bottom: 20px;
}

.Content1 .Case .Case1,
.Content1 .Case .Case2 { margin-bottom: 40px;}


/*--------------------------------------------------------------
Case1
--------------------------------------------------------------*/

.Content1 .Case .Case1 h3 {
 background: url(../images/sp/case1_tit.gif) no-repeat;
 background-size:contain;
 height: 0;
 margin:0 auto 10px auto;
 padding-top: 26%;
 text-indent: -9999px;
}

.Content1 .Case .Case1 .comment_1 h4 {
 color: #201fa7;
 font-size: 1.6em;
 font-weight: bold;
 line-height: 150%;
 margin-bottom: 10px;
}

.Content1 .Case .Case1 .comment_2 h4 {
 color: #201fa7;
 font-size: 1.6em;
 font-weight: bold;
 line-height: 150%;
 margin-bottom: 10px;
}

.Content1 .Case .Case1 .attention_1 {
 background: url(../images/sp/case1_sub_tit1.gif) no-repeat center center;
 background-size:contain;
 height: 0;
 margin:0 auto 10px auto;
 padding-top: 22.6%;
 text-indent: -9999px;
}


/*水切れタイプ図
--------------------------------------------------------------*/

.Content1 .Case .Case1 .attention_2 {
 background: url(../images/sp/case1_stit.gif) no-repeat #0182f0;
 background-size:contain;
 height: 0;
 padding-top:22.6%;
 text-indent: -9999px;
}

.Content1 .Case .Case1 .caseA .their_test {
 background: url(../images/sp/case1_stit_test.gif) no-repeat right;
 background-size: 25%;
 height: 0px;
 margin: 10px 0;
 padding-top: 25px;
 text-indent: -9999px;
}

.Content1 .Case .Case1 .caseA ul { margin-bottom: 20px;}

.Content1 .Case .Case1 .caseA ul li img {
 width: 100%;}

.Content1 .Case .Case1 .caseA ul li.red_arrow img{
 margin: 10px auto;
 display: block;
 width: inherit;
}


.Content1 .Case .Case1 .caseA p {
 background: url(../images/sp/case1_stit_txt_1.gif) no-repeat;
 background-size:contain;
 height: 0;
 padding-top: 32%;
 text-indent: -9999px;
}


/*--------------------------------------------------------------
Case2
--------------------------------------------------------------*/

.Content1 .Case .Case2 h3 {
 background: url(../images/sp/case2_tit.gif) no-repeat;
 background-size:contain;
 height: 0;
 margin:0 auto 10px auto;
 padding-top: 25%;
 text-indent: -9999px;
}

.Content1 .Case .Case2 .attention_3{
 background: url(../images/sp/case2_sub_tit1.gif) no-repeat;
 background-size:contain;
 height: 0;
 margin:0 auto 10px auto;
 padding-top: 22.3%;
 text-indent: -9999px;
}


.Content1 .Case .Case2 .txt_right_box .comment_1 h4 {
 color: #201fa7;
 font-size: 1.6em;
 font-weight: bold;
 line-height: 150%;
 margin-bottom: 10px;

}

.Content1 .Case .Case2 ul li.FC img {
 margin: 10px auto;
 display: block;
}

/*--------------------------------------------------------------
Case3
--------------------------------------------------------------*/

.Content1 .Case .Case3 h3 {
 background: url(../images/sp/case3_tit.gif) no-repeat;
 background-size:contain;
 height: 0;
 margin:0 auto 10px auto;
 padding-top: 26%;
 text-indent: -9999px;

}

.Content1 .Case .Case3 .txt_right_box .comment_1 h4 {
 color: #201fa7;
 font-size: 1.6em;
 font-weight: bold;
 line-height: 150%;
 margin-bottom: 10px;
}

.Content1 .Case .Case3 .txt_left_box .comment_2 h4 {
 color: #201fa7;
 font-size: 1.6em;
 font-weight: bold;
 line-height: 150%;
 margin-bottom: 10px;
}

/*--------------------------------------------------------------
OTHER
--------------------------------------------------------------*/			
section.Result{ margin-bottom:30px;}

section.Result .List p {
 background: url(../images/sp/matome_img.jpg) no-repeat center;
 background-size:contain;
 text-indent: -9999px;
 height: 0px;
 padding-top:130%;

}
section.Result p br{ display: none;}

section.Product{}

/*--------------------------------------------------------------
Product
--------------------------------------------------------------*/

 section.Product h2{
 background: url(../images/sp/hydro_tit.gif) no-repeat #201fa7;
 background-size:contain;
 text-indent:-9999px;
 height:0;
 padding-top: 21%;
}

 section.Product .ProductArea{
 border-left: 3px solid #201fa7;
 border-right: 3px solid #201fa7;
 border-bottom: 3px solid #201fa7;
 background-color:#fff;
 padding:30px 20px 30px 20px;
}


section.Product .ProductArea p.hydro_txt2 {
 background: url(../images/sp/hydro_stit.gif) no-repeat center;
 background-size:contain;
 text-indent: -9999px;
 height: 0;
 padding-top: 22.4%;
 margin-bottom: 10px;
}


section.Product .ProductArea p.hydro_txt1 {
 background: url(../images/sp/hydro_txt_1.gif) no-repeat;
 background-size:contain;
 height:0;
 padding-top: 11%;
 text-indent: -9999px;
 margin-bottom:10px;
}

section.Product .ProductArea h3 {
 background: url(../images/sp/hydro_img_1.jpg) no-repeat;
 background-size:contain;
 text-indent: -9999px;
 height: 0;
 padding-top: 69%;
 margin-bottom: 10px;
}

section.Product .ProductArea ul {
 background: url(../images/sp/hydro_txt_2.gif) no-repeat;
 background-size:contain;
 clear: both;
 text-indent: -9999px;
 height:0;
 padding-top: 94%;
 margin-bottom: 20px;
}

section.Product .ProductArea .Corporate{
 text-indent:-9999px;
 background: url(../images/sp/hydro_soft99.gif) 0 0 no-repeat;
 background-size:contain;
 height:0;
 padding-top: 8%;
 margin-bottom: 20px;
}

section.Product .ProductArea img { width:100%;}

	section.Product .ProductArea .Link{}
	

/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/
footer{
	background-color:#fff;
	padding:15px 10px;}
	footer p.site{
		float: left;
		font-size:1.0em;
		padding-top:10px;}
		footer p.site span{
			background: url("../images/sp/arr01.gif") left 3px no-repeat;
			background-size:3px 6px;
			padding-left: 10px;}	
		footer p.site span a:link{text-decoration:none; color:#333;}
		footer p.site span a:visited{text-decoration:none; color:#333;}
		footer p.site span a:hover{text-decoration:none; color:#333;}
		footer p.site span a:active{text-decoration:none; color:#333;}	
	footer p.FR{
		float:right;}
	footer p img{
		width:57px;
		height:33px;}

footer address{
	text-align:center;
	clear:both;
	font-size:1.0em;
	font-family: Arial,Helvetica,sans-serif;
	padding-top:19px;}



	
.step-width img{
 width: 100%;}

.step-width .comment_1{
 width: 100%;}

.Content1 .Case .Case2 .txt_right_box .comment_1.step-wide{
 width: 100%;}
.step-width .step-wide{
 width: 100%;}

.step-wide-list{
width: 100%;}

.Content1 .Case .Case3 .txt_right_box .comment_1.step-wide,
.Content1 .Case .Case3 .txt_left_box .comment_2.step-wide {
width: 100%;
 }

.Content1 .Case .Case1 .txt_right_box .comment_1.step-wide,
.Content1 .Case .Case1 .txt_left_box .comment_2.step-wide {
 width: 100%;
}