@charset "utf-8";

/** |READ ME| **********************************************************************************************************

"top"

Cascading Style Sheet Setting File

Ver.20170105

------------------------------------------------------------------------------------------------------------------------

01. Main
02. Movie
03. Panels
04. Interdental
05. Brushes
06. Hydrosonic
07. Product
08. Footer

********************************************************************************************************** |READ ME| **/

/** |01. Main | >> ********************************************************************************* >> START **/

#Main #Header {
	position: absolute;
	top: 15px;
	right: 15px;
}

#Main #Header .globalNavi {
	letter-spacing: -0.4em;
}

#Main #Header .globalNavi li {
	padding: 0 10px;
	display: inline-block;
	border-left: 1px solid #ccc;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
}

#Main #Header .globalNavi li:first-child {
	border-left: none;
}

#Main #Header .globalNavi li a,
#Main #Header .globalNavi li a:hover {
	color: #666;
}

#Main .logo {
	position: absolute;
	top: 50%;
	width: 100%;
	margin: -88px 0 0 0;
	text-align: center;
}

#Main .logo .sub {
	padding: 0 0 40px 0;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 0.1em;
}
.index_wrap {
	width: 100%;
}
@media (max-width: 1024px) {
	#Main {
		min-width: 641px;
		height: auto;
	}
}
@media (max-width: 658px) {
	#Main {
		min-width: 0;
		height: auto;
	}
	#Main #Header .headerWrap .menu {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		padding: 5px;
		width: 30px;
		height: 30px;
		z-index: 101;
	}
	#Main #Header .globalNavi {
		display: block;
		clear: both;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		z-index: 1000;
		overflow: hidden;
		transition: 0.3s ease-in-out;
		background-color: #fff;
	}
	#Main #Header .globalNavi li {
		display: block;
		padding: 0;
		width: 100%;
		position: relative;
		border-left: none;
	}
	#Main #Header .globalNavi li a {
		display: block;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ddd;
		box-sizing: border-box;
	}
	#Main .logo {
		margin: -67px 0 0 0;
		text-align: center;
	}
	#Main .logo .sub {
		padding: 0 15px 10px;
		font-size: 18px;
		line-height: 1.3;
		letter-spacing: 0;
	}
	#Main .logo .ttl img {
		width: 240px;
		height: auto;
	}
	.index_wrap {
		width: 100%;
		overflow: hidden;
	}
}

/** |01. Main | << ********************************************************************************* << END **/

/** |02. Movie | >> ********************************************************************************* >> START **/

#Movie {
	position: relative;
	min-width: 1180px;
	height: 640px;
	overflow: hidden;
}

#PlayBtn,
#PlayBtn2,
#PlayBtn3,
#PlayBtn4,
#PlayBtn5,
#PlayBtn6 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	transition: 0.3s ease-in-out;
	z-index: 100;
}

#PlayPause,
#PlayPause2,
#PlayPause3,
#PlayPause4,
#PlayPause5,
#PlayPause6 {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: 0.3s ease-in-out;
	z-index: 100;
}

#PlayPause:hover,
#PlayPause2:hover,
#PlayPause3:hover,
#PlayPause4:hover,
#PlayPause5:hover,
#PlayPause6:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
@media (max-width: 1024px) {
	#Movie {
		min-width: 641px;
		width: 100% !important;
		height: auto !important;
	}
	.index_wrap #Movie video {
		min-width: 641px;
		width: 100% !important;
		height: auto !important;
		margin-left: 0 !important;
	}
}
@media (max-width: 658px) {
	.index_wrap #Movie video {
		min-width: 0;
	}
	#Movie {
		min-width: 0;
		height: auto;
	}
	#PlayBtn,
	#PlayBtn2,
	#PlayBtn3,
	#PlayBtn4,
	#PlayBtn5,
	#PlayBtn6 {
		margin: -30px 0 0 -30px;
		cursor: pointer;
	}
	#PlayBtn img,
	#PlayBtn2 img,
	#PlayBtn3 img,
	#PlayBtn4 img,
	#PlayBtn5 img,
	#PlayBtn6 img {
		width: 60px;
		height: 60px;
	}
	#PlayPause,
	#PlayPause2,
	#PlayPause2,
	#PlayPause3,
	#PlayPause4,
	#PlayPause5,
	#PlayPause6 {
		margin: -30px 0 0 -30px;
		cursor: pointer;
	}
	#PlayPause img,
	#PlayPause2 img,
	#PlayPause2 img,
	#PlayPause3 img,
	#PlayPause4 img,
	#PlayPause5 img,
	#PlayPause6 img {
		width: 60px;
		height: 60px;
	}
}

/** |02. Movie | << ********************************************************************************* << END **/

/** |03. Panels | >> ********************************************************************************* >> START **/

.cursor .left {
	display: none;
	position: absolute;
	top: 50%;
	margin: -30px 0 0 0;
	left: 30px;
}

.cursor .right {
	position: absolute;
	top: 50%;
	margin: -30px 0 0 0;
	right: 30px;
}

.cursor .curList {
	width: 100%;
	position: absolute;
	bottom: 20px;
	text-align: center;
	letter-spacing: -0.4em;
}

.cursor .curList li {
	padding: 0 10px;
	display: inline-block;
}

.cursor .curList li a {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	background-color: rgba(0, 0, 0, 0.2);
}

.cursor .curList li.act a {
	background-color: rgba(255, 255, 255, 1);
}

