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

/*html {
	overflow:hidden;
	width:100%;
	height:100%;
	overflow-y:hidden;
}*/
body {
	margin:0 auto;
	text-align:center;
}

.tx-id {
	text-indent: -9999px;
}
/* head ///////////////////////////////////////////////////////////////////////////*/

#head a {
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#head a:hover {	opacity:0.7;}


#head {
		border-top:4px solid #2ea7e0;
		background-color: rgba(255, 255, 255, 0.9);
		position:fixed;
		left:0;
		top:0;
		width:100%;
		margin:0 auto;
		z-index:99999;
		height:30px;
		box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5);
		padding-top:14px;
}

html.ie9 #head {
		background-color: #fff;
		border-bottom:1px solid #666 !important;
}
#head section {
	width:1080px;
	position:relative;
	margin:0 auto;
}
#head h1 {
	float:left;
}
#head ul {
	margin-right:200px;
}
#head li {
	display:inline-block;
	float:left\9;
	font-size:12px;
	text-align:left;
}
#head li:after{
	content:"|";
	padding:0 12px;
}

#head li a{
	color:#333;
	text-decoration:none;
}
#head li a:hover{
	color:#ffd801;
	text-decoration:none;
}
#head li a.current{
	color:#2ea7e0;
	text-decoration:none;
}

#head aside {
	position:absolute;
	right:0;
	top:-14px;
	width:200px;
	height:62px;
	background:url(../images/aside_bg.png) no-repeat;
	text-align:center;
}
#head aside p{
	margin:7px 0 3px 0;
	font-size:10px;
}
#head aside h2{
	font-size:20px;
	font-weight:bold;
	color:#3fbff0;
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}

#head aside h2 span{
	font-size:10px;
	color:#ffd801;
	display:block;
	text-shadow:none;
	margin-top:2px;
}




/* content ///////////////////////////////////////////////////////////////////////////*/

article {
	position:relative;
}
#top {
	position:relative;
}
/* top&end ///////////////////*/
#top div {
	height:240px;
	z-index:8;
	position:fixed;
	display:block;
}
#top p {
	position:fixed;
	z-index:9;
}
#end { display:inline-block; text-align:center; margin:0 auto;
	 background-color:#fff;
	 position:relative;
	 z-index:-1;
}
#end div {
	position:absolute;
	background:url(../images/logo_bg.png) no-repeat;
	height:160px !important; width:180px;
}
#top h1 {
	position:absolute;
	top:0;
}
#end h3 {
	color:#999999;
	text-align:center;
	line-height:1.6;
	margin:15px 0;
}
#end aside {
	border-radius:6px;
	box-shadow:0 0 8px 0 rgba(0,0,0,0.4);
	width:420px;
	margin:0 auto;
	padding:30px 15px;
}
html.ie9 #end aside{ border:1px solid #ccc;}
#end aside p{
	margin:7px 0 3px 0;
	font-size:14px;
}
#end aside h2{
	font-size:40px;
	font-weight:bold;
	color:#3fbff0;
	margin:8px 0;
}

#end aside h2 span{
	font-size:18px !important;
	color:#ffd801;
	display:block;
	text-shadow:none;
	margin-top:2px;
}
#end aside span{
	color:#999999;
	font-size:12px;
}

.sp { display:none;}

/* sevice ///////////////////*/
#service {
	 padding-top:44px;
}
#service section {
	width:1080px;
	position:relative;
	margin:0 auto;
	overflow:visible;
}

#service h1 {
	padding:30px 0 100px;
}
#service em {
	width:960px;
	margin:0 auto;
	text-align:left;
	display:inline-block;
}
#pipe0,#pipe1,#pipe2,#pipe3 { position:absolute; height:512px; width:100%; overflow:hidden;}
#pipe0{ z-index:11;}
#pipe1{ z-index:13; background: url(../images/s_pipe1.png) no-repeat center top;}
#pipe2{ z-index:10; background: url(../images/s_pipe3.png) no-repeat center top;}
#pipe3{ margin-top:8px; z-index:12; background: url(../images/s_pipe2.png) no-repeat center top;}
#pipe1 em {margin-top:34px; margin-left:-600px; opacity:0;}
#pipe2 em {margin-top:90px; margin-right:-600px; text-align:right; opacity:0;}
#pipe3 em {margin-top:370px; margin-right:-600px; text-align:right; opacity:0;}

