/*
 Theme Name: 	EUPHONIC Inc.
 Theme URI: 	http://www.euphonic.co.jp
 Description: 	EUPHONIC official site theme
 Version: 		2015.3
 Author: 		EUPHONIC
 Author URI: 	http://www.euphonic.co.jp
 Tags: 			minimal,black,light,scrollable
 */


/* Global reset
http://meyerweb.com/eric/tools/css/reset/
*****************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, aside, canvas, details, embed,  figure, figcaption, footer, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
aside, details, figcaption, figure, footer, hgroup, menu, nav, section {
	display: block;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Extended base styles (site specific)
*****************************************************************/

html {
	overflow-y: scroll; /* always force a scrollbar in non-IE */
}

body {
	margin: 0;
	min-width: 950px;
	padding: 0;
	font-family:"MS PGothic", "MS Gothic", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:normal;
	font-style:normal;
	line-height:24px;
	overflow-x: hidden;
	height: 18520px;
}

a {
outline: 0;
text-decoration:none;
}

a img {
border:none;
}

.GMaps{
	color:#000;
	text-decoration:underline;
	padding:5px;
}

.GMaps:hover{
	color:#000;
	text-decoration:none;
	background-color:#3dc6ff;
}

/* Page structure
*****************************************************************/

#wrapper {
	position: relative;
}

/* Parallax
*****************************************************************/

/* content */
#content {
	z-index: 200;
	position: relative;
	padding-left:230px;
	width: 670px;
	margin: 0;
}

#ServicesContent, #WorksContent, #RecruitContent, #CompanyContent, #ContactContent, #LabContent {
	padding-top: 105px;
}

#NewsContent {
	position: absolute;
	top: 0px;
}

#ServicesContent {
	position: absolute;
	top: 2200px;
}

#WorksContent {
	position: absolute;
	top: 5400px;
}

#RecruitContent {
	position: absolute;
	top: 8700px;
}

#CompanyContent {
	position: absolute;
	top: 10400px;
}

#ContactContent {
	position: absolute;
	top: 13700px;
}

#LabContent {
	position: absolute;
	top: 16800px;
}

/* front */
#parallax-bg4 {
	z-index: 102;
	position: fixed;
	left: 0; /* align left edge with center of viewport */
	top: 0;
	width: 2050px;
	margin-left: 245px; /* move left by half element's width */
}

#bg4-1 {
	position: absolute;
	top: 2000px;
	left: -245px;
}

#bg4-2 {
	position: absolute;
	top: 4900px;
	left: -180px;
}

#bg4-3 {
	position: absolute;
	top: 7200px;
	left: 550px;
}

#bg4-4 {
	position: absolute;
	top: 9500px;
	left: -200px;
}

#bg4-5 {
	position: absolute;
	top: 12000px;
	left: 780px;
}

#bg4-6 {
	position: absolute;
	top: 15000px;
	left: -245px;
}

#bg4-7 {
	position: absolute;
	top: 9500px;
	left: -200px;
}

/* middle_2 */
#parallax-bg3 {
	z-index: 101;
	position: fixed;
	left: 0; /* align left edge with center of viewport */
	top: 0;
	width: 1200px;
	margin-left: 100px; /* move left by half element's width */
}

#bg3-1 {
	position: absolute;
	top: 1800px;
	left: 0px;
}

#bg3-2 {
	position: absolute;
	top: 3880px;
	left: 750px;
}

#bg3-3 {
	position: absolute;
	top: 5600px;
	left: -80px;
}

#bg3-4 {
	position: absolute;
	top: 7700px;
	left: 440px;
}

#bg3-5 {
	position: absolute;
	top: 9340px;
	left: 150px;
}

/* middle_1 */
#parallax-bg2 {
	z-index: 100;
	position: fixed;
	left: 0; /* align left edge with center of viewport */
	top: 0;
	width: 150%;
	margin-left: 110px; /* move left by half element's width */
}

#bg2-1 {
	position: absolute;
	top: 1500px;
	left: 200px;
}

#bg2-2 {
	background-image:url(/images/bg_02.png);
	background-repeat:repeat-x;
	position: absolute;
	padding-bottom:650px;
	top: 3150px;
	left: -115px;
}