.panels .panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: 0.3s ease-in-out;
}
/*スクロール用
.panels .panel:nth-of-type(1){left:0%;}
.panels .panel:nth-of-type(2){left:100%;}
.panels .panel:nth-of-type(3){left:200%;}
.panels .panel:nth-of-type(4){left:300%;}
*/

@media (max-width: 658px) {
	.cursor .left {
		margin: -15px 0 0 0;
		left: 15px;
	}
	.cursor .left img {
		width: 30px;
		height: 30px;
	}
	.cursor .right {
		margin: -15px 0 0 0;
		right: 15px;
	}
	.cursor .right img {
		width: 30px;
		height: 30px;
	}
	.cursor .curList {
		bottom: 8px;
	}
	.cursor .curList li {
		padding: 0 5px;
		display: inline-block;
	}
	.cursor .curList li a {
		width: 12px;
		height: 12px;
		border-radius: 6px;
	}
	.panels .panel {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
	}
	.panels .panel:nth-of-type(1) {
		left: auto;
	}
	.panels .panel:nth-of-type(2) {
		left: auto;
	}
	.panels .panel:nth-of-type(3) {
		left: auto;
	}
	.panels .panel:nth-of-type(4) {
		left: auto;
	}
}

/** |03. Panels | << ********************************************************************************* << END **/

/** |04. Interdental | >> ********************************************************************************* >> START **/

#Interdental {
	position: relative;
	min-width: 1180px;
	height: 640px;
	overflow: hidden;
}

#Interdental .panels {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 640px;
}

#Interdental .panels .panel01 {
	position: relative;
	min-width: 1180px;
	background: url("../img/int_bg_light.png") no-repeat center top #ed7f2e;
	background-size: auto 100%;
}

#Interdental .panels .panel02 {
	background: url("../img/int_img_main_02.png") no-repeat center top #dd488f;
	background-size: auto 100%;
}
#Interdental .panels .panel03 {
	background: url("../img/int_img_main_03.png") no-repeat left top #fff100;
	background-size: auto 100%;
}
#Interdental .panels .panel04 {
	background: url("../img/int_img_main_04.png") no-repeat center top #0dae71;
	background-size: auto 100%;
}

#Interdental .panels .logo {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

#Interdental .panels .panel01 .bg {
	min-width: 1180px;
	height: 640px;
	background: url("../img/int_img_main_01.png") no-repeat center top;
	background-size: auto 100%;
}

#Interdental .panels .panel01 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -98px 0 0 170px;
	color: #fff;
}

#Interdental .panels .panel02 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -210px 0 0 -80px;
	width: 525px;
	text-align: left;
	color: #fff;
}

#Interdental .panels .panel02 .ttl img {
	padding: 0 0 30px;
}

#Interdental .panels .panel02 .left {
	float: left;
	width: 250px;
}

#Interdental .panels .panel02 .right {
	float: right;
	width: 250px;
}

#Interdental .panels .panel02 .left img,
#Interdental .panels .panel02 .right img {
	padding: 0 0 20px;
}

#Interdental .panels .panel02:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

#Interdental .panels .panel03 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -210px 0 0 0;
	width: 500px;
	text-align: left;
	color: #005bac;
}

#Interdental .panels .panel03 .ttl img {
	padding: 0 0 30px;
}

#Interdental .panels .panel03 .left {
	float: left;
	padding: 70px 0 0 0;
	width: 260px;
}

#Interdental .panels .panel03 .right {
	float: right;
	width: 220px;
}

#Interdental .panels .panel03:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

#Interdental .panels .panel04 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -87px 0 0 160px;
	color: #fff;
}

#Interdental {
	min-width: 1180px;
	height: auto;
	overflow: hidden;
}
#Interdental .panels {
	position: relative;
	left: 0 !important;
	width: 100%;
	height: auto;
}
.panels .panel {
	position: relative;
}
#Interdental .panels .panel01 {
	min-width: 1180px;
	background: url("../img/int_bg_light.png") no-repeat center top #ed7f2e;
	background-size: auto 100%;
}
@media (max-width: 1024px) {
	#Interdental {
		margin-top: -7px;
		min-width: 641px;
		width: 100% !important;
		height: auto !important;
	}
	#Interdental .panels {
		min-width: 641px;
	}
	#Interdental .panels .panel01 .bg {
		min-width: 641px;
		background-size: 120%;
	}
	#Interdental .panels .panel01 .text {
		margin: 180px 0 0 -30%;
		/*right: 35%;
		bottom: 50px;*/
	}
}

