@charset "utf-8";

.m_contents{position:relative;z-index:1}

.mcon1{background:url("/images/06_water/main/main_visual04.jpg") no-repeat center 0 ; background-size:cover;}
.visual_tit{width:100%;text-align:center;padding:40px 0 0 0;}
.visual_tit h2{color:#252525;font-size:28px;font-weight:normal;}
.visual_tit h2 strong{color:#0066ba;font-weight:700;}
.visual_tit .text{color:#464646;margin:20px 0 25px 0;}
.visual_tit .btn{margin:0 0 40px 0;}
.visual_tit .btn a{border:1px solid #223e99;color:#223e99;padding:10px 50px 10px 15px;display:inline-block;font-size:14px;margin:0 2px;background:url("/images/06_water/main/vis_icon_blit.png") no-repeat 90% center}
.visual_tit .btn a:hover, .visual_tit .btn a:focus{ text-decoration:underline;}

.visual_icon{padding:20px;}
.visual_icon .icon_wrap li{width:100%;padding:0 0 20px 0;margin:20px 0 0 0;border-bottom:1px dashed #fff;}
.visual_icon .icon_wrap li:last-child{border-bottom:none;}
.visual_icon .icon_wrap li a{color:#fff;display:block;width:70%;padding:0 0 0 30%;height:60px;transition:0.3s all ease-in-out}
.visual_icon .icon_wrap li a strong{font-size:20px;display:block;margin:0 0 10px 0;}
.visual_icon .icon_wrap li a em{ font-style:normal;font-size:12px;display:block;}
.visual_icon .icon_wrap li.icon01 a{background:url("/images/06_water/main/vis_icon01.png") no-repeat left 0;background-size:60px}
.visual_icon .icon_wrap li.icon02 a{background:url("/images/06_water/main/vis_icon02.png") no-repeat left 0;background-size:60px}
.visual_icon .icon_wrap li.icon03 a{background:url("/images/06_water/main/vis_icon03.png") no-repeat left 0;background-size:60px}
.visual_icon .icon_wrap li.icon04 a{background:url("/images/06_water/main/vis_icon01.png") no-repeat left 0;background-size:60px}

.mcon2{padding:30px 15px}

.infozone{position:relative;background:#eef0f5;border-radius:5px;}
.infozone h2{color:#000;font-size:18px;padding:12px;line-height:1.5em;background:#fff;border-radius:5px 5px 0 0;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-top:1px solid #e3e3e3;}
.infozone p{position:absolute;top:11px;right:15px}
.infozone p button{background:url("/images/06_water/common/common_btn.png") no-repeat;width:29px;height:0;padding:29px 0 0 0;overflow:hidden}
.infozone p .stop{background-position:0px -108px}
.infozone p .play{background-position:-29px -108px}
.infozone p .prev{background-position:-87px -108px}
.infozone p .next{background-position:-116px -108px}
.infozone p .v_img{background-position:-203px -108px}
.infozone p .v_txt{background-position:-232px -108px}

.infozone li{display:none}
.infozone li.on{display:block}
.infozone li img{width:100%;height:100%;border-radius:0 0 5px 5px}
.infozone li span{display:none}

.type_img .btn_txt, .type_txt .btn_img{display:none}
.type_img .btn_img, .type_txt .btn_txt{display:inline-block}
.type_txt{}
.type_txt ul{margin:20px}
.type_txt li{background:url("/images/06_water/main/bbs_list.png") no-repeat 0 5px;padding:0 0 0 10px;margin:10px 0 0 0;display:block;}
.type_txt li span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.type_txt li:first-child{margin:0}
.type_txt li img{display:none}
.type_txt li span{display:block}

.fservice{margin:20px 0 0 0;}
.fservice h2{font-weight:400;color:#202020;font-size:24px;text-align:center;margin:0 0 15px 0}
.fservice h2 span{color:#223e99;}
.fservice p{font-size:14px;text-align:center;color:#555555;margin:0 0 15px 0}
.fservice ul{overflow:hidden}
.fservice li{float:left;width:46%;margin:0 2% 3px 2%}
.fservice li a{display:block;border-radius:5px;border:1px solid #0066ba;padding:10px 0;text-align:center;color:#0066ba;font-size:14px}
.fservice li a:hover, .fservice li a:focus{ text-decoration:underline;}

.mcon3{padding:30px 15px;background:url("/images/06_water/main/bbs_bg.jpg") no-repeat top center; background-size:cover;position:relative;}

.bbs{position:relative;}
.bbs h2{color:#000;font-size:26px;text-align:center;font-weight:400;}
.bbs ul{margin:20px 0 0 0;}
.bbs ul li{display:none;width:90%;background:#223e99;padding:5%;}
.bbs ul li a{border:1px solid #6578b8;display:block;padding:10%;color:#fff;font-size:14px;line-height:1.6em;}
.bbs ul li a strong{text-align:center;display:block;font-size:20px;margin:0 0 20px 0;font-weight:500;line-height:1.2em;}
.bbs ul li a em{font-style:normal;display:block;text-align:center;margin:15px 0 0 0;}
.bbs ul li.list01{display:block;}
.bbs ul li:hover, .bbs ul li:focus{background:#192f77;}
.bbs .more{position:absolute;top:0;left:80%;}
.bbs .more img{width:35px;} 

.mcon4{padding:30px 15px;}

.call{padding:0 0 20px 0;border-bottom:1px solid #dcdcdc;}
.call .left{padding:0 0 0 60px;background:url("/images/06_water/main/call_icon.gif") no-repeat left 0;margin:0 0 10px 0;}
.call .left h2{font-weight:400;color:#000;font-size:15px;margin:0 0 8px 0;}
.call .left p{color:#223e99;font-weight:600;text-align:left;font-size:22px;}
.call .right li{display:block;font-size:14px;color:#252525;padding:0 0 0 10px;background:url("/images/06_water/main/list_icon.jpg") no-repeat left center; line-height:1.8em;}

.water_site{padding:20px 0;}
.water_site h2{font-weight:400;color:#464646;font-size:18px;margin:0 0 20px 0;}
.water_site h2 span{color:#019a8f;}
.water_site button{width:100%;font-size:13px;border:1px solid #d4d4d4;text-align:left;padding:0 0 0 20px;height:35px;background:url("/images/06_water/main/stielink_blit.gif") #fff no-repeat 90% center;color:#363636;}
.water_site div{display:none;}
.water_site ul{background:#fff;border:1px solid #cecece;border-top:none;padding:15px 5%;margin:0 0 10px 0;width:89.555555%;}
.water_site li{line-height:1.5em;padding:0 0 0 15px;background:url("/images/06_water/main/list_icon.jpg") no-repeat left center;}
.water_site li a{font-size:13px;}
.water_site li a:hover, .health_site li a:focus{text-decoration:underline}
.water_site div.on{display:block;}
.water_site button.btn02{margin:5px 0 0 0;}


@media all and (min-width:600px) {

.visual_icon{padding:90px 0 40px 0;}
.visual_icon .icon_wrap ul{width:50%;margin:auto;overflow:hidden;}
.visual_icon .icon_wrap li{padding:0 2% 0 0;margin:0 0 0 2%;}
/*.visual_icon .icon_wrap li{width:29%;float:left;border-bottom:none;border-right:1px dashed #fff;padding:0 2% 0 0;margin:0 0 0 2%;}*/
.visual_icon .icon_wrap li:last-child{border-right:none;}
.visual_icon .icon_wrap li a{width:65%;padding:0 0 0 35%;}



.bbs ul{overflow:hidden;}
.bbs ul li{width:38%;float:left;margin:0 1%;}
.bbs ul li a{height:200px;}
.bbs ul li.list02{display:block;}

.call{overflow:hidden;}
.call .left{float:left;}
.call .right{float:right;}


}


/* Tablet */
@media all and (min-width:768px) {
.water_con{overflow:hidden;}
.infozone{float:left;width:45%;height:285px}
.infozone h2{padding:15px 0 0 15px;height:40px}
.infozone li{text-align:center}
.infozone li img{height:230px;width:100%;}
.type_txt li{text-align:left}

.fservice{padding:0;float:left;width:53%;margin:0 0 0 2%;background:url("/images/06_water/main/fservice_bg.gif");border-radius:5px;height:285px}
.fservice h2{padding:40px 0 0 0;}
.fservice ul{padding:0 20px;margin:30px 0 0 0;}


.bbs ul li{padding:3%;width:42%;} 
.bbs ul li a{height:180px;padding:5%}
 
}

@media all and (min-width:870px) {

.fservice li{width:31%;margin:0 2% 5px 0;}
.fservice li a{border:none;padding:15px 0 0 70px;background:url("/images/06_water/main/fservice_icon.png") no-repeat; text-align:left;height:50px;color:#363636;}
.fservice li.icon1 a{background-position:left 0;background-size:60px}
.fservice li.icon2 a{background-position:left -95px;background-size:60px;}
.fservice li.icon3 a{background-position:left -193px;background-size:60px;}
.fservice li.icon4 a{background-position:left -290px;background-size:60px;}
.fservice li.icon5 a{background-position:left -385px;background-size:60px}
.fservice li.icon6 a{background-position:left -482px;background-size:60px}
}

/* Desktop */
@media all and (min-width:1023px) {

.mcon1{min-width:1200px;height:730px;background-size:auto;overflow:hidden;position:relative}
.visual_tit{height:370px;margin:0 auto;padding:100px 0 0 0;}
.visual_tit h2{font-size:70px;}
.visual_tit .text{font-size:18px;}

.visual_icon .icon_wrap{width:1200px;margin:0 auto;z-index:999;position:relative}
.visual_icon .icon_wrap li{}
.visual_icon .icon_wrap li a{height:110px;padding:20px 0 0 150px;transition:0.3s all ease-in-out}
/*
.visual_icon .icon_wrap li{width:299px;padding:0 50px 0 0;margin:0 0 0 50px;}
.visual_icon .icon_wrap li a{width:149px;height:110px;padding:20px 0 0 150px;transition:0.3s all ease-in-out}
*/
.visual_icon .icon_wrap li a strong{font-size:24px;display:block;margin:0 0 15px 0;}
/*.visual_icon .icon_wrap li a:hover{background-size:40% !important}*/
.visual_icon .icon_wrap li a em{font-size:14px; line-height:1.5em;}
.visual_icon .icon_wrap li.icon01 a, .visual_icon .icon_wrap li.icon02 a, .visual_icon .icon_wrap li.icon03 a, .visual_icon .icon_wrap li.icon04 a{background-size:129px;}

.mcon2{min-width:1200px;padding:55px 0;}
.water_con{width:1200px;margin:0 auto;}
.infozone{float:left;margin:0 45px 0 0;width:395px}
.infozone li img{width:auto;height:100%}

.fservice{width:760px;margin:0;}
.fservice h2{}
.fservice ul{}
.fservice li{width:16.5%;margin:0;}
.fservice li a{padding:100px 0 0 0; text-align:center;height:20px}
.fservice li.icon1 a{background-position:center 0;background-size:auto}
.fservice li.icon2 a{background-position:center -130px;background-size:auto;}
.fservice li.icon3 a{background-position:center -262px;background-size:auto;}
.fservice li.icon4 a{background-position:center -395px;background-size:auto;}
.fservice li.icon5 a{background-position:center -527px;background-size:auto}
.fservice li.icon6 a{background-position:center -660px;background-size:auto}

.mcon3{min-width:1200px;padding:0;height:550px;}
.bbs{width:1200px;margin:0 auto;}
.bbs h2{font-size:50px;padding:80px 0 0 0;}
.bbs ul{margin:60px 0 0 0;}
.bbs ul li{display:block;float:left;width:256px;height:256px;padding:12px;margin:0 26px 0 0;}
.bbs ul li:last-child{margin:0;}
.bbs ul li a{width:196px;height:196px;padding:30px;}
.bbs ul li a strong{font-size:24px;margin:0 0 20px 0;}
.bbs .more{position:absolute;top:85px;left:720px;}
.bbs .more img{width:auto;}


.mcon4{min-width:1200px;padding:55px 0;}
.water_info:after{clear:both;content:"";display:block}

.water_info{width:1200px;margin:0 auto;}
.call{width:535px;padding:0 0 0 20px;margin:0 70px 0 0;float:left;border-bottom:none;}
.call .left{float:left;margin:0 35px 0 0;}
.call .right{float:left;}

.water_site{float:left;padding:0;width:545px;float:left;padding:0;margin:8px 30px 0 0;}
.water_site h2{float:left;margin:8px 15px 0 0;}
.water_site button{float:left;width:215px;}
.water_site button.btn02{margin:0 0 0 15px}
.water_site div{position:relative;}
.water_site ul{position:absolute;height:auto;bottom:-10px;;width:183px;border-top:1px solid #cecece;border-bottom:none;padding:15px;}
.water_site .site01 ul{right:4px;}
.water_site .site02 ul{left:96px;}
}


.shake{
animation-duration:4s;
-webkit-animation-duration:4s;
-ms-animation-duration:4s;
animation-name:shake;
-webkit-animation-name:shake;
-ms-animation-name:shake;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
background:url("/images/06_water/main/main_visual_bg.png") no-repeat center top;
}
@media all and (min-width:1023px) {
.shake{background:none}
}    


@keyframes shake {
  10%, 30%, 50%, 70%, 90% {
    background-position:center 40px
  }
  20%, 40%, 60%, 80% {
     background-position:center 10px
  }
}

.wave{z-index: 500;display:none;}
@media all and (min-width:1023px) {
.wave{display:block}
}                         
.wave01
{
  display:block;
  position:absolute;
  bottom: -100px;
  left:0;
  animation-name: wave01;
  background: url(/images/06_water/main/main_visual_bg01.png) no-repeat;
  width: 2000px;
  height: 300px;
  z-index: 299;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  opacity: 0.9;
  }
.wave02
{
  display:block;
  position:absolute;
  bottom: -50px;
  left:0;
  animation-name: wave02;
  background: url(/images/06_water/main/main_visual_bg02.png) no-repeat;
  width: 2000px;
  height: 300px;
  z-index: 298;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  opacity: 0.6;
  }

.wave03
{
  display:block;
  position:absolute;
  bottom: -10px;
  left: -50px;
  animation-name: wave03;
  background: url(/images/06_water/main/main_visual_bg03.png) no-repeat;
  width: 2000px;
  height: 300px;
  z-index: 297;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  opacity: 0.8;
  }
.wave04
{
  display:block;
  position:absolute;
  bottom: -10px;
  left: 0px;
  animation-name: wave04;
  background: url(/images/06_water/main/main_visual_bg04.png) no-repeat;
  width: 2000px;
  height: 300px;
  z-index: 296;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  opacity: 0.7;
  }


@keyframes wave01{
0%,100%{transform:translateY(0) translateX(0)}
40%{transform:translateY(-20px) translateX(-100px) }
75%{transform:translateY(-40px) translateX(-50px) }
}
@keyframes wave02{
0%,100%{transform:translateY(0) translateX(0)}
40%{transform:translateY(-20px) translateX(-100px) }
70%{transform:translateY(20px) translateX(-100px) }
}
@keyframes wave03{
0%,100%{transform:translateY(0) translateX(0)}
30%{transform:translateY(-10px) translateX(-40px) }
60%{transform:translateY(-30px) translateX(-30px) }
}
@keyframes wave04{
0%,100%{transform:translateY(0) translateX(0)}
40%{transform:translateY(-20px) translateX(-80px) }
80%{transform:translateY(-40px) translateX(-50px) }
}