#bg2-3 {
	position: absolute;
	top: 4600px;
	left: 370px;
}

#bg2-4 {
	position: absolute;
	top: 6400px;
	left: -80px;
}

#bg2-5 {
	position: absolute;
	top: 8149px;
	left: -113px;
}

#bg2-6 {
	position: absolute;
	top: 10000px;
	left: 380px;
}

/* background */
#parallax-bg1 {
	z-index: 2;
	position: fixed;
	top: 0;
	left:0px;
	width: 2050px;
	margin-left: 0px; /* move left by half element's width */
}

#bg1-1 {
	position: absolute;
	top: 800px;
	left: 0px;
}

#bg1-2 {
	position: absolute;
	top: 1700px;
	left: 0px;
}

#bg1-3 {
	position: absolute;
	top: 2800px;
	left: 0px;
}

#bg1-4 {
	position: absolute;
	top: 3500px;
	left: 0px;
}

#bg1-5 {
	position: absolute;
	top: 4700px;
	left: 0px;
}

#bg1-6 {
	position: absolute;
	top: 5699px;
	left: 0px;
}

/* background_color */
#parallax-bg0 {
	z-index: 1;
	position: fixed;
	top: 0;
	width: 2050px;
	margin-left: 0px; /* move left by half element's width */
}

#bg0-1 {
	background-image:url(/images/texture_grey.jpg);
	background-repeat:repeat;
	position: absolute;
	height:1200px;
	width:150%;
	top: 1270px;
	left: -10px;
	margin-left:0;
}

#bg0-2 {
	background-color:#FFF;
	position: absolute;
	height:450px;
	width:150%;
	top: 2470px;
	left: -270px;
}

#bg0-3 {
	background-image:url(/images/pixel.jpg);
	background-repeat:repeat;
	position: absolute;
	height:1200px;
	width:150%;
	top: 2800px;
	left: -270px;
}

#bg0-4 {
	background-color:#3ec5ff;
	background-image:url(/images/bg_04.jpg);
	float:left;
	background-repeat:repeat-x;
	position: absolute;
	height:1900px;
	width:150%;
	top: 3500px;
	left: -270px;
}

#bg0-5 {
	background-image:url(/images/texture_white.jpg);
	background-repeat:repeat;
	position: absolute;
	height:1250px;
	width:150%;
	top: 5030px;
	left: -270px;
}

#bg0-6 {
	background-image:url(/images/texture_grey.jpg);
	background-repeat:repeat;
	position: absolute;
	height:1600px;
	width:150%;
	top: 6275px;
	left: -270px;
}

#logo {
	width:140px;
	height:104px;
	margin:17px 0 70px 0;
	background:url(/images/euphonic_logo_top.png) 0 0 / 100% no-repeat

}

/*------------MENU------------*/

#menu_container {
	float: left;
	width: 230px;
	position:fixed;
	left:0;
	top:0px;
	z-index: 300;
}

#menu_container.fixed {
	position: fixed;
}


#news, #services, #works, #recruit, #company, #contact, #lab {
	padding: 5px 0 0 5px;
	border:none;
	height:21px;
	margin-bottom:1px;
	margin-left:12px;
	width:110px;
	}

#inq_bnr a{
	position:fixed;
	bottom:180px;
	left:18px;
	background-image:url(/images/top_inq_bnr.jpg);
	background-repeat:no-repeat;
	background-position:0 0px;
	height:104px;
	width:104px;
}

#inq_bnr a:hover{

}

#recruit_2014 a{
	position:fixed;
	bottom:140px;
	left:18px;
	background-image:url(/images/recruit_2014.png);
	background-repeat:no-repeat;
	background-position:0 0px;
	height:29px;
	width:104px;
}

#recruit_2014 a:hover{
	background-position: 0 -29px;
}

#PlexusLink a{
	position:fixed;
	bottom:68px;
	left:18px;
	background-image:url(/images/plexus_logo.png);
	background-repeat:no-repeat;
	background-position:0 0px;
	height:29px;
	width:104px;
}

#privacyBtn{
	position:fixed;
	bottom:45px;
	left:18px;
	color:#b2b2b2;
	font-size:12px;
	background-image:url(/images/bullet_small.png);
	background-repeat:no-repeat;
	background-position:0 0px;
	height:5px;
	line-height:0px;
	padding-top:7px;
}