@media (max-width: 658px) {
	#Interdental {
		min-width: 0;
		height: auto;
	}
	#Interdental .panels {
		min-width: 0;
		position: relative;
		width: 100%;
		height: auto;
		-webkit-overflow-scrolling: touch;
	}
	#Interdental .panels .panel01 {
		min-width: 0;
		background: #ed7f2e;
	}
	#Interdental .panels .panel02 {
		padding: 0 15px 290px;
		background: url("../img/int_img_main_02_sp.png") no-repeat center bottom
			#dd488f;
		background-size: 320px 240px;
	}
	#Interdental .panels .panel03 {
		padding: 0 15px 270px;
		background: url("../img/int_img_main_03_sp.png") no-repeat center bottom
			#fff100;
		background-size: 320px 240px;
	}
	#Interdental .panels .panel04 {
		padding: 0 15px 310px;
		background: url("../img/int_img_main_04_sp.png") no-repeat center bottom
			#0dae71;
		background-size: 320px 240px;
	}
	#Interdental .panels .logo {
		left: 15px;
		right: auto;
		top: 30px;
		bottom: auto;
		font-size: 0;
	}
	#Interdental .panels .logo img {
		width: 154px;
		height: 15px;
	}
	#Interdental .panels .panel01 .bg {
		padding: 230px 15px 0;
		min-width: 0;
		height: auto;
		background: url("../img/int_img_main_01_sp.png") no-repeat center top;
		background-size: 320px 240px;
	}
	#Interdental .panels .panel01 .text {
		position: relative;
		top: auto;
		bottom: 0;
		left: auto;
		margin: 0;
		padding: 0 0 30px;
		text-align: left;
	}
	#Interdental .panels .panel01 .text img {
		width: 95%;
		max-width: 95%;
		height: auto;
	}
	#Interdental .panels .panel02 .text {
		position: relative;
		top: 75px;
		left: 0;
		margin: 0;
		padding: 0 0;
		width: auto;
		text-align: left;
	}
	#Interdental .panels .panel02 .text img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	#Interdental .panels .panel02 .ttl img {
		padding: 0 0 15px;
	}
	#Interdental .panels .panel02 .left,
	#Interdental .panels .panel02 .right {
		float: none;
		position: relative;
		padding: 15px 0 0 120px;
		width: auto;
		font-size: 16px;
		line-height: 1.4;
		min-height: 83px;
	}
	#Interdental .panels .panel02 .left:after,
	#Interdental .panels .panel02 .right:after {
		content: " ";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	#Interdental .panels .panel02 .left img,
	#Interdental .panels .panel02 .right img {
		position: absolute;
		top: 15px;
		left: 0;
		display: block;
		margin: 0;
		width: 100px;
		height: 83px;
		padding: 0 0 0;
	}
	#Interdental .panels .panel03 .text {
		position: relative;
		top: 75px;
		left: 0;
		margin: 0;
		padding: 0;
		width: auto;
		text-align: left;
	}
	#Interdental .panels .panel03 .text img {
		width: 100%;
		height: auto;
	}
	#Interdental .panels .panel03 .ttl img {
		padding: 0;
	}
	#Interdental .panels .panel03 .left {
		float: right;
		padding: 15px 0 0 0;
		width: 68%;
		line-height: 1.5;
	}
	#Interdental .panels .panel03 .right {
		float: left;
		padding: 15px 0 0 0;
		width: 28%;
	}
	#Interdental .panels .panel03:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	#Interdental .panels .panel04 .text {
		position: relative;
		top: 75px;
		left: 0;
		margin: 0;
		padding: 0;
	}
	#Interdental .panels .panel04 .text img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/** |04. Interdental | << ********************************************************************************* << END **/

/** |05. Brushes | >> ********************************************************************************* >> START **/

#Brushes {
	position: relative;
	min-width: 1180px;
	overflow: hidden;
	height: 640px;
}

#Brushes .panels {
	position: relative;
	left: 0 !important;
	width: 100%;
	height: 640px;
}

#Brushes .panels .panel01 {
	position: relative;
	min-width: 1180px;
	background: url("../img/bru_bg_light.png") no-repeat center top #15a4b9;
	background-size: auto 100%;
}

#Brushes .panels .panel02 {
	background: url("../img/bru_img_main_02.png") no-repeat center top #a66aaa;
	background-size: auto 100%;
	height: 640px;
	position: relative;
}
#Brushes .panels .panel03 {
	background: url("../img/bru_img_main_03.png") no-repeat center top #00a6c2;
	background-size: auto 100%;
	height: 640px;
	position: relative;
}
#Brushes .panels .panel04 {
	background: url("../img/bru_img_main_04.png") no-repeat left top #f39800;
	background-size: auto 100%;
	height: 640px;
	position: relative;
}

#Brushes .panels .logo {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

#Brushes .panels .panel01 .bg {
	min-width: 1180px;
	background: url("../img/bru_img_main_01.png") no-repeat center top;
	background-size: auto 100%;
	height: 640px;
}

#Brushes .panels .panel01 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -552px;
}

#Brushes .panels .panel02 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -210px 0 0 -80px;
	width: 525px;
	text-align: center;
	color: #fff;
}

#Brushes .panels .panel02 .ttl img {
	padding: 0 0 30px;
}

#Brushes .panels .panel02 .left {
	float: left;
	width: 250px;
}

#Brushes .panels .panel02 .right {
	float: right;
	width: 250px;
}

#Brushes .panels .panel02 .left img,
#Brushes .panels .panel02 .right img {
	padding: 0 0 20px;
}

#Brushes .panels .panel02:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

#Brushes .panels .panel03 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -210px 0 0 -120px;
	width: 600px;
	text-align: left;
	color: #fff;
}

#Brushes .panels .panel03 .ttl img {
	padding: 0 0 30px;
}

#Brushes .panels .panel03 .left {
	float: left;
	padding: 0 0 0 0;
	width: 280px;
}

#Brushes .panels .panel03 .right {
	float: right;
	width: 300px;
}

#Brushes .panels .panel03:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

#Brushes .panels .panel04 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -210px 0 0 0;
	width: 500px;
	text-align: left;
	color: #fff;
}

#Brushes .panels .panel04 .ttl img {
	padding: 0 0 30px;
}

#Brushes .panels .panel04 .left {
	float: left;
	padding: 60px 0 0 0;
	width: 240px;
}

