@charset "UTF-8";


/* -------------------------------------------------------------------------- **
**  INDEX
** -------------------------------------------------------------------------- */
#index {}

#cover {
	margin-bottom: 30px;
}

#cover .slider {
	width: 100%;
	min-height: 120px;
	max-height: 520px;
}
	#cover .slider .slides {
		position: relative;
		text-align: center;
	}
	#cover .slider .slides::before,
	#cover .slider .slides::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		display: block;
		width: 50%;
		height: 100%;
		z-index: 8;
	}
	#cover .slider .slides::after {
		left: 50%;
	}
		#cover .slider .slides a {
			position: relative;
			display: block;
			max-width: 1200px;
			margin: auto;
			z-index: 10;
		}
		#cover .slider .slides a:after {
			content: "";
			position: absolute;
			top: 0; left: 0;
			right: 0; bottom: 0;
			display: block;
		}
		#cover .slider .slides img {
			width: 100%;
			height: auto;
		}
.slick-dots { bottom: 0 !important; }
.slick-dots li button:before { font-size: 10px !important; }
.slick-dotted.slick-slider { margin-bottom: 0 !important; }

.slick-prev,
.slick-next { width: 60px !important; height: 60px !important; z-index: 10 !important; }
.slick-prev { left: 0px !important; }
.slick-next { right: 0px !important; }
.slick-prev:before, .slick-next:before {
	color: #007CFF !important;
	font-size: 30px !important;
}

@media screen and (min-width: 1200px) {
	.slick-prev { left: 50% !important; margin-left: -600px; }
	.slick-next { right: 50% !important; margin-right: -600px; }
}

#cover .slider .slides01 { background-color: #ecf1f4; }
#cover .slider .slides02 { background-color: #005bac; }
#cover .slider .slides03 { background: transparent url(../images/index/slide/slide_cg2_rbg.png?2023030600) repeat-x left bottom; background-size: auto 100%; }

/* i-Aqua */
#cover .slider .slides-iaqua { background-color: #d6e0ee; }
/* メイスイクールギャラリー2 グッドデザイン2016 */
#cover .slider .slides-cg2gd { background-color: #eceff2; }
/* 浄水器とメンテナンス グッドデザイン2016 */
#cover .slider .slides-gd { background-color: #ecf1f4; }
/* 公共スペース向け製品 */
#cover .slider .slides-biz { background-color: #fff; }
/* ソーダメーカー */
#cover .slider .slides-sm { background-color: #fff; }
#cover .slider .slides-sm::before { background-color: #e8ecf7; }
/* メイスイクールギャラリー2 */
#cover .slider .slides-cg2 { background: transparent url(../images/index/slide/slide_cg2_rbg.png?2023030600) repeat-x left bottom; background-size: auto 100%; }



#important {
	margin-bottom: 10px;
	padding: 0px 19px;
	background-color: #FFF7EE;
	border: solid 1px #F4C58E;
	border-radius: 4px;
}
#important h2,
#important h3 {
	margin-bottom: 0.7em;
	padding: 19px 0 0.7em 38px;
	background: transparent no-repeat url(../images/common/warning.png) left center;
	background-size: 32px 32px;
	border: solid 0px #CECCC4;
	border-width: 0 0 1px 0;
	color: #FF5B00;
	font-size: 1.28571em;
	font-weight: bold;
}
.svg #important h2,
.svg #important h3 { background-image: url(../images/common/warning.svg); }
#important ul {}
	#important ul li {
		margin-bottom: 0.8em;
		padding-bottom: 0.8em;
		border: dotted 0px #CECCC4;
		border-width: 0 0 1px 0;
	}
	#important ul li:last-child { border: none; }

#important dl {}
#important dl dt,
#important dl dd {}
#important dl dt { clear: both; float: left; width: 7em; }
#important dl dd { display: block; margin-left: 7em; }


#pages {
	margin-bottom: 40px;
}
#pages .col-wrap {
	padding: 14px 18px 24px;
	background-color: #fff;
	border-radius: 4px;
}
#pages .col-wrap h2,
#pages .col-wrap h3 {
	margin: auto -18px 18px;
	padding: 0 18px 10px;
	border: solid 0px #E6EAED;
	border-width: 0 0 1px 0;
	font-size: 1.28571em;
	line-height: 1.1;
}
#pages .col-wrap ul {}
#pages .col-wrap ul li {
	float: left;
	width: 50%;
	text-align: center;
}
#pages .col-wrap ul li a {
	display: block;
	text-decoration: none;
	color: #333;
	-webkit-transition: -webkit-opacity .18s;
	-moz-transition: -moz-opacity .18s;
	-ms-transition: -ms-opacity .18s;
	-o-transition: -o-opacity .18s;
	transition: opacity .18s;
}
#pages .col-wrap ul li a:hover, #pages .col-wrap ul li a:focus, #pages .col-wrap ul li a:active, #pages .col-wrap ul li a.active {
	-webkit-opacity: 0.65;
	-moz-opacity: 0.65;
	-ms-opacity: 0.65;
	-o-opacity: 0.65;
	opacity: 0.65;
}
#pages .col-wrap figure {
	padding: 100px 0 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center 10px;
	background-size: 81px 81px;
}
#pages .col-wrap .pic1 figure { background-image: url(../images/index/cad.png); }
#pages .col-wrap .pic2 figure { background-image: url(../images/index/graphic.png); }
#pages .col-wrap .pic3 figure { background-image: url(../images/index/manual.png); }
#pages .col-wrap .pic4 figure { background-image: url(../images/index/case.png); }

.svg #pages .col-wrap .pic1 figure { background-image: url(../images/index/cad.svg); }
.svg #pages .col-wrap .pic2 figure { background-image: url(../images/index/graphic.svg); }
.svg #pages .col-wrap .pic3 figure { background-image: url(../images/index/manual.svg); }
.svg #pages .col-wrap .pic4 figure { background-image: url(../images/index/case.svg); }



#case { margin-bottom: 40px; }
#case h2,
#case h3 { margin-bottom: 0 !important; }

#movie { margin-bottom: 40px; }
#movie h2,
#movie h3 { margin-bottom: 0 !important; }

#movie .video-js {
	margin-bottom: 2em;
}
#movie .col {
	margin-bottom: 2em;
}

#whatsnew {
	margin-bottom: 40px;
	padding: 0px 20px;
	background-color: #fff;
	border-radius: 4px;
}
#whatsnew h2,
#whatsnew h3 {
	margin-bottom: 0.7em;
	padding: 20px 0 0.7em 0;
	border: solid 0px #CECCC4;
	border-width: 0 0 1px 0;
	font-size: 1.28571em;
	font-weight: bold;
}
#whatsnew ul {}
	#whatsnew ul li {
		margin-bottom: 0.8em;
		padding-bottom: 0.8em;
		border: dotted 0px #CECCC4;
		border-width: 0 0 1px 0;
	}
	#whatsnew ul li:last-child { border: none; }

#whatsnew dl {}
#whatsnew dl dt,
#whatsnew dl dd { line-height: 1.6283; }
#whatsnew dl dt { clear: both; float: left; width: 7em; }
#whatsnew dl dd { display: block; max-width: 52em; margin-left: 7em; }


@media screen and (max-width: 480px) {
	#whatsnew dl dt { float: none; margin-bottom: 0.8em; }
	#whatsnew dl dd { margin-left: auto; }
}