@charset "utf-8";

/* **************************************************

Name: modify.css

Description: Sub CSS

Copyright 2016 Hitachi,Ltd.

***************************************************** */


/* ==================================================

/* Reset
/* Margin
/* Column
/* Text
/* Img
/* Link List
/* Table
/* Box Pattern
/* Top Page　～から探すタブ
/* Top Page　ヒーローヘッダー
/* Add for Page setting

===================================================== */



/* ----------------------------------------------------------------------------------------

Modify Setting

------------------------------------------------------------------------------------------- */

body #HeaderArea2 > .ContainerFix {
    -ms-flex-align: stretch;
    align-items: stretch;
}
_:-ms-lang(x), body.header1-fix {
    padding-top: 0;
}
_:-ms-lang(x), body.header1-fix #HeaderArea1 {
    position: static !important;
}
_:-ms-lang(x), body.header2-fix.header2-show #HeaderArea2.Sticky {
    transform: translateY(-100%);
}


/* Reset
=========================================================================================== */
.CourtesyNavi { letter-spacing: -.40em }
.CourtesyNavi li { letter-spacing: normal }
th .LinkListStyle1, th .LinkListStyle2, th .LinkListStyle3, th .LinkListStyle4,
th .LinkListStyle5, th .LinkListStyle6, td .LinkListStyle1, td .LinkListStyle2,
td .LinkListStyle3, td .LinkListStyle4, td .LinkListStyle5, td .LinkListStyle6,
th .ListStyle1, th .ListStyle2, th .ListStyle3, th .ListStyle4, th .ListStyle5,
th .ListStyle6, td .ListStyle1, td .ListStyle2, td .ListStyle3, td .ListStyle4,
td .ListStyle5, td .ListStyle6, td .TextStyle1, td .TextStyle2, td .TextStyle3,
td .TextStyle4, dd .LinkListStyle1, dd .LinkListStyle2, dd .LinkListStyle3,
dd .LinkListStyle4, dd .LinkListStyle5, dd .LinkListStyle6, dd .ListStyle1,
dd .ListStyle2, dd .ListStyle3, dd .ListStyle4, dd .ListStyle5, dd .ListStyle6,
td ul.ListStyle1, td ul.ListStyle2, td p.ImgOnlyStyle {
	margin-bottom: 0;
	font-size: 100%;
}
.Grid4 { clear: both; }

ol.ListStyle1 ul,
ul.ListStyle2 ul {
	margin: 5px 0 0;
	font-size: 100%;
}


/* Margin
=========================================================================================== */
.mt10 { margin-top: 10px!important;}
.mt15 { margin-top: 15px!important;}
.mt25 { margin-top: 25px!important;}
.mt40 { margin-top: 40px!important;}
.ml15 { margin-left: 15px!important;}
.mb0 { margin-bottom: 0 !important;}
.mb5 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px!important;}
.mb15 { margin-bottom: 15px!important;}
.mb25 { margin-bottom: 25px!important;}
.mb30 { margin-bottom: 30px!important; }
.pt15 { padding-top: 15px!important;}
.pt25 { padding-top: 25px!important;}


/* Width
=========================================================================================== */
.w720 {width: 720px !important;}


/* Column
=========================================================================================== */
/* --- 4Gridを3分割 --- */
.ColumnSet4-3 { display: block; }
.ColumnSet4-3:after {
	content: "";
	display: block;
	clear: both;
}
.ColumnSet4-3 .Column1 {
	float: left;
	width: 311px;
	margin: 0 16px 0 0;
}
.ColumnSet4-3 .Column2 {
	float: left;
	width: 638px;
	margin: 0 16px 0 0;
}
.ColumnSet4-3 div:last-child { margin-right: 0; }