#Brushes .panels .panel04 .right {
	float: right;
	width: 240px;
}

#Brushes .panels .panel04:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
@media (max-width: 1024px) {
	#Brushes {
		min-width: 641px;
		width: 100% !important;
		height: auto !important;
	}
	#Brushes .panels {
		min-width: 641px;
	}
	#Brushes .panels .panel01 .bg {
		min-width: 641px;
	}
	#Brushes .panels .panel01 .text {
		margin: 10px 0 0 -552px;
	}
	#Brushes .panels .panel02 {
		background-size: 120%;
		background-position: bottom;
	}
	#Brushes .panels .panel02 .text {
		margin: -210px 0 0 -155px;
	}
	#Brushes .panels .panel03 {
		background-size: 120%;
		background-position: bottom;
	}
	#Brushes .panels .panel03 .text {
		margin: -330px 0 0 -120px;
	}
	#Brushes .panels .panel03 .text .ttl {
		width: 80%;
	}
	#Brushes .panels .panel03 .text .ttl img {
		width: 100%;
		height: auto;
	}
	#Brushes .panels .panel03 .right,
	#Brushes .panels .panel03 .left {
		float: none;
		margin-bottom: 10px;
	}
	#Brushes .panels .panel04 {
		background: url("../img/bru_img_main_04.png") no-repeat left bottom
			#f39800;
		background-size: auto 70%;
		position: relative;
	}
	#Brushes .panels .panel04 .text {
		margin: -350px 0 0 -170px;
	}
}

@media (max-width: 658px) {
	#Brushes {
		min-width: 0;
		height: auto;
	}
	#Brushes .panels {
		min-width: 0;
		position: relative;
		width: 100%;
		height: auto !important;
		font-size: 16px;
	}
	#Brushes .panels .panel01 {
		min-width: 0;
		background: #15a4b9;
	}
	#Brushes .panels .panel02 {
		padding: 0 15px 0;
		background: url("../img/bru_img_main_02_sp.png") no-repeat center bottom
			#a66aaa;
		background-size: 320px 240px;
		height: 570px !important;
	}
	#Brushes .panels .panel02 .bg {
		height: 570px !important;
	}
	#Brushes .panels .panel03 {
		padding: 0 15px 0;
		background: url("../img/bru_img_main_03_sp.png") no-repeat center bottom
			#00a6c2;
		background-size: 320px 240px;
		height: 580px !important;
	}
	#Brushes .panels .panel04 {
		padding: 0 15px 0;
		background: url("../img/bru_img_main_04_sp.png") no-repeat left bottom
			#f39800;
		background-size: 320px 240px;
		height: 520px !important;
	}
	#Brushes .panels .logo {
		left: 15px;
		right: auto;
		top: 15px;
		bottom: auto;
		font-size: 0;
	}
	#Brushes .panels .logo img {
		width: 105px;
		height: 15px;
	}
	#Brushes .panels .panel01 .bg {
		padding: 0 15px 280px;
		min-width: 0;
		height: auto;
		background: url("../img/bru_img_main_01_sp.png") no-repeat center bottom;
		background-size: 320px 240px;
	}
	#Brushes .panels .panel01 .text {
		position: relative;
		top: 30px;
		left: auto;
		margin: 0;
		padding: 0;
		text-align: left;
	}
	#Brushes .panels .panel01 .text img {
		width: 95%;
		max-width: 95%;
		height: auto;
	}
	#Brushes .panels .panel02 .text {
		position: relative;
		top: 75px;
		left: 0;
		margin: 0;
		padding: 0;
		width: auto;
		text-align: left;
	}
	#Brushes .panels .panel02 .text img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	#Brushes .panels .panel02 .ttl img {
		padding: 0;
	}
	#Brushes .panels .panel02 .left {
		float: none;
		position: relative;
		padding: 45px 0 0 120px;
		width: auto;
		font-size: 16px;
		line-height: 1.4;
		min-height: 53px;
	}
	#Brushes .panels .panel02 .right {
		float: none;
		position: relative;
		padding: 45px 0 0 120px;
		width: auto;
		font-size: 16px;
		line-height: 1.4;
		min-height: 53px;
	}
	#Brushes .panels .panel02 .left:after,
	#Brushes .panels .panel02 .right:after {
		content: " ";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	#Brushes .panels .panel02 .left img,
	#Brushes .panels .panel02 .right img {
		position: absolute;
		top: 15px;
		left: 0;
		display: block;
		margin: 0;
		width: 100px;
		height: 83px;
		padding: 0 0 0;
	}
	#Brushes .panels .panel03 .text {
		position: relative;
		top: 75px;
		left: 0;
		margin: 0;
		padding: 0;
		width: auto;
		text-align: left;
	}
	#Brushes .panels .panel03 .text img {
		width: 100%;
		height: auto;
	}
	#Brushes .panels .panel03 .ttl img {
		padding: 0;
		margin-top: -30px;
	}
	#Brushes .panels .panel03 .left {
		position: absolute;
		float: none;
		right: 0;
		padding: 15px 0 0 0;
		width: 50%;
		line-height: 1.5;
	}
	#Brushes .panels .panel03 .right {
		float: left;
		padding: 15px 0 0 0;
		width: 45%;
	}
	#Brushes .panels .panel04 .text {
		position: relative;
		top: 75px;
		left: 0;
		margin: 0;
		padding: 0;
		width: auto;
		text-align: left;
	}
	#Brushes .panels .panel04 .text img {
		width: 100%;
		height: auto;
	}
	#Brushes .panels .panel04 .ttl img {
		padding: 0;
	}
	#Brushes .panels .panel04 .left {
		float: right;
		padding: 15px 0 0 0;
		width: 60%;
	}
	#Brushes .panels .panel04 .right {
		float: left;
		padding: 15px 0 0 0;
		width: 35%;
	}
}