#privacyBtn a{
	color:#818181;
	padding-left:10px;
}

#privacyBtn a:hover{
	color:#818181;
	text-decoration:none;
	border-bottom: 1px solid #818181;
	padding-bottom:1px;
}

#EnglishBtn{
	position:fixed;
	bottom:105px;
	left:18px;
}

#EnglishBtn a{
	font-family:Arial, 'Helvetica Neue', Helvetica, Verdana, sans-serif;
	color:#818181;
	font-size:12px;
	font-weight:bold;
}

#EnglishBtn a:hover{
	color:#818181;
	text-decoration:none;
	border-bottom: 1px solid #818181;
	padding-bottom:1px;
}

#news a, #services a, #works a, #recruit a, #company a, #contact a, #lab a {
	height: 17px;
	width: 103px;
	display: block;
	overflow:hidden;
}

#news a {
	background:url(/images/menu_news.png) 0 -17px no-repeat;
}

#services a {
	background:url(/images/menu_services.png) 0 0 no-repeat;
}

#works a {
	background:url(/images/menu_works.png) 0 0 no-repeat;
}

#recruit a {
	background:url(/images/menu_recruit.png) 0 0 no-repeat;
}

#company a {
	background:url(/images/menu_company.png) 0 0 no-repeat;
}

#contact a {
	background:url(/images/menu_contact.png) 0 0 no-repeat;
}

#lab a {
	background:url(/images/menu_lab.png) 0 0 no-repeat;
}

#copyright {
	font-family:Verdana, Geneva, sans-serif;
	font-size:8px;
	color:#818181;
	line-height:13px;
	position:fixed;
	bottom:10px;
	left:18px;
	}

/* Menu Anchor Links */
#AnchorLinks {
	z-index: 110;
}

.bg5-1 {
	position: absolute;
	top: 0px;
}

.bg5-2 {
	position: absolute;
	top: 2750px;
}

.bg5-3 {
	position: absolute;
	top: 5860px;
}

.bg5-4 {
	position: absolute;
	top: 8220px;
}

.bg5-5 {
	position: absolute;
	top: 11170px;
}

.bg5-6 {
	position: absolute;
	top: 14090px;
}

.bg5-7 {
	position: absolute;
	top: 17000px;
}

.four {
	position: absolute;
	top: 7400px;
}

.five {
	position: absolute;
	top: 450px;
}

/*------------NEWS------------*/
#news_date{
	font-weight:bold;
	font-size:12px;
	margin-bottom:5px;
}
#news_title{
	color:#3dc6ff;
	font-size:17px;
	font-weight:bold;
	margin-bottom:10px;
}

#news_title a:visited, #news_title a {
	color:#3dc6ff;
} {
	color:#3dc6ff;
}

#news_title a:hover {
	text-decoration:none;
	border-bottom: 1px solid #3dc6ff;
	padding-bottom:2px;
}

#news_text{
	padding-bottom:15px;
	border-bottom:dotted;
	border-width:1px;
	margin-bottom:15px;
	border-color:#cccccc;
	min-height:72px;
	font-weight:normal;
	color:#707070;
}


#news_text a{
	color:#3dc6ff;
}

#news_text a:hover{
	text-decoration:underline;
}

/*------------COMPANY------------*/
#text_field_company {
width:100%;
float:left;
padding:10px 0 10px 0;
border-bottom:dotted 1px #3399cc;
}

#text_field_company1 {
font-weight:bold;
color:#fff;
width:175px;
text-align:left;
font-size:16px;
float:left;
}

#text_field_company2 {
font-weight:normal;
text-align:left;
line-height:23px;
width:495;
color:#333;
float:left;
}

#staff_box {
	padding-top: 15px;
	float:right;
	background: url(/images/photos.png) 0 -77 no-repeat;
}

#staff_box a {
	height: 77px;
	width: 200px;
	display: block;
	overflow:hidden;
	background: url(/images/photos.png) 0 0 no-repeat;
}

#staff_box a:hover {
	background-position: 0 -77px;
}

