@charset "utf-8";
/*	ユーティーエフエイト */

/*----------------------------------------------------
	一時的なもの
----------------------------------------------------*/
.contents section p.btn {
	display: none;
}
.en .contents section p.btn,
.jpn .contents section p.btn {
	display: block;
}

/*	DEBUG
----------------------------*/
#debug {
	display: block;
	position: fixed;
	left: 15px;
	bottom: 20px;
	background: #222;
	color: #fff;
	z-index: 9999;
	font-size: 0.75em;
	padding: 2px 5px;
	opacity: 0.75;
}
/*----------------------------------------------------
	SETTINGS
----------------------------------------------------*/
html {
}
body {
	font-family: Helvetica, Arial, sans-serif;
	color: #111;
	line-height: 1.5;
}
/*	LINKS
----------------------------*/
a:link {
	color: #111;
	text-decoration: underline;
}
a:visited {
	color: #111;
	text-decoration: underline;
}
a:hover {
	color: #111;
	text-decoration: none;
}
a:active {
	color: #111;
	text-decoration: none;
}
::-moz-selection {
	color: #fff;
	background-color: #37d;
}
::selection {
	color: #fff;
	background-color: #37d;
}
/*----------------------------------------------------
	HEADER
----------------------------------------------------*/
header {
}
header a:link,
header a:visited {
	color: #eee;
	text-decoration: none;
}
header a:hover,
header a:active {
	color:#888;
	text-decoration: none;
}
/*	TAB
----------------------------*/
header ul.tab {
	position: fixed;
	top: 0;
	left: 40px;
	font-size: 0.75em;
	line-height: 1;
	z-index: 100;
}
header ul.tab li {
	float: left;
	margin: 0 4px 0 0;
}
header ul.tab li a {
	display: block;
	padding: 0 0 0 32px;
	background: url(../images/dummy.gif) no-repeat 10px center #151515;
}
header ul.tab li a.tabLang {
	background-image: url(../images/point_accord.png);
}
header ul.tab li a.tabContact {
	background-image: url(../images/point_mail.png);
}
header ul.tab li a.tabGrobal {
	background-image: url(../images/point_blank.png);
}
header ul.tab li a span {
	display: block;
	border-left: 1px solid #000;
}
header ul.tab li a span span {
	display: block;
	padding: 8px 10px 9px;
	border-left: 1px solid #242424;
}
header ul.tab li a:hover {
}
/*	ACCORDION	*/
header ul.accord {
	display: none;
}
header ul.tab li:hover ul.accord {
	display: block;
}
header ul.accord li {
	float: none;
	margin: 0;
	border-top: 1px solid #000;
}
header ul.accord li a {
	border-top: 1px solid #242424;
	padding: 8px;
	background-image: none;
}
/*	NAV
----------------------------*/
header #nav {
	position: fixed;
	top: 50%;
	right: 25px;
	z-index: 200;
	margin: -140px 0 0;
}
header #nav ul {
}
header nav ul li {
	margin: 0 0 15px;
}
header #nav ul li a {
	display: block;
	width: 33px;
	height: 33px;
	background: url(../images/nav.png) no-repeat;
}
header #nav ul li a.navIntro {
	background-position: 0 0;
}
header #nav ul li a.navIntro:hover,
header #nav ul li a.navIntro.selected {
	background-position: 0 -33px;
}
header #nav ul li a.navQuality {
	background-position: -33px 0;
}
header #nav ul li a.navQuality:hover,
header #nav ul li a.navQuality.selected {
	background-position: -33px -33px;
}
header #nav ul li a.navNoise {
	background-position: -66px 0;
}
header #nav ul li a.navNoise:hover,
header #nav ul li a.navNoise.selected {
	background-position: -66px -33px;
}
header #nav ul li a.navMaint {
	background-position: -99px 0;
}
header #nav ul li a.navMaint:hover,
header #nav ul li a.navMaint.selected {
	background-position: -99px -33px;
}
header #nav ul li a.navScene {
	background-position: -132px 0;
}
header #nav ul li a.navScene:hover,
header #nav ul li a.navScene.selected {
	background-position: -132px -33px;
}
header #nav ul li a.navOutro {
	background-position: -165px 0;
}
header #nav ul li a.navOutro:hover,
header #nav ul li a.navOutro.selected {
	background-position: -165px -33px;
}
/*----------------------------------------------------
	CONTENTS
----------------------------------------------------*/
article.contents {
}
/*----------------------------------------------------
	INTRO
----------------------------------------------------*/
#secIntro {
	width: 100%;
	min-width: 980px;
	background: url(../images/bg_noise.jpg);
	color: #fff;
}
#secIntro .innerTxt {
	width: 100%;
	min-width: 980px;
	background: url(../images/bg_txt_intro.png) no-repeat center bottom;
}
#secIntro .innerImg {
	width: 100%;
	min-width: 980px;
	padding: 100px 0 200px;
	background: url(../images/img_intro_01.png) no-repeat center 125px;
}
/*	CONT
----------------------------*/
#secIntro .cont {
	position: relative;
	width: 450px;
	margin: 0 auto;
	padding-right: 530px;
}
#secIntro .cont p.ci a {
	width: 182px;
	height: 32px;
	background: url(../images/logo.png) no-repeat;
}
#secIntro .cont h1 {
	width: 450px;
	height: 55px;
	background: url(../images/logo_swj.png) no-repeat;
	margin: 25px 0 0;
}
#secIntro .cont p.copy {
	font-style: italic;
	font-size: 1.125em;
}
#secIntro .cont .read {
	margin: 20px 0 0;
}
#secIntro .cont .read h2 {
	font-size: 1.875em;
	margin: 0 0 5px;
}
#secIntro .cont .read p {
}
#secIntro .cont .read .explain {
	margin: 40px 0 0 -7px;
	padding: 0 80px 0 0;
}
#secIntro .cont .read .explain img {
	float: left;
	margin: 0 15px 2px 0;
}
#secIntro .cont .read .explain h3 {
	width: 200px;
	height: 28px;
	background: url(../images/dummy.gif) no-repeat;
}
#secIntro .cont .read .explain h3.c4 {
	background-image: url(../images/logo_swj_c4.png);
}
#secIntro .cont .read .explain h3.c2 {
	background-image: url(../images/logo_swj_c2.png);
}
#secIntro .cont .read .explain p {
	font-size: 0.875em;
	font-weight: bold;
	margin: 10px 0 0;
}
#secIntro .cont .read .explain p.read {
	margin: 3px 0 0;
	font-weight: normal;
	font-size: 0.75em;
}
/*	VIEW VIDEO	*/
#secIntro .cont p#btnViewVideo {
	position: absolute;