/** |05. Brushes | << ********************************************************************************* << END **/

/** |06. Hydrosonic | >> ********************************************************************************* >> START **/

#Hydrosonic {
	position: relative;
	min-width: 1180px;
	overflow: hidden;
	height: auto !important;
}

#Hydrosonic .panels {
	position: relative;
	left: 0 !important;
	width: 100%;
	height: 640px;
}

#Hydrosonic .panels .panel01 {
	position: relative;
	min-width: 1180px;
	background: url("../img/hydro_bg_light.png") no-repeat center top #b3dcf0;
	background-size: auto 100%;
}

/* #Hydrosonic .panels .panel02{background:url("../img/hydro_img_main_02.png")no-repeat center top #fff;background-size:auto 100%;height: 640px;} */
/*#Hydrosonic .panels .panel03{background:url("../img/hydro_img_main_03.png")no-repeat center top #00a6c2;background-size:auto 100%;}*/
#Hydrosonic .panels .panel04 {
	background: url("../img/hydro_img_main_04.png") no-repeat left top #f39800;
	background-size: auto 100%;
}

#Hydrosonic .panels .logo {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

#Hydrosonic .panels .panel01 .bg {
	min-width: 1180px;
	background: url("../img/hydro_img_main_01.png") no-repeat center top;
	background-size: auto 100%;
	height: 640px;
}

#Hydrosonic .panels .panel01 .text_left {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -552px;
}
#Hydrosonic .panels .panel01 .text_right {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 40px 0 0 390px;
}
#Hydrosonic .panels .panel02 .bg {
	min-width: 1180px;
	background-size: auto 100%;
	height: 640px;
}
#Hydrosonic .panels .panel02 .text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -552px;
	width: 600px;
	text-align: center;
}
#Hydrosonic .panels .panel02 .text_right {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -245px 0 0 670px;
}
#Hydrosonic .panels .panel03 .bg {
	min-width: 1180px;
	background: url("../img/hydro_bg_light_02.png") no-repeat center top;
	background-size: auto 100%;
	height: 640px;
	background-color: #b3dcf0;
}
#Hydrosonic .panels .panel03 .text {
	position: absolute;
	top: 42%;
	left: 50%;
	margin: -230px 0 0 -552px;
	text-align: center;
}
#Hydrosonic .panels .panel05 .bg {
	min-width: 1180px;
	background-size: auto 100%;
	height: 640px;
}
#Hydrosonic .panels .panel05 .text {
	position: absolute;
	top: 42%;
	left: 50%;
	margin: -230px 0 0 -400px;
	text-align: center;
}

#Hydrosonic .panels .panel05 .text_left_pc {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -230px 0 0 -552px;
}
#Hydrosonic .panels .panel05 .text_left_sp {
	display: none;
}
#Hydrosonic .panels .panel05 .text_right {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -230px 0 0 45px;
	text-align: center;
}

#Hydrosonic .panels .panel03 .text_left,
#Hydrosonic .panels .panel03 .text_right_pc {
	display: inline-block;
}
#Hydrosonic .panels .panel03 .text_right_pc {
	margin-left: 190px;
}