/* trouble ///////////////////*/
#water { background:#b0eaf8 url(../images/water_bg.jpg) repeat-x; z-index:-5; position:relative; padding-top:44px;}
.ripple { text-align:center; margin:0 auto; position:relative; width:355px; height:355px;}
.ripple .rip { opacity:0; position:absolute; left:172; bottom:0;}
.ripple li { position:absolute; text-align:left; line-height:1.4; z-index:20;}
.ripple h2 { font-size:18px;}
.ripple span { display:block; font-size:10px;}
.ripple li.li_tr01 { background:url(../images/tr_menu01.png) no-repeat right top; left:-70px; top:180px; overflow:hidden; padding-right:25px;}
.ripple li.li_tr02 { background:url(../images/tr_menu02.png) no-repeat right top; left:-140px; top:380px;}
.ripple li.li_tr03 { background:url(../images/tr_menu03.png) no-repeat left top; right:-120px; top:400px; padding-left:55px;}
#trouble,#trouble3{ overflow:hidden;}
#trouble section{ position:fixed;}
#tr01,#tr02,#tr03,#tr04 {
	float:left;
	text-align:left;
	margin:40px auto 0 auto;
}
#tr01 div{ width:787px;	margin:0 auto;}
#tr02 div{ width:740px; margin:0 auto;}
#trouble div h2{
	background:url(../images/tr_menu02.png) no-repeat;
	background-size:30px 30px;
	padding:0 0 0 40px;
	font-size:22px;
	line-height:30px;
	font-weight:normal;
	margin-bottom:24px;
}

#tr01 .col2 { width:330px; float:left; margin-right:120px; margin-bottom:20px; font-size:12px;}
#tr01 .col2 dt{ width:146px; float:left; text-align:center; margin-right:5px; background:url(../images/arrow.png) no-repeat right top; padding-right:25px;}
#tr01 .col2 dt.rgt{float:left; margin-right:0 !important; padding-right:0 !important; background:none;}
#tr01 dt img{
	border-radius:4px;
	border:3px solid #fff;
	margin-bottom:4px;
}
#tr01 .col3 { width:780px; float:left; margin-left:60px; margin-bottom:20px; font-size:12px;}
#tr01 .col3 dt{ width:146px; float:left; margin-right:105px; text-align:center;}
#tr01 .col3 dt.rgt{float:left; margin-right:0 !important; padding-right:0 !important; background:none;}

#tr02 .col2 { width:310px; float:left; margin-right:120px; min-height:10em;}
#tr02 .col3 { width:200px; float:left; margin-right:70px;}
#tr02 dt{ font-weight:bold; font-size:18px; margin-bottom:14px;}
#tr02 dd {font-size:14px;line-height:1.8;margin-bottom:20px;}

/* trouble3 ///////////////////*/

#trouble dt,#trouble dd,#trouble3 dt,#trouble3 dd {
	text-justify:inter-ideograph;
	text-align:justify;
}

#trouble3 section{ position:fixed; padding-top:140px; background:url(../images/grad.png) no-repeat left -30px}
#trouble3 div h2{
	background:url(../images/tr_menu03.png) no-repeat;
	background-size:contain; 
	padding:0 0 0 40px;
	font-size:22px;
	line-height:30px;
	font-weight:normal;
	margin-bottom:24px;
	height:30px;
}
#trouble3 div h2 span{
	font-size:14px;
	display:block;
	line-height:1.8;
}
#trouble3 div h3{
	font-weight:normal;
	font-size:18px;
	clear:both;
	margin:25px 0 15px;
}
#trouble3 div h3 span{
	font-size:14px;
	display:block;
	line-height:1.8;
}