/*
	top: 25px;
	right: 15px;
*/
	top: 20px;
	left: 465px;
}
#secIntro .cont p#btnViewVideo a {
	width: 123px;
	height: 123px;
	background-image: url(../images/btn_view_video.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#secIntro .cont p#btnViewVideo a:hover {
	background-position: 0 -123px;
}
/*----------------------------------------------------
	SECTION COMMON
----------------------------------------------------*/
.contents .section {
	width: 100%;
	min-width: 980px;
	background: url(../images/bg_bubble_01.png) center 0;
}
.contents .section .innerBubble {
	width: 100%;
	min-width: 980px;
	background: url(../images/bg_bubble_02.png) center 0;
}
.contents .section .innerTxt {
	width: 100%;
	min-width: 980px;
}
.contents .section .innerIllust {
	width: 980px;
	margin: 0 auto;
	padding: 100px 0;
}
/*	CONT
----------------------------*/
.contents section .cont {
}
.contents section .cont h1 {
	margin: 0 0 0.5em;
	font-size: 1.75em;
	color: #fff;
}
.contents section .cont p {
	margin: 0 0 1em;
	font-weight: bold;
}
.contents section .cont .disc {
}
.contents section .cont .disc figure {
	float: right;
	width: 115px;
	margin: 0 0 0 16px;
	padding: 0.3em 0 0;
}
.contents section .cont .disc figure a {
	display: block;
	margin: 0 0 8px;
	background: #fff;
}
.contents section .cont .disc figure a img {
	opacity: 1;
}
.contents section .cont .disc figure a:hover img {
	opacity: 0.85;
}
/*	CONTSUB
----------------------------*/
.contents section .contSub {
}
.contents section .contSub .inner {
}
.contents section .contSub .block {
	position: relative;
	float: left;
	width: 300px;
	padding: 40px 50px 0 140px;
}
.no-js .contents section .contSub .block {
	min-height: 120px;
}
.contents section .contSub .block h2 {
	font-size: 1.125em;
	font-weight: bold;
}
.contents section .contSub .block p {
	margin: 1em 0 0;
	font-size: 0.75em;
}
.contents section .contSub .block img {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 1;
}
/*	BTN
----------------------------*/
.contents section p.btn a:link,
.contents section p.btn a:visited {
	color: #eee;
	text-decoration: none;
}
.contents section p.btn a:hover,
.contents section p.btn a:active {
	color:#888;
	text-decoration: none;
}
.contents section p.btn a.viewVideo {
	display: inline-block;
	line-height: 1;
	padding: 0 0 0 36px;
	background: url(../images/icon_video.png) no-repeat 10px center #151515;
}
.contents section p.btn a.viewVideo span {
	display: block;
	border-left: 1px solid #000;
}
.contents section p.btn a.viewVideo span span {
	display: block;
	padding: 8px 10px;
	border-left: 1px solid #242424;
}
/*----------------------------------------------------
	SECTION DETAIL
----------------------------------------------------*/
/*	QUALITY
----------------------------*/
#secQuality {
	background-color: #fa0;
}
#secQuality .innerTxt {
	background: url(../images/bg_txt_quality.png) no-repeat 5% 5px;
}
#secQuality .innerIllust {
	padding: 100px 0 50px;
	background: url(../images/img_quality_01.png) no-repeat left 130px;
}
#secQuality .cont {
	padding-left: 500px;
}
#secQuality .contSub {
	margin-top: 40px;
}
/*	NOZZLE
----------------------------*/
#secNozzle {
	background-color: #237cd3;
	text-align: center;
}
#secNozzle .innerTxt {
	background: url(../images/bg_txt_recovery.png) no-repeat center 95px;
}
#secNozzle .innerIllust {
	padding: 300px 0 365px;
	background: url(../images/img_recovery_01.png) no-repeat center 85%;
}
/*	MAINT
----------------------------*/
#secMaint {
	background-color: #0cc;
}
#secMaint .innerTxt {
	background: url(../images/bg_txt_maintenance.png) no-repeat -1% 55px;
}
#secMaint .innerIllust {
	padding: 260px 0 180px;
	background: url(../images/img_maintenance_01.png) no-repeat 130px 240px;
}
#secMaint .cont {
	padding-left: 500px;
}
#secMaint .contSub {
	margin-top: 100px;
}
/*	SCENE
----------------------------*/
#secScene {
	background-color: #84ce12;
}
#secScene .innerTxt {
	background: url(../images/bg_txt_scene.png) no-repeat 5% 4%;
}
#secScene .innerIllust {
	padding: 310px 0 290px;
	background: url(../images/img_scene_01.png) no-repeat left 300px;
}
#secScene .cont {
	padding-left: 500px;
}
/*----------------------------------------------------
	OUTRO
----------------------------------------------------*/
#secOutro {
	width: 980px;
	margin: 0 auto;
	padding: 100px 0 60px;
	overflow: hidden;
}
#secOutro a:link,
#secOutro a:visited {
	color: #09a9ec;
	text-decoration: none;
}
#secOutro a:hover,
#secOutro a:active {
	color: #111;
	text-decoration: none;
}
#secOutro .read {
}
#secOutro .read .txt {
	float: left;
	width: 430px;
}
#secOutro .read .txt p.copy {
	font-style: italic;
	font-weight: bold;
}
#secOutro .read .txt h3 {
	width: 348px;
	height: 43px;
	background: url(../images/logo_swj_s.gif) no-repeat;
	margin: 0 0 1.5em;
}
#secOutro figure {
	float: right;
	width: 515px;
	padding: 1.5em 0 0;
}
/*	FUTURE
----------------------------*/
#secOutro .spec {
	margin: 30px 0 0;
	background: url(../images/img_outro_bk.gif) repeat-y;
}
#secOutro .spec dl {
	float: left;
	width: 300px;
}