@media (max-width: 1024px) {
	#Hydrosonic {
		min-width: 641px;
		width: 100% !important;
		height: auto !important;
	}

	#Hydrosonic .panels,
	#Hydrosonic .panels .panel01 {
		min-width: 641px;
	}
	#Hydrosonic .panels .panel01 .bg {
		min-width: 641px;
		background-size: 145%;
		background-position: bottom;
	}
	#Hydrosonic .panels .panel01 .text_left {
		margin: -32% 0 0 -45%;
	}
	#Hydrosonic .panels .panel01 .text_right {
		margin: 60px 0 0 -40%;
	}
	/* #Hydrosonic .panels .panel02 {
		background:none;
	} */
	#Hydrosonic .panels .panel02 .text_right {
		background: none;
	}

	#Hydrosonic .panels .panel02 .bg {
		height: 1024px;
		background: url(../img/hydro_img_main_02_sp.png) no-repeat;
		background-position: bottom;
		background-size: 82%;
	}
	#Hydrosonic .panels .panel02 .bg {
		min-width: 641px;
		height: 1024px;
	}
	#Hydrosonic .panels .panel02 .text {
		margin: -315px 0 0 -300px;
	}
	#Hydrosonic .panels .panel03 {
		height: 1024px;
	}
	#Hydrosonic .panels .panel03 .bg {
		min-width: 641px;
		height: 1024px;
	}
	#Hydrosonic .panels .panel03 .text_left {
		margin-top: -230px;
	}
	#Hydrosonic .panels .panel03 .text_right_pc {
		display: none;
	}
	#Hydrosonic .panels .panel03 .text_right_sp {
		display: block;
		margin-top: 50px;
	}
	#Hydrosonic .panels .panel03 .text_right_sp img {
		width: 70%;
	}
	#Hydrosonic .panels .panel03 .text {
		margin: -120px 0 0 -320px;
	}
	#Hydrosonic .panels .panel05 .bg {
		min-width: 1180px;
		background-size: auto 100%;
		height: 640px;
	}
	#Hydrosonic .panels .panel05 .text_left_pc {
		display: block;
		position: relative;
		top: 53%;
		left: 50%;
		margin: -35% 0 -42px -156%;
		text-align: center;
	}
	#Hydrosonic .panels .panel05 .text_left_pc img {
		width: 13%;
		height: auto;
	}
	#Hydrosonic .panels .panel05 .text_left_sp {
		display: none;
	}
	#Hydrosonic .panels .panel05 .text_left_sp img {
		height: auto;
	}

	#Hydrosonic .panels .panel05 .text_right {
		top: 50%;
		left: 50%;
		margin: 4% 0 0 0%;
		text-align: center;
	}

	#Hydrosonic .panels .panel05 .text_right img {
		width: 90%;
		height: auto;
	}
}
@media (max-width: 658px) {
	#Hydrosonic .panels .panel05 .bg {
		padding: 0 15px;
		min-width: 0;
		background-size: 100%;
		height: 570px !important;
	}
	#Hydrosonic .panels .panel02 .bg {
		padding: 0 15px;
		min-width: 0;
		background-size: 100%;
		height: 570px !important;
	}
	#Hydrosonic .panels .panel03 .bg {
		padding: 0 15px;
		min-width: 0;
		height: 570px !important;
	}
	#Hydrosonic .panels .panel03 .text_left {
		margin-top: 0;
	}
	#Hydrosonic {
		min-width: 0;
		height: auto;
	}
	#Hydrosonic .panels {
		min-width: 0;
		position: relative;
		width: 100%;
		height: auto;
		font-size: 16px;
	}
	#Hydrosonic .panels .panel01 {
		min-width: 0;
		background: #b3dcf0;
	}
	#Hydrosonic .panels .panel02 {
		min-width: 0;
		height: 480px;
	}
	#Hydrosonic .panels .panel03 {
		min-width: 0;
		background: url("../img/hydro_img_main_03_sp.png") no-repeat center
			bottom;
		background-size: 320px 240px;
		height: 570px !important;
	}
	#Hydrosonic .panels .panel04 {
		padding: 0 15px 300px;
		background: url("../img/bru_img_main_04_sp.png") no-repeat left bottom;
		background-size: 320px 240px;
		height: 570px;
	}
	#Hydrosonic .panels .logo {
		left: 15px;
		right: auto;
		top: 30px;
		bottom: auto;
		font-size: 0;
	}
	#Hydrosonic .panels .logo img {
		width: 105px;
		height: 15px;
	}
	#Hydrosonic .panels .panel01 .bg {
		padding: 0 15px 100px;
		min-width: 0;
		height: auto;
		background: url("../img/hydro_img_main_01_sp.png") no-repeat center
			bottom;
		background-size: 320px 240px;
	}
	#Hydrosonic .panels .panel01 .text_left {
		position: relative;
		top: 30px;
		left: auto;
		margin: 0;
		padding: 0;
		text-align: left;
	}
	#Hydrosonic .panels .panel01 .text_left img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	#Hydrosonic .panels .panel01 .text_right {
		position: relative;
		top: 40px;
		left: auto;
		margin: 0;
		padding: 0;
		text-align: left;
	}
	#Hydrosonic .panels .panel01 .text_right img {
		width: 40%;
		max-width: 40%;
		height: auto;
	}
	#Hydrosonic .panels .panel02 .text {
		position: relative;
		top: 40px;
		left: 0;
		margin: 0;
		padding: 0;
		width: auto;
		text-align: left;
	}
	#Hydrosonic .panels .panel02 .text img {
		max-width: 100%;
		height: auto;
	}
	#Hydrosonic .panels .panel02 .ttl img {
		padding: 0;
	}
	#Hydrosonic .panels .panel02 .left {
		float: none;
		position: relative;
		padding: 45px 0 0 120px;
		width: auto;
		font-size: 16px;
		line-height: 1.4;
		min-height: 53px;
	}
	#Hydrosonic .panels .panel02 .right {
		float: none;
		position: relative;
		padding: 45px 0 0 120px;
		width: auto;
		font-size: 16px;
		line-height: 1.4;
		min-height: 53px;
	}
	#Hydrosonic .panels .panel02 .left:after,
	#Hydrosonic .panels .panel02 .right:after {
		content: " ";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	#Hydrosonic .panels .panel02 .left img,
	#Hydrosonic .panels .panel02 .right img {
		position: absolute;
		top: 15px;
		left: 0;
		display: block;
		margin: 0;
		width: 100px;
		height: 83px;
		padding: 0 0 0;
	}
	#Hydrosonic .panels .panel03 .text {
		position: relative;
		top: 40px;
		left: 0;
		margin: 0;
		padding: 0;
		width: auto;
		text-align: left;
	}
	#Hydrosonic .panels .panel03 .text img {
		width: 100%;
		height: auto;
	}
	#Hydrosonic .panels .panel03 .ttl img {
		padding: 0;
	}
	#Hydrosonic .panels .panel03 .left {
		position: absolute;
		float: none;
		right: 0;
		padding: 15px 0 0 0;
		width: 50%;
		line-height: 1.5;
	}
	#Hydrosonic .panels .panel03 .right {
		float: left;
		padding: 15px 0 0 0;
		width: 45%;
	}
	#Hydrosonic .panels .panel04 .text {
		position: relative;
		top: 75px;
		left: 0;
		margin: 0;
		padding: 0;
		width: auto;
		text-align: left;
	}
	#Hydrosonic .panels .panel04 .text img {
		width: 100%;
		height: auto;
	}
	#Hydrosonic .panels .panel04 .ttl img {
		padding: 0;
	}
	#Hydrosonic .panels .panel04 .left {
		float: right;
		padding: 15px 0 0 0;
		width: 60%;
	}
	#Hydrosonic .panels .panel04 .right {
		float: left;
		padding: 15px 0 0 0;
		width: 35%;
	}
	#Hydrosonic .panels .panel05 .text_left_pc {
		display: none;
	}
	#Hydrosonic .panels .panel05 .text_left_sp {
		position: absolute;
		display: block;
		top: 0;
		left: auto;
		margin: 80px 4% 0 0;
	}
	#Hydrosonic .panels .panel05 .text_left_sp img {
		height: auto;
		width: 100%;
	}
	#Hydrosonic .panels .panel05 .text_left img {
		width: 40%;
		height: auto;
	}
	#Hydrosonic .panels .panel05 .text_right {
		top: 58%;
		left: auto;
		margin: -16% 4% 0 1%;
	}
	#Hydrosonic .panels .panel05 .text_right img {
		width: 100%;
		height: auto;
	}
	#Hydrosonic .panels .panel03 .text_right_pc {
		display: none;
	}
	#Hydrosonic .panels .panel03 .text_right_sp {
		margin-top: 20px;
	}
}
@media (max-width: 375px) {
	#Hydrosonic .panels .panel02 .bg {
		background-size: 120%;
	}
}
/** |06. Hydrosonic | << ********************************************************************************* << END **/