/* Text
=========================================================================================== */
.txtRed {	color:#ff0000;}


/* Img
=========================================================================================== */
/* --- 画像を2つ横並び --- */
div.ImgSide {
	margin: 0 auto;
	text-align:center;
}
div.ImgSide p {
	float: left;
	font-size: 83%;
}
div.ImgSide p:nth-child(2n) { margin-left: 15px; }


/* Link List
=========================================================================================== */
/* --- アイコンなし 1emインデントあり --- */
dl.ListStyle_1em { margin: 0 0 20px; }
dl.ListStyle_1em { font-size: 90%; }
dl.ListStyle_1em dd {
	margin: 0 0 15px;
	padding: 0 0 0 1.2em;
	line-height: 140%;
}
dl.ListStyle_1em dt {
	margin: 0 0 5px;
	padding: 0;
	line-height: 140%;
}
ul.ListStyle_1em { margin: 0 0 20px; }
ul.ListStyle_1em { font-size: 90%; }
ul.ListStyle_1em li {
	margin: 0 0 5px;
	padding: 0 0 0 1.2em;
	text-indent: -1.2em;
	line-height: 140%;
}
ol.ListStyle1 dl.ListStyle_1em,
ol.ListStyle1 ListStyle_1em {
	margin: 5px 0 0;
	font-size: 100%;
}


/* Table
=========================================================================================== */
table.tblCenter tr th,
table.tblCenter tr td {
	text-align: center;
}


/* Box Pattern
=========================================================================================== */
.BoxPatternA h3
.BoxPatternA h4,
.BoxPatternB h3,
.BoxPatternB h4,
.BoxPatternC h3,
.BoxPatternC h4 {
	margin-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
}


/* Top Page　Solutions
=========================================================================================== */
.SolutionsSet { margin-bottom: 15px; }
.SolutionsSet .BtnArea { position: relative; }
.SolutionsSet .BtnArea:hover { cursor: pointer; }
.SolutionsSet .BtnArea .btnTitle {
	padding: 5px 15px;
	color: #fff;
	font-size: 112.5%;
	font-weight: bold;
	text-align: center;
	background: #1976d2;
}
.SolutionsSet .BtnArea .btnText {
	padding: 10px 15px 23px;
	background: #efefef;
}
.SolutionsSet .btnText:after {
	position: absolute;
	bottom: 3px;
	left: 222px;
	content: url(/businesses/infrastructure/product_site/water_environment/image/top/icon_solution_arrow.png);
}
.SolutionsSet .btnText:hover:after { bottom: 0px; }
.SolutionsSet .TextStyle1.pb1l { padding-bottom: 21px; }
.SolutionsSet .SetInner {
	display: none;
	padding: 10px 15px;
	background: #efefef;
}
.SetInner .ListStyle1 .LinkListStyle1 li {
	background: 0;
	padding-left: 0;
}


/* Top Page　Products and Systems　～から探すタブ
=========================================================================================== */
.TabList { margin-bottom: 20px; }
.TabList:after {
	content: "";
	display: block;
	clear: both;
}
.TabList li {
	float: left;
	position: relative;
	display: block;
	margin-right: 10px;
	padding: 15px 30px 12px;
	font-size: 110%;
	font-weight: bold;
	background: #ccc;
}
.TabList li.Current {
	background: #1976D2;
	color: #fff;
}
.TabList li.Current:after {
	position: absolute;
	bottom: -22px;
	right: calc(50% - 12px);
	content: "";
	border: 12px solid transparent;
	border-top: 12px solid #1976D2;
}
.TabList li:hover {
	cursor: pointer;
	color: #fff;
	background: #1976D2;
}
.TabWrapper .TabContents { display: none; }
.TabContents h3 { border-bottom: 1px solid #ccc; }

/* --- サブタブ --- */
.SubTabList { margin-bottom: 20px; }
.SubTabList:after {
	content: "";
	display: block;
	clear: both;
}
.SubTabList li {
	float: left;
	position: relative;
	display: block;
	margin-right: 6px;
	padding: 8px 9px 6px;
	font-size: 90%;
	font-weight: bold;
	background: #ccc;
}
.SubTabList li.Current {
	background: #1976D2;
	color: #fff;
}
.SubTabList li.Current:after {
	position: absolute;
	bottom: -22px;
	right: calc(50% - 12px);
	content: "";
	border: 12px solid transparent;
	border-top: 12px solid #1976D2;
}
.SubTabList li:hover {
	cursor: pointer;
	color: #fff;
	background: #1976D2;
}
.TabWrapper .SubTabContents { display: none; }


/* Pick Up
=========================================================================================== */
#PickUp {
  position: fixed;
  top: 300px;
  right: 0;
  z-index: 100;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end; }
#PickUp dl {
    display: flex;
    flex-flow: row nowrap;
    width: auto;
    height: 6em;
    margin-bottom: 10px;
    color: #ffffff;
    cursor: pointer; }
#PickUp dl:last-child {
      margin-bottom: 0; }
#PickUp dt {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0.5em;
    line-height: 120%;
    text-align: center;
    font-weight: bold;
    background-image: url(/businesses/infrastructure/product_site/water_environment/image/top/icon_banner_open.png);
    background-repeat: no-repeat;
    background-position: right 5px top 5px;
    background-color: rgba(177, 0, 14, 0.8);
    border-top-left-radius: 300px;
    border-bottom-left-radius: 300px; }
#PickUp dl.opened dt {
    background-image: none; }
#PickUp dd {
    padding: 0.5em 0;
    background-color: rgba(177, 0, 14, 0.8); }

.JS #PickUp dd {
  display: none; }

#PickUp dl.opened dd {
  background-image: url(/businesses/infrastructure/product_site/water_environment/image/top/icon_banner_close.png);
  background-repeat: no-repeat;
  background-position: right 5px top 5px; }
#PickUp dd .Inner {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
  padding: 0.5em 1em 0 0.5em;
  border-left: 2px solid #fff; }
#PickUp dd .Inner p {
    margin-bottom: 0;
    line-height: 130%;
    white-space: nowrap; }
#PickUp dd .Inner a {
    padding-right: 20px;
    color: #ffffff;
    background-image: url(/businesses/infrastructure/product_site/water_environment/image/top/arw_accordion_link.gif);
    background-repeat: no-repeat;
    background-position: right 2px center;
	box-sizing: border-box; }