/*------------TEXT------------*/
#title_grey{
font-size:18px;
width:670px;
margin:35px 0 15px 0;
color:#414141;
font-weight:bold;
clear:both;
}

#services_title{
font-size:24px;
border-top:dotted 1px #565656;
padding-top:25px;
width:670px;
margin:35px 0 15px 0;
color:#fff;
font-weight:bold;
clear:both;
}

#servicesText {
color:#b7b7b7;
font-size:15px;
padding:0;
line-height:26px;
border-bottom:dotted 1px #565656;
padding-bottom:25px;
}

#white_text{
color:#fff;
}

#grey_text{
color:#a6a6a6;
}

#grey_text a{
color:#a6a6a6;
}

#grey_text a:hover{
color:#3dc6ff;
}

#darkgrey_text{
color:#414141;
font-size:13px;
font-weight:normal;
}

#cyan_text{
color:#3dc6ff;
}

#project_title{
font-size:18px;
margin:15px 0 10px 0;
color:#3dc6ff;
font-weight:bold;
}

/*------------SEND BUTTON------------*/
#send_btn {
padding: 0;
margin:35px 0 50px 0;
border:none;
clear:both;
}

#send_btn a {
height: 38px;
width: 174px;
display: block;
overflow:hidden;
background:url(/images/send_btn.gif) 0 0 no-repeat;
}

#send_btn a:hover {
background:url(/images/send_btn.gif) 0 -38px no-repeat;
}

/*------------FORM------------*/
form{
width:670px;
color:#414141;
text-align:right;
font-size:13px;
}

checkbox{
width:7px;
height:7px;
}

input[type='text'] {
color:#414141;
font-size:16px;
width:225px;
height:26px;
margin-bottom:10px;
background-color:#f2f2f2;
border:none;
}

form p{
text-align:left;
width:140px;
float:left;
font-weight:bold;
}

textarea {
width:490px;
color:#414141;
font-size:16px;
height:155px;
background-color:#f2f2f2;
border:none;
resize:none;
}

textarea:focus{
outline: 0 none;
}

input[type=text]:focus{
outline: 0 none;
}

#sampleText{
margin-left:15px;
width:250px;
float:right;
text-align:left;
font-size:13px;
color:#666666;
}

#cyan_box{
text-align:center;
font-size:24px;
font-weight:bold;
padding-top:25px;
margin-bottom:15px;
float:left;
width:670px;
height:55px;
background-color:#f2f2f2;
}

#cyan_box a{
color:#414141;
text-decoration:none;
}

#cyan_box a:hover {
color:#00a2ff;
text-decoration:none;
}


/*------------LAB------------*/
.labButton {
width: 100%;
height:20px;
float: left;
color:#a6a6a6;
border-bottom:dotted 1px #565656;
padding:15px 0 20px 0;
font-size:18px;
font-weight:bold;
text-align:left;
}

.labButton a, .labButton a:link, .labButton a:visited{
color:#fff;
display:block;
}

#sampleBtn{
	float:right;
	margin-top:5px;
}

#sampleBtn a {
	height: 17px;
	width: 78px;
	display: block;
	overflow:hidden;
	background: url(/images/sample_video.png) 0 0 no-repeat;
}

#sampleBtn a:hover {
	background-position: 0 -17px;
}

/*-----------------------------
		dotted line
-----------------------------*/
#dotted_line{
width:100%;
float:left;
height:1px;
border-bottom:dotted 1px #565656;
margin:20px 0 20px 0;
}

#dotted_line2{
width:670px;
float:left;
height:1px;
border-bottom:dotted 1px #cccccc;
margin:0 0 15px 0;
}

#WorksThumb{
	width:159px;
	display:block;
	padding:4px;
	float:left;
	height:160px;
	margin-right:0px;
	font-size:12px;
}

#WorksThumb:hover{
	background-color:#5d5d5d;
	color:#fff;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#WorksThumb a{
	color:#707070;
	display:block;
	line-height: 1;
}

#WorksThumb a:hover{
	display:block;
	color:#fff;
}

.WorksThumbTitle{
	margin-top:10px;
	margin-bottom: 5px;
	line-height:14px;
	color:#3dc6ff;
	font-weight:bold;
	font-size:13px;
	background:none;
}