#secOutro .spec dl.speed,
#secOutro .spec dl.quality {
	margin-right: 40px;
}
#secOutro .spec dl dt {
	margin: 0 0 6px;
	padding: 8px 0;
	color: #ffffff;
	text-align: center;
	background: #252525;
	background: -moz-linear-gradient(#898989, #252525);
	background: -webkit-linear-gradient(#898989, #252525);
	background: -ms-linear-gradient(#898989, #252525);
	background: -o-linear-gradient(#898989, #252525);
	background: linear-gradient(#898989, #252525);
	-moz-box-shadow: 0 1px 3px #ccc;
	-webkit-box-shadow: 0 1px 3px #ccc;
	-o-box-shadow: 0 1px 3px #ccc;
	-ms-box-shadow: 0 1px 3px #ccc;
	box-shadow: 0 1px 3px #ccc;
}
#secOutro .spec dl dd {
	padding: 5px 15px 0;
	font-size: 0.875em;
	color: #444;
}
#secOutro .spec dl dd p {
}
#secOutro .spec dl dd p.kome {
	font-size: 0.75em;
	color: #666;
	text-indent: -1.1em;
	margin-left: 1.2em;
}
#secOutro .spec dl dd p.speedCap {
	margin: 10px 0 0;
	border-left: 3px solid #ff0000;
	padding: 0 0 0 5px;
	line-height: 1.1;
}
#secOutro .spec dl dd p.speedCap span {
	font-size: 0.75em;
}
#secOutro .spec dl dd img {
	margin: 10px 0 20px;
}
/*----------------------------------------------------
	FOOTER
----------------------------------------------------*/
footer {
	border-top: 1px solid #e50015;
}
footer a:link,
footer a:visited {
	color:#111;
	text-decoration: none;
}
footer a:hover,
footer a:active {
	color:#111;
	text-decoration: underline;
}
footer .cont {
	width: 980px;
	margin: 0 auto;
	padding: 20px 0 10px;
	font-size: 0.75em;
}
footer .cont div {
	float: left;
}
footer .cont div h1 {
	margin: 0 0 5px;
}
footer .cont div h1 a {
	width: 109px;
	height: 20px;
	background: url(../images/logo_f.gif) no-repeat;
}
footer .cont div p small  {
	font-style: italic;
	color: #666;
	font-size: 0.875em;
}
footer .cont ul {
	float: right;
	padding: 11px 0 0;
}
footer .cont ul li {
	float: left;
	margin: 0 0 0 1.5em;
}
footer .cont ul li a {
	display: block;
	padding: 0 0 0 10px;
	background: url(../images/point_arrow.gif) no-repeat left center;
}