/** |07. Product | >> ********************************************************************************* >> START **/

#Product {
	padding: 100px 0;
	color: #005bac;
}

#Product .title {
	padding: 0 0 20px;
	text-align: left;
	font-size: 32px;
	line-height: 1;
	border-bottom: solid 2px #005bac;
}

#Product .title:nth-of-type(2) {
	margin: 100px 0 0;
}

#Product .title img {
	display: block;
	padding: 0 0 5px 0;
}

#Product .title small {
	display: block;
	font-size: 14px;
	line-height: 1;
}

#Product .pdcList:after {
	content: " ";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

#Product .pdcList .info {
	padding: 0 20px;
	width: 180px;
	float: left;
	text-align: left;
	line-height: 1.5;
}

#Product .pdcList .info .sir {
	padding: 50px 0 0;
	font-size: 18px;
	line-height: 1.2;
	font-weight: bold;
}

#Product .pdcList .info .cat {
	padding: 0 0 20px;
	font-size: 12px;
}

#Product .pdcList .info .sub {
	padding: 0 0 20px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
}

#Product .pdcList .info .det {
	font-size: 11px;
	line-height: 1.3;
}

#Product .pdcList .img {
	float: left;
	width: 85px;
	text-align: center;
}

#Product .pdcList .img img {
	padding: 50px 0 0;
}
#Product .link a {
	margin: 70px auto 50px;
}
#Product .link a {
	display: inline-block;
	padding: 0 40px;
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	color: #005bac;
	border: solid 3px #005bac;
}

#Product .pdcList.brushes .info:nth-of-type(1) {
	width: 150px;
}
#Product .pdcList.brushes .info:nth-of-type(2) {
	width: 150px;
}
#Product .pdcList.brushes .info:nth-of-type(3) {
	width: 135px;
}
#Product .pdcList.brushes .info:nth-of-type(4) {
	width: 135px;
}
#Product .pdcList.brushes .info:nth-of-type(4) .sub {
	padding: 20px 0;
}
#Product .pdcList.brushes .info:nth-of-type(5) {
	width: 142px;
}
#Product .pdcList.brushes .info:nth-of-type(6) {
	width: 142px;
}
#Product .pdcList.brushes .info:nth-of-type(7) {
	width: 142px;
}
#Product .pdcList.brushes .info:nth-of-type(8) {
	width: 142px;
}
#Product .pdcList.brushes .img {
	width: 77px;
}
#Product .pdcList.brushes .img:nth-of-type(12) {
	width: 70px;
}
#Product .pdcList.brushes .img:nth-of-type(13) {
	width: 60px;
}
#Product .pdcList.brushes .img:nth-of-type(14) {
	width: 60px;
}
#Product .pdcList.brushes .img:nth-of-type(15) {
	width: 60px;
}
#Product .pdcList.brushes .img:nth-of-type(16) {
	width: 60px;
}
#Product .pdcList.brushes .img:nth-of-type(17) {
	width: 60px;
}
#Product .pdcList.brushes .img:nth-of-type(18) {
	width: 60px;
}
#Product .pdcList.brushes .img:nth-of-type(19) {
	width: 60px;
}
#Product .pdcList.interdental .info:nth-of-type(1) {
	width: 105px;
}
#Product .pdcList.interdental .info:nth-of-type(2) {
	width: 120px;
}
#Product .pdcList.interdental .info:nth-of-type(2) .sub {
	padding: 20px 0;
}
#Product .pdcList.interdental .info:nth-of-type(3) {
	width: 80px;
}
#Product .pdcList.interdental .img {
	width: 82px;
}
#Product .pdcList.interdental .img:nth-of-type(7) {
	width: 110px;
}