#trouble3 dl { overflow:hidden;}
#trouble3 dt { width:145px; margin-right:30px; float:left; text-align:center; color:#016a97; font-size:12px;}
#trouble3 dd { width:500px; float:left; line-height:1.4;}
#trouble3 dt img{
	border-radius:4px;
	border:3px solid #fff;
}

#tr04 .col2 { width:330px; float:left; margin-right:120px; margin-bottom:20px; font-size:12px;}
#tr04 .col2 dt{ width:146px; float:left; text-align:center; margin-right:5px; background:url(../images/arrow.png) no-repeat right top; padding-right:25px;}
#tr04 .col2 dd{ width:330px; clear:left; text-align:center;}
#tr04 .col2 dt.rgt{float:left; margin-right:0 !important; padding-right:0 !important; background:none;}
#tr04 dt img{
	border-radius:4px;
	border:3px solid #fff;
	margin-bottom:4px;
}

#trouble .col2:nth-child(2n+1),#trouble3 .col2:nth-child(2n+1) { margin-right:0 !important;}
#trouble .col3:nth-child(3n+2),#trouble3 .col3:nth-child(3n+2) { margin-right:0 !important;}



#tr03 div{ width:675px;	margin:0 auto;}
#tr04 div{ width:800px; margin:0 auto;}


/* for ie*/
.ie #trouble div h2{
	background:url(../images/tr_menu02_ie.png) no-repeat;
}

.ie #trouble3 div h2{
	background:url(../images/tr_menu03_ie.png) no-repeat;
}


/* company ///////////////////*/
#company {
	 position:relative;
	 background-color:#fff;
}
#company .title {
	background:url(../images/pipe_btm.png) no-repeat center top;
	position: absolute;
	top:-60px;
	width:100%;
	height:100px;
	z-index:9995;
}
#company .title img{
	z-index:9995;
}

#company section {
 width:940px; margin:0 auto; text-align:left; padding-top:80px;}
#company .col2 {
	width:400px;
	float:left;
	text-align:left;
	margin-right:140px;
}
#company .rgt { margin-right:0 !important;}
#company h1 { margin:30px 0;}
#company .col2 dt{
	font-weight:bold;
	margin:6px 0;
}
#company .col2 dd{
	margin-bottom:14px;
	line-height:1.8;
	text-align:justify;
	text-justify:inter-ideograph;
}


.clear:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
/*これで解決させる*/
overflow:hidden;
font-size:0.1em;
line-height:0;
}

.clear {
  min-height: 1px;
}

* html .clear {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.clear_both{
	clear:both;
}


@media screen and (max-device-width: 480px){
#head	{display:none;

}


#top div {
	position:absolute !important;
}
#top p {
	position:absolute !important;
}
#trouble section{ position:relative !important;}
#trouble3 section{ position:relative !important;
	padding-top:140px;
}

#tr01,#tr02,#tr03,#tr04 {
	float:none !important;
	clear:left;
	text-align:left;
	margin:40px auto 0 auto;
}

#pipe1 em {margin-top:34px; margin-left:0px;opacity:1 !important;}
#pipe2 em {margin-top:90px; margin-right:-30px; text-align:right; opacity:1 !important;}
#pipe3 em {margin-top:370px; margin-right:360px; text-align:right;opacity:1 !important;}
.ripple h2 { font-size:12px !important;}
.ripple .rip { opacity:1 !important; position:absolute; left:9px !important; bottom:-130px !important; width:335px; height:335px;}
.ripple li.li_tr01 { left:-70px; top:180px; overflow:hidden; padding-right:25px;}
.ripple li.li_tr02 { left:-140px; top:380px;}
.ripple li.li_tr03 { right:-120px; top:400px; padding-left:55px;}
.sp { display:block;}

}