#PickUp dd .Inner a:hover, #PickUp dd .Inner a:active {
    background-position: right center; }


/* Top Page　ヒーローヘッダー
=========================================================================================== */
#BrandingImgStyle_hero {
	position: relative;
	z-index: 0;
	max-width: 100%;
	margin: 0 0 30px;
	height: 370px;
	background-image: url(/businesses/infrastructure/product_site/water_environment/image/top/branding.png);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment:scroll;
	overflow: hidden;
}
#BrandingImgStyle_hero p{
	width: 965px;
	margin: auto;
}
#BrandingImgStyle_hero p.main{ padding-top: 50px; } /* subなしの場合は95px */
#BrandingImgStyle_hero p.sub{
	margin-top: 40px;
	padding-bottom: 40px;
}

#BrandingImgStyle_hero .SubText {
	position: relative;
	width: 965px;
	margin: 0 auto;
	padding-top: 50px;
}
#BrandingImgStyle_hero .SubText li {
	position: absolute;
	width: 765px;
	color: #FFF;
	font-size: 137.5%;
	text-shadow: -2px -2px 2px #555, 2px 2px 2px #555;
	opacity: 0;
	z-index: -1;
}
#BrandingImgStyle_hero .SubText li.show {
	opacity: 1;
}
#BrandingImgStyle_hero .SubText li#br_text1,
#BrandingImgStyle_hero .SubText li#br_text4 {
	top: 30px;
	left: 20px;
}
#BrandingImgStyle_hero .SubText li#br_text2,
#BrandingImgStyle_hero .SubText li#br_text5 {
	top: 50px;
	right: 20px;
}
#BrandingImgStyle_hero .SubText li#br_text3,
#BrandingImgStyle_hero .SubText li#br_text6 {
	top: 70px;
	left: 20px;
}
#BrandingImgStyle_hero .SubText li#br_banner1 {
	top: -163px;
	left: calc(482.5px - 50vw);
	width: 100vw;
	min-width: 965px;
	height: 370px;
	background-color: #e60027;
	z-index: 1;
}
#BrandingImgStyle_hero .SubText li#br_banner1 a {
	display: block;
	text-align: center;
}
#BrandingImgStyle_hero p#indicator {
	position: absolute;
	z-index: 2;
	bottom: 10px;
	right: calc(50vw - 482.5px);
	width: auto;
	line-height: 100%;
}
#BrandingImgStyle_hero p#indicator span {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 10px;
	font-size: 0;
	background-color: #787878;
}
#BrandingImgStyle_hero p#indicator span.active {
	background-color: #ffffff;
}
@media screen and (max-width: 964px) {
	#BrandingImgStyle_hero .SubText li#br_banner1 {
		left: 0;
	}
	#BrandingImgStyle_hero p#indicator {
		right: 0;
	}
}

/* Top Page　フロー図
=========================================================================================== */
.FlowImage {
	position: relative;
	overflow: hidden;
}
.FlowImage area { outline: none; }
.scrollController {
	margin: 0 auto;
	width: 57px;
}
.scrollController ul { margin-bottom: 30px; }
.scrollController ul:after {
	content: "";
	display: block;
	clear: both;
}
.scrollController ul li { float: left; }
.scrollController ul .js_btn_play { margin-right: 5px; }
.scrollController ul li:hover { cursor: pointer; }


/* Add for Page setting
=========================================================================================== */
/* --- water_environment > traveling_screenApplication > Lineup --- */
.ListStyle_Lineup1 { margin: 0 0 20px; }
.ListStyle_Lineup1 { font-size: 90%; }
.ListStyle_Lineup1:after {
	content: "";
	display: block;
	clear: both;
}
.ListStyle_Lineup1 dt {
	clear: both;
	float: left;
	margin: 0 10px 0 0;
	padding: 18px 42px 17px 0;
	background: url(/businesses/infrastructure/product_site/water_environment/traveling_screen/image/traveling_screen_002.gif) no-repeat scroll right center;
}
.ListStyle_Lineup1 dd { margin: 0 0 0 12em; }
.ListStyle_Lineup1 ul li{
	margin: 0 0 10px;
	padding: 0 0 0 10px;
	list-style-type: none;
}
.ListStyle_Lineup1 ul li.unit_type ul {
	margin: -34px 0 0 6em;
	padding: 0 0 0 10px;
	background: url(/businesses/infrastructure/product_site/water_environment/traveling_screen/image/traveling_screen_003.gif) no-repeat left center;
	font-size: 100%;
}
.ListStyle_Lineup1 ul ul li{ margin: 0 0 0 33px; }

/* --- water_environment > storm_disk_type_screen > Features --- */
.style_feature1 {
	display:block;
	padding: 15px 0 15px 45px;
}

/* --- YouTube 黒囲-- */
iframe.yt-iframe { border: 1px solid #666666; }

/* --- img hover-- */
a:hover img.opRollover { opacity: 0.6; }

/* h3 underline (for event page) */
h3.borderline {
border-bottom: 1px solid #ccc;
}