@media (max-width: 1024px) {
	#Product {
		padding: 50px 0;
	}
}
@media (max-width: 658px) {
	#Product .link a {
		margin: 30px auto;
	}
	#Product .title {
		padding: 0 0 10px;
		border-bottom: solid 2px #005bac;
	}
	#Product .title:nth-of-type(2) {
		margin: 50px 0 0;
	}
	#Product .title img {
		width: auto;
		height: 20px;
		padding: 0 0 3px 0;
	}
	#Product .title small {
		font-size: 11px;
	}
	#Product .pdcList .info {
		clear: both;
		padding: 20px 10px 0;
		width: auto;
		float: none;
	}
	#Product .pdcList .info .sir {
		padding: 20px 0 0;
		font-size: 16px;
		line-height: 1.2;
		font-weight: bold;
		border-top: 1px solid #ddd;
	}
	#Product .pdcList .info .cat {
		padding: 0 0 5px;
	}
	#Product .pdcList .info .sub {
		padding: 0 0 5px;
	}
	#Product .pdcList .img {
		float: none;
	}
	#Product .pdcList .img img {
		padding: 15px 0 0;
		height: 160px;
		width: auto;
	}
	#Product .pdcList.interdental .img img {
		height: 150px;
		width: auto;
	}
	#Product .link a {
		padding: 0 20px;
	}
	#Product .pdcList.brushes .info:nth-of-type(1) .sir {
		padding: 0;
		border-top: none;
	}
	#Product .pdcList.brushes .info:nth-of-type(1) {
		width: auto;
	}
	#Product .pdcList.brushes .info:nth-of-type(2) {
		width: auto;
	}
	#Product .pdcList.brushes .info:nth-of-type(3) {
		width: auto;
	}
	#Product .pdcList.brushes .info:nth-of-type(4) {
		width: auto;
	}
	#Product .pdcList.brushes .info:nth-of-type(4) .sub {
		padding: 5px 0;
	}
	#Product .pdcList.brushes .info:nth-of-type(5) {
		width: auto;
	}
	#Product .pdcList.brushes .info:nth-of-type(6) {
		width: auto;
	}
	#Product .pdcList.brushes .info:nth-of-type(7) {
		width: auto;
	}
	#Product .pdcList.brushes .info:nth-of-type(8) {
		width: auto;
	}
	#Product .pdcList.brushes .img {
		width: auto;
	}
	#Product .pdcList.brushes .img:nth-of-type(1) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(2) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(3) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(4) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(5) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(6) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(7) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(8) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(9) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(10) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(11) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(12) {
		width: auto;
	}
	#Product .pdcList.brushes .img:nth-of-type(13) {
		width: auto;
	}
	#Product .pdcList.brushes .img:nth-of-type(14) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(15) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(16) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(17) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(18) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.brushes .img:nth-of-type(19) {
		float: left;
		width: 16.6%;
	}
	#Product .pdcList.interdental .info:nth-of-type(1) .sir {
		padding: 0;
		border-top: none;
	}
	#Product .pdcList.interdental .info:nth-of-type(1) {
		width: auto;
	}
	#Product .pdcList.interdental .info:nth-of-type(2) {
		width: auto;
	}
	#Product .pdcList.interdental .info:nth-of-type(2) .sub {
		padding: 5px 0;
	}
	#Product .pdcList.interdental .info:nth-of-type(3) {
		width: auto;
	}
	#Product .pdcList.interdental .img {
		width: auto;
	}
	#Product .pdcList.interdental .img:nth-of-type(1) {
		float: left;
		width: 20%;
	}
	#Product .pdcList.interdental .img:nth-of-type(2) {
		float: left;
		width: 20%;
	}
	#Product .pdcList.interdental .img:nth-of-type(3) {
		float: left;
		width: 20%;
	}
	#Product .pdcList.interdental .img:nth-of-type(4) {
		float: left;
		width: 20%;
	}
	#Product .pdcList.interdental .img:nth-of-type(5) {
		float: left;
		width: 20%;
	}
	#Product .pdcList.interdental .img:nth-of-type(7) {
		width: auto;
	}
}

/** |07. Product | << ********************************************************************************* << END **/

/** |08. Footer | >> ********************************************************************************* >> START **/

#Footer {
	position: relative;
	min-width: 1180px;
	text-align: center;
	color: #fff;
	background-color: #005bac;
}

#Footer .frame {
	padding: 40px 0 30px;
}

#Footer .catch {
	padding: 0 0 30px;
	font-size: 32px;
	line-height: 1;
}

#Footer .link {
	padding: 0 0 30px;
}

#Footer .link a {
	display: inline-block;
	padding: 0 40px;
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	color: #fff;
	border: solid 3px #fff;
}

#Footer .copy {
	font-size: 10px;
	line-height: 1;
	vertical-align: middle;
}

#Footer .copy {
	font-size: 10px;
	line-height: 1;
	vertical-align: middle;
}

#Footer .copy img {
	vertical-align: baseline;
}
@media (max-width: 1024px) {
	#Footer {
		min-width: 641px;
		width: 100% !important;
	}
}
@media (max-width: 658px) {
	#Footer {
		min-width: 0;
	}
	#Footer .frame {
		padding: 20px 10px 15px;
	}
	#Footer .catch {
		padding: 0 0 20px;
		font-size: 22px;
		line-height: 1.1;
	}
	#Footer .link {
		padding: 0 0 20px;
	}
	#Footer .link a {
		padding: 0 20px;
	}
	#Footer .copy {
		line-height: 1.1;
	}
	#Footer .copy img {
		margin: 0 auto 10px;
		display: block;
	}
}

/** |08. Footer | << ********************************************************************************* << END **/